/* ============================================================
   JEEVA NADI BOOKS
   PREMIUM CUSTOMER ACCOUNT
   ------------------------------------------------------------
   Complete visual system
============================================================ */


/* ============================================================
   DESIGN TOKENS
============================================================ */

:root {

    --navy-950: #020817;
    --navy-900: #06132b;
    --navy-850: #081a38;
    --navy-800: #0b2348;
    --navy-700: #10305e;

    --gold: #d6ad43;
    --gold-light: #f0d27b;
    --gold-soft: rgba(214, 173, 67, 0.12);

    --white: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --surface-muted: #eef2f7;

    --text: #14213a;
    --text-soft: #60708a;
    --text-muted: #8995a8;

    --border: #e5eaf1;
    --border-dark: rgba(255, 255, 255, 0.1);

    --success: #16845b;
    --success-bg: #eaf8f2;

    --warning: #b77912;
    --warning-bg: #fff6df;

    --danger: #c63f4b;
    --danger-bg: #fff0f1;

    --info: #2365b1;
    --info-bg: #edf5ff;

    --shadow-sm:
        0 4px 16px rgba(5, 20, 48, 0.06);

    --shadow-md:
        0 14px 35px rgba(5, 20, 48, 0.09);

    --shadow-lg:
        0 25px 70px rgba(5, 20, 48, 0.14);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --container:
        1180px;

}


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

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--surface-soft);

    color:
        var(--text);

    -webkit-font-smoothing:
        antialiased;

}


button,
input {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    max-width:
        100%;

    display:
        block;

}


/* ============================================================
   UTILITIES
============================================================ */

.hidden {

    display:
        none !important;

}


.section-kicker {

    display:
        inline-block;

    color:
        var(--gold);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


/* ============================================================
   LOADING VIEW
============================================================ */

.page-state {

    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;

    background:
        radial-gradient(
            circle at top right,
            #123568 0,
            var(--navy-950) 48%,
            #010511 100%
        );

}


.loading-card {

    width:
        min(420px, 100%);

    padding:
        46px 34px;

    text-align:
        center;

    color:
        var(--white);

}


.brand-mark {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        16px;

    color:
        var(--navy-950);

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    box-shadow:
        0 10px 35px rgba(214, 173, 67, 0.24);

}


.loading-card .brand-mark {

    margin:
        0 auto 28px;

}


.loading-spinner {

    width:
        38px;

    height:
        38px;

    margin:
        0 auto 24px;

    border:
        3px solid rgba(255, 255, 255, 0.14);

    border-top-color:
        var(--gold);

    border-radius:
        50%;

    animation:
        spin 0.8s linear infinite;

}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


.loading-card h2 {

    margin:
        0 0 10px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        1.65rem;

}


.loading-card p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.62);

    line-height:
        1.7;

}


/* ============================================================
   AUTH
============================================================ */

.auth-view {

    min-height:
        100vh;

}


.auth-shell {

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(420px, 0.85fr);

}


.auth-visual {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    padding:
        8vw;

    color:
        var(--white);

    background:
        linear-gradient(
            145deg,
            var(--navy-950),
            var(--navy-900) 55%,
            var(--navy-800)
        );

}


.auth-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -180px;

    bottom:
        -180px;

    border:
        1px solid rgba(214, 173, 67, 0.18);

    border-radius:
        50%;

}


.auth-visual::after {

    content:
        "";

    position:
        absolute;

    width:
        720px;

    height:
        720px;

    left:
        -460px;

    top:
        -360px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        50%;

}


.visual-glow {

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    filter:
        blur(80px);

    opacity:
        0.18;

}


.glow-one {

    top:
        10%;

    right:
        12%;

    background:
        var(--gold);

}


.glow-two {

    bottom:
        8%;

    left:
        12%;

    background:
        #2e79ce;

}


.visual-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        640px;

}


.brand-icon-large {

    width:
        76px;

    height:
        76px;

    margin-bottom:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        22px;

    color:
        var(--navy-950);

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    font-size:
        1.8rem;

}


