/* ============================================================
   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:    inherit;
  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-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 ────────────────
   No title, no summary, transparent backgrounds,
   tighter spacing, slightly smaller fonts.
   ─────────────────────────────────────────────────────────── */
.moh-layout-quick_info {
  gap:       6px;
  font-size: 14px !important;
  padding:   0 2px;             /* tiny outer buffer so border doesn't hug container */
}

/* transparent cards */
.moh-layout-quick_info .moh-today-block  { filter: none; }
.moh-layout-quick_info .moh-status-tab,
.moh-layout-quick_info .moh-today-card  {
  background:    transparent;
  border-color:  var(--moh-border);
  box-shadow:    none;
}
.moh-layout-quick_info .moh-weekly {
  background: transparent;
  box-shadow: none;
  border:     1px solid var(--moh-border);
}
.moh-layout-quick_info .moh-week-toggle,
.moh-layout-quick_info .moh-week-row     { background: transparent; }
.moh-layout-quick_info .moh-week-row.moh-zebra   { background: rgba(0,0,0,.03); }
.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); }

/* balanced padding — enough breathing room, not wasteful */
.moh-layout-quick_info .moh-status-tab  { padding: 9px 16px; }
.moh-layout-quick_info .moh-today-card  { padding: 12px 16px; }
.moh-layout-quick_info .moh-week-toggle { padding: 10px 16px; font-size: 15px; }
.moh-layout-quick_info .moh-week-row    { padding: 8px 16px; }

/* smaller type */
.moh-layout-quick_info .moh-live-clock      { font-size: 22px; }
.moh-layout-quick_info .moh-status-label    { font-size: 13px; padding: 3px 10px 3px 8px; }
.moh-layout-quick_info .moh-status-label::before { width: 6px; height: 6px; }
.moh-layout-quick_info .moh-status-detail   { font-size: 14px; }
.moh-layout-quick_info .moh-today-day-name  { font-size: 16px; }
.moh-layout-quick_info .moh-today-badge     { font-size: 12px; padding: 2px 8px; }
.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; }
.moh-layout-quick_info .moh-today-header    { margin-bottom: 8px; }

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