@import url("style.css");

/* =========================
   DONATE PAGE ONLY
========================= */

/* Hero section */
.donation-hero,
.donate-hero {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 20px 55px;
  color: #ffffff;
  background:
    linear-gradient(rgba(88, 28, 135, 0.58), rgba(88, 28, 135, 0.58)),
    url("../images/donate-hero.jpg") center 20% / cover no-repeat;
}

.donation-hero-content,
.donate-hero-content,
.page-hero-content {
  width: min(900px, 92%);
  margin: 0 auto;
}

.donation-hero .section-tag,
.donate-hero .section-tag,
.donation-hero .eyebrow,
.donate-hero .eyebrow {
  color: #ffffff;
  margin-bottom: 12px;
}

.donation-hero h1,
.donate-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.08;
  margin-bottom: 18px;
  color: #ffffff;
}

.donation-hero p,
.donate-hero p {
  max-width: 850px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.96);
}

/* =========================
   MAIN DONATION SECTION
========================= */
.donation-section {
  padding: 50px 0 34px;
  background: var(--section-bg);
}

.donation-layout {
  display: grid;
  grid-template-columns: 2fr 0.8fr;
  gap: 30px;
  align-items: start;
}

/* Cards */
.donation-form-card,
.giving-info-card,
.payment-card {
  background: var(--card-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Form card */
.donation-form-card {
  padding: 42px 40px 40px;
  position: relative;
}

.donation-label-box {
  position: absolute;
  top: -16px;
  left: 24px;
  background: var(--blue);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
}

.donation-form {
  margin-top: 18px;
}

/* Donate button */
.donate-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--gold);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.donate-btn:hover {
  background: #b98d25;
  transform: translateY(-1px);
}

/* =========================
   SIDE ENCOURAGEMENT CARD
========================= */
.giving-info-card {
  padding: 34px 26px;
  text-align: center;
  min-height: 100%;
}

.giving-icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
}

.giving-info-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  line-height: 1.15;
  color: var(--blue);
  margin-bottom: 18px;
}

.giving-info-card p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* =========================
   OPTIONAL GIVING
========================= */
.optional-giving {
  margin-top: 34px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.section-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  color: var(--blue);
  margin-bottom: 4px;
}

.section-heading p {
  color: var(--text-soft);
  line-height: 1.6;
}

.section-icon {
  font-size: 2rem;
  color: var(--gold);
  flex-shrink: 0;
}

.giving-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}

.giving-option-card {
  background: var(--card-surface);
  border: 1px solid #b9c4d7;
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.giving-option-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.giving-radio {
  display: none;
}

.radio-circle {
  width: 18px;
  height: 18px;
  border: 2px solid #8b96aa;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.giving-radio:checked + .radio-circle {
  border-color: var(--blue);
}

.giving-radio:checked + .radio-circle::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.option-icon {
  font-size: 2.2rem;
  color: var(--blue);
  flex-shrink: 0;
}

.option-text h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--text-main);
}

