/* CORALLI ONLINE 2.15.37: one desktop fold, one modal screen per navigation step.
   Override only layout, keeping availability, payments and consent untouched.
   Restore via /srv/rentaloffice/backups/Online_Layout_Rollback_.../restore_ui_only.sh */

/* The title of the chosen search solution repeats the informative plan below. */
#selectionModal .cb-hold-page-1 #selectionTitle {display:none!important}
#selectionModal .cb-hold-page-1 .cb-hold-header {align-items:center;min-height:23px;gap:10px}
#selectionModal .cb-hold-page-1 .cb-hold-header .cb-kicker {margin:0;font-size:10px}

/* No scroll-based transitions. Exactly one page is visible at a time. */
#selectionModal.cb-hold-modal {
  --hold-page-height:min(720px, calc(100dvh - 24px));
  width:min(1020px,calc(100vw - 24px));
  height:var(--hold-page-height);
  max-height:var(--hold-page-height);
  overflow:hidden!important;
  scrollbar-gutter:auto!important;
  scroll-behavior:auto!important;
  scroll-snap-type:none!important;
  overscroll-behavior:none;
  border-radius:19px;
}
#selectionModal .cb-hold-card.cb-hold-paged {
  display:flex;
  height:100%;
  width:100%;
  flex-direction:column;
  min-height:0;
  padding:0;
  overflow:hidden;
}
#selectionModal .cb-hold-page {
  flex:1 1 auto;
  height:100%;
  min-height:0!important;
  max-height:100%;
  width:100%;
  padding:14px 22px 13px;
  overflow:hidden;
  scroll-snap-align:none;
  scroll-snap-stop:normal;
}
#selectionModal .cb-hold-page[hidden] {display:none!important}
#selectionModal .cb-hold-page-content {
  flex:1 1 auto;
  min-height:0;
  width:100%;
  overflow:hidden;
}
#selectionModal .cb-hold-page-nav {
  flex:0 0 auto;
  margin-top:8px;
  padding-top:8px;
  background:#fff;
  position:relative;
  z-index:2;
}
#selectionModal .cb-hold-nav-button,
#selectionModal .cb-hold-payment-nav {
  min-height:41px;
  padding:8px 12px;
  border-radius:10px;
}
#selectionModal .cb-hold-page-1 .cb-hold-request-availability {
  margin:8px 0 7px;
  padding:8px 10px;
  font-size:11px;
}
#selectionModal .cb-hold-page-1 .cb-hold-timer {
  margin:7px 0 5px;
  padding:7px 12px;
  min-height:65px;
  border-radius:11px;
}
#selectionModal .cb-hold-page-1 .cb-hold-timer strong {font-size:29px;line-height:1.12}
#selectionModal .cb-hold-page-1 .cb-hold-renewal {gap:3px}
#selectionModal .cb-hold-page-1 .cb-hold-renewal button {padding:6px 10px;font-size:12px}
#selectionModal .cb-hold-page-1 .cb-hold-renewal span {font-size:11px}
#selectionModal .cb-hold-page-1 .cb-hold-info {
  font-size:11px;
  line-height:1.3;
  margin:4px 0 5px;
}
#selectionModal .cb-hold-page-1 .cb-hold-group-details {
  margin:5px 0 0;
  padding:8px 10px;
  border-radius:9px;
}
#selectionModal .cb-hold-group-details h4 {margin-bottom:3px;font-size:12px}
#selectionModal .cb-hold-group-details p {margin-bottom:3px;font-size:11px;line-height:1.28}
#selectionModal .cb-hold-group-segments {gap:4px}
#selectionModal .cb-hold-group-segment {padding:5px 8px;gap:1px}
#selectionModal .cb-hold-group-segment strong,
#selectionModal .cb-hold-group-segment span {font-size:10.5px;line-height:1.28}
#selectionModal .cb-hold-page-1 .cb-license-terms {
  margin:8px 0 0;
  padding:10px 13px;
  border-radius:12px;
}
#selectionModal .cb-license-heading {gap:8px;margin-bottom:6px;align-items:center}
#selectionModal .cb-license-heading > span {width:21px;height:21px;flex-basis:21px;font-size:12px}
#selectionModal .cb-license-heading h3 {font-size:14px;line-height:1.3}
#selectionModal .cb-license-paragraphs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
  padding:3px 0 9px;
}
#selectionModal .cb-license-paragraphs p {
  font-size:11px;
  line-height:1.43;
  color:#36545b;
}
#selectionModal .cb-license-consent {
  padding:8px 10px;
  align-items:center;
  font-size:11.5px;
  line-height:1.33;
}
#selectionModal .cb-license-consent input {width:17px;height:17px;flex-basis:17px}
#selectionModal .cb-license-status {font-size:10px;margin:4px 0 0}
#selectionModal .cb-hold-page-1 .cb-hold-message {margin:4px 0 0;padding:6px 9px}

