/**
 * CharityGlow — Global Brand Color Overrides
 *
 * Location: assets/css/brand.css
 *
 * Enqueue this file AFTER frontend.css and admin.css so it overrides
 * the old purple/indigo defaults with the new brand palette.
 *
 * Brand palette:
 *   Primary   #15803D  Deep Green   — links, active states (progress now uses Crimson accent)
 *   Secondary #1E40AF  Royal Blue   — section headers, icons
 *   Accent    #DC2626  Crimson      — Donate Now button, CTAs
 *   BG        #F8FAFC  Off-white    — page background
 *   Heading   #111827  Near-black   — headings and strong text
 *
 * @package CharityGlow
 * @since   1.2.0
 */

/* ============================================================
   CSS CUSTOM PROPERTIES — override core plugin variables
   ============================================================ */
:root {
	/* Primary — Deep Green */
	--charityglow-primary:          #15803D;
	--charityglow-primary-dark:     #166534;
	--charityglow-primary-darker:   #14532D;
	--charityglow-primary-bg:       #dcfce7;
	--charityglow-primary-shadow:   rgba(21,128,61,.25);

	/* Secondary — Royal Blue */
	--charityglow-secondary:        #1E40AF;
	--charityglow-secondary-dark:   #1e3a8a;
	--charityglow-secondary-bg:     #dbeafe;

	/* Accent — Crimson Red (Donate Now button) */
	--charityglow-accent:           #DC2626;
	--charityglow-accent-dark:      #B91C1C;
	--charityglow-accent-bg:        #FEF2F2;

	/* Neutral */
	--charityglow-bg:               #F8FAFC;
	--charityglow-heading:          #111827;
	--charityglow-text:             #374151;
	--charityglow-text-muted:       #6B7280;
	--charityglow-border:           #E5E7EB;
	--charityglow-surface:          #ffffff;
}

/* ============================================================
   PROGRESS BAR — Primary Green (hardcoded to beat inline styles)
   ============================================================ */
