/* ═══════════════════════════════════════════════════════════════════════════════
   Temples and More — Pujari PWA Design System
   Palette mirrors main site: deep brown #3d2600, saffron #f58020, gold #f0c060
   Mobile-first, bottom-nav layout, safe-area aware (iPhone notch/home bar)
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --brown-deep:    #3d2600;
    --brown-mid:     #7a3c00;
    --brown-light:   #c8a96e;
    --saffron:       #f58020;
    --saffron-dark:  #d96d10;
    --gold:          #f0c060;
    --gold-light:    #fff8e6;
    --cream:         #f9f6f1;
    --cream-dark:    #f0e8d8;
    --text-dark:     #1a0f00;
    --text-mid:      #555;
    --text-light:    #888;
    --white:         #ffffff;
    --danger:        #e53935;
    --warning-color: #ff6f00;
    --success:       #2e7d32;

    --topbar-h:      56px;
    --bottomnav-h:   64px;
    --safe-bottom:   env(safe-area-inset-bottom, 0px);
    --page-pad:      16px;
    --radius:        14px;
    --radius-sm:     8px;
    --shadow:        0 2px 16px rgba(61,38,0,0.10);
    --shadow-lg:     0 8px 32px rgba(61,38,0,0.16);
}

html { -webkit-text-size-adjust: 100%; }

body.archaka-app, body.pujari-app {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--cream);
    min-height: 100vh;
    padding-top: var(--topbar-h);
    padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
    overflow-x: hidden;
}
body.archaka-login, body.pujari-login {
    font-family: 'Poppins', sans-serif;
    background: var(--cream);
    padding: 0;
}

/* ── Top App Bar ───────────────────────────────────────────────────────────── */
.pwa-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--brown-deep);
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.pwa-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--page-pad);
    max-width: 640px;
    margin: 0 auto;
}
.pwa-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pwa-topbar-logo {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(240,192,96,0.4);
}
.pwa-topbar-title {
    color: var(--gold);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.pwa-topbar-back {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.pwa-topbar-back svg { width: 18px; height: 18px; stroke: var(--gold); flex-shrink: 0; }
.pwa-topbar-action {
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(240,192,96,0.15);
    border: 1px solid rgba(240,192,96,0.3);
    border-radius: 20px;
    padding: 5px 14px;
    transition: background .15s;
    white-space: nowrap;
}
.pwa-topbar-action:hover { background: rgba(240,192,96,0.28); color: var(--gold); }
.pwa-topbar-user { display: flex; align-items: center; }

/* ── Bottom Navigation ─────────────────────────────────────────────────────── */
.pwa-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--bottomnav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--white);
    border-top: 1.5px solid var(--cream-dark);
    display: flex;
    align-items: stretch;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(61,38,0,0.08);
}
.pwa-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-light);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 8px 4px 4px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
}
.pwa-nav-item svg { width: 22px; height: 22px; stroke: currentColor; }
.pwa-nav-item.active { color: var(--saffron); }
.pwa-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    background: var(--saffron);
    border-radius: 0 0 3px 3px;
}
.pwa-nav-item:active { opacity: .7; }

/* ── Avatar ────────────────────────────────────────────────────────────────── */
.pwa-avatar-sm {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    flex-shrink: 0;
}
div.pwa-avatar-sm {
    background: var(--saffron);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Page layout ───────────────────────────────────────────────────────────── */
.pwa-page {
    padding: var(--page-pad);
    max-width: 640px;
    margin: 0 auto;
}
.pwa-page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--brown-deep);
    margin-bottom: 4px;
    line-height: 1.2;
}
.pwa-page-sub {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}
.pwa-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brown-light);
    margin: 24px 0 10px;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.pwa-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 14px;
}
.pwa-card-body { padding: 16px; }
.pwa-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cream-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pwa-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--cream-dark);
    background: var(--cream);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Temple card */
