/* ght-tabs */
/* GHH Tabs. (Root is .ght.gttab.) */
.ght.gttab .gttab__h { margin: 0 0 16px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.ght.gttab .gttab__list { display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto; border-bottom: 1px solid var(--ght-line); scrollbar-width: none; }
.ght.gttab .gttab__list::-webkit-scrollbar { display: none; }
.ght.gttab .gttab__tab, .ght.gttab .gttab__tab:hover, .ght.gttab .gttab__tab:focus { flex: none; margin: 0 0 -1px; padding: 12px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background-color: transparent; color: var(--ght-mute); font-family: var(--ght-f); font-size: 16px; font-weight: 700; cursor: pointer; }
.ght.gttab .gttab__tab:hover { color: var(--ght-ink); }
.ght.gttab .gttab__tab[aria-selected="true"] { border-bottom-color: var(--ght-blue); color: var(--ght-ink); }
.ght.gttab .gttab__panel { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); }
.ght.gttab .gttab__panel p { margin: 0 0 1em; }
.ght.gttab .gttab__panel a { color: var(--ght-blue-d); }
.ght.gttab .gttab__panel ul { padding-left: 1.2em; list-style: disc; }
.ght.gttab .gttab__panel h2, .ght.gttab .gttab__panel h3, .ght.gttab .gttab__panel h4 { margin: 1.2em 0 .4em; font-weight: 800; letter-spacing: -.015em; color: var(--ght-ink); }

/* ght-title */
/* GHH Title. (Root is .ght.gtt.) */
.ght.gtt { display: grid; gap: 10px; }
.ght.gtt .gtt__sub { font-size: 14px; font-weight: 700; color: var(--ght-blue-d); }
.ght.gtt .gtt__h { margin: 0; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--ght-ink); text-wrap: balance; }
.ght.gtt--s .gtt__h { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -.015em; }
.ght.gtt--m .gtt__h { font-size: clamp(28px, 2.8vw, 40px); }
.ght.gtt--l .gtt__h { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.03em; }
.ght.gtt--xl .gtt__h { font-size: clamp(40px, 5.6vw, 84px); font-weight: 900; line-height: .96; letter-spacing: -.04em; }
.ght.gtt .gtt__h u { text-decoration: none; color: var(--ght-blue); }
.ght.gtt .gtt__h a { color: inherit; text-decoration: none; }
.ght.gtt .gtt__after { max-width: 62ch; font-size: 17px; color: var(--ght-mute); }
.ght.gtt[style*="center"] .gtt__after, .elementor-widget-ght_title [style*="center"] .gtt__after { margin-inline: auto; }

/* recent-donation */
.sky-donations-orders {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sky-donations-orders p {
    margin: 0px;
}

.sky-donations-orders .sky-order {
    color: black;
    margin: 0px;
    text-align: center;
    overflow: hidden;
    will-change: height, opacity, transform;
}

.layout-1 .sky-donations-orders .sky-order {
    border-bottom: 1px solid #ededed;
}

.sky-donations-orders .sky-order .item-wrap {
    padding: 16px 0;
}

.sky-slide-donations .sky-donations-orders .sky-order.hidden-order {
    opacity: 0;
    height: 0px;
    transform: translateY(-15px);
    pointer-events: none;
}

.sky-modal-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
}

.sky-modal-actions .primary-button {
    width: 100%;
}

.sky-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sky-modal .sky-modal_overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sky-modal .sky-modal_body {
    width: 615px;
    max-width: 100%;
    max-height: 85vh;
    background-color: white;
    border-radius: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sky-modal .sky-modal_header {
    padding: 15px 20px 15px 20px;
    border-bottom: 1px solid #ededed;
    background-color: white;
}

.sky-modal .sky-modal_header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.sky-modal .sky-modal_header-top .sky-modal_title {
    margin: 0px;
}

.sky-modal .sky-modal_header-top .sky-modal_close {
    margin-left: auto;
    border: none;
    background-color: transparent;
    width: 32px;
    height: 32px;
    min-height: inherit;
    border-radius: 99px;
    color: black;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.sky-modal .sky-modal_header-top .sky-modal_close:hover {
    background-color: #f7f7f7;
}
.sky-modal .sky-modal_header {
    padding: 20px 20px 15px 20px;
    border-bottom: 1px solid #ededed;
}

.sky-modal .sky-modal_header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.sky-modal .sky-modal_header-top .sky-modal_title {
    margin: 0px;
}

.sky-modal .sky-modal_header-top .sky-modal_close {
    margin-left: auto;
    border: none;
    background-color: var(--accent-color);
    width: 32px;
    height: 32px;
    min-height: inherit;
    border-radius: 99px;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.sky-modal .sky-modal_header-top .sky-modal_close:hover {
    background-color: var(--accent-dark-color);
    color: white;
}

.sky-modal .sky-modal_tabs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.sky-modal .sky-modal_content .sky-modal_tab .sky-recent-donations-list {
    height: calc(85vh - 215px);
    overflow: auto;
}

.sky-modal .sky-modal_footer {
    padding: 20px;
    margin-top: auto;
    background-color: var(--accent-color);
}

.sky-modal .sky-donations-orders {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.sky-modal .sky-donations-orders .sky-order {
    padding: 0px 20px;
    width: 100%;
}

.sky-modal .sky-modal_tab {
    display: none;
}

.sky-modal_tabs .button {
    border-radius: 99px;
    background-color: white;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    transition: .3s;
}

.sky-modal_tabs .button.active,
.sky-modal_tabs .button:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.sky-modal_footer .button {
    width: 100%;
    background-color: white;
    color: var(--accent-color);
    border-color: white;
    min-height: 48px;
    font-size: 16px;
    border-radius: 99px;
}

.sky-modal_footer .button:hover {
    background-color: #e6e6e6;
    border-color: white;
    color: var(--accent-color);
}

.items-loader {
    text-align: center;
    color: black;
    padding-top: 24px;
    padding-bottom: 24px;
}

.sky-modal .sky-modal_header .count-badge {
    background-color: #e9e9e9;
    font-weight: 700;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    color: black;
    margin-left: 5px;
    margin-top: 5px;
}

.sky-donations-orders .sky-order .item-wrap .meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
}

.layout-2 .sky-donations-orders .sky-order .item-wrap {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 10px 0px;
}

.layout-2 .sky-donations-orders .sky-order .item-wrap .avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    background-color: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 99px;
}

.sky-donations-orders .sky-order .item-wrap .meta li {
    margin: 0;
}

@media only screen and (min-width: 576px) {
    .sky-modal .sky-donations-orders .sky-order {
        width: 50%;
    }

    .sky-modal .sky-donations-orders .sky-order:nth-child(odd) {
        border-right: 1px solid #ededed;
        border-left: 1px solid #ededed;
    }
    
    .sky-modal .sky-donations-orders .sky-order:nth-child(even) {
        border-right: 1px solid #ededed;
    }
}

@media only screen and (max-width: 768px) {
    .sky-modal .sky-modal_body {
        max-height: 100vh;
        height: 100%;
        border-radius: 0px;
    }
    .sky-modal .sky-modal_content .sky-modal_tab .sky-recent-donations-list {
        height: calc(100vh - 213px);
    }

}

/* ======================================================
 * Layout 2 Column Styles (Main Widget)
 * ====================================================== */

/* Base flex layout for layout-2 */
.layout-2 .sky-slide-donations .sky-donations-orders {
    display: flex;
    flex-wrap: wrap;
}

.layout-2 .sky-slide-donations .sky-donations-orders .sky-order {
    width: 100%;
    border-right: none;
    padding-left: 0;
}

/* Desktop (min-width: 1025px) */
@media only screen and (min-width: 1025px) {
    .layout-2.columns-desktop-one .sky-slide-donations .sky-donations-orders .sky-order {
        width: 100%;
        border-right: none;
        padding-left: 0;
    }

    .layout-2.columns-desktop-two .sky-slide-donations .sky-donations-orders .sky-order {
        width: 50%;
    }

    .layout-2.columns-desktop-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(odd) {
        border-right: 1px solid #ededed;
    }

    .layout-2.columns-desktop-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(even) {
        padding-left: 20px;
    }

    .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order {
        width: 33.333%;
    }

    .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order:not(:nth-child(3n)) {
        border-right: 1px solid #ededed;
    }

    .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n+2),
    .layout-2.columns-desktop-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n) {
        padding-left: 16px;
    }
}

