/* ============================================================
   Beloved Prayer — Donation Page Theme
   Matches the belovedprayer.com ebook store design system:
   warm cream, deep navy, radiant gold, Playfair Display + Lato.
   Tuned for readers aged 40-60: large text, high contrast,
   big easy-to-tap controls, calm layout.
   ============================================================ */

/* ---------- Design tokens (mirror the main site) ---------- */
:root {
    /* Brand palette */
    --bp-ink:         #1c2333;
    --bp-ink-soft:    #4a5368;
    --bp-cream:       #faf6ee;
    --bp-cream-deep:  #f3ecdd;
    --bp-card:        #ffffff;
    --bp-gold:        #c9a227;
    --bp-gold-bright: #e3bd4b;
    --bp-gold-deep:   #a8861d;
    --bp-gold-soft:   #f5e7c1;
    --bp-navy:        #16203a;
    --bp-navy-deep:   #0f1729;
    --bp-line:        #e6ddc9;
    --bp-success:     #2e7d4f;
    --bp-error:       #b3402f;

    /* Type */
    --bp-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --bp-body:  'Lato', 'Helvetica Neue', Arial, sans-serif;

    /* ---- Override the payment-form core tokens ---- */
    --cgp-primary:         var(--bp-gold);
    --cgp-primary-hover:   var(--bp-gold-bright);
    --cgp-primary-active:  var(--bp-gold-deep);
    --cgp-success:         var(--bp-success);
    --cgp-error:           var(--bp-error);
    --cgp-text-primary:    var(--bp-ink);
    --cgp-text-secondary:  var(--bp-ink-soft);
    --cgp-text-light:      #8a91a3;
    --cgp-bg-primary:      var(--bp-card);
    --cgp-bg-secondary:    var(--bp-cream);
    --cgp-border:          var(--bp-line);
    --cgp-border-light:    #f0e9d8;
    --cgp-font-family:     var(--bp-body);
}

/* ---- Override the theme "skin" tokens so every themed component
       (form card, presets, inputs, donor wall) inherits the brand. ---- */
