/* ============================================================
   Modern Opening Hours v2.1 — Frontend CSS
   ============================================================
   ARCHITECTURE NOTES:
   • Root class .service-branch-hours (= .moh-wrapper) sets font-size:16px
     so all px values below are theme-independent.
   • RTL time ordering is handled ENTIRELY by CSS (order property).
     No PHP swap needed — avoids direction:rtl + row-reverse double inversion.
   • All typography uses px to bypass any theme rem scaling.
   ============================================================

   CSS VARIABLES — override in your theme / Elementor:

   .service-branch-hours {
     --moh-accent:  #3b82f6;
     --moh-open:    #16a34a;
     --moh-closed:  #dc2626;
     etc.
   }
   ============================================================ */

/* ── CSS Custom Properties ───────────────────────────────── */
.service-branch-hours {
  --moh-bg:             #f4f6f9;
  --moh-card-bg:        #ffffff;
  --moh-text:           #1a1f2e;
  --moh-muted:          #6b7280;
  --moh-border:         #e5e7eb;
  --moh-accent:         #3b82f6;
  --moh-open:           #16a34a;
  --moh-closed:         #dc2626;
  --moh-warning:        #d97706;
  --moh-badge-text:     #ffffff;
  --moh-today-bg:       #fefce8;
  --moh-today-accent:   #ca8a04;
  --moh-today-badge-bg: #eab308;
  --moh-zebra:          #f9fafb;
  --moh-open-tint:      #dcfce7;
  --moh-closed-tint:    #fee2e2;
  --moh-warning-tint:   #fef3c7;
  --moh-special-bg:     #f0f9ff;
  --moh-special-color:  #0369a1;
  --moh-special-accent: #0ea5e9;
  --moh-special-tint:   #e0f2fe;
  --moh-radius:         14px;
  --moh-radius-sm:      8px;
  --moh-shadow:         0 2px 12px rgba(0,0,0,.07);
  --moh-transition:     0.18s ease;
}

/* ── Typography baseline isolation ───────────────────────────
   Force 16px regardless of theme/Elementor rem scaling.
   Neutralise common inherited properties that can corrupt layout.
   ─────────────────────────────────────────────────────────── */
.service-branch-hours {
  font-size:              16px !important;
  line-height:            1.5  !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:       100%;
  letter-spacing:         normal;
  text-transform:         none;
  font-variant:           normal;
  word-spacing:           normal;
  zoom:                   1;
}

/* ── Box-model reset ────────────────────────────────────────── */
.service-branch-hours,
.service-branch-hours *,
.service-branch-hours *::before,
.service-branch-hours *::after {
  box-sizing: border-box;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.moh-wrapper {
  font-family:    var(--moh-font-family);  /* :root default; overrideable via settings */
  color:          var(--moh-text);
  max-width:      500px;
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  background:     transparent;
}

/* ── 1. Header / Title ───────────────────────────────────── */
.moh-header {
  padding-block-end: 4px;
}
.moh-title {
  margin:      0 0 6px;
  font-size:   36px;
  font-weight: 700;
  line-height: 1.2;
  color:       var(--moh-text);
}
.moh-title-sep {
  color:         var(--moh-muted);
  font-weight:   400;
  margin-inline: 6px;
}
.moh-title-suffix {
  color:       var(--moh-muted);
  font-weight: 500;
}
.moh-subtitle {
  margin:      0;
  font-size:   20px;
  color:       var(--moh-muted);
  line-height: 1.4;
}

/* ── 2. Today Block (Status Tab + Today Card combined) ───── */
.moh-today-block {
  display:        flex;
  flex-direction: column;
  filter:         drop-shadow(var(--moh-shadow));
}

/* ── Status Tab ──────────────────────────────────────────── */
.moh-status-tab {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         11px 18px;
  border-radius:   var(--moh-radius) var(--moh-radius) 0 0;
  border:          1.5px solid var(--moh-border);
  border-bottom:   none;
  background:      var(--moh-card-bg);
  transition:      background var(--moh-transition), border-color var(--moh-transition);
}
.moh-status-open .moh-status-tab {
  border-color: var(--moh-open);
  background:   var(--moh-open-tint);
}
.moh-status-closing_soon .moh-status-tab {
  border-color: var(--moh-warning);
  background:   var(--moh-warning-tint);
}
.moh-status-closed .moh-status-tab {
  border-color: var(--moh-closed);
  background:   var(--moh-closed-tint);
}

.moh-status-text {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex:        1;
  flex-wrap:   wrap;
}

/* Status label pill */
.moh-status-label {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       4px 13px 4px 10px;
  border-radius: 999px;
  font-size:     15px;
  font-weight:   700;
  white-space:   nowrap;
  color:         #fff;
  background:    var(--moh-muted);
  letter-spacing: .01em;
}
/* Glowing dot before the label text */
.moh-status-label::before {
  content:       '';
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(255,255,255,.75);
  flex-shrink:   0;
}
.moh-status-open .moh-status-label::before {
  background:  #fff;
  box-shadow:  0 0 0 2px rgba(255,255,255,.35);
  animation:   moh-pulse 2s ease-in-out infinite;
}
@keyframes moh-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}
.moh-status-open         .moh-status-label { background: var(--moh-open);    }
.moh-status-closing_soon .moh-status-label { background: var(--moh-warning); }
.moh-status-closed       .moh-status-label { background: var(--moh-closed);  }