.option-text p {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.giving-radio:checked ~ .option-text h3 {
  color: var(--blue);
}

/* =========================
   PAYMENT SECTION
========================= */
.payment-section {
  padding: 0 0 42px;
  background: var(--section-bg);
}

.payment-card {
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.payment-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.payment-icon {
  font-size: 2.2rem;
  color: var(--blue);
}

.payment-left h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  color: var(--blue);
  margin-bottom: 4px;
}

.payment-left p {
  color: var(--text-soft);
  line-height: 1.6;
}

.payment-right {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.payment-right span {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue);
}

/* =========================
   DARK THEME SUPPORT
========================= */
body.theme-dark .giving-info-card h2,
body.theme-dark .section-heading h2,
body.theme-dark .payment-left h2,
body.theme-dark .option-text h3 {
  color: #ffffff;
}

body.theme-dark .payment-right span {
  color: #ffffff;
}

body.theme-dark .giving-option-card {
  border-color: #334155;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px) {
  .donation-layout,
  .giving-options-grid {
    grid-template-columns: 1fr;
  }

  .payment-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .giving-info-card h2 {
    font-size: 2rem;
  }
}

@media (max-width: 700px) {
  .donation-hero,
  .donate-hero {
    min-height: 360px;
    padding: 110px 20px 45px;
  }

  .donation-hero h1,
  .donate-hero h1 {
    font-size: 2.4rem;
  }

  .donation-form-card,
  .giving-info-card {
    padding: 26px 20px 24px;
  }

  .donation-form-card {
    padding-top: 30px;
  }

  .donation-label-box {
    position: static;
    display: inline-block;
    margin-bottom: 18px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading h2 {
    font-size: 1.7rem;
  }

  .giving-info-card h2 {
    font-size: 1.7rem;
  }

  .option-text h3 {
    font-size: 1.05rem;
  }

  .payment-right {
    gap: 16px;
    justify-content: flex-start;
  }

  .payment-right span {
    font-size: 1.5rem;
  }
}

/* Paypay donate box */

.paypal-donate-box {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid #dbe3f0;
  border-radius: 18px;
  background: #f8fbff;
}

.paypal-note {
  margin: 0 0 14px;
  color: #42526b;
  font-size: 0.98rem;
  line-height: 1.6;
}


.donate-save-btn {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 18px;
}

.form-status-message {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.5;
}

.form-status-message.show {
  display: block;
}

.form-status-message.loading {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #2463c7;
}

.form-status-message.success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #15803d;
}

.form-status-message.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #c62828;
}


/* Donation layout adjustments for PayPal box */
.donation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr);
  gap: 24px;
  align-items: start;
}

.donation-side-column {
  display: grid;
  gap: 22px;
}

.side-paypal-box {
  margin-top: 0;
}

.donate-save-btn {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 0;
}

.paypal-donate-box {
  padding: 22px;
  border: 1px solid #dbe3f0;
  border-radius: 18px;
  background: #f8fbff;
}

.paypal-note {
  margin: 0 0 14px;
  color: #42526b;
  font-size: 0.98rem;
  line-height: 1.6;
}

.form-status-message {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.5;
}

.form-status-message.show {
  display: block;
}

.form-status-message.loading {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: #2463c7;
}

.form-status-message.success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #15803d;
}

.form-status-message.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #c62828;
}

@media (max-width: 980px) {
  .donation-layout {
    grid-template-columns: 1fr;
  }

  .donation-form-card {
    order: 1;
  }

  .donation-side-column {
    order: 2;
  }
}

/* Keep PayPal box readable in both light and dark mode */
.paypal-donate-box,
.side-paypal-box {
  color: #1c2740;
}

.paypal-donate-box h1,
.paypal-donate-box h2,
.paypal-donate-box h3,
.paypal-donate-box h4,
.paypal-donate-box p,
.paypal-donate-box span,
.paypal-donate-box label,
.paypal-donate-box div,
.side-paypal-box h1,
.side-paypal-box h2,
.side-paypal-box h3,
.side-paypal-box h4,
.side-paypal-box p,
.side-paypal-box span,
.side-paypal-box label,
.side-paypal-box div {
  color: #1c2740 !important;
}

