/* =========================
   Mobile Drawer — Base
   ========================= */

/* Hide desktop vertical menus on small screens, show on large */
.vertical-menu { display: none; }
@media (min-width: 980px){
  .vertical-menu { display: block; }
  /* No-op bucket for desktop, keep selector alive for specificity if needed */
  .hamburger, .mobile-drawer, .backdrop { }
}

/* --- Mobile nav toggle (hamburger) --- */
.hamburger{
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid #e5e7eb; border-radius: 10px;
  background: #fff; cursor: pointer;
}
.hamburger .bars{ position: relative; width: 20px; height: 14px; }
.hamburger .bars::before, .hamburger .bars::after, .hamburger .bar{
  content:""; position:absolute; left:0; right:0; height:2px; background:#111; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.hamburger .bar{ top:6px; }
.hamburger .bars::before{ top:0; }
.hamburger .bars::after{ bottom:0; }
.hamburger[aria-expanded="true"] .bars::before{ transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .bar{ opacity:0; }
.hamburger[aria-expanded="true"] .bars::after{ transform: translateY(-6px) rotate(-45deg); }
.hamburger-text{ font-weight:600; }

/* =========================
   Backdrop
   ========================= */
.backdrop,
#mobileNavBackdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 9998;
  pointer-events: none;          /* avoid stray taps when hidden/fading */
}
.backdrop.is-open,
#mobileNavBackdrop.is-open{
  opacity: 1; visibility: visible;
  pointer-events: auto;
}

/* =========================
   Drawer (fixed overlay)
   ========================= */
