/* ============================================================
 * Donations widget — gold-on-dark design adapted from
 * E:/AI/web/dist (Astro build) for mmoweb panel context.
 * Nav, lang-switch, paypal-result blocks dropped — those live
 * outside the widget.
 * ============================================================ */

.donate-widget {
    --bg-deep:    #0d1216;
    --bg-card:    #161c20;
    --bg-hover:   #1c2328;
    --bg-input:   #0a0e10;
    --gold:       #c8a650;
    --gold-light: #e2c275;
    --gold-dim:   rgba(200,166,80,0.22);
    --border:     #2a3033;
    --text:       #d8d4c2;
    --text-dim:   #8d8a78;
    --text-muted: #5d5a4e;

    font-family: 'Open Sans', -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--text);
    max-width: 820px;
    margin: 0 auto;
}

.donate-widget *, .donate-widget *::before, .donate-widget *::after {
    box-sizing: border-box;
}

/* PAGE HEADER */
.donate-widget .page-header { text-align: center; margin-bottom: 2.2rem; }
.donate-widget .page-header h1 {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.85rem;
    color: var(--gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 36px rgba(200,166,80,0.3);
    margin: 0;
}
.donate-widget .ornament {
    display: flex; align-items: center; justify-content: center;
    gap: .9rem; margin: .7rem 0 .4rem;
}
.donate-widget .orn-line {
    flex: 1; max-width: 180px; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-dim), transparent);
}
.donate-widget .orn-icon { color: var(--gold); font-size: .85rem; }
.donate-widget .page-header p { color: var(--text-dim); font-size: .85rem; letter-spacing: .3px; margin: 0; }

