/* ==========================================================
   OwnlyBook - Latest Working Frontend CSS
   Clean consolidated version (old v16-v39 patches removed)
   ========================================================== */

.ywcb-booking {
  width: 100% !important;
  max-width: 100% !important;
  --ywcb-primary: #1ea064;
  --ywcb-blue: #2563eb;
  --ywcb-dark: #0f172a;
  --ywcb-muted: #53627a;
  --ywcb-border: #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--ywcb-dark);
  box-sizing: border-box;
  clear: both;
  display: block !important;
  overflow: visible !important;
  container-type: inline-size;
}

.ywcb-booking,
.ywcb-booking * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: normal !important;
}

.ywcb-booking [hidden] {
  display: none !important;
}

/* Prevent text/number collapse in Elementor containers */
.ywcb-calendar-col h3,
.ywcb-slots-col h3,
.ywcb-details-col h3,
.ywcb-info-panel h2,
.ywcb-info-panel p,
.ywcb-brand-name,
.ywcb-meta,
.ywcb-month-label,
.ywcb-weekdays span,
.ywcb-day,
.ywcb-slot,
.ywcb-next-step {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Elementor wrapper safety */
.elementor-shortcode:has(.ywcb-booking),
.elementor-widget-container:has(.ywcb-booking),
.elementor-widget-shortcode:has(.ywcb-booking),
.elementor-element:has(.ywcb-booking),
.e-con:has(.ywcb-booking),
.e-con-inner:has(.ywcb-booking),
.ownlybook-height-clean,
.ownlybook-v20-height-lock {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  align-self: auto !important;
}

/* Main card layout */
.ywcb-card {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  width: min(100%, 1050px) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--ywcb-border);
  border-radius: 14px;
  box-shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.ywcb-info-panel {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 280px !important;
  padding: 20px 30px;
  border-right: 1px solid var(--ywcb-border);
  text-align: center !important;
  min-height: 0 !important;
}

.ywcb-main-panel {
  flex: 1 1 620px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

.ywcb-calendar-col {
  flex: 1 1 420px !important;
  min-width: 420px !important;
  padding: 20px 28px;
  overflow: visible !important;
}

.ywcb-slots-col {
  flex: 0 0 225px !important;
  width: 225px !important;
  min-width: 225px !important;
  padding: 20px 28px 20px 20px;
  border-left: 1px solid var(--ywcb-border);
  overflow-x: hidden;
  overflow-y: auto;
}

.ywcb-details-col {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 34px;
  height: auto;
  min-height: 0;
}

/* Brand / info */
.ywcb-brand-logo {
  width: var(--ywcb-logo-size, 230px) !important;
  max-width: 88% !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto 26px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ywcb-fallback-logo {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--ywcb-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 34px;
  margin: 0 auto 26px !important;
}

.ywcb-brand-name {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 10px;
  text-align: center !important;
}

.ywcb-info-panel h2 {
  font-size: 27px;
  line-height: 1.14;
  margin: 0 0 22px;
  font-weight: 650;
  color: var(--ywcb-dark);
  text-align: center !important;
}

.ywcb-info-panel p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ywcb-muted);
  margin: 0 0 26px;
  font-weight: 400;
  text-align: center !important;
}

.ywcb-meta {
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 8px;
  margin: 10px 0;
  color: var(--ywcb-dark);
  font-size: 16px;
  font-weight: 350;
  text-align: left !important;
}

.ywcb-meta span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  flex: 0 0 28px;
}

/* Calendar */
.ywcb-calendar-col h3,
.ywcb-slots-col h3,
.ywcb-details-col h3 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 22px;
  font-weight: 650;
  color: var(--ywcb-dark);
}

.ywcb-monthbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ywcb-month-label {
  text-align: center;
  font-size: 18px !important;
  font-weight: 650 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 44px;
}

.ywcb-nav {
  width: 42px !important;
  height: 42px !important;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--ywcb-blue);
  font-size: 24px;
  line-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.ywcb-nav:hover:not(:disabled) {
  background: #eef4ff;
}

