:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-soft: #f1f4f7;
    --text: #17212b;
    --muted: #66727d;
    --border: #dfe5ea;
    --primary: #136a3a;
    --primary-dark: #0e512c;
    --accent: #f3c623;
    --danger: #b42318;
    --danger-bg: #fff1f0;
    --success: #16794d;
    --success-bg: #ecfdf3;
    --shadow: 0 10px 30px rgba(23, 33, 43, 0.08);
    --radius: 16px;
    --radius-sm: 10px;
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

img {
    max-width: 100%;
    display: block;
}

.hidden {
    display: none !important;
}

.container {
    width: min(
        calc(100% - 32px),
        var(--container)
    );
    margin: 0 auto;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
}

.navbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.08rem;
    font-weight: 800;
    white-space: nowrap;
}

.brand-flag {
    font-size: 1.5rem;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-link {
    color: var(--muted);
    font-weight: 650;
}

.nav-link:hover {
    color: var(--text);
}

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 750;
}

.cart-count {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #161616;
    font-size: 0.78rem;
    font-weight: 800;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 750;
    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-outline {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text);
}

.btn-outline:hover {
    border-color: #c7d0d8;
}


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

.hero {
    background:
        radial-gradient(
            circle at top right,
            rgba(243, 198, 35, 0.25),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #103c27 0%,
            #136a3a 55%,
            #1c7d49 100%
        );
    color: #ffffff;
}

.hero-inner {
    padding: 72px 0 76px;
}

.hero-content {
    max-width: 760px;
}

.eyebrow {
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: var(--accent);
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hero h1 span {
    display: block;
    color: var(--accent);
}

.hero p {
    max-width: 660px;
    margin: 20px 0 28px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
}

.search-box {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: min(100%, 700px);
}

.search-box input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--text);
    outline: none;
}

.search-box input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(243, 198, 35, 0.25);
}

.search-box .btn {
    min-width: 110px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    padding: 56px 0;
}

.section-header {
    margin-bottom: 28px;
}

.section-header.centered {
    text-align: center;
}

.section-title {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.section-subtitle {
    margin: 8px 0 0;
    color: var(--muted);
}

.shops-section {
    padding-top: 10px;
    padding-bottom: 76px;
}


/* =========================================================
   CATEGORY GRID
   ========================================================= */

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.category-card {
    min-height: 128px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(23, 33, 43, 0.03);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.category-card:hover {
    transform: translateY(-3px);
    border-color: #c7d0d8;
    box-shadow: var(--shadow);
}

.category-icon {
    font-size: 2rem;
}

.category-name {
    font-weight: 750;
}


/* =========================================================
   SHOPS
   ========================================================= */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.shop-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 5px 20px rgba(23, 33, 43, 0.04);
}

.shop-card-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

.shop-placeholder,
.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #eef3ef,
            #e5ece7
        );
    font-size: 3.5rem;
}

.shop-card-body {
    padding: 16px;
}

.shop-location {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 650;
}

.shop-card h3 {
    margin: 0;
    font-size: 1.3rem;
}

.shop-card p {
    min-height: 36px;
    margin: 8px 0 12px;
    color: var(--muted);
}

.shop-button {
    width: 100%;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-section {
    padding: 72px 0;
    background: #eef3ef;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.step-card {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.step-number {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-weight: 850;
}

.step-card h3 {
    margin: 0 0 7px;
}

.step-card p {
    margin: 0;
    color: var(--muted);
}


/* =========================================================
   SHOP PAGE
   ========================================================= */

.shop-hero {
    padding: 26px 0 0;
}

.back-link {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--muted);
    font-weight: 650;
}

.back-link:hover {
    color: var(--text);
}

.shop-header-card {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.shop-header-content {
    display: flex;
    align-items: center;
    gap: 22px;
}

.shop-header-icon {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #edf5ef;
    font-size: 2.6rem;
}

.shop-header-card h1 {
    margin: 2px 0 6px;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.shop-header-card p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
}

.shop-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.product-search {
    width: 280px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    outline: none;
}

.product-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(19, 106, 58, 0.12);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.product-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 5px 20px rgba(23, 33, 43, 0.04);
}

.product-image {
    width: 100%;
    height: 235px;
    overflow: hidden;
    padding: 0;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center;
}

.product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 12px;
}

.product-category {
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-body h3 {
    margin: 0;
    font-size: 1.2rem;
}

.product-description {
    min-height: 36px;
    margin: 6px 0 0;
    color: var(--muted);
}

.product-price {
    margin-top: 15px;
    font-size: 1.35rem;
    font-weight: 850;
}

.product-unit {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.9rem;
}

.product-stock {
    margin: 8px 0 12px;
    font-size: 0.88rem;
    font-weight: 750;
}

.in-stock {
    color: var(--success);
}

.out-of-stock {
    color: var(--danger);
}

.product-add-button {
    width: 100%;
    margin-top: auto;
}


/* =========================================================
   CART
   ========================================================= */

.cart-section,
.checkout-section {
    padding-top: 36px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
}

.cart-items-panel {
    display: grid;
    gap: 14px;
}

.cart-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.cart-item-image {
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface-soft);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info h3 {
    margin: 0;
    font-size: 1.05rem;
}

.cart-item-unit {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.86rem;
}

.cart-item-price {
    margin-top: 8px;
    font-weight: 750;
}

.cart-item-controls {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.quantity-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.quantity-control button {
    width: 36px;
    height: 36px;
    border: 0;
    background: #ffffff;
    color: var(--text);
    font-size: 1.15rem;
}

.quantity-control button:hover {
    background: var(--surface-soft);
}

.quantity-control span {
    min-width: 34px;
    text-align: center;
    font-weight: 800;
}

.cart-line-total {
    font-size: 1rem;
}

.remove-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger);
    font-weight: 700;
}

.cart-summary,
.checkout-summary {
    position: sticky;
    top: 92px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.cart-summary h2,
.checkout-summary h2 {
    margin: 0 0 18px;
    font-size: 1.2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}

.summary-total {
    margin-top: 8px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    font-size: 1.15rem;
}

.checkout-button {
    width: 100%;
    margin-top: 16px;
}

.payment-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.minimum-order-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8dc;
    color: #6c5710;
    font-size: 0.85rem;
    font-weight: 650;
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.checkout-form-card {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.checkout-form-card h2 {
    margin: 0 0 22px;
    font-size: 1.25rem;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 750;
}

.form-group label span {
    color: var(--muted);
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    outline: none;
}

.form-group input {
    height: 46px;
}

.form-group textarea {
    min-height: 108px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(19, 106, 58, 0.12);
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
}

.payment-method-box {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 22px 0;
    padding: 16px;
    border: 1px solid #cde5d6;
    border-radius: 12px;
    background: #f0f9f3;
}

.payment-method-icon {
    font-size: 1.5rem;
}

.payment-method-box strong {
    display: block;
}

.payment-method-box p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.form-error {
    margin: 16px 0;
    padding: 11px 12px;
    border: 1px solid #f5c1bd;
    border-radius: 10px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 650;
}

.checkout-submit {
    width: 100%;
}

.summary-shop {
    margin-bottom: 12px;
    color: var(--primary);
    font-weight: 800;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.checkout-item-meta {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.84rem;
}


/* =========================================================
   SUCCESS
   ========================================================= */

.order-success {
    width: min(100%, 700px);
    margin: 20px auto 60px;
    padding: 34px;
    text-align: center;
    background: var(--surface);
    border: 1px solid #cde5d6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.success-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 1.8rem;
    font-weight: 900;
}

.order-success h2 {
    margin: 6px 0 8px;
}

.order-success > p {
    color: var(--muted);
}

.order-reference-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.order-reference-card > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.order-reference-card span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.77rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collection-code {
    font-size: 1.3rem;
    letter-spacing: 0.08em;
}

.collection-instructions {
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 12px;
    background: #fff8dc;
    text-align: left;
}

.collection-instructions h3 {
    margin: 0 0 5px;
}

.collection-instructions p {
    margin: 0 0 7px;
    color: var(--muted);
}

.order-success-actions {
    display: flex;
    justify-content: center;
}


/* =========================================================
   STATES
   ========================================================= */

.loading,
.empty-state,
.error-state {
    padding: 28px;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.error-state {
    color: var(--danger);
    border-color: #f5c1bd;
    background: var(--danger-bg);
}

.empty-state {
    grid-column: 1 / -1;
}

.empty-icon {
    margin-bottom: 8px;
    font-size: 2.4rem;
}

.empty-state h2 {
    margin: 0 0 6px;
}

.empty-state p {
    margin: 0 0 16px;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 200;
    max-width: min(
        calc(100% - 36px),
        360px
    );
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.error {
    border-color: #f5c1bd;
    color: var(--danger);
}


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

.site-footer {
    padding: 38px 0;
    background: #102018;
    color: #dce8df;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.footer-inner p {
    margin: 5px 0 0;
    color: #aebcb3;
}


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

@media (max-width: 980px) {

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-grid,
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary,
    .checkout-summary {
        position: static;
    }

}


@media (max-width: 700px) {

    .container {
        width: min(
            calc(100% - 22px),
            var(--container)
        );
    }

    .navbar {
        min-height: 64px;
        align-items: flex-start;
        padding: 11px 0;
    }

    .nav-actions {
        gap: 7px;
    }

    .nav-actions .btn {
        min-height: 38px;
        padding: 0 11px;
    }

    .hero-inner {
        padding: 54px 0 58px;
    }

    .search-box {
        flex-direction: column;
    }

    .search-box .btn {
        width: 100%;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-grid,
    .product-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .shop-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .product-search {
        width: 100%;
    }

    .shop-header-content {
        align-items: flex-start;
    }

    .shop-header-icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        font-size: 2rem;
    }

    .cart-item {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .cart-item-image {
        width: 70px;
        height: 70px;
    }

    .cart-item-controls {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .order-reference-card {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
    }

}


@media (max-width: 460px) {

    .brand {
        font-size: 0.95rem;
    }

    .nav-actions .nav-link {
        display: none;
    }

    .category-card {
        min-height: 110px;
    }

    .section {
        padding: 44px 0;
    }

    .checkout-form-card,
    .cart-summary,
    .checkout-summary,
    .shop-header-card,
    .order-success {
        padding: 18px;
    }

}


/* =========================================================
   CHECKOUT OPTIONS
   ========================================================= */

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.option-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-card-content {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.option-card-content strong {
    font-size: 1rem;
}

.option-card-content span {
    color: var(--muted);
    font-size: 0.86rem;
}

.option-card .option-price {
    color: var(--primary);
    font-weight: 750;
}

.option-card input:checked + .option-card-content {
    border-color: var(--primary);
    background: #f0f9f3;
    box-shadow:
        0 0 0 3px rgba(19, 106, 58, 0.10);
}

.option-card:hover .option-card-content {
    border-color: #b9c8bf;
}

@media (max-width: 700px) {

    .option-grid {
        grid-template-columns: 1fr;
    }

}


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

.auth-card {
    width: min(100%, 520px);
    margin: 30px auto 60px;
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.auth-card h1 {
    margin: 0 0 8px;
    font-size: 2rem;
}

.auth-form {
    margin-top: 26px;
}

.auth-submit {
    width: 100%;
}

.auth-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.auth-footer p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.88rem;
}


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

.dashboard-section {
    padding-top: 36px;
}

.dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.dashboard-shop-selector {
    width: min(100%, 310px);
}

.dashboard-shop-selector label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.82rem;
    font-weight: 750;
    color: var(--muted);
}

.dashboard-shop-selector select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
}


.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 26px;
}

.dashboard-stat-card {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.dashboard-stat-card span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-stat-card strong {
    font-size: 1.65rem;
}


.dashboard-toolbar {
    margin-bottom: 18px;
}

.dashboard-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-tab {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font-weight: 750;
}

.dashboard-tab:hover {
    border-color: #bcc9c1;
}

.dashboard-tab.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.tab-count {
    display: inline-flex;
    min-width: 20px;
    justify-content: center;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.75rem;
}

.dashboard-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
}


.dashboard-orders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-order-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 5px 20px rgba(23, 33, 43, 0.04);
}

.dashboard-order-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 20px 12px;
}

.order-number-label {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dashboard-order-header h2 {
    margin: 0;
    font-size: 1.1rem;
}


.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 850;
}

.status-placed {
    background: #fff5d6;
    color: #725900;
}

.status-accepted {
    background: #e8f1ff;
    color: #24528b;
}

.status-packing {
    background: #eee8ff;
    color: #59418b;
}

.status-ready_for_collection {
    background: #e6f7ef;
    color: #176846;
}

.status-collected,
.status-completed {
    background: #e9f7ef;
    color: #176846;
}

.status-rejected,
.status-cancelled {
    background: #fff0ef;
    color: var(--danger);
}


.dashboard-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 0 20px 16px;
    color: var(--muted);
    font-size: 0.8rem;
}


.order-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 20px 16px;
}

.order-detail-box {
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.order-detail-box span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.order-detail-box strong {
    font-size: 0.88rem;
}


.delivery-order-box,
.collection-order-box {
    margin: 0 20px 16px;
    padding: 14px;
    border-radius: 11px;
}

.delivery-order-box {
    border: 1px solid #cde5d6;
    background: #f0f9f3;
}

.collection-order-box {
    border: 1px solid #e6d9ad;
    background: #fff9e3;
}

.delivery-order-box strong,
.collection-order-box strong {
    display: block;
    margin-bottom: 4px;
}

.delivery-order-box p,
.collection-order-box p {
    margin: 0 0 5px;
    color: var(--text);
}

.delivery-order-box span,
.collection-order-box span {
    color: var(--muted);
    font-size: 0.82rem;
}


.dashboard-order-items {
    padding: 0 20px 16px;
}

.dashboard-order-items h3 {
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.dashboard-order-item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
}

.customer-note-box {
    margin: 0 20px 16px;
    padding: 12px;
    border-radius: 10px;
    background: #f7f7f7;
}

.customer-note-box strong {
    font-size: 0.82rem;
}

.customer-note-box p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}


.dashboard-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 20px;
    border-top: 1px solid var(--border);
}

.dashboard-order-footer > div:first-child {
    display: flex;
    flex-direction: column;
}

.dashboard-order-footer > div:first-child strong {
    font-size: 1.15rem;
}

.dashboard-order-footer > div:first-child span {
    color: var(--muted);
    font-size: 0.75rem;
}

.dashboard-action-group {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.btn-danger-outline {
    border-color: #e7b5b1;
    background: #ffffff;
    color: var(--danger);
}

.btn-danger-outline:hover {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.dashboard-empty {
    margin-top: 12px;
}


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

@media (max-width: 980px) {

    .dashboard-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-orders-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .dashboard-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-shop-selector {
        width: 100%;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-order-header {
        flex-direction: column;
    }

    .order-type-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-order-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-action-group {
        justify-content: stretch;
    }

    .dashboard-action-group .btn {
        flex: 1;
    }

}



/* Order search */
.dashboard-search {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.dashboard-search-input-wrap {
    flex: 1;
    min-width: 240px;
}

.dashboard-search-input-wrap label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.dashboard-search-input-wrap input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

.dashboard-search-input-wrap input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 118, 73, 0.10);
}

.dashboard-search-button,
.dashboard-search-clear {
    min-height: 42px;
    white-space: nowrap;
}

.dashboard-search-clear {
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
}

.dashboard-search-clear:hover {
    border-color: #bcc9c1;
}

@media (max-width: 700px) {

    .dashboard-search {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-search-button,
    .dashboard-search-clear {
        width: 100%;
    }

}


/* Custom delete confirmation modal */

body.confirm-modal-open {
    overflow: hidden;
}

.custom-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.12s ease,
        visibility 0.12s ease;
}

.custom-confirm-modal.visible {
    opacity: 1;
    visibility: visible;
}

.custom-confirm-modal[hidden] {
    display: flex;
}

.custom-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(2px);
}

.custom-confirm-card {
    position: relative;
    width: min(440px, 100%);
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.24);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.12s ease;
}

.custom-confirm-modal.visible
.custom-confirm-card {
    transform: translateY(0) scale(1);
}

.custom-confirm-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.10);
    font-size: 1.35rem;
}

