/* 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-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;
}
.anon-toggle-button.active {
  background: rgba(88, 166, 255, 0.18);
  border-color: rgba(88, 166, 255, 0.4);
  color: #58a6ff;
}
.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;
}

/* --- 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;
}