/* ============================================
   Meubelen Moens Openingsuren — Frontend Styles
   ============================================ */

.moens-openingsuren {
    --moens-primary: #1a1f36;
    --moens-accent: #e63946;
    --moens-bg: #ffffff;
    --moens-bg-subtle: #f8f9fa;
    --moens-border: #e9ecef;
    --moens-text: #2d3436;
    --moens-text-muted: #868e96;
    --moens-radius: 12px;
    --moens-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;

    font-family: var(--moens-font);
    color: var(--moens-text);
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    line-height: 1.5;
    box-sizing: border-box;
    overflow: hidden;
}

/* Dark theme */
.moens-openingsuren--dark {
    --moens-bg: #1a1f36;
    --moens-bg-subtle: #252b45;
    --moens-border: #353b55;
    --moens-text: #f1f3f5;
    --moens-text-muted: #adb5bd;
}

/* ---- Header ---- */
.moens-openingsuren__header {
    margin-bottom: 20px;
}

.moens-openingsuren__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--moens-primary);
    margin: 0 0 4px 0;
    padding: 0;
    letter-spacing: -0.01em;
}

.moens-openingsuren--dark .moens-openingsuren__title {
    color: #ffffff;
}

.moens-openingsuren__subtitle {
    font-size: 0.9rem;
    color: var(--moens-text-muted);
    margin: 0;
}

/* ---- Tabs (multiple departments) ---- */
.moens-openingsuren__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--moens-border);
}

.moens-openingsuren__tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--moens-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    font-family: var(--moens-font);
}

.moens-openingsuren__tab:hover {
    color: var(--moens-text);
}

.moens-openingsuren__tab--active {
    color: var(--moens-primary);
    border-bottom-color: var(--moens-accent);
}

.moens-openingsuren--dark .moens-openingsuren__tab--active {
    color: #ffffff;
    border-bottom-color: var(--moens-accent);
}

/* ---- Panels ---- */
.moens-openingsuren__panel {
    display: none;
}

.moens-openingsuren__panel--active {
    display: block;
}

/* ---- Hours Table ---- */
.moens-openingsuren__table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0;
    table-layout: fixed;
}

.moens-openingsuren__table tbody {
    border: none;
}

.moens-openingsuren__row {
    border: none;
    transition: background-color 0.15s;
}

.moens-openingsuren__row td {
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(--moens-border);
    font-size: 0.95rem;
    vertical-align: middle;
}

.moens-openingsuren__row:last-child td {
    border-bottom: none;
}

.moens-openingsuren__day {
    font-weight: 600;
    color: var(--moens-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.moens-openingsuren__hours {
    text-align: right;
    color: var(--moens-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Today highlight */
.moens-openingsuren__row--today td {
    color: var(--moens-primary);
}

.moens-openingsuren--dark .moens-openingsuren__row--today td {
    color: #ffffff;
}

.moens-openingsuren__row--today .moens-openingsuren__day {
    color: var(--moens-primary);
}

.moens-openingsuren--dark .moens-openingsuren__row--today .moens-openingsuren__day {
    color: #ffffff;
}

.moens-openingsuren__today-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--moens-accent);
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Closed day */
.moens-openingsuren__row--closed td {
    color: var(--moens-text-muted);
}

.moens-openingsuren__row--closed .moens-openingsuren__day {
    font-weight: 500;
    color: var(--moens-text-muted);
}

.moens-openingsuren__closed-label {
    font-style: italic;
    color: var(--moens-text-muted);
}

/* ---- Holiday Note ---- */
.moens-openingsuren__note {
    margin-top: 16px;
    padding: 12px 14px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--moens-text-muted);
    background: var(--moens-bg-subtle);
    border-radius: 8px;
    font-style: italic;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---- Status Bar ---- */
.moens-openingsuren__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
}

.moens-openingsuren__status--open {
    background: #ecfdf5;
    color: #065f46;
}

.moens-openingsuren--dark .moens-openingsuren__status--open {
    background: #064e3b;
    color: #a7f3d0;
}

.moens-openingsuren__status--closed {
    background: var(--moens-bg-subtle);
    color: var(--moens-text);
}

.moens-openingsuren__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.moens-openingsuren__status--open .moens-openingsuren__status-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: moens-pulse 2s infinite;
}

.moens-openingsuren__status--closed .moens-openingsuren__status-dot {
    background: #9ca3af;
}

.moens-openingsuren__status-text {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.moens-openingsuren__status-detail {
    font-weight: 400;
    opacity: 0.8;
}

/* Pulse animation for open status */
@keyframes moens-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
}

/* ---- Compact Mode ---- */
.moens-openingsuren--compact .moens-openingsuren__header {
    margin-bottom: 12px;
}

.moens-openingsuren--compact .moens-openingsuren__title {
    font-size: 1.05rem;
}

.moens-openingsuren--compact .moens-openingsuren__row td {
    padding: 6px 0;
    font-size: 0.85rem;
}

.moens-openingsuren--compact .moens-openingsuren__note {
    padding: 8px 10px;
    font-size: 0.75rem;
}

.moens-openingsuren--compact .moens-openingsuren__status {
    padding: 10px 14px;
    font-size: 0.82rem;
}

.moens-openingsuren--compact .moens-openingsuren__today-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
}