.custom-confirm-card h2 {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.custom-confirm-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.custom-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.custom-confirm-cancel {
    min-width: 92px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
}

.custom-confirm-cancel:hover {
    border-color: #bcc9c1;
}

.custom-confirm-confirm {
    min-width: 125px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.custom-confirm-confirm:hover {
    filter: brightness(0.94);
}

.custom-confirm-confirm.custom-confirm-danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.custom-confirm-confirm.custom-confirm-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

@media (max-width: 560px) {

    .custom-confirm-card {
        padding: 22px;
    }

    .custom-confirm-actions {
        flex-direction: column-reverse;
    }

    .custom-confirm-actions .btn {
        width: 100%;
    }

}


/* Dashboard top-level views */
.dashboard-views {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f6f8f7;
}

.dashboard-view-tab {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
}

.dashboard-view-tab:hover {
    color: var(--text);
}

.dashboard-view-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(23, 33, 43, 0.06);
}


/* Product management */
.products-management-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.products-management-title {
    margin: 0;
    font-size: 1.45rem;
}

.products-management-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.products-management-toolbar
.dashboard-search-input-wrap {
    flex: 1;
}

.product-status-filter-wrap {
    min-width: 190px;
}

.product-status-filter-wrap label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.product-status-filter-wrap select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

.products-result-count {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.products-management-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.product-management-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 5px 20px rgba(23, 33, 43, 0.04);
}

.product-management-image {
    min-height: 180px;
    background: #f4f6f5;
}

.product-management-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
}

.product-management-image-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 2rem;
}

.product-management-content {
    min-width: 0;
    padding: 18px;
}

.product-management-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.product-management-category {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-management-top h3 {
    margin: 0;
    font-size: 1.05rem;
}

.product-management-description {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.product-status-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.product-status-active {
    background: rgba(23, 118, 73, 0.10);
    color: var(--primary);
}

.product-status-inactive {
    background: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}

.product-status-out_of_stock {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}

.product-management-details {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.product-management-details > div {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fafbfa;
}

.product-management-details span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.product-management-details strong {
    font-size: 0.87rem;
}

.product-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

@media (max-width: 900px) {

    .products-management-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 680px) {

    .products-management-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .products-management-heading
    .btn {
        width: 100%;
    }

    .products-management-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .product-status-filter-wrap {
        min-width: 0;
    }

    .product-management-card {
        grid-template-columns: 1fr;
    }

    .product-management-image img,
    .product-management-image-placeholder {
        min-height: 210px;
    }

}


/* Add Product form modal */

body.product-form-open {
    overflow: hidden;
}

.product-form-modal {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.12s ease,
        visibility 0.12s ease;
}

.product-form-modal.visible {
    opacity: 1;
    visibility: visible;
}

.product-form-modal[hidden] {
    display: flex;
}

.product-form-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(2px);
}

.product-form-card {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.24);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.12s ease;
}

.product-form-modal.visible
.product-form-card {
    transform: translateY(0) scale(1);
}

.product-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-bottom: 1px solid var(--border);
}

.product-form-header h2 {
    margin: 2px 0 5px;
    font-size: 1.35rem;
}

.product-form-header p {
    margin: 0;
    color: var(--muted);
}

.product-form-close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
}

.product-form-close:hover {
    border-color: #bcc9c1;
}

.product-form {
    padding: 24px 26px 26px;
}

.product-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-form-grid .full {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

.form-group textarea {
    min-height: 105px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(23, 118, 73, 0.10);
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.75rem;
}

.product-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
}

.product-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.product-form-error {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.07);
    color: #b91c1c;
    font-size: 0.86rem;
}

.product-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.product-form-cancel {
    min-width: 100px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
}

@media (max-width: 650px) {

    .product-form-card {
        max-height: calc(100vh - 20px);
    }

    .product-form-header,
    .product-form {
        padding-left: 18px;
        padding-right: 18px;
    }

    .product-form-grid {
        grid-template-columns: 1fr;
    }

    .product-form-grid .full {
        grid-column: auto;
    }

    .product-form-actions {
        flex-direction: column-reverse;
    }

    .product-form-actions .btn {
        width: 100%;
    }

}


.product-edit-image-picker {
    display: flex;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f7faf8;
    color: var(--primary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.product-edit-image-picker:hover {
    border-color: var(--primary);
    background: rgba(23, 118, 73, 0.05);
}



.product-management-image {
    position: relative;
}

.product-status-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.product-status-overlay-out {
    background: rgba(220, 38, 38, 0.72);
    color: #ffffff;
}

.product-status-overlay-inactive {
    background: rgba(31, 41, 55, 0.68);
    color: #ffffff;
}


/* Shop Settings - logo preview */
.shop-logo-preview {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    border: 1px solid #d9dee7;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    flex-shrink: 0;
}

.shop-logo-preview img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 600px) {
    .shop-logo-preview {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
        max-width: 100px;
        max-height: 100px;
    }
}


/* Persistent new-order notification */
.new-order-notification {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 500;
    width: min(
        calc(100% - 36px),
        380px
    );
    padding: 16px;
    border: 2px solid var(--primary);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(16, 32, 24, 0.18);
    cursor: pointer;
}

.new-order-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.new-order-notification-header strong {
    font-size: 1.05rem;
}

.new-order-notification-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.new-order-notification-close:hover {
    background: var(--border);
}

.new-order-notification-message {
    margin-bottom: 14px;
    color: var(--muted);
    line-height: 1.45;
}

.new-order-notification-button {
    width: 100%;
}



/* =========================================================
   NAMIBIA MARKETPLACE — MODERN OWNER DASHBOARD
   Dashboard redesign layer
   ========================================================= */

:root {
    --nm-sidebar: #111827;
    --nm-sidebar-hover: #1f2937;
    --nm-sidebar-text: #cbd5e1;
    --nm-sidebar-active: #f5b800;
    --nm-dashboard-bg: #f5f7fb;
    --nm-card: #ffffff;
    --nm-text: #172033;
    --nm-muted: #718096;
    --nm-border: #e5e9f0;
    --nm-blue: #2563eb;
    --nm-green: #16a34a;
    --nm-purple: #7c3aed;
    --nm-orange: #f59e0b;
}


/* Dashboard page background */

body:has(.dashboard-section) {
    background: var(--nm-dashboard-bg);
}


/* Modern dashboard header */

body:has(.dashboard-section) .site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--nm-border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}


body:has(.dashboard-section) .site-header .navbar {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}


/* Dashboard main container */

body:has(.dashboard-section) .dashboard-section {
    padding-top: 24px;
    padding-bottom: 40px;
}


body:has(.dashboard-section) .dashboard-section > .container {
    max-width: 1600px;
}


/* Dashboard heading */

body:has(.dashboard-section) .dashboard-heading {
    margin-bottom: 24px;
}


body:has(.dashboard-section) .dashboard-heading .section-title {
    margin-bottom: 5px;
}


body:has(.dashboard-section) .dashboard-heading .section-subtitle {
    color: var(--nm-muted);
}


/* Shop selector */

body:has(.dashboard-section) .dashboard-shop-selector {
    background: #ffffff;
    border: 1px solid var(--nm-border);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}


body:has(.dashboard-section) .dashboard-shop-selector label {
    color: var(--nm-muted);
}


/* Navigation tabs */

body:has(.dashboard-section) .dashboard-views {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 73px;
    bottom: 0;
    width: 235px;
    padding: 26px 14px;
    background: var(--nm-sidebar);
    border-right: 1px solid #202938;
    z-index: 20;
}


body:has(.dashboard-section) .dashboard-view-tab {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    margin: 2px 0;
    padding: 13px 15px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--nm-sidebar-text);
    font-weight: 650;
    text-align: left;
    transition: 0.18s ease;
}


body:has(.dashboard-section) .dashboard-view-tab:hover {
    background: var(--nm-sidebar-hover);
    color: #ffffff;
}


body:has(.dashboard-section) .dashboard-view-tab.active {
    background: var(--nm-sidebar-active);
    color: #111827;
    box-shadow: 0 4px 12px rgba(245, 184, 0, 0.22);
}


/* Move dashboard content away from sidebar */

body:has(.dashboard-section) #dashboardContent {
    padding-left: 255px;
}


/* Stats cards */

body:has(.dashboard-section) .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}


body:has(.dashboard-section) .dashboard-stats > * {
    background: var(--nm-card);
    border: 1px solid var(--nm-border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
}


/* Main dashboard cards */

body:has(.dashboard-section) .dashboard-toolbar,
body:has(.dashboard-section) .dashboard-tabs,
body:has(.dashboard-section) .products-management-toolbar,
body:has(.dashboard-section) .shop-settings-card,
body:has(.dashboard-section) .shop-subscription-card {
    border-color: var(--nm-border);
}


body:has(.dashboard-section) .dashboard-toolbar {
    background: var(--nm-card);
    border: 1px solid var(--nm-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}


/* Orders */

body:has(.dashboard-section) .dashboard-orders-grid {
    display: grid;
    gap: 16px;
}


body:has(.dashboard-section) .dashboard-orders-grid > * {
    border-radius: 14px;
}


/* Products */

body:has(.dashboard-section) .products-management-heading,
body:has(.dashboard-section) .products-management-toolbar {
    background: var(--nm-card);
    border: 1px solid var(--nm-border);
    border-radius: 14px;
}


body:has(.dashboard-section) .products-management-heading {
    padding: 20px;
    margin-bottom: 16px;
}


body:has(.dashboard-section) .products-management-toolbar {
    padding: 16px;
    margin-bottom: 16px;
}


/* Settings */

body:has(.dashboard-section) .shop-settings-card {
    background: var(--nm-card);
    border: 1px solid var(--nm-border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
}


/* Subscription */

body:has(.dashboard-section) .shop-subscription-grid {
    gap: 16px;
}


body:has(.dashboard-section) .shop-subscription-card {
    border-color: var(--nm-border);
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
}


/* New order notification */

body:has(.dashboard-section) .new-order-notification {
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.2);
}


/* Responsive */

@media (max-width: 1100px) {

    body:has(.dashboard-section) .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    body:has(.dashboard-section) .dashboard-views {
        position: static;
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        border-radius: 12px;
        margin-bottom: 18px;
    }

    body:has(.dashboard-section) .dashboard-view-tab {
        min-width: max-content;
        width: auto;
    }

    body:has(.dashboard-section) #dashboardContent {
        padding-left: 0;
    }

}


@media (max-width: 600px) {

    body:has(.dashboard-section) .dashboard-stats {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   THREE-COLUMN OWNER DASHBOARD
   ========================================================= */

body:has(.dashboard-section) #dashboardContent {
    position: relative;
    min-height: calc(100vh - 120px);
}


/* Main content area */

body:has(.dashboard-section) #ordersView,
body:has(.dashboard-section) #productsView,
body:has(.dashboard-section) #settingsView,
body:has(.dashboard-section) #subscriptionView {
    margin-right: 300px;
    min-width: 0;
}


/* Right information panel */

body:has(.dashboard-section) .nm-dashboard-right-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* Right panel cards */

body:has(.dashboard-section) .nm-right-panel-card {
    background: #ffffff;
    border: 1px solid var(--nm-border);
    border-radius: 15px;
    padding: 18px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
}


body:has(.dashboard-section) .nm-right-card-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--nm-muted);
    margin-bottom: 14px;
}


body:has(.dashboard-section) .nm-store-card {
    text-align: center;
}


body:has(.dashboard-section) .nm-store-avatar {
    width: 62px;
    height: 62px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff7d6;
    font-size: 1.8rem;
}


body:has(.dashboard-section) .nm-store-name {
    color: var(--nm-text);
    font-size: 1.05rem;
    font-weight: 800;
}


body:has(.dashboard-section) .nm-store-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    color: var(--nm-green);
    font-size: 0.78rem;
    font-weight: 700;
}


body:has(.dashboard-section) .nm-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nm-green);
}


/* Right panel headings */

body:has(.dashboard-section) .nm-right-card-header {
    margin-bottom: 12px;
}


body:has(.dashboard-section) .nm-right-card-header h3 {
    margin: 0;
    color: var(--nm-text);
    font-size: 0.98rem;
}


/* Quick action buttons */

body:has(.dashboard-section) .nm-quick-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 4px;
    border: 0;
    border-top: 1px solid #edf0f4;
    background: transparent;
    text-align: left;
    cursor: pointer;
}


body:has(.dashboard-section) .nm-quick-action:first-of-type {
    border-top: 0;
}


body:has(.dashboard-section) .nm-quick-action:hover {
    background: #f8fafc;
}


body:has(.dashboard-section) .nm-quick-action strong,
body:has(.dashboard-section) .nm-quick-action small {
    display: block;
}


body:has(.dashboard-section) .nm-quick-action strong {
    color: var(--nm-text);
    font-size: 0.86rem;
}


body:has(.dashboard-section) .nm-quick-action small {
    margin-top: 2px;
    color: var(--nm-muted);
    font-size: 0.72rem;
}


body:has(.dashboard-section) .nm-quick-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
}


body:has(.dashboard-section) .nm-quick-icon.nm-blue {
    background: #eaf2ff;
}


body:has(.dashboard-section) .nm-quick-icon.nm-green {
    background: #eaf8ef;
}


body:has(.dashboard-section) .nm-quick-icon.nm-purple {
    background: #f2ebff;
}


/* Subscription mini card */

body:has(.dashboard-section) .nm-subscription-mini {
    display: flex;
    align-items: center;
    gap: 11px;
}


body:has(.dashboard-section) .nm-subscription-mini-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff4db;
}


body:has(.dashboard-section) .nm-subscription-mini strong,
body:has(.dashboard-section) .nm-subscription-mini small {
    display: block;
}


body:has(.dashboard-section) .nm-subscription-mini strong {
    color: var(--nm-text);
    font-size: 0.85rem;
}


body:has(.dashboard-section) .nm-subscription-mini small {
    margin-top: 2px;
    color: var(--nm-muted);
    font-size: 0.7rem;
}


body:has(.dashboard-section) .nm-panel-link {
    width: 100%;
    margin-top: 13px;
    padding: 9px 0;
    border: 0;
    border-top: 1px solid #edf0f4;
    background: transparent;
    color: var(--nm-blue);
    font-size: 0.78rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}


body:has(.dashboard-section) .nm-panel-link:hover {
    color: #1749a8;
}


/* Help card */

body:has(.dashboard-section) .nm-help-card {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}


body:has(.dashboard-section) .nm-help-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}


body:has(.dashboard-section) .nm-help-card strong {
    display: block;
}


body:has(.dashboard-section) .nm-help-card p {
    margin: 7px 0 0;
    color: #aeb8c8;
    font-size: 0.75rem;
    line-height: 1.5;
}


/* Medium screens */

@media (max-width: 1200px) {

    body:has(.dashboard-section) .nm-dashboard-right-panel {
        display: none;
    }

    body:has(.dashboard-section) #ordersView,
    body:has(.dashboard-section) #productsView,
    body:has(.dashboard-section) #settingsView,
    body:has(.dashboard-section) #subscriptionView {
        margin-right: 0;
    }

}


/* Mobile */

@media (max-width: 800px) {

    body:has(.dashboard-section) .dashboard-views {
        margin-bottom: 18px;
    }

}



/* =========================================================
   DASHBOARD REFINEMENT — HEADER / PANEL SPACING
   ========================================================= */

/* Keep the dashboard heading and shop selector inside the
   center column instead of allowing the right panel to cover it. */
#dashboardContent > .dashboard-heading {
    margin-right: 300px;
    min-width: 0;
}

#dashboardContent > .dashboard-heading .shop-selector,
#dashboardContent > .dashboard-heading .dashboard-shop-selector,
#dashboardContent > .dashboard-heading select {
    max-width: 100%;
}

/* Keep the right panel in its own visual column. */
#dashboardContent .nm-dashboard-right-panel {
    top: 24px;
    right: 0;
    width: 280px;
    z-index: 5;
}

/* Make the main dashboard views respect the right column. */
#dashboardContent > .dashboard-view {
    margin-right: 300px;
    min-width: 0;
}

/* Prevent wide forms/toolbars from pushing underneath the panel. */
#dashboardContent > .dashboard-view .card,
#dashboardContent > .dashboard-view .toolbar,
#dashboardContent > .dashboard-view .dashboard-card {
    min-width: 0;
}

