/**
 * Cosmoparking — CPBS Bridge, supplemental styles.
 *
 * Everything the bridge ADDS lives here. cpbs-cosmoparking.css is kept
 * byte-identical to the designer's prototype file so it can be re-synced from
 * that repository without a merge; this file is loaded immediately after it.
 *
 * Scoped to .cpbs-main throughout, matching the skin's own contract.
 */

/* ------------------------------------------------------------ typography */

/*
 * Force Manrope onto the booking form.
 *
 * public.css declares, with no generic family as a fallback:
 *
 *     .cpbs-main, .cpbs-main input, .cpbs-main select, .cpbs-main textarea,
 *     .cpbs-main .ui-menu .ui-menu-item, .cpbs-main .ui-timepicker-wrapper,
 *     .cpbs-main.ui-datepicker th/td { font-family: 'Source Sans Pro'; }
 *     .cpbs-main label, .cpbs-main .cpbs-attribute-field-name { font-family: 'Lato'; }
 *
 * Both of those webfonts are deliberately dequeued — the site uses Manrope, and
 * the plugin requested Lato without Greek glyphs. With the fonts gone and no
 * generic family declared, every one of these elements falls back to the
 * browser's default, which is a SERIF face. That is why the dates rendered in
 * Times.
 *
 * These selectors deliberately mirror the plugin's own, so specificity matches
 * and load order decides — this file is enqueued after public.css.
 */
