/* CT Sikhs Donation Plugin – Front-end Styles */

.ctsd-wrap * { box-sizing: border-box; }

/* ── FORM SECTION ── */
.ctsd-wrap .ctsd-form-section {
    background: #e8e8e8;
    border-radius: 4px;
    padding: 32px 36px 36px;
    max-width: 640px;
    margin: 0 auto;
}
.ctsd-form-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2a4a;
    margin: 0 0 4px;
}
.ctsd-form-sub {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 22px;
}
.ctsd-field { margin-bottom: 18px; }
.ctsd-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2a4a;
    margin-bottom: 5px;
}
.ctsd-req { color: #c00; }
.ctsd-input,
.ctsd-custom-input {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.92rem;
    background: #fff;
    color: #1a2a4a;
    outline: none;
    transition: border-color 0.2s;
}
.ctsd-input:focus,
.ctsd-custom-input:focus { border-color: #f0a800; box-shadow: 0 0 0 3px rgba(240,168,0,.15); }

.ctsd-btn-donate {
    background: #f0a800;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: .03em;
    transition: background .2s, transform .1s;
    margin-top: 4px;
}
.ctsd-btn-donate:hover { background: #d4920a; }
.ctsd-btn-donate:active { transform: scale(.98); }

/* ── OVERLAY ── */
.ctsd-overlay {
    position: fixed; inset: 0;
    background: rgba(10,20,40,.55);
    backdrop-filter: blur(2px);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── POPUP ── */
.ctsd-popup {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 460px;
    margin: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    animation: ctsdPopIn .22s ease;
    max-height: 90vh;
    overflow-y: auto;
}
@keyframes ctsdPopIn {
    from { transform: scale(.94) translateY(12px); opacity: 0; }
    to   { transform: scale(1)  translateY(0);     opacity: 1; }
}

.ctsd-popup-header {
    background: #1a2a4a;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    position: sticky; top: 0; z-index: 2;
}
.ctsd-popup-header-left { display: flex; align-items: center; gap: 8px; }
.ctsd-lock { color: #f0a800; }
.ctsd-close {
    background: none; border: none; color: #aab;
    font-size: 1.3rem; cursor: pointer; padding: 2px 6px; border-radius: 3px;
}
.ctsd-close:hover { background: rgba(255,255,255,.1); color: #fff; }

.ctsd-donor-bar {
    background: #f7f8fa;
    border-bottom: 1px solid #e8e8e8;
    padding: 11px 22px;
    font-size: .82rem;
    color: #666;
}
.ctsd-donor-bar strong { color: #1a2a4a; }

.ctsd-popup-body { padding: 22px; }

/* Amount grid */
.ctsd-amount-label {
    font-size: .78rem;
    font-weight: 700;
    color: #1a2a4a;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}
.ctsd-amount-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.ctsd-amount-btn {
    background: #f0f2f5;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 10px 4px;
    font-size: .9rem;
    font-weight: 700;
    color: #1a2a4a;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.ctsd-amount-btn:hover { border-color: #f0a800; background: #fff8e6; }
.ctsd-amount-btn.selected { border-color: #f0a800; background: #fff8e6; color: #c48000; }

.ctsd-custom-wrap {
    position: relative;
    margin-bottom: 16px;
}
.ctsd-custom-sym {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    font-weight: 700; color: #888; font-size: .92rem;
    pointer-events: none;
}
.ctsd-custom-input { padding-left: 26px; border: 2px solid #ddd; }
.ctsd-custom-input:focus { border-color: #f0a800; }

.ctsd-divider { height: 1px; background: #eee; margin: 16px 0; }

/* Stripe card element */
.ctsd-card-element {
    padding: 12px 13px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    transition: border-color .2s;
}
.ctsd-card-element.StripeElement--focus { border-color: #f0a800; }
.ctsd-card-errors {
    color: #e53e3e;
    font-size: .82rem;
    margin-top: 6px;
    min-height: 18px;
}

.ctsd-btn-pay {
    width: 100%;
    background: #f0a800;
    color: #fff;
    border: none;
    padding: 13px;
    font-size: .97rem;
    font-weight: 800;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: .03em;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background .2s, transform .1s;
    margin-top: 16px;
}
.ctsd-btn-pay:hover:not(:disabled) { background: #d4920a; }
.ctsd-btn-pay:active:not(:disabled) { transform: scale(.99); }
.ctsd-btn-pay:disabled { opacity: .7; cursor: not-allowed; }

.ctsd-secure-note {
    text-align: center;
    font-size: .73rem;
    color: #999;
    margin-top: 10px;
}
.ctsd-ssl { color: #27a558; font-weight: 700; }

/* ── SUCCESS ── */
.ctsd-success {
    text-align: center;
    padding: 44px 24px;
}
.ctsd-success-icon {
    font-size: 2.8rem;
    margin-bottom: 14px;
    display: block;
}
.ctsd-success-title {
    font-size: 1.15rem;
    color: #1a2a4a;
    margin-bottom: 10px;
}
.ctsd-success-msg {
    color: #555;
    font-size: .9rem;
    margin-bottom: 24px;
    line-height: 1.6;
}
.ctsd-btn-done {
    background: #1a2a4a;
    color: #fff;
    border: none;
    padding: 11px 30px;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.ctsd-btn-done:hover { background: #243659; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .ctsd-form-section { padding: 24px 20px; }
    .ctsd-amount-grid  { grid-template-columns: repeat(2,1fr); }
    .ctsd-popup        { margin: 8px; }
}