/* The other two hold screens also use fixed navigation rather than page scroll. */
#selectionModal .cb-hold-page-2 .cb-hold-step h3,
#selectionModal .cb-hold-page-3 .cb-hold-step h3 {font-size:18px;margin:0 0 3px}
#selectionModal .cb-hold-page-2 .cb-booking-options {margin-top:7px;gap:8px}
#selectionModal .cb-hold-page-2 .cb-option-section {padding:8px 9px}
#selectionModal .cb-hold-page-2 .cb-option-item {padding:7px 8px}
#selectionModal .cb-hold-page-3 .cb-hold-fields {gap:7px 10px}
#selectionModal .cb-hold-page-3 .cb-hold-fields label {margin:2px 0}
#selectionModal .cb-hold-page-3 .cb-hold-fields input,
#selectionModal .cb-hold-page-3 .cb-hold-fields select,
#selectionModal .cb-hold-page-3 .cb-country-toggle {height:38px}
#selectionModal .cb-hold-page-3 .cb-page3-optional {margin-top:8px;padding-top:7px}

@media (max-height:760px) and (min-width:701px) {
  #selectionModal .cb-hold-page {padding:10px 16px 9px}
  #selectionModal .cb-hold-page-1 .cb-hold-timer {min-height:54px;padding:6px 10px;margin:5px 0 4px}
  #selectionModal .cb-hold-page-1 .cb-hold-timer strong {font-size:25px}
  #selectionModal .cb-license-paragraphs p {font-size:10.5px;line-height:1.38}
  #selectionModal .cb-hold-page-1 .cb-license-terms {padding:8px 10px;margin-top:5px}
  #selectionModal .cb-hold-page-nav {margin-top:5px;padding-top:5px}
  #selectionModal .cb-hold-nav-button {min-height:38px}
}
@media (max-width:700px) {
  #selectionModal.cb-hold-modal {
    --hold-page-height:calc(100dvh - 10px);
    width:calc(100vw - 10px);
  }
  #selectionModal .cb-hold-page {padding:10px}
  #selectionModal .cb-license-paragraphs {grid-template-columns:1fr;gap:6px}
  #selectionModal .cb-hold-page-nav,
  #selectionModal .cb-hold-page-nav-first {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #selectionModal .cb-hold-page-nav-payment {grid-template-columns:repeat(3,minmax(0,1fr))}
  #selectionModal .cb-hold-page-1 .cb-hold-header {flex-direction:row;gap:6px}
  #selectionModal .cb-hold-page-1 .cb-hold-timer {flex-direction:row;align-items:center;gap:6px}
  #selectionModal .cb-hold-page-1 .cb-hold-renewal {align-items:flex-end;text-align:right}
  #selectionModal .cb-hold-nav-button {font-size:12px}
}

