/**
 * CharityGlow — Master Elementor Brand Override
 *
 * One override file for the CharityGlow CSS files:
 *   - brand.css
 *   - frontend.css
 *   - campaign-sections.css
 *   - campaign-single-hero.css
 *   - setup-wizard.css
 *   - settings-styles.css
 *   - admin.css
 *
 * Loaded after the plugin CSS.
 *
 * Elementor Global Colors:
 *   Primary       #164B35
 *   Secondary     #76C340
 *   Text          #284239
 *   Accent        #4C8C48
 *   Dark Green    #123827
 *   Light Green   #E5EFDB
 *   Cream         #FBFAF4
 *   Light Cream   #EEF3E9
 *   Beige         #F1DDB2
 *   White         #FFFFFF
 *   Forest Green  #1E5B3D
 */

:root {
    /* Elementor Global Colors */
    --charityglow-primary: #164B35;
    --charityglow-secondary: #76C340;
    --charityglow-text: #284239;
    --charityglow-accent: #4C8C48;

    /* Derived colors */
    --charityglow-primary-dark: #123827;
    --charityglow-primary-darker: #123827;
    --charityglow-primary-light: #1E5B3D;
    --charityglow-primary-bg: #E5EFDB;
    --charityglow-primary-shadow: rgba(22,75,53,.25);

    --charityglow-secondary-dark: #5FA32F;
    --charityglow-secondary-bg: #E5EFDB;

    --charityglow-accent-dark: #3D713A;
    --charityglow-accent-bg: #EEF3E9;

    --charityglow-bg: #FBFAF4;
    --charityglow-heading: #123827;
    --charityglow-text-muted: #66756D;
    --charityglow-border: #EEF3E9;
    --charityglow-surface: #FFFFFF;

    /* Elementor aliases */
    --elementor-dark-green: #123827;
    --elementor-light-green: #E5EFDB;
    --elementor-cream: #FBFAF4;
    --elementor-light-cream: #EEF3E9;
    --elementor-beige: #F1DDB2;
    --elementor-white: #FFFFFF;
    --elementor-forest-green: #1E5B3D;
    --elementor-light-bg: rgba(238,243,233,.5);
}


/* ============================================================
   1. DONATE / SUBMIT / CTA BUTTONS
   Accent = #4C8C48
   ============================================================ */

.donate-button,
.charityglow-donate-btn,
#donate-button,
.submit-button,
button[type="submit"].donate-button,
.charityglow-donation-form .donate-button,
.charityglow-submit,
.wizard-submit,
.card-submit,
.card-submit-btn,
.charitable-submit,
.charitable-submit-btn,
.donate-btn,
.inline-donate-btn,
.inline-submit-btn,
.wizard-nav-btn.primary,
.wizard-next,
.cg-btn--submit,
.cg-btn--primary,
.cg-btn--success,
.minimal-btn,
.minimal-submit {
    background: var(--charityglow-accent) !important;
    background-color: var(--charityglow-accent) !important;
    background-image: none !important;
    color: var(--charityglow-surface) !important;
    border-color: var(--charityglow-accent) !important;
}

/* Campaign card Donate Now */
.charityglow-campaigns-grid a.campaign-card-button,
.charityglow-campaigns-grid .campaign-card-button {
    background: var(--charityglow-accent) !important;
    background-color: var(--charityglow-accent) !important;
    background-image: none !important;
    color: var(--charityglow-surface) !important;
    border-color: var(--charityglow-accent) !important;
    box-shadow: none !important;
}

/* CTA hover */
.donate-button:hover,
.charityglow-donate-btn:hover,
#donate-button:hover,
.submit-button:hover,
.charityglow-donation-form .donate-button:hover,
.charityglow-submit:hover,
.wizard-submit:hover,
.card-submit:hover,
.card-submit-btn:hover,
.charitable-submit:hover,
.charitable-submit-btn:hover:not(:disabled),
.donate-btn:hover,
.inline-donate-btn:hover,
.inline-submit-btn:hover,
.wizard-nav-btn.primary:hover,
.wizard-next:hover,
.cg-btn--submit:hover,
.cg-btn--primary:hover,
.cg-btn--success:hover,
.minimal-btn:hover,
.minimal-submit:hover,
.charityglow-campaigns-grid a.campaign-card-button:hover,
.charityglow-campaigns-grid .campaign-card-button:hover {
    background: var(--charityglow-accent-dark) !important;
    background-color: var(--charityglow-accent-dark) !important;
    background-image: none !important;
    color: var(--charityglow-surface) !important;
    border-color: var(--charityglow-accent-dark) !important;
}