.visual-content h1 {

    margin:
        18px 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(2.7rem, 5vw, 5.2rem);

    line-height:
        1.02;

    letter-spacing:
        -0.045em;

}


.visual-content h1 em {

    color:
        var(--gold-light);

    font-style:
        normal;

}


.visual-content p {

    max-width:
        560px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        1.05rem;

    line-height:
        1.85;

}


.trust-row {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        38px;

}


.trust-row span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        0.82rem;

}


.trust-row i {

    color:
        var(--gold-light);

}


.auth-panel {

    display:
        grid;

    place-items:
        center;

    padding:
        48px;

    background:
        var(--white);

}


.auth-panel-inner {

    width:
        min(440px, 100%);

}


.mobile-brand {

    display:
        none;

}


.auth-heading {

    margin-bottom:
        34px;

}


.auth-heading h2 {

    margin:
        10px 0 8px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        2.5rem;

    line-height:
        1.1;

}


.auth-heading p {

    margin:
        0;

    color:
        var(--text-soft);

}


.auth-button {

    width:
        100%;

    min-height:
        54px;

    border:
        0;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    font-weight:
        700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;

}


.auth-button:hover {

    transform:
        translateY(-2px);

}


.auth-button:disabled {

    cursor:
        not-allowed;

    opacity:
        0.65;

    transform:
        none;

}


.google-button {

    color:
        var(--text);

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

    background:
        var(--white);

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

}


.google-button:hover {

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

}


.button-icon {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

}


.primary-button {

    color:
        var(--navy-950);

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    box-shadow:
        0 10px 24px rgba(214, 173, 67, 0.22);

}


.auth-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        28px 0;

}


.auth-divider span {

    flex:
        1;

    height:
        1px;

    background:
        var(--border);

}


.auth-divider small {

    color:
        var(--text-muted);

    font-weight:
        700;

    font-size:
        0.68rem;

}


.field-group {

    margin-bottom:
        14px;

}


.field-group label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--text);

    font-size:
        0.83rem;

    font-weight:
        700;

}


.phone-field {

    display:
        flex;

    min-height:
        54px;

    overflow:
        hidden;

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

    border-radius:
        14px;

    background:
        var(--surface-soft);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.phone-field:focus-within {

    border-color:
        var(--gold);

    box-shadow:
        0 0 0 4px var(--gold-soft);

}


.country-code {

    display:
        grid;

    place-items:
        center;

    padding:
        0 16px;

    color:
        var(--navy-800);

    font-weight:
        800;

    background:
        var(--surface-muted);

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

}


.phone-field input {

    flex:
        1;

    width:
        100%;

    border:
        0;

    outline:
        0;

    padding:
        0 16px;

    color:
        var(--text);

    background:
        transparent;

}


.auth-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        24px;

    color:
        var(--text-muted);

    font-size:
        0.74rem;

    line-height:
        1.6;

}


.auth-note i {

    margin-top:
        3px;

    color:
        var(--success);

}


.message {

    margin-top:
        16px;

    padding:
        12px 14px;

    border-radius:
        12px;

    font-size:
        0.82rem;

    line-height:
        1.5;

}


.message.error {

    color:
        var(--danger);

    background:
        var(--danger-bg);

}


.message.success {

    color:
        var(--success);

    background:
        var(--success-bg);

}


.message.info {

    color:
        var(--info);

    background:
        var(--info-bg);

}


/* ============================================================
   OTP
============================================================ */

.otp-shell {

    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;

    background:
        radial-gradient(
            circle at top,
            #eaf0f8,
            #f7f9fc 55%
        );

}


.otp-card {

    width:
        min(480px, 100%);

    padding:
        48px;

    text-align:
        center;

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

    border-radius:
        28px;

    background:
        var(--white);

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

}


.otp-icon {

    width:
        68px;

    height:
        68px;

    margin:
        0 auto 24px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

    color:
        var(--navy-900);

    background:
        var(--gold-soft);

    font-size:
        1.45rem;

}


.otp-card h1 {

    margin:
        10px 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        2.3rem;

}


