:root{
    --rima-bg:#080d06;
    --rima-card:#131d0f;
    --rima-card-2:#1b2815;
    --rima-primary:#9daa4a;
    --rima-primary-strong:#bccb60;
    --rima-primary-dark:#66722f;
    --rima-text:#f5f8ee;
    --rima-muted:#bac4a3;
    --rima-border:rgba(157,170,74,.26);
    --rima-danger:#ef8c8c;
    --rima-success:#74c889;
    --shadow:0 32px 90px rgba(0,0,0,.54);
}

*{box-sizing:border-box}

html{min-height:100%;background:var(--rima-bg)}

body{
    min-height:100vh;
    margin:0;
    color:var(--rima-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        linear-gradient(90deg,rgba(5,9,4,.96),rgba(8,13,6,.84)),
        url('/assets/img/rima-bg.jpg') center/cover fixed no-repeat,
        var(--rima-bg);
}

button,input{font:inherit}

button{cursor:pointer}

[hidden]{display:none!important}

.donation-page{
    width:min(1240px,calc(100% - 36px));
    min-height:100vh;
    margin:0 auto;
    padding:44px 0;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
    gap:64px;
    align-items:center;
}

.donation-intro{padding:36px 10px}

.rima-brand{
    margin-bottom:48px;
    display:flex;
    align-items:center;
    gap:14px;
}

.rima-emblem{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border:1px solid var(--rima-border);
    border-radius:18px;
    color:#111707;
    background:linear-gradient(135deg,var(--rima-primary-strong),var(--rima-primary-dark));
    box-shadow:0 15px 35px rgba(102,114,47,.28);
    font-size:2rem;
    font-weight:950;
}

.rima-brand strong,
.rima-brand span{display:block}

.rima-brand strong{
    font-size:1.26rem;
    letter-spacing:.12em;
}

.rima-brand span{
    margin-top:2px;
    color:var(--rima-muted);
    font-size:.88rem;
}

.eyebrow{
    display:inline-block;
    margin-bottom:12px;
    color:var(--rima-primary-strong);
    font-size:.76rem;
    font-weight:850;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.donation-intro h1{
    max-width:650px;
    margin:0;
    font-size:clamp(3.3rem,7vw,6.7rem);
    line-height:.96;
    letter-spacing:-.055em;
}

.donation-intro>p{
    max-width:570px;
    margin:28px 0 34px;
    color:var(--rima-muted);
    font-size:1.08rem;
    line-height:1.75;
}

.points-info{
    max-width:560px;
    padding:18px 20px;
    display:grid;
    gap:5px;
    border:1px solid var(--rima-border);
    border-radius:18px;
    background:rgba(157,170,74,.09);
    backdrop-filter:blur(12px);
}

.points-info span{
    color:var(--rima-muted);
    font-size:.9rem;
    line-height:1.55;
}

.donation-panel{
    display:flex;
    justify-content:flex-end;
}

.donation-card{
    width:min(100%,650px);
    padding:clamp(26px,5vw,50px);
    border:1px solid var(--rima-border);
    border-radius:30px;
    background:
        radial-gradient(circle at top right,rgba(157,170,74,.16),transparent 38%),
        linear-gradient(145deg,rgba(29,42,23,.97),rgba(13,20,10,.985));
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}

.donation-card h2{
    margin:0;
    font-size:clamp(2.1rem,4vw,3.15rem);
    line-height:1.05;
    letter-spacing:-.04em;
}

.subtitle{
    margin:13px 0 30px;
    color:var(--rima-muted);
    line-height:1.6;
}

.alert{
    margin-bottom:20px;
    padding:14px 16px;
    border-radius:14px;
    line-height:1.5;
}

.alert-error{
    color:#ffdada;
    border:1px solid rgba(239,140,140,.28);
    background:rgba(185,77,77,.16);
}

.field{margin-bottom:19px}

.field label,
.payment-fieldset legend{
    display:block;
    margin-bottom:8px;
    color:#eef3e4;
    font-size:.86rem;
    font-weight:750;
}

.field input{
    width:100%;
    height:52px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    color:#fff;
    background:rgba(255,255,255,.055);
    outline:none;
    transition:.2s ease;
}

.field input::placeholder{color:rgba(255,255,255,.35)}

.field input:focus{
    border-color:rgba(188,203,96,.66);
    box-shadow:0 0 0 4px rgba(157,170,74,.12);
}

.field.has-error input{border-color:var(--danger)}

.field-error{
    display:none;
    margin-top:7px;
    color:#ffb0b0;
    font-size:.78rem;
}

.field.has-error .field-error{display:block}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.form-row-3{
    grid-template-columns:1fr 1fr 1fr;
}

.money-field{
    display:flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    background:rgba(255,255,255,.055);
    overflow:hidden;
}

.money-field:focus-within{
    border-color:rgba(188,203,96,.66);
    box-shadow:0 0 0 4px rgba(157,170,74,.12);
}

.money-field>span{
    padding-left:15px;
    color:var(--rima-muted);
    font-weight:800;
}

.money-field input{
    border:0;
    background:transparent;
    box-shadow:none!important;
}

.has-error .money-field{border-color:var(--danger)}

.payment-fieldset{
    margin:8px 0 26px;
    padding:0;
    border:0;
}

.payment-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.payment-option{position:relative}

.payment-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.payment-option-box{
    min-height:88px;
    padding:15px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    transition:.2s ease;
}

.payment-option input:checked+.payment-option-box{
    border-color:var(--rima-primary-strong);
    background:rgba(157,170,74,.15);
    box-shadow:inset 0 0 0 1px var(--rima-primary);
}

.payment-option input:focus-visible+.payment-option-box{
    box-shadow:0 0 0 4px rgba(157,170,74,.14);
}

.method-icon{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#111707;
    background:var(--rima-primary-strong);
    font-weight:950;
}

.payment-option strong,
.payment-option small{display:block}

.payment-option small{
    margin-top:4px;
    color:var(--rima-muted);
    font-size:.75rem;
}

.card-fields{
    margin-bottom:25px;
    padding-top:2px;
}

.section-divider{
    margin:25px 0 17px;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--rima-primary-strong);
    font-size:.76rem;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.section-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--rima-border);
}

