/* tipping app: tip_page.html and related tip flow templates. */

/* Support is a fundamentally different goal from Sound Alerts/Custom Tip
   (see streaming_costs app), so it's set apart visually — pushed to the
   far right of the tab row via a flex auto-margin, instead of sitting
   nestled with the other two. */
.dashboard-nav-link[data-target="support-section"] {
  margin-left: auto;
  /* .dashboard-nav-link's base margin-right:-10px (site.css) exists so
     each tab overlaps into the next one's space — with nothing after
     Support to overlap into, that negative margin instead folds into
     the margin-left:auto calculation above and pushes the tab ~10px
     past the container's actual right edge. Cancel it here. */
  margin-right: 0;
}

/* .dashboard-nav-tabs (site.css) centers itself inside .terminal-panel via
   left:50%/transform/width+max-width — that only happens to make the
   FIRST tab flush with the panel's left edge, it was never sized to
   reach the panel's right edge too (nothing needed to, until Support's
   margin-left:auto above). Overridden here, scoped to just this page, as
   left/right insets instead: position:absolute's containing block is the
   PADDING edge of .terminal-panel (padding is inside that box, not
   subtracted from it) — that edge sits exactly 1px (the border-width)
   inside the panel's visible outer border, so -1px on each side is what
   reaches the border exactly, not -32px (that overshot past the border
   by the padding amount — first attempt confused padding-box with
   content-box). Not touched in site.css directly since .dashboard-nav-tabs
   is shared with the admin dashboard's own (differently-tuned) nav. */
.tip-page-panel .dashboard-nav-tabs {
  left: -1px;
  right: -1px;
  width: auto;
  max-width: none;
  transform: none;
  margin: 0;
}

/* --- PayPal popup redirect page (tip_redirect.html) --- */
.paypal-popup-info {
  background: #1a3a2a;
  border: 1px solid #3498db;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
}
.popup-status {
  display: flex;
  gap: 12px;
}
.status-icon {
  color: #3498db;
  font-size: 20px;
  animation: pulse 2s infinite;
}
.status-text {
  flex: 1;
  text-align: left;
}
.status-title {
  color: #3498db;
  font-weight: bold;
  margin-bottom: 4px;
}
.status-message {
  color: #ecf0f1;
  font-size: 14px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
#popupBlockedMsg {
  color: #e74c3c;
  margin-bottom: 12px;
}

/* --- Standalone PayPal-return popup (tip_success_popup.html) --- */
.tip-success-popup-body {
  margin: 0;
  padding: 20px;
  background: #0a0e27;
  color: #ecf0f1;
  font-family: 'Courier New', monospace;
  text-align: center;
}
.tip-success-popup-content {
  padding: 40px 20px;
}
.tip-success-popup-check {
  font-size: 24px;
  color: #2ecc71;
  margin-bottom: 16px;
}
.tip-success-popup-title {
  font-size: 16px;
  font-weight: bold;
  color: #2ecc71;
  margin-bottom: 8px;
}
.tip-success-popup-check--neutral,
.tip-success-popup-title--neutral {
  color: #8b949e;
}
.tip-success-popup-check--error,
.tip-success-popup-title--error {
  color: #ffb3b3;
}
.tip-success-popup-subtitle {
  color: #bdc3c7;
  font-size: 13px;
}

/* --- Tip goal bar --- */
.tip-goal-bar {
  margin-bottom: 12px;
}
.tip-goal-bar-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tip-goal-bar-amounts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#goalCurrent {
  font-weight: 600;
  text-align: left;
}
#goalAmount {
  font-weight: 600;
  text-align: right;
}
.tip-goal-bar-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-top: 8px;
  overflow: hidden;
}
#goalProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f87171, #ef4444);
}

/* --- Streaming Costs ("Support") goal bar — same layout as the tip goal
   bar above (shares .tip-goal-bar/.tip-goal-bar-track), distinct accent
   color, distinct IDs to avoid colliding with the tip goal's ID-scoped
   rules when both bars are ever in the DOM at once. --- */