.otp-description {

    margin:
        0 auto 30px;

    max-width:
        370px;

    color:
        var(--text-soft);

    line-height:
        1.7;

}


.otp-field input {

    width:
        100%;

    height:
        68px;

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

    border-radius:
        16px;

    outline:
        0;

    text-align:
        center;

    letter-spacing:
        0.45em;

    font-size:
        1.65rem;

    font-weight:
        800;

    color:
        var(--navy-900);

    background:
        var(--surface-soft);

}


.otp-field input:focus {

    border-color:
        var(--gold);

    box-shadow:
        0 0 0 4px var(--gold-soft);

}


.otp-card .primary-button {

    margin-top:
        16px;

}


.otp-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        22px;

    margin-top:
        22px;

}


.text-button {

    padding:
        0;

    border:
        0;

    color:
        var(--navy-700);

    background:
        transparent;

    font-size:
        0.8rem;

    font-weight:
        700;

}


.text-button:hover {

    color:
        var(--gold);

}


/* ============================================================
   DASHBOARD HEADER
============================================================ */

.dashboard {

    min-height:
        100vh;

}


.dashboard-header {

    position:
        sticky;

    top:
        0;

    z-index:
        20;

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

    color:
        var(--white);

    background:
        rgba(3, 12, 29, 0.96);

    backdrop-filter:
        blur(18px);

}


.header-inner {

    width:
        min(var(--container), calc(100% - 40px));

    min-height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.site-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.site-brand .brand-mark {

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

}


.brand-name {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.brand-name strong {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        1.1rem;

}


.brand-name small {

    margin-top:
        5px;

    color:
        var(--gold-light);

    font-size:
        0.52rem;

    letter-spacing:
        0.25em;

    font-weight:
        800;

}


.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.header-link,
.icon-button,
.logout-button {

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius:
        10px;

    color:
        rgba(255, 255, 255, 0.78);

    background:
        rgba(255, 255, 255, 0.04);

}


.header-link {

    padding:
        0 14px;

    font-size:
        0.78rem;

    font-weight:
        700;

}


.icon-button {

    width:
        42px;

}


.logout-button {

    padding:
        0 14px;

    border-color:
        rgba(214, 173, 67, 0.28);

    color:
        var(--gold-light);

    background:
        rgba(214, 173, 67, 0.08);

    font-size:
        0.78rem;

    font-weight:
        700;

}


.header-link:hover,
.icon-button:hover,
.logout-button:hover {

    border-color:
        rgba(214, 173, 67, 0.45);

    color:
        var(--gold-light);

}


/* ============================================================
   ACCOUNT HERO
============================================================ */

.account-hero {

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            var(--navy-950),
            var(--navy-800)
        );

}


.hero-inner {

    width:
        min(var(--container), calc(100% - 40px));

    min-height:
        260px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.hero-copy h1 {

    margin:
        10px 0 8px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    letter-spacing:
        -0.03em;

}


.hero-copy h1 span {

    color:
        var(--gold-light);

}


.hero-copy p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.58);

}


.hero-avatar-wrap {

    position:
        relative;

}


.avatar-ring {

    width:
        110px;

    height:
        110px;

    padding:
        5px;

    border:
        1px solid rgba(214, 173, 67, 0.55);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.06);

}


.avatar-ring img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        50%;

    background:
        var(--surface-muted);

}


.online-dot {

    position:
        absolute;

    right:
        7px;

    bottom:
        7px;

    width:
        18px;

    height:
        18px;

    border:
        4px solid var(--navy-800);

    border-radius:
        50%;

    background:
        #29b777;

}


/* ============================================================
   CONTAINER
============================================================ */

.dashboard-container {

    width:
        min(var(--container), calc(100% - 40px));

    margin:
        0 auto;

    padding:
        40px 0 70px;

}


/* ============================================================
   SUMMARY
============================================================ */

.summary-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-bottom:
        58px;

}


.summary-card {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-height:
        108px;

    padding:
        20px;

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

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

    background:
        var(--white);

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

}


