/**
 * MisoWP — Öffnungszeiten
 * Alle Varianten (list/table/inline), Light + Dark.
 */

.misowp-hours {
    --misowp-hours-fg: #1a1a1a;
    --misowp-hours-muted: #666;
    --misowp-hours-bg: #fff;
    --misowp-hours-border: #e5e5e5;
    --misowp-hours-today-bg: #f5f7fb;
    --misowp-hours-today-fg: #1a1a1a;
    --misowp-hours-open: #2d8a3e;
    --misowp-hours-closed: #c14545;

    font-family: inherit;
    color: var(--misowp-hours-fg);
    line-height: 1.5;
}

.misowp-hours--dark {
    --misowp-hours-fg: #f5f5f5;
    --misowp-hours-muted: #aaa;
    --misowp-hours-bg: #1f2229;
    --misowp-hours-border: #333842;
    --misowp-hours-today-bg: #2a2f38;
    --misowp-hours-today-fg: #ffffff;
    --misowp-hours-open: #4ade80;
    --misowp-hours-closed: #f87171;
}

/* Status-Badge (open/closed) */
.misowp-hours__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.65em;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.75em;
}

.misowp-hours__status--open {
    background: color-mix(in srgb, var(--misowp-hours-open) 12%, transparent);
    color: var(--misowp-hours-open);
}

.misowp-hours__status--closed {
    background: color-mix(in srgb, var(--misowp-hours-closed) 12%, transparent);
    color: var(--misowp-hours-closed);
}

.misowp-hours__status-dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

/* List-Variante */
.misowp-hours--list .misowp-hours__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--misowp-hours-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--misowp-hours-bg);
}

.misowp-hours--list .misowp-hours__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55em 0.9em;
    border-bottom: 1px solid var(--misowp-hours-border);
    margin: 0;
}

.misowp-hours--list .misowp-hours__row:last-child {
    border-bottom: 0;
}

.misowp-hours--list .misowp-hours__row--today {
    background: var(--misowp-hours-today-bg);
    color: var(--misowp-hours-today-fg);
    font-weight: 600;
}

.misowp-hours__day {
    flex: 0 0 auto;
    margin-right: 1em;
}

.misowp-hours__time {
    flex: 1 1 auto;
    text-align: right;
    color: var(--misowp-hours-muted);
    font-variant-numeric: tabular-nums;
}

.misowp-hours__row--today .misowp-hours__time {
    color: inherit;
}

/* Table-Variante */
.misowp-hours--table .misowp-hours__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--misowp-hours-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--misowp-hours-bg);
}

.misowp-hours--table .misowp-hours__row > * {
    padding: 0.55em 0.9em;
    border-bottom: 1px solid var(--misowp-hours-border);
    text-align: left;
    font-weight: normal;
}

.misowp-hours--table .misowp-hours__row:last-child > * {
    border-bottom: 0;
}

.misowp-hours--table .misowp-hours__row--today {
    background: var(--misowp-hours-today-bg);
    color: var(--misowp-hours-today-fg);
    font-weight: 600;
}

.misowp-hours--table .misowp-hours__time {
    color: var(--misowp-hours-muted);
    font-variant-numeric: tabular-nums;
}

.misowp-hours--table .misowp-hours__row--today .misowp-hours__time {
    color: inherit;
}

/* Inline-Variante */
.misowp-hours--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    flex-wrap: wrap;
}

.misowp-hours--inline .misowp-hours__status {
    margin-bottom: 0;
}

.misowp-hours__today-line {
    font-weight: 500;
    white-space: nowrap;
}

.misowp-hours__details {
    position: relative;
}

.misowp-hours__details-toggle {
    cursor: pointer;
    color: var(--misowp-hours-muted);
    font-size: 0.9em;
    list-style: none;
    user-select: none;
    padding: 0.2em 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    transition: color 0.15s ease;
}

.misowp-hours__details-toggle:hover {
    color: var(--misowp-hours-fg);
}

.misowp-hours__details-toggle::-webkit-details-marker {
    display: none;
}

