/* Log in, sign up and account pages. Uses the tokens defined in app.css and
   the blue band (.info-hero) / clay card (.info-card) from pages.css.
   Logical properties only, so RTL works without overrides. */

/* ---------- Frame ---------- */

/* A narrow centred column: the band text and the card line up at ~460px. */
.auth-container { max-width: calc(460px + 2 * var(--gutter)); }

.auth-hero-center .info-hero-inner {
    justify-items: center;
    text-align: center;
}
.auth-hero-center .info-hero-intro { max-width: 36ch; }

.auth-card {
    padding: var(--space-6) var(--space-5);
}
@media (min-width: 640px) {
    .auth-card { padding: var(--space-8); }
}

/* ---------- Form ---------- */

.auth-notice { margin-bottom: var(--space-5); }

.auth-form {
    display: grid;
    gap: var(--space-5);
}
.auth-form .button-primary { margin-top: var(--space-1); }

/* Keep the hint grey even when the field shows an error underneath it. */
.field.has-error .field-hint { color: var(--ink-2); font-weight: 500; }

/* Password + show/hide toggle. The wrapper is always LTR, like the password itself. */
.password-input { position: relative; }
.password-input .input { padding-inline-end: 60px; }

.password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-block: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .15s, color .15s, transform .2s var(--bounce);
    -webkit-tap-highlight-color: transparent;
}
.password-toggle:hover { background: var(--blue-tint); color: var(--blue-deep); }
.password-toggle:active { transform: scale(.94); }
.password-toggle[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue); }
.password-toggle .password-icon-hide,
.password-toggle[aria-pressed="true"] .password-icon-show { display: none; }
.password-toggle[aria-pressed="true"] .password-icon-hide { display: block; }

/* Clay checkbox */
.check {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-3);
    min-height: 44px;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}
.check input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin: 0;
    border: var(--border) solid var(--line);
    border-radius: 9px;
    background: var(--field);
    box-shadow: inset 0 2px 4px rgba(16, 64, 150, .08);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.check input::before {
    content: "";
    width: 12px;
    height: 7px;
    margin-top: -3px;
    border: solid #fff;
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg) scale(0);
    transition: transform .2s var(--bounce);
}
.check input:checked {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.check input:checked::before { transform: rotate(-45deg) scale(1); }
.check input:focus-visible { box-shadow: var(--focus); border-radius: 9px; }

.auth-legal {
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    text-align: center;
}
.auth-legal a { font-weight: 700; }

.auth-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 2px solid var(--bg);
    color: var(--ink-2);
    text-align: center;
}
.auth-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
}

/* ---------- Account ---------- */

.account-page .info-hero-title { overflow-wrap: anywhere; }
/* Moves to its own line when it doesn't fit, and only breaks inside if it is wider than the screen. */
.account-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-weight: 700; color: #fff; }

.account-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.account-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: 600 var(--text-2xl)/1.25 var(--font-display);
    color: var(--ink);
}
[dir="rtl"] .account-title { font-weight: 700; line-height: 1.5; }
.account-count {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding-inline: var(--space-2);
    border-radius: 999px;
    background: var(--blue-tint);
    color: var(--blue-deep);
    font: 700 var(--text-sm)/1 var(--font-num);
    box-shadow: inset 0 -2px 0 rgba(16, 64, 150, .08);
}

.account-orders {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.account-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title total"
        "meta meta"
        "status status";
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: var(--border) solid var(--blue-tint);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--clay-sm);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s var(--bounce), box-shadow .2s ease-out, background-color .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
}
.account-order:hover { border-color: var(--blue-line); background: var(--field); }
.account-order:active { transform: translateY(2px); box-shadow: var(--clay-pressed); }
.account-order:focus-visible { border-radius: var(--r-lg); }

.account-order-title {
    grid-area: title;
    min-width: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.account-order-total {
    grid-area: total;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--blue-deep);
    font: 700 var(--text-lg)/1.2 var(--font-num);
    white-space: nowrap;
}
.account-order-arrow { color: var(--blue); transform: rotate(-90deg); }
[dir="rtl"] .account-order-arrow { transform: rotate(90deg); }

.account-order-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
}
.account-order-operator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-weight: 700;
}
.account-order-operator::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--op, var(--blue));
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.account-order-ref { font-family: var(--font-num); font-weight: 700; letter-spacing: .03em; color: var(--blue-deep); }

.account-order-status { grid-area: status; }

@media (min-width: 640px) {
    .account-order {
        grid-template-areas:
            "title total"
            "meta status";
        padding: var(--space-4) var(--space-5);
    }
    .account-order-status { justify-self: end; }
}

/* Empty state */
.account-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-8) 0 var(--space-2);
    text-align: center;
}
.account-empty-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-1);
    border-radius: var(--r-lg);
    background: var(--sun);
    color: #7A4B00;
    box-shadow: 0 12px 20px -12px rgba(138, 82, 0, .6), inset 0 -5px 0 rgba(0, 0, 0, .08), inset 0 4px 6px rgba(255, 255, 255, .8);
    transform: rotate(-6deg);
}
.account-empty-title {
    font: 600 var(--text-xl)/1.3 var(--font-display);
    color: var(--ink);
}
[dir="rtl"] .account-empty-title { font-weight: 700; line-height: 1.5; }
.account-empty-text {
    max-width: 36ch;
    color: var(--ink-2);
}
.account-empty-button { margin-top: var(--space-2); }

/* Below the card */
.account-extra {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}
.account-extra .notice { font-size: var(--text-base); }
.account-track-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: #1A4890;
}
.account-logout { display: flex; }
.account-logout .button { width: 100%; }
[dir="rtl"] .icon-logout { transform: scaleX(-1); }

@media (min-width: 640px) {
    .account-logout { justify-content: center; }
    .account-logout .button { width: auto; }
}