/* ==========================================================================
   SHARED MOBILE & A11Y FIXES — Al-Shohab Bot Store
   Injected into every page. Keeps existing design, fixes overflow + drawer.
   ========================================================================== */

/* 1) Visually-hidden helper that does NOT create a 9999px scrollbar.
      Replaces the inline `position:absolute;left:-9999px` pattern. */
.sr-only,
.sr-only-focusable {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2) Global safety for flex/grid items (prevents intrinsic min-width overflow). */
.header__inner,
.nav,
.mobile-drawer,
.bots-grid,
.bot-card,
.bots__head,
.tools-grid,
.tools-grid > *,
.bundle-card,
.builder,
.builder-chip,
.compare-table,
.caps__grid,
.cap,
.plans__grid,
.plan,
.related__grid,
.related-card,
.form-row,
.roi-grid,
.roi-inputs,
.roi-outputs,
.contact-grid,
.footer__grid,
.stats-bar__grid,
.how-wrap,
.how,
.trust-strip__items,
.faq,
.contact-list li,
.toc li,
.faq__item,
.lang-switch,
.header__cta,
.menu-toggle {
  min-width: 0;
}

/* 3) Allow long words/URLs to wrap instead of pushing the body. */
body, p, li, a, h1, h2, h3, h4, .bot-card__desc, .bot-card__title,
.muted, .footer__col, .preview-msg, .plan__feats, .bundle-card__feats {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Page-level containers stay inside the viewport and size predictably.
      No overflow clipping here on purpose: anything that still sticks out is
      a real layout bug and has to be fixed where it is written. */
main, header, footer, section, .container, .code, .hero__inner, .bots, .section, .cta__panel, .stats-bar, .filters, .how-wrap, .tools-grid, .bots-grid, .compare-table-wrap, .legal-container, .roi-grid, .contact-grid, .form-card, .contact-card, .footer__grid, .form-row, .plan, .builder, .builder-chip, .bundle-card, .related__grid, .related-card, .cap, .caps__grid, .bots__head, .hero__search, .hero__stats, .promo-bar, .header, .mobile-drawer, .nav, .menu-toggle, .lang-switch, .header__cta, .brand, .footer__inner, .footer__bottom, .trust-strip, .trusted, .faq-section, .faq, .toc, .legal-container, .plans__grid, .related, .caps, .roi-inputs, .roi-outputs, .plans, .bots { max-width: 100%; box-sizing: border-box; }
/* Inline multi-column grids (en/index quick links, en/bundles shortcuts).
   They are written as a `style="grid-template-columns:repeat(N,1fr)"`
   attribute, which no class-based media query can reach, so the attribute
   substring is the selector.
   The two counts are handled differently on tablet on purpose. Four cards
   fold into a balanced 2x2 (measured 344x130 each at 768px, no clipping), so
   two columns is the better tablet layout. Three cards in two columns leave
   an orphan on its own row with an empty cell beside it, so they go straight
   to a single column. Below 600px everything is one column. */
@media (max-width: 768px) {
  div[style*="grid-template-columns:repeat(4"], div[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="grid-template-columns:repeat(3"], div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  div[style*="grid-template-columns:repeat(4"], div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
}

/* 5) Make sure media never overflows. */
img, svg, video, canvas { max-width: 100%; height: auto; }
/* SVGs in headers/buttons should never grow unbounded. */
button svg, .btn svg, .menu-toggle svg, .header__cta svg, .btn-wa svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 6) Compact Arabic numbers inline-block. */
.rtl-num { white-space: nowrap; }

/* ==========================================================================
   HEADER — mobile order
   ========================================================================== */
