/* ============================================================
   Auth pages (Login, Register, etc.)
   Breakpoints:
     XS  ≤699px
     S   700px–1199px
     M   1200px–1399px
     L   ≥1400px
   ============================================================ */

:root {
    --blue-gray-50: #F2F4F7;
    --blue-gray-500: #5B7294;
    --black-100: #DBDBDB;
    --black-200: #B8B8B8;
    --black-300: #9E9E9E;
    --black-400: #7D7D7D;
    --black-700: #2B2B2B;
    --black-800: #141414;
    --white: #FFFFFF;
    --navy-400: #828FB0;
    --navy-800: #3D4760;
    --shadow-soft: rgba(0, 0, 0, 0.09);
    --shadow-strong: rgba(0, 0, 0, 0.25);
    --green-700: #54A300;
    --red-700: #CC1A1A;
    --red-800: #A11212;
    --blue-500: #2F8DF8FC;

    /* Spacing variables */
    --space-25: 1px;
    --space-50: 2px;
    --space-100: 4px;
    --space-200: 8px;
    --space-300: 12px;
    --space-350: 14px;
    --space-400: 16px;
    --space-500: 20px;
    --space-600: 24px;
    --space-700: 28px;
    --space-800: 32px;
    --space-900: 36px;
    --space-1000: 40px;
    --space-1100: 44px;
    --space-1500: 60px;
}

.auth-body {
    background-color: var(--blue-gray-50);
    min-height: 100vh;
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-1000) var(--space-800);
    min-height: 100vh;
    box-sizing: border-box;
}

.auth-logo {
    display: block;
    width: auto;
    margin-bottom: var(--space-600);
}

.auth-tagline {
    font-size: var(--space-500);
    color: var(--black-700);
    text-align: center;
    margin-bottom: var(--space-1500);

    @media (max-width: 699px) {
       font-size: var(--space-300);
    }
}

.auth-separator {
    color: var(--red-800);
}

.auth-card-wrapper {
    width: 100%;
    max-width: 620px;
}

.auth-card {
    background: var(--white);
    border-radius: var(--space-200);
    box-shadow: 0 var(--space-50) 16px var(--shadow-soft);
    padding: var(--space-1500);

    @media (max-width: 699px) {
        padding: var(--space-1500) var(--space-600);
    }
}

.auth-title {
    font-size: var(--space-700);
    font-weight: 700;
    color: var(--navy-800);
    margin-bottom: 0px;

    @media (max-width: 699px) {
        font-size: var(--space-500);
    }
}

.auth-subtitle {
    font-size: var(--space-400);
    color: var(--black-700);
    margin-bottom: var(--space-800);

    &.small {
        font-size: var(--space-350);
        margin-bottom: var(--space-400);
    }

    @media (max-width: 699px) {
        font-size: var(--space-350);
    }
}

.auth-alert {
    display: flex;
    align-items: center;
    gap: var(--space-300);
    border: var(--space-25) solid var(--black-100);
    border-left: var(--space-100) solid var(--red-700);
    border-radius: var(--space-200);
    padding: var(--space-300) var(--space-500);
    margin-bottom: var(--space-600);
    box-shadow: -1px 2px 4px 0px var(--shadow-strong);

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: var(--space-350);

        li + li {
            margin-top: var(--space-100);
        }
    }


    &.info {
        border-left-color: var(--blue-500);
    }
}

.auth-alert-icon {
    flex-shrink: 0;
    margin-top: var(--space-25);

    svg {
        display: block;
    }
}

.auth-alert-message {
    font-size: var(--space-350);
    line-height: 1.4;
    color: var(--black-700);
}

.auth-field {
    margin-bottom: var(--space-400);

    &.last {
        margin-bottom: var(--space-800);
    }

    &.no-margin {
        margin-bottom: 0;
    }
}

