/* Account-only layout. Header, footer, container, buttons, fields and cards are
 * the same storefront components from store.css + the selected static preset. */
:root {
    --auth-accent: var(--accent-primary, #00aaff);
    --auth-accent-secondary: var(--accent-secondary, #8b5cf6);
    --auth-action: var(--btn-primary-bg, var(--accent-primary, #00aaff));
    --auth-action-hover: var(--btn-primary-hover, var(--accent-primary, #00aaff));
    --auth-focus: var(--input-focus, var(--accent-primary, #00aaff));
    --auth-paper: var(--premium-paper, #f7f4ec);
    --auth-ink: var(--premium-ink, #18201d);
    --auth-ink-soft: var(--premium-ink-soft, #4d5a54);
    --auth-line: var(--premium-line, rgba(33, 48, 42, .12));
    --auth-shadow: var(--premium-shadow, 0 20px 60px rgba(51, 45, 34, .09));
    --auth-shadow-raised: var(--premium-shadow-raised, 0 24px 70px rgba(43, 39, 30, .15));
    --danger: #b42318;
    --success: #067647;
    --warning: #8a4b0f;
    --bs-danger: #b42318;
    --bs-danger-rgb: 180, 35, 24;
}

html { min-height: 100%; color-scheme: light; }
body { min-height: 100vh; }
main { flex: 1 0 auto; }

/* The protected origin renders a link with the exact visual search component;
 * cross-origin form submission remains forbidden by its form-action CSP. */
.identity-search-link {
    color: inherit;
    text-decoration: none;
}
.identity-search-link .search-input {
    display: flex;
    align-items: center;
    color: var(--text-muted, #58645f);
}
.identity-search-link .search-input-group {
    min-height: 3.5rem;
}
.search-submit {
    width: 2.75rem;
    min-height: 2.75rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    color: var(--premium-ink, #18201d);
    background: transparent;
}
.store-header[data-shell-mode="identity"] .city-selector[aria-disabled="true"] {
    cursor: default;
}
.store-header[data-shell-mode="identity"] .account-button.active {
    border-color: color-mix(in srgb, var(--premium-accent, #00aaff) 45%, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--premium-accent, #00aaff) 10%, transparent);
}

/* Authentication page composition only. The underlying .card/.btn/.form-control
 * primitives come from the storefront stack and are intentionally not redefined. */
.auth-card {
    position: relative;
    overflow: hidden;
    border-color: var(--auth-line);
    border-radius: 1.55rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--auth-shadow-raised);
    animation: customer-auth-surface-in .55s cubic-bezier(.22, 1, .36, 1) both;
}
.auth-card::before {
    content: "";
    position: absolute;
    width: 12rem;
    height: 12rem;
    top: -7rem;
    right: -5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--auth-accent) 13%, transparent);
    pointer-events: none;
}
.auth-card .card-body { position: relative; padding: clamp(1.5rem, 4vw, 3rem); }
.auth-card .card-title {
    position: relative;
    color: var(--auth-ink);
    letter-spacing: -.04em;
    text-wrap: balance;
}
.auth-card .btn-primary {
    min-height: 3.1rem;
    background: var(--auth-action);
    border-color: var(--auth-action);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--auth-accent) 25%, transparent);
}
.auth-card .btn-primary:hover {
    background: var(--auth-action-hover);
    border-color: var(--auth-action-hover);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--auth-accent) 32%, transparent);
}
.auth-card :where(.btn, .form-control, .form-check-input):focus-visible,
.account-tab-panel :where(.btn, .form-control, .form-check-input):focus-visible {
    outline: 3px solid var(--auth-focus);
    outline-offset: 2px;
}
.auth-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--auth-action);
    font-weight: 650;
    text-underline-offset: .2em;
}

/* Authenticated account composition. */
.account-nav { display: grid; gap: .35rem; }
.account-nav .nav { display: grid; gap: .35rem; }
.account-nav button.nav-link,
.account-nav a.nav-link {
    width: 100%;
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem .8rem;
    appearance: none;
    border: 0;
    border-radius: .7rem;
    color: var(--text-secondary, var(--auth-ink-soft));
    background: transparent;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.account-nav .nav-link::after { display: none; }
.account-nav .nav-link:hover,
.account-nav .nav-link.active,
.account-nav .nav-link[aria-selected="true"] {
    color: var(--auth-action);
    background: color-mix(in srgb, var(--auth-accent) 9%, #fff);
}
.account-nav .nav-link.text-danger {
    margin-top: .35rem;
    color: var(--danger) !important;
    background: #fff5f4 !important;
}
.account-nav .nav-link:focus-visible {
    outline: 3px solid var(--auth-focus);
    outline-offset: 2px;
}

.account-tab-panel { animation: customer-auth-surface-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.account-tab-panel > h1 {
    color: var(--auth-ink);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
    letter-spacing: -.05em;
    text-wrap: balance;
}
.account-tab-panel > .card,
.account-tab-panel .table-responsive,
.account-shell-nav {
    overflow: hidden;
    border: 1px solid var(--auth-line);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--auth-shadow);
}
.account-tab-panel .table-responsive { overflow-x: auto; }
.account-tab-panel .table th {
    color: var(--text-muted, #58645f);
    background: color-mix(in srgb, var(--auth-paper) 75%, #fff);
    font-size: .75rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.account-tab-panel .table td { padding-block: .9rem; }

.account-action-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-grid;
    place-items: center;
    border-radius: .8rem;
}
.account-action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .5rem;
}
.account-action-btn--primary {
    color: #fff;
    background: var(--auth-action);
    border-color: var(--auth-action);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--auth-accent) 22%, transparent);
}
.account-action-btn--primary:hover {
    color: #fff;
    background: var(--auth-action-hover);
    border-color: var(--auth-action-hover);
}
.account-action-btn--secondary:hover {
    color: var(--auth-action);
    border-color: color-mix(in srgb, var(--auth-accent) 45%, #fff);
}
.account-action-btn--danger:hover { color: #fff; }

@keyframes customer-auth-surface-in {
    from { opacity: 0; transform: translateY(.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .account-shell-nav { position: sticky; top: 10.5rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .account-shell-nav { top: 13.75rem; }
}
@media (max-width: 767.98px) {
    .account-nav .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-tab-panel > h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
}
@media (hover: hover) and (pointer: fine) {
    .account-nav .nav-link:hover { transform: translateX(.15rem); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .account-tab-panel,
    .account-nav .nav-link { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}