#npr-wrap { max-width: 420px; margin: auto; font-family: system-ui, sans-serif; }
.npr-section { margin-bottom: 20px; }
.npr-amount-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.npr-amount-btn { padding: 14px; border-radius: 6px; border: 1px solid #ccc; background: #fafafa; cursor: pointer; font-weight: 600; }
.npr-amount-btn.active { background: #111; color: #fff; }
#npr-custom-amount { margin-top: 10px; padding: 10px; width: 100%; }
.npr-field { position: relative; }
.npr-field input, #npr-card-element { width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 6px; }
.npr-field label { position: absolute; top: 14px; left: 14px; font-size: 14px; color: #777; transition: 0.2s; pointer-events: none; }
.npr-field input:focus + label,
.npr-field input:not(:placeholder-shown) + label { top: -22px; left: 10px; font-size: 11px; background: #fff; padding: 0 4px; }
.npr-pay-btn { width: 100%; background: #000; color: #fff; padding: 16px; border-radius: 8px; font-size: 18px; cursor: pointer; border: none; }
#npr-message { margin-top: 10px; font-weight: 600; }

.npr-toggle {
    display: flex;
    gap: 10px;
}

.npr-type-btn {
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fafafa;
    cursor: pointer;
    font-weight: 600;
    flex: 1;
}

.npr-type-btn.active {
    background: #111;
    color: #fff;
}

#npr-email, #npr-custom-amount {
    
    color: black !important;
}

#npr-email {
    
    margin-top: 35px;
}