.pwa-temple-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .15s, opacity .15s;
    min-height: 80px;
}
.pwa-temple-card:active { opacity: .82; color: inherit; }
.pwa-temple-thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--cream-dark);
    display: block;
}
.pwa-temple-thumb-ph {
    width: 64px; height: 64px;
    border-radius: 10px;
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
}
.pwa-temple-info { flex: 1; min-width: 0; }
.pwa-temple-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--brown-deep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
    line-height: 1.3;
}
.pwa-temple-loc { font-size: 12px; color: var(--text-light); line-height: 1.4; }
.pwa-temple-badge {
    background: var(--gold-light);
    color: var(--brown-mid);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Event card */
.pwa-event-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
}
.pwa-event-type-bar { height: 4px; }
.pwa-event-card-body { padding: 14px 16px; }
.pwa-event-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--brown-deep);
    margin-bottom: 5px;
    line-height: 1.3;
}
.pwa-event-meta {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    line-height: 1.5;
}
.pwa-event-meta svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.pwa-event-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Status badge */
.pwa-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pwa-status-published  { background: #e8f5e9; color: #2e7d32; }
.pwa-status-draft      { background: #f5f5f5; color: #757575; }
.pwa-status-pending    { background: #fff3e0; color: #e65100; }
.pwa-status-cancelled  { background: #fce4ec; color: #c62828; }
.pwa-status-blocked    { background: #fce4ec; color: #b71c1c; }
.pwa-status-expired    { background: #f3e8ff; color: #6b21a8; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-pwa-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--saffron);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(245,128,32,0.35);
    transition: background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.btn-pwa-primary:hover { background: var(--saffron-dark); color: var(--white); transform: translateY(-1px); }
.btn-pwa-primary:active { transform: scale(0.97); }
.btn-pwa-primary svg { width: 17px; height: 17px; stroke: currentColor; flex-shrink: 0; }

.btn-pwa-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--white);
    color: var(--brown-deep);
    border: 1.5px solid var(--cream-dark);
    border-radius: 50px;
    padding: 12px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.btn-pwa-secondary:hover { border-color: var(--brown-light); background: var(--cream); color: var(--brown-deep); }
.btn-pwa-secondary:active { transform: scale(0.97); }
.btn-pwa-secondary svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }

.btn-pwa-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fce4ec;
    color: var(--danger);
    border: 1.5px solid #f8bbd0;
    border-radius: 50px;
    padding: 11px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.btn-pwa-danger:hover { background: #f8bbd0; color: var(--danger); }

.btn-pwa-duplicate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #faf5ff;
    color: #6b21a8;
    border: 1.5px solid #e9d5ff;
    border-radius: 50px;
    padding: 11px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.btn-pwa-duplicate:hover { background: #f3e8ff; color: #6b21a8; }
.btn-pwa-duplicate svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }

.btn-pwa-reactivate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #ecfdf5;
    color: #065f46;
    border: 1.5px solid #6ee7b7;
    border-radius: 50px;
    padding: 11px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    width: 100%;
}
.btn-pwa-reactivate:hover { background: #d1fae5; color: #065f46; }
.btn-pwa-reactivate svg { width: 15px; height: 15px; stroke: currentColor; flex-shrink: 0; }

.btn-pwa-sm  { padding: 7px 16px !important; font-size: 12px !important; }
.btn-pwa-full { width: 100%; }

.btn-pwa-notify {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #1a3a5c; color: #fff;
    border: none; border-radius: 12px;
    padding: 11px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background .15s;
}
.btn-pwa-notify:hover { background: #14304f; color: #fff; }

/* Floating action button */
.pwa-fab {
    position: fixed;
    right: 20px;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 16px);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--saffron);
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(245,128,32,0.45);
    cursor: pointer;
    text-decoration: none;
    z-index: 900;
    transition: background .15s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.pwa-fab:hover { background: var(--saffron-dark); transform: scale(1.07); color: var(--white); }
.pwa-fab:active { transform: scale(0.93); }
.pwa-fab svg { width: 26px; height: 26px; stroke: currentColor; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.pwa-form-group { margin-bottom: 18px; }
.pwa-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brown-deep);
    margin-bottom: 6px;
}
.pwa-label .req { color: var(--danger); margin-left: 2px; }

.pwa-input,
.pwa-select,
.pwa-textarea {
    width: 100%;
    background: var(--white);
    border: 1.5px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.pwa-input:focus, .pwa-select:focus, .pwa-textarea:focus {
    border-color: var(--saffron);
    box-shadow: 0 0 0 3px rgba(245,128,32,0.12);
}
.pwa-input::placeholder, .pwa-textarea::placeholder { color: var(--text-light); }
.pwa-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.pwa-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.pwa-input-hint  { font-size: 12px; color: var(--text-light); margin-top: 5px; }
.pwa-input-error { font-size: 12px; color: var(--danger); margin-top: 5px; }
.pwa-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* File upload */
.pwa-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--cream-dark);
    border-radius: var(--radius-sm);
    padding: 20px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.pwa-file-btn:hover { border-color: var(--saffron); color: var(--saffron); }
.pwa-file-btn svg { width: 22px; height: 22px; stroke: currentColor; }
.pwa-file-input { display: none; }

/* Toggle switch */
.pwa-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--cream-dark);
}
.pwa-toggle-row:last-child { border-bottom: none; }
.pwa-toggle-label { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.pwa-toggle-sub   { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.pwa-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.pwa-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.pwa-switch-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 26px;
    cursor: pointer;
    transition: background .2s;
}
.pwa-switch-slider::before {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    left: 3px; bottom: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.pwa-switch input:checked + .pwa-switch-slider { background: var(--saffron); }
.pwa-switch input:checked + .pwa-switch-slider::before { transform: translateX(20px); }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.pwa-alert {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}
.pwa-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; stroke: currentColor; }
.pwa-alert-error   { background: #fce4ec; color: #c62828; border-left: 4px solid var(--danger); }
.pwa-alert-success { background: #e8f5e9; color: #1b5e20; border-left: 4px solid #43a047; }
.pwa-alert-info    { background: #e3f2fd; color: #0d47a1; border-left: 4px solid #1976d2; }
.pwa-alert-warning { background: #fff3e0; color: #bf360c; border-left: 4px solid var(--warning-color); }

/* ── Empty state ───────────────────────────────────────────────────────────── */
.pwa-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-light);
}
.pwa-empty-icon  { font-size: 52px; margin-bottom: 16px; }
.pwa-empty-title { font-size: 17px; font-weight: 700; color: var(--text-mid); margin-bottom: 8px; }
.pwa-empty-sub   { font-size: 14px; line-height: 1.6; margin-bottom: 24px; }

/* ── Login page ────────────────────────────────────────────────────────────── */
.pwa-login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cream);
}
.pwa-login-hero {
    background: linear-gradient(160deg, var(--brown-deep) 0%, #7a3c00 100%);
    padding: 56px 32px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pwa-login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../../assets/images/inner-page-hero-section/ancient-temple-archeology-bagan-after-sunset-myanmar-temples-bagan-myanmar-burmar.jpg') center/cover no-repeat;
    opacity: 0.15;
    pointer-events: none;
}
.pwa-login-hero-content { position: relative; z-index: 1; }
.pwa-login-logo {
    width: 68px; height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.pwa-login-brand {
    color: var(--gold);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.pwa-login-sub {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pwa-login-body {
    flex: 1;
    padding: 28px var(--page-pad) 32px;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
}
.pwa-login-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--brown-deep);
    margin-bottom: 6px;
}
.pwa-login-desc {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 28px;
    line-height: 1.6;
}
.pwa-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-light);
    font-size: 13px;
    margin: 20px 0;
}
.pwa-divider::before, .pwa-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--cream-dark);
}
.pwa-login-footer {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    padding-top: 8px;
}
.pwa-login-footer a { color: var(--saffron); text-decoration: none; font-weight: 600; }

/* OTP digits */
.pwa-otp-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}
.pwa-otp-input {
    width: 46px; height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    border: 2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--brown-deep);
    outline: none;
    transition: border-color .15s;
    -webkit-appearance: none;
}
.pwa-otp-input:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(245,128,32,0.12); }