.cpbs-main,
.cpbs-main input,
.cpbs-main select,
.cpbs-main textarea,
.cpbs-main button,
.cpbs-main label,
.cpbs-main label a,
.cpbs-main .cpbs-attribute-field .cpbs-attribute-field-name,
.cpbs-main .cpbs-rental-date-box > div > span:first-child,
.cpbs-main .ui-menu .ui-menu-item,
.cpbs-main .ui-timepicker-wrapper,
.cpbs-main .ui-selectmenu-button,
.cpbs-main.ui-datepicker,
.cpbs-main.ui-datepicker th,
.cpbs-main.ui-datepicker td,
.cpbs-main.ui-datepicker td a,
.cpbs-main.ui-datepicker td span,
.cpbs-main.ui-selectmenu-menu,
.cpbs-main.ui-selectmenu-menu .ui-menu-item {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

/* The icon fonts must keep their own families. */
.cpbs-main [class*="cpbs-meta-icon"],
.cpbs-main [class*="cpbs-feature-icon"] {
  font-family: inherit;
}

.cpbs-main .cpbs-meta-icon-tick,
.cpbs-main span[class^="cpbs-meta-icon-"],
.cpbs-main span[class^="cpbs-feature-icon-"] {
  font-family: "cpbs-meta-icon", "cpbs-feature-icon";
}

/* ------------------------------------------------------- page containment */

/*
 * The skin makes .booking-page a 100dvh grid with overflow:hidden above 781px.
 * That works only while the form is shorter than the viewport — and step 1 is
 * not: with the airport selector and the submit button present, the panel
 * overflows and both get clipped, leaving a form the user cannot complete.
 *
 * Letting the page scroll normally is the fix. The intro still fills the first
 * screen, so the intended "booking app" feel survives; the difference is that
 * the rest of the form is now reachable.
 */
@media (min-width: 781px) {
  .booking-page {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .booking-page__intro {
    padding-top: clamp(5rem, 6vw, 7rem);
  }

  .booking-page__form {
    padding-bottom: clamp(3rem, 5vw, 5rem);
  }
}

/*
 * The design gives the footer min-height:80vh, which reads as a deliberate
 * closing panel under a long marketing page. After a booking form it is just a
 * screen of empty white, so it is capped on this template only.
 */
.booking-page-body .site-footer {
  min-height: 0;
}

.booking-page-body .site-footer__layout {
  min-height: 0;
}

/* ------------------------------------------------- step 1: the field pair */

/*
 * Entry date and entry time were stacking, each squeezed to 188px inside a
 * 1296px panel, leaving the right half of the form empty.
 *
 * The skin turns each group ("Entry Date and Time") into a two-column grid,
 * expecting the date and the time to be its direct children. They are not — the
 * plugin wraps the pair in an extra class-less <div>. So that wrapper took a
 * single 188px column and the two fields stacked inside it.
 *
 * Fixed in two parts: the group goes back to one column, and whatever element
 * actually holds the pair becomes the two-column grid.
 *
 * The :has() selector is deliberate. Matching "the element that directly
 * contains two adjacent form fields" survives the plugin adding or removing a
 * wrapper level, which the positional selectors in the skin do not.
 *
 * The doubled `.cpbs-main.cpbs-main` is not a typo, and it is not decoration.
 * The plugin sizes this exact element with
 *
 *   .cpbs-main .cpbs-main-content .cpbs-main-content-step-1
 *     .cpbs-form-panel>div:first-child>div>div:first-child>div>div
 *   { display: flex; flex-direction: row; }
 *
 * which is (0,6,5) — four classes plus two :first-child, and five type
 * selectors. A plain `.cpbs-main .cpbs-main-content-step-1 div:has(...)` is only
 * (0,4,1) and loses outright, so `display: grid` never applied and the pair was
 * really being laid out by the plugin's flex row the whole time. It looked
 * correct at 1440px because two cards happen to fit; at a ~900px viewport
 * flex-wrap folded them into a stack.
 *
 * Repeating the root class takes this to (0,7,1), which beats the plugin on the
 * class column without pinning the rule to a wrapper depth.
 */
/*
 * Even padding around the panel, at every width.
 *
 * Measured before this fix: 30px of space above and left of the cards, 0 right
 * and 1px below — the cards sat flush against the panel's bottom edge. Two
 * plugin rules beat the skin to produce that:
 *
 *   .cpbs-main.cpbs-google-map-enable-0 ... .cpbs-form-panel>div:first-child
 *   { padding:0px; }                                        <- (0,6,1), kills
 *     the skin's uniform clamp() padding, which is only (0,4,2)
 *
 *   .cpbs-main .cpbs-main-content .cpbs-main-content-step-1
 *     .cpbs-form-panel>div:first-child>div
 *   { padding:30px 0px 0px 30px; }                          <- top+left only
 *
 * Both are mirrored below at equal specificity; this file loads later, so the
 * skin's intended even padding finally applies.
 */
.cpbs-main.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child {
  padding: clamp(1.15rem, 2.4vw, 1.75rem);
}

.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div {
  padding: 0;
}

/*
 * The plugin also pads each date/time/location GROUP and the submit wrapper
 * 30px right and bottom (public.css:1355 and :1391) — spacing budgeted for its
 * own flush float layout. On top of the panel's real padding it produced 49px
 * of space on the right and bottom against 19px on the left. Grid gaps carry
 * the spacing between elements now, so these mirrors zero the leftovers.
 */
.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div + div {
  padding-right: 0;
  padding-bottom: 0;
}

.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div:first-child > div {
  padding-right: 0;
  padding-bottom: 0;
}

/*
 * Restore the time card's left border, at every width. The plugin strips it —
 *
 *   .cpbs-main .cpbs-main-content .cpbs-main-content-step-1
 *     .cpbs-form-panel>div:first-child>div>div>div>div>.cpbs-form-field+.cpbs-form-field
 *   { border-left-width: 0px; }
 *
 * — which is correct for its own flush layout, where adjacent cards butt
 * together and share a single 1px line. In the bridge's layout the pair is
 * separated by a gap (side by side on desktop, stacked on phones), so the
 * shared-border trick just leaves the second card open on one side. The rule
 * carries no media query, so neither does this one. Byte-for-byte mirror of the
 * plugin's selector: same specificity, this file loads later, so it wins.
 */
.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div > div > div > div > .cpbs-form-field + .cpbs-form-field {
  border-left-width: 1px;
}

@media (min-width: 781px) {
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpbs-main.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel div:has(> .cpbs-form-field + .cpbs-form-field) {
    display: grid;
    /* A date ("10-08-2026") needs more room than a time ("10:00"). */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    /* The plugin puts a top margin on the second field of a pair, which left the
       time card sitting 10px below the date card next to it. */
    align-items: start;
  }

  .cpbs-main .cpbs-main-content-step-1 div:has(> .cpbs-form-field + .cpbs-form-field) > .cpbs-form-field {
    margin: 0;
  }

  /*
   * Compact, uniform cards. The skin's 130px card height leaves a slab of empty
   * border below a one-line value, and the location card — holding a taller
   * select — ends up a different height from its neighbours, so the borders
   * read as misaligned boxes rather than a row of fields. Same height for all,
   * content vertically centred, no dead space.
   */
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 96px;
  }

  /*
   * The plugin sets the value at a fixed 20px semibold with 20px side padding.
   * In the 781-1099 range a date card is ~125px wide, which truncates
   * "10-08-2026" to "10-08-202" — a wrong date shown to the customer. Scale
   * with the viewport instead of clipping.
   */
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-field > input {
    padding-right: 12px;
    padding-left: 14px;
    font-size: clamp(14px, 1.2vw, 18px);
  }

  /*
   * The group headings ("Entry Date and Time") repeat what the field labels
   * already say, and they are what forces the form into two tall blocks. Kept
   * for screen readers, removed from the visual layout so the fields can sit
   * in one line. Below 781px they stay visible — on a stacked mobile form they
   * earn their place as section breaks.
   */
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child > div > .cpbs-header {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  /* With the headings out of flow the submit no longer needs its offset. */
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:last-child > input {
    min-height: 60px;
    margin-top: 0;
  }
}

/*
 * Between 781 and 1179px there is room for the two date/time groups side by
 * side, but not for the location and the button on the same line as well —
 * measured, that squeezed each date input to 57px and truncated "10-08-2026"
 * to a wrong date. The button drops below the fields instead of clipping them.
 */
@media (min-width: 781px) and (max-width: 1179px) {
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:last-child {
    justify-self: end;
  }

  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:last-child > input {
    width: auto;
    min-width: 280px;
    margin-top: 1rem;
  }
}

/*
 * The fully inline row: entry pair, exit pair and the car park side by side,
 * submit at the end of the line. Only from 1180px up — below that the row
 * cannot hold five fields and a button without truncating the dates.
 */
@media (min-width: 1180px) {
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child {
    /* A fixed button column: fr-sized, it grew at the fields' expense. */
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(180px, 0.8fr);
    gap: 1rem;
    align-items: stretch;
  }

  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div:first-child > div:first-child > div {
    padding: 0;
  }
}

/* --------------------------------------------------------- field sizing */

/*
 * The skin sets `.cpbs-main .cpbs-form-field { min-height: 130px }`. That is
 * right for step 1, where each field is a large card showing a date or time as
 * a headline. It is applied to EVERY field though, so step 3 rendered fourteen
 * 130px boxes — name, surname, email, phone, plate, comments and the whole
 * billing address — each a small label stranded above a large empty area. The
 * step was several screens long for what is really a short form.
 *
 * The card treatment is scoped back to step 1; every other step gets a normal,
 * compact field. Nothing here changes step 1's appearance.
 */
.cpbs-main .cpbs-main-content-step-2 .cpbs-form-field,
.cpbs-main .cpbs-main-content-step-3 .cpbs-form-field,
.cpbs-main .cpbs-main-content-step-4 .cpbs-form-field,
.cpbs-main .cpbs-main-content-step-5 .cpbs-form-field,
.cpbs-main .cpbs-main-navigation-responsive .cpbs-form-field {
  min-height: 0;
  padding: 0.55rem 0.9rem 0.6rem;
}

.cpbs-main .cpbs-main-content-step-3 .cpbs-form-field > input,
.cpbs-main .cpbs-main-content-step-3 .cpbs-form-field > select,
.cpbs-main .cpbs-main-content-step-3 .cpbs-form-field .ui-selectmenu-button {
  min-height: 26px;
  font-size: 0.95rem;
}

.cpbs-main .cpbs-main-content-step-3 .cpbs-form-field > textarea {
  min-height: 84px;
  padding-top: 0.3rem;
  resize: vertical;
}

/*
 * Follow the plugin's own layout system instead of imposing one.
 *
 * CPBS tags each field with its intended width — `cpbs-form-field-width-50`,
 * `cpbs-form-field-width-33`, or no class for full width — and groups them into
 * `.cpbs-clear-fix` blocks. The skin de-floats those classes to `width:100%`,
 * which loses the sizing entirely.
 *
 * An earlier attempt here put a two-column grid on the panel's children. That
 * made each .cpbs-clear-fix BLOCK a column rather than each field, so the two
 * columns filled independently: "Licence plate" ended up beside "Comments" at a
 * different height, and the billing address ran company/tax down the left while
 * street/number/city ran down the right. Fields never lined up as rows.
 *
 * Honouring the plugin's width classes gives the intended grid for free and
 * keeps working if a field's width class changes in a future release.
 */
@media (min-width: 781px) {
  .cpbs-main .cpbs-main-content-step-3 .cpbs-clear-fix:has(> .cpbs-form-field) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .cpbs-main .cpbs-main-content-step-3 .cpbs-clear-fix > .cpbs-form-field {
    flex: 1 1 100%;
    width: auto;
    margin: 0;
  }

  .cpbs-main .cpbs-main-content-step-3 .cpbs-clear-fix > .cpbs-form-field-width-50 {
    flex: 0 1 calc(50% - 0.375rem);
  }

  .cpbs-main .cpbs-main-content-step-3 .cpbs-clear-fix > .cpbs-form-field-width-33 {
    flex: 0 1 calc(33.333% - 0.5rem);
  }
}

/* --------------------------------------------------------------- shadows */

/*
 * public.css:147-155 drops a heavy offset shadow (0 55px 30px -40px) on five
 * panels. The design is flat cards with 1px borders — the shadow is foreign to
 * it everywhere — and on step 1 it is now visibly broken as well: the plugin
 * paints it on the INNER wrapper, which sits inset from the panel's edge since
 * the panel got its even padding, so the shadow pokes out from under the
 * bottom-left corner as a detached smudge. Byte-for-byte mirror of the
 * plugin's five-selector list; loaded later, so it wins.
 */
.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel > div:first-child > div,
.cpbs-main .cpbs-main-content .cpbs-main-content-step-2 > .cpbs-layout-25x75 .cpbs-layout-column-left .cpbs-summary-box,
.cpbs-main .cpbs-main-content .cpbs-main-content-step-3 > .cpbs-layout-25x75 .cpbs-layout-column-left .cpbs-summary-box,
.cpbs-main .cpbs-main-content .cpbs-main-content-step-4 > .cpbs-layout-50x50 > .cpbs-layout-column-left,
.cpbs-main .cpbs-main-content .cpbs-main-content-step-4 > .cpbs-layout-50x50 > .cpbs-layout-column-right {
  box-shadow: none;
}

/* ------------------------------------------------------ step 2: place cards */

/*
 * The "Επιλογή" buttons sat at a different x on every card, glued to however
 * wide the availability text happened to be — while BOTH the plugin and the
 * skin put `margin-left: auto` on the button's wrapper, and neither worked.
 *
 * The cause is two layout systems colliding on the parent column. The plugin
 * lays `.cpbs-place-layout-column-right` out as a flex COLUMN and gives it
 * `justify-content: space-between` to spread its rows vertically. The skin
 * re-lays the column as a grid — where that same inherited `space-between`
 * now applies horizontally to the track: the track is sized to its content
 * instead of stretching. So `.cpbs-place-layout-column-right-line-middle`
 * shrink-wrapped to 467px inside an 882px column, there was no free space for
 * the auto margin to absorb, and it computed to 0. Same story on line-top,
 * which is why the price hugged the title instead of sitting at the card's
 * right edge.
 *
 * Mirror of the plugin's selector at (0,2,1); loaded later, so it wins.
 */
.cpbs-main .cpbs-place > .cpbs-place-layout-column-right {
  justify-content: normal;
}

/*
 * The plugin draws a heavy 3px black rule across the top of every form panel's
 * content (public.css:1519, `.cpbs-form-panel .cpbs-form-panel-content
 * { border-width:3px 0 0 }`) — sitting right above the first field row on
 * step 3 and again inside the billing panel. The design has no such rule; the
 * panels separate with whitespace and light card borders. Same selector shape,
 * loaded later.
 */
.cpbs-main .cpbs-form-panel .cpbs-form-panel-content {
  border-width: 0;
}

/* ------------------------------------------------ step navigation buttons */

/*
 * Bring the prev/next step buttons into the site's CTA system — the pill with
 * the circular arrow chip used by "Κράτηση τώρα", "Κλείσε θέση" and the mobile
 * menu's "Book now". The plugin styles them as plain pills with a bare
 * icon-font glyph, at its own metrics (16px/700, 2px border, 14/32 padding,
 * icon nudged with top:2px + padding-left:12px), and those rules sit at
 * (0,3,0)/(0,3,1) — above the skin's generic .cpbs-button block, which is why
 * the skin never managed to restyle them. Everything below carries the
 * navigation-row class as well, (0,4,x), and wins outright.
 *
 * No markup change: the plugin emits [icon, text] for prev and [text, icon]
 * for next, so flex order alone puts each chip on its outer edge.
 */
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-prev,
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-next {
  min-height: 44px;
  gap: 0.625rem;
  border-width: 1px;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

/* Tight on the chip side, roomy on the text side — the .button geometry. The
   auto margins pin each button to its edge of the row regardless of how the
   plugin's JS toggles the next button's display when a space is selected. */
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-prev {
  margin-right: auto;
  padding: 0.2rem 0.9rem 0.2rem 0.2rem;
}

.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-next {
  margin-left: auto;
  padding: 0.2rem 0.2rem 0.2rem 0.9rem;
}

.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-prev > span,
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-next > span {
  top: auto;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 15px;
}

/* The red pill gets the white chip with a red arrow. */
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-next > span {
  background: #fff;
  color: var(--cpbs-red);
}

/* The outline pill gets an outlined chip; the plugin's own flip is kept so the
   arrow points back. */
.cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-prev > span {
  border: 1px solid var(--cpbs-line);
  color: var(--cpbs-ink);
  transform: scaleX(-1);
}

@media (hover: hover) {
  .cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-next:hover {
    border-color: #b80024;
    background: #b80024;
  }

  .cpbs-main .cpbs-main-content-navigation-button .cpbs-button.cpbs-button-step-prev:hover {
    border-color: var(--cpbs-ink);
  }
}

/* ------------------------------------------------------ summary: total row */

/*
 * The total read as "€20T0O0TAL" — label and value printed on top of each other.
 *
 * The plugin's markup is a wrapper with two children, and public.css gives the
 * value `position: absolute` (it expects a block wrapper it can pin against).
 * The skin turns that wrapper into a flex row, so the absolutely-positioned
 * value drops out of flow, collapses to zero width and lands on the label.
 *
 * Putting the value back in flow lets the flex row do what it was meant to.
 */
/*
 * These selectors mirror the plugin's own shape on purpose. Its rule is
 *   .cpbs-main .cpbs-summary-price-element>div.cpbs-summary-price-element-total>div:first-child+div
 * A shorter selector here loses on specificity no matter how late it loads,
 * which is exactly what happened on the first attempt.
 */
.cpbs-main .cpbs-summary-price-element > div.cpbs-summary-price-element-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cpbs-main .cpbs-summary-price-element > div.cpbs-summary-price-element-total > div:first-child + div {
  position: static;
  top: auto;
  right: auto;
  float: none;
  width: auto;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------- step 4: summary */

/*
 * The review step was unusable: every .cpbs-attribute-field was rendering at
 * 733px tall, so four of them stacked to ~2960px inside a panel only 795px
 * high. The result was fields escaping their bordered box, the booking summary
 * printing on top of the site footer, and the "next" button unclickable because
 * overflowing content sat over it.
 *
 * The height comes from the plugin's own stylesheet sizing these blocks against
 * a container that the skin has already re-laid-out as a grid. Releasing the
 * forced height and giving the panel an explicit two-column grid puts the
 * review back into the shape the design intends: label/value pairs, two per
 * row, box growing with its content.
 */
/*
 * ONE column here, not two: each .cpbs-attribute-field already contains its own
 * nested .cpbs-layout-50x50 with a left and right column. Putting the fields
 * themselves into two columns produced four columns of text across the panel,
 * which is where "test@example.com6900000000" came from — the label/value pairs
 * were squeezed until the values collided.
 */
.cpbs-main .cpbs-main-content-step-4 .cpbs-form-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-content: start;
  height: auto;
  min-height: 0;
}

/*
 * The nested pair layout: un-float it and give the two values real breathing
 * room.
 *
 * One column is the base, not two. The skin only collapses the OUTER
 * `.cpbs-main-content-step-4 > .cpbs-layout-50x50` below 781px; this nested one
 * sits inside every .cpbs-attribute-field, so leaving it two-up meant a label
 * and a Greek address sharing about 150px each on a phone. The second column is
 * added back at the desktop breakpoint below.
 */
.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field .cpbs-layout-50x50 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
}

@media (min-width: 781px) {
  .cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field .cpbs-layout-50x50 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1.75rem;
  }
}

.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field .cpbs-layout-column-left,
.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field .cpbs-layout-column-right {
  float: none;
  width: auto;
  min-width: 0;
}

/* Long addresses and plates must wrap rather than push the column wider. */
.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field-value {
  overflow-wrap: anywhere;
}

.cpbs-main .cpbs-main-content-step-4 .cpbs-form-panel > .cpbs-header {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field {
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: visible;
}

/* A comments block reads better across the full width than in a narrow column. */
.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field:last-child {
  grid-column: 1 / -1;
}

.cpbs-main .cpbs-main-content-step-4 .cpbs-attribute-field .cpbs-attribute-field-name {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--cpbs-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The summary column must never be taller than its own content either. */
.cpbs-main .cpbs-main-content-step-4 .cpbs-layout-50x50 > div {
  height: auto;
  min-height: 0;
  align-self: start;
}

/*
 * The nav buttons have to sit below everything, not be overlapped by it. This
 * is what made the step unfinishable rather than merely untidy.
 */
.cpbs-main .cpbs-main-content-step-4 .cpbs-main-content-navigation-button {
  position: relative;
  z-index: 2;
  clear: both;
}

/* -------------------------------------------------- validation messages */

/*
 * The plugin renders validation errors as qTip tooltips attached to the label.
 * The bridge injects a real, programmatically associated message instead — this
 * styles it to match the design's error treatment.
 */
.cpbs-main .cosmo-cpbs-error {
  display: block;
  margin-top: 0.35rem;
  color: #a20020;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.cpbs-main [aria-invalid="true"] {
  border-color: #a20020;
}

.cpbs-main .cpbs-form-field:has([aria-invalid="true"]) {
  border-color: #a20020;
}

/*
 * The qTip tooltip still fires, duplicating a message that is now rendered
 * properly a few pixels below it. cpbs-bridge.js marks those tooltips
 * aria-hidden and stamps this class; hiding them outright also removes a dark
 * tooltip that clashes with the design and that the plugin's own
 * overflow:hidden clearfixes clip anyway, because qTip renders inline rather
 * than on <body>.
 *
 * Scoped to tooltips inside a .cpbs-form-field, so the coupon-code qTip — the
 * only feedback for "code applied" — is left alone.
 */
.cpbs-main .cosmo-qtip-suppressed {
  display: none !important;
}

/*
 * qTip renders INLINE, so every clearfix hack that reaches for overflow:hidden
 * clips the tooltip it is meant to be showing. The payment list is the one
 * remaining case the bridge had not covered.
 */
.cpbs-main #cpbs-payment > ul > li {
  overflow: visible;
}

/* ------------------------------------------------------------ focus ring */

/*
 * The plugin's stylesheet suppresses focus outlines in several places,
 * including the jQuery UI selectmenu button and datepicker cells. The design
 * depends on a visible ring, so it is restored across every focusable
 * descendant.
 */
.cpbs-main a:focus-visible,
.cpbs-main button:focus-visible,
.cpbs-main input:focus-visible,
.cpbs-main select:focus-visible,
.cpbs-main textarea:focus-visible,
.cpbs-main [tabindex]:focus-visible,
.cpbs-main .ui-selectmenu-button:focus-visible,
.cpbs-main.ui-datepicker td a:focus-visible,
.cpbs-main .ui-menu-item:focus-visible {
  outline: 3px solid rgb(212 0 42 / 40%);
  outline-offset: 3px;
}

/* The step heading receives programmatic focus after each AJAX step change. */
.cpbs-main .cpbs-header:focus {
  outline: none;
}

.cpbs-main .cpbs-header:focus-visible {
  outline: 3px solid rgb(212 0 42 / 40%);
  outline-offset: 4px;
}

/* ------------------------------------------------- structural hardening */

/*
 * The skin reaches the step-1 grid through positional selectors
 * (`> div:first-child > div > div`), which depend on the plugin's class-less
 * wrapper nesting staying exactly as it is. The bridge stamps a stable class
 * onto the outer panel so the same layout can be expressed by name.
 *
 * These rules intentionally duplicate the skin's positional ones rather than
 * replacing them: if a plugin update changes the nesting, the named selectors
 * keep working and only the inner grid needs revisiting.
 */
@media (min-width: 781px) {
  .cpbs-main .cosmo-step1-panel > div:first-child > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr);
    gap: 1rem;
    align-items: end;
  }
}