/* Dark mode override */
body.theme-dark .paypal-donate-box,
body.theme-dark .side-paypal-box {
  background: #ffffff;
  color: #1c2740 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.theme-dark .paypal-donate-box h1,
body.theme-dark .paypal-donate-box h2,
body.theme-dark .paypal-donate-box h3,
body.theme-dark .paypal-donate-box h4,
body.theme-dark .paypal-donate-box p,
body.theme-dark .paypal-donate-box span,
body.theme-dark .paypal-donate-box label,
body.theme-dark .paypal-donate-box div,
body.theme-dark .side-paypal-box h1,
body.theme-dark .side-paypal-box h2,
body.theme-dark .side-paypal-box h3,
body.theme-dark .side-paypal-box h4,
body.theme-dark .side-paypal-box p,
body.theme-dark .side-paypal-box span,
body.theme-dark .side-paypal-box label,
body.theme-dark .side-paypal-box div {
  color: #1c2740 !important;
}


/* =========================
   PAYPAL BOX DARK MODE
========================= */
body.theme-dark .paypal-donate-box,
body.theme-dark .side-paypal-box {
  background: linear-gradient(180deg, #10192f 0%, #0b1324 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

body.theme-dark .paypal-note {
  color: #dbe7ff;
}

body.theme-dark .paypal-donate-box h1,
body.theme-dark .paypal-donate-box h2,
body.theme-dark .paypal-donate-box h3,
body.theme-dark .paypal-donate-box h4,
body.theme-dark .paypal-donate-box p,
body.theme-dark .paypal-donate-box span,
body.theme-dark .side-paypal-box h1,
body.theme-dark .side-paypal-box h2,
body.theme-dark .side-paypal-box h3,
body.theme-dark .side-paypal-box h4,
body.theme-dark .side-paypal-box p,
body.theme-dark .side-paypal-box span {
  color: #f5f8ff;
}

/* Optional: make the PayPal iframe area feel cleaner */
body.theme-dark #paypal-container-TCB7LR4ZFGMSL {
  border-radius: 14px;
}

/* Make PayPal wrapper text light in dark mode */
body.theme-dark .paypal-donate-box,
body.theme-dark .side-paypal-box {
  color: #f5f8ff !important;
}

body.theme-dark .paypal-donate-box h1,
body.theme-dark .paypal-donate-box h2,
body.theme-dark .paypal-donate-box h3,
body.theme-dark .paypal-donate-box h4,
body.theme-dark .paypal-donate-box p,
body.theme-dark .paypal-donate-box span,
body.theme-dark .paypal-donate-box label,
body.theme-dark .paypal-donate-box div,
body.theme-dark .side-paypal-box h1,
body.theme-dark .side-paypal-box h2,
body.theme-dark .side-paypal-box h3,
body.theme-dark .side-paypal-box h4,
body.theme-dark .side-paypal-box p,
body.theme-dark .side-paypal-box span,
body.theme-dark .side-paypal-box label,
body.theme-dark .side-paypal-box div {
  color: #f5f8ff !important;
}

/* Keep the input area inside PayPal readable */
body.theme-dark .paypal-donate-box input,
body.theme-dark .paypal-donate-box textarea,
body.theme-dark .paypal-donate-box select,
body.theme-dark .side-paypal-box input,
body.theme-dark .side-paypal-box textarea,
body.theme-dark .side-paypal-box select {
  color: #1c2740 !important;
}

/* PayPal widget readability in dark mode */
body.theme-dark .paypal-donate-box,
body.theme-dark .side-paypal-box {
  color: #f5f8ff !important;
}

body.theme-dark .paypal-donate-box p,
body.theme-dark .paypal-donate-box h1,
body.theme-dark .paypal-donate-box h2,
body.theme-dark .paypal-donate-box h3,
body.theme-dark .paypal-donate-box h4,
body.theme-dark .paypal-donate-box span,
body.theme-dark .paypal-donate-box label,
body.theme-dark .paypal-donate-box div,
body.theme-dark .side-paypal-box p,
body.theme-dark .side-paypal-box h1,
body.theme-dark .side-paypal-box h2,
body.theme-dark .side-paypal-box h3,
body.theme-dark .side-paypal-box h4,
body.theme-dark .side-paypal-box span,
body.theme-dark .side-paypal-box label,
body.theme-dark .side-paypal-box div {
  color: #f5f8ff !important;
}

/* Keep PayPal amount field text readable */
body.theme-dark .paypal-donate-box input,
body.theme-dark .paypal-donate-box input::placeholder,
body.theme-dark .side-paypal-box input,
body.theme-dark .side-paypal-box input::placeholder {
  color: #1c2740 !important;
}

/* Force small inline amount text like $ and USD to stay dark on white field */
body.theme-dark .paypal-donate-box [class*="amount"],
body.theme-dark .paypal-donate-box [class*="currency"],
body.theme-dark .paypal-donate-box [class*="symbol"],
body.theme-dark .side-paypal-box [class*="amount"],
body.theme-dark .side-paypal-box [class*="currency"],
body.theme-dark .side-paypal-box [class*="symbol"] {
  color: #1c2740 !important;
}