/* CTA focus / active */
.donate-button:focus,
.donate-button:active,
#donate-button:focus,
#donate-button:active,
.submit-button:focus,
.submit-button:active,
.charityglow-donation-form .donate-button:focus,
.charityglow-donation-form .donate-button:active {
    background: var(--charityglow-accent-dark) !important;
    background-color: var(--charityglow-accent-dark) !important;
    background-image: none !important;
    color: var(--charityglow-surface) !important;
    border-color: var(--charityglow-accent-dark) !important;
}


/* ============================================================
   2. PROGRESS BARS
   Preserve existing role: progress uses Accent.
   ============================================================ */

.progress-fill,
.charityglow-progress-fill,
.campaign-progress .progress-fill,
.charityglow-campaigns-grid .progress-fill,
.charityglow-campaign-single .progress-fill,
.charityglow-card-form .progress-fill,
.campaign-card-progress .progress-fill,
.campaign-progress-fill,
.charityglow-progress-bar .progress-fill {
    background: var(--charityglow-accent) !important;
    background-image: none !important;
}

.progress-bar,
.charityglow-campaign-single .progress-bar,
.charityglow-campaigns-grid .campaign-card-progress .progress-bar,
.charityglow-progress-bar .progress-bar {
    background: var(--charityglow-accent-bg) !important;
}


/* ============================================================
   3. PRIMARY GREEN — active states / links / selections
   ============================================================ */

.amount-btn.active,
.amount-btn:active,
.cg-amount-btn--active,
.charityglow-card-form .amount-btn.active,
.charityglow-card-form .amount-btn.selected {
    background: var(--charityglow-primary) !important;
    background-color: var(--charityglow-primary) !important;
    border-color: var(--charityglow-primary) !important;
    color: var(--charityglow-surface) !important;
}

.amount-btn:hover,
.cg-amount-btn:hover,
.charityglow-card-form .amount-btn:hover {
    border-color: var(--charityglow-primary) !important;
}

.cg-freq-btn--active,
.cg-gw-tab--active,
.gateway-option input:checked + .gateway-label,
.gateway-option input:checked ~ .gateway-label,
.gateway-option:has(input:checked) .gateway-label,
.offline-method-option:has(input:checked),
.cg-offline-method-option:has(input:checked) {
    border-color: var(--charityglow-primary) !important;
    color: var(--charityglow-primary) !important;
    background: var(--charityglow-primary-bg) !important;
}

input:focus,
select:focus,
textarea:focus,
.stripe-element.StripeElement--focus,
.cg-field__input:focus,
.cg-field__textarea:focus,
.cg-field__select:focus,
.charityglow-input:focus {
    border-color: var(--charityglow-primary) !important;
    box-shadow: 0 0 0 3px rgba(22,75,53,.12) !important;
    outline: none !important;
}


/* ============================================================
   4. SECONDARY GREEN — headings / section titles / icons
   ============================================================ */

.campaign-title,
.charityglow-campaign-single h1,
.section-title,
.form-section h3,
.campaign-header h1,
h1.campaign-title,
.charityglow-form-header h2,
.charitable-form-title,
.charitable-section-title,
.charityglow-donation-form .section-label,
.charityglow-donation-form .section-title {
    color: var(--charityglow-secondary) !important;
}

.charityglow-campaign-single .dashicons,
.stat-item .stat-value,
.campaign-badge {
    color: var(--charityglow-secondary) !important;
}


/* ============================================================
   5. GENERAL TEXT / BACKGROUNDS / BORDERS
   ============================================================ */