.cgp-payment-wrap,
.cgp-donor-list-wrapper {
    --cgp-skin-bg:             var(--bp-cream) !important;
    --cgp-skin-bg-alt:         var(--bp-cream-deep) !important;
    --cgp-skin-accent:         var(--bp-gold) !important;
    --cgp-skin-accent-deep:    var(--bp-gold-deep) !important;
    --cgp-skin-secondary:      var(--bp-navy) !important;
    --cgp-skin-secondary-deep: var(--bp-navy-deep) !important;
    --cgp-skin-text:           var(--bp-ink) !important;
    --cgp-skin-text-soft:      var(--bp-ink-soft) !important;
    --cgp-skin-line:           var(--bp-line) !important;
    --cgp-skin-card:           var(--bp-card) !important;
    --cgp-skin-input-bg:       #fdfbf5 !important;
    --cgp-skin-serif:          var(--bp-serif) !important;
    --cgp-skin-shadow:         0 18px 48px rgba(22,32,58,.16), 0 4px 14px rgba(201,162,39,.10) !important;
    --cgp-skin-glow:           0 0 70px rgba(201,162,39,.16) !important;
    --cgp-skin-stat-bg:        linear-gradient(135deg, #f3ecdd 0%, rgba(201,162,39,.22) 100%) !important;
    /* No background image: soft cream wash */
    --cgp-skin-bg-radial:      radial-gradient(circle at top, rgba(201,162,39,.10), transparent 60%),
                               linear-gradient(180deg, #faf6ee 0%, #f3ecdd 100%) !important;
    /* With background image: deep navy veil with a hint of golden glow */
    --cgp-skin-overlay:        linear-gradient(160deg, rgba(22,32,58,.90) 0%, rgba(15,23,41,.94) 100%) !important;
}

/* ---------- Base ---------- */
body {
    font-family: var(--bp-body) !important;
    font-size: 19px !important;
    line-height: 1.75 !important;
    color: var(--bp-ink) !important;
    background: var(--bp-cream) !important;
    -webkit-font-smoothing: antialiased;
}

p, label, li, span, div { line-height: 1.75; }

/* Headings use the elegant serif */
h1, h2, h3, h4,
.cgp-form-title,
.cgp-donor-list-title {
    font-family: var(--bp-serif) !important;
    color: var(--bp-ink) !important;
    letter-spacing: .01em;
}

/* ---------- Hero band (form wrap) ---------- */
.cgp-payment-wrap {
    border-radius: 18px !important;
    margin: 26px auto 0 !important;
}

/* ---------- Form card ---------- */
.cgp-payment-container {
    max-width: 720px !important;
    margin: 0 auto 2.2rem !important;
}
.cgp-payment-form {
    background: var(--bp-card) !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: 20px !important;
    padding: 3rem 2.6rem 2.6rem !important;
    box-shadow: 0 24px 60px rgba(15,23,41,.35), 0 0 0 1px rgba(201,162,39,.18) !important;
}

/* Form title & description */
.cgp-form-title {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    margin-bottom: .7rem !important;
}
.cgp-form-description {
    font-size: 1.08rem !important;
    color: var(--bp-ink-soft) !important;
    max-width: 480px;
    margin: 0 auto 2.2rem !important;
}

/* Logo */
.cgp-logo { max-height: 72px !important; }

/* ---------- Labels ---------- */
.cgp-payment-form label {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: var(--bp-ink) !important;
    margin-bottom: 10px !important;
    display: block;
}
.cgp-required { color: var(--bp-gold-deep) !important; }

/* ---------- Inputs & textarea ---------- */
.cgp-payment-form input[type="text"],
.cgp-payment-form input[type="number"],
.cgp-payment-form input[type="email"],
.cgp-payment-form textarea,
#cgp-amount, #cgp-donor-name, #cgp-donor-message {
    font-family: var(--bp-body) !important;
    font-size: 1.18rem !important;
    padding: 16px 18px !important;
    border: 2px solid var(--bp-line) !important;
    border-radius: 12px !important;
    background: #fdfbf5 !important;
    color: var(--bp-ink) !important;
    width: 100%;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.cgp-payment-form input:focus,
.cgp-payment-form textarea:focus,
#cgp-amount:focus, #cgp-donor-name:focus, #cgp-donor-message:focus {
    outline: none !important;
    border-color: var(--bp-gold) !important;
    box-shadow: 0 0 0 5px rgba(201,162,39,.18) !important;
    background: #ffffff !important;
}
.cgp-amount-info,
.cgp-char-counter {
    font-size: .98rem !important;
    color: var(--bp-ink-soft) !important;
}

/* ---------- Preset amount buttons ---------- */
.cgp-preset-btn {
    font-family: var(--bp-body) !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    padding: 15px 10px !important;
    border-radius: 12px !important;
    border: 2px solid var(--bp-gold) !important;
    background: #ffffff !important;
    color: var(--bp-gold-deep) !important;
    cursor: pointer;
    transition: all .25s ease;
}
.cgp-preset-btn:hover {
    background: var(--bp-gold-soft) !important;
    transform: translateY(-2px);
}
.cgp-preset-btn.cgp-preset-active,
.cgp-preset-btn:active {
    background: linear-gradient(135deg, var(--bp-gold-bright), var(--bp-gold)) !important;
    border-color: var(--bp-gold-deep) !important;
    color: #241c05 !important;
    box-shadow: 0 6px 16px rgba(201,162,39,.4) !important;
}

/* ---------- Donate button (matches main-site gold CTA) ---------- */
.cgp-pay-button,
#cgp-pay-btn {
    font-family: var(--bp-body) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    padding: 19px 40px !important;
    border-radius: 60px !important;
    background: linear-gradient(135deg, var(--bp-gold-bright), var(--bp-gold)) !important;
    color: #241c05 !important;
    border: none !important;
    cursor: pointer;
    width: 100%;
    letter-spacing: .02em;
    box-shadow: 0 10px 28px rgba(201,162,39,.45) !important;
    transition: all .25s ease;
}
.cgp-pay-button:hover:not(:disabled),
#cgp-pay-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(201,162,39,.6) !important;
    color: #241c05 !important;
}
.cgp-pay-button:disabled,
#cgp-pay-btn:disabled,
.cgp-pay-button.disabled-state {
    opacity: .55 !important;
    cursor: not-allowed;
    transform: none !important;
}