.ywcb-nav:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ywcb-weekdays,
.ywcb-days-grid {
  width: 100% !important;
  min-width: 0 !important;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.ywcb-weekdays {
  margin-bottom: 10px;
}

.ywcb-weekdays span {
  text-align: center;
  color: #7b879c;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em !important;
}

.ywcb-day {
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 46px;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: #f5f8ff;
  color: var(--ywcb-blue);
  font-size: 14px;
  font-weight: 650;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ywcb-day:not(.is-disabled):not(.is-closed):not(.is-selected):hover {
  background: #eef4ff;
  color: var(--ywcb-blue);
  transform: scale(1.03);
}

.ywcb-day.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.ywcb-day.is-disabled {
  background: transparent;
  color: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
}

.ywcb-day.is-closed {
  background: #f8fafc;
  color: #d0d8e5;
  cursor: not-allowed;
  position: relative;
}

.ywcb-day.is-closed::after {
  content: "";
  width: 20px;
  height: 2px;
  background: #d9e1ec;
  position: absolute;
  transform: rotate(-35deg);
  border-radius: 999px;
}

.ywcb-day.is-today:not(.is-selected) {
  background: #fff;
  color: var(--ywcb-dark);
  box-shadow: inset 0 0 0 1.5px var(--ywcb-primary);
}

.ywcb-day.is-selected,
.ywcb-day.is-selected:hover {
  background: var(--ywcb-primary);
  color: #fff;
  transform: none;
}

/* Time slots */
.ywcb-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ywcb-slot-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.ywcb-slot-row:not(.is-active) > .ywcb-next-step {
  display: none !important;
}

.ywcb-slot-row.is-active {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.ywcb-slot,
.ywcb-next-step {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap !important;
  padding: 0 8px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.ywcb-slot {
  border: 1.5px solid var(--ywcb-primary);
  background: #fff;
  color: var(--ywcb-blue);
}

.ywcb-slot:hover:not(.is-active):not(:disabled) {
  border-color: var(--ywcb-blue);
  background: #f8fbff;
  color: var(--ywcb-blue);
}

.ywcb-slot.is-active,
.ywcb-slot.is-active:hover,
.ywcb-slot-row.is-active > .ywcb-slot {
  background: #555 !important;
  border-color: #555 !important;
  color: #fff !important;
}

.ywcb-next-step,
.ywcb-slot-row.is-active > .ywcb-next-step {
  display: inline-flex !important;
  border: 1.5px solid var(--ywcb-blue) !important;
  background: var(--ywcb-blue) !important;
  color: #fff !important;
}

.ywcb-slot.is-booked,
.ywcb-slot.is-booked:hover,
.ywcb-slot:disabled {
  border-color: #d1d5db !important;
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.ywcb-slot.is-booked {
  flex-direction: column;
  gap: 3px;
}

.ywcb-slot.is-booked small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: .03em !important;
}

.ywcb-slot-row.is-booked {
  grid-template-columns: 1fr !important;
}

/* Details form */
.ywcb-back {
  border: 0;
  background: transparent;
  color: var(--ywcb-blue);
  font-weight: 600;
  margin: 0 0 18px;
  cursor: pointer;
  padding: 0;
}

.ywcb-summary {
  background: #f8fafc;
  border: 1px solid var(--ywcb-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-weight: 600;
  color: var(--ywcb-dark);
}

.ywcb-form {
  margin: 0 !important;
}

.ywcb-field {
  margin-bottom: 22px !important;
}

.ywcb-field-title {
  display: block !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
  color: #1f2937 !important;
}

.ywcb-field em {
  color: #ef4444;
  font-style: normal;
}

.ywcb-field > input:not([type="radio"]):not([type="checkbox"]),
.ywcb-field > textarea,
.ywcb-field > select {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #bccbe0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--ywcb-dark) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  outline: none !important;
}

.ywcb-field > textarea {
  min-height: 112px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

.ywcb-field > input:not([type="radio"]):not([type="checkbox"]):focus,
.ywcb-field > textarea:focus,
.ywcb-field > select:focus {
  border-color: var(--ywcb-blue) !important;
  box-shadow: 0 0 0 1px var(--ywcb-blue) !important;
}

.ywcb-field.has-error > input:not([type="radio"]):not([type="checkbox"]),
.ywcb-field.has-error > textarea,
.ywcb-field.has-error > select,
.ywcb-field.has-error .ywcb-choice {
  border-color: #ef4444 !important;
}

.ywcb-options,
.ywcb-options.ywcb-options-radio,
.ywcb-options.ywcb-options-checkbox {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.ywcb-choice {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.ywcb-choice span,
.ywcb-choice strong,
.ywcb-choice b {
  font-weight: 400 !important;
}

.ywcb-choice:hover,
.ywcb-choice:has(input:checked),
.ywcb-choice.is-selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
}

.ywcb-choice input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex: 0 0 14px !important;
  margin: 3px 0 0 !important;
  border: 1px solid #aebbd0 !important;
  border-radius: 2px !important;
  background: #fff !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
}

.ywcb-choice input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--ywcb-blue);
  clip-path: polygon(14% 44%, 0 58%, 38% 100%, 100% 18%, 86% 6%, 37% 72%);
}

.ywcb-choice input[type="checkbox"]:checked {
  border-color: var(--ywcb-blue) !important;
}

.ywcb-choice input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.ywcb-choice input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  flex: 0 0 15px !important;
  margin: 3px 0 0 !important;
  border: 1px solid #aebbd0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
}

.ywcb-choice input[type="radio"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--ywcb-blue);
}

.ywcb-choice input[type="radio"]:checked {
  border-color: var(--ywcb-blue) !important;
}

.ywcb-choice input[type="radio"]:checked::before {
  transform: scale(1);
}

.ywcb-submit {
  width: 100%;
  border: 0;
  background: var(--ywcb-primary);
  color: #fff;
  border-radius: 8px;
  padding: 15px;
  font-weight: 650;
  font-size: 16px;
  cursor: pointer;
}

.ywcb-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.ywcb-message {
  margin-top: 14px;
  font-weight: 600;
  font-size: 14px;
}

.ywcb-message:empty {
  display: none;
}

.ywcb-message.success {
  color: #166534;
}

.ywcb-message.error {
  color: #b91c1c;
}

.ywcb-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--ywcb-blue);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 650;
}