.charityglow-donation-form,
.charityglow-card-form,
.charitable-donation-form-wrapper,
.charityglow-inline-form,
.charityglow-campaigns-grid .campaign-card,
.charityglow-campaign-single .campaign-progress-section,
.charityglow-campaign-single .campaign-description,
.charityglow-campaign-single .campaign-share,
.charityglow-campaign-single .campaign-recent-donors {
    background: var(--charityglow-surface) !important;
}

.charityglow-donation-form .form-group label,
.charityglow-card-form .form-field label,
.charityglow-campaigns-grid .campaign-card-title,
.charityglow-campaigns-grid .campaign-card-title a,
.charityglow-campaign-single .stat-value,
.charityglow-campaign-single .donor-name,
.charityglow-card-form .amount-value {
    color: var(--charityglow-heading) !important;
}

.charityglow-campaigns-grid .campaign-card-description,
.charityglow-campaigns-grid .campaign-card-category,
.charityglow-campaigns-grid .campaign-card-raised-line .raised-label,
.charityglow-campaigns-grid .campaign-card-raised-line .days-left,
.charityglow-campaigns-grid .campaign-card-raised-line .supporter-count,
.charityglow-campaign-single .stat-label,
.charityglow-campaign-single .donor-details {
    color: var(--charityglow-text-muted) !important;
}

.charityglow-campaign-single .campaign-description,
.charityglow-campaigns-grid .campaign-card-description,
.charityglow-card-form .form-field label {
    color: var(--charityglow-text) !important;
}

.charityglow-campaign-single .campaign-title a:hover,
.charityglow-campaigns-grid .campaign-card-title a:hover {
    color: var(--charityglow-primary) !important;
}


/* ============================================================
   6. CAMPAIGN CARD BUTTON — high specificity
   ============================================================ */

.charityglow-campaigns-grid
.campaign-card
.campaign-card-content
a.campaign-card-button {
    background: #4C8C48 !important;
    background-color: #4C8C48 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #4C8C48 !important;
    box-shadow: none !important;
}

.charityglow-campaigns-grid
.campaign-card
.campaign-card-content
a.campaign-card-button:hover {
    background: #3D713A !important;
    background-color: #3D713A !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #3D713A !important;
}


/* ============================================================
   7. CARD FORM / WIZARD
   ============================================================ */

.charityglow-card-form .card-header {
    background: linear-gradient(
        135deg,
        var(--charityglow-secondary),
        var(--charityglow-secondary-dark)
    ) !important;
}

.wizard-progress-fill,
.wizard-step-num.completed {
    background: var(--charityglow-primary) !important;
}

.charityglow-wizard-form .amount-btn:hover,
.charityglow-wizard-form .amount-btn.active,
.charityglow-wizard-form .amount-btn.selected {
    border-color: var(--charityglow-primary) !important;
    background: var(--charityglow-primary) !important;
    color: var(--charityglow-surface) !important;
}


/* ============================================================
   8. CAMPAIGN SINGLE HERO
   ============================================================ */

.cg-hero-layout {
    --cg-accent: var(--charityglow-accent);
    --cg-accent-dk: var(--charityglow-accent-dark);
    --cg-accent-bg: var(--charityglow-accent-bg);
    --cg-primary: var(--charityglow-primary);
    --cg-secondary: var(--charityglow-secondary);
    --cg-text: var(--charityglow-text);
    --cg-muted: var(--charityglow-text-muted);
    --cg-border: var(--charityglow-border);
    --cg-surface: var(--charityglow-surface);
    --cg-bg: var(--charityglow-bg);
    --cg-hero-dark: var(--charityglow-primary-dark);
}

.cg-hero {
    background: var(--charityglow-primary-dark) !important;
}

.cg-hero--no-image {
    background: linear-gradient(
        150deg,
        #123827 0%,
        #164B35 45%,
        #1E5B3D 100%
    ) !important;
}

.cg-hero__overlay {
    background: linear-gradient(
        to top,
        rgba(18,56,39,.95) 0%,
        rgba(18,56,39,.55) 45%,
        rgba(18,56,39,.10) 100%
    ) !important;
}

