/* ============================================================================
   customer-navy.css — HaloClean customer-portal dark navy theme

   Brings the hub customer portal into visual parity with the iOS/Android apps
   (Brand.swift / Color.kt): navy canvas (#091830), glass cards (#0D2240),
   cyan accent (#63D2DB), hairline white@10% borders, capsule status badges.

   EVERY rule is scoped under `body.theme-customer-navy` so admin/staff/driver
   dashboards are provably untouched. The body also carries `data-bs-theme="dark"`
   (Bootstrap 5.3 native color mode), which dark-flips the primitive long tail
   (forms, tables, dropdowns, modals); this file layers the navy/cyan brand,
   the chrome, the non-Bootstrap widgets, and the dashboard components on top.

   Both are set together in dashboard/structure/header.blade.php for non-staff.
   ========================================================================== */

/* ---- Tokens + Bootstrap variable overrides -------------------------------- */
body.theme-customer-navy {
    /* app brand tokens */
    --hc-navy-deepest: #091830;
    --hc-navy-card:    #0D2240;
    --hc-navy-raised:  #112A4A;
    --hc-cyan:         #63D2DB;   /* accent: text, links, icons, active nav */
    --hc-cyan-bright:  #0EA5E9;   /* filled buttons / CTA gradient start */
    --hc-cyan-deep:    #06B6D4;   /* CTA gradient end */
    --hc-border:       rgba(255, 255, 255, .10);
    --hc-muted:        rgba(255, 255, 255, .60);
    --hc-faint:        rgba(255, 255, 255, .45);
    /* app status set */
    --hc-blue:   #2196F3;
    --hc-green:  #4CAF50;
    --hc-orange: #FF9800;
    --hc-red:    #F44336;
    --hc-indigo: #3F51B5;
    --hc-gray:   #9E9E9E;

    /* --- Bootstrap 5.3 CSS variables --- */
    --bs-body-bg: var(--hc-navy-deepest);
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--hc-muted);          /* drives .text-muted */
    --bs-tertiary-color: var(--hc-faint);
    --bs-heading-color: #fff;

    --bs-primary: var(--hc-cyan);
    --bs-primary-rgb: 99, 210, 219;
    --bs-link-color: var(--hc-cyan);
    --bs-link-color-rgb: 99, 210, 219;
    --bs-link-hover-color: #8fe0e7;
    --bs-link-hover-color-rgb: 143, 224, 231;

    --bs-border-color: var(--hc-border);
    --bs-border-color-translucent: var(--hc-border);

    --bs-secondary-bg: var(--hc-navy-raised);
    --bs-tertiary-bg: var(--hc-navy-card);

    --bs-card-bg: var(--hc-navy-card);
    --bs-card-color: #fff;
    --bs-card-border-color: var(--hc-border);
    --bs-card-cap-bg: transparent;

    /* chrome (Velzon/Skote sidebar vars) */
    --bs-sidebar-bg: var(--hc-navy-card);
    --bs-sidebar-menu-item-color: var(--hc-muted);
    --bs-sidebar-menu-sub-item-color: var(--hc-muted);
    --bs-sidebar-menu-item-icon-color: rgba(255, 255, 255, .50);
    --bs-sidebar-menu-item-hover-color: #fff;
    --bs-sidebar-menu-item-active-color: var(--hc-cyan);
    --bs-sidebar-menu-item-active-bg-color: rgba(99, 210, 219, .10);
    --bs-sidebar-dark-bg: var(--hc-navy-card);

    background-color: var(--hc-navy-deepest);
    color: #fff;
}

/* ---- Logo: white wordmark on the navy sidebar ----------------------------- */
/* default (admin/staff, non-navy): show the ink logo, hide the white one */
.navbar-brand-box .hc-logo-white { display: none; }
body.theme-customer-navy .navbar-brand-box .hc-logo-ink { display: none; }
body.theme-customer-navy .navbar-brand-box .hc-logo-white { display: inline-block; }
/* collapsed rail has no small white asset — invert the ink mark to white */
body.theme-customer-navy .navbar-brand-box .logo-sm img { filter: brightness(0) invert(1); }

