:root {
    --ws-brand: #814b3e;
    --ws-brand-strong: #63352c;
    --ws-brand-soft: rgba(129, 75, 62, 0.12);
}

:root {
    --prayer-radius-xl: 1.5rem;
    --prayer-radius-lg: 1.35rem;
    --prayer-radius-md: 1.1rem;
}

html {
    font-size: 15px;
}

body {
    background:
        radial-gradient(circle at top left, rgba(129, 75, 62, 0.10), transparent 26%),
        radial-gradient(circle at bottom right, rgba(255, 215, 128, 0.18), transparent 28%),
        linear-gradient(180deg, #f8f7f4 0%, #f3efe9 100%);
    font-size: 0.95rem;
}

.prayer-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 24, 29, 0.32);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    z-index: 45;
}

.prayer-panel-shell {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: min(100vw - 1.5rem, 34rem);
    transform: translateX(calc(100% + 1.5rem));
    transition: transform 300ms cubic-bezier(.2,.8,.2,1);
    z-index: 50;
    pointer-events: none;
}

.prayer-panel-shell[hidden] {
    display: none;
}

.prayer-panel-shell[data-prayer-panel="date"] {
    width: min(100vw - 1.5rem, 30rem);
}

.prayer-panel-shell[data-prayer-panel="area"] {
    width: min(100vw - 1.5rem, 36rem);
}

.prayer-panel-shell[data-prayer-panel="info"] {
    width: min(100vw - 1.5rem, 42rem);
}

body.panel-open .prayer-panel-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.panel-open .prayer-panel-shell.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

body.panel-open .prayer-panel-shell.is-open[hidden] {
    display: block;
}

.prayer-card {
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        opacity 220ms ease;
    position: relative;
    overflow: hidden;
}

.prayer-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.45), transparent 36%);
    opacity: .22;
    pointer-events: none;
}

.prayer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 45px rgba(21, 28, 34, 0.11);
}

.prayer-card.passed {
    opacity: .45;
    filter: grayscale(.08);
}

.prayer-card.passed time {
    text-decoration: line-through;
}

body[data-variant="progress"] .prayer-card.passed:not(.current) {
    display: none;
}

