:root {
    --sc-night: #101828;
    --sc-graphite: #243447;
    --sc-teal: #0f766e;
    --sc-teal-2: #115e59;
    --sc-mint: #e8f7f4;
    --sc-sky: #eff6ff;
    --sc-gold: #b7791f;
    --sc-gold-soft: #fff7df;
    --sc-rose-soft: #fff1ed;
    --sc-border-soft: rgba(210, 225, 222, .9);
}

body {
    background: #f6f8f8;
}

.customer-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0, rgba(246, 248, 248, .96) 44rem, #f7faf9 100%);
}

.customer-navbar {
    border-bottom-color: rgba(210, 225, 222, .76);
}

.brand-mark {
    background: var(--sc-night);
    letter-spacing: 0;
}

.brand-word {
    letter-spacing: 0;
}

.brand-subtitle {
    display: block;
}

.customer-navbar .nav-link {
    min-height: 42px;
}

.customer-navbar .nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08);
}

.customer-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.customer-page-header .page-lead {
    margin-bottom: 0;
}

.page-heading {
    letter-spacing: 0;
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h2,
.section-heading h3 {
    margin-bottom: .2rem;
}

.soft-card,
.detail-tile,
.empty-state,
.list-card,
.promo-card,
.auth-card {
    border-radius: 8px;
    border-color: var(--sc-border-soft);
}

.soft-card,
.promo-card,
.auth-card {
    box-shadow: 0 18px 46px rgba(16, 24, 40, .06);
}

.detail-tile {
    background: #fbfdfc;
}

.muted-label {
    color: var(--sc-muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.icon-chip {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--sc-teal-2);
    background: var(--sc-mint);
}

.icon-chip.accent {
    color: #92400e;
    background: var(--sc-gold-soft);
}

.icon-chip.blue {
    color: #1d4ed8;
    background: var(--sc-sky);
}

.icon-chip.coral {
    color: #c2410c;
    background: var(--sc-rose-soft);
}

.customer-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: var(--sc-night);
    background-size: cover;
    background-position: center;
}

.customer-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(16, 24, 40, .92) 0, rgba(16, 24, 40, .72) 46%, rgba(16, 24, 40, .28) 100%),
        linear-gradient(180deg, rgba(16, 24, 40, .18) 0, rgba(16, 24, 40, .74) 100%);
}

.customer-hero .container-xl {
    position: relative;
    min-height: min(680px, calc(100vh - 72px));
    display: flex;
    align-items: center;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.customer-hero-content {
    width: min(720px, 100%);
}

.customer-hero-kicker {
    color: #b8fff1;
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: .65rem;
}

.customer-hero-title {
    max-width: 680px;
    margin-bottom: 1rem;
    color: #fff;
    font-size: clamp(2.15rem, 5vw, 4.25rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: 0;
}

.customer-hero-lead {
    max-width: 610px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    line-height: 1.7;
}

.tracking-console {
    width: min(720px, 100%);
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
    color: var(--sc-ink);
}

.tracking-console .form-label {
    margin-bottom: .55rem;
}

.tracking-console .tracking-input {
    min-height: 58px;
    border-color: transparent;
    background: #f7fbfa;
}

.hero-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.hero-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1.25rem;
}

.hero-proof {
    padding: .8rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
}

.hero-proof strong {
    display: block;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
}

.quick-action {
    border-radius: 8px;
}

.quick-action strong,
.quick-action .fw-bold {
    color: var(--sc-night);
}

.customer-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.customer-feature {
    padding: 1.25rem;
}

.customer-feature p {
    margin-bottom: 0;
}

.shipment-row {
    position: relative;
    overflow: hidden;
}

.shipment-row::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 6px;
    height: calc(100% - 2rem);
    border-radius: 999px;
    background: var(--sc-mint);
}

.filter-card {
    padding: 1rem;
}

.filter-card .btn {
    min-height: 44px;
}

.payment-method-note {
    padding: .85rem;
    border-radius: 8px;
    background: var(--sc-sky);
    color: #1e3a8a;
}

.timeline-content {
    box-shadow: 0 10px 24px rgba(16, 24, 40, .04);
}