/* ---- Chrome: sidebar + topbar --------------------------------------------- */
body.theme-customer-navy .vertical-menu,
body.theme-customer-navy .navbar-brand-box {
    background-color: var(--hc-navy-card) !important;
    box-shadow: none;
}
body.theme-customer-navy .navbar-brand-box {
    border-inline-end: 1px solid var(--hc-border);
}
body.theme-customer-navy #page-topbar {
    background-color: var(--hc-navy-card);
    box-shadow: 0 1px 0 var(--hc-border);
}
body.theme-customer-navy #page-topbar .header-item,
body.theme-customer-navy #page-topbar .header-item i,
body.theme-customer-navy .vertical-menu-btn i {
    color: rgba(255, 255, 255, .75);
}
/* active / hover nav items — one clean rounded cyan pill. The theme hardcodes
   indigo #5b73e8, an inset box-shadow, and a width hack that read as a boxy
   outline on dark; force cyan and neutralise the shadow + width. */
body.theme-customer-navy #sidebar-menu > ul > li > a:hover,
body.theme-customer-navy #sidebar-menu > ul > li:hover > a,
body.theme-customer-navy #sidebar-menu > ul > li.mm-active > a,
body.theme-customer-navy #sidebar-menu ul li a.active,
body.theme-customer-navy #sidebar-menu ul li.mm-active > a {
    color: var(--hc-cyan) !important;
    background-color: rgba(99, 210, 219, .12) !important;
    box-shadow: none !important;
    width: auto !important;
}
body.theme-customer-navy #sidebar-menu > ul > li > a:hover i,
body.theme-customer-navy #sidebar-menu > ul > li:hover > a i,
body.theme-customer-navy #sidebar-menu > ul > li.mm-active > a i,
body.theme-customer-navy #sidebar-menu ul li a.active i,
body.theme-customer-navy #sidebar-menu ul li.mm-active > a i {
    color: var(--hc-cyan) !important;
}
/* base item: rounded pill + centred icon column + breathing room between items */
body.theme-customer-navy #sidebar-menu ul li a { border-radius: 8px; }
body.theme-customer-navy #sidebar-menu > ul > li > a { margin-top: 4px; margin-bottom: 4px; }
body.theme-customer-navy #sidebar-menu ul li a i {
    min-width: 1.75rem;
    text-align: center;
    padding-bottom: 0;
}
/* menu section headers */
body.theme-customer-navy #sidebar-menu .menu-title {
    color: var(--hc-faint);
}

/* ---- Surfaces: cards, borders, dividers ----------------------------------- */
body.theme-customer-navy .card {
    background-color: var(--hc-navy-card);
    color: #fff;
    border: 1px solid var(--hc-border);
    border-radius: 1rem;                 /* 16px, app section-card radius */
    box-shadow: none;
}
body.theme-customer-navy .card-header,
body.theme-customer-navy .card-footer {
    background-color: transparent;
    border-color: var(--hc-border);
}
body.theme-customer-navy .border,
body.theme-customer-navy .border-top,
body.theme-customer-navy .border-bottom,
body.theme-customer-navy .border-start,
body.theme-customer-navy .border-end {
    border-color: var(--hc-border) !important;
}
body.theme-customer-navy hr,
body.theme-customer-navy .dropdown-divider {
    color: var(--hc-border);
    border-color: var(--hc-border);
    opacity: 1;
}
body.theme-customer-navy .bg-white,
body.theme-customer-navy .bg-light {
    background-color: var(--hc-navy-raised) !important;
}

