/* ============================================================
   cx-drawer — Right-slide mobile drawer (premium, no-invasive)
   Overrides the existing .cx-drawer to slide from the right with
   backdrop blur, premium shadow and stagger entrance on items.
   Hook into the existing toggle (cx-v2.js) — same aria-hidden API.
   ============================================================ */

/* Prevent horizontal scroll on mobile: the off-screen drawer
   (position:fixed + translateX(100%)) extends past the viewport
   and would otherwise create a 'white column' on the right. */
@media (max-width: 1024px) {
  html, body {
    overflow-x: clip;        /* modern browsers (no scroll, no overflow flickers) */
    max-width: 100vw;
  }
  /* Fallback for browsers without overflow:clip support */
  @supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
  }

  /* Push CTA + hamburger to the right edge on mobile.
     On desktop .cx-nav__links has margin-right:auto, but it's display:none on mobile. */
  .cx-nav__actions {
    margin-left: auto;
  }
}

/* ---------- Backdrop ---------- */

.cx-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 28, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 989;
  transition: opacity .35s cubic-bezier(.32, .72, 0, 1);
}

body.cx-drawer-open .cx-drawer__backdrop {
  opacity: 1;
  pointer-events: auto;
}

html[data-theme="dark"] .cx-drawer__backdrop {
  background: rgba(0, 0, 0, .55);
}

/* ---------- Drawer panel (right slide) ---------- */

@media (max-width: 1024px) {

  .cx-drawer {
    /* Override base from cx-v2.css */
    position: fixed;
    top: 0 !important;
    right: 0;
    left: auto !important;
    bottom: 0;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(86%, 380px);
    background: #fff;
    z-index: 991;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 22px 32px;
    transform: translateX(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
      transform .55s cubic-bezier(.32, .72, 0, 1) !important,
      box-shadow .35s ease !important;
    box-shadow: none;
    /* Premium framing */
    border-left: 1px solid rgba(15, 23, 42, .06);
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
  }

  .cx-drawer.is-dragging { transition: none !important; }

  .cx-drawer[aria-hidden="false"] {
    transform: translateX(0) !important;
    box-shadow:
      -16px 0 60px -12px rgba(15, 23, 42, .28),
      -2px 0 0 0 rgba(15, 23, 42, .04),
      inset 1px 0 0 rgba(255, 255, 255, .55);
  }

  /* Drag handle for swipe to close */
  .cx-drawer::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 12px;
    width: 4px;
    height: 44px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .15);
    pointer-events: none;
  }

  /* ---------- Header with close button ---------- */
  .cx-drawer__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: -8px -6px 14px;
  }

  .cx-drawer__close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(15, 23, 42, .03);
    color: var(--cx-ink, #0f172a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
    font-family: inherit;
    padding: 0;
  }

  .cx-drawer__close:hover {
    background: rgba(15, 23, 42, .08);
    transform: rotate(90deg);
    border-color: rgba(15, 23, 42, .14);
  }

  .cx-drawer__close svg { width: 16px; height: 16px; }

  /* ---------- Groups / items: stagger entrance ---------- */

  .cx-drawer__group {
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    opacity: 0;
    transform: translateX(20px);
    transition:
      opacity .45s cubic-bezier(.32, .72, 0, 1),
      transform .45s cubic-bezier(.32, .72, 0, 1);
  }

  .cx-drawer[aria-hidden="false"] .cx-drawer__group {
    opacity: 1;
    transform: translateX(0);
  }

  /* Stagger delays — 0, 50, 100, 150ms… */
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(1) { transition-delay: 120ms; }
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(2) { transition-delay: 180ms; }
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(3) { transition-delay: 240ms; }
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(4) { transition-delay: 300ms; }
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(5) { transition-delay: 360ms; }
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(6) { transition-delay: 420ms; }
  .cx-drawer[aria-hidden="false"] .cx-drawer__group:nth-child(7) { transition-delay: 480ms; }

  /* CTA area also staggers */
  .cx-drawer__cta-area {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .45s cubic-bezier(.32, .72, 0, 1) 540ms,
      transform .45s cubic-bezier(.32, .72, 0, 1) 540ms;
  }

  .cx-drawer[aria-hidden="false"] .cx-drawer__cta-area {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- Item style tweak: subtle hover slide ---------- */

  .cx-drawer__item {
    transition: background .2s ease, transform .2s ease, padding-left .2s ease;
  }

  .cx-drawer__item:hover,
  .cx-drawer__item:focus-visible {
    background: rgba(15, 23, 42, .04);
    padding-left: 12px;
  }

  /* Header section title style */
  .cx-drawer__header {
    cursor: pointer;
    transition: color .2s ease;
  }

  .cx-drawer__header:hover {
    color: var(--cx-blue, #3b82f6);
  }

  /* ---------- Dark mode ---------- */

  html[data-theme="dark"] .cx-drawer {
    background: var(--cx-bg-soft, #16161b);
    border-left-color: rgba(255, 255, 255, .06);
  }

  html[data-theme="dark"] .cx-drawer[aria-hidden="false"] {
    box-shadow:
      -16px 0 60px -12px rgba(0, 0, 0, .55),
      -2px 0 0 0 rgba(255, 255, 255, .04),
      inset 1px 0 0 rgba(255, 255, 255, .04);
  }

  html[data-theme="dark"] .cx-drawer::before { background: rgba(255, 255, 255, .15); }

  html[data-theme="dark"] .cx-drawer__close {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
    color: var(--cx-ink, #e7e7eb);
  }

  html[data-theme="dark"] .cx-drawer__close:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
  }

  html[data-theme="dark"] .cx-drawer__group { border-bottom-color: rgba(255, 255, 255, .06); }
  html[data-theme="dark"] .cx-drawer__item:hover { background: rgba(255, 255, 255, .06); }

  /* ---------- Reduced motion ---------- */

  @media (prefers-reduced-motion: reduce) {
    .cx-drawer,
    .cx-drawer__group,
    .cx-drawer__cta-area {
      transition-duration: .2s !important;
      transition-delay: 0ms !important;
    }
    .cx-drawer__backdrop { transition-duration: .15s !important; }
  }
}