.moh-status-detail {
  font-size:   18px;
  font-weight: 400;
  color:       var(--moh-muted);
  white-space: nowrap;
}
.moh-status-detail:empty { display: none; }

/* Live clock */
.moh-live-clock {
  font-size:            28px;
  font-weight:          800;
  letter-spacing:       -.02em;
  font-variant-numeric: tabular-nums;
  white-space:          nowrap;
  flex-shrink:          0;
  margin-inline-start:  auto;
  /* Always render digits LTR — direction must be isolated */
  unicode-bidi:         isolate;
  direction:            ltr;
  opacity:              .9;
}
.moh-status-open         .moh-live-clock { color: var(--moh-open);    }
.moh-status-closing_soon .moh-live-clock { color: var(--moh-warning); }
.moh-status-closed       .moh-live-clock { color: var(--moh-closed);  }

/* ── Today Card ──────────────────────────────────────────── */
.moh-today-card {
  padding:       18px 20px;
  border-radius: 0 0 var(--moh-radius) var(--moh-radius);
  border:        1.5px solid var(--moh-border);
  border-top:    none;
  background:    var(--moh-card-bg);
  transition:    border-color var(--moh-transition);
}
.moh-status-open         .moh-today-card { border-color: var(--moh-open);    }
.moh-status-closing_soon .moh-today-card { border-color: var(--moh-warning); }
.moh-status-closed       .moh-today-card { border-color: var(--moh-closed);  }
.moh-today-card.moh-today-special        { background: var(--moh-special-bg); }

.moh-today-header {
  display:       flex;
  align-items:   center;
  gap:           7px;
  margin-bottom: 14px;
}

.moh-today-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        3px 12px;
  border-radius:  999px;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: .04em;
  background:     var(--moh-accent);
  color:          var(--moh-badge-text);
  box-shadow:     0 1px 4px rgba(59,130,246,.35);
}

.moh-today-day-name {
  font-size:   20px;
  font-weight: 600;
  color:       var(--moh-text);
}

/* ── Day Tag ─────────────────────────────────────────────── */
.moh-day-tag {
  display:        inline-block;
  padding:        2px 9px;
  border-radius:  999px;
  font-size:      13px;
  font-weight:    600;
  background:     rgba(59,130,246,.1);
  color:          var(--moh-accent);
  border:         1px solid rgba(59,130,246,.2);
}
.moh-day-tag.moh-special-tag {
  background:  rgba(14,165,233,.12);
  color:       var(--moh-special-color);
  border:      1px solid rgba(14,165,233,.25);
  font-weight: 700;
}
.moh-day-tag.moh-special-badge {
  background:  var(--moh-special-accent);
  color:       #fff;
  border:      none;
  box-shadow:  0 1px 4px rgba(14,165,233,.35);
}

