/*======================================================================

FORM SYSTEM
======================================================================*/


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

.ms-form{

    display:flex;

    flex-direction:column;

    gap:24px;

    width:100%;

}

.ms-form-card{

    background:var(--ms-surface);

    border:1px solid rgba(197,165,114,.28);

    border-radius:var(--ms-radius-md);

    padding:40px;

    box-shadow:var(--ms-shadow-sm);

}

.ms-form-header{

    margin-bottom:12px;

}

.ms-form-title{

    font-size:32px;

    font-weight:700;

    color:var(--ms-white);

}

.ms-form-description{

    margin-top:10px;

    color:var(--ms-text-soft);

    line-height:1.7;

}

@media (max-width:767px){

    .ms-form-card{

        padding:28px;

    }

}
/*======================================================================
 FORM FIELD
======================================================================*/

.ms-form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.ms-label{

    font-size:15px;

    font-weight:600;

    color:var(--ms-white);

}

.ms-required{

    color:var(--ms-gold);

    margin-left:4px;

}

.ms-input,
.ms-select,
.ms-textarea{

    width:100%;

    background:var(--ms-surface-2);

    border:1px solid var(--ms-border);

    border-radius:var(--ms-radius-sm);

    color:var(--ms-white);

    font-size:16px;

    font-family:var(--ms-font);

    padding:16px 18px;

    transition:
        border-color var(--ms-speed),
        box-shadow var(--ms-speed),
        background var(--ms-speed);

}

.ms-input::placeholder,
.ms-textarea::placeholder{

    color:var(--ms-text-soft);

    opacity:.8;

}

.ms-textarea{

    min-height:160px;

    resize:vertical;

}

.ms-input:focus,
.ms-select:focus,
.ms-textarea:focus{

    outline:none;

    border:1px solid var(--ms-gold);

    border-color:var(--ms-gold);

    background:var(--ms-surface-2);

    box-shadow:0 0 0 3px rgba(197,165,114,.18);

}

.ms-input:disabled,
.ms-select:disabled,
.ms-textarea:disabled{

    opacity:.6;

    cursor:not-allowed;

}

.ms-help{

    font-size:14px;

    color:var(--ms-text-soft);

}

.ms-error{

    font-size:14px;

    color:#ff7d7d;

}

.ms-success{

    font-size:14px;

    color:#74d69b;

}

/*======================================================================
 CHECKBOX & RADIO
======================================================================*/

.ms-check-group{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.ms-check{

    display:flex;
    align-items:center;
    gap:14px;

    cursor:pointer;

    color:var(--ms-text);

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

}

.ms-check input{

    width:20px;
    height:20px;

    margin:0;

    cursor:pointer;

    accent-color:var(--ms-gold);

    flex-shrink:0;

}

.ms-check span{

    color:var(--ms-text-soft);

    user-select:none;

}

.ms-check:hover span{

    color:var(--ms-white);

}

.ms-check input:checked + span{

    color:var(--ms-white);

}

/*======================================================================
 VALIDATION & STATUS
======================================================================*/


:root{

    --ms-success:#5BBF84;
    --ms-error:#E06A6A;
    --ms-warning:#E3B341;

}



.ms-is-success{

    border-color:var(--ms-success) !important;

    box-shadow:0 0 0 3px rgba(91,191,132,.18);

}



.ms-is-error{

    border-color:var(--ms-error) !important;

    box-shadow:0 0 0 3px rgba(224,106,106,.18);

}



.ms-is-warning{

    border-color:var(--ms-warning) !important;

    box-shadow:0 0 0 3px rgba(227,179,65,.18);

}



.ms-help{

    font-size:14px;

    color:var(--ms-text-soft);

    line-height:1.5;

}

.ms-error{

    font-size:14px;

    color:var(--ms-error);

    font-weight:500;

    line-height:1.5;

}

.ms-success{

    font-size:14px;

    color:var(--ms-success);

    font-weight:500;

    line-height:1.5;

}

.ms-warning{

    font-size:14px;

    color:var(--ms-warning);

    font-weight:500;

    line-height:1.5;

}



.ms-error::before{

    content:"✕ ";

}

.ms-success::before{

    content:"✓ ";

}

.ms-warning::before{

    content:"⚠ ";

}

/*======================================================================
 FORM ACTIONS
======================================================================*/

.ms-form-actions{

    display:flex;

    gap:16px;

    margin-top:12px;

}

.ms-form-actions .ms-btn{

    display:flex;

    flex:1;

    justify-content:center;

}

.ms-form-actions-right{

    justify-content:flex-end;

}

.ms-form-actions-center{

    justify-content:center;

}

.ms-form-actions-between{

    justify-content:space-between;

}



@media (max-width:767px){

    .ms-form-actions{

        flex-direction:column;

    }

    .ms-form-actions .ms-btn{

        width:100%;

        flex:none;

    }

}
/*======================================================================
 LOADING & SUBMIT STATES
======================================================================*/


.ms-btn-loading{

    position:relative;

    pointer-events:none;

    cursor:wait;

    opacity:.85;

}


.ms-btn-loading .ms-btn-text{

    visibility:hidden;

}


.ms-btn-loading::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.28);

    border-top-color:currentColor;

    border-radius:50%;

    animation:ms-spin .8s linear infinite;

}


.ms-btn-primary.ms-btn-loading::after{

    border-top-color:var(--ms-bg);

}


.ms-btn-secondary.ms-btn-loading::after,
.ms-btn-outline.ms-btn-loading::after,
.ms-btn-ghost.ms-btn-loading::after{

    border-top-color:var(--ms-gold);

}


.ms-btn-submitted{

    pointer-events:none;

    opacity:.9;

}


@keyframes ms-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}