/*
 * America's Soup Kitchen — Bloomerang Custom CSS
 * Brand: Warm, dignified, community-focused
 * EIN: 85-2339886 | americassoupkitchen.org
 *
 * Upload this file in Bloomerang under:
 * Settings > Donation Forms > [Your Form] > Appearance > Custom CSS
 * ----------------------------------------------------------------- */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@300;400;700&display=swap');

/* ── Brand Tokens ── */
:root {
  --ask-red:        #C0392B;   /* primary brand red */
  --ask-red-dark:   #962d22;   /* hover / active */
  --ask-cream:      #FDF6EC;   /* warm off-white background */
  --ask-gold:       #D4A84B;   /* accent warm gold */
  --ask-brown:      #5C3D2E;   /* dark warm text */
  --ask-gray:       #7a7a7a;   /* muted labels */
  --ask-border:     #E8D9C5;   /* subtle warm border */
  --ask-white:      #FFFFFF;
  --ask-success:    #2E7D32;
  --ask-error:      #C62828;
  --ask-register:      #45b29d;   /* register button teal */
  --ask-register-dark: #379d89;   /* register button hover */
  --ask-radius:     6px;
  --ask-shadow:     0 2px 12px rgba(92, 61, 46, 0.10);
}

/* ── Overall Container ── */
body,
.hosted-page,
.donation-widget,
#donation-form-container {
  background-color: var(--ask-cream) !important;
  font-family: 'Lato', sans-serif !important;
  color: var(--ask-brown) !important;
}

/* ── Page / Form Card ── */
.form-container,
.widget-container,
.donation-form,
.bloomerang-form {
  background: var(--ask-white) !important;
  border-radius: 10px !important;
  box-shadow: var(--ask-shadow) !important;
  border: 1px solid var(--ask-border) !important;
  padding: 32px !important;
  max-width: 680px !important;
  margin: 32px auto !important;
}

/* ── Page Header / Organization Name ── */
.org-name,
.organization-name,
h1.page-title,
.form-header h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--ask-red) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px !important;
}

/* ── Sub-headline / tagline ── */
.form-header p,
.form-subtitle,
.page-subtitle {
  font-family: 'Lato', sans-serif !important;
  font-size: 1rem !important;
  color: var(--ask-gray) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  margin-bottom: 24px !important;
}

/* ── Section Headings (Amount, Personal Info, Payment) ── */
h2, h3,
.section-title,
.step-title,
legend {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--ask-brown) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--ask-gold) !important;
  padding-bottom: 6px !important;
  margin-bottom: 18px !important;
}

/* ── Labels ── */
label,
.form-label,
.field-label {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--ask-brown) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── Text Inputs, Selects, Textareas ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea,
.form-control,
.input-field {
  font-family: 'Lato', sans-serif !important;
  font-size: 0.95rem !important;
  color: var(--ask-brown) !important;
  background: var(--ask-white) !important;
  border: 1.5px solid var(--ask-border) !important;
  border-radius: var(--ask-radius) !important;
  padding: 10px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--ask-red) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}

/* ── Donation Amount Buttons ── */
.amount-button,
.donation-amount,
.preset-amount,
.amount-option,
.amount-btn {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--ask-red) !important;
  background: var(--ask-white) !important;
  border: 2px solid var(--ask-red) !important;
  border-radius: var(--ask-radius) !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.amount-button:hover,
.donation-amount:hover,
.preset-amount:hover,
.amount-option:hover,
.amount-btn:hover {
  background: var(--ask-red) !important;
  color: var(--ask-white) !important;
}

.amount-button.selected,
.amount-button.active,
.donation-amount.selected,
.preset-amount.selected,
.amount-option.selected,
.amount-btn.active {
  background: var(--ask-red) !important;
  color: var(--ask-white) !important;
  border-color: var(--ask-red-dark) !important;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.25) !important;
}

/* ── "Other Amount" / Custom Input ── */
.custom-amount-input,
input.other-amount {
  border: 2px solid var(--ask-gold) !important;
}

.custom-amount-input:focus,
input.other-amount:focus {
  border-color: var(--ask-red) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}

/* ── Frequency Tabs (One-time / Monthly) ── */
.frequency-options,
.giving-frequency,
.frequency-tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.frequency-option,
.frequency-tab,
.frequency-btn {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--ask-gray) !important;
  background: var(--ask-white) !important;
  border: 2px solid var(--ask-border) !important;
  border-radius: var(--ask-radius) !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.frequency-option.selected,
.frequency-option.active,
.frequency-tab.selected,
.frequency-tab.active,
.frequency-btn.active {
  background: var(--ask-gold) !important;
  border-color: var(--ask-gold) !important;
  color: var(--ask-white) !important;
}