/* Tablet (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .layout-2.columns-tablet-one .sky-slide-donations .sky-donations-orders .sky-order {
        width: 100%;
        border-right: none;
        padding-left: 0;
    }

    .layout-2.columns-tablet-two .sky-slide-donations .sky-donations-orders .sky-order {
        width: 50%;
    }

    .layout-2.columns-tablet-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(odd) {
        border-right: 1px solid #ededed;
    }

    .layout-2.columns-tablet-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(even) {
        padding-left: 16px;
    }

    .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order {
        width: 33.333%;
    }

    .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order:not(:nth-child(3n)) {
        border-right: 1px solid #ededed;
    }

    .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n+2),
    .layout-2.columns-tablet-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n) {
        padding-left: 16px;
    }
}

/* Mobile (max-width: 767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .layout-2.columns-mobile-one .sky-slide-donations .sky-donations-orders .sky-order {
        width: 100%;
        border-right: none;
        padding-left: 0;
    }

    .layout-2.columns-mobile-two .sky-slide-donations .sky-donations-orders .sky-order {
        width: 50%;
    }

    .layout-2.columns-mobile-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(odd) {
        border-right: 1px solid #ededed;
    }

    .layout-2.columns-mobile-two .sky-slide-donations .sky-donations-orders .sky-order:nth-child(even) {
        padding-left: 16px;
    }

    .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order {
        width: 33.333%;
    }

    .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order:not(:nth-child(3n)) {
        border-right: 1px solid #ededed;
    }

    .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n+2),
    .layout-2.columns-mobile-three .sky-slide-donations .sky-donations-orders .sky-order:nth-child(3n) {
        padding-left: 16px;
    }
}
/* 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-button */
/* GHH Button. (Root is .ght.gtb.) */
.ght.gtb { display: flex; }
.ght.gtb--full .btn { width: 100%; }

