/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/components/forms.css
    Part 5.5 - Marketplace Forms System
==========================================================*/


/*==========================================================
    FORM RESET
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:var(--space-5);

}


.form-label{

    font-size:.9rem;

    font-weight:var(--fw-semibold);

    color:var(--text-primary);

}


.form-required{

    color:var(--color-danger);

}


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

.form-control{

    width:100%;

    height:46px;

    padding:0 var(--space-4);

    background:var(--white);

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

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

    color:var(--text-primary);

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

    font-size:var(--fs-base);

    transition:

        border-color var(--transition-fast),

        box-shadow var(--transition-fast),

        background var(--transition-fast);

}


.form-control::placeholder{

    color:var(--text-muted);

}


.form-control:hover{

    border-color:var(--gray-400);

}


.form-control:focus{

    outline:none;

    border-color:var(--color-primary);

    box-shadow:

        0 0 0 4px rgba(11,31,58,.1);

}


/*==========================================================
    TEXTAREA
==========================================================*/

textarea.form-control{

    height:auto;

    min-height:120px;

    padding:15px;

    resize:vertical;

}


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

.search-form{

    display:flex;

    align-items:center;

    width:100%;

}


.search-form .form-control{

    border-radius:var(--radius-round) 0 0 var(--radius-round);

}


.search-form button{

    height:46px;

    width:55px;

    border-radius:

        0

        var(--radius-round)

        var(--radius-round)

        0;

    background:var(--color-primary);

    color:var(--white);

}


/*==========================================================
    INPUT WITH ICON
==========================================================*/

.input-group{

    position:relative;

}


.input-group .form-control{

    padding-left:45px;

}


.input-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-muted);

}


/*==========================================================
    LOGIN / REGISTER FORMS
==========================================================*/

.auth-form{

    max-width:450px;

    margin:auto;

    background:var(--white);

    padding:var(--space-8);

    border-radius:var(--radius-lg);

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

    box-shadow:var(--shadow-md);

}


.auth-title{

    text-align:center;

    font-size:1.5rem;

    font-weight:var(--fw-bold);

    margin-bottom:var(--space-6);

}


.auth-footer{

    text-align:center;

    margin-top:var(--space-5);

    color:var(--text-muted);

}


/*==========================================================
    CHECKOUT FORM
==========================================================*/

.checkout-form{

    background:var(--white);

    border-radius:var(--radius-lg);

    padding:var(--space-6);

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

}


.checkout-title{

    font-size:1.2rem;

    font-weight:var(--fw-bold);

    margin-bottom:var(--space-5);

}


/*==========================================================
    ADDRESS FIELDS
==========================================================*/

.address-grid{

    display:grid;

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

    gap:var(--space-4);

}


.address-full{

    grid-column:1/-1;

}


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

.form-select{

    width:100%;

    height:46px;

    padding:0 40px 0 15px;

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

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

    background:

        var(--white)

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E")

        no-repeat;

    background-position:right 15px center;

    appearance:none;

}


.form-select:focus{

    outline:none;

    border-color:var(--color-primary);

}


/*==========================================================
    QUANTITY SELECTOR
==========================================================*/

.quantity-control{

    display:flex;

    align-items:center;

    height:42px;

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

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

    overflow:hidden;

}


.quantity-btn{

    width:42px;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gray-100);

    color:var(--text-primary);

}


.quantity-btn:hover{

    background:var(--color-primary);

    color:var(--white);

}


.quantity-input{

    width:55px;

    height:100%;

    text-align:center;

    border:none;

    outline:none;

    font-weight:var(--fw-semibold);

}


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

.checkbox-group{

    display:flex;

    align-items:center;

    gap:10px;

}


.checkbox-group input{

    width:18px;

    height:18px;

    accent-color:var(--color-primary);

}


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

.radio-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.radio-option{

    display:flex;

    align-items:center;

    gap:10px;

}


.radio-option input{

    width:18px;

    height:18px;

    accent-color:var(--color-primary);

}


/*==========================================================
    VALIDATION STATES
==========================================================*/

.is-valid{

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

}


.is-invalid{

    border-color:var(--color-danger)!important;

}


.form-message{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:.85rem;

    margin-top:6px;

}


.form-success{

    color:var(--color-success);

}


.form-error{

    color:var(--color-danger);

}


/*==========================================================
    PASSWORD FIELD
==========================================================*/

.password-wrapper{

    position:relative;

}


.password-toggle{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:var(--text-muted);

}


/*==========================================================
    FILE UPLOAD
==========================================================*/

.file-upload{

    position:relative;

    border:2px dashed var(--border-color);

    padding:30px;

    border-radius:var(--radius-lg);

    text-align:center;

    cursor:pointer;

}


.file-upload:hover{

    border-color:var(--color-primary);

}


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


@media(max-width:768px){


    .auth-form{

        padding:var(--space-5);

    }


    .checkout-form{

        padding:var(--space-4);

    }


    .address-grid{

        grid-template-columns:1fr;

    }


}



@media(max-width:480px){


    .form-control,
    .form-select{

        height:44px;

        font-size:.9rem;

    }


    .quantity-control{

        height:38px;

    }


    .quantity-btn{

        width:38px;

    }

}