/* ------------------------------------------------------------- step 5 */

/*
 * The plugin pins the confirmation panel with
 *   margin: 200px auto 200px auto !important
 * — 400px of vertical whitespace that no breakpoint of its own reduces, so on a
 * phone the "thank you" card starts below the fold after a successful booking.
 *
 * The skin's own `margin: 0 auto` is the same specificity WITHOUT !important and
 * therefore loses the cascade, which is why this selector is a byte-for-byte
 * mirror of the plugin's plus !important. Loading later is not enough here.
 */
.cpbs-main .cpbs-booking-complete {
  margin: clamp(2rem, 6vw, 4rem) auto !important;
}

/* ------------------------------------------------------------- mobile */

/*
 * Everything the bridge repaired until now lived inside
 * `@media (min-width: 781px)`, so below that width the booking form fell back to
 * the plugin's and the skin's untouched combination. These two blocks close that
 * gap. They mirror the skin's own breakpoints (780 / 520) rather than inventing
 * a third.
 */
@media (max-width: 780px) {
  /*
   * `.cpbs-main .cpbs-form-field { min-height: 130px }` is the right treatment
   * for step 1 on a desktop, where each field is a card showing a date as a
   * headline — which is why the reset further up deliberately lists steps 2-5
   * only. On a 375px screen four of those cards stack to roughly 520px of chrome
   * before the user reaches the submit button.
   *
   * The card shape is kept; the dead space is not. 0,3,0 beats the skin's 0,2,0
   * regardless of load order.
   */
  .cpbs-main .cpbs-main-content-step-1 .cpbs-form-field {
    min-height: 88px;
    padding: 0.6rem 0.9rem 0.65rem;
  }
}

