/* Business Hours Pro - hours controls (marker dot, row tag, regular-hours switch)
   Kept OUT of frontend.css on purpose: the [business_hours] shortcode loads
   only this file, so a site with its own skin for the widget (bodysoul's
   theme) gets the switch mechanics without the widget's base typography
   landing on top of that skin. The block loads both. */

/* The marker is a dot before the day name, echoing the theme-side status
   pill's own "●" so the two read as one signal. Everything defaults to
   currentColor per the Palette Kit stance. */

.bhp-row-marker {
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--bhp-marker-color, currentColor);
    vertical-align: middle;
    margin-right: 0.4em;
    position: relative;
    top: -0.08em;
}

/* Hook only: the marker does the signalling; a theme may style this. */
.bhp-time-changed {
    color: var(--bhp-changed-color, inherit);
}

.bhp-row-tag {
    display: inline-block;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-left: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

.bhp-view-switch-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.bhp-view-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45em;
    font-size: 0.75em;
    opacity: 0.75;
    cursor: pointer;
    margin-top: 0.9em;
    user-select: none;
}

.bhp-view-switch-track {
    display: inline-block;
    width: 1.9em;
    height: 1em;
    border-radius: 1em;
    border: 1px solid var(--bhp-switch-color, currentColor);
    position: relative;
    transition: background-color 0.15s ease;
}

.bhp-view-switch-track::after {
    content: "";
    position: absolute;
    top: 0.1em;
    left: 0.1em;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--bhp-switch-color, currentColor);
    transition: transform 0.15s ease;
}

.bhp-view-switch-input:checked ~ .bhp-view-switch .bhp-view-switch-track {
    background: var(--bhp-switch-color, currentColor);
}

.bhp-view-switch-input:checked ~ .bhp-view-switch .bhp-view-switch-track::after {
    transform: translateX(0.9em);
    background: var(--bhp-switch-knob-color, #fff);
}

.bhp-view-switch--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.bhp-view-switch-input:focus-visible ~ .bhp-view-switch {
    outline: 1px dotted currentColor;
    outline-offset: 2px;
}

.bhp-view-switch-input:not(:checked) ~ .bhp-hours-list--regular {
    display: none;
}

.bhp-view-switch-input:checked ~ .bhp-hours-list:not(.bhp-hours-list--regular) {
    display: none;
}

/* Week swipe (2.14.0) */

/* No-JS / not-yet-hydrated: the next-week list is server-rendered but the
   nav that reveals it is hidden until controls.js removes `hidden`, so it
   stays out of view here too. */
.bhp-hours-widget:not(.bhp-week--next) .bhp-hours-list--next {
    display: none;
}

/* Next-week mode: hide every list except the next-week one - this also
   keeps the regular-hours list hidden while next week is shown, since the
   switch itself is disabled in that state. */
.bhp-hours-widget.bhp-week--next .bhp-hours-list:not(.bhp-hours-list--next) {
    display: none;
}

.bhp-week-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45em;
    font-size: 0.75em;
    opacity: 0.75;
    margin-top: 0.9em;
    user-select: none;
}

.bhp-week-prev,
.bhp-week-next {
    background: transparent;
    border: none;
    color: var(--bhp-week-nav-color, currentColor);
    cursor: pointer;
    line-height: 1;
    padding: 0.1em 0.4em;
    font-size: 1.2em;
}

.bhp-week-prev:disabled,
.bhp-week-next:disabled {
    opacity: 0.3;
    cursor: default;
}

.bhp-week-label {
    min-width: 5.5em;
    text-align: center;
}