/* Place the whole desktop first step, reassurance bar and five steps together. */
@media (min-width:1101px) and (min-height:650px) {
  body:not(.cb-results-mode) {height:100dvh;overflow:hidden}
  body:not(.cb-results-mode) > main {
    height:calc(100dvh - 27px);
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  body:not(.cb-results-mode) > main > .cb-hero {
    flex:0 0 auto;
    min-height:0!important;
    height:auto!important;
    padding-top:104px!important;
    padding-bottom:0!important;
    align-content:start!important;
    column-gap:46px!important;
    row-gap:6px!important;
    overflow:visible;
  }
  body:not(.cb-results-mode) .cb-hero:after {display:none}
  body:not(.cb-results-mode) .cb-search-card {margin-top:-88px!important}
  body:not(.cb-results-mode) .cb-hero > .cb-trust-strip {
    grid-column:1/-1;
    align-self:start;
    margin:8px auto 0!important;
    padding:7px 20px!important;
    transform:none!important;
    border-radius:15px;
  }
  body:not(.cb-results-mode) .cb-trust-strip div {min-height:42px!important;padding-top:0!important;padding-bottom:0!important}
  body:not(.cb-results-mode) .cb-trust-strip div::before {width:35px;height:35px;font-size:19px}
  body:not(.cb-results-mode) > main > .cb-how-it-works {
    width:min(1390px,100%);
    max-width:1390px;
    margin:0 auto;
    padding:5px clamp(20px,3vw,42px) 0!important;
    flex:0 0 auto;
  }
  body:not(.cb-results-mode) .cb-how-it-works .cb-section-heading {margin-bottom:10px}
  body:not(.cb-results-mode) .cb-how-it-works .cb-kicker {margin-bottom:2px;font-size:9px}
  body:not(.cb-results-mode) .cb-how-it-works h2 {font-size:clamp(20px,2vw,28px);line-height:1.15}
  body:not(.cb-results-mode) .cb-how-it-works ol {gap:10px}
  body:not(.cb-results-mode) .cb-how-it-works li {
    min-height:84px;
    padding:9px 12px;
    gap:1px;
    border-radius:13px;
  }
  body:not(.cb-results-mode) .cb-how-it-works li>span {
    width:25px;height:25px;margin-bottom:3px;font-size:12px;
  }
  body:not(.cb-results-mode) .cb-how-it-works li strong {font-size:12px}
  body:not(.cb-results-mode) .cb-how-it-works li small {font-size:10px}
  body:not(.cb-results-mode) .cb-footer {
    height:27px!important;
    min-height:27px!important;
    padding:3px 15px!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:14px;
    overflow:hidden;
  }
  body:not(.cb-results-mode) .cb-footer > .cb-brand-footer {display:none!important}
  body:not(.cb-results-mode) .cb-footer > div:not(:first-child) {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:9px!important;
    font-size:10px;
  }
  body:not(.cb-results-mode) .cb-footer > div > strong {display:none}
  body:not(.cb-results-mode) .cb-footer > p {
    border:0;
    padding:0;
    margin:0;
    grid-column:auto;
    white-space:nowrap;
    font-size:9px;
  }
}
@media (min-width:1101px) and (max-height:760px) {
  body:not(.cb-results-mode) > main > .cb-hero {padding-top:93px!important;row-gap:0!important}
  body:not(.cb-results-mode) .cb-search-card {padding:11px 17px!important}
  body:not(.cb-results-mode) .cb-search-card .cb-form-grid {row-gap:4px!important}
  body:not(.cb-results-mode) .cb-search-card .cb-field input,
  body:not(.cb-results-mode) .cb-search-card .cb-field select {height:36px!important}
  body:not(.cb-results-mode) .cb-search-card .cb-time-entry {height:36px!important}
  body:not(.cb-results-mode) .cb-hero > .cb-trust-strip {margin:5px auto 0!important;padding:5px 14px!important}
  body:not(.cb-results-mode) .cb-how-it-works .cb-section-heading {margin-bottom:5px}
  body:not(.cb-results-mode) .cb-how-it-works li {min-height:68px;padding:6px 10px}
  body:not(.cb-results-mode) .cb-how-it-works li>span {width:21px;height:21px;margin:0 0 1px}
}

/* The branded background's generic >header rule used position:relative,
   creating an invisible 102px row ABOVE the search. Put the header back as a
   transparent overlay so search, trust and steps share the actual viewport. */
@media (min-width:1101px) and (min-height:650px) {
  body:not(.cb-results-mode) > header.cb-header {
    position:absolute!important;
    top:0;
    left:0;
    right:0;
    height:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    z-index:45;
    background:transparent!important;
  }
  body:not(.cb-results-mode) > header.cb-header .cb-header-left {
    position:absolute;
    top:14px;
    left:clamp(24px,4vw,64px);
  }
  body:not(.cb-results-mode) > header.cb-header .cb-header-actions {
    position:absolute!important;
    top:72px!important;
    right:22px!important;
  }
}
@media (min-width:1200px) and (max-height:700px) {
  /* Short desktops: reduce the unused space between the form and trust bar. */
  body:not(.cb-results-mode) .cb-hero > .cb-trust-strip {
    margin-top:-26px!important;
  }
}

/* The generic modal form styles were stacking the checkbox above its text. */
#selectionModal .cb-license-consent {
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:9px!important;
  text-align:left!important;
  margin:6px 0 0!important;
}
#selectionModal .cb-license-consent input {margin:0!important}
#selectionModal .cb-license-paragraphs p {font-size:11.4px}
@media (min-width:701px) {
  #selectionModal.cb-hold-modal {--hold-page-height:min(650px, calc(100dvh - 24px))}
  #selectionModal.cb-hold-modal[data-active-hold-page="2"],
  #selectionModal.cb-hold-modal[data-active-hold-page="3"] {
    --hold-page-height:min(720px, calc(100dvh - 24px));
  }
}