.summary-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        var(--navy-800);

    background:
        var(--gold-soft);

}


.summary-icon.pending-icon {

    color:
        var(--warning);

    background:
        var(--warning-bg);

}


.summary-card div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.summary-card span {

    color:
        var(--text-muted);

    font-size:
        0.7rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;

}


.summary-card strong {

    color:
        var(--navy-900);

    font-size:
        1.45rem;

}


/* ============================================================
   SECTION HEADINGS
============================================================ */

.section-heading-row {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;

}


.section-heading-row h2 {

    margin:
        7px 0 5px;

    color:
        var(--navy-950);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        2rem;

}


.section-heading-row p {

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.86rem;

}


.refresh-secondary {

    min-height:
        42px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

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

    border-radius:
        10px;

    color:
        var(--navy-800);

    background:
        var(--white);

    font-size:
        0.78rem;

    font-weight:
        700;

}


.refresh-secondary:hover {

    border-color:
        var(--gold);

    color:
        var(--gold);

}


/* ============================================================
   ORDERS
============================================================ */

.orders-section {

    margin-bottom:
        58px;

}


.orders-list {

    display:
        grid;

    gap:
        18px;

}


/* ============================================================
   ORDER CARD
============================================================ */

.order-card {

    overflow:
        hidden;

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

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

    background:
        var(--white);

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

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;

}


.order-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(214, 173, 67, 0.4);

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

}


/* ============================================================
   ORDER HEADER
============================================================ */

.order-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        22px 24px;

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

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafbfd
        );

}


.order-header-left {

    min-width:
        0;

}