/* At narrower desktop widths, use the full available content area. */
@media (max-width: 1200px) {
    #dashboardContent > .dashboard-heading {
        margin-right: 0;
    }

    #dashboardContent > .dashboard-view {
        margin-right: 0;
    }

    #dashboardContent .nm-dashboard-right-panel {
        display: none;
    }
}

/* Keep the right-panel buttons visually clickable. */
.nm-dashboard-right-panel [data-view] {
    cursor: pointer;
}


/* =========================================================
   DASHBOARD LAYOUT — TWO COLUMN VERSION
   Left navigation + main working area only.
   ========================================================= */

#dashboardContent > .dashboard-heading {
    margin-right: 0 !important;
    min-width: 0;
}

#dashboardContent > .dashboard-view {
    margin-right: 0 !important;
    min-width: 0;
}

#ordersView,
#productsView,
#settingsView,
#subscriptionView {
    margin-right: 0 !important;
    min-width: 0;
}

/* The right information panel has been removed. */
.nm-dashboard-right-panel {
    display: none !important;
}

/* Give the main dashboard a little more breathing room. */
#dashboardContent {
    padding-right: 32px;
}

@media (max-width: 1200px) {
    #dashboardContent {
        padding-right: 20px;
    }
}


/* =========================================================
   SHOP OWNER SIDEBAR — PROFESSIONAL TWO-COLUMN DASHBOARD
   ========================================================= */

#dashboardViews.dashboard-views {
    position: fixed;
    top: 73px;
    left: 0;
    bottom: 0;
    width: 235px;
    margin: 0;
    padding: 30px 14px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: #111827;
    border-radius: 0 10px 10px 0;
    box-shadow: 4px 0 18px rgba(15, 23, 42, 0.08);
    z-index: 20;
    overflow-y: auto;
}

#dashboardViews .nm-sidebar-section-label {
    padding: 2px 14px 14px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.4;
}

#dashboardViews .dashboard-view-tab,
#dashboardViews .nm-sidebar-marketplace {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e5e7eb;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#dashboardViews .dashboard-view-tab:hover,
#dashboardViews .nm-sidebar-marketplace:hover {
    background: #1f2937;
    color: #ffffff;
}

#dashboardViews .dashboard-view-tab.active {
    background: #ffb800;
    color: #111827;
    box-shadow: 0 6px 16px rgba(255, 184, 0, 0.18);
}

#dashboardViews .dashboard-view-tab.active:hover {
    background: #ffb800;
    color: #111827;
    transform: translateX(1px);
}

#dashboardViews .nm-sidebar-icon {
    width: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
}

#dashboardViews .dashboard-view-tab.active .nm-sidebar-icon {
    color: #111827;
}

#dashboardViews .nm-sidebar-divider {
    height: 1px;
    margin: 18px 8px 12px;
    background: rgba(148, 163, 184, 0.18);
}

#dashboardViews .nm-sidebar-marketplace {
    color: #cbd5e1;
    font-weight: 650;
}

#dashboardViews .nm-sidebar-marketplace .nm-sidebar-icon {
    color: #fbbf24;
}

#dashboardContent {
    padding-left: 255px;
}

/* Keep the two-column dashboard responsive. */
@media (max-width: 800px) {
    #dashboardViews.dashboard-views {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 0;
    }

    #dashboardViews .nm-sidebar-section-label {
        width: 100%;
        padding: 4px 8px;
    }

    #dashboardViews .dashboard-view-tab,
    #dashboardViews .nm-sidebar-marketplace {
        width: auto;
        flex: 1 1 180px;
    }

    #dashboardViews .nm-sidebar-divider {
        display: none;
    }

    #dashboardContent {
        padding-left: 20px;
    }
}

/* =========================================================
   SHOP OWNER DASHBOARD OVERVIEW
   ========================================================= */

#dashboardHomeView {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 40px;
}


.nm-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 28px 30px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}


.nm-dashboard-welcome h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    line-height: 1.2;
    color: #111827;
}


.nm-dashboard-welcome p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}


.nm-dashboard-store-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 180px;
}


.nm-dashboard-store-badge strong {
    font-size: 18px;
    color: #111827;
}


.nm-dashboard-store-badge > span:not(.nm-status-pill) {
    color: #64748b;
    font-size: 13px;
}


.nm-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


.nm-status-pill.online,
.nm-status-pill.active {
    color: #166534;
    background: #dcfce7;
}


.nm-status-pill.offline {
    color: #991b1b;
    background: #fee2e2;
}


.nm-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}


.nm-dashboard-metric-card {
    min-height: 125px;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}


.nm-dashboard-metric-card span {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}


.nm-dashboard-metric-card strong {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 29px;
    line-height: 1.1;
}


.nm-dashboard-metric-card small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 12px;
}


.nm-dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}


.nm-dashboard-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.nm-dashboard-panel {
    min-width: 0;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}


.nm-dashboard-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}


.nm-dashboard-panel-heading h2 {
    margin: 5px 0 0;
    color: #111827;
    font-size: 18px;
}


.nm-dashboard-panel-period {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}


.nm-sales-chart {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 250px;
    padding-top: 10px;
}


.nm-sales-bar-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}


.nm-sales-bar-value {
    min-height: 16px;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}


.nm-sales-bar-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 48px;
    height: 175px;
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 8px 8px 4px 4px;
}


.nm-sales-bar {
    width: 100%;
    min-height: 4px;
    background: #ffb800;
    border-radius: 8px 8px 4px 4px;
    transition: height 0.25s ease;
}


.nm-sales-bar-label {
    margin-top: 9px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}


.nm-top-products {
    display: flex;
    flex-direction: column;
}


.nm-top-product-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
}


.nm-top-product-row:last-child {
    border-bottom: 0;
}


.nm-top-product-rank {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #475569;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}


.nm-top-product-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}


.nm-top-product-info strong {
    overflow: hidden;
    color: #1e293b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.nm-top-product-info span {
    color: #94a3b8;
    font-size: 11px;
}


.nm-top-product-row > strong {
    color: #111827;
    font-size: 13px;
    white-space: nowrap;
}


.nm-dashboard-empty-summary {
    padding: 30px 10px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}


.nm-dashboard-status-row {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 70px;
}


.nm-status-dot {
    font-size: 22px;
}


.nm-status-dot.online {
    color: #16a34a;
}


.nm-status-dot.offline {
    color: #dc2626;
}


.nm-dashboard-status-row div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.nm-dashboard-status-row strong {
    color: #111827;
    font-size: 15px;
}


.nm-dashboard-status-row span:not(.nm-status-dot) {
    color: #64748b;
    font-size: 12px;
}


.nm-dashboard-subscription {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 70px;
}


.nm-dashboard-subscription > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}


.nm-dashboard-subscription > div strong {
    color: #111827;
    font-size: 14px;
}


.nm-dashboard-subscription > span {
    color: #64748b;
    font-size: 12px;
}


@media (max-width: 1000px) {

    #dashboardHomeView {
        max-width: none;
    }


    .nm-dashboard-main-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 760px) {

    .nm-dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }


    .nm-dashboard-store-badge {
        align-items: flex-start;
    }


    .nm-dashboard-metrics {
        grid-template-columns: 1fr;
    }


    .nm-dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 560px) {

    .nm-dashboard-welcome,
    .nm-dashboard-panel,
    .nm-dashboard-metric-card {
        padding: 18px;
    }


    .nm-dashboard-welcome h2 {
        font-size: 23px;
    }


    .nm-dashboard-metric-card strong {
        font-size: 25px;
    }


    .nm-sales-chart {
        gap: 5px;
    }


    .nm-sales-bar-track {
        max-width: 34px;
    }

}


/* =========================================================
   WELCOME CARD — VERTICAL INFORMATION LAYOUT
   ========================================================= */

.nm-dashboard-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    align-items: center;
    gap: 34px;
}


.nm-dashboard-welcome-copy {
    min-width: 0;
}


.nm-dashboard-store-badge {
    align-items: flex-start;
    min-width: 0;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}


.nm-dashboard-welcome-status {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}


.nm-dashboard-welcome-status-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.nm-dashboard-welcome-status-item + .nm-dashboard-welcome-status-item {
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}


.nm-dashboard-welcome .nm-dashboard-status-row {
    min-height: 0;
    gap: 10px;
}


.nm-dashboard-welcome .nm-dashboard-subscription {
    min-height: 0;
}


@media (max-width: 800px) {

    .nm-dashboard-welcome {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .nm-dashboard-welcome-status {
        padding-top: 18px;
        border-top: 1px solid #e5e7eb;
    }

}


/* =========================================================
   WELCOME CARD — HORIZONTAL SECTIONS
   Vertical content inside each section
   ========================================================= */

.nm-dashboard-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.85fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}


.nm-dashboard-welcome-copy {
    min-width: 0;
}


.nm-dashboard-store-badge {
    align-items: flex-start;
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


.nm-dashboard-welcome-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    min-width: 0;
}


.nm-dashboard-welcome-status-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}


.nm-dashboard-welcome-status-item + .nm-dashboard-welcome-status-item {
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid #e5e7eb;
    padding-left: 24px;
}


.nm-dashboard-welcome .nm-dashboard-status-row {
    min-height: 0;
    gap: 10px;
}


.nm-dashboard-welcome .nm-dashboard-subscription {
    min-height: 0;
    width: 100%;
}


@media (max-width: 1050px) {

    .nm-dashboard-welcome {
        grid-template-columns: 1fr 1fr;
    }

    .nm-dashboard-welcome-status {
        grid-column: 1 / -1;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
    }

}


@media (max-width: 700px) {

    .nm-dashboard-welcome {
        grid-template-columns: 1fr;
    }

    .nm-dashboard-welcome-status {
        grid-column: auto;
        grid-template-columns: 1fr;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
    }

    .nm-dashboard-welcome-status-item + .nm-dashboard-welcome-status-item {
        padding-left: 0;
        padding-top: 18px;
        border-left: 0;
        border-top: 1px solid #e5e7eb;
    }

}


/* =========================================================
   WELCOME CARD — CLEAN HORIZONTAL SPACING
   ========================================================= */

.nm-dashboard-welcome {
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(170px, 0.95fr)
        minmax(0, 1.35fr);
    gap: 34px;
}


.nm-dashboard-welcome-status {
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(170px, 1.1fr);
    gap: 28px;
}


.nm-dashboard-welcome-status-item {
    min-width: 0;
}


.nm-dashboard-welcome-status-item + .nm-dashboard-welcome-status-item {
    padding-left: 28px;
}


.nm-dashboard-welcome .nm-dashboard-status-row {
    align-items: flex-start;
}


.nm-dashboard-welcome .nm-dashboard-status-row div {
    min-width: 0;
}


.nm-dashboard-welcome .nm-dashboard-status-row span:not(.nm-status-dot) {
    line-height: 1.45;
    white-space: normal;
}


.nm-dashboard-welcome .nm-dashboard-subscription {
    align-items: flex-start;
}


.nm-dashboard-welcome .nm-dashboard-subscription > div {
    min-width: 0;
}


.nm-dashboard-welcome .nm-dashboard-subscription > div strong {
    white-space: nowrap;
}


.nm-dashboard-welcome .nm-dashboard-subscription > span {
    white-space: nowrap;
}


/* =========================================================
   SHOP OWNER DASHBOARD — WIDER WORKING AREA
   ========================================================= */

#dashboardContent {
    width: 100%;
    max-width: none !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
}


#dashboardContent > .dashboard-heading {
    width: 100%;
    max-width: 1380px;
    margin-left: auto !important;
    margin-right: auto !important;
}


#dashboardHomeView {
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
}



/* =========================================================
   DASHBOARD — KEEP CONTENT CLEAR OF LEFT SIDEBAR
   ========================================================= */

#dashboardContent {
    margin-left: 260px !important;
    width: calc(100% - 278px) !important;
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
}


#dashboardContent > .dashboard-heading {
    width: 100%;
    max-width: 1380px;
    margin-left: auto !important;
    margin-right: auto !important;
}


#dashboardHomeView {
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
}



/* =========================================================
   WELCOME AREA — FOUR CLEAN HORIZONTAL CARDS
   ========================================================= */

.nm-dashboard-welcome {
    display: grid !important;
    grid-template-columns:
        minmax(250px, 1.45fr)
        minmax(190px, 1fr)
        minmax(190px, 1fr)
        minmax(190px, 1fr);
    gap: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}


.nm-dashboard-welcome-copy,
.nm-dashboard-store-badge,
.nm-dashboard-welcome-status-item {
    min-width: 0;
    min-height: 150px;
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
}


.nm-dashboard-welcome-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.nm-dashboard-welcome-copy h2 {
    margin-top: 7px;
}


.nm-dashboard-store-badge {
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
}


.nm-dashboard-store-badge strong {
    font-size: 17px;
    line-height: 1.35;
}


.nm-dashboard-welcome-status {
    display: contents;
}


.nm-dashboard-welcome-status-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}


.nm-dashboard-welcome-status-item + .nm-dashboard-welcome-status-item {
    padding-left: 22px;
    border-left: 1px solid #e5e7eb;
}


.nm-dashboard-welcome .nm-dashboard-status-row {
    min-height: auto;
    gap: 10px;
    align-items: flex-start;
}


.nm-dashboard-welcome .nm-dashboard-status-row div {
    gap: 5px;
}


.nm-dashboard-welcome .nm-dashboard-status-row strong {
    font-size: 15px;
}


.nm-dashboard-welcome .nm-dashboard-subscription {
    min-height: auto;
    align-items: flex-start;
    gap: 10px;
}


.nm-dashboard-welcome .nm-dashboard-subscription > div {
    gap: 9px;
}


.nm-dashboard-welcome .nm-dashboard-subscription > div strong {
    white-space: normal;
    line-height: 1.4;
}


.nm-dashboard-welcome .nm-dashboard-subscription > span {
    margin-top: 2px;
}


@media (max-width: 1100px) {

    .nm-dashboard-welcome {
        grid-template-columns:
            minmax(220px, 1.3fr)
            minmax(180px, 1fr);
    }

}



/* =========================================================
   WELCOME CARDS — BALANCED FOUR-CARD ROW
   ========================================================= */

.nm-dashboard-welcome {
    align-items: stretch !important;
    grid-template-columns:
        1.35fr
        1fr
        1fr
        1fr;
}


.nm-dashboard-welcome-copy,
.nm-dashboard-store-badge,
.nm-dashboard-welcome-status-item {
    min-height: 158px;
    height: 100%;
}


.nm-dashboard-welcome-copy {
    justify-content: center;
}


.nm-dashboard-welcome-status-item {
    justify-content: center;
}


.nm-dashboard-welcome-status-item + .nm-dashboard-welcome-status-item {
    padding-left: 22px;
}


.nm-dashboard-welcome .nm-dashboard-subscription {
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}


.nm-dashboard-welcome .nm-dashboard-subscription > span {
    margin-top: 0;
}


.nm-dashboard-welcome .nm-dashboard-subscription > div {
    width: 100%;
}


.nm-dashboard-welcome .nm-dashboard-subscription > div strong {
    display: block;
    white-space: nowrap;
}



/* =========================================================
   SHOP SETTINGS — CLEAN PROFILE LAYOUT
   ========================================================= */

body:has(.dashboard-section) #settingsView {
    width: 100%;
}

body:has(.dashboard-section) #settingsView > .products-management-heading {
    margin-bottom: 16px;
    padding: 22px 24px;
}

body:has(.dashboard-section) #settingsView > .products-management-heading .products-management-title {
    margin-bottom: 5px;
}

body:has(.dashboard-section) #settingsView > .products-management-heading .section-subtitle {
    margin-bottom: 0;
}

body:has(.dashboard-section) .shop-settings-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

body:has(.dashboard-section) .shop-settings-form {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 18px;
    padding: 24px;
    align-items: start;
}

/* Logo panel */

body:has(.dashboard-section) .shop-settings-image-section {
    grid-column: 1;
    grid-row: 1 / span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 22px 18px;
    background: #f8fafc;
    border: 1px solid var(--nm-border);
    border-radius: 14px;
    min-height: 330px;
    text-align: center;
}

