.jam-pelayanan-module,
.jam-pelayanan-module *,
.jam-pelayanan-module *::before,
.jam-pelayanan-module *::after {
    box-sizing: border-box;
}

.jam-pelayanan-module {
    --jp-shell-bg:
        radial-gradient(circle at top right, rgba(214, 174, 84, 0.14), transparent 36%),
        linear-gradient(145deg, #fffdfa 0%, #fff8ee 100%);
    --jp-shell-border: rgba(138, 87, 36, 0.12);
    --jp-shell-shadow: 0 16px 36px rgba(72, 34, 17, 0.08);
    --jp-accent: linear-gradient(90deg, #8f1d0b 0%, #d5a74e 100%);
    --jp-title: #8d2f17;
    --jp-subtitle: #70655e;
    --jp-status-closed-bg: linear-gradient(145deg, #fff3f2, #fee8e7);
    --jp-status-closed-border: rgba(185, 28, 28, 0.14);
    --jp-status-closed-text: #a12723;
    --jp-status-open-bg: linear-gradient(145deg, #f4fbf7, #e2f4eb);
    --jp-status-open-border: rgba(58, 130, 96, 0.16);
    --jp-status-open-text: #1f6d52;
    --jp-status-holiday-bg: linear-gradient(145deg, #fff2f4, #ffe5e9);
    --jp-status-holiday-border: rgba(190, 24, 93, 0.14);
    --jp-status-holiday-text: #b4235a;
    --jp-item-bg: rgba(255, 255, 255, 0.78);
    --jp-item-border: rgba(138, 87, 36, 0.08);
    --jp-item-shadow: 0 8px 18px rgba(72, 34, 17, 0.04);
    --jp-item-hover-shadow: 0 14px 26px rgba(72, 34, 17, 0.08);
    --jp-item-title: #2f241f;
    --jp-item-time: #3f505b;
    --jp-item-time-closed: #9e3420;
    --jp-item-today-bg: linear-gradient(145deg, #fffaf1, #fff3df);
    --jp-item-today-border: rgba(214, 173, 84, 0.32);
    --jp-icon-bg: linear-gradient(135deg, rgba(255, 250, 241, 0.98), rgba(245, 235, 216, 0.96));
    --jp-icon-border: rgba(214, 173, 84, 0.18);
    --jp-icon-text: #ad6726;
    --jp-note-bg: linear-gradient(145deg, #f7fafc, #eef2f6);
    --jp-note-border: rgba(138, 87, 36, 0.07);
    --jp-note-text: #5b6672;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    padding: 18px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--jp-shell-bg);
    border: 1px solid var(--jp-shell-border);
    box-shadow: var(--jp-shell-shadow);
    color: var(--jp-item-title);
}

.jam-pelayanan-module::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.jam-pelayanan-header,
.jam-pelayanan-status,
.jam-pelayanan-list,
.jam-pelayanan-note {
    position: relative;
    z-index: 1;
}

.jam-pelayanan-header {
    margin-bottom: 15px;
}

.jam-pelayanan-copy {
    position: relative;
    padding-top: 16px;
}

.jam-pelayanan-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: var(--jp-accent);
    box-shadow: 0 8px 14px rgba(165, 90, 34, 0.10);
}

.jam-pelayanan-header h3 {
    margin: 0 0 5px;
    font-size: 18px;
    line-height: 1.24;
    font-weight: 800;
    color: var(--jp-title);
}

.jam-pelayanan-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--jp-subtitle);
}

.jam-pelayanan-status {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 13px;
    border-radius: 15px;
    background: var(--jp-status-closed-bg);
    border: 1px solid var(--jp-status-closed-border);
    color: var(--jp-status-closed-text);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.58);
}

.status-text-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.status-text-wrap strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
}

.status-text-wrap span {
    display: block;
    font-size: 11.5px;
    line-height: 1.38;
    font-weight: 600;
    opacity: 0.84;
}

.jam-pelayanan-status small {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-left: 11px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    opacity: 0.82;
    white-space: nowrap;
}

.jam-pelayanan-status.open {
    background: var(--jp-status-open-bg);
    border-color: var(--jp-status-open-border);
    color: var(--jp-status-open-text);
}

.jam-pelayanan-status.holiday {
    background: var(--jp-status-holiday-bg);
    border-color: var(--jp-status-holiday-border);
    color: var(--jp-status-holiday-text);
}

.jam-pelayanan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}

.jam-pelayanan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 15px;
    background: var(--jp-item-bg);
    border: 1px solid var(--jp-item-border);
    box-shadow: var(--jp-item-shadow);
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.jam-pelayanan-item:hover {
    transform: translateY(-1px);
    border-color: rgba(165, 90, 34, 0.14);
    box-shadow: var(--jp-item-hover-shadow);
}

.jam-pelayanan-item.is-today {
    background: var(--jp-item-today-bg);
    border-color: var(--jp-item-today-border);
    box-shadow: 0 12px 22px rgba(214, 173, 84, 0.10);
}

.jam-pelayanan-item.closed {
    background: linear-gradient(145deg, rgba(255, 252, 248, 0.94), rgba(255, 247, 238, 0.98));
}

.jam-pelayanan-day {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1 1 auto;
    min-width: 0;
}

.day-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--jp-icon-bg);
    border: 1px solid var(--jp-icon-border);
    color: var(--jp-icon-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-size: 13px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.day-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.jam-pelayanan-item:hover .day-icon {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 10px 18px rgba(72, 34, 17, 0.08);
}

.jam-pelayanan-item.closed .day-icon {
    background: linear-gradient(135deg, rgba(255, 248, 233, 0.98), rgba(247, 235, 223, 0.96));
}

.jam-pelayanan-day strong {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.28;
    font-weight: 800;
    color: var(--jp-item-title);
}

.today-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-top: 5px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(214, 173, 84, 0.16);
    color: #8d2f17;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.closed-badge {
    background: rgba(159, 52, 32, 0.10);
    color: #9e3420;
}

