/*
 * DonateFlow donation panel — a self-contained design system. Every
 * selector is scoped under .dflow-panel and every value is either a
 * literal or one of this file's own custom properties, never a variable
 * from the active theme — this has to look right on any site this
 * plugin is installed on, not just this one.
 */

.dflow-panel {
    --dflow-accent: #0F5F4D;
    --dflow-accent-soft: color-mix(in srgb, var(--dflow-accent) 12%, white);
    --dflow-ink: #142521;
    --dflow-muted: #5B6B67;
    --dflow-border: #E1E8E5;
    --dflow-surface: #FFFFFF;
    --dflow-radius: 16px;
    /* Only the outer card uses this — --dflow-surface above stays solid
       white, since the amount buttons and custom-amount input both use
       it too, and a translucent background there would make their dark
       text hard to read against whatever's behind the panel (a dark
       hero image here, but this file has to work on any background this
       plugin ends up placed over). High opacity (85%) so the card still
       reads as white with dark text staying fully legible — the blur is
       what gives it the frosted-glass depth, not visible see-through. */
    --dflow-glass-surface: rgba(255, 255, 255, 0.85);
    --dflow-glass-border: rgba(255, 255, 255, 0.6);

    box-sizing: border-box;
    max-width: 460px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--dflow-glass-border);
    border-radius: var(--dflow-radius);
    background: var(--dflow-glass-surface);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 18px 46px rgba(20, 37, 33, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--dflow-ink);
}

.dflow-panel *,
.dflow-panel *::before,
.dflow-panel *::after {
    box-sizing: inherit;
}

.dflow-panel-head {
    margin-bottom: 24px;
    text-align: center;
}

.dflow-panel-heading {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dflow-ink);
}

.dflow-panel-subheading {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dflow-muted);
}

.dflow-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.dflow-amount-btn {
    min-height: 54px;
    padding: 10px 8px;
    border: 2px solid var(--dflow-border);
    border-radius: 12px;
    background: var(--dflow-surface);
    color: var(--dflow-ink);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.dflow-amount-btn:hover {
    border-color: var(--dflow-accent);
    transform: translateY(-1px);
}

.dflow-amount-btn:focus-visible {
    outline: 3px solid var(--dflow-accent-soft);
    outline-offset: 2px;
}

.dflow-amount-btn.is-selected {
    border-color: var(--dflow-accent);
    background: var(--dflow-accent-soft);
    color: var(--dflow-accent);
}

.dflow-custom-amount {
    margin-bottom: 22px;
}

.dflow-custom-amount label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dflow-ink);
}

.dflow-input-prefix {
    position: relative;
}

.dflow-input-prefix span {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dflow-muted);
    font-weight: 700;
    pointer-events: none;
}

.dflow-custom-amount-input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px 12px 32px;
    border: 2px solid var(--dflow-border);
    border-radius: 12px;
    background: var(--dflow-surface);
    color: var(--dflow-ink);
    font-size: 1rem;
    font-family: inherit;
    appearance: textfield;
}

.dflow-custom-amount-input::-webkit-outer-spin-button,
.dflow-custom-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dflow-custom-amount-input:focus {
    outline: 0;
    border-color: var(--dflow-accent);
    box-shadow: 0 0 0 4px var(--dflow-accent-soft);
}

.dflow-custom-amount-hint {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--dflow-muted);
}

.dflow-custom-amount-input.is-active {
    border-color: var(--dflow-accent);
}

.dflow-donate-button {
    width: 100%;
    min-height: 56px;
    padding: 14px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--dflow-accent);
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.dflow-donate-button:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.dflow-donate-button:disabled {
    background: var(--dflow-border);
    color: var(--dflow-muted);
    cursor: not-allowed;
}

@media (max-width: 420px) {
    .dflow-panel {
        padding: 24px 20px;
    }

    .dflow-amount-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}