.timeline-item:first-child .timeline-dot {
    background: var(--sc-gold);
}

.timeline-empty {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    border: 1px dashed var(--sc-border-soft);
    border-radius: 8px;
    color: var(--sc-muted);
    background: #fbfdfc;
}

.shipment-stepper {
    position: sticky;
    top: 84px;
    z-index: 10;
}

.shipment-stepper .stepper-item {
    position: relative;
    overflow: hidden;
}

.shipment-stepper .stepper-item.active::after {
    content: "";
    position: absolute;
    right: .7rem;
    bottom: .45rem;
    left: .7rem;
    height: 2px;
    border-radius: 999px;
    background: var(--sc-teal);
}

.form-section-title {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.summary-card {
    border: 1px solid rgba(183, 121, 31, .22);
    background: linear-gradient(180deg, #fff 0, #fffdfa 100%);
}

.summary-card #grandTotal {
    color: var(--sc-night);
}

.summary-row {
    align-items: baseline;
}

.address-card {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--sc-border-soft);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .05);
}

.address-card-header {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.address-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.address-card-actions .btn {
    min-height: 34px;
}

.promo-card {
    position: relative;
}

.promo-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sc-teal), var(--sc-gold));
}

.promo-code {
    letter-spacing: .02em;
}

.promo-selector {
    border: 1px solid rgba(15, 118, 110, .18);
    background: linear-gradient(180deg, #ffffff 0, #fbfffe 100%);
}

.promo-option {
    width: 100%;
    height: 100%;
    padding: .9rem;
    border: 1px solid var(--sc-border-soft);
    border-radius: 8px;
    background: #fff;
    color: var(--sc-ink);
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.promo-option:hover,
.promo-option.active {
    border-color: rgba(15, 118, 110, .42);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .07);
    transform: translateY(-1px);
}

.promo-option.active {
    background: var(--sc-mint);
}

.selected-promo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .8rem;
    border-radius: 8px;
    background: var(--sc-gold-soft);
    color: #7c4a03;
}

.help-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.help-topic {
    padding: .85rem;
    border: 1px solid var(--sc-border-soft);
    border-radius: 8px;
    background: #fbfdfc;
}

.auth-shell {
    background:
        linear-gradient(120deg, rgba(232, 247, 244, .72), rgba(255, 247, 223, .38)),
        #f8fbfa;
}

.auth-card {
    padding: 1.65rem;
}

.auth-side-note {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.auth-note-item {
    display: flex;
    gap: .6rem;
    align-items: center;
    color: var(--sc-muted);
    font-size: .88rem;
    font-weight: 700;
}

.btn[data-loading-label] {
    position: relative;
}

.btn-loading-spinner {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.mobile-bottom-bar {
    box-shadow: 0 -14px 36px rgba(16, 24, 40, .08);
}

.footer {
    color: #475467;
}

.footer .brand-mark {
    width: 34px;
    height: 34px;
}

@media (max-width: 991.98px) {
    .customer-page-header,
    .section-heading {
        display: block;
    }

    .customer-page-header > * + *,
    .section-heading > * + * {
        margin-top: 1rem;
    }

    .customer-hero .container-xl {
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .customer-hero::before {
        background:
            linear-gradient(180deg, rgba(16, 24, 40, .9) 0, rgba(16, 24, 40, .75) 55%, rgba(16, 24, 40, .62) 100%);
    }

    .hero-proof-grid,
    .customer-feature-grid {
        grid-template-columns: 1fr;
    }

    .shipment-stepper {
        position: static;
    }

    .shipment-row::after {
        display: none;
    }

    .position-sticky {
        position: static !important;
    }
}

@media (max-width: 575.98px) {
    .customer-hero-title {
        font-size: 2.2rem;
    }

    .tracking-console {
        padding: .85rem;
    }

    .tracking-console .input-group {
        display: grid;
        gap: .65rem;
    }

    .tracking-console .input-group > .form-control,
    .tracking-console .input-group > .btn {
        width: 100%;
        border-radius: 8px !important;
    }

    .hero-action-row .btn,
    .customer-page-header .btn,
    .section-heading .btn {
        width: 100%;
    }

    .help-topic-grid {
        grid-template-columns: 1fr;
    }
}