/* Details state */
.ywcb-booking.is-details-open .ywcb-main-panel {
  display: block !important;
}

.ywcb-booking.is-details-open .ywcb-details-col {
  display: block !important;
  width: 100% !important;
  padding-bottom: 32px !important;
}

.ywcb-booking.is-details-open .ywcb-calendar-col,
.ywcb-booking.is-details-open .ywcb-slots-col {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Confirmation state */
.ywcb-confirmation {
  width: 100% !important;
}

.ywcb-booking.is-confirmation-open .ywcb-card {
  display: block !important;
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ywcb-booking.is-confirmation-open .ywcb-info-panel,
.ywcb-booking.is-confirmation-open .ywcb-back,
.ywcb-booking.is-confirmation-open .ywcb-details-col > h3,
.ywcb-booking.is-confirmation-open .ywcb-summary {
  display: none !important;
}

.ywcb-booking.is-confirmation-open .ywcb-main-panel,
.ywcb-booking.is-confirmation-open .ywcb-details-col {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ywcb-booking.is-confirmation-open .ywcb-details-col {
  padding: 34px 24px 26px !important;
}

.ywcb-booking.is-confirmation-open .ywcb-confirmation {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.ywcb-confirm-single-card {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: 0 auto 18px !important;
  border: 1px solid #d9dee8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 28px 30px !important;
  text-align: center !important;
}

.ywcb-confirm-head {
  padding: 0 0 18px !important;
  margin: 0 !important;
  text-align: center !important;
}

.ywcb-confirm-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #167a4a;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  margin: 0 auto 12px !important;
}

.ywcb-confirm-head h3 {
  margin: 0 0 8px !important;
  font-size: 26px !important;
  line-height: 1.22 !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-align: center !important;
}

.ywcb-confirm-head p {
  max-width: 420px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: #4b5563 !important;
}

.ywcb-confirm-single-card h4 {
  display: none !important;
}

.ywcb-confirm-date-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 0 auto 15px !important;
  text-align: center !important;
}

.ywcb-confirm-date-line span {
  flex: 0 0 auto !important;
  width: auto !important;
}

.ywcb-confirm-date-line strong {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.ywcb-confirm-divider {
  height: 1px;
  background: #edf1f5;
  margin: 16px 0 10px !important;
}

.ywcb-confirm-answer-list {
  display: grid !important;
  gap: 0 !important;
  text-align: left !important;
}

.ywcb-confirm-answer-row {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #edf1f5 !important;
}

.ywcb-confirm-answer-row:last-child {
  border-bottom: 0 !important;
}

.ywcb-confirm-answer-label {
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.ywcb-confirm-answer-value {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  overflow-wrap: anywhere !important;
}

.ywcb-booking.is-confirmation-open .ywcb-download-link {
  display: flex !important;
  width: min(100%, 220px) !important;
  margin: 14px auto 0 !important;
  border-radius: 6px !important;
}

/* Desktop scroll behavior */
@media (min-width: 1025px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    max-height: min(650px, calc(100vh - 170px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.is-details-open:not(.is-confirmation-open) .ywcb-card {
    max-height: min(760px, calc(100vh - 72px)) !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-info-panel,
  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-main-panel,
  .ywcb-booking.is-details-open:not(.is-confirmation-open) .ywcb-info-panel,
  .ywcb-booking.is-details-open:not(.is-confirmation-open) .ywcb-main-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-details-col,
  .ywcb-booking.is-details-open:not(.is-confirmation-open) .ywcb-details-col {
    max-height: min(760px, calc(100vh - 72px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
  }
}

/* Single-column scroll behavior */
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-card,
.ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card,
.ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-card {
  max-height: calc(100dvh - 56px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-y !important;
  scroll-behavior: auto !important;
  scrollbar-width: thin;
}

.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-info-panel,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-main-panel,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-calendar-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-slots-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-details-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-slots,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-form {
  max-height: none !important;
  overflow: visible !important;
}

/* Responsive stacking based on container width */
@container (max-width: 960px) {
  .ywcb-card {
    display: block !important;
  }

  .ywcb-info-panel {
    width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ywcb-border) !important;
  }

  .ywcb-main-panel {
    display: block !important;
    width: 100% !important;
  }

  .ywcb-calendar-col,
  .ywcb-slots-col,
  .ywcb-details-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ywcb-slots-col {
    border-left: 0 !important;
    border-top: 1px solid var(--ywcb-border) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ywcb-slots {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@container (max-width: 560px) {
  .ywcb-booking {
    padding: 0 8px !important;
  }

  .ywcb-card {
    margin: 10px auto 0 !important;
    border-radius: 12px !important;
  }

  .ywcb-info-panel,
  .ywcb-calendar-col,
  .ywcb-slots-col,
  .ywcb-details-col {
    padding: 20px !important;
  }

.ywcb-brand-logo {
  width: min(var(--ywcb-logo-size, 200px), 86%) !important;
  max-height: none !important;
}

  .ywcb-info-panel h2 {
    font-size: 24px !important;
  }

  .ywcb-info-panel p {
    font-size: 15px !important;
  }

  .ywcb-calendar-col h3,
  .ywcb-slots-col h3,
  .ywcb-details-col h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .ywcb-monthbar {
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 8px !important;
  }

  .ywcb-nav {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 21px !important;
  }

  .ywcb-month-label {
    font-size: 16px !important;
  }

  .ywcb-weekdays,
  .ywcb-days-grid {
    gap: 5px !important;
  }

  .ywcb-day {
    min-width: 0 !important;
    max-width: none !important;
    font-size: 12px !important;
  }

  .ywcb-slots {
    grid-template-columns: 1fr !important;
  }

  .ywcb-options {
    grid-template-columns: 1fr !important;
  }

  .ywcb-slot-row.is-active {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .ywcb-slot-row.is-active > .ywcb-slot,
  .ywcb-slot-row.is-active > .ywcb-next-step {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 5px !important;
    font-size: 13px !important;
  }

  .ywcb-booking.is-confirmation-open .ywcb-details-col {
    padding: 22px 14px 20px !important;
  }

  .ywcb-confirm-single-card {
    width: 100% !important;
    padding: 22px 16px !important;
  }

  .ywcb-confirm-head h3 {
    font-size: 23px !important;
  }

  .ywcb-confirm-date-line strong {
    font-size: 16px !important;
  }

  .ywcb-confirm-answer-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }

  .ywcb-confirm-answer-label,
  .ywcb-confirm-answer-value {
    font-size: 14px !important;
  }
}

/* Media query fallback where container queries do not apply */
@media (max-width: 1180px) {
  .ywcb-card {
    display: block !important;
  }

  .ywcb-info-panel {
    width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ywcb-border) !important;
  }

  .ywcb-main-panel {
    display: block !important;
    width: 100% !important;
  }

  .ywcb-calendar-col,
  .ywcb-slots-col,
  .ywcb-details-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ywcb-slots-col {
    border-left: 0 !important;
    border-top: 1px solid var(--ywcb-border) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ywcb-slots {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 767px) {
  .ywcb-booking {
    padding: 0 8px !important;
  }

  .ywcb-card {
    display: block !important;
    width: 100% !important;
    margin: 10px auto 0 !important;
    border-radius: 12px !important;
  }

  .ywcb-info-panel,
  .ywcb-calendar-col,
  .ywcb-slots-col,
  .ywcb-details-col {
    padding: 20px !important;
  }

  .ywcb-info-panel h2 {
    font-size: 24px !important;
  }

  .ywcb-calendar-col h3,
  .ywcb-slots-col h3,
  .ywcb-details-col h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .ywcb-slots {
    grid-template-columns: 1fr !important;
  }

  .ywcb-options {
    grid-template-columns: 1fr !important;
  }

  .ywcb-booking.is-details-open .ywcb-details-col {
    padding: 20px 20px 14px !important;
  }

  .ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-card {
    max-height: calc(100dvh - 42px) !important;
  }
}

@media (max-width: 390px) {
  .ywcb-info-panel,
  .ywcb-calendar-col,
  .ywcb-slots-col,
  .ywcb-details-col {
    padding: 16px !important;
  }

  .ywcb-calendar-col h3,
  .ywcb-slots-col h3,
  .ywcb-details-col h3 {
    font-size: 16px !important;
  }

  .ywcb-weekdays span {
    font-size: 8px !important;
  }

  .ywcb-day {
    font-size: 11px !important;
  }
}

/* Hide slots before date selection on small layouts */
@media (max-width: 900px) {
  .ywcb-booking:not(.has-date):not(.is-details-open) .ywcb-slots-col {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* ==========================================================
   OwnlyBook SCROLL RESTORE PATCH
   Restores previous working scroll behaviour after CSS cleanup.
   - Single-column/tablet/mobile: OwnlyBook card scrolls internally.
   - Selected date/time screen: time slots remain accessible.
   - Desktop 3-column: only slots/details column scrolls.
   ========================================================== */

.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-card {
  max-height: calc(100dvh - 56px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-y !important;
  scroll-behavior: auto !important;
  scrollbar-width: thin !important;
}

.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-info-panel,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-main-panel,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-calendar-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-slots-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-details-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-slots,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-form {
  max-height: none !important;
  overflow: visible !important;
}

.ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card,
.ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-card {
  max-height: calc(100dvh - 56px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-y !important;
  scroll-behavior: auto !important;
}

.ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-info-panel,
.ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-main-panel,
.ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-details-col,
.ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-form {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.is-details-open.is-single-flow:not(.is-confirmation-open) .ywcb-card {
    max-height: calc(100dvh - 42px) !important;
  }
}

@media (min-width: 1025px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open):not(.is-single-flow) .ywcb-slots-col {
    max-height: min(650px, calc(100vh - 170px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-card {
    max-height: min(760px, calc(100vh - 72px)) !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-info-panel,
  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-main-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-details-col {
    max-height: min(760px, calc(100vh - 72px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }
}
/* OwnlyBook desktop scroll handoff fix */
@media (min-width: 1025px) {
  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-details-col,
  .ywcb-booking.is-details-open:not(.is-confirmation-open) .ywcb-details-col,
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ywcb-booking.is-details-open.is-side-flow:not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.is-details-open:not(.is-confirmation-open) .ywcb-card {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
  }
}
/* Calendar date size increase */
.ywcb-booking .ywcb-day {
  font-size: 17px !important;
  font-weight: 600 !important;
}
/* OwnlyBook time-slot scroll handoff fix */
/* When slot list reaches top/bottom, page scroll should continue */
.ywcb-booking .ywcb-slots-col {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Desktop 3-column slot container */
@media (min-width: 1025px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col,
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open):not(.is-single-flow) .ywcb-slots-col {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
  }
}

/* Single-column / tablet / mobile slot screen */
.ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
}

.ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
}
/* ==========================================================
   OwnlyBook desktop time-column slide reveal
   First view shows only info + calendar. After selecting a date,
   the time column slides in from the right.
   ========================================================== */
@media (min-width: 901px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    transition: width 320ms ease, max-width 320ms ease !important;
    will-change: width;
  }

  .ywcb-booking:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    width: min(100%, 825px) !important;
  }

  .ywcb-booking.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    width: min(100%, 1050px) !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    transition:
      flex-basis 320ms ease,
      width 320ms ease,
      min-width 320ms ease,
      max-width 320ms ease,
      padding 320ms ease,
      border-color 320ms ease,
      opacity 240ms ease,
      transform 320ms ease !important;
    will-change: transform, opacity, width;
  }

  .ywcb-booking:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-color: transparent !important;
    opacity: 0 !important;
    transform: translateX(34px) !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .ywcb-booking.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    flex: 0 0 225px !important;
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important;
    padding: 20px 28px 20px 20px !important;
    border-left-color: var(--ywcb-border) !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================
   OwnlyBook final correction: desktop/tablet two-column first view
   Keep logo/details + calendar side-by-side. Time column stays hidden
   until date selection, then slides in from the right.
   ========================================================== */
@media (min-width: 901px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .ywcb-booking:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    width: min(100%, 825px) !important;
    max-width: 825px !important;
  }

  .ywcb-booking.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    width: min(100%, 1050px) !important;
    max-width: 1050px !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-info-panel {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    border-right: 1px solid var(--ywcb-border) !important;
    border-bottom: 0 !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-main-panel {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-calendar-col {
    flex: 1 1 525px !important;
    width: auto !important;
    min-width: 525px !important;
    max-width: none !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    display: block !important;
    border-top: 0 !important;
    border-left: 1px solid var(--ywcb-border) !important;
  }

  .ywcb-booking:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-color: transparent !important;
    opacity: 0 !important;
    transform: translateX(38px) !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  .ywcb-booking.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    flex: 0 0 225px !important;
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important;
    padding: 20px 28px 20px 20px !important;
    border-left-color: var(--ywcb-border) !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* True mobile only: stacked layout + hidden time section before date */
@media (max-width: 900px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    display: block !important;
  }
}

/* ==========================================================
   OwnlyBook 50% column / tablet responsive fix
   If the shortcode container is narrow (Elementor 50% column/tablet),
   force a clean single-column layout. This overrides the desktop
   slide-column rules that are based on viewport width.
   ========================================================== */
.ywcb-booking.is-single-flow:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.ywcb-booking.is-single-flow:not(.is-details-open):not(.is-confirmation-open) .ywcb-info-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--ywcb-border) !important;
}

.ywcb-booking.is-single-flow:not(.is-details-open):not(.is-confirmation-open) .ywcb-main-panel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

.ywcb-booking.is-single-flow:not(.is-details-open):not(.is-confirmation-open) .ywcb-calendar-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 22px 28px !important;
}

.ywcb-booking.is-single-flow:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  border-left: 0 !important;
  border-top: 1px solid var(--ywcb-border) !important;
  padding: 22px 28px !important;
  transform: none !important;
}

.ywcb-booking.is-single-flow:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  display: none !important;
}

.ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

@container (max-width: 860px) {
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-info-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ywcb-border) !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-main-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-calendar-col,
  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    transform: none !important;
  }

  .ywcb-booking:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    border-left: 0 !important;
    border-top: 1px solid var(--ywcb-border) !important;
    padding: 22px 28px !important;
  }

  .ywcb-booking:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    display: none !important;
  }

  .ywcb-booking.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
}


/* ==========================================================
   OwnlyBook fixed-area inner scroll for Elementor 50% column
   In narrow/one-side columns the booking card keeps a fixed
   visible area and scrolls inside the card, not the full page.
   ========================================================== */
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-card {
  max-height: min(720px, calc(100vh - 145px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-main-panel,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-calendar-col,
.ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-slots-col {
  overflow: visible !important;
}

.ywcb-booking.is-single-flow.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  overflow: visible !important;
}

@media (max-width: 767px) {
  .ywcb-booking.is-single-flow:not(.is-confirmation-open) .ywcb-card {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ==========================================================
   OwnlyBook v41 - real Elementor 50% column fixed-area fix
   Works when the page is desktop but the shortcode itself is
   inside a narrow/one-side Elementor column. The booking card
   becomes the scroll container, so calendar days/time slots do
   not spill outside the border.
   ========================================================== */
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) {
  overflow: hidden !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(720px, calc(100vh - 135px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-info-panel,
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-main-panel,
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-calendar-col,
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-slots-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-info-panel {
  border-right: 0 !important;
  border-bottom: 1px solid var(--ywcb-border) !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-main-panel {
  display: block !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-calendar-col {
  padding: 22px 28px !important;
  overflow: visible !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-slots-col {
  border-left: 0 !important;
  border-top: 1px solid var(--ywcb-border) !important;
  padding: 22px 28px !important;
  transform: none !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  display: none !important;
}

.ywcb-booking.ownlybook-narrow-column.has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-slots-col {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

@container (max-width: 860px) {
  .ywcb-booking:not(.is-confirmation-open) .ywcb-card {
    max-height: min(720px, calc(100vh - 135px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 767px) {
  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-card {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================
   OwnlyBook FINAL 3-screen responsive system
   Desktop: details + calendar side-by-side, time slides in.
   Tablet / 50% Elementor column: single card, fixed visible area,
   inner scroll inside the OwnlyBook card.
   Mobile: natural single column, page scroll.
   ========================================================== */

/* Always let the calendar grid define its own height. */
.ywcb-booking .ywcb-calendar-col,
.ywcb-booking .ywcb-main-panel {
  height: auto !important;
  min-height: 0 !important;
}

/* Desktop full-width layout */
@media (min-width: 1025px) {
  .ywcb-booking:not(.ownlybook-narrow-column):not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: min(100%, 1050px) !important;
    max-width: 1050px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .ywcb-booking:not(.ownlybook-narrow-column):not(.is-details-open):not(.is-confirmation-open) .ywcb-info-panel {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    border-right: 1px solid var(--ywcb-border) !important;
    border-bottom: 0 !important;
  }

  .ywcb-booking:not(.ownlybook-narrow-column):not(.is-details-open):not(.is-confirmation-open) .ywcb-main-panel {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .ywcb-booking:not(.ownlybook-narrow-column):not(.is-details-open):not(.is-confirmation-open) .ywcb-calendar-col {
    flex: 1 1 525px !important;
    width: auto !important;
    min-width: 525px !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .ywcb-booking:not(.ownlybook-narrow-column):not(.has-date):not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    width: min(100%, 825px) !important;
    max-width: 825px !important;
  }

  .ywcb-booking:not(.ownlybook-narrow-column).has-date:not(.is-details-open):not(.is-confirmation-open) .ywcb-card {
    width: min(100%, 1050px) !important;
    max-width: 1050px !important;
  }
}

/* Tablet and Elementor narrow/50% column layout */
@media (min-width: 768px) and (max-width: 1024px) {
  .ywcb-booking:not(.is-confirmation-open) .ywcb-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(720px, calc(100vh - 135px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ywcb-booking:not(.is-confirmation-open) .ywcb-info-panel,
  .ywcb-booking:not(.is-confirmation-open) .ywcb-main-panel,
  .ywcb-booking:not(.is-confirmation-open) .ywcb-calendar-col,
  .ywcb-booking:not(.is-confirmation-open) .ywcb-slots-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .ywcb-booking:not(.is-confirmation-open) .ywcb-info-panel {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ywcb-border) !important;
  }

  .ywcb-booking:not(.is-confirmation-open) .ywcb-main-panel {
    display: block !important;
  }

  .ywcb-booking:not(.is-confirmation-open) .ywcb-calendar-col,
  .ywcb-booking:not(.is-confirmation-open) .ywcb-slots-col {
    padding: 22px 28px !important;
    overflow: visible !important;
  }
}

/* Same single-card behavior when desktop page has a narrow Elementor column. */
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(720px, calc(100vh - 135px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-info-panel,
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-main-panel,
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-calendar-col,
.ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-slots-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

/* Mobile: no fixed card height. */
@media (max-width: 767px) {
  .ywcb-booking:not(.is-confirmation-open) .ywcb-card,
  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}



/* OwnlyBook tablet / Elementor 50% column TRUE smooth inner scroll fix
   Keeps inner card scrolling ON, but makes it soft and readable. */
@media (min-width: 768px) and (max-width: 1180px) {
  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) {
    overflow: visible !important;
    height: auto !important;
  }

  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(760px, calc(100dvh - 96px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    scroll-behavior: smooth !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable !important;
    padding-bottom: 32px !important;
  }

  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-info-panel,
  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-main-panel,
  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-calendar-col,
  .ywcb-booking.ownlybook-narrow-column:not(.is-confirmation-open) .ywcb-slots-col {
    max-height: none !important;
    overflow: visible !important;
  }
}