#costGoalCurrent {
  font-weight: 600;
  text-align: left;
}
#costGoalAmount {
  font-weight: 600;
  text-align: right;
}
#costGoalProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #34d399, #10b981);
}

.cost-items-list {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.cost-item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cost-item-title {
  color: #c9d1d9;
}
.cost-item-cost {
  color: #8b949e;
  font-weight: 600;
}

/* --- Tip form layout --- */
.tip-message-row {
  align-items: flex-start;
}
.tip-message-field {
  flex: 1;
}

/* --- "Tip anonymously" eye toggle (shared across quick-tip/custom-tip/
   support tabs — see the shared JS in tip_page.html) --- */
.amount-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.amount-input-wrap input[type="number"] {
  flex: 1;
  min-width: 0;
}
.anon-toggle-icon-eye-off {
  display: none;
}
.quick-tip-pin-button.anon-toggle-button.active {
  /* Higher specificity than .quick-tip-pin-button.active (below, red for
     the favorites heart) is needed since the eye button carries both
     classes — same specificity + later source order would otherwise let
     the heart's red win here instead of this purple. */
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.4);
  color: #7c3aed;
}
.anon-toggle-button .anon-toggle-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: fill 100ms ease-out;
}
.anon-toggle-button.active .anon-toggle-icon-eye {
  display: none;
}
.anon-toggle-button.active .anon-toggle-icon-eye-off {
  display: block;
}
.mt-14 {
  margin-top: 14px;
}
.mt-24 {
  margin-top: 24px;
}
.text-center {
  text-align: center;
}
/* Sized relative to the surrounding text (not a fixed px size like the
   dashboard's .badge-icon-sm/.twitch-badge-icon) since this sits inline
   inside body copy — em-based so it scales if that copy's font-size
   ever changes, with a slight negative vertical-align nudge to sit on
   the text baseline rather than floating above it. */
.inline-badge-icon {
  height: 1em;
  width: auto;
  vertical-align: -0.15em;
}

