/* ============================================================
   Shawarma Prince Companion — Global CSS v2
   ALL colors use CSS variables from the dashboard.
   Change color in SP Companion → saves everywhere.
   ============================================================ */

/* ── DELIVERY FLOAT BUTTONS ─────────────────────────────────
   Desktop 1024px+  : fixed right side, vertical stack
   Tablet  600-1023 : fixed bottom bar, 3 columns
   Mobile  <600px   : fixed bottom bar, icon + label
   ─────────────────────────────────────────────────────────── */
.spc-delivery-float {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(-4px 4px 20px rgba(0,0,0,0.4));
}

.spc-delivery-btn {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--spc-btn-scale, 1));
  padding: calc(13px * var(--spc-btn-scale, 1)) calc(16px * var(--spc-btn-scale, 1)) calc(13px * var(--spc-btn-scale, 1)) calc(14px * var(--spc-btn-scale, 1));
  background: rgba(var(--sp-dark-1-rgb, 26,15,7), var(--spc-btn-bg-alpha, 1));
  border-left: 3px solid var(--sp-amber, #FDB71B);
  color: var(--sp-cream, #F7EEE6);
  font-family: 'Inter', sans-serif;
  font-size: calc(12px * var(--spc-btn-scale, 1));
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
}
.spc-delivery-btn + .spc-delivery-btn {
  border-top: 1px solid rgba(255,255,255,0.07);
}
.spc-delivery-btn:first-child { border-radius: 10px 0 0 0; }
.spc-delivery-btn:last-child  { border-radius: 0 0 0 10px; }

.spc-delivery-btn:hover {
  background: var(--sp-amber, #FDB71B);
  color: var(--sp-brown, #362013);
  padding-right: calc(26px * var(--spc-btn-scale, 1));
}

.spc-delivery-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(28px * var(--spc-btn-scale, 1));
  height: calc(28px * var(--spc-btn-scale, 1));
}
.spc-delivery-icon svg { border-radius: 6px; display: block; width: 100%; height: 100%; }
.spc-delivery-icon img { display: block; width: 100%; height: 100%; }

/* ── COMPACT / AUTO-HIDE MODE ─────────────────────────────────
   Only the round icon is visible by default. Hovering (or
   tapping, on touch devices) reveals the full button with its
   label, background and border — same content, just tucked
   away until the visitor wants it. Desktop only; on the mobile
   bottom-bar layout compact mode is ignored so buttons stay
   fully visible and tappable. ─────────────────────────────── */
@media (min-width: 1024px) {
  .spc-delivery-float.spc-compact {
    filter: none;
  }
  .spc-compact .spc-delivery-btn {
    background: transparent;
    border-left: none;
    padding: calc(6px * var(--spc-btn-scale, 1));
    gap: 0;
    border-radius: 50% !important;
    box-shadow: none;
  }
  .spc-compact .spc-delivery-btn + .spc-delivery-btn {
    border-top: none;
    margin-top: calc(8px * var(--spc-btn-scale, 1));
  }
  .spc-compact .spc-delivery-icon {
    filter: drop-shadow(-2px 3px 10px rgba(0,0,0,0.35));
    transition: filter 0.3s ease;
  }
  .spc-compact .spc-delivery-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.45s ease, opacity 0.4s ease, margin 0.45s ease;
  }
  .spc-compact .spc-delivery-btn:hover {
    background: rgba(var(--sp-dark-1-rgb, 26,15,7), var(--spc-btn-bg-alpha, 1));
    border-left: 3px solid var(--sp-amber, #FDB71B);
    border-radius: 0 !important;
    padding: calc(13px * var(--spc-btn-scale, 1)) calc(26px * var(--spc-btn-scale, 1)) calc(13px * var(--spc-btn-scale, 1)) calc(14px * var(--spc-btn-scale, 1));
    gap: calc(10px * var(--spc-btn-scale, 1));
    color: var(--sp-cream, #F7EEE6);
    transition: background 0.45s ease, border-left 0.45s ease, padding 0.45s ease, gap 0.45s ease, color 0.1s ease;
  }
  .spc-compact .spc-delivery-btn:first-child:hover { border-radius: 10px 0 0 0 !important; }
  .spc-compact .spc-delivery-btn:last-child:hover  { border-radius: 0 0 0 10px !important; }
  .spc-compact .spc-delivery-btn:hover .spc-delivery-label {
    max-width: 160px;
    opacity: 1;
    color: #FFFFFF;
  }
  .spc-compact .spc-delivery-btn:hover .spc-delivery-icon {
    filter: none;
  }
}

/* ── TABLET: bottom bar ────────────────────────────────────── */
@media (max-width: 1023px) {
  body { padding-bottom: 66px !important; }

  /* Below this breakpoint, switch to the mobile size setting.
     All calc() expressions above reference --spc-btn-scale, so
     overriding it here is enough to resize everything at once. */
  .spc-delivery-float {
    --spc-btn-scale: var(--spc-btn-scale-mobile, 1);
  }

  .spc-delivery-float {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    flex-direction: row;
    border-top: 2px solid var(--sp-amber, #FDB71B);
    filter: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    background: rgba(var(--sp-brown-rgb, 54,32,19), var(--spc-btn-bg-alpha, 1));
  }
  .spc-delivery-btn {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--spc-btn-scale, 1));
    padding: calc(10px * var(--spc-btn-scale, 1)) calc(6px * var(--spc-btn-scale, 1)) calc(8px * var(--spc-btn-scale, 1));
    border-left: none !important;
    border-top: none !important;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 !important;
    font-size: calc(10px * var(--spc-btn-scale, 1));
    text-align: center;
    background: transparent;
  }
  .spc-delivery-btn:last-child { border-right: none; }
  .spc-delivery-btn:hover { padding-right: calc(6px * var(--spc-btn-scale, 1)); }
}

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body { padding-bottom: 70px !important; }
  .spc-delivery-btn { font-size: calc(9px * var(--spc-btn-scale, 1)); padding: calc(8px * var(--spc-btn-scale, 1)) calc(4px * var(--spc-btn-scale, 1)) calc(6px * var(--spc-btn-scale, 1)); gap: calc(3px * var(--spc-btn-scale, 1)); }
  .spc-delivery-icon { width: calc(24px * var(--spc-btn-scale, 1)); height: calc(24px * var(--spc-btn-scale, 1)); }
}

/* ── UTILITY CLASSES — apply in Elementor Advanced → CSS Classes ──
   All use CSS variables so changing color in dashboard
   updates ALL of these automatically.
   ──────────────────────────────────────────────────────────── */

/* Gradient text */
.spc-text-gradient {
  background: linear-gradient(135deg, var(--sp-amber, #FDB71B), var(--sp-yellow, #FFF000)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Amber underline */
.spc-underline-amber {
  text-decoration: underline !important;
  text-decoration-color: var(--sp-amber, #FDB71B) !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 3px !important;
}

/* Card with amber hover */
.spc-card-amber {
  border: 1px solid rgba(var(--sp-amber-rgb, 253,183,27), 0.2) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.spc-card-amber:hover {
  border-color: var(--sp-amber, #FDB71B) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 30px rgba(var(--sp-amber-rgb, 253,183,27), 0.15) !important;
  transform: translateY(-4px) !important;
}

/* Left accent bar */
.spc-border-left-amber {
  border-left: 4px solid var(--sp-amber, #FDB71B) !important;
  padding-left: 20px !important;
}

/* Ambient glow */
.spc-glow-amber {
  box-shadow: 0 0 40px rgba(var(--sp-amber-rgb, 253,183,27), 0.25) !important;
}

/* Text colors */
.spc-text-amber  { color: var(--sp-amber, #FDB71B)  !important; }
.spc-text-yellow { color: var(--sp-yellow, #FFF000) !important; }
.spc-text-cream  { color: var(--sp-cream, #F7EEE6)  !important; }
.spc-text-tan    { color: var(--sp-tan, #C19977)    !important; }

/* Background helpers */
.spc-bg-brown { background-color: var(--sp-brown, #362013) !important; }
.spc-bg-dark  { background-color: var(--sp-black, #0D0A07) !important; }

/* Elementor button — amber */
.spc-btn-amber.elementor-button {
  background: linear-gradient(135deg, var(--sp-amber, #FDB71B), var(--sp-yellow, #FFF000)) !important;
  color: var(--sp-brown, #362013) !important;
  font-weight: 700 !important;
  border: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.spc-btn-amber.elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(var(--sp-amber-rgb, 253,183,27), 0.45) !important;
}

/* Elementor button — outline amber */
.spc-btn-outline-amber.elementor-button {
  background: transparent !important;
  border: 1.5px solid var(--sp-amber, #FDB71B) !important;
  color: var(--sp-cream, #F7EEE6) !important;
  transition: border-color 0.25s ease, color 0.25s ease !important;
}
.spc-btn-outline-amber.elementor-button:hover {
  color: var(--sp-amber, #FDB71B) !important;
  box-shadow: 0 0 20px rgba(var(--sp-amber-rgb, 253,183,27), 0.2) !important;
}

/* ── ELEMENTOR FIXES ─────────────────────────────────────────── */
body.elementor-page { margin: 0 !important; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Custom amber scrollbar removed from here on purpose.
   It's now injected conditionally (only when the "Amber-styled
   scrollbar" toggle is ON in Animations & Effects) from
   includes/assets.php, scoped to html/:root only — never as a
   bare ::-webkit-scrollbar selector, which would restyle every
   scrollable element on the page and look like a second scrollbar
   next to the real one. See spc_enqueue_assets() in assets.php. */

/* Admin bar fix */
.admin-bar .spc-delivery-float { top: calc(50% + 16px); }
@media (max-width: 1023px) { .admin-bar .spc-delivery-float { top: auto; } }

/* Marquee animation */
@keyframes spc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── DELIVERY BUTTONS Z-INDEX ENFORCEMENT ────────────────────
   Forces buttons above ALL theme elements including:
   - Hello Theme / Elementor sticky headers
   - Elementor popups
   - WooCommerce cart overlay
   - Any other fixed elements
   ─────────────────────────────────────────────────────────── */
.spc-delivery-float {
  isolation: isolate;
  pointer-events: auto;
}
.spc-delivery-float * {
  pointer-events: auto;
}

/* Override any theme that sets z-index on fixed elements */
body .spc-delivery-float { z-index: 9999999 !important; }

/* Elementor sticky header sits at z-index 9999 — we go above it */
.elementor-sticky--active ~ * .spc-delivery-float,
.elementor-sticky .spc-delivery-float { z-index: 9999999 !important; }

/* ── INSIDE THE ELEMENTOR EDITOR CANVAS ──────────────────────
   Buttons still render here so you can visually confirm icon/
   color/text changes as you edit — but they shouldn't block
   clicks on the widgets underneath while you're building the page. ── */
body.elementor-editor-active .spc-delivery-float {
  opacity: 0.9;
  pointer-events: none;
}
body.elementor-editor-active .spc-delivery-float * {
  pointer-events: none;
}

/* ============================================================
   MOBILE VIEWPORT & ZOOM FIXES
   Prevents page loading zoomed in on mobile devices.
   Hello Theme + Elementor sometimes sets wrong scaling.
   ============================================================ */

/* Prevent horizontal overflow causing zoom-out appearance.
   CONFIRMED VIA LIVE DEVTOOLS on this site: there is NO overflow-x
   value that can be safely set on <html> or <body> alone, because
   per the CSS Overflow spec, whichever axis is left "visible" gets
   silently promoted to "auto" the moment the OTHER axis is
   anything but visible/clip:
     - overflow-x: hidden -> overflow-y promotes to auto (this was
       the original bug: <body> got its own "scroll" badge in
       DevTools, i.e. a second scroll container next to <html>).
     - overflow-x: clip + overflow-y: visible -> overflow-y STILL
       promotes to auto (confirmed live in DevTools' Computed
       panel — the previous attempt at fixing this didn't work).
     - overflow-x: clip + overflow-y: clip -> avoids the auto
       promotion, but overflow-y: clip also disables ALL vertical
       scrolling on that element — including real user scrolling
       (clip "forbids all scrolling" per spec). Setting that on
       <html>/<body>, the page's actual scroll element, would
       break the ability to scroll the site at all. Worse than
       the double-scrollbar bug it would replace.
   CONCLUSION: overflow-x must not be set on <html> or <body> at
   all — there's no safe value. The actual goal here (stopping
   mobile browsers from zooming the page out because something is
   wider than the viewport) is instead handled by capping the
   width of things that actually cause that overflow: images,
   video/iframes, and Elementor sections (see the existing rules
   further down this file — img/video/iframe max-width:100%, and
   .elementor-section/.elementor-container/.e-con max-width:100%).
   That fixes the root cause (an element being too wide) instead
   of papering over it by clipping the whole document, which is
   what created this bug in the first place. */
body {
  max-width: 100%;
}

/* NOTE ON ElementsKit Lite's header module:
   Traced via live DevTools + plugin-by-plugin isolation: the
   double-scrollbar bug is caused by ElementsKit Lite's header
   template printing its own inline <style> block containing:
     body, html { overflow-x: hidden !important; }
   An override was attempted here (forcing overflow-y: visible
   with higher specificity), but per the CSS Overflow spec the
   "visible + non-visible -> auto" promotion is a computed-value
   step applied AFTER the cascade resolves each of overflow-x/
   overflow-y independently — so no amount of specificity or
   !important on overflow-y alone can prevent the promotion once
   overflow-x is non-visible on the same element. There is no
   pure-CSS override possible here from a different stylesheet.
   This needs to be fixed at the source (ElementsKit's own header
   settings/module), not patched from SPC. See the plugin's admin
   notice / documentation for guidance on locating that setting. */

/* ============================================================
   ELEMENTOR KIT OFF-CANVAS MENU — SINGLE SCROLLBAR GUARD
   Not caused by this plugin, but reinforced here as a safety
   net: ekit's off-canvas panel (.elementskit-menu-offcanvas-
   elements) should manage its OWN internal scroll only while
   open, and must never leave a stray scroll container behind
   on the page's outer wrappers when closed. If a theme/ekit
   update ever sets height:100vh + overflow-y:auto on a wrapper
   that ISN'T the off-canvas panel itself, it will reproduce
   this exact double-scrollbar bug. This guard keeps the page-
   level elements (html, body, Elementor's own wrappers) from
   ever becoming a second scroll container.
   ============================================================ */
html, body,
.elementor,
.elementor-section-wrap,
.e-con,
.elementskit-menu-container {
  height: auto !important;
  max-height: none !important;
}

/* The off-canvas panel itself IS allowed to scroll internally
   while open — that's expected/required off-canvas behavior,
   not the bug. Only its own vertical scroll is preserved. */
.elementskit-menu-offcanvas-elements {
  overflow-x: hidden;
}

/* Fix Elementor sections overflowing viewport width */
.elementor-section,
.elementor-container,
.e-con {
  max-width: 100% !important;
}

/* Prevent any element from being wider than viewport */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* Fix Hello Theme body margin that can cause overflow.
   IMPORTANT: this rule used to set `overflow-x: hidden !important`,
   then later `overflow-x: clip !important` — both have the same
   flaw explained in detail in the MOBILE VIEWPORT & ZOOM FIXES
   comment above: there is no overflow-x value safe to set on
   <body> itself, because it either turns <body> into a second
   scroll container (hidden/auto) or disables real vertical
   scrolling entirely (clip+clip). Since <body> already has
   max-width:100% from the rule above, and the real overflow
   sources (oversized images/iframes/Elementor sections) are
   already capped by rules elsewhere in this file, this class no
   longer needs its own overflow-x — removing it here for the
   same reason it was removed from the html/body rule. */
body.hello-elementor {
  max-width: 100%;
}

/* Fix Elementor stretched sections on mobile */
@media (max-width: 1024px) {
  .elementor-section.elementor-section-stretched {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ============================================================
   DELIVERY BUTTONS — mobile positioning fix
   Ensures buttons don't cause horizontal overflow
   ============================================================ */
@media (max-width: 1023px) {
  .spc-delivery-float {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }
  .spc-delivery-label {
    font-size: calc(9px * var(--spc-btn-scale, 1));
    word-break: break-word;
    text-align: center;
    max-width: calc(60px * var(--spc-btn-scale, 1));
    line-height: 1.2;
  }
}

@media (max-width: 380px) {
  .spc-delivery-label { font-size: calc(8px * var(--spc-btn-scale, 1)); max-width: calc(50px * var(--spc-btn-scale, 1)); }
  .spc-delivery-icon  { width: calc(20px * var(--spc-btn-scale, 1)); height: calc(20px * var(--spc-btn-scale, 1)); }
}