/*
Theme Name: Azawon 1
Theme URI: https://azawon.org
Author: Azawon Team
Author URI: https://azawon.org
Description: Azawon 1 is a premium, beautifully crafted Islamic charity and Zakat WordPress theme. Featuring an elegant Islamic-inspired design with refined green and gold palette, built-in Zakat calculator with live gold/silver price fetching, prayer times display, animated impact counters, donation progress bars, Quran verse rotator, testimonial sliders, and full-site editing support. Designed to inspire generosity and build trust for mosques, charities, and humanitarian organizations worldwide.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.77
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: azawon-1
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, charity, non-profit, islamic, zakat, humanitarian, religion, mosque

/*
 * Azawon 1 – Premium Islamic Charity Theme
 * Copyright (C) 2026 Azawon Team
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 */

/* ======================================================================
   BASE & RESET
   ====================================================================== */

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #156B3A);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Smooth page fade-in */
body {
	animation: bodyFadeIn 0.5s ease-out;
}

@keyframes bodyFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ======================================================================
   ISLAMIC PATTERN OVERLAYS
   ====================================================================== */

.azawon-pattern-overlay {
	position: relative;
}

.azawon-pattern-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 3 L44 14 L55 14 L46 22 L50 33 L40 27 L30 33 L34 22 L25 14 L36 14 Z' fill='rgba(196,162,78,0.04)'/%3E%3Cpath d='M40 47 L44 58 L55 58 L46 66 L50 77 L40 71 L30 77 L34 66 L25 58 L36 58 Z' fill='rgba(196,162,78,0.02)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	pointer-events: none;
	z-index: 0;
}

.azawon-pattern-overlay > * {
	position: relative;
	z-index: 1;
}

/* Islamic geometric pattern background */
.azawon-geometric-bg {
	background-image: 
		linear-gradient(rgba(196,162,78,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196,162,78,0.03) 1px, transparent 1px);
	background-size: 40px 40px;
}

/* ======================================================================
   HEADER GOLD ACCENT LINE
   ====================================================================== */

.azawon-header-gold-line.wp-block-separator {
	height: 0;
	min-height: 0;
	border: none;
	border-top: 2px solid var(--wp--preset--color--accent-2, #C4A24E);
	opacity: 0.25;
	margin: 0 !important;
}

/* ======================================================================
   DIVIDER PATTERNS
   ====================================================================== */

.azawon-divider-pattern {
	height: 8px;
	background-image: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 10px,
		var(--wp--preset--color--accent-2, #C4A24E) 10px,
		var(--wp--preset--color--accent-2, #C4A24E) 12px
	);
	opacity: 0.2;
}

.azawon-section-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.azawon-section-divider::before,
.azawon-section-divider::after {
	content: '';
	display: block;
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-2, #C4A24E), transparent);
}

.azawon-section-divider .azawon-divider-icon {
	color: var(--wp--preset--color--accent-2, #C4A24E);
	font-size: 1.5rem;
	line-height: 1;
}

/* ======================================================================
   HEADER
   ====================================================================== */

/* Merged nav & CTA container */
.azawon-nav-and-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1rem;
}

.azawon-nav-and-cta > .wp-block-navigation {
	flex: 1;
	min-width: 0;
}

.azawon-nav-and-cta > .wp-block-buttons {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.azawon-nav-and-cta {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}
}

.azawon-main-nav {
	display: flex;
	justify-content: flex-start;
}

.azawon-header-wrapper {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.4s ease,
	            background-color 0.4s ease,
	            backdrop-filter 0.4s ease;
}

.azawon-header-wrapper.azawon-header-scrolled {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
	            0 8px 32px rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.azawon-header-inner {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	transition: padding 0.3s ease;
}

.azawon-header-scrolled .azawon-header-inner {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.azawon-header-logo .wp-block-site-logo {
	transition: transform 0.3s ease;
}

.azawon-header-scrolled .azawon-header-logo .wp-block-site-logo {
	transform: scale(0.88);
}

/* ======================================================================
   TOP ANNOUNCEMENT BAR
   ====================================================================== */

.azawon-topbar {
	position: relative;
	background: var(--wp--preset--color--accent-7, #0A2E18) !important;
	border-bottom: 1px solid rgba(196, 162, 78, 0.15);
}

.azawon-topbar-tagline {
	opacity: 0.85;
	letter-spacing: 0.04em;
	position: relative;
	display: inline-block;
	font-weight: 400;
}

.azawon-topbar-tagline::before {
	content: '✦';
	opacity: 0.5;
	margin-right: 0.4rem;
}

.azawon-topbar-contacts {
	opacity: 0.7;
}

/* ======================================================================
   NAVIGATION
   ====================================================================== */

.wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0;
	font-weight: 500 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	transition: color 0.2s ease !important;
}

.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-2, #C4A24E) !important;
}

/* Refined underline — slides in from left */
.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--accent-2, #C4A24E);
	border-radius: 2px;
	transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* Current/active page indicator */
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2, #C4A24E) !important;
}

.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
	opacity: 1;
}

/* Submenu / Dropdown — Premium */
.wp-block-navigation__submenu-container {
	border: 1px solid rgba(196, 162, 78, 0.12) !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	padding: 0.5rem !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08),
	            0 4px 16px rgba(0, 0, 0, 0.04) !important;
	min-width: 220px !important;
	transition: opacity 0.3s ease,
	            transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	transform-origin: top center !important;
	transform: translateY(8px) scale(0.96) !important;
	opacity: 0 !important;
}

.has-child:hover > .wp-block-navigation__submenu-container {
	transform: translateY(4px) scale(1) !important;
	opacity: 1 !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem !important;
	border-radius: 10px;
	transition: background-color 0.2s ease,
	            color 0.2s ease !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(196, 162, 78, 0.08) !important;
	color: var(--wp--preset--color--accent-2, #C4A24E) !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none !important;
}

/* Mobile Navigation */
.wp-block-navigation__responsive-container-open {
	background: none !important;
	border: none !important;
	padding: 6px !important;
	cursor: pointer;
	color: var(--wp--preset--color--contrast, #1A1A2E) !important;
	transition: color 0.2s ease, background 0.2s ease;
	border-radius: 6px !important;
}

.wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--accent-1, #156B3A) !important;
	background: rgba(21, 107, 58, 0.06) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(255, 255, 255, 0.98) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	animation: mobileNavItemIn 0.35s ease forwards;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 1rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.1s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.2s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.3s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.35s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.4s; }

@keyframes mobileNavItemIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ======================================================================
   BUTTONS
   ====================================================================== */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	z-index: 1;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button__link:active {
	transform: scale(0.97) !important;
}

/* Donate button subtle glow */
.azawon-btn-donate .wp-block-button__link {
	position: relative;
}

.azawon-btn-donate .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(21, 107, 58, 0.35), 0 4px 12px rgba(21, 107, 58, 0.15);
}

/* Outline button refinement */
.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-1, #156B3A) !important;
	color: #FFFFFF !important;
}

