/**
 * Pricing page overlay CSS — item-222
 * Loaded only on the Pricing page canvas article (Itemid 222).
 * Design ref: xBXp7 (desktop 1440), IjC8B (dark), BHyDq (mobile 390)
 * All fixes are OVERLAY-ONLY — no shared scss recompile.
 *
 * SESSION 3 SPACING PASS:
 *   Shared scss changed --voy-sec-pad 84→88px and added 64px for .acm-cta.
 *   This overrides prior pricing.css rules that matched the .pen.
 *   All section PT/PB values below are per exact .pen measurement:
 *     Masthead:    PT 90 / PB 70  (.pen t6xA0k/jqR2m)
 *     Pric Tiers:  PT 20 / PB 80  (.pen V1DjzK/K5Yn92)
 *     Comparison:  PT 80 / PB 80  (.pen Ykcf1/UL1rR) — already correct
 *     FAQ:         PT 80 / PB 80  (.pen fVRTw/xmlST)  — was 88 from base
 *     Testimonials:PT 80 / PB 80  (.pen C092Az/OV8nv) — was 88 from base
 *     CTA Band:    PT 80 / PB 80  (.pen yOSTZ/CkarY)  — was 64 from scss
 *
 *   SESSION 4 (RE-REVIEW) ADDITIONAL FIXES:
 *   D1  Card padding 32px→28px (ACM css)
 *   D2  Card name 22px→20px (ACM css)
 *   D4  Features list gap 12→11px (ACM css)
 *   D5  Feat row gap 10→9px (ACM css)
 *   D6  Badge letter-spacing .6→1px (ACM css)
 *   D7  Badge padding 5/14→6/16px (ACM css)
 *   D8  Masthead eyebrow 12px/ls1 → 13px/ls2 (pricing.css)
 *   D9  CTA eyebrow 12px/ls1 → 13px/ls2 (pricing.css)
 *   D10 Explorer/Atlas btn-secondary: white bg, dark text, #E5DCD0 border (pricing.css)
 *   D11 CTA "Talk to us" secondary: white/50% border ghost (pricing.css)
 *   D12-D15 Mobile section inline padding 0→20px (pricing.css)
 *   D16 Mobile FAQ head title 38→28px (pricing.css)
 *   D17 Mobile FAQ head→list gap 28→20px (pricing.css)
 *   D18 Mobile card gap 24→16px (pricing.css)
 */

/* ─── Masthead eyebrow: primary #C2562F, 13px, ls 2px (masthead style) ─────── */
/* Masthead eyebrows = 13px/ls2 (vs section eyebrows 12px/ls1).
   .pen XVcEZ fontSize:13 letterSpacing:2 */
