/* =========================================================================
   Theme Contrast Fix — v1
   ---------------------------------------------------------------------------
   Ensures readable text across dark/light themes even when legacy page code
   hard-codes colours inline (style="color:#000") or inside per-page <style>
   blocks.  Load this file LAST so !important rules win cleanly.

   Strategy
     - DARK mode : pull every dark-ish text, white-ish background & hard-coded
                   bootstrap "light" widget back to the theme tokens.
     - LIGHT mode: guard against white-on-white situations only (do NOT touch
                   "color: white" that sits on a coloured/gradient pill, because
                   that is legitimate and looks correct).
   ========================================================================= */


/* =========================================================
   DARK MODE — fight invisible dark text on dark surfaces
   ========================================================= */
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- 1. Bootstrap text utilities (extend frontend-pro.css) ---- */
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-body-secondary,
:root[data-theme="dark"] .text-body-tertiary,
:root[data-theme="dark"] .text-primary-emphasis,
:root[data-theme="dark"] .text-dark-emphasis {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary {
    color: var(--mu-text-muted, #a1a9b6) !important;
}

/* ---- 2. Hard-coded per-page classes that use #000 / #111827 / #0f172a ---- */
:root[data-theme="dark"] .underline-active,
:root[data-theme="dark"] .navbar-brand.text-dark,
:root[data-theme="dark"] .navbar-nav .nav-link,
:root[data-theme="dark"] .navbar-nav .nav-link.text-dark,
:root[data-theme="dark"] .navbar .dropdown-item,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .otp-preview-name,
:root[data-theme="dark"] .stat-value,
:root[data-theme="dark"] .how-title,
:root[data-theme="dark"] .announcement-title,
:root[data-theme="dark"] .product-detail-title,
:root[data-theme="dark"] .history-title,
:root[data-theme="dark"] .category-name,
:root[data-theme="dark"] .product-name,
:root[data-theme="dark"] .product-title,
:root[data-theme="dark"] .history-header,
:root[data-theme="dark"] .order-header,
:root[data-theme="dark"] .expired-title,
:root[data-theme="dark"] .expired-subtitle,
:root[data-theme="dark"] .expired-contact-title,
:root[data-theme="dark"] .expired-footnote,
:root[data-theme="dark"] .expired-contact {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .underline-active::after {
    background: var(--mu-text, #f1f5f9) !important;
}

/* ---- 3. Inline style="color:#000 / #111 / #222 / #333 / black ..." ---- */
:root[data-theme="dark"] [style*="color:#000"],
:root[data-theme="dark"] [style*="color: #000"],
:root[data-theme="dark"] [style*="color:#111"],
:root[data-theme="dark"] [style*="color: #111"],
:root[data-theme="dark"] [style*="color:#222"],
:root[data-theme="dark"] [style*="color: #222"],
:root[data-theme="dark"] [style*="color:#333"],
:root[data-theme="dark"] [style*="color: #333"],
:root[data-theme="dark"] [style*="color:#0f172a"],
:root[data-theme="dark"] [style*="color: #0f172a"],
:root[data-theme="dark"] [style*="color:#111827"],
:root[data-theme="dark"] [style*="color: #111827"],
:root[data-theme="dark"] [style*="color:#0f172a"],
:root[data-theme="dark"] [style*="color: #0f172a"],
:root[data-theme="dark"] [style*="color:black"],
:root[data-theme="dark"] [style*="color: black"] {
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 4. Inline style="background: #fff / white / light grey" ---- */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#FFF"],
:root[data-theme="dark"] [style*="background: #FFF"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background-color:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background-color:#FFF"],
:root[data-theme="dark"] [style*="background-color: #FFF"],
:root[data-theme="dark"] [style*="background-color:white"],
:root[data-theme="dark"] [style*="background-color: white"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background: #fafafa"],
:root[data-theme="dark"] [style*="background-color:#fafafa"],
:root[data-theme="dark"] [style*="background-color: #fafafa"],
:root[data-theme="dark"] [style*="background:#f8f9fa"],
:root[data-theme="dark"] [style*="background: #f8f9fa"],
:root[data-theme="dark"] [style*="background-color:#f8f9fa"],
:root[data-theme="dark"] [style*="background-color: #f8f9fa"] {
    background: var(--mu-surface, #111827) !important;
    background-color: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 5. Navbar (index.php legacy has inline style="background:#fff") ---- */
:root[data-theme="dark"] nav.navbar .navbar-brand,
:root[data-theme="dark"] nav.navbar .nav-link,
:root[data-theme="dark"] nav.navbar .nav-link small,
:root[data-theme="dark"] nav.navbar .dropdown-toggle,
:root[data-theme="dark"] nav.navbar small {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .navbar-toggler {
    border-color: var(--mu-border-strong, #2a3748) !important;
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 6. Dropdown menu ---- */
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .dropdown-item {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--mu-surface-2, #0f1624) !important;
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .dropdown-divider {
    border-color: var(--mu-border, #1f2a3a) !important;
}

/* ---- 7. Form controls ---- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background-color: var(--mu-surface-2, #0f1624) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    background-color: var(--mu-surface-2, #0f1624) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-primary, #4f46e5) !important;
}
:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] .form-select::placeholder,
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--mu-text-subtle, #6b7280) !important;
    opacity: 1;
}
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] label {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .input-group-text {
    background-color: var(--mu-surface-3, #1a2234) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}

/* ---- 8. Cards ---- */
:root[data-theme="dark"] .card {
    background-color: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .card-footer {
    background-color: transparent !important;
    color: inherit !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .card .card-title,
:root[data-theme="dark"] .card .card-text,
:root[data-theme="dark"] .card h1,
:root[data-theme="dark"] .card h2,
:root[data-theme="dark"] .card h3,
:root[data-theme="dark"] .card h4,
:root[data-theme="dark"] .card h5,
:root[data-theme="dark"] .card h6 {
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 9. Modals ---- */
:root[data-theme="dark"] .modal-content {
    background-color: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .modal-title,
:root[data-theme="dark"] .modal-body h1,
:root[data-theme="dark"] .modal-body h2,
:root[data-theme="dark"] .modal-body h3,
:root[data-theme="dark"] .modal-body h4,
:root[data-theme="dark"] .modal-body h5,
:root[data-theme="dark"] .modal-body h6,
:root[data-theme="dark"] .modal-body p,
:root[data-theme="dark"] .modal-body span:not([class*="badge"]):not([style*="background"]) {
    color: var(--mu-text, #f1f5f9);
}
:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- 10. Bootstrap "light" buttons / outlines ---- */
:root[data-theme="dark"] .btn-light {
    background-color: var(--mu-surface-3, #1a2234) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .btn-light:hover {
    background-color: var(--mu-surface-2, #0f1624) !important;
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark {
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border-strong, #2a3748) !important;
}
:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--mu-surface-2, #0f1624) !important;
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 11. Tables (extend) ---- */
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--mu-surface-2, #0f1624) !important;
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--mu-surface-3, #1a2234) !important;
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 12. List-group ---- */
:root[data-theme="dark"] .list-group-item {
    background-color: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}

/* ---- 13. Breadcrumb / nav pills ---- */
:root[data-theme="dark"] .breadcrumb {
    background-color: var(--mu-surface-2, #0f1624) !important;
}
:root[data-theme="dark"] .breadcrumb-item,
:root[data-theme="dark"] .breadcrumb-item a {
    color: var(--mu-text-muted, #a1a9b6) !important;
}
:root[data-theme="dark"] .breadcrumb-item.active {
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 14. admin-theme.css backend shell (hardcoded light tokens) ---- */
:root[data-theme="dark"] .admin-shell {
    --admin-bg: var(--mu-bg) !important;
    --admin-surface: var(--mu-surface) !important;
    --admin-surface-alt: var(--mu-surface-2) !important;
    --admin-text-main: var(--mu-text) !important;
    --admin-text-muted: var(--mu-text-muted) !important;
    --admin-border-soft: var(--mu-border) !important;
    color: var(--mu-text, #f1f5f9) !important;
    background: var(--mu-bg, #0b0f17) !important;
}
:root[data-theme="dark"] .admin-shell .card,
:root[data-theme="dark"] .admin-shell .card-hover,
:root[data-theme="dark"] .admin-shell .cardmb-3,
:root[data-theme="dark"] .admin-shell .container-sm,
:root[data-theme="dark"] .admin-shell .bg-white {
    background: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .admin-shell h1,
:root[data-theme="dark"] .admin-shell h2,
:root[data-theme="dark"] .admin-shell h3,
:root[data-theme="dark"] .admin-shell h4,
:root[data-theme="dark"] .admin-shell h5,
:root[data-theme="dark"] .admin-shell h6,
:root[data-theme="dark"] .admin-shell .card-title,
:root[data-theme="dark"] .admin-shell h1.text-main,
:root[data-theme="dark"] .admin-shell h1.text-black {
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .admin-shell .btn.border-main-gra.btn-up {
    background: linear-gradient(135deg, var(--mu-surface, #111827), var(--mu-surface-3, #1a2234)) !important;
    border-color: var(--mu-border-strong, #2a3748) !important;
}
:root[data-theme="dark"] .admin-shell .btn.border-main-gra.btn-up h4 {
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 15. admin-pro dashboard (ap-*) — tokens already ok, catch stragglers ---- */
:root[data-theme="dark"] .ap-page-head h1,
:root[data-theme="dark"] .ap-page-head p,
:root[data-theme="dark"] .ap-card h3,
:root[data-theme="dark"] .ap-kpi-value,
:root[data-theme="dark"] .ap-table th,
:root[data-theme="dark"] .ap-table td {
    color: var(--ap-text, var(--mu-text, #f1f5f9)) !important;
}

/* ---- 16. SweetAlert2 popups ---- */
:root[data-theme="dark"] .swal2-popup {
    background: var(--mu-surface, #111827) !important;
    color: var(--mu-text, #f1f5f9) !important;
}
:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-html-container {
    color: var(--mu-text, #f1f5f9) !important;
}

/* ---- 17. Scrollbar track matches surface in dark mode ---- */
:root[data-theme="dark"] body::-webkit-scrollbar-track {
    background: var(--mu-surface-2, #0f1624) !important;
}


/* =========================================================
   LIGHT MODE — guard against white-on-white situations
   ========================================================= */

/* Pure-white text sitting inside a white card / white inline bg is unreadable.
   We only target the "both white" pairing to avoid breaking coloured buttons. */
:root[data-theme="light"] [style*="background:#fff"][style*="color:#fff"],
:root[data-theme="light"] [style*="background: #fff"][style*="color:#fff"],
:root[data-theme="light"] [style*="background:#fff"][style*="color: #fff"],
:root[data-theme="light"] [style*="background: #fff"][style*="color: #fff"],
:root[data-theme="light"] [style*="background:white"][style*="color:white"],
:root[data-theme="light"] [style*="background: white"][style*="color: white"],
:root[data-theme="light"] [style*="background-color:#fff"][style*="color:#fff"],
:root[data-theme="light"] [style*="background-color: #fff"][style*="color: #fff"] {
    color: var(--mu-text, #0f172a) !important;
}

/* Bootstrap .text-white inside .bg-white / .card (not on coloured utility) */
:root[data-theme="light"] .bg-white .text-white:not(.btn):not(.badge):not([class*="bg-"]),
:root[data-theme="light"] .card .text-white:not(.btn):not(.badge):not([class*="bg-primary"]):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="bg-dark"]) {
    color: var(--mu-text, #0f172a) !important;
}

/* .text-white-50 / .text-light barely visible on white surface */
:root[data-theme="light"] .bg-white .text-white-50,
:root[data-theme="light"] .bg-white .text-light,
:root[data-theme="light"] .card > .text-white-50,
:root[data-theme="light"] .card > .text-light {
    color: var(--mu-text-muted, #5b6472) !important;
}

/* Placeholder normalisation */
:root[data-theme="light"] .form-control::placeholder,
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #8a93a4 !important;
    opacity: 1;
}

/* Body default text (safety net) */
:root[data-theme="light"] body  { color: var(--mu-text, #0f172a); }
:root[data-theme="dark"]  body  { color: var(--mu-text, #f1f5f9); }


/* =========================================================================
   FOOTER — full layout + spacing (the original CSS was incomplete,
   so the footer looked broken on every page). All tokens follow the
   theme variables so dark/light modes are handled automatically.
   ========================================================================= */

.site-footer {
    margin-top: 64px;
    padding: 56px 0 28px;
    background: transparent;
    border-top: 0;
    color: var(--mu-text-muted, #5b6472);
    font-size: .92rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
.site-footer .landing-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Responsive column grid */
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.25fr;
    gap: 44px;
    align-items: start;
    margin-bottom: 32px;
}
@media (max-width: 991px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (max-width: 575px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .site-footer {
        padding: 44px 0 24px;
        margin-top: 48px;
    }
}

/* Brand column */
.site-footer .footer-grid > div:first-child > div:first-child {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--mu-text, #0f172a);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.site-footer .footer-text {
    color: var(--mu-text-muted, #5b6472);
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    max-width: 34ch;
    font-size: .9rem;
    line-height: 1.75;
}

/* Column titles */
.site-footer .footer-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mu-text, #0f172a);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--mu-primary, #4f46e5);
    display: inline-block;
}

/* Link lists */
.site-footer .footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.site-footer .footer-list li {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: transform .18s ease;
}
.site-footer .footer-list li:hover {
    background: transparent !important;
    border: 0 !important;
    transform: translateX(3px);
}
.site-footer .footer-list li a,
.site-footer .footer-list li {
    color: var(--mu-text-muted, #5b6472);
    text-decoration: none;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease;
}
.site-footer .footer-list li a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mu-primary, #4f46e5);
    opacity: .55;
    transition: opacity .15s ease, transform .15s ease;
    flex-shrink: 0;
}
.site-footer .footer-list li a:hover {
    color: var(--mu-primary, #4f46e5);
}
.site-footer .footer-list li a:hover::before {
    opacity: 1;
    transform: scale(1.3);
}

/* Contact card column */
.site-footer .footer-card {
    background: var(--mu-surface-2, #f6f7f9) !important;
    border: 1px solid var(--mu-border, #e6e8ec) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.site-footer .footer-contact-item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .9rem;
}
.site-footer .footer-contact-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mu-primary, #4f46e5) 15%, transparent);
    color: var(--mu-primary, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .footer-contact-item:hover .footer-contact-icon {
    background: var(--mu-primary, #4f46e5);
    color: #fff;
    transform: scale(1.06);
}
.site-footer .footer-contact-text {
    color: var(--mu-text, #0f172a);
    text-decoration: none;
    font-weight: 500;
    word-break: break-word;
}
.site-footer .footer-contact-text:hover {
    color: var(--mu-primary, #4f46e5);
}

/* Bottom bar */
.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--mu-border, #e6e8ec);
    color: var(--mu-text-subtle, #8a93a4);
    font-size: .82rem;
}
.site-footer .footer-bottom a {
    color: var(--mu-text-muted, #5b6472);
    text-decoration: none;
    margin-left: 18px;
    transition: color .15s ease;
}
.site-footer .footer-bottom a:first-of-type { margin-left: 0; }
.site-footer .footer-bottom a:hover { color: var(--mu-primary, #4f46e5); }
@media (max-width: 575px) {
    .site-footer .footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .site-footer .footer-bottom a { margin-left: 12px; margin-right: 12px; }
}

/* Hide the old decorative pseudo-elements (frontend-pro.css already does this
   but make sure the rule still applies after this file loads) */
.site-footer::before,
.site-footer::after {
    display: none !important;
    content: none !important;
}

/* Safety: if mobile bottom-nav is present, keep footer clear of it */
@media (max-width: 991px) {
    body.mu-app-shell .site-footer {
        padding-bottom: 96px;
    }
}

/* Dark-mode polish for the footer (extend the tokenised colours) */
:root[data-theme="dark"] .site-footer {
    background: transparent;
    border-top: 0;
    color: var(--mu-text-muted, #a1a9b6);
}
:root[data-theme="dark"] .site-footer .footer-card {
    background: var(--mu-surface-2, #0f1624) !important;
    border-color: var(--mu-border, #1f2a3a) !important;
}
:root[data-theme="dark"] .site-footer .footer-contact-icon {
    background: color-mix(in srgb, var(--mu-primary, #4f46e5) 22%, transparent);
}


/* =========================================================================
   HOMEPAGE SECTION POLISH — make sections breathe, quieter borders,
   tighter spacing rhythm so the page feels organised & calm.
   (Applies to simple.php landing content: .mu-section-heading,
    .order-section, .v4-submenu, .v4-cat-grid, .v4-faq, .v4-cta, etc.)
   ========================================================================= */

.landing-shell .mu-section-heading {
    margin-top: 40px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.landing-shell .mu-section-heading .mu-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.landing-shell .mu-section-heading .mu-title i {
    color: var(--mu-primary, #4f46e5);
}
.landing-shell .mu-section-heading .mu-pill {
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mu-primary, #4f46e5) 12%, transparent);
    color: var(--mu-primary, #4f46e5);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Softer section title pill */
.landing-shell .mu-section-heading .mu-title {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--mu-text, #0f172a);
}
:root[data-theme="dark"] .landing-shell .mu-section-heading .mu-title {
    color: var(--mu-text, #f1f5f9) !important;
}

/* Submenu (API services) — 2 columns on mobile, 4 on desktop, flat & tidy */
.landing-shell .mu-services.v4-submenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 768px) {
    .landing-shell .mu-services.v4-submenu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}

.landing-shell .mu-service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 16px;
    border-radius: 16px;
    text-decoration: none;
    background: var(--mu-surface, #ffffff);
    border: 1px solid var(--mu-border, #e6e8ec);
    color: var(--mu-text, #0f172a);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    position: relative;
    overflow: hidden;
}
.landing-shell .mu-service-card:hover {
    transform: translateY(-3px);
    border-color: var(--mu-primary, #4f46e5);
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.landing-shell .mu-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--mu-primary, #4f46e5);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.landing-shell .mu-service-title {
    font-size: .98rem;
    font-weight: 700;
    margin: 2px 0 0;
    color: var(--mu-text, #0f172a);
}
.landing-shell .mu-service-desc {
    font-size: .8rem;
    color: var(--mu-text-muted, #5b6472);
    margin: 0;
    line-height: 1.55;
}
.landing-shell .mu-service-arrow {
    margin-top: auto;
    font-size: .78rem;
    color: var(--mu-primary, #4f46e5);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

:root[data-theme="dark"] .landing-shell .mu-service-card {
    background: var(--mu-surface, #111827);
    border-color: var(--mu-border, #1f2a3a);
    color: var(--mu-text, #f1f5f9);
}
:root[data-theme="dark"] .landing-shell .mu-service-title {
    color: var(--mu-text, #f1f5f9) !important;
}

/* Live-orders carousel — calm the borders & fix dark-mode contrast */
.landing-shell .order-section .order-card {
    background: var(--mu-surface, #ffffff);
    border: 1px solid var(--mu-border, #e6e8ec);
    border-radius: 16px;
    padding: 14px;
    overflow: hidden;
}
.landing-shell .order-section .section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 2px 12px;
}
.landing-shell .order-section .section-heading h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mu-text, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.landing-shell .order-section .section-heading h5 i {
    color: var(--mu-primary, #4f46e5);
}
.landing-shell .order-section .small-label {
    font-size: .8rem;
    color: var(--mu-text-muted, #5b6472);
}

.landing-shell .order-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.landing-shell .order-track::-webkit-scrollbar { height: 6px; }
.landing-shell .order-track::-webkit-scrollbar-thumb {
    background: var(--mu-border-strong, #cdd1d8);
    border-radius: 999px;
}
.landing-shell .order-item {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--mu-surface-2, #f6f7f9);
    border: 1px solid var(--mu-border, #e6e8ec);
    scroll-snap-align: start;
}
.landing-shell .order-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.landing-shell .order-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--mu-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.landing-shell .order-time {
    font-size: .72rem;
    color: var(--mu-text-muted, #5b6472);
}
.landing-shell .order-status {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 700;
    color: #059669;
    background: color-mix(in srgb, #10b981 15%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

:root[data-theme="dark"] .landing-shell .order-section .order-card {
    background: var(--mu-surface, #111827);
    border-color: var(--mu-border, #1f2a3a);
}
:root[data-theme="dark"] .landing-shell .order-item {
    background: var(--mu-surface-2, #0f1624);
    border-color: var(--mu-border, #1f2a3a);
}
:root[data-theme="dark"] .landing-shell .order-name {
    color: var(--mu-text, #f1f5f9) !important;
}

/* Why-choose-us features — unify cards */
.landing-shell .v4-feature-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 576px) {
    .landing-shell .v4-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 992px) {
    .landing-shell .v4-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
.landing-shell .v4-feature-card {
    background: var(--mu-surface, #ffffff);
    border: 1px solid var(--mu-border, #e6e8ec);
    border-radius: 16px;
    padding: 22px 18px;
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.landing-shell .v4-feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--mu-primary, #4f46e5);
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.landing-shell .v4-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mu-primary, #4f46e5) 15%, transparent);
    color: var(--mu-primary, #4f46e5);
    font-size: 1.1rem;
    margin-bottom: 12px;
}
.landing-shell .v4-feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mu-text, #0f172a);
    margin-bottom: 6px;
}
.landing-shell .v4-feature-desc {
    font-size: .86rem;
    color: var(--mu-text-muted, #5b6472);
    line-height: 1.6;
}
:root[data-theme="dark"] .landing-shell .v4-feature-card {
    background: var(--mu-surface, #111827);
    border-color: var(--mu-border, #1f2a3a);
}
:root[data-theme="dark"] .landing-shell .v4-feature-title {
    color: var(--mu-text, #f1f5f9) !important;
}

/* FAQ list */
.landing-shell .v4-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.landing-shell .v4-faq-item {
    background: var(--mu-surface, #ffffff);
    border: 1px solid var(--mu-border, #e6e8ec);
    border-radius: 14px;
    padding: 0 18px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.landing-shell .v4-faq-item[open] {
    border-color: var(--mu-primary, #4f46e5);
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
}
.landing-shell .v4-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    color: var(--mu-text, #0f172a);
    font-size: .95rem;
}
.landing-shell .v4-faq-item summary::-webkit-details-marker { display: none; }
.landing-shell .v4-faq-q { flex: 1; }
.landing-shell .v4-faq-chevron {
    transition: transform .22s ease;
    color: var(--mu-primary, #4f46e5);
    font-size: .85rem;
}
.landing-shell .v4-faq-item[open] .v4-faq-chevron { transform: rotate(180deg); }
.landing-shell .v4-faq-a {
    padding: 0 0 16px;
    color: var(--mu-text-muted, #5b6472);
    font-size: .9rem;
    line-height: 1.75;
    border-top: 1px dashed var(--mu-border, #e6e8ec);
    padding-top: 12px;
}
:root[data-theme="dark"] .landing-shell .v4-faq-item {
    background: var(--mu-surface, #111827);
    border-color: var(--mu-border, #1f2a3a);
}
:root[data-theme="dark"] .landing-shell .v4-faq-item summary {
    color: var(--mu-text, #f1f5f9) !important;
}

/* CTA strip */
.landing-shell .v4-cta {
    margin-top: 40px;
    padding: 34px 28px;
    border-radius: 20px;
    background: linear-gradient(135deg,
        var(--mu-primary, #4f46e5) 0%,
        color-mix(in srgb, var(--mu-primary, #4f46e5) 78%, #000) 100%);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--mu-primary, #4f46e5) 25%, transparent);
}
.landing-shell .v4-cta-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.landing-shell .v4-cta-text {
    font-size: .92rem;
    opacity: .92;
    max-width: 42ch;
    color: #fff;
}
.landing-shell .v4-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}
.landing-shell .v4-cta .btn {
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
}
.landing-shell .v4-cta .v4-cta-main {
    background: #fff;
    color: var(--mu-primary, #4f46e5);
    border: 0;
}
.landing-shell .v4-cta .v4-cta-main:hover { filter: brightness(.96); }
.landing-shell .v4-cta .v4-cta-ghost {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.3);
}
.landing-shell .v4-cta .v4-cta-ghost:hover { background: rgba(255,255,255,.18); color:#fff; }

/* Announcement card calm polish */
.landing-shell .announcement-card {
    background: var(--mu-surface, #ffffff);
    border: 1px solid var(--mu-border, #e6e8ec);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.landing-shell .announcement-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mu-primary, #4f46e5), color-mix(in srgb, var(--mu-primary, #4f46e5) 70%, #000));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.landing-shell .announcement-card .announcement-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mu-text, #0f172a);
    margin: 0 0 4px;
}
.landing-shell .announcement-card .announcement-text {
    font-size: .88rem;
    color: var(--mu-text-muted, #5b6472);
    line-height: 1.7;
}
:root[data-theme="dark"] .landing-shell .announcement-card {
    background: var(--mu-surface, #111827);
    border-color: var(--mu-border, #1f2a3a);
}
:root[data-theme="dark"] .landing-shell .announcement-card .announcement-title {
    color: var(--mu-text, #f1f5f9) !important;
}