body:has(.dashboard-section) .shop-settings-image-info {
    width: 100%;
}

body:has(.dashboard-section) .shop-settings-image-info h3 {
    margin: 0 0 7px;
    color: var(--nm-text);
    font-size: 1rem;
    font-weight: 800;
}

body:has(.dashboard-section) .shop-settings-image-info p {
    margin: 0 0 14px;
    color: var(--nm-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

body:has(.dashboard-section) .shop-logo-preview {
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    max-width: 150px;
    max-height: 150px;
    border-radius: 16px;
    background: #ffffff;
    border-color: var(--nm-border);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
}

body:has(.dashboard-section) .shop-settings-file-name {
    margin-top: 10px;
    color: var(--nm-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

/* Form fields */

body:has(.dashboard-section) .shop-settings-form > .form-group.full {
    grid-column: 2;
    margin: 0;
}

body:has(.dashboard-section) .shop-settings-form .form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--nm-text);
    font-size: 0.82rem;
    font-weight: 800;
}

body:has(.dashboard-section) .shop-settings-form .form-group input,
body:has(.dashboard-section) .shop-settings-form .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--nm-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--nm-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:has(.dashboard-section) .shop-settings-form .form-group input {
    min-height: 46px;
    padding: 11px 13px;
}

body:has(.dashboard-section) .shop-settings-form .form-group textarea {
    min-height: 110px;
    padding: 12px 13px;
    resize: vertical;
}

body:has(.dashboard-section) .shop-settings-form .form-group input:focus,
body:has(.dashboard-section) .shop-settings-form .form-group textarea:focus {
    outline: none;
    border-color: var(--nm-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.10);
}

/* Error and save action */

body:has(.dashboard-section) .shop-settings-form > #shopSettingsError,
body:has(.dashboard-section) .shop-settings-form > .shop-settings-actions {
    grid-column: 2;
}

body:has(.dashboard-section) .shop-settings-form > #shopSettingsError {
    margin: 0;
}

body:has(.dashboard-section) .shop-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid var(--nm-border);
}

body:has(.dashboard-section) .shop-settings-actions .btn {
    min-width: 180px;
    min-height: 44px;
    border-radius: 10px;
}

/* Responsive */

@media (max-width: 800px) {

    body:has(.dashboard-section) .shop-settings-form {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body:has(.dashboard-section) .shop-settings-image-section {
        grid-column: 1;
        grid-row: auto;
        min-height: auto;
    }

    body:has(.dashboard-section) .shop-settings-form > .form-group.full,
    body:has(.dashboard-section) .shop-settings-form > #shopSettingsError,
    body:has(.dashboard-section) .shop-settings-form > .shop-settings-actions {
        grid-column: 1;
    }

    body:has(.dashboard-section) .shop-settings-actions {
        justify-content: stretch;
    }

    body:has(.dashboard-section) .shop-settings-actions .btn {
        width: 100%;
    }
}


/* =========================================================
   DASHBOARD — DARK TOP BAR + DARK MAIN CANVAS
   Match the left navigation visual identity
   ========================================================= */

body:has(.dashboard-section) {
    background: #111827;
}

/* Top navigation bar */

body:has(.dashboard-section) .site-header {
    background: #111827;
    border-bottom: 1px solid #263244;
    box-shadow: none;
}

body:has(.dashboard-section) .site-header .navbar {
    min-height: 72px;
    background: #111827;
}

body:has(.dashboard-section) .site-header .brand {
    color: #ffffff;
}

body:has(.dashboard-section) .site-header .brand-flag {
    color: #f5b800;
}

body:has(.dashboard-section) .site-header .nav-link {
    color: #cbd5e1;
}

body:has(.dashboard-section) .site-header .nav-link:hover {
    color: #ffffff;
}

body:has(.dashboard-section) .site-header .nav-actions .btn {
    background: #1f2937;
    border-color: #334155;
    color: #ffffff;
}

body:has(.dashboard-section) .site-header .nav-actions .btn:hover {
    background: #263244;
    border-color: #475569;
}

/* Main dashboard canvas */

body:has(.dashboard-section) .dashboard-section {
    background: #111827;
    padding-top: 30px;
    padding-bottom: 50px;
}

/* Dashboard heading */

body:has(.dashboard-section) .dashboard-heading {
    color: #ffffff;
}

body:has(.dashboard-section) .dashboard-heading .eyebrow {
    color: #f5b800;
}

body:has(.dashboard-section) .dashboard-heading .section-title {
    color: #ffffff;
}

body:has(.dashboard-section) .dashboard-heading .section-subtitle {
    color: #94a3b8;
}

/* Shop selector */

body:has(.dashboard-section) .dashboard-shop-selector {
    background: #1f2937;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 14px;
    box-shadow: none;
}

body:has(.dashboard-section) .dashboard-shop-selector label {
    color: #94a3b8;
}

body:has(.dashboard-section) .dashboard-shop-selector select {
    background: #111827;
    border-color: #475569;
    color: #ffffff;
}

body:has(.dashboard-section) .dashboard-shop-selector select:focus {
    border-color: #f5b800;
    box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.12);
}

/* Keep the working white content cards clean */

body:has(.dashboard-section) #dashboardHomeView,
body:has(.dashboard-section) #ordersView,
body:has(.dashboard-section) #productsView,
body:has(.dashboard-section) #settingsView,
body:has(.dashboard-section) #subscriptionView {
    color: var(--nm-text);
}

/* Mobile */

@media (max-width: 800px) {

    body:has(.dashboard-section) .dashboard-section {
        padding-top: 20px;
    }

    body:has(.dashboard-section) .dashboard-heading {
        color: #ffffff;
    }

}


/* =========================================================
   DASHBOARD — WELCOME TEXT ON DARK CANVAS
   ========================================================= */

body:has(.dashboard-section) .nm-dashboard-welcome-copy {
    color: #ffffff;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy .eyebrow {
    color: #f5b800;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy h2,
body:has(.dashboard-section) .nm-dashboard-welcome-copy h3 {
    color: #ffffff;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy p {
    color: #94a3b8;
}


/* =========================================================
   DASHBOARD — YELLOW CARD THEME
   ========================================================= */

body:has(.dashboard-section) #dashboardHomeView [class*="card"],
body:has(.dashboard-section) #dashboardHomeView .dashboard-stats > *,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-copy,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-store-badge,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-status-item,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-performance,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-top-products,
body:has(.dashboard-section) .dashboard-shop-selector {
    background: #f5b800 !important;
    border-color: #f5b800 !important;
    color: #111827;
    box-shadow: 0 4px 14px rgba(245, 184, 0, 0.16);
}

body:has(.dashboard-section) #dashboardHomeView [class*="card"] *,
body:has(.dashboard-section) #dashboardHomeView .dashboard-stats > *,
body:has(.dashboard-section) .dashboard-shop-selector {
    color: #111827;
}

body:has(.dashboard-section) #dashboardHomeView .eyebrow {
    color: #064e3b;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-copy h2,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-copy p {
    color: #111827;
}

body:has(.dashboard-section) #dashboardHomeView .nm-status-pill {
    background: #ffffff;
    color: #064e3b;
}

body:has(.dashboard-section) #dashboardHomeView .nm-status-dot {
    background: #064e3b;
}

body:has(.dashboard-section) .dashboard-shop-selector label {
    color: #064e3b;
}

body:has(.dashboard-section) .dashboard-shop-selector select {
    background: #111827;
    color: #ffffff;
    border-color: #374151;
}


/* =========================================================
   NAMIBIA MARKETPLACE — DARK DASHBOARD THEME
   Inspired by the GlobalPay dashboard reference
   ========================================================= */

/* Main dashboard canvas */
body:has(.dashboard-section) {
    background: #061c29 !important;
    color: #f8fafc;
}

/* Top navigation */
body:has(.dashboard-section) .site-header {
    background: #06202e !important;
    border-bottom: 1px solid #294052 !important;
    box-shadow: none !important;
}

body:has(.dashboard-section) .site-header .navbar {
    color: #f8fafc;
}

body:has(.dashboard-section) .brand {
    color: #f8fafc;
}

body:has(.dashboard-section) .brand-flag {
    color: #f5b800;
}

body:has(.dashboard-section) .nav-link {
    color: #9bb0bf;
}

body:has(.dashboard-section) .nav-link:hover {
    color: #ffffff;
}

body:has(.dashboard-section) .site-header .btn {
    background: #102b3c;
    border-color: #294052;
    color: #ffffff;
}

/* Main dashboard heading */
body:has(.dashboard-section) .dashboard-heading {
    color: #ffffff;
}

body:has(.dashboard-section) .dashboard-heading .eyebrow {
    color: #f5b800;
}

body:has(.dashboard-section) .dashboard-heading .section-title {
    color: #ffffff;
}

body:has(.dashboard-section) .dashboard-heading .section-subtitle {
    color: #8fa8bb;
}

/* Shop selector */
body:has(.dashboard-section) .dashboard-shop-selector {
    background: #102635 !important;
    border: 1px solid #294052 !important;
    box-shadow: none !important;
}

body:has(.dashboard-section) .dashboard-shop-selector label {
    color: #8fa8bb !important;
}

body:has(.dashboard-section) .dashboard-shop-selector select {
    background: #061c29 !important;
    border-color: #3a5263 !important;
    color: #ffffff !important;
}

/* Sidebar */
body:has(.dashboard-section) .dashboard-views {
    background: #0b1626 !important;
    border-right: 1px solid #294052 !important;
}

body:has(.dashboard-section) .nm-sidebar-section-label {
    color: #8fa8bb;
}

body:has(.dashboard-section) .dashboard-view-tab {
    color: #c7d5df;
}

body:has(.dashboard-section) .dashboard-view-tab:hover {
    background: #102b3c;
    color: #ffffff;
}

body:has(.dashboard-section) .dashboard-view-tab.active {
    background: #f5b800 !important;
    color: #111827 !important;
}

body:has(.dashboard-section) .nm-sidebar-divider {
    background: #294052;
}

body:has(.dashboard-section) .nm-sidebar-marketplace {
    color: #c7d5df;
}

body:has(.dashboard-section) .nm-sidebar-marketplace:hover {
    background: #102b3c;
    color: #ffffff;
}

/* Dashboard welcome area */
body:has(.dashboard-section) .nm-dashboard-welcome {
    color: #ffffff;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy .eyebrow {
    color: #f5b800;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy h2 {
    color: #ffffff !important;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy p {
    color: #8fa8bb !important;
}

/* Dashboard cards */
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-store-badge,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-status-item,
body:has(.dashboard-section) #dashboardHomeView .dashboard-stat-card,
body:has(.dashboard-section) #dashboardHomeView .dashboard-stats > *,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-performance,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-top-products {
    background: #102635 !important;
    border: 1px solid #294052 !important;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Card text */
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-store-badge strong,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-status-item strong,
body:has(.dashboard-section) #dashboardHomeView .dashboard-stats strong,
body:has(.dashboard-section) #dashboardHomeView h3,
body:has(.dashboard-section) #dashboardHomeView h4 {
    color: #ffffff;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-store-badge span,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-welcome-status-item span,
body:has(.dashboard-section) #dashboardHomeView .dashboard-stats small {
    color: #8fa8bb;
}

/* Gold section labels */
body:has(.dashboard-section) #dashboardHomeView .eyebrow {
    color: #f5b800;
}

/* Status */
body:has(.dashboard-section) #dashboardHomeView .nm-status-dot.online {
    background: #00c878;
}

body:has(.dashboard-section) #dashboardHomeView .nm-status-pill {
    background: #00c878;
    color: #061c29;
    border: 0;
}

/* Subscription */
body:has(.dashboard-section) #dashboardHomeView .nm-status-pill.active {
    background: #00c878;
    color: #061c29;
}

/* Dashboard numbers */
body:has(.dashboard-section) #dashboardHomeView .dashboard-stats strong {
    color: #ffffff;
}

/* Sales chart area */
body:has(.dashboard-section) #dashboardHomeView .sales-chart,
body:has(.dashboard-section) #dashboardHomeView .sales-performance {
    color: #ffffff;
}

/* Gold chart highlights */
body:has(.dashboard-section) #dashboardHomeView .chart-bar.active,
body:has(.dashboard-section) #dashboardHomeView .sales-chart-bar.active {
    background: #f5b800;
}

/* Orders / Products / Settings / Subscription pages */
body:has(.dashboard-section) #ordersView,
body:has(.dashboard-section) #productsView,
body:has(.dashboard-section) #settingsView,
body:has(.dashboard-section) #subscriptionView {
    color: #ffffff;
}

body:has(.dashboard-section) #ordersView .dashboard-toolbar,
body:has(.dashboard-section) #ordersView .dashboard-tabs,
body:has(.dashboard-section) #productsView .products-management-heading,
body:has(.dashboard-section) #productsView .products-management-toolbar,
body:has(.dashboard-section) #settingsView .products-management-heading,
body:has(.dashboard-section) #settingsView .shop-settings-card,
body:has(.dashboard-section) #subscriptionView .shop-subscription-card {
    background: #102635 !important;
    border-color: #294052 !important;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   FINAL DARK CARD SYSTEM
   All dashboard cards use the same dark navy treatment.
   Gold remains an accent only.
   ========================================================= */

body:has(.dashboard-section) {

    --nm-bg-deep: #061c29;
    --nm-bg-card: #102b3c;
    --nm-bg-card-hover: #143449;
    --nm-border-dark: #29485a;
    --nm-gold: #f5b800;
    --nm-white: #f8fafc;
    --nm-muted-dark: #8fa8bb;
}


/* Main dashboard background */

body:has(.dashboard-section),
body:has(.dashboard-section) .dashboard-section,
body:has(.dashboard-section) #dashboardContent {
    background: var(--nm-bg-deep) !important;
}


/* =========================================================
   UNIVERSAL DARK CARDS
   ========================================================= */

body:has(.dashboard-section) #dashboardHomeView
.nm-dashboard-store-badge,

body:has(.dashboard-section) #dashboardHomeView
.nm-dashboard-welcome-status-item,

body:has(.dashboard-section) #dashboardHomeView
.dashboard-stats > *,

body:has(.dashboard-section) #dashboardHomeView
.nm-dashboard-performance,

body:has(.dashboard-section) #dashboardHomeView
.nm-dashboard-top-products,

body:has(.dashboard-section) #dashboardHomeView
.dashboard-card,

body:has(.dashboard-section) #dashboardHomeView
.card,

body:has(.dashboard-section) #ordersView
.dashboard-toolbar,

body:has(.dashboard-section) #ordersView
.dashboard-tabs,

body:has(.dashboard-section) #productsView
.products-management-heading,

body:has(.dashboard-section) #productsView
.products-management-toolbar,

body:has(.dashboard-section) #settingsView
.products-management-heading,

body:has(.dashboard-section) #settingsView
.shop-settings-card,

body:has(.dashboard-section) #subscriptionView
.shop-subscription-card {

    background: var(--nm-bg-card) !important;
    border: 1px solid var(--nm-border-dark) !important;
    color: var(--nm-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}


/* =========================================================
   DASHBOARD WELCOME
   ========================================================= */

body:has(.dashboard-section)
.nm-dashboard-welcome-copy {

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


body:has(.dashboard-section)
.nm-dashboard-welcome-copy .eyebrow {

    color: var(--nm-gold) !important;
}


body:has(.dashboard-section)
.nm-dashboard-welcome-copy h2 {

    color: var(--nm-white) !important;
}


body:has(.dashboard-section)
.nm-dashboard-welcome-copy p {

    color: var(--nm-muted-dark) !important;
}


/* =========================================================
   SHOP / STATUS / SUBSCRIPTION CARDS
   ========================================================= */

body:has(.dashboard-section)
.nm-dashboard-store-badge strong,

body:has(.dashboard-section)
.nm-dashboard-welcome-status-item strong {

    color: var(--nm-white) !important;
}


body:has(.dashboard-section)
.nm-dashboard-store-badge > span:not(.nm-status-pill),

body:has(.dashboard-section)
.nm-dashboard-welcome-status-item
.nm-dashboard-status-row span:not(.nm-status-dot),

body:has(.dashboard-section)
.nm-dashboard-subscription > span {

    color: var(--nm-muted-dark) !important;
}


/* =========================================================
   METRIC CARDS
   ========================================================= */

body:has(.dashboard-section)
#dashboardHomeView .dashboard-stats > * {

    background: var(--nm-bg-card) !important;
    border-color: var(--nm-border-dark) !important;
}


body:has(.dashboard-section)
#dashboardHomeView .dashboard-stats > *:hover {

    background: var(--nm-bg-card-hover) !important;
}


