/* ==========================================================================
 * 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.
 *
 * .wq-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 ── */
.wq .wq-sd--dock .donation-form-wrapper { width: fit-content; max-width: 100%; }
.wq .wq-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(10, 43, 39, .45); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: none; color: #fff; }
.wq .wq-sd--dock .donation-box-title { display: none; }

/* Once / Monthly */
.wq .wq-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); }
.wq .wq-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(--wqx-f); font-size: 15px; font-weight: 700; line-height: 1; box-shadow: none; cursor: pointer; }
.wq .wq-sd--dock .donation-type-switch .donation-type-btn::before, .wq .wq-sd--dock .donation-type-switch .donation-type-btn::after { display: none; }
.wq .wq-sd--dock .donation-type-switch .donation-type-btn.active { background: #fff; color: var(--wqx-ink); }
.wq .wq-sd--dock .donation-type-btn .heart-icon { display: none; }

/* amounts */
.wq .wq-sd--dock .donation-amount-groups { display: contents; }
.wq .wq-sd--dock .donation-amount-group { display: none; }
.wq .wq-sd--dock .donation-amount-group.active { display: block; }
.wq .wq-sd--dock .donation-buttons { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.wq .wq-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(--wqx-f); font-size: 17px; font-weight: 800; box-shadow: none; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.wq .wq-sd--dock .donation-buttons .donation-btn::before, .wq .wq-sd--dock .donation-buttons .donation-btn::after { display: none; }
.wq .wq-sd--dock .donation-buttons .donation-btn:hover { border-color: #fff; background-color: transparent; color: #fff; }
.wq .wq-sd--dock .donation-buttons .donation-btn.active { border-color: #fff; background-color: #fff; color: var(--wqx-ink); }
.wq .wq-sd--dock .donation-buttons .donation-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.wq .wq-sd--dock .donation-btn .price, .wq .wq-sd--dock .donation-btn .currency-symbol { margin: 0; padding: 0; color: inherit; font: inherit; line-height: 1; }

/* custom amount */
.wq .wq-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; }
.wq .wq-sd--dock .donation-amount-groups .donation-custom:focus-within { border-color: #fff; }
/* the £ (SkyDonate lets it switch currency: the select sits invisibly over it) */
.wq .wq-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; }
.wq .wq-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; }
.wq .wq-sd--dock .donation-custom .skydonate-currency-select { inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wq .wq-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(--wqx-f); font-size: 17px; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.wq .wq-sd--dock .donation-custom input.custom-amount-input::-webkit-outer-spin-button, .wq .wq-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 */
.wq .wq-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. */
.wq .wq-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(--wqx-btn); background-image: none; box-shadow: none; text-transform: none; transition: background-color .2s, box-shadow .2s !important; }
.wq .wq-sd--dock .donation-form-wrapper .form-submit-button:hover { background: var(--wqx-blue-d); background-image: none; filter: none !important; box-shadow: 0 10px 30px -10px rgba(47, 122, 104, .8); }
.wq .wq-sd--dock .form-submit-button > span { font-family: var(--wqx-f); font-size: 17px; font-weight: 700; color: #fff; text-transform: none; }
.wq .wq-sd--dock .form-submit-button .skd-app-cta__spacer, .wq .wq-sd--dock .form-submit-button .skd-app-cta__code { display: none !important; }
.wq .wq-sd--dock .form-submit-button .skd-app-cta__amount { font-weight: 800; opacity: 1; color: #fff; }
.wq .wq-sd--dock .form-submit-button .skd-app-cta__chevron { display: flex; }
.wq .wq-sd--dock .form-submit-button svg { width: 18px; height: 18px; }
.wq .wq-sd--dock .sky-daily-note:empty { display: none; }

/* notes SkyDonate adds (Zakat, daily dates): small, under the bar */
.wq .wq-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; }
.wq .wq-sd--dock .zakat-applicable i { color: var(--wqx-gold); }

/* phones: a rounded panel, the amounts in a grid */
@media (max-width: 760px) {
	.wq .wq-sd--dock .donation-form-wrapper { width: 100%; }
	.wq .wq-sd--dock form.donation-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; border-radius: 22px; }
	.wq .wq-sd--dock .donation-type-switch { grid-column: 1 / -1; }
	.wq .wq-sd--dock .donation-type-switch .donation-type-btn { flex: 1; justify-content: center; }
	.wq .wq-sd--dock .donation-amount-group.active { grid-column: 1 / -1; }
	.wq .wq-sd--dock .donation-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wq .wq-sd--dock .donation-buttons .donation-btn { min-width: 0; width: 100%; padding: 0 6px; }
	.wq .wq-sd--dock .donation-amount-groups .donation-custom { grid-column: 1 / -1; width: 100%; }
	.wq .wq-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(--wqx-f); }
/* the small currency code after the amount on a donate button: white, not a faded blue (AA) */
.wq .form-submit-button .skd-app-cta__code { color: #fff !important; opacity: 1 !important; }