/* widget-divider */
.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{flex-shrink:0;margin:0 var(--divider-element-spacing)}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{direction:ltr;display:flex;margin:0}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{border-block-end:0;border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color);content:"";display:block;flex-grow:1}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider--element-align-start .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-start .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-start .elementor-divider__element{margin-inline-start:0}.elementor-widget-divider--element-align-end .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-end .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-end .elementor-divider__element{margin-inline-end:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-block-start:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url);-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;min-height:var(--divider-pattern-height);width:100%}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var( --container-widget-flex-grow )}
/* ght-infobox */
/* GHH Info box. (Root is .ght.gti; an <a> when the whole box is a link.) */
.ght.gti { display: flex; flex-direction: column; gap: 14px; height: 100%; text-decoration: none; color: var(--ght-ink); }
.ght.gti--card { padding: clamp(20px, 2vw, 28px); border-radius: 22px; background: var(--ght-mist); transition: background-color .25s, box-shadow .25s, transform .25s var(--ght-ease); }
.ght.gti--left { flex-direction: row; align-items: flex-start; }
.ght.gti--right { flex-direction: row-reverse; align-items: flex-start; }
.ght.gti--center { align-items: center; text-align: center; }
.ght.gti--right.gti--right { text-align: left; }
.ght.gti .gti__pic { flex: none; display: block; }
.ght.gti .gti__pic img { display: block; height: auto; }
.ght.gti .gti__num { flex: none; display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 12px; border-radius: 999px; background: var(--ght-blue); color: #fff; font-size: 20px; font-weight: 900; }
.ght.gti .gti__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ght.gti .gti__sub { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); }
.ght.gti .gti__h { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--ght-ink); }
.ght.gti .gti__text { font-size: 15px; line-height: 1.55; color: var(--ght-mute); }
.ght.gti .gti__text p { margin: 0 0 .5em; }
.ght.gti .gti__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--ght-blue-d); }
.ght.gti .gti__more svg { width: 18px; height: 18px; transition: transform .2s var(--ght-ease); }
a.ght.gti:hover .gti__h { color: var(--ght-blue-d); }
a.ght.gti:hover .gti__more svg { transform: translateX(4px); }
a.ght.gti--card:hover { background: #fff; box-shadow: 0 18px 40px -22px rgba(11, 38, 56, .35), 0 0 0 1px var(--ght-line); transform: translateY(-2px); }

/* elementor-post-166603 */
.elementor-166603 .elementor-element.elementor-element-5c158fd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-166603 .elementor-element.elementor-element-1a684eb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166603 .elementor-element.elementor-element-1a684eb.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-166603 .elementor-element.elementor-element-ae10e4f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:50px;}.elementor-166603 .elementor-element.elementor-element-9c30424{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166603 .elementor-element.elementor-element-8858a6f{--display:flex;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:#00000026;--border-color:#00000026;--border-radius:8px 8px 8px 8px;--padding-top:30px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-166603 .elementor-element.elementor-element-d50a7e4 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-166603 .elementor-element.elementor-element-d50a7e4 .gtt{text-align:left;}.elementor-166603 .elementor-element.elementor-element-50a462b .gtb{justify-content:flex-start;}.elementor-166603 .elementor-element.elementor-element-6d3228a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166603 .elementor-element.elementor-element-2cfe48a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-166603 .elementor-element.elementor-element-b350399{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-166603 .elementor-element.elementor-element-baa2465{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-166603 .elementor-element.elementor-element-097962f{--divider-border-style:solid;--divider-color:#0000001A;--divider-border-width:1px;}.elementor-166603 .elementor-element.elementor-element-097962f .elementor-divider-separator{width:100%;}.elementor-166603 .elementor-element.elementor-element-097962f .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-166603 .elementor-element.elementor-element-fde6eb3 .gtt{text-align:left;}.elementor-166603 .elementor-element.elementor-element-fde6eb3 .gtt__h{color:#1B9DD9;}.elementor-166603 .elementor-element.elementor-element-75d58cc{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-166603 .elementor-element.elementor-element-d972d7f{--display:flex;}.elementor-166603 .elementor-element.elementor-element-cf863e2 .gti__h{color:#3442AD;}.elementor-166603 .elementor-element.elementor-element-fc664fb{--display:flex;border-style:solid;--border-style:solid;border-width:0px 1px 0px 1px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:1px;border-color:#00000017;--border-color:#00000017;}.elementor-166603 .elementor-element.elementor-element-20f6231 .gti__h{color:#3442AD;}.elementor-166603 .elementor-element.elementor-element-08899b5{--display:flex;}.elementor-166603 .elementor-element.elementor-element-5a16666 .gti__h{color:#3442AD;}.elementor-166603 .elementor-element.elementor-element-b4530b5{--display:flex;--margin-top:30px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166603 .elementor-element.elementor-element-90647e5{--divider-border-style:solid;--divider-color:#0000001A;--divider-border-width:1px;}.elementor-166603 .elementor-element.elementor-element-90647e5 .elementor-divider-separator{width:100%;}.elementor-166603 .elementor-element.elementor-element-90647e5 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-166603 .elementor-element.elementor-element-51121fb .gtb{justify-content:flex-start;}.elementor-166603 .elementor-element.elementor-element-b8577b0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.23;--margin-top:0px;--margin-bottom:-40px;--margin-left:0px;--margin-right:0px;}.elementor-166603 .elementor-element.elementor-element-b8577b0::before, .elementor-166603 .elementor-element.elementor-element-b8577b0 > .elementor-background-video-container::before, .elementor-166603 .elementor-element.elementor-element-b8577b0 > .e-con-inner > .elementor-background-video-container::before, .elementor-166603 .elementor-element.elementor-element-b8577b0 > .elementor-background-slideshow::before, .elementor-166603 .elementor-element.elementor-element-b8577b0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-166603 .elementor-element.elementor-element-b8577b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}@media(max-width:1024px){.elementor-166603 .elementor-element.elementor-element-75d58cc{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-166603 .elementor-element.elementor-element-5c158fd{--content-width:1050px;}.elementor-166603 .elementor-element.elementor-element-1a684eb{--width:61.45%;}.elementor-166603 .elementor-element.elementor-element-9c30424{--width:100%;}.elementor-166603 .elementor-element.elementor-element-2cfe48a{--width:50%;}.elementor-166603 .elementor-element.elementor-element-b350399{--width:50%;}.elementor-166603 .elementor-element.elementor-element-b8577b0{--content-width:1400px;}}@media(max-width:767px){.elementor-166603 .elementor-element.elementor-element-ae10e4f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166603 .elementor-element.elementor-element-9c30424{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-166603 .elementor-element.elementor-element-75d58cc{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-166603 .elementor-element.elementor-element-fc664fb{border-width:1px 0px 1px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;}.elementor-166603 .elementor-element.elementor-element-b4530b5{--margin-top:0px;--margin-bottom:10px;--margin-left:0px;--margin-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);}}
}
/* elementor-post-166503 */
.elementor-166503 .elementor-element.elementor-element-e8478d3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-5bf512b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-1090037{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-bdd9ae1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-70b918a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-faf82ae{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-da157a8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-3b1215c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-874d84c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-dd00d06{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
/* ght-appealhead */
/* GHH Appeal: Title — breadcrumb, category, the appeal's name, short description. */
.ght.aph { padding: clamp(28px, 3.6vw, 52px) 0 clamp(24px, 3vw, 40px); }
.ght .aph__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--ght-mute); }
.ght .aph__crumbs a { text-decoration: none; }
/* a fundraiser page, to whoever may edit it: back to their pages, and Edit */
.ght .aph__owner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; padding: 10px 10px 10px 16px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); background: #fff; }
.ght .aph__ownback { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ght-ink-2); text-decoration: none; }
.ght .aph__ownback:hover { color: var(--ght-blue-d); }
.ght .aph__owner svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ght .aph__edit { gap: 8px; }
.ght .aph__crumbs a:hover { color: var(--ght-blue-d); }
.ght .aph__crumbs span { opacity: .5; }
.ght .aph__cat { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ght-blue-d); }
.ght .aph__h { max-width: 20ch; margin: 0; font-size: clamp(38px, 5vw, 76px); font-weight: 900; line-height: .98; letter-spacing: -.04em; color: var(--ght-ink); text-wrap: balance; }
.ght .aph__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.ght .aph__share { position: relative; display: flex; align-items: center; gap: 6px; }
.ght .aph__sharet { margin-right: 6px; font-size: 14px; font-weight: 700; color: var(--ght-mute); }
/* desktop: the share block at the far right of the row, "Share this appeal" above the icons (user) */
@media (min-width: 761px) {
	.ght .aph__row { flex-wrap: nowrap; }
	.ght .aph__share { flex: none; margin-left: auto; }
	.ght .aph__sharet { position: absolute; right: 0; bottom: calc(100% + 6px); margin: 0; white-space: nowrap; }
}
.ght .aph__sh, .ght .aph__sh:hover, .ght .aph__sh:focus { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ght-mist); color: var(--ght-ink); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.ght .aph__sh:hover { background: var(--ght-ink); color: #fff; }
.ght .aph__sh[hidden] { display: none; }
.ght .aph__sh svg { width: 18px; height: 18px; }
/* WhatsApp, Facebook, X: the real brand marks, solid */
.ght .aph__sh svg.is-brand { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.ght .aph__done { position: absolute; right: 0; top: calc(100% + 6px); font-size: 13px; font-weight: 700; color: var(--ght-blue-d); white-space: nowrap; }
.ght .aph__lead { max-width: 62ch; margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ght-ink-2); }
.ght .aph__lead p { margin: 0 0 .6em; }
.ght .aph__lead p:last-child { margin-bottom: 0; }
.ght .aph__lead a { color: var(--ght-blue-d); }
@media (max-width: 760px) {
	.ght .aph__crumbs a { display: inline-block; padding: 10px 0; margin: -10px 0; }
	.ght .aph__h { font-size: 38px; }
}

/* ght-appealgallery */
/* GHH Appeal: Photos — big photo, thumbnails, full-size view. */
.ght.apg { display: grid; gap: 12px; }
.ght .apg__main { position: relative; display: block; aspect-ratio: var(--apg-ratio, 4 / 3); overflow: hidden; border-radius: 26px; background: var(--ght-mist); cursor: zoom-in; }
.ght .apg__stage { position: relative; }
.ght .apg__play, .ght .apg__play:hover, .ght .apg__play:focus { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ght-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .15s; }
.ght .apg__play:hover { transform: scale(1.08); }
.ght .apg__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }
.ght .apg__stage.is-playing .apg__main { visibility: hidden; }
.ght .apg__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #000; }
.ght .apg__stage.is-playing { overflow: hidden; border-radius: 26px; }
.ght .apg__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ght .apg__thumbs { display: flex; gap: 10px; margin: 0; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; }
.ght .apg__thumbs::-webkit-scrollbar { display: none; }
.ght .apg__thumbs li { flex: none; }
.ght .apg__thumb, .ght .apg__thumb:hover, .ght .apg__thumb:focus { position: relative; display: block; width: 84px; height: 84px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background-color: var(--ght-mist); cursor: pointer; opacity: .7; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; }
.ght .apg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ght .apg__thumb:hover { opacity: 1; }
.ght .apg__thumb.is-on { opacity: 1; outline-color: var(--ght-blue); }
/* full size */
.ght .apg__box { position: fixed; z-index: 1000001; inset: 0; display: grid; place-items: center; padding: 4vw; background: rgba(3, 10, 16, .92); cursor: zoom-out; }
.ght .apg__box[hidden] { display: none; }
.ght .apg__box img { max-width: 100%; max-height: 88vh; border-radius: 14px; }
.ght .apg__x, .ght .apg__x:hover, .ght .apg__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; }
/* ── slider look: GoFundMe's photo viewer (measured from theirs) ── */
.ght.apg--slider { display: block; }
.ght .apg__view { position: relative; aspect-ratio: var(--apg-ratio, 16 / 9); overflow: hidden; border-radius: 16px; background: #EDEFF1; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ght .apg__view:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 3px; }
.ght .apg__track { display: flex; height: 100%; will-change: transform; }
.ght .apg__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; }
.ght .apg__slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
/* the film's play button sits in the middle of the first photo */
.ght.apg--slider .apg__play, .ght.apg--slider .apg__play:hover, .ght.apg--slider .apg__play:focus { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.ght.apg--slider .apg__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.ght .apg__slide.is-playing .apg__play { display: none; }
.ght .apg__slide .apg__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* dots: bottom left; the active one a 16px pill, normal 6px, far ones 3px */
.ght .apg__dots { position: absolute; left: 16px; bottom: 19px; z-index: 2; display: flex; align-items: center; gap: 0; }
/* each dot is a 24px target (WCAG 2.5.8) that draws the small dot inside it */
.ght .apg__dot, .ght .apg__dot:hover, .ght .apg__dot:focus { position: relative; flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.ght .apg__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .45); transform: translate(-50%, -50%); transition: width .25s, height .25s, background-color .25s; }
.ght .apg__dot.is-far::before { width: 3px; height: 3px; }
.ght .apg__dot.is-on::before { width: 16px; height: 6px; background: #fff; }
/* arrows: bottom right, 32px dark see-through circles */
.ght .apg__arrows { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; gap: 8px; }
.ght .apg__arrow, .ght .apg__arrow:hover, .ght .apg__arrow:focus { display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; transition: background-color .15s, opacity .15s; }
.ght .apg__arrow:hover { background: rgba(0, 0, 0, .75); }
.ght .apg__arrow[disabled] { opacity: .45; cursor: default; }
.ght .apg__arrow svg { width: 16px; height: 16px; stroke-width: 2.2; }

@media (max-width: 760px) {
	/* phones: inside the page's margins with rounded corners, like the cards under it (user: not full
	   width); no arrows (swipe), dots centred */
	.ght .apg__arrows { display: none; }
	.ght .apg__dots { left: 50%; bottom: 7px; transform: translateX(-50%); }
	.ght .apg__thumb, .ght .apg__thumb:hover, .ght .apg__thumb:focus { width: 64px; height: 64px; border-radius: 12px; }
}

/* ght-appealsecure */
/* GHH Appeal: Card Heading — shield + "Secure donation" (styled with the appeal page, ght-appeal.css). */
.ght.apsec { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.ght.apsec svg { width: 26px; height: 26px; color: #2f9e6e; }

/* ght-appealdonors */
/* GHH Appeal: Donations — GoFundMe's donations card and window, measured from theirs
   (rows 40px avatars / 16px name / 14px amount · label, pill buttons, 616px window with a
   24px radius, black pill tab, full-width Donate band, Donate now pinned at the foot), in GHH
   colours: blue where GoFundMe uses green, ink for their dark green. Root is .ght.apdn. */
.ght.apdn { --dn-ink: #232323; --dn-mute: #6F6F6F; --dn-soft: #F2F2F2; --dn-tint: #E9F6FD; padding: clamp(48px, 6vw, 80px) 0; color: var(--dn-ink); }

/* totals */
.apdn .apdn__stats { display: flex; align-items: center; gap: 16px; }
.apdn .apdn__ring { position: relative; display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--ght-blue) calc(var(--p) * 1%), #EDEFF1 0); }
.apdn .apdn__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.apdn .apdn__ring b { position: relative; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.apdn .apdn__ring small { font-size: 9px; vertical-align: top; }
.apdn .apdn__totals { display: grid; margin: 0; line-height: 1.2; }
.apdn .apdn__raised { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.apdn .apdn__of { font-size: 20px; font-weight: 400; color: var(--dn-mute); }
.apdn .apdn__totals small { margin-top: 2px; font-size: 14px; color: var(--dn-mute); }
.apdn .apdn__acts { position: relative; display: grid; gap: 10px; margin: 18px 0 22px; }
.apdn .apdn__pri, .apdn .apdn__pri:hover, .apdn .apdn__pri:focus, .apdn .apdn__sec, .apdn .apdn__sec:hover, .apdn .apdn__sec:focus { width: 100%; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; transition: filter .15s; }
.apdn .apdn__pri { background: var(--ght-btn); color: #fff; }
.apdn .apdn__sec { background: var(--ght-ink); color: #fff; }
.apdn .apdn__pri:hover, .apdn .apdn__sec:hover { filter: brightness(.94); }
.apdn .apdn__done { position: absolute; left: 0; right: 0; bottom: -20px; font-size: 13px; font-weight: 600; text-align: center; color: var(--ght-blue-d); }

/* recent donations */
.apdn .apdn__count { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ght-blue-d); }
.apdn .apdn__trend { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dn-tint); }
.apdn .apdn__trend svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the activity line: the count, then how the appeal is moving, one line at a time rolling up */
.apdn .apdn__count.has-pulse { position: relative; height: 40px; }
.apdn .apdn__line { display: flex; align-items: center; gap: 14px; min-width: 0; }
.apdn .apdn__say { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.apdn .apdn__say b, .apdn .apdn__say time { font-weight: 800; }
.apdn .has-pulse .apdn__line { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: transform .45s var(--ght-ease), opacity .45s var(--ght-ease); pointer-events: none; }
.apdn .has-pulse .apdn__line.is-on { opacity: 1; transform: none; pointer-events: auto; }
.apdn .has-pulse .apdn__line.is-out { opacity: 0; transform: translateY(-14px); }
/* gifts in the last day: the icon itself pulses (its round background stays still) */
.apdn .apdn__count.is-live .apdn__trend > * { animation: apdn-pulse 2s var(--ght-ease) infinite; transform-origin: 50% 50%; }
@keyframes apdn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.2); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
	.apdn .has-pulse .apdn__line { transition: none; }
	.apdn .apdn__count.is-live .apdn__trend > * { animation: none; }
}
.apdn .apdn__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.apdn .apdn__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
/* GoFundMe's avatar: their donor icon, 24px, #232323 on a #F5F5F5 circle */
.apdn .apdn__av { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F5F5F5; color: var(--dn-ink); }
.apdn .apdn__av svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.apdn .apdn__who { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
/* type as the promise card under it (user): 15px semi-bold ink over 14px grey */
.apdn .apdn__name { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--ght-ink); }
.apdn .apdn__amt { font-weight: 600; color: inherit; }
/* second line: flag, "Chessington, United Kingdom" · "3 days ago" (the place gives way first) */
.apdn .apdn__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--ght-mute); }
.apdn .apdn__msg { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: #F3F6F8; font-size: 14px; line-height: 1.45; font-style: italic; color: var(--ght-ink); quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.apdn .apdn__row--top .apdn__msg { background: #fff; }
.apdn .apdn__meta i { flex: none; margin: 0; font-style: normal; }
.apdn .apdn__when, .apdn .apdn__tag { flex: none; white-space: nowrap; }
/* the pinned top donation: a light-blue panel (border only, no shadow), white avatar, blue starred label */
/* pulled out by its own padding, so its avatar lines up with the rows under it */
.apdn .apdn__tops { gap: 8px; margin: 6px 0; }
.apdn .apdn__row--top { margin: 0 -14px; padding: 12px 14px; border: 1px solid #CBE9F8; border-radius: 12px; background: var(--dn-tint); }
.apdn .apdn__row--top .apdn__av { background: #fff; color: var(--ght-blue-d); }
.apdn .apdn__tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ght-blue-d); }
.apdn .apdn__tag svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.apdn .apdn__flag { flex: none; font-size: 15px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.apdn .apdn__place { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the latest gifts: without the script only the newest few show; with it they arrive one by one */
.apdn .apdn__feed:not(.is-live) > li:nth-child(n + 4) { display: none; }
/* the replay window: a fixed height (set by the script), the row arriving at the top grows (script) */
/* a block, not a grid: rows keep their height and are pushed down out of the window */
.apdn .apdn__feed.is-live { display: block; overflow: hidden; }
.apdn .apdn__feed > li { overflow: hidden; box-sizing: border-box; }
.apdn .apdn__empty { margin: 0; color: var(--dn-mute); }
.apdn .apdn__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.apdn .apdn__btn, .apdn .apdn__btn:hover, .apdn .apdn__btn:focus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid #C8C8C8; border-radius: 999px; background: #fff; color: var(--dn-ink); font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.apdn .apdn__btn:hover { background: var(--dn-soft); }
.apdn .apdn__btn svg { width: 16px; height: 16px; }

/* the window */
.apdn .apdn__win { position: fixed; z-index: 1000002; inset: 0; display: grid; place-items: center; padding: 50px 24px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.apdn .apdn__win[hidden] { display: none; }
.apdn .apdn__panel { display: flex; flex-direction: column; width: min(616px, 100%); height: 100%; max-height: 900px; overflow: hidden; border-radius: 24px; background: #fff; color: var(--dn-ink); }
.apdn .apdn__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 12px; }
.apdn .apdn__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.apdn .apdn__badge { padding: 3px 7px; border-radius: 6px; background: #EDEFF1; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--dn-ink); }
.apdn .apdn__x, .apdn .apdn__x:hover, .apdn .apdn__x:focus { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dn-ink); cursor: pointer; }
.apdn .apdn__x:hover { background: var(--dn-soft); }
.apdn .apdn__x svg { width: 20px; height: 20px; }
.apdn .apdn__tabs { display: flex; gap: 4px; padding: 6px 24px 18px; }
.apdn .apdn__tab, .apdn .apdn__tab:hover, .apdn .apdn__tab:focus { padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--dn-mute); font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.apdn .apdn__tab[aria-selected="true"] { background: var(--dn-ink); color: #fff; }
.apdn .apdn__scroll { flex: 1; min-height: 0; padding: 0 24px 16px; overflow-y: auto; overscroll-behavior: contain; }
.apdn .apdn__topline { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.apdn .apdn__topline[hidden] { display: none; }
.apdn .apdn__list--win .apdn__row { padding: 14px 0; }
/* the Donate band, full width inside the window */
.apdn .apdn__cta { display: flex; align-items: center; gap: 16px; margin: 6px -24px; padding: 16px 24px; background: var(--dn-tint); }
.apdn .apdn__cta img { flex: none; width: 44px; height: 56px; border: 2px solid #fff; border-radius: 6px; object-fit: cover; transform: rotate(-4deg); }
.apdn .apdn__cta p { flex: 1; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.apdn .apdn__ctabtn, .apdn .apdn__ctabtn:hover, .apdn .apdn__ctabtn:focus { flex: none; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ght-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-transform: none; cursor: pointer; }
.apdn .apdn__more { margin: 8px 0 0; text-align: center; color: var(--dn-mute); }
.apdn .apdn__foot { padding: 24px; border-top: 1px solid #E5E5E5; }
.apdn .apdn__foot .apdn__pri { min-height: 48px; }
@media (max-width: 760px) {
	.apdn .apdn__win { align-items: end; padding: 0; }
	.apdn .apdn__panel { width: 100%; height: 92vh; border-radius: 24px 24px 0 0; }
	.apdn .apdn__title { font-size: 24px; }
}

/* ght-appealtrust */
/* GHH Appeal: Reassurance — three short points under the form. (Root is .ght.aptr.) */
.ght.aptr { display: grid; gap: 4px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ght-line); list-style: none; }
.ght.aptr .aptr__i { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; text-decoration: none; }
.ght.aptr svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ght-blue-d); }
.ght.aptr p { display: grid; font-size: 14px; line-height: 1.4; }
.ght.aptr b { font-size: 15px; color: var(--ght-ink); }
.ght.aptr span { color: var(--ght-mute); }
.ght.aptr a.aptr__i:hover b { color: var(--ght-blue-d); }

/* ght-appealbrief */
/* GHH Appeal: Brief — everything about the appeal in one card: progress, tabs, facts, story, gift,
   steps and films. Same on every appeal; each part comes from the appeal itself. */
.ght.apbr { container-type: inline-size; }
.ght .apbr__h { margin-bottom: 16px; }

/* tabs: one bar of pills on a soft track; scrolls sideways when the card is narrow */
.ght .apbr__tabs { scroll-margin-top: calc(var(--ght-hdr) + 16px); display: flex; gap: 4px; margin: 0 0 22px; padding: 4px; border-radius: 999px; background: var(--ght-mist); overflow-x: auto; scrollbar-width: none; }
.ght .apbr__tabs::-webkit-scrollbar { display: none; }
.ght .apbr__tab, .ght .apbr__tab:hover, .ght .apbr__tab:focus { flex: 1 1 0; min-height: 40px; margin: 0; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ap-muted, var(--ght-mute)); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .2s, color .2s, box-shadow .2s; }
.ght .apbr__tab:hover { color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__tab[aria-selected="true"] { background: #fff; color: var(--ap-ink, var(--ght-ink)); box-shadow: 0 1px 2px rgba(6, 20, 30, .08), 0 0 0 1px var(--ap-edge, var(--ght-line)); }
.ght .apbr__tab:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; }
/* with the script, one panel at a time (without it, all of them, one under another) */
.ght.apbr.is-tabbed .apbr__panel:not(.is-on) { display: none; }
.ght .apbr__panel + .apbr__panel { margin-top: 28px; }
.ght.apbr.is-tabbed .apbr__panel + .apbr__panel { margin-top: 0; }
.ght.apbr.is-tabbed .apbr__panel.is-on { animation: ght-apbr-in .35s var(--ght-ease) both; }
@keyframes ght-apbr-in { from { opacity: 0; transform: translateY(6px); } }

/* at a glance: icon, small label, value */
.ght .apbr__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.ght .apbr__fact { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--ap-edge, var(--ght-line)); border-radius: 12px; background: #fff; }
.ght .apbr__fi { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ght-soft); color: var(--ght-blue-d); }
.ght .apbr__fi svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__fact > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ght .apbr__fact small { font-size: 12.5px; line-height: 1.2; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__fact b { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ap-ink, var(--ght-ink)); overflow-wrap: anywhere; }
.ght .apbr__fact a, .ght .apbr__jump, .ght .apbr__jump:hover, .ght .apbr__jump:focus { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: var(--ap-line, var(--ght-line)); text-underline-offset: 3px; cursor: pointer; box-shadow: none; min-height: 0; }
.ght .apbr__fact a:hover, .ght .apbr__jump:hover { text-decoration-color: currentColor; }

/* the story */
.ght .apbr .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr .apst__text > p:first-child { font-size: 17.5px; line-height: 1.55; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr .story__body.is-folded { max-height: 13em; }

/* your gift */
.ght .apbr__hint { margin: 0 0 4px; font-size: 14.5px; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__h3 { margin: 22px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__panel > .apbr__h3:first-child { margin-top: 0; }
.ght .apbr__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.ght .apbr__boxes li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--ght-mist); }
.ght .apbr__boxes li:not(:has(small)) { align-items: center; } /* a one-line item sits level with its tick */
.ght .apbr__bi { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ght-blue-d); }
.ght .apbr__bi img { width: 28px; height: 28px; object-fit: contain; }
.ght .apbr__bi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__boxes b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__boxes small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__give { margin-top: 20px; }

/* how it works: the steps in order, joined by a line */
/* the appeal's highlighted note over the tabs ("Given out straight away in Ramadan"): GHH's gold, so it
   stands apart from the white cards under it */
.ght .apbr__note { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid #F1C98A; border-left: 4px solid #E0902A; border-radius: 14px; background: #FFF7EA; }
.ght .apbr__ni { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: #B86A0E; }
.ght .apbr__ni svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__note b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__note b + span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ap-ink, var(--ght-ink)); }

/* timeline: the time to complete, as one calm fact (the panel's "Time to complete") */
.ght .apbr__time { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--ap-edge, var(--ght-line)); border-radius: 14px; background: #fff; }
.ght .apbr__ti { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ght-soft); color: var(--ght-blue-d); }
.ght .apbr__ti svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__time small { display: block; font-size: 13.5px; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__time b { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__time em { display: block; margin-top: 4px; font-style: normal; font-size: 14.5px; color: var(--ap-muted, var(--ght-mute)); }
/* the update promise under it: the same box, the line in normal weight */
.ght .apbr__time + .apbr__time { margin-top: 10px; }
.ght .apbr__time strong { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ap-ink, var(--ght-ink)); }

.ght .apbr__steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: apbr; }
.ght .apbr__steps li { position: relative; display: grid; gap: 4px; margin: 0; padding: 2px 0 22px 52px; counter-increment: apbr; }
.ght .apbr__steps li:last-child { padding-bottom: 0; }
.ght .apbr__steps li::before { content: counter(apbr); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ght-blue); color: #fff; font-size: 15px; font-weight: 700; }
.ght .apbr__steps li:not(:last-child)::after { content: ""; position: absolute; left: 16.25px; top: 38px; bottom: 4px; width: 1.5px; background: var(--ap-edge, var(--ght-line)); }
.ght .apbr__steps b { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); padding-top: 6px; }
.ght .apbr__steps span { font-size: 15px; line-height: 1.55; color: var(--ap-muted, var(--ght-mute)); }

/* from the field: the appeal's films, upright like the app's */
.ght .apbr__films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.ght .apbr__films li { margin: 0; }
.ght .apbr__film { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--ght-night); color: #fff; text-decoration: none; }
.ght .apbr__film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ght-ease); }
.ght .apbr__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 30, 0) 50%, rgba(6, 20, 30, .85)); }
.ght .apbr__film:hover img { transform: scale(1.04); }
.ght .apbr__play { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); }
.ght .apbr__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.ght .apbr__len { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 2px 7px; border-radius: 999px; background: rgba(6, 20, 30, .6); font-size: 12px; font-weight: 600; }
.ght .apbr__ft { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: -webkit-box; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ght .apbr .more { color: var(--ght-blue-d); }

/* narrow card (phone, or the column below 560px): two facts and two boxes a row */
@container (max-width: 560px) {
	.ght .apbr__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* an odd one out takes the whole row, so no gap is left beside it */
	.ght .apbr__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ght .apbr__boxes { grid-template-columns: minmax(0, 1fr); }
}
/* phone: the tabs two a row, all in sight (not a bar that hides the last ones off the edge) */
@container (max-width: 440px) {
	.ght .apbr__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
	.ght .apbr__tab, .ght .apbr__tab:hover, .ght .apbr__tab:focus { border-radius: 10px; padding: 8px 10px; }
	.ght .apbr__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (max-width: 380px) {
	.ght .apbr__fact { padding: 10px; gap: 10px; }
	.ght .apbr__fi { width: 30px; height: 30px; }
	.ght .apbr__films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.ght.apbr.is-tabbed .apbr__panel.is-on { animation: none; }
}

/* ght-appealfaq */
/* GHH Appeal: Questions — uses the Questions section's styles (faq.css). */

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

/* 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-appeal */
/* ==========================================================================
 * GHH appeal (product) page — styled on SkyDonate's donation checkout
 * (FundraiseUp style) with GoFundMe-style type: Onest (bold, tight headings,
 * plain text), white cards with a 16px radius and a 1px border (no shadows),
 * 8px controls with a fine ring, the chosen
 * option in light blue with a blue ring, one blue button.
 *
 * The appeal template (build/ght-build-appeal.php) is Elementor containers:
 *   .ght-ap-top    the grid
 *     .ght-ap-media  photos (+ film) and progress            left, row 1
 *     .ght-ap-rail   right column:
 *       .ght-ap-side   the giving card (heading + SkyDonate's Donation Form)
 *       .ght-ap-side2  recent donations, our promise
 *     .ght-ap-body   the story card, how it helps            left, row 2
 * Phones: photos → giving card → story → donations. Classes are set on the
 * containers (Advanced → CSS Classes), so the layout stays editable.
 * ======================================================================== */

/* ── the calm type and colours (this page only) ── */
.ght-appeal-page {
	--ght-f: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ap-ink: #1F2933;
	--ap-muted: #5F6B7A;
	--ap-line: #CDD5DE;
	--ap-soft: #E9F6FD;
	/* cards are drawn with a border only, no shadow (user: "keep it clean") */
	--ap-edge: #DDE3EA;
	font-family: var(--ght-f);
	color: var(--ap-ink);
}
body.single-product.ght-site, body.ght-site:has(.ght-fundraiser-page) { background: #F6F8FA; }
/* fundraiser pages (GHT_Fundraiser): the plugin's form widget sits where SkyDonate's appeal form does,
   and its team banner / leaderboard sit in the story column as white cards */
.ght-ap-side .elementor-widget-skydonate-donation-form { --accent-color: var(--ght-blue); margin: 0; }
.ght-fundraiser-page .ght-ap-body > .elementor-widget:is(.elementor-widget-skydonate-leaderboard, .elementor-widget-skydonate-team-campaign-banner):has(> .elementor-widget-container > *) { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; }
.ght-fundraiser-page .skydonate-donations-closed { padding: 14px 16px; border: 1px solid var(--ght-line); border-radius: 12px; background: var(--ght-mist); color: var(--ght-ink); font: 500 15px/1.5 var(--ght-f); }
.ght-appeal-page .ght { font-family: var(--ght-f); }
.ght-appeal-page .ght .h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.ght-appeal-page .ght .lead { font-size: 16.5px; color: var(--ap-muted); }
.ght-appeal-page .ght-notices:empty { display: none; }
.ght-appeal-page .ght-notices { max-width: 1200px; margin: 16px auto 0; padding: 0 var(--ght-pad); }

/* title */
.ght-appeal-page .ght.aph { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.4vw, 28px); }
.ght-appeal-page .ght.aph .wrap { max-width: 1200px; }
.ght-appeal-page .ght .aph__cat { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.ght-appeal-page .ght .aph__h { max-width: 28ch; font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--ap-ink); }
.ght-appeal-page .ght .aph__lead { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ap-muted); }

/* ── the grid ── */
.e-con.ght-ap-top { --padding-top: 0px; --padding-bottom: 0px; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); grid-template-areas: "media rail" "body rail"; grid-template-rows: auto 1fr; /* the tall right column's extra height goes to the story row, never between the photo and the story */ align-items: start; gap: 24px 32px; max-width: 1200px; margin: 0 auto; padding: 0 var(--ght-pad) clamp(48px, 6vw, 80px); }
.e-con.ght-ap-media, .e-con.ght-ap-side, .e-con.ght-ap-side2, .e-con.ght-ap-rail, .e-con.ght-ap-body { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; min-width: 0; }
.e-con.ght-ap-top > .ght-ap-media { grid-area: media; display: flex; flex-direction: column; gap: 18px; }
.e-con.ght-ap-top > .ght-ap-rail { grid-area: rail; display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-top > .ght-ap-body { grid-area: body; display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-side2 { display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-body > .elementor-widget:not(:has(.ght)), .e-con.ght-ap-side2 > .elementor-widget:not(:has(.ght)) { display: none; }
/* an older template (giving card straight in the grid) still lays out */
.e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: rail; }

/* cards */
.e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; }
.e-con.ght-ap-side { display: flex; flex-direction: column; gap: 16px; }
.ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr { padding: clamp(22px, 2.6vw, 32px); }
.ght .apst__h2, .ght-appeal-page .ght .apst__h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--ap-ink); }
.ght-appeal-page .ght.apst--parts .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted); }
.ght-appeal-page .ght .rich h3, .ght-appeal-page .ght .rich h4 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ap-ink); }
.ght-appeal-page .ght .rich strong, .ght-appeal-page .ght .rich b { font-weight: 600; color: var(--ap-ink); }