.primary-button,
.secondary-button{
    width:100%;
    min-height:55px;
    border-radius:15px;
    font-weight:850;
    transition:.18s ease;
}

.primary-button{
    border:0;
    color:#fff;
    background:linear-gradient(135deg,var(--rima-primary),var(--rima-primary-dark));
    box-shadow:0 16px 30px rgba(102,114,47,.27);
}

.primary-button:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
}

.primary-button:disabled{
    opacity:.68;
    cursor:wait;
    transform:none;
}

.secondary-button{
    margin-top:22px;
    color:var(--rima-text);
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.065);
}

.security-text{
    margin:16px 0 0;
    color:var(--rima-muted);
    font-size:.75rem;
    line-height:1.55;
    text-align:center;
}

.payment-result{text-align:center}

.pix-qr-wrap{
    width:min(100%,300px);
    aspect-ratio:1;
    margin:24px auto 20px;
    padding:14px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 18px 44px rgba(0,0,0,.28);
}

.pix-qr-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}

.pix-code-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    border:1px solid var(--rima-border);
    border-radius:15px;
    overflow:hidden;
}

.pix-code-box input{
    min-width:0;
    height:52px;
    padding:0 14px;
    color:var(--rima-text);
    border:0;
    background:rgba(255,255,255,.055);
    outline:none;
}

.pix-code-box button{
    padding:0 18px;
    color:#111707;
    border:0;
    background:var(--rima-primary-strong);
    font-weight:850;
}

.waiting-payment{
    margin-top:18px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#eff5d7;
    border:1px solid var(--rima-border);
    border-radius:14px;
    background:rgba(157,170,74,.1);
    font-size:.87rem;
}

.spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.2);
    border-top-color:var(--rima-primary-strong);
    border-radius:50%;
    animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.pix-expiration{
    margin:12px 0 0;
    color:var(--rima-muted);
    font-size:.78rem;
}

.success-symbol,
.pending-symbol{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:2.25rem;
    font-weight:950;
}

.success-symbol{
    color:#fff;
    background:linear-gradient(135deg,var(--rima-success),#397c48);
    box-shadow:0 18px 42px rgba(57,124,72,.3);
}

.pending-symbol{
    color:#151a09;
    background:var(--rima-primary-strong);
}

.success-summary{
    margin-top:28px;
    padding:19px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    border:1px solid var(--rima-border);
    border-radius:18px;
    background:rgba(157,170,74,.08);
}

.success-summary span,
.success-summary strong{display:block}

.success-summary span{
    margin-bottom:6px;
    color:var(--rima-muted);
    font-size:.75rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.success-summary strong{
    color:var(--rima-primary-strong);
    font-size:1.15rem;
}

.verse{
    margin:28px auto 0;
    max-width:440px;
    color:var(--rima-muted);
    font-style:italic;
    line-height:1.65;
}

.verse strong{
    display:block;
    margin-top:5px;
    color:var(--rima-text);
    font-style:normal;
}

@media(max-width:940px){
    .donation-page{
        padding:25px 0 42px;
        grid-template-columns:1fr;
        gap:18px;
    }

    .donation-intro{padding:20px 8px 10px}

    .rima-brand{margin-bottom:28px}

    .donation-intro h1{
        font-size:clamp(3rem,12vw,5.4rem);
    }

    .donation-panel{justify-content:stretch}

    .donation-card{width:100%}
}

@media(max-width:590px){
    .donation-page{width:min(100% - 20px,1240px)}

    .donation-card{
        padding:25px 17px;
        border-radius:22px;
    }

    .form-row,
    .form-row-3,
    .payment-options,
    .success-summary{
        grid-template-columns:1fr;
        gap:0;
    }

    .payment-options{gap:10px}

    .pix-code-box{grid-template-columns:1fr}

    .pix-code-box button{min-height:48px}
}