/*
 * Refund Policy page — three sections, marker prefix `ab-refund-`.
 *   1. ab-refund-hero   — neutral policy band: eyebrow, headline, lede (centred)
 *   2. ab-refund-body   — white 800px article column: intro, checklist, callout,
 *                         request steps, email box, Exceptions / Questions notes
 *   3. ab-refund-zakat  — full-width green "give your Zakat with confidence" CTA
 *
 * Colours: tokens where they map cleanly (ab-navy #053A66, ab-blue #0D72BA,
 * ab-green #0F7060, neutral scale, primary-700 #0A5A95). Design-only shades with
 * no token stay literal and scoped to these classes: Primary-100 #E6F1F9, the
 * body hairline #E9E9E9, the muted lead-in #555555. Figma textCase TITLE maps to
 * text-transform:capitalize, UPPER to uppercase. Values follow the Figma Refund
 * Policy spec exactly. Loaded conditionally by inc/enqueue.php (marker `ab-refund-`).
 */

.ab-refund-hero *,
.ab-refund-body *,
.ab-refund-zakat * { box-sizing: border-box; }

/* ============================================================= *
 * 1. HERO — "Donation Refund Policy"                            *
 * ============================================================= */
.ab-refund-hero {
	background: var(--wp--custom--neutral--300); /* #D4D4D8 per comp */
	padding-top: 150px;
	padding-bottom: 150px;
}
.ab-refund-hero__text {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.ab-refund-hero .ab-refund-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--900);
}
.ab-refund-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: capitalize;
	color: var(--wp--custom--neutral--900);
}
.ab-refund-hero__lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: capitalize;
	color: var(--wp--custom--neutral--900);
}

/* ============================================================= *
 * 2. BODY — the policy article                                  *
 * ============================================================= */
.ab-refund-body {
	background: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
	border-bottom: 1px solid #E9E9E9;
}
.ab-refund-body__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.ab-refund-body__col {
	width: 100%;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Serif section headings (Fraunces 42/600 navy). */
.ab-refund-body .ab-refund-h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-navy);
}

/* Body copy. */
.ab-refund-p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--custom--neutral--700);
}
.ab-refund-p--muted { color: #555; }
.ab-refund-link-inline {
	color: var(--wp--preset--color--ab-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Intro + first heading block. */
.ab-refund-text { display: flex; flex-direction: column; gap: 30px; }
.ab-refund-text__title,
.ab-refund-request__title { display: flex; flex-direction: column; gap: 16px; }

/* Checklist (affirmative ticks) + request steps (square bullets). */
.ab-refund-checks,
.ab-refund-squares {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ab-refund-checks { gap: 18px; }
.ab-refund-squares { gap: 10px; }
.ab-refund-checks li,
.ab-refund-squares li {
	display: flex;
	align-items: center;
	gap: 25px;
	margin: 0;
}
.ab-refund-checks li {
	padding-bottom: 15px;
	border-bottom: 0.6px solid var(--wp--custom--neutral--300);
}
.ab-refund-bullet__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 999px;
	background: #fff;
}
.ab-refund-bullet__icon svg { width: 27px; height: 27px; display: block; }
.ab-refund-checks .ab-refund-bullet__icon { color: var(--wp--preset--color--ab-blue); }
.ab-refund-squares .ab-refund-bullet__icon { color: var(--wp--custom--action--500); } /* #F59423 orange */
.ab-refund-bullet__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-align: justify;
	color: var(--wp--custom--neutral--700);
}

/* 30-day callout. */
.ab-refund-callout {
	padding: 30px;
	background: #E6F1F9; /* Primary-100 (no token) */
	border-left: 4px solid var(--wp--preset--color--ab-blue);
	border-radius: 0 8px 8px 0;
}
.ab-refund-callout p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--custom--neutral--900);
}

/* "How to request a refund" group. */
.ab-refund-request { display: flex; flex-direction: column; gap: 30px; }
.ab-refund-request__note { padding-top: 20px; }

/* Email request box. */
.ab-refund-send {
	padding: 40px;
	background: var(--wp--custom--neutral--100); /* #F5F2ED */
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}
.ab-refund-send__text { display: flex; flex-direction: column; gap: 16px; }
.ab-refund-send__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--700);
}
.ab-refund-send__email {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--ab-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ab-refund-send__btn {
	display: inline-block;
	padding: 12px 30px;
	border: 1.5px solid var(--wp--preset--color--ab-blue);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: capitalize;
	text-decoration: none;
	color: var(--wp--custom--primary--700); /* #0A5A95 */
	transition: background-color .15s ease, color .15s ease;
}
.ab-refund-send__btn:hover,
.ab-refund-send__btn:focus {
	background: var(--wp--preset--color--ab-blue);
	color: #fff;
}

/* Exceptions / Questions notes. */
.ab-refund-notes { display: flex; flex-direction: column; gap: 30px; }
.ab-refund-note { display: flex; flex-direction: column; gap: 16px; }
.ab-refund-body .ab-refund-note__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 26px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.2;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-navy);
}
.ab-refund-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}
.ab-refund-links a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--wp--preset--color--ab-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================= *
 * 3. ZAKAT — "Give your Zakat with confidence" (green band)     *
 * ============================================================= */
.ab-refund-zakat {
	background: var(--wp--preset--color--ab-green);
	padding-top: 50px;
	padding-bottom: 50px;
}
.ab-refund-zakat__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}
.ab-refund-zakat__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.ab-refund-zakat__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}
.ab-refund-zakat__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
	text-transform: capitalize;
	color: #fff;
}
.ab-refund-zakat__lede {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
}
.ab-refund-zakat__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 25px;
}
.ab-refund-zakat__btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--ab-green);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.2px;
	text-transform: capitalize;
	text-decoration: none;
	transition: background-color .15s ease;
}
.ab-refund-zakat__btn:hover,
.ab-refund-zakat__btn:focus { background: rgba(255, 255, 255, .88); }
.ab-refund-zakat__link {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-transform: capitalize;
	text-decoration: none;
}
.ab-refund-zakat__link:hover,
.ab-refund-zakat__link:focus { border-bottom-color: rgba(255, 255, 255, .6); }

/* ============================================================= *
 * Responsive                                                    *
 * ============================================================= */
@media (max-width: 782px) {
	.ab-refund-hero { padding-top: 80px; padding-bottom: 80px; }
	.ab-refund-hero__title { font-size: 40px; }
	.ab-refund-hero__lede { font-size: 18px; }
	.ab-refund-body { padding-top: 60px; padding-bottom: 60px; }
	.ab-refund-body .ab-refund-h2 { font-size: 32px; }
	.ab-refund-body .ab-refund-note__title { font-size: 22px; }
	.ab-refund-callout { padding: 24px; }
	.ab-refund-callout p { font-size: 18px; }
	.ab-refund-send { padding: 28px; }
	.ab-refund-send__email { font-size: 20px; }
	.ab-refund-checks li,
	.ab-refund-squares li { gap: 16px; }
	.ab-refund-zakat__title { font-size: 30px; }
}