.cg-hero__live-badge {
    background: var(--charityglow-accent) !important;
    color: #FFFFFF !important;
}

.cg-section-label {
    color: var(--charityglow-secondary) !important;
}

.cg-section-label::before {
    background: var(--charityglow-secondary) !important;
}

.cg-donate-card__top {
    background: linear-gradient(
        135deg,
        #123827 0%,
        #1E5B3D 100%
    ) !important;
}

.cg-campaign-ended {
    background: var(--charityglow-accent-bg) !important;
    color: var(--charityglow-accent-dark) !important;
}


/* ============================================================
   9. DONATION FORM DETAILS
   ============================================================ */

.charityglow-donation-form .amount-btn {
    background: var(--charityglow-bg) !important;
    color: var(--charityglow-heading) !important;
}

.charityglow-donation-form .amount-btn:hover {
    background: var(--charityglow-primary-bg) !important;
    border-color: var(--charityglow-primary) !important;
    color: var(--charityglow-primary) !important;
}

.charityglow-donation-form .amount-btn.active,
.charityglow-donation-form .amount-btn.selected {
    background: var(--charityglow-primary) !important;
    border-color: var(--charityglow-primary) !important;
    color: #FFFFFF !important;
}

.charityglow-donation-form .gateway-option:hover,
.charityglow-donation-form .offline-method-option:hover {
    border-color: var(--charityglow-primary) !important;
    background: var(--charityglow-primary-bg) !important;
}

.charityglow-donation-form .offline-details {
    background: var(--charityglow-primary-bg) !important;
}

.charityglow-donation-form .offline-details h5 {
    color: var(--charityglow-primary) !important;
}

.secure-notice,
.charityglow-secure-notice {
    color: var(--charityglow-primary) !important;
}


/* ============================================================
   10. THANK-YOU / FAILED PAGES
   ============================================================ */

.charityglow-thank-you-page .share-section {
    background: var(--charityglow-bg) !important;
}

.charityglow-thank-you-page .share-title {
    color: var(--charityglow-secondary) !important;
}

.charityglow-thank-you-page .btn-primary {
    background: linear-gradient(
        135deg,
        var(--charityglow-accent),
        var(--charityglow-accent-dark)
    ) !important;
    color: #FFFFFF !important;
}

.charityglow-thank-you-page .btn-primary:hover {
    background: var(--charityglow-accent-dark) !important;
    color: #FFFFFF !important;
}

.charityglow-thank-you-page .btn-outline:hover {
    border-color: var(--charityglow-primary) !important;
    color: var(--charityglow-primary) !important;
}

.charityglow-failed-page .btn-primary {
    background: var(--charityglow-secondary) !important;
    color: #FFFFFF !important;
}

.charityglow-failed-page .btn-primary:hover {
    background: var(--charityglow-secondary-dark) !important;
}


/* ============================================================
   11. CAMPAIGN SECTIONS
   ============================================================ */

.cg-sections-panel__header,
.cg-sections-tabs,
.cg-sections-panel__footer {
    background: var(--charityglow-bg) !important;
}

.cg-sections-tab:hover,
.cg-sections-tab--active {
    color: var(--charityglow-primary) !important;
}

.cg-sections-tab--active {
    border-bottom-color: var(--charityglow-primary) !important;
}

.cg-sections-tab__status--on {
    background: var(--charityglow-primary-bg) !important;
    color: var(--charityglow-primary) !important;
}

.cg-btn--primary {
    background: var(--charityglow-accent) !important;
    border-color: var(--charityglow-accent) !important;
    color: #FFFFFF !important;
}

.cg-btn--primary:hover {
    background: var(--charityglow-accent-dark) !important;
}

.cg-btn--outline {
    color: var(--charityglow-primary) !important;
    border-color: var(--charityglow-primary) !important;
}

.cg-btn--outline:hover {
    background: var(--charityglow-primary-bg) !important;
}

.cg-campaign-section__title svg {
    color: var(--charityglow-primary) !important;
}

.cg-related__progress-fill {
    background: var(--charityglow-accent) !important;
}