@media (min-width: 480px) and (max-width: 780px) {
  /*
   * Same :has() shape as the desktop rule above — it matches "the element that
   * directly contains two adjacent form fields", which survives the plugin
   * adding or removing one of its class-less wrapper levels.
   *
   * Below 480px the pair is left stacked: two date cards side by side on a
   * 375px screen leaves no room for the value they exist to display.
   *
   * Step 3 needs nothing here — the skin already flattens its width classes to
   * width:100% unconditionally, so it stacks correctly on mobile today.
   *
   * The plugin's `display: flex` rule on this element carries no media query, so
   * it applies here too and the same (0,7,1) specificity is needed. See the
   * desktop rule above for the arithmetic.
   */
  .cpbs-main.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel div:has(> .cpbs-form-field + .cpbs-form-field) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    align-items: start;
  }

  .cpbs-main .cpbs-main-content-step-1 div:has(> .cpbs-form-field + .cpbs-form-field) > .cpbs-form-field {
    margin: 0;
  }
}

@media (max-width: 479px) {
  /*
   * Below 480px the pair stacks. The plugin's flex row already wraps to the same
   * result, but only because two cards happen not to fit — stating it makes the
   * narrowest layout deliberate rather than a side effect of the widths, which
   * is exactly the confusion that hid the specificity bug above.
   */
  .cpbs-main.cpbs-main .cpbs-main-content .cpbs-main-content-step-1 .cpbs-form-panel div:has(> .cpbs-form-field + .cpbs-form-field) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
    align-items: start;
  }
}

