/* ==========================================================================
   mobile-wow.css - Mobile Polish Overrides for mycell.eu
   CSS-only mobile enhancements: spacing, touch targets, animations, typography
   Only @media queries — no desktop styles

   Ultima modificare: 2026-05-15 10:30
   Modificari:
     2026-05-15 10:30 — Header sticky pe mobil: scope-uit prin body class-uri
       header-sticky-mobile-{home,inner} (configurabil din admin Setari → General).
   ========================================================================== */

/* ==========================================================================
   0. CRITICAL: ZERO HORIZONTAL SCROLL + COMPACT HEADER
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Kill horizontal scroll globally */
  html {
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Force all containers to respect viewport */
  .container, .container-fluid, section, div {
    max-width: 100vw;
  }

  img, video, iframe, table, pre, canvas, svg {
    max-width: 100% !important;
  }

  /* Exclude imaginile care TREBUIE sa umple un container cu aspect-ratio
     (object-fit:cover + height:100%). `img:not(.hero-slide-image)` are
     specificitate 0,1,1 si bate `.story-image` (0,1,0), asa ca fara excludere
     poza din „Povestea noastra" ramanea la inaltimea ei naturala (239px) intr-un
     wrapper de 448px => o gaura de 200px sub ea, pe mobil. (prins 2026-07-30) */
  img:not(.hero-slide-image):not(.story-image),
  video, iframe, table, pre, canvas, svg {
    height: auto;
  }

  /* Prevent any element from causing horizontal overflow */
  * {
    box-sizing: border-box;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* ⚠️ `overflow-x: hidden` AICI ERA BUG: conform specificatiei CSS, cand o axa e
       `hidden` iar cealalta `visible`, cealalta devine automat `auto` => `.container`
       se transforma in CONTAINER DE DERULARE pe verticala. Pe mobil, gestul de scroll
       care incepe exact peste container (marginile laterale de 16px, zonele fara card)
       era CAPTURAT de el si, neavand ce derula, pagina nu se misca — „se agata".
       `clip` taie pe orizontala FARA sa creeze container de derulare, deci `overflow-y`
       ramane `visible` si gestul ajunge la pagina. (masurat cu drag real, 2026-07-30) */
    overflow-x: clip;
  }

  /* „Povestea noastra": pe desktop wrapperul e portret 4/5 (arata bine langa text),
     dar pe mobil, unde sta singur pe toata latimea, 4/5 inseamna aproape un ecran
     intreg de poza. Trecem pe peisaj 3/2 — acelasi raport ca pozele clientilor. */
  /* `body ...` ca sa batem regula din tema clientului (aceeasi specificitate,
     dar tema se incarca DUPA acest fisier). */
  body .story-image-wrap {
    aspect-ratio: 3 / 2;
  }
  body .story-image {
    height: 100%;
    object-fit: cover;
  }

  /* Long text wrapping */
  h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ── Compact navbar: logo left + icons + hamburger right ── */
  .navbar-inner {
    gap: 0.375rem !important;
    padding: 0.5rem 0 !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  /* Hide desktop menu on mobile — use visibility so transform animation works */
  .navbar-menu:not(.open) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .navbar-menu.open {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Logo smaller */
  .navbar-logo img {
    height: 28px !important;
  }

  /* Icons: smaller, tighter gap */
  .navbar-icons {
    gap: 0.25rem !important;
    margin-right: auto !important;
  }

  .navbar-icon-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.05rem !important;
  }

  /* Hide favorites icon on mobile DOAR pentru vizitatori — clientii logati o vad */
  .navbar-favorites-btn:not(.is-logged) {
    display: none !important;
  }

  /* Hamburger: always visible, compact */
  .navbar-menu-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .navbar-inner {
    padding: 0.4rem 0 !important;
  }

  .navbar-logo img {
    height: 24px !important;
  }

  .navbar-icon-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
  }

  .navbar-menu-btn {
    width: 34px !important;
    height: 34px !important;
  }


}