/* ============================================================
   12. SETUP WIZARD
   ============================================================ */

.cg-wizard-body {
    background: var(--charityglow-bg) !important;
    color: var(--charityglow-heading);
}

.cg-wizard-progress__step--active .cg-wizard-progress__circle,
.cg-wizard-progress__step--done .cg-wizard-progress__circle {
    border-color: var(--charityglow-primary) !important;
    background: var(--charityglow-primary) !important;
}

.cg-wizard-progress__step--active .cg-wizard-progress__label,
.cg-wizard-progress__step--done .cg-wizard-progress__label {
    color: var(--charityglow-primary) !important;
}

.cg-wizard-progress__step--done .cg-wizard-progress__connector {
    background: var(--charityglow-primary) !important;
}

.cg-wizard-step__icon rect {
    fill: var(--charityglow-primary-bg) !important;
}

.cg-wizard-step__icon path,
.cg-wizard-step__icon circle {
    stroke: var(--charityglow-primary) !important;
}


/* ============================================================
   13. BUTTON TEXT + LOADERS
   ============================================================ */

.charityglow-donation-form .donate-button,
.charityglow-wizard-form .btn-next,
.charityglow-wizard-form .btn-submit,
.charityglow-card-form .card-submit-btn,
.charityglow-inline-form .inline-submit-btn,
.charityglow-inline-form .inline-donate-btn,
.charityglow-minimal-form .minimal-btn,
.charityglow-minimal-form .minimal-submit {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

.btn-loader svg circle,
.btn-loader svg path,
.button-loader svg circle,
.button-loader svg path {
    stroke: #FFFFFF !important;
}


/* ============================================================
   14. ADMIN / SETTINGS BRAND COLORS
   These selectors are scoped so they do not affect unrelated WP UI.
   ============================================================ */

.charityglow-settings .charityglow-settings-footer .button-primary {
    background: var(--charityglow-accent) !important;
    border-color: var(--charityglow-accent-dark) !important;
    color: #FFFFFF !important;
}

.charityglow-settings .charityglow-settings-footer .button-primary:hover {
    background: var(--charityglow-accent-dark) !important;
    border-color: var(--charityglow-accent-dark) !important;
}

input:checked + .charityglow-slider {
    background-color: var(--charityglow-primary) !important;
}

.charityglow-donor-status.new {
    background-color: var(--charityglow-secondary) !important;
}

.charityglow-donor-avatar {
    background: var(--charityglow-primary) !important;
}

.charityglow-stat-item .stat-icon {
    color: #FFFFFF !important;
}

.charityglow-stats-minimal .stat-icon,
.charityglow-stats-minimal .stat-icon svg {
    color: var(--charityglow-primary) !important;
}

/* ============================================================
   15. CAMPAIGN CARD PROGRESS PERCENTAGE
   brand.css sets this to old Crimson with !important.
   Use the Elementor Accent color instead.
   ============================================================ */

.charityglow-campaigns-grid
.campaign-card
.campaign-card-progress
.progress-stats
.progress-percentage,
.charityglow-campaigns-grid
.campaign-card-progress
.progress-percentage,
.charityglow-campaign-single
.progress-percentage {
    color: var(--charityglow-accent) !important;
}

/* ============================================================
   16. CAMPAIGN SINGLE HERO — SIDEBAR PROGRESS
   campaign-single-hero.css uses .cg-prog-fill and a hardcoded
   red gradient. Override it with the Elementor Accent color.
   ============================================================ */

.cg-hero-layout .cg-donate-card .cg-prog-fill,
.cg-hero-layout .cg-prog-fill {
    background: var(--charityglow-accent) !important;
    background-color: var(--charityglow-accent) !important;
    background-image: none !important;
}

.cg-hero-layout .cg-donate-card .cg-prog-labels,
.cg-hero-layout .cg-prog-labels {
    color: var(--charityglow-text-muted) !important;
}

.cg-hero-layout .cg-donate-card .cg-prog-labels strong,
.cg-hero-layout .cg-prog-labels strong {
    color: var(--charityglow-accent) !important;
}