/**
 * Fichier  : /pages/login/assets/css/form.css
 * Fonction : style des formulaires login/signup
 */

#login form {
    border: none;
    padding: 0;
    margin: 0;

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

#login fieldset {
    border: none;
    padding: 0;
    margin: 0;

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

#login form p {
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

#login form label {
    font-family: 'content-font';
    font-size: 12px;
    font-weight: 500;

    color: rgba(255,255,255,.75);
}

#login form input,
#login form select {
    width: 100%;
    padding: 14px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)
    );

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;

    font-family: 'content-font';
    font-size: 14px;

    color: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

#login form input::placeholder {
    color: rgba(255,255,255,.35);
}

#login form input:focus,
#login form select:focus {
    outline: none;
    border-color: rgba(255,123,0,.35);

    box-shadow:
        0 0 0 3px rgba(255,123,0,.15);

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );
}

#login .\33 _columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

#billing_shipping {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.02)
    );

    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

#billing_shipping span {
    color: rgba(255,255,255,.85);
    font-size: 13px;
}

#billing_shipping input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

#shipping_fields {
    padding: 18px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.02)
    );

    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

#shipping_fields legend {
    margin-bottom: 15px;

    font-family: 'bold-font';
    font-size: 15px;

    color: #fff;
}

#login button[type="submit"],
#login .shadowButton {
    cursor: pointer;

    padding: 16px 24px;

    border: none;
    border-radius: 999px;

    font-family: 'bold-font';
    font-size: 14px;
    font-weight: 600;

    color: #fff;

    background: linear-gradient(
        135deg,
        #8e0e00,
        #c91f16 30%,
        #e9401b 65%,
        #ff7b00
    );

    box-shadow:
        0 8px 24px rgba(233,64,27,.35),
        0 0 18px rgba(255,123,0,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#login button[type="submit"]:hover,
#login .shadowButton:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(233,64,27,.40),
        0 0 24px rgba(255,123,0,.22);
}

#login button[type="submit"]:active,
#login .shadowButton:active {
    transform: scale(.98);
}

.error_alert {
    min-height: 16px;

    font-size: 12px;
    color: #ff6b6b;
}

.forgot-password {
    position: relative;
}

.forgot-password {
    display: inline-block;
    margin-top: 15px;

    text-decoration: none;

    color: rgba(255,255,255,.75);

    transition: color .2s ease;
}

.forgot-password:hover {
    color: #ff7b00;
}

.g-recaptcha {
    margin-top: 10px;
}

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

    #login .\33 _columns {
        grid-template-columns: 1fr;
    }

    #login {
        margin: 30px auto;
    }

    #login section {
        padding: 15px;
    }

}

/* ==================================================
   SELECTS — modern dark/glass
   ================================================== */

#login form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;
    min-height: 48px;
    padding: 14px 48px 14px 14px;

    color: rgba(255,255,255,.92);

    background:
        url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23ff7b00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 15px center,
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 24px rgba(0,0,0,.18);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease;
}

#login form select:hover {
    border-color: rgba(255,123,0,.30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 28px rgba(0,0,0,.22),
        0 0 18px rgba(255,123,0,.08);
}

#login form select:focus {
    border-color: rgba(255,123,0,.45);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 3px rgba(255,123,0,.16),
        0 12px 30px rgba(0,0,0,.24),
        0 0 22px rgba(255,123,0,.12);
}

#login form select:active {
    transform: scale(.99);
}

/* Placeholder option */
#login form select option[value=""] {
    color: rgba(255,255,255,.45);
}

/* Options natives — rendu variable selon navigateur */
#login form select option {
    background: #120f0e;
    color: #fff;
}

#login form select option:checked {
    background: #e9401b;
    color: #fff;
}