/* ── Schedule builder ──────────────────────────────────────────────────────── */
.pwa-day-block {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.pwa-day-header {
    background: var(--gold-light);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cream-dark);
}
.pwa-day-label { font-size: 14px; font-weight: 700; color: var(--brown-deep); }
.pwa-slot-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cream);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pwa-slot-row:last-child { border-bottom: none; }
.pwa-slot-num {
    width: 24px; height: 24px;
    background: var(--saffron);
    color: var(--white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 10px;
}
.pwa-slot-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pwa-slot-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pwa-slot-del {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 8px 2px;
    margin-top: 6px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.pwa-slot-del svg { width: 18px; height: 18px; stroke: currentColor; }

/* ── Share screen ──────────────────────────────────────────────────────────── */
.pwa-share-platform-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pwa-share-btn {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity .15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.pwa-share-btn:active { opacity: .8; }
.pwa-share-whatsapp { background: #25D366; color: #fff; }
.pwa-share-copy     { background: var(--cream-dark); color: var(--brown-deep); }

/* ── Notification blast slots ──────────────────────────────────────────────── */
.pwa-blast-slot {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pwa-blast-num {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--brown-mid);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pwa-blast-num.used { background: var(--saffron); color: var(--white); }
.pwa-blast-info { flex: 1; min-width: 0; }
.pwa-blast-label { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.pwa-blast-time  { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.pwa-sep { border: none; border-top: 1px solid var(--cream-dark); margin: 20px 0; }
.pwa-text-muted  { color: var(--text-light); font-size: 13px; }
.pwa-text-center { text-align: center; }

/* Skeleton loader */
.pwa-skeleton {
    background: linear-gradient(90deg, var(--cream-dark) 25%, #f5ede0 50%, var(--cream-dark) 75%);
    background-size: 200% 100%;
    animation: pwa-shimmer 1.4s infinite;
    border-radius: 6px;
}
@keyframes pwa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Event type colour bars and pills */
.ev-bar-festival,     .ev-pill-festival     { --ev-c: #f57f17; }
.ev-bar-puja,         .ev-pill-puja         { --ev-c: #e65100; }
.ev-bar-special_puja, .ev-pill-special_puja { --ev-c: #e65100; }
.ev-bar-brahmotsavam, .ev-pill-brahmotsavam { --ev-c: #7a3c00; }
.ev-bar-annadanam,    .ev-pill-annadanam    { --ev-c: #2e7d32; }
.ev-bar-darshan_change,.ev-pill-darshan_change{ --ev-c: #1565c0; }
.ev-bar-closure,      .ev-pill-closure      { --ev-c: #c62828; }
.ev-bar-warning,      .ev-pill-warning      { --ev-c: #bf360c; }
.ev-bar-other,        .ev-pill-other        { --ev-c: #616161; }

[class^="ev-bar-"] { background: var(--ev-c); }
[class^="ev-pill-"] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ev-c);
    background: color-mix(in srgb, var(--ev-c) 12%, #fff);
}

/* ── Main content area ─────────────────────────────────────────────────────── */
.pwa-main {
    padding: var(--page-pad);
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}
.pwa-page-header { margin-bottom: 16px; }
.pwa-page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--brown-deep);
    margin: 0 0 2px;
    line-height: 1.3;
}
.pwa-page-sub {
    font-size: 12px;
    color: var(--text-light);
    margin: 0 0 0;
}

/* ── Back link ─────────────────────────────────────────────────────────────── */
.pwa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--saffron);
    text-decoration: none;
    margin-bottom: 10px;
}
.pwa-back-link svg { stroke: currentColor; }

/* ── Filter tabs ───────────────────────────────────────────────────────────── */
.pwa-filter-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px;
    padding-bottom: 2px;
}
.pwa-filter-tabs::-webkit-scrollbar { display: none; }
.pwa-filter-tab {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-mid);
    background: var(--white);
    border: 1.5px solid var(--cream-dark);
    white-space: nowrap;
    transition: all .15s;
}
.pwa-filter-tab.active {
    background: var(--brown-deep);
    color: var(--gold);
    border-color: var(--brown-deep);
}

/* ── Event card ────────────────────────────────────────────────────────────── */
.pwa-event-card {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
}
.pwa-event-card:active { opacity: .85; }
.pwa-event-type-bar { width: 5px; flex-shrink: 0; }
.pwa-event-card-body { flex: 1; padding: 12px 12px 12px 14px; min-width: 0; }
.pwa-event-card-arrow { display: flex; align-items: center; padding-right: 12px; flex-shrink: 0; }
.pwa-event-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pwa-event-title { font-size: 15px; font-weight: 700; color: var(--brown-deep); margin-bottom: 6px; line-height: 1.3; }
.pwa-event-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-light); flex-wrap: wrap; }
.pwa-event-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pwa-event-meta svg { stroke: currentColor; flex-shrink: 0; }
.pwa-event-creator { font-size: 11px; color: var(--text-light); margin-top: 4px; }
.pwa-event-detail-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mid); margin-bottom: 4px; }
.pwa-event-detail-row svg { stroke: currentColor; flex-shrink: 0; }

/* ── Status pills ──────────────────────────────────────────────────────────── */
.pwa-status-draft            { font-size:11px;font-weight:700;color:#888;background:#f0f0f0;padding:3px 9px;border-radius:20px; }
.pwa-status-pending          { font-size:11px;font-weight:700;color:#bf360c;background:#fff3e0;padding:3px 9px;border-radius:20px; }
.pwa-status-published        { font-size:11px;font-weight:700;color:#1b5e20;background:#e8f5e9;padding:3px 9px;border-radius:20px; }
.pwa-status-cancelled        { font-size:11px;font-weight:700;color:#c62828;background:#fce4ec;padding:3px 9px;border-radius:20px; }
.pwa-status-blocked          { font-size:11px;font-weight:700;color:#fff;background:#b71c1c;padding:3px 9px;border-radius:20px; }
.pwa-status-expired          { font-size:11px;font-weight:700;color:#6b21a8;background:#f3e8ff;padding:3px 9px;border-radius:20px; }

/* ── Form helpers ──────────────────────────────────────────────────────────── */
.pwa-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pwa-char-count { font-size: 11px; color: var(--text-light); text-align: right; margin-top: 4px; }
.pwa-section-label { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brown-light);margin:24px 0 10px; }

/* ── Event type selector grid ──────────────────────────────────────────────── */
.pwa-type-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pwa-type-option { cursor: pointer; }
.pwa-type-option input { display: none; }
.pwa-type-label {
    display: block;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .15s, border-color .15s;
}
.pwa-type-option input:checked + .pwa-type-label {
    opacity: 1;
    border-color: currentColor;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

/* ── Small outline button ──────────────────────────────────────────────────── */
.btn-pwa-sm-outline {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--saffron);
    background: none;
    color: var(--saffron);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
    :root { --page-pad: 20px; }
    .pwa-login-hero { padding: 72px 56px 52px; }
    .pwa-otp-input  { width: 52px; height: 60px; }
}
@media (min-width: 640px) {
    .pwa-page { padding: 24px; }
}