/* ============================================================
   Apple-Style Redesign — Patrice Calligaris
   Apple-neutral canvas + restrained teal accent.
   Built on top of Bootstrap 5; restyles the SupportEngine
   .nk-* layout chrome and the page component classes.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    /* Apple-neutral canvas */
    --apple-bg:        #fbfbfd;
    --apple-surface:   #ffffff;
    --apple-elevated:  #ffffff;
    --ink:             #1d1d1f;
    --ink-secondary:   #6e6e73;
    --ink-tertiary:    #86868b;
    --hairline:        #d2d2d7;
    --hairline-soft:   #e8e8ed;
    --fill-quiet:      #f5f5f7;

    /* Accent — green (#34c7cf). Drives all non-button UI: icons, links,
       sidebar, hero, prices, focus rings, hover glows. */
    --teal:            #34c7cf;
    --teal-hover:      #29aab1;
    --teal-soft:       rgba(52, 199, 207, 0.10);
    --teal-rgb:        52, 199, 207;

    /* Button accent — blue. Only buttons (primary, success, checkout)
       read from these so they stand out from the green body accents. */
    --btn-blue:        #2497d1;
    --btn-blue-hover:  #1d7fa8;
    --btn-blue-rgb:    36, 151, 209;

    /* Bootstrap aliases — remapped so existing markup keeps working */
    --bs-primary:        var(--teal);
    --bs-primary-hover:  var(--teal-hover);
    --bs-primary-light:  var(--teal-soft);
    --bs-primary-rgb:    var(--teal-rgb);
    --bs-secondary:      #1d1d1f;
    --bs-secondary-hover:#000000;
    --bs-secondary-light:#f5f5f7;
    --bs-secondary-rgb:  29, 29, 31;
    --bs-light:          var(--fill-quiet);
    --bs-lighter:        var(--apple-bg);
    --bs-dark:           var(--ink);
    --bs-gray:           var(--ink-secondary);
    --bs-gray-dark:      var(--ink);
    --bs-muted:          var(--ink-secondary);
    --bs-border:         var(--hairline);
    --bs-body-color:     var(--ink-secondary);
    --bs-body-bg:        var(--apple-bg);
    --bs-body-color-rgb: 110, 110, 115;
    --bs-body-bg-rgb:    251, 251, 253;

    /* Status colors — success keeps its own green (#34c759) for text,
       prices, alerts and badges so they read as "positive". Buttons are
       overridden separately to the blue accent (see .btn-success below).
       Danger/warning stay distinct for destructive & caution states. */
    --bs-success:    #34c759;  --bs-success-rgb: 52, 199, 89;
    --bs-danger:     #ff3b30;  --bs-danger-rgb:  255, 59, 48;
    --bs-warning:    #ff9f0a;  --bs-warning-rgb: 255, 159, 10;
    --bs-info:       var(--teal); --bs-info-rgb: var(--teal-rgb);

    /* Sidebar (refined dark) — WCAG AA compliant text on #1d1d1f */
    --sidebar-bg:           #1d1d1f;
    --sidebar-bg-elevated:  #2c2c2e;
    --sidebar-text:         #b0b0b5;   /* ~7.7:1 on bg — passes AAA */
    --sidebar-text-strong:  #f5f5f7;
    --sidebar-text-active:  #ffffff;
    --sidebar-label:        #a1a1a6;   /* ~6.4:1 — passes AA */
    --sidebar-border:       rgba(255, 255, 255, 0.08);
    --sidebar-divider:      rgba(255, 255, 255, 0.10);

    /* Shadows — kept very soft, Apple-style */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 30px 60px rgba(0, 0, 0, 0.12);

    /* Radii */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 980px;
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);

    /* Sidebar metrics */
    --sidebar-width: 232px;
    --sidebar-compact-width: 76px;
    --header-height: 64px;   /* aligned with the sidebar logo row height */
    --sidebar-head-height: 64px;
}

/* ---------- Base / typography ---------- */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--apple-bg);
    color: var(--ink-secondary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", "Inter", "Segoe UI", Roboto,
                 Arial, sans-serif;
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.01em;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.022em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem);     letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem);letter-spacing: -0.025em; }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.display-4 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; }
.display-5 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -0.03em; }
.display-6 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.025em; }

.lead {
    font-size: 1.18rem;
    line-height: 1.5;
    color: var(--ink-secondary);
    font-weight: 400;
    letter-spacing: -0.012em;
}
.small, small { color: var(--ink-tertiary); }
.text-muted { color: var(--ink-tertiary) !important; }