/* ── Primary Submit / Donate Button ── */
button[type="submit"],
input[type="submit"],
.btn-primary,
.donate-button,
.submit-button,
.btn-donate {
  font-family: 'Lato', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ask-white) !important;
  background: var(--ask-red) !important;
  border: none !important;
  border-radius: var(--ask-radius) !important;
  padding: 14px 32px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.30) !important;
  margin-top: 8px !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover,
.donate-button:hover,
.submit-button:hover {
  background: var(--ask-red-dark) !important;
  box-shadow: 0 5px 16px rgba(192, 57, 43, 0.40) !important;
  transform: translateY(-1px) !important;
}

button[type="submit"]:active,
input[type="submit"]:active,
.donate-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.25) !important;
}

/* ── Secondary / Cancel Button ── */
.btn-secondary,
.cancel-button {
  font-family: 'Lato', sans-serif !important;
  color: var(--ask-gray) !important;
  background: transparent !important;
  border: 1.5px solid var(--ask-border) !important;
  border-radius: var(--ask-radius) !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.cancel-button:hover {
  border-color: var(--ask-gray) !important;
  color: var(--ask-brown) !important;
}

/* ── Checkboxes & Radio Buttons ── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ask-red) !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  cursor: pointer !important;
}

/* ── Helper Text / Field Hints ── */
.help-text,
.field-hint,
small,
.form-text {
  font-size: 0.8rem !important;
  color: var(--ask-gray) !important;
  margin-top: 4px !important;
}

/* ── Error Messages ── */
.error-message,
.field-error,
.validation-error,
.alert-danger {
  font-size: 0.83rem !important;
  color: var(--ask-error) !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}

input.error,
input.is-invalid,
select.error {
  border-color: var(--ask-error) !important;
}

/* ── Success / Confirmation Banner ── */
.success-message,
.confirmation-banner,
.alert-success,
.thank-you-message {
  background: #F1F8F1 !important;
  border: 1.5px solid var(--ask-success) !important;
  border-radius: var(--ask-radius) !important;
  color: var(--ask-success) !important;
  padding: 16px 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ── Tribute / Dedication Section ── */
.tribute-section,
.dedication-section {
  background: var(--ask-cream) !important;
  border: 1px solid var(--ask-border) !important;
  border-radius: var(--ask-radius) !important;
  padding: 16px !important;
  margin-top: 12px !important;
}

/* ── Progress Bar (Campaigns) ── */
.progress-bar-container,
.campaign-progress {
  background: var(--ask-border) !important;
  border-radius: 99px !important;
  height: 10px !important;
  overflow: hidden !important;
}

.progress-bar-fill,
.campaign-progress-fill {
  background: linear-gradient(90deg, var(--ask-red), var(--ask-gold)) !important;
  height: 100% !important;
  border-radius: 99px !important;
  transition: width 0.6s ease !important;
}

/* ── Cover Transaction Fee Checkbox ── */
.cover-fee-section,
.transaction-fee {
  background: #FFF8F0 !important;
  border: 1px dashed var(--ask-gold) !important;
  border-radius: var(--ask-radius) !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  font-size: 0.88rem !important;
}

/* ── Dividers ── */
hr,
.form-divider {
  border: none !important;
  border-top: 1px solid var(--ask-border) !important;
  margin: 24px 0 !important;
}

/* ── Footer / Legal Text ── */
.form-footer,
.legal-text,
.footer-note,
.powered-by {
  font-size: 0.75rem !important;
  color: var(--ask-gray) !important;
  text-align: center !important;
  margin-top: 20px !important;
  line-height: 1.5 !important;
}

/* ── Links ── */
a, a:visited {
  color: var(--ask-red) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--ask-red-dark) !important;
  text-decoration: underline !important;
}

/* ── Register Button ── */
.btn-register,
.register-button,
button.register,
a.register,
input[type="submit"].register,
[class*="register-btn"] {
  font-family: 'Lato', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ask-white) !important;
  background: var(--ask-register) !important;
  border: none !important;
  border-radius: var(--ask-radius) !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 3px 10px rgba(69, 178, 157, 0.30) !important;
}

.btn-register:hover,
.register-button:hover,
button.register:hover,
a.register:hover,
[class*="register-btn"]:hover {
  background: var(--ask-register-dark) !important;
  box-shadow: 0 5px 16px rgba(69, 178, 157, 0.40) !important;
  transform: translateY(-1px) !important;
}

.btn-register:active,
.register-button:active,
button.register:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(69, 178, 157, 0.25) !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .form-container,
  .widget-container,
  .donation-form {
    padding: 20px 16px !important;
    margin: 12px !important;
  }

  .org-name,
  h1.page-title {
    font-size: 1.5rem !important;
  }

  .amount-button,
  .preset-amount,
  .amount-option {
    padding: 9px 12px !important;
    font-size: 0.9rem !important;
  }

  button[type="submit"],
  input[type="submit"],
  .donate-button {
    font-size: 0.95rem !important;
    padding: 13px 20px !important;
  }
}