/* ── Time Ranges ─────────────────────────────────────────── */
.moh-ranges {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* Each range + its optional note */
.moh-range-wrap {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

/* Per-range note (e.g. "בדיקות דם") */
.moh-range-note {
  margin:        0;
  font-size:     15px;
  color:         var(--moh-muted);
  direction:     inherit;
  padding-inline-start: 4px;
  line-height:   1.4;
  font-style:    italic;
}
.moh-ranges-compact .moh-range-note { font-size: 13px; }

/* ─────────────────────────────────────────────────────────────
   TIME RANGE — RTL LAYOUT FIX
   ─────────────────────────────────────────────────────────────
   HTML order is ALWAYS: [open] [timeline] [close]

   We force direction:ltr on the container so the flex axis is
   NEVER affected by an inherited RTL direction from the theme.

   Then for RTL pages we apply row-reverse — because the base is
   now LTR (not RTL), row-reverse does a single inversion only:
     [open=07:30] [←] [close=14:00]
     → row-reverse →
     visual: [close=14:00] [←] [open=07:30]
     reading RTL (right→left): 07:30 (open) … 14:00 (close) ✓

   Using !important is intentional — prevents Elementor/theme
   from overriding these two critical layout properties.
   ───────────────────────────────────────────────────────────── */
.moh-time-range {
  display:        flex;
  flex-direction: row         !important;
  align-items:    center;
  direction:      ltr         !important;
}
.service-branch-hours.moh-rtl .moh-time-range {
  flex-direction: row-reverse !important;
}

/* Time values */
.moh-t {
  font-size:            22px;
  font-weight:          700;
  color:                var(--moh-text);
  font-variant-numeric: tabular-nums;
  letter-spacing:       -.01em;
  flex-shrink:          0;
  unicode-bidi:         isolate;
  direction:            ltr;
}

/* Compact (weekly rows) — minimum 18px for accessibility */
.moh-time-range.moh-tr-compact .moh-t { font-size: 18px; }

/* Timeline middle section */
.moh-timeline {
  display:       flex;
  align-items:   center;
  flex:          1;
  margin-inline: 8px;
  color:         var(--moh-accent);
  min-width:     0;
}
.moh-tl-line {
  flex:          1;
  height:        1.5px;
  background:    var(--moh-border);
  border-radius: 2px;
  min-width:     6px;
}
.moh-tl-icon-wrap {
  display:       flex;
  align-items:   center;
  flex-shrink:   0;
  margin-inline: 4px;
  color:         var(--moh-accent);
}

/* Day note */
.moh-day-note {
  margin:      4px 0 0;
  font-size:   18px;
  color:       var(--moh-muted);
  display:     flex;
  align-items: center;
  gap:         5px;
  line-height: 1.5;
  direction:   inherit;
}
.moh-day-note::before {
  content:     "•";
  color:       var(--moh-accent);
  font-weight: bold;
  flex-shrink: 0;
}

/* Closed text */
.moh-closed-text {
  font-size:  18px;
  color:      var(--moh-muted);
  font-style: italic;
}

/* ── 3. Weekly Schedule ──────────────────────────────────── */
.moh-weekly {
  border-radius: var(--moh-radius);
  background:    var(--moh-card-bg);
  box-shadow:    var(--moh-shadow);
  overflow:      hidden;
  border:        1px solid var(--moh-border);
}

/* Toggle button */
.moh-week-toggle {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 20px;
  background:      var(--moh-card-bg);
  border:          none;
  cursor:          pointer;
  font-size:       18px;
  font-weight:     600;
  color:           var(--moh-text);
  font-family:     inherit;
  text-align:      start;
  transition:      background var(--moh-transition);
}
.moh-week-toggle:hover     { background: var(--moh-bg); }
.moh-week-toggle:focus-visible {
  outline:        2px solid var(--moh-accent);
  outline-offset: -2px;
}

/* Chevron */
.moh-chevron {
  display:            inline-block;
  width:              9px;
  height:             9px;
  border-inline-end:  2px solid var(--moh-muted);
  border-block-end:   2px solid var(--moh-muted);
  transform:          rotate(45deg) translateY(-2px);
  transition:         transform var(--moh-transition);
  flex-shrink:        0;
}
.moh-week-toggle[aria-expanded="true"] .moh-chevron {
  transform: rotate(225deg) translateY(-2px);
}

/* Week body */
.moh-week-body         { display: none; }
.moh-week-body.is-open { display: block; }

/* ── Weekly Rows ─────────────────────────────────────────── */
.moh-week-row {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     11px 20px;
  border-top:  1px solid var(--moh-border);
  background:  var(--moh-card-bg);
  transition:  background var(--moh-transition);
}
.moh-week-row.moh-zebra    { background: var(--moh-zebra); }

/* Today row — yellow highlight */
.moh-week-row.moh-is-today {
  background: var(--moh-today-bg);
  position:   relative;
}
.moh-week-row.moh-is-today::before {
  content:            '';
  position:           absolute;
  inset-block:        0;
  inset-inline-start: 0;
  width:              4px;
  background:         var(--moh-today-accent);
  border-radius:      0 2px 2px 0;
}
.moh-rtl .moh-week-row.moh-is-today::before {
  border-radius: 2px 0 0 2px;
}

/* Special day row — blue highlight */
.moh-week-row.moh-is-special {
  background:     var(--moh-special-bg);
  position:       relative;
  flex-direction: column;   /* stack: event-header on top, day+times below */
  gap:            0;
}
.moh-week-row.moh-is-special.moh-zebra { background: var(--moh-special-bg); }

/* Event name header — always its own full-width line */
.moh-special-event-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding-bottom: 6px;
  margin-bottom:  6px;
  border-bottom:  1px dashed rgba(14,165,233,.35);
  direction:     inherit;
  width:         100%;
}
.moh-special-event-name {
  font-size:     16px;
  font-weight:   700;
  color:         var(--moh-special-color);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  flex:          1;
  min-width:     0;
}

/* Inner row — day name + times side by side (same as regular row) */
.moh-week-row-body {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  width:       100%;
}
.moh-week-row.moh-is-special::before {
  content:            '';
  position:           absolute;
  inset-block:        0;
  inset-inline-start: 0;
  width:              4px;
  background:         var(--moh-special-accent);
  border-radius:      0 2px 2px 0;
}
.moh-rtl .moh-week-row.moh-is-special::before { border-radius: 2px 0 0 2px; }
/* Today + special: special wins */
.moh-week-row.moh-is-today.moh-is-special::before { background: var(--moh-special-accent); }

/* Day name column */
.moh-week-day {
  flex:           0 0 100px;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding-top:    1px;
}
.moh-weekday-name {
  font-size:   18px;
  font-weight: 600;
  color:       var(--moh-text);
}
.moh-week-row.moh-is-today   .moh-weekday-name { color: var(--moh-today-accent);   font-weight: 700; }
.moh-week-row.moh-is-special .moh-weekday-name { color: var(--moh-special-color);  font-weight: 700; }

/* Ranges column */
.moh-week-ranges { flex: 1; min-width: 0; }
.moh-ranges-compact { gap: 6px; }

/* ── 4. Summary Card ─────────────────────────────────────── */
.moh-summary {
  background:     var(--moh-card-bg);
  border-radius:  var(--moh-radius);
  box-shadow:     var(--moh-shadow);
  padding:        18px 20px;
  display:        flex;
  flex-direction: column;
  gap:            13px;
}
.moh-summary-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   18px;
  color:       var(--moh-text);
}
.moh-summary-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--moh-muted);
}
.moh-summary-phone-link {
  color:           var(--moh-accent);
  text-decoration: none;
  font-weight:     600;
  direction:       ltr;
  unicode-bidi:    isolate;
}
.moh-summary-phone-link:hover { text-decoration: underline; }
.moh-summary-note {
  font-size:     18px;
  color:         var(--moh-muted);
  background:    var(--moh-bg);
  border-radius: var(--moh-radius-sm);
  padding:       10px 14px;
  line-height:   1.6;
}
.moh-cta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         13px 28px;
  border-radius:   var(--moh-radius-sm);
  background:      var(--moh-accent);
  color:           #fff;
  font-size:       20px;
  font-weight:     700;
  text-decoration: none;
  text-align:      center;
  transition:      background var(--moh-transition), transform var(--moh-transition);
  align-self:      stretch;
}
.moh-cta-btn:hover {
  background: #2563eb;
  transform:  translateY(-1px);
}