body.item-222 .acm-page-masthead .voy-eyebrow,
body.item-222 .acm-masthead-eyebrow--terracotta {
  color: var(--voy-primary, #C2562F);
  font-size: 13px !important;
  letter-spacing: 2px !important;
}

/* ─── Pricing tiers masthead: padding top/bottom per .pen (90pt/70pt) ────── */
body.item-222 .acm-page-masthead {
  padding-top: 90px;
  padding-bottom: 70px;
}

/* ─── Pricing Tiers section: PT 20 / PB 80 (.pen V1DjzK — no section head) ─ */
/* Session 3 scss base is 88px; override here for this section. */
body.item-222 .acm-pricing.voy-section {
  padding-top: 20px !important;
  padding-bottom: 80px !important;
}

/* ─── FAQ section: PT 80 / PB 80 (.pen fVRTw) — base scss applies 88px ─────  */
body.item-222 .acm-accordion {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ─── Testimonials section: PT 80 / PB 80 (.pen C092Az) — base applies 88px ─ */
body.item-222 .acm-testimonials {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ─── CTA Band section: PT 80 / PB 80 (.pen yOSTZ) — scss applies 64px ─────  */
body.item-222 .acm-cta.style-2.voy-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ─── Inner head→content gap: 28px (.pen inner gap) ─────────────────────────  */
/* Currently: testimonials 44px, FAQ 40px, comparison 32px. All → 28px.       */
/* Source is .voy-section__head { margin-bottom } set by ACM CSS.              */
body.item-222 .acm-testimonials .voy-section__head {
  margin-bottom: 28px !important;
}
body.item-222 .acm-accordion .voy-section__head {
  margin-bottom: 28px !important;
}
body.item-222 .acm-comparison-table .voy-section__head {
  margin-bottom: 28px !important;
}

/* ─── Inner content max-width caps ──────────────────────────────────────────  */
/* .pen: comparison inner 1140px, testimonials inner 1140px.                   */
/* The canvas-page :has strip removes .container max-width; these inner        */
/* elements need their own cap. */

/* Comparison table: table wrapper → 1140px, centered */
body.item-222 .acm-comparison-table .acm-cmp-wrap {
  max-width: 1140px !important;
  margin-inline: auto !important;
}

/* Testimonials grid: → 1140px (matches .pen inner K27N0w width=1140) */
body.item-222 .acm-testimonials .acm-testimonials-grid {
  max-width: 1140px !important;
  margin-inline: auto !important;
}

/* ─── Tier cards ──────────────────────────────────────────────────────────── */

/* Amount: Playfair 40px (design Z3bwrk: fontSize:40) — ACM css has 38px */
body.item-222 .acm-plan-amount {
  font-size: 40px;
}

/* Voyager (featured) card: 2px solid primary border — must beat .voy-card (0,1,0) */
body.item-222 .acm-plan--hl {
  border: 2px solid var(--voy-primary, #C2562F) !important;
  box-shadow: 0 4px 20px rgba(194, 86, 47, 0.15);
}

/* D10: Explorer/Atlas secondary plan buttons — white fill, dark text, #E5DCD0 border
   .pen ape1g (Button/Secondary): fill:#FFFFFF, color:#2B2420, stroke:#E5DCD0, sw:1
   BS5 btn-secondary defaults to teal via --bs-secondary. Override for plan cards only. */
body.item-222 .acm-plan:not(.acm-plan--hl) .btn.acm-plan-cta {
  background-color: #FFFFFF !important;
  color: var(--voy-text, #2B2420) !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
}
body.item-222 .acm-plan:not(.acm-plan--hl) .btn.acm-plan-cta:hover {
  background-color: var(--voy-elevated, #F2EBE1) !important;
  border-color: var(--voy-border, #E5DCD0) !important;
}
/* Dark mode: card surface is #211B16, secondary btn should be slightly lighter */
.t4-dark body.item-222 .acm-plan:not(.acm-plan--hl) .btn.acm-plan-cta {
  background-color: var(--voy-elevated, #1C1712) !important;
  color: var(--voy-text, #E8DFD4) !important;
  border: 1px solid var(--voy-border, #352C24) !important;
}
.t4-dark body.item-222 .acm-plan:not(.acm-plan--hl) .btn.acm-plan-cta:hover {
  background-color: var(--voy-surface, #211B16) !important;
}

/* Feature list check icon: 16px (design W8MWnw: 16×16) */
body.item-222 .acm-plan-check svg {
  width: 16px;
  height: 16px;
}

/* Desktop: pricing tiers grid — 3 equal columns, capped 1140px */
@media (min-width: 992px) {
  body.item-222 .acm-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin-inline: auto;
  }
}

/* ─── FAQ section (acm-accordion on pricing): override to match .pen spec ─── */
/* .pen: "QUESTIONS" eyebrow teal, "Pricing, answered" Playfair 38px,
   items: F2EBE1 bg, r14, p24, plus icon (#C2562F), Playfair 19/700 Q, Inter 15 A */

/* FAQ heading size: 38px (acm-accordion default h2 may differ) */
body.item-222 .acm-accordion h2,
body.item-222 .acm-accordion .voy-section__head h2 {
  font-size: 38px;
}

/* FAQ eyebrow: teal — already default .voy-eyebrow but ensure it's teal */
body.item-222 .acm-accordion .voy-eyebrow {
  color: var(--voy-secondary, #1F6F6B);
}

/* FAQ items: elevated bg #F2EBE1, r14, p24, border #E5DCD0 */
body.item-222 .acm-accordion .accordion-item {
  background: var(--voy-elevated, #F2EBE1) !important;
  border-radius: 14px !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  margin-bottom: 12px;
  overflow: hidden;
}
/* The <h3 class="accordion-header"> inherits the base heading top-margin (~16px),
   which pushes the question down and leaves dead space at the top of every card
   ("dư spacing ở phía trên"). Zero it so the question sits at the 24px padding. */
body.item-222 .acm-accordion .accordion-header { margin: 0 !important; }

/* FAQ accordion button: Playfair 19/700, text color heading, elevated bg */
body.item-222 .acm-accordion .accordion-button {
  background: var(--voy-elevated, #F2EBE1) !important;
  color: var(--voy-heading, #1A1512) !important;
  font-family: var(--voy-font-head, 'Playfair Display', Georgia, serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  padding: 24px !important;
  box-shadow: none !important;
}

/* Active (expanded) button stays elevated bg. .pen card internals (fVRTw): pad-top 24,
   question→answer text gap ~20px (button pad-bottom ~12), answer→card-bottom 24. */
body.item-222 .acm-accordion .accordion-button:not(.collapsed) {
  background: var(--voy-elevated, #F2EBE1) !important;
  color: var(--voy-heading, #1A1512) !important;
  padding-bottom: 12px !important;
}

/* +/- toggle indicator: "+" (muted) when collapsed, "-" (primary) when open.
   A rotated "+" still reads as "+", so the glyph must actually swap. */
body.item-222 .acm-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  transform: none !important;
  flex-shrink: 0;
  transition: none;
}
body.item-222 .acm-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2562F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

/* FAQ accordion body: Inter 15, muted text, p 0 24 24 24 */
body.item-222 .acm-accordion .accordion-body {
  color: var(--voy-muted, #8A7E72) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 0 24px 24px !important;
  background: var(--voy-elevated, #F2EBE1);
}

/* ─── Comparison table band: elevated bg #F2EBE1 ─────────────────────────── */
/* Already correct via voy-section--elevated class */

/* ─── Testimonials on pricing: heading 38px (design C092Az title 38px) ───── */
body.item-222 .acm-testimonials h2 {
  font-size: 38px;
}

/* Testimonials: 2-column grid (design: 2 cards only on pricing) */
@media (min-width: 768px) {
  body.item-222 .acm-testimonials .acm-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── CTA Band: teal bg, eyebrow 13px/ls2/white70% ──────────────────────── */
/* D9: CTA eyebrow 13px / ls2 (.pen tK2iK fontSize:13 letterSpacing:2)
   The .acm-cta2-eyebrow class sets rgba(255,255,255,0.7) in style.css
   but .voy-eyebrow base rule (teal) can beat it on equal specificity.
   Out-specify with item-222 + section context (0,3,0) */
body.item-222 .acm-cta.style-2 .voy-eyebrow,
body.item-222 .acm-cta2-eyebrow {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
}

/* D11: CTA "Talk to us" ghost button — has class acm-cta2-btn-ghost (not btn-secondary).
   .pen r45zS/D9VhC: secondary ghost → bg transparent, color white, border rgba(255,255,255,0.5)
   Live: no border, color teal-tinted (Bootstrap default for transparent btn). */
body.item-222 .acm-cta.style-2 .acm-cta2-btn-ghost {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
body.item-222 .acm-cta.style-2 .acm-cta2-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ─── Mobile: hide comparison table (not in mobile .pen frame BHyDq) ──────── */
/* Tablet (768–991) fits the full table (inner ~948 in 950 wrap) — keep it there to
   avoid a blank content gap; only hide at true mobile ≤767 per the mobile .pen frame. */
@media (max-width: 767.98px) {
  body.item-222 .acm-comparison-table { display: none !important; }
}

/* ─── Mobile overrides ≤767.98px ───────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* D12: Mobile masthead inline padding = 20px (.pen V5VP58 padding:[48,20,32,20]) */
  body.item-222 .acm-page-masthead {
    padding-top: 48px;
    padding-bottom: 32px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.item-222 .acm-page-masthead h1,
  body.item-222 .acm-page-masthead h2 {
    font-size: 30px;
  }
  body.item-222 .acm-page-masthead .acm-masthead-sub {
    font-size: 15px;
  }
  /* Mobile masthead eyebrow: 12px/ls2 (.pen BHyDq pV7Ks fontSize:12, letterSpacing:2) */
  body.item-222 .acm-page-masthead .voy-eyebrow {
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  /* D13: Mobile tiers: PT 8 / PB 48 + inline 20px (.pen BHyDq m9ysB padding:[8,20,48,20]) */
  body.item-222 .acm-pricing.voy-section {
    padding-top: 8px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* D18: Mobile card grid gap = 16px (.pen m9ysB gap:16) — desktop is 24px */
  body.item-222 .acm-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: 16px !important;
  }

  /* D14: Mobile FAQ: PT/PB 48px + inline 20px (.pen m6ANlJ padding:[48,20]) */
  body.item-222 .acm-accordion {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* D16: Mobile FAQ head title: 28px (.pen R4sMfX fontSize:28) — desktop is 38px */
  body.item-222 .acm-accordion .voy-section__head h2,
  body.item-222 .acm-accordion h2 {
    font-size: 28px !important;
  }

  /* D17: Mobile FAQ head→list gap: 20px (.pen m6ANlJ gap:20) — was 28px */
  body.item-222 .acm-accordion .voy-section__head {
    margin-bottom: 20px !important;
  }

  /* Mobile FAQ: BHyDq shows FAQ section bg #F2EBE1, items #FFFFFF */
  body.item-222 .acm-accordion .accordion-item {
    background: var(--voy-surface, #FFFFFF) !important;
  }
  body.item-222 .acm-accordion .accordion-button {
    background: var(--voy-surface, #FFFFFF) !important;
    font-size: 17px !important;
    padding: 20px !important;
  }
  body.item-222 .acm-accordion .accordion-button:not(.collapsed) {
    background: var(--voy-surface, #FFFFFF) !important;
  }
  body.item-222 .acm-accordion .accordion-body {
    background: var(--voy-surface, #FFFFFF);
    padding: 0 20px 20px !important;
  }

  /* D15: Mobile CTA: PT/PB 56px + inline 20px (.pen g6pZu9 padding:[56,20]) */
  body.item-222 .acm-cta.style-2.voy-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.item-222 .acm-cta.style-2 .acm-cta2-actions {
    flex-direction: column;
    width: 100%;
  }
  body.item-222 .acm-cta.style-2 .acm-cta2-title {
    font-size: 28px;
  }

  /* Mobile testimonials: hidden (not in BHyDq mobile frame) */
  body.item-222 .acm-testimonials { display: none !important; }
}