p { color: var(--ink-secondary); }

a {
    color: var(--teal-hover);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--ink); }

::selection { background: var(--teal-soft); color: var(--ink); }

/* ============================================================
   Layout shell — sidebar + header + content
   ============================================================ */
.nk-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nk-wrap {
    position: relative;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.sidebar-compact .nk-wrap { margin-left: var(--sidebar-compact-width); }

.nk-content {
    padding: 2.5rem 1.75rem;
    min-height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
    flex: 1;
}

/* ---------- Sidebar ---------- */
.nk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width) !important;
    height: 100vh;
    background-color: var(--sidebar-bg);
    z-index: 1000;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
}
.nk-sidebar.is-compact { width: var(--sidebar-compact-width); }

.nk-sidebar-element { position: relative; }

.nk-sidebar-head {
    height: var(--sidebar-head-height);
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--sidebar-divider);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    box-sizing: border-box;
}

.nk-sidebar-brand {
    display: flex;
    align-items: center;
    width: 100%;
}
.nk-sidebar-brand .logo-img { max-height: 34px; width: auto; }
.nk-sidebar-brand .text-white {
    color: var(--sidebar-text-strong) !important;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
.logo-link { display: inline-flex; align-items: center; }

.nk-sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.nk-sidebar-content { padding: 0.75rem 0; }
.nk-sidebar-menu { height: 100%; overflow-y: auto; overflow-x: hidden; }

/* ---------- Menu items ---------- */
.nk-menu { list-style: none; padding: 0; margin: 0; }
.nk-menu-item { margin-bottom: 1px; }

.nk-menu-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0;
    position: relative;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.nk-menu-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--sidebar-text-strong);
    text-decoration: none;
}
.nk-menu-item.active .nk-menu-link,
.nk-menu-item.current-page .nk-menu-link {
    color: var(--sidebar-text-active);
    background-color: rgba(255, 255, 255, 0.07);
}
.nk-menu-item.active .nk-menu-link::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--teal);
}

.nk-menu-icon {
    width: 22px;
    margin-right: 0.85rem;
    text-align: center;
    font-size: 1.02rem;
    color: inherit;
}
.nk-menu-text { font-weight: 450; font-size: 0.95rem; }

/* Collapsible submenu */
.nk-menu-item.has-sub > .nk-menu-link::after {
    content: '\F285';
    font-family: 'Bootstrap Icons';
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.3s ease;
}
.nk-menu-item.has-sub.active > .nk-menu-link::after { transform: rotate(180deg); }

.nk-menu-sub {
    list-style: none;
    padding: 0; margin: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: rgba(0, 0, 0, 0.18);
}
.nk-menu-item.has-sub.active .nk-menu-sub { max-height: 500px; }
.nk-menu-sub .nk-menu-item { margin-bottom: 0; }
.nk-menu-sub .nk-menu-link {
    padding: 0.45rem 1.5rem 0.45rem 3.3rem;
    font-size: 0.88rem;
    color: var(--sidebar-text);
}
.nk-menu-sub .nk-menu-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--sidebar-text-strong);
}
.nk-menu-sub .nk-menu-item.active .nk-menu-link {
    color: var(--sidebar-text-active);
    background-color: rgba(var(--teal-rgb), 0.16);
}

/* Section headings inside sidebar */
.nk-menu-heading {
    padding: 1.1rem 1.5rem 0.4rem;
    margin-top: 0.6rem;
}
.nk-menu-heading:first-child { margin-top: 0; }
.overline-title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-label) !important;
    margin: 0;
}
.overline-title span { color: inherit !important; }

/* ---------- Sidebar footer: language switcher ---------- */
.nk-sidebar-lang {
    margin-top: auto;
    padding: 0.9rem 1.5rem 1.4rem;
    border-top: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.nk-sidebar-lang .lang-label {
    color: var(--sidebar-label);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}
.nk-sidebar-lang .lang-flag {
    border-radius: 5px;
    overflow: hidden;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.16);
    transition: transform 0.2s ease, border-color 0.2s ease;
    line-height: 0;
    cursor: pointer;
}
.nk-sidebar-lang .lang-flag:hover {
    transform: scale(1.06);
    border-color: var(--teal);
}
/* Current language — teal border, matches the site accent */
.nk-sidebar-lang .lang-flag.is-current {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(var(--teal-rgb), 0.35);
}
.nk-sidebar-lang .lang-flag img {
    display: block;
    width: 34px;
    height: 23px;
    object-fit: cover;
}