/* card heading: shield + "Secure donation" */
.ght-appeal-page .ght.apsec { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--ap-ink); }

/* photos and progress */
.ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__stage.is-playing { border-radius: 16px; }
.ght-appeal-page .ght .apg__thumb { border-radius: 10px; }
.ght-appeal-page .ght.apgo { padding: 18px 20px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; }
/* no shadows anywhere on the page: the gift cards and play button keep to borders too */
.ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght-appeal-page .ght .apg__play { box-shadow: none; }
.ght-appeal-page .ght .apgo__line { font-size: 15px; color: var(--ap-muted); }
.ght-appeal-page .ght .apgo__line b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ap-ink); }

/* how it helps, gifts, points: the checkout's controls */
.ght-appeal-page .ght .apim__list li, .ght-appeal-page .ght .apst__gift { border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ap-line); }
.ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); transform: none; }
.ght-appeal-page .ght .apst__gift.is-on { background: var(--ap-soft); box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght-appeal-page .ght .apst__gift b, .ght-appeal-page .ght .apim__list b { font-weight: 600; }
.ght-appeal-page .ght .apst__price { font-weight: 700; letter-spacing: -.01em; }
.ght-appeal-page .ght .apst__pts li { border-radius: 10px; background: #F4F7FA; }
.ght-appeal-page .ght .apst__pts li b { font-weight: 600; }

/* donations and our promise in the right column (the donations panel styles itself: appealdonors.css) */
.ght-ap-side2 .ght.apdn .apst__h2 { font-size: 18px; }
.ght-ap-side2 .ght.aptr { display: grid; gap: 14px; margin: 0; list-style: none; }
.ght-appeal-page .ght.aptr b { font-weight: 600; }

/* SkyDonate's form itself: ght-appeal-sd.css (only while "Style SkyDonate widgets" is on) */

@media (max-width: 1024px) {
	.e-con.ght-ap-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "side" "body" "side2"; }
	/* the right column's two parts take their own places in the one column */
	.e-con.ght-ap-top > .ght-ap-rail { display: contents; }
	.e-con.ght-ap-rail > .ght-ap-side { grid-area: side; }
	.e-con.ght-ap-rail > .ght-ap-side2 { grid-area: side2; }
	.e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: side; }
	.e-con.ght-ap-top { grid-template-rows: none; }
	/* One column of cards as a grid, not a flex column. As a flex column, Chrome gave the tabbed story
	   card (Appeal brief) a height far beyond its content (3,672px for 1,176px on the Palestine appeal,
	   most likely its hidden tabs): a 2,500px empty band on phones (user: "big gaps under some
	   sections on mobile"). As a grid it's its content's height. */
	.e-con.ght-ap-top > .ght-ap-body, .e-con.ght-ap-rail > .ght-ap-side2 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; }
}
@media (max-width: 760px) {
	.e-con.ght-ap-top { gap: 16px; padding-left: 12px; padding-right: 12px; }
	.ght-appeal-page .ght.aph { padding-left: 0; padding-right: 0; }
	.e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 18px; }
	/* the photos keep the page's 12px margins and the cards' rounded corners (user: not full width) */
	.ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__view { margin: 0; border-radius: 14px; }
	/* TRIAL (user: "merge them, only on mobile"): the photos become the top of the donation card — no
	   gap, square corners where they meet, the card's own border carrying on under the photo */
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__view,
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__main { border-radius: 16px 16px 0 0; }
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .e-con.ght-ap-side { margin-top: -16px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ght-video */
/* GHH Video. (Root is .ght.gtv.) */
.ght.gtv { position: relative; aspect-ratio: var(--gtv-ratio, 16 / 9); overflow: hidden; border-radius: 22px; background: var(--ght-ink); }
.ght.gtv .gtv__play, .ght.gtv .gtv__play:hover, .ght.gtv .gtv__play:focus { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: #fff; cursor: pointer; }
.ght.gtv .gtv__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease); }
.ght.gtv .gtv__play::after { content: ""; position: absolute; inset: 0; background: rgba(6, 20, 30, .25); transition: background-color .3s; }
.ght.gtv .gtv__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); transition: transform .3s var(--ght-ease), background-color .3s, color .3s; }
.ght.gtv .gtv__btn svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; stroke: none; }
.ght.gtv .gtv__label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; font-weight: 700; text-align: center; }
.ght.gtv .gtv__play:hover img { transform: scale(1.04); }
.ght.gtv .gtv__play:hover .gtv__btn { transform: scale(1.08); background: var(--ght-blue); color: #fff; }
.ght.gtv .gtv__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ght-story */
/* GHH Story — words beside a photo or film; without a picture, heading left and text right. */
.ght .story__grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 96px); }
.ght.story--media .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ght.story--left .story__media { order: -1; }
.ght.story--text.story--plain .story__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: calc(68ch + 2 * var(--ght-pad)); }
.ght.story--only .story__grid { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.ght.story--only .story__text { display: none; }
.ght.story--text .story__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.ght .story__text .h2 { margin-bottom: 24px; }
.ght.story--text .story__text .h2 { margin-bottom: 0; }
.ght .story__body { max-width: 64ch; }
.ght .story__btns { margin-top: 30px; }
.ght .story__media .pmedia { border-radius: 22px; }
.ght .story__media .pmedia img { aspect-ratio: 4 / 3.2; object-fit: cover; }
/* folded long text */
.ght .story__body.is-folded { position: relative; max-height: 15em; overflow: hidden; }
.ght .story__body.is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.ght.t-mist .story__body.is-folded::after { background: linear-gradient(rgba(238, 244, 247, 0), var(--ght-mist)); }
.ght.t-night .story__body.is-folded::after { background: linear-gradient(rgba(6, 20, 30, 0), var(--ght-night)); }
.ght .story__more, .ght .story__more:hover, .ght .story__more:focus { display: inline-flex; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--ght-blue-d); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ght.t-night .story__more { color: var(--ght-gold); }
/* long words beside a picture: the picture starts at the top and stays in view while reading */
.ght.story--long .story__grid { align-items: start; }
.ght.story--long .story__media { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); }
.ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 5; }