.auth-label {
    font-size: var(--space-300);
    font-weight: 600;
    color: var(--black-700);
    margin-bottom: var(--space-100);

    .req {
        color: var(--red-700);
        margin-left: var(--space-100);
    }
}

.auth-input {
    display: block;
    width: 100%;
    height: var(--space-1100);
    padding: var(--space-200) var(--space-300);
    font-size: var(--space-350);
    color: var(--black-700);
    background: var(--white);
    border: var(--space-25) solid var(--black-200);
    border-radius: var(--space-100);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;

    &.dynamic-required + .auth-field-error {
        display: none;
    }

    &:focus {
        outline: none;
        border-color: var(--navy-400);
        box-shadow: 0 0 0 var(--space-50) color-mix(in srgb, var(--navy-400) 20%, transparent);
    }

    &.input-validation-error {
        border-color: var(--red-700);
        box-shadow: 0 0 0 var(--space-50) color-mix(in srgb, var(--red-700) 20%, transparent);

        &.dynamic-required + .auth-field-error {
            display: block;
        }
    }

    &::placeholder {
        color: var(--black-300);
    }

    &::-ms-reveal,
    &::-ms-clear {
        display: none;
    }
}

.auth-input-group {
    position: relative;

    .auth-input {
        padding-right: var(--space-1100);
    }
}

.auth-eye-btn {
    position: absolute;
    right: var(--space-300);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--black-400);
    display: flex;
    align-items: center;
    line-height: 0;
}

.auth-field-error {
    display: block;
    font-weight: 600;
    font-size: var(--space-300);
    color: var(--red-700);
    margin-top: var(--space-100);
}

.auth-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: calc(var(--space-200) * -1);
    margin-bottom: var(--space-800);
}

.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-200);
    font-size: var(--space-350);
    color: var(--black-700);
    cursor: pointer;
    margin: 0;
    user-select: none;

    &.address {
        margin-top: var(--space-200);
        margin-bottom: var(--space-600);

        &:has(> .auth-checkbox:checked)  {
            margin-bottom: var(--space-800);
        }
    }
}

