/* ============================================================
   SANGH BOOKING SYSTEM — FRONTEND CSS
   Version 1.0.0 | Premium Temple Booking UI
============================================================ */

:root {
    --sangh-primary:      #E8612A;
    --sangh-primary-dark: #C0501D;
    --sangh-bg:           #FAF6F0;
    --sangh-card:         #FFFFFF;
    --sangh-border:       #EDE4D8;
    --sangh-text:         #2C2C2C;
    --sangh-text-light:   #666;
    --sangh-success:      #27AE60;
    --sangh-error:        #C0392B;
    --sangh-shadow:       0 8px 32px rgba(0,0,0,.08);
    --radius:             16px;
    --radius-sm:          10px;
    --transition:         all .2s ease;
}

/* ---- WRAPPER ---- */
.sangh-booking-app,
.sangh-booking-wrapper,
.sangh-donation-wrapper,
.sangh-events-wrapper,
.sangh-services-wrapper,
.sangh-priests-wrapper {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--sangh-text);
}

/* ---- CARD ---- */
.sangh-card {
    background: var(--sangh-card);
    border: 1px solid var(--sangh-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--sangh-shadow);
    margin-bottom: 24px;
}

.sangh-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sangh-border);
    color: var(--sangh-primary-dark);
}

/* ---- FIELD ---- */
.sangh-field {
    margin-bottom: 18px;
}
.sangh-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--sangh-text);
}
.sangh-field label .required { color: #e74c3c; margin-left: 2px; }

.sangh-field input[type=text],
.sangh-field input[type=email],
.sangh-field input[type=tel],
.sangh-field input[type=number],
.sangh-field input[type=date],
.sangh-field select,
.sangh-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--sangh-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--sangh-text);
    background: #FDFAF6;
    box-sizing: border-box;
    transition: var(--transition);
    -webkit-appearance: none;
}
.sangh-field input:focus,
.sangh-field select:focus,
.sangh-field textarea:focus {
    border-color: var(--sangh-primary);
    box-shadow: 0 0 0 3px rgba(232,97,42,.15);
    outline: none;
    background: #fff;
}
.sangh-field textarea { min-height: 100px; resize: vertical; }

/* ---- FORM GRID ---- */
.sangh-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .sangh-form-grid { grid-template-columns: 1fr; }
}

/* ---- BUTTONS ---- */
.sangh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
}
.sangh-btn-primary {
    background: linear-gradient(135deg, var(--sangh-primary), var(--sangh-primary-dark));
    color: #fff;
    box-shadow: 0 4px 16px rgba(232,97,42,.35);
}
.sangh-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,97,42,.45);
    color: #fff;
}
.sangh-btn-full { width: 100%; }
.sangh-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---- AMOUNT CHIPS ---- */
.sangh-amount-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.sangh-chip {
    padding: 8px 18px;
    border: 1.5px solid var(--sangh-border);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    background: #fff;
}
.sangh-chip:hover,
.sangh-chip.active {
    background: var(--sangh-primary);
    color: #fff;
    border-color: var(--sangh-primary);
}

/* ---- SERVICE CARDS ---- */
.sangh-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.sangh-service-card {
    background: var(--sangh-card);
    border: 1px solid var(--sangh-border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--sangh-shadow);
    transition: var(--transition);
}
.sangh-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.sangh-service-icon { font-size: 36px; margin-bottom: 12px; }
.sangh-service-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sangh-service-desc { font-size: 14px; color: var(--sangh-text-light); margin-bottom: 16px; line-height: 1.6; }
.sangh-service-price { font-size: 22px; font-weight: 800; color: var(--sangh-primary); }
.sangh-service-duration { font-size: 12px; color: var(--sangh-text-light); }

/* ---- PRIEST CARDS ---- */
.sangh-priests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.sangh-priest-card {
    background: var(--sangh-card);
    border: 1px solid var(--sangh-border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--sangh-shadow);
    transition: var(--transition);
}
.sangh-priest-card:hover { transform: translateY(-3px); }
.sangh-priest-avatar {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, var(--sangh-primary), var(--sangh-primary-dark));
    color: #fff; font-size: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    font-weight: 700;
}
.sangh-priest-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.sangh-priest-exp { font-size: 13px; color: var(--sangh-text-light); }