.misowp-hours__details-toggle::after {
    content: '▾';
    font-size: 0.75em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.misowp-hours__details[open] .misowp-hours__details-toggle::after {
    transform: rotate(180deg);
}

/* Popup-Container: wächst mit Inhalt, Zeiten brechen nicht um */
.misowp-hours__details-pop {
    position: absolute;
    top: calc(100% + 0.4em);
    left: 0;
    background: var(--misowp-hours-bg);
    border: 1px solid var(--misowp-hours-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 0.4em 0;
    min-width: 20em;
    white-space: nowrap;
    z-index: 20;
    animation: misowp-hours-pop-in 0.18s ease;
}

@keyframes misowp-hours-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__list {
    border: none;
    background: transparent;
    border-radius: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5em 1.1em;
    border-bottom: 1px solid color-mix(in srgb, var(--misowp-hours-border) 50%, transparent);
    gap: 1.5em;
    font-size: 0.93em;
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__row:last-child {
    border-bottom: 0;
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__row--today {
    background: var(--misowp-hours-today-bg);
    color: var(--misowp-hours-today-fg);
    font-weight: 600;
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__day {
    flex: 0 0 auto;
    margin-right: 0;
    color: var(--misowp-hours-fg);
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__time {
    flex: 0 0 auto;
    text-align: right;
    color: var(--misowp-hours-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.misowp-hours--inline .misowp-hours__details-pop .misowp-hours__row--today .misowp-hours__time {
    color: inherit;
}

/* Responsiv: auf sehr schmalen Screens darf das Popup doch brechen */
@media (max-width: 480px) {
    .misowp-hours__details-pop {
        min-width: min(18em, calc(100vw - 2em));
        white-space: normal;
    }
    .misowp-hours--inline .misowp-hours__details-pop .misowp-hours__row {
        padding: 0.45em 0.9em;
    }
}

/* ============================================================
   Button-Panel-Variante
   Defensiv gestaltet: Viele WordPress-Themes stylen <button>-Elemente
   aggressiv (Hintergrund, Padding, Uppercase, Letterspacing). Darum
   setzen wir hier alle relevanten Properties explizit und nutzen
   höhere Spezifität, damit unser Design konsistent bleibt.
   ============================================================ */
.misowp-hours.misowp-hours--button {
    display: inline-block;
    position: relative;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn {
    /* Theme-Reset */
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: none;
    min-height: auto;
    width: auto;
    box-sizing: border-box;

    /* Eigentliches Styling */
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.5em 1em;
    background: var(--misowp-hours-bg);
    color: var(--misowp-hours-fg);
    border: 1px solid var(--misowp-hours-border);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn:hover {
    background: var(--misowp-hours-today-bg);
    border-color: var(--misowp-hours-fg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.misowp-hours.misowp-hours--button .misowp-hours-btn:focus-visible {
    outline: 2px solid var(--misowp-hours-open);
    outline-offset: 2px;
}

.misowp-hours-btn__dot {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--misowp-hours-muted);
    flex: 0 0 auto;
}

.misowp-hours--button.misowp-hours-btn--open .misowp-hours-btn__dot {
    background: var(--misowp-hours-open);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--misowp-hours-open) 25%, transparent);
}

.misowp-hours--button.misowp-hours-btn--closed .misowp-hours-btn__dot {
    background: var(--misowp-hours-closed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--misowp-hours-closed) 25%, transparent);
}

.misowp-hours-btn__label {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--misowp-hours-fg);
}

.misowp-hours-btn__chev {
    font-size: 0.7em;
    color: var(--misowp-hours-muted);
    transition: transform 0.2s ease;
    line-height: 1;
    margin-left: 0.1em;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn[aria-expanded="true"] .misowp-hours-btn__chev {
    transform: rotate(180deg);
}

/* Panel unter dem Button */
.misowp-hours.misowp-hours--button .misowp-hours-btn__panel {
    position: absolute;
    top: calc(100% + 0.4em);
    left: 0;
    min-width: 22em;
    background: var(--misowp-hours-bg);
    color: var(--misowp-hours-fg);
    border: 1px solid var(--misowp-hours-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 20;
    padding: 0.35em 0;
    white-space: nowrap;
    animation: misowp-hours-pop-in 0.18s ease;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
}

/* Panel-Table — ebenfalls komplett gegen Theme-Overrides abgeschottet */
.misowp-hours.misowp-hours--button .misowp-hours-btn__table {
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
    background: transparent;
    font-family: inherit;
    font-size: 0.95em;
    text-transform: none;
    letter-spacing: normal;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn__table tr {
    background: transparent;
    border: none;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn__table th,
.misowp-hours.misowp-hours--button .misowp-hours-btn__table td {
    padding: 0.5em 1.1em;
    text-align: left;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    border: none;
    background: transparent;
    vertical-align: baseline;
    line-height: 1.35;
    white-space: nowrap;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn__table th {
    color: var(--misowp-hours-fg);
    font-weight: 500;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn__table td {
    color: var(--misowp-hours-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.misowp-hours.misowp-hours--button .misowp-hours-btn__table tr.is-today {
    background: var(--misowp-hours-today-bg);
}

.misowp-hours.misowp-hours--button .misowp-hours-btn__table tr.is-today th,
.misowp-hours.misowp-hours--button .misowp-hours-btn__table tr.is-today td {
    color: var(--misowp-hours-today-fg);
    font-weight: 600;
}

/* Responsive: auf sehr schmalen Screens darf das Panel umbrechen */
@media (max-width: 480px) {
    .misowp-hours.misowp-hours--button .misowp-hours-btn__panel {
        min-width: min(20em, calc(100vw - 2em));
        white-space: normal;
    }
    .misowp-hours.misowp-hours--button .misowp-hours-btn__table th,
    .misowp-hours.misowp-hours--button .misowp-hours-btn__table td {
        padding: 0.45em 0.9em;
    }
}

/* ===== Tabs-Layout (location="all") ===== */
.misowp-hours-tabs {
    --misowp-hours-fg: #1a1a1a;
    --misowp-hours-muted: #666;
    --misowp-hours-bg: #fff;
    --misowp-hours-border: #e5e5e5;
    --misowp-hours-today-bg: #f5f7fb;
    --misowp-hours-today-fg: #1a1a1a;
    --misowp-hours-accent: #1a66ff;
}

.misowp-hours-tabs--dark {
    --misowp-hours-fg: #f5f5f5;
    --misowp-hours-muted: #aaa;
    --misowp-hours-bg: #1f2229;
    --misowp-hours-border: #333842;
    --misowp-hours-today-bg: #2a2f38;
    --misowp-hours-accent: #8ab4ff;
}

.misowp-hours-tabs__nav {
    display: flex;
    gap: 0.2em;
    border-bottom: 1px solid var(--misowp-hours-border);
    margin-bottom: 0.8em;
    flex-wrap: wrap;
}

.misowp-hours-tabs__tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.55em 0.9em;
    font: inherit;
    color: var(--misowp-hours-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.misowp-hours-tabs__tab:hover {
    color: var(--misowp-hours-fg);
}

.misowp-hours-tabs__tab.is-active {
    color: var(--misowp-hours-fg);
    border-bottom-color: var(--misowp-hours-accent);
    font-weight: 600;
}

.misowp-hours-tabs__panel {
    animation: misowp-hours-fade-in 0.15s ease;
}

@keyframes misowp-hours-fade-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}