/* CARD */
.donate-widget .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.75rem 1.75rem 1.5rem;
    margin-bottom: 1.2rem;
    position: relative;
}
.donate-widget .sec-label {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: .7rem;
    color: var(--gold);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    display: flex; align-items: center; gap: .6rem;
}
.donate-widget .sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* INPUTS */
.donate-widget .input-wrap { margin-bottom: 1.3rem; }
.donate-widget .inp-label {
    display: block; font-size: .77rem; color: var(--text-dim);
    margin-bottom: .45rem; letter-spacing: .4px;
}
.donate-widget .inp {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .7rem 1rem;
    color: var(--text);
    font-size: .95rem;
    outline: none;
    transition: border-color .12s;
}
.donate-widget .inp:focus { border-color: var(--gold); }
.donate-widget .inp::placeholder { color: var(--text-muted); }
.donate-widget .inp.err { border-color: #d97a7a; }
.donate-widget .err-msg { font-size: .72rem; color: #c05555; margin-top: .3rem; display: none; }
.donate-widget .err-msg.show { display: block; }

@keyframes donate-inp-shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
.donate-widget .inp.pulse,
.donate-widget .coin-inp.pulse,
.donate-widget .pay-grid.pulse {
    animation: donate-inp-shake .55s cubic-bezier(.36,.07,.19,.97);
    box-shadow: 0 0 0 3px rgba(192,85,85,.22);
    border-color: #b84444 !important;
}

/* IN-GAME CURRENCY PICKER (multi-currency case) */
.donate-widget .currency-grid {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.donate-widget .currency-tile {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    background: rgba(0,0,0,.42);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 8px;
    cursor: pointer; text-align: center;
    transition: border-color .2s, background .2s, box-shadow .2s;
    color: inherit;
}
.donate-widget .currency-tile:hover {
    border-color: var(--gold-dim);
    background: var(--bg-hover);
}
.donate-widget .currency-tile.on,
.donate-widget .currency-tile:has(input:checked) {
    border-color: var(--gold);
    background: rgba(200,166,80,.09);
    box-shadow: 0 0 12px rgba(200,166,80,.15);
}
.donate-widget .currency-tile input[type="radio"] { display: none; }
.donate-widget .currency-icon {
    width: 40px; height: 40px;
    object-fit: contain;
}
.donate-widget .currency-name {
    font-size: .82rem; font-weight: 600; color: var(--text);
}
.donate-widget .currency-tile.on .currency-name,
.donate-widget .currency-tile:has(input:checked) .currency-name {
    color: var(--gold-light);
}
.donate-widget .currency-short {
    font-size: .65rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px;
}

/* SERVER GROUPS */
.donate-widget .server-groups {
    display: grid; gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    /* CSS Grid: items in same row auto-stretch to tallest sibling */
    grid-auto-rows: 1fr;
}
@media (max-width: 560px) {
    .donate-widget .server-groups { grid-template-columns: 1fr; grid-auto-rows: auto; }
}
.donate-widget .server-group {
    background: rgba(0,0,0,.28);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    /* Force group children to consume full cell height */
    display: flex;
    flex-direction: column;
}
.donate-widget .group-rate {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.35rem; font-weight: 700; color: var(--gold);
    text-align: center; margin-bottom: 8px; line-height: 1;
}
.donate-widget .group-btns {
    display: flex; gap: 5px;
    /* Fill remaining vertical space so buttons stretch equally tall */
    flex: 1;
    align-items: stretch;
}
.donate-widget .srv-btn {
    flex: 1; min-width: 0;
    background: rgba(0,0,0,.42);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .55rem .3rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s, box-shadow .2s;
    color: inherit;
    font-family: inherit;
    /* Center variant text vertically regardless of wrapping */
    display: flex;
    align-items: center;
    justify-content: center;
}
.donate-widget .srv-btn:hover { border-color: var(--gold-dim); background: var(--bg-hover); }
.donate-widget .srv-btn.on {
    border-color: var(--gold);
    background: rgba(200,166,80,.09);
    box-shadow: 0 0 12px rgba(200,166,80,.15);
}
.donate-widget .srv-variant {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--text-dim); transition: color .2s;
}
.donate-widget .srv-btn:hover .srv-variant { color: var(--text); }
.donate-widget .srv-btn.on .srv-variant { color: var(--gold-light); }

/* COIN AMOUNT */
.donate-widget .coin-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; }
.donate-widget .coin-inp {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .7rem 1rem;
    color: var(--gold-light);
    font-size: 1.15rem; font-weight: 600;
    outline: none; width: 100%;
    transition: border-color .12s;
    -moz-appearance: textfield;
}
.donate-widget .coin-inp::-webkit-inner-spin-button,
.donate-widget .coin-inp::-webkit-outer-spin-button { -webkit-appearance: none; }
.donate-widget .coin-inp:focus { border-color: var(--gold); }
.donate-widget .coin-inp.err { border-color: #d97a7a; }
.donate-widget .coin-unit {
    display: flex; align-items: center; gap: .35rem;
    color: var(--text-dim); font-size: .8rem; white-space: nowrap;
}

/* SLIDER */
.donate-widget .slider-wrap { margin-top: .9rem; }
.donate-widget .range {
    -webkit-appearance: none; width: 100%; height: 4px;
    background: rgba(200,166,80,.14);
    border-radius: 2px; outline: none; cursor: pointer;
}
.donate-widget .range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px;
    background: var(--gold); border-radius: 50%; cursor: pointer;
    box-shadow: 0 0 8px rgba(200,166,80,.55);
    transition: transform .1s;
}
.donate-widget .range::-webkit-slider-thumb:hover { transform: scale(1.25); }
.donate-widget .range::-moz-range-thumb {
    width: 18px; height: 18px; background: var(--gold);
    border-radius: 50%; cursor: pointer; border: none;
    box-shadow: 0 0 8px rgba(200,166,80,.55);
}
.donate-widget .slider-marks { display: flex; justify-content: space-between; margin-top: .35rem; padding: 0 2px; }
.donate-widget .slider-mark { font-size: .65rem; color: var(--text-muted); }

/* BONUS TIERS */
.donate-widget .tier-strip { display: flex; gap: 6px; margin-top: .85rem; }
.donate-widget .tier {
    flex: 1;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(200,166,80,.15);
    border-radius: 3px;
    padding: .75rem .4rem;
    text-align: center; cursor: default;
    transition: opacity .22s, border-color .22s, box-shadow .22s, background .22s;
}
.donate-widget .tier.dim-row { opacity: .28; }
.donate-widget .tier.active-row {
    border-color: var(--gold);
    background: rgba(200,166,80,.09);
    box-shadow: 0 0 14px rgba(200,166,80,.18);
}
.donate-widget .tier-pct {
    display: block;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1rem; font-weight: 700; color: var(--gold); line-height: 1;
}
.donate-widget .tier.active-row .tier-pct {
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(200,166,80,.4);
}
.donate-widget .tier-range {
    display: block; font-size: .6rem;
    color: var(--text-muted); margin-top: .35rem; white-space: nowrap;
}
.donate-widget .tier.active-row .tier-range { color: var(--text-dim); }

/* BONUS INDICATOR */
.donate-widget .bonus-indicator {
    margin-top: .85rem;
    padding: .5rem .8rem;
    border-radius: 3px;
    font-size: .78rem;
    background: rgba(200,166,80,.05);
    border: 1px solid rgba(200,166,80,.12);
    color: var(--text-muted);
    min-height: 34px;
    display: flex; align-items: center;
    transition: all .25s;
}
.donate-widget .bonus-indicator.active {
    background: rgba(200,166,80,.1);
    border-color: rgba(200,166,80,.3);
    color: var(--gold-light);
}
.donate-widget .bonus-indicator strong { color: var(--gold); margin: 0 .15rem; }

/* PRICE BLOCK */
.donate-widget .price-block {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(200,166,80,.1);
    display: flex; flex-direction: column; gap: .4rem;
}
.donate-widget .price-line {
    display: flex; align-items: baseline; justify-content: flex-end; gap: .5rem;
}
.donate-widget .price-lbl { font-size: .78rem; color: var(--text-dim); }
.donate-widget .price-receive { font-size: .95rem; font-weight: 700; color: var(--text); }
.donate-widget .price-val {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.28rem; font-weight: 700; color: var(--gold-light);
}
.donate-widget .price-cur { font-size: .8rem; color: var(--text-dim); }

/* PAYMENT GRID */
.donate-widget .pay-grid {
    display: grid; gap: .7rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
    .donate-widget .pay-grid { grid-template-columns: repeat(3, 1fr); }
}
.donate-widget .pay-btn {
    background: rgba(0,0,0,.45);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .85rem .9rem;
    cursor: pointer; text-align: left; color: var(--text);
    display: flex; flex-direction: column; gap: .25rem;
    position: relative;
    transition: border-color .2s, background .2s, box-shadow .2s;
    font-family: inherit;
}
.donate-widget .pay-btn:hover { border-color: var(--gold-dim); background: var(--bg-hover); }
.donate-widget .pay-btn.on {
    border-color: var(--gold);
    background: rgba(200,166,80,.08);
    box-shadow: 0 0 18px rgba(200,166,80,.12);
}
.donate-widget .pay-btn.on::after {
    content: '✓';
    position: absolute; top: .55rem; right: .65rem;
    color: var(--gold); font-size: .72rem;
}
.donate-widget .pay-name { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1; }
.donate-widget .pay-btn.on .pay-name { color: var(--gold-light); }
.donate-widget .pay-desc { font-size: .68rem; color: var(--text-muted); }
.donate-widget .pay-badges { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .3rem; }

.donate-widget .badge {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .12rem .42rem; border-radius: 2px;
    font-size: .58rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.donate-widget .b-ru { background: rgba(255,255,255,.07); color: #aaa; border: 1px solid rgba(255,255,255,.14); }
.donate-widget .b-ua { background: rgba(0,90,200,.18); color: #88aaff; border: 1px solid rgba(0,90,200,.38); }
.donate-widget .b-global { background: rgba(40,200,90,.1); color: #66d490; border: 1px solid rgba(40,200,90,.28); }
.donate-widget .b-crypto { background: rgba(255,165,0,.1); color: #ffa040; border: 1px solid rgba(255,165,0,.28); }

.donate-widget .info-box {
    display: flex; gap: .55rem; align-items: flex-start;
    background: rgba(200,166,80,.04);
    border: 1px solid rgba(200,166,80,.12);
    border-radius: 3px;
    padding: .7rem .9rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--text-dim);
    line-height: 1.55;
}
.donate-widget .info-icon { color: var(--gold); flex-shrink: 0; font-style: normal; margin-top: 1px; }

/* SUMMARY */
.donate-widget .sum-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .45rem 0; font-size: .82rem;
    border-bottom: 1px solid rgba(200,166,80,.07);
}
.donate-widget .sum-row:last-of-type { border-bottom: none; }
.donate-widget .sum-lbl { color: var(--text-dim); }
.donate-widget .sum-val { color: var(--text); font-weight: 600; }
.donate-widget .sum-bonus { color: var(--gold); }
.donate-widget .sum-total { margin-top: .6rem; padding-top: .75rem; border-top: 1px solid rgba(200,166,80,.15); }
.donate-widget .sum-total .sum-lbl {
    font-family: 'Cinzel', 'Times New Roman', serif;
    color: var(--text); font-size: .82rem; letter-spacing: 1px;
}
.donate-widget .sum-total .sum-val {
    font-family: 'Cinzel', 'Times New Roman', serif;
    color: var(--gold-light); font-size: 1.18rem;
}

/* SUBMIT */
.donate-widget .btn-pay {
    width: 100%;
    margin-top: 1.4rem;
    padding: .85rem 2rem;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 3px;
    font-family: inherit;
    font-size: .95rem; font-weight: 700;
    color: var(--bg-deep);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.donate-widget .btn-pay:hover {
    background: var(--gold-light); border-color: var(--gold-light);
    box-shadow: 0 4px 14px rgba(200,166,80,.25);
}
.donate-widget .btn-pay:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.donate-widget .pay-err {
    margin-top: .8rem;
    padding: .6rem .9rem;
    background: rgba(192,85,85,.08);
    border: 1px solid rgba(192,85,85,.35);
    border-radius: 4px;
    color: #c05555;
    font-size: .82rem;
}

/* RESPONSIVE */
@media (max-width: 560px) {
    .donate-widget .card { padding: 1.25rem 1rem; }
    .donate-widget .page-header h1 { font-size: 1.4rem; letter-spacing: 2px; }
    .donate-widget .tier-strip { flex-wrap: wrap; }
    .donate-widget .tier { min-width: calc(33.3% - 5px); }
    .donate-widget .tier-range { font-size: .55rem; }
}