/* --- Filter/search row above the sound alert grids (custom tip vs quick tip) --- */
.tip-filter-row {
  display: flex;
  align-items: center;
}
.tip-filter-row--custom {
  margin-top: 10px;
  gap: 8px;
}
.tip-filter-row--quick {
  margin-top: 16px;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-tip-search-wrapper {
  position: relative;
  flex: 1;
}
.quick-tip-search-wrapper--custom {
  min-width: 180px;
}
.quick-tip-search-wrapper--quick {
  min-width: 220px;
}
.tip-search-input {
  width: 100%;
  border: 1px solid rgba(110, 118, 129, 0.24);
  background: rgba(10, 14, 21, 0.85);
  color: #e8ebed;
}
.tip-search-input--custom {
  padding: 8px 34px 8px 10px;
  border-radius: 8px;
}
.tip-search-input--quick {
  padding: 10px 38px 10px 14px;
  border-radius: 10px;
}
#quickTipGrid {
  /* overrides .quick-tip-grid's own margin-top: 16px for this specific grid */
  margin-top: 14px;
}
.quick-tip-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #c9d1d9;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.quick-tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
  contain: layout style paint;
}
.quick-tip-card {
  background: rgba(10, 14, 21, 0.9);
  border: 1px solid rgba(130, 145, 160, 0.16);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
  will-change: border-color, box-shadow;
  contain: layout style;
}
.quick-tip-card:hover {
  border-color: rgba(130, 200, 255, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.quick-tip-card.hidden {
  display: none;
  pointer-events: none;
}
.quick-tip-preview {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(80, 110, 255, 0.12);
  color: #f8faff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 100ms ease-out;
  will-change: background-color;
}
.quick-tip-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.quick-tip-favorite {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f8faff;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 100ms ease-out, color 100ms ease-out, border-color 100ms ease-out;
}
.quick-tip-favorite:hover {
  background: rgba(255, 255, 255, 0.12);
}
.quick-tip-favorite-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: fill 100ms ease-out, stroke 100ms ease-out;
}
.quick-tip-favorite.favorited {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.quick-tip-favorite.favorited .quick-tip-favorite-icon {
  fill: currentColor;
}
.quick-tip-pin-button {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f8faff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 100ms ease-out, color 100ms ease-out, border-color 100ms ease-out;
}
.quick-tip-pin-button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.quick-tip-pin-button .quick-tip-pin-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: fill 100ms ease-out, stroke 100ms ease-out;
}
.quick-tip-pin-button.active {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.quick-tip-pin-button.active .quick-tip-pin-icon {
  fill: currentColor;
}
.quick-tip-favorite.favorited:hover {
  background: rgba(239, 68, 68, 0.28);
}
.quick-tip-preview:hover {
  background: rgba(80, 110, 255, 0.22);
}
.quick-tip-preview.playing {
  background-color: #165a2b;
  color: #7ee787;
  border-color: #1f4f2a;
  font-size: 30px;
  align-items: baseline;
}
.quick-tip-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.quick-tip-label strong {
  display: block;
  font-size: 1rem;
}
.quick-tip-label .meta {
  color: #8b949e;
  font-size: 0.95rem;
}
#quickTipSearch,
#customTipSearch {
  -webkit-appearance: none;
  appearance: none;
}
#quickTipSearch::-webkit-search-decoration,
#quickTipSearch::-webkit-search-cancel-button,
#quickTipSearch::-webkit-search-results-button,
#quickTipSearch::-webkit-search-results-decoration,
#customTipSearch::-webkit-search-decoration,
#customTipSearch::-webkit-search-cancel-button,
#customTipSearch::-webkit-search-results-button,
#customTipSearch::-webkit-search-results-decoration {
  display: none;
}
#quickTipSearch::-ms-clear,
#quickTipSearch::-ms-reveal,
#customTipSearch::-ms-clear,
#customTipSearch::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
#tipForm textarea,
#tipForm input[type="number"],
#supportForm textarea,
#supportForm input[type="number"] {
  background: rgba(10, 14, 21, 0.85);
  border: 1px solid rgba(110,118,129,0.24);
  border-radius: 10px;
  color: #e8ebed;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}
#tipForm textarea,
#supportForm textarea {
  resize: vertical;
  padding-right: 48px;
  padding-bottom: 32px;
}
#tipForm textarea:focus,
#tipForm input[type="number"]:focus,
#supportForm textarea:focus,
#supportForm input[type="number"]:focus {
  outline: 2px solid rgba(88,166,255,0.4);
  outline-offset: 2px;
}
.message-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.message-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 0.75rem;
  color: #8b949e;
  pointer-events: none;
  z-index: 10;
}
.message-counter.warning {
  color: #f2c94c;
}
.message-counter.danger {
  color: #ff6b6b;
}

.custom-tip-selection {
  border: none;
  padding: 0px;
  border-radius: 0px;
  background: none;
}
.custom-tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.custom-tip-card {
  border: 1px solid rgba(130, 145, 160, 0.16);
  background: rgba(10, 14, 21, 0.9);
  color: #e8ebed;
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 100ms ease, border-color 100ms ease, background-color 100ms ease;
}
.custom-tip-card:hover {
  transform: translateY(-1px);
  border-color: rgba(130, 200, 255, 0.35);
}
.custom-tip-card.selected {
  border-color: #65d3ff;
  background: rgba(55, 105, 190, 0.3);
}
.custom-tip-card.hidden {
  display: none;
  pointer-events: none;
}
.custom-tip-card-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  flex: 1;
}
.custom-tip-card strong {
  display: block;
  font-size: 1rem;
}
.custom-tip-card .meta {
  color: #8b949e;
  font-size: 0.95rem;
}
/* custom-tip-preview now reuses .quick-tip-preview styles */

