/* donation-progress */
.donation-progress .progress-info {
    font-size: 20px;
    color: gray;
    font-weight: 400;
    color: #808080;
}

.donation-progress .progress-info .amount {
    font-weight: inherit;
    color: inherit;
}

.donation-progress .progress-info .raised {
    font-size: 30px;
    font-weight: 600;
    color: black;
}

.donation-progress .progress-info .goal {
    color: #808080;
}

.donation-progress .progress-bar-background {
    position: relative;
    border-radius: 15px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.donation-progress:not(.layout2) .progress-bar-background {
    background-color: #d3e1fb;
}

.donation-progress .progress-bar-background .progress-bar {
    width: 0%;
    border-radius: 99px;
    position: relative;
    overflow: visible;
}

.donation-progress:not(.layout2) .progress-bar-background .progress-bar {
    background: linear-gradient(90deg,#acf86c,#4a9d44 93.27%);
    height: 26px;
}

.donation-progress .progress-bar-background .percent {
    color: #000;
    font-weight: 400;
    font-size: 14px;
    margin-left: 8px;
    position: absolute;
    right: -30px;
    transition: 0.2s;
}

.donation-progress .progress-bar-background .progress-bar[data-small="false"] .percent {
    right: 10px;
    color: white;
}

.donation-progress.layout2 .raised-title {
    color: black;
    font-size: 32px;
    margin-bottom: 5px;
    letter-spacing: 0px;
}

.donation-progress.layout2 .target-title {
    display: flex;
    align-items: center;
    color: black;
    font-size: 16px;
    margin-bottom: 10px;
}

.donation-progress.layout2 .target-title small {
    font-size: 20%;
    margin: 5px 12px;
}

.donation-progress.layout2 .target-title>span {
    margin-right: 5px;
}

.donation-progress.layout2 .target-title .percent {
    margin-left: auto;
    margin-right: 0;
}

.donation-progress.layout2 .target-title,
.donation-progress.layout2 .target-title * {
    color: #6b6b6b;
    font-weight: 700 !important;
}

.donation-progress.layout2 .progress-bar-background {
    border: none;
    background-color: #f4f2ea;
}

.donation-progress.layout2 .progress-bar-background .progress-bar {
    background-color: #09a95a;
    height: 24px;
}


.donation-progress.layout2.circle .circle-progress-bar {
    position: relative;
    display: inline-block;
}

.donation-progress.layout2.circle .circle-progress-bar svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.donation-progress.layout2.circle .circle-progress-bar .circle-bg {
    fill: none;
    stroke: #f4f2ea;
    stroke-width: 16;
}

.donation-progress.layout2.circle .circle-progress-bar .circle {
    fill: none;
    stroke: #09a95a;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 314px;
    /* Circumference of the circle (2 * PI * r where r = 50) */
    stroke-dashoffset: 314px;
    /* Initially hide the stroke */
    transition: stroke-dashoffset 0.4s ease;
}

.donation-progress.layout2.circle .circle-progress-bar .percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #666;
}

.donation-progress.layout2.circle .progress-bar-row {
    display: flex;
}

.donation-progress.donation-progress-2 {
    display: flex;
    flex-direction: column-reverse;
}

.donation-progress.donation-progress-2 .progress-bar-background {
    border-radius: 2px;
    overflow: inherit;
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar {
    border-radius: 2px;
    background: var(--accent-color);
    position: relative;
    height: 8px;
    overflow: inherit;
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar .impact {
    position: absolute;
    right: 2px;
    bottom: calc(100% + 8px);
    background-color: black;
    color: white;
    padding: 3px 10px;
    display: flex;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transform: translateX(50%);
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar .impact:after {
    content: '';
    position: absolute;
    top: calc(100% - 6px);
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: black;
    transform: rotate(45deg);
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar:after {
    content: "";
    position: absolute;
    right: 0px;
    top: 1px;
    width: 5px;
    height: 6px;
    background: #a2b4d4;
    box-shadow: 0 0 0 2px white;
    border-radius: 1px;
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="small"] .impact {
    transform: translateX(75%);
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="small"] .impact:after {
    left: 19%;
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="big"] .impact {
    transform: translateX(15%);
}

.donation-progress-2.donation-progress:not(.layout2) .progress-bar-background .progress-bar[data-big="big"] .impact:after {
    left: 78%;
}
/* 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;
}

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

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

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

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

/* ght-fundraisers */
/* GHH Fundraisers (root .ght.frs): white cards with a hairline (DESIGN-SYSTEM.md), three to a row,
   two on tablets, one on phones. The whole card is the link; "Donate →" is its quiet action. */
.ght.frs { font-family: var(--ght-ui); }
.ght .frs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 24px; }
.ght .frs__intro { max-width: 640px; }
.ght .frs__head .h2 { font-size: clamp(32px, 3.4vw, 52px); }
.ght .frs__head .lead { margin-top: 14px; }
.ght .frs__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ght-blue-d); text-decoration: none; }
.ght .frs__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ght .frs__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.ght .frs__stats { display: flex; gap: 12px; margin: 0; }
/* the figure over its label (dt comes first for screen readers; shown under) */
.ght .frs__stats > div { display: flex; flex-direction: column-reverse; min-width: 150px; padding: 14px 18px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; }
.ght .frs__stats dt { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ght-mute); }
.ght .frs__stats dd { margin: 0 0 2px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ght-ink); }