/* ---------- Header ---------- */
.nk-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background-color: rgba(251, 251, 253, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline-soft);
    z-index: 999;
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-compact .nk-header { left: var(--sidebar-compact-width); }

.nk-header-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    gap: 1rem;
}

.nk-header-brand { display: flex; align-items: center; }

.nk-menu-trigger .nk-nav-toggle {
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}
.nk-menu-trigger .nk-nav-toggle:hover { background-color: var(--fill-quiet); }

.nk-header-news { flex: 1; }
.nk-news-item { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.nk-news-text h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.nk-header-tools { display: flex; align-items: center; gap: 0.75rem; }
.nk-header-tools .nk-quick-nav {
    display: flex; align-items: center;
    list-style: none; margin: 0; padding: 0; gap: 0.5rem;
}

/* Dropdowns in the header */
.nk-header-tools .dropdown { position: relative; }
.nk-header-tools .dropdown > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    background: transparent;
    border: none;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}
.nk-header-tools .dropdown > .dropdown-toggle:hover { background-color: var(--fill-quiet); }

.nk-header-tools .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0; left: auto;
    min-width: 240px;
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    padding: 6px;
    transform: translateX(0) scale(0.98);
    transform-origin: top right;
    animation: dropdownIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes dropdownIn {
    to { transform: translateX(0) scale(1); }
}
.nk-header-tools .dropdown-menu.show { display: block; }

.nk-header-tools .dropdown-item {
    padding: 0.55rem 0.85rem;
    color: var(--ink);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-radius: var(--radius-xs);
    font-size: 0.93rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nk-header-tools .dropdown-item:hover {
    background-color: var(--fill-quiet);
    color: var(--ink);
}
.nk-header-tools .dropdown-item i { color: var(--ink-tertiary); }

.nk-header-tools .dropdown-header {
    padding: 0.6rem 0.85rem 0.4rem;
    margin-bottom: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-tertiary);
    white-space: nowrap;
    border-bottom: none;
}
.nk-header-tools .dropdown-divider {
    height: 1px;
    margin: 5px 6px;
    overflow: hidden;
    background-color: var(--hairline-soft);
    border-top: none;
    opacity: 1;
}

.avatar-sm {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--hairline-soft);
}

/* ============================================================
   Components — cards, buttons, forms, badges, alerts, tables
   ============================================================ */

