/* yb-daydropdown-by-title.css — styled to match form fields ("תספורת גבר" look) */
.yb-day-select{
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--e-global-color-text, #111);
  background: #fff;

  border: 1px solid var(--e-global-color-secondary, #e5e7eb);
  border-radius: 16px;
  height: 48px;
  padding: 8px 14px;

  direction: rtl;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: 36px; /* room for the arrow */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23555'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: left 10px center; /* RTL: arrow on the left */
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s;
}

.yb-day-select:hover{ border-color:#d1d5db; }
.yb-day-select:focus{
  outline: none;
  border-color:#0a66c2;
  box-shadow:0 0 0 3px rgba(10,102,194,.15);
}

/* Dropdown options styling */
.yb-day-select option{
  color:#111;
  background:#fff;
  font-weight:400;
}

/* Dark-mode override just for this field (if site uses dark mode) */
@media (prefers-color-scheme: dark){
  .yb-day-select{
    color:#111; background:#fff; border-color:#e5e7eb;
  }
  .yb-day-select option{ color:#111; background:#fff; }
}

/* Placeholder style */
.yb-day-select.placeholder{ color:#6b7280; }

/* Stronger placeholder styling */
.yb-day-select.placeholder{ color:#9ca3af; }


/* === Placeholder overlay wrapper for the day select === */
.yb-day-select-wrap{
  position: relative;
}
.yb-day-select-wrap.show-ph::after{
  content: attr(data-ph);
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  align-items: center;
  padding-inline: 14px 36px; /* match select padding */
  color: #9ca3af;
  pointer-events: none; /* allow clicks to pass to the select */
  font-weight: 500;
  font-size: 16px;
  direction: rtl;
}


/* ensure placeholder visual */
.yb-day-select.placeholder{ color:#9ca3af; }
/* wrapper overlay text */
.yb-day-select-wrap{ position:relative; }
.yb-day-select-wrap.show-ph::after{
  content: attr(data-ph);
  position:absolute; inset:0 0 0 0;
  display:flex; align-items:center;
  padding-inline:14px 36px;
  color:#9ca3af; font-weight:500; font-size:16px; pointer-events:none; direction:rtl;
}

/* placeholder row visible */
.yb-day-select.placeholder{ color:#9ca3af; }

/* Placeholder tone for visible row */
.yb-day-select.placeholder{ color:#9ca3af; }

/* Disabled submit look */
.is-disabled{ opacity:.6; cursor:not-allowed; }

/* Safety: when placeholder selected on the day select, hide any time buttons under the booking modal */
.yb-day-select.placeholder ~ * .time-slot, .yb-day-select.placeholder ~ * [data-time], .yb-day-select.placeholder ~ * .slot{ display:none !important; }

/* hide markers for time nodes */
.yb-hidden-time{ display:none !important; }

/* ensure slot host parents can hold overlay */
.yb-day-select-wrap{ position:relative; }


/* ===== Strong CSS hide: when placeholder is active, hide all following siblings ===== */
.yb-day-select-wrap.placeholder-mode ~ *{ display:none !important; }
.yb-slots-msg{ display:none; padding:12px; color:#6b7280; font-size:14px; text-align:center; }
.yb-day-select-wrap.placeholder-mode + .yb-slots-msg{ display:block; }

/* Hide class for explicit slot buttons */
button.slot-btn.yb-hidden-time{ display:none !important; }


/* Global guard: when no day is selected, hide all slot buttons/time elements */
body.yb-no-day button.slot-btn,
body.yb-no-day [data-time],
body.yb-no-day .time-slot,
body.yb-no-day .slot,
body.yb-no-day .times,
body.yb-no-day .time-slots,
body.yb-no-day .times-grid,
body.yb-no-day .time-grid { display:none !important; }

/* Optional message container – will be injected by JS if needed */
body.yb-no-day .yb-slots-empty,
body.yb-no-day .yb-slots-msg { display:block !important; }

/* submit disabled look + hidden slot buttons */
.is-disabled{ opacity:.6; cursor:not-allowed; }
button.slot-btn.yb-hidden-time{ display:none !important; }
body.yb-no-day [data-time], body.yb-no-day .slot, body.yb-no-day .time-slot{ display:none !important; }