/* ── Layout Modifiers ────────────────────────────────────── */
.moh-layout-card    .moh-header,
.moh-layout-card    .moh-weekly,
.moh-layout-card    .moh-summary  { display: none; }
.moh-layout-today_only .moh-header,
.moh-layout-today_only .moh-weekly,
.moh-layout-today_only .moh-summary { display: none; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .moh-wrapper          { gap: 8px; }
  .moh-title            { font-size: 28px; }
  .moh-subtitle         { font-size: 17px; }
  .moh-status-tab       { padding: 9px 14px; }
  .moh-live-clock       { font-size: 22px; }
  .moh-status-detail    { font-size: 16px; }
  .moh-today-card       { padding: 14px 16px; }
  .moh-week-row         { padding: 9px 14px; flex-direction: column; gap: 4px; }
  .moh-week-day         { flex: none; flex-direction: row; align-items: center; gap: 6px; }
  .moh-week-ranges      { width: 100%; }   /* fills row in column-direction flex */
  .moh-time-range.moh-tr-compact .moh-t { font-size: 16px; }
  .moh-week-toggle      { padding: 12px 14px; font-size: 17px; }
  .moh-summary          { padding: 14px 16px; }
  .moh-week-row.moh-is-today::before,
  .moh-week-row.moh-is-special::before { width: 3px; }
}

