/* =================================================================
   DONATE OVERLAY V30 — sobrescreve visualmente a página /doar/
   Mantém TODA a lógica funcional (Stripe, MP, PIX) intacta.
   Apenas alinha o visual com o DNA premium V30 das outras 3 páginas.
   ================================================================= */

/* Reset background */
body.bs-doar-page,
body.bs-doar-page .donation-page {
    background:
        radial-gradient(70% 60% at 80% 0%, rgba(0, 195, 226, 0.10) 0%, transparent 60%),
        radial-gradient(60% 50% at 10% 100%, rgba(255, 213, 74, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, #050a14 0%, #02060d 100%) !important;
}

/* Header */
body.bs-doar-page .donation-header h1 {
    font-size: clamp(32px, 5vw, 52px) !important;
    text-transform: none !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #fff 0%, #a8e8f4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.bs-doar-page .donation-header h1 span {
    background: linear-gradient(135deg, #ffd54a 0%, #ff9800 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.bs-doar-page .donation-header p {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: clamp(14px, 1.5vw, 17px) !important;
    line-height: 1.55 !important;
}

/* Adiciona eyebrow PIX antes do título */
body.bs-doar-page .donation-header::before {
    content: "● APOIE A COMUNIDADE";
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 213, 74, 0.12);
    border: 1px solid rgba(255, 213, 74, 0.4);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ffd54a;
    margin-bottom: 18px;
}

/* Cards genéricos */
body.bs-doar-page .donation-info-card,
body.bs-doar-page .donation-form-card,
body.bs-doar-page .donation-card,
body.bs-doar-page .price-card {
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(0, 195, 226, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8, 17, 31, 0.92) 0%, rgba(4, 10, 20, 0.95) 100%) !important;
    border: 1.5px solid rgba(0, 195, 226, 0.28) !important;
    border-radius: 22px !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 22px 50px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(0, 195, 226, 0.12) !important;
    overflow: hidden !important;
    position: relative !important;
}

body.bs-doar-page .donation-info-card::before,
body.bs-doar-page .donation-form-card::before,
body.bs-doar-page .donation-card::before {
    content: "" !important;
    position: absolute !important;
    top: -1.5px !important;
    left: 24px !important;
    right: 24px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.7), transparent) !important;
}

/* Botões primary */
body.bs-doar-page button[type="submit"],
body.bs-doar-page .donation-btn,
body.bs-doar-page .btn-primary,
body.bs-doar-page .pay-btn,
body.bs-doar-page #stripe-checkout-btn,
body.bs-doar-page .donate-btn-primary {
    background: linear-gradient(135deg, #ffd54a 0%, #ff9800 100%) !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 10px 28px rgba(255, 152, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    transition: all .35s cubic-bezier(.34, 1.56, .64, 1) !important;
    border: 0 !important;
}
body.bs-doar-page button[type="submit"]:hover,
body.bs-doar-page .donation-btn:hover,
body.bs-doar-page .pay-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 36px rgba(255, 152, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Inputs */
body.bs-doar-page input[type="text"],
body.bs-doar-page input[type="email"],
body.bs-doar-page input[type="tel"],
body.bs-doar-page input[type="number"],
body.bs-doar-page select,
body.bs-doar-page textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(0, 195, 226, 0.22) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 14px 18px !important;
    transition: all .25s ease !important;
}
body.bs-doar-page input:focus,
body.bs-doar-page select:focus,
body.bs-doar-page textarea:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.14), 0 0 22px rgba(0, 195, 226, 0.22) !important;
    outline: none !important;
}

/* Donation amount destaque (preço) */
body.bs-doar-page .donation-price,
body.bs-doar-page .price-amount,
body.bs-doar-page .donation-card .price {
    background: linear-gradient(135deg, #ffd54a 0%, #ff9800 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* PIX QR-like cards/areas */
body.bs-doar-page .pix-qr-container,
body.bs-doar-page .pix-instructions,
body.bs-doar-page .donation-pix-area {
    background: rgba(16, 185, 129, 0.06) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
    border-radius: 16px !important;
}

/* Timer countdown */
body.bs-doar-page .pix-timer,
body.bs-doar-page .countdown-timer {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fcd34d !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

/* Status messages */
body.bs-doar-page .donation-success,
body.bs-doar-page .alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
}
body.bs-doar-page .donation-error,
body.bs-doar-page .alert-error {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
}

/* List items / features */
body.bs-doar-page .donation-features li,
body.bs-doar-page .donation-perks li,
body.bs-doar-page .feature-list li {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 0 !important;
}
body.bs-doar-page .donation-features li::before,
body.bs-doar-page .donation-perks li::before {
    color: #10b981 !important;
}

/* Method tabs (Stripe / MercadoPago / PIX) */
body.bs-doar-page .method-tab,
body.bs-doar-page .gateway-tab,
body.bs-doar-page .payment-method {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    transition: all .25s ease !important;
}
body.bs-doar-page .method-tab.active,
body.bs-doar-page .gateway-tab.active,
body.bs-doar-page .payment-method.active,
body.bs-doar-page .payment-method.selected {
    border-color: #ffd54a !important;
    background: linear-gradient(135deg, rgba(255, 213, 74, 0.16), rgba(255, 152, 0, 0.06)) !important;
    box-shadow: 0 0 0 1px rgba(255, 213, 74, 0.3) inset, 0 12px 28px rgba(255, 152, 0, 0.18) !important;
}

/* Trust badges abaixo do form */
body.bs-doar-page .donation-page::after {
    content: "✓ PIX em segundos    ✓ Ativação imediata    ✓ Acesso vitalício    ✓ Comunidade 24h";
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    margin: 30px auto 0;
    max-width: 760px;
    padding: 18px 14px 0;
    border-top: 1px dashed rgba(0, 195, 226, 0.22);
}

/* Mobile */
@media (max-width: 640px) {
    body.bs-doar-page .donation-page { padding: 30px 0 60px !important; }
    body.bs-doar-page .donation-container { padding: 0 14px !important; }
    body.bs-doar-page .donation-header h1 { font-size: 28px !important; }
    body.bs-doar-page .donation-info-card,
    body.bs-doar-page .donation-form-card,
    body.bs-doar-page .donation-card { border-radius: 18px !important; padding: 22px 18px !important; }
}