/* App-style Donate CTA — donation form layouts 1 and 3.
   Mirrors the campaign-detail button from GHH-App: blue slate
   gradient pill with "Donate" on the left and amount + currency
   code + chevron on the right.

   The button's inner markup is rewritten server-side by
   Skydonate_Donation_Form_App_CTA, so the new spans are already in
   the HTML on first paint — no FOUC hacks needed here. The JS only
   updates the amount / code text and the `is-empty` modifier in
   response to user input. */

/* Gradient end-stops are CSS variables set on :root by
   Skydonate_Donation_Form_App_CTA::print_color_vars(). Fallbacks
   here only apply if the inline <style> failed to load. */

/* Layout-only — background / gradient is left to the existing
   SkyDonate button styling so the admin's Accent Color settings
   come through. */

.donation-form-wrapper button.form-submit-button,
.donation-form-wrapper .form-submit-button,
.skydonate-quick-donation-widget button.form-submit-button,
.skydonate-quick-donation-widget .form-submit-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    text-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1 !important;
    transition: filter 160ms ease, transform 80ms ease !important;
}

/* Once the server-side rewrite confirms (button has .skd-app-cta),
   suppress the default font-size so it doesn't compete with the
   per-span clamp() values. Pre-rewrite (fallback) we leave font-size
   alone so the original "Donate and Support" label still shows. */
.donation-form-wrapper .form-submit-button.skd-app-cta,
.skydonate-quick-donation-widget .form-submit-button.skd-app-cta {
    font-size: 0 !important;
}

.donation-form-wrapper .form-submit-button:hover,
.donation-form-wrapper .form-submit-button:focus,
.skydonate-quick-donation-widget .form-submit-button:hover,
.skydonate-quick-donation-widget .form-submit-button:focus {
    filter: brightness(1.08) !important;
    color: #ffffff !important;
}

.donation-form-wrapper .form-submit-button:active,
.skydonate-quick-donation-widget .form-submit-button:active {
    transform: translateY(1px);
}

.donation-form-wrapper .form-submit-button.is-empty,
.skydonate-quick-donation-widget .form-submit-button.is-empty {
    filter: grayscale(0.6) brightness(0.95) !important;
}

.donation-form-wrapper .form-submit-button:disabled,
.donation-form-wrapper .form-submit-button.loading-running,
.skydonate-quick-donation-widget .form-submit-button:disabled,
.skydonate-quick-donation-widget .form-submit-button.loading-running {
    cursor: progress !important;
    opacity: 0.85 !important;
}

/* Hide original button children (credit-card icon, "Donate And
   Support" text-span, arrow icon) — anything that isn't one of our
   new spans. Gated on `.skd-app-cta` so this only fires after the
   server-side or JS rewrite confirms; otherwise the original button
   content still shows as a graceful fallback. */

.donation-form-wrapper .form-submit-button.skd-app-cta > *:not([class*="skd-app-cta__"]),
.skydonate-quick-donation-widget .form-submit-button.skd-app-cta > *:not([class*="skd-app-cta__"]) {
    display: none !important;
}

/* ── Inner spans (rendered server-side; styled here) ────── */

/* Fluid type — clamp(min, preferred, max). Auto-scales between
   the min (small phone) and max (desktop) without media queries.
   The preferred (vw-based) value lets the browser pick a size in
   between for everything in the middle. */

.skd-app-cta__label {
    color: inherit !important;
    font-size: clamp(13px, 2.6vw, 16px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

.skd-app-cta__spacer {
    flex: 1 1 auto !important;
    min-width: 6px !important;
}

.skd-app-cta__amount {
    color: inherit !important;
    font-size: clamp(15px, 3.6vw, 20px) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: baseline !important;
}

.skd-app-cta__code {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: clamp(9px, 2.2vw, 12px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin-left: clamp(3px, 1vw, 6px) !important;
    margin-right: clamp(4px, 1.2vw, 7px) !important;
    display: inline-flex !important;
    align-items: baseline !important;
}

.is-empty .skd-app-cta__code {
    color: rgba(75, 90, 100, 0.7) !important;
}

.skd-app-cta__chevron {
    color: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(16px, 3.6vw, 22px) !important;
    height: clamp(16px, 3.6vw, 22px) !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

.skd-app-cta__chevron svg {
    width: 100% !important;
    height: 100% !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    display: block !important;
}

/* Quick Donate sits in a narrow ~25% column on desktop, so the
   donation-form-button sizes overflow. Use smaller fluid scales
   tuned for that container, plus tighter gaps and padding. */
.skydonate-quick-donation-widget .form-submit-button {
    padding: 0 12px !important;
    gap: 4px !important;
}
.skydonate-quick-donation-widget .skd-app-cta__label {
    font-size: clamp(11px, 1.2vw, 14px) !important;
    letter-spacing: 0.1px !important;
}
.skydonate-quick-donation-widget .skd-app-cta__amount {
    font-size: clamp(12px, 1.5vw, 16px) !important;
}
.skydonate-quick-donation-widget .skd-app-cta__code {
    font-size: clamp(8px, 0.9vw, 10px) !important;
    margin-left: 3px !important;
    margin-right: 4px !important;
}
.skydonate-quick-donation-widget .skd-app-cta__chevron {
    width: clamp(14px, 1.6vw, 18px) !important;
    height: clamp(14px, 1.6vw, 18px) !important;
}

/* When the QD widget stacks (≤576px the column goes full width
   in quick-donation.css) the button has room again — restore the
   donation-form scales. */
@media (max-width: 576px) {
    .skydonate-quick-donation-widget .skd-app-cta__label {
        font-size: clamp(13px, 2.6vw, 16px) !important;
    }
    .skydonate-quick-donation-widget .skd-app-cta__amount {
        font-size: clamp(15px, 3.6vw, 20px) !important;
    }
    .skydonate-quick-donation-widget .skd-app-cta__code {
        font-size: clamp(9px, 2.2vw, 12px) !important;
    }
    .skydonate-quick-donation-widget .skd-app-cta__chevron {
        width: clamp(16px, 3.6vw, 22px) !important;
        height: clamp(16px, 3.6vw, 22px) !important;
    }
}

/* Loading — fade the dynamic content rather than hide it */
.loading-running .skd-app-cta__amount,
.loading-running .skd-app-cta__code,
.loading-running .skd-app-cta__chevron {
    opacity: 0.4 !important;
}

/* ── Responsive — clamp() handles type scaling; these only
   tweak button geometry on phones. ───────────────────────────── */

@media (max-width: 560px) {
    .donation-form-wrapper .form-submit-button,
    .skydonate-quick-donation-widget .form-submit-button {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 400px) {
    .donation-form-wrapper .form-submit-button,
    .skydonate-quick-donation-widget .form-submit-button {
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        gap: 4px !important;
    }
}

@media (max-width: 340px) {
    /* Ultra-narrow — drop the currency code so amount + chevron fit */
    .skd-app-cta__code { display: none !important; }
}