/* ===================================================================
   Beita Donation Portal — stage-2 "heritage" component layer (2026-10).
   Loaded on every portal page right after tokens.css (which now holds the
   heritage palette + type). Shared rules for the look that individual
   page sheets would otherwise each repeat: parchment ground, serif page
   titles, a parchment site header, flat buttons, the quick-donate pop-up.
   Page-specific overrides stay in each page's own sheet.
   =================================================================== */

/* heritage.css loads right after tokens.css — i.e. BEFORE base.css /
   components.css / shell.css — so every rule that must beat one of those
   carries `:root` for one extra level of specificity. */
:root body { background: var(--gray-50); }

/* English: base.css pins `html { direction: rtl }`, which beat the
   html.dir = 'ltr' the i18n script sets — every English page rendered
   right-to-left with its punctuation on the wrong end (".Policy"). The
   attribute selector outranks base.css wherever it loads. */
html[dir="ltr"] { direction: ltr; }

/* Page titles in the display face (the style tile: Frank Ruhl for names
   and headings, Heebo for everything else). A page's own class rules
   still win where they set something else on purpose. */
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: normal; }

/* Buttons sit still: no hover lift anywhere. */
:root .btn-primary:hover:not(:disabled) { transform: none; }

/* Site header (portal/js/shell.js): parchment, wordmark without the dot. */
:root .bn-topbar { background: var(--gray-50); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root .bn-brand { font-weight: 700; }
:root .bn-brand-dot { display: none; }
:root .bn-cta { box-shadow: none; border-radius: 10px; }
:root .bn-mobile-drawer { background: var(--gray-50); }

/* Loading shimmer in parchment, not slate. */
:root .fx-skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
}

/* "תרומה לפי אירוע" / related-pages cards (components.css). */
:root .bn-related-card { border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: none; }
:root .bn-related-card:hover, :root .bn-related-card:focus-visible { transform: none; box-shadow: none; border-color: var(--gray-300); }
:root .bn-related-card .k { font-size: 14px; font-weight: 500; color: var(--gold-700); text-transform: none; letter-spacing: normal; }
:root .bn-related-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
:root .bn-related-card p { font-size: 15px; color: var(--gray-700); }
:root .bn-related-sub { font-size: 17px; }

/* ── Quick-donate pop-up (portal/js/donate-modal.js) ──────────────
   Its styles are injected at runtime with literal colours, AFTER this
   sheet, so every rule here carries `:root` for one extra level of
   specificity. */
:root .bdm-overlay { background: rgba(27, 34, 48, 0.55); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root .bdm-sheet { background: var(--gray-50); border-radius: 16px; box-shadow: 0 24px 64px rgba(27, 34, 48, 0.2); }
:root .bdm-header { border-bottom-color: var(--gray-200); }
:root .bdm-close { color: var(--gray-500); }
:root .bdm-close:hover { background: var(--gray-100); color: var(--gray-900); }
:root .bdm-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--gray-900); letter-spacing: normal; }
:root .bdm-title-ic:not([style]) { display: none; }   /* the generic heart; the Bit logo stays */
:root .bdm-freq-row { border-color: var(--gray-200); border-radius: 10px; background: var(--white); }
:root .bdm-freq-row:hover { border-color: var(--gray-300); }
:root .bdm-freq-row.active { border-color: var(--blue-600); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-600); }
:root .bdm-freq-radio { border-color: var(--gray-300); }
:root .bdm-freq-row.active .bdm-freq-radio { border-color: var(--blue-600); }
:root .bdm-freq-row.active .bdm-freq-radio::after { background: var(--blue-600); }
:root .bdm-freq-label { font-size: 16px; color: var(--gray-900); }
:root .bdm-freq-hint { font-size: 14px; color: var(--gray-500); }
:root .bdm-amount-label { font-size: 15px; font-weight: 500; color: var(--error); }
:root .bdm-amount-label.ok { color: var(--gray-700); }
:root .bdm-amount-row { border-width: 1.5px; border-color: var(--error); border-radius: 10px; background: var(--white); padding: 10px 14px; }
:root .bdm-amount-row.ok { border-color: var(--blue-600); }
:root .bdm-amount-row.ok:focus-within { border-color: var(--blue-700); }
:root .bdm-currency { background: var(--gray-100); color: var(--gray-700); font-size: 15px; font-weight: 500; }
:root .bdm-amount-input { color: var(--gray-900); font-size: 24px; font-weight: 700; }
:root .bdm-amount-input::placeholder { color: var(--gray-300); }
:root .bdm-amount-hint { font-size: 14px; color: var(--error); }
:root .bdm-amount-hint.ok { color: var(--gray-500); }
:root .bdm-chips { gap: 8px; }
:root .bdm-chip { padding: 8px 14px; background: var(--white); border-color: var(--gray-200); color: var(--gray-900); font-size: 15px; }
:root .bdm-chip:hover { background: var(--white); border-color: var(--gray-300); }
:root .bdm-chip.active { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-600); }
:root .bdm-ded-toggle { font-size: 15px; font-weight: 500; color: var(--gray-700); }
:root .bdm-ded-toggle input { accent-color: var(--blue-600); }
:root .bdm-ded-area textarea { border-color: var(--gray-200); font-size: 16px; background: var(--white); }
:root .bdm-ded-area textarea:focus { border-color: var(--blue-600); }
:root .bdm-footer { background: var(--white); border-top-color: var(--gray-200); }
:root .bdm-total-label { font-size: 15px; font-weight: 500; color: var(--gray-700); }
:root .bdm-total-amt { font-weight: 700; color: var(--gray-900); letter-spacing: normal; }
:root .bdm-cta { background: var(--blue-600); border-radius: 10px; box-shadow: none; padding: 15px; font-size: 17px; font-weight: 700; }
:root .bdm-cta:hover { background: var(--blue-700); transform: none; }
:root .bdm-cta:not(.bit) > svg { display: none; }
:root .bdm-cta:disabled { background: var(--gray-300); }
:root .bdm-cta.bit { background: var(--white); color: var(--gray-900); border: 1.5px solid var(--gray-900); box-shadow: none; }
:root .bdm-cta.bit:hover { background: var(--gray-50); }
:root .bdm-method-note { font-size: 13px; color: var(--gray-500); }