body:has(.dashboard-section)
#dashboardHomeView .dashboard-stats
strong {

    color: var(--nm-white) !important;
}


body:has(.dashboard-section)
#dashboardHomeView .dashboard-stats
small {

    color: var(--nm-muted-dark) !important;
}


/* =========================================================
   SALES / TOP PRODUCTS
   ========================================================= */

body:has(.dashboard-section)
#dashboardHomeView
.nm-dashboard-performance,

body:has(.dashboard-section)
#dashboardHomeView
.nm-dashboard-top-products {

    background: var(--nm-bg-card) !important;
    border-color: var(--nm-border-dark) !important;
}


body:has(.dashboard-section)
#dashboardHomeView
.nm-dashboard-performance h3,

body:has(.dashboard-section)
#dashboardHomeView
.nm-dashboard-top-products h3 {

    color: var(--nm-white) !important;
}


body:has(.dashboard-section)
#dashboardHomeView
.nm-dashboard-performance .eyebrow,

body:has(.dashboard-section)
#dashboardHomeView
.nm-dashboard-top-products .eyebrow {

    color: var(--nm-gold) !important;
}


/* =========================================================
   CHART BACKGROUND
   ========================================================= */

body:has(.dashboard-section)
#dashboardHomeView
.sales-chart,

body:has(.dashboard-section)
#dashboardHomeView
.chart-container {

    background: transparent !important;
}


body:has(.dashboard-section)
#dashboardHomeView
.chart-bar {

    background: #1b3a4c !important;
}


body:has(.dashboard-section)
#dashboardHomeView
.chart-bar.active {

    background: var(--nm-gold) !important;
}


/* =========================================================
   SHOP SELECTOR
   ========================================================= */

body:has(.dashboard-section)
.dashboard-shop-selector {

    background: var(--nm-bg-card) !important;
    border: 1px solid var(--nm-border-dark) !important;
    box-shadow: none !important;
}


body:has(.dashboard-section)
.dashboard-shop-selector label {

    color: var(--nm-muted-dark) !important;
}


body:has(.dashboard-section)
.dashboard-shop-selector select {

    background: var(--nm-bg-deep) !important;
    border: 1px solid #3a596b !important;
    color: var(--nm-white) !important;
}


/* =========================================================
   SETTINGS / SUBSCRIPTION / ORDERS
   ========================================================= */

body:has(.dashboard-section)
.shop-settings-card,

body:has(.dashboard-section)
.shop-subscription-card,

body:has(.dashboard-section)
.dashboard-toolbar,

body:has(.dashboard-section)
.dashboard-tabs {

    background: var(--nm-bg-card) !important;
    border-color: var(--nm-border-dark) !important;
    color: var(--nm-white) !important;
}


/* Shop settings inner logo panel */

body:has(.dashboard-section)
.shop-settings-image-section {

    background: #0c2434 !important;
    border-color: var(--nm-border-dark) !important;
}


body:has(.dashboard-section)
.shop-settings-image-info h3,

body:has(.dashboard-section)
.shop-settings-form label {

    color: var(--nm-white) !important;
}


body:has(.dashboard-section)
.shop-settings-image-info p,

body:has(.dashboard-section)
.shop-settings-file-name {

    color: var(--nm-muted-dark) !important;
}


/* Settings inputs */

body:has(.dashboard-section)
.shop-settings-form input,

body:has(.dashboard-section)
.shop-settings-form textarea {

    background: #061c29 !important;
    border-color: #365568 !important;
    color: var(--nm-white) !important;
}


body:has(.dashboard-section)
.shop-settings-form input::placeholder,

body:has(.dashboard-section)
.shop-settings-form textarea::placeholder {

    color: #668094 !important;
}


/* Logo preview */

body:has(.dashboard-section)
.shop-logo-preview {

    background: #061c29 !important;
    border-color: #365568 !important;
}


/* =========================================================
   GOLD ACCENT — NOT CARD BACKGROUND
   ========================================================= */

body:has(.dashboard-section)
.eyebrow {

    color: var(--nm-gold) !important;
}


/* =========================================================
   STATUS COLORS
   ========================================================= */

body:has(.dashboard-section)
.nm-status-pill.online,

body:has(.dashboard-section)
.nm-status-pill.active {

    background: #00c878 !important;
    color: #05251a !important;
    border: 0 !important;
}


body:has(.dashboard-section)
.nm-status-dot.online {

    background: #00c878 !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

body:has(.dashboard-section)
.btn-primary {

    background: #f5b800 !important;
    color: #111827 !important;
    border-color: #f5b800 !important;
}


body:has(.dashboard-section)
.btn-primary:hover {

    background: #ffc928 !important;
}


body:has(.dashboard-section)
.btn-outline {

    background: #102b3c !important;
    color: var(--nm-white) !important;
    border-color: #365568 !important;
}


body:has(.dashboard-section)
.btn-outline:hover {

    background: #143449 !important;
    border-color: #527286 !important;
}


/* =========================================================
   FORM / ACTION FOOTER
   ========================================================= */

body:has(.dashboard-section)
.shop-settings-actions {

    border-top-color: var(--nm-border-dark) !important;
}


/* =========================================================
   SUBTLE CARD HOVER
   ========================================================= */

body:has(.dashboard-section)
.nm-dashboard-store-badge:hover,

body:has(.dashboard-section)
.nm-dashboard-welcome-status-item:hover,

body:has(.dashboard-section)
.dashboard-stats > *:hover {

    border-color: #3c6478 !important;
    background: var(--nm-bg-card-hover) !important;
}


/* =========================================================
   NAMIBIA MARKETPLACE — FULL DARK TEAL / YELLOW THEME
   ========================================================= */

body:has(.dashboard-section) {
    background: #061b24 !important;
    color: #f8fafc !important;
}

/* Main dashboard area */
body:has(.dashboard-section) #dashboardContent {
    background: #061b24 !important;
    color: #f8fafc !important;
}

/* Top dashboard header */
body:has(.dashboard-section) .site-header {
    background: #062632 !important;
    border-bottom: 1px solid #174b5b !important;
    box-shadow: none !important;
}

body:has(.dashboard-section) .site-header .navbar {
    background: #062632 !important;
}

body:has(.dashboard-section) .brand,
body:has(.dashboard-section) .nav-link {
    color: #f8fafc !important;
}

body:has(.dashboard-section) .brand-flag {
    color: #ffb800 !important;
}

body:has(.dashboard-section) .nav-actions .btn {
    background: #0a3040 !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) .nav-actions .btn:hover {
    background: #0d3d4d !important;
    border-color: #ffb800 !important;
}

/* Dashboard headings */
body:has(.dashboard-section) .section-title,
body:has(.dashboard-section) .products-management-title,
body:has(.dashboard-section) .dashboard-heading h1 {
    color: #f8fafc !important;
}

body:has(.dashboard-section) .section-subtitle {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) .eyebrow {
    color: #ffb800 !important;
}

/* Shop selector */
body:has(.dashboard-section) .dashboard-shop-selector {
    background: #082f3b !important;
    border: 1px solid #176078 !important;
    border-radius: 14px !important;
    padding: 16px !important;
}

body:has(.dashboard-section) .dashboard-shop-selector label {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) .dashboard-shop-selector select {
    background: #061f2b !important;
    color: #f8fafc !important;
    border-color: #176078 !important;
}

/* Dashboard welcome cards */
body:has(.dashboard-section) .nm-dashboard-welcome-copy,
body:has(.dashboard-section) .nm-dashboard-store-badge,
body:has(.dashboard-section) .nm-dashboard-welcome-status-item {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18) !important;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy *,
body:has(.dashboard-section) .nm-dashboard-store-badge *,
body:has(.dashboard-section) .nm-dashboard-welcome-status-item * {
    color: inherit;
}

body:has(.dashboard-section) .nm-dashboard-welcome-copy p,
body:has(.dashboard-section) .nm-dashboard-store-badge span,
body:has(.dashboard-section) .nm-dashboard-welcome-status-item span {
    color: #8fb3c1 !important;
}

/* Status pills */
body:has(.dashboard-section) .nm-status-pill {
    border: 0 !important;
}

body:has(.dashboard-section) .nm-status-pill.online,
body:has(.dashboard-section) .nm-status-pill.active {
    background: #00c878 !important;
    color: #03251b !important;
}

/* Statistics cards */
body:has(.dashboard-section) .dashboard-stats > *,
body:has(.dashboard-section) .dashboard-stat,
body:has(.dashboard-section) .nm-dashboard-stat-card {
    background: #ffb800 !important;
    border-color: #ffb800 !important;
    color: #061b24 !important;
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.14) !important;
}

body:has(.dashboard-section) .dashboard-stats > * *,
body:has(.dashboard-section) .dashboard-stat *,
body:has(.dashboard-section) .nm-dashboard-stat-card * {
    color: #061b24 !important;
}

/* Main dashboard cards */
body:has(.dashboard-section) .dashboard-section-card,
body:has(.dashboard-section) .nm-dashboard-card,
body:has(.dashboard-section) .nm-dashboard-chart,
body:has(.dashboard-section) .nm-dashboard-top-products,
body:has(.dashboard-section) .sales-performance-card,
body:has(.dashboard-section) .top-products-card {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18) !important;
}

/* Sales / top product panels */
body:has(.dashboard-section) .dashboard-overview-grid > *,
body:has(.dashboard-section) .dashboard-main-grid > * {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

/* Any remaining white dashboard cards */
body:has(.dashboard-section) .dashboard-card,
body:has(.dashboard-section) .dashboard-panel,
body:has(.dashboard-section) .dashboard-toolbar,
body:has(.dashboard-section) .dashboard-tabs,
body:has(.dashboard-section) .products-management-heading,
body:has(.dashboard-section) .products-management-toolbar,
body:has(.dashboard-section) .shop-settings-card,
body:has(.dashboard-section) .shop-subscription-card,
body:has(.dashboard-section) .shop-subscription-grid,
body:has(.dashboard-section) .dashboard-orders-grid > *,
body:has(.dashboard-section) .orders-card,
body:has(.dashboard-section) .orders-table-wrapper {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18) !important;
}

/* Chart background and chart columns */
body:has(.dashboard-section) .sales-chart,
body:has(.dashboard-section) .sales-performance,
body:has(.dashboard-section) .sales-chart-container {
    background: #082f3b !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) .sales-bar,
body:has(.dashboard-section) .chart-bar {
    background: #ffb800 !important;
}

body:has(.dashboard-section) .sales-bar-track,
body:has(.dashboard-section) .chart-bar-track {
    background: #123f4c !important;
}

/* Product / order tables */
body:has(.dashboard-section) table,
body:has(.dashboard-section) thead,
body:has(.dashboard-section) tbody,
body:has(.dashboard-section) tr,
body:has(.dashboard-section) td,
body:has(.dashboard-section) th {
    background: transparent !important;
    color: #f8fafc !important;
    border-color: #176078 !important;
}

body:has(.dashboard-section) th {
    color: #ffb800 !important;
}

/* Inputs, search boxes and textareas */
body:has(.dashboard-section) input,
body:has(.dashboard-section) textarea,
body:has(.dashboard-section) select {
    background: #061f2b !important;
    color: #f8fafc !important;
    border-color: #176078 !important;
}

body:has(.dashboard-section) input::placeholder,
body:has(.dashboard-section) textarea::placeholder {
    color: #668c9b !important;
}

body:has(.dashboard-section) input:focus,
body:has(.dashboard-section) textarea:focus,
body:has(.dashboard-section) select:focus {
    border-color: #ffb800 !important;
    box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.12) !important;
}

/* Shop settings logo panel */
body:has(.dashboard-section) .shop-settings-image-section {
    background: #061f2b !important;
    border-color: #176078 !important;
}

body:has(.dashboard-section) .shop-logo-preview {
    background: #082f3b !important;
    border-color: #176078 !important;
    box-shadow: none !important;
}

body:has(.dashboard-section) .shop-settings-image-info h3,
body:has(.dashboard-section) .shop-settings-form label {
    color: #f8fafc !important;
}

body:has(.dashboard-section) .shop-settings-image-info p,
body:has(.dashboard-section) .shop-settings-file-name {
    color: #8fb3c1 !important;
}

/* Settings save buttons */
body:has(.dashboard-section) .shop-settings-actions {
    border-color: #176078 !important;
}

body:has(.dashboard-section) .btn-primary {
    background: #ffb800 !important;
    border-color: #ffb800 !important;
    color: #061b24 !important;
}

body:has(.dashboard-section) .btn-primary:hover {
    background: #ffc52b !important;
    border-color: #ffc52b !important;
}

/* Outline buttons */
body:has(.dashboard-section) .btn-outline {
    background: #0a3040 !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) .btn-outline:hover {
    background: #0d3d4d !important;
    border-color: #ffb800 !important;
}

/* Product cards */
body:has(.dashboard-section) .product-card,
body:has(.dashboard-section) .products-management-grid > * {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

/* Subscription */
body:has(.dashboard-section) .shop-subscription-card h3 {
    color: #f8fafc !important;
}

body:has(.dashboard-section) .shop-subscription-loading {
    color: #8fb3c1 !important;
}

/* Order tabs */
body:has(.dashboard-section) .dashboard-tabs button,
body:has(.dashboard-section) .dashboard-view-tab {
    color: #cbd5e1 !important;
}

body:has(.dashboard-section) .dashboard-tabs button.active {
    background: #ffb800 !important;
    color: #061b24 !important;
}

/* Empty states */
body:has(.dashboard-section) .empty-state,
body:has(.dashboard-section) .no-results,
body:has(.dashboard-section) .products-empty-state {
    background: transparent !important;
    color: #8fb3c1 !important;
}

/* Dashboard links */
body:has(.dashboard-section) a {
    color: #ffb800;
}

body:has(.dashboard-section) a:hover {
    color: #ffc52b;
}

/* New order notification */
body:has(.dashboard-section) .new-order-notification {
    background: #082f3b !important;
    border-color: #ffb800 !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) .new-order-notification-message {
    color: #cbd5e1 !important;
}

/* Scrollbars */
body:has(.dashboard-section) ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

body:has(.dashboard-section) ::-webkit-scrollbar-track {
    background: #061b24;
}

body:has(.dashboard-section) ::-webkit-scrollbar-thumb {
    background: #176078;
    border-radius: 999px;
}

body:has(.dashboard-section) ::-webkit-scrollbar-thumb:hover {
    background: #ffb800;
}


/* =========================================================
   FINAL DARK THEME — DASHBOARD OVERVIEW PANELS + CHART
   ========================================================= */

body:has(.dashboard-section) #dashboardHomeView {
    background: #061b24 !important;
    color: #f8fafc !important;
}

/* Welcome area */
body:has(.dashboard-section) .nm-dashboard-welcome {
    background: transparent !important;
}

body:has(.dashboard-section) .nm-dashboard-welcome > div:first-child {
    color: #f8fafc !important;
}

body:has(.dashboard-section) #dashboardWelcomeTitle,
body:has(.dashboard-section) #dashboardWelcomeSubtitle {
    color: #f8fafc !important;
}

body:has(.dashboard-section) #dashboardWelcomeSubtitle {
    color: #8fb3c1 !important;
}

/* Metrics — keep the strong yellow accent */
body:has(.dashboard-section) .nm-dashboard-metrics {
    background: transparent !important;
}

body:has(.dashboard-section) .nm-dashboard-metric-card {
    background: #ffb800 !important;
    border: 1px solid #ffb800 !important;
    color: #061b24 !important;
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.14) !important;
}

body:has(.dashboard-section) .nm-dashboard-metric-card span,
body:has(.dashboard-section) .nm-dashboard-metric-card strong,
body:has(.dashboard-section) .nm-dashboard-metric-card small {
    color: #061b24 !important;
}