.mobile-drawer{
  position: fixed;                 /* overlay; avoids ancestor clipping */
  top: 0; left: 0;
  width: 100%;
  max-width: 360px;
  background: #fff;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);    /* hidden by default */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 99999;
  height: 100vh;                   /* JS will override exact height on open */
  overflow-y: auto;                /* vertical scroll */
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.is-open{ transform: translateX(0); }

/* Close button inside the drawer */
.mobile-drawer .close-btn{
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; font-size: 30px; color: #333;
  cursor: pointer; z-index: 1000;
}

/* =========================
   Structure inside drawer
   ========================= */
.drawer-header{
 display: flex;
  align-items: center;
  justify-content: center; /* Center the nav-header */
  padding: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}
.close-btn{ border:0; background:transparent; padding:.4rem .5rem; cursor:pointer; font-size:18px; }
.drawer-scroll{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:.5rem 1rem 1rem;
  border-bottom:1px solid #f3f4f6;
}

/* =========================
   Header (logo/name/status)
   ========================= */
.nav-header{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:20px; background:#fff;
}
.nav-logo{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.logo{ width:120px; height:auto; object-fit:contain; }
.business-name{ font-size:22px; font-weight:800; margin:0; color:#333; }
.status-badge{
  font-size:14px; font-weight:bold; padding:4px 8px; border-radius:8px;
  background:#28a745; color:#fff;
}
.status-badge.after-hours{ background:#dc3545; }

/* Ensure the mobile drawer items look good with the header */
.mobile-drawer .nav-list{ margin-top:20px; padding:0; list-style:none; }
.mobile-drawer .nav-list li{ padding:12px; text-align:center; }
.mobile-drawer .nav-list li a{
  text-decoration:none; color:#333; font-size:18px;
}
.mobile-drawer .nav-list li a:hover{ color:#007bff; }

/* =========================
   Accordions
   ========================= */
.accordion{
  border:1px solid #f0f0f0; border-radius:12px; margin:.6rem 0; background:#fff;
}
.accordion[open]{ border-color:#e6f2ff; }
.accordion-summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  padding:1rem; cursor:pointer; font-weight:700;
}
.accordion-summary::-webkit-details-marker{ display:none; }
.accordion .chevron{
  width:14px; height:14px; border-right:2px solid #111; border-bottom:2px solid #111;
  transform:rotate(-45deg); transition:transform .18s ease;
}
.accordion[open] .chevron{ transform:rotate(45deg); }
.accordion-panel{ padding:0 1rem 1rem; }

/* Section title link (e.g., “View All”) */
.section-title{ display:inline-block; margin:.25rem 0 .75rem; color:#007bff; font-weight:600; }

/* Nav list (simple list) */
.nav-list{ list-style:none; margin:0; padding:0; }
.nav-item{ border-bottom:1px solid #f3f4f6; }
.nav-link{ display:block; padding:.85rem 0; }

/* =========================
   Quick CTAs
   ========================= */
.drawer-ctas{
  margin:1rem 0; display:flex; flex-direction:column; gap:.6rem; 
}
.btn{
  display:flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px;
  border:1px solid #e5e7eb; text-align:center;
  width:100%; min-height:48px; box-sizing:border-box;
  font-weight:700; cursor:pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.btn-primary{ background:#FA0; color:#fff; border-color:#FA0; }
.btn-ghost{ background:#fff; color:#111; }
.btn-icon{ display:inline-flex; align-items:center; gap:.5rem; }
.btn-ico{ width:20px; height:20px; display:inline-flex; }
.btn-ico svg{ width:100%; height:100%; display:block; }

/* WhatsApp (brand) */
.btn-whatsapp{ background:#25D366; color:#fff; border-color:#22c65b; }
.btn-whatsapp:hover{ filter:brightness(0.95); box-shadow:0 6px 12px rgba(0,0,0,0.12); }
.btn-whatsapp:active{ transform:translateY(1px); }

/* Holiday Deals button */
.btn-holiday {
  background-color: rgb(172, 19, 22); /* Solid red */
  color: #fff; /* White text */
  border-color: rgb(154, 14, 17); /* Darker red border */
  position: relative;
  overflow: hidden;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700; /* Ensure font weight is consistent */
}

/* Ensuring the text is white */
.btn-holiday .btn-text {
  color: #fff !important; /* Force white text color */
}

/* Ensuring icon is white */
.btn-holiday .btn-ico svg path {
  fill: #fff; /* Ensures icon is white */
}

/* Subtle sparkle sweep */
.btn-holiday::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 60%;
  height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-120%) rotate(12deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn-holiday:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.16);
}

.btn-holiday:hover::after {
  transform: translateX(250%) rotate(12deg);
}

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

/* Optional: Tiny pulsing effect to draw attention */

.btn-holiday {
  animation: holidayPulse 2.8s ease-out infinite;
}

@keyframes holidayPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.18);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  .btn-holiday {
    animation: none !important;
  }

  .btn-holiday::after {

    transition: none !important;

  }
}

/****END***/

/* Share (orange tint theme + pointer) */
#btnShareMobile, .btn-share{ cursor:pointer; }
.btn-share{
  background:#fff7ec; color:#a05a00; border-color:#f5a623;
}
.btn-share:hover{
  background:#ffe3ba; color:#8a4d00; border-color:#e08e1e;
  box-shadow:0 6px 12px rgba(0,0,0,.10);
}
.btn-share:active{ transform:translateY(1px); }
.btn-share:focus{ outline:3px solid rgba(245,166,35,.35); outline-offset:2px; }

/* Get Directions (blue) */
.btn-directions-blue{
  background:#007bff; color:#fff; border-color:#007bff;
}
.btn-directions-blue:hover{
  background:#0069d9; border-color:#0069d9;
  box-shadow:0 6px 12px rgba(0,0,0,0.15);
}
.btn-directions-blue:active{
  transform:translateY(1px);
  background:#0056b3; border-color:#0056b3;
}
.btn-directions-blue:focus{
  outline:3px solid rgba(0,123,255,0.35); outline-offset:2px;
}

/* Call + generic hovers */
.btn-primary:hover{ filter:brightness(0.95); box-shadow:0 6px 12px rgba(0,0,0,.12); }
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost:hover{ box-shadow:0 6px 12px rgba(0,0,0,.06); }
.btn-ghost:active{ transform:translateY(1px); }

/* Blue focus rings (accessibility) */
.hamburger:focus, .close-btn:focus, .nav-link:focus, .section-title:focus,
.drawer-ctas .btn:focus{
  outline:3px solid rgba(0,123,255,0.35);
  outline-offset:2px;
}

/* =========================
   Positioning helpers
   ========================= */
:root{
  --menu-offset: 140px;
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Mobile: pin the toggle; drawer top/height are handled by JS */
@media (max-width: 979px){
  #mobileNavToggle.hamburger{
    position: fixed;
    top: calc(var(--menu-offset) + var(--safe-top));
    left: .75rem;
    z-index: 100000;
    display: inline-flex;
  }
}

/* Desktop: keep toggle in normal flow so it doesn't get clipped */
@media (min-width: 980px){
  #mobileNavToggle.hamburger{
    position: static;
    z-index: auto;
  }
}

/* =========================
   Section color accents
   ========================= */

/* BUY MEDICAL SUPPLIES — Deep Blue */
details.accordion:nth-of-type(1) > summary.accordion-summary {
  background-color: #3b8eb5;
  color: #fff;
  border-radius: 12px 12px 0 0;
}
details.accordion:nth-of-type(1)[open] > summary.accordion-summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* RENT MEDICAL EQUIPMENT — Lighter Blue */
details.accordion:nth-of-type(2) > summary.accordion-summary {
  background-color: #5dade0;
  color: #fff;
  border-radius: 12px 12px 0 0;
}
details.accordion:nth-of-type(2)[open] > summary.accordion-summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Chevron color fix */
details.accordion:nth-of-type(1) .chevron,
details.accordion:nth-of-type(2) .chevron {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* Inner panel keeps neutral background */
details.accordion .accordion-panel {
  background: #fff;
  color: #333;
  border-radius: 0 0 12px 12px;
}

/* “View All” link inside stays brand-colored */
details.accordion .section-title { color: #3b8eb5; }
details.accordion:nth-of-type(2) .section-title { color: #5dade0; }

/* Button look for nav links */
details.accordion .nav-link{
  display: block;
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  font-weight: 700;
  text-decoration: none;
  color: #222;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
details.accordion .nav-link:focus{
  outline: 3px solid rgba(0,123,255,.32);
  outline-offset: 2px;
}
details.accordion .nav-link:active{ transform: translateY(1px); }

/* BUY section hover */
details.accordion:nth-of-type(1) .nav-link{
  border-color: rgba(59,142,181,.45);
  background: #f4f9fc;
  color: #1f4f63;
}
details.accordion:nth-of-type(1) .nav-link:hover{
  background: #3b8eb5; color: #fff; border-color: #3282a8;
  box-shadow: 0 6px 12px rgba(59,142,181,.20);
}

/* RENT section hover */
details.accordion:nth-of-type(2) .nav-link{
  border-color: rgba(93,173,224,.45);
  background: #f5faff;
  color: #1e5870;
}
details.accordion:nth-of-type(2) .nav-link:hover{
  background: #5dade0; color: #fff; border-color: #4aa5db;
  box-shadow: 0 6px 12px rgba(93,173,224,.20);
}

/* Spacing between items */
details.accordion .nav-item + .nav-item { margin-top: .5rem; }

/* =========================
   Hardening overrides
   ========================= */

/* Make sure theme CSS can’t hide the toggle */
#mobileNavToggle.hamburger {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* If a theme hides last/first items, keep the toggle visible */
.navigation-menu > li > #mobileNavToggle { display: inline-flex !important; }

/* Ensure the toggle list item remains a list item */
.navigation-menu > li { display: list-item; }

/* (Optional) Magenta outline while debugging — comment out when done */
/* #mobileNavToggle { outline: 2px solid magenta; } */


/* ----- Drawer bottom info: upgraded card ----- */
.drawer-bottom-info.nice{
  margin:.85rem 0 0;
  padding:14px 14px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(17,24,39,0.02);
  box-sizing: border-box;
  font-size: 14.5px;
  color:#111;
}

.dbi-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.35rem;
}

.dbi-title{
  display:flex; align-items:center; gap:.5rem;
  font-weight:800; letter-spacing:.2px; color:#0f172a; /* slate-900 */
}
.dbi-pin{ font-size:18px; line-height:1; }

.dbi-ctas{ display:flex; gap:.4rem; }
.dbi-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:12px; line-height:1;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
.dbi-chip:hover{ box-shadow:0 4px 10px rgba(0,0,0,.08); }
.dbi-chip:active{ transform:translateY(1px); }

.dbi-chip-blue{
  background:#007bff; color:#fff; border-color:#007bff;
}
.dbi-chip-blue:hover{ background:#0069d9; border-color:#0069d9; }

.dbi-chip-orange{
  background:#FA0; color:#fff; border-color:#FA0;
}
.dbi-chip-orange:hover{ filter:brightness(.95); }

/* Address & hours */
.dbi-address{
  margin:0 0 .35rem; font-style:normal; color:#1f2937; /* gray-800 */
}
.dbi-hours{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  color:#374151; /* gray-700 */
  margin-bottom:.55rem;
}
.dbi-clock{ font-size:16px; line-height:1; }
.dbi-muted{ color:#6b7280; margin-left:.25rem; font-style:normal; }

/* Tag pills */
.dbi-tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.dbi-tag{
  display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px;
  font-weight:700; font-size:12px; line-height:1;
  border:1px solid #e5e7eb; background:#f9fafb; color:#1f2937;
}
.dbi-tag-success{
  background:#f0fdf4; color:#166534; border-color:#bbf7d0;
}
/* Subtle premium pulse for Same-day delivery (success pill) */
.dbi-tag-success.pulse{
  position: relative;   /* for the ring */
  isolation: isolate;   /* keeps glow contained */
  animation: pillPulse 2.4s ease-out infinite;
}

.dbi-tag-success.pulse::after{
  content:"";
  position:absolute;
  inset:-3px;                      /* slightly outside the pill */
  border-radius:999px;
  border:2px solid rgba(22, 101, 52, .28); /* match success green */
  opacity:.6;
  transform: scale(1);
  pointer-events:none;
  animation: pillWave 2.4s ease-out infinite;
}

/* Reusable keyframes for any pill */
@keyframes pillWave{
  0%   { transform: scale(1);    opacity:.55; }
  70%  { transform: scale(1.12); opacity:0;   }
  100% { transform: scale(1.12); opacity:0;   }
}

@keyframes pillPulse{
  0%   { box-shadow: 0 0 0 0 rgba(22, 101, 52, .18); }
  70%  { box-shadow: 0 0 0 10px rgba(22, 101, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 101, 52, 0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .dbi-tag-success.pulse,
  .dbi-tag-success.pulse::after{
    animation: none !important;
  }
}

.dbi-tag-dark{
  background:#111827; color:#fff; border-color:#111827;
}
/* NO-RX — Indigo theme (distinct from green success) */
.dbi-tag-norx{
  background:#e9efff;        /* soft indigo tint */
  color:#193a96;             /* deep indigo text */
  border-color:#c4d3ff;      /* light indigo border */
  font-weight:700;
}

.dbi-tag-norx:hover{
  background:#dde6ff;
  border-color:#aec1ff;
  box-shadow:0 4px 10px rgba(25,58,150,.12);
  transform:translateY(-1px);
}

/* nice focus ring for accessibility */
.dbi-tag-norx:focus-visible{
  outline:3px solid rgba(25,58,150,.28);
  outline-offset:2px;
}



/* Slightly denser on very small screens */
@media (max-width:380px){
  .dbi-chip{ padding:6px 9px; }
  .drawer-bottom-info.nice{ padding:12px; }
}

/* ====== Gradient header bar on the info card ====== */
.drawer-bottom-info.nice{
  position: relative;
  overflow: hidden;               /* clip glow */
  padding-top: 18px;              /* make space for the bar */
}

/* Gradient bar cap */
.drawer-bottom-info.nice::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #3b8eb5, #5dade0, #FFA000); /* deep blue → light blue → brand orange */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 6px 14px rgba(59,142,181,.15);
  pointer-events: none;
}

/* Optional: faint inner glow under the bar for more depth */
.drawer-bottom-info.nice::after{
  content: "";
  position: absolute;
  top: 6px; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(180deg, rgba(59,142,181,.10), rgba(255,255,255,0));
  pointer-events: none;
}

/* ====== Slide-up animation when drawer opens ====== */
@keyframes dbi-slideUpFade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Stagger the key sections a hair for a premium feel */
.mobile-drawer.is-open .drawer-ctas{
  animation: dbi-slideUpFade .28s ease-out both;
  animation-delay: .04s;
}

.mobile-drawer.is-open .drawer-bottom-info{
  animation: dbi-slideUpFade .32s ease-out both;
  animation-delay: .08s;
}

/* Optional: also animate the two accordions */
.mobile-drawer.is-open details.accordion:nth-of-type(1){
  animation: dbi-slideUpFade .22s ease-out both;
}
.mobile-drawer.is-open details.accordion:nth-of-type(2){
  animation: dbi-slideUpFade .24s ease-out both;
  animation-delay: .02s;
}

/* Tiny tweak for tight phones */
@media (max-width:380px){
  .drawer-bottom-info.nice{ padding-top: 16px; }
}

/* === Drawer accordions: single rounded card with hover/focus === */
.mobile-drawer details.accordion{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden; /* rounds inner corners */
  background: #fff;
}

.mobile-drawer details.accordion .accordion-summary{
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 !important;
  padding: .85rem 1rem;
  font-weight: 800;
  min-height: 48px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

/* Hover: deep blue (Buy) */
.mobile-drawer details.accordion:nth-of-type(1) .accordion-summary:hover{
  background: #3b8eb5;
  color: #fff;
  border-color: #3282a8;
  box-shadow: 0 6px 12px rgba(59,142,181,.20);
}
/* Hover: light blue (Rent) */
.mobile-drawer details.accordion:nth-of-type(2) .accordion-summary:hover{
  background: #5dade0;
  color: #fff;
  border-color: #4aa5db;
  box-shadow: 0 6px 12px rgba(93,173,224,.20);
}

/* Active (pressed state) */
.mobile-drawer details.accordion .accordion-summary:active{
  transform: translateY(1px);
}

/* Focus visible (border and outline) */
.mobile-drawer details.accordion .accordion-summary:focus-visible{
  outline: 3px solid rgba(0,123,255,.32);
  outline-offset: 2px;
}

/* Panel inside keeps rounded corners */
.mobile-drawer details.accordion .accordion-panel{
  border: 0;
  padding: 0 1rem 1rem;
  background: #fff;
}

/* Panel border matches header when open */
.mobile-drawer details.accordion:nth-of-type(1)[open] .accordion-panel{
  border-color: #3282a8;
}
.mobile-drawer details.accordion:nth-of-type(2)[open] .accordion-panel{
  border-color: #4aa5db;
}

/* Theming for header and panel when open */
.mobile-drawer details.accordion:nth-of-type(1)[open] .accordion-summary{
  background: #3b8eb5;
  color: #fff;
  border-color: #3282a8;
}
.mobile-drawer details.accordion:nth-of-type(2)[open] .accordion-summary{
  background: #5dade0;
  color: #fff;
  border-color: #4aa5db;
}

/* Subtle fade-in on open for smooth interaction */
@keyframes acc-fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-drawer.is-open details.accordion{
  animation: acc-fadeUp .22s ease-out both;
}
.mobile-drawer.is-open details.accordion:nth-of-type(2){
  animation-delay: .02s;
}

/* === Remove spacing between buttons in open accordion (continuous look) === */
.mobile-drawer details.accordion[open] .accordion-panel .nav-list li{
  padding: 0 !important;   /* remove padding between buttons */
  margin: 0;               /* remove any space between list items */
}

.mobile-drawer details.accordion[open] .accordion-panel .nav-list li a{
  padding: .85rem 1rem;    /* same padding for links to maintain button-like feel */
  border-radius: 0 !important; /* remove rounded corners between items */
}

/* Optional: remove last border on bottom for a seamless look */
.mobile-drawer details.accordion[open] .accordion-panel .nav-list li:last-child a{
  border-bottom: none;
}

/* === Remove spacing, make buttons full-width, and fix gap === */
.mobile-drawer details.accordion[open] .accordion-panel .nav-list li{
  padding: 0 !important;  /* Remove padding between buttons */
  margin: 0;              /* Remove space between items */
}

.mobile-drawer details.accordion[open] .accordion-panel .nav-list li a{
  display: block;         /* Make each link block-level (full width) */
  width: 100%;            /* Ensure the link takes the full width of the container */
  padding: .85rem 1rem;   /* Keep button-like padding */
  border-radius: 0 !important;  /* No rounding between items */
  border-bottom: 1px solid #e5e7eb; /* Keep borders between buttons */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Remove last bottom border for seamless look */
.mobile-drawer details.accordion[open] .accordion-panel .nav-list li:last-child a{
  border-bottom: none;    /* Remove bottom border from the last item */
}

/* Optional: Remove any margin or padding that might create a gap */
.mobile-drawer details.accordion[open] .accordion-panel .nav-list{
  padding: 0;
  margin: 0;
  list-style: none;
}

/* --- Drawer footer search --- */
.nav-footer-search{
  margin-top: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.nav-footer-search .gcse-loading-fallback{
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

/* Make Google CSE stretch nicely inside the drawer */
.nav-footer-search .gsc-control-cse,
.nav-footer-search .gsc-control-searchbox-only{
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

.nav-footer-search table.gsc-search-box,
.nav-footer-search td.gsc-input{
  width: 100% !important;
}

.nav-footer-search input.gsc-input{
  box-sizing: border-box;
  width: 100% !important;
  border-radius: 999px;
  font-size: 15px;
}

/* Make the search button rounded to match */
.nav-footer-search input.gsc-search-button,
.nav-footer-search button.gsc-search-button{
  border-radius: 999px !important;
}
.nav-footer-label{
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
/* =========================
   Global Search Overlay
   ========================= */
#searchOverlay {
  position: fixed;
  inset: 0;
  z-index: 10050;              /* above drawer/backdrop */
  display: none;               /* hidden by default */
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#searchOverlay.is-visible {
  display: flex;               /* show when active */
  opacity: 1;
  pointer-events: auto;
}

.search-overlay-backdrop {
  flex: 1;
  background: rgba(0,0,0,.45);
}

.search-overlay-panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  padding: 16px 12px 20px;
  display: flex;
  flex-direction: column;
}

.search-overlay-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

html.no-scroll,
body.no-scroll {
  overflow: hidden;
}


/* Make results scroll if very tall */
#globalSearchResults {
  max-height: calc(100vh - 140px);
  overflow: auto;
}

.nav-footer-search-trigger {
  width: 100%;
  border: none;
  background: #f5f5f5;
  padding: 12px 16px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.nav-footer-search-trigger:hover {
  background: #e8e8e8;
}

/* Center the overlay container itself */
#searchOverlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;        /* <— center vertically  */
  justify-content: center;    /* <— center horizontally */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

#searchOverlay.is-visible {
  display: flex;              /* flexbox allows centering */
  opacity: 1;
  pointer-events: auto;
}

/* The panel itself */
.search-overlay-panel {
  position: relative;
  width: 95%;                 /* responsive */
  max-width: 700px;           /* control window width */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  padding: 20px;
}

/* The dark backdrop */
.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: -1;                /* moves it behind the panel */
}


/* Faux search bar trigger inside drawer footer */
.nav-footer-search-trigger {
  width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: 999px;
  background: #f9fafb;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.nav-footer-search-trigger:hover {
  background: #f3f4f6;
  border-color: #c7c7c7;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2);
}

.nav-footer-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #4b5563;
}

.nav-footer-search-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-footer-search-main {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-footer-search-hint {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On very small screens, hide the hint to keep it clean */
@media (max-width: 400px) {
  .nav-footer-search-hint {
    display: none;
  }
}