/* Cheeky Monkeys — feedback override layer (customer feedback pass 2026-08-21).
   Loaded AFTER the built CSS bundle. Only visual/DOM tweaks — no source rebuild required. */

/* --- Widow-word fix: nicer line-breaking for headings and paragraphs.
       "balance" distributes words so a lone 1-3 word widow doesn't sit on the last line. --- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li                  { text-wrap: pretty; }

/* Kill widow words on hero subtitles + section intro paragraphs by balancing them,
   and give the narrower centered containers more horizontal room so the wrap
   doesn't strand 1-2 words on a final line. */
section p.text-center,
section .text-center > p,
section p[class*="mx-auto"],
[class*="max-w-md"]  > p,
[class*="max-w-lg"]  > p,
[class*="max-w-xl"]  > p,
[class*="max-w-2xl"] > p,
[class*="max-w-3xl"] > p,
[class*="max-w-4xl"] > p,
p[class*="max-w-md"],  p[class*="max-w-lg"],  p[class*="max-w-xl"],
p[class*="max-w-2xl"], p[class*="max-w-3xl"], p[class*="max-w-4xl"] {
  text-wrap: balance !important;
}

/* Widen ONLY the text-carrying centered containers so long sentences don't wrap
   into orphaned 1-3 word lines. We skip anything that contains a form/input so the
   newsletter box, search fields, etc. keep their compact width. */
@media (min-width: 640px) {
  section .max-w-2xl.mx-auto:not(:has(form)):not(:has(input)):not(:has(button)),
  section .max-w-3xl.mx-auto:not(:has(form)):not(:has(input)):not(:has(button)),
  section .max-w-4xl.mx-auto:not(:has(form)):not(:has(input)):not(:has(button)) {
    max-width: min(96%, 88rem) !important;
  }
  /* Paragraph-level max-w classes (safe: paragraphs never contain forms). */
  section p.max-w-md,
  section p.max-w-lg,
  section p.max-w-xl,
  section p.max-w-2xl,
  section p.max-w-3xl,
  section p.max-w-4xl {
    max-width: min(96%, 88rem) !important;
  }
}

/* --- Homepage: services tiles are now non-clickable (link removed at data level).
       Convert the tile grid into an auto-scrolling marquee (customer asked for
       "an animated carousel that moves to show the world of CM without redirecting"). --- */
#services .group {
  cursor: default !important;
}

/* Carousel viewport (installed by override.js) */
.cm-marquee-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.cm-marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: cm-marquee 40s linear infinite;
}
.cm-marquee-viewport:hover .cm-marquee-track { animation-play-state: paused; }
.cm-marquee-track > .group {
  flex: 0 0 320px;
  transform: none !important;
}
@media (min-width: 768px) {
  .cm-marquee-track > .group { flex-basis: 380px; }
}
/* Smaller tile width variant for the Outdoor Birthday "Events & Services" marquee. */
.cm-marquee-track--sm > .group,
.cm-marquee-track--sm > * {
  flex: 0 0 200px;
  transform: none !important;
}
@media (min-width: 768px) {
  .cm-marquee-track--sm > .group,
  .cm-marquee-track--sm > * { flex-basis: 240px; }
}
@keyframes cm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track holds two copies of the tile set */
}
@media (prefers-reduced-motion: reduce) {
  .cm-marquee-track { animation: none; }
}

/* --- Homepage: hide the Banana Catch mini-game entirely (customer questioned its purpose) --- */
[data-cm-hide="banana-game"] { display: none !important; }

/* --- Outdoor Birthdays: keep the button's original color and shape (party variant).
       We only need it full width so each card's CTA lines up neatly. --- */
[data-cm-outdoor-inquire] {
  width: 100% !important;
}

/* Bottom-align the "Enquire Now" CTA across all Outdoor Birthday package cards.
   The card is a flex column that stretches to the tallest row; the inner .p-6 becomes
   a flex column that grows, and its last child (the button / dialog trigger) is pushed
   to the bottom with margin-top:auto so all three buttons line up on the same baseline. */
[data-cm-outdoor-card] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
[data-cm-outdoor-card] > .aspect-\[4\/3\],
[data-cm-outdoor-card] > .aspect-\[4\/3\] > img {
  flex-shrink: 0 !important;
}
[data-cm-outdoor-inner] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
[data-cm-outdoor-inner] > *:last-child {
  margin-top: auto !important;
}