/* Cards */
.card {
    background: var(--apple-surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--hairline);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline-soft);
    padding: 1.1rem 1.5rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.card-header.bg-primary {
    background: var(--ink) !important;
    color: #fff !important;
    border-color: var(--ink);
}
.card-header.bg-primary * { color: #fff !important; }
.card-body { padding: 1.6rem; }

.card-bordered {
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-xl);
    background: var(--apple-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Buttons — Apple pill style */
.btn {
    border-radius: var(--radius-pill);
    font-weight: 500;
    padding: 0.6rem 1.3rem;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
    font-size: 0.97rem;
    line-height: 1.2;
}
.btn-lg {
    padding: 0.85rem 1.8rem;
    font-size: 1.05rem;
}
.btn-sm { padding: 0.4rem 1rem; font-size: 0.88rem; }
.btn i { transition: transform 0.2s ease; }
.btn:hover i.bi { transform: translateX(1px); }

.btn-primary {
    background-color: var(--btn-blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-primary:hover {
    background-color: var(--btn-blue-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--btn-blue-rgb), 0.3);
}

.btn-secondary {
    background-color: var(--ink);
    color: #fff;
}
.btn-secondary:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-1px);
}

/* Success BUTTON uses the blue accent (not the green success token)
   so it matches primary/checkout/add-to-cart buttons. */
.btn-success {
    background-color: var(--btn-blue);
    color: #fff;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--btn-blue-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--btn-blue-rgb), 0.3);
}
.btn-success.active,
.btn-success:active {
    background-color: var(--btn-blue-hover);
    color: #fff;
}
.btn-danger  { background-color: var(--bs-danger);  color: #fff; }
.btn-warning { background-color: var(--bs-warning); color: #fff; }
.btn-info    { background-color: var(--bs-info);    color: #fff; }

.btn-outline-primary {
    color: var(--ink);
    border: 1px solid var(--hairline);
    background: var(--apple-surface);
}
.btn-outline-primary:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn-light { background: var(--fill-quiet); color: var(--ink); }
.btn-light:hover { background: var(--hairline-soft); }

/* Forms */
.form-control, .form-select {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    background-color: var(--apple-surface);
    color: var(--ink);
    font-size: 0.97rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-soft);
    outline: none;
}
.form-control::placeholder { color: var(--ink-tertiary); }
.form-label {
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

/* Badges */
.badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4em 0.75em;
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
}
.badge.rounded-circle { border-radius: 50%; }
.badge.bg-primary {
    background: var(--teal) !important;
    color: #fff !important;
}
.badge.bg-secondary {
    background: var(--ink) !important;
    color: #fff !important;
}
.badge.bg-success { background: var(--bs-success) !important; }
.badge.bg-info    { background: var(--bs-info)    !important; }
.badge.bg-warning { background: var(--bs-warning) !important; }
/* "Featured" product badge — rendered as a complementary blue pill
   with white text (was the default orange/amber warning badge).
   Scoped to the dark-text variant so genuine warning badges stay amber. */
.badge.bg-warning.text-dark {
    background: #0a84ff !important;
    color: #fff !important;
}

/* Alerts */
.alert {
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.93rem;
}
.alert-success { background-color: rgba(var(--bs-success-rgb), 0.10); color: var(--teal-hover); border-color: rgba(var(--bs-success-rgb), 0.2); }
.alert-danger  { background-color: rgba(var(--bs-danger-rgb),  0.10); color: #b3241a; border-color: rgba(var(--bs-danger-rgb), 0.2); }
.alert-warning { background-color: rgba(var(--bs-warning-rgb), 0.12); color: #946000; border-color: rgba(var(--bs-warning-rgb), 0.25); }
.alert-info    { background-color: var(--teal-soft); color: var(--teal-hover); border-color: rgba(var(--teal-rgb), 0.2); }

/* Avatars */
.avatar-md { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* Tables */
.table {
    background-color: var(--apple-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.93rem;
}
.table th {
    background-color: var(--fill-quiet);
    border-bottom: 1px solid var(--hairline);
    font-weight: 600;
    color: var(--ink);
    padding: 0.85rem 1rem;
    letter-spacing: -0.01em;
}
.table td {
    border-bottom: 1px solid var(--hairline-soft);
    padding: 0.85rem 1rem;
    vertical-align: middle;
    color: var(--ink-secondary);
}
.table-hover tbody tr:hover { background-color: var(--fill-quiet); }

/* ============================================================
   Footer
   ============================================================ */
.nk-footer {
    background-color: var(--apple-surface);
    border-top: 1px solid var(--hairline-soft);
    padding: 1.1rem 1.75rem;
    margin-top: auto;
}
.nk-footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.nk-footer-copyright {
    color: var(--ink-tertiary);
    font-size: 0.83rem;
    letter-spacing: -0.01em;
}
.nk-footer-copyright a { color: var(--ink-secondary); }
.nk-footer-copyright a:hover { color: var(--ink); }
.nk-footer-copyright a i { color: var(--ink-tertiary); font-size: 1rem; transition: color 0.2s ease; }
.nk-footer-copyright a:hover i { color: var(--teal-hover); }
.nk-footer .nav-link { color: var(--ink-tertiary); font-size: 0.83rem; }
.nk-footer .nav-link a { color: var(--ink-secondary); text-decoration: none; }

/* ============================================================
   Navigation overlay + toggle
   ============================================================ */
.nk-sidebar-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
@media (max-width: 1199px) {
    .nk-sidebar-overlay.active { display: block; opacity: 1; }
}

.nk-nav-toggle {
    background: none;
    border: none;
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}
.nk-nav-toggle:hover { color: var(--teal-hover); }

/* ============================================================
   Block helpers
   ============================================================ */
.nk-block-head { margin-bottom: 2.5rem; }
.nk-block-head-content h1,
.nk-block-head-content h2,
.nk-block-head-content h3,
.nk-block-head-content h4 { margin-bottom: 0.6rem; }
.nk-block-des { color: var(--ink-tertiary); font-size: 0.92rem; }

/* ============================================================
   Color utility overrides (Bootstrap aliases)
   ============================================================ */
.text-primary   { color: var(--teal-hover) !important; }
.text-secondary { color: var(--ink) !important; }
.text-success   { color: var(--bs-success) !important; }
.text-danger    { color: var(--bs-danger) !important; }
.text-warning   { color: var(--bs-warning) !important; }
.text-info      { color: var(--teal-hover) !important; }
.text-light     { color: var(--fill-quiet) !important; }
.text-dark      { color: var(--ink) !important; }
.text-white     { color: #fff !important; }

.bg-primary   { background-color: var(--teal) !important; }
.bg-secondary { background-color: var(--ink) !important; }
.bg-success   { background-color: var(--bs-success) !important; }
.bg-danger    { background-color: var(--bs-danger) !important; }
.bg-warning   { background-color: var(--bs-warning) !important; }
.bg-info      { background-color: var(--bs-info) !important; }
.bg-light     { background-color: var(--fill-quiet) !important; }
.bg-dark      { background-color: var(--ink) !important; }

/* ============================================================
   Page section helpers
   ============================================================ */
section { position: relative; }

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal-hover);
    margin-bottom: 0.9rem;
}

.section-card {
    background: var(--apple-surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   HOME — hero, skill cards, stats, CTA
   ============================================================ */

/* Hero */
#home {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    color: #fff;
    /* Tame the tall hero: compact vertical rhythm, no forced min-height */
    padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.5rem, 4vw, 4rem) !important;
    padding-top: clamp(2.25rem, 4.5vw, 3.75rem) !important;
    margin-top: 0 !important;
    background:
        radial-gradient(820px 440px at 12% -10%, rgba(52,199,207,0.28), transparent 60%),
        radial-gradient(720px 400px at 88% 8%,  rgba(41,170,177,0.20), transparent 62%),
        linear-gradient(160deg, #16171a 0%, #1d1d1f 55%, #232526 100%);
}
/* Override Bootstrap utility .pt-18 that was inflating the hero */
#home.pt-18 { padding-top: clamp(2.25rem, 4.5vw, 3.75rem) !important; }
#home .container { z-index: 2; }
#home .row { --bs-gutter-y: 1.5rem; }
.hero-portal { position: relative; z-index: 2; }
#home .pb-xl-10 { padding-bottom: 0 !important; }

.hero-headline {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.hero-headline .accent { color: var(--teal); }

.cursor {
    display: inline-block;
    color: var(--teal);
    font-weight: 300;
    margin-left: 1px;
    animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { to { opacity: 0; } }

.img-fluid2 {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.40));
    animation: floatSoft 7s ease-in-out infinite;
}
/* Ensure the hero portrait column doesn't hide the image */
#home .col-lg-4 { padding-left: 0 !important; padding-right: 0 !important; }
#home .px-10 { padding-left: 0 !important; padding-right: 0 !important; }
@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Design + Code intro section — a measured gap after the hero */
.skills-intro { margin-top: 1.25rem; }

/* Skill cards (Design / Code intro) — Apple product-card layout */
.skill-card {
    position: relative;
    background: var(--apple-surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.skill-card::after {
    /* soft tinted glow at the top edge on hover */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-hover));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.skill-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--hairline);
}
.skill-card:hover::after { opacity: 1; }
.skill-card center { width: 100%; }

.skill-card h1 {
    font-size: clamp(1.6rem, 2.4vw, 1.95rem);
    letter-spacing: -0.025em;
    margin: 0 0 0.5rem;
}
.skill-card h4 {
    color: var(--ink-secondary);
    font-weight: 400;
    font-size: 0.98rem;
    letter-spacing: -0.005em;
    margin: 0;
}

.skill-icon-intro {
    width: 96px; height: 96px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.40), transparent 55%),
        linear-gradient(135deg, var(--teal) 0%, var(--teal-hover) 100%);
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 12px 26px rgba(var(--teal-rgb), 0.32);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-card:hover .skill-icon-intro { transform: scale(1.05) rotate(-2deg); }

/* Stats */
.stats-section {
    background: var(--fill-quiet);
    padding: 4.5rem 0;
    border-radius: var(--radius-xl);
}
.stat-item {
    text-align: center;
    padding: 1.5rem;
}
.stat-number {
    font-size: clamp(2.6rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--teal), var(--teal-hover));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    line-height: 1;
    margin-bottom: 0.6rem;
}
.stat-item h5 {
    color: var(--ink-secondary);
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: -0.005em;
}

/* ============================================================
   DESIGN + CODING pages — philosophy, process, expertise, work cards
   Color discipline: section icons resolve to the single teal accent
   so the pages read calm and cohesive instead of multi-hued.
   ============================================================ */

/* Harmonize the multi-colored utility icons on section cards —
   one calm teal accent across every card, matching the home page. */
.philosophy-icon i,
.principle-icon i,
.step-icon i,
.expertise-icon i,
.tool-icon i,
.process-step .step-icon i {
    color: var(--teal-hover) !important;
}

/* Accent words inside page titles ("Excellence", "AI-Powered") —
   scoped to display headings so status badges elsewhere are untouched.
   Uses the same teal as the home page for site-wide consistency. */
.display-4 .text-warning,
.display-4 .text-success,
h1 .text-warning,
h2 .text-warning,
h1 .text-success,
h2 .text-success { color: var(--teal) !important; }

.philosophy-card,
.ai-principle {
    background: var(--apple-surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}
.philosophy-card:hover,
.ai-principle:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--hairline);
}
.philosophy-icon,
.principle-icon { line-height: 1; }
.philosophy-card h4,
.ai-principle h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

/* Process steps */
.process-step {
    position: relative;
    padding-top: 0.5rem;
}
/* Design page: the .step-number is just a wrapper for the circular badge —
   keep it transparent and inline so no rectangle shows behind the bubble. */
.process-step .step-number {
    line-height: 1;
    background: transparent;
    border: none;
    display: inline-block;
    padding: 0;
}
.step-number .badge {
    background: var(--teal) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    box-shadow: none;
}
.process-step h5 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

/* Expertise + workflow items */
.expertise-item,
.workflow-step { transition: transform 0.25s ease; }
.expertise-item:hover,
.workflow-step:hover { transform: translateX(3px); }
.expertise-item h5,
.workflow-step h5 {
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 0.35rem;
}
.expertise-icon,
.step-icon { line-height: 1; flex-shrink: 0; }

/* AI Tools cards */
.tool-card {
    background: var(--apple-surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--hairline);
}
.tool-icon { line-height: 1; }
.tool-card h5 {
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

/* Recent work cards (used on design + coding pages) */
.work-card {
    background: var(--apple-surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    overflow: hidden;
}
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--hairline);
}
.work-card .work-tag {
    color: var(--ink-tertiary);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}
.work-card img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.work-card:hover img { transform: scale(1.03); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-20px); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
    .nk-wrap { margin-left: 0; }
    .nk-header { left: 0; }
    .nk-content { margin-top: var(--header-height); padding: 2rem 1.25rem; }
    .nk-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-xl); }
    .nk-sidebar.is-shown { transform: translateX(0); }
}