@media (max-width: 780px) {
  /*
   * iOS Safari auto-zooms the page whenever a focused control's font-size is
   * under 16px — the bridge's compact step-3 fields sit at 0.95rem (15.2px),
   * so every tap on a field zoomed the viewport. 16px is the exact threshold.
   * The step-3 selectors mirror the compact-sizing rules above so the tie
   * breaks on source order; the generic ones catch every other control the
   * form renders, including the AJAX-injected ones.
   */
  .cpbs-main .cpbs-main-content-step-3 .cpbs-form-field > input,
  .cpbs-main .cpbs-main-content-step-3 .cpbs-form-field > select,
  .cpbs-main .cpbs-main-content-step-3 .cpbs-form-field .ui-selectmenu-button,
  .cpbs-main .cpbs-form-field > input,
  .cpbs-main .cpbs-form-field > textarea,
  .cpbs-main .cpbs-form-field > select,
  .cpbs-main .cpbs-form-field .ui-selectmenu-button,
  .cpbs-main select[name="cpbs_navigation_responsive"] {
    font-size: 16px;
  }

  /*
   * Even vertical rhythm for the stacked fields. The plugin's flush layout
   * overlaps adjacent field borders with margin-top:-1px; the desktop grids
   * replace that with real gaps, but below 781px those grids do not apply and
   * the cards sat nearly touching, at uneven distances. Same specificity as
   * the plugin's margin rule plus the step class — wins on the class column.
   */
  .cpbs-main .cpbs-main-content-step-2 .cpbs-form-field,
  .cpbs-main .cpbs-main-content-step-3 .cpbs-form-field {
    margin-top: 0.65rem;
  }
}

