/* Durga Puja 2026 welcome page — decorative styles scoped to this page only. */

.puja-font-display {
    font-family: 'Cinzel', serif;
}

.puja-font-accent {
    font-family: 'Cormorant Garamond', serif;
}

/* Deep maroon mandala backdrop behind the hero, echoing the invitation poster. */
.puja-mandala-bg {
    background-color: #2a0705;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(240, 193, 92, 0.16) 0, transparent 32%),
        radial-gradient(circle at 85% 15%, rgba(240, 193, 92, 0.12) 0, transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(207, 60, 46, 0.35) 0, transparent 55%),
        repeating-radial-gradient(circle at 50% 50%, rgba(240, 193, 92, 0.05) 0, rgba(240, 193, 92, 0.05) 1px, transparent 1px, transparent 64px);
}

.puja-hero-glow {
    background: radial-gradient(closest-side, rgba(240, 193, 92, 0.35), transparent);
    filter: blur(10px);
    animation: pujaGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes pujaGlowPulse {
    from { opacity: 0.55; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1.04); }
}

/* Gold foil shimmer across the hero headline. */
.gold-shimmer-text {
    background: linear-gradient(100deg, #f0c15c 20%, #fff3d2 38%, #e0a527 50%, #f0c15c 62%, #fff3d2 80%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pujaShimmer 5s linear infinite;
}

@keyframes pujaShimmer {
    to { background-position: -240% center; }
}

/* Hanging lantern ornaments in the hero, matching the poster's motif. */
.puja-lantern {
    transform-origin: top center;
    animation: pujaLanternSway 4.5s ease-in-out infinite;
}

.puja-lantern.puja-lantern-delay {
    animation-delay: 0.8s;
}

@keyframes pujaLanternSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* Countdown tiles */
.countdown-tile {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(240, 193, 92, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Homepage announcement banner ──────────────────────────────────────
   Same maroon-and-gold family as the event page's .puja-mandala-bg, one
   shade lighter (maroon-800 vs. maroon-900) so the homepage portal reads
   as an earlier, warmer moment of the same festival rather than a
   disconnected re-skin. */
.puja-alpona-bg {
    background-color: #3d0a08;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(240, 193, 92, 0.22) 0, transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(255, 232, 195, 0.12) 0, transparent 30%),
        radial-gradient(circle at 50% 112%, rgba(249, 119, 0, 0.4) 0, transparent 58%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 232, 195, 0.06) 0, rgba(255, 232, 195, 0.06) 1px, transparent 1px, transparent 58px);
}

/* Marigold counterpart to .gold-shimmer-text. */
.marigold-shimmer-text {
    background: linear-gradient(100deg, #ff9920 20%, #ffe8c3 38%, #f97700 50%, #ffb84d 62%, #fff3d2 80%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pujaShimmer 5s linear infinite;
}

.puja-countdown-rule {
    display: block;
    width: 1.75rem;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, transparent, rgba(255, 184, 77, 0.75));
}

.puja-countdown-rule:last-child {
    background: linear-gradient(90deg, rgba(255, 184, 77, 0.75), transparent);
}

/* One continuous brass plate with blinking colons, rather than the event
   page's four separate glass tiles. */
.puja-countdown-plate {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1rem;
    border: 1px solid rgba(255, 184, 77, 0.45);
    border-radius: 999px;
    background:
        linear-gradient(150deg, rgba(255, 153, 32, 0.18), rgba(61, 10, 8, 0.62) 52%, rgba(255, 209, 131, 0.12));
    padding: 0.55rem 0.85rem;
    box-shadow: 0 14px 34px rgba(4, 8, 24, 0.5), inset 0 1px 0 rgba(255, 232, 195, 0.16);
}

.puja-countdown-plate::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 243, 210, 0.16) 50%, transparent 62%);
    background-size: 280% 100%;
    animation: pujaCountdownSheen 7s linear infinite;
    pointer-events: none;
}

.puja-countdown-cell {
    min-width: 3.05rem;
    text-align: center;
}

.puja-countdown-cell [data-countdown] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: #ffd183;
}

.puja-countdown-cell span {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 232, 195, 0.6);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.puja-countdown-colon {
    margin-top: 0.1rem;
    color: rgba(255, 184, 77, 0.7);
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    animation: pujaColonBlink 1s steps(1, end) infinite;
}