/* ---- Responsive ---- */

/* Ensure all children respect box-sizing */
.moens-openingsuren *,
.moens-openingsuren *::before,
.moens-openingsuren *::after {
    box-sizing: border-box;
}

/* Tabs should wrap when space is limited */
.moens-openingsuren__tabs {
    flex-wrap: wrap;
}

/* Medium screens (tablets, small widgets) */
@media (max-width: 520px) {
    .moens-openingsuren {
        max-width: 100%;
    }
}

/* Small screens (large phones) */
@media (max-width: 480px) {
    .moens-openingsuren {
        max-width: 100%;
    }

    .moens-openingsuren__title {
        font-size: 1.15rem;
    }

    .moens-openingsuren__row td {
        padding: 8px 0;
        font-size: 0.88rem;
    }

    .moens-openingsuren__tab {
        padding: 6px 12px;
        font-size: 0.82rem;
    }

    .moens-openingsuren__status {
        padding: 12px 14px;
        font-size: 0.85rem;
        flex-wrap: wrap;
    }

    .moens-openingsuren__note {
        font-size: 0.78rem;
        padding: 10px 12px;
    }

    .moens-openingsuren__today-badge {
        font-size: 0.58rem;
        padding: 1px 5px;
        margin-left: 6px;
    }
}

/* Extra small screens (small phones, narrow widgets) */
@media (max-width: 360px) {
    .moens-openingsuren__title {
        font-size: 1.05rem;
    }

    .moens-openingsuren__row td {
        padding: 7px 0;
        font-size: 0.82rem;
    }

    .moens-openingsuren__day {
        width: 50%;
    }

    .moens-openingsuren__today-badge {
        font-size: 0.55rem;
        padding: 1px 4px;
        margin-left: 4px;
    }

    .moens-openingsuren__tab {
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    .moens-openingsuren__status {
        padding: 10px 12px;
        font-size: 0.8rem;
        gap: 8px;
    }

    .moens-openingsuren__status-detail {
        display: block;
        width: 100%;
        margin-top: 2px;
    }

    .moens-openingsuren__note {
        font-size: 0.75rem;
        padding: 8px 10px;
    }

    .moens-openingsuren__header {
        margin-bottom: 14px;
    }
}

/* Very narrow containers (sidebar widgets, ~240px) */
@media (max-width: 280px) {
    .moens-openingsuren__row td {
        padding: 6px 0;
        font-size: 0.76rem;
    }

    .moens-openingsuren__title {
        font-size: 0.95rem;
    }

    .moens-openingsuren__today-badge {
        display: none;
    }

    .moens-openingsuren__row--today .moens-openingsuren__day {
        text-decoration: underline;
        text-decoration-color: var(--moens-accent);
        text-underline-offset: 3px;
    }

    .moens-openingsuren__tab {
        padding: 4px 6px;
        font-size: 0.72rem;
    }

    .moens-openingsuren__status {
        padding: 8px 10px;
        font-size: 0.76rem;
    }
}