/* =================================
   PAGE BASE
================================= */
.mm-btn-alt{

display:inline-block;

padding:10px 16px;

background:#1f1f1f;
color:#fff;

border:1px solid #D35400;
border-radius:6px;

font-size:14px;
font-weight:600;

cursor:pointer;

transition:all .2s ease;

user-select:none;

}
.mm-btn-alt:hover{
background:#D35400;
color:#fff;
}


/* active click */

.mm-btn-alt:active{
transform:scale(.97);
}


/* optional icon spacing */

.mm-btn-alt i{
margin-right:6px;
}

body{
background:#333;
color:#fff;
font-family:Arial,Helvetica,sans-serif;
margin:0;
}


/* =================================
   FORM CONTAINER
================================= */

.mm-form{
max-width:720px;
margin:auto;
padding:20px;
background:#222;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,.5);
}

.mm-field{
margin-bottom:18px;
}


/* =================================
   LABELS
================================= */

.mm-form label{
display:block;
margin-bottom:6px;
font-size:14px;
font-weight:600;
color:#ddd;
}


/* =================================
   TEXT INPUTS
================================= */

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=url],
input[type=search],
input[type=date],
input[type=datetime-local],
input[type=time],
textarea,
select{

width:100%;
box-sizing:border-box;

background:#1a1a1a;
color:#fff;

border:1px solid #444;
border-radius:6px;

padding:12px 14px;

font-size:15px;

transition:all .2s ease;

}


/* TEXTAREA */

textarea{
min-height:120px;
resize:vertical;
}


/* PLACEHOLDER */

::placeholder{
color:#888;
}


/* =================================
   FOCUS STATE
================================= */

input:focus,
textarea:focus,
select:focus{

outline:none;
border-color:#D35400;

box-shadow:0 0 0 2px rgba(211,84,0,.25);

background:#222;

}


/* =================================
   BUTTONS
================================= */

button,
input[type=submit],
input[type=button],
input[type=reset]{

background:#D35400;
color:#fff;

border:none;
border-radius:6px;

padding:12px 20px;

font-size:15px;
font-weight:600;

cursor:pointer;

transition:all .2s ease;

}

button:hover,
input[type=submit]:hover{
background:#993B00;
}


/* =================================
   INPUT WRAPPER
================================= */

.mm-check,
.mm-radio{
display:inline-flex;
align-items:center;
gap:10px;
cursor:pointer;
line-height:1.4;
}


/* =================================
   HIDE DEFAULT INPUTS
================================= */

.mm-check input,
.mm-radio input{
position:absolute;
opacity:0;
}


/* =================================
   CHECKBOX BOX
================================= */

.mm-check span{

width:20px;
height:20px;

border:2px solid #D35400;
border-radius:4px;

display:inline-flex;
align-items:center;
justify-content:center;

flex-shrink:0;

}

.mm-check span:after{

content:"✓";
color:#fff;
font-size:14px;

transform:scale(0);
transition:.15s;

}

.mm-check input:checked + span{
background:#D35400;
}

.mm-check input:checked + span:after{
transform:scale(1);
}


/* =================================
   RADIO
================================= */

.mm-radio span{

width:20px;
height:20px;

border:2px solid #D35400;
border-radius:50%;

display:inline-flex;
align-items:center;
justify-content:center;

flex-shrink:0;

}

.mm-radio span:after{

content:"";

width:10px;
height:10px;

background:#D35400;
border-radius:50%;

transform:scale(0);
transition:.15s;

}

.mm-radio input:checked + span:after{
transform:scale(1);
}

.mm-radio input:checked + span:after{
transform:scale(1);
}
/* =================================
   SELECT
================================= */

select{
cursor:pointer;
}


/* =================================
   FILE INPUT
================================= */

input[type=file]{

background:#1a1a1a;
border:1px solid #444;

padding:10px;

border-radius:6px;

}


/* =================================
   RANGE
================================= */

input[type=range]{

width:100%;

accent-color:#D35400;

cursor:pointer;

}


/* =================================
   INLINE GROUP
================================= */

.mm-inline{

display:flex;
gap:12px;

}
.note-sec{

min-height:25px;              /* keeps space reserved */
padding:12px 16px;

border-radius:6px;

font-size:14px;
line-height:1.5;

margin:15px 0;

border-left:4px solid #D35400;

background:#1f1a16;

color:#ffd8bf;

box-shadow:0 2px 6px rgba(0,0,0,.35);

/* hidden by default */

opacity:0;
visibility:hidden;

transition:opacity .25s ease;

}
/* visible */

.note-sec.show{
opacity:1;
visibility:visible;
}


/* success version */

.note-sec.success{
border-left-color:#D35400;
background:#221a14;
color:#ffe2cc;
}


/* error version */

.note-sec.error{
border-left-color:#D35400;
background:#2a1d16;
color:#ffc9a6;
}
/* =================================
   MOBILE
================================= */

@media screen and (max-width:700px){

.mm-inline{
flex-direction:column;
}

input,
textarea,
select,
button{
font-size:16px;
padding:14px;
}

}