/* --- Tip goal bar + success alert (previously the page's 2nd <style> block) --- */
#goalTitle,
#costGoalTitle {
  text-align: center;
  font-weight: 700;
  font-size: 25px;
}
#goalPercentText,
#costGoalPercentText {
  color:#9aa4ad;
  text-align:center;
  min-width:80px;
  font-weight: bold;
}
.tip-success-alert {
  background: #1a472a;
  border: 1px solid #2ecc71;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
}

.tip-success-alert .alert-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #2ecc71;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tip-success-alert .alert-close:hover {
  color: #27ae60;
  opacity: 0.8;
}

.tip-success-alert .alert-content {
  padding-right: 32px;
}

.tip-success-alert .alert-title {
  color: #2ecc71;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 16px;
}

.tip-success-alert .alert-message {
  color: #ecf0f1;
  margin-bottom: 4px;
}

.tip-success-alert .alert-info {
  color: #bdc3c7;
  font-size: 13px;
}

.tip-restriction-banner {
  background: rgba(240, 136, 62, 0.1);
  border: 1px solid rgba(240, 136, 62, 0.5);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #f0883e;
  font-weight: 600;
}

/* ---- Payment provider selection (PayPal vs Stripe) ---- */
.tip-provider-buttons {
  /* Same equal-width-pair trick as the /login/ page's .login-actions —
     grid guarantees both buttons match width regardless of label length,
     which flex-grow alone doesn't promise in a shrink-to-fit ancestor. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tip-provider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 700;
}
/* Same specificity as the global .hidden utility (site.css), but this
   file loads after it — without this override, "display: inline-flex"
   above wins the cascade by source order and .hidden silently does
   nothing on a provider button (confirmed live: the wallet-toggle button
   swap correctly toggled the class but the PayPal/Stripe buttons stayed
   visible until this rule was added). */
.tip-provider-button.hidden {
  display: none;
}
.tip-provider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}
.tip-provider-button--paypal,
.tip-provider-button--paypal:hover,
.tip-provider-button--paypal:focus {
  border-color: #0070ba;
  color: #0070ba;
  background: rgba(0, 112, 186, 0.12);
}
.tip-provider-button--paypal:hover,
.tip-provider-button--paypal:focus {
  background: rgba(0, 112, 186, 0.22);
}
.tip-provider-button--stripe,
.tip-provider-button--stripe:hover,
.tip-provider-button--stripe:focus {
  border-color: #635bff;
  color: #635bff;
  background: rgba(99, 91, 255, 0.12);
}
.tip-provider-button--stripe:hover,
.tip-provider-button--stripe:focus {
  background: rgba(99, 91, 255, 0.22);
}

/* Slide toggle (Sound Alerts tab only — Custom Tip/Support always show both
   provider buttons above instead, since each of those is a one-off choice
   rather than a remembered preference). Checkbox-driven mechanics adapted
   from https://uiverse.io/Shoh2008/average-monkey-56, re-themed to
   crossfade between the PayPal and Stripe marks instead of a face. */
.payment-provider-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 0 4px;
  cursor: pointer;
  user-select: none;
}
.payment-provider-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.payment-provider-toggle-track {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 112, 186, 0.25);
  border: 1px solid rgba(0, 112, 186, 0.5);
  transition: background 220ms ease, border-color 220ms ease;
  flex-shrink: 0;
}
.payment-provider-toggle input:checked + .payment-provider-toggle-track {
  background: rgba(99, 91, 255, 0.25);
  border-color: rgba(99, 91, 255, 0.6);
}
.payment-provider-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0d1117;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.payment-provider-toggle input:checked ~ .payment-provider-toggle-track .payment-provider-toggle-thumb {
  transform: translateX(26px);
}
.payment-provider-toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.65rem;
  background: transparent;
  transition: opacity 180ms ease, transform 220ms ease;
}
.payment-provider-toggle-icon--paypal {
  color: #0070ba;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.payment-provider-toggle-icon--stripe {
  color: #635bff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.payment-provider-toggle input:checked ~ .payment-provider-toggle-track .payment-provider-toggle-icon--paypal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.payment-provider-toggle input:checked ~ .payment-provider-toggle-track .payment-provider-toggle-icon--stripe {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.payment-provider-toggle-label {
  font-size: 0.85rem;
  color: #8b949e;
}