body[data-variant="progress"] .prayer-card {
    --ws-card-text: #2b1a15;
    --ws-card-muted: rgba(43, 26, 21, .72);
    --ws-card-icon-bg: rgba(255, 255, 255, .42);
    background-size: cover !important;
    background-position: center !important;
    border-color: rgba(255, 255, 255, .48) !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="imsak"] {
    --ws-card-text: #f8fbff;
    --ws-card-muted: rgba(226, 237, 255, .82);
    --ws-card-icon-bg: rgba(255, 255, 255, .16);
    background-image: linear-gradient(135deg, rgba(4, 12, 31, .68), rgba(4, 12, 31, .28)), url("/assets/images/bkg_imsak.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="subuh"] {
    --ws-card-text: #fffaf0;
    --ws-card-muted: rgba(255, 244, 214, .84);
    --ws-card-icon-bg: rgba(255, 255, 255, .18);
    background-image: linear-gradient(135deg, rgba(42, 27, 74, .62), rgba(42, 27, 74, .22)), url("/assets/images/bkg_subuh.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="syuruk"] {
    --ws-card-text: #2b160f;
    --ws-card-muted: rgba(61, 34, 22, .76);
    --ws-card-icon-bg: rgba(255, 255, 255, .36);
    background-image: linear-gradient(135deg, rgba(255, 244, 214, .64), rgba(255, 255, 255, .24)), url("/assets/images/bkg_syuruk.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="dhuha"] {
    --ws-card-text: #17342a;
    --ws-card-muted: rgba(23, 52, 42, .72);
    --ws-card-icon-bg: rgba(255, 255, 255, .52);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(237, 247, 240, .30)), url("/assets/images/bkg_dhuha.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="zohor"] {
    --ws-card-text: #102f45;
    --ws-card-muted: rgba(16, 47, 69, .72);
    --ws-card-icon-bg: rgba(255, 255, 255, .44);
    background-image: linear-gradient(135deg, rgba(241, 250, 255, .70), rgba(255, 255, 255, .18)), url("/assets/images/bkg_zohor.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="asar"] {
    --ws-card-text: #2e160a;
    --ws-card-muted: rgba(46, 22, 10, .74);
    --ws-card-icon-bg: rgba(255, 255, 255, .34);
    background-image: linear-gradient(135deg, rgba(255, 238, 213, .62), rgba(255, 255, 255, .18)), url("/assets/images/bkg_asar.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="magrib"] {
    --ws-card-text: #fff7ed;
    --ws-card-muted: rgba(255, 237, 213, .84);
    --ws-card-icon-bg: rgba(255, 255, 255, .18);
    background-image: linear-gradient(135deg, rgba(62, 12, 18, .68), rgba(92, 24, 30, .26)), url("/assets/images/bkg_maghrib.jpg") !important;
}

body[data-variant="progress"] .prayer-card[data-prayer="isyak"] {
    --ws-card-text: #f8fbff;
    --ws-card-muted: rgba(226, 237, 255, .82);
    --ws-card-icon-bg: rgba(255, 255, 255, .16);
    background-image: linear-gradient(135deg, rgba(3, 9, 23, .70), rgba(3, 9, 23, .30)), url("/assets/images/bkg_isyak.jpg") !important;
}

body[data-variant="progress"] .event-card {
    --ws-card-text: #fff7ed;
    --ws-card-muted: rgba(255, 247, 237, .82);
    min-height: 11rem;
    background-image: linear-gradient(135deg, rgba(54, 18, 12, .70), rgba(129, 75, 62, .34)), url("/assets/images/bkg_event.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    border-color: rgba(255, 255, 255, .44) !important;
    color: var(--ws-card-text) !important;
}

body[data-variant="progress"] .event-card :is(h3, p, span, div) {
    color: var(--ws-card-text) !important;
}

body[data-variant="progress"] .event-card p,
body[data-variant="progress"] .event-card .badge {
    color: var(--ws-card-muted) !important;
}

body[data-variant="progress"] .event-card .badge {
    border-color: rgba(255, 247, 237, .55) !important;
    background: rgba(255, 255, 255, .10) !important;
}

body[data-variant="progress"] .prayer-card :is(p, time, a, div) {
    color: var(--ws-card-text) !important;
}

body[data-variant="progress"] .prayer-card p {
    color: var(--ws-card-muted) !important;
}

body[data-variant="progress"] .prayer-card time {
    color: var(--ws-card-text) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

body[data-variant="progress"] .prayer-card .rounded-2xl {
    background-color: var(--ws-card-icon-bg) !important;
}

.prayer-card.current {
    border-color: rgba(239, 68, 68, 0.58);
    box-shadow:
        0 18px 40px rgba(239, 68, 68, 0.18),
        0 0 0 1px rgba(251, 146, 60, 0.22) inset;
    animation: prayer-pulse 1.35s ease-in-out infinite;
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(254, 202, 202, 0.25), rgba(255, 255, 255, 0.95)) !important;
}

.prayer-card.current::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.42), transparent 34%),
        radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.22), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 247, 237, 0.65) 52%, rgba(255, 237, 213, 0.62));
    opacity: .88;
    animation: prayer-glow 1s ease-in-out infinite;
    pointer-events: none;
}

.prayer-card.current > * {
    position: relative;
    z-index: 1;
}

.prayer-card[data-schedule="tomorrow"] {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92));
}

.tabs-boxed > .tab.tab-active {
    background: var(--ws-brand);
    color: #fff;
}

.btn-primary {
    --btn-color: #fff;
    background: linear-gradient(180deg, var(--ws-brand), var(--ws-brand-strong));
    border-color: transparent;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #8f5547, var(--ws-brand-strong));
}

.btn-outline {
    border-color: rgba(129, 75, 62, 0.25);
}

.prayer-info-trigger {
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    flex: none;
    align-self: flex-start;
    border-radius: 9999px;
    border: 1px solid rgba(129, 75, 62, 0.18);
    background: rgba(255, 255, 255, 0.84);
    color: var(--ws-brand-strong);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.prayer-info-trigger:hover {
    transform: translateY(-1px);
    background: #fff7ed;
    color: #b45309;
}

.search-clear-btn {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    color: rgba(100, 116, 139, 0.86);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    z-index: 2;
}

.search-clear-btn:hover {
    color: #b91c1c;
    background: #fff;
}

#location-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

#location-search::-ms-clear {
    display: none;
}