/* --- Rentals: rotating hero carousel of top offerings --- */
.cm-rentals-hero-stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.cm-rentals-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: cm-hero-fade 15s ease-in-out infinite;
}
.cm-rentals-hero-slide:nth-child(1) { animation-delay: 0s; }
.cm-rentals-hero-slide:nth-child(2) { animation-delay: 5s; }
.cm-rentals-hero-slide:nth-child(3) { animation-delay: 10s; }
@keyframes cm-hero-fade {
  0%, 26% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
[data-cm-rentals-hero] .container { position: relative; z-index: 2; }

/* --- Rentals: injected "Book a Rental/Service now" CTA (orange, centered) --- */
.cm-rentals-cta-banner {
  padding: 2.25rem 1rem;
  display: flex; justify-content: center;
}
.cm-rentals-cta-wrap {
  display: flex; justify-content: center; width: 100%;
  margin-top: 0;
}
.cm-rentals-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 0.95rem 2rem;
  background: linear-gradient(135deg, #ff8a00 0%, #ff6a00 100%);
  color: #fff !important;
  border-radius: 9999px; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 8px 22px rgba(255, 106, 0, .35);
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  letter-spacing: .01em;
}
.cm-rentals-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 106, 0, .45);
  filter: brightness(1.05);
}
.cm-rentals-cta:active { transform: translateY(0); }

/* --- Monthly Fun Guide: hide the React-rendered section immediately on /events
       so the user never sees the flat grid before our 3-section rebuild lands.
       :has() is Chrome 105+/Safari 15.4+/Firefox 121+ — everywhere the site targets. --- */
html[data-cm-path$="/events"] #main-content section:has([data-event-card]):not(.cm-rebuilt-events) {
  display: none !important;
}

/* --- Monthly Fun Guide: split into named sections + rebuilt card layout --- */
.cm-events-block { margin-bottom: 3rem; }
.cm-events-block:last-child { margin-bottom: 1rem; }
.cm-events-block-heading {
  font-family: var(--font-heading, inherit);
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: hsl(var(--foreground));
  margin: 1.25rem 0 1.5rem;
}
@media (min-width: 768px) {
  .cm-events-block-heading { font-size: 2.25rem; }
}
.cm-event-learn-btn {
  display: inline-flex;
  width: 100%;
  align-items: center; justify-content: center;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #ff8a00 0%, #ff6a00 100%);
  color: #fff !important;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(255,106,0,.28);
}
.cm-event-learn-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,106,0,.36); }

/* Equal-height cards + bottom-aligned "Learn More" buttons across every event card. */
.cm-event-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.cm-event-card > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.cm-event-card .cm-event-learn-btn {
  margin-top: auto !important;
}

/* --- Coming Soon teasers: emoji + title only, no imagery --- */
.cm-coming-soon-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cm-coming-soon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.cm-coming-soon-emoji {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: .6rem;
}
.cm-coming-soon-title {
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  color: hsl(var(--foreground));
  font-size: 1rem;
}
@media (min-width: 768px) {
  .cm-coming-soon-emoji { font-size: 3.5rem; }
  .cm-coming-soon-title { font-size: 1.1rem; }
}

/* --- Site-wide: hide breadcrumbs (customer changed their mind — remove them across pages) --- */
nav[aria-label="breadcrumb" i],
nav[aria-label="Breadcrumb" i],
ol[aria-label="breadcrumb" i],
[class*="breadcrumb" i],
[data-cm-breadcrumb] {
  display: none !important;
}

/* --- Site-wide: elements the override JS marks for removal --- */
[data-cm-hide="1"] { display: none !important; }

/* --- Kill the "Get 10% Off!" promo popup (Rentals & Services page). --- */
[aria-label="Close popup"] { display: none !important; }
.fixed:has([aria-label="Close popup"]),
div:has(> [aria-label="Close popup"]) {
  display: none !important;
}

/* =========================================================================
   Change-request pass 2026-09-16 (PDF review notes) — see override.js for
   companion DOM patches. Everything below is additive/idempotent.
   ========================================================================= */

/* §2 — Mobile navigation contrast.
   Two things:
     1) Force the sticky header and the slide-out drawer to a solid opaque
        background so text is always legible regardless of what's behind them.
     2) Make the mobile hamburger button orange so it stands out clearly.
   No chip behind the drawer text — the drawer itself provides the contrast. */