/* Header button wrapper lift (prevents stacking with global -2px link hover) */
.azawon-header-buttons .wp-block-button {
	transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.azawon-header-buttons .wp-block-button:hover {
	transform: translateY(-1px);
}

.azawon-header-buttons .wp-block-button__link:hover {
	transform: none !important;
}

/* Animated underline matching nav link style — Zakat button */
.azawon-header-buttons .azawon-btn-zakat {
	position: relative;
}

.azawon-header-buttons .azawon-btn-zakat::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 6px;
	right: 6px;
	height: 2px;
	background: var(--wp--preset--color--accent-2, #C4A24E);
	border-radius: 2px;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
}

.azawon-header-buttons .azawon-btn-zakat:hover::after {
	transform: scaleX(1);
	opacity: 1;
}

/* Animated underline matching nav link style — Donate button */
.azawon-header-buttons .azawon-btn-donate {
	position: relative;
}

.azawon-header-buttons .azawon-btn-donate::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 6px;
	right: 6px;
	height: 2px;
	background: var(--wp--preset--color--accent-1, #156B3A);
	border-radius: 2px;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
}

.azawon-header-buttons .azawon-btn-donate:hover::after {
	transform: scaleX(1);
	opacity: 1;
}

/* Search Toggle Icon & Expandable Inline Search */
.azawon-header-search {
	display: flex;
	align-items: center;
	margin-right: 0.5rem;
}

.azawon-search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.azawon-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none !important;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

.azawon-search-toggle:hover {
	background: rgba(196, 162, 78, 0.1);
	color: var(--wp--preset--color--accent-2, #C4A24E);
	transform: scale(1.1);
}

.azawon-search-toggle:active {
	transform: scale(0.95);
}

.azawon-search-toggle svg {
	transition: transform 0.3s ease;
	display: block;
}

.azawon-search-toggle:hover svg {
	transform: rotate(90deg);
}

.azawon-search-toggle.azawon-search-active {
	background: rgba(196, 162, 78, 0.1);
	color: var(--wp--preset--color--accent-2, #C4A24E);
}

.azawon-search-toggle.azawon-search-active svg {
	transform: rotate(90deg);
}

/* Expandable search box — slides out from the right of the icon */
.azawon-search-box {
	display: flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	transition: max-width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            opacity 0.25s ease 0.05s,
	            margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	margin-left: 0;
	border-radius: 50px;
	background: var(--wp--preset--color--accent-5, #F5F0EB);
	border: 2px solid transparent;
}

.azawon-search-box.azawon-search-open {
	max-width: 280px;
	opacity: 1;
	margin-left: 0.5rem;
	border-color: rgba(196, 162, 78, 0.2);
}

.azawon-search-input {
	border: none;
	background: transparent;
	padding: 0.5rem 0 0.5rem 1rem;
	font-size: 0.85rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	width: 220px;
	outline: none;
	min-width: 0;
}

.azawon-search-input::placeholder {
	color: var(--wp--preset--color--accent-4, #6B7280);
	opacity: 0.7;
}

.azawon-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--accent-4, #6B7280);
	cursor: pointer;
	border-radius: 50%;
	padding: 0;
	margin-right: 0.25rem;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.azawon-search-submit:hover {
	color: var(--wp--preset--color--accent-1, #156B3A);
	background: rgba(21, 107, 58, 0.08);
}

.azawon-search-submit:active {
	transform: scale(0.9);
}

.azawon-search-submit svg {
	display: block;
}

/* Shake animation for empty search attempt */
.azawon-search-shake {
	animation: azawonSearchShake 0.4s ease;
}

@keyframes azawonSearchShake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}

/* ======================================================================
   ZAKAT CALCULATOR
   ====================================================================== */

.azawon-zakat-calculator {
	background: linear-gradient(135deg, var(--wp--preset--color--base, #FFFFFF) 0%, var(--wp--preset--color--accent-5, #F5F0EB) 100%);
	border: 1px solid var(--wp--preset--color--accent-2, #C4A24E);
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.azawon-zakat-calculator:hover {
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.azawon-zakat-calculator input[type="number"],
.azawon-zakat-calculator select {
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
	border-radius: 10px;
	padding: 0.85rem 1.1rem;
	font-size: 1rem;
	width: 100%;
	background: var(--wp--preset--color--base, #FFFFFF);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	font-family: inherit;
}

.azawon-zakat-calculator input[type="number"]:focus,
.azawon-zakat-calculator select:focus {
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	box-shadow: 0 0 0 4px rgba(27, 107, 58, 0.12);
	outline: none;
	transform: translateY(-1px);
}

.azawon-zakat-calculator label {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin-bottom: 0.35rem;
	display: block;
	font-size: 0.95rem;
}

.azawon-zakat-result {
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.azawon-zakat-result.azawon-hidden {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.azawon-zakat-result.azawon-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Live calculator form (rendered by azawon.js) ---------- */

.azawon-zakat-form {
	margin-top: 1.25rem;
}

.azawon-zakat-head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px dashed var(--wp--preset--color--accent-2, #C4A24E);
}

.azawon-zakat-head-icon {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 1.4rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #0B6E4F), var(--wp--preset--color--accent-3, #1E8A4A));
	box-shadow: 0 6px 18px rgba(21, 107, 58, 0.25);
}

.azawon-zakat-head-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.azawon-zakat-eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2, #F4B400);
}

.azawon-zakat-head-text strong {
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast, #1F2937);
}

.azawon-zakat-currency {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-left: auto;
}

.azawon-zakat-currency label {
	font-size: 0.68rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #6B7280);
	margin: 0;
}

.azawon-zakat-currency-select {
	width: auto;
	min-width: 84px;
	padding: 0.45rem 0.7rem;
	font-size: 0.85rem;
	font-weight: 700;
	border-radius: 999px;
	cursor: pointer;
}

.azawon-zakat-group {
	margin-bottom: 1.4rem;
}

.azawon-zakat-group-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #1F2937);
}

.azawon-zakat-group-step {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 800;
	color: #1A1A2E;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-2, #F4B400), var(--wp--preset--color--accent-8, #D4AF37));
}

.azawon-zakat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
	/* Smooth expand/collapse for the step groups: overflow + max-height
	   animate instead of the grid appearing/disappearing instantly. The
	   ceiling must clear the tallest state — stacked 1-up fields on narrow
	   mobile cards measure ~600px — so content can never clip. */
	overflow: hidden;
	max-height: 800px;
	opacity: 1;
	visibility: visible;
	transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

.azawon-zakat-field {
	min-width: 0;
}

.azawon-zakat-field label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	margin-bottom: 0.4rem;
}

.azawon-zakat-field-icon {
	font-size: 0.9rem;
}

.azawon-zakat-input-wrap {
	position: relative;
}

.azawon-zakat-input-wrap--unit input {
	padding-right: 3.2rem;
}

.azawon-zakat-input-unit {
	position: absolute;
	top: 50%;
	right: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--accent-4, #6B7280);
	pointer-events: none;
}

.azawon-zakat-help {
	display: block;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--wp--preset--color--accent-4, #6B7280);
	margin-top: 0.3rem;
}

.azawon-zakat-value-chip {
	display: inline-block;
	margin-top: 0.35rem;
	padding: 0.18rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-1, #0B6E4F);
	background: rgba(21, 107, 58, 0.08);
	border: 1px solid rgba(21, 107, 58, 0.18);
	border-radius: 999px;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.azawon-zakat-value-chip.azawon-chip-show {
	opacity: 1;
	transform: translateY(0);
}

.azawon-zakat-live {
	position: relative;
	overflow: hidden;
	margin-top: 1.1rem;
	padding: 1.25rem 1.25rem 1.15rem;
	border-radius: 14px;
	color: #FFFFFF;
	background: linear-gradient(160deg, var(--wp--preset--color--accent-7, #064E3B), var(--wp--preset--color--accent-1, #0B6E4F) 60%, var(--wp--preset--color--accent-3, #1E8A4A));
}

.azawon-zakat-live::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 90% -10%, rgba(212, 175, 55, 0.28), transparent 55%);
}

.azawon-zakat-live > * {
	position: relative;
	z-index: 1;
}

.azawon-zakat-live-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.azawon-zakat-live-head > span {
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zakat-networth {
	font-size: 1.6rem;
	letter-spacing: -0.5px;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
}

.azawon-zakat-progress {
	height: 8px;
	margin: 0.85rem 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}

.azawon-zakat-progress-bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-8, #D4AF37), var(--wp--preset--color--accent-2, #F4B400));
	transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s ease;
}

.azawon-zakat-progress-bar.azawon-progress-eligible {
	background: linear-gradient(90deg, #34D399, #6EE7B7);
}

.azawon-zakat-nisabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.azawon-zakat-nisab-chip {
	padding: 0.3rem 0.6rem;
	font-size: 0.72rem;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.azawon-zakat-nisab-chip strong {
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
}

/* ---- Live Nisab price strip ---- */
.azawon-zakat-live-strip {
	margin-top: 1rem;
	padding: 0.6rem 0.75rem 0.7rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.azawon-zakat-live-strip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.55rem;
}

.azawon-zakat-live-strip-title {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zakat-live-strip-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.66rem;
	color: rgba(255, 255, 255, 0.75);
}

.azawon-zakat-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
}

.azawon-zakat-live-strip.is-live .azawon-zakat-live-dot {
	background: #34D399;
	animation: azawon-live-pulse 1.8s ease-out infinite;
}

.azawon-zakat-live-strip.is-saved .azawon-zakat-live-dot {
	background: #D4AF37;
}

@keyframes azawon-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
	70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.azawon-zakat-live-strip-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.azawon-zakat-live-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.45rem 0.5rem;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.azawon-zakat-live-stat > span {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	/* Labels like 'SILVER / GRAM' must wrap only at spaces, never mid-word
	   ('SILVE R / GRAM') when the 4-up stat grid runs out of room. */
	word-break: keep-all;
	overflow-wrap: normal;
	line-height: 1.3;
}

.azawon-zakat-live-stat > strong {
	font-size: 0.85rem;
	font-weight: 700;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The card can be narrow even on wide screens (e.g. the homepage's Col 7 at
   tablet widths), so the strip must adapt to the CARD width, not the
   viewport. Below ~580px the four stats go 2-up instead of squeezing into
   ~55px columns where the labels break mid-word. */
@container (max-width: 580px) {
	.azawon-zakat-live-strip-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.azawon-zakat-live-stat {
		padding: 0.4rem 0.45rem;
	}
}

@container (max-width: 300px) {
	/* Very narrow card: stack the strip header so the status line gets its
	   own row instead of squeezing against the title. */
	.azawon-zakat-live-strip-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}
}

@media (max-width: 640px) {
	.azawon-zakat-live-strip-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.azawon-zakat-outcome {
	margin-top: 1rem;
}

.azawon-zakat-outcome-idle,
.azawon-zakat-outcome-below {
	padding: 1rem 0.5rem;
	text-align: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
}

.azawon-zakat-outcome-icon {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 1.6rem;
}

.azawon-zakat-outcome-idle p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zakat-outcome-eligible {
	text-align: center;
}

.azawon-zakat-due-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.azawon-zakat-due-label em {
	font-style: normal;
	opacity: 0.7;
}

.azawon-zakat-due-amount {
	display: block;
	margin: 0.3rem 0 0.9rem;
	font-size: 2.1rem;
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.azawon-zakat-due-amount {
		background: linear-gradient(90deg, #FDE68A, #F4B400, #D4AF37);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.azawon-zakat-breakdown {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	text-align: left;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
}

.azawon-zakat-breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.28rem 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zakat-breakdown li strong {
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
}

.azawon-zakat-breakdown-total {
	margin-top: 0.3rem;
	padding-top: 0.5rem !important;
	font-weight: 700;
	color: #FFFFFF;
	border-top: 1px dashed rgba(255, 255, 255, 0.3);
}

.azawon-zakat-below-title {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #FFFFFF;
}

.azawon-zakat-below-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1rem;
	margin-bottom: 0.9rem;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zakat-below-meta strong {
	color: #FFFFFF;
	font-variant-numeric: tabular-nums;
}

.azawon-zakat-cta {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.azawon-zakat-cta:hover {
	transform: translateY(-2px);
}

.azawon-zakat-cta-gold {
	color: #1A1A2E;
	background: linear-gradient(135deg, #F4B400, #D4AF37);
	box-shadow: 0 6px 20px rgba(244, 180, 0, 0.35);
}

.azawon-zakat-cta-green {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.14);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.azawon-zakat-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.1rem;
}

.azawon-zakat-reset {
	padding: 0.45rem 1.1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-4, #6B7280);
	background: none;
	border: 1px solid var(--wp--preset--color--accent-6, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.azawon-zakat-reset:hover {
	color: var(--wp--preset--color--accent-1, #0B6E4F);
	background: rgba(21, 107, 58, 0.06);
	border-color: var(--wp--preset--color--accent-1, #0B6E4F);
}

.azawon-zakat-disclaimer {
	display: block;
	margin-top: 0.7rem;
	font-size: 0.68rem;
	line-height: 1.45;
	color: var(--wp--preset--color--accent-4, #6B7280);
}

/* Field grid responsiveness is handled by the container query on
   .azawon-zakat-calculator (2-up when the card has room, 1-up when not). */

/* ======================================================================
   CARDS & GROUPS
   ====================================================================== */

.azawon-card {
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.azawon-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.azawon-card img,
.azawon-card .wp-block-image img,
.azawon-card .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.azawon-card:hover img,
.azawon-card:hover .wp-block-image img,
.azawon-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Premium Card with top gold accent */
.azawon-card-premium {
	position: relative;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.azawon-card-premium::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.azawon-card-premium:hover::before {
	opacity: 1;
}

.azawon-card-premium:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Gold Border Card */
.azawon-card-gold {
	border: 1px solid rgba(196, 162, 78, 0.2);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.azawon-card-gold:hover {
	border-color: rgba(196, 162, 78, 0.4);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

/* ======================================================================
   BLOG CARDS (FSE block template)
   ====================================================================== */

/* ======================================================================
   BLOG PAGE — FSE TEMPLATE OVERRIDES
   WordPress strips some custom class names (azawon-blog-card) from
   block templates, so we scope styles using the .blog body class.
   ====================================================================== */

/* Add "Blog" heading — the wp:heading block edit is ignored by WP cache */
.blog main > .alignwide:first-child::before {
	content: "Blog";
	display: block;
	text-align: center;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* Override the 780px content width so 4 columns have room */
.blog main.is-layout-constrained,
.blog main.wp-block-group.is-layout-constrained {
	max-width: var(--wp--style--global--wide-size, 1280px) !important;
}

/* Force 4-column grid on blog page */
.blog .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 1.5rem !important;
}

@media (max-width: 1200px) {
	.blog .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 900px) {
	.blog main.is-layout-constrained {
		max-width: 100% !important;
	}
	.blog .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 520px) {
	.blog .wp-block-post-template {
		grid-template-columns: 1fr !important;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Blog card styling — targets .azawon-card (the class WP actually renders) */
.blog .wp-block-post-template .azawon-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.blog .wp-block-post-template .azawon-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}

/* Card inner content area — give breathing room */
.blog .wp-block-post-template .azawon-card > .wp-block-group:last-child {
	padding: 1.2rem 1.25rem 1rem;
}

/* Featured image */
.blog .wp-block-post-template .wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}

.blog .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.blog .wp-block-post-template .azawon-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Fallback gradient for posts without featured images */
.blog .wp-block-post-template .azawon-card > .wp-block-group:last-child::before {
	content: "";
	display: block;
	height: 8px;
	margin: -1.2rem -1.25rem 1rem;
	background: linear-gradient(135deg, #064E3B, #1E8A4A, #D4AF37);
}

/* Category badge styling */
.blog .wp-block-post-template .wp-block-post-terms {
	display: inline-block !important;
	background: rgba(11, 110, 79, 0.08);
	color: #064E3B;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.6rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.6rem;
}

.blog .wp-block-post-template .wp-block-post-terms a {
	color: #064E3B !important;
	text-decoration: none !important;
}

/* Title */
.blog .wp-block-post-template .wp-block-post-title {
	margin-top: 0.3rem;
	margin-bottom: 0.5rem;
	line-height: 1.35;
}

.blog .wp-block-post-template .wp-block-post-title a {
	color: #1F2937;
	text-decoration: none;
	transition: color 0.2s ease;
}

.blog .wp-block-post-template .wp-block-post-title a:hover {
	color: #064E3B;
}

/* Excerpt */
.blog .wp-block-post-template .wp-block-post-excerpt {
	margin-top: 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #6B7280;
}

.blog .wp-block-post-template .wp-block-post-excerpt p {
	margin: 0;
}

/* "Read More" link */
.blog .wp-block-post-template .wp-block-post-excerpt__more-link {
	color: #064E3B !important;
	font-weight: 600;
	font-size: 0.8rem;
	text-decoration: none !important;
	transition: color 0.2s;
}

.blog .wp-block-post-template .wp-block-post-excerpt__more-link:hover {
	color: #1E8A4A !important;
}

/* Meta (date + author) */
.blog .wp-block-post-template .wp-block-group.is-nowrap {
	border-top: 1px solid #F3F4F6;
	padding-top: 0.7rem;
	margin-top: 0.9rem;
	gap: 0.75rem;
}

.blog .wp-block-post-template .wp-block-post-date,
.blog .wp-block-post-template .wp-block-post-author {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	color: #9CA3AF;
}

.azawon-blog-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: visible;
}

.azawon-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.azawon-blog-card .wp-block-post-featured-image {
	border-radius: 14px 14px 0 0;
	overflow: hidden;
}

.azawon-blog-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.azawon-blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Category badge — positioned over the image bottom */
.azawon-blog-card .azawon-blog-card__cat {
	margin-top: -2rem;
	position: relative;
	z-index: 2;
	margin-bottom: 0.4rem;
}

.azawon-blog-card .azawon-blog-card__cat .wp-block-post-terms {
	display: inline-block;
	background: #fff;
	color: #064E3B;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	border: 1.5px solid rgba(6, 78, 59, 0.15);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.azawon-blog-card .azawon-blog-card__cat a {
	color: #064E3B !important;
	text-decoration: none !important;
}

/* Title */
.azawon-blog-card .wp-block-post-title {
	margin-top: 0.4rem;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.azawon-blog-card .wp-block-post-title a {
	color: #1F2937;
	text-decoration: none;
	transition: color 0.2s ease;
}

.azawon-blog-card .wp-block-post-title a:hover {
	color: #064E3B;
}

/* Meta (date + author) */
.azawon-blog-card .azawon-blog-card__meta {
	border-top: 1px solid #F3F4F6;
	padding-top: 0.75rem;
	margin-top: 1rem;
	gap: 1rem;
}

.azawon-blog-card .azawon-blog-card__meta .wp-block-post-date,
.azawon-blog-card .azawon-blog-card__meta .wp-block-post-author {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* Excerpt */
.azawon-blog-card .wp-block-post-excerpt {
	margin-top: 0;
}

.azawon-blog-card .wp-block-post-excerpt p {
	margin: 0;
}

/* ======================================================================
   IMAGE & MEDIA
   ====================================================================== */

.wp-block-image {
	transition: transform 0.3s ease;
}

.wp-block-image:hover {
	transform: translateY(-2px);
}

.wp-block-image figcaption {
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	text-align: center;
	margin-top: 0.5rem;
}

/* ======================================================================
   QUOTE & PULLQUOTE
   ====================================================================== */

.wp-block-quote {
	transition: border-color 0.3s ease;
}

.wp-block-quote:hover {
	border-left-color: var(--wp--preset--color--accent-2, #C4A24E);
}

.wp-block-pullquote {
	transition: transform 0.3s ease;
}

.wp-block-pullquote:hover {
	transform: translateY(-2px);
}

/* ======================================================================
   DONATION PROGRESS BAR
   ====================================================================== */

.azawon-progress-bar {
	width: 100%;
	height: 12px;
	background: var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
	border-radius: 50px;
	overflow: hidden;
	position: relative;
}

.azawon-progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1, #156B3A), var(--wp--preset--color--accent-2, #C4A24E));
	border-radius: 50px;
	transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}

.azawon-progress-bar-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	animation: progressShimmer 2s ease-in-out infinite;
}

/* ======================================================================
   DONATE PAGE — LIVE DONATION METER
   ====================================================================== */

.azawon-donation-meter {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: 1.6rem 2rem;
	border-radius: 18px;
	background:
		radial-gradient(circle at 100% 0%, rgba(196, 162, 78, 0.12), transparent 42%),
		linear-gradient(180deg, #0E5C3D, #0A4A30);
	border: 1px solid rgba(196, 162, 78, 0.35);
	box-shadow: 0 14px 34px rgba(6, 78, 59, 0.18), 0 3px 10px rgba(6, 78, 59, 0.08);
	color: #FFFFFF;
}

.azawon-donation-meter::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #C4A24E, #D4AF37 60%, #F4B400);
	border-radius: 18px 18px 0 0;
}

.azawon-donation-meter-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 0.85rem;
}

.azawon-donation-meter-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.azawon-donation-meter-amount {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	font-weight: 800;
	line-height: 1;
	color: #F4C542;
}

.azawon-donation-meter-currency {
	font-size: 0.72em;
	vertical-align: top;
	margin-right: 2px;
}

.azawon-donation-meter-bar {
	height: 14px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.azawon-donation-meter-bar .azawon-progress-bar-fill {
	background: linear-gradient(90deg, #D4AF37, #F4B400 70%, #FFD966);
	box-shadow: 0 0 14px rgba(244, 181, 0, 0.35);
}

.azawon-donation-meter-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-top: 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
}

.azawon-donation-meter-pct {
	color: #F4C542;
	font-size: 0.9rem;
	font-weight: 800;
}

.azawon-donation-meter-goal {
	color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 560px) {
	.azawon-donation-meter {
		padding: 1.3rem 1.25rem;
	}
	.azawon-donation-meter-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@keyframes progressShimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ======================================================================
   IMPACT COUNTER
   ====================================================================== */

.azawon-counter {
	font-variant-numeric: tabular-nums;
	display: inline-block;
}

.azawon-counter.azawon-visible {
	animation: counterGlow 1.2s ease-out;
}

@keyframes counterGlow {
	0% { text-shadow: 0 0 0 transparent; }
	50% { text-shadow: 0 0 20px rgba(196, 162, 78, 0.3); }
	100% { text-shadow: 0 0 0 transparent; }
}

/* ======================================================================
   PRAYER TIMES
   ====================================================================== */

.azawon-prayer-wrapper {
	position: relative;
}

.azawon-prayer-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.azawon-prayer-date-greg {
	font-size: 0.85rem;
	font-weight: 600;
	opacity: 0.8;
}

.azawon-prayer-date-hijri {
	font-size: 0.8rem;
	opacity: 0.6;
	font-family: var(--wp--preset--font-family--amiri, 'Amiri', serif);
}

.azawon-prayer-next-badge {
	text-align: center;
	padding: 0.5rem 1rem;
	margin-bottom: 0.75rem;
	background: rgba(196, 162, 78, 0.12);
	border-radius: 50px;
	font-size: 0.8rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.azawon-prayer-next-badge .badge-label {
	opacity: 0.7;
}

.azawon-prayer-next-badge .badge-name {
	color: var(--wp--preset--color--accent-2, #C4A24E);
}

.azawon-prayer-next-badge .badge-countdown {
	opacity: 0.6;
	font-weight: 500;
	font-size: 0.75rem;
}

.azawon-prayer-times {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 0.75rem;
}

.azawon-prayer-item {
	text-align: center;
	padding: 0.75rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	transition: background 0.3s ease, transform 0.3s ease;
}

.azawon-prayer-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
}

.azawon-prayer-item .prayer-name {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.7;
	margin-bottom: 0.25rem;
}

.azawon-prayer-item .prayer-time {
	font-size: 1.1rem;
	font-weight: 600;
}

.azawon-prayer-item.current {
	background: rgba(196, 162, 78, 0.15);
	border: 1px solid rgba(196, 162, 78, 0.3);
}

.azawon-prayer-item.next-prayer {
	background: rgba(27, 107, 58, 0.12);
	border: 2px solid var(--wp--preset--color--accent-1, #156B3A);
	position: relative;
}

.azawon-prayer-item.next-prayer::after {
	content: '↑';
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(27, 107, 58, 0.3);
}

.azawon-prayer-location {
	text-align: center;
	font-size: 0.75rem;
	opacity: 0.5;
	margin-top: 0.75rem;
}

.azawon-prayer-loading,
.azawon-prayer-error {
	text-align: center;
	padding: 2rem;
	opacity: 0.6;
	font-size: 0.9rem;
}

.azawon-prayer-error-detail {
	font-size: 0.8rem;
	opacity: 0.5;
	margin-top: 0.25rem;
}

/* ======================================================================
   QURAN VERSE ROTATOR
   ====================================================================== */

.azawon-verse-rotator {
	position: relative;
	min-height: 4rem;
}

.azawon-verse {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	position: absolute;
	left: 0;
	right: 0;
}

.azawon-verse.active {
	opacity: 1;
	transform: translateY(0);
	position: relative;
}

.azawon-verse-arabic {
	direction: rtl;
	font-family: var(--wp--preset--font-family--amiri, 'Amiri', serif);
	font-size: 1.5rem;
	line-height: 1.8;
	margin-bottom: 0.5rem;
}

.azawon-verse-translation {
	font-size: 0.9rem;
	opacity: 0.8;
	font-style: italic;
}

/* ======================================================================
   NEWSLETTER FORM
   ====================================================================== */

.azawon-newsletter-form input[type="email"] {
	transition: all 0.3s ease;
}

.azawon-newsletter-form input[type="email"]:focus {
	box-shadow: 0 0 0 4px rgba(196, 162, 78, 0.2);
	outline: none;
}

/* ======================================================================
   TESTIMONIAL SLIDER
   ====================================================================== */

.azawon-testimonial {
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
	transform: translateX(24px);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	pointer-events: none;
}

.azawon-testimonial.azawon-testimonial-active {
	opacity: 1;
	transform: translateX(0);
	position: relative;
	pointer-events: auto;
}

/* ======================================================================
   BACK TO TOP BUTTON — PREMIUM
   Green core, gold progress ring that fills as you scroll, springy reveal.
   ====================================================================== */

.azawon-back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, #1B8A4C 0%, #0A2E18 100%);
	color: #FFFFFF;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px) scale(0.6);
	transition: opacity 0.35s ease,
	            transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.3s ease,
	            visibility 0s linear 0.35s;
	z-index: 9999;
	box-shadow: 0 10px 28px rgba(10, 46, 24, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.azawon-back-to-top.azawon-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition: opacity 0.35s ease,
	            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
	            visibility 0s;
	animation: azawonBttGlow 3s ease-in-out 1s infinite;
}

.azawon-back-to-top:hover {
	background: linear-gradient(135deg, #22A05A 0%, #0A2E18 100%);
	transform: translateY(-4px) scale(1.08);
	box-shadow: 0 16px 38px rgba(10, 46, 24, 0.5), 0 0 0 3px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.azawon-back-to-top:active {
	transform: translateY(-1px) scale(0.95);
}

/* Gold progress ring — sits behind the button, fills as the page scrolls */
.azawon-btt-ring {
	position: absolute;
	inset: -5px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	transform: rotate(-90deg);
	pointer-events: none;
}

.azawon-btt-ring-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 2.5;
}

.azawon-btt-ring-progress {
	fill: none;
	stroke: url(#azawonBttGradient);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 169.646;
	stroke-dashoffset: 169.646;
	transition: stroke-dashoffset 0.15s linear;
}

/* Arrow icon */
.azawon-btt-arrow {
	position: relative;
	z-index: 2;
	width: 20px;
	height: 20px;
	fill: #FFFFFF;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.azawon-back-to-top:hover .azawon-btt-arrow {
	transform: translateY(-3px) scale(1.1);
}

/* Soft glow pulsing under the button once visible */
@keyframes azawonBttGlow {
	0%, 100% {
		box-shadow: 0 10px 28px rgba(10, 46, 24, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}
	50% {
		box-shadow: 0 10px 34px rgba(10, 46, 24, 0.55), 0 0 0 6px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}
}

/* Keep hover shadow stable while the pulse runs */
.azawon-back-to-top:hover,
.azawon-back-to-top:focus-visible {
	animation: none;
}

.azawon-back-to-top:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #F4B400, 0 10px 28px rgba(10, 46, 24, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.azawon-back-to-top {
		transition: opacity 0.2s ease;
	}
	.azawon-back-to-top.azawon-visible {
		animation: none;
	}
	.azawon-back-to-top:hover .azawon-btt-arrow {
		transform: none;
	}
}

/* ======================================================================
   FAQ ACCORDION
   ====================================================================== */

.azawon-faq {
	max-width: 800px;
	margin: 0 auto;
}

.azawon-faq-item {
	border: 1px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
	border-radius: 14px;
	margin-bottom: 0.75rem;
	overflow: hidden;
	background: var(--wp--preset--color--base, #FFFFFF);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.azawon-faq-item:hover {
	border-color: rgba(196, 162, 78, 0.2);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.azawon-faq-question {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 0.75rem;
	padding: 1.1rem 1.25rem;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	text-align: left;
	transition: background 0.25s ease, color 0.25s ease;
	position: relative;
}

.azawon-faq-question:hover {
	background: var(--wp--preset--color--accent-5, #F5F0EB);
}

.azawon-faq-question.active {
	color: var(--wp--preset--color--accent-1, #156B3A);
	background: linear-gradient(135deg, rgba(27, 107, 58, 0.03), rgba(196, 162, 78, 0.03));
}

.azawon-faq-question.active .azawon-faq-toggle svg {
	transform: rotate(180deg);
	color: var(--wp--preset--color--accent-1, #156B3A);
}

.azawon-faq-icon {
	font-size: 1.3rem;
	line-height: 1;
	flex-shrink: 0;
	width: 28px;
	text-align: center;
}

.azawon-faq-question-text {
	flex: 1;
	line-height: 1.4;
}

.azawon-faq-toggle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5, #F5F0EB);
	transition: background 0.3s ease, transform 0.3s ease;
}

.azawon-faq-question:hover .azawon-faq-toggle {
	background: var(--wp--preset--color--base, #FFFFFF);
}

.azawon-faq-question.active .azawon-faq-toggle {
	background: rgba(27, 107, 58, 0.1);
}

.azawon-faq-toggle svg {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--accent-4, #6B7280);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.azawon-faq-answer {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            opacity 0.4s ease,
	            padding 0.3s ease;
	padding: 0 1.25rem;
	border-top: 1px solid transparent;
}

.azawon-faq-answer.azawon-faq-open {
	max-height: 800px;
	opacity: 1;
	padding: 1rem 1.25rem 1.25rem;
	border-top-color: var(--wp--preset--color--accent-6, rgba(0,0,0,0.06));
}

.azawon-faq-answer p {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--wp--preset--color--accent-4, #6B7280);
	margin: 0 0 0.6rem;
}

.azawon-faq-answer p:last-child {
	margin-bottom: 0;
}

.azawon-faq-answer ul,
.azawon-faq-answer ol {
	margin: 0.5rem 0 0.75rem;
	padding-left: 1.5rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	font-size: 0.9rem;
	line-height: 1.7;
}

.azawon-faq-answer li {
	margin-bottom: 0.3rem;
}

.azawon-faq-answer strong {
	color: var(--wp--preset--color--contrast, #1A1A2E);
}

.azawon-faq-answer em {
	color: var(--wp--preset--color--contrast, #1A1A2E);
}

.azawon-faq-answer a {
	color: var(--wp--preset--color--accent-1, #156B3A);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.azawon-faq-answer a:hover {
	color: var(--wp--preset--color--accent-7, #0A2E18);
}

/* FAQ comparison table */
.azawon-faq-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	margin: 0.5rem 0 0.75rem;
	border-radius: 10px;
	overflow: hidden;
}

.azawon-faq-table thead {
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
}

.azawon-faq-table th {
	padding: 0.65rem 0.85rem;
	font-weight: 600;
	text-align: left;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.azawon-faq-table td {
	padding: 0.6rem 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.06));
	color: var(--wp--preset--color--accent-4, #6B7280);
}

.azawon-faq-table tbody tr:last-child td {
	border-bottom: none;
}

.azawon-faq-table tbody tr:hover {
	background: rgba(196, 162, 78, 0.04);
}

.azawon-faq-table td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1A1A2E);
}

/* Gold accent bar on active FAQ item */
.azawon-faq-item.active {
	border-color: rgba(196, 162, 78, 0.3);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	position: relative;
}

.azawon-faq-item.active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	border-radius: 3px 0 0 3px;
}

@media (max-width: 640px) {
	.azawon-faq-question {
		padding: 0.9rem 1rem;
		font-size: 0.92rem;
	}
	.azawon-faq-answer.azawon-faq-open {
		padding: 0.75rem 1rem 1rem;
	}
	.azawon-faq-table {
		font-size: 0.8rem;
	}
	.azawon-faq-table th,
	.azawon-faq-table td {
		padding: 0.5rem 0.6rem;
	}
}

/* ======================================================================
   DONATION MODAL (Stripe Payment Element)
   ====================================================================== */

.azawon-donation-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 61, 31, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 1.5rem;
	animation: azawonFadeIn 0.25s ease;
}

.azawon-donation-modal {
	background: var(--wp--preset--color--base, #FFFFFF);
	border-radius: 20px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	animation: azawonModalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes azawonFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes azawonModalSlideIn {
	from { opacity: 0; transform: translateY(30px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.azawon-donation-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 36px;
	height: 36px;
	border: none;
	background: var(--wp--preset--color--accent-5, #F5F0EB);
	color: var(--wp--preset--color--accent-4, #6B7280);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	transition: all 0.2s ease;
	z-index: 2;
}

.azawon-donation-close:hover {
	background: #DC2626;
	color: #FFFFFF;
	transform: rotate(90deg);
}

.azawon-donation-modal-header {
	text-align: center;
	padding: 2rem 2rem 0.5rem;
}

.azawon-donation-icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.azawon-donation-modal-header h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin: 0;
}

.azawon-donation-body {
	padding: 1rem 2rem 1.5rem;
}

.azawon-donation-amount-section label,
.azawon-donation-stripe-section label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin-bottom: 0.5rem;
}

.azawon-donation-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.azawon-donation-preset {
	padding: 0.55rem 1.1rem;
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
	border-radius: 50px;
	background: transparent;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.25s ease;
	font-family: inherit;
}

.azawon-donation-preset:hover {
	border-color: var(--wp--preset--color--accent-2, #C4A24E);
	background: rgba(196, 162, 78, 0.06);
}

.azawon-donation-preset.active {
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(27, 107, 58, 0.25);
}

.azawon-donation-custom-field {
	margin-bottom: 0.75rem;
}

.azawon-donation-input {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
	box-sizing: border-box;
}

.azawon-donation-input:focus {
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	box-shadow: 0 0 0 4px rgba(27, 107, 58, 0.1);
	outline: none;
}

.azawon-stripe-section {
	margin-top: 1rem;
}

.azawon-stripe-element {
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
	border-radius: 12px;
	background: var(--wp--preset--color--base, #FFFFFF);
	transition: border-color 0.25s ease;
	min-height: 40px;
}

.azawon-stripe-element.StripeElement--focus {
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	box-shadow: 0 0 0 4px rgba(27, 107, 58, 0.1);
}

.azawon-stripe-errors {
	display: none;
	font-size: 0.8rem;
	color: #DC2626;
	margin-top: 0.5rem;
	padding: 0.4rem 0.75rem;
	background: rgba(220, 38, 38, 0.06);
	border-radius: 8px;
}

.azawon-stripe-loading,
.azawon-stripe-loading-fallback {
	text-align: center;
	padding: 1.5rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	font-size: 0.9rem;
}

.azawon-donation-footer {
	padding: 0 2rem 2rem;
	text-align: center;
}

.azawon-donation-pay-btn {
	display: block;
	width: 100%;
	padding: 0.9rem 1.5rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #156B3A), var(--wp--preset--color--accent-7, #0A2E18));
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	box-shadow: 0 4px 14px rgba(27, 107, 58, 0.25);
}

.azawon-donation-pay-btn:hover:not(:disabled) {
	box-shadow: 0 8px 24px rgba(27, 107, 58, 0.35);
	transform: translateY(-2px);
}

.azawon-donation-pay-btn:active:not(:disabled) {
	transform: scale(0.97);
}

.azawon-donation-pay-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.azawon-donation-amount-display {
	font-weight: 600;
	opacity: 0.9;
}

.azawon-donation-secure {
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	margin-top: 0.75rem;
}

/* Success overlay */
.azawon-donation-success {
	position: fixed;
	inset: 0;
	background: rgba(15, 61, 31, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: azawonFadeIn 0.3s ease;
}

.azawon-donation-success-content {
	background: var(--wp--preset--color--base, #FFFFFF);
	border-radius: 20px;
	padding: 3rem 2.5rem;
	text-align: center;
	max-width: 400px;
	width: 90%;
	animation: azawonModalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.azawon-donation-success-icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 1rem;
}

.azawon-donation-success-content h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin: 0 0 1.5rem;
}

.azawon-donation-close-btn {
	padding: 0.7rem 2rem;
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
}

.azawon-donation-close-btn:hover {
	background: var(--wp--preset--color--accent-7, #0A2E18);
	transform: translateY(-2px);
}

/* Spinner */
.azawon-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: azawonSpinner 0.6s linear infinite;
	vertical-align: middle;
	margin-right: 0.4rem;
}

@keyframes azawonSpinner {
	to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
	.azawon-donation-modal {
		max-width: 100%;
		border-radius: 16px;
	}
	.azawon-donation-body {
		padding: 1rem 1.25rem;
	}
	.azawon-donation-modal-header {
		padding: 1.5rem 1.25rem 0.25rem;
	}
	.azawon-donation-footer {
		padding: 0 1.25rem 1.5rem;
	}
	.azawon-donation-preset {
		padding: 0.45rem 0.85rem;
		font-size: 0.85rem;
	}
}

/* ======================================================================
   SCROLL ANIMATIONS
   ====================================================================== */

.azawon-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.azawon-animate.azawon-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Zakat calculator card — its own fade + rise entrance, slightly after the intro */
.azawon-zakat-card-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-delay: 0.15s;
}

.azawon-zakat-card-reveal.azawon-visible {
	opacity: 1;
	transform: translateY(0);
}

/* If JavaScript is off, never hide the card */
.no-js .azawon-zakat-card-reveal,
html.no-js .azawon-zakat-card-reveal {
	opacity: 1;
	transform: none;
}

.azawon-animate-stagger > .azawon-animate {
	transition-delay: 0s;
}

.azawon-animate-stagger > .azawon-animate:nth-child(1) { transition-delay: 0.05s; }
.azawon-animate-stagger > .azawon-animate:nth-child(2) { transition-delay: 0.12s; }
.azawon-animate-stagger > .azawon-animate:nth-child(3) { transition-delay: 0.19s; }
.azawon-animate-stagger > .azawon-animate:nth-child(4) { transition-delay: 0.26s; }
.azawon-animate-stagger > .azawon-animate:nth-child(5) { transition-delay: 0.33s; }
.azawon-animate-stagger > .azawon-animate:nth-child(6) { transition-delay: 0.40s; }
.azawon-animate-stagger > .azawon-animate:nth-child(7) { transition-delay: 0.47s; }
.azawon-animate-stagger > .azawon-animate:nth-child(8) { transition-delay: 0.54s; }

/* ======================================================================
   ENHANCED RESPONSIVE BREAKPOINTS
   ====================================================================== */

@media (max-width: 1024px) {
	.azawon-prayer-times {
		grid-template-columns: repeat(3, 1fr);
	}
	.azawon-zcalc-field-row {
		grid-template-columns: 1fr;
	}
	.azawon-prayer-item.next-prayer::after {
		display: none;
	}
}

@media (max-width: 781px) {
	/* Keep header horizontal on mobile */
	.azawon-header-row {
		flex-direction: row !important;
	}
	.azawon-header-logo {
		flex-basis: 40% !important;
	}
	.azawon-nav-and-cta {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.azawon-nav-and-cta::-webkit-scrollbar {
		display: none;
	}
	.azawon-main-nav .wp-block-navigation-item__content {
		font-size: 0.75rem !important;
		padding: 0.25rem 0;
		white-space: nowrap;
	}
	.wp-block-navigation .wp-block-navigation-item {
		white-space: nowrap;
	}
	.wp-block-navigation .wp-block-page-list,
	.wp-block-navigation__container {
		gap: 0.75rem !important;
	}
	.azawon-header-buttons .wp-block-button {
		font-size: 0.7rem !important;
	}
	.azawon-header-buttons .wp-block-button__link {
		padding: 0.4rem 0.75rem !important;
	}
	.azawon-search-toggle {
		width: 30px;
		height: 30px;
	}

	/* Mobile Zakat calculator */
	.azawon-zcalc-steps {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.azawon-zcalc-step-connector {
		display: none;
	}
	.azawon-zcalc-step-indicator {
		flex-direction: row;
		gap: 0.4rem;
	}
	.azawon-zcalc-currency-bar {
		flex-wrap: wrap;
	}
	.azawon-zcalc-currency-select {
		min-width: 120px;
		flex: 1;
	}
	.azawon-zcalc-review-grid {
		grid-template-columns: 1fr;
	}

	/* Impact stats */
	.azawon-counter {
		font-size: 2rem !important;
	}

	/* Event cards */
	.wp-block-columns .wp-block-column .wp-block-cover {
		min-height: 100px !important;
	}

	/* FAQ */
	.azawon-faq-table thead {
		display: none;
	}
	.azawon-faq-table tbody tr {
		display: block;
		padding: 0.75rem;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}
	.azawon-faq-table td {
		display: block;
		padding: 0.2rem 0;
		border: none;
	}
	.azawon-faq-table td:first-child {
		font-size: 0.85rem;
	}

	/* Donation modal */
	.azawon-donation-presets {
		gap: 0.35rem;
	}
	.azawon-donation-preset {
		padding: 0.4rem 0.7rem;
		font-size: 0.8rem;
	}

	/* Prayer times mobile */
	.azawon-prayer-times {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	/* Newsletter form */
	.azawon-newsletter-form .wp-block-search__inside-wrapper {
		flex-direction: column !important;
	}
	.azawon-newsletter-form .wp-block-search__input {
		border-radius: 50px !important;
	}
	.azawon-newsletter-form .wp-block-search__button {
		border-radius: 50px !important;
		margin-left: 0 !important;
	}
}

@media (max-width: 480px) {
	.azawon-prayer-times {
		grid-template-columns: repeat(2, 1fr);
	}
	.azawon-zcalc-currency-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.azawon-zcalc-fetch-btn {
		margin-left: 0;
		align-self: center;
	}
	.azawon-header-logo {
		flex-basis: 30% !important;
	}
	.azawon-main-nav .wp-block-navigation-item__content {
		font-size: 0.7rem !important;
	}
	.wp-block-navigation .wp-block-page-list,
	.wp-block-navigation__container {
		gap: 0.5rem !important;
	}
	.azawon-header-buttons .wp-block-button {
		font-size: 0.65rem !important;
	}
	.azawon-header-buttons .wp-block-button__link {
		padding: 0.3rem 0.6rem !important;
	}
	.azawon-header-buttons .azawon-btn-zakat::after,
	.azawon-header-buttons .azawon-btn-donate::after {
		display: none !important;
	}
	.azawon-search-toggle {
		width: 26px;
		height: 26px;
	}
	.azawon-back-to-top {
		bottom: 1rem;
		right: 1rem;
		width: 40px;
		height: 40px;
	}
}

/* ======================================================================
   PRINT STYLES
   ====================================================================== */

@media print {
	.azawon-back-to-top,
	.azawon-donation-overlay,
	.azawon-donation-success {
		display: none !important;
	}
	.azawon-header-wrapper {
		position: static;
	}
	body {
		animation: none;
	}
}

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.azawon-animate {
		opacity: 1;
		transform: none;
	}
	.azawon-verse,
	.azawon-testimonial {
		opacity: 1;
		transform: none;
		position: relative;
	}
	.azawon-counter {
		animation: none !important;
	}
}

/* ======================================================================
   HERO CAROUSEL
   ====================================================================== */

.azawon-carousel-wrapper {
	position: relative;
	overflow: hidden;
}

.azawon-carousel {
	position: relative;
	width: 100%;
	min-height: 92vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.azawon-carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
	transform: scale(1.05);
}

.azawon-carousel-slide.azawon-carousel-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	position: relative;
	/* Let the hero grow with its content instead of clipping on short viewports.
	   The carousel is a flex column; the active slide fills it when there is
	   room and grows when the content is taller. Inactive slides stay
	   absolutely positioned at 100%. */
	display: flex;
	height: auto;
	flex: 1 0 auto;
}

.azawon-carousel-slide.azawon-carousel-active .azawon-carousel-slide-bg {
	position: relative;
	inset: auto;
	flex: 1;
}

.azawon-carousel-slide-bg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}

.azawon-carousel-bg-1 {
	background-color: #0A2E18;
}

.azawon-carousel-bg-2 {
	background-color: #0D3B6B;
}

.azawon-carousel-bg-3 {
	background-color: #4A1A6B;
}

.azawon-carousel-bg-4 {
	background-color: #6B3A0A;
}

.azawon-carousel-bg-1::before,
.azawon-carousel-bg-2::before,
.azawon-carousel-bg-3::before,
.azawon-carousel-bg-4::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 3 L44 14 L55 14 L46 22 L50 33 L40 27 L30 33 L34 22 L25 14 L36 14 Z' fill='rgba(196,162,78,0.04)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	pointer-events: none;
}



.azawon-carousel-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 4rem 2rem;
	margin: 0 auto;
	text-align: center;
	color: #FFFFFF;
}

@keyframes azawonCarouselContentIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.azawon-carousel-badge {
	display: inline-block;
	padding: 0.4rem 1.25rem;
	background: rgba(196,162,78,0.2);
	border: 1px solid rgba(196,162,78,0.4);
	border-radius: 50px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #C4A24E;
	margin-bottom: 1.5rem;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.azawon-carousel-title {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 800;
	line-height: 1.08;
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.azawon-text-gold {
	color: #C4A24E;
}

.azawon-carousel-desc {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	line-height: 1.7;
	max-width: 600px;
	margin: 0 auto 2rem;
	opacity: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.azawon-carousel-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.azawon-carousel-btn {
	display: inline-flex;
	align-items: center;
	padding: 1rem 2.5rem;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}

.azawon-carousel-btn-primary {
	background: linear-gradient(135deg, #C4A24E, #D4AF37);
	color: #1A1A2E;
	box-shadow: 0 4px 14px rgba(196,162,78,0.3);
}

.azawon-carousel-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(196,162,78,0.4);
}

.azawon-carousel-btn-outline {
	background: transparent;
	color: #FFFFFF;
	border: 2px solid rgba(255,255,255,0.4);
}

.azawon-carousel-btn-outline:hover {
	border-color: #C4A24E;
	background: rgba(196,162,78,0.1);
	color: #C4A24E;
	transform: translateY(-2px);
}

/* Arrows */
.azawon-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.3);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.azawon-carousel-arrow:hover {
	background: rgba(196,162,78,0.3);
	border-color: #C4A24E;
	transform: translateY(-50%) scale(1.1);
}

.azawon-carousel-prev { left: 1.5rem; }
.azawon-carousel-next { right: 1.5rem; }

/* Dots */
.azawon-carousel-dots {
	position: absolute;
	bottom: 3rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 0.75rem;
}

.azawon-carousel-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.5);
	background: transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 0;
}

.azawon-carousel-dot:hover {
	border-color: #C4A24E;
	transform: scale(1.2);
}

.azawon-carousel-dot-active {
	background: #C4A24E;
	border-color: #C4A24E;
	box-shadow: 0 0 12px rgba(196,162,78,0.4);
}

/* Progress bar */
.azawon-carousel-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255,255,255,0.15);
	z-index: 10;
}

.azawon-carousel-progress-bar {
	height: 100%;
	background: #C4A24E;
	width: 0%;
	transition: width 0.1s linear;
}

@media (max-width: 781px) {
	.azawon-carousel {
		min-height: 70vh;
	}
	.azawon-carousel-content {
		padding: 3rem 1.5rem;
	}
	.azawon-carousel-arrow {
		width: 36px;
		height: 36px;
	}
	.azawon-carousel-prev { left: 0.75rem; }
	.azawon-carousel-next { right: 0.75rem; }
}

@media (max-width: 480px) {
	.azawon-carousel {
		min-height: 60vh;
	}
	.azawon-carousel-content {
		padding: 2rem 1rem;
	}
	.azawon-carousel-arrow {
		display: none;
	}
	.azawon-carousel-dots {
		bottom: 1.5rem;
		gap: 0.5rem;
	}
	.azawon-carousel-dot {
		width: 10px;
		height: 10px;
	}
}

/* ======================================================================
   FOOTER
   ====================================================================== */

.azawon-footer-gold-accent {
	height: 3px;
	padding: 0 !important;
	opacity: 0.8;
}

.azawon-footer-tagline {
	opacity: 0.75;
}

.azawon-footer-col {
	gap: 2.5rem !important;
}

.azawon-footer-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base, #FFFFFF) !important;
	opacity: 0.75;
	transition: opacity 0.2s ease, padding-left 0.2s ease !important;
	padding: 0.2rem 0 !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0.01em;
}

.azawon-footer-nav .wp-block-navigation-item__content:hover {
	opacity: 1;
	padding-left: 4px !important;
	color: var(--wp--preset--color--accent-2, #C4A24E) !important;
}

.azawon-footer-nav .wp-block-navigation-item__content::after {
	display: none !important;
}

.azawon-footer-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.azawon-footer-list li {
	padding: 0.25rem 0;
	opacity: 0.75;
	transition: opacity 0.2s ease, padding-left 0.2s ease;
	cursor: default;
	font-size: 0.88rem;
	line-height: 1.6;
}

.azawon-footer-list li:hover {
	opacity: 1;
	padding-left: 4px;
}

.azawon-footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.azawon-footer-contact-icon {
	opacity: 0.6;
	flex-shrink: 0;
	margin-top: 0.1rem;
	font-size: 0.85rem;
}

.azawon-footer-socials {
	gap: 0.4rem !important;
}

.azawon-footer-socials .wp-block-social-link {
	transition: transform 0.2s ease, opacity 0.2s ease;
	opacity: 0.7;
}

.azawon-footer-socials .wp-block-social-link:hover {
	transform: translateY(-2px);
	opacity: 1;
}

.azawon-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	opacity: 0.6;
}

.azawon-footer-copyright strong {
	color: var(--wp--preset--color--accent-2, #C4A24E);
}

/* ======================================================================
   ENHANCED ZAKAT CALCULATOR (Multi-step)
   ====================================================================== */

.azawon-zcalc {
	position: relative;
}

/* --- Step Indicators --- */
.azawon-zcalc-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 2rem;
	padding: 0 1rem;
}

.azawon-zcalc-step-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	cursor: default;
	opacity: 0.4;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.azawon-zcalc-step-indicator.active,
.azawon-zcalc-step-indicator.completed {
	opacity: 1;
}

.azawon-zcalc-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
	color: var(--wp--preset--color--accent-4, #6B7280);
	font-weight: 700;
	font-size: 0.85rem;
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
}

.azawon-zcalc-step-indicator.active .azawon-zcalc-step-num {
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(27, 107, 58, 0.3);
	transform: scale(1.1);
}

.azawon-zcalc-step-indicator.completed .azawon-zcalc-step-num {
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
}

.azawon-zcalc-step-indicator.completed .azawon-zcalc-step-num::after {
	content: '✓';
}

.azawon-zcalc-step-indicator.completed .azawon-zcalc-step-num {
	font-size: 0;
}

.azawon-zcalc-step-indicator.completed .azawon-zcalc-step-num::after {
	font-size: 1rem;
}

.azawon-zcalc-step-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--accent-4, #6B7280);
	white-space: nowrap;
}

.azawon-zcalc-step-indicator.active .azawon-zcalc-step-label {
	color: var(--wp--preset--color--accent-1, #156B3A);
}

.azawon-zcalc-step-connector {
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
	margin: 0 0.5rem;
	margin-bottom: 1.5rem;
	min-width: 20px;
	transition: background 0.3s ease;
	position: relative;
}

.azawon-zcalc-step-indicator.completed + .azawon-zcalc-step-connector,
.azawon-zcalc-step-indicator.active + .azawon-zcalc-step-connector {
	background: var(--wp--preset--color--accent-1, #156B3A);
}

/* --- Currency Bar --- */
.azawon-zcalc-currency-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--accent-5, #F5F0EB);
	border-radius: 10px;
}

.azawon-zcalc-currency-bar label {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	white-space: nowrap;
}

.azawon-zcalc-currency-select {
	padding: 0.4rem 0.75rem;
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
	border-radius: 8px;
	font-size: 0.85rem;
	background: var(--wp--preset--color--base, #FFFFFF);
	color: var(--wp--preset--color--contrast, #1A1A2E);
	cursor: pointer;
	min-width: 180px;
	transition: border-color 0.2s ease;
}

.azawon-zcalc-currency-select:focus {
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	outline: none;
}

.azawon-zcalc-fetch-btn {
	margin-left: auto;
	width: 32px;
	height: 32px;
	border: 2px solid var(--wp--preset--color--accent-2, #C4A24E);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--accent-2, #C4A24E);
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	line-height: 1;
}

.azawon-zcalc-fetch-btn:hover {
	background: var(--wp--preset--color--accent-2, #C4A24E);
	color: #FFFFFF;
	transform: rotate(180deg);
}

.azawon-zcalc-fetch-btn.fetching {
	animation: spin 1s linear infinite;
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	color: var(--wp--preset--color--accent-1, #156B3A);
	background: transparent;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* --- Step Content --- */
.azawon-zcalc-step-content {
	display: none;
	animation: zcalcFadeIn 0.4s ease;
}

.azawon-zcalc-step-content.active {
	display: block;
}

@keyframes zcalcFadeIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.azawon-zcalc-section-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin-bottom: 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--accent-2, #C4A24E);
	display: inline-block;
}

/* --- Fields --- */
.azawon-zcalc-field {
	margin-bottom: 1.25rem;
}

.azawon-zcalc-field label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin-bottom: 0.4rem;
}

.azawon-zcalc-field-hint {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
}

.azawon-zcalc-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.azawon-zcalc-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.azawon-zcalc-currency-prefix,
.azawon-zcalc-unit {
	position: absolute;
	left: 1rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	pointer-events: none;
	z-index: 1;
}

.azawon-zcalc-unit {
	font-weight: 500;
	font-size: 0.8rem;
	text-transform: uppercase;
}

.azawon-zcalc-input {
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
	border-radius: 10px;
	padding: 0.75rem 1rem 0.75rem 2.2rem;
	font-size: 1rem;
	width: 100%;
	background: var(--wp--preset--color--base, #FFFFFF);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	font-family: inherit;
	box-sizing: border-box;
}

.azawon-zcalc-input:focus {
	border-color: var(--wp--preset--color--accent-1, #156B3A);
	box-shadow: 0 0 0 4px rgba(27, 107, 58, 0.12);
	outline: none;
	transform: translateY(-1px);
}

/* Metal weight inputs (no prefix, smaller) */
.azawon-zcalc-metal-input {
	padding-left: 2.5rem;
}

.azawon-zcalc-price-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.4rem;
	font-size: 0.78rem;
}

.azawon-zcalc-price-label {
	color: var(--wp--preset--color--accent-4, #6B7280);
}

.azawon-zcalc-metal-value {
	color: var(--wp--preset--color--accent-1, #156B3A);
}

.azawon-zcalc-metal-value strong {
	font-weight: 700;
}

/* Divider */
.azawon-zcalc-divider {
	position: relative;
	text-align: center;
	margin: 1.5rem 0;
}

.azawon-zcalc-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
}

.azawon-zcalc-divider span {
	position: relative;
	background: var(--wp--preset--color--base, #FFFFFF);
	padding: 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--accent-4, #6B7280);
}

/* Total Row */
.azawon-zcalc-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1.25rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #156B3A) 0%, var(--wp--preset--color--accent-7, #0A2E18) 100%);
	border-radius: 10px;
	margin-top: 0.5rem;
}

.azawon-zcalc-total-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zcalc-total-amount {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--wp--preset--color--accent-2, #C4A24E);
}

/* --- Review Step --- */
.azawon-zcalc-review-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.azawon-zcalc-review-card {
	background: var(--wp--preset--color--accent-5, #F5F0EB);
	border-radius: 12px;
	padding: 1rem;
}

.azawon-zcalc-review-card-title {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
}

.azawon-zcalc-review-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.35rem 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast, #1A1A2E);
}

.azawon-zcalc-review-row-empty {
	opacity: 0.4;
}

.azawon-zcalc-amount {
	font-weight: 600;
	color: var(--wp--preset--color--accent-1, #156B3A);
}

.azawon-zcalc-review-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0 0;
	margin-top: 0.25rem;
	border-top: 2px solid var(--wp--preset--color--accent-2, #C4A24E);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast, #1A1A2E);
}

.azawon-zcalc-net-worth {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1.25rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #156B3A) 0%, var(--wp--preset--color--accent-7, #0A2E18) 100%);
	border-radius: 10px;
	margin-top: 0.5rem;
}

.azawon-zcalc-nw-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.azawon-zcalc-nw-amount {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--wp--preset--color--accent-2, #C4A24E);
}

/* --- Navigation Buttons --- */
.azawon-zcalc-nav {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.08));
}

.azawon-zcalc-btn {
	padding: 0.7rem 1.5rem;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border: 2px solid transparent;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.azawon-zcalc-btn-next,
.azawon-zcalc-btn-calc {
	background: var(--wp--preset--color--accent-1, #156B3A);
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(27, 107, 58, 0.25);
}

.azawon-zcalc-btn-next:hover,
.azawon-zcalc-btn-calc:hover {
	background: var(--wp--preset--color--accent-7, #0A2E18);
	box-shadow: 0 8px 24px rgba(27, 107, 58, 0.35);
	transform: translateY(-2px);
}

.azawon-zcalc-btn-next:active,
.azawon-zcalc-btn-calc:active {
	transform: scale(0.97);
}

.azawon-zcalc-btn-back,
.azawon-zcalc-btn-reset {
	background: transparent;
	color: var(--wp--preset--color--accent-4, #6B7280);
	border-color: var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
}

.azawon-zcalc-btn-back:hover,
.azawon-zcalc-btn-reset:hover {
	border-color: var(--wp--preset--color--accent-4, #6B7280);
	color: var(--wp--preset--color--contrast, #1A1A2E);
}

.azawon-zcalc-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

/* --- Result Display --- */
.azawon-zcalc-result-container {
	text-align: center;
	padding: 2rem 1.5rem;
	border-radius: 16px;
	animation: zcalcFadeIn 0.5s ease;
}

.azawon-zcalc-result-eligible {
	background: linear-gradient(135deg, #F0FAF3 0%, #FFFFFF 100%);
	border: 2px solid var(--wp--preset--color--accent-1, #156B3A);
}

.azawon-zcalc-result-not-eligible {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-5, #F5F0EB) 0%, #FFFFFF 100%);
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.12));
}

.azawon-zcalc-result-icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

.azawon-zcalc-result-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	margin-bottom: 0.5rem;
}

.azawon-zcalc-result-amount {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--accent-1, #156B3A);
	line-height: 1.2;
	margin-bottom: 0.25rem;
}

.azawon-zcalc-result-rate {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	margin-bottom: 1.25rem;
}

.azawon-zcalc-result-details {
	max-width: 400px;
	margin: 0 auto 1.25rem;
	text-align: left;
}

.azawon-zcalc-result-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.4rem 0;
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast, #1A1A2E);
	border-bottom: 1px solid var(--wp--preset--color--accent-6, rgba(0,0,0,0.05));
}

.azawon-zcalc-result-row:last-child {
	border-bottom: none;
}

.azawon-zcalc-result-nisab span:last-child {
	color: var(--wp--preset--color--accent-2, #C4A24E);
	font-weight: 600;
}

.azawon-zcalc-pay-btn {
	display: inline-block !important;
	margin-top: 0.75rem;
}

.azawon-zcalc-result-message {
	font-size: 0.88rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
	margin-top: 1rem;
	line-height: 1.6;
}

.azawon-zcalc-error-msg {
	text-align: center;
	padding: 2rem;
	color: #DC2626;
	font-weight: 600;
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 640px) {
	.azawon-zakat-calculator {
		padding: 1.5rem;
	}

	.azawon-zcalc-steps {
		padding: 0;
		gap: 2px;
	}

	.azawon-zcalc-step-label {
		display: none;
	}

	.azawon-zcalc-step-connector {
		min-width: 12px;
		margin-bottom: 0;
	}

	.azawon-zcalc-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.azawon-zcalc-review-grid {
		grid-template-columns: 1fr;
	}

	.azawon-zcalc-currency-bar {
		flex-wrap: wrap;
	}

	.azawon-zcalc-currency-select {
		min-width: 140px;
		flex: 1;
	}

	.azawon-zcalc-result-amount {
		font-size: 2rem;
	}

	.azawon-zcalc-result-container {
		padding: 1.5rem 1rem;
	}

	.azawon-prayer-times {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}

	.azawon-prayer-item {
		padding: 0.5rem;
	}

	.azawon-prayer-item .prayer-time {
		font-size: 0.9rem;
	}

	.azawon-back-to-top {
		bottom: 1rem;
		right: 1rem;
		width: 40px;
		height: 40px;
	}
}

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}

	.azawon-animate {
		opacity: 1;
		transform: none;
	}

	.azawon-verse {
		opacity: 1;
		transform: none;
		position: relative;
	}

	.azawon-verse:not(.active) {
		display: none;
	}

	.azawon-testimonial {
		opacity: 1;
		transform: none;
	}

	.azawon-testimonial:not(.active) {
		display: none;
	}

	.azawon-card:hover,
	.azawon-card-premium:hover,
	.azawon-card-gold:hover {
		transform: none;
	}
}

/* ======================================================================
   HERO COVER
   ====================================================================== */

.azawon-hero-cover {
	position: relative;
}

/* Islamic geometric pattern + gradient layered on hero cover background */
.azawon-hero-cover .wp-block-cover__background {
	background: 
		/* 8-pointed star pattern (Khatam) in gold at low opacity */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23C4A24E' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.4'%3E%3Crect x='60' y='60' width='120' height='120' /%3E%3Cpolygon points='120,20 220,120 120,220 20,120' /%3E%3Crect x='85' y='85' width='70' height='70' /%3E%3Cpolygon points='120,55 185,120 120,185 55,120' /%3E%3Cline x1='20' y1='20' x2='220' y2='220' /%3E%3Cline x1='20' y1='220' x2='220' y2='20' /%3E%3C/g%3E%3Cg fill='%23C4A24E' opacity='0.15'%3E%3Ccircle cx='120' cy='120' r='5' /%3E%3Ccircle cx='120' cy='60' r='2.5' /%3E%3Ccircle cx='120' cy='180' r='2.5' /%3E%3Ccircle cx='60' cy='120' r='2.5' /%3E%3Ccircle cx='180' cy='120' r='2.5' /%3E%3C/g%3E%3C/svg%3E") repeat center/240px 240px,
		/* Deep green gradient overlay */
		linear-gradient(
			160deg,
			rgba(10, 46, 24, 0.92) 0%,
			rgba(21, 107, 58, 0.7) 50%,
			rgba(10, 46, 24, 0.85) 100%
		) !important;
}

/* ======================================================================
   IMPACT STATS SECTION
   ====================================================================== */

.azawon-impact-section {
	position: relative;
}

.azawon-impact-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 3 L44 14 L55 14 L46 22 L50 33 L40 27 L30 33 L34 22 L25 14 L36 14 Z' fill='rgba(196,162,78,0.025)'/%3E%3Cpath d='M40 47 L44 58 L55 58 L46 66 L50 77 L40 71 L30 77 L34 66 L25 58 L36 58 Z' fill='rgba(196,162,78,0.015)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	pointer-events: none;
	z-index: 0;
}

.azawon-impact-section > * {
	position: relative;
	z-index: 1;
}

/* Impact CTA refinement */
.azawon-impact-section .azawon-btn-donate .wp-block-button__link {
	box-shadow: 0 4px 16px rgba(21, 107, 58, 0.35);
}

.azawon-impact-section .azawon-btn-donate .wp-block-button__link:hover {
	box-shadow: 0 8px 28px rgba(21, 107, 58, 0.5);
}

/* Counter label refinement */
.azawon-counter-label {
	position: relative;
	display: inline-block;
	padding-bottom: 0.2rem;
}

.azawon-counter-label::after {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background: var(--wp--preset--color--accent-2, #C4A24E);
	margin: 0.35rem auto 0;
	border-radius: 1px;
	opacity: 0.5;
}

/* ======================================================================
   DONATE SECTION - CARD ENHANCEMENTS
   ====================================================================== */

/* Donate card outer wrapper */
.azawon-donate-card {
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.azawon-donate-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

/* Image zoom on donate cards */
.azawon-donate-card .wp-block-image img {
	transition: transform 0.4s ease;
}

.azawon-donate-card:hover .wp-block-image img {
	transform: scale(1.05);
}

/* Hover accent border for non-featured cards */
.azawon-card-premium {
	position: relative;
}

.azawon-card-premium::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1.5px solid transparent;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A)) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.azawon-card-premium:hover::after {
	opacity: 1;
}

/* Price tag highlight on hover */
.azawon-donate-card:hover .wp-block-group[style*="border-radius:10px"] {
	border-color: var(--wp--preset--color--accent-2, #C4A24E) !important;
}

/* Zakat callout cover block - subtle pattern */
.wp-block-cover:has(.is-style-azawon-gold) {
	overflow: hidden;
}

.wp-block-cover:has(.is-style-azawon-gold)::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 2 L33 13 L44 13 L36 21 L39 32 L30 26 L21 32 L24 21 L16 13 L27 13 Z' fill='rgba(196,162,78,0.04)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 60px 60px;
	pointer-events: none;
	z-index: 0;
	animation: zakatPatternFloat 30s linear infinite;
}

@keyframes zakatPatternFloat {
	from { transform: translate(0, 0); }
	to { transform: translate(60px, 60px); }
}

/* ======================================================================
   CAROUSEL — ENHANCED OVERLAY VARIANTS & STATS
   ====================================================================== */

/* Colored overlays replacing the generic dark overlay */
.azawon-carousel-overlay-green {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(6, 78, 59, 0.85) 0%, rgba(30, 138, 74, 0.7) 50%, rgba(6, 78, 59, 0.85) 100%);
	pointer-events: none;
}

.azawon-carousel-overlay-blue {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(13, 59, 107, 0.85) 0%, rgba(30, 100, 180, 0.7) 50%, rgba(13, 59, 107, 0.85) 100%);
	pointer-events: none;
}

.azawon-carousel-overlay-purple {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(74, 26, 107, 0.85) 0%, rgba(120, 50, 180, 0.7) 50%, rgba(74, 26, 107, 0.85) 100%);
	pointer-events: none;
}

.azawon-carousel-overlay-amber {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(107, 58, 10, 0.85) 0%, rgba(180, 100, 20, 0.7) 50%, rgba(107, 58, 10, 0.85) 100%);
	pointer-events: none;
}

/* Carousel content inner wrapper */
.azawon-carousel-content-inner {
	max-width: 720px;
	margin: 0 auto;
}

.azawon-carousel-active .azawon-carousel-content-inner {
	animation: azawonCarouselContentIn 0.8s ease 0.3s both;
}

/* Badge dot indicator */
.azawon-carousel-badge-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #C4A24E;
	margin-right: 0.4rem;
	animation: azawonBadgePulse 2s ease-in-out infinite;
	vertical-align: middle;
}

@keyframes azawonBadgePulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.85); }
}

/* Carousel stats row */
.azawon-carousel-stats {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.12);
}

.azawon-carousel-stat {
	text-align: center;
}

.azawon-carousel-stat-num {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: #C4A24E;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.azawon-carousel-stat-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 0.2rem;
}

/* Arrow icon in CTA buttons */
.azawon-carousel-btn svg {
	margin-left: 0.5rem;
	transition: transform 0.3s ease;
}

.azawon-carousel-btn:hover svg {
	transform: translateX(4px);
}

/* Carousel responsive stats */
@media (max-width: 781px) {
	.azawon-carousel-stats {
		gap: 1rem;
		flex-wrap: wrap;
		margin-top: 1.5rem;
		padding-top: 1rem;
	}
	.azawon-carousel-stat-num {
		font-size: 1.2rem;
	}
	.azawon-carousel-stat-label {
		font-size: 0.65rem;
	}
}

@media (max-width: 480px) {
	.azawon-carousel {
		min-height: 70vh;
	}
	.azawon-carousel-stats {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
	.azawon-carousel-stat {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.azawon-carousel-stat-num {
		font-size: 1rem;
	}
	.azawon-carousel-stat-label {
		margin-top: 0;
		font-size: 0.7rem;
	}
}

/* ======================================================================
   MISSION SECTION — ENHANCED CARDS
   ====================================================================== */

.azawon-mission-section {
	position: relative;
}

.azawon-mission-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196,162,78,0.2), transparent);
}

.azawon-mission-header .azawon-mission-sep {
	width: 80px;
	height: 3px !important;
	margin: 0 auto 1.5rem !important;
	background: var(--wp--preset--color--accent-2, #C4A24E) !important;
	opacity: 0.6;
	border-radius: 3px;
}

/* Mission cards container — premium 2-column grid */
.azawon-mission-cards {
	position: relative;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem !important;
	align-items: stretch;
	counter-reset: azawon-mission;
}

/* Mission card column — stretch for equal height */
.azawon-mission-card-col {
	display: flex;
	min-width: 0;
}

/* Individual mission card — premium horizontal layout */
.azawon-mission-card {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	text-align: left;
	padding: 2.25rem 2rem !important;
	border: 1px solid rgba(196, 162, 78, 0.2);
	border-radius: 22px;
	background:
		linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A)) top left / 100% 4px no-repeat,
		radial-gradient(circle at 100% 0%, rgba(196, 162, 78, 0.12), transparent 55%),
		linear-gradient(180deg, var(--wp--preset--color--base, #FFFFFF), #FDFBF6);
	box-shadow: 0 6px 24px rgba(21, 107, 58, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.3s ease;
	display: grid !important;
	grid-template-columns: 88px 1fr;
	grid-template-areas:
		"icon title"
		"icon text"
		"tags more";
	column-gap: 1.5rem;
	row-gap: 0.7rem;
	align-items: start;
	overflow: hidden;
	counter-increment: azawon-mission;
}

/* Card number badge */
.azawon-mission-card::before {
	content: '0' counter(azawon-mission);
	position: absolute;
	top: 1rem;
	left: 1.3rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--accent-2, #C4A24E);
	opacity: 0.9;
	z-index: 3;
	pointer-events: none;
	transition: color 0.3s ease, transform 0.3s ease;
}

/* Decorative 8-point star watermark */
.azawon-mission-card::after {
	content: '✦';
	position: absolute;
	top: 1.1rem;
	right: 1.4rem;
	font-size: 2.3rem;
	line-height: 1;
	color: rgba(196, 162, 78, 0.12);
	pointer-events: none;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.azawon-mission-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 72px rgba(21, 107, 58, 0.12), 0 10px 28px rgba(196, 162, 78, 0.14);
	border-color: rgba(196, 162, 78, 0.42);
}

.azawon-mission-card:hover::before {
	color: var(--wp--preset--color--accent-1, #156B3A);
	transform: scale(1.15);
}

.azawon-mission-card:hover::after {
	transform: rotate(45deg) scale(1.2);
	color: rgba(196, 162, 78, 0.22);
}

/* Card heading */
.azawon-mission-card h3 {
	grid-area: title;
	position: relative;
	z-index: 1;
	margin: 0.3rem 0 0.4rem !important;
	font-size: 1.35rem !important;
	letter-spacing: -0.01em;
	transition: color 0.3s ease;
}

/* Card description */
.azawon-mission-card > p:not(.azawon-mission-more) {
	grid-area: text;
	margin: 0;
}

/* Gold underline accent under each card title */
.azawon-mission-card h3::after {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	margin: 0.6rem 0 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	opacity: 0.85;
	transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

.azawon-mission-card:hover h3::after {
	width: 64px;
	opacity: 1;
}

.azawon-mission-card:hover h3 {
	color: var(--wp--preset--color--accent-1, #156B3A);
}

/* Mission card icon wrapper — gold-ringed medallion, left of content */
.azawon-mission-icon-wrap {
	grid-area: icon;
	width: 88px;
	height: 88px;
	margin: 0;
	align-self: center;
	padding: 1rem !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, rgba(196, 162, 78, 0.22), rgba(21, 107, 58, 0.14)) !important;
	border: 1px solid rgba(196, 162, 78, 0.4);
	box-shadow: 0 10px 24px rgba(196, 162, 78, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 6px rgba(196, 162, 78, 0.08);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.3s ease,
	            box-shadow 0.3s ease,
	            border-color 0.3s ease;
}

.azawon-mission-icon-wrap p {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.azawon-mission-card:hover .azawon-mission-icon-wrap {
	transform: translateY(-3px) scale(1.07) rotate(-4deg);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #156B3A), var(--wp--preset--color--accent-7, #064E3B)) !important;
	box-shadow: 0 14px 28px rgba(21, 107, 58, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	border-color: rgba(196, 162, 78, 0.6);
}

.azawon-mission-card:hover .azawon-mission-icon-wrap p {
	transform: scale(1.14) rotate(8deg);
}

/* Mission tag row — bottom-left of the card */
.azawon-mission-tags {
	grid-area: tags;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-self: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border-top: none;
}

/* Mission tag chips */
.azawon-mission-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.7rem;
	background: linear-gradient(135deg, rgba(21, 107, 58, 0.07), rgba(196, 162, 78, 0.07));
	border: 1px solid rgba(196, 162, 78, 0.14);
	border-radius: 50px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.azawon-mission-tag:hover {
	background: linear-gradient(135deg, rgba(21, 107, 58, 0.14), rgba(196, 162, 78, 0.14));
	border-color: rgba(196, 162, 78, 0.3);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(21, 107, 58, 0.08);
}

/* Per-card Learn More link — bottom-right of the card */
.azawon-mission-more {
	grid-area: more;
	align-self: center;
	justify-self: end;
	margin: 0 !important;
}

.azawon-mission-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--accent-1, #156B3A);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease;
}

.azawon-mission-more a::after {
	content: '→';
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.azawon-mission-more a:hover {
	color: var(--wp--preset--color--accent-2, #C4A24E);
}

.azawon-mission-more a:hover::after {
	transform: translateX(4px);
}

/* Premium gold CTA button (Learn More) */
.is-style-azawon-gold .wp-block-button__link {
	background: linear-gradient(135deg, #E8B923 0%, #D4AF37 45%, #F0C94E 100%) !important;
	color: #1F2937 !important;
	border: 1px solid rgba(196, 162, 78, 0.5) !important;
	box-shadow: 0 4px 14px rgba(196, 162, 78, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease !important;
}

.is-style-azawon-gold .wp-block-button__link:hover {
	transform: translateY(-3px) !important;
	background: linear-gradient(135deg, #F0C94E 0%, #D4AF37 50%, #E8B923 100%) !important;
	box-shadow: 0 10px 28px rgba(196, 162, 78, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.is-style-azawon-gold .wp-block-button__link:active {
	transform: translateY(0) scale(0.97) !important;
	box-shadow: 0 4px 14px rgba(196, 162, 78, 0.3) !important;
}

/* Mission verse section */
.azawon-mission-verse {
	border: 1px solid rgba(196, 162, 78, 0.12);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.azawon-mission-verse:hover {
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

@media (max-width: 1100px) {
	.azawon-mission-card {
		padding: 1.75rem 1.25rem !important;
	}
	.azawon-mission-icon-wrap {
		width: 72px;
		height: 72px;
	}
	.azawon-mission-cards {
		column-gap: 1.25rem !important;
	}
}

@media (max-width: 781px) {
	.azawon-mission-card {
		padding: 1.5rem !important;
		grid-template-columns: 72px 1fr;
	}
	.azawon-mission-verse .wp-block-columns {
		flex-direction: column !important;
		gap: 1rem !important;
	}
}

@media (max-width: 560px) {
	.azawon-mission-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.azawon-mission-icon-wrap {
		width: 56px;
		height: 56px;
	}
	.azawon-mission-icon-wrap p {
		font-size: 1.5rem !important;
	}
	.azawon-mission-card {
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"icon title"
			"icon text"
			"tags tags"
			"more more";
		column-gap: 1rem;
	}
	.azawon-mission-more {
		justify-self: start;
		margin-top: 0.35rem !important;
	}
}

/* ======================================================================
   OUR WORK / PROJECTS PAGE — PREMIUM CARDS (mirrors mission cards)
   ====================================================================== */

/* Completed project cards (image cards) */
.azawon-projects-section .azawon-card {
	position: relative;
	border: 1px solid rgba(196, 162, 78, 0.16);
	border-radius: 16px;
	background:
		radial-gradient(circle at 100% 0%, rgba(196, 162, 78, 0.09), transparent 55%),
		linear-gradient(180deg, var(--wp--preset--color--accent-5, #F5F0EB), var(--wp--preset--color--accent-5, #F5F0EB));
	box-shadow: 0 4px 18px rgba(27, 107, 58, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.3s ease;
}

.azawon-projects-section .azawon-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	opacity: 0.9;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.azawon-projects-section .azawon-card::after {
	content: '✦';
	position: absolute;
	top: 0.85rem;
	right: 1.15rem;
	font-size: 2rem;
	line-height: 1;
	color: rgba(196, 162, 78, 0.16);
	pointer-events: none;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
	z-index: 2;
}

.azawon-projects-section .azawon-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 64px rgba(27, 107, 58, 0.1), 0 8px 24px rgba(27, 107, 58, 0.06);
	border-color: rgba(196, 162, 78, 0.32);
}

.azawon-projects-section .azawon-card:hover::after {
	transform: rotate(45deg) scale(1.15);
	color: rgba(196, 162, 78, 0.26);
}

/* Ongoing project cards (icon cards) */
.azawon-projects-section .azawon-card-premium {
	border: 1px solid rgba(196, 162, 78, 0.16);
	border-radius: 16px;
	background:
		radial-gradient(circle at 100% 0%, rgba(196, 162, 78, 0.09), transparent 55%),
		linear-gradient(180deg, var(--wp--preset--color--accent-5, #F5F0EB), var(--wp--preset--color--accent-5, #F5F0EB));
	box-shadow: 0 4px 18px rgba(27, 107, 58, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Always-on gold accent bar (was hover-only) */
.azawon-projects-section .azawon-card-premium::before {
	height: 4px;
	opacity: 0.9;
}

/* Decorative star watermark */
.azawon-projects-section .azawon-card-premium::after {
	content: '✦';
	position: absolute;
	top: 1rem;
	right: 1.4rem;
	font-size: 2rem;
	line-height: 1;
	color: rgba(196, 162, 78, 0.12);
	pointer-events: none;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.azawon-projects-section .azawon-card-premium:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 52px rgba(27, 107, 58, 0.1), 0 6px 20px rgba(27, 107, 58, 0.06);
	border-color: rgba(196, 162, 78, 0.32);
}

.azawon-projects-section .azawon-card-premium:hover::before {
	opacity: 1;
}

.azawon-projects-section .azawon-card-premium:hover::after {
	transform: rotate(45deg) scale(1.2);
	color: rgba(196, 162, 78, 0.22);
}

/* Ongoing card header — ensure icon + title sit side by side */
.azawon-projects-section .azawon-card-premium > .wp-block-group {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

/* Icon medallion — gold-ringed, matches mission card icons */
.azawon-project-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	align-self: center;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(196, 162, 78, 0.16), rgba(21, 107, 58, 0.1));
	border: 1px solid rgba(196, 162, 78, 0.35);
	box-shadow: 0 6px 16px rgba(196, 162, 78, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.75);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.3s ease,
	            box-shadow 0.3s ease;
}

.azawon-projects-section .azawon-card-premium:hover .azawon-project-icon {
	transform: translateY(-3px) scale(1.06) rotate(-4deg);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #156B3A), var(--wp--preset--color--accent-7, #064E3B));
	box-shadow: 0 12px 24px rgba(21, 107, 58, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 480px) {
	.azawon-project-icon {
		width: 46px;
		height: 46px;
	}
}

/* ======================================================================
   LANDING PAGE — SECTION TRANSITIONS & VISUAL COHESION
   ====================================================================== */

/* === Section Spacing & Entrance (azawon-animate defined in SCROLL ANIMATIONS) === */

.azawon-impact-section,
.azawon-mission-section,
.azawon-zakat-section,
.azawon-donate-section,
.azawon-testimonials-section,
.azawon-articles-section,
.azawon-newsletter-section {
	position: relative;
	overflow: hidden;
}

/* === Section Connector Dividers ===
   Adds gold accent lines between alternating background sections */

.azawon-impact-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196,162,78,0.15), transparent);
	z-index: 1;
}

.azawon-mission-section::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196,162,78,0.08), transparent);
}

/* === Alternating Background Section Transitions === */

/* From impact (dark) → zakat section (light) */
.azawon-zakat-section {
	position: relative;
}

.azawon-zakat-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(180deg, var(--wp--preset--color--accent-7, #0A2E18) 0%, transparent 100%);
	pointer-events: none;
	opacity: 0.08;
}

/* From donate (white) → testimonials (accent-5) */
.azawon-testimonials-section {
	position: relative;
}

.azawon-testimonials-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(180deg, transparent 0%, var(--wp--preset--color--accent-5, #F5F0EB) 100%);
	pointer-events: none;
	opacity: 0.5;
}

/* Newsletter green section accent */
.azawon-newsletter-section {
	position: relative;
}

.azawon-newsletter-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-2, #C4A24E), transparent);
	opacity: 0.4;
}

/* === Enhanced Zakat Calculator Card === */

.azawon-zakat-section .azawon-zakat-calculator {
	border-width: 1.5px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	transform: translateY(0);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.azawon-zakat-section .azawon-zakat-calculator:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

/* === Donation Card Enhancements === */

.azawon-donate-card {
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
}

.azawon-donate-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ======================================================================
   DONATE SECTION — PREMIUM CAUSE CARDS
   ====================================================================== */

/* Donate cards grid — 3-up on desktop, 2-up on tablet, 1-up on mobile */
.azawon-donate-cards-row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.azawon-donate-cards-row > .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
	min-width: 0;
}

/* Equal-height cards: only the inner premium group stretches (pinning its
   button to the bottom). The broad `height:100%` on every group used to
   stretch the 'Most Popular' badge to the full card height. */
.azawon-donate-cards-row .azawon-card-premium {
	flex: 1 1 auto;
	min-height: 0;
}

.azawon-donate-cards-row .azawon-donate-card > .wp-block-group.has-accent-2-background-color {
	height: auto;
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	.azawon-donate-cards-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.azawon-donate-cards-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Buttons must never wrap to two lines, even in narrow columns */
.wp-block-button__link {
	white-space: nowrap;
}

/* Same mid-word / mid-number protection for the homepage donate cards. */
.azawon-donate-cards-row .azawon-card-premium .wp-block-heading,
.azawon-donate-cards-row .azawon-card-premium p {
	word-break: keep-all;
	overflow-wrap: normal;
}

.azawon-donate-cards-row .azawon-card-premium .has-accent-1-color {
	white-space: nowrap;
}

/* Card container — elevated gradient card with gold top accent */
.azawon-donate-section .wp-block-column > .wp-block-group.has-accent-5-background-color {
	position: relative;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(180deg, rgba(196, 162, 78, 0.1), transparent 35%),
		linear-gradient(180deg, var(--wp--preset--color--base, #FFFFFF), var(--wp--preset--color--accent-5, #F5F0EB)) !important;
	border: 1px solid rgba(196, 162, 78, 0.2);
	border-radius: 20px !important;
	box-shadow: 0 6px 24px rgba(21, 107, 58, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.3s ease;
}

/* Card 1 wrapper (has badge) — always-on gold top bar */
.azawon-donate-section .azawon-donate-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	opacity: 0.9;
	z-index: 2;
}

/* Cards 2 & 3 (premium body is the wrapper) — always-on gold top bar */
.azawon-donate-section .wp-block-column > .azawon-card-premium::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	opacity: 0.9;
	z-index: 2;
}

/* Decorative star watermark */
.azawon-donate-section .azawon-card-premium::after {
	content: '✦';
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	font-size: 2rem;
	line-height: 1;
	color: rgba(196, 162, 78, 0.14);
	pointer-events: none;
	z-index: 1;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

/* Suppress the global hover gold bar on card 1's inner premium body
   (the wrapper already has an always-on gold bar) */
.azawon-donate-section .azawon-donate-card .azawon-card-premium::before {
	opacity: 0 !important;
}

/* Equal-height layout — premium body flexes to fill, button pinned to bottom.
   gap:0 so the theme's 1.5rem block-gap doesn't inflate spacing on top of
   the pattern's inline margins */
.azawon-donate-section .azawon-card-premium {
	flex: 1;
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
}

.azawon-donate-section .azawon-card-premium .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* Emoji icon → circular medallion */
.azawon-donate-section .azawon-card-premium > p:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(196, 162, 78, 0.2), rgba(21, 107, 58, 0.12)) !important;
	border: 1px solid rgba(196, 162, 78, 0.4);
	box-shadow: 0 8px 20px rgba(196, 162, 78, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
	margin-bottom: 0.75rem;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.3s ease,
	            box-shadow 0.3s ease;
}

/* Card heading with gold underline accent */
.azawon-donate-section .azawon-card-premium > h3 {
	position: relative;
	padding-bottom: 0.6rem;
	font-size: 1.35rem !important;
}

.azawon-donate-section .azawon-card-premium > h3::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, #C4A24E, #156B3A);
	transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Price tag → deep green chip with gold price */
.azawon-donate-section .azawon-card-premium > .has-base-background-color {
	background: linear-gradient(135deg, #156B3A, #0A2E18) !important;
	border: 1px solid rgba(196, 162, 78, 0.35);
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(21, 107, 58, 0.22);
}

.azawon-donate-section .azawon-card-premium > .has-base-background-color p:first-child {
	color: #F4B400 !important;
}

.azawon-donate-section .azawon-card-premium > .has-base-background-color p:last-child {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Impact highlights → chip pills */
.azawon-donate-section .azawon-card-premium > .wp-block-group:not(.has-base-background-color) {
	gap: 0.5rem !important;
}

.azawon-donate-section .azawon-card-premium > .wp-block-group:not(.has-base-background-color) > p {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.7rem;
	background: rgba(21, 107, 58, 0.08);
	border: 1px solid rgba(196, 162, 78, 0.18);
	border-radius: 50px;
	font-weight: 600 !important;
	color: #156B3A !important;
}

/* Most Popular badge → centered gold pill */
.azawon-donate-section .azawon-donate-card > .wp-block-group.has-accent-2-background-color {
	width: fit-content;
	margin: 0.8rem auto 0 !important;
	padding: 0.4rem 1.1rem !important;
	border-radius: 50px !important;
	background: linear-gradient(135deg, #E8B923, #D4AF37) !important;
	box-shadow: 0 4px 12px rgba(196, 162, 78, 0.3);
}

/* Hover — lift, glow, underline grow, medallion pop */
.azawon-donate-section .wp-block-column > .wp-block-group.has-accent-5-background-color:hover {
	transform: translateY(-6px);
	border-color: rgba(196, 162, 78, 0.45);
	box-shadow: 0 22px 56px rgba(21, 107, 58, 0.12), 0 8px 24px rgba(196, 162, 78, 0.16);
}

.azawon-donate-section .wp-block-column > .wp-block-group.has-accent-5-background-color:hover h3::after {
	width: 64px;
}

.azawon-donate-section .wp-block-column > .wp-block-group.has-accent-5-background-color:hover .azawon-card-premium > p:first-child {
	transform: scale(1.1) rotate(-4deg);
	background: linear-gradient(135deg, rgba(196, 162, 78, 0.3), rgba(21, 107, 58, 0.18)) !important;
	box-shadow: 0 12px 24px rgba(196, 162, 78, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.azawon-donate-section .wp-block-column > .wp-block-group.has-accent-5-background-color:hover .azawon-card-premium::after {
	transform: rotate(45deg) scale(1.2);
	color: rgba(196, 162, 78, 0.3);
}

/* === Testimonial Slider Enhancements === */

.azawon-testimonial-slider {
	position: relative;
	min-height: 280px;
}

.azawon-testimonial {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
	transform: translateX(24px);
	opacity: 0;
	pointer-events: none;
}

.azawon-testimonial.active {
	opacity: 1;
	transform: translateX(0);
	position: relative;
	pointer-events: auto;
}

/* Gold quote mark */
.azawon-testimonial .has-accent-2-color {
	font-family: Georgia, 'Times New Roman', serif;
}

/* === Latest Articles === */

.azawon-articles-section .azawon-card {
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.azawon-articles-section .azawon-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.azawon-articles-section .wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.azawon-articles-section .azawon-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* ======================================================================
   TESTIMONIALS — PREMIUM SLIDE CARD
   ====================================================================== */

/* Slide card: elevated white card with gold ring + green glow */
/* (position: relative comes from .azawon-testimonial-active so inactive
   slides keep the slider's absolute stacking) */
.azawon-testimonial {
	background:
		radial-gradient(120% 90% at 90% -10%, rgba(196, 162, 78, 0.14) 0%, transparent 55%),
		linear-gradient(180deg, #FFFFFF 0%, #FBFAF5 100%) !important;
	border: 1px solid rgba(196, 162, 78, 0.28) !important;
	border-radius: 24px !important;
	box-shadow: 0 18px 50px rgba(10, 46, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.4s ease;
}

.azawon-testimonial::before {
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 4px;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A), var(--wp--preset--color--accent-2, #C4A24E));
	z-index: 2;
}

/* Oversized decorative quote watermark */
.azawon-testimonial::after {
	content: '“';
	position: absolute;
	top: 0.4rem;
	right: 1.6rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 7rem;
	line-height: 1;
	color: rgba(196, 162, 78, 0.14);
	pointer-events: none;
	z-index: 0;
}

/* Quote mark — gold serif */
.azawon-testimonial .has-accent-2-color:first-child {
	font-size: 4rem !important;
	line-height: 0.4 !important;
	color: var(--wp--preset--color--accent-2, #C4A24E) !important;
	text-shadow: 0 4px 16px rgba(196, 162, 78, 0.35);
}

/* Quote body text */
.azawon-testimonial > .has-text-align-center[style*="font-style:italic"] {
	position: relative;
	z-index: 1;
	font-size: 1.12rem !important;
	line-height: 1.8 !important;
	color: #23302B !important;
}

/* Author badge — green gradient pill with gold star */
.azawon-testimonial > .wp-block-group .has-accent-2-background-color {
	background: linear-gradient(135deg, #156B3A 0%, #0A2E18 100%) !important;
	box-shadow: 0 6px 18px rgba(21, 107, 58, 0.35);
	padding: 0.6rem 1.35rem !important;
}

.azawon-testimonial > .wp-block-group .has-accent-2-background-color p {
	color: #FFFFFF !important;
}

.azawon-testimonial > .wp-block-group .has-accent-2-background-color p:last-child {
	color: #F4B400 !important;
	font-weight: 600;
}

/* ======================================================================
   LATEST ARTICLES — PREMIUM POST CARDS
   ====================================================================== */

.azawon-articles-section .azawon-card {
	position: relative;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF5 100%) !important;
	border: 1px solid rgba(196, 162, 78, 0.22);
	border-radius: 18px !important;
	box-shadow: 0 6px 24px rgba(10, 46, 24, 0.07);
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 0.3s ease;
}

.azawon-articles-section .azawon-card:hover {
	transform: translateY(-8px);
	border-color: rgba(196, 162, 78, 0.45);
	box-shadow: 0 24px 60px rgba(10, 46, 24, 0.16);
}

/* Gold top accent bar */
.azawon-articles-section .azawon-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-1, #156B3A));
	z-index: 3;
	opacity: 0.9;
	transition: opacity 0.3s ease;
}

.azawon-articles-section .azawon-card:hover::before {
	opacity: 1;
}

/* Featured image — rounded top, zoom on hover */
.azawon-articles-section .wp-block-post-featured-image {
	overflow: hidden;
	position: relative;
}

.azawon-articles-section .wp-block-post-featured-image img {
	border-radius: 17px 17px 0 0;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.azawon-articles-section .azawon-card:hover .wp-block-post-featured-image img {
	transform: scale(1.07);
}

/* Image bottom gradient wash for depth */
.azawon-articles-section .wp-block-post-featured-image::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(10, 46, 24, 0.35));
	pointer-events: none;
}

/* Title — green, gold on hover with underline accent */
.azawon-articles-section .wp-block-post-title a {
	color: #0A2E18 !important;
	font-weight: 700;
	transition: color 0.3s ease;
}

.azawon-articles-section .azawon-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent-1, #156B3A) !important;
}

.azawon-articles-section .wp-block-post-title {
	position: relative;
	padding-bottom: 0.35rem;
}

.azawon-articles-section .wp-block-post-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 34px;
	border-radius: 2px;
	background: linear-gradient(90deg, #C4A24E, #156B3A);
	transition: width 0.35s ease;
}

.azawon-articles-section .azawon-card:hover .wp-block-post-title::after {
	width: 60px;
}

/* Excerpt + Read More link — gold arrow link */
.azawon-articles-section .wp-block-post-excerpt {
	font-size: 0.9rem;
	color: #55615B !important;
}

.azawon-articles-section .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1, #156B3A) !important;
	border-bottom: 2px solid rgba(196, 162, 78, 0.55);
	padding-bottom: 2px;
	transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}

.azawon-articles-section .azawon-card:hover .wp-block-post-excerpt__more-link {
	color: #C4A24E !important;
	border-color: #C4A24E;
	letter-spacing: 0.8px;
}

/* View All Articles button — gold pill */
.azawon-articles-section .is-style-azawon-gold .wp-block-button__link {
	border-radius: 50px !important;
	box-shadow: 0 8px 22px rgba(196, 162, 78, 0.35);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.azawon-articles-section .is-style-azawon-gold .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(196, 162, 78, 0.45);
}

@media (max-width: 480px) {
	.azawon-testimonial::after { font-size: 5rem; right: 1rem; }
	.azawon-testimonial > .has-text-align-center[style*="font-style:italic"] {
		font-size: 1rem !important;
	}
}

/* === Newsletter form polish === */

.azawon-newsletter-section .wp-block-search__inside-wrapper {
	border: 2px solid rgba(196,162,78,0.2);
	border-radius: 50px !important;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.azawon-newsletter-section .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent-2, #C4A24E);
	box-shadow: 0 0 0 4px rgba(196,162,78,0.12);
}

.azawon-newsletter-section .wp-block-search__input {
	border: none !important;
	padding: 0.6rem 1rem !important;
	font-size: 0.9rem;
}

.azawon-newsletter-section .wp-block-search__button {
	background: var(--wp--preset--color--accent-2, #C4A24E) !important;
	color: #1A1A2E !important;
	font-weight: 700 !important;
	font-size: 0.85rem !important;
	padding: 0.6rem 1.5rem !important;
	border: none !important;
	border-radius: 50px !important;
	cursor: pointer;
	transition: all 0.3s ease !important;
}

.azawon-newsletter-section .wp-block-search__button:hover {
	background: #D4AF37 !important;
	transform: translateX(2px);
}

/* === Footer Refinements === */

.azawon-footer-gold-accent {
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2, #C4A24E), var(--wp--preset--color--accent-8, #D4AF37), var(--wp--preset--color--accent-2, #C4A24E)) !important;
}

.azawon-footer-tagline {
	opacity: 0.8;
	line-height: 1.8 !important;
}

.azawon-footer-contact-icon {
	margin-right: 0.3rem;
	opacity: 0.7;
}

/* === Responsive Section Spacing === */

/* Balanced section heights — consistent moderate padding on desktop so
   content-heavy sections (mission, donate) don't balloon vs. lighter ones */
.azawon-impact-section,
.azawon-mission-section,
.azawon-zakat-section,
.azawon-donate-section,
.azawon-testimonials-section,
.azawon-articles-section,
.azawon-newsletter-section {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* Compact the oversized internal spacers inside content sections so the
   tall card grids breathe without stretching each section needlessly */
.azawon-mission-section > .wp-block-spacer,
.azawon-impact-section > .wp-block-spacer,
.azawon-donate-section > .wp-block-spacer,
.azawon-zakat-section > .wp-block-spacer,
.azawon-testimonials-section > .wp-block-spacer,
.azawon-articles-section > .wp-block-spacer {
	height: var(--wp--preset--spacing--30) !important;
}

@media (max-width: 480px) {
	.azawon-impact-section,
	.azawon-mission-section,
	.azawon-zakat-section,
	.azawon-donate-section,
	.azawon-testimonials-section,
	.azawon-articles-section,
	.azawon-newsletter-section {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}
}

/* ======================================================================
   TESTIMONIAL SLIDER — ENHANCED NAVIGATION
   ====================================================================== */

.azawon-testimonial-slider {
	position: relative;
	min-height: 280px;
}

/* Arrow buttons */
.azawon-test-prev,
.azawon-test-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid rgba(196,162,78,0.2);
	background: #FFFFFF;
	color: var(--wp--preset--color--accent-2, #C4A24E);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	padding: 0;
}

.azawon-test-prev:hover,
.azawon-test-next:hover {
	background: var(--wp--preset--color--accent-2, #C4A24E);
	color: #FFFFFF;
	border-color: var(--wp--preset--color--accent-2, #C4A24E);
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 16px rgba(196,162,78,0.3);
}

.azawon-test-prev:active,
.azawon-test-next:active {
	transform: translateY(-50%) scale(0.95);
}

.azawon-test-prev {
	left: -20px;
}

.azawon-test-next {
	right: -20px;
}

/* Navigation dots */
.azawon-test-dots {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}

.azawon-test-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(196,162,78,0.3);
	background: transparent;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	padding: 0;
}

.azawon-test-dot:hover {
	border-color: var(--wp--preset--color--accent-2, #C4A24E);
	transform: scale(1.2);
}

.azawon-test-dot-active {
	background: var(--wp--preset--color--accent-2, #C4A24E);
	border-color: var(--wp--preset--color--accent-2, #C4A24E);
	box-shadow: 0 0 12px rgba(196,162,78,0.3);
}

/* Slide counter */
.azawon-test-counter {
	text-align: center;
	margin-top: 0.75rem;
	opacity: 0.5;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
}

/* Quote mark styling */
.azawon-testimonial .has-accent-2-color {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
}

/* Enhanced testimonial card */
.azawon-testimonial.has-base-background-color {
	border: 1px solid rgba(196,162,78,0.08);
	box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

@media (max-width: 781px) {
	.azawon-testimonial-slider {
		min-height: 320px;
	}
	.azawon-test-prev,
	.azawon-test-next {
		width: 34px;
		height: 34px;
	}
	.azawon-test-prev {
		left: -14px;
	}
	.azawon-test-next {
		right: -14px;
	}
	.azawon-testimonial.has-base-background-color {
		padding: 1.5rem !important;
	}
}

@media (max-width: 480px) {
	.azawon-testimonial-slider {
		min-height: 360px;
	}
	.azawon-test-prev,
	.azawon-test-next {
		display: none;
	}
	.azawon-test-dots {
		gap: 0.5rem;
	}
	.azawon-test-dot {
		width: 10px;
		height: 10px;
	}
}
/* ======================================================================
   PREMIUM CHARITY HEADER v2
   Palette: #0B6E4F primary · #1E88E5 secondary · #F4B400 accent ·
            #1F2937 ink · white base
   ====================================================================== */

:root {
	--azawon-primary: #0B6E4F;
	--azawon-primary-dark: #07513B;
	--azawon-primary-soft: rgba(11, 110, 79, 0.08);
	--azawon-secondary: #1E88E5;
	--azawon-accent: #F4B400;
	--azawon-accent-soft: rgba(244, 180, 0, 0.14);
	--azawon-ink: #1F2937;
	--azawon-ink-soft: #4B5563;
	--azawon-muted: #6B7280;
	--azawon-surface: #FFFFFF;
	--azawon-surface-soft: #F8FAFC;
	--azawon-line: rgba(15, 23, 42, 0.08);
	--azawon-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
	--azawon-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
	--azawon-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(15, 23, 42, 0.08);
	--azawon-radius-sm: 10px;
	--azawon-radius: 16px;
	--azawon-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--azawon-font-brand: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif);
	--azawon-font-body: var(--wp--preset--font-family--inter, 'Inter', sans-serif);

	/* Fixed header heights — used to pull the hero up behind the transparent header */
	--azawon-info-h: 44px;
	--azawon-header-h: 76px;
	--azawon-header-total: calc(var(--azawon-info-h) + var(--azawon-header-h));

	/* Header foreground color — flips with scroll state / theme */
	--hdr-link: #1F2937;
	--hdr-icon: #1F2937;
}

.azawon-container {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2.5rem);
	padding-right: clamp(1rem, 4vw, 2.5rem);
}

/* ===================== TOP INFO BAR ===================== */

.azawon-info-bar {
	position: relative;
	z-index: 1002;
	height: var(--azawon-info-h);
	background: linear-gradient(90deg, #064E3B 0%, var(--azawon-primary) 60%, #0B6E4F 100%);
	color: #FFFFFF;
	font-family: var(--azawon-font-body);
	overflow: hidden;
	transition: transform 0.4s var(--azawon-ease), opacity 0.35s ease;
}

body.azawon-header-scrolled .azawon-info-bar {
	transform: translateY(-110%);
	opacity: 0;
	visibility: hidden;
	max-height: 0;
	overflow: hidden;
}

.azawon-info-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 100%;
	font-size: 0.78rem;
}

.azawon-info-bar-left,
.azawon-info-bar-right {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-width: 0;
}

.azawon-info-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.azawon-info-item svg { flex-shrink: 0; opacity: 0.75; }

a.azawon-info-item:hover { color: #FFFFFF; text-decoration: none; }

.azawon-info-social {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	padding-left: 1.2rem;
}

.azawon-info-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.88);
	background: rgba(255, 255, 255, 0.07);
	transition: all 0.25s var(--azawon-ease);
}

.azawon-info-social a:hover {
	background: var(--azawon-accent);
	color: #064E3B;
	transform: translateY(-2px);
}

.azawon-info-volunteer {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.28rem 0.9rem;
	border-radius: 50px;
	background: var(--azawon-accent);
	color: #1F2937;
	font-weight: 700;
	font-size: 0.75rem;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: all 0.25s var(--azawon-ease);
	box-shadow: 0 2px 8px rgba(244, 180, 0, 0.35);
	white-space: nowrap;
}

.azawon-info-volunteer:hover {
	background: #FFC51F;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(244, 180, 0, 0.45);
	color: #1F2937;
	text-decoration: none;
}

/* ===================== STICKY HEADER SHELL ===================== */

.azawon-header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1001;
	background: var(--azawon-surface);
	transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

/* Make the whole header template-part sticky. Its parent (.wp-site-blocks) spans
   the full page, so the header stays pinned instead of being confined to the
   short .azawon-site-header group (which is what made it scroll away). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1001;
}

.azawon-header-wrapper.azawon-header-scrolled {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Front page: keep the header solid + readable at all times (never transparent) */
.azawon-front-page .azawon-header-wrapper:not(.azawon-header-scrolled) {
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	--hdr-link: #1F2937;
	--hdr-icon: #1F2937;
}

/* (Hero pull-up removed: the header is now solid, so the hero starts below it) */

.azawon-header-main {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	height: var(--azawon-header-h);
}

/* ===================== BRAND ===================== */

.azawon-header-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	min-width: 0;
}

.azawon-header-brand .wp-block-site-logo img {
	width: auto;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	clip-path: circle(48% at 48% 50%);
	transition: height 0.3s var(--azawon-ease), transform 0.3s var(--azawon-ease);
}

.azawon-header-wrapper.azawon-header-scrolled .azawon-header-brand .wp-block-site-logo img {
	height: 40px;
	border-radius: 50%;
}

.azawon-header-brand .wp-block-site-logo img:hover { transform: scale(1.05); }

.azawon-header-brand-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.15;
	min-width: 0;
}

.azawon-header-name.wp-block-site-title {
	margin: 0;
	font-family: var(--azawon-font-brand);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hdr-link);
	transition: color 0.3s ease;
}

.azawon-header-name.wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.azawon-header-name.wp-block-site-title a:hover { color: var(--azawon-primary); }

.azawon-header-tagline {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hdr-icon);
	opacity: 0.72;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.3s ease, opacity 0.3s ease;
}

/* ===================== CENTERED NAV ===================== */

.azawon-header-nav {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.azawon-header-nav > .wp-block-navigation {
	flex: 0 1 auto;
}

.azawon-main-nav .wp-block-navigation-item__content {
	padding: 0.4rem 0;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hdr-link) !important;
	transition: color 0.25s ease !important;
}

.azawon-main-nav .wp-block-navigation-item__content:hover {
	color: var(--azawon-accent) !important;
}

.azawon-main-nav .wp-block-navigation-item__content::after {
	background: var(--azawon-accent);
}

.azawon-main-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--azawon-accent) !important;
}

/* Dropdowns — premium */
.azawon-main-nav .wp-block-navigation__submenu-container {
	background: var(--azawon-surface) !important;
	border: 1px solid var(--azawon-line) !important;
	border-radius: var(--azawon-radius) !important;
	box-shadow: var(--azawon-shadow-lg) !important;
	padding: 0.5rem !important;
	min-width: 230px !important;
}

.azawon-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--azawon-ink-soft) !important;
	font-size: 0.83rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 0.55rem 0.9rem !important;
	border-radius: 10px;
}

.azawon-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--azawon-primary-soft) !important;
	color: var(--azawon-primary) !important;
}

/* Submenu arrow chevron (core navigation) */
.azawon-main-nav .wp-block-navigation-arrow {
	transform: rotate(45deg);
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	width: 7px;
	height: 7px;
	margin-left: 0.35rem;
	opacity: 0.65;
}

/* ===================== RIGHT ACTIONS ===================== */

.azawon-header-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
}

.azawon-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--hdr-icon);
	cursor: pointer;
	padding: 0;
	font-family: var(--azawon-font-body);
	transition: all 0.25s var(--azawon-ease);
	text-decoration: none;
	position: relative;
}

.azawon-icon-btn:hover {
	background: var(--azawon-primary-soft);
	color: var(--azawon-primary);
	transform: translateY(-1px);
}

.azawon-front-page .azawon-header-wrapper:not(.azawon-header-scrolled) .azawon-icon-btn:hover {
	background: var(--azawon-primary-soft);
	color: var(--azawon-primary);
}

/* Expandable search */
.azawon-search-wrapper { position: relative; display: flex; align-items: center; }

.azawon-search-box {
	display: flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	margin-left: 0;
	border-radius: 50px;
	background: var(--azawon-surface-soft);
	border: 1.5px solid var(--azawon-line);
	transition: max-width 0.35s var(--azawon-ease), opacity 0.25s ease, margin 0.35s var(--azawon-ease), border-color 0.25s ease;
}

.azawon-search-box.azawon-search-open {
	max-width: 240px;
	opacity: 1;
	margin-left: 0.4rem;
	border-color: rgba(11, 110, 79, 0.35);
}

.azawon-search-input {
	border: none;
	background: transparent;
	padding: 0.45rem 0 0.45rem 0.95rem;
	font-size: 0.85rem;
	font-family: inherit;
	color: var(--azawon-ink);
	width: 200px;
	outline: none;
	min-width: 0;
}

/* Language dropdown */
.azawon-lang { position: relative; }

.azawon-lang-toggle {
	width: auto;
	padding: 0 0.65rem;
	border-radius: 50px;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.azawon-lang-current { line-height: 1; }
.azawon-lang-caret { opacity: 0.6; transition: transform 0.3s var(--azawon-ease); }
.azawon-lang.is-open .azawon-lang-caret { transform: rotate(180deg); }

.azawon-lang-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 185px;
	background: var(--azawon-surface);
	border: 1px solid var(--azawon-line);
	border-radius: var(--azawon-radius);
	box-shadow: var(--azawon-shadow-lg);
	padding: 0.4rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.96);
	transform-origin: top right;
	transition: all 0.3s var(--azawon-ease);
	z-index: 60;
}

.azawon-lang.is-open .azawon-lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.azawon-lang-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.7rem;
	border-radius: 10px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--azawon-ink-soft);
	text-decoration: none;
	transition: all 0.2s ease;
}

.azawon-lang-item:hover { background: var(--azawon-primary-soft); color: var(--azawon-primary); text-decoration: none; }
.azawon-lang-item.is-active { color: var(--azawon-primary); background: var(--azawon-primary-soft); font-weight: 600; }

.azawon-lang-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 22px;
	border-radius: 6px;
	background: var(--azawon-surface-soft);
	border: 1px solid var(--azawon-line);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--azawon-ink);
}

/* Theme toggle icon swap */
.azawon-icon-sun { display: none; }
[data-theme="dark"] .azawon-icon-sun { display: block; }
[data-theme="dark"] .azawon-icon-moon { display: none; }

/* Login */
.azawon-login-link {
	width: auto;
	border-radius: 50px;
	padding: 0 0.7rem;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hdr-icon);
	text-decoration: none;
}

.azawon-login-text { white-space: nowrap; }

/* Gold Donate Now button with heart */
.azawon-donate-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.62rem 1.35rem;
	border-radius: 50px;
	background: linear-gradient(135deg, #F4B400 0%, #FFC51F 100%);
	color: #1F2937;
	font-family: var(--azawon-font-brand);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(244, 180, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	position: relative;
	overflow: hidden;
	transition: all 0.3s var(--azawon-ease);
	white-space: nowrap;
}

.azawon-donate-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.6s ease;
}

.azawon-donate-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(244, 180, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #111827;
	text-decoration: none;
}

.azawon-donate-btn:hover::after { transform: translateX(120%); }
.azawon-donate-btn:active { transform: translateY(0) scale(0.97); }
.azawon-donate-btn svg { flex-shrink: 0; animation: azawonHeartbeat 1.8s ease-in-out infinite; }

@keyframes azawonHeartbeat {
	0%, 100% { transform: scale(1); }
	10% { transform: scale(1.18); }
	20% { transform: scale(1); }
	30% { transform: scale(1.12); }
	40% { transform: scale(1); }
}

/* Mobile hamburger */
.azawon-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1.5px solid var(--azawon-line);
	background: var(--azawon-surface);
	color: var(--azawon-ink);
	cursor: pointer;
	padding: 0;
	transition: all 0.25s var(--azawon-ease);
}

.azawon-mobile-toggle:hover { border-color: var(--azawon-primary); color: var(--azawon-primary); transform: translateY(-1px); }

.azawon-front-page .azawon-header-wrapper:not(.azawon-header-scrolled) .azawon-mobile-toggle {
	background: var(--azawon-surface);
	border-color: var(--azawon-line);
	color: var(--azawon-ink);
}

/* ===================== MOBILE DRAWER (accordion) ===================== */

.azawon-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(6, 20, 15, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.35s ease;
	z-index: 1099;
}

body.azawon-drawer-open .azawon-drawer-backdrop { opacity: 1; visibility: visible; }

.azawon-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(86vw, 380px);
	background: var(--azawon-surface);
	box-shadow: var(--azawon-shadow-lg);
	z-index: 1100;
	display: flex;
	flex-direction: column;
	transform: translateX(105%);
	transition: transform 0.45s var(--azawon-ease);
	visibility: hidden;
}

body.azawon-drawer-open .azawon-drawer { transform: translateX(0); visibility: visible; }

.azawon-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--azawon-line);
}

.azawon-drawer-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.azawon-drawer-brand .wp-block-site-logo img { width: auto; height: 38px; border-radius: 50%; clip-path: circle(48% at 48% 50%); }
.azawon-drawer-brand .wp-block-site-title { margin: 0; font-family: var(--azawon-font-brand); font-size: 1.05rem; font-weight: 700; color: var(--azawon-ink); }
.azawon-drawer-brand .wp-block-site-title a { color: inherit; text-decoration: none; }

.azawon-drawer-close {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: var(--azawon-surface-soft);
	color: var(--azawon-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
}

.azawon-drawer-close:hover { background: #DC2626; color: #FFFFFF; transform: rotate(90deg); }

.azawon-drawer-nav { flex: 1; overflow-y: auto; padding: 0.75rem 1.25rem 1.25rem; }

.azawon-drawer-list { list-style: none; margin: 0; padding: 0; }

.azawon-drawer-item { border-bottom: 1px solid var(--azawon-line); }

.azawon-drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.85rem 0.25rem;
	font-family: var(--azawon-font-brand);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--azawon-ink);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.azawon-drawer-link svg { transition: transform 0.3s var(--azawon-ease); flex-shrink: 0; color: var(--azawon-muted); }

.azawon-drawer-link:hover { color: var(--azawon-primary); padding-left: 0.45rem; }
.azawon-drawer-item.open .azawon-drawer-link { color: var(--azawon-primary); }
.azawon-drawer-item.open .azawon-drawer-link svg { transform: rotate(180deg); }

.azawon-accordion-panel {
	list-style: none;
	margin: 0;
	padding: 0 0 0 0.75rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--azawon-ease), padding 0.3s ease;
}

.azawon-drawer-item.open .azawon-accordion-panel { max-height: 480px; padding-bottom: 0.6rem; }

.azawon-drawer-sublink {
	display: block;
	padding: 0.55rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--azawon-ink-soft);
	text-decoration: none;
	border-radius: 10px;
	transition: all 0.2s ease;
}

.azawon-drawer-sublink:hover { background: var(--azawon-primary-soft); color: var(--azawon-primary); padding-left: 1.1rem; }

.azawon-drawer-footer {
	padding: 1rem 1.25rem 1.4rem;
	border-top: 1px solid var(--azawon-line);
	background: var(--azawon-surface-soft);
}

.azawon-drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; }

.azawon-drawer-login,
.azawon-drawer-donate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 0.5rem;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.25s var(--azawon-ease);
}

.azawon-drawer-login { background: var(--azawon-surface); border: 1.5px solid var(--azawon-line); color: var(--azawon-ink); }
.azawon-drawer-login:hover { border-color: var(--azawon-primary); color: var(--azawon-primary); text-decoration: none; }
.azawon-drawer-donate { background: linear-gradient(135deg, #F4B400, #FFC51F); color: #1F2937; box-shadow: 0 6px 16px rgba(244, 180, 0, 0.35); }
.azawon-drawer-donate:hover { transform: translateY(-2px); text-decoration: none; color: #111827; }

.azawon-drawer-tagline { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azawon-muted); text-align: center; }

/* ===================== DARK MODE (header surfaces) ===================== */

[data-theme="dark"] .azawon-header-wrapper {
	background: #0F172A;
	--hdr-link: #E5E7EB;
	--hdr-icon: #CBD5E1;
}

[data-theme="dark"] .azawon-header-wrapper.azawon-header-scrolled {
	background: rgba(15, 23, 42, 0.92);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .azawon-front-page .azawon-header-wrapper:not(.azawon-header-scrolled) { background: #0F172A; }

[data-theme="dark"] .azawon-main-nav .wp-block-navigation__submenu-container,
[data-theme="dark"] .azawon-lang-menu {
	background: #1E293B !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .azawon-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #CBD5E1 !important; }
[data-theme="dark"] .azawon-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--azawon-accent-soft) !important; color: #F4B400 !important; }
[data-theme="dark"] .azawon-lang-item { color: #CBD5E1; }
[data-theme="dark"] .azawon-lang-item:hover { background: var(--azawon-accent-soft); color: #F4B400; }
[data-theme="dark"] .azawon-lang-item.is-active { background: var(--azawon-accent-soft); color: #F4B400; }
[data-theme="dark"] .azawon-lang-code { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: #E5E7EB; }
[data-theme="dark"] .azawon-search-box { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .azawon-search-input { color: #E5E7EB; }
[data-theme="dark"] .azawon-drawer { background: #0F172A; }
[data-theme="dark"] .azawon-drawer-head { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .azawon-drawer-brand .wp-block-site-title { color: #E5E7EB; }
[data-theme="dark"] .azawon-drawer-link { color: #E5E7EB; }
[data-theme="dark"] .azawon-drawer-item { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .azawon-drawer-sublink { color: #CBD5E1; }
[data-theme="dark"] .azawon-drawer-sublink:hover { background: var(--azawon-accent-soft); color: #F4B400; }
[data-theme="dark"] .azawon-drawer-footer { background: #111C2E; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .azawon-drawer-login { background: transparent; border-color: rgba(255, 255, 255, 0.15); color: #E5E7EB; }
[data-theme="dark"] .azawon-drawer-close { background: rgba(255, 255, 255, 0.08); color: #E5E7EB; }
[data-theme="dark"] .azawon-mobile-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #E5E7EB; }
[data-theme="dark"] .azawon-info-bar { background: linear-gradient(90deg, #052E22, #0B6E4F); }

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1280px) {
	.azawon-header-tagline { display: none; }
	.azawon-main-nav .wp-block-navigation-item__content { font-size: 0.75rem !important; letter-spacing: 0.04em; }
	.azawon-header-main { gap: 1rem; }
}

@media (max-width: 1100px) {
	/* Move the desktop nav into the drawer below this width */
	.azawon-header-nav { display: none; }
	.azawon-mobile-toggle { display: inline-flex; }
	.azawon-login-text { display: none; }
	.azawon-login-link { width: 38px; padding: 0; justify-content: center; }
	:root { --azawon-info-h: 40px; --azawon-header-h: 70px; }
}

@media (max-width: 781px) {
	.azawon-info-location { display: none; }
	.azawon-info-bar-left { gap: 1rem; }
	.azawon-info-bar-right { gap: 0.9rem; }
	.azawon-info-social { display: none; }
	.azawon-theme-toggle { display: none; }
	.azawon-lang { display: none; }
	:root { --azawon-info-h: 38px; --azawon-header-h: 66px; }
	.azawon-header-brand .wp-block-site-logo img { height: 40px; }
	.azawon-header-brand-text { max-width: 38vw; }
	.azawon-donate-btn { padding: 0.55rem 1rem; font-size: 0.82rem; }
}

@media (max-width: 480px) {
	.azawon-info-item:nth-child(2) { display: none; } /* hide phone */
	.azawon-info-volunteer span { display: none; }
	.azawon-info-volunteer { padding: 0.28rem 0.6rem; }
	.azawon-header-actions .azawon-login-link { display: none; }
	.azawon-header-brand-text { max-width: 34vw; }
	:root { --azawon-info-h: 36px; --azawon-header-h: 62px; }
	.azawon-header-brand .wp-block-site-logo img { height: 36px; }
	.azawon-donate-btn { padding: 0.5rem 0.85rem; font-size: 0.78rem; gap: 0.35rem; }
}

/* Keep the old gold line from appearing above the new header */
.azawon-header-gold-line { display: none; }

/* Prevent body scroll while the mobile drawer is open */
body.azawon-drawer-open { overflow: hidden; }

/* Reduced motion: calm the heart + shimmer */
@media (prefers-reduced-motion: reduce) {
	.azawon-donate-btn svg,
	.azawon-donate-btn::after { animation: none; }
	.azawon-donate-btn::after { display: none; }
}

/* ======================================================================
   INNER PAGE HERO — used at the top of About / Programs / Projects /
   Gallery / Contact / Stories pages
   ====================================================================== */

.azawon-page-hero {
	position: relative;
	text-align: center;
	color: #FFFFFF;
	padding: clamp(3.5rem, 9vw, 6.5rem) var(--wp--preset--spacing--50);
	background: linear-gradient(135deg, var(--wp--preset--color--accent-7, #064E3B) 0%, var(--wp--preset--color--accent-1, #0B6E4F) 55%, var(--wp--preset--color--accent-3, #1E8A4A) 100%);
	border-radius: 0;
	overflow: hidden;
}

.azawon-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 3 L44 14 L55 14 L46 22 L50 33 L40 27 L30 33 L34 22 L25 14 L36 14 Z' fill='rgba(196,162,78,0.06)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	pointer-events: none;
}

.azawon-page-hero > * {
	position: relative;
	z-index: 1;
}

.azawon-page-hero-eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2, #F4B400);
	margin: 0 0 0.75rem;
}

.azawon-page-hero-title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 1rem;
	color: #FFFFFF;
}

.azawon-page-hero-desc {
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.7;
	max-width: 640px;
	margin: 0 auto;
	opacity: 0.92;
}

/* ======================================================================
   FRONT-END FORMS (contact + story submission)
   ====================================================================== */

.azawon-card-panel {
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--accent-6, rgba(0, 0, 0, 0.1));
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.azawon-form p { margin: 0 0 1rem; }

.azawon-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.azawon-form-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast, #1F2937);
	margin-bottom: 0.4rem;
}

.azawon-form-field input[type="text"],
.azawon-form-field input[type="email"],
.azawon-form-field input[type="url"],
.azawon-form-field input[type="file"],
.azawon-form-field select,
.azawon-form-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--accent-6, rgba(0, 0, 0, 0.12));
	border-radius: 10px;
	padding: 0.8rem 1rem;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast, #1F2937);
	background: var(--wp--preset--color--base, #FFFFFF);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.azawon-form-field input:focus,
.azawon-form-field select:focus,
.azawon-form-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1, #0B6E4F);
	box-shadow: 0 0 0 4px rgba(21, 107, 58, 0.12);
}

/* Featured image inputs — file picker styled as a subtle dashed chip */
.azawon-form-field input[type="file"] {
	padding: 0.55rem 0.75rem;
	color: #6B7280;
	cursor: pointer;
	background: #FAFAF8;
}

.azawon-form-field input[type="file"]::file-selector-button {
	margin-right: 0.9rem;
	padding: 0.45rem 1.1rem;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #156B3A, #1E8A4A);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.azawon-form-field input[type="file"]::file-selector-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(21, 107, 58, 0.25);
}

.azawon-form-field input[type="file"] + input[type="url"] {
	margin-top: 0.6rem;
}

.azawon-form-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.azawon-form-btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	border: none;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.azawon-form-btn:hover { transform: translateY(-2px); }

.azawon-form-btn-gold {
	color: #1A1A2E;
	background: linear-gradient(135deg, #F4B400, #D4AF37);
	box-shadow: 0 6px 18px rgba(244, 180, 0, 0.3);
}

.azawon-form-btn-green {
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1, #0B6E4F), var(--wp--preset--color--accent-3, #1E8A4A));
	box-shadow: 0 6px 18px rgba(21, 107, 58, 0.25);
}

.azawon-form-btn-ghost {
	color: var(--wp--preset--color--accent-1, #0B6E4F);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--accent-1, #0B6E4F);
}

.azawon-form-notice {
	padding: 0.9rem 1.2rem;
	border-radius: 10px;
	font-size: 0.92rem;
	margin: 0 0 1.25rem;
}

.azawon-form-success {
	color: #14532D;
	background: #DCFCE7;
	border: 1px solid #86EFAC;
}

.azawon-form-error {
	color: #7F1D1D;
	background: #FEE2E2;
	border: 1px solid #FCA5A5;
}

.azawon-story-login p { margin: 0 0 1rem; }
.azawon-story-login .azawon-form-btn { margin-right: 0.5rem; }

.azawon-contact-form-wrap,
.azawon-story-form-wrap {
	margin-top: 1rem;
}

@media (max-width: 640px) {
	.azawon-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.azawon-card-panel {
		padding: 1.4rem;
	}
}

/* ======================================================================
   MY STORIES — front-end post management
   ====================================================================== */

.azawon-my-stories {
	display: grid;
	gap: 0.9rem;
	margin-top: 1.25rem;
}

.azawon-story-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--wp--preset--color--accent-5, #F5F0EB);
	border: 1px solid var(--wp--preset--color--accent-6, rgba(0, 0, 0, 0.08));
	border-left: 4px solid var(--wp--preset--color--accent-2, #C4A24E);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.azawon-story-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.azawon-story-card-title {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1F2937);
}

.azawon-story-card-date {
	margin: 0;
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent-4, #6B7280);
}

.azawon-story-status {
	display: inline-block;
	margin: 0.1rem 0 0.4rem;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.azawon-story-status-publish { color: #14532D; background: #DCFCE7; }
.azawon-story-status-pending { color: #78350F; background: #FEF3C7; }
.azawon-story-status-draft { color: #1E293B; background: #E2E8F0; }

.azawon-story-card-actions {
	display: flex;
	gap: 0.6rem;
}

.azawon-story-action {
	padding: 0.45rem 1rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--accent-1, #0B6E4F);
	background: rgba(21, 107, 58, 0.08);
	transition: background 0.2s ease, color 0.2s ease;
}

.azawon-story-action:hover {
	background: var(--wp--preset--color--accent-1, #0B6E4F);
	color: #FFFFFF;
}

.azawon-story-action-delete {
	color: #B91C1C;
	background: rgba(185, 28, 28, 0.08);
}

.azawon-story-action-delete:hover {
	background: #B91C1C;
	color: #FFFFFF;
}

/* ======================================================================
   GALLERY GRID
   ====================================================================== */

.azawon-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem;
}

.azawon-gallery-item.is-hidden {
	display: none;
}

.azawon-gallery-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 2.25rem;
	flex-wrap: wrap;
}

.azawon-gallery-pagination-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(6, 78, 59, 0.2);
	background: #FFFFFF;
	color: #064E3B;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.azawon-gallery-pagination-btn:hover:not(:disabled):not(.is-active) {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(6, 78, 59, 0.18);
	border-color: rgba(6, 78, 59, 0.45);
	background: rgba(6, 78, 59, 0.06);
}

.azawon-gallery-pagination-btn.is-active {
	background: linear-gradient(135deg, #064E3B, #1E8A4A);
	border-color: transparent;
	color: #FFFFFF;
	box-shadow: 0 8px 20px rgba(6, 78, 59, 0.35);
}

.azawon-gallery-pagination-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.azawon-gallery-pagination-info {
	margin: 0 0.5rem;
	color: #4B5563;
	font-size: 0.85rem;
	font-weight: 600;
}

.azawon-gallery-item {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	display: block;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-7, #064E3B), var(--wp--preset--color--accent-3, #1E8A4A));
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.azawon-gallery-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

.azawon-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.azawon-gallery-item:hover img {
	transform: scale(1.06);
}

.azawon-gallery-item-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.6rem 1rem 0.9rem;
	color: #FFFFFF;
	font-size: 0.85rem;
	font-weight: 600;
	background: linear-gradient(to top, rgba(6, 46, 27, 0.85), transparent);
}

/* Descriptions live in the DB but only show in the lightbox, not on the grid tiles. */
.azawon-gallery-item-desc {
	display: none;
}

@media (max-width: 1024px) {
	.azawon-gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.azawon-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.azawon-gallery-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.azawon-gallery-item {
	cursor: zoom-in;
}

.azawon-gallery-item:focus-visible {
	outline: 3px solid #D4AF37;
	outline-offset: 3px;
}

/* ---- 'View story' expandable panels on gallery tiles ---- */
.azawon-gallery-story-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	padding: 0.32rem 0.72rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.azawon-gallery-story-toggle:hover,
.azawon-gallery-story-toggle:focus-visible {
	background: #D4AF37;
	border-color: transparent;
	color: #06301F;
	transform: translateY(-1px);
}

.azawon-gallery-story-toggle-chevron {
	display: inline-block;
	font-size: 0.58rem;
	transition: transform 0.3s ease;
}

.azawon-gallery-item.is-story-open .azawon-gallery-story-toggle-chevron {
	transform: rotate(180deg);
}

.azawon-gallery-story {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
	transition: grid-template-rows 0.38s ease, opacity 0.28s ease;
}

.azawon-gallery-item.is-story-open .azawon-gallery-story {
	grid-template-rows: 1fr;
	opacity: 1;
	pointer-events: auto;
}

.azawon-gallery-story-inner {
	overflow: hidden;
	min-height: 0;
	background: linear-gradient(to top, rgba(4, 34, 20, 0.97), rgba(9, 62, 36, 0.93));
	border-top: 1px solid rgba(212, 175, 55, 0.4);
	padding: 0.85rem 1rem 1rem;
}

.azawon-gallery-story-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.azawon-gallery-story-title {
	color: #F3E5BB;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.azawon-gallery-story-close {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	font-size: 0.95rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}

.azawon-gallery-story-close:hover,
.azawon-gallery-story-close:focus-visible {
	background: #D4AF37;
	border-color: transparent;
	color: #06301F;
	transform: rotate(90deg);
}

.azawon-gallery-story-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.78rem;
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.azawon-gallery-story,
	.azawon-gallery-story-toggle,
	.azawon-gallery-story-toggle-chevron,
	.azawon-gallery-story-close {
		transition: none;
	}
}

/* ======================================================================
   ZAKAT CALCULATOR PAGE — full-width card
   (page template provides the hero; the pattern's intro column is
   redundant there, so hide it and let the card span the section.)
   ====================================================================== */

body.page-template-page-zakat .azawon-zakat-section .wp-block-columns {
	display: block;
}

body.page-template-page-zakat .azawon-zakat-section .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
}

body.page-template-page-zakat .azawon-zakat-section .azawon-zakat-intro {
	display: none;
}

/* ======================================================================
   DONATE PAGE — CAUSE CARD ROW RESPONSIVENESS
   ====================================================================== */

.azawon-cause-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.azawon-cause-row > .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
	min-width: 0;
	container-type: inline-size;
}

.azawon-cause-row .azawon-card-premium {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.azawon-cause-row .azawon-card-premium .wp-block-buttons {
	margin-top: auto !important;
}

/* When a card is narrow (the 2-up grid inside the 780px-capped column can
   produce ~186-216px cards), compact the full-width button so 'Donate ₦…'
   still fits on one line instead of clipping against the card edge. */
@container (max-width: 300px) {
	.azawon-cause-row .wp-block-button__link {
		padding-left: 0.7em;
		padding-right: 0.7em;
		font-size: 0.85rem;
	}
}

/* Card text must never split mid-word or mid-number, even in a narrow
   column: WP core puts overflow-wrap: break-word on .wp-block-column,
   which was tearing 'EDUCATION' into 'EDUCATIO/n' and amounts into
   '₦750,00/0'. Titles wrap only at spaces; amounts and buttons stay on
   one line. */
.azawon-cause-row .azawon-card-premium .wp-block-heading,
.azawon-cause-row .azawon-card-premium p {
	word-break: keep-all;
	overflow-wrap: normal;
}

.azawon-cause-row .azawon-card-premium .has-accent-1-color,
.azawon-cause-row .azawon-card-premium .wp-block-button__link {
	white-space: nowrap;
}

/* Comfortable grid: the cause row sits inside a 780px-capped 60% column
   (left column maxes ~449px), so 3-up would squeeze cards to ~139px — the
   broken state from the screenshots. Two-up keeps cards at 216-280px so
   titles, amounts and the full-width 'Donate ₦…' buttons all fit. */
@media (max-width: 1000px) {
	.azawon-cause-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ======================================================================
   DONATE PAGE — IMPACT STAT ROW RESPONSIVENESS
   ====================================================================== */

.azawon-impact-row {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.azawon-impact-row > .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
	min-width: 0;
}

.azawon-impact-row .azawon-card-gold {
	height: 100%;
}

@media (max-width: 1280px) {
	.azawon-impact-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.azawon-impact-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Impact numbers must never stack vertically, even in narrow cards */
.azawon-impact-section .azawon-card-gold .wp-block-group > p:first-child,
.azawon-impact-row .azawon-card-gold .wp-block-group > p:first-child {
	white-space: nowrap;
}

.azawon-impact-section .azawon-card-gold > .wp-block-group,
.azawon-impact-row .azawon-card-gold > .wp-block-group {
	min-width: 0;
}

/* ======================================================================
   DONATION FALLBACK MODAL (bank transfer, no Stripe)
   ====================================================================== */

.azawon-fallback-cause {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #C4A24E;
	margin-bottom: 0.5rem;
}

.azawon-fallback-amount {
	font-size: 2rem;
	font-weight: 800;
	color: #156B3A;
	margin-bottom: 1.25rem;
	line-height: 1.1;
}

.azawon-fallback-note {
	font-size: 0.88rem;
	color: #4B5563;
	line-height: 1.55;
	margin-bottom: 1rem;
}

.azawon-fallback-bank {
	background: #F5F0EB;
	border: 1px solid rgba(6, 78, 59, 0.12);
	border-radius: 12px;
	padding: 0.9rem 1rem;
	margin-bottom: 1rem;
}

.azawon-fallback-bank-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.4rem 0;
	font-size: 0.88rem;
}

.azawon-fallback-bank-row span {
	color: #6B7280;
	font-size: 0.8rem;
}

.azawon-fallback-bank-row strong {
	color: #1A1A2E;
	font-weight: 700;
}

.azawon-fallback-acct {
	font-size: 1.05rem;
	letter-spacing: 0.08em;
}

.azawon-fallback-copy {
	border: 1px solid rgba(6, 78, 59, 0.3);
	background: #FFFFFF;
	color: #156B3A;
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.azawon-fallback-copy:hover {
	background: #156B3A;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.azawon-fallback-receipt {
	font-size: 0.78rem;
	color: #6B7280;
	line-height: 1.5;
}

.azawon-fallback-receipt strong {
	color: #156B3A;
}

.azawon-fallback-close-btn {
	background: linear-gradient(135deg, #064E3B, #1E8A4A) !important;
}

/* ======================================================================
   GALLERY LIGHTBOX
   ====================================================================== */

.azawon-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 20, 12, 0.92);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.azawon-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.azawon-lightbox__content {
	position: relative;
	max-width: min(1080px, 90vw);
	max-height: 86vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.azawon-lightbox__figure {
	position: relative;
	width: 100%;
	height: 72vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.25);
}

.azawon-lightbox__figure::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40%;
	background: linear-gradient(to top, rgba(4, 20, 12, 0.65), transparent);
	pointer-events: none;
}

.azawon-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 18px;
	transition: opacity 0.22s ease, transform 0.22s ease;
	will-change: opacity, transform;
}

.azawon-lightbox__img.is-transitioning {
	opacity: 0;
	transform: scale(0.96);
}

@keyframes azawon-lightbox-zoom {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.azawon-lightbox__caption {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.9rem;
	z-index: 1;
	margin: 0;
	color: #F5EDD6;
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	transition: opacity 0.18s ease;
}

.azawon-lightbox__caption-title {
	color: #F5EDD6;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.azawon-lightbox__caption-desc {
	max-width: 52ch;
	color: rgba(245, 237, 214, 0.82);
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

/* Donate CTA in the lightbox caption — matches the theme's gold pill */
.azawon-lightbox__donate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.55rem;
	padding: 0.6rem 1.3rem;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, #F7CE46, #D4AF37);
	color: #06301F;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.azawon-lightbox__donate:hover,
.azawon-lightbox__donate:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
	filter: brightness(1.07);
}

.azawon-lightbox__counter {
	margin-top: 0.85rem;
	color: rgba(245, 237, 214, 0.6);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---- Thumbnail filmstrip ---- */
.azawon-lightbox__filmstrip {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1rem;
	padding: 0.35rem 0.5rem;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.08);
}

.azawon-lightbox__filmstrip::-webkit-scrollbar {
	height: 5px;
}

.azawon-lightbox__filmstrip::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
}

.azawon-lightbox__filmstrip::-webkit-scrollbar-thumb {
	background: rgba(212, 175, 55, 0.5);
	border-radius: 999px;
}

.azawon-lightbox__thumb {
	flex: 0 0 auto;
	width: 76px;
	height: 56px;
	padding: 0;
	border: 2px solid rgba(245, 237, 214, 0.25);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.azawon-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.azawon-lightbox__thumb:hover,
.azawon-lightbox__thumb:focus-visible {
	opacity: 1;
	border-color: rgba(212, 175, 55, 0.9);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	outline: none;
}

.azawon-lightbox__thumb.is-active {
	opacity: 1;
	border-color: #D4AF37;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
	transform: translateY(-2px);
}

.azawon-lightbox__thumb.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #D4AF37, #F4B400);
}

.azawon-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #D4AF37, #B8912B);
	color: #0A2E18;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	z-index: 2;
}

.azawon-lightbox__close:hover {
	transform: scale(1.1) rotate(90deg);
	box-shadow: 0 12px 30px rgba(212, 175, 55, 0.45);
}

.azawon-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(212, 175, 55, 0.5);
	background: rgba(10, 46, 24, 0.65);
	color: #F5EDD6;
	font-size: 1.4rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	z-index: 2;
}

.azawon-lightbox__nav--prev {
	left: -76px;
}

.azawon-lightbox__nav--next {
	right: -76px;
}

.azawon-lightbox__nav:hover:not(:disabled) {
	background: linear-gradient(135deg, #D4AF37, #B8912B);
	color: #0A2E18;
	border-color: transparent;
	transform: translateY(-50%) scale(1.08);
}

.azawon-lightbox__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

@media (max-width: 1530px) {
	.azawon-lightbox__nav--prev {
		left: 12px;
	}
	.azawon-lightbox__nav--next {
		right: 12px;
	}
	.azawon-lightbox__nav {
		width: 48px;
		height: 48px;
		font-size: 1.2rem;
	}
}

@media (max-width: 640px) {
	.azawon-lightbox__nav {
		width: 44px;
		height: 44px;
		font-size: 1.1rem;
	}
	.azawon-lightbox__figure {
		height: 62vh;
	}
	.azawon-lightbox__close {
		top: -10px;
		right: -6px;
	}
	.azawon-lightbox__caption-title {
		font-size: 0.95rem;
	}
	.azawon-lightbox__caption-desc {
		font-size: 0.72rem;
		line-height: 1.4;
		max-width: 42ch;
	}
	.azawon-lightbox__donate {
		font-size: 0.74rem;
		padding: 0.52rem 1.05rem;
		margin-top: 0.45rem;
	}
	.azawon-lightbox__filmstrip {
		margin-top: 0.7rem;
	}
	.azawon-lightbox__thumb {
		width: 58px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.azawon-lightbox__img {
		animation: none;
	}
}

/* ======================================================================
   PAGE CONTENT GRIDS (built by tmp-build-lib.php helpers)
   ====================================================================== */

.azawon-feature-grid,
.azawon-project-grid,
.azawon-info-grid {
	display: grid;
	gap: 1.4rem;
	margin: 2rem 0;
}

.azawon-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.azawon-feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.azawon-feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.azawon-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.azawon-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }

.azawon-feature-card,
.azawon-project-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.azawon-feature-card:hover,
.azawon-project-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
	.azawon-feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.azawon-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.azawon-feature-grid,
	.azawon-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.azawon-feature-grid,
	.azawon-project-grid,
	.azawon-info-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   ZAKAT CALCULATOR — BEAUTY UPGRADE
   Polished card: gold accent bar, Islamic star pattern, tinted step
   panels, premium inputs and an ornamented live-results panel.
   ====================================================================== */

.azawon-zakat-calculator {
	position: relative;
	border: 1px solid rgba(196, 162, 78, 0.45);
	border-radius: 22px;
	padding: 1.7rem 1.5rem 1.5rem;
	background:
		radial-gradient(circle at 100% 0%, rgba(212, 175, 55, 0.10), transparent 42%),
		radial-gradient(circle at 0% 100%, rgba(27, 107, 58, 0.08), transparent 46%),
		linear-gradient(135deg, #FFFFFF 0%, #FBF7F0 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 24px 60px rgba(11, 78, 55, 0.10),
		0 4px 14px rgba(11, 78, 55, 0.05);
}

/* Gold accent bar with animated sheen across the top */
.azawon-zakat-calculator::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 22px 22px 0 0;
	background: linear-gradient(90deg, #156B3A, #C4A24E 45%, #D4AF37 70%, #156B3A);
	background-size: 220% 100%;
	animation: azawon-gold-sheen 9s linear infinite;
}

/* Subtle star watermark in the corner */
.azawon-zakat-calculator::after {
	content: '★';
	position: absolute;
	top: 1.1rem;
	right: 1.4rem;
	font-size: 2.6rem;
	line-height: 1;
	color: rgba(196, 162, 78, 0.10);
	pointer-events: none;
}

@keyframes azawon-gold-sheen {
	0% { background-position: 0% 0; }
	50% { background-position: 100% 0; }
	100% { background-position: 0% 0; }
}

.azawon-zakat-calculator:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 34px 80px rgba(11, 78, 55, 0.14),
		0 8px 24px rgba(196, 162, 78, 0.12);
}

/* Make the card a container so the field grid can adapt to its own width
   (2-up when the card has room, stacked when it doesn't). */
.azawon-zakat-calculator {
	container-type: inline-size;
}

@container (max-width: 280px) {
	.azawon-zakat-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Narrow card (zakat page): stack the net-worth header vertically so the
	   amount gets a full line instead of wrapping to two in a squeezed row. */
	.azawon-zakat-live-head {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}

	.azawon-zakat-live-head > span {
		font-size: 0.68rem;
	}

	.azawon-zakat-networth {
		font-size: 1.45rem;
		line-height: 1.25;
	}

	/* Compact the Nisab chips so the full threshold fits on one line. */
	.azawon-zakat-nisab-chip {
		padding: 0.22rem 0.55rem;
		font-size: 0.64rem;
		white-space: nowrap;
	}

	.azawon-zakat-nisabs {
		gap: 0.35rem;
	}

	/* Tighter idle/eligible outcome area. */
	.azawon-zakat-outcome-icon {
		width: 30px;
		height: 30px;
		font-size: 0.9rem;
		margin-bottom: 0.25rem;
		box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
	}

	.azawon-zakat-outcome-idle p {
		font-size: 0.78rem;
		line-height: 1.4;
	}
}

/* When the card is narrow, drop the currency selector onto its own row so
   the head text isn't squeezed into a sliver (eyebrow was wrapping to 4
   lines in a 100px column). */
@container (max-width: 380px) {
	.azawon-zakat-head {
		gap: 0.7rem;
	}

	.azawon-zakat-head-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.azawon-zakat-currency {
		flex: 1 1 100%;
		margin-left: 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Reclaim some of the inline 2rem padding on the wrapper group around the
   calculator only (not the left intro column) so the 2-up field grid gets
   more room inside the card. */
.azawon-zakat-section .wp-block-column:has(.azawon-zakat-calculator) > .wp-block-group {
	padding: 1.1rem !important;
}

/* The section-scoped rule (line ~4396) has higher specificity and would
   otherwise override the layered shadow / border above. */
.azawon-zakat-section .azawon-zakat-calculator {
	border: 1px solid rgba(196, 162, 78, 0.45);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 24px 60px rgba(11, 78, 55, 0.10),
		0 4px 14px rgba(11, 78, 55, 0.05);
}

.azawon-zakat-section .azawon-zakat-calculator:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 34px 80px rgba(11, 78, 55, 0.14),
		0 8px 24px rgba(196, 162, 78, 0.12);
}

/* ---------- Header ---------- */

.azawon-zakat-head {
	padding-bottom: 1.05rem;
	margin-bottom: 1.05rem;
	border-bottom: 1px dashed rgba(196, 162, 78, 0.5);
}

.azawon-zakat-head-icon {
	position: relative;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: linear-gradient(135deg, #0B6E4F, #1E8A4A);
	box-shadow: 0 8px 22px rgba(21, 107, 58, 0.28);
}

.azawon-zakat-head-icon::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.azawon-zakat-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.68rem;
	letter-spacing: 2px;
	color: #B08A2E;
}

.azawon-zakat-eyebrow::before {
	content: '✦';
	font-size: 0.8rem;
	color: #C4A24E;
}

.azawon-zakat-head-text strong {
	font-size: 1.2rem;
	letter-spacing: -0.2px;
}

.azawon-zakat-currency-select {
	border: 1.5px solid rgba(196, 162, 78, 0.4);
	background: linear-gradient(135deg, #FFFDF8, #FAF3E4);
	color: #7A5C12;
	box-shadow: 0 2px 8px rgba(196, 162, 78, 0.15);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.azawon-zakat-currency-select:hover {
	border-color: #C4A24E;
	transform: translateY(-1px);
}

.azawon-zakat-currency-select:focus {
	border-color: #C4A24E;
	box-shadow: 0 0 0 4px rgba(196, 162, 78, 0.18);
	outline: none;
}

/* ---------- Step groups ---------- */

.azawon-zakat-group {
	position: relative;
	margin-bottom: 0.85rem;
	padding: 0.8rem 0.85rem 0.85rem;
	border: 1px solid rgba(27, 107, 58, 0.10);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
}

.azawon-zakat-group-title {
	position: relative;
	width: 100%;
	margin: -1.5rem 0 0.85rem;
	gap: 0.7rem;
	padding: 0.15rem 2.1rem 0.15rem 0;
	font-size: 0.8rem;
	letter-spacing: 1.2px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	line-height: inherit;
}

.azawon-zakat-group-step {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 0.9rem;
	color: #2A1E05;
	background: linear-gradient(135deg, #F4B400, #D4AF37);
	box-shadow:
		0 0 0 4px #FFFFFF,
		0 4px 12px rgba(196, 162, 78, 0.45);
}

/* Dashed connector from the step badge to the title */
.azawon-zakat-group-title::after {
	content: '';
	flex: 1;
	min-width: 2rem;
	height: 0;
	border-bottom: 1px dashed rgba(196, 162, 78, 0.55);
}

/* Collapse chevron — absolute at the right edge of the group header */
.azawon-zakat-group-chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.16);
	border: 1px solid rgba(196, 162, 78, 0.5);
	transition: transform 0.25s ease, background 0.2s ease;
}

.azawon-zakat-group-chevron::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid #9A7A2A;
	border-bottom: 2px solid #9A7A2A;
	transform: translate(-50%, -65%) rotate(45deg);
	transition: transform 0.25s ease;
}

.azawon-zakat-group-title:hover .azawon-zakat-group-chevron {
	background: rgba(212, 175, 55, 0.3);
}

.azawon-zakat-group-title:focus-visible {
	outline: 2px solid #D4AF37;
	outline-offset: 3px;
	border-radius: 8px;
}

.azawon-zakat-group-title.is-collapsed .azawon-zakat-group-chevron::before {
	transform: translate(-50%, -35%) rotate(-45deg);
}

/* Collapsed group: smoothly close the field grid (max-height 0 + fade)
   instead of display:none, so the collapse feels polished. visibility
   stays visible during the animation and flips to hidden only after it
   finishes (0.4s delay), so collapsed fields drop out of the tab order and
   a11y tree instead of staying silently focusable. */
.azawon-zakat-group-title.is-collapsed + .azawon-zakat-grid {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
}

@media (prefers-reduced-motion: reduce) {
	.azawon-zakat-grid,
	.azawon-zakat-group-title.is-collapsed + .azawon-zakat-grid {
		transition: none;
	}
}

.azawon-zakat-group-title.is-collapsed {
	margin-bottom: 0.1rem;
}

/* ---------- Fields ---------- */

.azawon-zakat-field {
	position: relative;
	padding: 0.6rem 0.75rem 0.55rem;
	border: 1px solid rgba(27, 107, 58, 0.08);
	border-radius: 13px;
	background: #FFFFFF;
	box-shadow: 0 1px 0 rgba(27, 107, 58, 0.04) inset;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.azawon-zakat-field:hover {
	border-color: rgba(196, 162, 78, 0.4);
	transform: translateY(-1px);
}

.azawon-zakat-field:focus-within {
	border-color: #156B3A;
	box-shadow:
		0 0 0 4px rgba(27, 107, 58, 0.10),
		0 6px 18px rgba(27, 107, 58, 0.08);
}

.azawon-zakat-field-icon {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 0.85rem;
	background: linear-gradient(135deg, #EEF7F1, #E2EFE6);
	border-radius: 8px;
}

.azawon-zakat-field label {
	position: relative;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1F2937;
	margin-bottom: 0.3rem;
	padding-left: 28px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.azawon-zakat-field label .azawon-zakat-field-icon {
	position: absolute;
	left: 0;
	top: 1px;
}

.azawon-zakat-calculator input[type="number"],
.azawon-zakat-calculator select {
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid rgba(0, 0, 0, 0.10);
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
	font-size: 0.95rem;
	background: #FDFDFC;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) inset;
}

.azawon-zakat-calculator input[type="number"]:hover {
	border-color: rgba(196, 162, 78, 0.55);
}

.azawon-zakat-calculator input[type="number"]:focus {
	border-color: #156B3A;
	background: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(27, 107, 58, 0.12);
	transform: none;
}

/* Currency prefix inside money inputs */
.azawon-zakat-input-wrap--prefix input {
	padding-left: 2.4rem;
}

.azawon-zakat-input-prefix {
	position: absolute;
	top: 50%;
	left: 0.95rem;
	transform: translateY(-50%);
	font-size: 0.95rem;
	font-weight: 700;
	color: #156B3A;
	pointer-events: none;
}

.azawon-zakat-input-wrap--unit input {
	padding-right: 3.4rem;
}

.azawon-zakat-input-unit {
	right: 1rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: #EEF7F1;
	color: #156B3A;
	font-size: 0.68rem;
}

.azawon-zakat-value-chip {
	color: #B08A2E;
	background: rgba(196, 162, 78, 0.10);
	border-color: rgba(196, 162, 78, 0.28);
}

.azawon-zakat-help {
	color: #6B7280;
	font-size: 0.68rem;
	line-height: 1.35;
	margin-top: 0.3rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Live results panel ---------- */

.azawon-zakat-live {
	margin-top: 0.9rem;
	padding: 0.95rem 1.05rem 0.9rem;
	border-radius: 16px;
	border: 1px solid rgba(212, 175, 55, 0.35);
	background:
		radial-gradient(circle at 95% 0%, rgba(212, 175, 55, 0.30), transparent 45%),
		radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.10), transparent 50%),
		linear-gradient(160deg, #05351F, #0B6E4F 62%, #12824A);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.14) inset,
		0 18px 44px rgba(5, 53, 31, 0.35);
}

/* Eight-point star ornament in the corner */
.azawon-zakat-live::before {
	content: '';
	position: absolute;
	top: 10px;
	right: 14px;
	width: 64px;
	height: 64px;
	opacity: 0.5;
	background:
		linear-gradient(135deg, transparent 43%, rgba(212, 175, 55, 0.5) 44%, rgba(212, 175, 55, 0.5) 56%, transparent 57%),
		linear-gradient(45deg, transparent 43%, rgba(212, 175, 55, 0.5) 44%, rgba(212, 175, 55, 0.5) 56%, transparent 57%);
	mask-image: radial-gradient(circle, #000 30%, transparent 70%);
	-webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
	pointer-events: none;
}

.azawon-zakat-live::after {
	background:
		radial-gradient(circle at 90% -10%, rgba(212, 175, 55, 0.35), transparent 55%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 6px, transparent 6px 12px);
}

.azawon-zakat-live-head {
	padding-bottom: 0.55rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
}

.azawon-zakat-live-head > span {
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.78);
}

.azawon-zakat-networth {
	font-size: 1.75rem;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.azawon-zakat-networth {
		background: linear-gradient(90deg, #FFFFFF, #FDE68A);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.azawon-zakat-progress {
	height: 8px;
	margin: 0.7rem 0 0.6rem;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

.azawon-zakat-progress-bar {
	position: relative;
	overflow: hidden;
}

.azawon-zakat-progress-bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: translateX(-100%);
	animation: azawon-progress-stripe 2.2s ease-in-out infinite;
}

@keyframes azawon-progress-stripe {
	0% { transform: translateX(-100%); }
	60%, 100% { transform: translateX(100%); }
}

.azawon-zakat-nisab-chip {
	padding: 0.34rem 0.75rem;
	backdrop-filter: blur(4px);
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.20);
	transition: background 0.25s ease, transform 0.25s ease;
}

.azawon-zakat-nisab-chip:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
}

.azawon-zakat-outcome {
	margin-top: 1.1rem;
}

.azawon-zakat-outcome-idle,
.azawon-zakat-outcome-below {
	background: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(3px);
	padding: 0.7rem 0.5rem;
}

.azawon-zakat-outcome-icon {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 0.4rem;
	font-size: 1.1rem;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.22);
	box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

.azawon-zakat-due-label {
	color: #FDE68A;
	letter-spacing: 1.4px;
}

.azawon-zakat-due-amount {
	position: relative;
	margin: 0.35rem 0 0.8rem;
	font-size: 2.2rem;
	animation: azawon-amount-glow 3.5s ease-in-out infinite;
}

/* Gentle breathing glow on the gold amount (works everywhere, no clipping hacks) */
@keyframes azawon-amount-glow {
	0%, 100% { filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.32)); }
	50% { filter: drop-shadow(0 2px 20px rgba(212, 175, 55, 0.6)); }
}

.azawon-zakat-breakdown {
	padding: 0.85rem 1rem;
	background: rgba(4, 40, 24, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.azawon-zakat-breakdown li {
	padding: 0.32rem 0;
}

.azawon-zakat-breakdown li strong {
	font-variant-numeric: tabular-nums;
}

.azawon-zakat-breakdown-total {
	background: linear-gradient(90deg, rgba(212, 175, 55, 0.14), transparent);
	margin: 0.35rem -0.5rem 0;
	padding: 0.55rem 0.5rem 0.4rem !important;
	border-top: 1px dashed rgba(212, 175, 55, 0.4) !important;
	border-radius: 8px;
}

/* CTA buttons */
.azawon-zakat-cta-gold {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #F7C948, #D4AF37 55%, #C49A2A);
	box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45);
}

.azawon-zakat-cta-gold::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	transition: left 0.55s ease;
}

.azawon-zakat-cta-gold:hover::after {
	left: 120%;
}

.azawon-zakat-cta-green {
	background: rgba(255, 255, 255, 0.12);
	border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.azawon-zakat-cta-green:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* Footer / reset */
.azawon-zakat-foot {
	margin-top: 0.9rem;
}

.azawon-zakat-reset {
	padding: 0.5rem 1.2rem;
	font-size: 0.8rem;
	background: #FFFFFF;
}

/* Responsive refinements */
@media (max-width: 640px) {
	.azawon-zakat-calculator {
		padding: 1.9rem 1.25rem 1.6rem;
		border-radius: 18px;
	}

	.azawon-zakat-group {
		padding: 0.95rem 0.85rem 1rem;
	}

	.azawon-zakat-group-title {
		margin: -1.65rem 0 0.95rem;
	}

	.azawon-zakat-live {
		padding: 1.25rem 1.1rem 1.15rem;
	}

	.azawon-zakat-due-amount {
		font-size: 2rem;
	}

	.azawon-zakat-head {
		gap: 0.7rem;
	}

	.azawon-zakat-currency {
		margin-left: 0;
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
/* ======================================================================
   IMPACT SECTION — WHITE STAT CARDS & COHESIVE BUTTON POLISH
   Meals/Orphans cards now match Water/Countries as white premium cards;
   every section button gets a consistent lift + sheen micro-interaction.
   ====================================================================== */

/* ---------- Bottom stat cards: all four are white premium cards ---------- */

.azawon-impact-section .azawon-card-gold {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(196, 162, 78, 0.28);
	border-radius: 16px;
	background:
		radial-gradient(circle at 100% 0%, rgba(196, 162, 78, 0.08), transparent 40%),
		linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 14px 34px rgba(6, 78, 59, 0.12),
		0 3px 10px rgba(6, 78, 59, 0.05);
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Always-visible gold accent bar */
.azawon-impact-section .azawon-card-gold::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #C4A24E, #D4AF37 60%, #F4B400);
	opacity: 0.85;
}

/* Emoji → green gradient medallion */
.azawon-impact-section .azawon-card-gold > p {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	margin-right: 1.1rem !important;
	border-radius: 50%;
	background: linear-gradient(135deg, #156B3A, #1E8A4A);
	box-shadow: 0 6px 16px rgba(21, 107, 58, 0.28);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Number → bold green; label → refined gray */
.azawon-impact-section .azawon-card-gold .wp-block-group > p:first-child {
	color: #156B3A !important;
	letter-spacing: -0.5px;
}

.azawon-impact-section .azawon-card-gold .wp-block-group > p:last-child {
	color: #5B6472 !important;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	margin-top: 0.25rem;
}

.azawon-impact-section .azawon-card-gold:hover {
	transform: translateY(-5px);
	border-color: rgba(196, 162, 78, 0.55);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 24px 52px rgba(6, 78, 59, 0.16),
		0 8px 22px rgba(196, 162, 78, 0.18);
}

.azawon-impact-section .azawon-card-gold:hover > p {
	transform: scale(1.08);
	box-shadow: 0 10px 24px rgba(21, 107, 58, 0.35);
}

/* ---------- Top counter cards: premium white with gold accent ---------- */

.azawon-impact-section .azawon-card-premium {
	border: 1px solid rgba(196, 162, 78, 0.24);
	background:
		radial-gradient(circle at 85% 0%, rgba(196, 162, 78, 0.10), transparent 42%),
		linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 16px 40px rgba(6, 78, 59, 0.14),
		0 4px 12px rgba(6, 78, 59, 0.06);
}

.azawon-impact-section .azawon-card-premium::before {
	opacity: 1;
	background: linear-gradient(90deg, #156B3A, #C4A24E 60%, #D4AF37);
}

.azawon-impact-section .azawon-card-premium:hover {
	transform: translateY(-6px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 28px 60px rgba(6, 78, 59, 0.18),
		0 8px 24px rgba(196, 162, 78, 0.16);
}

/* Counter numbers — slightly larger (labels stay small; they are direct
   <p> children of the card, so target only the counter + its inline $/+/number siblings) */
.azawon-impact-section .azawon-card-premium .azawon-counter,
.azawon-impact-section .azawon-card-premium .wp-block-group:has(.azawon-counter) p {
	font-size: clamp(2.1rem, 4vw, 2.7rem) !important;
}

.azawon-impact-section .azawon-card-premium .azawon-counter-label {
	color: #5B6472 !important;
}

/* Progress bars inside counters — gold fill, rounded, with subtle track */
.azawon-impact-section .azawon-progress-bar {
	height: 8px;
	border-radius: 999px;
	background: rgba(21, 107, 58, 0.10);
	overflow: hidden;
}

.azawon-impact-section .azawon-progress-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #156B3A, #2E9E5B);
}

/* ---------- Cohesive button polish (all sections) ---------- */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.wp-block-button__link::after {
	content: '';
	position: absolute;
	top: 0;
	left: -70%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
	pointer-events: none;
}

.wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(21, 107, 58, 0.28);
}

.wp-block-button__link:hover::after {
	left: 130%;
}

/* Plain green buttons — richer gradient + glow */
.wp-block-button__link.wp-element-button {
	background: linear-gradient(135deg, #156B3A, #1E8A4A 60%, #239252);
	box-shadow: 0 6px 18px rgba(21, 107, 58, 0.3);
}

.wp-block-button.is-style-azawon-gold .wp-block-button__link {
	background: linear-gradient(135deg, #F7C948, #D4AF37 55%, #C49A2A);
	box-shadow: 0 8px 22px rgba(196, 162, 78, 0.35);
}

/* Outline buttons keep their transparent look */
.wp-block-button.is-style-azawon-outline-gold .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-azawon-outline .wp-block-button__link {
	background: transparent !important;
	box-shadow: none !important;
}

/* Impact CTA */
.azawon-impact-section .azawon-btn-donate .wp-block-button__link {
	box-shadow: 0 10px 26px rgba(21, 107, 58, 0.38);
	font-size: 1rem;
	letter-spacing: 0.3px;
}

/* Respect reduced-motion preferences for the new hover/sheen effects */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link::after {
		display: none;
	}
	.wp-block-button__link:hover,
	.azawon-impact-section .azawon-card-gold,
	.azawon-impact-section .azawon-card-premium {
		transition: none !important;
		transform: none !important;
	}
	.azawon-lightbox__img,
	.azawon-lightbox__caption {
		transition: none !important;
	}
}

/* Donate section full-width buttons */
.azawon-donate-section .wp-block-button__link {
	width: 100%;
	justify-content: center;
}

/* Newsletter subscribe button alignment */
.azawon-newsletter-section .wp-block-button__link {
	white-space: nowrap;
}

/* ======================================================================
   BLOG CARD GRID — 4 columns, most recent first
   ====================================================================== */

.azawon-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	padding: 2rem 0;
}

.azawon-blog-card {
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.azawon-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.azawon-blog-card--featured {
	grid-column: span 1;
	grid-row: span 1;
}

.azawon-blog-card__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, #064E3B, #1E8A4A);
}

.azawon-blog-card--featured .azawon-blog-card__img {
	aspect-ratio: 16 / 9;
}

.azawon-blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.azawon-blog-card:hover .azawon-blog-card__img img {
	transform: scale(1.05);
}

.azawon-blog-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
}

.azawon-blog-card__body {
	padding: 1.2rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.azawon-blog-card__cat {
	display: inline-block;
	background: rgba(6, 78, 59, 0.08);
	color: #064E3B;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	margin-bottom: 0.6rem;
	width: fit-content;
}

.azawon-blog-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 700;
	color: #1F2937;
}

.azawon-blog-card--featured .azawon-blog-card__title {
	font-size: 1.05rem;
}

.azawon-blog-card__title a {
	color: inherit;
	text-decoration: none;
}

.azawon-blog-card__title a:hover {
	color: #064E3B;
}

.azawon-blog-card__excerpt {
	color: #6B7280;
	font-size: 0.85rem;
	line-height: 1.55;
	margin: 0 0 0.8rem;
	flex: 1;
}

.azawon-blog-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #F3F4F6;
	padding-top: 0.75rem;
	margin-top: auto;
}

.azawon-blog-card__date {
	font-size: 0.75rem;
	color: #9CA3AF;
	font-weight: 500;
}

.azawon-blog-card__link {
	font-size: 0.8rem;
	font-weight: 700;
	color: #064E3B;
	text-decoration: none;
	transition: color 0.2s;
}

.azawon-blog-card__link:hover {
	color: #1E8A4A;
}

/* Blog responsive */
@media (max-width: 1024px) {
	.azawon-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.azawon-blog-card--featured {
		grid-column: span 1;
		grid-row: span 1;
	}
}

@media (max-width: 600px) {
	.azawon-blog-grid {
		grid-template-columns: 1fr;
	}
	.azawon-blog-card--featured {
		grid-column: span 1;
	}
}

/* Blog page query grid — 4 columns on desktop */
.blog .wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 1.5rem;
}
.blog .wp-block-post-template.is-layout-grid > li {
	margin: 0 !important;
}
.blog .wp-block-post-template.is-layout-grid > li .azawon-card {
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog .wp-block-post-template.is-layout-grid > li .azawon-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.blog .wp-block-post-template .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16/9;
	overflow: hidden;
}
.blog .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1024px) {
	.blog .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.blog .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}