/* ---- EVENT CARDS ---- */
.sangh-events-list { display: flex; flex-direction: column; gap: 16px; }
.sangh-event-card {
    background: var(--sangh-card);
    border: 1px solid var(--sangh-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--sangh-shadow);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
}
.sangh-event-date-box {
    background: var(--sangh-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    text-align: center;
    min-width: 60px;
}
.sangh-event-day   { font-size: 28px; font-weight: 800; line-height: 1; }
.sangh-event-month { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.sangh-event-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.sangh-event-venue { font-size: 13px; color: var(--sangh-text-light); }

/* ---- PROGRESS BAR ---- */
.sangh-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    position: relative;
    padding: 20px 24px;
    background: var(--sangh-card);
    border-radius: var(--radius);
    border: 1px solid var(--sangh-border);
}
.sangh-progress::before {
    content: '';
    position: absolute;
    top: 50%; left: 80px; right: 80px;
    height: 2px; background: var(--sangh-border);
    transform: translateY(-50%);
}
.sangh-step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; z-index: 1; font-size: 12px; font-weight: 600;
    color: var(--sangh-text-light);
}
.sangh-step-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sangh-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: var(--transition);
}
.sangh-step.active .sangh-step-icon {
    background: var(--sangh-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(232,97,42,.4);
}
.sangh-step.done .sangh-step-icon { background: var(--sangh-success); color: #fff; }
.sangh-step.active { color: var(--sangh-primary); }

/* ---- TICKET ---- */
.sangh-ticket {
    border: 2px dashed var(--sangh-border);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 580px;
    margin: 0 auto;
}
.sangh-ticket-header {
    background: linear-gradient(135deg, var(--sangh-primary), #C0501D);
    color: #fff;
    padding: 24px;
    text-align: center;
}
.sangh-ticket-header h2 { margin: 0; font-size: 22px; }
.sangh-ticket-body { padding: 24px; background: #fff; }
.sangh-ticket-row {
    display: flex; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px dashed var(--sangh-border);
    font-size: 14px;
}
.sangh-ticket-row:last-child { border-bottom: none; }
.sangh-ticket-row .label { color: var(--sangh-text-light); font-weight: 600; }
.sangh-ticket-row .value { font-weight: 700; }
.sangh-ticket-qr { text-align: center; padding: 20px; background: #FAF6F0; border-top: 2px dashed var(--sangh-border); }
.sangh-ticket-qr img { max-width: 140px; }

/* ---- SUCCESS PAGE ---- */
.sangh-success-box {
    text-align: center;
    padding: 48px 24px;
}
.sangh-success-icon { font-size: 64px; margin-bottom: 16px; }
.sangh-success-title { font-size: 28px; font-weight: 800; color: var(--sangh-success); margin-bottom: 8px; }
.sangh-success-subtitle { color: var(--sangh-text-light); font-size: 16px; }

/* ---- NOTICE ---- */
.sangh-notice {
    padding: 14px 18px; border-radius: var(--radius-sm);
    margin-bottom: 20px; font-size: 14px; font-weight: 500;
}
.sangh-notice-success { background: #D5F5E3; color: #1E8449; border-left: 4px solid #27AE60; }
.sangh-notice-error   { background: #FADBD8; color: #922B21; border-left: 4px solid #C0392B; }
.sangh-notice-info    { background: #EBF5FB; color: #1A5276; border-left: 4px solid #2980B9; }

/* ---- SPINNER ---- */
.sangh-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sanghSpin .7s linear infinite;
}
@keyframes sanghSpin { to { transform: rotate(360deg); } }

/* ---- DONATION SPECIFIC ---- */
.sangh-donation-hero {
    text-align: center;
    padding: 32px 24px 24px;
    background: linear-gradient(135deg, #FEF9F0, #FDF3E3);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--sangh-border);
    margin: -28px -28px 24px;
}
.sangh-donation-hero h2 { font-size: 24px; color: var(--sangh-primary-dark); margin-bottom: 6px; }
.sangh-donation-hero p  { color: var(--sangh-text-light); }