/*====================================================*
 * MADIBENG CONNECT
 * FORMS
 *====================================================*/


/*====================================================*
 * FORM WRAPPER
 *====================================================*/

.mc-form{

    width:100%;

}


.mc-form-group{

    margin-bottom:22px;

}


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

.mc-form label{

    display:block;

    margin-bottom:8px;

    color:var(--mc-dark,#0f172a);

    font-size:14px;

    font-weight:700;

    line-height:1.4;

}


.mc-form label .required{

    color:#dc2626;

    margin-left:3px;

}


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

.mc-form input,
.mc-form select,
.mc-form textarea{

    display:block;

    width:100%;

    box-sizing:border-box;

    padding:13px 15px;

    border:1px solid var(
        --mc-border,
        #e2e8f0
    );

    border-radius:12px;

    background:#fff;

    color:var(
        --mc-dark,
        #0f172a
    );

    font-family:inherit;

    font-size:15px;

    line-height:1.5;

    outline:none;

    transition:

        border-color .2s ease,

        box-shadow .2s ease,

        background .2s ease;

}


.mc-form input,
.mc-form select{

    min-height:50px;

}


.mc-form textarea{

    min-height:150px;

    resize:vertical;

}


/*====================================================*
 * PLACEHOLDER
 *====================================================*/

.mc-form input::placeholder,
.mc-form textarea::placeholder{

    color:#94a3b8;

    opacity:1;

}


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

.mc-form input:focus,
.mc-form select:focus,
.mc-form textarea:focus{

    border-color:var(
        --mc-primary,
        #0D6EFD
    );

    background:#fff;

    box-shadow:

        0 0 0 4px
        rgba(13,110,253,.10);

}


/*====================================================*
 * DISABLED
 *====================================================*/

.mc-form input:disabled,
.mc-form select:disabled,
.mc-form textarea:disabled{

    background:#f8fafc;

    color:#94a3b8;

    cursor:not-allowed;

}


/*====================================================*
 * SEARCH FORM
 *====================================================*/

.mc-search-form{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

}


.mc-search-form input{

    flex:1;

    min-width:0;

}


.mc-search-form button{

    flex-shrink:0;

}


/*====================================================*
 * SEARCH ICON INPUT
 *====================================================*/

.mc-input-icon{

    position:relative;

}


.mc-input-icon i{

    position:absolute;

    top:50%;

    left:16px;

    transform:translateY(-50%);

    color:#94a3b8;

    pointer-events:none;

}


.mc-input-icon input{

    padding-left:45px;

}


/*====================================================*
 * SELECT
 *====================================================*/

.mc-form select{

    appearance:none;

    -webkit-appearance:none;

    padding-right:42px;

    background-image:

        linear-gradient(
            45deg,
            transparent 50%,
            #64748b 50%
        ),

        linear-gradient(
            135deg,
            #64748b 50%,
            transparent 50%
        );

    background-position:

        calc(100% - 18px) 21px,

        calc(100% - 13px) 21px;

    background-size:

        5px 5px,

        5px 5px;

    background-repeat:no-repeat;

}


/*====================================================*
 * CHECKBOXES / RADIOS
 *====================================================*/

.mc-checkbox,
.mc-radio{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:12px;

}


.mc-checkbox input,
.mc-radio input{

    width:18px;

    height:18px;

    min-height:18px;

    margin:2px 0 0;

    padding:0;

    accent-color:var(
        --mc-primary,
        #0D6EFD
    );

}


.mc-checkbox label,
.mc-radio label{

    margin:0;

    color:var(
        --mc-muted,
        #64748b
    );

    font-size:14px;

    font-weight:500;

}


/*====================================================*
 * FORM ROW
 *====================================================*/

.mc-form-row{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;

}


/*====================================================*
 * THREE COLUMN ROW
 *====================================================*/

.mc-form-row-3{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:20px;

}


/*====================================================*
 * HELP TEXT
 *====================================================*/

.mc-form-help{

    display:block;

    margin-top:6px;

    color:#94a3b8;

    font-size:12px;

    line-height:1.5;

}


/*====================================================*
 * ERROR
 *====================================================*/

.mc-form-error{

    display:block;

    margin-top:6px;

    color:#dc2626;

    font-size:12px;

    font-weight:600;

}


.mc-form input.mc-error,
.mc-form select.mc-error,
.mc-form textarea.mc-error{

    border-color:#dc2626;

    box-shadow:

        0 0 0 3px
        rgba(220,38,38,.08);

}


/*====================================================*
 * SUCCESS
 *====================================================*/

.mc-form-success{

    padding:14px 16px;

    margin-bottom:20px;

    border:1px solid #bbf7d0;

    border-radius:12px;

    background:#f0fdf4;

    color:#166534;

    font-size:14px;

    line-height:1.5;

}


/*====================================================*
 * FORM NOTICE
 *====================================================*/

.mc-form-notice{

    padding:14px 16px;

    margin-bottom:20px;

    border:1px solid #bfdbfe;

    border-radius:12px;

    background:#eff6ff;

    color:#1e40af;

    font-size:14px;

    line-height:1.5;

}


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

.mc-form-actions{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;

}


.mc-form-actions-right{

    justify-content:flex-end;

}


.mc-form-actions-center{

    justify-content:center;

}


/*====================================================*
 * LISTING FORM
 *====================================================*/

.mc-listing-form{

    max-width:900px;

    margin:0 auto;

    padding:35px;

    background:#fff;

    border:1px solid var(
        --mc-border,
        #e2e8f0
    );

    border-radius:20px;

    box-shadow:

        0 8px 30px
        rgba(15,23,42,.06);

}


.mc-listing-form-section{

    padding-bottom:30px;

    margin-bottom:30px;

    border-bottom:1px solid
        var(--mc-border,#e2e8f0);

}


.mc-listing-form-section:last-child{

    padding-bottom:0;

    margin-bottom:0;

    border-bottom:0;

}


.mc-listing-form-section h2{

    margin:0 0 7px;

    font-size:22px;

}


.mc-listing-form-section p{

    margin:0 0 22px;

    color:var(--mc-muted,#64748b);

    font-size:14px;

    line-height:1.6;

}


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

.mc-form input[type="file"]{

    padding:10px;

    background:#f8fafc;

    cursor:pointer;

}


.mc-form input[type="file"]::file-selector-button{

    margin-right:12px;

    padding:8px 12px;

    border:0;

    border-radius:8px;

    background:

        rgba(13,110,253,.10);

    color:

        var(--mc-primary,#0D6EFD);

    font-family:inherit;

    font-weight:700;

    cursor:pointer;

}


/*====================================================*
 * SEARCH PANEL
 *====================================================*/

.mc-search-panel{

    padding:25px;

    background:#fff;

    border:1px solid
        var(--mc-border,#e2e8f0);

    border-radius:18px;

    box-shadow:

        0 5px 20px
        rgba(15,23,42,.05);

}


/*====================================================*
 * SEARCH FILTERS
 *====================================================*/

.mc-search-filters{

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr auto;

    gap:12px;

    align-items:end;

}


/*====================================================*
 * CONTACT FORM
 *====================================================*/

.mc-contact-form{

    width:100%;

}


.mc-contact-form .mc-form-row{

    margin-bottom:0;

}


/*====================================================*
 * MOBILE
 *====================================================*/

@media(max-width:768px){

    .mc-form-row{

        grid-template-columns:1fr;

        gap:0;

    }


    .mc-form-row-3{

        grid-template-columns:1fr;

        gap:0;

    }


    .mc-search-form{

        flex-direction:column;

        align-items:stretch;

    }


    .mc-search-form button{

        width:100%;

    }


    .mc-form-actions{

        flex-direction:column;

        align-items:stretch;

    }


    .mc-form-actions .mc-btn{

        width:100%;

    }


    .mc-listing-form{

        padding:24px 18px;

        border-radius:16px;

    }


    .mc-search-filters{

        grid-template-columns:1fr;

    }

}


/*====================================================*
 * SMALL MOBILE
 *====================================================*/

@media(max-width:480px){

    .mc-form input,
    .mc-form select,
    .mc-form textarea{

        font-size:16px;

    }


    /*
     * 16px prevents iOS Safari from
     * automatically zooming when an
     * input receives focus.
     */

    .mc-listing-form{

        padding:20px 15px;

    }


    .mc-search-panel{

        padding:18px;

    }

}