@media (max-width: 1023px) {
  header.sticky.top-0 { background-color: hsl(var(--card)) !important; box-shadow: 0 2px 12px hsl(var(--warm-cocoa) / 0.08); }
  /* Slide-out mobile drawer wrapper — solid background */
  .fixed.inset-0.z-\[60\] { background-color: hsl(var(--background)) !important; }
  /* Ensure drawer nav links read clearly on that solid background */
  .fixed.inset-0.z-\[60\] nav a,
  .fixed.inset-0.z-\[60\] nav button {
    color: hsl(var(--foreground)) !important;
    font-weight: 600;
  }

  /* Hide the "Book a Party" CTA from the sticky header on mobile —
     it should only appear once the drawer is opened. */
  header.sticky.top-0 a[href*="wufoo"] { display: none !important; }

  /* Drawer-only "Book a Party" CTA — orange background + white text. */
  .fixed.inset-0.z-\[60\] a[href*="wufoo"] {
    background-color: hsl(var(--secondary)) !important;
    color: #ffffff !important;
    border-radius: 9999px;
    padding: 0.6rem 1.25rem !important;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px hsl(var(--secondary) / 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .fixed.inset-0.z-\[60\] a[href*="wufoo"]:hover { filter: brightness(1.05); }

  /* Orange hamburger open / close buttons */
  header.sticky.top-0 button.lg\:hidden,
  .fixed.inset-0.z-\[60\] button[aria-label="Close menu"] {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    box-shadow: 0 4px 12px -4px hsl(var(--secondary) / 0.55);
  }
  header.sticky.top-0 button.lg\:hidden svg,
  .fixed.inset-0.z-\[60\] button[aria-label="Close menu"] svg {
    color: hsl(var(--secondary-foreground)) !important;
  }
  header.sticky.top-0 button.lg\:hidden:hover,
  .fixed.inset-0.z-\[60\] button[aria-label="Close menu"]:hover {
    filter: brightness(1.05);
  }
}

/* §3c — Outdoor Events marquee: too slow. The existing marquee class in this
   file uses a long animation-duration; tighten it for the outdoor variant. */
.cm-marquee-track--sm { animation-duration: 22s !important; }
.cm-marquee-track      { animation-duration: 28s !important; }

/* §3a, §3b — Scroll arrows for theme carousels (Themes Kids Love /
   Choose Your Themes). Buttons are injected by override.js and use these
   layout rules. */
.cm-carousel-wrap { position: relative; }
.cm-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  box-shadow: 0 6px 18px -6px hsl(var(--warm-cocoa) / 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.cm-scroll-arrow:hover  { background: hsl(var(--jungle-green)); color: hsl(var(--jungle-green-foreground)); }
.cm-scroll-arrow:active { transform: translateY(-50%) scale(0.94); }
.cm-scroll-arrow[disabled] { opacity: .35; cursor: default; }
.cm-scroll-arrow--left  { left: -8px; }
.cm-scroll-arrow--right { right: -8px; }
.cm-scroll-arrow svg { width: 20px; height: 20px; }
/* Only show the arrows on md+ where the carousel actually needs them */
@media (max-width: 767px) { .cm-scroll-arrow { display: none; } }
/* Show a small "swipe to see more" hint on mobile the first time it loads */
.cm-swipe-hint {
  display: none;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin: 0.5rem 0 0.25rem;
}
@media (max-width: 767px) { .cm-swipe-hint { display: block; } }

/* §4c — Value Packs microcopy on Indoor Play Prices page (injected by JS).
   Centered pill with warm accent tint. No green background. */
.cm-value-packs {
  display: block;
  text-align: center;
  margin: 0.75rem auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.cm-value-packs__badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: hsl(var(--accent) / 0.18);
  color: hsl(var(--warm-cocoa));
  border: 1px solid hsl(var(--accent) / 0.5);
  border-radius: 9999px;
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* §5a — Cafe menu redesign: match the playful Birthday-page card style.
   Rotates warm gradient chips across menu items; larger emoji circle. */
[data-cm-cafe-menu="1"] .grid > div {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--accent) / 0.10) 100%) !important;
  border: 2px solid hsl(var(--accent) / 0.35) !important;
  border-radius: 1.25rem !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  position: relative;
  overflow: hidden;
}
[data-cm-cafe-menu="1"] .grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px -18px hsl(var(--warm-cocoa) / 0.35);
  border-color: hsl(var(--jungle-green) / 0.55) !important;
}
[data-cm-cafe-menu="1"] .grid > div:nth-child(3n+2) {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--jungle-green) / 0.10) 100%) !important;
  border-color: hsl(var(--jungle-green) / 0.30) !important;
}
[data-cm-cafe-menu="1"] .grid > div:nth-child(3n+3) {
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--bubblegum) / 0.10) 100%) !important;
  border-color: hsl(var(--bubblegum) / 0.35) !important;
}
[data-cm-cafe-menu="1"] .grid > div > .text-4xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background: hsl(var(--background));
  box-shadow: 0 4px 10px -4px hsl(var(--warm-cocoa) / 0.35);
  margin-bottom: 0.75rem;
}

