/* Stripe Donations - Donation Form
   CSS variables set inline by PHP on .donation-form-wrapper:
   --main-color        legacy single-color (backwards compat)
   --sd-color-primary  and all other --sd-* tokens from admin palette
*/

.donation-form-wrapper {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--sd-color-text, #333);
  box-sizing: border-box;
}

.donation-form-wrapper * {
  box-sizing: border-box;
}

.donation-form-container {
  max-width: 450px;
  margin: 30px auto;
  padding: 50px 40px;
  border-radius: 15px;
  background: var(--sd-color-background, rgb(253, 247, 240));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--sd-color-primary, var(--main-color, #111));
}

/* Main heading */
.donation-title {
  text-align: center;
  font-size: 1.6em;
  font-weight: 600;
  color: var(--sd-color-primary, var(--main-color, #111));
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.donation-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--sd-color-primary, var(--main-color, #111));
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

/* Supporting text */
.donation-subtext {
  text-align: center;
  font-size: 0.95em;
  color: var(--sd-color-text-muted, #777);
  margin-bottom: 18px;
  line-height: 1.45;
}

.donation-subtext p {
  margin: 0;
  font-size: 1em;
}

/* Step system */
.donation-step {
  display: none;
}

.donation-step.active {
  display: block;
  animation: sdFadeIn 0.25s ease-out;
}

/* Tabs */
.donation-tabs {
  display: flex;
  border-bottom: 2px solid var(--sd-color-border, #e0e0e0);
  margin-bottom: 20px;
}

.donation-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
  font-size: 1em;
  color: var(--sd-color-text-muted, #666);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.donation-tab.active {
  color: var(--sd-color-primary, var(--main-color, #111));
  font-weight: bold;
  border-bottom: 3px solid var(--sd-color-primary, var(--main-color, #111));
}

.donation-tab-content {
  margin-bottom: 0;
}

/* Preset amount buttons */
.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.preset-button {
  flex: 1 1 calc(33.333% - 10px);
  background: var(--sd-color-surface, #fff);
  border: 2px solid var(--sd-color-border, #ddd);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  color: var(--sd-color-text, #333);
  transition: border-color 0.18s ease, transform 0.12s ease;
}

.preset-button:hover {
  border-color: var(--sd-color-primary, var(--main-color, #111));
  transform: translateY(-1px);
}

.preset-button.selected {
  background: var(--sd-color-primary, var(--main-color, #111));
  border-color: var(--sd-color-primary, var(--main-color, #111));
  color: var(--sd-color-primary-contrast, #fff);
  transform: scale(1.02);
}

/* Custom amount */
.custom-amount {
  margin-top: 10px;
}

.custom-amount input {
  width: 100%;
  padding: 12px;
  font-size: 1em;
  border: 2px solid var(--sd-color-border, #ddd);
  border-radius: 8px;
  color: var(--sd-color-text, #333);
  background: var(--sd-color-surface, #fff);
  transition: border-color 0.15s ease;
}

.custom-amount input:focus {
  outline: none;
  border-color: var(--sd-color-primary, var(--main-color, #111));
}

/* Primary action buttons */
.continue-button,
.donate-now-button {
  width: 100%;
  background: var(--sd-color-primary, var(--main-color, #111));
  color: var(--sd-color-primary-contrast, #fff);
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  margin-top: 14px;
}

.continue-button:hover,
.donate-now-button:hover {
  background: var(--sd-color-primary-hover, var(--main-color, #000));
  transform: translateY(-1px);
}

.continue-button:active,
.donate-now-button:active {
  transform: translateY(0);
}

/* Back button in step 2 */
.sd-back-btn {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0;
  font-size: 0.9em;
  font-family: inherit;
  color: var(--sd-color-text-muted, #666);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sd-back-btn:hover {
  color: var(--sd-color-text, #333);
}

.sd-back-btn:focus-visible {
  outline: 2px solid var(--sd-color-primary, #111);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Step 2 form fields */
#step-2 label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--sd-color-text, #333);
}

#step-2 input[type="text"],
#step-2 input[type="email"],
#step-2 input[type="tel"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 2px solid var(--sd-color-border, #ddd);
  border-radius: 8px;
  font-size: 1em;
  color: var(--sd-color-text, #333);
  background: var(--sd-color-surface, #fff);
  transition: border-color 0.15s ease;
}

#step-2 input[type="text"]:focus,
#step-2 input[type="email"]:focus,
#step-2 input[type="tel"]:focus {
  outline: none;
  border-color: var(--sd-color-primary, var(--main-color, #111));
}

/* Animations */
@keyframes sdFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .donation-step.active { animation: none; }
  .preset-button, .continue-button, .donate-now-button, .custom-amount input, .donation-tab { transition: none; }
  .preset-button:hover, .preset-button.selected, .continue-button:hover, .donate-now-button:hover { transform: none; }
}

/* Privacy notice shown under the donor fields on step 2 */
#step-2 .donation-content {
  margin-bottom: 12px;
}

.sd-privacy-notice {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sd-color-text-muted, #6b7280);
  text-align: center;
}

.sd-privacy-notice__link {
  color: var(--sd-color-primary, var(--main-color, #111));
  text-decoration: underline;
}

.sd-privacy-notice__link:hover,
.sd-privacy-notice__link:focus {
  text-decoration: none;
}

/* Inline amount error (step 1, above continue button) */
.sd-amount-error {
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  /* rgba fallback for browsers without color-mix() */
  background: rgba(220, 38, 38, 0.08);
  background: color-mix(in srgb, var(--sd-color-error, #dc2626) 8%, transparent);
  border: 1px solid var(--sd-color-error, #dc2626);
  color: var(--sd-color-error, #dc2626);
  font-size: 0.875em;
  line-height: 1.5;
  animation: sdShakeError 0.3s ease-out;
}

.sd-amount-error[hidden] {
  display: none;
}

/* Standalone error box used by [stripe_donation_notice] for backend/Stripe errors.
   Same visual language as .sd-amount-error but without the shake animation, since
   it appears once on page load rather than as a response to user interaction. */
.sd-error {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.08);
  background: color-mix(in srgb, var(--sd-color-error, #dc2626) 8%, transparent);
  border: 1px solid var(--sd-color-error, #dc2626);
  color: var(--sd-color-error, #dc2626);
  font-size: 0.95em;
  line-height: 1.5;
}

.sd-error p {
  margin: 0;
}

@keyframes sdShakeError {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  80%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-amount-error { animation: none; }
}

/* Mobile */
@media (max-width: 480px) {
  .donation-form-container {
    padding: 28px 20px;
    margin: 16px auto;
  }

  .preset-button {
    flex: 1 1 calc(50% - 10px);
  }
}