/* ght-film */
/* GHH Film Hero — GHH's own footage full screen, words and the donation bar at the bottom left. */
.ght.film { --ght-shade: 6, 20, 30; position: relative; height: calc(100svh - var(--ght-hdr) - var(--wp-admin--admin-bar--height, 0px)); min-height: 660px; overflow: hidden; background: var(--ght-night); color: #fff; }
.ght .film__frame { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
/* the still paints first; the loop (loaded after the page, film.js) fades in over it once playing */
.ght .film__still, .ght .film__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ght .film__video { opacity: 0; transition: opacity .6s ease; }
.ght .film__video.is-on { opacity: 1; }
.ght .film__shade { position: absolute; inset: 0; background:
	linear-gradient(0deg, rgba(6, 20, 30, .96) 0%, rgba(6, 20, 30, .55) 38%, rgba(6, 20, 30, 0) 65%),
	linear-gradient(90deg, rgba(6, 20, 30, .6) 0%, rgba(6, 20, 30, 0) 55%); }
.ght .film__in { position: absolute; left: 0; right: 0; bottom: 0; max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad) clamp(28px, 4vw, 52px); }
.ght .film__where { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.ght .film__h { margin: 0; font-size: clamp(56px, 8.4vw, 136px); font-weight: 900; line-height: .9; letter-spacing: -.045em; color: #fff; }
.ght .film__h em { font-style: italic; font-weight: 800; color: var(--ght-gold); }
.ght .film__lead { max-width: 52ch; margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255, 255, 255, .84); }
.ght .film__give { margin-top: 30px; }

.ght .film__watch { position: absolute; right: var(--ght-pad); bottom: clamp(36px, 5vw, 64px); display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background-color: transparent; color: #fff; text-align: left; font-weight: 700; cursor: pointer; }
.ght .film__watch:hover, .ght .film__watch:focus { background-color: transparent; color: #fff; }
.ght .film__watch small { display: block; font-weight: 500; color: rgba(255, 255, 255, .7); }
.ght .film__play { display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s var(--ght-ease), background-color .3s; }
.ght .film__play svg { width: 24px; height: 24px; margin-left: 4px; fill: #fff; stroke: none; }
.ght .film__watch:hover .film__play { transform: scale(1.08); background-color: var(--ght-blue); }

/* the full film */
.ght .film__modal { position: fixed; z-index: 1000001; inset: 0; display: grid; place-items: center; padding: 4vw; background: rgba(3, 10, 16, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ght .film__modal[hidden] { display: none; }
.ght .film__full { width: min(1280px, 100%); max-height: 86vh; border-radius: 16px; background: #000; }
.ght .film__x, .ght .film__x:hover, .ght .film__x:focus { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }

/* below 1500px the donation bar reaches the right side: the film button moves to the top */
@media (max-width: 1499px) {
	.ght .film__watch { top: clamp(28px, 4vw, 48px); bottom: auto; }
}
@media (max-width: 1180px) {
	.ght .film__watch { display: none; }
}
/* phones: the film first, words and form under it */
@media (max-width: 760px) {
	.ght.film { height: auto; min-height: 0; }
	.ght .film__frame { position: relative; aspect-ratio: 4 / 5; }
	.ght .film__shade { background: linear-gradient(0deg, rgba(6, 20, 30, 1) 0%, rgba(6, 20, 30, .3) 40%, rgba(6, 20, 30, 0) 65%), linear-gradient(180deg, rgba(6, 20, 30, .6), rgba(6, 20, 30, 0) 20%); }
	.ght .film__in { position: relative; margin-top: -150px; padding-bottom: 34px; }
	.ght .film__h { font-size: 54px; }
	.ght .film__lead { font-size: 16px; }
	.ght .film__give { margin-top: 24px; }
}

/* 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-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 { 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; }
}

/* ght-pmap */
/* GHH Photo Map — light map, real photos as pins, a card for the chosen country. */
.ght.pmap { padding: clamp(72px, 9vw, 128px) 0; background: #fff; }
.ght .pmap__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(28px, 3vw, 44px); }
.ght .pmap__head .h2 { max-width: 16ch; }
/* desktop: the map, and beside it a panel with the chosen country (card, counter, next / previous) */
.ght .pmap__board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 380px); overflow: hidden; border: 1px solid var(--ght-line); border-radius: 32px; background: #fff; }
/* the map is a size container: photos and names scale with it (cqw), so neighbours keep their distance on any screen */
.ght .pmap__map { position: relative; align-self: stretch; container-type: inline-size; background: linear-gradient(180deg, #E4F1F9, #D5E9F5); }
.ght .pmap__svg { display: block; width: 100%; height: auto; }
.ght .pmap__side { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.ght .pmap__svg .land { fill: #fff; stroke: #E3ECF2; stroke-width: .6; }
.ght .pmap__svg .ghh { fill: #BCE2F5; stroke: #fff; stroke-width: .8; cursor: pointer; transition: fill .4s; }
.ght .pmap__svg .ghh.is-on { fill: #F9D58E; }
.ght .pmap__svg .route { fill: none; stroke: var(--ght-blue); stroke-width: 1.4; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .35; transition: opacity .3s, stroke-width .3s; }
.ght .pmap__svg .route.is-on { opacity: 1; stroke-width: 2.4; stroke-dasharray: none; stroke: var(--ght-gold); }
.ght .pmap__svg .hub { fill: var(--ght-gold); stroke: #fff; stroke-width: 3; }
.ght .pmap__svg .hubtx { font: 700 15px var(--ght-f); fill: var(--ght-ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.ght .pmap__svg .ldr { stroke: var(--ght-ink); stroke-width: 1.2; opacity: .4; }
.ght .pmap__svg .spot { fill: var(--ght-ink); stroke: #fff; stroke-width: 2; }

/* pins: round photos, placed in the map's own coordinates */
.ght .pmap__pins { position: absolute; inset: 0; pointer-events: none; }
.ght .pin { --s: clamp(28px, 4.6cqw, 58px); }
.ght .pin, .ght .pin:hover, .ght .pin:focus { position: absolute; z-index: 1; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding: 0; border: 3px solid #fff; border-radius: 50%; background-color: #fff; box-shadow: 0 10px 24px -8px rgba(11, 38, 56, .45); cursor: pointer; pointer-events: auto; transition: transform .35s var(--ght-ease), border-color .3s, box-shadow .3s; }
.ght .pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ght .pin span { position: absolute; left: 50%; top: calc(100% + 6px); padding: .23em .7em; border-radius: 999px; background: #fff; color: var(--ght-ink); font-size: clamp(11px, 1.05cqw, 13px); font-weight: 700; line-height: 1.4; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 4px 12px -6px rgba(11, 38, 56, .35); }
.ght .pin:hover { z-index: 3; transform: scale(1.12); }
.ght .pin.is-on { z-index: 4; transform: scale(1.42); border-color: var(--ght-gold); box-shadow: 0 0 0 5px rgba(244, 165, 30, .35), 0 16px 34px -10px rgba(11, 38, 56, .55); }
.ght .pin.is-on span { background: var(--ght-gold); transform: translateX(-50%) scale(.72); transform-origin: top center; }
.ght .pin:focus-visible { outline: 3px solid var(--ght-blue); outline-offset: 3px; }
/* a smaller map (tablets, small laptops): names only on the chosen country, the card names it too */
@container (max-width: 560px) {
	.ght .pin span { display: none; }
	.ght .pin.is-on span { display: block; }
}

/* the card: the country's photo large, then what we do there and the Give button */
.ght .pcard { display: flex; flex: 1; flex-direction: column; gap: 16px; }
/* the photo takes whatever height the panel has to spare (the map sets the panel's height) */
.ght .pcard__img { position: relative; flex: 1 1 auto; min-height: 200px; overflow: hidden; border-radius: 20px; background: var(--ght-mist); }
.ght .pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ght .pcard__body { display: flex; flex-direction: column; align-items: flex-start; padding: 0 4px; }
.ght .pcard__meta { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); }
.ght .pcard__name { margin-top: 4px; font-size: clamp(28px, 2.4vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.ght .pcard__what { margin: 10px 0 18px; font-size: 15px; line-height: 1.55; color: var(--ght-mute); }
.ght .pcard__body .btn { min-height: 46px; }
.ght .pcard__body .btn[hidden] { display: none; }
/* next / previous, the counter, and a bar that fills while the next country is on its way */
.ght .pcard__nav { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px 0; border-top: 1px solid var(--ght-line); }
.ght .pcard__go, .ght .pcard__go:hover, .ght .pcard__go:focus { width: 40px; height: 40px; border: 1px solid var(--ght-line); background: #fff; color: var(--ght-ink); }
.ght .pcard__go:hover { background-color: var(--ght-mist); }
.ght .pcard__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ght .pcard__nav .pcard__go:last-child { grid-column: 4; }
.ght .pcard__count { font-size: 14px; font-weight: 700; color: var(--ght-ink); font-variant-numeric: tabular-nums; }
.ght .pcard__bar { height: 3px; overflow: hidden; border-radius: 999px; background: var(--ght-mist); }
.ght .pcard__bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ght-gold); transform: scaleX(0); transform-origin: left; }
.ght .pcard__bar i.is-run { animation: ght-pmapbar linear both; }
@keyframes ght-pmapbar { to { transform: scaleX(1); } }

/* the names, to tap (tablets and phones, where the photos on the map are small) */
.ght .pmap__chips { display: none; }
.ght .pmap__chip, .ght .pmap__chip:hover, .ght .pmap__chip:focus { flex: none; min-height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; color: var(--ght-ink); font: 600 14px/1 var(--ght-ui); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.ght .pmap__chip[aria-pressed="true"] { border-color: var(--ght-gold); background: var(--ght-gold); color: var(--ght-ink); }
.ght .pcard.is-in .pcard__img, .ght .pcard.is-in .pcard__body > * { animation: ght-placein .5s var(--ght-ease) both; }
.ght .pcard.is-in .pcard__name { animation-delay: .04s; }
.ght .pcard.is-in .pcard__what { animation-delay: .08s; }
@keyframes ght-placein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* tablets and phones: the map full width, the names to tap under it, then the card (photo beside the words) */
@media (max-width: 1023px) {
	.ght .pmap__board { grid-template-columns: minmax(0, 1fr); overflow: visible; border: 0; border-radius: 0; background: none; }
	.ght .pmap__map { overflow: hidden; border-radius: 24px; }
	.ght .pmap__chips { display: flex; gap: 8px; margin: 14px calc(-1 * var(--ght-pad)) 0; padding: 2px var(--ght-pad) 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
	.ght .pmap__chips::-webkit-scrollbar { display: none; }
	.ght .pmap__chip { scroll-snap-align: center; }
	.ght .pmap__side { gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--ght-line); border-radius: 24px; background: #fff; }
	/* one height for every country (pmap.js sets it): the photo stays square at the top */
	.ght .pcard { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); align-items: start; gap: 16px; touch-action: pan-y; }
	.ght .pcard__img { aspect-ratio: 1; min-height: 0; border-radius: 16px; }
	.ght .pcard__body { padding: 2px 0 0; }
	.ght .pcard__what { margin: 8px 0 14px; }
}
@media (max-width: 760px) {
	.ght .pin, .ght .pin:hover, .ght .pin:focus { --s: 30px; border-width: 2px; }
	.ght .pin.is-on { transform: scale(1.3); box-shadow: 0 0 0 3px rgba(244, 165, 30, .4), 0 10px 20px -8px rgba(11, 38, 56, .5); }
	.ght .pmap__svg .hubtx { font-size: 20px; }
	/* the chosen country is named on the map too */
	.ght .pin.is-on span { display: block; font-size: 11px; transform: translateX(-50%) scale(.78); }
	.ght .pcard__name { font-size: 26px; }
	.ght .pcard__what { font-size: 14.5px; }
	/* slimmer controls on phones (user: "buttons are fat on mobile") */
	.ght .pcard__body .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
	.ght .pcard__go, .ght .pcard__go:hover, .ght .pcard__go:focus { width: 34px; height: 34px; }
	.ght .pcard__go svg { width: 18px; height: 18px; }
	.ght .pcard__nav { gap: 10px; padding-top: 10px; }
	.ght .pmap__chip, .ght .pmap__chip:hover, .ght .pmap__chip:focus { min-height: 32px; padding: 0 12px; font-size: 13px; }
	.ght .pmap__side { padding: 14px; }
}

/* ght-ways */
/* GHH Ways to Give — an editorial list; a photo follows the pointer on desktop. */
.ght.ways { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--ght-line); background: #fff; }
.ght .ways__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.ght .ways__list { border-top: 1px solid var(--ght-line); }
/* every row is its own grid: the action column has a fixed width so the lines up the list align */
.ght .way { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 10em; align-items: center; gap: 24px; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--ght-line); text-decoration: none; transition: padding .35s var(--ght-ease), color .2s; }
.ght .way__thumb { display: none; }
.ght .way__n { font-size: clamp(30px, 4vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.035em; transition: color .25s; }
.ght .way__t { font-size: 17px; color: var(--ght-mute); transition: opacity .3s; }
.ght .way__go { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background-color: var(--ght-mist); font-weight: 700; color: var(--ght-blue-d); transition: background-color .25s, color .25s; }
.ght a.way:hover { padding-left: 18px; }
.ght a.way:hover .way__n { color: var(--ght-blue); }
.ght a.way:hover .way__go { background-color: var(--ght-blue); color: #fff; }
.ght .ways__list.is-hover .way__t { opacity: .12; }
.ght .ways__list.is-hover li:not(:hover) .way__n { color: #B4C3CD; }
.ght .ways__float { position: fixed; z-index: 40; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-3deg); transition: opacity .3s var(--ght-ease), transform .4s var(--ght-ease); box-shadow: 0 40px 80px -30px rgba(6, 20, 30, .5); }
.ght .ways__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.ght .ways__float img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
	.ght .way { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; }
	.ght .way__thumb { display: block; grid-row: span 2; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; }
	.ght .way__n { font-size: 26px; }
	.ght .way__t { font-size: 14px; }
	.ght .way__go { display: none; }
	.ght a.way:hover { padding-left: 0; }
	.ght .ways__float { display: none; }
}

/* ght-daily */
/* GHH Daily Giving — the gold band, the ten nights filling in. */
.ght.daily { padding: clamp(72px, 9vw, 128px) 0; background: var(--ght-gold); }
.ght .daily__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; }
.ght .daily__h { margin: 0; font-size: clamp(56px, 8vw, 128px); font-weight: 900; line-height: .88; letter-spacing: -.045em; color: var(--ght-ink); }
.ght .daily__lead { max-width: 46ch; margin-top: 24px; font-size: 19px; color: rgba(11, 38, 56, .82); }
.ght .daily__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0; }
.ght .daily__opts li { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .45); }
.ght .daily__opts b { display: block; font-size: 17px; }
.ght .daily__opts span { font-size: 14px; color: rgba(11, 38, 56, .75); }
.ght .cal { padding: 28px; border-radius: 26px; background: var(--ght-ink); color: #fff; box-shadow: 0 50px 80px -30px rgba(11, 38, 56, .6); transform: rotate(-2deg); }
.ght .cal__h { font-size: 20px; font-weight: 800; }
.ght .cal__nights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.ght .cal__nights li { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; font-size: 20px; font-weight: 800; color: rgba(255, 255, 255, .5); transition: all .3s var(--ght-ease); }
.ght .cal__nights li.is-given { border-color: var(--ght-gold); background: var(--ght-gold); color: var(--ght-ink); }
.ght .cal__nights li.is-odd::after { content: "★"; position: absolute; top: 5px; right: 7px; font-size: 11px; line-height: 1; color: var(--ght-gold); }
.ght .cal__nights li.is-odd.is-given::after { color: var(--ght-ink); }
.ght .cal__sum { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.ght .cal__sum b { color: var(--ght-gold); }
/* no script (or the editor): every night given */
.ght.daily:not([data-ght-init]) .cal__nights li { border-color: var(--ght-gold); background: var(--ght-gold); color: var(--ght-ink); }

@media (max-width: 1180px) {
	.ght .daily__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.ght .daily__opts { grid-template-columns: minmax(0, 1fr); }
	.ght .cal { transform: none; }
}

/* ght-films */
/* GHH Field Films — a sideways rail of the app's reels. */
.ght.films { padding: clamp(80px, 10vw, 140px) 0; background: var(--ght-night); color: #fff; }
.ght .films__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; margin-bottom: 40px; }
.ght .films__head .more { margin-left: auto; }
.ght .films__rail { display: flex; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; list-style: none; }
.ght .films__rail::-webkit-scrollbar { display: none; }
.ght .films__rail li { flex: none; scroll-snap-align: start; }
.ght .fl { position: relative; display: block; width: 250px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--ght-ink-2); color: #fff; text-decoration: none; }
.ght .fl img, .ght .fl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease), opacity .4s; }
.ght .fl video { opacity: 0; }
.ght .fl.is-playing video { opacity: 1; }
.ght .fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 55%); }
.ght .fl:hover img { transform: scale(1.05); }
.ght .fl__len { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .5); font-size: 12px; font-weight: 700; }
.ght .fl__t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.ght .fl__t small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .65); }

/* the app plugin's GHH Reels in place of the rail: its heading and "Watch more" are this section's own,
   its background is the section's. Inside .wrap its rail starts in line with the heading and runs off
   the right edge (as the app widget is designed). */
.ght .films__app .ghhr { padding: 0; background: transparent; }
.ght .films__app .ghhr-head, .ght .films__app .ghhr-watchmore { display: none; }
.ght .films__app .ghhr-rail { margin-top: 0; }
.ght .films__app .ghhr-controls { justify-content: flex-end; }

@media (max-width: 760px) {
	.ght .fl { width: 200px; }
}

/* ght-tools */
/* GHH Prayer Times and App — two cards. */
.ght.tools { padding: 0 0 clamp(80px, 9vw, 120px); background: #fff; }
.ght .tools__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.ght.tools--one .tools__in { grid-template-columns: minmax(0, 1fr); }
.ght .tool { padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; }
.ght .tool--prayer { background: var(--ght-btn); color: #fff; }
.ght .tool--app { background: var(--ght-ink); color: rgba(255, 255, 255, .75); }
.ght .tool__h { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: #fff; }
.ght .tool--app p { margin-top: 12px; }
.ght .tool__search { margin-top: 24px; }
/* the cities in one line that scrolls sideways (no scrollbar), fading out at the right edge */
/* the row runs to the card's own edges (out through its padding), so chips slide away under the
   card's edge instead of being cut inside it; the first chip still lines up with the text */
.ght .tool--prayer { --tp: clamp(28px, 3.4vw, 48px); overflow: hidden; }
.ght .tool__chips { display: flex; flex-wrap: nowrap; gap: 8px; margin: 16px calc(-1 * var(--tp)) 0; padding: 0 var(--tp); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 var(--tp); -webkit-overflow-scrolling: touch; }
.ght .tool__chips::-webkit-scrollbar { display: none; }
.ght .tool__chips a { flex: none; scroll-snap-align: start; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .16); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
.ght .tool__chips a:hover { background: #fff; color: var(--ght-blue-d); }
.ght .tool__chips a.is-on { background: #fff; color: var(--ght-blue-d); }

/* today's times: city and Hijri date, the next prayer with its countdown, the five times */
.ght .pt { margin-top: 22px; padding: 18px; border-radius: 22px; background: rgba(0, 0, 0, .14); transition: opacity .2s; }
.ght .pt[hidden] { display: none; }
.ght .pt.is-busy { opacity: .6; }
.ght .pt__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ght .pt__where { margin: 0; font-size: 14.5px; color: #fff; }
.ght .pt__where b { font-weight: 700; color: #fff; }
/* "Use my exact location": a labelled pill (the place shown first is only the visitor's area) */
.ght .pt__loc, .ght .pt__loc:hover, .ght .pt__loc:focus { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .18); color: #fff; font: 600 13px/1 var(--ght-ui); text-transform: none; letter-spacing: 0; cursor: pointer; }
.ght .pt__loc:hover { background: #fff; color: var(--ght-blue-d); }
.ght .pt__loc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* exact location in use: the button has done its job */
.ght .pt.is-exact .pt__loc { display: none; }
.ght .pt__approx { display: none; margin-left: 5px; font-size: 12.5px; color: #fff; }
.ght .pt.is-approx .pt__approx { display: inline; }
.ght .pt__next { margin: 6px 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.ght .pt__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ght .pt__times li { display: grid; gap: 4px; margin: 0; padding: 10px 6px; border-radius: 14px; background: rgba(0, 0, 0, .14); text-align: center; transition: background-color .3s, color .3s; }
.ght .pt__times span { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.ght .pt__times b { font-size: 18px; font-weight: 800; color: #fff; }
/* today's times have their own location button: the search's one would be a second */
.ght .tool--prayer[data-api] .sky-prayer-geo-btn { display: none; }
.ght .pt__times li.is-next { background: #fff; }
.ght .pt__times li.is-next span { color: var(--ght-blue-d); }
.ght .pt__times li.is-next b { color: var(--ght-ink); }
.ght .pt__full { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; }
.ght .pt__full[hidden] { display: none; }
.ght .pt__full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ght .pt__full:hover svg { transform: translateX(3px); }

/* the app: words and the official-style store badges, the phones beside them */
.ght .tool--app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.ght .tool--app.has-phones { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 0; }
/* the phones large, running off the card's right and bottom edges */
.ght .tool__phones { align-self: end; width: 125%; max-width: none; height: auto; margin: -24px calc(-1 * clamp(28px, 3.4vw, 48px)) calc(-1 * clamp(28px, 3.4vw, 48px)) -4%; }
.ght .tool__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px !important; }
.ght .store, .ght .store:focus { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; background: #000; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.1; text-decoration: none; }
.ght .store svg { flex: none; width: 24px; height: 24px; }
.ght .store span { display: grid; }
.ght .store small { font-size: 10.5px; font-weight: 500; opacity: .8; }
.ght .store:hover { border-color: #fff; background: #000; color: #fff; }

/* Sky Prayer's city search, dressed as a white pill on the blue card */
.ght .tool__search .sky-prayer-search-container { max-width: none; margin: 0; }
.ght .tool__search .sky-prayer-search-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.ght.tools .tool__search .sky-prayer-search-container .sky-prayer-search-input-wrap { position: relative !important; flex: 1; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
/* !important: Sky Prayer's own city-search.css loads here too (1.49.2) and would undo these */
.ght.tools .tool__search .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input { width: 100%; height: 56px !important; min-height: 56px; margin: 0 !important; padding: 0 22px 0 52px !important; border: 0 !important; border-radius: 999px !important; background: #fff !important; color: var(--ght-ink); font-family: var(--ght-f); font-size: 17px !important; box-shadow: none !important; outline: none; }
.ght.tools .tool__search .sky-prayer-search-container .sky-prayer-search-icon { position: absolute !important; left: 20px !important; right: auto !important; top: 50% !important; width: 20px; height: 20px; margin: 0 !important; color: var(--ght-mute); transform: translateY(-50%) !important; pointer-events: none; }
.ght .tool__search .sky-prayer-geo-btn, .ght .tool__search .sky-prayer-settings-btn { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.ght .tool__search .sky-prayer-geo-btn:hover, .ght .tool__search .sky-prayer-settings-btn:hover { background-color: var(--ght-gold); color: var(--ght-ink); }
.ght .tool__search .sky-prayer-geo-btn svg, .ght .tool__search .sky-prayer-settings-btn svg { width: 22px; height: 22px; }
.ght .tool__search .sky-prayer-search-dropdown { color: var(--ght-ink); }

@media (max-width: 1180px) {
	.ght .tools__in { grid-template-columns: minmax(0, 1fr); }
	.ght .tool__phones { width: 100%; max-width: 440px; margin-left: auto; }
}
@media (max-width: 640px) {
	.ght .pt { padding: 14px; }
	/* the place on its own line, the location button under it */
	.ght .pt__top { flex-wrap: wrap; gap: 8px; }
	.ght .pt__times { gap: 4px; }
	.ght .pt__times li { padding: 8px 2px; border-radius: 12px; }
	.ght .pt__times span { font-size: 11px; }
	.ght .pt__times b { font-size: 15px; }
	/* "Your giving and your salah, in one app" on two lines */
	.ght .tool--app .tool__h { font-size: 24px; letter-spacing: -.02em; }
	/* the phones under the words, cropped by the card's bottom edge */
	.ght .tool--app.has-phones { grid-template-columns: minmax(0, 1fr); }
	.ght .tool__phones { width: 100%; max-width: 320px; margin: 8px auto calc(-1 * clamp(28px, 3.4vw, 48px)); }
	.ght .store, .ght .store:focus { min-height: 46px; padding: 6px 14px 6px 12px; font-size: 15px; }
}

/* sky-prayer-city-search */
/**
 * Sky Prayer City Search and Settings Panel Styles
 *
 * @package Sky_Prayer_Timetable
 */

/* Container */
.sky-prayer-search-container {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.sky-prayer-search-container *,
.sky-prayer-search-container *::before,
.sky-prayer-search-container *::after {
    box-sizing: border-box;
}

/* Search Bar */
.sky-prayer-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
}

/* Search Input Wrapper - the main search field with border */
.sky-prayer-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sky-prayer-search-input-wrap:focus-within {
    /* Focus styles controlled via Elementor */
}

/* Search Icon - inline flex item inside the bordered area */
svg.sky-prayer-search-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #999;
    display: block;
    margin-right: 10px;
}

/* Search Input - override theme styles with high specificity */
.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input,
.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"] {
    flex: 1;
    min-width: 0;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    padding: 12px 8px 12px 0 !important;
    font-size: 15px;
    background: transparent !important;
    background-color: transparent !important;
    color: #333;
    height: auto !important;
    max-width: none;
    width: auto;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input:focus,
.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Selected state - when input has value, show it can be cleared on click */
.sky-prayer-search-input.has-value {
    cursor: pointer;
}

.sky-prayer-search-container .sky-prayer-search-input::placeholder {
    color: #999;
}

.sky-prayer-search-spinner {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #0073aa;
    animation: sky-prayer-spin 1s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sky-prayer-search-spinner svg {
    width: 18px;
    height: 18px;
}

/* Geolocation button - inside the bordered search field */
.sky-prayer-search-input-wrap .sky-prayer-geo-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    color: #666;
    padding: 6px;
    margin: 0;
}

.sky-prayer-search-input-wrap .sky-prayer-geo-btn:hover {
    background: #f0f0f0;
    color: #0073aa;
}

.sky-prayer-search-input-wrap .sky-prayer-geo-btn:active {
    transform: scale(0.95);
}

/* Icon inside geo button - allow free sizing via width/height attributes on SVG */
.sky-prayer-search-input-wrap .sky-prayer-geo-btn svg {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.sky-prayer-search-input-wrap .sky-prayer-geo-btn.loading {
    animation: sky-prayer-pulse 1s ease-in-out infinite;
}

@keyframes sky-prayer-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Settings Button */
.sky-prayer-settings-btn {
    flex-shrink: 0;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s, color 0.2s;
    color: #666;
    margin-left: 8px;
    padding: 12px;
}

.sky-prayer-settings-btn:hover {
    background: #e8e8e8;
    color: #0073aa;
}

.sky-prayer-settings-btn:active {
    transform: scale(0.95);
}

/* Icon inside settings button - allow free sizing via width/height attributes on SVG */
.sky-prayer-settings-btn svg {
    display: block;
    flex-shrink: 0;
}

@keyframes sky-prayer-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dropdown */
.sky-prayer-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
}

.sky-prayer-search-results {
    list-style: none;
    margin: 0;
    padding: 4px;
}

.sky-prayer-search-result {
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background-color 0.15s;
}

.sky-prayer-search-result:hover,
.sky-prayer-search-result.active {
    background: #f0f6fc;
}

.sky-prayer-result-location {
    flex: 1;
    color: #333;
    font-weight: 500;
}

.sky-prayer-result-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #e7f3ff;
    color: #0073aa;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.sky-prayer-no-results {
    padding: 16px;
    text-align: center;
    color: #666;
}

/* Settings Overlay */
.sky-prayer-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

/* Settings Panel */
.sky-prayer-settings-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
}

.sky-prayer-settings-panel.open {
    right: 0;
}

/* Settings Header */
.sky-prayer-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.sky-prayer-settings-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.sky-prayer-settings-close {
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    color: #666;
    padding: 8px;
}

.sky-prayer-settings-close:hover {
    background: #eee;
    color: #333;
}

/* Icon inside close button - allow free sizing via width/height attributes on SVG */
.sky-prayer-settings-close svg {
    display: block;
    flex-shrink: 0;
}

/* Settings Body */
.sky-prayer-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ── Muslim Pro-style settings popup ─────────────────────────────
   Radio method cards + madhab pills + note + single Apply button.
   Colors consume the parent design system vars with hard fallbacks so
   the popup still looks right on pages that don't load design-system.css. */

.sky-prayer-settings-section-label {
    margin: 4px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spt-muted, #7a8699);
}

.sky-prayer-method-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.sky-prayer-method-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--spt-line, #e6e9f0);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.sky-prayer-method-card:hover {
    border-color: var(--spt-primary, #204C93);
}

.sky-prayer-method-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom radio dot */
.sky-prayer-method-radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid var(--spt-line, #d5dbe6);
    border-radius: 50%;
    position: relative;
    transition: border-color 0.15s;
}

.sky-prayer-method-card input:checked + .sky-prayer-method-radio {
    border-color: var(--spt-primary-dark, #16305c);
}

.sky-prayer-method-card input:checked + .sky-prayer-method-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--spt-primary-dark, #16305c);
}

/* Whole-card selected state (progressive — browsers without :has still
   show the radio dot) */
.sky-prayer-method-card:has(input:checked) {
    border: 2px solid var(--spt-primary, #204C93);
    padding: 13px 15px;
    background: #f4f7fc;
}

.sky-prayer-method-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sky-prayer-method-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--spt-heading, #16305c);
    line-height: 1.3;
}

.sky-prayer-method-desc {
    font-size: 13px;
    color: var(--spt-muted, #7a8699);
    line-height: 1.45;
}

/* Madhab pills */
.sky-prayer-madhab-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.sky-prayer-madhab-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    padding: 14px 10px;
    border: 1px solid var(--spt-line, #e6e9f0);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.sky-prayer-madhab-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sky-prayer-madhab-pill:hover {
    border-color: var(--spt-primary, #204C93);
}

.sky-prayer-madhab-pill:has(input:checked) {
    border: 2px solid var(--spt-primary-dark, #16305c);
    padding: 13px 9px;
    background: #f4f7fc;
}

.sky-prayer-madhab-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--spt-primary, #204C93);
}

.sky-prayer-madhab-desc {
    font-size: 12px;
    color: var(--spt-muted, #7a8699);
    line-height: 1.35;
}

/* Note box */
.sky-prayer-settings-note {
    padding: 14px 16px;
    border-radius: 14px;
    background: #f0f4fb;
    border: 1px solid var(--spt-line-soft, #e3eaf5);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--spt-body, #3a465c);
}

/* Settings Footer */
.sky-prayer-settings-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--spt-line-soft, #eef1f6);
    background: #fff;
}

.sky-prayer-settings-save {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    background: var(--spt-hero-end, #1a3f7d);
    color: #fff;
    transition: background-color 0.2s, transform 0.1s;
}

.sky-prayer-settings-save:hover {
    background: var(--spt-primary-dark, #16305c);
}

.sky-prayer-settings-save:active {
    transform: scale(0.99);
}

/* Toast Notification */
.sky-prayer-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10002;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sky-prayer-toast.success {
    background: #00a32a;
    color: #fff;
}

.sky-prayer-toast.error {
    background: #d63638;
    color: #fff;
}

/* Dark Theme */
.sky-prayer-search-dark .sky-prayer-search-bar {
    background: #2c2c2c;
}

.sky-prayer-search-dark .sky-prayer-search-input {
    color: #fff;
}

.sky-prayer-search-dark .sky-prayer-search-input::placeholder {
    color: #888;
}

.sky-prayer-search-dark .sky-prayer-search-icon {
    color: #888;
}

.sky-prayer-search-dark .sky-prayer-settings-btn {
    background: #3c3c3c;
    color: #aaa;
}

.sky-prayer-search-dark .sky-prayer-settings-btn:hover {
    background: #4c4c4c;
    color: #0073aa;
}

.sky-prayer-search-dark .sky-prayer-search-input-wrap .sky-prayer-geo-btn {
    color: #aaa;
}

.sky-prayer-search-dark .sky-prayer-search-input-wrap .sky-prayer-geo-btn:hover {
    background: #3c3c3c;
    color: #0073aa;
}

.sky-prayer-search-dark .sky-prayer-search-dropdown {
    background: #2c2c2c;
    border-color: #444;
}

.sky-prayer-search-dark .sky-prayer-search-result:hover,
.sky-prayer-search-dark .sky-prayer-search-result.active {
    background: #3c3c3c;
}

.sky-prayer-search-dark .sky-prayer-result-location {
    color: #eee;
}

.sky-prayer-search-dark .sky-prayer-no-results {
    color: #aaa;
}

/* Responsive */
@media (max-width: 480px) {
    .sky-prayer-settings-panel {
        width: 100%;
        right: -100%;
    }

    .sky-prayer-settings-panel.open {
        right: 0;
    }

    .sky-prayer-search-bar {
        padding: 2px;
    }

    .sky-prayer-settings-btn {
        padding: 10px;
    }

    .sky-prayer-search-input-wrap {
        padding-left: 10px;
    }

    .sky-prayer-search-input {
        padding: 10px 40px 10px 0;
        font-size: 14px;
    }

    .sky-prayer-search-input-wrap .sky-prayer-geo-btn {
        padding: 6px;
    }

    .sky-prayer-search-spinner {
        right: 38px;
    }
}

/* Body scroll lock when settings open */
body.sky-prayer-settings-open {
    overflow: hidden;
}

/* Scrollbar Styling */
.sky-prayer-search-dropdown::-webkit-scrollbar,
.sky-prayer-settings-body::-webkit-scrollbar {
    width: 6px;
}

.sky-prayer-search-dropdown::-webkit-scrollbar-track,
.sky-prayer-settings-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sky-prayer-search-dropdown::-webkit-scrollbar-thumb,
.sky-prayer-settings-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.sky-prayer-search-dropdown::-webkit-scrollbar-thumb:hover,
.sky-prayer-settings-body::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Animation for panel */
@media (prefers-reduced-motion: reduce) {
    .sky-prayer-settings-panel {
        transition: none;
    }

    .sky-prayer-search-input-wrap .sky-prayer-geo-btn.loading {
        animation: none;
    }

    .sky-prayer-search-spinner {
        animation: none;
    }
}

/* RTL support — flip the search field's directional chrome. */
[dir="rtl"] svg.sky-prayer-search-icon {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input,
[dir="rtl"] .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"] {
    padding: 12px 0 12px 8px !important;
}

[dir="rtl"] .sky-prayer-search-spinner {
    right: auto;
    left: 44px;
}

/* Settings panel slides in from the left on RTL. */
[dir="rtl"] .sky-prayer-settings-panel {
    right: auto;
    left: -400px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease;
}

[dir="rtl"] .sky-prayer-settings-panel.open {
    right: auto;
    left: 0;
}


/* elementor-post-20 */
.elementor-20 .elementor-element.elementor-element-b7c2e83{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-700b43a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-edc061d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-160a6da{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-7335e49{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-b849c10{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-c6b8329{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-990b0b5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-5f620b2{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-b9a87f2{--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-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-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-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{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{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;}
/* 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; }