@media (max-width: 768px) {
    body { font-size: 16px; }
    .nk-content { padding: 1.5rem 1rem; margin-top: var(--header-height); }
    .card-body { padding: 1.25rem; }
    .nk-header-wrap { padding: 0 1rem; }
    .nk-footer-wrap { flex-direction: column; text-align: center; gap: 0.5rem; }
    .nk-header-tools .dropdown-menu {
        min-width: 220px;
        max-width: 280px;
    }
    .nk-header-tools .dropdown-item { font-size: 0.9rem; padding: 0.6rem 0.85rem; }
    .skill-card { padding: 2rem 1.25rem; }
    .skill-icon-intro { width: 96px; height: 96px; font-size: 2.4rem; }
    .img-fluid2 { width: 75%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Editor overrides (kept from original)
   ============================================================ */
.trumbowyg-box,
.trumbowyg-editor,
.trumbowyg-button-pane { background-color: #fff !important; }

.note-toolbar {
    background: var(--fill-quiet);
    border: 1px solid var(--hairline-soft);
    padding: 8px;
    border-radius: var(--radius-sm);
}
.note-btn {
    background-color: #fff;
    color: var(--ink);
    border: 1px solid var(--hairline);
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    transition: all 0.2s ease;
}
.note-btn:hover, .note-btn:focus {
    background-color: var(--fill-quiet);
    border-color: var(--hairline);
    color: var(--ink);
}
.note-toolbar .dropdown-menu {
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline-soft);
    box-shadow: var(--shadow-md);
}
.note-btn.active {
    background-color: var(--fill-quiet);
    border-color: var(--hairline);
    font-weight: 600;
}
.note-icon-bar, .note-icon-font { font-size: 14px; }
.note-editor [data-original-title]::after {
    content: attr(data-original-title);
    background: var(--ink);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: var(--radius-xs);
    position: absolute;
    white-space: nowrap;
    z-index: 9999;
    display: none;
}
.note-editor [data-original-title]:hover::after { display: block; }

/* Custom scrollbar for sidebar menu */
.nk-sidebar .simplebar-content { padding-right: 0 !important; }
.nk-sidebar-menu::-webkit-scrollbar { width: 5px; }
.nk-sidebar-menu::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.nk-sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}
.nk-sidebar-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* Spin utility (used by form-loading JS) */
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   STORE / PRODUCT / CART / CHECKOUT — Apple-style overrides
   These pages ship their own inline <style> blocks with legacy
   brand colors (green/blue/purple/orange). The rules below
   retarget every one of those classes onto the Apple-neutral
   + teal system so the commerce flow matches the rest of the
   site. Scoped to the classes the pages define; no PHP edits.
   ============================================================ */

/* --- Page headers (were purple/pink/orange gradients) ---
   store: #6f42c1→#e83e8c | product: #7c3aed→#db2777
   cart: #fd7e14→#ffc107  | checkout: #198754→#20c997    */
.store-header,
.product-header,
.cart-header,
.checkout-header {
    background: linear-gradient(135deg, #16171a 0%, #1d1d1f 55%, #232526 100%) !important;
    color: #fff !important;
    padding: clamp(2rem, 4vw, 3rem) 0 !important;
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
}

/* --- Price display (was #28a745 green) --- */
.price-display {
    color: var(--ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
}
.price-section {
    background: var(--fill-quiet) !important;
    border-radius: var(--radius-lg) !important;
    border-left: 4px solid var(--teal) !important;
    padding: 1.75rem !important;
}
.billing-cycle { color: var(--ink-tertiary) !important; }

/* --- Checkout button (blue accent) --- */
.checkout-btn,
.btn.checkout-btn {
    background: var(--btn-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(var(--btn-blue-rgb), 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.checkout-btn:hover {
    background: var(--btn-blue-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--btn-blue-rgb), 0.4);
}

/* --- Add to cart section (was blue #007bff border) --- */
.add-to-cart-section {
    background: var(--apple-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.75rem !important;
    box-shadow: var(--shadow-sm);
}

/* --- Cart items (were plain bordered boxes) --- */
.cart-item {
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    background: var(--apple-surface) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.cart-item:hover {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--hairline) !important;
}
.product-image-small,
.product-image-mini {
    background-color: var(--fill-quiet) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--hairline-soft);
}
.quantity-input { border-radius: var(--radius-sm) !important; }

/* --- Order summary / total (was #f8f9fa gray) --- */
.total-section,
.order-summary {
    background: var(--fill-quiet) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.75rem !important;
    border: 1px solid var(--hairline-soft);
}
.cart-item-mini { border-bottom-color: var(--hairline-soft) !important; }

/* --- Store product cards (were flat w/ blue shadow) --- */
.product-card {
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--hairline) !important;
}
.product-image {
    background-color: var(--fill-quiet) !important;
    border-bottom: 1px solid var(--hairline-soft);
}
.product-badge { top: 14px; left: 14px; }

/* --- Related product cards --- */
.related-product-card {
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.related-product-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
}
.related-product-image {
    background-color: var(--fill-quiet) !important;
}

/* --- Filter sidebar (was #f8f9fa) --- */
.filter-sidebar {
    background: var(--fill-quiet) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    border: 1px solid var(--hairline-soft);
}
.filter-sidebar .list-group-item {
    border-radius: var(--radius-xs) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-sidebar .list-group-item.active {
    background-color: var(--teal-soft) !important;
    color: var(--ink) !important;
    font-weight: 600;
}

/* --- Cart widget (floating badge, was blue border) --- */
.cart-widget {
    background: var(--apple-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 0.6rem 1.2rem !important;
}

/* --- Checkout section cards (were flat white boxes) --- */
.checkout-section {
    background: var(--apple-surface) !important;
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.75rem !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 1.5rem !important;
}

/* --- Step indicator (was blue #007bff active) ---
     Scoped under .step so it only styles the checkout progress
     indicator, NOT the .step-number wrapper on the design page. */
.step { color: var(--ink-tertiary) !important; }
.step.active { color: var(--ink) !important; font-weight: 600; }
.step .step-number {
    background: var(--fill-quiet) !important;
    color: var(--ink-secondary) !important;
    border: 1px solid var(--hairline);
}
.step.active .step-number {
    background: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal);
}
.step-divider { background: var(--hairline) !important; }

/* --- Add-on cards (were blue hover / green selected) --- */
.addon-card {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}
.addon-card:hover {
    border-color: var(--teal) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}
.addon-card.selected {
    border-color: var(--teal) !important;
    background-color: var(--teal-soft) !important;
    box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.12);
}
.addon-summary-item {
    background-color: var(--teal-soft) !important;
    border-radius: var(--radius-xs) !important;
    border: 1px solid rgba(var(--teal-rgb), 0.2);
}

/* --- Product detail tabs (were blue active underline) --- */
.product-tabs { border-bottom: 2px solid var(--hairline-soft) !important; }
.product-tabs .nav-link {
    color: var(--ink-tertiary) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    font-weight: 500;
}
.product-tabs .nav-link.active {
    border-bottom-color: var(--teal) !important;
    color: var(--ink) !important;
    background: none !important;
}

/* --- Featured badge on store/product (was amber bg-warning) ---
     Keep warning amber distinct — it's a status, not a brand color.
     No override needed; .badge.bg-warning already styled earlier. */

/* --- Ensure cart total strong text uses ink, not green --- */
.total-section .text-success,
.order-summary .text-success,
.cart-item .text-success {
    color: var(--ink) !important;
}

/* --- Breadcrumb refinement --- */
.breadcrumb-item a { color: var(--ink-secondary) !important; }
.breadcrumb-item.active { color: var(--ink-tertiary) !important; }

/* ============================================================
   TICKETS / TICKET CREATE — Apple-style overrides
   Covers: section card headers, category picker cards,
   tables, pagination, action button-groups, and the
   delete-confirm modal. No PHP edits.
   ============================================================ */

/* --- Section card headers (Open / Closed / Guest lookup / Search results)
     Base .card-header.bg-primary is dark ink; for these table-section
     headers a quiet fill reads cleaner and less heavy. --- */
.card-header.bg-primary.text-white {
    background: var(--fill-quiet) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
}
.card-header.bg-primary.text-white * { color: var(--ink) !important; }
.card-header.bg-info.text-white {
    background: var(--teal-soft) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid rgba(var(--teal-rgb), 0.2) !important;
}
.card-header.bg-info.text-white * { color: var(--ink) !important; }

/* --- Ticket category picker cards (selectable on ticket_create) ---
     Default = quiet surface; selected = teal border + tint + glow.
     The JS toggles .border-primary/.bg-primary/.text-white on click. */
.category-card {
    border: 2px solid var(--hairline-soft) !important;
    border-radius: var(--radius-md) !important;
    background: var(--apple-surface) !important;
    color: var(--ink) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.2s ease, background-color 0.2s ease !important;
}
.category-card:hover {
    border-color: var(--hairline) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
/* JS-applied "selected" state — overrides Bootstrap's blue primary */
.category-card.border-primary,
.category-card.bg-primary,
.category-card.border-primary.bg-primary.text-white {
    border-color: var(--teal) !important;
    background: var(--teal-soft) !important;
    color: var(--ink) !important;
    box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.12) !important;
}
.category-card.bg-primary .small,
.category-card.bg-primary i,
.category-card.border-primary i {
    color: var(--ink) !important;
}

/* --- Ticket tables (striped + hover) --- */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--fill-quiet);
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--teal-rgb), 0.06);
}

