/* ght-pagehero */
/* GHH Page Hero — film look (photo/footage behind, words bottom left) or plain (white, photo beside). */
.ght.phero { --ght-fx: 50%; --ght-fy: 50%; position: relative; overflow: hidden; }
.ght .phero__media img, .ght .phero__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--ght-fx) var(--ght-fy); }
.ght .phero__h { margin: 0; font-weight: 900; line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.ght .phero__h em { font-style: italic; font-weight: 800; color: var(--ght-gold); }
.ght .phero__lead { max-width: 54ch; margin-top: 20px; font-size: clamp(17px, 1.35vw, 20px); text-wrap: pretty; }
.ght .phero .crumbs { margin-bottom: 22px; }
.ght .phero__kick { margin-bottom: 16px; }
.ght .phero__give { margin-top: 28px; }
.ght .phero__btns { margin-top: 28px; }
.ght .phero__note { margin-top: 16px; font-size: 14px; }

/* film: the picture fills the hero, the words sit on the dark bottom */
.ght.phero--film { display: flex; align-items: flex-end; min-height: clamp(520px, 72svh, 800px); background: var(--ght-night); color: #fff; }
.ght.phero--film:not(.has-media) { min-height: 0; padding-top: clamp(80px, 9vw, 140px); }
.ght.phero--film .phero__media { position: absolute; inset: 0; }
.ght .phero__shade { position: absolute; inset: 0; background:
	linear-gradient(0deg, rgba(6, 20, 30, .95) 0%, rgba(6, 20, 30, .55) 40%, rgba(6, 20, 30, .05) 72%),
	linear-gradient(90deg, rgba(6, 20, 30, .65) 0%, rgba(6, 20, 30, 0) 60%); }
.ght.phero--film .phero__in { position: relative; z-index: 1; max-width: 1600px; padding-top: 120px; padding-bottom: clamp(36px, 4.5vw, 64px); }
.ght.phero--film .phero__h { font-size: clamp(50px, 7.2vw, 116px); color: #fff; }
.ght.phero--film .phero__lead { color: rgba(255, 255, 255, .86); }
.ght.phero--film .crumbs, .ght.phero--film .crumbs [aria-current] { color: rgba(255, 255, 255, .78); }
.ght.phero--film .crumbs a:hover { color: #fff; }
.ght.phero--film .phero__kick { color: var(--ght-gold); }
.ght.phero--film .phero__note { color: rgba(255, 255, 255, .7); }
.ght.phero--film .btn--line, .ght.phero--film .btn--line:focus { color: #fff; }
.ght.phero--film .btn--line:hover { background-color: #fff; color: var(--ght-ink); box-shadow: inset 0 0 0 1.5px #fff; }
.ght .phero__where { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); }
/* the giving pages: a little more room for the donate bar */
.ght.phero--film.has-give .phero__h { font-size: clamp(48px, 6.4vw, 104px); }

/* plain: white, title large, photo beside */
.ght.phero--plain { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); background: #fff; color: var(--ght-ink); }
.ght.phero--plain .phero__h { font-size: clamp(46px, 6.2vw, 96px); }
.ght.phero--plain:not(.has-media) .phero__h { max-width: 16ch; }
.ght.phero--plain .phero__lead { color: var(--ght-mute); }
/* a white section straight after a plain (white) hero: the hero's bottom space is the gap, not both paddings stacked */
.e-con:has(> .elementor-widget-ght_pagehero .phero--plain) + .e-con > .elementor-widget:first-child > .elementor-widget-container > :is(.ght.sec.t-white, .ght.pmap) { padding-top: 0; }
.ght.phero--plain .phero__note { color: var(--ght-mute); }
/* the photo sits in the right half of the content width, the words in the left */
.ght.phero--plain.has-media { display: grid; grid-template-columns: minmax(0, 1fr) min(calc(var(--ght-max) / 2), 50%) min(calc(var(--ght-max) / 2), 50%) minmax(0, 1fr); align-items: center; }
.ght.phero--plain.has-media .phero__in { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding-right: clamp(24px, 3vw, 48px); }
.ght.phero--plain .phero__media { grid-column: 3; grid-row: 1; aspect-ratio: 5 / 4; margin-right: var(--ght-pad); overflow: hidden; border-radius: 22px; background: var(--ght-mist); }
.ght.phero--plain .phero__media img { height: 100%; }

@media (max-width: 960px) {
	.ght.phero--plain.has-media { display: flex; flex-direction: column-reverse; align-items: stretch; padding-top: 16px; }
	.ght.phero--plain.has-media .phero__in { padding-right: var(--ght-pad); }
	.ght.phero--plain .phero__media { margin: 0 var(--ght-pad) 28px; aspect-ratio: 4 / 3; }
}
/* phones: picture first, words under it on the dark */
@media (max-width: 760px) {
	.ght.phero--film { display: block; min-height: 0; }
	.ght.phero--film .phero__media { position: relative; aspect-ratio: 4 / 3.4; }
	.ght.phero--film .phero__shade { background: linear-gradient(0deg, rgba(6, 20, 30, 1) 0%, rgba(6, 20, 30, .25) 45%, rgba(6, 20, 30, 0) 70%); }
	.ght.phero--film.has-media .phero__in { margin-top: -90px; padding-top: 0; padding-bottom: 34px; }
	.ght.phero--film .phero__h, .ght.phero--film.has-give .phero__h { font-size: clamp(40px, 11vw, 54px); }
	.ght.phero--plain .phero__h { font-size: clamp(40px, 11vw, 54px); }
	.ght .phero__lead { font-size: 16px; }
	.ght .phero .crumbs { margin-bottom: 16px; font-size: 13px; }
}

/* ght-skydonate */
/* ==========================================================================
 * SkyDonate, dressed in the GHH look. The markup, amounts, Once/Monthly,
 * Zakat note and the add-to-basket all stay SkyDonate's; only the look changes.
 *
 * .ght-sd--dock  the hero form as one glass bar over the film
 * .quick-modal   the quick-donate pop-up (urgent appeal cards)
 * ======================================================================== */

/* ── the hero bar ── */
.ght .ght-sd--dock .donation-form-wrapper { width: fit-content; max-width: 100%; }
.ght .ght-sd--dock form.donation-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(6, 20, 30, .45); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: none; color: #fff; }
.ght .ght-sd--dock .donation-box-title { display: none; }

/* Once / Monthly */
.ght .ght-sd--dock .donation-type-switch { display: flex; gap: 0; width: auto; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.ght .ght-sd--dock .donation-type-switch .donation-type-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: none; background-image: none; color: rgba(255, 255, 255, .85); font-family: var(--ght-f); font-size: 15px; font-weight: 700; line-height: 1; box-shadow: none; cursor: pointer; }
.ght .ght-sd--dock .donation-type-switch .donation-type-btn::before, .ght .ght-sd--dock .donation-type-switch .donation-type-btn::after { display: none; }
.ght .ght-sd--dock .donation-type-switch .donation-type-btn.active { background: #fff; color: var(--ght-ink); }
.ght .ght-sd--dock .donation-type-btn .heart-icon { display: none; }

/* amounts */
.ght .ght-sd--dock .donation-amount-groups { display: contents; }
.ght .ght-sd--dock .donation-amount-group { display: none; }
.ght .ght-sd--dock .donation-amount-group.active { display: block; }
.ght .ght-sd--dock .donation-buttons { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.ght .ght-sd--dock .donation-buttons .donation-btn { position: relative; flex: 0 0 auto; width: auto; min-width: 66px; height: 50px; min-height: 50px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; background-image: none; color: #fff; font-family: var(--ght-f); font-size: 17px; font-weight: 800; box-shadow: none; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.ght .ght-sd--dock .donation-buttons .donation-btn::before, .ght .ght-sd--dock .donation-buttons .donation-btn::after { display: none; }
.ght .ght-sd--dock .donation-buttons .donation-btn:hover { border-color: #fff; background-color: transparent; color: #fff; }
.ght .ght-sd--dock .donation-buttons .donation-btn.active { border-color: #fff; background-color: #fff; color: var(--ght-ink); }
.ght .ght-sd--dock .donation-buttons .donation-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ght .ght-sd--dock .donation-btn .price, .ght .ght-sd--dock .donation-btn .currency-symbol { margin: 0; padding: 0; color: inherit; font: inherit; line-height: 1; }

/* custom amount */
.ght .ght-sd--dock .donation-amount-groups .donation-custom { position: relative; display: flex; flex: 0 0 auto; align-items: center; width: 132px; height: 50px; min-height: 50px; margin: 0; padding: 0 14px 0 34px; overflow: visible; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background-color: transparent; }
.ght .ght-sd--dock .donation-amount-groups .donation-custom:focus-within { border-color: #fff; }
/* the £ (SkyDonate lets it switch currency: the select sits invisibly over it) */
.ght .ght-sd--dock .donation-amount-groups .donation-custom .skydonate-currency-wrapper { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; width: 22px; height: auto; margin: 0; padding: 0; overflow: hidden; border: 0; background: none; }
.ght .ght-sd--dock .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { min-width: 0; width: 100%; height: auto; padding: 0; border-radius: 0; background: none; color: #fff; font-size: 17px; font-weight: 800; }
.ght .ght-sd--dock .donation-custom .skydonate-currency-select { inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ght .ght-sd--dock .donation-custom input.custom-amount-input { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; color: #fff; font-family: var(--ght-f); font-size: 17px; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.ght .ght-sd--dock .donation-custom input.custom-amount-input::-webkit-outer-spin-button, .ght .ght-sd--dock .donation-custom input.custom-amount-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
/* the bar has no room for SkyDonate's "Custom Amount" label (it sat over the amount); hidden even if its script shows it */
.ght .ght-sd--dock .donation-custom .custom-placeholder { display: none !important; }

/* Donate: SkyDonate's app-style button ("Donate now  £55  ›"), sized to its words.
   Its stylesheet sets the button with !important, so the bar has to as well. */
.ght .ght-sd--dock .donation-form-wrapper .form-submit-button { flex: 0 0 auto; gap: 10px !important; width: auto !important; height: 50px !important; min-height: 50px !important; margin: 0; padding: 0 22px 0 26px !important; border-radius: 999px; background: var(--ght-btn); background-image: none; box-shadow: none; text-transform: none; transition: background-color .2s, box-shadow .2s !important; }
.ght .ght-sd--dock .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); background-image: none; filter: none !important; box-shadow: 0 10px 30px -10px rgba(27, 157, 217, .8); }
.ght .ght-sd--dock .form-submit-button > span { font-family: var(--ght-f); font-size: 17px; font-weight: 700; color: #fff; text-transform: none; }
.ght .ght-sd--dock .form-submit-button .skd-app-cta__spacer, .ght .ght-sd--dock .form-submit-button .skd-app-cta__code { display: none !important; }
.ght .ght-sd--dock .form-submit-button .skd-app-cta__amount { font-weight: 800; opacity: 1; color: #fff; }
.ght .ght-sd--dock .form-submit-button .skd-app-cta__chevron { display: flex; }
.ght .ght-sd--dock .form-submit-button svg { width: 18px; height: 18px; }
.ght .ght-sd--dock .sky-daily-note:empty { display: none; }

/* notes SkyDonate adds (Zakat, daily dates): small, under the bar */
.ght .ght-sd--dock .zakat-applicable { display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; margin: 12px 0 0 6px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; }
.ght .ght-sd--dock .zakat-applicable i { color: var(--ght-gold); }

/* phones: a rounded panel, the amounts in a grid */
@media (max-width: 760px) {
	.ght .ght-sd--dock .donation-form-wrapper { width: 100%; }
	.ght .ght-sd--dock form.donation-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; border-radius: 22px; }
	.ght .ght-sd--dock .donation-type-switch { grid-column: 1 / -1; }
	.ght .ght-sd--dock .donation-type-switch .donation-type-btn { flex: 1; justify-content: center; }
	.ght .ght-sd--dock .donation-amount-group.active { grid-column: 1 / -1; }
	.ght .ght-sd--dock .donation-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ght .ght-sd--dock .donation-buttons .donation-btn { min-width: 0; width: 100%; padding: 0 6px; }
	.ght .ght-sd--dock .donation-amount-groups .donation-custom { grid-column: 1 / -1; width: 100%; }
	.ght .ght-sd--dock .donation-form-wrapper .form-submit-button { grid-column: 1 / -1; width: 100% !important; justify-content: center !important; }
}

/* ── quick-donate pop-up: GHH type and colours ── */
.quick-modal .donation-form, .quick-modal .donation-form button, .quick-modal .donation-form input { font-family: var(--ght-f); }
/* the small currency code after the amount on a donate button: white, not a faded blue (AA) */
.ght .form-submit-button .skd-app-cta__code { color: #fff !important; opacity: 1 !important; }

/* ght-ticker */
/* GHH Giving Now — a slim night band: "Giving now" with a live dot, then the newest donations
   scrolling past (the run is doubled, so -50% loops without a seam). Pauses on hover or focus. */
.ght.tick { display: flex; align-items: stretch; height: 60px; overflow: hidden; background: var(--ght-night, #0B2638); color: rgba(255, 255, 255, .78); font-family: var(--ght-ui); }
.ght .tick__label { position: relative; z-index: 2; display: flex; flex: none; align-items: center; gap: 10px; margin: 0; padding: 0 22px 0 var(--ght-pad); background: inherit; color: var(--ght-gold); font-size: 13.5px; font-weight: 800; letter-spacing: .01em; box-shadow: 18px 0 24px var(--ght-night, #0B2638); }
.ght .tick__live { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: ght-tick-pulse 1.8s infinite; }
.ght .tick__view { flex: 1; min-width: 0; overflow: hidden; }
.ght .tick__track { display: flex; align-items: center; gap: 48px; width: max-content; height: 100%; margin: 0; padding: 0 0 0 24px; list-style: none; white-space: nowrap; animation: ght-tick calc(var(--tick-s, 60s) * var(--tick-x, 1)) linear infinite; }
/* phones: the same pass takes longer (the band moves the same distance across a much narrower screen,
   so at the desktop pace it reads as racing past; user: "too fast on mobile") */
@media (max-width: 760px) { .ght .tick__track { --tick-x: 1.8; } }
.ght .tick__track li { margin: 0; font-size: 15px; }
.ght .tick__track b { font-weight: 700; color: #fff; }
.ght .tick__track a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.ght .tick__track a:hover { text-decoration-color: var(--ght-gold); }
.ght .tick__track i { margin-left: 6px; font-style: normal; color: rgba(255, 255, 255, .45); }
.ght.tick:hover .tick__track, .ght.tick:focus-within .tick__track { animation-play-state: paused; }
@keyframes ght-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ght-tick-pulse { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
/* still for those who prefer less motion: the list scrolls by hand instead */
@media (prefers-reduced-motion: reduce) {
	.ght .tick__track { animation: none; }
	.ght .tick__view { overflow-x: auto; scrollbar-width: none; }
	.ght .tick__live { animation: none; }
}
@media (max-width: 640px) {
	.ght.tick { height: 50px; }
	.ght .tick__label { gap: 8px; padding: 0 14px 0 var(--ght-pad); font-size: 12.5px; }
	.ght .tick__track { gap: 32px; padding-left: 16px; }
	.ght .tick__track li { font-size: 13.5px; }
}

/* ght-appeals */
/* GHH Urgent Appeals — three calm cards, each with its own film. */
.ght.now { padding: clamp(72px, 8vw, 120px) 0; background: #fff; color: var(--ght-ink); }
.ght .now__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(28px, 3vw, 44px); }
.ght .now__lead { margin-top: 14px; }
.ght .now__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ght-blue-d); text-decoration: none; }
.ght .now__all svg { transition: transform .2s var(--ght-ease); }
.ght .now__all:hover svg { transform: translateX(4px); }
.ght .now__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ght .ap { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--ght-mist); }
/* 16:9, the shape of the appeal photos: a square cropped their sides (user: "images must show in full") */
.ght .ap__film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ght-ink); }
.ght .ap__film video, .ght .ap__film img { width: 100%; height: 100%; object-fit: cover; }
.ght .ap__rec { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; }
.ght .ap__body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.ght .ap__tag { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); }
.ght .ap__h { margin-top: 6px; font-size: clamp(20px, calc(1.8vw - 2px), 25px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ght .ap__h a { text-decoration: none; }
.ght .ap__h a:hover { color: var(--ght-blue-d); }
.ght .ap__text { margin-top: 8px; font-size: 15px; color: var(--ght-mute); }
.ght .ap__goal { margin-top: auto; padding-top: 18px; }
.ght .ap__bar { height: 6px; overflow: hidden; border-radius: 999px; background: #D3E1E9; }
.ght .ap__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ght-blue); transition: width 1.4s var(--ght-ease); }
.ght .ap__goal p { margin-top: 8px; font-size: 14px; color: var(--ght-mute); }
.ght .ap__goal b { color: var(--ght-ink); }
.ght .ap__give { display: flex; gap: 6px; margin-top: 16px; }
.ght .ap__goal + .ap__give { margin-top: 16px; }
.ght .ap__body > .ap__give:first-child, .ght .ap__text + .ap__give, .ght .ap__h + .ap__give { margin-top: auto; padding-top: 18px; }
/* > only: SkyDonate's pop-up starts inside .ap__give and its buttons must keep their own look */
.ght .ap__give > button, .ght .ap__give > button:focus { flex: 1; min-height: 46px; padding: 0 6px; border: 1.5px solid var(--ght-line); border-radius: 999px; background-color: #fff; color: var(--ght-ink); font-family: var(--ght-f); font-size: 16px; font-weight: 800; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ght .ap__give > button.is-on, .ght .ap__give > button:hover { border-color: var(--ght-ink); background-color: var(--ght-ink); color: #fff; }
.ght .ap__give > .btn { flex: 1.4; min-height: 46px; padding: 0 14px; }

@media (max-width: 1180px) {
	.ght .now__grid { gap: 14px; }
	.ght .ap__give { flex-wrap: wrap; }
	.ght .ap__give > .btn { flex-basis: 100%; }
}

/* "grid" layout: every appeal. The first lies sideways across two columns (photo beside its words),
   and so does a last card that would otherwise sit alone on its row. */
.ght.now--grid .now__grid { gap: 22px; }
.ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: span 2; flex-direction: row; }
.ght.now--grid .ap:last-child:nth-child(3n) { grid-column: 1 / -1; }
.ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: 0 0 56%; aspect-ratio: auto; min-height: 100%; }
.ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: center; padding: clamp(24px, 2.6vw, 40px); }
.ght.now--grid .ap:first-child .ap__h { font-size: clamp(26px, 2.4vw, 36px); }
.ght.now--grid .ap:first-child .ap__text { font-size: 16.5px; }
.ght.now--grid .ap:first-child .ap__goal { margin-top: 0; }
@media (max-width: 1180px) and (min-width: 761px) {
	.ght.now--grid .now__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; }
	.ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: flex-start; padding: 22px; }
	/* two columns: the featured card fills a row, so an even count leaves the last one alone */
	.ght.now--grid .ap:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; }
	.ght.now--grid .ap:last-child:nth-child(even) .ap__film { flex: 0 0 50%; aspect-ratio: auto; min-height: 100%; }
	.ght.now--grid .ap:last-child:nth-child(even) .ap__body { justify-content: center; }
}
/* phones: a sideways row of cards */
@media (max-width: 760px) {
	.ght .now__grid { display: flex; gap: 14px; margin: 0 calc(var(--ght-pad) * -1); padding: 0 var(--ght-pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; }
	.ght .now__grid::-webkit-scrollbar { display: none; }
	.ght .ap { flex: none; width: 82%; scroll-snap-align: start; }
	/* "grid" layout: one under another, wide photos */
	.ght.now--grid .now__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
	.ght.now--grid .ap, .ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; width: auto; }
	.ght.now--grid .ap .ap__film, .ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { padding: 20px; }
	.ght.now--grid .ap:first-child .ap__h { font-size: 26px; }
}

/* donation-card */
.donation-card {
    background-color: #3340ac;
    color: white;
    border-radius: 10px;
}

.donation-card .donation-image {
    position: relative;
}

.donation-card .donation-image .play-button {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background-color: white;
    color: black;
    border-radius: 999px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}


.donation-card .donation-image .play-button i:before {
    content: "\f101";
    font-family: "woodmart-font";
}

.donation-card .donation-image .play-button i {
    font-style: normal;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    border-radius: 99px;
    background-color: white;
    z-index: 2;
    padding-left: 3px;
}

.donation-card .donation-image .play-button span {
    display: inline-block;
    padding-right: 30px;
    margin-left: -104px;
    transition: .3s;
}

.donation-card .donation-image .play-button:hover span {
    margin-left: 0px;
}
.donation-card .donation-image a {
    display: block;
}

.donation-card .donation-image img {
    border-radius: 10px;
}

.donation-card .donation-content {
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.donation-card .donation-content > .row {
    margin-top: auto;
}

.donation-card .donation-content .donation-title a {
    color: white;
    display: inline-block;
}

.donation-card .donation-content .donation-title {
    margin-bottom: 12px;
    margin-top: -5px;
    font-size: 23px;
    font-weight: 600;
}

.donation-card .donation-content .donation-short-description {
    color: #fffc;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.donation-card .donation-content .donation-button {
    color: currentColor;
    font-size: 12px;
    background-color: #e10130;
    display: block;
    border-radius: 50px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 600;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 100%;
    line-height: 1.34em;
    height: auto;
    min-height: inherit;
}

.donation-card .donation-content .donation-button .e-font-icon-svg {
    width: 12px;
    margin-left: 8px;
    color: currentColor;
    fill: currentColor;
}

.donation-card .donation-content .donation-button .icon {
    margin-left: 8px;
}

.donation-card .donation-content .donation-button.white-button {
    background-color: white;
    color: #3340ac;
}

.button-loader {
    position: relative;
    width: 0px;
    height: 0px;
}

.button-loader:before {
    content: "";
    border: 2px solid currentColor;
    border-left-color: transparent;
    animation: spin 1s linear infinite;
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 2px;
}

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

.donation-card .donation-content .donation-button:hover {
    background-color: white;
    color: #e10130;
}

.donation-card .donation-content .donation-button.white-button:hover {
    background-color: black;
    color: currentColor;
}


.donation-card .donation-content .donation-details {
    display: flex;
    justify-content: space-between;
    color: currentColor;
    font-weight: 600;
    margin-top: 12px;
    line-height: 1.2em;
    text-align: center;
}

.layout1 .donation-card .donation-content .donation-details > span {
    min-width: 30%;
}

.donation-card .donation-content .donation-details .amount {
    display: block;
}

.donation-card .donation-content .donation-details .raised-amount {
    text-align: left;
}

.donation-card .donation-content .donation-details .target-amount {
    text-align: right;
}

.donation-card .donation-content .donation-details .amount {
    color: currentColor;
}

.donation-card .donation-progress {
    width: 100%;
    height: 12px;
    background-color: #dadfdc;
    border-radius: 99px;
    margin-top: 24px;
    overflow: hidden;
}

.donation-card .donation-progress .progress-bar {
    width: 0%;
    height: 100%;
    background: #6bb766;
    border-radius: 99px;
}


button.lity-close {
    position: absolute;
    top: -40px; /* Adjust for visibility */
    right: 0px; /* Ensure placement */
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-indent: -99999px;
    font-size: 18px;
    line-height: 18px;
    padding: 0px;
    min-height: 30px;
    background-color: red;
    border-radius: 99px;
    cursor: pointer;
}

button.lity-close:hover {
    background-color: darkred; /* Better hover effect */
    color: white;
    font-size: 18px !important;
    line-height: 18px !important;
}


button.lity-close:before {
    content: "\f112";
    font-family: "woodmart-font";
    display: block;
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-indent: 0px;
    transform: translate(-50%, -50%);
    color: white;
}

.layout2 .donation-card .donation-content .donation-details {
    margin: 0;
}

.layout2 .donation-card .donation-content .donation-details > span {
    display: flex;
    flex-wrap: wrap;
}

.layout2 .donation-card .donation-content .donation-details .amount {
    margin-left: 5px;
}

.layout2 .donation-card .donation-progress {
    margin-top: 8px;
}

.layout2 .donation-card .percentage {
    text-align: right;
    font-size: 12px;
    margin-bottom: 8px;
    margin-top: 3px;
}

.layout2 .donation-card .donation-content .donation-button {
    max-width: 200px;
    display: inline-block;
    padding: 5px 5px 5px 24px;
    line-height: 36px;
    text-align: left;
    background-color: white;
    color: #0C5EBA;
}

.layout2 .donation-card .donation-content .donation-button .icon {
    width: 36px;
    height: 36px;
    line-height: 1em;
    background-color: #0C5EBA;
    color: white;
    text-align: center;
    border-radius: 99px;
    float: right;
    margin-left: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.layout2 .donation-card .donation-content .donation-button:hover {
    background-color: #eeac2d;
    color: #ffffff;
}

.layout2 .donation-card .donation-content .donation-button .icon svg {
    margin: 0;
}

.layout2 .donation-card .donation-content .donation-title {
    margin-bottom: 16px;
}

.layout2 .donation-card .donation-content .donation-short-description {
    margin-bottom: 24px;
}

.layout2 .donation-card {
    border-bottom: 5px solid #eeac2d;
    background-color: #0C5EBA;
}


.donation-card .donation-content .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout2 .donation-card .card-icon {
    font-size: 40px;
    line-height: 1em;
    margin-bottom: 20px;
    position: relative;
    z-index: 3;
    display: inline-flex;
    width: 80px;
    height: 80px;
    background-color: #e30a6c;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
}

.donation-card .donation-content .icon-wrapper .card-icon {
    display: flex;
}

.layout2 .donation-card .card-icon span {
    display: inline-block;
}

.layout2 .donation-card .card-icon img {
    width: 40px;
}

.layout2 .donation-card .card-icon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.donation-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.donation-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

/* donation-button */
.button-full .primary-button {
    width: 100%;
}

.primary-button {
    box-shadow: none;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    text-shadow: none;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border-radius: 0;
    transition: 0.1s linear;
}

.button-small .primary-button {
    padding: 12px 16px;
    font-size: 14px;
    min-height: inherit;
}

.button-medium .primary-button {
    padding: 12px 20px;
    min-height: inherit;
}

.button-large .primary-button {
    padding: 16px 24px;
    font-size: 14px;
}

.button-extra_large .primary-button {
    padding: 18px 32px;
    font-size: 16px;
}

.button-rounded .primary-button {
    border-radius: 8px;
}

.button-round .primary-button {
    border-radius: 99px;
}

.button-flat .primary-button {
    border: 0px solid transparent;
}

.button-flat.button-gray .primary-button {
    color: #3E3E3E;
    background: #F3F3F3;
}

.button-flat.button-gray .primary-button:hover,
.button-flat.button-gray .primary-button.active {
    color: #3E3E3E;
    background: #e0e0e0;
}

.button-flat.button-primary .primary-button {
    color: #ffffff;
    background: var(--accent-color);
    box-shadow: inset 0 0 0 rgba(0,0,0,0.1);
}

.button-flat.button-primary .primary-button:hover,
.button-flat.button-primary .primary-button.active {
    color: #ffffff;
    background: var(--accent-color);
    box-shadow: inset 0 0 200px rgba(0,0,0,0.1);
}


.button-flat.button-alternative .primary-button {
    color: #ffffff;
    background: var(--accent-color);
    box-shadow: inset 0 0 0 rgba(0,0,0,0.1);
}

.button-flat.button-alternative .primary-button:hover,
.button-flat.button-alternative .primary-button.active {
    color: #ffffff;
    background: var(--accent-color);
    box-shadow: inset 0 0 200px rgba(0,0,0,0.1);
}


.button-flat.button-black .primary-button {
    color: #ffffff;
    background: #212121;
    box-shadow: inset 0 0 0 rgba(0,0,0,0.1);
}

.button-flat.button-black .primary-button:hover,
.button-flat.button-black .primary-button.active {
    color: #ffffff;
    background: #212121;
    box-shadow: inset 0 0 200px rgba(0,0,0,0.1);
}


.button-flat.button-white .primary-button {
    color: #333333;
    background: white;
    box-shadow: inset 0 0 0 rgba(0,0,0,0.1);
}

.button-flat.button-white .primary-button:hover,
.button-flat.button-white .primary-button.active {
    color: #333333;
    background: white;
    box-shadow: inset 0 0 200px rgba(0,0,0,0.1);
}

.button-border .primary-button {
    color: #333333;
    background: transparent;
    border: 1px solid #F3F3F3;
}

.button-border .primary-button:hover,
.button-border .primary-button.active {
    color: #333333;
    border-color: #F3F3F3;
    background: #F3F3F3;
}

.button-border.button-primary .primary-button {
    color: var(--accent-color);
    background: transparent;
    border: 1px solid var(--accent-light-color);
}

.button-border.button-primary .primary-button:hover,
.button-border.button-primary .primary-button.active {
    color: #ffffff;
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.button-border.button-alternative .primary-button {
    color: var(--accent-color);
    background: transparent;
    border: 1px solid var(--accent-color);
}

.button-border.button-alternative .primary-button:hover,
.button-border.button-alternative .primary-button.active {
    color: #ffffff;
    border-color: var(--accent-color);
    background: var(--accent-color);
}

.button-border.button-black .primary-button {
    color: #212121;
    background: transparent;
    border: 1px solid #212121;
}

.button-border.button-black .primary-button:hover,
.button-border.button-black .primary-button.active {
    color: #ffffff;
    border-color: #212121;
    background: #212121;
}


.button-border.button-white .primary-button {
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
}

.button-border.button-white .primary-button:hover,
.button-border.button-white .primary-button.active {
    color: #212121;
    border-color: #ffffff;
    background: #ffffff;
}

.button-link .primary-button {
    background: none;
    padding: 0;
    color: #212121;
    border-bottom: 1px solid #F3F3F3;
}

.button-link .primary-button:hover,
.button-link .primary-button.active {
    color: #333333;
    border-bottom: 1px solid #e0e0e0;
}

.button-link.button-primary .primary-button {
    color: #333333;
    border-bottom: 1px solid var(--accent-color);
}

.button-link.button-primary .primary-button:hover,
.button-link.button-primary .primary-button.active {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.button-link.button-alternative .primary-button {
    color: #333333;
    border-bottom: 1px solid var(--accent-color);
}

.button-link.button-alternative .primary-button:hover,
.button-link.button-alternative .primary-button.active {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.button-link.button-black .primary-button {
    color: #333333;
    border-bottom: 1px solid #333333;
}

.button-link.button-black .primary-button:hover,
.button-link.button-black .primary-button.active {
    color: #000000;
    border-bottom: 1px solid #000000;
}

.button-link.button-white .primary-button {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

.button-link.button-white .primary-button:hover,
.button-link.button-white .primary-button.active {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

/* ght-appeal-sd */
/* ==========================================================================
 * GHH Toolkit — SkyDonate's donation form on the appeal page, in the GHH look (moved out of
 * ght-appeal.css in 1.53.6). Loaded only while Settings → GHH Toolkit → "Style SkyDonate widgets"
 * is on; off, SkyDonate's own design shows.
 * ======================================================================== */

/* ── SkyDonate's form, as the donation checkout draws it (also in the Donate section, .ght-sdform) ── */
:is(.ght-ap-side, .ght-sdform) .elementor-widget-skyweb_donation_form { --accent-color: var(--ght-blue); margin: 0; }
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper { font-family: var(--ght-f); }
:is(.ght-ap-side, .ght-sdform) .donation-form { gap: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form button, :is(.ght-ap-side, .ght-sdform) .donation-form input, :is(.ght-ap-side, .ght-sdform) .donation-form select { font-family: var(--ght-f); }
/* Give once / Monthly: two boxes, the chosen one light blue */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-switch { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100%; gap: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn { width: 100% !important; max-width: none !important; flex: none !important; min-height: 46px; margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 16px; font-weight: 500; text-transform: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:first-child { border-radius: 8px 0 0 8px; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:last-child { border-radius: 0 8px 8px 0; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn::before { display: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn.active { position: relative; z-index: 1; background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
/* amounts */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons { gap: 8px; }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 17px; font-weight: 500; text-transform: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn::after { display: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn.active { background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .currency-symbol, :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .price { color: inherit; font-weight: inherit; }
/* project options with a label ("Fully fund a complete water well" £1,120) — water wells, masjids:
   one per row, what it does on the left, the amount on the right, sentence case; SkyDonate ran
   "£1120Fully Fund A Complete…" together, title-cased, the others in pink */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons:has(.btn-label) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label) { display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 50px; white-space: normal !important; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--ght-line) !important; color: var(--ght-ink) !important; font: 500 15px/1.3 var(--ght-f) !important; text-align: left; text-transform: none !important; letter-spacing: 0 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label):hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn.active:has(.btn-label) { background: var(--ght-soft) !important; box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .btn-label { flex: 1; min-width: 0; color: var(--ght-ink) !important; font: inherit !important; text-transform: none !important; white-space: normal !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .price { flex: none; color: var(--ght-ink) !important; font-size: 16px !important; font-weight: 700 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label)::before { display: none !important; }
/* the project's promise above the options: a calm line, not blue part-way through */
:is(.ght-ap-side, .ght-sdform) .donation-box-title, :is(.ght-ap-side, .ght-sdform) .donation-box-title * { color: var(--ght-ink-2) !important; font-weight: 400 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-box-title { margin-bottom: 12px; font-size: 15px; line-height: 1.5; }
/* custom amount: one big field */
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom { min-height: 56px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); }
/* list layout (Fidyah): SkyDonate joins the field to the list above (square top, no gap); the rows are separate cards here, so it is one too */
:is(.ght-ap-side, .ght-sdform) .donation-form.list-layout .donation-amount-groups .donation-custom { margin-top: 8px !important; border-radius: 10px !important; }
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom:focus-within { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { color: var(--ght-ink); background-color: transparent; font-weight: 400; }
/* (the field's ring is an inset shadow: anything inside with a background would paint over it) */
:is(.ght-ap-side, .ght-sdform) .donation-custom input.custom-amount-input { background: transparent !important; box-shadow: none !important; color: var(--ght-ink); font-size: 22px; font-weight: 500; }
:is(.ght-ap-side, .ght-sdform) .donation-custom .custom-placeholder { background: transparent !important; }
/* the currency switcher sits invisibly over the £ (its own label would print over it) */
:is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select { color: transparent; background: transparent; }
:is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select option { color: var(--ght-ink); }
/* the field's blue ring is the focus mark: SkyDonate's reset.css also draws a black outline on the input/select inside it */
:is(.ght-ap-side, .ght-sdform) .donation-custom :is(input.custom-amount-input, .skydonate-currency-select):is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; }
/* "Select donation type": its group draws the box */
:is(.ght-ap-side, .ght-sdform) .donation-type-select-group { border: 0 !important; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ght-line); }
:is(.ght-ap-side, .ght-sdform) .donation-type-select-group select { min-height: 48px; border: 0; background-color: transparent; box-shadow: none; font-size: 15px; color: var(--ght-ink); }
:is(.ght-ap-side, .ght-sdform) .skydonate-currency-wrapper, :is(.ght-ap-side, .ght-sdform) .skydonate-currency-select { border: 0 !important; box-shadow: none !important; }
/* Donate */
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button { height: 54px !important; min-height: 54px !important; border-radius: 8px; background: var(--ght-btn); background-image: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); filter: none !important; }
:is(.ght-ap-side, .ght-sdform) .form-submit-button > span { font-family: var(--ght-f); font-weight: 600; text-transform: none; }
/* "This project is Zakat applicable.": a quiet line with a blue tick, not SkyDonate's lilac pill */
body .donation-form-wrapper .zakat-applicable { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ght-ink-2); font: 500 14px/1.4 var(--ght-f); text-align: center; }
body .donation-form-wrapper .zakat-applicable i { display: none; }
body .donation-form-wrapper .zakat-applicable::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--ght-blue-d); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the header's Donate pop-up on an appeal page (header.js): the site's close button, not SkyDonate's red one */
.quick-modal.ght-qd .quick-modal-close { width: 40px; height: 40px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; box-shadow: none; color: var(--ght-ink); }
.quick-modal.ght-qd .quick-modal-close:hover { background: var(--ght-mist); }
.quick-modal.ght-qd .quick-modal-close:after { background-color: var(--ght-ink); }
.quick-modal.ght-qd .quick-modal-body { border-radius: 20px; }
:is(.ght-ap-side, .ght-sdform) .form-submit-button .skd-app-cta__code { color: #fff !important; opacity: 1 !important; }

/* ght-causes */
/* GHH Cause Tiles — appeal categories as large photo tiles: the name and count on the photo's dark foot. */
.ght .cz__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(24px, 3vw, 40px); }
.ght .cz__lead { margin-top: 14px; }
.ght .cz__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ght-blue-d); text-decoration: none; }
.ght .cz__all svg { transition: transform .2s var(--ght-ease); }
.ght .cz__all:hover svg { transform: translateX(4px); }
.ght.t-night .cz__all { color: var(--ght-gold); }

.ght .cz__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ght.cz--small .cz__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ght .cz__tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--ght-ink); color: #fff; text-decoration: none; isolation: isolate; }
.ght.cz--small .cz__tile { aspect-ratio: 4 / 3; border-radius: var(--ght-r-l); }
.ght .cz__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease); }
.ght .cz__tile:hover img { transform: scale(1.04); }
.ght .cz__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 20, 30, .88) 0%, rgba(6, 20, 30, .35) 38%, rgba(6, 20, 30, 0) 62%); }
.ght .cz__tx { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 26px); }
.ght .cz__name { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.ght.cz--small .cz__name { font-size: clamp(18px, 1.5vw, 22px); }
.ght .cz__n { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.ght.cz--small .cz__n { font-size: 13px; }
.ght .cz__n svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ght-ease); }
.ght .cz__tile:hover .cz__n svg { transform: translateX(4px); }
.ght .cz__tile:focus-visible { outline: 3px solid var(--ght-blue); outline-offset: 3px; }

@media (max-width: 960px) {
	.ght .cz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ght.cz--small .cz__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.ght .cz__grid { gap: 10px; }
	.ght .cz__tile { aspect-ratio: 3 / 4; border-radius: var(--ght-r-l); }
	.ght .cz__name { font-size: 20px; }
	.ght .cz__n { font-size: 13px; }
	/* countries: one row that slides sideways */
	.ght.cz--small .cz__grid { display: flex; margin: 0 calc(var(--ght-pad) * -1); padding: 0 var(--ght-pad) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ght-pad); scrollbar-width: none; }
	.ght.cz--small .cz__grid::-webkit-scrollbar { display: none; }
	.ght.cz--small .cz__grid li { flex: none; width: 62%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
	.ght .cz__tile img, .ght .cz__n svg { transition: none; }
}

/* elementor-post-3808 */
.elementor-3808 .elementor-element.elementor-element-48302cc{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3808 .elementor-element.elementor-element-d158831{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3808 .elementor-element.elementor-element-a1dec6e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3808 .elementor-element.elementor-element-5db68c4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3808 .elementor-element.elementor-element-33ac666{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
/* base-desktop */
.elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-list-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-list-item-base{display:flex;flex-direction:row;gap:8px;}.elementor .e-list-item-marker-base{width:auto;height:1lh;display:flex;align-items:center;}.elementor .e-list-item-content-base{flex:1 1 auto;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-icon-open-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{padding:20px;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-content:start;align-items:flex-start;}.elementor .e-form-base .e-form-checkbox-row{padding:0px;gap:8px;align-items:center;}.elementor .e-form-success-message-base{font-size:12px;color:#2F532E;text-align:center;padding:12px;background-color:#D4E9D6;display:none;}.elementor .e-form-error-message-base{font-size:12px;color:#870000;text-align:center;padding:12px;background-color:#ffdede;display:none;}.elementor .e-carousel-base{position:relative;padding:0px;display:grid;grid-template-columns:repeat(1, 1fr);}.elementor .e-carousel-viewport-base{overflow:hidden;padding:0px;display:block;grid-column:1;grid-row:1;}.elementor .e-carousel-container-base{padding:0px;display:flex;}.elementor .e-carousel-slide-base{min-width:0px;position:relative;display:block;}.elementor .e-carousel-arrow-prev-base{width:auto;z-index:1;color:rgba(238, 238, 238, 0.9);cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:0px;margin-inline-end:auto;border-style:none;background-color:transparent;display:flex;grid-column:1 / 2;grid-row:1 / 2;justify-content:center;align-items:center;align-self:center;}.elementor .e-carousel-arrow-prev-base:focus{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-prev-base:hover,.elementor .e-carousel-arrow-prev-base:focus-visible{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-prev-base:focus-visible{outline-width:2px;outline-color:rgba(238, 238, 238, 0.9);outline-style:solid;outline-offset:2px;}.elementor .e-carousel-arrow-prev-base.e--disabled{cursor:default;opacity:30%;}.elementor .e-carousel-arrow-next-base{width:auto;z-index:1;color:rgba(238, 238, 238, 0.9);cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:auto;margin-inline-end:0px;border-style:none;background-color:transparent;display:flex;grid-column:1 / 2;grid-row:1 / 2;justify-content:center;align-items:center;align-self:center;}.elementor .e-carousel-arrow-next-base:focus{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-next-base:hover,.elementor .e-carousel-arrow-next-base:focus-visible{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-next-base:focus-visible{outline-width:2px;outline-color:rgba(238, 238, 238, 0.9);outline-style:solid;outline-offset:2px;}.elementor .e-carousel-arrow-next-base.e--disabled{cursor:default;opacity:30%;}.elementor .e-carousel-pagination-base{padding-block-start:16px;padding-block-end:16px;padding-inline-start:0px;padding-inline-end:0px;display:flex;gap:12px;grid-column:1;grid-row:2;justify-content:center;align-items:center;}.elementor .e-carousel-dot-base{width:6px;height:6px;min-width:6px;min-height:6px;cursor:pointer;padding-block-start:0px;padding-block-end:0px;padding-inline-start:0px;padding-inline-end:0px;border-radius:50%;border-width:0px;border-style:none;background-color:rgba(0, 0, 0, 0.2);display:inline-flex;appearance:none;}.elementor .e-carousel-dot-base:focus{background-color:rgba(0, 0, 0, 0.2);}.elementor .e-carousel-dot-base:hover,.elementor .e-carousel-dot-base:focus-visible{background-color:#000;}.elementor .e-carousel-dot-base.e--selected{background-color:#000;}.elementor .e-carousel-dot-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-carousel-autoplay-controls-base{width:auto;margin-inline-start:auto;margin-inline-end:auto;display:flex;grid-column:1;grid-row:3;align-items:center;}.elementor .e-carousel-autoplay-play-base{width:auto;color:#000;cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;border-style:none;background-color:transparent;display:flex;justify-content:center;align-items:center;}.elementor .e-carousel-autoplay-play-base:focus{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-play-base:hover,.elementor .e-carousel-autoplay-play-base:focus-visible{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-play-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-carousel-autoplay-pause-base{width:auto;color:#000;cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;border-style:none;background-color:transparent;display:flex;justify-content:center;align-items:center;}.elementor .e-carousel-autoplay-pause-base:focus{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-pause-base:hover,.elementor .e-carousel-autoplay-pause-base:focus-visible{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-pause-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-collection-loop-base{display:block;}.elementor .e-collection-loop-layout-base{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;}.elementor .e-pagination-base{padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;}.elementor .e-pagination-prev-base{width:auto;font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-pagination-next-base{width:auto;font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-collection-loop-empty-state-base{display:flex;justify-content:center;}.elementor .e-google-maps-base{width:100%;border-style:none;display:block;}
/* base-mobile */
@media (max-width:767px) {
@media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}}
}
/* ght-compat */
/* ==========================================================================
 * GHH Toolkit — what the old theme (WoodMart) gave the Sky plugins.
 * Loaded on every page. SkyDonate's stylesheets were written on top of
 * WoodMart, so without these its forms and pop-ups fall apart under Hello:
 *
 * 1. WoodMart made every button position:relative, inline-flex and centred.
 *    SkyDonate draws the chosen amount / Once-Monthly with an absolutely
 *    placed ::after/::before; without a positioned button it covers the
 *    whole pop-up.
 * 2. SkyDonate draws its close ✕ and video ▶ as glyphs of WoodMart's icon
 *    font ("woodmart-font", \f112 / \f101). Nothing of WoodMart is used: the
 *    same three marks are drawn here as icons in the text colour, 1em square.
 *
 * :where() keeps the button rule at zero specificity, so any real style wins.
 * ======================================================================== */

.donation-card .donation-image .play-button i:before,
button.lity-close:before,
.quick-modal-close:after {
	content: "" !important;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	font-family: inherit !important;
	background-color: currentColor;
	-webkit-mask: var(--ght-ico) center / contain no-repeat;
	mask: var(--ght-ico) center / contain no-repeat;
}
.donation-card .donation-image .play-button i:before { --ght-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E"); }
button.lity-close:before { display: block; margin: auto; }
button.lity-close:before, .quick-modal-close:after { --ght-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

/* 3. WoodMart padded every page section; Elementor's default is 10px, so older sections ran to
      the screen edge. Top-level containers get the GHH side gutter by default (containers that set
      their own padding, like the toolkit's sections, keep theirs). */
body.ght-site .e-con.e-parent { --container-default-padding-left: var(--ght-pad, 16px); --container-default-padding-right: var(--ght-pad, 16px); }

:where(button, [type="submit"], [type="button"], .button) { position: relative; }
:where(.donation-form-wrapper, .quick-modal, .skydonate-quick-donation-widget, [class*="skydonate"], [class*="skd-"], .donation-card) :where(button, [type="submit"], [type="button"], .button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

/* While the basket is open SkyDonate stops the page scrolling with `body { overflow: hidden }`. That
   makes <body> a scroll box, and the sticky header then measures from it instead of the screen: it
   dropped 32px when signed in (the admin bar's margin counted twice) and left the screen when the page
   was scrolled (user: "header shows big when opening the mini basket"). Lock the page on <html>
   instead, which is the screen itself. (Moved from ght-minicart.css in 1.53.6.) */
body.ght-site.skd-mc-locked { overflow: visible; overflow-x: clip; }
html:has(body.ght-site.skd-mc-locked) { overflow: hidden; }