/* ---- Text utilities ------------------------------------------------------- */
body.theme-customer-navy,
body.theme-customer-navy h1, body.theme-customer-navy h2, body.theme-customer-navy h3,
body.theme-customer-navy h4, body.theme-customer-navy h5, body.theme-customer-navy h6,
body.theme-customer-navy .h1, body.theme-customer-navy .h2, body.theme-customer-navy .h3,
body.theme-customer-navy .h4, body.theme-customer-navy .h5, body.theme-customer-navy .h6 {
    color: #fff;
}
body.theme-customer-navy .text-muted,
body.theme-customer-navy .text-body-secondary { color: var(--hc-muted) !important; }
body.theme-customer-navy .text-dark,
body.theme-customer-navy .text-body,
body.theme-customer-navy .text-black { color: #fff !important; }
body.theme-customer-navy .text-secondary { color: #c8ccd4 !important; }
body.theme-customer-navy .text-danger  { color: var(--hc-red) !important; }
body.theme-customer-navy .text-success { color: var(--hc-green) !important; }
body.theme-customer-navy .text-warning { color: var(--hc-orange) !important; }
body.theme-customer-navy .text-info    { color: var(--hc-blue) !important; }
body.theme-customer-navy .text-primary { color: var(--hc-cyan) !important; }
body.theme-customer-navy a { color: var(--hc-cyan); }
body.theme-customer-navy a.text-decoration-none.text-dark:hover { color: var(--hc-cyan) !important; }
body.theme-customer-navy .page-title-box h4,
body.theme-customer-navy .page-title-box .h4 { color: #fff; }

/* ---- Badges: capsule + tint@15% bg + solid colour (app recipe) ------------ */
body.theme-customer-navy .badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .28em .6em;
}
body.theme-customer-navy .badge.bg-success-subtle   { background-color: rgba(76, 175, 80, .15)  !important; color: var(--hc-green)  !important; }
body.theme-customer-navy .badge.bg-warning-subtle   { background-color: rgba(255, 152, 0, .15)  !important; color: var(--hc-orange) !important; }
body.theme-customer-navy .badge.bg-danger-subtle    { background-color: rgba(244, 67, 54, .15)  !important; color: var(--hc-red)    !important; }
body.theme-customer-navy .badge.bg-info-subtle      { background-color: rgba(33, 150, 243, .15) !important; color: var(--hc-blue)   !important; }
body.theme-customer-navy .badge.bg-primary-subtle   { background-color: rgba(99, 210, 219, .15) !important; color: var(--hc-cyan)   !important; }
body.theme-customer-navy .badge.bg-secondary-subtle { background-color: rgba(158, 158, 158, .16) !important; color: #c8ccd4 !important; }
/* non-badge subtle backgrounds used as tints elsewhere */
body.theme-customer-navy .bg-success-subtle { background-color: rgba(76, 175, 80, .15)  !important; }
body.theme-customer-navy .bg-warning-subtle { background-color: rgba(255, 152, 0, .15)  !important; }
body.theme-customer-navy .bg-danger-subtle  { background-color: rgba(244, 67, 54, .15)  !important; }
body.theme-customer-navy .bg-info-subtle    { background-color: rgba(33, 150, 243, .15) !important; }
body.theme-customer-navy .bg-primary-subtle { background-color: rgba(99, 210, 219, .15) !important; }
/* solid Pay-Now badge (booking-card) */
body.theme-customer-navy .badge.bg-primary { background-color: var(--hc-cyan-bright) !important; color: #fff !important; }

/* ---- Buttons -------------------------------------------------------------- */
body.theme-customer-navy .btn-primary {
    --bs-btn-bg: var(--hc-cyan-bright);
    --bs-btn-border-color: var(--hc-cyan-bright);
    --bs-btn-hover-bg: var(--hc-cyan-deep);
    --bs-btn-hover-border-color: var(--hc-cyan-deep);
    --bs-btn-active-bg: var(--hc-cyan-deep);
    --bs-btn-active-border-color: var(--hc-cyan-deep);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--hc-cyan-bright);
    --bs-btn-disabled-border-color: var(--hc-cyan-bright);
}
body.theme-customer-navy .btn-outline-primary {
    --bs-btn-color: var(--hc-cyan);
    --bs-btn-border-color: var(--hc-cyan);
    --bs-btn-hover-bg: var(--hc-cyan);
    --bs-btn-hover-border-color: var(--hc-cyan);
    --bs-btn-hover-color: #062133;
    --bs-btn-active-bg: var(--hc-cyan);
    --bs-btn-active-border-color: var(--hc-cyan);
    --bs-btn-active-color: #062133;
}
body.theme-customer-navy .btn-light,
body.theme-customer-navy .btn-outline-secondary,
body.theme-customer-navy .btn-secondary {
    --bs-btn-bg: rgba(255, 255, 255, .06);
    --bs-btn-border-color: rgba(255, 255, 255, .18);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .28);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .14);
    --bs-btn-active-color: #fff;
}
body.theme-customer-navy .btn-danger {
    --bs-btn-bg: var(--hc-red); --bs-btn-border-color: var(--hc-red);
    --bs-btn-hover-bg: #d5372b; --bs-btn-hover-border-color: #d5372b;
}
body.theme-customer-navy .btn-success {
    --bs-btn-bg: var(--hc-green); --bs-btn-border-color: var(--hc-green);
    --bs-btn-hover-bg: #43a047; --bs-btn-hover-border-color: #43a047;
}

/* ---- Forms ---------------------------------------------------------------- */
body.theme-customer-navy .form-control,
body.theme-customer-navy .form-select,
body.theme-customer-navy .input-group-text {
    background-color: var(--hc-navy-card);
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
}
body.theme-customer-navy .form-control::placeholder { color: rgba(255, 255, 255, .40); }
body.theme-customer-navy .form-control:focus,
body.theme-customer-navy .form-select:focus {
    background-color: var(--hc-navy-card);
    border-color: var(--hc-cyan);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(99, 210, 219, .25);
}
body.theme-customer-navy .form-check-input {
    background-color: var(--hc-navy-raised);
    border-color: rgba(255, 255, 255, .25);
}
body.theme-customer-navy .form-check-input:checked {
    background-color: var(--hc-cyan-bright);
    border-color: var(--hc-cyan-bright);
}
body.theme-customer-navy .form-label,
body.theme-customer-navy .col-form-label { color: rgba(255, 255, 255, .85); }

/* ---- Tables --------------------------------------------------------------- */
body.theme-customer-navy .table {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-border-color: var(--hc-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: #fff;
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: #fff;
    color: #fff;
}
body.theme-customer-navy .table > thead th { color: var(--hc-muted); border-color: var(--hc-border); }
/* .table-light thead strips (invoice lists) — keep them dark, not a light island */
body.theme-customer-navy .table-light,
body.theme-customer-navy .table-light > tr > th,
body.theme-customer-navy .table > thead.table-light th {
    --bs-table-bg: var(--hc-navy-raised);
    --bs-table-color: var(--hc-muted);
    background-color: var(--hc-navy-raised);
    color: var(--hc-muted);
    border-color: var(--hc-border);
}

/* ---- Progress / list-group / nav-tabs ------------------------------------- */
body.theme-customer-navy .progress {
    background-color: rgba(255, 255, 255, .10);
}
body.theme-customer-navy .progress-bar.bg-info,
body.theme-customer-navy .progress-bar { background-color: var(--hc-cyan); }
body.theme-customer-navy .list-group {
    --bs-list-group-bg: var(--hc-navy-card);
    --bs-list-group-color: #fff;
    --bs-list-group-border-color: var(--hc-border);
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, .04);
    --bs-list-group-action-color: #fff;
}
body.theme-customer-navy .nav-tabs {
    --bs-nav-tabs-border-color: var(--hc-border);
    --bs-nav-tabs-link-active-color: var(--hc-cyan);
    --bs-nav-tabs-link-active-bg: var(--hc-navy-card);
    --bs-nav-tabs-link-active-border-color: var(--hc-border) var(--hc-border) var(--hc-navy-card);
}
body.theme-customer-navy .nav-tabs .nav-link { color: var(--hc-muted); }
body.theme-customer-navy .nav-tabs .nav-link.active { color: var(--hc-cyan); }
body.theme-customer-navy .nav-pills {
    --bs-nav-pills-link-active-bg: var(--hc-cyan-bright);
    --bs-nav-pills-link-active-color: #fff;
}

/* ---- Dropdowns / modals / offcanvas --------------------------------------- */
body.theme-customer-navy .dropdown-menu {
    --bs-dropdown-bg: var(--hc-navy-card);
    --bs-dropdown-color: #fff;
    --bs-dropdown-border-color: var(--hc-border);
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: rgba(99, 210, 219, .15);
    --bs-dropdown-link-active-color: var(--hc-cyan);
}
body.theme-customer-navy .modal-content,
body.theme-customer-navy .offcanvas {
    background-color: var(--hc-navy-card);
    color: #fff;
    border-color: var(--hc-border);
}
body.theme-customer-navy .modal-header,
body.theme-customer-navy .modal-footer { border-color: var(--hc-border); }

/* ===========================================================================
   Non-Bootstrap widgets (ignore data-bs-theme — hand-darkened)
   =========================================================================== */

/* ---- Select2 -------------------------------------------------------------- */
body.theme-customer-navy .select2-container--default .select2-selection--single,
body.theme-customer-navy .select2-container--default .select2-selection--multiple {
    background-color: var(--hc-navy-card);
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
}
body.theme-customer-navy .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; }
body.theme-customer-navy .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(255, 255, 255, .40); }
body.theme-customer-navy .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: rgba(255,255,255,.5) transparent transparent; }
body.theme-customer-navy .select2-dropdown {
    background-color: var(--hc-navy-card);
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
}
body.theme-customer-navy .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--hc-navy-raised);
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
}
body.theme-customer-navy .select2-results__option { color: #fff; }
body.theme-customer-navy .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(99, 210, 219, .18);
    color: #fff;
}
body.theme-customer-navy .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(255, 255, 255, .06);
}
body.theme-customer-navy .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(99, 210, 219, .18);
    border-color: rgba(99, 210, 219, .35);
    color: #fff;
}