/* Extra options become 3 keyboard-accessible Previous/Next pages only when
   the set of choices would otherwise force a miniature font or scrollbar. */
#selectionModal .cb-options-chapter-label {
  display:block;
  margin:1px 0 8px;
  color:#13736c;
  font-size:12px;
  font-weight:850;
  letter-spacing:.02em;
}
#selectionModal .cb-hold-page-2[data-options-split="1"] .cb-booking-options {
  display:block;
}
#selectionModal .cb-hold-page-2[data-options-split="1"] .cb-booking-options > * {
  margin-top:7px;
}
#selectionModal .cb-hold-page-2[data-options-chapter="extras"] .cb-booking-options > .cb-option-section:nth-child(2),
#selectionModal .cb-hold-page-2[data-options-chapter="extras"] .cb-booking-options > .cb-option-section:nth-child(3),
#selectionModal .cb-hold-page-2[data-options-chapter="extras"] .cb-booking-options > .cb-option-total,
#selectionModal .cb-hold-page-2[data-options-chapter="services"] .cb-booking-options > .cb-option-section:nth-child(1),
#selectionModal .cb-hold-page-2[data-options-chapter="services"] .cb-booking-options > .cb-option-section:nth-child(3),
#selectionModal .cb-hold-page-2[data-options-chapter="services"] .cb-booking-options > .cb-option-total,
#selectionModal .cb-hold-page-2[data-options-chapter="insurances"] .cb-booking-options > .cb-option-section:nth-child(1),
#selectionModal .cb-hold-page-2[data-options-chapter="insurances"] .cb-booking-options > .cb-option-section:nth-child(2) {
  display:none!important;
}

/* When the options are paged, use the available width rather than shrinking
   five items into a single tall column. All options remain fully selectable. */
@media (min-width:860px) {
  #selectionModal .cb-hold-page-2[data-options-split="1"] .cb-option-list {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px!important;
    align-items:start;
  }
  #selectionModal .cb-hold-page-2[data-options-split="1"] .cb-option-item {
    min-height:0;
    padding:6px 8px;
  }
}