.auth-checkbox {
    width: var(--space-400);
    height: var(--space-400);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: var(--space-50) solid var(--black-200);
    border-radius: var(--space-100);
    background: var(--white);
    display: inline-grid;
    place-content: center;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    flex-shrink: 0;

    &:checked {
        border-color: var(--navy-400);
        background-color: var(--navy-400);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.1 7.2l2.2 2.3 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
}

.auth-link-muted {
    font-size: var(--space-350);
    color: var(--black-400);
    text-decoration: underline;

    &:hover {
        color: var(--black-700);
    }
}

.auth-link-sm {
    font-size: var(--space-300);
    font-weight: 600;
    color: var(--black-400);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.address-search-mode {
    position: relative;

    .auth-input {
        padding-left: var(--space-1000);
    }

    .search-icon {
        position: absolute;
        left: var(--space-300);
        top: var(--space-350);
        pointer-events: none;
        color: var(--black-400);
        display: flex;
        align-items: center;
        line-height: 0;
    }
}

.auth-btn {
    display: block;
    width: 100%;
    height: var(--space-1000);
    background: var(--navy-800);
    color: var(--white);
    border: none;
    border-radius: var(--space-100);
    font-size: var(--space-350);
    cursor: pointer;
    text-align: center;

    &.link {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
}

.auth-btn-forgot {
    margin-bottom: 12px;
}

.auth-back-link {
    display: block;
    text-align: center;
    padding: var(--space-300);
    border: 1px solid var(--black-200);
    border-radius: var(--space-100);
    color: var(--black-400);
    font-size: var(--space-350);
    line-height: var(--space-350);
    text-decoration: none;
    height: var(--space-1000);
    background: var(--white);

}

.auth-btn-forgot {
    margin-bottom: 12px;
}

.auth-back-link {
    display: block;
    text-align: center;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #7D7D7D;
    font-size: 14px;
    line-height: 14px;
    text-decoration: none;
    height: 40px;
    background: #fff;

}

.auth-footer-text {
    text-align: center;
    font-size: var(--space-350);
    color: var(--black-400);
    margin: var(--space-1000) 0 0;

    a {
        font-weight: 500;
        color: var(--navy-800);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* ---- Two-column field row (First/Last, Email/Phone) -------- */
/* Stays 2-col on all breakpoints — matches Figma XS spec */
.auth-row-2col {
    display: flex;
    align-items: stretch;
    gap: var(--space-400);

    & > * {
        flex: 1;
    }
}

/* ---- Select (Country) ------------------------------------- */
.auth-select {
    display: block;
    width: 100%;
    height: var(--space-1100);
    padding: var(--space-200) var(--space-300);
    font-size: var(--space-350);
    color: var(--black-700);
    border: var(--space-25) solid var(--black-200);
    border-radius: var(--space-100);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;

    &.dynamic-required + .auth-field-error {
        display: none;
    }

    &:focus {
        outline: none;
        border-color: var(--navy-400);
        box-shadow: 0 0 0 var(--space-50) color-mix(in srgb, var(--navy-400) 20%, transparent);
    }

    &.input-validation-error {
        border-color: var(--red-700);
        box-shadow: 0 0 0 var(--space-50) color-mix(in srgb, var(--red-700) 20%, transparent);

        &.dynamic-required + .auth-field-error {
            display: block;
        }
    }
}

/* ---- Password strength hints ------------------------------ */
.auth-password-hints {
    margin-top: var(--space-200);
    display: none;
    flex-direction: column;
    gap: var(--space-100);

    &.reset-page {
        margin-top: var(--space-400);
    }

    &.visible {
        display: flex;
    }
}


.auth-hint {
    display: flex;
    align-items: center;
    gap: var(--space-100);
    font-size: var(--space-300);
    color: var(--red-700);
    transition: color 0.15s;

    .auth-hint-icon-check {
        display: none;
    }

    &.valid {
        color: var(--green-700);
    }

    &.valid > .auth-hint-icon-check {
        display: inline-flex;
    }

     &.valid > .auth-hint-icon-cross {
        display: none;
    }

    &:not(.valid) > .auth-hint-icon-cross {
        display: inline-flex;
    }
}

/* ---- Address section -------------------------------------- */
.auth-address-divider {
    border: none;
    border-top: var(--space-50) solid var(--black-200);
    margin: var(--space-600) calc(var(--space-1500) * -1);

    @media (max-width: 699px) {
        margin-inline: calc(var(--space-600) * -1);
    }
}

.auth-address-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-300);

    .auth-label {
        margin-bottom: 0;
    }
}



/* ---- Legal text ------------------------------------------- */
.auth-legal {
    font-size: var(--space-350);
    color: var(--black-700);
    line-height: 1.5;
    margin: var(--space-200) 0 0;

    a {
        text-decoration: underline;
        color: var(--black-700);
    }
}

/* ---- Footer -------------------------------------------- */
.auth-footer {
    margin-top: var(--space-1500);
    text-align: center;

    @media (max-width: 699px) {
        margin-top: var(--space-1000);
    }
}

.auth-footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-400);
    flex-wrap: wrap;
    margin-bottom: var(--space-200);
    font-size: var(--space-350);
}

.auth-footer-link {
    font-size: var(--space-350);
    color: var(--blue-gray-500);
    text-decoration: none;
    transition: color 0.15s;

    &:hover {
        text-decoration: underline;
    }

    &:focus {
        outline: var(--space-50) solid var(--navy-400);
        outline-offset: var(--space-50);
        border-radius: var(--space-50);
    }
}

.auth-footer-separator {
    color: var(--blue-gray-500);
}

.auth-footer-copyright {
    color: var(--black-800);
    font-size: var(--space-350);
     margin: 0;
}

.auth-email {
    font-weight: 600;
}

.mb {
    margin-bottom: var(--space-800);
}