/* Main dashboard panels */
body:has(.dashboard-section) .nm-dashboard-main-grid {
    background: transparent !important;
}

body:has(.dashboard-section) .nm-dashboard-panel {
    background: #082f3b !important;
    border: 1px solid #176078 !important;
    border-radius: 15px !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20) !important;
}

body:has(.dashboard-section) .nm-dashboard-panel-heading {
    background: transparent !important;
}

body:has(.dashboard-section) .nm-dashboard-panel-heading h2 {
    color: #f8fafc !important;
}

body:has(.dashboard-section) .nm-dashboard-panel-period {
    color: #8fb3c1 !important;
}

/* Sales chart itself */
body:has(.dashboard-section) .nm-sales-chart {
    background: #082f3b !important;
    color: #f8fafc !important;
    border: 0 !important;
}

/* Chart generated elements */
body:has(.dashboard-section) .nm-sales-chart > *,
body:has(.dashboard-section) .nm-sales-chart div,
body:has(.dashboard-section) .nm-sales-chart span {
    color: #8fb3c1 !important;
}

/* Chart vertical tracks */
body:has(.dashboard-section) .nm-sales-chart [class*="track"],
body:has(.dashboard-section) .nm-sales-chart [class*="bar-bg"],
body:has(.dashboard-section) .nm-sales-chart [class*="background"] {
    background: #123f4c !important;
}

/* Chart bars */
body:has(.dashboard-section) .nm-sales-chart [class*="bar"] {
    background-color: #ffb800 !important;
}

/* Chart labels */
body:has(.dashboard-section) .nm-sales-chart [class*="label"],
body:has(.dashboard-section) .nm-sales-chart [class*="value"],
body:has(.dashboard-section) .nm-sales-chart [class*="day"] {
    color: #8fb3c1 !important;
}

/* Top products */
body:has(.dashboard-section) .nm-top-products {
    background: #082f3b !important;
    color: #8fb3c1 !important;
    border: 0 !important;
}

body:has(.dashboard-section) .nm-top-products > *,
body:has(.dashboard-section) .nm-top-products div {
    background: transparent !important;
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) .nm-top-products strong,
body:has(.dashboard-section) .nm-top-products h3,
body:has(.dashboard-section) .nm-top-products h4 {
    color: #f8fafc !important;
}

/* Empty Top Products state */
body:has(.dashboard-section) .nm-top-products:empty {
    background: #082f3b !important;
}

/* Remove any remaining white backgrounds inside dashboard */
body:has(.dashboard-section) #dashboardHomeView * {
    scrollbar-color: #176078 #061b24;
}

body:has(.dashboard-section) #dashboardHomeView [style*="background: white"],
body:has(.dashboard-section) #dashboardHomeView [style*="background:#fff"],
body:has(.dashboard-section) #dashboardHomeView [style*="background: #fff"],
body:has(.dashboard-section) #dashboardHomeView [style*="background: #ffffff"] {
    background: #082f3b !important;
}

/* Keep text readable on dark panels */
body:has(.dashboard-section) #dashboardHomeView p,
body:has(.dashboard-section) #dashboardHomeView small {
    color: #8fb3c1;
}

/* Dark chart grid / separators */
body:has(.dashboard-section) #dashboardSalesChart hr,
body:has(.dashboard-section) #dashboardSalesChart [class*="grid"],
body:has(.dashboard-section) #dashboardSalesChart [class*="line"] {
    border-color: #176078 !important;
    background-color: transparent !important;
}


/* =========================================================
   SALES CHART — PRECISE DARK THEME
   ========================================================= */

body:has(.dashboard-section) .nm-sales-chart {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 14px !important;
    min-height: 260px !important;
    padding: 14px 8px 4px !important;
    background: transparent !important;
}

/* Each day */
body:has(.dashboard-section) .nm-sales-bar-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    height: 100% !important;
    color: #8fb3c1 !important;
}

/* Amount above the chart */
body:has(.dashboard-section) .nm-sales-bar-value {
    display: block !important;
    margin-bottom: 8px !important;
    color: #8fb3c1 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}

/* Tall dark chart track */
body:has(.dashboard-section) .nm-sales-bar-track {
    position: relative !important;
    width: 48px !important;
    height: 180px !important;
    max-width: 100% !important;
    background: #123f4c !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
}

/* Actual sales bar */
body:has(.dashboard-section) .nm-sales-bar {
    width: 100% !important;
    min-height: 8px !important;
    height: var(--sales-bar-height, 8%) !important;
    max-height: 100% !important;
    background: #ffb800 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

/* Because the real height is supplied inline by JavaScript */
body:has(.dashboard-section) .nm-sales-bar[style] {
    background: #ffb800 !important;
}

/* Day labels */
body:has(.dashboard-section) .nm-sales-bar-label {
    display: block !important;
    margin-top: 9px !important;
    color: #8fb3c1 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}

/* Never let the broad previous bar rule affect the track */
body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-track {
    background: #123f4c !important;
}

body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-track .nm-sales-bar {
    background: #ffb800 !important;
}


/* =========================================================
   FINAL SALES CHART COLOR CLEANUP
   ========================================================= */

body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-column {
    background: transparent !important;
}

body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-track {
    background: #123f4c !important;
    border: 0 !important;
}

body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-track .nm-sales-bar {
    background: #ffb800 !important;
}

body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-value,
body:has(.dashboard-section) .nm-sales-chart .nm-sales-bar-label {
    background: transparent !important;
    color: #8fb3c1 !important;
}

/* =========================================================
   FINAL DASHBOARD METRIC CARDS — DARK THEME
   ========================================================= */

body:has(.dashboard-section) .nm-dashboard-metric-card {
    background: #082f3b !important;
    border: 1px solid #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

body:has(.dashboard-section) .nm-dashboard-metric-card span {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) .nm-dashboard-metric-card strong {
    color: #f8fafc !important;
}

body:has(.dashboard-section) .nm-dashboard-metric-card small {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) .nm-dashboard-metric-card:hover {
    border-color: #ffb800 !important;
    box-shadow: 0 10px 28px rgba(255, 184, 0, 0.10) !important;
}

/* =========================================================
   METRIC CARDS — FINAL OVERRIDE
   ========================================================= */

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card {
    background: #082f3b !important;
    background-color: #082f3b !important;
    border: 1px solid #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card span,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card strong,
body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card small {
    background: transparent !important;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card span {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card strong {
    color: #f8fafc !important;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card small {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) #dashboardHomeView .nm-dashboard-metrics .nm-dashboard-metric-card:hover {
    background: #0d3d4d !important;
    border-color: #ffb800 !important;
}

/* Sidebar border — match the darker dashboard panel borders */
body:has(.dashboard-section) .dashboard-views {
    border-color: #176078 !important;
}

body:has(.dashboard-section) .dashboard-views::before,
body:has(.dashboard-section) .dashboard-views::after {
    border-color: #176078 !important;
}


/* =========================================================
   OWNER DASHBOARD — CONSISTENT DARK TEAL THEME
   Orders / Products / Settings / Subscription
   ========================================================= */

body:has(.dashboard-section) #ordersView,
body:has(.dashboard-section) #productsView,
body:has(.dashboard-section) #settingsView,
body:has(.dashboard-section) #subscriptionView {
    color: #f8fafc !important;
}

/* Main section headings */
body:has(.dashboard-section) #ordersView .products-management-heading,
body:has(.dashboard-section) #productsView .products-management-heading,
body:has(.dashboard-section) #settingsView .products-management-heading,
body:has(.dashboard-section) #subscriptionView .products-management-heading {
    background: #082f3b !important;
    border: 1px solid #176078 !important;
    color: #f8fafc !important;
    border-radius: 14px !important;
}

/* All major cards and panels */
body:has(.dashboard-section) #ordersView > *,
body:has(.dashboard-section) #productsView > *,
body:has(.dashboard-section) #settingsView > *,
body:has(.dashboard-section) #subscriptionView > * {
    color: #f8fafc;
}

/* Orders toolbar */
body:has(.dashboard-section) #ordersView .dashboard-toolbar,
body:has(.dashboard-section) #ordersView .dashboard-search,
body:has(.dashboard-section) #ordersView .dashboard-tabs {
    background: #082f3b !important;
    border-color: #176078 !important;
}

/* Orders search area */
body:has(.dashboard-section) #ordersView .dashboard-search-input-wrap {
    background: transparent !important;
}

body:has(.dashboard-section) #ordersView .dashboard-search label {
    color: #8fb3c1 !important;
}

/* Orders tabs */
body:has(.dashboard-section) #ordersView .dashboard-tab {
    background: #061f2b !important;
    border-color: #176078 !important;
    color: #cbd5e1 !important;
}

body:has(.dashboard-section) #ordersView .dashboard-tab.active {
    background: #ffb800 !important;
    border-color: #ffb800 !important;
    color: #061b24 !important;
}

/* Order cards */
body:has(.dashboard-section) #ordersView .order-card,
body:has(.dashboard-section) #ordersView .order-item,
body:has(.dashboard-section) #ordersView [class*="order-card"] {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

/* Product management cards */
body:has(.dashboard-section) #productsView .product-card,
body:has(.dashboard-section) #productsView .products-management-card,
body:has(.dashboard-section) #productsView .products-management-grid > * {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

/* Product management headings and empty states */
body:has(.dashboard-section) #productsView .products-management-heading,
body:has(.dashboard-section) #productsView .products-empty-state,
body:has(.dashboard-section) #productsView .empty-state {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

/* Shop settings main card */
body:has(.dashboard-section) #settingsView .shop-settings-card {
    background: #082f3b !important;
    border-color: #176078 !important;
}

/* Shop settings form */
body:has(.dashboard-section) #settingsView .shop-settings-form {
    background: #082f3b !important;
}

body:has(.dashboard-section) #settingsView .form-group label {
    color: #f8fafc !important;
}

/* Subscription cards */
body:has(.dashboard-section) #subscriptionView .subscription-card,
body:has(.dashboard-section) #subscriptionView .subscription-panel,
body:has(.dashboard-section) #subscriptionView [class*="subscription-card"],
body:has(.dashboard-section) #subscriptionView [class*="subscription-panel"] {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

/* Tables */
body:has(.dashboard-section) #ordersView table,
body:has(.dashboard-section) #productsView table,
body:has(.dashboard-section) #subscriptionView table {
    background: #082f3b !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) #ordersView th,
body:has(.dashboard-section) #productsView th,
body:has(.dashboard-section) #subscriptionView th {
    background: #061f2b !important;
    color: #ffb800 !important;
    border-color: #176078 !important;
}

body:has(.dashboard-section) #ordersView td,
body:has(.dashboard-section) #productsView td,
body:has(.dashboard-section) #subscriptionView td {
    background: #082f3b !important;
    color: #cbd5e1 !important;
    border-color: #176078 !important;
}

/* Buttons */
body:has(.dashboard-section) #ordersView .btn-primary,
body:has(.dashboard-section) #productsView .btn-primary,
body:has(.dashboard-section) #settingsView .btn-primary,
body:has(.dashboard-section) #subscriptionView .btn-primary {
    background: #ffb800 !important;
    border-color: #ffb800 !important;
    color: #061b24 !important;
}

/* Secondary buttons */
body:has(.dashboard-section) #ordersView .btn-outline,
body:has(.dashboard-section) #productsView .btn-outline,
body:has(.dashboard-section) #settingsView .btn-outline,
body:has(.dashboard-section) #subscriptionView .btn-outline {
    background: #061f2b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) #ordersView .btn-outline:hover,
body:has(.dashboard-section) #productsView .btn-outline:hover,
body:has(.dashboard-section) #settingsView .btn-outline:hover,
body:has(.dashboard-section) #subscriptionView .btn-outline:hover {
    background: #0d3d4d !important;
    border-color: #ffb800 !important;
}

/* Remove accidental white backgrounds in the four sections */
body:has(.dashboard-section) #ordersView [style*="background: white"],
body:has(.dashboard-section) #ordersView [style*="background:#fff"],
body:has(.dashboard-section) #ordersView [style*="background: #fff"],
body:has(.dashboard-section) #ordersView [style*="background: #ffffff"],
body:has(.dashboard-section) #productsView [style*="background: white"],
body:has(.dashboard-section) #productsView [style*="background:#fff"],
body:has(.dashboard-section) #productsView [style*="background: #fff"],
body:has(.dashboard-section) #productsView [style*="background: #ffffff"],
body:has(.dashboard-section) #subscriptionView [style*="background: white"],
body:has(.dashboard-section) #subscriptionView [style*="background:#fff"],
body:has(.dashboard-section) #subscriptionView [style*="background: #fff"],
body:has(.dashboard-section) #subscriptionView [style*="background: #ffffff"] {
    background: #082f3b !important;
}


/* Orders — dark teal theme */
body:has(.dashboard-section) #ordersView .dashboard-order-card {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

body:has(.dashboard-section) #ordersView .dashboard-order-header h2,
body:has(.dashboard-section) #ordersView .dashboard-order-items h3,
body:has(.dashboard-section) #ordersView .order-detail-box strong,
body:has(.dashboard-section) #ordersView .dashboard-order-item strong {
    color: #f8fafc !important;
}

body:has(.dashboard-section) #ordersView .dashboard-order-meta,
body:has(.dashboard-section) #ordersView .order-number-label,
body:has(.dashboard-section) #ordersView .order-detail-box span,
body:has(.dashboard-section) #ordersView .delivery-order-box span,
body:has(.dashboard-section) #ordersView .collection-order-box span {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) #ordersView .order-detail-box {
    background: #061f2b !important;
    border-color: #176078 !important;
}

body:has(.dashboard-section) #ordersView .dashboard-order-item {
    border-color: #176078 !important;
}

body:has(.dashboard-section) #ordersView .delivery-order-box {
    background: #0b3a3a !important;
    border-color: #176b68 !important;
}

body:has(.dashboard-section) #ordersView .collection-order-box {
    background: #3a3218 !important;
    border-color: #76631f !important;
}

body:has(.dashboard-section) #ordersView .delivery-order-box strong,
body:has(.dashboard-section) #ordersView .collection-order-box strong,
body:has(.dashboard-section) #ordersView .delivery-order-box p,
body:has(.dashboard-section) #ordersView .collection-order-box p {
    color: #f8fafc !important;
}

body:has(.dashboard-section) #ordersView .customer-note-box {
    background: #061f2b !important;
    border: 1px solid #176078 !important;
    color: #f8fafc !important;
}

body:has(.dashboard-section) #ordersView .customer-note-box p {
    color: #cbd5e1 !important;
}


/* Delete confirmation modal — dark teal theme */
.custom-confirm-card {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.custom-confirm-card h2 {
    color: #f8fafc !important;
}

.custom-confirm-card p {
    color: #8fb3c1 !important;
}

.custom-confirm-cancel {
    border-color: #176078 !important;
    background: #061f2b !important;
    color: #f8fafc !important;
}

.custom-confirm-cancel:hover {
    border-color: #2382a0 !important;
    background: #0a3442 !important;
}

.custom-confirm-confirm.custom-confirm-danger {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
}


/* Products — dark teal theme */
body:has(.dashboard-section) #productsView .product-management-card {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

body:has(.dashboard-section) #productsView .product-management-image,
body:has(.dashboard-section) #productsView .product-management-image-placeholder {
    background: #061f2b !important;
}

body:has(.dashboard-section) #productsView .product-management-image-placeholder {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) #productsView .product-management-category,
body:has(.dashboard-section) #productsView .product-management-description,
body:has(.dashboard-section) #productsView .product-management-details span {
    color: #8fb3c1 !important;
}

body:has(.dashboard-section) #productsView .product-management-top h3,
body:has(.dashboard-section) #productsView .product-management-details strong {
    color: #f8fafc !important;
}

body:has(.dashboard-section) #productsView .product-management-details > div {
    background: #061f2b !important;
    border-color: #176078 !important;
}

body:has(.dashboard-section) #productsView .product-status-active {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #7ee2a8 !important;
}

body:has(.dashboard-section) #productsView .product-status-inactive {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
}

body:has(.dashboard-section) #productsView .product-status-out_of_stock {
    background: rgba(248, 113, 113, 0.14) !important;
    color: #fca5a5 !important;
}