/* Holds the wallet balance readout and the PayPal/Stripe toggle on one
   shared line above the filter row. The two are mutually exclusive when
   wallet is enabled (see wireQuickTipCardPayments' providerButtonsToHide)
   — enabling "use wallet" hides the toggle and shows the readout in its
   place, so both get margin-left:auto (only one is ever visible at a
   time) rather than relying on justify-content, so whichever one IS
   showing ends up flush right exactly where the toggle sat on its own
   before this row existed. */
.quick-tip-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.quick-tip-toolbar-row .payment-provider-toggle,
.quick-tip-toolbar-row .wallet-balance-readout {
  margin: 0 0 0 auto;
}
/* Matches .payment-provider-toggle-track's 30px height (+1px border each
   side) so swapping between the two doesn't change the row's height —
   confirmed live: without this, the shorter text-only readout let
   everything below jump up a few pixels whenever wallet mode toggled on. */
.quick-tip-toolbar-row .wallet-balance-readout {
  display: flex;
  align-items: center;
  min-height: 32px;
}
/* This rule's own two-class specificity otherwise beats the single-class
   .hidden utility below it, permanently pinning display:flex regardless
   of the .hidden class — confirmed live: once the readout had shown a
   balance once, turning "use wallet" back off never actually hid it
   again. Same root cause as the .tip-provider-button/.payment-provider-
   toggle .hidden overrides already in this file. */
.quick-tip-toolbar-row .wallet-balance-readout.hidden {
  display: none;
}
/* Same specificity-vs-load-order issue as .tip-provider-button.hidden
   below — .payment-provider-toggle's own "display: flex" is declared
   later in this file than the global .hidden utility (site.css), so it
   silently wins the cascade without this override. */
.payment-provider-toggle.hidden {
  display: none;
}

/* ---- "Cover the fees" — same $ icon-button on all three tabs, shares
   .quick-tip-pin-button's 37x37 icon-button base (matches the eye/heart
   buttons it sits next to) ---- */
.fee-cover-toggle-button {
  font-weight: 800;
  font-size: 0.95rem;
}
.fee-cover-toggle-button.active {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.fee-cover-total {
  font-size: 0.85rem;
  color: #8b949e;
}

/* ---- "Use wallet first" — same icon-button family, Custom Tip and Sound
   Alerts only (Support stays real-currency-only, it's the wallet's top-up
   mechanism). Distinct color from the fee-cover $ button's green so the
   two are never confused at a glance. ---- */
.wallet-toggle-button.active {
  background: rgba(240, 180, 41, 0.18);
  border-color: rgba(240, 180, 41, 0.4);
  color: #f0b429;
}
.wallet-toggle-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wallet-toggle-icon-dot {
  fill: currentColor;
  stroke: none;
}
/* Forced off + greyed out while "use wallet first" is active — there are
   no fees on a wallet-funded spend. No prior art for a disabled toggle
   anywhere in this codebase before this; :disabled alone isn't enough
   since these are <button type="button">, not form controls that grey
   out on their own. */
.quick-tip-pin-button:disabled,
.quick-tip-pin-button.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.wallet-balance-readout {
  font-size: 0.85rem;
  color: #f0b429;
}
/* Custom Tip only — puts the balance readout on the same line as the
   "Tip amount" label instead of its own row, same margin-left:auto
   approach as .quick-tip-toolbar-row so the label keeps its normal
   position whether or not the readout is present. */
.tip-amount-label-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tip-amount-label-row .wallet-balance-readout {
  margin-left: auto;
}
.wallet-insufficient-balance {
  font-size: 0.85rem;
  color: #ef4444;
}
.tip-provider-button--wallet {
  background: rgba(240, 180, 41, 0.14);
  border-color: rgba(240, 180, 41, 0.4);
  color: #f0b429;
}
.tip-provider-button--wallet:hover,
.tip-provider-button--wallet:focus {
  background: rgba(240, 180, 41, 0.22);
}
/* It's the only visible button in #customProviderButtons' 2-column grid
   whenever it's shown (PayPal/Stripe are hidden together with it never
   showing) — span both columns and override the family's width:100% so
   margin:auto can center it as its own natural width instead of
   stretching across just the left half-column. */
#customWalletButton {
  grid-column: 1 / -1;
  width: auto;
  min-width: 220px;
  margin: 0 auto;
}

