/* =================================================================
   RTL STYLESHEET  —  Hebrew (he) language support
   =================================================================
   Loaded conditionally in Top.IG.Master ONLY when lang=he.
   Layers on top of givingtech.css without modifying it.
   Uses [dir="rtl"] selectors for specificity.
   ================================================================= */

/* ── 1. GLOBAL OVERRIDES ── */

[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Utility: force LTR on any element */
.ltr-always {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed;
}

/* Utility: isolate embedded LTR runs (URLs, emails, code) */
.ltr-isolate {
  unicode-bidi: isolate;
  direction: ltr;
}


/* ── 2. NAVBAR ── */
/* In RTL context, flex-direction:row already flows right-to-left.
   No need for row-reverse — that would flip it back to LTR order.
   Just ensure the default row direction is preserved. */

[dir="rtl"] .navbar {
  flex-direction: row;
}

[dir="rtl"] .nav-links {
  flex-direction: row;
}

[dir="rtl"] .nav-ctas {
  flex-direction: row;
}

/* Sign-in dropdown: anchor to left in RTL */
[dir="rtl"] .signin-dd {
  right: auto;
  left: 0;
}
[dir="rtl"] .signin-dd::before {
  right: auto;
  left: 20px;
}
[dir="rtl"] .signin-dd a {
  flex-direction: row;
}

/* Language toggle in RTL just needs its margin adjusted */
[dir="rtl"] .nav-lang-toggle {
  margin-left: 0;
}


/* ── 2b. MEGA-DROPDOWN ── */

[dir="rtl"] .mega-dropdown {
  text-align: right;
}

[dir="rtl"] .mega-item {
  flex-direction: row;
}

[dir="rtl"] .mega-item-icon {
  margin-right: 0;
  margin-left: 12px;
}

[dir="rtl"] .nav-mobile-mega a {
  text-align: right;
}

[dir="rtl"] .nav-mobile-mega-toggle {
  text-align: right;
}

[dir="rtl"] .nav-mobile-mega-toggle::after {
  margin-left: 0;
  margin-right: 6px;
}


/* ── 3. PRODUCT BAR ── */

[dir="rtl"] .product-bar-links {
  flex-direction: row;
}

[dir="rtl"] .product-bar-links a {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* Mobile product bar: scroll from right */
@media (max-width: 768px) {
  [dir="rtl"] .product-bar::after {
    right: auto;
    left: 0;
    background: linear-gradient(to left, transparent, var(--mahogany-2) 80%);
  }
  [dir="rtl"] .product-bar::before {
    right: auto;
    left: 10px;
    content: '\2039';  /* ‹ instead of › */
  }
  [dir="rtl"] .product-bar-links {
    padding-right: 0;
    padding-left: 48px;
  }
}


/* ── 4. FOOTER ── */

[dir="rtl"] .footer-inner {
  direction: rtl;
}

[dir="rtl"] .footer-brand {
  text-align: right;
}

[dir="rtl"] .footer-col {
  text-align: right;
}

[dir="rtl"] .footer-bottom {
  flex-direction: row;
}

@media (max-width: 600px) {
  [dir="rtl"] .footer-bottom {
    flex-direction: column;
    align-items: flex-end;
  }
}


/* ── 5. STICKY CTA ── */

/* Desktop: centered via left:50% + translateX(-50%) — use right instead */
[dir="rtl"] .sticky-cta {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}
[dir="rtl"] .sticky-cta.visible {
  transform: translateX(50%);
}

/* Mobile: full-width, no transform */
@media (max-width: 600px) {
  [dir="rtl"] .sticky-cta,
  [dir="rtl"] .sticky-cta.visible {
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
  }
  [dir="rtl"] .sticky-cta-left {
    align-items: center;
  }
}

[dir="rtl"] .sticky-cta-left {
  text-align: right;
}

[dir="rtl"] .sticky-cta-buttons,
[dir="rtl"] .sticky-cta-btns {
  flex-direction: row;
}


/* ── 6. CTA SECTION ELLIPSES ── */

[dir="rtl"] .ce1 {
  left: auto;
  right: -80px;
}

[dir="rtl"] .ce2 {
  right: auto;
  left: -60px;
}


/* ── 7. BUTTONS ── */

/* Buttons with flex: icon/text order follows natural RTL flow */
[dir="rtl"] .btn {
  flex-direction: row;
}


/* ══════════════════════════════════════════════════════
   CROSS-CUTTING COMPONENT PATTERNS
   ══════════════════════════════════════════════════════ */

/* ── Hero Decorative Ellipses (ALL pages) ── */
/* Most pages use .he-1, .he-2, .he-3 positioned with right */
[dir="rtl"] .he-1,
[dir="rtl"] .he-2,
[dir="rtl"] .he-3 {
  right: auto !important;
}
/* Individual pages set specific right values; the RTL override
   moves them to the opposite side. Since exact values vary per page,
   we use a blanket rule plus page-specific adjustments below. */

/* ── Hero Floating Pills (12+ pages) ── */
[dir="rtl"] .hp-top {
  right: auto;
  left: -16px;
}

[dir="rtl"] .hp-bot {
  left: auto;
  right: -16px;
}

/* ── Section Labels ── */
/* .section-label::before, .ig-label::before, .lbl::before
   These use flexbox gap — in RTL the line naturally moves to the
   inline-start (right) side. No override needed. */

/* ── FAQ Sections ── */
[dir="rtl"] .faq-q {
  text-align: right;
}

[dir="rtl"] .faq-q svg {
  margin-left: 0;
  margin-right: 16px;
}

/* ── Select Dropdowns (chevron position) ── */
[dir="rtl"] select,
[dir="rtl"] .cf-field select {
  background-position: left 12px center;
  padding-right: 16px;
  padding-left: 36px;
}

/* ── Search Inputs with Icon ── */
[dir="rtl"] .hero-search-wrap input,
[dir="rtl"] .search-box-wrap input {
  padding: 0 48px 0 20px;
}

[dir="rtl"] .hero-search-icon,
[dir="rtl"] .search-box-icon {
  left: auto;
  right: 16px;
}

/* ── Border-right → border-left on list items ── */
[dir="rtl"] .solution-stat {
  border-right: none;
  border-left: 1px solid rgba(74,14,0,0.08);
}
[dir="rtl"] .solution-stat:last-child {
  border-left: none;
}

/* ── Tables ── */
[dir="rtl"] table th,
[dir="rtl"] table td {
  text-align: right;
}
[dir="rtl"] table th:first-child,
[dir="rtl"] table td:first-child {
  text-align: right;
}

/* ── Form inputs ── */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"],
[dir="rtl"] textarea {
  text-align: right;
}

/* Email, phone, URL fields should always be LTR for data entry */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}


/* ══════════════════════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES
   ══════════════════════════════════════════════════════ */

/* ── igindex.aspx ── */

[dir="rtl"] .hero-badge-1 {
  left: auto;
  right: -16px;
}

[dir="rtl"] .hero-badge-2 {
  right: auto;
  left: -16px;
}

[dir="rtl"] .adopt-step:hover {
  transform: translateX(-6px);
}

[dir="rtl"] .adopt-connector {
  padding: 0 38px 0 0;
}

[dir="rtl"] .adopt-step-num {
  right: auto;
  left: 24px;
}

[dir="rtl"] .ctable thead th:first-child,
[dir="rtl"] .ctable tbody td:first-child {
  text-align: right;
  padding-left: 0;
  padding-right: 20px;
}

/* Progress bar gradients */
[dir="rtl"] .cgrid-bar-fill {
  background: linear-gradient(270deg, var(--terracotta), var(--petal));
}


/* ── crm.aspx ── */

[dir="rtl"] .ie-1 {
  right: auto;
  left: -80px;
}

[dir="rtl"] .ie-2 {
  right: auto;
  left: -20px;
}


/* ── email-marketing.aspx ── */

[dir="rtl"] .em-subject {
  margin-left: 0;
  margin-right: 8px;
}

/* Integration diagram arrows — mirror horizontally */
[dir="rtl"] .int-arrow-fwd svg,
[dir="rtl"] .int-arrow-rev svg {
  transform: scaleX(-1);
}

[dir="rtl"] .flow-arrow-icon svg {
  transform: scaleX(-1);
}

/* "FREE" ribbon on pricing card */
[dir="rtl"] .pricing-card-main::after {
  right: auto;
  left: -28px;
  transform: rotate(-45deg);
}

[dir="rtl"] .roi-ell .re1 {
  right: auto;
  left: -80px;
}

[dir="rtl"] .roi-ell .re2 {
  right: auto;
  left: 60px;
}


/* ── donationforms.aspx ── */

[dir="rtl"] .mysite-lang-btn {
  right: auto;
  left: 14px;
}

/* Chat bubbles: flip tail direction */
[dir="rtl"] .bot-bubble {
  border-radius: 11px 11px 3px 11px;
}

[dir="rtl"] .user-bubble {
  border-radius: 11px 11px 11px 3px;
}

[dir="rtl"] .chat-lbl.r {
  text-align: left;
}

/* Cover My Fee stat bubble */
[dir="rtl"] .cf-stat-bubble {
  right: auto;
  left: -16px;
}

/* Toggle switches */
[dir="rtl"] .utog::after {
  right: auto;
  left: 3px;
}

[dir="rtl"] .utog.off::after {
  left: auto;
  right: 3px;
}

/* Installation tabs border */
[dir="rtl"] .itab {
  border-right: none;
  border-left: 1px solid rgba(74,14,0,0.08);
}
[dir="rtl"] .itab:last-child {
  border-left: none;
}

/* Fraud badge */
[dir="rtl"] .fraud-badge {
  margin-left: 0;
  margin-right: auto;
}

/* Decorative ellipses */
[dir="rtl"] .mhe1 {
  right: auto;
  left: -60px;
}
[dir="rtl"] .mhe2 {
  right: auto;
  left: 60px;
}

/* Video close button */
[dir="rtl"] .vimeo-close {
  right: auto;
  left: 0;
}

/* AI intro centered element — OK as centered */

/* Code blocks: always LTR */
[dir="rtl"] .code-block,
[dir="rtl"] .code-snippet,
[dir="rtl"] pre,
[dir="rtl"] code {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

/* URL builder */
[dir="rtl"] .url-builder {
  direction: ltr;
  text-align: left;
}

/* Typing quote */
[dir="rtl"] .t-quote::before {
  margin-right: 0;
  margin-left: 2px;
}


/* ── donors.aspx ── */

[dir="rtl"] .fc-btn {
  margin-left: 0;
  margin-right: auto;
}

/* Donation lookup select */
[dir="rtl"] .wg-select {
  background-position: left 16px center;
  padding-right: 16px;
  padding-left: 40px;
}

[dir="rtl"] .wg-result th {
  text-align: right;
}

/* Account CTA decorative ellipses */
[dir="rtl"] .account-cta::before {
  right: auto;
  left: -80px;
}

[dir="rtl"] .account-cta::after {
  left: auto;
  right: -60px;
}

/* Gift card mock decorative */
[dir="rtl"] .gift-card-mock::before {
  right: auto;
  left: -40px;
}

[dir="rtl"] .gift-card-mock::after {
  left: auto;
  right: -30px;
}

[dir="rtl"] .gcm-badge {
  right: auto;
  left: 20px;
}

/* Gift card code: always LTR */
[dir="rtl"] .gcm-code {
  direction: ltr;
  text-align: left;
}


/* ── fundme.aspx ── */

[dir="rtl"] .camp-avatar {
  margin-right: 0;
  margin-left: -6px;
}

[dir="rtl"] .hero-feat-pill-1 {
  left: auto;
  right: -16px;
}

[dir="rtl"] .hero-feat-pill-2 {
  right: auto;
  left: -16px;
}

[dir="rtl"] .hero-img-secondary {
  left: auto;
  right: 20px;
}

/* Campaign type tabs */
[dir="rtl"] .ctype-tab {
  border-right: none;
  border-left: 1px solid rgba(74,14,0,0.08);
}
[dir="rtl"] .ctype-tab:last-child {
  border-left: none;
}

[dir="rtl"] .reward-count {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .member-goal-txt {
  text-align: left;
}

/* Campaign progress bars */
[dir="rtl"] .camp-progress-fill,
[dir="rtl"] .progress-fill {
  background: linear-gradient(270deg, var(--terracotta), var(--petal));
}


/* ── grantmaking.aspx + international-grantmaking.aspx ── */

/* DAF/product bar (scrollable) */
[dir="rtl"] .daf-bar a {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.06);
}

[dir="rtl"] .daf-bar::after {
  right: auto;
  left: 0;
  background: linear-gradient(to left, transparent, var(--mahogany-2) 80%);
}

[dir="rtl"] .daf-bar::before {
  right: auto;
  left: 10px;
  content: '\2039';  /* ‹ */
}

@media (max-width: 768px) {
  [dir="rtl"] .daf-bar-inner {
    padding-right: 0;
    padding-left: 48px;
  }
}

[dir="rtl"] .grant-notification {
  right: auto;
  left: -16px;
}

[dir="rtl"] .gm-hero::before {
  right: auto;
  left: -8%;
}

[dir="rtl"] .ig-hero::before {
  left: auto;
  right: -5%;
}


/* ── international.aspx ── */

[dir="rtl"] .my501-e1 {
  left: auto;
  right: -60px;
}

[dir="rtl"] .my501-e2 {
  left: auto;
  right: 80px;
}


/* ── opportunities.aspx + stores.aspx ── */
/*
   CRITICAL: These pages use `direction: rtl` as a CSS hack to swap
   column order on .feat-row.flip. When the page itself is RTL,
   this hack flips back to LTR — breaking the layout.
   Solution: invert the direction values.
*/
[dir="rtl"] .feat-row.flip {
  direction: ltr;
}

[dir="rtl"] .feat-row.flip > * {
  direction: rtl;
}

[dir="rtl"] .opp-stage {
  border-right: none;
  border-left: 1px solid rgba(74,14,0,0.08);
}
[dir="rtl"] .opp-stage:last-child {
  border-left: none;
}

[dir="rtl"] .reminder-badge {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .crm-e1 {
  left: auto;
  right: -80px;
}

[dir="rtl"] .crm-e2 {
  left: auto;
  right: 50px;
}


/* ── payments_israel.aspx ── */

[dir="rtl"] .pay-confirm-pill {
  right: auto;
  left: -20px;
}

[dir="rtl"] .pay-flag-pill {
  left: auto;
  right: -20px;
}

[dir="rtl"] .brand-strip-label {
  padding-right: 0;
  padding-left: 24px;
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.15);
}

[dir="rtl"] .compare-table th {
  text-align: right;
}

[dir="rtl"] .fee-input-prefix {
  left: auto;
  right: 14px;
}

[dir="rtl"] .fee-rate-card.featured::before {
  right: auto;
  left: -30px;
}

[dir="rtl"] .cta-e1 {
  right: auto;
  left: -80px;
}

[dir="rtl"] .cta-e2 {
  right: auto;
  left: -30px;
}


/* ── pricing_israel.aspx ── */

[dir="rtl"] .he1,
[dir="rtl"] .he2 {
  right: auto;
}

[dir="rtl"] .he3 {
  left: auto;
  right: -70px;
}

@media (max-width: 600px) {
  [dir="rtl"] .other-amount {
    text-align: right;
  }
}


/* ── letstalk.aspx ── */

[dir="rtl"] .talk-option:hover {
  transform: translateX(-4px);
}


/* ── privacy_policy.aspx + terms_of_service.aspx ── */

[dir="rtl"] .legal-body-inner {
  grid-template-columns: 260px 1fr;
}

[dir="rtl"] .section-num {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .legal-hero::before {
  right: auto;
  left: -60px;
}

[dir="rtl"] .legal-hero::after {
  right: auto;
  left: 100px;
}

/* Legal list indentation */
[dir="rtl"] .legal-content ul,
[dir="rtl"] .legal-content ol {
  margin-left: 0;
  margin-right: 1.5em;
  padding-left: 0;
  padding-right: 1em;
}


/* ── recurring.aspx ── */

[dir="rtl"] .inf-cc-body li {
  padding-left: 0;
  padding-right: 16px;
}

[dir="rtl"] .inf-cc-body li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .code-snippet {
  margin-left: 0;
  margin-right: 4px;
}


/* ── register.aspx ── */

[dir="rtl"] .field-req {
  margin-left: 0;
  margin-right: 1px;
}

[dir="rtl"] .hero-perks {
  text-align: right;
}


/* ── stores.aspx ── */

[dir="rtl"] .ticket-type-price {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .seat-row-lbl {
  text-align: left;
  margin-right: 0;
  margin-left: 3px;
}


/* ══════════════════════════════════════════════════════
   MOBILE-SPECIFIC RTL OVERRIDES
   ══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Navbar: hamburger is visible, links hidden — row is correct in RTL */
  [dir="rtl"] .navbar {
    flex-direction: row;
  }

  /* Mobile overlay: text align right */
  [dir="rtl"] .nav-mobile-links a {
    text-align: right;
  }

  /* Mobile CTAs */
  [dir="rtl"] .nav-mobile-ctas {
    text-align: right;
  }

  /* Legal pages: sidebar stacks */
  [dir="rtl"] .legal-body-inner {
    grid-template-columns: 1fr;
  }

  /* Product bar scroll */
  [dir="rtl"] .product-bar-links {
    flex-direction: row;
  }
}

@media (max-width: 600px) {
  /* CTA buttons stack */
  [dir="rtl"] .cta-btns {
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════
   EXCEPTIONS — MUST NOT FLIP
   ══════════════════════════════════════════════════════ */

/* Embedded LTR content */
[dir="rtl"] .ltr-always {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: embed;
}

/* Numeric and currency content */
[dir="rtl"] .stat-num,
[dir="rtl"] .pricing-value,
[dir="rtl"] .fee-value {
  direction: ltr;
  unicode-bidi: embed;
}

/* Code snippets */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .code-block,
[dir="rtl"] .code-snippet {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

/* Email addresses, phone numbers, URLs in content */
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: embed;
}

/* Third-party widgets */
[dir="rtl"] iframe,
[dir="rtl"] .intercom-lightweight-app {
  direction: ltr;
}

/* Logo should not flip */
[dir="rtl"] .nav-logo {
  transform: none;
}

/* Mock UI dashboards — keep internal LTR for illustrative data */
[dir="rtl"] .crm-mock-table,
[dir="rtl"] .nl-table,
[dir="rtl"] .rt-timeline {
  direction: ltr;
  text-align: left;
}

/* Receipt timeline — real translated content, should be RTL.
   In RTL, flex-direction:row naturally puts dot-col on the right. */
[dir="rtl"] .receipt-timeline {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .receipt-content {
  text-align: right;
}

/* Pipeline stages mock — keep LTR flow */
[dir="rtl"] .opp-pipeline-mock {
  direction: ltr;
}

/* Flag icons — visual order unchanged */
[dir="rtl"] .fi {
  transform: none;
}

/* SVG decorative elements — do not mirror */
[dir="rtl"] .hero-yarn svg,
[dir="rtl"] .cross-stitch {
  transform: none;
}