/* ── Layout: quick_info — compact / app-embed ────────────────
   Designed for embedding inside external cards (e.g. app lists).
   • Status-tab, live-clock, today-header are NOT rendered in PHP
     for this layout — omitting from DOM prevents host-CSS overrides.
   • Single-line header: היום | Day | ● status (via .moh-qi-header).
   • Yellow accordion toggle — signals "expandable" clearly.
   ─────────────────────────────────────────────────────────── */

/* ── qi: wrapper reset ───────────────────────────────────── */
.moh-layout-quick_info {
  gap:       4px;
  font-size: 14px !important;
  padding:   0;
}

/* ── qi: single-line title row ──────────────────────────── */
.moh-qi-header {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     10px 16px 4px;
  flex-wrap:   wrap;
}
.moh-qi-sep {
  color:       var(--moh-border);
  font-size:   14px;
  font-weight: 300;
  user-select: none;
  flex-shrink: 0;
}
.moh-qi-dayname {
  font-size:   15px;
  font-weight: 600;
  color:       var(--moh-text);
}
/* "היום" — plain text, no blue pill in quick_info context */
.moh-qi-header .moh-today-badge {
  background:  transparent;
  color:       var(--moh-text);
  font-size:   15px;
  font-weight: 600;
  padding:     0;
  box-shadow:  none;
  border-radius: 0;
}

/* ── qi: inline status indicator (dot + text, no pill) ───── */
.moh-qi-status {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
}
/* The animated dot */
.moh-qi-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    #E5484D;   /* default / closed */
}
/* Status text — no background, no border, no padding */
.moh-qi-status-text {
  font-size:   14px;
  font-weight: 700;
  line-height: 1;
  color:       #E5484D;     /* default / closed */
}