/* §11a — Homepage mobile hero. The React <video> now points to the reel-cut
   720x1280 H.264 asset on mobile (swapped by override.js). Force width to
   100vw and compute height explicitly — using aspect-ratio + max-height
   together makes the browser shrink WIDTH to satisfy the ratio. */
@media (max-width: 767px) {
  section.relative.min-h-screen:has(> video.absolute) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }
  section.relative.min-h-screen:has(> video.absolute) > video.absolute {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* §11b — Per-page mobile hero banners. Each page uses the new 1080-wide WebP
   reel banner supplied by the client. The section spans full viewport width
   with a 9:16 aspect ratio; padding is minimal (just enough to clear the
   sticky header) so no extra dead-space shows above the image. */
@media (max-width: 767px) {
  section[data-cm-hero-slug] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    padding: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    justify-content: flex-end;
    align-items: center;
  }
  section[data-cm-hero-slug] > .container,
  section[data-cm-hero-slug] > div {
    padding-bottom: 1.5rem !important;
    padding-top: 0 !important;
  }
  section[data-cm-hero-slug] h1 {
    font-size: clamp(1.5rem, 5vw + 0.5rem, 2rem) !important;
    margin-bottom: 0.25rem !important;
  }
  section[data-cm-hero-slug] p {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }
  section[data-cm-hero-slug] nav { display: none !important; } /* hide crumbs on mobile hero */
  /* Per-slug mobile banner override. Keeps the existing gradient overlay for
     text legibility. */
  section[data-cm-hero-slug="indoor-play"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-indoor-play-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="events"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-events-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="birthday-parties"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-birthday-parties-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="birthday-parties-indoor"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-birthday-parties-indoor-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="birthday-parties-outdoor"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-birthday-parties-outdoor-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="about"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-about-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="cafe"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-cafe-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="rentals-services"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-rentals-services-mobile.webp?v=20260921') !important;
  }
  section[data-cm-hero-slug="locations"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.45), rgba(20,20,40,0.45)),
      url('/uploads/media/hero-locations-mobile.webp?v=20260921') !important;
  }
}

/* §9 — Locations page banner (DESKTOP). Mobile uses hero-locations-mobile.webp,
   which is set inside the `@media (max-width: 767px)` block above. Scoping this
   desktop version to ≥768px so the mobile rule isn't overridden by source order. */
@media (min-width: 768px) {
  section[data-cm-hero-slug="locations"] {
    background-image:
      linear-gradient(rgba(20,20,40,0.55), rgba(20,20,40,0.55)),
      url('/uploads/media/hero-locations.webp') !important;
  }
}

/* Utility used by JS to hide arbitrary DOM nodes (e.g. Monthly Fun Guide
   Book-a-Party CTA that we replace with Call Us). */
[data-cm-hide-mfg="1"] { display: none !important; }

/* -------------------------------------------------------------------------
   2026-09-21 pass: footer polish + mobile widow-word tightening.
   ------------------------------------------------------------------------- */

/* Belt-and-braces: no page section should be able to trigger a horizontal
   scroll on any viewport. Prevents the "content shifted left with orange
   bleed on the right" glitch when a child element accidentally uses 100vw. */
html, body { overflow-x: hidden !important; max-width: 100% !important; }

/* Hide the CM logo image inside the footer (client request). */
footer img[alt="Cheeky Monkeys"] { display: none !important; }
footer .h-16.mb-4 { display: none !important; }

/* On mobile, balance body paragraphs so short phrases don't wrap with a
   dangling single-word line (e.g. "Wherever you are, a / Cheeky Monkeys is
   close by."). `balance` re-distributes wraps evenly across the box. */
@media (max-width: 767px) {
  section p, section li { text-wrap: balance !important; }
  /* The custom `.container` class ships with padding: 2rem which eats 64px
     of horizontal room on phones. Bring it back to a normal 1rem so short
     phrases have room to fit and text doesn't feel cramped. */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Intro paragraphs use `text-lg` (18px) which is too large on phones —
     scale down to 15px so 45-55-char intro lines wrap only once (if at all)
     instead of leaving dangling words. */
  section p.text-lg { font-size: 0.9375rem !important; line-height: 1.4 !important; }
  section p.text-base { font-size: 0.9375rem !important; }
}