#mobile-prayer-sticky.is-hidden {
    display: none;
}

#prayer-progress-shell.is-hidden {
    display: none;
}

#progress-clock {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    color: #9ca3af;
}

#next-prayer {
    font-size: 1.15rem;
    line-height: 1.55;
    font-weight: 700;
    color: #f43f5e;
}

.prayer-hero-sheen {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-35%);
    animation: prayer-hero-sheen 8s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

.prayer-progress {
    appearance: none;
    overflow: hidden;
    border-radius: 9999px;
    background: #d1d5db;
}

.prayer-progress::-webkit-progress-bar {
    background: #d1d5db;
    border-radius: 9999px;
}

.prayer-progress::-webkit-progress-value {
    border-radius: 9999px;
    background-color: #22c55e;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.28) 0 12px,
        rgba(255, 255, 255, 0) 12px 24px
    );
    background-size: 24px 24px;
    animation: prayer-progress-stripes 1.1s linear infinite;
    box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.18);
}

.prayer-progress::-moz-progress-bar {
    border-radius: 9999px;
    background-color: #22c55e;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.28) 0 12px,
        rgba(255, 255, 255, 0) 12px 24px
    );
    background-size: 24px 24px;
    animation: prayer-progress-stripes 1.1s linear infinite;
    box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.18);
}

#progress-start-name,
#progress-end-name {
    font-size: 1rem;
    line-height: 1.5;
}

#progress-start-meta,
#progress-end-meta {
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgb(100 116 139);
}

#location-results {
    overflow: auto;
}

/* Keep the area search controls visible while the zone list is browsed. */
.area-panel-tools {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.area-panel-tools #location-search {
    min-height: 3rem;
}

/* Legacy-style area option rows */
.area-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 10px 12px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.area-option:last-child {
    border-bottom: none;
}

.area-option:hover {
    background-color: #f8f9fa;
}

.area-flag {
    width: 3rem;
    height: auto;
    border-radius: 3px;
    border: 1px solid #6c757d;
    flex-shrink: 0;
    object-fit: cover;
}

.area-jcode {
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.area-label {
    font-size: 13px;
    line-height: 1.35;
}

.panel-open {
    overflow: hidden;
}

@keyframes prayer-pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1px);
    }
}

@keyframes prayer-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .2;
    }
}

@keyframes prayer-glow {
    0%, 100% {
        opacity: .72;
        filter: saturate(1.08);
    }
    50% {
        opacity: 1;
        filter: saturate(1.25);
    }
}

@keyframes prayer-hero-sheen {
    0% {
        transform: translateX(-40%);
        opacity: 0.25;
    }
    50% {
        transform: translateX(5%);
        opacity: 0.65;
    }
    100% {
        transform: translateX(40%);
        opacity: 0.25;
    }
}

@keyframes prayer-progress-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 24px 0;
    }
}

@media (max-width: 639px) {
    .prayer-panel-shell,
    .prayer-panel-shell[data-prayer-panel="date"],
    .prayer-panel-shell[data-prayer-panel="area"],
    .prayer-panel-shell[data-prayer-panel="info"] {
        inset: 0.5rem;
        width: auto;
    }

    .search-clear-btn {
        width: 1.75rem;
        height: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prayer-card,
    .prayer-card.current {
        animation: none;
        transition: none;
    }
}

/* Panel container */
.prayer-panel-shell {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 420px;
    z-index: 50;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.prayer-panel-shell[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Panel inner content */
.prayer-panel-shell .flex.h-full {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(20px);
}

.prayer-panel-shell[aria-hidden="false"] .flex.h-full {
    transform: translateX(0);
}

/* Backdrop */
.prayer-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 45;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.prayer-panel-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Panel header animations */
.prayer-panel-shell .border-b {
    transition: opacity 0.3s ease 0.1s;
    opacity: 0;
}

.prayer-panel-shell[aria-hidden="false"] .border-b {
    opacity: 1;
}

/* Panel content slide up */
.prayer-panel-shell .flex-1 {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
    transform: translateY(10px);
    opacity: 0;
}

.prayer-panel-shell[aria-hidden="false"] .flex-1 {
    transform: translateY(0);
    opacity: 1;
}