.puja-countdown-plate [data-countdown].is-ticking {
    animation: pujaCountdownTick 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pujaCountdownSheen {
    from { background-position: 180% center; }
    to { background-position: -180% center; }
}

@keyframes pujaCountdownTick {
    from { transform: translateY(-2px) scale(1.07); color: #fff3d2; }
    to { transform: translateY(0) scale(1); }
}

@keyframes pujaColonBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

@media (min-width: 640px) {
    .puja-countdown-plate { gap: 0.35rem; padding: 0.7rem 1.35rem; }
    .puja-countdown-cell { min-width: 3.75rem; }
    .puja-countdown-cell [data-countdown] { font-size: 1.9rem; }
    .puja-countdown-cell span { font-size: 0.6rem; }
    .puja-countdown-colon { font-size: 1.5rem; }
}

/* Invitation card holding the poster image — tilted, straightens on hover. */
.puja-invitation-card {
    transform: rotate(3deg);
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.puja-invitation-card:hover {
    transform: rotate(0deg) translateY(-4px);
}

/* Ticket-stub perforation divider used inside registration path cards. */
.ticket-perforation {
    position: relative;
    border-top: 2px dashed rgba(122, 20, 16, 0.25);
}

.ticket-perforation::before,
.ticket-perforation::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #fff8ea;
    border: 2px dashed rgba(122, 20, 16, 0.25);
}

.ticket-perforation::before { left: -34px; }
.ticket-perforation::after { right: -34px; }

/* Sticky mobile register bar */
.puja-sticky-cta {
    transform: translateY(120%);
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.puja-sticky-cta.is-visible {
    transform: translateY(0);
}

/* Scalloped divider between hero and page content */
.puja-scallop {
    display: block;
    width: 100%;
    height: 48px;
}

/* Member registration modal — backdrop fade + card pop, matching the invitation-card's easing. */
.puja-modal-backdrop {
    opacity: 0;
    transition: opacity 220ms ease;
}

.puja-modal-backdrop.is-open {
    opacity: 1;
}

.puja-modal-card {
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}

.puja-modal-backdrop.is-open .puja-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Seat-based Pujo registration flow. */
.puja-form-step {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 171, 52, 0.42);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 100% 0, rgba(240, 193, 92, 0.13), transparent 28%),
        rgba(255, 255, 255, 0.68);
    padding: 1.25rem;
    box-shadow: 0 12px 34px rgba(61, 10, 8, 0.055);
}

.puja-step-heading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #3d0a08;
}

.puja-step-heading > span:last-child {
    min-width: 0;
}

.puja-step-heading strong,
.puja-step-heading legend {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.puja-step-heading small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 500;
}

.puja-step-number {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(207, 144, 32, 0.58);
    border-radius: 999px;
    background: #3d0a08;
    color: #f6db92;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 12px rgba(61, 10, 8, 0.16);
}

.puja-greeting-mark {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #3d0a08;
    color: #f0c15c;
}

.puja-seat-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid #f1d59b;
    border-radius: 1rem;
    background: #fff;
    padding: 0.8rem;
    box-shadow: 0 5px 16px rgba(61, 10, 8, 0.045);
    animation: pujaSeatIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.puja-seat-card:has(.puja-seat-name-input) {
    /* A typed name needs real room to breathe — let this card claim both
       grid columns instead of splitting the row with another seat card. */
    grid-column: 1 / -1;
}

@media (max-width: 639px) {
    /* Below the sm breakpoint the card is too narrow to fit an avatar,
       remove button AND a legible name field on one line — drop the name
       input to its own full-width row underneath instead of squeezing it. */
    .puja-seat-card:has(.puja-seat-name-input) {
        flex-wrap: wrap;
    }

    .puja-seat-card:has(.puja-seat-name-input) .puja-seat-body {
        order: 3;
        flex-basis: 100%;
        margin-top: 0.4rem;
    }
}

