/* Temple Donation — Public Styles */
.td-empty { text-align:center; padding:40px 20px; color:#666; font-style:italic; }

/* Events Grid */
.td-events-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:25px; margin:30px 0; }
.td-event-card { background:#fff; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; transition:box-shadow .2s; }
.td-event-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.1); }
.td-event-img { width:100%; height:200px; overflow:hidden; }
.td-event-img img { width:100%; height:100%; object-fit:cover; }
.td-event-body { padding:20px; }
.td-event-title { margin:0 0 10px; font-size:1.3rem; color:#333; }
.td-event-desc { color:#666; font-size:.95rem; line-height:1.6; margin:0 0 15px; }

/* Progress Bar */
.td-progress-wrap { margin:15px 0; }
.td-progress-bar { height:10px; background:#e9ecef; border-radius:5px; overflow:hidden; }
.td-progress-fill { height:100%; background:linear-gradient(90deg, #28a745, #20c997); border-radius:5px; transition:width .6s ease; }
.td-progress-text { display:flex; justify-content:space-between; font-size:.85rem; color:#666; margin-top:5px; }

/* Donate Button */
.td-donate-btn { display:inline-block; background:#ff6600; color:#fff; padding:10px 28px; border-radius:5px; text-decoration:none; font-weight:600; font-size:1rem; border:none; cursor:pointer; transition:background .2s; }
.td-donate-btn:hover { background:#e55b00; color:#fff; }

/* Single Event */
.td-single-event { max-width:700px; margin:0 auto; }
.td-single-img { width:100%; border-radius:8px; overflow:hidden; margin-bottom:20px; }
.td-single-img img { width:100%; height:auto; }
.td-single-title { font-size:1.8rem; color:#333; margin-bottom:10px; }
.td-single-desc { color:#555; line-height:1.7; margin-bottom:20px; }

/* Donate Form */
.td-donate-form { background:#f9f9f9; padding:25px; border:1px solid #e5e5e5; border-radius:8px; margin:20px 0; }
.td-donate-form h3 { margin-top:0; color:#333; }
.td-form-row { margin-bottom:15px; }
.td-form-row label { display:block; margin-bottom:5px; font-weight:600; color:#333; }
.td-form-row input, .td-form-row select { width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:4px; font-size:1rem; }
.td-form-row input:focus, .td-form-row select:focus { border-color:#ff6600; outline:none; }
.td-submit-btn { width:100%; padding:12px; background:#ff6600; color:#fff; border:none; border-radius:5px; font-size:1.1rem; font-weight:600; cursor:pointer; transition:background .2s; }
.td-submit-btn:hover { background:#e55b00; }
.td-submit-btn:disabled { background:#ccc; cursor:not-allowed; }

/* Amount Presets */
.td-amount-presets { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.td-preset { padding:8px 18px; border:2px solid #e5e5e5; border-radius:4px; background:#fff; cursor:pointer; font-size:.95rem; transition:all .2s; }
.td-preset:hover, .td-preset.active { border-color:#ff6600; background:#fff5f0; color:#ff6600; }

/* QR Section */
.td-qr-section { text-align:center; padding:25px; background:#fff; border:1px solid #e5e5e5; border-radius:8px; margin:20px 0; }
.td-qr-section h3 { margin-top:0; color:#333; }
.td-qr-img { width:220px; height:220px; margin:15px auto; border:1px solid #eee; border-radius:8px; }
.td-qr-img img { width:100%; height:100%; border-radius:8px; }
.td-upi-id { font-size:1.1rem; font-weight:600; color:#333; background:#f5f5f5; padding:8px 16px; border-radius:4px; display:inline-block; margin:10px 0; word-break:break-all; }
.td-amount-display { font-size:1.5rem; font-weight:700; color:#28a745; margin:10px 0; }

/* UPI App Buttons */
.td-app-buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:15px 0; }
.td-app-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:600; font-size:.9rem; color:#fff; transition:opacity .2s; }
.td-app-btn:hover { opacity:.85; color:#fff; }
.td-app-btn.gpay { background:#4285f4; }
.td-app-btn.paytm { background:#00b9f5; }
.td-app-btn.phonepe { background:#5f259f; }
.td-app-btn.bhim { background:#333; }
.td-app-btn .td-app-icon { font-size:1.1rem; }

/* Screenshot Upload */
.td-screenshot-upload { margin:20px 0; padding:15px; border:2px dashed #ccc; border-radius:8px; text-align:center; }
.td-screenshot-upload.dragover { border-color:#ff6600; background:#fff5f0; }
.td-screenshot-upload input[type="file"] { display:none; }
.td-screenshot-upload label { cursor:pointer; color:#ff6600; font-weight:600; }
.td-screenshot-preview { max-width:100%; max-height:200px; margin-top:10px; border-radius:4px; }

/* Success Message */
.td-success { text-align:center; padding:25px; background:#d4edda; border:1px solid #c3e6cb; border-radius:8px; margin:20px 0; }
.td-success h3 { color:#155724; margin-top:0; }
.td-success .td-receipt-no { font-size:1.2rem; font-weight:700; color:#155724; }

/* Modal */
.td-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:999999; display:flex; align-items:center; justify-content:center; }
.td-modal-content { background:#fff; padding:0; max-width:520px; width:95%; position:relative; border-radius:8px; max-height:90vh; overflow-y:auto; }
.td-modal-close { position:absolute; top:12px; right:16px; font-size:28px; cursor:pointer; color:#999; z-index:1; background:#fff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.td-modal-close:hover { color:#333; }

/* Thank You */
.td-thankyou { text-align:center; padding:30px; }
.td-thankyou h3 { color:#28a745; }

/* Responsive */
@media (max-width:600px) {
    .td-events-grid { grid-template-columns:1fr; }
    .td-app-buttons { flex-direction:column; align-items:center; }
    .td-app-btn { width:100%; max-width:250px; justify-content:center; }
}