/* sort chips */
.ght .frs__sort { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ght .frs__chip, .ght .frs__chip:focus { min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; color: var(--ght-ink); font: 600 15px/1 var(--ght-ui); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background-color .2s var(--ght-ease), box-shadow .2s var(--ght-ease); }
.ght .frs__chip:hover { background: var(--ght-mist); color: var(--ght-ink); }
.ght .frs__chip[aria-pressed="true"] { border-color: transparent; background: var(--ght-soft); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
.ght .frs__chip:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; }

/* the cards */
.ght .frs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ght .frs__item { display: flex; min-width: 0; margin: 0; }
.ght .frs__item[hidden] { display: none; }
.ght .frs__card { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; color: var(--ght-ink); text-decoration: none; transition: border-color .2s var(--ght-ease); }
.ght .frs__card:hover { border-color: #B9CCD8; color: var(--ght-ink); }
.ght .frs__card:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; }
.ght .frs__pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ght-mist); }
.ght .frs__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ght-ease); }
.ght .frs__card:hover .frs__pic img { transform: scale(1.03); }
.ght .frs__nopic { position: absolute; inset: 0; background: var(--ght-mist); }
.ght .frs__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.ght .frs__by { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ght-mute); }
/* the whole name (user: "show fundraisers in full") */
.ght .frs__name { display: block; margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ght-ink); overflow-wrap: anywhere; }
.ght .frs__card:hover .frs__name { color: var(--ght-blue-d); }
.ght .frs__goal { display: block; margin-top: auto; padding-top: 18px; }
.ght .frs__bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--ght-mist); }
.ght .frs__bar > span { display: block; min-width: 4px; height: 100%; border-radius: inherit; background: var(--ght-blue); }
.ght .frs__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--ght-mute); }
.ght .frs__line b { font-weight: 700; color: var(--ght-ink); }
.ght .frs__pct { flex: none; font-weight: 600; color: var(--ght-ink); }
.ght .frs__pct.is-done { padding: 2px 9px; border-radius: 999px; background: var(--ght-gold); font-size: 13px; }
.ght .frs__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ght-blue-d); }
.ght .frs__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ght-ease); }
.ght .frs__card:hover .frs__go svg { transform: translateX(3px); }
.ght .frs__more { display: flex; justify-content: center; margin-top: 32px; }
.ght .frs__more[hidden] { display: none; }
.ght .frs__more .btn--line { color: var(--ght-ink); }
.ght .frs__empty { font-size: 16px; color: var(--ght-mute); }

@media (max-width: 1024px) {
	.ght .frs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 760px) {
	.ght .frs__head { align-items: flex-start; }
	.ght .frs__stats { width: 100%; }
	.ght .frs__stats > div { flex: 1; min-width: 0; padding: 12px 14px; }
	.ght .frs__stats dd { font-size: 22px; }
	.ght .frs__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ght .frs__body { padding: 16px 18px 18px; }
	.ght .frs__more .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ght .frs__pic img, .ght .frs__go svg { transition: none; }
}

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