@media (max-width: 960px) {
	.ght.story--media .story__grid, .ght.story--text .story__grid { grid-template-columns: minmax(0, 1fr); }
	.ght.story--text .story__text .h2 { margin-bottom: 0; }
	.ght .story__media { order: -1; }
	.ght.story--long .story__media { position: static; }
	.ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 3.2; }
}

/* ght-appealstory */
/* GHH Appeal: Description — the appeal's own content, in the GHH type. */
.ght.apst { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--ght-line); background: #fff; }
.ght .apst__h { margin-bottom: 28px; }
.ght .apst__body { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); }
/* the description's own boxed containers line up with the page */
.ght .apst__body > .elementor > .e-con.e-parent { --content-width: min(var(--ght-max), 100%); --padding-left: var(--ght-pad); --padding-right: var(--ght-pad); }
/* prose rules skip SkyDonate's Daily Giving, which brings its own type and centring, and the page
   sections placed in a description (shared blocks such as "Our promise"), which bring their own */
.ght .apst__body :is(h2, h3, h4):not(.skd-dg *, .apst__body .ght *) { margin: 0 0 .5em; font-family: var(--ght-f); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); }
.ght .apst__body h2:not(.skd-dg *, .apst__body .ght *) { font-size: clamp(28px, 2.8vw, 40px); }
.ght .apst__body h3:not(.skd-dg *, .apst__body .ght *) { font-size: 24px; }
.ght .apst__body p:not(.skd-dg *, .apst__body .ght *) { margin: 0 0 1em; }
/* a container holding a page section runs edge to edge; the section keeps its own band and width */
.ght .apst__body .e-con.e-parent:has(> .elementor-widget-shortcode .ght, > .elementor-widget :is(.ght.sec, .ght.phero)) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; }
/* a description built of page sections from its page hero down (Fidyah): it is the page, so the
   description's own padding and top rule go */
