/* ==========================================================================
   Donation modal
   Built on the site's own tokens (green / ink / ivory, Manrope, --r-*).

   Alignment rule: every block in the form is a .tt-dm__field and the form
   owns the rhythm via a single `gap`. Nothing carries its own bottom margin,
   so labels, inputs and rows all sit on one predictable vertical grid.
   ========================================================================== */

.tt-dm {
  --dm-gap: 1.15rem;          /* one rhythm for the whole form   */
  --dm-pad: 2.15rem;          /* panel padding                    */
  --dm-h: 3.15rem;            /* shared control height            */
  --dm-line: rgba(11, 11, 11, .12);
  --dm-line-str: rgba(11, 11, 11, .2);
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  padding: 1.25rem;
}
.tt-dm[hidden] { display: none !important; }

.tt-dm__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 11, 11, .68);
  backdrop-filter: blur(6px);
  animation: ttDmFade .3s ease both;
}
@keyframes ttDmFade { from { opacity: 0; } }

.tt-dm__panel {
  position: relative;
  width: min(100%, 38.5rem);
  max-height: min(92vh, 54rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper, #fff);
  color: var(--ink, #0B0B0B);
  border-radius: var(--r-l, 24px);
  padding: var(--dm-pad);
  box-shadow: 0 2px 6px rgba(11,11,11,.05), 0 36px 90px rgba(11, 11, 11, .4);
  animation: ttDmIn .42s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes ttDmIn { from { opacity: 0; transform: translateY(20px) scale(.975); } }
@media (prefers-reduced-motion: reduce) {
  .tt-dm__panel, .tt-dm__backdrop { animation: none; }
}
/* Slim scrollbar so a scrolling panel still looks tidy. */
.tt-dm__panel { scrollbar-width: thin; scrollbar-color: var(--dm-line-str) transparent; }
.tt-dm__panel::-webkit-scrollbar { width: 8px; }
.tt-dm__panel::-webkit-scrollbar-thumb { background: var(--dm-line); border-radius: 99px; }

@media (max-width: 560px) {
  .tt-dm { --dm-pad: 1.4rem; --dm-gap: 1rem; padding: .75rem; }
}

/* --- header ---------------------------------------------------------
   Logo, text and close all live in one grid row, so the close button is
   aligned to the header's own top edge instead of floating against the
   panel corner (which left it visibly out of step with the content). */
.tt-dm__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1rem;
  padding-bottom: 1.35rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--dm-line);
}
.tt-dm__headtext { min-width: 0; }

.tt-dm__mark {
  width: 3.15rem; height: 3.15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ivory, #F7F4EE);
  border: 1px solid var(--dm-line);
  overflow: hidden;
}
.tt-dm__mark img,
.tt-dm__mark .tt-dm__logo {
  width: 2.15rem; height: 2.15rem;
  object-fit: contain; display: block;
}

.tt-dm__x {
  align-self: start;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border: 1px solid var(--dm-line); border-radius: 50%;
  background: var(--paper, #fff);
  color: var(--slate, #5C625F);
  cursor: pointer;
  transition: background .3s var(--ease, ease), color .3s var(--ease, ease),
              border-color .3s var(--ease, ease), transform .3s var(--ease, ease);
}
.tt-dm__x svg { width: 1rem; height: 1rem; }
.tt-dm__x:hover {
  background: var(--ink, #0B0B0B); color: #fff;
  border-color: var(--ink, #0B0B0B); transform: rotate(90deg);
}
.tt-dm__x:focus-visible { outline: 2px solid var(--green-deep, #4E8F26); outline-offset: 2px; }

/* ID beats Astra/Elementor h2 overrides without !important */
#tt-donate-modal .tt-dm__t,
.tt-dm__t {
  font-family: var(--display, sans-serif);
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  font-weight: 700;
  line-height: 1.15; letter-spacing: -.025em;
  margin: .1rem 0 .4rem;
}
.tt-dm__t-thin { font-weight: 300; color: var(--green-ink, #3C6F1D); }
.tt-dm__sub { font-size: .84rem; color: var(--slate, #5C625F); margin: 0; line-height: 1.5; }

/* --- form rhythm ---------------------------------------------------- */
.tt-dm__form { display: flex; flex-direction: column; gap: var(--dm-gap); }
.tt-dm__field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.tt-dm__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--dm-gap); align-items: start;
}
@media (max-width: 560px) { .tt-dm__row { grid-template-columns: 1fr; } }

.tt-dm__mode { margin: 0; }
.tt-dm__pill {
  display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1.05rem;
  border: 1px solid var(--dm-line); border-radius: 999px;
  background: var(--ivory, #F7F4EE);
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
}

/* --- amount tiers --------------------------------------------------- */
.tt-dm__tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
@media (max-width: 560px) { .tt-dm__tiers { grid-template-columns: repeat(2, 1fr); } }
.tt-dm__tier {
  height: var(--dm-h);
  display: grid; place-items: center;
  border: 1.5px solid var(--dm-line);
  border-radius: var(--r-m, 14px);
  background: var(--paper, #fff);
  font-family: var(--display, sans-serif);
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #0B0B0B); cursor: pointer;
  transition: border-color .25s var(--ease, ease), background .25s var(--ease, ease),
              color .25s var(--ease, ease), transform .25s var(--ease-out, ease);
}
.tt-dm__tier:hover { border-color: var(--green-deep, #4E8F26); transform: translateY(-2px); }
.tt-dm__tier.is-on {
  border-color: var(--green-deep, #4E8F26);
  background: rgba(125, 194, 67, .15);
  color: var(--green-ink, #3C6F1D);
}
.tt-dm__tier:focus-visible { outline: 2px solid var(--green-deep, #4E8F26); outline-offset: 2px; }

/* --- labels + inputs ------------------------------------------------ */
.tt-dm__lab {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2, #626A65);
  line-height: 1.2;
}
.tt-dm__req { color: var(--green-ink, #3C6F1D); }

.tt-dm__in {
  width: 100%; height: var(--dm-h); padding: 0 1rem;
  border: 1.5px solid var(--dm-line);
  border-radius: var(--r-m, 14px);
  background: var(--paper, #fff);
  font: inherit; font-size: .95rem; color: var(--ink, #0B0B0B);
  transition: border-color .25s var(--ease, ease), box-shadow .25s var(--ease, ease), background .25s var(--ease, ease);
}
.tt-dm__in::placeholder { color: var(--slate-2, #626A65); opacity: .65; }
.tt-dm__in:hover { border-color: var(--dm-line-str); }
.tt-dm__in:focus {
  outline: none;
  border-color: var(--green-deep, #4E8F26);
  box-shadow: 0 0 0 3px rgba(125, 194, 67, .22);
}
/* Amount field.
   The currency mark is a real grid column with its own divider rather than
   an absolutely-positioned glyph sitting over the input — with padding
   alone, a long amount or a wider ₹ glyph could collide with the digits. */
.tt-dm__amtwrap {
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  height: var(--dm-h);
  border: 1.5px solid var(--dm-line);
  border-radius: var(--r-m, 14px);
  background: var(--paper, #fff);
  overflow: hidden;
  transition: border-color .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}
.tt-dm__amtwrap:hover { border-color: var(--dm-line-str); }
.tt-dm__amtwrap:focus-within {
  border-color: var(--green-deep, #4E8F26);
  box-shadow: 0 0 0 3px rgba(125, 194, 67, .22);
}
.tt-dm__cur {
  display: grid; place-items: center;
  width: 2.9rem;
  border-right: 1px solid var(--dm-line);
  background: var(--ivory, #F7F4EE);
  color: var(--slate, #5C625F);
  font-size: 1rem; font-weight: 700; line-height: 1;
  user-select: none;
}
.tt-dm__in--amt {
  border: 0; border-radius: 0; background: transparent;
  height: 100%; padding: 0 1rem;
  font-weight: 700; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.tt-dm__in--amt:hover { border: 0; }
.tt-dm__in--amt:focus { box-shadow: none; border: 0; }
.tt-dm__in--amt::-webkit-outer-spin-button,
.tt-dm__in--amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- methods + error ------------------------------------------------ */
.tt-dm__methods {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-2, #626A65);
}
.tt-dm__methods span {
  padding: .34rem .6rem;
  border: 1px solid var(--dm-line); border-radius: 999px;
  background: var(--ivory, #F7F4EE);
}

.tt-dm__err {
  margin: 0; padding: .8rem 1rem;
  border-radius: var(--r-m, 14px);
  border: 1px solid rgba(163, 38, 32, .25);
  background: rgba(211, 47, 47, .07);
  color: #A32620; font-size: .87rem; line-height: 1.5;
  animation: ttDmIn .28s var(--ease-out, ease) both;
}
.tt-dm__err[hidden] { display: none; }

/* --- submit --------------------------------------------------------- */
.tt-dm__go {
  width: 100%; min-height: 3.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: .2rem;
  border: 0; border-radius: var(--r-m, 14px); cursor: pointer;
  background: linear-gradient(180deg, var(--green, #7DC243), var(--green-deep, #4E8F26));
  color: #fff; font-family: var(--display, sans-serif);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 12px 28px rgba(78, 143, 38, .3);
  transition: transform .25s var(--ease-out, ease), box-shadow .25s var(--ease, ease), opacity .2s;
}
.tt-dm__go svg { width: 1.05rem; height: 1.05rem; flex: none; }
.tt-dm__go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(78, 143, 38, .4); }
.tt-dm__go:active:not(:disabled) { transform: translateY(0); }
.tt-dm__go:focus-visible { outline: 2px solid var(--green-ink, #3C6F1D); outline-offset: 3px; }
.tt-dm__go:disabled, .tt-dm__go.is-busy { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.tt-dm__ssl {
  text-align: center; margin: 0;
  font-size: .66rem; font-weight: 600; letter-spacing: .13em;
  color: var(--slate-2, #626A65);
}

body.tt-dm-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Persistent Donate CTA
   The header is position:relative, so its Donate button is gone as soon as
   you scroll. This sits fixed bottom-right and fades in once the header has
   passed, giving every page a reachable donate action at any scroll depth.
   Colour follows the site's own donate buttons (--red-cta) rather than
   introducing a new accent.
   -------------------------------------------------------------------------- */
.tt-dfab {
  position: fixed; left: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 9990;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.4rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--red-cta, #C21D24);
  color: #fff;
  font-family: var(--display, sans-serif);
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 12px 30px rgba(11, 11, 11, .3);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .4s var(--ease, ease), transform .4s var(--ease-out, ease),
              background .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.tt-dfab[hidden] { display: none !important; }
.tt-dfab.is-in { opacity: 1; transform: none; }
.tt-dfab svg { width: 1.05rem; height: 1.05rem; flex: none; }
.tt-dfab:hover { background: #A91018; box-shadow: 0 16px 38px rgba(11, 11, 11, .38); transform: translateY(-2px); }
.tt-dfab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Never compete with the open dialog. */
body.tt-dm-open .tt-dfab { opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .tt-dfab { padding: .85rem 1.1rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-dfab { transition: opacity .2s linear; transform: none; }
  .tt-dfab.is-in { transform: none; }
}

/* --------------------------------------------------------------------------
   Out-rank Elementor's global button styling.
   The Elementor kit paints every bare `button` with the donate red, which
   was bleeding through onto the amount tiers and the close control (the
   submit survived only because it sets its own gradient). The theme already
   solves this for .tt-chip by restating appearance at `.tt button.<class>`
   specificity — same approach here.
   -------------------------------------------------------------------------- */
.tt button.tt-dm__tier,
.tt .tt-dm button.tt-dm__tier {
  appearance: none; -webkit-appearance: none;
  background: var(--paper, #fff);
  border: 1.5px solid var(--dm-line);
  border-radius: var(--r-m, 14px);
  color: var(--ink, #0B0B0B);
  box-shadow: none; text-shadow: none;
}
.tt button.tt-dm__tier:hover { background: var(--paper, #fff); border-color: var(--green-deep, #4E8F26); }
.tt button.tt-dm__tier.is-on {
  background: rgba(125, 194, 67, .15);
  border-color: var(--green-deep, #4E8F26);
  color: var(--green-ink, #3C6F1D);
}

.tt button.tt-dm__x,
.tt .tt-dm button.tt-dm__x {
  appearance: none; -webkit-appearance: none;
  background: var(--paper, #fff);
  border: 1px solid var(--dm-line);
  border-radius: 50%;
  color: var(--slate, #5C625F);
  box-shadow: none; text-shadow: none;
  padding: 0;
}
.tt button.tt-dm__x:hover {
  background: var(--ink, #0B0B0B); color: #fff; border-color: var(--ink, #0B0B0B);
}

.tt button.tt-dm__go {
  border: 0; box-shadow: 0 12px 28px rgba(78, 143, 38, .3);
}

/* Title: kept compact so the heading doesn't dominate the form. */
#tt-donate-modal .tt-dm__t,
.tt-dm__t {
  font-size: clamp(.9rem, 1.5vw, 1.05rem) !important;
  line-height: 1.25;
  text-wrap: pretty;
}
.tt-dm__t-thin { display: inline; }

/* --------------------------------------------------------------------------
   Out-rank Astra's input styling.
   Astra targets inputs by attribute — input[type=tel], input[type=number] —
   which is (0,1,1) and beat the plain .tt-dm__in class (0,1,0). That gave the
   amount field a second border inside the wrapper's own (the "double line"),
   and pushed Astra's 4px radius / 12px padding / box-shadow onto every field.
   -------------------------------------------------------------------------- */
.tt .tt-dm input.tt-dm__in,
.tt .tt-dm textarea.tt-dm__in {
  height: var(--dm-h);
  padding: 0 1rem;
  border: 1.5px solid var(--dm-line);
  border-radius: var(--r-m, 14px);
  background: var(--paper, #fff);
  box-shadow: none;
  font: inherit; font-size: .95rem; line-height: normal;
  color: var(--ink, #0B0B0B);
  width: 100%;
}
.tt .tt-dm input.tt-dm__in:focus {
  border-style: solid;
  border-color: var(--green-deep, #4E8F26);
  box-shadow: 0 0 0 3px rgba(125, 194, 67, .22);
  outline: none;
}

/* The amount input lives inside .tt-dm__amtwrap, which carries the frame —
   so this one must have no border, radius or shadow of its own. */
.tt .tt-dm .tt-dm__amtwrap input.tt-dm__in--amt,
.tt .tt-dm input.tt-dm__in--amt {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  height: 100%;
  padding: 0 1rem;
  font-weight: 700;
}
.tt .tt-dm .tt-dm__amtwrap input.tt-dm__in--amt:focus,
.tt .tt-dm input.tt-dm__in--amt:focus {
  border: 0; box-shadow: none; outline: none; border-style: none;
}

/* --------------------------------------------------------------------------
   Edge tab — vertical "Donate" pinned to the right edge, always visible.
   Unlike .tt-dfab this does not wait for scroll: it is a permanent handle,
   so there is a donate action even at the top of a page.
   `.tt button.tt-dtab` specificity is required to out-rank the Elementor
   kit, which paints every bare button with the donate red fill.
   -------------------------------------------------------------------------- */
.tt-dtab,
.tt button.tt-dtab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 9989;
  display: flex; align-items: center; justify-content: center;
  padding: 1.15rem .6rem;
  border: 0;
  border-radius: var(--r-m, 14px) 0 0 var(--r-m, 14px);
  background: var(--red-cta, #C21D24);
  color: #fff;
  cursor: pointer;
  box-shadow: -4px 0 18px rgba(11, 11, 11, .28);
  transition: background .3s var(--ease, ease), padding-right .3s var(--ease-out, ease),
              box-shadow .3s var(--ease, ease);
  appearance: none; -webkit-appearance: none;
}
.tt-dtab__t {
  writing-mode: vertical-rl;
  font-family: var(--display, sans-serif);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  line-height: 1;
}
.tt button.tt-dtab:hover {
  background: #A91018;
  padding-right: 1rem;                 /* slides out from the edge */
  box-shadow: -6px 0 24px rgba(11, 11, 11, .36);
}
.tt-dtab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Never sit above the dialog. */
body.tt-dm-open .tt-dtab { opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .tt-dtab, .tt button.tt-dtab { padding: .9rem .45rem; }
  .tt-dtab__t { font-size: .66rem; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-dtab, .tt button.tt-dtab { transition: background .2s linear; }
  .tt button.tt-dtab:hover { padding-right: .6rem; }
}

/* Refund / terms line. Gateways require this at the point of payment; it sits
   under the SSL strip as fine print, quiet but genuinely readable — not the
   4px grey text that pattern usually degenerates into. */
.tt-dm__legal {
  margin: .55rem 0 0;
  font-size: .715rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(11,11,11,.5);
}
.tt-dm__legal a {
  color: rgba(11,11,11,.72);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.tt-dm__legal a:hover { color: var(--green-deep, #4E8F26); }

/* Fine print in the modal is set in rem, so it inherited Astra's reduced
   mobile root and bottomed out near 9.6px. Floored in px at phone widths —
   consent text nobody can read is not consent. */
@media (max-width: 560px) {
  .tt-dm__methods span { font-size: 11px; }
  .tt-dm__ssl { font-size: 10.5px; letter-spacing: .1em; }
  .tt-dm__legal { font-size: 12px; }
  .tt-dm__lab { font-size: 12.5px; }
}

/* The floating CTAs are set in rem, so Astra's reduced mobile root left the
   edge tab's label at 10.6px — the one piece of persistent chrome on every
   page, and the smallest text on screen. Floored, and the tab given a real
   touch width. */
@media (max-width: 921px) {
  .tt-dtab__t { font-size: 12px; letter-spacing: .14em; }
  .tt-dtab { min-width: 40px; }
  .tt-dfab { font-size: 13px; min-height: 44px; }
}

/* Hidden here rather than in system.css: `.tt button.tt-dtab` there is (0,2,1)
   and `body.page-id-131 .tt-dtab` is also (0,2,1), so the tie went to whichever
   file loaded last. donate.css owns these elements, so the rule belongs here. */
body.page-id-131 button.tt-dtab,
body.page-id-131 .tt-dfab { display: none !important; }

/* The edge tab is fixed to the right of the viewport, so on a narrow screen it
   sits on top of whatever is nearest that edge — at 320px it covered the arrow
   on the action cards. Trimming its footprint keeps it reachable without it
   taking a bite out of the content. */
@media (max-width: 560px) {
  .tt-dtab { padding: .85rem .3rem; border-radius: 10px 0 0 10px; }
  .tt-dtab__t { font-size: 11px; letter-spacing: .1em; }
}