/*
 * CORALLI RENTALS – User-approved design layout 2026-10-11.
 * Only homepage visual layout. Real form, availability and payment flows untouched.
 * Layout source: Coralli_Layout_Proposed.json (1440x740):
 *  search 604,18,744,396; heading 400,428,648,42;
 *  steps 204,504,1040,104; trust 172,636,1100,62.
 * IMPORTANT: Trust strip is LAST as explicitly positioned in the approved JSON.
 */
@media (min-width:1101px) and (min-height:650px) {
  body.cb-json-layout-active:not(.cb-results-mode) {
    height:100dvh!important;
    overflow:hidden!important;
  }

  body.cb-json-layout-active:not(.cb-results-mode) > main {
    position:relative!important;
    display:block!important;
    height:calc(100dvh - 27px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 27px)!important;
    width:100%!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }

  /* No change to the actual form's markup or internal field styling.
     display:contents lets all four blocks share the same coordinate system. */
  body.cb-json-layout-active:not(.cb-results-mode) > main > .cb-hero,
  body.cb-json-layout-active:not(.cb-results-mode) > main > .cb-how-it-works {
    display:contents!important;
    padding:0!important;
    margin:0!important;
  }

  body.cb-json-layout-active:not(.cb-results-mode) .cb-hero-copy {
    position:absolute!important;
    z-index:2;
    left:var(--cl-intro-left,64px)!important;
    top:var(--cl-intro-top,95px)!important;
    width:var(--cl-intro-width,520px)!important;
    max-width:none!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
  }

  /* Protect the introductory text from the unchanged brand logo on
     shorter desktops; do not hide or truncate the business description. */
  @media (max-width:1450px) {
    body.cb-json-layout-active:not(.cb-results-mode) .cb-hero h1 {
      font-size:clamp(44px,4vw,58px)!important;
      line-height:1!important;
      margin-bottom:14px!important;
    }
    body.cb-json-layout-active:not(.cb-results-mode) .cb-hero-copy > p:last-child {
      font-size:16px!important;
      line-height:1.4!important;
    }
  }

  /* Search form: underlying box is the SAME 816px-wide production form as
     screenshot 174; its visual transform matches the 744x396 JSON rectangle.
     Uses no duplicate, mock, or rebuilt inputs. */
  body.cb-json-layout-active:not(.cb-results-mode) .cb-search-card {
    position:absolute!important;
    z-index:5!important;
    left:var(--cl-search-x)!important;
    top:var(--cl-search-y)!important;
    width:816px!important;
    min-width:816px!important;
    max-width:none!important;
    height:445px!important;
    min-height:445px!important;
    max-height:none!important;
    margin:0!important;
    padding:16px 22px!important;
    transform:scale(var(--cl-search-scale-x),var(--cl-search-scale-y))!important;
    transform-origin:top left!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-search-card .cb-form-grid {
    grid-template-columns:minmax(205px,1.4fr) minmax(150px,1fr) 100px!important;
    gap:12px!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-search-card .cb-field input,
  body.cb-json-layout-active:not(.cb-results-mode) .cb-search-card .cb-field select {
    height:42px!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-search-card .cb-time-entry {
    height:42px!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-search-card .cb-form-grid {
    row-gap:10px!important;
  }

  /* Text remains the original title, with the unwanted ONLINE BOOKING tag removed. */
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works .cb-section-heading {
    position:absolute!important;
    z-index:3!important;
    left:var(--cl-heading-x)!important;
    top:var(--cl-heading-y)!important;
    width:648px!important;
    height:42px!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    transform:scale(var(--cl-scale))!important;
    transform-origin:top left!important;
    background:transparent!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works .cb-section-heading > .cb-kicker {
    display:none!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works .cb-section-heading h2 {
    margin:0!important;
    font-size:28px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works ol {
    position:absolute!important;
    z-index:4!important;
    left:var(--cl-steps-x)!important;
    top:var(--cl-steps-y)!important;
    width:1040px!important;
    min-width:1040px!important;
    max-width:none!important;
    height:104px!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:9px!important;
    transform:scale(var(--cl-scale))!important;
    transform-origin:top left!important;
    background:transparent!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works ol li {
    height:104px!important;
    min-height:104px!important;
    max-height:104px!important;
    padding:11px 13px!important;
    gap:3px!important;
    transform:none!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works ol li>span {
    width:25px!important;height:25px!important;margin-bottom:4px!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works ol li strong {font-size:12px!important}
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works ol li small {font-size:10px!important}

  /* The trust strip is below the steps, EXACTLY like the approved JSON. */
  body.cb-json-layout-active:not(.cb-results-mode) .cb-hero > .cb-trust-strip {
    position:absolute!important;
    z-index:5!important;
    left:var(--cl-trust-x)!important;
    top:var(--cl-trust-y)!important;
    width:1100px!important;
    max-width:none!important;
    min-width:1100px!important;
    height:62px!important;
    min-height:62px!important;
    padding:7px 17px!important;
    margin:0!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    align-items:center!important;
    transform:scale(var(--cl-scale))!important;
    transform-origin:top left!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-trust-strip div {
    position:relative!important;
    padding:0 13px 0 62px!important;
    min-height:44px!important;
    gap:3px!important;
    justify-content:center!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-trust-strip div::before {
    left:14px!important;
    top:50%!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-trust-strip div::before {
    width:35px!important;height:35px!important;font-size:20px!important;
  }

  /* Don't change the existing logo, language selector or public footer. */
  body.cb-json-layout-active:not(.cb-results-mode) > footer.cb-footer {
    position:relative!important;
    z-index:6!important;
    height:27px!important;
    min-height:27px!important;
  }
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works,
  body.cb-json-layout-active:not(.cb-results-mode) .cb-how-it-works ol {
    background-image:none!important;
  }
}