/* --- Action button groups inside table rows --- */
.btn-group .btn-sm {
    border-radius: var(--radius-xs) !important;
}
.btn-group .btn-sm + .btn-sm { margin-left: 2px; }

/* --- Pagination --- */
.pagination { gap: 4px; }
.page-link {
    color: var(--ink-secondary) !important;
    background-color: var(--apple-surface) !important;
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--radius-xs) !important;
    padding: 0.4rem 0.75rem;
    transition: all 0.15s ease;
}
.page-link:hover {
    color: var(--teal-hover) !important;
    background-color: var(--fill-quiet) !important;
    border-color: var(--hairline) !important;
}
.page-item.active .page-link {
    color: #fff !important;
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
}
.page-item.disabled .page-link {
    color: var(--ink-tertiary) !important;
    background-color: var(--apple-surface) !important;
    border-color: var(--hairline-soft) !important;
    opacity: 0.6;
}

/* --- Form switch (My tickets toggle) --- */
.form-switch .form-check-input {
    cursor: pointer;
}
.form-switch .form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}
.form-switch .form-check-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-soft);
}

/* --- Form check inputs (radio/checkbox) --- */
.form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}
.form-check-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-soft);
}

/* --- Delete ticket modal --- */
.modal-content {
    border: 1px solid var(--hairline-soft) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    background: var(--apple-surface) !important;
}
.modal-header {
    border-bottom: 1px solid var(--hairline-soft) !important;
    padding: 1.25rem 1.5rem;
}
.modal-header .modal-title {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.modal-body { padding: 1.5rem; color: var(--ink-secondary); }
.modal-footer {
    border-top: 1px solid var(--hairline-soft) !important;
    padding: 1rem 1.5rem;
    gap: 0.5rem;
}
.modal-backdrop.show { opacity: 0.45; }

/* --- Reopen button (outline primary, small) refinement --- */
.btn-outline-primary.btn-sm {
    color: var(--teal-hover);
    border: 1px solid var(--hairline);
    background: var(--apple-surface);
}
.btn-outline-primary.btn-sm:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}