/* ─── PayPal Donation & InGame Currency — Frontend Styles ──────────────────── */
/* Adaptive: Respects theme fonts, backgrounds and dark mode */

:root {
    --pdig-primary: #6C63FF;
    --pdig-accent:  #FF6584;
    --pdig-radius:  14px;
    --pdig-shadow:  0 4px 24px rgba(0,0,0,.10);
    --pdig-transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Widget shell ────────────────────────────────────────────────────────────── */
.pdig-widget {
    font-family: inherit;
    background: color-mix(in srgb, currentColor 4%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: var(--pdig-radius);
    padding: 28px 28px 24px;
    max-width: 560px;
    box-shadow: var(--pdig-shadow);
    margin: 24px 0;
    position: relative;
    overflow: hidden;
}

/* Subtle gradient top strip */
.pdig-widget::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pdig-primary), var(--pdig-accent));
    border-radius: var(--pdig-radius) var(--pdig-radius) 0 0;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.pdig-widget-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.pdig-widget-icon {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
}
.pdig-widget-header h3 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
}
.pdig-widget-header p {
    margin: 0;
    opacity: .75;
    font-size: .9rem;
    line-height: 1.4;
}

/* ── Amount grid ─────────────────────────────────────────────────────────────── */
.pdig-amount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.pdig-amount-btn {
    font-family: inherit;
    background: color-mix(in srgb, var(--pdig-primary) 10%, transparent);
    border: 2px solid color-mix(in srgb, var(--pdig-primary) 30%, transparent);
    border-radius: 10px;
    padding: 10px 8px;
    cursor: pointer;
    transition: var(--pdig-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: .95rem;
    font-weight: 600;
    color: inherit;
    text-align: center;
}
.pdig-amount-btn small {
    font-size: .72rem;
    font-weight: 400;
    opacity: .75;
}
.pdig-amount-btn:hover,
.pdig-amount-btn:focus-visible {
    background: color-mix(in srgb, var(--pdig-primary) 20%, transparent);
    border-color: var(--pdig-primary);
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pdig-primary) 30%, transparent);
}
.pdig-amount-btn.selected {
    background: var(--pdig-primary);
    border-color: var(--pdig-primary);
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--pdig-primary) 40%, transparent);
}
.pdig-amount-btn.selected small { opacity: .85; }

/* ── Custom amount input ─────────────────────────────────────────────────────── */
.pdig-custom-amount {
    margin-bottom: 18px;
}
.pdig-custom-amount label {
    display: block;
    font-size: .84rem;
    opacity: .7;
    margin-bottom: 6px;
}
.pdig-input-row {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color var(--pdig-transition);
    max-width: 220px;
}
.pdig-input-row:focus-within {
    border-color: var(--pdig-primary);
}
.pdig-input-row input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    outline: none;
    min-width: 0;
}
.pdig-currency-label {
    padding: 10px 12px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.pdig-conversion-preview {
    font-size: .82rem;
    margin-top: 6px;
    opacity: .75;
    min-height: 18px;
}

/* ── PayPal container ────────────────────────────────────────────────────────── */
.pdig-paypal-container {
    margin-top: 6px;
}

/* ── Messages ───────────────────────────────────────────────────────────────── */
.pdig-message {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    animation: pdig-fadein .3s;
}
.pdig-message.success {
    background: color-mix(in srgb, #22c55e 15%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
    color: #15803d;
}
.pdig-message.error {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
    color: #b91c1c;
}

@media (prefers-color-scheme: dark) {
    .pdig-message.success { color: #86efac; }
    .pdig-message.error   { color: #fca5a5; }
}

/* ── Bonus banner / login hint ───────────────────────────────────────────────── */
.pdig-bonus-banner,
.pdig-login-hint {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .88rem;
    margin-bottom: 16px;
    border: 1px dashed;
}
.pdig-bonus-banner {
    background: color-mix(in srgb, var(--pdig-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--pdig-accent) 40%, transparent);
    color: inherit;
}
.pdig-login-hint {
    background: color-mix(in srgb, var(--pdig-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--pdig-primary) 35%, transparent);
}
.pdig-login-hint a { color: var(--pdig-primary); font-weight: 600; }

/* ── Balance box ─────────────────────────────────────────────────────────────── */
.pdig-balance-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: color-mix(in srgb, var(--pdig-primary) 10%, transparent);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: .9rem;
}
.pdig-balance-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pdig-primary);
}

/* ── Inline balance [pdig_balance] ───────────────────────────────────────────── */
.pdig-balance-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .9em;
}
.pdig-balance-icon { font-size: 1.1em; }

/* ── Config warning ──────────────────────────────────────────────────────────── */
.pdig-config-warning {
    font-size: .85rem;
    color: #b45309;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
}
.pdig-config-warning a { color: inherit; text-decoration: underline; }

/* ── Animation ───────────────────────────────────────────────────────────────── */
@keyframes pdig-fadein {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0);   }
}

/* ── Loading spinner ─────────────────────────────────────────────────────────── */
.pdig-loading {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: var(--pdig-primary);
    border-radius: 50%;
    animation: pdig-spin .7s linear infinite;
    vertical-align: middle;
}
@keyframes pdig-spin { to { transform: rotate(360deg); } }

/* ── Pay button ──────────────────────────────────────────────────────────────── */
.pdig-pay-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--pdig-transition);
    margin-top: 8px;
}
.pdig-pay-btn--donation {
    background: #003087;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,48,135,.28);
}
.pdig-pay-btn--donation:hover:not(:disabled) {
    background: #001f5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,48,135,.38);
}
.pdig-pay-btn--currency {
    background: #FFD140;
    color: #111;
    box-shadow: 0 4px 16px rgba(255,193,7,.32);
}
.pdig-pay-btn--currency:hover:not(:disabled) {
    background: #f0c000;
    transform: translateY(-2px);
}
.pdig-pay-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.pdig-paypal-info { text-align:center; font-size:.75rem; opacity:.5; margin:6px 0 0; }
.pdig-rate-info { font-size:.84rem; opacity:.7; margin-bottom:14px; padding:8px 12px;
    background:color-mix(in srgb, currentColor 5%, transparent); border-radius:8px; }