/* ------------------------------------------- the 768-959 container band */

/*
 * CPBSHelper.setWidthClass stamps cpbs-width-{300|480|768|960|1220} plus
 * cpbs-widthlt-960 onto .cpbs-main, computed from the width of its PARENT. The
 * plugin's stylesheet collapses its float layouts for -480 and -300 only;
 * cpbs-width-768 has no non-widget rule anywhere in it. So at roughly a 900px
 * viewport the 25x75 split survives and the summary sidebar stays a narrow
 * column beside the content instead of stacking under it.
 *
 * A viewport media query is the wrong instrument: .cpbs-main is 90vw and the
 * theme can narrow its container independently, so viewport and container
 * disagree. These use the plugin's own container class instead — the same one
 * the plugin already uses for this purpose on its booking-extra rules — and win
 * at 0,3,0 against the skin's 0,2,0 rather than on load order.
 *
 * One class covers the whole 300-959 range; a parallel cpbs-width-768 tier would
 * double the surface for no change in behaviour.
 */
.cpbs-main.cpbs-widthlt-960 .cpbs-layout-25x75,
.cpbs-main.cpbs-widthlt-960 .cpbs-main-content-step-4 > .cpbs-layout-50x50 {
  grid-template-columns: minmax(0, 1fr);
}