.jam-pelayanan-time {
    min-width: 110px;
    text-align: right;
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--jp-item-time);
    white-space: nowrap;
}

.closed-text {
    color: var(--jp-item-time-closed);
}

.jam-pelayanan-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--jp-note-bg);
    border: 1px solid var(--jp-note-border);
    color: var(--jp-note-text);
    font-size: 12.5px;
    line-height: 1.5;
}

.jam-pelayanan-note-mark {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin-top: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8f1d0b 0%, #d5a74e 100%);
    box-shadow: 0 8px 12px rgba(165, 90, 34, 0.12);
}

.jam-pelayanan-gold {
    --jp-shell-bg:
        radial-gradient(circle at top right, rgba(229, 193, 114, 0.12), transparent 34%),
        linear-gradient(145deg, #fffefb 0%, #fff9f0 56%, #fdf3e3 100%);
    --jp-shell-border: rgba(198, 154, 74, 0.16);
    --jp-shell-shadow: 0 16px 36px rgba(99, 60, 24, 0.08);
    --jp-accent: linear-gradient(90deg, #b97a24 0%, #ead7a0 100%);
    --jp-title: #8f3719;
    --jp-subtitle: #7b6b61;
    --jp-status-closed-bg: linear-gradient(145deg, #fff4f1, #feebe8);
    --jp-status-closed-border: rgba(180, 66, 33, 0.14);
    --jp-status-closed-text: #a13b22;
    --jp-status-open-bg: linear-gradient(145deg, #f7fdf9, #eaf6ef);
    --jp-status-open-border: rgba(73, 140, 101, 0.16);
    --jp-status-open-text: #2f7155;
    --jp-status-holiday-bg: linear-gradient(145deg, #fff2f4, #ffe7eb);
    --jp-status-holiday-border: rgba(184, 62, 110, 0.14);
    --jp-status-holiday-text: #b23d6f;
    --jp-item-bg: rgba(255, 255, 255, 0.88);
    --jp-item-border: rgba(198, 154, 74, 0.10);
    --jp-item-shadow: 0 8px 18px rgba(99, 60, 24, 0.04);
    --jp-item-hover-shadow: 0 14px 26px rgba(99, 60, 24, 0.08);
    --jp-item-title: #3b2d25;
    --jp-item-time: #37655b;
    --jp-item-time-closed: #a13b22;
    --jp-item-today-bg: linear-gradient(145deg, #fffaf2, #fff2df);
    --jp-item-today-border: rgba(214, 173, 84, 0.28);
    --jp-icon-bg: linear-gradient(135deg, rgba(255, 252, 244, 0.98), rgba(246, 236, 214, 0.96));
    --jp-icon-border: rgba(214, 173, 84, 0.16);
    --jp-icon-text: #b17427;
    --jp-note-bg: linear-gradient(145deg, #fbfcfd, #f2f4f7);
    --jp-note-border: rgba(198, 154, 74, 0.08);
    --jp-note-text: #606b75;
}

.jam-pelayanan-maroon {
    --jp-shell-bg:
        radial-gradient(circle at top right, rgba(223, 177, 83, 0.12), transparent 30%),
        linear-gradient(145deg, #fdf7f3 0%, #fbede6 48%, #f7e1d6 100%);
    --jp-shell-border: rgba(142, 49, 25, 0.14);
    --jp-shell-shadow: 0 16px 36px rgba(88, 26, 16, 0.10);
    --jp-accent: linear-gradient(90deg, #7f170d 0%, #d6a046 100%);
    --jp-title: #77190f;
    --jp-subtitle: #7f625b;
    --jp-status-closed-bg: linear-gradient(145deg, #fff0ef, #fde5e2);
    --jp-status-closed-border: rgba(143, 49, 25, 0.16);
    --jp-status-closed-text: #932e1b;
    --jp-status-open-bg: linear-gradient(145deg, #f5fbf7, #e6f1ea);
    --jp-status-open-border: rgba(61, 120, 92, 0.16);
    --jp-status-open-text: #275f48;
    --jp-status-holiday-bg: linear-gradient(145deg, #fff1f4, #ffe5eb);
    --jp-status-holiday-border: rgba(186, 46, 94, 0.16);
    --jp-status-holiday-text: #ac2758;
    --jp-item-bg: rgba(255, 252, 249, 0.90);
    --jp-item-border: rgba(143, 49, 25, 0.09);
    --jp-item-shadow: 0 8px 18px rgba(88, 26, 16, 0.04);
    --jp-item-hover-shadow: 0 14px 26px rgba(88, 26, 16, 0.08);
    --jp-item-title: #402822;
    --jp-item-time: #355f56;
    --jp-item-time-closed: #922d1a;
    --jp-item-today-bg: linear-gradient(145deg, #fff7ef, #fff0dd);
    --jp-item-today-border: rgba(214, 160, 70, 0.28);
    --jp-icon-bg: linear-gradient(135deg, rgba(255, 248, 240, 0.98), rgba(248, 235, 225, 0.96));
    --jp-icon-border: rgba(143, 49, 25, 0.10);
    --jp-icon-text: #a45920;
    --jp-note-bg: linear-gradient(145deg, #faf8f9, #f2eef1);
    --jp-note-border: rgba(143, 49, 25, 0.07);
    --jp-note-text: #655b61;
}

.jam-pelayanan-dark {
    --jp-shell-bg:
        radial-gradient(circle at top right, rgba(214, 173, 84, 0.16), transparent 32%),
        linear-gradient(145deg, #1f252d 0%, #171c22 55%, #11161b 100%);
    --jp-shell-border: rgba(210, 173, 92, 0.14);
    --jp-shell-shadow: 0 18px 40px rgba(7, 10, 14, 0.28);
    --jp-accent: linear-gradient(90deg, rgba(214, 173, 84, 0.98), rgba(250, 241, 230, 0.72));
    --jp-title: #f7f1e7;
    --jp-subtitle: #c7bcaf;
    --jp-status-closed-bg: linear-gradient(145deg, rgba(103, 27, 29, 0.30), rgba(63, 18, 20, 0.24));
    --jp-status-closed-border: rgba(224, 111, 111, 0.18);
    --jp-status-closed-text: #ffd3d0;
    --jp-status-open-bg: linear-gradient(145deg, rgba(20, 74, 58, 0.34), rgba(16, 58, 46, 0.26));
    --jp-status-open-border: rgba(83, 180, 140, 0.18);
    --jp-status-open-text: #d2f6e8;
    --jp-status-holiday-bg: linear-gradient(145deg, rgba(97, 25, 57, 0.34), rgba(69, 18, 40, 0.28));
    --jp-status-holiday-border: rgba(222, 111, 164, 0.18);
    --jp-status-holiday-text: #ffd7ea;
    --jp-item-bg: rgba(255, 255, 255, 0.05);
    --jp-item-border: rgba(220, 188, 116, 0.10);
    --jp-item-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    --jp-item-hover-shadow: 0 16px 28px rgba(0, 0, 0, 0.20);
    --jp-item-title: #f4ede2;
    --jp-item-time: #8fd0bc;
    --jp-item-time-closed: #f7b1a8;
    --jp-item-today-bg: linear-gradient(145deg, rgba(214, 173, 84, 0.14), rgba(214, 173, 84, 0.08));
    --jp-item-today-border: rgba(214, 173, 84, 0.28);
    --jp-icon-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(214, 173, 84, 0.10));
    --jp-icon-border: rgba(218, 185, 111, 0.14);
    --jp-icon-text: #f0cf87;
    --jp-note-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    --jp-note-border: rgba(220, 188, 116, 0.08);
    --jp-note-text: #c9d2db;
}

@media (max-width: 575px) {
    .jam-pelayanan-module {
        padding: 16px;
        border-radius: 16px;
    }

    .jam-pelayanan-header {
        margin-bottom: 14px;
    }

    .jam-pelayanan-header h3 {
        font-size: 17px;
    }

    .jam-pelayanan-header p {
        font-size: 12px;
    }

    .jam-pelayanan-status {
        grid-template-columns: 10px 1fr;
        gap: 8px;
        padding: 12px;
    }

    .jam-pelayanan-status small {
        grid-column: 2;
        padding-left: 0;
        border-left: none;
    }

    .jam-pelayanan-item {
        display: grid;
        grid-template-columns: 36px 1fr;
        align-items: center;
        gap: 10px;
        padding: 13px;
    }

    .jam-pelayanan-day {
        display: contents;
    }

    .day-icon {
        grid-row: span 2;
    }

    .jam-pelayanan-day div {
        min-width: 0;
    }

    .jam-pelayanan-time {
        grid-column: 2;
        min-width: 0;
        text-align: left;
        white-space: normal;
    }

    .jam-pelayanan-note {
        font-size: 11.5px;
        line-height: 1.45;
    }
}