.ght.apst:has(.apst__body > .elementor > .e-con:first-child > .elementor-widget-ght_pagehero) { padding: 0; border-top: 0; }
/* a description that is only Daily Giving: its full-height sky is the page, so no section padding or rule */
.ght.apst:has(.skd-dg--fullheight) { padding: 0; border-top: 0; }
/* …and edge to edge, from the top of the screen (behind the floating header) to the bottom, as on the
   live site (user: "the blue design must be full height and width like the original site") */
.ght .apst__body .e-con.e-parent:has(.skd-dg--fullheight) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; --padding-top: 0px; --padding-bottom: 0px; --margin-top: 0px; margin-top: 0; }
body.ght-site .ght-site-header ~ main.site-main.ght-appeal-page:has(.skd-dg--fullheight) { padding-top: 0; }
/* the notices box holds an empty WooCommerce wrapper, so it's never :empty; with no notice in it, its
   16px top margin would push the whole page (and the sky) down out from under the header */
.ght-appeal-page:has(.skd-dg--fullheight) .ght-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)) { margin: 0; }
.ght .apst__body .skd-dg--fullheight { border-radius: 0; }
/* the sky runs under the header, so each step's content starts clear of it (the amount card touched it) */
.ght .apst__body .skd-dg--fullheight .skd-dg__step { box-sizing: border-box; padding-top: calc(var(--ght-tuck, 20px) + 24px); }
/* ght-base's `.ght p { margin: 0 }` outranks SkyDonate's centring of the intro line */
.ght .skd-dg__welcome-text { margin-left: auto; margin-right: auto; }
.ght .apst__body a:not(.skd-dg *, .apst__body .ght *) { color: var(--ght-blue-d); }
.ght .apst__body ul:not(.skd-dg *, .apst__body .ght *) { padding-left: 1.2em; list-style: disc; }
/* story and film (the appeal template's column) */
.ght.apst--parts .apst__text { max-width: 66ch; font-size: 17.5px; }
.ght.apst--parts .apst__text h3, .ght.apst--parts .apst__text h4 { margin-top: 1.4em; font-size: 19px; }
.ght .apst__pts { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.ght .rich .apst__pts { padding-left: 0; list-style: none; }
.ght .apst__pts li { position: relative; margin: 0; padding: 14px 16px 14px 50px; border-radius: 14px; background: var(--ght-mist); font-size: 16px; line-height: 1.5; }
.ght .apst__pts li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--ght-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ght .apst__pts li b { display: block; color: var(--ght-ink); }
/* gifts with a price ("Water tanker £120"): pressing one puts the amount in the donation form */
.ght .apst__gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 8px; padding: 0; list-style: none; }
.ght .rich .apst__gifts { padding-left: 0; list-style: none; }
.ght .apst__gifts li { display: flex; margin: 0; }
.ght .apst__gift, .ght .apst__gift:hover, .ght .apst__gift:focus { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc"; align-content: start; gap: 6px 12px; width: 100%; margin: 0; padding: 18px; border: 1.5px solid var(--ght-line); border-radius: 16px; background: #fff; color: var(--ght-ink); font: inherit; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ght-ease); }
.ght .apst__gift:hover { border-color: var(--ght-blue); box-shadow: 0 16px 34px -24px rgba(6, 20, 30, .5); transform: translateY(-2px); }
.ght .apst__gift.is-on { border-color: var(--ght-blue); box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght .apst__gift b { grid-area: name; font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.ght .apst__price { grid-area: price; font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ght-blue-d); }
.ght .apst__gift small { grid-area: desc; font-size: 14px; line-height: 1.5; color: var(--ght-mute); }
/* progress under the heading: raised of target, a bar marked at each quarter, three totals */
/* first in the section; a hairline parts it from "About this appeal" below */
.ght .apst__prog { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ght-line); container-type: inline-size; }
.ght .apst__ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ght .apst__raised { display: grid; gap: 2px; margin: 0; }
.ght .apst__raised b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); }
.ght .apst__raised > span { font-size: 14px; color: var(--ght-mute); }
.ght .apst__pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ght .apst__bar { position: relative; height: 8px; border-radius: 999px; background: var(--ght-mist); box-shadow: inset 0 0 0 1px var(--ght-line); overflow: hidden; }
.ght .apst__fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--ght-blue); overflow: hidden; }
/* in view (story.js): the bar fills from the start while the amount rolls in, a light passes along it,
   and the badge settles when it's done. Without the script, or with reduced motion, it's simply full. */
