/* Production guards for the supporter module (.sup).
   The site theme's global <button> styles bleed in (solid-orange pills, full-width blocks),
   which restyle the interval toggle, tier CTAs and, most visibly, turn the "Not you?" text link
   into a full-width centred block on its own line (David's issue 4 — should sit inline, right of
   the welcome text). These !important rules restore the design's OWN values from supporters.css.
   Kept separate so the design file stays verbatim — same pattern as se-don-guards. */

/* interval toggle — transparent buttons over the sliding thumb */
.sup .sup-seg button { border: none !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; padding: 11px 26px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 800 !important; text-transform: none !important; color: var(--ink-soft) !important; width: auto !important; }
.sup .sup-seg button.on { color: #fff !important; background: transparent !important; }

/* action buttons — the design's own variants */
.sup .sup-btn { border: none !important; border-radius: 999px !important; min-height: 50px !important; padding: 14px 22px !important; box-shadow: none !important; font-size: 15px !important; font-weight: 800 !important; text-transform: none !important; width: 100% !important; }
.sup .sup-btn.accent { background: var(--orange) !important; color: #fff !important; box-shadow: 0 8px 20px -6px rgba(196,106,38,.5) !important; }
.sup .sup-btn.accent:hover { background: var(--orange-dark) !important; }
.sup .sup-btn.dark { background: var(--ink) !important; color: #fff !important; }
.sup .sup-btn.ghost { background: var(--paper) !important; color: var(--ink) !important; border: 1.5px solid var(--border) !important; }
.sup .sup-btn.sm { min-height: 42px !important; padding: 10px 18px !important; font-size: 14px !important; width: auto !important; margin-top: 0 !important; }
/* text link (e.g. "Not you?") — inline, NOT a full-width centred block */
.sup .sup-btn.text { background: none !important; color: var(--orange-dark) !important; border: none !important; box-shadow: none !important; min-height: 0 !important; width: auto !important; margin: 0 !important; padding: 6px 2px !important; text-decoration: underline !important; font-weight: 700 !important; font-size: 14px !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; }

/* welcome-back banner — keep the text and the "Not you?" link on one row, wrapping gracefully */
.sup .sup-alert { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; text-align: left !important; }

/* form fields — bordered white inputs, not the theme's */
.sup .sup-field input, .sup .sup-field textarea { border: 1.5px solid var(--border) !important; border-radius: 14px !important; background: var(--paper) !important; color: var(--ink) !important; padding: 13px 15px !important; font-size: 15.5px !important; box-shadow: none !important; width: 100% !important; }
.sup .sup-field input:focus, .sup .sup-field textarea:focus { border-color: var(--orange) !important; outline: none !important; }

/* receipt modal (2026-09-16, David's screenshots): the same theme bleed as above hits the
   receipt document too. .elementor-kit-8929 img{height:auto;max-width:100%} (post-8929.css) beats
   .rc-logo's single class on specificity, so the logo lost its 38px height and stretched to the
   modal's full width instead — the "enormous logo" report, correct in the PDF because the PDF never
   touches this stylesheet. .elementor-kit-8929 button{background-color:var(--e-global-color-primary);
   color:#fff;border-radius:50px} does the same to the plain circular close button, turning it into
   an orange-filled pill. Guarded here rather than raising .rc-logo/.sup-modal-close's own specificity,
   same reasoning as the rest of this file. */
.sup .rc-logo { height: 38px !important; width: auto !important; max-width: none !important; }
.sup .sup-modal-close { background: #fff !important; color: var(--ink-soft) !important; border: 1.5px solid var(--border) !important; border-radius: 50% !important; }
.sup .sup-modal-close:hover { border-color: var(--ink-faint) !important; color: var(--ink) !important; }
/* belt and braces on the scrim/box themselves — nothing was found actually overriding these on a
   clean load (checked against a real production booking at 375px), but the modal not covering the
   page behind it was reported alongside the logo/button bleed, so they get the same defence. */
.sup .sup-modal-scrim { position: fixed !important; inset: 0 !important; z-index: 500 !important; background: rgba(35, 31, 28, .55) !important; }
.sup .sup-modal { position: relative !important; z-index: 1 !important; background: #fff !important; }
/* the payment-history "Receipt →" link on the supporter card — same single-class rule, same fix */
.sup .rc-link { background: none !important; border: none !important; padding: 0 !important; color: var(--orange-dark) !important; font-weight: 800 !important; border-radius: 0 !important; }