/* ============================================================
   CHECKOUT V4 — RTL (Right-to-Left) Overrides
   Loaded for Hebrew (/he/) and Arabic (/ar/) pages
   ============================================================ */
html, body {
  direction: rtl;
  text-align: right;
}

/* Font stack — Hebrew uses November with Rubik fallback */
body {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

#divLeftTextAreaDefault,#divLeftTextAreaDefault *{font-family: 'November', 'Rubik', Arial, sans-serif !important;}

/* Sidebar top: natural RTL flow (logo right, lang left) — no reverse needed */
.sidebar-top {
  flex-direction: row;
}

/* Landing layout — natural RTL flow handles sidebar right, form left */

/* Back button arrow flipped */
.back-btn svg,
.edit-amount-flip .iconflip {
  transform: scaleX(-1);
}

/* Donate button arrow — flip for RTL */
#btnDonateButton svg,
.donate-btn svg{transform:scaleX(-1)}

/* Amount suffix (e.g., /mo) */
.donation_type {
  margin-right: 2px;
  margin-left: 0;
}

/* Currency symbol — keep on LEFT side even in RTL (₪180 not 180₪) */
.input-wrapper.donate-amount .preinput,
#other_amt_currency {
  left: 12px;
  right: auto;
}
.input-wrapper.donate-amount input[type="text"] {
  padding: 14px 40px 14px 28px;
  direction: ltr;
  text-align: right;
}
.input-field-container .preinput {
  left: 12px;
  right: auto;
}

/* Post input alignment */
.postinput {
  left: 12px;
  right: auto;
}
.postinput.right-0 {
  left: 0;
  right: auto;
}

/* Label alignment */
.rowname label,
.fg label,
label[for] {
  text-align: right;
}

/* Phone/CC fields keep LTR for numbers */
#tbcontacttelephone,
#tbccnumber,
#expiry,
#tbccverfcode,
#other_amt_field,
#tbteudatzeutnumber,
#tbZipCode,
input[type="tel"],
input[type="email"],
input[inputmode="numeric"] {
  direction: ltr;
  text-align: right;
}
/* CC number specifically — left-align so digits flow naturally after the
   brand icon (in Hebrew RTL, right-align made the digits appear floating
   in the middle of the wide input). */
#tbccnumber {
  text-align: left;
}

/* CC brand icon — inside card number input, flip to left side in RTL */
#divForCCDetails .ccbrandMaxWidth {
  right: auto !important;
  left: 16px !important;
}
#divForCCDetails #tbccnumber {
  /* Icon is on the LEFT in RTL — pad the left to make room, and reset the
     LTR base rule's padding-right:54px (no icon on the right anymore).
     Without this reset, both paddings stacked and clipped the 16th digit. */
  padding-left: 54px !important;
  padding-right: 20px !important;
}

/* Pad direction flipped */
.padright {
  padding-left: 8px;
  padding-right: 0;
}

/* Edit amount link — handled above with payment icons */

/* Dropdown arrow position (flipped for RTL) */
.custom-select-box,
select.select-box,
#ddlInstallments,
#ddlcountry,
#ddlStateListUSA,
#ddlStateListCanada {
  background-position: 12px center !important;
  padding-right: 12px !important;
  padding-left: 30px !important;
}

/* Frequency tabs — Hebrew font + center alignment */
.custom-pills .nav-link,
.freq-tab {
  text-align: center;
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* Dropdowns — Hebrew font */
.custom-select-box,
select.select-box,
#ddlInstallments,
#ddlcountry,
#ddlDonationCurrency,
#ddlSalutation,
#ddlStateListUSA,
#ddlStateListCanada,
select option {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* Placeholders in Hebrew */
.form-control::placeholder,
.fi::placeholder,
input::placeholder {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* E-card close button — flip to left in RTL */
.iho-close-btn{right:auto!important;left:12px}

/* All form labels and text in Hebrew */
.s-title,
.tax-banner-text,
.landing-name,
.landing-desc,
.paymentmethods,
#coverCcLabel,
.card-det-title,
.gdpr-title,
.labelgdpr,
.giftaidlabel,
.tz-info,
label {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* Amount pills in Hebrew */
.amount-buttons-wrapper .divGiveonceRadioSum,
.amount-buttons-wrapper .amount-button {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* Buttons */
.donate-btn,
#btnDonateButton,
.exp-toggle,
.iho-toggle,
.landing-other-toggle,
.back-btn,
.edit-amount {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* Trust bar */
.trust-bar {
  font-family: 'November', 'Rubik', Arial, sans-serif;
}

/* Float overrides for RTL */
.float-start {
  float: right !important;
}
.float-end {
  float: left !important;
}

/* Flex-container payment icons — reverse for RTL (CC first on right) */
.flex-container {
  direction: rtl;
}

/* Edit link — aligned to left end in RTL */
.edit-amount {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Payment summary header — text right, edit left */
#once-op .header-step-2,
#monthly-op .header-step-2,
#yearly-op .header-step-2 {
  flex-direction: row !important;
  justify-content: space-between !important;
}

/* Amount buttons */
.amount-buttons-wrapper {
  direction: rtl;
}

/* Cover CC checkbox — natural RTL flow */

/* GDPR checkbox — label before checkbox in RTL */


/* Gift Aid radio — keep horizontal */
#giftaid #Div4 {
  direction: rtl;
}

/* Igul Letova image */
.igulimage {
  margin-left: 8px;
  margin-right: 0;
}

/* Modal text alignment */
.iho .text-start {
  text-align: right;
}
/* In RTL the default flex `row` direction already lays items right-to-left
   (radio on right, label on left — standard Hebrew/Arabic radio layout).
   The previous `row-reverse` rule flipped this backward — removed.
   If LTR-specific row-reverse is ever needed, scope it via .ltr or :lang(en). */

/* Trust bar */
.trust-bar {
  direction: rtl;
}



/* Landing sidebar text */
.landing-name,
.landing-desc {
  text-align: right;
}

/* Terms */
.terms, .terms-text {
  text-align: center;
}

/* intlTelInput flag container flip */
.iti--allow-dropdown .iti__flag-container {
  right: 0;
  left: auto;
}

/* Step 2 payment headers */
#once-op .header-step-2,
#monthly-op .header-step-2,
#yearly-op .header-step-2 {
  flex-direction: row;
}
.adf-form-header .header-step-2 {
  flex-direction: row;
}

/* Other ways section */
.landing-other {
  text-align: right;
}
.landing-other-toggle {
  flex-direction: row;
}

/* Navbar dropdown */
.dropdown-menu {
  text-align: right;
}

/* Required star position */
.req {
  margin-inline-start: 2px;
}

/* "Best impact" badge position for RTL */
#freqButton2 .nav-link::after {
  right: auto;
  left: 4px;
}

/* "Most popular" badge — keep centered */
.amount-buttons-wrapper .divGiveonceRadioSum:nth-child(3)::before {
  left: 50%;
  transform: translateX(-50%);
}

/* Company toggle link */
#divAreYouCompany2 {
  text-align: right;
}

/* Address field labels */
.country-label {
  text-align: right !important;
}