/* ============================================================
   WP Donation System — Frontend CSS
   Elementor say customize karne ka tarika:
   Elementor Widget > Advanced > Custom CSS mein likhen:
   
   selector .wpds-wrapper {
       --wpds-btn-bg:        #F5A623;
       --wpds-btn-color:     #ffffff;
       --wpds-btn-radius:    8px;
       --wpds-amount-border: rgba(255,255,255,0.85);
       --wpds-amount-color:  #ffffff;
       --wpds-input-bg:      rgba(255,255,255,0.92);
       --wpds-gap:           12px;
   }
   ============================================================ */

.wpds-wrapper {
    /* --- Override these variables from Elementor Custom CSS --- */
    --wpds-btn-bg:           #E8961A;
    --wpds-btn-color:        #ffffff;
    --wpds-btn-hover:        #d4810f;
    --wpds-btn-radius:       8px;
    --wpds-btn-padding:      13px 28px;
    --wpds-btn-font-size:    1rem;
    --wpds-btn-font-weight:  700;

    --wpds-amount-border:    rgba(255, 255, 255, 0.85);
    --wpds-amount-color:     #ffffff;
    --wpds-amount-bg:        transparent;
    --wpds-amount-selected-bg:    #ffffff;
    --wpds-amount-selected-color: #E8961A;
    --wpds-amount-radius:    8px;
    --wpds-amount-padding:   10px 20px;
    --wpds-amount-font-size: 1rem;

    --wpds-input-bg:         rgba(255, 255, 255, 0.92);
    --wpds-input-color:      #333333;
    --wpds-input-radius:     8px;
    --wpds-input-padding:    13px 14px 13px 32px;

    --wpds-gap:              12px;
    --wpds-amounts-gap:      10px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Preset Amount Buttons ── */
.wpds-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpds-amounts-gap);
    margin-bottom: var(--wpds-gap);
}

.wpds-amount-btn {
    background:   var(--wpds-amount-bg);
    border:       2px solid var(--wpds-amount-border);
    color:        var(--wpds-amount-color);
    font-size:    var(--wpds-amount-font-size);
    font-weight:  600;
    padding:      var(--wpds-amount-padding);
    border-radius: var(--wpds-amount-radius);
    cursor:       pointer;
    transition:   background 0.2s, color 0.2s, border-color 0.2s;
    min-width:    70px;
}

.wpds-amount-btn:hover,
.wpds-amount-btn.wpds-selected {
    background:   var(--wpds-amount-selected-bg);
    color:        var(--wpds-amount-selected-color);
    border-color: var(--wpds-amount-selected-bg);
}

/* ── Custom Amount Row ── */
.wpds-custom-row {
    display:     flex;
    gap:         var(--wpds-gap);
    align-items: center;
    flex-wrap:   wrap;
}

.wpds-custom-wrap {
    flex:     1 1 200px;
    position: relative;
}

.wpds-currency-icon {
    position:    absolute;
    left:        12px;
    top:         50%;
    transform:   translateY(-50%);
    color:       #888;
    font-size:   1rem;
    pointer-events: none;
}

.wpds-custom-input {
    width:        100%;
    padding:      var(--wpds-input-padding);
    border:       none;
    border-radius: var(--wpds-input-radius);
    font-size:    1rem;
    background:   var(--wpds-input-bg);
    color:        var(--wpds-input-color);
    box-sizing:   border-box;
    outline:      none;
    transition:   box-shadow 0.2s;
}

.wpds-custom-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.wpds-custom-input::placeholder { color: #aaa; }

/* ── Donate Button ── */
.wpds-donate-btn {
    background:    var(--wpds-btn-bg);
    color:         var(--wpds-btn-color);
    border:        none;
    border-radius: var(--wpds-btn-radius);
    padding:       var(--wpds-btn-padding);
    font-size:     var(--wpds-btn-font-size);
    font-weight:   var(--wpds-btn-font-weight);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.2s, transform 0.1s;
    box-shadow:    0 4px 14px rgba(0,0,0,0.15);
}

.wpds-donate-btn:hover  { background: var(--wpds-btn-hover); }
.wpds-donate-btn:active { transform: scale(0.97); }

/* ── Modal Overlay ── */
.wpds-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.55);
    z-index:    99999;
    align-items: center;
    justify-content: center;
    padding:    16px;
    backdrop-filter: blur(3px);
}

.wpds-modal-overlay.wpds-active {
    display: flex;
}

.wpds-modal {
    background:    #fff;
    border-radius: 16px;
    padding:       36px 40px;
    width:         100%;
    max-width:     460px;
    box-shadow:    0 20px 60px rgba(0,0,0,0.25);
    position:      relative;
    animation:     wpds-slideIn 0.25s ease;
}

@keyframes wpds-slideIn {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.wpds-modal-close {
    position:   absolute;
    top:        14px;
    right:      18px;
    background: none;
    border:     none;
    font-size:  1.6rem;
    cursor:     pointer;
    color:      #999;
    line-height: 1;
}

.wpds-modal h3 {
    margin:    0 0 6px;
    font-size: 1.4rem;
    color:     #1a1a1a;
}

.wpds-modal-amount {
    color:        #555;
    margin:       0 0 20px;
    font-size:    0.95rem;
}

.wpds-modal-amount strong {
    color:     var(--wpds-btn-bg);
    font-size: 1.1rem;
}

/* ── Modal Form Fields ── */
.wpds-field { margin-bottom: 16px; }

.wpds-field label {
    display:      block;
    font-size:    0.85rem;
    font-weight:  600;
    color:        #444;
    margin-bottom: 6px;
}

.wpds-field label span { color: #e44; }

.wpds-field input,
.wpds-field textarea {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid #ddd;
    border-radius: 8px;
    font-size:     0.95rem;
    box-sizing:    border-box;
    transition:    border-color 0.2s;
    outline:       none;
    color:         #333;
}

.wpds-field input:focus,
.wpds-field textarea:focus { border-color: var(--wpds-btn-bg); }

/* ── Payment Methods ── */
.wpds-payment-methods { margin-bottom: 20px; }

.wpds-pm-option {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    font-weight: 600;
    color:       #333;
}

.wpds-full-btn { width: 100%; padding: 15px; font-size: 1.05rem; }

.wpds-msg {
    margin:    12px 0 0;
    font-size: 0.9rem;
    text-align: center;
    min-height: 20px;
}

.wpds-msg.wpds-error   { color: #c0392b; }
.wpds-msg.wpds-success { color: #27ae60; }

.wpds-secure {
    text-align: center;
    color:      #aaa;
    font-size:  0.78rem;
    margin:     8px 0 0;
}

/* ── Responsive ── */
@media (max-width: 580px) {
    .wpds-custom-row { flex-direction: column; }
    .wpds-donate-btn { width: 100%; }
    .wpds-modal      { padding: 28px 18px; }
}