/* Planellio public booking refinement
 * Presentation only: existing fields, IDs, controls and booking logic are unchanged.
 */
body.publicBookingRefined {
  --pb-brand: var(--portal-button-color, #6d4aff);
  --pb-brand-dark: var(--portal-button-dark, #5238c8);
  --pb-brand-soft: color-mix(in srgb, var(--pb-brand) 8%, #fff);
  --pb-bg: color-mix(in srgb, var(--portal-bg-color, #f7f7f5) 72%, #fafafa);
  --pb-surface: #fff;
  --pb-text: var(--portal-text-color, #202223);
  --pb-muted: color-mix(in srgb, var(--pb-text) 62%, #fff);
  --pb-border: color-mix(in srgb, var(--pb-text) 14%, transparent);
  --pb-border-strong: color-mix(in srgb, var(--pb-text) 23%, transparent);
  margin: 0;
  padding: 24px !important;
  background: var(--pb-bg) !important;
  background-image: none !important;
  color: var(--pb-text) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px;
  line-height: 1.5;
}

.publicBookingRefined *,
.publicBookingRefined *::before,
.publicBookingRefined *::after { box-sizing: border-box; }

.publicBookingRefined .bkShell,
.publicBookingRefined .dashboardGrid,
.publicBookingRefined .travelShell {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.publicBookingRefined .bkShell { gap: 12px; }

.publicBookingRefined .bkHead,
.publicBookingRefined .widgetHead,
.publicBookingRefined .travelHead {
  min-height: 66px;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--pb-border);
  align-items: center;
}

.publicBookingRefined .bkLogo,
.publicBookingRefined .logo,
.publicBookingRefined .travelLogo {
  width: 44px;
  height: 44px;
  border-radius: 8px !important;
  background: var(--pb-brand) !important;
  box-shadow: none !important;
}

.publicBookingRefined .bkTitle,
.publicBookingRefined .widgetTitle,
.publicBookingRefined .travelHead h1 {
  color: var(--pb-text) !important;
  font-family: var(--font-head) !important;
  font-size: 23px !important;
  font-weight: 800;
  line-height: 1.2;
}

.publicBookingRefined .bkSub,
.publicBookingRefined .widgetSub,
.publicBookingRefined .travelHead p {
  margin-top: 3px;
  color: var(--pb-muted) !important;
  font-size: 14px;
}

.publicBookingRefined .bkSteps,
.publicBookingRefined .widgetSteps,
.publicBookingRefined .travelJourney {
  margin-top: 6px;
  color: var(--pb-muted) !important;
  font-size: 12px;
}

.publicBookingRefined .bkSteps strong,
.publicBookingRefined .widgetSteps strong,
.publicBookingRefined .travelJourney strong { color: var(--pb-brand); }

.publicBookingRefined .bkTop,
.publicBookingRefined .topbar,
.publicBookingRefined .travelTop {
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--pb-border) !important;
  border-radius: 8px !important;
  background: var(--pb-surface) !important;
  box-shadow: none !important;
}

.publicBookingRefined .bkPill,
.publicBookingRefined .travelPill {
  border-color: color-mix(in srgb, var(--pb-brand) 18%, transparent) !important;
  border-radius: 5px !important;
  background: var(--pb-brand-soft) !important;
  color: var(--pb-brand-dark) !important;
}

.publicBookingRefined .bkRibbon,
.publicBookingRefined .widgetRibbon,
.publicBookingRefined .travelRibbon { display: none; }

.publicBookingRefined .bkMainCard,
.publicBookingRefined .bkCard,
.publicBookingRefined .widgetCard,
.publicBookingRefined .travelCard,
.publicBookingRefined .miniCard,
.publicBookingRefined .bkSummary,
.publicBookingRefined .rqCard,
.publicBookingRefined .bookingSummary {
  border: 1px solid var(--pb-border) !important;
  border-radius: 8px !important;
  background: var(--pb-surface) !important;
  box-shadow: 0 1px 2px rgba(20, 24, 32, .05) !important;
}

.publicBookingRefined .bkMainCard,
.publicBookingRefined .bkCard,
.publicBookingRefined .widgetCard,
.publicBookingRefined .travelCard { padding: 24px !important; }

.publicBookingRefined h2 {
  color: var(--pb-text);
  font-family: var(--font-head);
  font-size: 24px !important;
  line-height: 1.25;
}

.publicBookingRefined h3,
.publicBookingRefined .rqTitle,
.publicBookingRefined .bookingSummaryTitle {
  color: var(--pb-text);
  font-family: var(--font-head);
}

.publicBookingRefined .bkLead,
.publicBookingRefined .bkFormLead,
.publicBookingRefined .widgetIntro,
.publicBookingRefined .rqLead,
.publicBookingRefined .bookingSummaryLead {
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.6;
}

.publicBookingRefined label { color: var(--pb-text); font-size: 12px; font-weight: 650; }
.publicBookingRefined .hint,
.publicBookingRefined .small,
.publicBookingRefined .smallNote,
.publicBookingRefined .meta { color: var(--pb-muted); font-size: 12px; }

.publicBookingRefined input:not([type="radio"]):not([type="checkbox"]),
.publicBookingRefined select,
.publicBookingRefined textarea,
.publicBookingRefined .pillLike,
.publicBookingRefined .travelCouponInput {
  min-height: 44px;
  padding: 10px 11px !important;
  border: 1px solid var(--pb-border-strong) !important;
  border-radius: 6px !important;
  background: var(--pb-surface) !important;
  color: var(--pb-text) !important;
  box-shadow: none !important;
  font: inherit;
}

.publicBookingRefined textarea { min-height: 92px; }
.publicBookingRefined input:focus,
.publicBookingRefined select:focus,
.publicBookingRefined textarea:focus {
  outline: none;
  border-color: var(--pb-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-brand) 14%, transparent) !important;
}

.publicBookingRefined input[type="radio"],
.publicBookingRefined input[type="checkbox"] { accent-color: var(--pb-brand); }

.publicBookingRefined .btnPrimary,
.publicBookingRefined .btn.primary,
.publicBookingRefined .btn.btnPrimary,
.publicBookingRefined .travelNext,
.publicBookingRefined .travelCouponButton,
.publicBookingRefined .btnMini.primary {
  min-height: 40px;
  padding: 9px 15px !important;
  border: 1px solid var(--pb-brand) !important;
  border-radius: 6px !important;
  background: var(--pb-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 750 !important;
}

.publicBookingRefined .btnPrimary:hover,
.publicBookingRefined .btn.primary:hover,
.publicBookingRefined .travelNext:hover,
.publicBookingRefined .btnMini.primary:hover { background: var(--pb-brand-dark) !important; }

.publicBookingRefined .btnGhost,
.publicBookingRefined .ghostBtn,
.publicBookingRefined .btn.btnGhost,
.publicBookingRefined .travelBack,
.publicBookingRefined .btnMini:not(.primary):not(.danger) {
  min-height: 40px;
  padding: 9px 13px !important;
  border: 1px solid var(--pb-border-strong) !important;
  border-radius: 6px !important;
  background: var(--pb-surface) !important;
  color: var(--pb-text) !important;
  box-shadow: none !important;
  font-weight: 650;
}

/* Step 1 — form first, compact live summary. */
.publicBookingRefined.publicBookingStart .bkMainCard {
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .65fr);
  gap: 28px;
  align-items: start;
}

.publicBookingRefined.publicBookingStart .bkForm h2 { margin-bottom: 7px; font-size: 28px !important; }
.publicBookingRefined.publicBookingStart .bkFormLead { max-width: 720px; margin-bottom: 22px; }
.publicBookingRefined.publicBookingStart .fieldRow { gap: 14px; margin-bottom: 14px; }
.publicBookingRefined.publicBookingStart .interestWrap {
  margin-top: 22px;
  padding: 18px !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--pb-bg) 55%, #fff) !important;
}
.publicBookingRefined.publicBookingStart .chip { border-radius: 5px !important; box-shadow: none !important; }
.publicBookingRefined.publicBookingStart .bkSummary {
  position: sticky;
  top: 18px;
  padding: 18px !important;
}
.publicBookingRefined.publicBookingStart .bkSummary h3 { margin-bottom: 10px; font-size: 18px; }
.publicBookingRefined.publicBookingStart .bkSummaryRow { padding: 8px 0; border-color: var(--pb-border) !important; }
.publicBookingRefined.publicBookingStart .bkSummarySmall { font-size: 12px; line-height: 1.5; }
.publicBookingRefined.publicBookingStart .venueConfirmCard { border-radius: 7px; box-shadow: none; }

/* Step 2 — clear three-column product catalogue. */
.publicBookingRefined.publicBookingAvailability .bkGrid {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.publicBookingRefined.publicBookingAvailability .bkCard { min-width: 0; }
.publicBookingRefined.publicBookingAvailability .metaRow { gap: 8px; margin: 14px 0 18px; }
.publicBookingRefined.publicBookingAvailability .metaTag {
  padding: 8px 10px;
  border: 1px solid var(--pb-border) !important;
  border-radius: 6px !important;
  background: var(--pb-bg) !important;
  box-shadow: none !important;
  font-size: 12px;
}
.publicBookingRefined.publicBookingAvailability .filters {
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pb-border);
}
.publicBookingRefined.publicBookingAvailability .filterBtn {
  min-height: 34px;
  padding: 7px 11px !important;
  border: 1px solid var(--pb-border-strong) !important;
  border-radius: 6px !important;
  background: var(--pb-surface) !important;
  color: var(--pb-text) !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingAvailability .filterBtn.active {
  border-color: var(--pb-brand) !important;
  background: var(--pb-brand) !important;
  color: #fff !important;
}
.publicBookingRefined.publicBookingAvailability .resultsHead { margin-bottom: 14px; }
.publicBookingRefined.publicBookingAvailability .svcGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}
.publicBookingRefined.publicBookingAvailability .svcCard {
  gap: 0;
  padding: 0 0 14px;
  border: 1px solid var(--pb-border) !important;
  border-radius: 8px !important;
  background: var(--pb-surface) !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingAvailability .svcCard.selected {
  border-color: var(--pb-brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pb-brand) 16%, transparent) !important;
}
.publicBookingRefined.publicBookingAvailability .svcImage {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 7px 7px 0 0;
}
.publicBookingRefined.publicBookingAvailability .svcImage img.svcImageBase {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.publicBookingRefined.publicBookingAvailability .svcTop { padding: 14px 14px 0; }
.publicBookingRefined.publicBookingAvailability .svcTitle { font-size: 17px; line-height: 1.25; }
.publicBookingRefined.publicBookingAvailability .svcBody {
  min-height: 40px;
  color: var(--pb-muted);
  font-size: 13px;
  line-height: 1.5;
}
.publicBookingRefined.publicBookingAvailability .svcType {
  border-radius: 4px;
  background: var(--pb-brand-soft);
  color: var(--pb-brand-dark);
  box-shadow: none;
}
.publicBookingRefined.publicBookingAvailability .svcMeta { padding: 10px 14px 0; }
.publicBookingRefined.publicBookingAvailability .svcFooter {
  align-items: flex-end;
  margin-top: auto;
  padding: 14px 14px 0;
}
.publicBookingRefined.publicBookingAvailability .price { font-size: 18px; }
.publicBookingRefined.publicBookingAvailability .btnMini { min-height: 34px; padding: 7px 9px !important; }
.publicBookingRefined.publicBookingAvailability .miniCard {
  position: sticky;
  top: 18px;
  padding: 18px !important;
}
.publicBookingRefined.publicBookingAvailability .miniRow { padding: 7px 0; border-color: var(--pb-border) !important; }
.publicBookingRefined.publicBookingAvailability .miniList { font-size: 12px; line-height: 1.55; }

/* Step 3 — aligned four-column extras on wide screens. */
.publicBookingRefined.publicBookingExtras .dashboardGrid { max-width: 1240px; margin-bottom: 70px; }
.publicBookingRefined.publicBookingExtras .widgetCard { padding: 24px !important; }
.publicBookingRefined.publicBookingExtras .acc { gap: 12px; }
.publicBookingRefined.publicBookingExtras .acc-item {
  border: 1px solid var(--pb-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingExtras .acc-h { padding: 14px 16px; }
.publicBookingRefined.publicBookingExtras .acc-b { padding: 16px; border-color: var(--pb-border); }
.publicBookingRefined.publicBookingExtras .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}
.publicBookingRefined.publicBookingExtras .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 0 0 14px;
  border: 1px solid var(--pb-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingExtras .card.in-cart {
  border-color: var(--pb-brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pb-brand) 15%, transparent) !important;
}
.publicBookingRefined.publicBookingExtras .thumb {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 7px 7px 0 0;
}
.publicBookingRefined.publicBookingExtras .thumb img { width: 100%; height: 100%; object-fit: cover; }
.publicBookingRefined.publicBookingExtras .card .badge { display: none !important; }
.publicBookingRefined.publicBookingExtras .ct {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 14px 0;
}
.publicBookingRefined.publicBookingExtras .ct .title { font-size: 16px; line-height: 1.3; }
.publicBookingRefined.publicBookingExtras .ct > .meta:first-of-type {
  display: -webkit-box;
  min-height: 58px;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.publicBookingRefined.publicBookingExtras .actions { margin-top: auto; padding-top: 14px; }
.publicBookingRefined.publicBookingExtras .addedTag {
  border-radius: 4px;
  background: var(--pb-brand-soft);
  color: var(--pb-brand-dark);
}
.publicBookingRefined.publicBookingExtras .ctaBar {
  border: 1px solid var(--pb-border) !important;
  border-radius: 8px !important;
  background: var(--pb-bg) !important;
  box-shadow: none !important;
}

/* Step 4 — travel information grouped by customer priority. */
.publicBookingRefined.publicBookingTravel .travelCard { margin-top: 12px; }
.publicBookingRefined.publicBookingTravel .travelAccessGroup {
  border: 1px solid color-mix(in srgb, var(--pb-brand) 20%, var(--pb-border)) !important;
  border-radius: 8px !important;
  background: var(--pb-brand-soft) !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingTravel .travelAccessOption {
  border: 1px solid var(--pb-border) !important;
  border-radius: 7px !important;
  background: var(--pb-surface) !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingTravel .travelAccessOption:has(input:checked) {
  border-color: var(--pb-brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pb-brand) 14%, transparent) !important;
}
.publicBookingRefined.publicBookingTravel .bookingSummary { padding: 20px !important; }
.publicBookingRefined.publicBookingTravel .bookingSummaryTitle { font-size: 20px; }
.publicBookingRefined.publicBookingTravel .bookingSummaryGrid,
.publicBookingRefined.publicBookingTravel .bookingCostRows,
.publicBookingRefined.publicBookingTravel .travelGrid,
.publicBookingRefined.publicBookingTravel .travelLines {
  border-color: var(--pb-border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.publicBookingRefined.publicBookingTravel .bookingSummaryRow { padding: 10px 12px; }
.publicBookingRefined.publicBookingTravel .bookingSummaryTotal {
  border-radius: 7px !important;
  background: var(--pb-brand-soft) !important;
  color: var(--pb-text);
  font-size: 20px;
}

/* Step 5 — more breathing room without removing fields. */
.publicBookingRefined.publicBookingCheckout .bkShell { max-width: 1240px; }
.publicBookingRefined.publicBookingCheckout .bkCard { padding: 26px !important; }
.publicBookingRefined.publicBookingCheckout .columns3 { gap: 20px; }
.publicBookingRefined.publicBookingCheckout .sectionBlock {
  padding: 18px;
  border: 1px solid var(--pb-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--pb-bg) 45%, #fff);
}
.publicBookingRefined.publicBookingCheckout .sectionBlock h3 { font-size: 17px; }
.publicBookingRefined.publicBookingCheckout .fieldRow { gap: 12px; margin-bottom: 12px; }
.publicBookingRefined.publicBookingCheckout .ctaRow {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--pb-border);
}
.publicBookingRefined.publicBookingCheckout #submitBtn {
  min-height: 46px;
  padding-inline: 22px !important;
  font-size: 14px;
}
.publicBookingRefined.publicBookingCheckout .rqCard { padding: 20px !important; }
.publicBookingRefined .rqTotalRow {
  padding: 12px;
  border-radius: 7px;
  background: var(--pb-brand-soft);
  color: var(--pb-text);
}

/* Overlays may carry the only substantial shadow. */
.publicBookingRefined .bkModalSheet,
.publicBookingRefined .sheet,
.publicBookingRefined .backdropSheet,
.publicBookingRefined .checkoutBackdropSheet {
  border-radius: 8px !important;
  box-shadow: 0 22px 64px rgba(20, 24, 32, .22) !important;
}

@media (max-width: 1100px) {
  .publicBookingRefined.publicBookingAvailability .svcGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publicBookingRefined.publicBookingExtras .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .publicBookingRefined.publicBookingStart .bkMainCard,
  .publicBookingRefined.publicBookingAvailability .bkGrid { grid-template-columns: 1fr; }
  .publicBookingRefined.publicBookingStart .bkSummary,
  .publicBookingRefined.publicBookingAvailability .miniCard { position: static; }
  .publicBookingRefined.publicBookingCheckout .columns3 { grid-template-columns: 1fr; }
  .publicBookingRefined.publicBookingExtras .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 650px) {
  body.publicBookingRefined { padding: 12px !important; }
  .publicBookingRefined .bkHead,
  .publicBookingRefined .widgetHead,
  .publicBookingRefined .travelHead { align-items: flex-start; }
  .publicBookingRefined .bkSteps,
  .publicBookingRefined .widgetSteps,
  .publicBookingRefined .travelJourney { line-height: 1.5; }
  .publicBookingRefined .bkMainCard,
  .publicBookingRefined .bkCard,
  .publicBookingRefined .widgetCard,
  .publicBookingRefined .travelCard { padding: 16px !important; }
  .publicBookingRefined .fieldRow--split { display: grid; grid-template-columns: 1fr; }
  .publicBookingRefined.publicBookingAvailability .svcGrid,
  .publicBookingRefined.publicBookingExtras .grid { grid-template-columns: 1fr !important; }
  .publicBookingRefined.publicBookingAvailability .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .publicBookingRefined.publicBookingAvailability .filterBtn { flex: 0 0 auto; }
  .publicBookingRefined.publicBookingCheckout .sectionBlock { padding: 14px; }
}

html[data-theme="dark"] body.publicBookingRefined {
  --pb-bg: #10141b;
  --pb-surface: #18202a;
  --pb-text: #f3f6f9;
  --pb-muted: #a8b2bf;
  --pb-border: rgba(255,255,255,.12);
  --pb-border-strong: rgba(255,255,255,.22);
  --pb-brand-soft: color-mix(in srgb, var(--pb-brand) 18%, #18202a);
}
html[data-theme="dark"] .publicBookingRefined input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="dark"] .publicBookingRefined select,
html[data-theme="dark"] .publicBookingRefined textarea,
html[data-theme="dark"] .publicBookingRefined .sectionBlock {
  color: var(--pb-text) !important;
  background: #1d2631 !important;
}