.order-number {

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.order-label {

    color:
        var(--text-muted);

    font-size:
        0.66rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

}


.order-number strong {

    color:
        var(--navy-900);

    font-size:
        0.9rem;

    word-break:
        break-all;

}


.order-date {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

}


.order-header-right {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        8px;

}


.order-title {

    color:
        var(--text-muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;

}


.order-status,
.payment-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border-radius:
        999px;

    font-weight:
        800;

}


.order-status {

    padding:
        7px 11px;

    font-size:
        0.68rem;

}


.order-status.pending,
.order-status.processing,
.order-status.awaiting,
.order-status.verification {

    color:
        var(--warning);

    background:
        var(--warning-bg);

}


.order-status.approved,
.order-status.completed,
.order-status.success,
.order-status.delivered {

    color:
        var(--success);

    background:
        var(--success-bg);

}


.order-status.rejected,
.order-status.cancelled,
.order-status.failed {

    color:
        var(--danger);

    background:
        var(--danger-bg);

}


/* ============================================================
   ORDER ITEMS
============================================================ */

.order-items {

    padding:
        4px 24px;

}


.order-item {

    min-height:
        108px;

    display:
        grid;

    grid-template-columns:
        66px minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        16px;

    padding:
        18px 0;

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

}


.order-item:last-child {

    border-bottom:
        0;

}


.order-item-image-wrap {

    width:
        66px;

    height:
        80px;

    overflow:
        hidden;

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

    border-radius:
        10px;

    background:
        var(--surface-muted);

}


.order-item-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.order-item-info {

    min-width:
        0;

}


.order-item-name {

    color:
        var(--navy-900);

    font-size:
        0.92rem;

    font-weight:
        800;

    line-height:
        1.4;

}


.order-item-variant {

    margin-top:
        4px;

    color:
        var(--text-soft);

    font-size:
        0.76rem;

}


.order-item-price {

    margin-top:
        6px;

    color:
        var(--gold);

    font-size:
        0.75rem;

    font-weight:
        700;

}


.order-item-quantity {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        48px;

    justify-content:
        center;

    padding:
        7px 10px;

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

    border-radius:
        8px;

    color:
        var(--navy-800);

    background:
        var(--surface-soft);

    font-size:
        0.78rem;

}


.order-item-quantity strong {

    font-weight:
        800;

}


/* ============================================================
   ORDER FOOTER
============================================================ */

.order-footer {

    display:
        grid;

    grid-template-columns:
        1fr 1fr auto;

    align-items:
        center;

    gap:
        20px;

    padding:
        18px 24px;

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

    background:
        var(--surface-soft);

}


.order-footer-stat {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.order-footer-label {

    color:
        var(--text-muted);

    font-size:
        0.66rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;

}


.order-footer-stat strong {

    color:
        var(--navy-900);

    font-size:
        0.8rem;

}


.payment-status {

    width:
        fit-content;

    padding:
        5px 9px;

    font-size:
        0.68rem;

}


.payment-status.pending,
.payment-status.processing,
.payment-status.awaiting {

    color:
        var(--warning);

    background:
        var(--warning-bg);

}


.payment-status.approved,
.payment-status.completed,
.payment-status.success,
.payment-status.paid {

    color:
        var(--success);

    background:
        var(--success-bg);

}


.payment-status.rejected,
.payment-status.failed,
.payment-status.cancelled {

    color:
        var(--danger);

    background:
        var(--danger-bg);

}


.order-total {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        4px;

}


.order-total span {

    color:
        var(--text-muted);

    font-size:
        0.66rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;

}


.order-total strong {

    color:
        var(--navy-950);

    font-size:
        1.25rem;

}


/* ============================================================
   LOADING SKELETON
============================================================ */

.orders-loading {

    display:
        grid;

    gap:
        18px;

}


.order-skeleton {

    height:
        250px;

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

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

    background:
        linear-gradient(
            90deg,
            #f1f4f8 25%,
            #fafbfd 37%,
            #f1f4f8 63%
        );

    background-size:
        400% 100%;

    animation:
        skeleton 1.4s ease infinite;

}


@keyframes skeleton {

    0% {
        background-position:
            100% 0;
    }

    100% {
        background-position:
            -100% 0;
    }

}


/* ============================================================
   EMPTY
============================================================ */

.empty-orders {

    padding:
        60px 24px;

    text-align:
        center;

    border:
        1px dashed #ccd4df;

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

    background:
        var(--white);

}


.empty-icon {

    width:
        70px;

    height:
        70px;

    margin:
        0 auto 20px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

    color:
        var(--navy-800);

    background:
        var(--gold-soft);

    font-size:
        1.5rem;

}


.empty-orders h3 {

    margin:
        0 0 8px;

    color:
        var(--navy-900);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        1.5rem;

}


.empty-orders p {

    margin:
        0 0 22px;

    color:
        var(--text-soft);

    font-size:
        0.84rem;

}


.shop-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        44px;

    padding:
        0 18px;

    border-radius:
        10px;

    color:
        var(--navy-950);

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    font-size:
        0.78rem;

    font-weight:
        800;

}


/* ============================================================
   PROFILE
============================================================ */

.profile-section {

    margin-top:
        58px;

}


.profile-card {

    display:
        grid;

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

    overflow:
        hidden;

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

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

    background:
        var(--white);

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

}


.profile-item {

    min-height:
        92px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        7px;

    padding:
        20px 24px;

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

}


.profile-item:nth-child(odd) {

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

}


.profile-item span {

    color:
        var(--text-muted);

    font-size:
        0.67rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


.profile-item strong {

    color:
        var(--navy-900);

    font-size:
        0.86rem;

    word-break:
        break-word;

}


.profile-uid {

    grid-column:
        1 / -1;

    border-right:
        0 !important;

    border-bottom:
        0;

}


.profile-uid strong {

    color:
        var(--text-soft);

    font-family:
        monospace;

    font-size:
        0.74rem;

}


/* ============================================================
   FOOTER
============================================================ */

.account-footer {

    padding:
        28px 20px;

    text-align:
        center;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

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

    background:
        var(--white);

}


/* ============================================================
   MODAL
============================================================ */

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;

}


.modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(2, 8, 23, 0.68);

    backdrop-filter:
        blur(6px);

}


.modal-card {

    position:
        relative;

    z-index:
        2;

    width:
        min(420px, 100%);

    padding:
        34px;

    text-align:
        center;

    border-radius:
        24px;

    background:
        var(--white);

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

}