/* ---- Stripe Embedded Checkout modal (Custom Tip, Support, Sound Alerts)
   — reuses the site's existing .asset-modal component (see
   templates/account/sound_alert_form.html / static/css/site.css) rather
   than inventing new modal chrome. Stripe's own iframe mounts inside the
   panel body; no navigation away from the page happens until payment
   actually completes. ---- */
/* Lighter dimming than the base .asset-modal/.asset-modal-backdrop (used
   by the sound-asset-library modal elsewhere, left untouched) — closer to
   the subtle dim PayPal's own popup/modal uses behind it, rather than a
   near-opaque wash over the whole tip page. Scoped to this modal only via
   the --checkout modifier. */
.asset-modal--checkout {
  background: rgba(0, 0, 0, 0.35);
}
.asset-modal--checkout .asset-modal-backdrop {
  background: rgba(10, 14, 20, 0.35);
  backdrop-filter: blur(3px);
}
/* .asset-modal-panel itself has overflow:hidden (rounded-corner content
   clipping) — a close button positioned outside its edge would get
   clipped by that, so this wrapper (no overflow rule of its own) holds
   both the panel and the close button as siblings, sized to match the
   panel via the same width constraint. */
.checkout-modal-frame {
  position: relative;
  width: min(100%, 480px);
  max-width: calc(100% - 32px);
}
.asset-modal-panel--checkout {
  width: 100%;
}
/* No .asset-modal-header on this variant (no title, no big Close button)
   — the body can reclaim the vertical space that row would have used. */
.asset-modal-body--checkout {
  max-height: 90vh;
  padding-top: 16px;
}
/* Small round close control that overlaps the panel's own top-right
   corner from outside it, rather than a full header row. */
.asset-modal-close-x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(88, 166, 255, 0.3);
  background: #161b22;
  color: #58a6ff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 11002;
}
.asset-modal-close-x:hover,
.asset-modal-close-x:focus {
  background: #1c304b;
}
.stripe-embedded-checkout-mount {
  min-height: 60px;
}

/* ---- PayPal popup overlay (Custom Tip, Support, Sound Alerts) — shown
   while a popup window we opened ourselves is completing the payment.
   Same .asset-modal component as the Stripe checkout modal, just a
   simple message instead of a mounted iframe (PayPal's actual checkout
   UI lives in the separate popup window, not embedded here). ---- */
.paypal-overlay-body {
  text-align: center;
}
.paypal-overlay-icon {
  width: 56px;
  height: auto;
  margin-bottom: 10px;
  image-rendering: pixelated;
}
.paypal-overlay-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.paypal-overlay-subtitle {
  font-size: 0.85rem;
  color: #8b949e;
  margin-bottom: 16px;
}

/* ---- Responsive overrides ---- */

@media (max-width: 600px) {
  /* .tip-filter-row--quick's flex-wrap: wrap was meant for the filter
     input to reflow below the icon buttons if truly cramped, but on a
     real mobile width (iPhone 15 Pro Max, Redmi Note 11) the search
     input's own min-width was still wide enough to force just the
     wallet + fee-cover buttons onto their own second row, which reads
     as broken layout rather than a deliberate reflow. Below this width,
     keep everything on one line and let the search input (already
     flex: 1) shrink instead — it's the only element here without a
     fixed size. */
  .tip-filter-row--quick {
    flex-wrap: nowrap;
  }
  .quick-tip-search-wrapper--quick {
    min-width: 0;
  }
}