/* ---- Flatpickr ------------------------------------------------------------ */
body.theme-customer-navy .flatpickr-calendar {
    background: var(--hc-navy-card);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    border: 1px solid var(--hc-border);
}
body.theme-customer-navy .flatpickr-calendar.arrowTop:before,
body.theme-customer-navy .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--hc-navy-card); }
body.theme-customer-navy .flatpickr-calendar.arrowBottom:before,
body.theme-customer-navy .flatpickr-calendar.arrowBottom:after { border-top-color: var(--hc-navy-card); }
body.theme-customer-navy .flatpickr-months,
body.theme-customer-navy .flatpickr-month,
body.theme-customer-navy .flatpickr-current-month .flatpickr-monthDropdown-months,
body.theme-customer-navy .flatpickr-weekday { color: #fff; fill: #fff; background: transparent; }
body.theme-customer-navy .flatpickr-months .flatpickr-prev-month svg,
body.theme-customer-navy .flatpickr-months .flatpickr-next-month svg { fill: #fff; }
body.theme-customer-navy .flatpickr-day { color: #fff; }
body.theme-customer-navy .flatpickr-day.flatpickr-disabled,
body.theme-customer-navy .flatpickr-day.prevMonthDay,
body.theme-customer-navy .flatpickr-day.nextMonthDay { color: rgba(255, 255, 255, .35); }
body.theme-customer-navy .flatpickr-day:hover { background: rgba(255, 255, 255, .08); border-color: transparent; }
body.theme-customer-navy .flatpickr-day.selected,
body.theme-customer-navy .flatpickr-day.selected:hover {
    background: var(--hc-cyan-bright);
    border-color: var(--hc-cyan-bright);
    color: #fff;
}
body.theme-customer-navy .flatpickr-day.today { border-color: var(--hc-cyan); }

/* ---- SweetAlert2 ---------------------------------------------------------- */
body.theme-customer-navy .swal2-popup {
    background: var(--hc-navy-card);
    color: #fff;
}
body.theme-customer-navy .swal2-title,
body.theme-customer-navy .swal2-html-container { color: #fff; }
body.theme-customer-navy .swal2-styled.swal2-confirm { background-color: var(--hc-cyan-bright) !important; }
body.theme-customer-navy .swal2-styled.swal2-cancel { background-color: rgba(255, 255, 255, .12) !important; }

/* ---- Simplebar scrollbar -------------------------------------------------- */
body.theme-customer-navy .simplebar-scrollbar:before { background: rgba(255, 255, 255, .28); }

/* ===========================================================================
   Dashboard components (dashboard/client/index.blade.php)
   =========================================================================== */

/* Greeting */
body.theme-customer-navy .hc-greeting-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0; }
body.theme-customer-navy .hc-greeting-name  { font-size: 16px; color: var(--hc-muted); margin: 0; }

/* Primary "Book a Service" gradient hero */
body.theme-customer-navy .hc-hero {
    display: block;
    text-decoration: none;
    position: relative;
    text-align: center;
    padding: 22px 16px;
    border-radius: 1rem;                 /* 16px */
    color: #fff;
    background: linear-gradient(135deg, var(--hc-cyan-bright), var(--hc-cyan-deep));
    box-shadow: 0 8px 16px rgba(6, 182, 212, .5);
    transition: transform .15s ease, box-shadow .15s ease;
}
body.theme-customer-navy .hc-hero:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(6, 182, 212, .55); }
body.theme-customer-navy .hc-hero-disc {
    width: 56px; height: 56px; border-radius: 50%;
    background: #fff; color: var(--hc-cyan-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin: 0 auto 10px;
}
body.theme-customer-navy .hc-hero-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 2px; }
body.theme-customer-navy .hc-hero-sub   { font-size: 15px; color: rgba(255, 255, 255, .85); margin: 0; }
body.theme-customer-navy .hc-hero-chevron {
    position: absolute; top: 14px; inset-inline-end: 14px;
    color: rgba(255, 255, 255, .85); font-size: 13px;
}

/* Flat info row (Refer a Friend, referral credits, prompts) */
body.theme-customer-navy .hc-info-row {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
    padding: 16px;
    border-radius: .75rem;               /* 12px */
    background: rgba(99, 210, 219, .10);
    color: #fff;
    transition: background .15s ease;
}
body.theme-customer-navy .hc-info-row:hover { background: rgba(99, 210, 219, .16); color: #fff; }
body.theme-customer-navy .hc-info-row .hc-info-icon { font-size: 20px; color: var(--hc-cyan); flex: 0 0 auto; }
body.theme-customer-navy .hc-info-row .hc-info-title { font-weight: 600; color: #fff; }
body.theme-customer-navy .hc-info-row .hc-info-sub { font-size: 13px; color: var(--hc-muted); }
body.theme-customer-navy .hc-info-row.hc-info-teal { background: rgba(41, 128, 143, .14); }
body.theme-customer-navy .hc-info-row.hc-info-teal .hc-info-icon { color: #63c7d6; }
body.theme-customer-navy .hc-info-chevron { margin-inline-start: auto; color: var(--hc-faint); }

/* Stat tiles (2-up glass tiles, icon on the leading side) */
body.theme-customer-navy .hc-stat-link { text-decoration: none; display: block; height: 100%; }
body.theme-customer-navy .hc-stat {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    height: 100%;
    background: var(--hc-navy-card);
    border: 1px solid var(--hc-border);
    border-radius: .75rem;               /* 12px */
    transition: transform .15s ease, border-color .15s ease;
}
body.theme-customer-navy .hc-stat-link:hover .hc-stat { transform: translateY(-1px); border-color: rgba(255, 255, 255, .20); }
body.theme-customer-navy .hc-stat-icon {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
body.theme-customer-navy .hc-stat-label { font-size: 12px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
body.theme-customer-navy .hc-stat-value { font-size: 18px; font-weight: 700; color: #fff; margin: 0; line-height: 1.25; }
body.theme-customer-navy .hc-stat-sub   { font-size: 11px; color: var(--hc-faint); margin: 0; line-height: 1.2; }

/* Section-card headers */
body.theme-customer-navy .hc-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 1rem; }
body.theme-customer-navy .hc-section-title > i { color: var(--hc-cyan); margin-inline-end: .5rem; }

/* RTL: mirror the row-affordance chevrons (Font Awesome glyphs don't auto-flip) */
[dir="rtl"] body.theme-customer-navy .hc-hero-chevron,
[dir="rtl"] body.theme-customer-navy .hc-info-chevron { transform: scaleX(-1); }

/* Collapsible section chevron (booking-detail order items): points down when
   open, rotates when collapsed. Bootstrap toggles `.collapsed` on the trigger. */
body.theme-customer-navy .hc-collapse-chevron { transition: transform .2s ease; }
body.theme-customer-navy [data-bs-toggle="collapse"].collapsed .hc-collapse-chevron { transform: rotate(-90deg); }