.ght .apst__prog.is-armed .apst__fill { width: 0; transition: none; }
.ght .apst__prog.is-in .apst__fill { transition: width 1.8s cubic-bezier(.22, .8, .24, 1); }
.ght .apst__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); }
.ght .apst__prog.is-in .apst__fill::after { animation: ght-apst-sheen 1.4s .5s ease-out both; }
@keyframes ght-apst-sheen { to { transform: translateX(100%); } }
.ght .apst__prog.is-done .apst__pill { animation: ght-apst-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ght-apst-pop { 40% { transform: scale(1.08); } }
/* the raised amount as an odometer: each digit column is sized by an invisible copy of its final digit
   (Onest's own spacing), and its 0–9 strip is parked on that digit (--to = 10 + digit) */
.ght .apst__od { --lh: 1.1em; display: inline-flex; align-items: flex-start; }
.ght .apst__oc { position: relative; display: block; height: var(--lh); clip-path: inset(0 -.3em); }
.ght .apst__oc > i { display: block; font-style: normal; line-height: var(--lh); visibility: hidden; }
.ght .apst__os { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); }
.ght .apst__os span { display: block; height: var(--lh); line-height: var(--lh); text-align: center; }
.ght .apst__ox { display: block; line-height: var(--lh); }
.ght .apst__prog.is-armed .apst__os { transform: translate(-50%, 0); transition: none; }
.ght .apst__prog.is-rolling .apst__os { transition: transform var(--dur, 1.6s) cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); }
.ght .apst__prog.is-rolling .apst__oc { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
@media (prefers-reduced-motion: reduce) {
	.ght .apst__prog.is-armed .apst__fill { width: var(--p); }
	.ght .apst__prog.is-armed .apst__os { transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); }
	.ght .apst__fill::after, .ght .apst__prog.is-done .apst__pill { animation: none; }
}
.ght .apst__bar i { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: rgba(11, 38, 56, .18); }
.ght .apst__marks { position: relative; display: flex; justify-content: space-between; height: 16px; margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--ght-mute); }
.ght .apst__marks span[style] { position: absolute; top: 0; transform: translateX(-50%); }
.ght .apst__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ght .apst__stat { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--ght-line); border-radius: 12px; background: #fff; }
.ght .apst__si { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #FDF1DA; color: #A86A06; }
.ght .apst__si svg { width: 16px; height: 16px; stroke-width: 2; }
/* Onest's own (proportional) figures: its fixed-width ones spread "£147,470" apart (user) */
.ght .apst__stat > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ght .apst__stat b { font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ght-ink); white-space: nowrap; }
.ght .apst__stat small { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--ght-mute); }
/* narrow column: no room for the icon beside "£19,239", so the totals go without it */
@container (max-width: 480px) {
	.ght .apst__si { display: none; }
}
@media (max-width: 760px) {
	.ght .apst__marks span[style] { display: none; } /* 0 and the target only */
}
.ght .apst__film { margin-top: 28px; }
.ght .apst__film .pmedia { border-radius: 20px; overflow: hidden; }
.ght .apst__film .gtv { aspect-ratio: 16 / 9; }
.ght .apst__body iframe { max-width: 100%; border: 0; border-radius: 18px; }
.ght .apst__body .elementor-widget-video .elementor-wrapper { overflow: hidden; border-radius: 22px; }

