/* ===== Premium UI Fix for Donation Form ===== */

/* Amount buttons grid */
.donasi-form .donation-amount,
.donasi-form .amount-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* Button/label style */
.donasi-form .donation-amount button,
.donasi-form .donation-amount label{
    flex:1 1 calc(33.333% - 12px);
    min-width:140px;
    padding:12px 18px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#ffffff;
    color:#d63384;
    font-weight:600;
    font-size:1rem;
    text-align:center;
    transition:all .15s ease;
}

/* Active / selected state */
.donasi-form .donation-amount button.active,
.donasi-form .donation-amount label.active,
.donasi-form .donation-amount input:checked + label{
    background:#22c55e !important;
    border-color:#22c55e !important;
    color:#ffffff !important;
}

/* Other amount button (nominal lainnya) */
.donasi-form .donation-amount .other-amount-btn{
    color:#d63384;
    font-style:italic;
}

/* Mobile 2 columns */
@media (max-width:600px){
  .donasi-form .donation-amount button,
  .donasi-form .donation-amount label{
     flex:1 1 calc(50% - 12px);
     min-width:120px;
  }
}

/* Sapaan options grid */
.donasi-form .sapaan-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.donasi-form .sapaan-options label{
    flex:1 1 calc(33.333% - 8px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:1px solid #d1d5db;
    border-radius:12px;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
}
.donasi-form .sapaan-options input{display:none;}
.donasi-form .sapaan-options input:checked + label{
    background:#22c55e;
    border-color:#22c55e;
    color:#fff;
}

/* Title size desktop */
@media (min-width:992px){
 .donasi-form h1, .donasi-form .campaign-title{
     font-size:2.2rem;
     line-height:1.3;
 }
}