/* ==========================================================================
   1. iOS INPUT ZOOM PREVENTION
   ========================================================================== */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   2. FLUID TYPOGRAPHY
   ========================================================================== */
@media (max-width: 767.98px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  h1 { font-size: clamp(1.375rem, 5vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
  h3 { font-size: clamp(1.125rem, 4vw, 1.5rem); }
  h4 { font-size: clamp(1rem, 3.5vw, 1.25rem); }

  .section-title {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    line-height: 1.3;
  }

  .section-subtitle {
    font-size: clamp(0.85rem, 3.2vw, 1rem);
    line-height: 1.5;
  }
}

/* ==========================================================================
   3. TOUCH TARGETS
   ========================================================================== */
@media (max-width: 767.98px) {
  a.btn,
  button,
  .btn,
  .navbar-icon-btn,
  .navbar-menu-btn,
  .product-card-wishlist,
  .pagination a,
  .shop-pagination a,
  .shop-pagination span {
    min-height: 44px;
    min-width: 44px;
  }

  .breadcrumbs-item a {
    padding: 4px 2px;
    display: inline-block;
  }

  .footer a {
    padding: 8px 0;
    display: inline-block;
  }
}

/* ==========================================================================
   4. NAVBAR POLISH
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Sticky header — configurabil din admin (Setari → General → Header sticky).
     Body primeste class-uri header-sticky-mobile-home / header-sticky-mobile-inner
     din layout.php. Default ACTIV peste tot (clase prezente implicit). */
  body.page-home.header-sticky-mobile-home .site-navbar,
  body:not(.page-home).header-sticky-mobile-inner .site-navbar {
    position: sticky !important;
    top: 0 !important;
  }

  .navbar-spacer {
    height: 0 !important;
  }

  /* Hamburger X animation support */
  .navbar-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }

  .navbar-menu-btn:active {
    transform: scale(0.92);
  }

  /* Mobile menu frosted glass effect */
  .navbar-menu {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
  }

  /* Icon buttons spacing */
  .navbar-icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   5. CONTAINER & SPACING
   ========================================================================== */
@media (max-width: 767.98px) {
  .container,
  .container-wide {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding: 2rem 0;
  }

  .section-lg {
    padding: 2.5rem 0;
  }

  .section-header {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-wide {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section {
    padding: 1.75rem 0;
  }
}

/* ==========================================================================
   6. PRODUCT CARDS MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Shop layout: single column on mobile, sidebar is off-canvas */
  .shop-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    width: 100%;
  }

  /* Equal height cards */
  .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-card-image {
    flex-shrink: 0;
  }

  .product-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .product-card-price {
    margin-top: auto;
  }

  .product-card {
    border-radius: var(--border-radius-xl);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  .product-card-image {
    aspect-ratio: 1;
    overflow: hidden;
  }

  /* Make entire card clickable via stretched link */
  .product-card {
    position: relative;
    cursor: pointer;
  }

  .product-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Keep buttons above stretched link */
  .product-card-wishlist,
  .product-card-overlay,
  .btn-add-to-cart {
    position: relative;
    z-index: 2;
  }

  .product-card-overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .product-card-body {
    padding: 0.5rem 0.5rem 0.625rem;
  }

  .product-card-category {
    font-size: 0.6rem !important;
    margin-bottom: 0.125rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-title {
    font-size: 0.8rem !important;
    line-height: 1.25;
    margin-bottom: 0.25rem;
  }

  .product-card-price {
    white-space: nowrap;
  }

  .product-card-price .current-price {
    font-size: 0.9rem;
    font-weight: 700;
  }

  .product-card-price .old-price {
    font-size: 0.7rem;
  }

  /* Compact overlay button — icon only */
  .product-card-overlay .btn {
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
    gap: 0.25rem;
  }

  .product-card-overlay .btn span {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .shop-grid {
    gap: 8px;
  }

  .product-card {
    border-radius: var(--border-radius-lg);
  }

  .product-card-body {
    padding: 0.375rem 0.4rem 0.5rem;
  }

  .product-card-category {
    font-size: 0.55rem !important;
  }

  .product-card-title {
    font-size: 0.75rem !important;
  }

  .product-card-price .current-price {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   7. HERO SLIDER MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .hero-section {
    overflow: hidden !important;
  }

  .hero-slides {
    height: 55vh;
    min-height: 300px;
    max-height: 420px;
    overflow: hidden !important;
  }

  .hero-slide {
    overflow: hidden !important;
  }

  .hero-content {
    text-align: center;
    padding: 0 1rem;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .hero-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    margin-bottom: 0.75rem;
  }

  .hero-subtitle {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem);
    margin-bottom: 1.5rem;
  }

  .hero-overlay {
    justify-content: center;
    text-align: center;
  }

  .hero-cta {
    width: 100%;
    max-width: 320px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 0 auto;
  }

  .hero-dots {
    bottom: 16px;
    gap: 8px;
  }

  .hero-dots button {
    min-width: 12px;
    min-height: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
  }

  .hero-dots button.active {
    min-width: 28px;
    width: 28px;
  }
}

@media (max-width: 575.98px) {
  .hero-slides {
    height: 50vh;
    min-height: 280px;
    max-height: 380px;
  }

  .hero-content {
    padding: 0 1rem;
  }
}

/* ==========================================================================
   8. BENEFITS BAR MOBILE — Horizontal Scroll with Snap
   ========================================================================== */
@media (max-width: 767.98px) {
  .benefits-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 1rem 16px;
    scrollbar-width: none;
  }

  .benefits-bar::-webkit-scrollbar {
    display: none;
  }

  .benefit-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 200px;
    width: auto;
    max-width: none;
    padding: 0.625rem 1rem;
  }
}

/* ==========================================================================
   9. CATEGORIES MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .mw-categories-grid,
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .category-card {
    border-radius: var(--border-radius-xl);
    text-align: center;
    overflow: hidden;
  }
}

@media (max-width: 575.98px) {
  .mw-categories-grid,
  .categories-grid {
    gap: 10px;
  }
}

/* ==========================================================================
   10. NEWSLETTER MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .newsletter-section {
    padding: 2.5rem 0;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
  }

  .newsletter-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 16px;
  }

  .newsletter-form .btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   11. FOOTER MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .footer {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }

  .footer-section {
    margin-bottom: 1.5rem;
  }

  .footer-section h5,
  .footer-section h6 {
    margin-bottom: 0.75rem;
  }

  .footer a {
    padding: 8px 0;
    display: inline-block;
    min-height: 44px;
    line-height: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   12. FORMS MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .form-control,
  .form-select {
    height: 48px;
    border-radius: 10px;
    padding: 0.625rem 1rem;
  }

  textarea.form-control {
    height: auto;
    min-height: 100px;
  }

  .form-label {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
  }

  .btn-lg,
  .mw-btn-full {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   13. SCROLL REVEAL PREPARATION
   ========================================================================== */
@media (max-width: 767.98px) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
}

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */
@media (max-width: 767.98px) {
  html {
    scroll-behavior: smooth;
  }

  /* Tap feedback */
  .mw-tap-active,
  .product-card:active,
  .category-card:active,
  .btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Loading skeleton pulse */
  @keyframes mw-skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
  }

  .mw-skeleton {
    background: var(--color-border);
    border-radius: var(--border-radius);
    animation: mw-skeleton-pulse 1.5s ease-in-out infinite;
  }

  /* Subtle fade-in for page content */
  .page-content {
    animation: mw-fade-in 0.4s ease;
  }

  @keyframes mw-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ==========================================================================
   15. CHECKOUT MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .checkout-layout {
    gap: 1.5rem;
  }

  .checkout-step {
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
  }

  .checkout-step-header {
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .checkout-step-number {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .checkout-payment-method {
    padding: 1rem;
    border-radius: 10px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .checkout-payment-method input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  /* Order summary collapsible support */
  .checkout-summary {
    border-radius: var(--border-radius-lg);
  }

  .checkout-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    min-height: 48px;
  }

  /* Place order button */
  .checkout-submit-btn,
  .mw-checkout-submit {
    width: 100%;
    height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
  }
}

@media (max-width: 575.98px) {
  .checkout-step {
    padding: 1rem;
    border-radius: 10px;
  }
}

/* ==========================================================================
   16. PRODUCT DETAIL MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  /* ── Single column layout ── */
  .product-detail {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0.75rem 0 5rem !important;
  }

  .product-gallery {
    width: 100%;
    position: static !important;
  }

  .product-gallery-main {
    width: 100%;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
  }

  .product-gallery-thumbs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 0;
    scrollbar-width: none;
  }

  .product-gallery-thumbs::-webkit-scrollbar {
    display: none;
  }

  .product-gallery-thumb {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* ── Product info full width ── */
  .product-info {
    padding-top: 0 !important;
  }

  .product-title {
    font-size: 1.5rem !important;
    line-height: 1.25;
  }

  /* Price prominent */
  .product-price .current-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary-dark);
  }

  .product-price .old-price {
    font-size: 1rem;
  }

  /* ── Actions: button full width, favorite inline ── */
  .product-actions-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .product-add-to-cart {
    width: 100%;
    height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
  }

  .product-favorite-btn {
    width: 100% !important;
    height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    justify-content: center;
  }

  /* ── Trust badges: 2x2 grid, compact ── */
  .product-trust-info {
    padding: 1rem;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .trust-item {
    font-size: 0.8rem;
  }

  /* ── Share section compact ── */
  .social-share {
    margin-bottom: 1rem;
    padding-top: 1rem;
  }

  /* ── Product meta compact ── */
  .product-meta {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  /* ── Sticky add-to-cart bar ── */
  .mw-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mw-sticky-cart .mw-sticky-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mw-sticky-cart .mw-sticky-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
  }

  .mw-sticky-cart .mw-sticky-btn {
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
  }

  .mw-sticky-cart .mw-sticky-btn:active {
    background: var(--color-primary-dark);
  }

  /* Produs variabil fara varianta aleasa — buton blocat vizual, dar tot „tap-abil"
     ca sa poata raspunde cu toast + scroll la selectorul de variante. */
  .mw-sticky-cart .mw-sticky-btn-locked,
  .mw-sticky-cart .mw-sticky-btn-locked:active {
    background: color-mix(in srgb, var(--color-primary) 32%, var(--color-bg) 68%);
    color: color-mix(in srgb, var(--color-text) 70%, transparent 30%);
    cursor: not-allowed;
  }

  /* ── Product tabs full width ── */
  .product-tabs {
    margin-bottom: 5rem;
  }
}

@media (max-width: 575.98px) {
  .product-price .current-price {
    font-size: 1.5rem;
  }

  .product-gallery-thumb {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   17. MOBILE MENU POLISH
   ========================================================================== */
@media (max-width: 991.98px) {
  .navbar-menu {
    border-top: 2px solid var(--color-primary);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.02);
  }
  
  .navbar-nav {
    padding: 0.5rem;
    gap: 0.5rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-arrow {
    display: none !important;
  }
  
  .nav-link, .nav-dropdown-item {
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    padding: 0.875rem 1.25rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.25rem;
  }
  
  .nav-link:active, .nav-dropdown-item:active {
    transform: scale(0.98);
  }
  
  .nav-link .nav-icon, .nav-dropdown-item .nav-dropdown-icon {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 1rem !important;
    font-size: 1.25rem !important;
  }

  .nav-link.active, .nav-dropdown-item.active {
    border-color: var(--color-primary) !important;
    background: var(--color-primary-lightest);
  }
}