/**
 * Cosmoparking × Car Park Booking System
 * Theme stylesheet — CSS only. Load after CPBS public.css.
 *
 * This file intentionally preserves CPBS markup, field names, JavaScript hooks
 * and state classes. All rules are scoped to the booking-form wrapper.
 */

.cpbs-main {
  --cpbs-red: #d4002a;
  --cpbs-red-dark: #b80024;
  --cpbs-ink: #0f0f10;
  --cpbs-paper: #ffffff;
  --cpbs-soft: #f6f6f5;
  --cpbs-line: rgb(15 15 16 / 12%);
  --cpbs-muted: rgb(15 15 16 / 66%);
  --cpbs-radius: 20px;
  --cpbs-radius-sm: 14px;
  color: var(--cpbs-ink);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

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

.booking-page { min-height: 100dvh; padding: 68px 0 0; background: var(--cpbs-paper); }
.booking-page__intro { padding: clamp(4rem, 8vw, 7rem) 0 clamp(1.25rem, 2vw, 2rem); border-bottom: 1px solid var(--cpbs-line); }
.booking-page__intro > .container { max-width: 760px; margin-left: 5vw; }
.booking-page__intro h1 { max-width: 9ch; margin: 0 0 1rem; color: var(--cpbs-ink); font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 700; line-height: .9; }
.booking-page__intro p:last-child { max-width: 48ch; margin: 0; color: var(--cpbs-muted); font-size: 1rem; line-height: 1.6; }
.booking-page__form { padding: clamp(1.25rem, 2.4vw, 2rem) 0 clamp(4rem, 8vw, 7rem); }
.booking-page__form .cpbs-main { width: 90vw; max-width: none; margin: 0 auto; }

@media (min-width: 781px) {
  .booking-page {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
  }
  .booking-page__intro { padding-top: clamp(6rem, 8vw, 8.5rem); }
  .booking-page__form { display: flex; align-items: flex-start; padding-bottom: 2rem; }
  .booking-page__form > .container { width: 100%; }
}

.cpbs-main .cpbs-hidden { display: none !important; }
.cpbs-main .cpbs-list-reset,
.cpbs-main .cpbs-list-reset ul,
.cpbs-main .cpbs-place-list ul,
.cpbs-main .cpbs-booking-extra-list ul,
.cpbs-main #cpbs-payment ul { padding: 0; margin: 0; list-style: none; }

/* Progress */
.cpbs-main .cpbs-main-navigation-default { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 1.1rem 0; border-bottom: 1px solid var(--cpbs-line); }
.cpbs-main .cpbs-main-navigation-default > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpbs-main .cpbs-main-navigation-default > ul > li { width: auto; min-width: 0; text-align: left; }
.cpbs-main .cpbs-main-navigation-default > ul > li > div { display: none; }
.cpbs-main .cpbs-main-navigation-default > ul > li.cpbs-state-completed > div { background: var(--cpbs-red); }
.cpbs-main .cpbs-main-navigation-default > ul > li > a > span:first-child {
  width: 32px;
  height: 32px;
  margin: 0;
  border: 1px solid var(--cpbs-line);
  background: var(--cpbs-paper);
  color: var(--cpbs-muted);
}
.cpbs-main .cpbs-main-navigation-default > ul > li > a { display: inline-flex; align-items: center; gap: .55rem; }
.cpbs-main .cpbs-main-navigation-default > ul > li > a > span:first-child > span:first-child { font-size: .78rem; line-height: 30px; }
.cpbs-main .cpbs-main-navigation-default > ul > li > a > span:first-child > span.cpbs-meta-icon-tick { font-size: .8rem; line-height: 30px; }
.cpbs-main .cpbs-main-navigation-default > ul > li > a > span:first-child + span {
  display: block;
  margin: 0;
  color: var(--cpbs-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
}
.cpbs-main .cpbs-main-navigation-default > ul > li.cpbs-state-selected > a > span:first-child,
.cpbs-main .cpbs-main-navigation-default > ul > li.cpbs-state-completed > a > span:first-child { border-color: var(--cpbs-red); background: var(--cpbs-red); color: #fff; }
.cpbs-main .cpbs-main-navigation-default > ul > li.cpbs-state-selected > a > span:first-child + span,
.cpbs-main .cpbs-main-navigation-default > ul > li.cpbs-state-completed > a > span:first-child + span { color: var(--cpbs-ink); }
.cpbs-main .cpbs-main-navigation-responsive { display: none; }

/* Shared typography and fields */
.cpbs-main .cpbs-header { margin: 0 0 1rem; color: var(--cpbs-ink); }
.cpbs-main .cpbs-header.cpbs-header-style-2 { font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 700; line-height: .98; }
.cpbs-main .cpbs-header.cpbs-header-style-3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.1; }
.cpbs-main .cpbs-header.cpbs-header-style-4 { font-size: .88rem; font-weight: 800; line-height: 1.35; }
.cpbs-main label,
.cpbs-main .cpbs-form-field > label { margin: 0; color: var(--cpbs-muted); font-size: .67rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.cpbs-main .cpbs-form-field {
  margin-top: 0;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .7rem .9rem .55rem;
  border: 1px solid var(--cpbs-line);
  border-radius: var(--cpbs-radius-sm);
  background: var(--cpbs-paper);
}
.cpbs-main .cpbs-form-field + .cpbs-form-field { margin-top: .65rem; }
.cpbs-main .cpbs-form-field > input,
.cpbs-main .cpbs-form-field > select,
.cpbs-main .cpbs-form-field > textarea,
.cpbs-main .cpbs-form-field .ui-selectmenu-button {
  min-height: 34px;
  padding: .2rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cpbs-ink);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
}
.cpbs-main .cpbs-form-field > input,
.cpbs-main .cpbs-form-field > select { flex: 1 1 auto; }
.cpbs-main .cpbs-form-field > input:focus,
.cpbs-main .cpbs-form-field > textarea:focus,
.cpbs-main .cpbs-form-field .ui-selectmenu-button:focus { outline: 3px solid rgb(212 0 42 / 22%); outline-offset: 4px; }
.cpbs-main .cpbs-form-field.cpbs-form-field-width-50,
.cpbs-main .cpbs-form-field.cpbs-form-field-width-33 { float: none; width: 100%; }
.cpbs-main .cpbs-form-field.cpbs-form-field-width-50 + .cpbs-form-field-width-50,
.cpbs-main .cpbs-form-field.cpbs-form-field-width-33 + .cpbs-form-field-width-33 { border-left-width: 1px; }
.cpbs-main .cpbs-form-field .field-label { display: block; color: var(--cpbs-muted); font-size: .67rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.cpbs-main .cpbs-form-field .picker__trigger,
.cpbs-main .cpbs-form-field .location-select__trigger {
  min-height: 34px;
  padding: .2rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cpbs-ink);
  box-shadow: none;
  font-size: .98rem;
  font-weight: 600;
}
.cpbs-main .cpbs-form-field .picker__trigger:focus-visible,
.cpbs-main .cpbs-form-field .location-select__trigger:focus-visible { outline: 3px solid rgb(212 0 42 / 22%); outline-offset: 4px; }
.cpbs-main .cpbs-form-field .location-select__trigger svg,
.cpbs-main .cpbs-form-field .picker__trigger svg { color: var(--cpbs-red); }
.cpbs-main .cpbs-form-field--location { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.cpbs-main .cpbs-form-field--location .location-select { min-height: 0; display: flex; }
.cpbs-main .cpbs-form-field--location .location-select__trigger { flex: 1 1 auto; }

/* Buttons and notices */
.cpbs-main .cpbs-button,
.cpbs-main input[type="submit"].cpbs-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}
.cpbs-main .cpbs-button.cpbs-button-style-1,
.cpbs-main input[type="submit"].cpbs-button.cpbs-button-style-1 { border-color: var(--cpbs-red); background: var(--cpbs-red); color: #fff; }
.cpbs-main .cpbs-button.cpbs-button-style-2 { border-color: var(--cpbs-line); background: var(--cpbs-paper); color: var(--cpbs-ink); }
.cpbs-main .cpbs-button.cpbs-button-style-3 { border-color: var(--cpbs-ink); background: var(--cpbs-ink); color: #fff; }
.cpbs-main .cpbs-button.cpbs-state-selected { border-color: var(--cpbs-red); background: var(--cpbs-red); color: #fff; }
.cpbs-main .cpbs-button.cpbs-state-disabled { opacity: .45; cursor: not-allowed; }
.cpbs-main .cpbs-notice { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid rgb(212 0 42 / 22%); border-radius: var(--cpbs-radius-sm); background: rgb(212 0 42 / 6%); color: #93001d; font-size: .86rem; font-weight: 600; line-height: 1.45; }
.cpbs-main .cpbs-main-content-navigation-button { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button { min-width: 132px; }

/* Step 1 */
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel { border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius); background: var(--cpbs-paper); }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child { position: static; padding: clamp(1.15rem, 2.4vw, 1.75rem); }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div { padding: 0; }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div + div { padding: 0; }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:first-child,
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:first-child > div,
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:first-child > div > div { display: block; }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:first-child > div { padding: 0; }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div > div > div > div { flex-basis: auto; }
.cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:last-child > input { width: 100%; margin-top: 1rem; }
.cpbs-main .cpbs-google-map { display: none; }

@media (min-width: 781px) {
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, .8fr);
    gap: 1rem;
    align-items: end;
  }
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child > div > .cpbs-header {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:last-child > .cpbs-header { margin-bottom: .65rem; }
}

/* Step 2 / 3 sidebar and result surface */
.cpbs-main .cpbs-layout-25x75 { display: grid; grid-template-columns: minmax(230px, .36fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.cpbs-main .cpbs-layout-25x75 > .cpbs-layout-column-left,
.cpbs-main .cpbs-layout-25x75 > .cpbs-layout-column-right { width: auto; float: none; }
.cpbs-main .cpbs-main-content-step-2 > .cpbs-layout-25x75 .cpbs-layout-column-left .cpbs-summary-box,
.cpbs-main .cpbs-main-content-step-3 > .cpbs-layout-25x75 .cpbs-layout-column-left .cpbs-summary-box {
  padding: 1.3rem;
  border: 1px solid var(--cpbs-line);
  border-radius: var(--cpbs-radius);
  background: var(--cpbs-soft);
}

/* Parking choices */
.cpbs-main .cpbs-place-list > ul { display: grid; gap: 1rem; margin-top: 1rem; }
.cpbs-main .cpbs-place-list > ul > li { margin: 0; }
.cpbs-main .cpbs-place { min-height: 0; margin: 0; overflow: hidden; border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius); background: var(--cpbs-paper); }
.cpbs-main .cpbs-place > .cpbs-place-layout-column-left { display: none; }
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right { display: grid; gap: 1.25rem; padding: 1.25rem; }
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-top,
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-middle { display: flex; gap: 1rem; margin: 0; align-items: start; }
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-top > div:first-child { padding: 0; }
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-middle > div:last-child { margin-left: auto; }
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-bottom { margin-top: 0; }
.cpbs-main .cpbs-place .cpbs-place-name { margin: 0 0 .25rem; color: var(--cpbs-ink); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.cpbs-main .cpbs-place .cpbs-place-location-name,
.cpbs-main .cpbs-place .cpbs-place-location-name a { color: var(--cpbs-muted); font-size: .84rem; font-weight: 600; }
.cpbs-main .cpbs-place .cpbs-place-price { color: var(--cpbs-red); font-size: 1.25rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.cpbs-main .cpbs-place .cpbs-place-attribute-1 > div,
.cpbs-main .cpbs-place .cpbs-place-attribute-2 > div { color: var(--cpbs-muted); font-size: .82rem; }
.cpbs-main .cpbs-place .cpbs-place-attribute-1 > div > div,
.cpbs-main .cpbs-place .cpbs-place-attribute-2 > div > div { padding-left: 1.8rem; }
.cpbs-main .cpbs-place .cpbs-place-select-button { min-width: 128px; }

/* Extras, quantity and payment */
.cpbs-main .cpbs-booking-extra { margin-top: 2rem; }
.cpbs-main .cpbs-booking-extra-list > ul { display: grid; gap: .75rem; }
.cpbs-main .cpbs-booking-extra-list > ul > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius-sm); background: var(--cpbs-paper); }
.cpbs-main .cpbs-booking-extra-list > ul > li > div { margin: 0; }
.cpbs-main .cpbs-booking-extra-list > ul > li > div:first-child + div,
.cpbs-main .cpbs-booking-extra-list > ul > li > div:first-child + div + div { width: auto; }
.cpbs-main .cpbs-booking-extra-list > ul > li .cpbs-booking-extra-name { color: var(--cpbs-ink); font-size: .95rem; font-weight: 800; }
.cpbs-main .cpbs-booking-extra-list > ul > li .cpbs-booking-extra-price { color: var(--cpbs-red); font-size: .9rem; font-weight: 800; }
.cpbs-main .cpbs-booking-extra-list > ul > li .cpbs-booking-extra-description { margin-top: .25rem; color: var(--cpbs-muted); font-size: .78rem; line-height: 1.45; }
.cpbs-main .cpbs-quantity { display: inline-flex; overflow: hidden; border: 1px solid var(--cpbs-line); border-radius: 999px; }
.cpbs-main .cpbs-quantity > a { display: grid; width: 30px; height: 30px; place-items: center; background: var(--cpbs-paper); color: var(--cpbs-red); text-decoration: none; }
.cpbs-main .cpbs-quantity > input { width: 30px; padding: 0; border: 0; color: var(--cpbs-ink); font-size: .78rem; font-weight: 800; text-align: center; }
.cpbs-main #cpbs-payment { margin-top: 1.5rem; }
.cpbs-main #cpbs-payment > ul { display: grid; gap: .65rem; }
.cpbs-main #cpbs-payment > ul > li { padding: 1rem; border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius-sm); background: var(--cpbs-paper); }

/* Summary, final confirmation and WooCommerce checkout */
.cpbs-main .cpbs-summary-price-element { margin-top: 1.15rem; }
.cpbs-main .cpbs-summary-price-element > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; color: var(--cpbs-muted); font-size: .84rem; line-height: 1.35; }
.cpbs-main .cpbs-summary-price-element > div > span:first-child + span { color: var(--cpbs-ink); font-weight: 700; text-align: right; }
.cpbs-main .cpbs-summary-price-element > div.cpbs-summary-price-element-total { margin-top: .65rem; padding-top: 1rem; border-top: 1px solid var(--cpbs-line); color: var(--cpbs-ink); font-size: 1rem; font-weight: 800; }
.cpbs-main .cpbs-summary-price-element > div.cpbs-summary-price-element-total > div:first-child + div { color: var(--cpbs-red); font-size: 1.35rem; }
.cpbs-main .cpbs-main-content-step-4 > .cpbs-layout-50x50 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cpbs-main .cpbs-main-content-step-4 > .cpbs-layout-50x50 > .cpbs-layout-column-left,
.cpbs-main .cpbs-main-content-step-4 > .cpbs-layout-50x50 > .cpbs-layout-column-right { width: auto; padding: 1.3rem; border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius); background: var(--cpbs-paper); }
.cpbs-main .cpbs-booking-complete { max-width: 680px; padding: clamp(1.5rem, 4vw, 3rem); margin: 0 auto; border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius); background: var(--cpbs-paper); text-align: center; }
.cpbs-main .cpbs-booking-complete .cpbs-icon-booking-complete { color: var(--cpbs-red); }
.cpbs-main .cpbs-booking-complete p { color: var(--cpbs-muted); line-height: 1.55; }
.cpbs-main .cpbs-booking-complete .cpbs-booking-complete-payment > div { justify-content: center; }
.cpbs-main .woocommerce-notice { padding: 1rem; border: 1px solid rgb(212 0 42 / 22%); border-radius: var(--cpbs-radius-sm); background: rgb(212 0 42 / 6%); color: var(--cpbs-ink); }
.cpbs-main #payment .wc_payment_methods { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.cpbs-main #payment .wc_payment_method { padding: 1rem; border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius-sm); }
.cpbs-main #payment .payment_box { padding: .75rem 0 0; color: var(--cpbs-muted); font-size: .84rem; line-height: 1.5; }

/* Plugin popups */
.cpbs-main.ui-datepicker,
.cpbs-main .ui-selectmenu-menu,
.cpbs-main .ui-timepicker-wrapper { border: 1px solid var(--cpbs-line); border-radius: var(--cpbs-radius-sm); background: var(--cpbs-paper); box-shadow: 0 14px 32px rgb(15 15 16 / 12%); }
.cpbs-main.ui-datepicker { padding: .8rem; }
.cpbs-main.ui-datepicker .ui-datepicker-header { border: 0; background: transparent; color: var(--cpbs-ink); }
.cpbs-main.ui-datepicker td a,
.cpbs-main.ui-datepicker td span { border-radius: 50%; color: var(--cpbs-ink); text-align: center; }
.cpbs-main.ui-datepicker td a.ui-state-active,
.cpbs-main.ui-datepicker td a.ui-state-hover { background: var(--cpbs-red); color: #fff; }
.cpbs-main .ui-menu .ui-menu-item { padding: .65rem .8rem; color: var(--cpbs-ink); font-family: inherit; font-size: .9rem; }
.cpbs-main .ui-menu .ui-state-active,
.cpbs-main .ui-menu .ui-state-focus { margin: 0; border: 0; border-radius: 8px; background: rgb(212 0 42 / 7%); color: var(--cpbs-red); }

@media (max-width: 780px) {
  .booking-page__form .cpbs-main { width: 100%; }
  .cpbs-main .cpbs-main-navigation-default { display: none; }
  .cpbs-main .cpbs-main-navigation-responsive { display: block; margin-bottom: 1.25rem; }
  .cpbs-main .cpbs-layout-25x75,
  .cpbs-main .cpbs-main-content-step-4 > .cpbs-layout-50x50 { grid-template-columns: 1fr; }
  .cpbs-main .cpbs-layout-25x75 > .cpbs-layout-column-left { order: 2; }
  .cpbs-main .cpbs-booking-extra-list > ul > li { grid-template-columns: auto minmax(0, 1fr); }
  .cpbs-main .cpbs-booking-extra-list > ul > li > div:first-child + div + div { grid-column: 2; }
}

@media (max-width: 520px) {
  .cpbs-main .cpbs-main-content-navigation-button { flex-direction: column-reverse; }
  .cpbs-main .cpbs-main-content-navigation-button .cpbs-button,
  .cpbs-main .cpbs-place .cpbs-place-select-button { width: 100%; }
  .cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-middle { display: grid; }
  .cpbs-main .cpbs-place > .cpbs-place-layout-column-right > .cpbs-place-layout-column-right-line-middle > div:last-child { width: 100%; margin: 0; }
}