/* Open */
.moh-layout-quick_info.moh-status-open .moh-qi-dot {
  background: #6BAE6B;
  animation:  moh-pulse 2s ease-in-out infinite;
}
.moh-layout-quick_info.moh-status-open .moh-qi-status-text { color: #4a8c4a; }

/* Closing soon */
.moh-layout-quick_info.moh-status-closing_soon .moh-qi-dot         { background: #ECC529; animation: moh-pulse 2s ease-in-out infinite; }
.moh-layout-quick_info.moh-status-closing_soon .moh-qi-status-text { color: #9a6c00; }

/* Closed */
.moh-layout-quick_info.moh-status-closed .moh-qi-dot         { background: #E5484D; }
.moh-layout-quick_info.moh-status-closed .moh-qi-status-text { color: #E5484D; }

/* ── qi: status detail — small subtitle ─────────────────── */
.moh-qi-detail {
  margin:      0 0 4px;
  font-size:   12px;
  color:       var(--moh-muted);
  padding:     0 16px;
  line-height: 1.4;
}
.moh-qi-detail:empty { display: none; }

/* ── qi: today block & card — chrome-free ───────────────── */
.moh-layout-quick_info .moh-today-block { filter: none; }
.moh-layout-quick_info .moh-today-card  {
  background:    transparent !important;
  border:        none        !important;
  box-shadow:    none        !important;
  padding:       4px 16px 12px;
  border-radius: 0;
}

/* ── qi: weekly accordion — yellow = "tap to expand" ─────── */
.moh-layout-quick_info .moh-weekly {
  background:    transparent;
  box-shadow:    none;
  border:        none;
  border-radius: var(--moh-radius-sm);
  overflow:      visible;
}
/* Force button appearance even inside opinionated host cards */
.service-branch-hours.moh-layout-quick_info .moh-week-toggle {
  display:          flex        !important;
  align-items:      center      !important;
  justify-content:  space-between !important;
  width:            100%        !important;
  background:       #FFFBEB     !important;
  border:           1.5px solid #ECC529 !important;
  border-radius:    var(--moh-radius-sm) !important;
  padding:          11px 18px   !important;
  font-size:        15px        !important;
  font-weight:      700         !important;
  font-family:      inherit     !important;
  color:            #92400e     !important;
  cursor:           pointer     !important;
  text-align:       start       !important;
  transition:       background var(--moh-transition);
  box-shadow:       none        !important;
  outline:          none;
}
.service-branch-hours.moh-layout-quick_info .moh-week-toggle:hover {
  background: #FEF3C7 !important;
}
.service-branch-hours.moh-layout-quick_info .moh-week-toggle:focus-visible {
  outline:        2px solid #ECC529 !important;
  outline-offset: 1px;
}
.moh-layout-quick_info .moh-week-toggle .moh-chevron {
  border-color: #92400e;
}

/* ── qi: week rows — more right padding so names don't hug the edge ─ */
.moh-layout-quick_info .moh-week-row           { background: transparent; padding: 9px 18px; }
.moh-layout-quick_info .moh-week-row.moh-zebra { background: rgba(0,0,0,.025); }
.moh-layout-quick_info .moh-week-row.moh-is-today   { background: var(--moh-today-bg); }
.moh-layout-quick_info .moh-week-row.moh-is-special { background: var(--moh-special-bg); }

/* ── qi: type scale ─────────────────────────────────────── */
.moh-layout-quick_info .moh-t                 { font-size: 18px; }
.moh-layout-quick_info .moh-tr-compact .moh-t { font-size: 15px; }
.moh-layout-quick_info .moh-weekday-name      { font-size: 15px; }
.moh-layout-quick_info .moh-range-note        { font-size: 12px; }
.moh-layout-quick_info .moh-day-note          { font-size: 13px; }
.moh-layout-quick_info .moh-ranges            { gap: 6px; }

/* ── Dark mode: opt-in only ──────────────────────────────────
   The plugin does NOT auto-switch. Override manually:
   .service-branch-hours { --moh-bg: #1a1f2e; --moh-card-bg: #252c3f; ... }
   ─────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   Multi-service branch (service_branch_multi)
   Stacked service cards — mobile-first, reuses existing tokens.
   ══════════════════════════════════════════════════════════════ */

/* ── Service card stack ──────────────────────────────────── */
.moh-multi-services {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.moh-multi-card {
  background:    var(--moh-card-bg);
  border:        1.5px solid var(--moh-border);
  border-radius: var(--moh-radius-sm);
  overflow:      hidden;
  transition:    border-color var(--moh-transition);
}
.moh-multi-card.moh-status-open         { border-color: var(--moh-open);    }
.moh-multi-card.moh-status-closing_soon { border-color: var(--moh-warning); }
.moh-multi-card.moh-status-closed       { border-color: var(--moh-border);  }

/* ── Card header: dot + name + detail ───────────────────── */
.moh-multi-card-header {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     9px 14px 7px;
  flex-wrap:   wrap;
}

.moh-multi-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    var(--moh-muted);
}
.moh-multi-dot.moh-dot-open         { background: var(--moh-open);    animation: moh-pulse 2s ease-in-out infinite; }
.moh-multi-dot.moh-dot-closing_soon { background: var(--moh-warning); animation: moh-pulse 2s ease-in-out infinite; }
.moh-multi-dot.moh-dot-closed       { background: var(--moh-closed);  }

.moh-multi-service-name {
  font-size:   15px;
  font-weight: 700;
  color:       var(--moh-text);
  flex-shrink: 0;
}

.moh-multi-service-detail {
  font-size:  13px;
  color:      var(--moh-muted);
  margin-inline-start: auto;
  white-space: nowrap;
}

/* ── Card hours (today's time ranges) ───────────────────── */
.moh-multi-card-hours {
  padding: 0 14px 10px;
}
.moh-multi-card-hours .moh-closed-text {
  font-size:  14px;
  color:      var(--moh-muted);
  font-style: italic;
}

/* ── Weekly accordion: service sub-header rows ──────────── */
.moh-week-service-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     10px 20px 8px;
  border-top:  2px solid var(--moh-border);
  font-size:   15px;
  font-weight: 700;
  color:       var(--moh-text);
  background:  var(--moh-bg);
}
.moh-week-service-header:first-child { border-top: none; }

/* ── quick_info overrides for multi ────────────────────────
   Inherit all qi layout rules; just tweak card backgrounds.  */
.moh-layout-quick_info .moh-multi-card {
  background: transparent;
}
.moh-layout-quick_info .moh-week-service-header {
  background:  transparent;
  padding-inline-start: 16px;
  padding-inline-end:   18px;
}

/* ══════════════════════════════════════════════════════════════
   v2.5.0 additions
   ══════════════════════════════════════════════════════════════ */

/* ── CSS variable: font-family ───────────────────────────────
   Defined at :root so var(--moh-font-family) always resolves
   from the document root, NOT from any ancestor element.
   This is the key defence: even when the shortcode output sits
   inside a <code> element (which inherits monospace from the
   browser UA stylesheet), var(--moh-font-family) reads the
   :root value — a safe system sans-serif stack — instead of
   inheriting monospace from the <code> parent.
   The settings page overrides this at .service-branch-hours
   level via wp_add_inline_style() which is fine: custom props
   inherit DOWN the tree, so the override still reaches all
   descendants of .service-branch-hours.                       */
:root {
  --moh-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.service-branch-hours {
  font-family:    var(--moh-font-family) !important;
  letter-spacing: normal;
  word-spacing:   normal;
}

/* ── Hebrew rendering fix ────────────────────────────────────
   Consistent rendering for Hebrew labels and time values.
   time elements use isolate so LTR numbers sit correctly
   inside an RTL flex container without spacing artifacts.    */
.moh-weekday-name,
.moh-today-day-name,
.moh-status-label,
.moh-status-detail,
.moh-qi-dayname,
.moh-qi-status-text,
.moh-multi-service-name,
.moh-range-note,
.moh-day-note,
.moh-closed-text,
.moh-week-service-header span {
  letter-spacing: normal !important;
  word-spacing:   normal !important;
}

.moh-t {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  unicode-bidi:  isolate;         /* LTR time inside RTL row */
  letter-spacing: normal;
}

/* ── Layout: weekly_only ─────────────────────────────────────
   Just the weekly grid — no status bar, no today card.
   Intended for embedding inside existing page sections.      */
.moh-layout-weekly_only {
  gap: 0;
  padding: 0;
}
.moh-layout-weekly_only .moh-week-body {
  display:       flex;
  flex-direction: column;
  background:    transparent;
  border:        none;
  box-shadow:    none;
  border-radius: 0;
}
.moh-layout-weekly_only .moh-week-row {
  border-radius: 0;
}

/* ── Hide closed badge ───────────────────────────────────────
   Controlled by plugin settings toggle.
   Only suppresses the visual label — detail line stays.      */
.moh-hide-closed .moh-today-block.moh-status-closed .moh-status-label,
.moh-hide-closed .moh-status-closed .moh-status-label { display: none !important; }
.moh-hide-closed.moh-status-closed .moh-qi-status     { display: none !important; }

/* ── v2.5.1: multi-branch font rendering fix ─────────────────
   Explicit font inheritance on card-level elements prevents
   host-page CSS from leaking into the service card typography.
   The card-header uses inline-flex + RTL; without these rules
   the dot + Hebrew name + detail can render with inconsistent
   weight or spacing depending on the host theme.               */
.moh-multi-card,
.moh-multi-card * {
  font-family:    var(--moh-font-family);
  letter-spacing: normal !important;
  word-spacing:   normal !important;
}
.moh-multi-card-header {
  /* Stable flex row — dot then name then detail, no reordering */
  display:     flex;
  align-items: center;
  gap:         7px;
  /* RTL flex: items flow right-to-left as expected for Hebrew */
}
/* Service name: consistent weight, no ligature artefacts */
.service-branch-hours .moh-multi-service-name {
  font-weight:    700;
  font-style:     normal;
  letter-spacing: normal;
  word-spacing:   normal;
  line-height:    1.3;
}
/* Detail text: always muted, same baseline as name */
.service-branch-hours .moh-multi-service-detail {
  font-size:      13px;
  font-weight:    400;
  letter-spacing: normal;
  color:          var(--moh-muted);
  line-height:    1.3;
}
/* Weekly sub-headers: same treatment */
.service-branch-hours .moh-week-service-header {
  font-family:    var(--moh-font-family);
  font-weight:    700;
  letter-spacing: normal;
  word-spacing:   normal;
}