/* Content first, summary after it — the same order the skin uses below 780px. */
.cpbs-main.cpbs-widthlt-960 .cpbs-layout-25x75 > .cpbs-layout-column-left {
  order: 2;
}

/* -------------------------------------------------- location modal cards */

/*
 * Each place-type card in the "more details" modal is sized at 160x200 with 30px
 * of border-box padding — 100x140 of content for a 48px icon, an 18/28px name
 * and a 16/26px description, a budget of about 102px. The Greek names wrap to
 * two or three lines and the parent is overflow:hidden, so they are silently
 * clipped.
 *
 * The plugin's selectors here carry no .cpbs-main prefix; adding it raises
 * specificity from 0,4,0 to 0,5,0, so these win on merit rather than order.
 */
.cpbs-main .cpbs-location-info-frame > div .cpbs-location-info-frame-place-type {
  overflow: visible;
}

.cpbs-main .cpbs-location-info-frame > div .cpbs-location-info-frame-place-type .cpbs-list .cpbs-list-item > div {
  width: auto;
  min-width: 160px;
  max-width: 240px;
  height: auto;
  min-height: 200px;
  gap: 0.75rem;
}

/* ------------------------------------------------------ screen readers */

.cpbs-main .screen-reader-text,
#cosmo-cpbs-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}