/* Product form modal — dark teal theme */
.product-form-card {
    background: #082f3b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.product-form-header {
    border-color: #176078 !important;
}

.product-form-header h2 {
    color: #f8fafc !important;
}

.product-form-header p {
    color: #8fb3c1 !important;
}

.product-form-close {
    border-color: #176078 !important;
    background: #061f2b !important;
    color: #f8fafc !important;
}

.product-form-close:hover {
    border-color: #2382a0 !important;
    background: #0a3442 !important;
}

.product-form .form-group label,
.product-form .product-checkbox {
    color: #f8fafc !important;
}

.product-form .form-group input,
.product-form .form-group select,
.product-form .form-group textarea {
    background: #061f2b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

.product-form .form-group input::placeholder,
.product-form .form-group textarea::placeholder {
    color: #6f95a4 !important;
}

.product-form .form-group input:focus,
.product-form .form-group select:focus,
.product-form .form-group textarea:focus {
    border-color: #2382a0 !important;
    box-shadow: 0 0 0 3px rgba(35, 130, 160, 0.18) !important;
}

.product-form .form-group small {
    color: #8fb3c1 !important;
}

.product-form-actions {
    border-color: #176078 !important;
}

.product-form-cancel {
    border-color: #176078 !important;
    background: #061f2b !important;
    color: #f8fafc !important;
}

.product-form-error {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #fca5a5 !important;
}


/* Product image picker — dark teal theme */
body:has(.dashboard-section) #productEditImagePicker {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #176078 !important;
    border-radius: 10px;
    background: #061f2b !important;
    color: #7ee2a8 !important;
    text-align: left;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

body:has(.dashboard-section) #productEditImagePicker:hover {
    border-color: #2382a0 !important;
    background: #0a3442 !important;
}

/* Subscription payment note — dark teal theme */
body:has(.dashboard-section) #subscriptionView .shop-payment-note {
    background: #061f2b !important;
    border: 1px solid #176078 !important;
    color: #cbd5e1 !important;
}


/* Subscription details — improve readability */
body:has(.dashboard-section) #subscriptionView .shop-subscription-row {
    border-color: #176078 !important;
}

body:has(.dashboard-section) #subscriptionView .shop-subscription-label {
    color: #9fc2ce !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

body:has(.dashboard-section) #subscriptionView .shop-subscription-value {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}

body:has(.dashboard-section) #subscriptionView .shop-subscription-status {
    color: #073b2a !important;
    font-weight: 850 !important;
}


/* Subscription dividers — subtle dark teal */
body:has(.dashboard-section) #subscriptionView .shop-subscription-row {
    border-color: rgba(23, 96, 120, 0.55) !important;
}


/* Subscription active status — green */
body:has(.dashboard-section) #subscriptionView .shop-subscription-status.ACTIVE {
    background: rgba(34, 197, 94, 0.16) !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
    color: #7ee2a8 !important;
}


/* Subscription Active — match Dashboard status pill */
body:has(.dashboard-section) #subscriptionView .shop-subscription-status.ACTIVE {
    background: #00c878 !important;
    color: #05251a !important;
    border: 0 !important;
}


/* =========================================================
   LOGIN — DARK TEAL THEME
   ========================================================= */

body:has(.auth-card) {
    background: #061f2b !important;
    color: #f8fafc !important;
}

body:has(.auth-card) .site-header {
    background: #061f2b !important;
    border-bottom: 1px solid #176078 !important;
}

body:has(.auth-card) .auth-card {
    background: #082f3b !important;
    border: 1px solid #176078 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22) !important;
}

body:has(.auth-card) .auth-card h1 {
    color: #f8fafc !important;
}

body:has(.auth-card) .auth-card .section-subtitle,
body:has(.auth-card) .auth-footer p {
    color: #9fc2ce !important;
}

body:has(.auth-card) .form-group label {
    color: #f8fafc !important;
}

body:has(.auth-card) .form-group input {
    background: #061f2b !important;
    border-color: #176078 !important;
    color: #f8fafc !important;
}

body:has(.auth-card) .form-group input::placeholder {
    color: #6f9aaa !important;
}

body:has(.auth-card) .form-group input:focus {
    border-color: #00c878 !important;
    box-shadow: 0 0 0 3px rgba(0, 200, 120, 0.12) !important;
}

body:has(.auth-card) .auth-footer {
    border-top-color: rgba(23, 96, 120, 0.55) !important;
}

body:has(.auth-card) .back-link {
    color: #9fc2ce !important;
}

body:has(.auth-card) .back-link:hover {
    color: #ffb800 !important;
}

body:has(.auth-card) .auth-submit {
    background: #ffb800 !important;
    border-color: #ffb800 !important;
    color: #061b24 !important;
}


/* =========================================================
   LOGIN — PREMIUM NAMIBIA MARKETPLACE BACKGROUND
   ========================================================= */

body:has(.auth-card) {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 25%, rgba(0, 200, 120, 0.10), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(0, 173, 220, 0.10), transparent 25%),
        radial-gradient(circle at 80% 85%, rgba(255, 184, 0, 0.09), transparent 28%),
        linear-gradient(135deg, #031820 0%, #061f2b 45%, #03252f 100%) !important;
}

/* Large atmospheric arcs */
body:has(.auth-card)::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 8% 42%,
            transparent 0 17%,
            rgba(0, 183, 220, 0.18) 17.1% 17.25%,
            transparent 17.35% 25%
        ),
        radial-gradient(
            ellipse at 94% 55%,
            transparent 0 20%,
            rgba(0, 183, 220, 0.14) 20.1% 20.25%,
            transparent 20.35% 30%
        ),
        radial-gradient(
            ellipse at 55% 105%,
            transparent 0 25%,
            rgba(255, 184, 0, 0.14) 25.1% 25.22%,
            transparent 25.32% 35%
        );
}

/* Fine decorative network lines and dots */
body:has(.auth-card)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.65;
    background-image:
        radial-gradient(circle, rgba(0, 200, 200, 0.55) 1.5px, transparent 1.7px),
        radial-gradient(circle, rgba(255, 184, 0, 0.50) 1.5px, transparent 1.7px);
    background-size: 30px 30px, 30px 30px;
    background-position: 20px 25px, calc(100% - 40px) calc(100% - 30px);
    background-repeat: no-repeat;
}

/* Keep actual page content above the decorative layer */
body:has(.auth-card) > * {
    position: relative;
    z-index: 1;
}

body:has(.auth-card) .site-header {
    background: rgba(3, 24, 32, 0.82) !important;
    border-bottom: 1px solid rgba(23, 96, 120, 0.70) !important;
    backdrop-filter: blur(18px);
}

body:has(.auth-card) .brand {
    color: #f8fafc !important;
}

body:has(.auth-card) .brand-flag {
    color: #ffb800;
}

body:has(.auth-card) .section {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    padding: 55px 0 75px;
}

/* Premium glass-style card */
body:has(.auth-card) .auth-card {
    position: relative;
    width: min(100%, 600px);
    margin: 0 auto;
    padding: 38px 40px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(8, 47, 59, 0.96),
            rgba(4, 35, 45, 0.94)
        ) !important;
    border: 1px solid rgba(0, 183, 220, 0.55) !important;
    border-radius: 22px !important;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.38),
        0 0 45px rgba(0, 183, 220, 0.08) !important;
    backdrop-filter: blur(18px);
}

/* Gold accent line across the card */
body:has(.auth-card) .auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #ffb800,
        #00c878,
        #00b7dc,
        transparent
    );
    opacity: 0.9;
}

/* Soft glow inside card */
body:has(.auth-card) .auth-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -110px;
    right: -70px;
    border-radius: 50%;
    background: rgba(0, 183, 220, 0.10);
    filter: blur(8px);
    pointer-events: none;
}

body:has(.auth-card) .eyebrow {
    color: #ffb800 !important;
    letter-spacing: 0.16em;
}

body:has(.auth-card) .auth-card h1 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    letter-spacing: -0.035em;
}

body:has(.auth-card) .auth-card .section-subtitle {
    color: #8fb8c6 !important;
    line-height: 1.6;
}

/* Inputs */
body:has(.auth-card) .form-group {
    margin-bottom: 19px;
}

body:has(.auth-card) .form-group label {
    margin-bottom: 8px;
    color: #f8fafc !important;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

body:has(.auth-card) .form-group input {
    min-height: 54px;
    background: rgba(3, 31, 41, 0.92) !important;
    border: 1px solid #176078 !important;
    border-radius: 12px !important;
    color: #f8fafc !important;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

body:has(.auth-card) .form-group input:hover {
    border-color: #23809d !important;
}

body:has(.auth-card) .form-group input:focus {
    background: #061f2b !important;
    border-color: #00c878 !important;
    box-shadow:
        0 0 0 3px rgba(0, 200, 120, 0.11),
        0 0 24px rgba(0, 200, 120, 0.07) !important;
}

body:has(.auth-card) .form-group input::placeholder {
    color: #628c9a !important;
}

/* Login button */
body:has(.auth-card) .auth-submit {
    min-height: 54px;
    margin-top: 4px;
    border-radius: 12px !important;
    background: linear-gradient(
        135deg,
        #ffb800,
        #ffc62e
    ) !important;
    border-color: #ffb800 !important;
    color: #061b24 !important;
    font-size: 0.96rem;
    font-weight: 850;
    box-shadow:
        0 8px 24px rgba(255, 184, 0, 0.18);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

body:has(.auth-card) .auth-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 12px 30px rgba(255, 184, 0, 0.24);
}

/* Footer */
body:has(.auth-card) .auth-footer {
    border-top-color: rgba(23, 96, 120, 0.55) !important;
}

body:has(.auth-card) .auth-footer p {
    color: #82aebb !important;
}

body:has(.auth-card) .back-link {
    color: #8fd8ea !important;
    font-weight: 750;
}

body:has(.auth-card) .back-link:hover {
    color: #ffb800 !important;
}

/* Error state */
body:has(.auth-card) .form-error {
    background: rgba(220, 38, 38, 0.10) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: #fecaca !important;
}

/* Mobile */
@media (max-width: 650px) {

    body:has(.auth-card) .section {
        align-items: flex-start;
        padding-top: 35px;
    }

    body:has(.auth-card) .auth-card {
        padding: 30px 24px;
        border-radius: 18px !important;
    }

}

/* Login header — refined marketplace branding */
body:has(.auth-card) .site-header {
    min-height: 72px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

body:has(.auth-card) .brand {
    letter-spacing: -0.015em;
}

body:has(.auth-card) .brand::first-letter {
    color: #ffb800;
}

body:has(.auth-card) .brand-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0;
    border-radius: 8px;
    background: #ffb800;
    box-shadow: 0 5px 18px rgba(255, 184, 0, 0.18);
}

body:has(.auth-card) .brand-flag::after {
    content: "NA";
    color: #061b24;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}


/* === NAMIBIA MARKETPLACE LOGIN NEON SYSTEM === */

body:has(.auth-card) {
    min-height: 100vh;
    overflow-x: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 50% 42%, rgba(0, 190, 210, 0.12), transparent 30%),
        radial-gradient(circle at 15% 70%, rgba(0, 180, 210, 0.10), transparent 28%),
        radial-gradient(circle at 88% 72%, rgba(255, 184, 0, 0.09), transparent 26%),
        linear-gradient(135deg, #031b24 0%, #002b35 45%, #031722 100%);
}

body:has(.auth-card)::before,
body:has(.auth-card)::after {
    content: "";
    position: fixed;
    inset: 72px 0 0;
    z-index: -2;
    pointer-events: none;
}

body:has(.auth-card)::before {
    background:
        radial-gradient(circle at 8% 18%, rgba(0, 225, 255, 0.75) 0 2px, transparent 3px),
        radial-gradient(circle at 14% 31%, rgba(255, 184, 0, 0.95) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 68%, rgba(0, 225, 255, 0.65) 0 7px, transparent 9px),
        radial-gradient(circle at 77% 22%, rgba(0, 225, 255, 0.7) 0 3px, transparent 5px),
        radial-gradient(circle at 91% 34%, rgba(255, 184, 0, 0.9) 0 3px, transparent 5px),
        radial-gradient(circle at 83% 74%, rgba(0, 225, 255, 0.65) 0 8px, transparent 11px),
        radial-gradient(circle at 94% 84%, rgba(255, 184, 0, 0.9) 0 3px, transparent 5px),
        radial-gradient(circle at 48% 12%, rgba(0, 225, 255, 0.4) 0 2px, transparent 4px);
    background-size: 100% 100%;
    filter: blur(0.2px);
    opacity: 0.9;
}

body:has(.auth-card)::after {
    inset: 72px 0 0;
    background:
        radial-gradient(circle at 7% 16%, rgba(0, 210, 230, 0.95) 0 1.5px, transparent 2.5px) 0 0 / 22px 22px,
        radial-gradient(circle at 91% 78%, rgba(255, 184, 0, 0.85) 0 1.5px, transparent 2.5px) 0 0 / 22px 22px;
    mask-image: linear-gradient(90deg, #000, transparent 35%, transparent 65%, #000);
    opacity: 0.55;
}

body:has(.auth-card) main {
    position: relative;
    min-height: calc(100vh - 73px);
    isolation: isolate;
    overflow: hidden;
}

body:has(.auth-card) main::before,
body:has(.auth-card) main::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

body:has(.auth-card) main::before {
    width: 760px;
    height: 760px;
    left: -470px;
    top: -220px;
    border: 2px solid rgba(0, 205, 225, 0.28);
    box-shadow:
        0 0 0 120px rgba(0, 205, 225, 0.025),
        0 0 80px rgba(0, 205, 225, 0.06);
}

body:has(.auth-card) main::after {
    width: 820px;
    height: 820px;
    right: -510px;
    bottom: -430px;
    border: 2px solid rgba(255, 184, 0, 0.32);
    box-shadow:
        0 0 0 150px rgba(255, 184, 0, 0.025),
        0 0 90px rgba(255, 184, 0, 0.06);
}

body:has(.auth-card) .site-header {
    position: relative;
    z-index: 20;
    background: rgba(2, 25, 34, 0.78);
    border-bottom: 1px solid rgba(0, 210, 230, 0.32);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.20);
}

body:has(.auth-card) .brand {
    color: #f8fafc;
}

body:has(.auth-card) .brand-flag {
    background: #ffb800;
    color: #061b24;
    box-shadow:
        0 0 18px rgba(255, 184, 0, 0.24),
        0 6px 20px rgba(0, 0, 0, 0.22);
}

body:has(.auth-card) .brand-flag::after {
    color: #061b24;
}

body:has(.auth-card) .section {
    padding: 72px 0 100px;
}

body:has(.auth-card) .auth-card {
    position: relative;
    width: min(100%, 610px);
    margin: 0 auto;
    padding: 38px 46px 42px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(5, 53, 65, 0.82),
            rgba(2, 30, 39, 0.72)
        );
    border: 1px solid rgba(0, 220, 235, 0.70);
    border-radius: 24px;
    box-shadow:
        0 0 0 1px rgba(0, 220, 235, 0.05),
        0 25px 80px rgba(0, 0, 0, 0.42),
        0 0 55px rgba(0, 190, 215, 0.08);
    backdrop-filter: blur(20px);
}

body:has(.auth-card) .auth-card::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #ffb800 25%,
        #00e5ff 55%,
        transparent
    );
    box-shadow:
        0 0 15px rgba(0, 229, 255, 0.75),
        0 0 18px rgba(255, 184, 0, 0.40);
}

body:has(.auth-card) .auth-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(0, 230, 210, 0.10);
    filter: blur(30px);
    pointer-events: none;
}

body:has(.auth-card) .eyebrow {
    color: #ffb800;
    text-shadow: 0 0 12px rgba(255, 184, 0, 0.18);
    letter-spacing: 0.14em;
}

body:has(.auth-card) .auth-card h1 {
    color: #f8fafc;
    font-size: clamp(2rem, 4vw, 2.5rem);
    letter-spacing: -0.035em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.24);
}

body:has(.auth-card) .section-subtitle {
    color: #8bc5d2;
}

body:has(.auth-card) .auth-form {
    margin-top: 28px;
}

body:has(.auth-card) .form-group {
    margin-bottom: 20px;
}