/* ---------- Messages ---------- */
.cgp-messages .success,
.cgp-messages .error {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    margin: 16px 0;
}
.cgp-messages .success {
    background: #e9f3ec !important;
    color: var(--bp-success) !important;
    border: 1px solid #c4e0cf !important;
}
.cgp-messages .error {
    background: #fbeceb !important;
    color: var(--bp-error) !important;
    border: 1px solid #f0cbc6 !important;
}

/* ---------- Anonymous checkbox ---------- */
.cgp-payment-form input[type="checkbox"] {
    width: 26px !important;
    height: 26px !important;
    accent-color: var(--bp-gold);
    vertical-align: middle;
    margin-right: 10px;
}
.cgp-checkbox-label {
    font-size: 1.08rem !important;
    color: var(--bp-ink-soft) !important;
    display: inline-flex;
    align-items: center;
}

/* ---------- Security badges ---------- */
.cgp-security-badges {
    border-top: 1px solid var(--bp-line);
    padding-top: 20px;
}
.cgp-security-text,
.cgp-feature {
    color: var(--bp-ink-soft) !important;
    font-size: 1rem !important;
    font-weight: 700;
}

/* ---------- Donor wall ---------- */
.cgp-donor-list-wrapper {
    background: var(--bp-cream-deep) !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: 22px !important;
    padding: 2.2rem 1.6rem !important;
}
.cgp-donor-list-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--bp-ink) !important;
}
.cgp-donor-card {
    background: var(--bp-card) !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 4px 16px rgba(28,35,51,.07) !important;
}
.cgp-donor-name {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: var(--bp-ink) !important;
}
.cgp-donor-amount {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: var(--bp-gold-deep) !important;
}
.cgp-donor-message {
    font-size: 1.05rem !important;
    color: var(--bp-ink-soft) !important;
    margin-top: 8px;
}
.cgp-donor-time {
    font-size: .95rem !important;
    color: #8a91a3 !important;
}
.cgp-donor-avatar {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, var(--bp-gold-bright), var(--bp-gold)) !important;
    color: #241c05 !important;
}
.cgp-donor-initial {
    font-size: 1.4rem !important;
    font-weight: 800;
    color: #241c05 !important;
}

/* Load more */
.cgp-donor-load-more {
    font-family: var(--bp-body) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    padding: 16px 40px !important;
    border-radius: 60px !important;
    border: 2px solid var(--bp-gold) !important;
    background: #ffffff !important;
    color: var(--bp-gold-deep) !important;
    cursor: pointer;
    transition: all .25s ease;
}
.cgp-donor-load-more:hover {
    background: linear-gradient(135deg, var(--bp-gold-bright), var(--bp-gold)) !important;
    color: #241c05 !important;
}

/* ---------- Image upload ---------- */
.cgp-image-drop {
    font-size: 1.08rem !important;
    border: 2px dashed var(--bp-line) !important;
    border-radius: 14px !important;
    padding: 26px !important;
    background: #fdfbf5 !important;
    color: var(--bp-ink-soft) !important;
}
.cgp-image-drop:hover {
    border-color: var(--bp-gold) !important;
    color: var(--bp-gold-deep) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    body { font-size: 18px !important; }
    .cgp-payment-wrap { margin: 14px 10px 0 !important; }
    .cgp-payment-form { padding: 2.2rem 1.4rem 2rem !important; }
    .cgp-form-title { font-size: 1.7rem !important; }
    .cgp-preset-btn { flex: 1 1 30%; min-width: 0; }
    .cgp-pay-button, #cgp-pay-btn { font-size: 1.2rem !important; }
}