/* =========================================================================
   SparrowiMailer — brand-v15.css
   v15 patches:
     · FAQ accordion click-to-open (high-specificity override)
     · Pricing capacity rows (monthly/yearly capacity block)
     · Misc support page form fixes
   Loaded AFTER brand-v14.css. Keep order in includes/header.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   FAQ ACCORDION — force button-driven .is-open pattern
   Earlier rules in sparrow.css use <details>[open] selectors that interfere
   with our .faq-item / .faq-item__body markup. Hard-override here.
   ------------------------------------------------------------------------- */
.faq-item                                { background: #fff; border: 1px solid #ece6f7; border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.faq-item:hover                          { border-color: #d9ccf3; box-shadow: 0 6px 20px rgba(124,58,237,.07); }
.faq-item__btn                           { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: transparent; border: 0; text-align: left; font-size: 15.5px; font-weight: 600; color: #1a0b2e; cursor: pointer; line-height: 1.45; }
.faq-item__btn:focus-visible             { outline: 2px solid #7c3aed; outline-offset: -2px; border-radius: 14px; }
.faq-item__btn::after                    { content: "\f282"; font-family: "bootstrap-icons"; font-weight: 400; font-size: 18px; color: #7c3aed; transition: transform .25s ease; flex-shrink: 0; }
.faq-item.is-open .faq-item__btn::after  { transform: rotate(180deg); }

/* Body — hidden by default, shown when parent has .is-open. !important to beat sparrow.css */
.faq-item .faq-item__body,
.faq-item__body                          { display: none !important; padding: 0 22px 20px; color: #4a4060; line-height: 1.7; font-size: 14.5px; }
.faq-item.is-open .faq-item__body,
.faq-item.is-open > .faq-item__body      { display: block !important; }

/* Neutralise any <details>[open] rules that bled in from sparrow.css */
.faq-item[open] .faq-item__body          { display: block !important; }
.faq-item:not(.is-open):not([open]) .faq-item__body { display: none !important; }


/* -------------------------------------------------------------------------
   PRICING — per-cycle capacity block
   pricing.php now emits a .price-card__capacity block with three rows
   (emails / validator / senders) plus a cadence note. JS swaps the values
   when the user toggles Monthly/Yearly.
   ------------------------------------------------------------------------- */
.price-card__capacity                    { margin: 18px 0; padding: 12px 0; border-top: 1px dashed #e9e3fb; border-bottom: 1px dashed #e9e3fb; }
.capacity-row                            { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.capacity-row + .capacity-row            { border-top: 1px dotted #f1ecfb; }
.capacity-row__label                     { display: inline-flex; align-items: center; gap: 8px; color: #6b6680; font-weight: 500; }
.capacity-row__label i                   { color: #7c3aed; font-size: 15px; }
.capacity-row__value                     { font-weight: 700; color: #0f0a1f; font-variant-numeric: tabular-nums; text-align: right; }
.capacity-row--note                      { padding-top: 4px; }
.capacity-row--note .capacity-row__value { font-weight: 500; color: #6b6680; font-size: 12.5px; }

/* Popular (purple) card variant — invert palette */
.price-card--popular .price-card__capacity                  { border-color: rgba(255,255,255,.18); }
.price-card--popular .capacity-row + .capacity-row          { border-top-color: rgba(255,255,255,.10); }
.price-card--popular .capacity-row__label,
.price-card--popular .capacity-row__label i                 { color: rgba(255,255,255,.78); }
.price-card--popular .capacity-row__value                   { color: #fff; }
.price-card--popular .capacity-row--note .capacity-row__value { color: rgba(255,255,255,.72); }


/* -------------------------------------------------------------------------
   SUPPORT page — form gets a touch more breathing room
   ------------------------------------------------------------------------- */
.card-soft form .form-group              { margin-bottom: 14px; }
.card-soft form .btn-block               { margin-top: 6px; }