.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 {
	background: #DC2626 !important;
	background: linear-gradient(90deg, #DC2626, #B91C1C) !important;
}


/* ============================================================
   PROGRESS BAR TRACK — Crimson tint background
   ============================================================ */
.progress-bar,
.charityglow-campaign-single .progress-bar,
.charityglow-campaigns-grid .campaign-card-progress .progress-bar {
	background: #fee2e2 !important;
}
/* ============================================================
   DONATE NOW / SUBMIT BUTTONS — Crimson Red (hardcoded)
   ============================================================ */
.donate-button,
.charityglow-donate-btn,
#donate-button,
.submit-button,
button[type="submit"].donate-button,
.charityglow-donation-form .donate-button,
.cg-btn--submit,
.cg-btn--primary,
/* Campaign card "Donate Now" button */
.charityglow-campaigns-grid .campaign-card-button,
.charityglow-campaigns-grid a.campaign-card-button {
	background: #DC2626 !important;
	background: linear-gradient(135deg, #DC2626, #991B1B) !important;
	color: #ffffff !important;
	border-color: #DC2626 !important;
}
.donate-button:hover,
.charityglow-donate-btn:hover,
#donate-button:hover,
.submit-button:hover,
.charityglow-donation-form .donate-button:hover,
.cg-btn--submit:hover,
.cg-btn--primary:hover,
.charityglow-campaigns-grid .campaign-card-button:hover,
.charityglow-campaigns-grid a.campaign-card-button:hover {
	background: #B91C1C !important;
	background: linear-gradient(135deg, #B91C1C, #DC2626) !important;
	box-shadow: 0 4px 14px rgba(220,38,38,.35) !important;
	color: #ffffff !important;
}

/* ============================================================
   AMOUNT BUTTONS — active state Primary Green
   ============================================================ */
.amount-btn.active,
.amount-btn:active,
.cg-amount-btn--active {
	background: var(--charityglow-primary) !important;
	border-color: var(--charityglow-primary) !important;
	color: #fff !important;
}
.amount-btn:hover,
.cg-amount-btn:hover {
	border-color: var(--charityglow-primary) !important;
}

/* ============================================================
   FREQUENCY / GATEWAY TABS — Primary Green active
   ============================================================ */
.cg-freq-btn--active,
.cg-gw-tab--active,
.gateway-option input:checked + .gateway-label,
.gateway-option input:checked ~ .gateway-label {
	border-color: var(--charityglow-primary) !important;
	color: var(--charityglow-primary) !important;
	background: var(--charityglow-primary-bg) !important;
}

/* ============================================================
   FORM INPUT FOCUS — Primary Green
   ============================================================ */
input:focus,
select:focus,
textarea:focus,
.stripe-element.StripeElement--focus,
.cg-field__input:focus,
.cg-field__textarea:focus,
.cg-field__select:focus {
	border-color: var(--charityglow-primary) !important;
	box-shadow: 0 0 0 3px rgba(21,128,61,.12) !important;
	outline: none !important;
}

/* ============================================================
   SECTION HEADERS / TITLES — Secondary Blue
   ============================================================ */
.campaign-title,
.charityglow-campaign-single h1,
.section-title,
.form-section h3,
.campaign-header h1,
h1.campaign-title {
	color: var(--charityglow-secondary) !important;
}

/* ============================================================
   ICONS — Secondary Blue
   ============================================================ */
.charityglow-campaign-single .dashicons,
.stat-item .stat-value,
.campaign-badge {
	color: var(--charityglow-secondary) !important;
}

/* ============================================================
   GATEWAY RADIO LABELS — selected border Primary Green
   ============================================================ */
.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;
	background: var(--charityglow-primary-bg) !important;
}

/* ============================================================
   SECURE NOTICE / TRUST BADGE
   ============================================================ */
.secure-notice,
.charityglow-secure-notice {
	color: var(--charityglow-primary) !important;
}

/* ============================================================
   ADMIN — upgrade / pro badges — Green + Blue gradient
   ============================================================ */
.charityglow-upgrade-notice,
.charityglow-upgrade-hero {
	background: linear-gradient(135deg, #15803D 0%, #1E40AF 100%) !important;
}
.charityglow-pro-badge {
	background: linear-gradient(135deg, #15803D, #1E40AF) !important;
}
.feature-card .dashicons {
	color: var(--charityglow-primary) !important;
}

/* ============================================================
   CAMPAIGN STATS — raised amount highlight
   ============================================================ */
.stat-item:first-child .stat-value {
	color: var(--charityglow-primary) !important;
	font-weight: 700;
}

/* ============================================================
   RECENT DONORS — avatar background
   ============================================================ */
.donor-avatar {
	background: var(--charityglow-primary) !important;
	color: #fff !important;
}

/* ============================================================
   SHARE BUTTONS
   Each button keeps its own brand colour on both normal and
   hover state. !important is required to beat the specificity
   of this file's own :root variables used elsewhere.
   ============================================================ */

/* Normal state — white text on each brand background */
.share-btn                { color: #fff !important; }
.share-facebook           { background: #1877f2 !important; color: #fff !important; }
.share-twitter            { background: #000000 !important; color: #fff !important; }
.share-linkedin           { background: #0a66c2 !important; color: #fff !important; }
.share-email              { background: #6b7280 !important; color: #fff !important; }
.share-whatsapp           { background: #25d366 !important; color: #fff !important; }

/* Hover state — slightly darker brand colour, still white text */
.share-btn:hover          { color: #fff !important; }
.share-facebook:hover     { background: #0b5fcc !important; color: #fff !important; }
.share-twitter:hover      { background: #1a1a1a !important; color: #fff !important; }
.share-linkedin:hover     { background: #004d99 !important; color: #fff !important; }
.share-email:hover        { background: #4b5563 !important; color: #fff !important; }
.share-whatsapp:hover     { background: #1aab52 !important; color: #fff !important; }

/* ============================================================
   STEP PROGRESS — Form Builder multi-step
   ============================================================ */
.cg-step-progress__fill {
	background: var(--charityglow-primary) !important;
}
.cg-step--active .cg-step__number {
	background: var(--charityglow-primary) !important;
	border-color: var(--charityglow-primary) !important;
}
.cg-step--completed .cg-step__number {
	background: var(--charityglow-secondary) !important;
	border-color: var(--charityglow-secondary) !important;
}

/* ============================================================
   PAGE BACKGROUND
   ============================================================ */
.charityglow-campaign-single,
.charityglow-donation-form-wrapper,
.cg-custom-form-wrap {
	background: transparent;
}
body {
	background-color: var(--charityglow-bg);
}

/* ============================================================
   FORCE OVERRIDE — PHP inline style CSS variable fix
   The plugin outputs --charityglow-primary via wp_add_inline_style
   based on get_option('charityglow_primary_color'). Until the setting
   is updated in the DB these rules beat the variable with hardcoded values.
   ============================================================ */

/* Progress fills — every context */
[class*="progress-fill"] {
	background: #DC2626 !important;
	background: linear-gradient(90deg, #DC2626, #B91C1C) !important;
}

/* Campaign grid card button — hardcoded amber */
.charityglow-campaigns-grid .campaign-card-button {
	background: #DC2626 !important;
	color: #ffffff !important;
}
.charityglow-campaigns-grid .campaign-card-button:hover {
	background: #B91C1C !important;
	color: #ffffff !important;
}

/* Progress percentage text */
.charityglow-campaigns-grid .progress-percentage,
.charityglow-campaign-single .progress-percentage {
	color: #DC2626 !important;
	font-weight: 700;
}

/* Campaign card title link hover */
.charityglow-campaigns-grid .campaign-card-title a:hover {
	color: #15803D !important;
}

/* ============================================================
   OUTLINE / GHOST BUTTONS — Crimson border + text
   ============================================================ */
.btn-outline,
.charityglow-btn-outline,
.cg-btn--outline,
.charityglow-thank-you-page .btn-outline,
.campaign-secondary-btn,
.learn-more-btn {
	background: transparent !important;
	border: 2px solid #DC2626 !important;
	color: #DC2626 !important;
}
.btn-outline:hover,
.charityglow-btn-outline:hover,
.cg-btn--outline:hover,
.charityglow-thank-you-page .btn-outline:hover,
.campaign-secondary-btn:hover,
.learn-more-btn:hover {
	background: #DC2626 !important;
	border-color: #DC2626 !important;
	color: #ffffff !important;
}