body:has(.auth-card) .form-group label {
    margin-bottom: 9px;
    color: #f8fafc;
    font-weight: 800;
}

body:has(.auth-card) .auth-input-wrap {
    position: relative;
}

body:has(.auth-card) .auth-input-icon {
    position: absolute;
    z-index: 2;
    left: 20px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.95;
}

body:has(.auth-card) .phone-icon::before {
    content: "⌕";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #55eaff;
    font-size: 25px;
    font-weight: 400;
    transform: rotate(-35deg);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}

body:has(.auth-card) .lock-icon::before {
    content: "♙";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #55eaff;
    font-size: 21px;
    transform: rotate(180deg);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}

body:has(.auth-card) .form-group input {
    position: relative;
    width: 100%;
    height: 54px;
    padding: 0 48px 0 52px;
    border: 1px solid rgba(0, 205, 230, 0.72);
    border-radius: 12px;
    background: rgba(0, 27, 37, 0.74);
    color: #dffaff;
    font-size: 0.95rem;
    box-shadow:
        inset 0 0 18px rgba(0, 190, 215, 0.025),
        0 0 0 rgba(0, 229, 255, 0);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

body:has(.auth-card) .form-group input::placeholder {
    color: #4e99aa;
}

body:has(.auth-card) .form-group input:focus {
    border-color: #00e5ff;
    background: rgba(0, 34, 45, 0.88);
    box-shadow:
        0 0 0 2px rgba(0, 229, 255, 0.08),
        0 0 20px rgba(0, 229, 255, 0.28),
        inset 0 0 16px rgba(0, 229, 255, 0.04);
}

body:has(.auth-card) .password-toggle {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 16px;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
}

body:has(.auth-card) .password-toggle::before {
    content: "";
    position: absolute;
    inset: 5px 2px;
    border: 2px solid #55eaff;
    border-radius: 70% 30% 70% 30%;
    transform: rotate(-45deg);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.30);
}

body:has(.auth-card) .password-toggle::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 9px;
    top: 9px;
    border-radius: 50%;
    background: #55eaff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.75);
}

body:has(.auth-card) .auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 54px;
    margin-top: 6px;
    border: 1px solid #ffd45a;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffb000, #ffc52e);
    color: #061b24;
    font-size: 1rem;
    font-weight: 900;
    box-shadow:
        0 10px 30px rgba(255, 184, 0, 0.20),
        0 0 24px rgba(255, 184, 0, 0.16);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

body:has(.auth-card) .auth-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 36px rgba(255, 184, 0, 0.30),
        0 0 32px rgba(255, 184, 0, 0.24);
}

body:has(.auth-card) .login-arrow {
    font-size: 1.45rem;
    line-height: 1;
}

body:has(.auth-card) .auth-footer {
    border-top-color: rgba(0, 190, 215, 0.28);
}

body:has(.auth-card) .auth-footer p {
    color: #78b8c5;
}

body:has(.auth-card) .back-link {
    color: #40e7ff;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.18);
}

body:has(.auth-card) .back-link:hover {
    color: #8ff5ff;
}

@media (max-width: 700px) {
    body:has(.auth-card) .section {
        padding: 38px 0 60px;
    }

    body:has(.auth-card) .auth-card {
        padding: 30px 24px 32px;
        border-radius: 20px;
    }
}


/* === LOGIN ICON ALIGNMENT / SVG POLISH === */

body:has(.auth-card) .auth-input-icon {
    left: 18px !important;
    top: 50% !important;
    width: 21px !important;
    height: 21px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #55eaff !important;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

body:has(.auth-card) .auth-input-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    color: #55eaff !important;
    overflow: visible;
}

body:has(.auth-card) .phone-icon::before,
body:has(.auth-card) .phone-icon::after,
body:has(.auth-card) .lock-icon::before,
body:has(.auth-card) .lock-icon::after {
    content: none !important;
}

body:has(.auth-card) .form-group input {
    padding-left: 52px !important;
}

body:has(.auth-card) .password-toggle {
    right: 15px !important;
    top: 50% !important;
    width: 30px !important;
    height: 30px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #55eaff !important;
}

body:has(.auth-card) .password-toggle::before,
body:has(.auth-card) .password-toggle::after {
    content: none !important;
}

body:has(.auth-card) .password-toggle svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    color: #55eaff !important;
    filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.35));
}

body:has(.auth-card) .password-toggle:hover svg {
    color: #8ff5ff !important;
}

body:has(.auth-card) .login-arrow {
    margin-left: 2px;
    transform: translateY(-1px);
}

/* === LOGIN PAGE — FIXED VIEWPORT === */

html:has(body .auth-card),
body:has(.auth-card) {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
}

body:has(.auth-card) {
    position: fixed;
    inset: 0;
    margin: 0;
}

body:has(.auth-card) .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 1000;
}

body:has(.auth-card) main {
    position: fixed;
    inset: 72px 0 0;
    height: calc(100vh - 72px);
    overflow: hidden !important;
}

body:has(.auth-card) .section {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

body:has(.auth-card) .section > .container {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

body:has(.auth-card) .auth-card {
    margin: 0 auto !important;
}

@media (max-height: 760px) {
    body:has(.auth-card) .auth-card {
        transform: scale(0.92);
        transform-origin: center center;
    }
}

@media (max-width: 600px) {
    body:has(.auth-card) .auth-card {
        width: min(92%, 520px);
        transform: none;
    }
}


/* === LOGIN — CUSTOM AUTOFILL COLORS === */

body:has(.auth-card) .form-group input:-webkit-autofill,
body:has(.auth-card) .form-group input:-webkit-autofill:hover,
body:has(.auth-card) .form-group input:-webkit-autofill:focus,
body:has(.auth-card) .form-group input:-webkit-autofill:active {
    -webkit-text-fill-color: #d9f7ff !important;
    caret-color: #55eaff !important;
    background-color: #062833 !important;
    border-color: #00d9ff !important;
    -webkit-box-shadow:
        inset 0 0 0 1000px #062833 !important,
        0 0 0 1px rgba(0, 217, 255, 0.22) !important;
    box-shadow:
        inset 0 0 0 1000px #062833 !important,
        0 0 0 1px rgba(0, 217, 255, 0.22) !important;
    transition:
        background-color 9999s ease-in-out 0s,
        color 9999s ease-in-out 0s;
}

body:has(.auth-card) .form-group input:-webkit-autofill::first-line {
    color: #d9f7ff !important;
}

body:has(.auth-card) .form-group input:focus {
    background: #062833 !important;
    color: #d9f7ff !important;
    border-color: #00d9ff !important;
    box-shadow:
        0 0 0 3px rgba(0, 217, 255, 0.10),
        0 0 22px rgba(0, 217, 255, 0.08) !important;
}

body:has(.auth-card) .form-group input::placeholder {
    color: #4d91a4 !important;
}


/* =========================================================
   REGISTRATION PAGE — SCROLLABLE DARK FORM
   ========================================================= */

html:has(#registerForm),
body:has(#registerForm) {
    width: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden !important;
}

body:has(#registerForm) {
    position: fixed;
    inset: 0;
    margin: 0;
}

body:has(#registerForm) .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 1000;
}

body:has(#registerForm) main {
    position: fixed;
    inset: 72px 0 0;
    height: calc(100vh - 72px);
    overflow: hidden !important;
}

body:has(#registerForm) .section {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 32px 0 !important;
    display: block;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #176078 #031c25;
}

body:has(#registerForm) .section > .container {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 50px;
}

body:has(#registerForm) .auth-card {
    margin: 0 auto !important;
    width: min(100%, 560px);
}

body:has(#registerForm) #registerForm h2 {
    color: #f8fbff !important;
}

body:has(#registerForm) #registerForm input,
body:has(#registerForm) #registerForm textarea,
body:has(#registerForm) #registerForm select {
    background: #062833 !important;
    color: #d9f7ff !important;
    border: 1px solid #176078 !important;
    border-radius: 11px !important;
}

body:has(#registerForm) #registerForm input::placeholder,
body:has(#registerForm) #registerForm textarea::placeholder {
    color: #4d91a4 !important;
}

body:has(#registerForm) #registerForm input:focus,
body:has(#registerForm) #registerForm textarea:focus,
body:has(#registerForm) #registerForm select:focus {
    background: #062833 !important;
    color: #d9f7ff !important;
    border-color: #00d9ff !important;
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(0, 217, 255, 0.10),
        0 0 22px rgba(0, 217, 255, 0.08) !important;
}

body:has(#registerForm) #registerForm textarea {
    min-height: 120px;
    resize: vertical;
}

body:has(#registerForm) #registerForm input:-webkit-autofill,
body:has(#registerForm) #registerForm input:-webkit-autofill:hover,
body:has(#registerForm) #registerForm input:-webkit-autofill:focus,
body:has(#registerForm) #registerForm input:-webkit-autofill:active {
    -webkit-text-fill-color: #d9f7ff !important;
    caret-color: #55eaff !important;
    background-color: #062833 !important;
    border-color: #00d9ff !important;
    -webkit-box-shadow:
        inset 0 0 0 1000px #062833 !important,
        0 0 0 1px rgba(0, 217, 255, 0.22) !important;
    box-shadow:
        inset 0 0 0 1000px #062833 !important,
        0 0 0 1px rgba(0, 217, 255, 0.22) !important;
}

body:has(#registerForm) .section::-webkit-scrollbar {
    width: 8px;
}

body:has(#registerForm) .section::-webkit-scrollbar-track {
    background: #031c25;
}

body:has(#registerForm) .section::-webkit-scrollbar-thumb {
    background: #176078;
    border-radius: 999px;
}

body:has(#registerForm) .section::-webkit-scrollbar-thumb:hover {
    background: #00aeca;
}

@media (max-width: 600px) {
    body:has(#registerForm) .section {
        padding: 20px 0 !important;
    }

    body:has(#registerForm) .auth-card {
        width: min(92%, 560px);
    }
}


/* Registration scroll correction */
body:has(#registerForm) main {
    overflow: hidden !important;
}

body:has(#registerForm) .section {
    height: calc(100vh - 72px) !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    display: block !important;
}

body:has(#registerForm) .section > .container {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-top: 32px !important;
    padding-bottom: 80px !important;
}

body:has(#registerForm) .auth-card {
    margin: 0 auto !important;
}


/* Registration — 30-day trial notice */
body:has(#registerForm) #registerForm > div[style*="var(--surface-soft)"] {
    background: #062833 !important;
    border: 1px solid #176078 !important;
    color: #d9f7ff !important;
    box-shadow:
        0 0 18px rgba(0, 217, 255, 0.05),
        inset 0 0 24px rgba(0, 120, 150, 0.04) !important;
}

body:has(#registerForm) #registerForm > div[style*="var(--surface-soft)"] strong {
    color: #ffb703 !important;
}

body:has(#registerForm) #registerForm > div[style*="var(--surface-soft)"] p {
    color: #8fc1cf !important;
}


/* =========================================================
   REGISTRATION — FIXED COMPACT FORM
   ========================================================= */

html:has(#registerForm),
body:has(#registerForm) {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
}

body:has(#registerForm) {
    position: fixed;
    inset: 0;
    margin: 0;
}

body:has(#registerForm) .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 1000;
}

body:has(#registerForm) main {
    position: fixed;
    inset: 72px 0 0;
    width: 100%;
    height: calc(100vh - 72px);
    overflow: hidden !important;
}

body:has(#registerForm) .section {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

body:has(#registerForm) .section > .container {
    width: min(96%, 980px);
    height: 100%;
    min-height: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

body:has(#registerForm) .auth-card {
    width: min(100%, 920px) !important;
    max-height: calc(100vh - 96px);
    margin: 0 auto !important;
    padding: 24px 28px !important;
    overflow: hidden !important;
}

body:has(#registerForm) #registerForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 0;
    margin-top: 14px;
}

body:has(#registerForm) #registerForm h2,
body:has(#registerForm) #registerForm > .section-subtitle {
    grid-column: 1 / -1;
}

body:has(#registerForm) #registerForm h2 {
    margin: 10px 0 3px !important;
    font-size: 1.15rem;
}

body:has(#registerForm) #registerForm > .section-subtitle {
    margin: 0 0 8px !important;
    font-size: 0.78rem;
}

body:has(#registerForm) #registerForm .form-group {
    margin-bottom: 8px !important;
}

body:has(#registerForm) #registerForm label:not([style]) {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
}

body:has(#registerForm) #registerForm input,
body:has(#registerForm) #registerForm textarea,
body:has(#registerForm) #registerForm select {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 8px 12px !important;
    background: #062833 !important;
    color: #d9f7ff !important;
    border: 1px solid #176078 !important;
    border-radius: 10px !important;
    box-sizing: border-box;
}

body:has(#registerForm) #registerForm textarea {
    height: 68px !important;
    min-height: 68px !important;
    resize: none !important;
}

body:has(#registerForm) #registerForm small {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    color: #5f9aaa;
}

body:has(#registerForm) #registerForm > div[style*="var(--surface-soft)"] {
    grid-column: 1 / -1;
    margin: 8px 0 !important;
    padding: 10px 13px !important;
    border-radius: 10px !important;
    background: #062833 !important;
    border: 1px solid #176078 !important;
    color: #d9f7ff !important;
}

body:has(#registerForm) #registerForm > div[style*="var(--surface-soft)"] strong {
    color: #ffb703 !important;
    font-size: 0.82rem;
}

body:has(#registerForm) #registerForm > div[style*="var(--surface-soft)"] p {
    margin: 3px 0 0 !important;
    color: #8fc1cf !important;
    font-size: 0.7rem;
    line-height: 1.35;
}

body:has(#registerForm) #registerForm > label[style] {
    grid-column: 1 / -1;
    margin: 3px 0 !important;
    font-size: 0.75rem;
}

body:has(#registerForm) #registerForm > label[style] input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 3px !important;
}

body:has(#registerForm) #registerForm #registerError,
body:has(#registerForm) #registerForm #registerSuccess {
    grid-column: 1 / -1;
}

body:has(#registerForm) #registerForm .auth-submit {
    grid-column: 1 / -1;
    height: 44px;
    min-height: 44px;
    margin-top: 6px;
}

body:has(#registerForm) .auth-footer {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

body:has(#registerForm) .auth-footer p {
    margin-bottom: 5px !important;
    font-size: 0.75rem;
}

@media (max-width: 700px) {

    body:has(#registerForm) .section {
        padding: 6px 0 !important;
    }

    body:has(#registerForm) .auth-card {
        width: 94% !important;
        padding: 18px !important;
        transform: scale(0.88);
        transform-origin: center center;
    }

    body:has(#registerForm) #registerForm {
        column-gap: 12px;
    }

}


/* =========================================================
   REGISTRATION — FORM-ONLY INTERNAL SCROLL
   ========================================================= */

body:has(#registerForm) .auth-card {
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body:has(#registerForm) #registerForm {
    min-height: 0;
    max-height: calc(100vh - 255px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #176078 #031c25;
}

body:has(#registerForm) #registerForm::-webkit-scrollbar {
    width: 7px;
}

body:has(#registerForm) #registerForm::-webkit-scrollbar-track {
    background: #031c25;
    border-radius: 999px;
}

body:has(#registerForm) #registerForm::-webkit-scrollbar-thumb {
    background: #176078;
    border-radius: 999px;
}

body:has(#registerForm) #registerForm::-webkit-scrollbar-thumb:hover {
    background: #00aeca;
}

body:has(#registerForm) .auth-footer {
    flex-shrink: 0;
}


/* Registration — narrower card, roomier inputs */
body:has(#registerForm) .section > .container {
    width: min(94%, 900px) !important;
}

body:has(#registerForm) .auth-card {
    width: min(100%, 860px) !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

body:has(#registerForm) #registerForm input,
body:has(#registerForm) #registerForm textarea,
body:has(#registerForm) #registerForm select {
    min-height: 44px !important;
    height: 44px !important;
    padding: 9px 13px !important;
}

body:has(#registerForm) #registerForm textarea {
    height: 76px !important;
    min-height: 76px !important;
}


/* Registration — slightly narrower */
body:has(#registerForm) .section > .container {
    width: min(91%, 840px) !important;
}

body:has(#registerForm) .auth-card {
    width: min(100%, 800px) !important;
}