/* -------------------------------------------------------------------------
   Brevo newsletter form — Cheeky Monkeys skin.
   The Brevo main.js keeps working; we only reskin the DOM to match brand.
   ------------------------------------------------------------------------- */
.cm-brevo-wrap { max-width: 640px; margin: 0 auto; }
.cm-brevo-wrap .sib-form { background: transparent !important; padding: 0 !important; text-align: center; }
.cm-brevo-wrap .sib-form-container { max-width: none !important; }

.cm-brevo-wrap .cm-brevo-card {
  max-width: none !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 12px 32px -12px hsl(var(--warm-cocoa) / 0.18), 0 2px 6px hsl(var(--warm-cocoa) / 0.05);
  padding: 2rem 1.5rem !important;
  direction: ltr;
}
@media (min-width: 640px) { .cm-brevo-wrap .cm-brevo-card { padding: 2.5rem 2.5rem !important; } }

.cm-brevo-wrap .cm-brevo-heading p {
  margin: 0 0 0.5rem !important;
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  line-height: 1.15;
  color: hsl(var(--foreground));
  text-align: center;
}
.cm-brevo-wrap .cm-brevo-sub p {
  margin: 0 0 1.5rem !important;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1.05rem;
  color: hsl(var(--warm-cocoa));
  text-align: center;
}
.cm-brevo-wrap .cm-brevo-sub strong { color: hsl(var(--jungle-green)); }

.cm-brevo-wrap .cm-brevo-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 640px) { .cm-brevo-wrap .cm-brevo-row { flex-direction: row; } }

.cm-brevo-wrap .cm-brevo-input { flex: 1; }
.cm-brevo-wrap .cm-brevo-input .form__entry { padding: 0 !important; }
.cm-brevo-wrap .cm-brevo-input .form__label-row { display: block; }
.cm-brevo-wrap .cm-brevo-input .entry__field {
  border: 2px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
  border-radius: 9999px !important;
  padding: 0 1.25rem !important;
  height: 3.25rem;
  display: flex;
  align-items: center;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
.cm-brevo-wrap .cm-brevo-input .entry__field:focus-within {
  border-color: hsl(var(--jungle-green)) !important;
  box-shadow: 0 0 0 4px hsl(var(--jungle-green) / 0.15) !important;
}
.cm-brevo-wrap .cm-brevo-input input.input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  width: 100%;
  height: 100%;
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-size: 1rem !important;
  color: hsl(var(--foreground)) !important;
  text-align: left !important;
  padding: 0 !important;
}
.cm-brevo-wrap .cm-brevo-input input.input::placeholder { color: hsl(var(--muted-foreground)) !important; opacity: 1; font-family: 'Nunito', system-ui, sans-serif !important; }

.cm-brevo-wrap .cm-brevo-btn-wrap { display: flex; }
.cm-brevo-wrap .cm-brevo-btn {
  background: hsl(var(--jungle-green)) !important;
  color: hsl(var(--jungle-green-foreground)) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 0 1.75rem !important;
  height: 3.25rem;
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: .01em;
  text-align: center !important;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px hsl(var(--jungle-green) / 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}
@media (min-width: 640px) { .cm-brevo-wrap .cm-brevo-btn { width: auto; } }
.cm-brevo-wrap .cm-brevo-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cm-brevo-wrap .cm-brevo-btn:active { transform: translateY(0); }
.cm-brevo-wrap .cm-brevo-btn .sib-hide-loader-icon { display: none; }

/* Screen-reader-only label (kept for a11y, invisible) */
.cm-brevo-wrap .cm-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Inline error / success message pills */
.cm-brevo-wrap .cm-brevo-msg {
  font-family: 'Nunito', system-ui, sans-serif !important;
  border-radius: 12px !important;
  max-width: 480px !important;
  margin: 0 auto 1rem !important;
  padding: 0.75rem 1rem !important;
}
.cm-brevo-wrap .cm-brevo-msg--error { color: #7a1f1f !important; background: #fdecec !important; border: 1px solid #f5b3b3 !important; }
.cm-brevo-wrap .cm-brevo-msg--ok    { color: #0d5b2e !important; background: #e6f7ec !important; border: 1px solid #a7e0bc !important; }

/* Suppress any leftover Brevo spec/error microcopy we don't need */
.cm-brevo-wrap .entry__specification { display: none !important; }
.cm-brevo-wrap .entry__error:empty   { display: none !important; }
.cm-brevo-wrap .entry__error         { margin-top: 0.5rem !important; padding: 0.4rem 0.75rem !important; border-radius: 8px !important; }