/**
 * CharityGlow — Global Brand Color Overrides (Premium Palette)
 *
 * Location: assets/css/brand.css
 *
 * Enqueue this file AFTER frontend.css and admin.css so it overrides
 * older defaults with the NEW Premium CharityGlow palette:
 *
 *   Primary:   #16645A  Teal Green      — active states, selected items
 *   Secondary: #123A32  Dark Teal Ink   — section headers, icons, headings
 *   Accent:    #F5A623  Amber Gold      — Donate Now / all CTAs / progress
 *   BG:        #F2F7F5  Pale Mint       — page backgrounds
 *   Border:    #E5EEEB  Pale Border     — card borders
 *   Text:      #17332C  Charcoal Green  — text on gold buttons
 *   Dark text: #123A32  Dark Teal Ink   — headings
 *   Muted:     #7C948D  Muted Sage      — subtext
 *   Cream:     #FFE3AC  Cream Gold      — text on dark gradient areas
 *
 * Gradients (Premium FinTech-grade):
 *   Deep Teal:  linear-gradient(135deg, #0A2B27 → #0E3B36 → #16645A)
 *   Amber Gold: linear-gradient(135deg, #F5A623 → #FDBA3B  → #FFC24D)
 *
 * Tokens:
 *   Radius: 10 / 14 / 20 px
 *   Shadow: soft teal-tinted (no harsh black)
 *   Transition: cubic-bezier (no jarring linear)
 *
 * @package CharityGlow
 * @since   1.2.0
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES — override core plugin variables
   ============================================================ */
:root {
	/* Primary — Teal Green */
	--charityglow-primary:          #16645A;
	--charityglow-primary-dark:     #0E3B36;
	--charityglow-primary-darker:   #0A2B27;
	--charityglow-primary-bg:       rgba(22, 100, 90, 0.08);
	--charityglow-primary-shadow:   rgba(22, 100, 90, 0.22);

	/* Secondary — Dark Teal Ink */
	--charityglow-secondary:        #123A32;
	--charityglow-secondary-dark:   #0A2B27;
	--charityglow-secondary-bg:     rgba(18, 58, 50, 0.06);

	/* Accent — Amber Gold (CTA / Progress) */
	--charityglow-accent:           #F5A623;
	--charityglow-accent-dark:      #D4891A;
	--charityglow-accent-bg:        rgba(245, 166, 35, 0.10);

	/* Premium gradient shorthands */
	--charityglow-gradient-deep:    linear-gradient(135deg, #0A2B27 0%, #0E3B36 40%, #16645A 100%);
	--charityglow-gradient-gold:    linear-gradient(135deg, #F5A623 0%, #FDBA3B 50%, #FFC24D 100%);

	/* Neutral (Sage / Mint family) */
	--charityglow-bg:               #F2F7F5;
	--charityglow-heading:          #123A32;
	--charityglow-text:             #17332C;
	--charityglow-text-muted:       #7C948D;
	--charityglow-border:           #E5EEEB;
	--charityglow-surface:          #ffffff;

	/* Premium UI tokens */
	--charityglow-radius-sm:        8px;
	--charityglow-radius-md:        12px;
	--charityglow-radius-lg:        16px;
	--charityglow-radius-xl:        20px;
	--charityglow-ease:             cubic-bezier(0.4, 0, 0.2, 1);
	--charityglow-shadow-sm:        0 2px 8px  rgba(10,43,39,.05);
	--charityglow-shadow-md:        0 4px 16px rgba(10,43,39,.08);
	--charityglow-shadow-lg:        0 8px 32px rgba(10,43,39,.10);
	--charityglow-shadow-gold-md:   0 4px 14px rgba(245,166,35,.25);
	--charityglow-shadow-gold-lg:   0 8px 24px rgba(245,166,35,.35);
}

/* ============================================================
   2. PROGRESS BAR — Amber Gold gradient (hardcoded beats inline)
   ============================================================ */
.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: var(--charityglow-gradient-gold) !important;
	border-radius: 999px !important;
}

/* Progress bar TRACK — Pale Amber (not red anymore) */
.progress-bar,
.charityglow-campaign-single .progress-bar,
.charityglow-campaigns-grid .campaign-card-progress .progress-bar,
.charityglow-progress-bar .progress-bar {
	background: rgba(245, 166, 35, 0.12) !important;
}
/* Ensure standalone progress bar shortcode keeps its height */
.charityglow-progress-bar .progress-bar {
	height: 10px !important;
	border-radius: 999px !important;
	overflow: hidden !important;
}

/* ============================================================
   3. DONATE NOW / SUBMIT BUTTONS — Amber Gold gradient
   ============================================================ */
.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 {
	background: var(--charityglow-gradient-gold) !important;
	color: #17332C !important;
	border-color: #F5A623 !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	box-shadow: 0 2px 10px rgba(245, 166, 35, 0.22) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !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 {
	background: linear-gradient(135deg, #D4891A 0%, #F5A623 100%) !important;
	box-shadow: 0 6px 20px rgba(245, 166, 35, 0.38) !important;
	transform: translateY(-1px) !important;
	color: #17332C !important;
}

/* ============================================================
   4. AMOUNT BUTTONS — active state Teal 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;
}

/* ============================================================
   5. FREQUENCY / GATEWAY TABS — Teal 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;
}

/* ============================================================
   6. FORM INPUT FOCUS — Teal Green ring (no hard box-shadow)
   ============================================================ */
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(22, 100, 90, 0.10) !important;
	outline: none !important;
}

/* ============================================================
   7. SECTION HEADERS / TITLES — Dark Teal Ink
   ============================================================ */
.campaign-title,
.charityglow-campaign-single h1,
.section-title,
.form-section h3,
.campaign-header h1,
h1.campaign-title {
	color: var(--charityglow-secondary) !important; /* #123A32 Dark Teal Ink */
	letter-spacing: -0.01em !important;
	font-weight: 700 !important;
}

/* ============================================================
   8. ICONS — Teal Green
   ============================================================ */
.charityglow-campaign-single .dashicons,
.campaign-badge {
	color: var(--charityglow-primary) !important;
}

/* STATS SHORTCODE — keep icon circle text WHITE, minimal icon Teal */
.charityglow-stat-item .stat-icon,
.charityglow-stat-item .stat-icon svg {
	color: #ffffff !important;
}
.charityglow-stats-minimal .stat-icon,
.charityglow-stats-minimal .stat-icon svg {
	color: var(--charityglow-primary) !important;
}

/* ============================================================
   9. GATEWAY RADIO LABELS — selected border Teal
   ============================================================ */
.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;
}

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

