/* =============================================================================
   WP Donation Plugin — Frontend Styles
   All colors are explicit hardcoded values on every element.
   No inherited colors. No theme can override these without !important.
   Dynamic accent color is injected via wp_head as inline CSS variables.
   ============================================================================= */

/* ── CSS variable defaults (overridden by dynamic inline style from settings) */
:root {
    --wpdp-green:      #10b981;
    --wpdp-green-dark: #059669;
    --wpdp-green-light:#d1fae5;
}

/* ── Shared font reset for all plugin elements ─────────────────────────────── */
.wpdp-form-wrap,
.wpdp-checkout-wrap,
.wpdp-campaign-grid,
.wpdp-thankyou,
.wpdp-instructions {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* Force box-sizing on all plugin children */
.wpdp-form-wrap *,
.wpdp-checkout-wrap *,
.wpdp-campaign-grid *,
.wpdp-thankyou *,
.wpdp-instructions * {
    box-sizing: border-box;
}

/* ── Form wrapper ─────────────────────────────────────────────────────────── */

.wpdp-form-wrap {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    max-width: 480px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06) !important;
    color: #111827 !important;
}

/* ── Campaign header ──────────────────────────────────────────────────────── */

.wpdp-campaign-image {
    margin: -2rem -2rem 1.25rem;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    height: 200px;
}
.wpdp-campaign-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wpdp-form-wrap .wpdp-campaign-title, .wpdp-checkout-wrap .wpdp-campaign-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 .5rem !important;
    line-height: 1.3 !important;
}
.wpdp-form-wrap .wpdp-campaign-desc {
    font-size: .9rem !important;
    color: #6b7280 !important;
    margin: 0 0 1.25rem !important;
    line-height: 1.6 !important;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */

.wpdp-progress {
    margin-bottom: 1.5rem;
}
.wpdp-progress__stats {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: .5rem !important;
}
.wpdp-form-wrap .wpdp-progress__raised {
    font-size: 1rem !important;
    color: #111827 !important;
}
.wpdp-form-wrap .wpdp-progress__raised strong {
    color: #059669 !important;
    font-size: 1.15rem !important;
}
.wpdp-form-wrap .wpdp-progress__goal {
    font-size: .85rem !important;
    color: #6b7280 !important;
}
.wpdp-progress__bar {
    height: 10px !important;
    background: #d1fae5 !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}
.wpdp-progress__fill {
    height: 100% !important;
    background: var(--wpdp-green, #10b981) !important;
    border-radius: 99px !important;
    transition: width .6s ease !important;
    min-width: 2px !important;
}
.wpdp-form-wrap .wpdp-progress__meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: .8rem !important;
    color: #6b7280 !important;
    margin-top: .4rem !important;
}

/* ── Amount buttons ───────────────────────────────────────────────────────── */

.wpdp-amounts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 1rem !important;
}
.wpdp-amount-btn {
    padding: .6rem .5rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    color: #111827 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}
.wpdp-amount-btn:hover {
    border-color: var(--wpdp-green, #10b981) !important;
    background: #d1fae5 !important;
    color: #059669 !important;
}
.wpdp-amount-btn.is-active {
    border-color: var(--wpdp-green, #10b981) !important;
    background: var(--wpdp-green, #10b981) !important;
    color: #ffffff !important;
}
.wpdp-amount-btn--custom {
    font-style: italic !important;
}

/* ── Custom amount input ──────────────────────────────────────────────────── */

.wpdp-custom-field {
    margin-bottom: 1rem !important;
}
.wpdp-form-wrap .wpdp-custom-field label {
    display: block !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    margin-bottom: .4rem !important;
}
.wpdp-input-wrap {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: border-color .15s !important;
    background: #ffffff !important;
}
.wpdp-input-wrap:focus-within {
    border-color: var(--wpdp-green, #10b981) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important;
}
.wpdp-input-wrap__symbol {
    padding: 0 .75rem !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-right: 1px solid #e5e7eb !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.wpdp-custom-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 0 .75rem !important;
    font-size: 1.05rem !important;
    height: 44px !important;
    color: #111827 !important;
    background: transparent !important;
    -moz-appearance: textfield !important;
    font-family: inherit !important;
    box-shadow: none !important;
}
.wpdp-custom-input::-webkit-outer-spin-button,
.wpdp-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Selected display ─────────────────────────────────────────────────────── */

.wpdp-form-wrap .wpdp-selected-display {
    font-size: .9rem !important;
    color: #6b7280 !important;
    margin-bottom: .75rem !important;
    text-align: center !important;
}
.wpdp-form-wrap .wpdp-selected-amount {
    color: #059669 !important;
    font-size: 1rem !important;
}

/* ── Submit button ────────────────────────────────────────────────────────── */

.wpdp-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: .85rem 1.5rem !important;
    background: var(--wpdp-green, #10b981) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, transform .1s !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    font-family: inherit !important;
}
.wpdp-submit-btn:hover:not(:disabled) {
    background: var(--wpdp-green-dark, #059669) !important;
    color: #ffffff !important;
}
.wpdp-submit-btn:active:not(:disabled) { transform: scale(.98) !important; }
.wpdp-submit-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }
.wpdp-submit-btn.is-loading .wpdp-submit-btn__text::after { content: '…'; }
.wpdp-submit-btn svg { flex-shrink: 0; }

/* ── Secure note ──────────────────────────────────────────────────────────── */

.wpdp-form-wrap .wpdp-secure-note, .wpdp-checkout__form .wpdp-secure-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: .78rem !important;
    color: #9ca3af !important;
    margin: .75rem 0 0 !important;
    text-align: center !important;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */

.wpdp-message {
    margin-top: 1rem !important;
    padding: .75rem 1rem !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    display: none;
}
.wpdp-message.is-success {
    display: block !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #10b981 !important;
}
.wpdp-message.is-error {
    display: block !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
}

/* ── Campaign grid ────────────────────────────────────────────────────────── */

.wpdp-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.wpdp-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06) !important;
    transition: transform .2s, box-shadow .2s;
    color: #111827 !important;
}
.wpdp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.1) !important;
}
.wpdp-card__image { height: 180px; overflow: hidden; }
.wpdp-card__img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: transform .4s;
}
.wpdp-card:hover .wpdp-card__img { transform: scale(1.03); }
.wpdp-card__body { padding: 1.25rem !important; }
.wpdp-campaign-grid .wpdp-card__title {
    font-size: 1rem !important; font-weight: 600 !important;
    margin: 0 0 .5rem !important; line-height: 1.35 !important;
}
.wpdp-card__title a {
    color: #111827 !important; text-decoration: none !important;
}
.wpdp-card__title a:hover { color: #059669 !important; }
.wpdp-campaign-grid .wpdp-card__excerpt {
    font-size: .85rem !important; color: #6b7280 !important;
    margin: 0 0 1rem !important; line-height: 1.55 !important;
}
.wpdp-card__progress { margin-bottom: .75rem; }
.wpdp-card__progress-bar {
    height: 6px !important; background: #d1fae5 !important;
    border-radius: 99px !important; overflow: hidden !important; margin-bottom: .35rem !important;
}
.wpdp-card__progress-fill {
    height: 100% !important; background: var(--wpdp-green, #10b981) !important; border-radius: 99px !important;
}
.wpdp-campaign-grid .wpdp-card__progress-stats {
    display: flex !important; justify-content: space-between !important;
    font-size: .8rem !important; color: #6b7280 !important;
}
.wpdp-campaign-grid .wpdp-card__meta {
    display: flex !important; gap: .75rem !important;
    font-size: .8rem !important; color: #6b7280 !important; margin-bottom: 1rem !important;
}
.wpdp-card__quick-donate { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.wpdp-card__amount-btn {
    padding: .4rem .7rem !important; border: 1px solid #e5e7eb !important;
    border-radius: 6px !important; background: #f9fafb !important;
    color: #111827 !important; font-size: .85rem !important; font-weight: 500 !important; cursor: pointer !important;
    transition: all .15s; text-decoration: none !important;
}
.wpdp-card__amount-btn:hover,
.wpdp-card__amount-btn.is-active {
    border-color: var(--wpdp-green, #10b981) !important;
    background: #d1fae5 !important; color: #059669 !important;
}
.wpdp-card__give-btn {
    margin-left: auto !important; padding: .4rem 1rem !important;
    background: var(--wpdp-green, #10b981) !important; color: #ffffff !important;
    border-radius: 6px !important; font-size: .85rem !important; font-weight: 600 !important;
    text-decoration: none !important; transition: background .15s;
    display: inline-block !important;
}
.wpdp-card__give-btn:hover {
    background: var(--wpdp-green-dark, #059669) !important; color: #ffffff !important;
}

/* ── Thank you page ───────────────────────────────────────────────────────── */

.wpdp-thankyou {
    text-align: center !important;
    padding: 2rem 1rem !important;
    border: 1px solid #10b981 !important;
    border-radius: 12px !important;
    background: #d1fae5 !important;
    margin-bottom: 2rem !important;
    color: #065f46 !important;
}
.wpdp-thankyou__heart {
    font-size: 2.5rem !important;
    color: #059669 !important;
    margin-bottom: .5rem !important;
    animation: wpdp-heartbeat .8s ease infinite alternate;
    display: block !important;
}
@keyframes wpdp-heartbeat {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}
.wpdp-thankyou .wpdp-thankyou h2, .wpdp-thankyou h2 {
    color: #065f46 !important;
    margin: 0 0 .5rem !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}
.wpdp-thankyou p {
    color: #065f46 !important;
    font-size: .95rem !important;
    margin: .5rem 0 0 !important;
}
.wpdp-thankyou .wpdp-thankyou__note {
    color: #047857 !important;
    font-size: .9rem !important;
    margin: .5rem 0 0 !important;
}

/* ── Payment instructions ─────────────────────────────────────────────────── */

.wpdp-instructions {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 1.25rem 1.5rem !important;
    margin-top: 1.5rem !important;
    white-space: pre-line !important;
    color: #374151 !important;
}
.wpdp-instructions .wpdp-instructions h3, .wpdp-instructions h3 {
    margin: 0 0 .75rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
}
.wpdp-instructions p {
    color: #374151 !important;
    font-size: .9rem !important;
    margin: 0 0 .5rem !important;
}

/* ── Checkout page layout ─────────────────────────────────────────────────── */

.wpdp-checkout-wrap {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 2rem !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    align-items: start !important;
}
@media (max-width: 620px) {
    .wpdp-checkout-wrap { grid-template-columns: 1fr !important; }
}

/* ── Checkout summary box (the green panel) ──────────────────────────────────
   Every rule is prefixed with .wpdp-checkout__summary so specificity is
   always 0,2,0 or higher — beats .post-content p (0,1,1) even without
   !important on the theme side. We keep !important as extra insurance.
   ─────────────────────────────────────────────────────────────────────────── */

.wpdp-checkout__summary {
    background: var(--wpdp-green, #10b981) !important;
    border-radius: 12px !important;
    padding: 2rem 1.5rem !important;
    text-align: center !important;
    position: sticky !important;
    top: 2rem !important;
    color: #ffffff !important;
}

/* Blanket reset — catches anything the theme targets with element or class selectors */
.wpdp-checkout__summary *         { color: #ffffff !important; }
.wpdp-checkout__summary p         { color: #ffffff !important; margin: 0 !important; }
.wpdp-checkout__summary span      { color: #ffffff !important; }
.wpdp-checkout__summary strong    { color: #ffffff !important; }
.wpdp-checkout__summary a         { color: rgba(255,255,255,.8) !important; }
.wpdp-checkout__summary div       { color: #ffffff !important; }

/* Individual elements — double-class specificity (0,2,0) beats .post-content p */
.wpdp-checkout__summary .wpdp-checkout__heart {
    font-size: 2rem !important;
    color: #ffffff !important;
    margin-bottom: .5rem !important;
    display: block !important;
    animation: wpdp-heartbeat .8s ease infinite alternate;
    line-height: 1 !important;
}
.wpdp-checkout__summary .wpdp-checkout__label {
    font-size: .75rem !important;
    color: rgba(255,255,255,.85) !important;
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
    display: block !important;
    border: none !important;
    background: none !important;
}
.wpdp-checkout__summary .wpdp-checkout__amount {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 .4rem !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    display: block !important;
    border: none !important;
    background: none !important;
}
.wpdp-checkout__summary .wpdp-checkout__campaign {
    font-size: .9rem !important;
    color: rgba(255,255,255,.9) !important;
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
    background: none !important;
}
.wpdp-checkout__summary .wpdp-checkout__campaign strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.wpdp-checkout__summary .wpdp-checkout__back {
    display: inline-block !important;
    font-size: .8rem !important;
    color: rgba(255,255,255,.8) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted rgba(255,255,255,.5) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    transition: color .15s !important;
    margin-top: .25rem !important;
    background: none !important;
    padding: 0 !important;
}
.wpdp-checkout__summary .wpdp-checkout__back:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── Checkout form panel ──────────────────────────────────────────────────── */

.wpdp-checkout__form {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06) !important;
    color: #111827 !important;
}
.wpdp-checkout__form .wpdp-checkout__heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 1rem !important;
    padding-bottom: .6rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.wpdp-field-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
    margin-bottom: 0 !important;
}
@media (max-width: 440px) {
    .wpdp-field-row { grid-template-columns: 1fr !important; }
}
.wpdp-field {
    margin-bottom: .9rem !important;
}
.wpdp-checkout__form .wpdp-field label, .wpdp-form-wrap .wpdp-field label {
    display: block !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: .35rem !important;
}
.wpdp-field label span { color: #ef4444 !important; }
.wpdp-optional {
    color: #9ca3af !important;
    font-weight: 400 !important;
    font-size: .8rem !important;
}
.wpdp-field input[type="text"],
.wpdp-field input[type="email"],
.wpdp-field textarea {
    width: 100% !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: .6rem .8rem !important;
    font-size: .95rem !important;
    color: #111827 !important;
    background: #ffffff !important;
    transition: border-color .15s, box-shadow .15s !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.wpdp-field input[type="text"]::placeholder,
.wpdp-field input[type="email"]::placeholder,
.wpdp-field textarea::placeholder {
    color: #9ca3af !important;
}
.wpdp-field input[type="text"]:focus,
.wpdp-field input[type="email"]:focus,
.wpdp-field textarea:focus {
    border-color: var(--wpdp-green, #10b981) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important;
    outline: none !important;
}
.wpdp-field textarea {
    resize: vertical !important;
    min-height: 80px !important;
}
.wpdp-checkout__payment-info { margin: 1.25rem 0 1.5rem !important; }
.wpdp-checkout__form .wpdp-checkout__payment-desc {
    font-size: .9rem !important;
    color: #374151 !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: .85rem 1rem !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
.wpdp-checkout__submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: .9rem 1.5rem !important;
    background: var(--wpdp-green, #10b981) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .15s, transform .1s !important;
    font-family: inherit !important;
    text-decoration: none !important;
    letter-spacing: .01em !important;
}
.wpdp-checkout__submit:hover:not(:disabled) {
    background: var(--wpdp-green-dark, #059669) !important;
    color: #ffffff !important;
}
.wpdp-checkout__submit:active:not(:disabled) { transform: scale(.98) !important; }
.wpdp-checkout__submit:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.wpdp-checkout__submit.is-loading .wpdp-checkout__submit-text::after { content: '…'; }

/* Anon checkbox in checkout */
.wpdp-checkout__form .wpdp-field label[for=""] ,
.wpdp-checkout__form .wpdp-field label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: #374151 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}

/* ── Error box ────────────────────────────────────────────────────────────── */

.wpdp-error {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    padding: 1rem 1.25rem !important;
    font-size: .95rem !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .wpdp-form-wrap { padding: 1.25rem !important; }
    .wpdp-amounts { grid-template-columns: repeat(3, 1fr) !important; }
    .wpdp-checkout__form { padding: 1.25rem !important; }
}