.puja-seat-card.is-primary {
    border-color: rgba(168, 114, 26, 0.58);
    background: linear-gradient(135deg, #fffdf8, #fef7e7);
}

@keyframes pujaSeatIn {
    from { opacity: 0; transform: translateY(5px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.puja-seat-avatar {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fbeecb;
    color: #551910;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.puja-seat-name-input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: #fbeecb;
    padding: 0.4rem 0.65rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #2a0705;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.puja-seat-name-input::placeholder {
    font-weight: 500;
    color: #a8895a;
}

.puja-seat-name-input:hover {
    background: #f6e4b8;
}

.puja-seat-name-input:focus {
    outline: none;
    border-color: #a84633;
    background: #fff;
}

.puja-seat-badge {
    display: none;
    border: 1px solid #f0d7a2;
    border-radius: 999px;
    background: #fefaf0;
    padding: 0.25rem 0.55rem;
    color: #7d5514;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.puja-seat-remove,
.puja-stepper-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #eed6aa;
    border-radius: 999px;
    background: #fff;
    color: #872f20;
    font-size: 1.1rem;
    font-weight: 700;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.puja-seat-remove svg {
    width: 0.9rem;
    height: 0.9rem;
}

.puja-seat-remove:hover,
.puja-stepper-button:hover:not(:disabled) {
    border-color: #872f20;
    background: #872f20;
    color: #fff8ea;
    transform: translateY(-1px);
}

.puja-stepper-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.puja-day-option {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #edd39d;
    border-radius: 1rem;
    background: #fff;
    padding: 0.85rem;
    color: #475569;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.puja-day-option:hover {
    border-color: #cf9020;
    transform: translateY(-1px);
}

.puja-day-option:has(input:focus-visible) {
    outline: 3px solid rgba(207, 144, 32, 0.28);
    outline-offset: 2px;
}

.puja-day-option.is-selected {
    border-color: #872f20;
    background: #3d0a08;
    color: #fff8ea;
    box-shadow: 0 8px 18px rgba(61, 10, 8, 0.15);
}

.puja-day-number {
    display: inline-flex;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0d7a2;
    border-radius: 0.8rem;
    background: #fefaf0;
    color: #551910;
    font-family: 'Cinzel', serif;
    font-weight: 800;
}

.puja-day-option.is-selected .puja-day-number {
    border-color: rgba(240, 193, 92, 0.55);
    background: rgba(240, 193, 92, 0.15);
    color: #f6db92;
}

.puja-day-option strong,
.puja-day-option small {
    display: block;
}

.puja-day-option strong {
    font-size: 0.82rem;
}

.puja-day-option small {
    margin-top: 0.12rem;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 600;
}

.puja-day-option.is-selected small {
    color: #f6db92;
}

/* Day tiles are centred ticket stubs: numeral badge on top, weekday and
   date beneath it, and a footer note stating whether bhog is served that
   day. Everything is centre-aligned on one axis, so all three tiles read as
   a matched set no matter how many lines their note wraps to.

   This replaces an earlier badge-left/label-right arrangement. When the
   Day 3 restriction was added there as a third <small> inside the label
   stack, it grew only that one column and visibly pushed its weekday off
   the line its two siblings sat on. Centring removes the asymmetry at its
   source rather than compensating for it, and giving EVERY tile a note
   turns meal availability into something scannable across the whole row
   instead of a caveat buried on one tile. The dashed rule echoes the ticket
   perforation used elsewhere on this page. */
.puja-day-option {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    text-align: center;
}

.puja-day-option-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.puja-day-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-top: 1px dashed #edd39d;
    padding-top: 0.55rem;
    color: #7c8595;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.puja-day-note::before {
    content: "\2726";
    flex: 0 0 auto;
    font-size: 0.7rem;
    line-height: 1;
}

/* Day 3 for guests: attendance is welcome, bhog is members-only. Warmer
   tone than the neutral note so the difference registers at a glance. */
.puja-day-note--restricted {
    color: #9a5b12;
}

.puja-day-option.is-selected .puja-day-note {
    border-top-color: rgba(240, 193, 92, 0.4);
    color: rgba(246, 219, 146, 0.78);
}

.puja-day-option.is-selected .puja-day-note--restricted {
    color: #f0c15c;
}

.puja-meal-guidance {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1px solid rgba(207, 144, 32, 0.55);
    border-radius: 1rem;
    background: linear-gradient(135deg, #fbeecb, #fef7e7);
    padding: 0.85rem 1rem;
    color: #551910;
    font-size: 0.78rem;
    line-height: 1.55;
}

.puja-meal-guidance > span {
    color: #a8721a;
}

.puja-meals-empty {
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px dashed #e4bd70;
    border-radius: 1rem;
    background: rgba(254, 250, 240, 0.7);
    padding: 1.25rem;
}

.puja-meals-empty > span {
    color: rgba(125, 85, 20, 0.22);
    font-family: 'Cinzel', serif;
    font-size: 2.25rem;
    font-weight: 800;
}

.puja-meal-grid-head {
    display: none;
    grid-template-columns: minmax(9rem, 0.75fr) minmax(18rem, 2fr) 5rem;
    gap: 1rem;
    padding: 0 0.9rem 0.55rem;
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.puja-meal-row {
    display: grid;
    gap: 0.85rem;
    border: 1px solid #f0d7a2;
    border-radius: 1rem;
    background: #fff;
    padding: 0.85rem;
}

.puja-meal-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.puja-meal-options {
    /* The bundle pill's label ("Select 3-day bundle") is far longer than a
       "Day N" label — giving it an equal grid column made it wrap into one
       word per line. It now gets its own full-width row, with the day
       pills sharing an even row underneath. */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.puja-meal-day-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.puja-meal-pill {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #ead5ae;
    border-radius: 0.75rem;
    background: #fffdf8;
    padding: 0.55rem 0.7rem;
    color: #64748b;
    text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.puja-meal-pill:hover:not(:disabled) {
    border-color: #cf9020;
    color: #551910;
    transform: translateY(-1px);
}

.puja-meal-pill.is-selected {
    border-color: #872f20;
    background: #872f20;
    color: #fff8ea;
    box-shadow: 0 5px 12px rgba(135, 47, 32, 0.15);
}

.puja-meal-pill.is-locked {
    cursor: default;
    border-color: rgba(168, 114, 26, 0.48);
    background: #fbeecb;
    color: #7d5514;
    box-shadow: none;
}

.puja-bundle-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-style: dashed;
    border-color: #cbd5e1;
    background: #fff;
    color: #64748b;
    padding: 0.65rem 0.9rem;
}

.puja-bundle-pill:hover:not(:disabled) {
    border-color: #a8721a;
    background: #fefaf0;
    color: #551910;
}

.puja-bundle-pill.is-selected {
    border-color: #cf9020;
    border-style: solid;
    background: #3d0a08;
    color: #f6db92;
}

.puja-bundle-state {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.puja-bundle-explainer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    border: 1px solid #e4bd70;
    border-radius: 0.9rem;
    background: linear-gradient(110deg, #fffaf0, #fffdf8);
    padding: 0.8rem 0.9rem;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}

.puja-bundle-explainer > span {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #3d0a08;
    color: #f6db92;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 800;
}

.puja-bundle-explainer strong {
    color: #551910;
}

.puja-meal-price {
    display: flex;
    align-items: end;
    justify-content: space-between;
    border-top: 1px solid #f5e7ca;
    padding-top: 0.7rem;
    color: #3d0a08;
}

.puja-meal-price strong {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
}

.puja-order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #cf9020;
    border-radius: 1rem;
    background: linear-gradient(115deg, #fbeecb, #fffdf8 58%, #fef7e7);
    padding: 1rem 1.15rem;
    box-shadow: 0 8px 20px rgba(125, 85, 20, 0.08);
}

.puja-alert-success,
.puja-alert-error {
    border: 1px solid;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
}

.puja-alert-success {
    border-color: rgba(22, 101, 52, 0.26);
    background: #dcfce7;
    color: #166534;
}

.puja-alert-error {
    border-color: rgba(185, 28, 28, 0.24);
    background: #fef2f2;
    color: #991b1b;
}

@media (min-width: 640px) {
    .puja-seat-badge { display: inline-flex; }
    .puja-meal-day-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .puja-form-step { padding: 1.5rem; }
    .puja-meal-grid-head { display: grid; }
    .puja-meal-row {
        grid-template-columns: minmax(9rem, 0.75fr) minmax(18rem, 2fr) 5rem;
        align-items: center;
        gap: 1rem;
    }
    .puja-meal-price {
        display: block;
        border-top: 0;
        padding-top: 0;
        text-align: right;
    }
    .puja-meal-price strong { display: block; margin-top: 0.2rem; }
}

/* Cultural programme (guest form, step 04) — one tickable card per person in
   the party, adults and kids alike. A kid's card also carries a name input,
   revealed only once their box is ticked, because kid seats are anonymous
   counters everywhere else in this form. */
.puja-cultural-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.55rem;
    border: 1px solid #f1d59b;
    border-radius: 1rem;
    background: #fff;
    padding: 0.8rem;
    box-shadow: 0 5px 16px rgba(61, 10, 8, 0.045);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.puja-cultural-card.is-selected {
    border-color: rgba(168, 114, 26, 0.58);
    background: linear-gradient(135deg, #fffdf8, #fef7e7);
    box-shadow: 0 8px 20px rgba(61, 10, 8, 0.08);
}

.puja-cultural-toggle {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}

.puja-cultural-check {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    accent-color: #7a1d13;
    cursor: pointer;
}

.puja-cultural-body {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.puja-cultural-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3d0a08;
    font-size: 0.875rem;
    font-weight: 700;
}

.puja-cultural-kind {
    display: block;
    margin-top: 0.1rem;
    color: #7c8695;
    font-size: 0.7rem;
    font-weight: 500;
}

.puja-cultural-name-input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: #fbeecb;
    padding: 0.4rem 0.65rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #2a0705;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.puja-cultural-name-input::placeholder {
    font-weight: 500;
    color: #a8895a;
}

.puja-cultural-name-input:hover { background: #f6e4b8; }

.puja-cultural-name-input:focus {
    outline: none;
    border-color: #a84633;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .puja-seat-card { animation: none; }
    .puja-countdown-plate::after { animation: none; opacity: 0; }
    .puja-countdown-plate [data-countdown].is-ticking { animation: none; }
    .puja-countdown-colon { animation: none; }
    .puja-day-option,
    .puja-seat-remove,
    .puja-stepper-button,
    .puja-cultural-card,
    .puja-cultural-name-input,
    .puja-meal-pill { transition: none; }
}