.modal-icon {

    width:
        58px;

    height:
        58px;

    margin:
        0 auto 18px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    color:
        var(--danger);

    background:
        var(--danger-bg);

}


.modal-card h2 {

    margin:
        0 0 8px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        1.8rem;

}


.modal-card p {

    margin:
        0;

    color:
        var(--text-soft);

    line-height:
        1.65;

    font-size:
        0.84rem;

}


.modal-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

    margin-top:
        26px;

}


.modal-cancel,
.modal-confirm {

    min-height:
        46px;

    border:
        0;

    border-radius:
        10px;

    font-weight:
        800;

}


.modal-cancel {

    color:
        var(--navy-800);

    background:
        var(--surface-muted);

}


.modal-confirm {

    color:
        var(--white);

    background:
        var(--danger);

}


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

@media (max-width: 1050px) {

    .auth-shell {

        grid-template-columns:
            1fr;

    }


    .auth-visual {

        display:
            none;

    }


    .auth-panel {

        min-height:
            100vh;

    }


    .mobile-brand {

        display:
            flex;

        align-items:
            center;

        gap:
            10px;

        margin-bottom:
            50px;

        color:
            var(--navy-900);

        font-family:
            "Playfair Display",
            Georgia,
            serif;

        font-weight:
            700;

    }


    .mobile-brand .brand-mark {

        width:
            42px;

        height:
            42px;

    }


    .summary-grid {

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

    }

}


@media (max-width: 720px) {

    .header-inner,
    .hero-inner,
    .dashboard-container {

        width:
            min(100% - 28px, var(--container));

    }


    .header-inner {

        min-height:
            68px;

    }


    .header-link span,
    .logout-button span {

        display:
            none;

    }


    .header-link,
    .logout-button {

        width:
            42px;

        padding:
            0;

    }


    .hero-inner {

        min-height:
            220px;

    }


    .avatar-ring {

        width:
            82px;

        height:
            82px;

    }


    .hero-copy h1 {

        font-size:
            2rem;

    }


    .dashboard-container {

        padding-top:
            28px;

    }


    .summary-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;

        margin-bottom:
            42px;

    }


    .summary-card {

        min-height:
            96px;

        padding:
            15px;

        gap:
            10px;

    }


    .summary-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }


    .summary-card strong {

        font-size:
            1.15rem;

    }


    .section-heading-row {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .order-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .order-header-right {

        align-items:
            flex-start;

    }


    .order-footer {

        grid-template-columns:
            1fr 1fr;

    }


    .order-total {

        grid-column:
            1 / -1;

        align-items:
            flex-start;

        padding-top:
            8px;

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

    }


    .profile-card {

        grid-template-columns:
            1fr;

    }


    .profile-item,
    .profile-item:nth-child(odd) {

        border-right:
            0;

    }


    .profile-uid {

        grid-column:
            auto;

    }

}


@media (max-width: 480px) {

    .auth-panel {

        padding:
            28px 20px;

    }


    .auth-heading h2 {

        font-size:
            2rem;

    }


    .otp-card {

        padding:
            32px 22px;

    }


    .hero-inner {

        align-items:
            center;

    }


    .hero-avatar-wrap {

        flex:
            0 0 auto;

    }


    .summary-grid {

        grid-template-columns:
            1fr;

    }


    .summary-card {

        min-height:
            82px;

    }


    .order-items {

        padding:
            4px 16px;

    }


    .order-item {

        grid-template-columns:
            54px minmax(0, 1fr) auto;

        gap:
            11px;

    }


    .order-item-image-wrap {

        width:
            54px;

        height:
            68px;

    }


    .order-item-name {

        font-size:
            0.8rem;

    }


    .order-item-quantity {

        padding:
            5px 7px;

        min-width:
            40px;

    }


    .order-header,
    .order-footer {

        padding-left:
            16px;

        padding-right:
            16px;

    }


    .order-footer {

        grid-template-columns:
            1fr;

    }


    .order-total {

        grid-column:
            auto;

    }

}