@media (max-width: 768px) {
  .header__inner {
    display: grid;
    /* Two columns since the language switch moved to the footer: brand takes
       the free space, the hamburger sits at the end. A third `auto` track
       would leave a visible hole where the switch used to be. */
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    height: 64px;
    padding-block: 6px;
  }
  .header__inner > .brand { grid-column: 1; min-width: 0; }
  .header__inner > .brand .brand__logo { height: 36px; }
  .header__inner > .brand .brand__text { display: none; }
  .header__inner > .menu-toggle,
  .menu-toggle {
    grid-column: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .header__inner > .menu-toggle svg, .menu-toggle svg { width: 22px; height: 22px; }
  /* Desktop-only header children. The remaining three (brand, language
     switch, hamburger) are exactly the three grid columns above. */
  .header__inner > .nav,
  .header__inner > .nav-search,
  .header__inner > .header__navlink,
  .header__inner > .header__cta { display: none !important; }
}

/* The drawer itself: full-screen mobile menu */
.mobile-drawer {
  position: fixed;
  /* Set from the header's real bottom edge by _shared-fixes.js: the English
     pages carry a promo bar above the header, so 64px is only a fallback. */
  top: var(--drawer-top, 64px);
  right: 0;
  left: auto;
  width: min(88vw, 360px);
  bottom: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(1, 7, 12, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
html[dir="ltr"] .mobile-drawer { left: 0; right: auto; }

/* A real click target outside the side drawer. The document listener closes
   the menu when this backdrop (the body pseudo layer) is clicked. */
body.has-mobile-drawer-open::before {
  content: "";
  position: fixed;
  inset: var(--drawer-top, 64px) 0 0;
  z-index: 55;
  background: rgba(0, 0, 0, .58);
}
.mobile-drawer { z-index: 60; }
.mobile-drawer__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}
html[dir="rtl"] .mobile-drawer__close { align-self: flex-start; }
.mobile-drawer__close:focus-visible { outline: 3px solid #d4a574; outline-offset: 3px; }

/* Hamburger -> clearly visible close icon. */
.menu-toggle line { transform-box: fill-box; transform-origin: center; transition: transform .2s ease, opacity .15s ease; }
.menu-toggle[aria-expanded="true"] line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle:focus-visible,
.mobile-drawer a:focus-visible {
  outline: 3px solid #d4a574;
  outline-offset: 3px;
}
.mobile-drawer.is-open { display: flex; visibility: visible; opacity: 1; }
.mobile-drawer > a,
.mobile-drawer > .mobile-drawer__group,
.mobile-drawer > .mobile-drawer__divider,
.mobile-drawer > .mobile-drawer__footer {
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mobile-drawer > a:hover,
.mobile-drawer > a:focus-visible { color: var(--text); background: var(--surface); }
.mobile-drawer > .mobile-drawer__divider { padding: 6px 16px; border: 0; color: var(--text-dim); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.mobile-drawer > .mobile-drawer__footer { border-bottom: 0; }
.mobile-drawer .lang-switch-mobile { display: block; text-align: center; padding: 12px; margin-top: 8px; border: 1px solid var(--border-soft); border-radius: 10px; color: var(--text); font-weight: 600; }

/* While the drawer is open, the body must not scroll. */
body.has-mobile-drawer-open { overflow: hidden; }

/* Unified contact rows: icon stays on the visual left in both languages;
   only the phone/email token is LTR so international digits never reverse. */
.site-contact-strip {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 0;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--border-soft);
}
.site-contact-strip__item {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  color: var(--text-muted);
  text-decoration: none;
  text-align: left;
}
html[dir="rtl"] .site-contact-strip__item { flex-direction: row; text-align: right; justify-content: flex-end; }
html[dir="rtl"] .site-contact-strip__label { direction: rtl; }
.site-contact-strip__icon { flex: 0 0 auto; color: var(--accent); font-size: 16px; line-height: 1; }
.site-contact-strip__text { min-width: 0; }
.site-contact-strip__label { display: block; direction: ltr; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.site-contact-strip__value { display: block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-size: 13px; color: var(--text); }
.site-contact-strip__item:hover .site-contact-strip__value,
.site-contact-strip__item:focus-visible .site-contact-strip__value { color: var(--accent); }

/* Arabic contact page: the same icon-left rule as the strip.
   `.contact-list li` is a plain flex row, so under `dir="rtl"` the .ico badge
   lands at the far right and the number sits to its left — the reverse of the
   house rule. Flipping the row itself to LTR and packing it to the end keeps
   the group hugging the right edge while the icon takes the visual left; the
   text column gets RTL back so Arabic values (address, opening hours) still
   read correctly, and the phone/email keep their own dir="ltr". */
html[dir="rtl"] .contact-list li { direction: ltr; justify-content: flex-end; }
html[dir="rtl"] .contact-list li > :not(.ico) { direction: rtl; text-align: right; }
html[dir="rtl"] .contact-list .value[dir="ltr"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.contact-directory {
  width: min(1180px, calc(100% - 32px));
  margin: 32px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.contact-directory .site-contact-strip__item {
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
}

/* ==========================================================================
   Hero background layer.
   The English hero is not a video — it is a Three.js point cloud rendered
   into #heroWebgl with a radial vignette over it. These are the English
   page's own rules, moved here so both language trees share one definition
   and render identically. `.hero` is already position:relative + overflow
   hidden in both, so the canvas is clipped to the hero and cannot escape.
   pointer-events:none guarantees the layer never swallows a click meant for
   the search box, the buttons or the stats; the parallax listens on
   `document`, so nothing is lost by it.
   ========================================================================== */
.hero__webgl { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__webgl canvas { width: 100% !important; height: 100% !important; display: block; }
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, var(--bg-0) 95%);
}
/* Content sits above both layers so the copy stays legible. */
.hero > .hero__inner,
.hero > .container.hero__inner { position: relative; z-index: 2; }

/* ==========================================================================
   Footer actions: language switch + WhatsApp, side by side.
   Icon-first in source with direction:ltr on the button keeps the icon on the
   visual left in both languages, matching the contact strip; the label gets
   RTL back so Arabic reads correctly.
   ========================================================================== */
.footer-actions {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.footer-actions__btn {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.footer-actions__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
html[dir="rtl"] .footer-actions__btn > span { direction: rtl; unicode-bidi: isolate; }
.footer-actions__lang { background: var(--surface-2); color: var(--text); }
.footer-actions__lang:hover,
.footer-actions__lang:focus-visible { border-color: var(--accent); color: var(--accent); }
/* Same accessible green the shared sheet already uses for .btn-wa — the
   platform green (#22c55e) only reaches 2.27:1 against white. */
.footer-actions__wa { background: #15803d; border-color: #15803d; color: #fff; }
.footer-actions__wa:hover,
.footer-actions__wa:focus-visible { background: #166534; border-color: #166534; color: #fff; }
.footer-actions__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .footer-actions { flex-direction: column; align-items: stretch; }
  .footer-actions__btn { width: 100%; }
}

/* Quiet pointer to the main company site, above the copyright row. */
.footer-mainsite {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.footer-mainsite a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-mainsite a:hover { color: var(--accent-2); }
.footer-mainsite a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   Arabic index.html hero: search box + stat row.
   The Arabic page ships the markup for both but none of the CSS — no
   `.hero__search` rule and no `.stat` rule at all — so the search rendered as
   a raw browser <input> and each stat collapsed onto one line with its label
   glued to its value ("24/7دعم متواصل"). Present in the committed file too,
   so this is a restoration, not a redesign: the declarations below are the
   English page's own hero rules, re-pointed at the Arabic markup
   (`.stat > b + small` instead of `.hero__stats b`).
   Scoped to dir="rtl" so the English page keeps using its own stylesheet.
   ========================================================================== */
html[dir="rtl"] .hero__search {
  max-width: 540px;
  margin: 0 auto 16px;
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
html[dir="rtl"] .hero__search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 6px 18px;
}
html[dir="rtl"] .hero__search input::placeholder { color: var(--text-dim); }
/* Same accessible pairing the shared sheet already forces on the English
   button (#d4a574 on #071016) instead of the 2.27:1 green. */
html[dir="rtl"] .hero__search button {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #071016;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
html[dir="rtl"] .hero__stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
html[dir="rtl"] .hero__stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
html[dir="rtl"] .hero__stats .stat b {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}
html[dir="rtl"] .hero__stats .stat small { font-size: 13px; }

/* ==========================================================================
   EN-specific hero/title clamping (font-size that previously caused overflow)
   ========================================================================== */
@media (max-width: 480px) {
  .hero__title,
  .h-display {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }
  .hero__search { flex-wrap: wrap; padding: 6px; }
  .hero__search input { width: 100%; padding: 8px 14px; }
  .hero__search button { width: 100%; justify-content: center; }
  .hero__search button svg { width: 16px; height: 16px; flex-shrink: 0; }
  .hero__search input + button svg { width: 16px; height: 16px; }
  .hero__stats { gap: 16px; }
  .hero__stats b { font-size: 16px !important; }
}

/* ==========================================================================
   Hero price block on product pages (Arabic):
   The "يبدأ من X ر.س" big block was overflowing because of 64px display font.
   ========================================================================== */
@media (max-width: 600px) {
  .hero__price {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
  /* If a product page uses an inline 64px price text, clamp it. */
  div[style*="font-size:64px"],
  div[style*="font-size: 64px"] {
    font-size: clamp(28px, 9vw, 48px) !important;
  }
  div[style*="font-size:48px"] {
    font-size: clamp(28px, 9vw, 40px) !important;
  }
}

@media (max-width: 768px) {
  .site-contact-strip,
  .contact-directory { grid-template-columns: 1fr; }

  /* Product/detail content must form one vertical reading sequence.
     Both naming schemes are listed on purpose: the Arabic templates emit the
     BEM form (.caps__grid) and the English ones the hyphen form (.caps-grid),
     so a rule written for only one of them leaves the other two-up. Every
     selector below is present in the shipped HTML — nothing speculative. */
  .plans__grid,
  .related__grid,
  .caps__grid,
  .caps-grid,
  .related-grid,
  .how-wrap,
  .preview-wrap,
  .pricing-grid,
  .ft-grid,
  .footer__grid,
  .bots-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .plans__grid > *, .related__grid > *, .caps__grid > *,
  .caps-grid > *, .related-grid > *, .how-wrap > *, .preview-wrap > *,
  .pricing-grid > *, .ft-grid > *, .bots-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   Product hero: the chat preview and the price card. This used to be an inline
   `grid-template-columns:1.2fr 1fr`, which no media query could override, so
   both cards stayed side by side down to 320px at ~113px each.
   ========================================================================== */
.product-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .product-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .product-hero-grid > * { width: 100%; max-width: 100%; min-width: 0; }
}

/* A card that spans two columns keeps spanning two once the grid is collapsed
   to one, and CSS Grid answers by creating an implicit second column. */
@media (max-width: 768px) {
  .bots-grid > *,
  .plans__grid > *,
  .caps__grid > *,
  .related__grid > *,
  .caps-grid > *,
  .related-grid > *,
  .how-wrap > *,
  .preview-wrap > *,
  .pricing-grid > *,
  .ft-grid > * { grid-column: auto !important; grid-row: auto !important; }
}

/* ==========================================================================
   Stats / hero stats wrap so the value never overflows.
   ========================================================================== */
@media (max-width: 480px) {
  /* No grid-template-columns here on purpose: the page stylesheets already
     collapse .stats-bar__grid to one column at <=640px, and re-declaring two
     columns here put the stat tiles back side by side at 320-375. */
  .stats-bar__value { font-size: 32px !important; }
  .hero__stats b { font-size: 16px !important; }
  .filter-chips { flex-wrap: wrap; }
}

/* ==========================================================================
   Tools grid (3 cards) — fix the case where card content pushes the grid wider
   than the viewport because the cards use flex:1 + inline padding.
   ========================================================================== */
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   EN product page: plan card width was 388-411px on a 320 viewport.
   The card is `display:flex; flex-direction:column;` inside a `display:grid;`
   so its width should follow the grid. We force 100%.
   Scoped to the mobile range on purpose: an unconditional `width:100%` on a
   card also lands on the desktop layout, and the desktop grid already sizes
   its tracks there.
   ========================================================================== */
@media (max-width: 768px) {
  .plan,
  article.plan {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .plans__grid { width: 100%; }
  .plans__grid > * { width: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
  .plan__price,
  .plan__price[style*="font-size"] { font-size: 36px !important; }
  .plan__name { font-size: 20px !important; }
}

/* ==========================================================================
   EN ROI calculator form / results card was 370px wide.
   ========================================================================== */
@media (max-width: 768px) {
  .calc-form,
  .roi-inputs,
  .roi-outputs,
  .results {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   404 page: the giant "404" code block (clamp 96–160px) was 496px wide.
   Clamp it tighter on small viewports.
   ========================================================================== */
@media (max-width: 480px) {
  .code {
    font-size: clamp(64px, 22vw, 120px) !important;
    letter-spacing: -0.02em !important;
  }
  .container, main.container { padding-inline: 16px; }
}

/* ==========================================================================
   EN bundles: featured card was too wide. Force it to wrap.
   ========================================================================== */
.bundles-grid, .builder { width: 100%; max-width: 100%; }
@media (max-width: 600px) {
  .builder { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   EN free-tools: nav was overflowing on 320-375 viewports.
   ========================================================================== */
@media (max-width: 768px) {
  .header__inner .nav,
  .header__inner .nav-search,
  .header__inner .header__navlink,
  .header__inner .header__cta,
  .header__inner .lang-switch[style*="display:none"] { display: none !important; }
}

/* ==========================================================================
   Compare table: keep horizontal-scroll INSIDE its own wrapper.
   ========================================================================== */
.compare-table-wrap { -webkit-overflow-scrolling: touch; }
.compare-table { table-layout: auto; }

/* ==========================================================================
   Header logo: ensure consistent size and prevent layout push.
   ========================================================================== */
.brand__logo { max-width: 100%; }

/* ==========================================================================
   Footer: keep it in 1 column on small mobile.
   ========================================================================== */
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer__bottom { flex-direction: column !important; text-align: center !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .cta__panel { padding: 32px 16px !important; }
  .section { padding: 48px 0 !important; }
  .hero { padding-top: 96px !important; }
  .related__grid { grid-template-columns: 1fr !important; }
  .caps__grid { grid-template-columns: 1fr !important; }
  .cap--feat { grid-column: auto !important; grid-row: auto !important; }
}

/* ==========================================================================
   Touch targets: enforce minimum 44x44 for important interactive items.
   ========================================================================== */
.mobile-drawer > a,
.menu-toggle,
.lang-switch,
.header__cta,
.btn,
.bot-card__btn,
.plan__cta,
.btn-wa,
.cta__panel .btn-wa,
.contact-list a,
.footer__contact a {
  min-height: 44px;
}
.btn, .bot-card__btn, .plan__cta, .btn-wa { padding-top: 12px; padding-bottom: 12px; }

/* WCAG AA: the original WhatsApp green (#22c55e) only reached 2.27:1
   against white text. Keep the platform identity with an accessible shade. */
.btn--wa,
.btn-wa {
  background-color: #15803d !important;
  color: #fff !important;
}
.btn--wa:hover,
.btn--wa:focus-visible,
.btn-wa:hover,
.btn-wa:focus-visible { background-color: #166534 !important; color: #fff !important; }

/* Explicit interactive-state colors where legacy page rules inherited a
   translucent foreground from their dark card/container. */
html[lang="en"] .hero__search > button {
  background: #d4a574 !important;
  color: #071016 !important;
  opacity: 1 !important;
}
.btn--fb { background-color: #0b5fcc !important; color: #fff !important; }
.btn--fb:hover,
.btn--fb:focus-visible { background-color: #094fa8 !important; color: #fff !important; }

/* ==========================================================================
   EN: promo bar sometimes is too wide for mobile, wrap gracefully.
   ========================================================================== */
/* The dismiss button is `position:absolute; left:16px`, so the padding that
   keeps the promo text clear of it belongs on the LEFT. The page rule and an
   earlier revision of this file both reserved it on the right, so under 480px
   the button sat on top of "Exclusive Offer:". 16 + 24 + 8 = 48. */
@media (max-width: 768px) {
  .promo-bar { padding-left: 48px !important; padding-right: 12px !important; }
}
@media (max-width: 480px) {
  .promo-bar { font-size: 12px; padding-block: 8px !important; gap: 6px; }
  .promo-bar__text { font-size: 12px; }
  .promo-bar__text strong { font-size: 13px; }
}
/* The offer carries no end date, so there is no countdown element and no rule
   for one. The dismiss-button padding above still applies. */