/* ght-faq */
/* GHH Questions — heading (and topics) left, questions right. */
.ght .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 96px); }
.ght .faq__side { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); }
.ght .faq__side .h2 { font-size: clamp(32px, 3.4vw, 52px); }
.ght .faq__side .lead { margin-top: 18px; }
.ght .faq__btns { margin-top: 26px; }
/* the questions: the design system's accordion (DESIGN-SYSTEM.md) — one card, hairline rows, a
   chevron in a ringed circle that turns when open, the open question in blue */
.ght .faq__list { overflow: hidden; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; }
.ght .faq__item + .faq__item { border-top: 1px solid var(--ght-line); }
.ght .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; font-family: var(--ght-ui); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ght-ink); list-style: none; cursor: pointer; transition: background-color .2s, color .2s; }
.ght .faq__q::-webkit-details-marker { display: none; }
.ght .faq__q:hover { background: var(--ght-page); }
.ght .faq__q i { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; color: var(--ght-ink); transition: border-color .2s, background-color .2s; }
.ght .faq__q i::before { content: ""; position: absolute; inset: 0; background: currentColor; -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s var(--ght-ease); }
.ght .faq__item[open] .faq__q { color: var(--ght-blue-d); }
.ght .faq__item[open] .faq__q i { border-color: var(--ght-blue); color: var(--ght-blue-d); }
.ght .faq__item[open] .faq__q i::before { transform: rotate(180deg); }
.ght .faq__a { max-width: 68ch; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ght-ink-2); animation: ght-faq-open .25s var(--ght-ease); }
@keyframes ght-faq-open { from { opacity: 0; transform: translateY(-4px); } }
/* dark sections: the same card, on the dark */
.ght.t-night .faq__list { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.ght.t-night .faq__item + .faq__item { border-color: rgba(255, 255, 255, .14); }
.ght.t-night .faq__q { color: #fff; }
.ght.t-night .faq__q:hover { background: rgba(255, 255, 255, .04); }
.ght.t-night .faq__q i { border-color: rgba(255, 255, 255, .24); background: transparent; color: #fff; }
.ght.t-night .faq__item[open] .faq__q { color: var(--ght-gold); }
.ght.t-night .faq__item[open] .faq__q i { border-color: var(--ght-gold); color: var(--ght-gold); }
@media (min-width: 961px) { .ght .faq__q { font-size: 17px; } }

/* topics list (guide pages) */
.ght .faq__nav { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ght-line); }
.ght .faq__navt { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ght-mute); }
.ght .faq__nav ul { display: grid; gap: 2px; }
.ght .faq__nav a { display: block; padding: 8px 12px; margin-left: -12px; border-radius: 10px; font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ght-ink-2); transition: background-color .2s, color .2s; }
.ght .faq__nav a:hover { background: var(--ght-mist); color: var(--ght-ink); }
.ght .faq__nav a[aria-current] { background: var(--ght-ink); color: #fff; }

@media (max-width: 960px) {
	.ght .faq__grid { grid-template-columns: minmax(0, 1fr); }
	.ght .faq__side { position: static; }
	/* topics move under the questions on phones */
	.ght.faq--nav .faq__grid { display: flex; flex-direction: column; }
	.ght.faq--nav .faq__nav { order: 3; }
	.ght.faq--nav .faq__side { display: contents; }
	.ght.faq--nav .faq__list { order: 2; }
}

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

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