/* ============================================================
   11. ADMIN — upgrade / pro badges — Deep Teal → Teal gradient
   ============================================================ */
.charityglow-upgrade-notice,
.charityglow-upgrade-hero {
	background: var(--charityglow-gradient-deep) !important;
	color: #FFE3AC !important;
}
.charityglow-upgrade-notice h3,
.charityglow-upgrade-hero h3,
.charityglow-upgrade-notice p,
.charityglow-upgrade-hero p {
	color: #FFE3AC !important;
}
.charityglow-pro-badge {
	background: var(--charityglow-gradient-deep) !important;
	color: #FFE3AC !important;
	box-shadow: 0 2px 6px rgba(10, 43, 39, 0.18);
}
.feature-card .dashicons {
	color: var(--charityglow-primary) !important;
}

/* ============================================================
   12. CAMPAIGN STATS — raised amount highlighted
   ============================================================ */
.stat-item:first-child .stat-value {
	color: var(--charityglow-primary) !important;
	font-weight: 700;
}
.stat-item .stat-value {
	color: var(--charityglow-secondary) !important;
	letter-spacing: -0.01em;
}

/* ============================================================
   13. RECENT DONORS — avatar bg = Deep Teal gradient, text Cream Gold
   ============================================================ */
.donor-avatar {
	background: var(--charityglow-gradient-deep) !important;
	color: #FFE3AC !important;
	box-shadow: 0 2px 8px rgba(14, 59, 54, 0.18);
}

/* ============================================================
   14. SHARE BUTTONS — refined radius 10px + hover lift
   ============================================================ */
.share-btn                { color: #fff !important; border-radius: 10px !important; transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !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: #7C948D !important; color: #fff !important; }
.share-whatsapp           { background: #25d366 !important; color: #fff !important; }

.share-btn:hover          { color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.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: #54706A !important; color: #fff !important; }
.share-whatsapp:hover     { background: #1aab52 !important; color: #fff !important; }

/* ============================================================
   15. STEP PROGRESS — Form Builder multi-step
       step.active = Teal (with glow ring)
       step.completed = Dark Teal + Gold check
   ============================================================ */
.cg-step-progress__fill {
	background: var(--charityglow-gradient-gold) !important;
}
.cg-step--active .cg-step__number {
	background: var(--charityglow-primary) !important;
	border-color: var(--charityglow-primary) !important;
	box-shadow: 0 0 0 4px rgba(22, 100, 90, 0.15);
}
.cg-step--completed .cg-step__number {
	background: var(--charityglow-gradient-deep) !important;
	border-color: var(--charityglow-secondary) !important;
	color: #FFE3AC !important;
}

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

/* ============================================================
   17. FORCE OVERRIDE — beat PHP wp_add_inline_style variables
       Until DB setting updated, these HARDCODED wins via !important
   ============================================================ */

/* Force progress EVERY layout to Amber Gold gradient  */
[class*="progress-fill"] {
	background: var(--charityglow-gradient-gold) !important;
	border-radius: 999px !important;
}

/* Campaign GRID CARD BUTTON — Amber Gold, content width, 10px radius, uppercase REMOVED, hover lift OK */
.charityglow-campaigns-grid .campaign-card-content a.campaign-card-button,
.charityglow-campaigns-grid a.campaign-card-button,
.charityglow-campaigns-grid .campaign-card-button {
	background: var(--charityglow-gradient-gold) !important;
	color: #17332C !important;
	display: inline-block !important;
	width: auto !important;
	max-width: max-content !important;
	align-self: flex-start !important;
	flex: 0 0 auto !important;
	border-radius: 10px !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 8px rgba(245, 166, 35, 0.20) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.charityglow-campaigns-grid .campaign-card-content a.campaign-card-button:hover,
.charityglow-campaigns-grid a.campaign-card-button:hover,
.charityglow-campaigns-grid .campaign-card-button:hover {
	background: linear-gradient(135deg, #D4891A 0%, #F5A623 100%) !important;
	color: #17332C !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(245, 166, 35, 0.35) !important;
}

/* Progress PERCENTAGE text — Amber Gold */
.charityglow-campaigns-grid .progress-percentage,
.charityglow-campaign-single .progress-percentage {
	color: #F5A623 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
}

/* Campaign card TITLE link hover — Teal */
.charityglow-campaigns-grid .campaign-card-title a:hover {
	color: var(--charityglow-primary) !important;
}

/* ============================================================
   18. OUTLINE / GHOST BUTTONS — Amber Gold 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 #F5A623 !important;
	color: #F5A623 !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !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: var(--charityglow-gradient-gold) !important;
	border-color: #F5A623 !important;
	color: #17332C !important;
	box-shadow: 0 4px 14px rgba(245, 166, 35, 0.28) !important;
	transform: translateY(-1px) !important;
}