/* ==========================================================================
   Largo Leisure site chrome - header & footer restyled to match the marketing
   site at https://largoleisure.co.uk (Next.js / Tailwind).

   Values below were taken from the live site's computed styles (Aug 2026):
     primary teal      #136c75   (footer background, nav link colour)
     secondary         #e9f1f2
     tertiary          #004047
     main CTA          #c84b32   (terracotta button, white text)
     secondary CTA     #fec73d   (yellow button, black text)
     body font         Lato      headings font Prata

   Everything here is namespaced `ll-` so none of the legacy .app-header /
   .app-footer rules in css/style.bundle.css can bleed through. Loaded after
   the bundle in Main.master.
   ========================================================================== */

:root {
    --ll-primary: #136c75;
    --ll-secondary: #e9f1f2;
    --ll-primary-tint: #d5e1e3; /* the marketing site's "bg-primary-tint" card fill */
    --ll-tertiary: #004047;
    --ll-cta-main: #c84b32;
    --ll-cta-second: #fec73d;
    --ll-body-text: #4b4745;
    --ll-star: #f0b100;
    --ll-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
    --ll-font-head: "Prata", Georgia, serif;
}

/* --------------------------------------------------------------------------
   Base text colour

   style.bundle.css sets `body { color: #5d8197 }` - the retired blue-grey -
   so every element without an explicit colour inherited it. That is what was
   still tinting the copy in the More Details and Calendar popups.

   Deliberately NOT teal: largoleisure.co.uk uses a warm dark grey for body
   copy and reserves teal for headings. A page of teal paragraphs would be
   hard to read. Headings are teal via their own rules.
   -------------------------------------------------------------------------- */

body {
    color: var(--ll-body-text);
}

/* --------------------------------------------------------------------------
   Buttons (marketing-site pill CTAs)
   -------------------------------------------------------------------------- */

.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--ll-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    padding: .5rem .75rem;
    border: 2px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

    .ll-btn:hover,
    .ll-btn:focus {
        background-color: #fff;
        text-decoration: none;
    }

.ll-btn--main {
    background-color: var(--ll-cta-main);
    border-color: var(--ll-cta-main);
    color: #fff;
}

    .ll-btn--main:hover,
    .ll-btn--main:focus {
        color: var(--ll-cta-main);
    }

.ll-btn--second {
    background-color: var(--ll-cta-second);
    border-color: var(--ll-cta-second);
    color: #000;
}

    .ll-btn--second:hover,
    .ll-btn--second:focus {
        color: #000;
    }

/* White outline button used inside the teal footer */
.ll-btn--white {
    background-color: #fff;
    border-color: #fff;
    color: var(--ll-primary);
}

    .ll-btn--white:hover,
    .ll-btn--white:focus {
        background-color: transparent;
        color: #fff;
    }

/* --------------------------------------------------------------------------
   Teal utility bar above the nav

   Deliberately NOT sticky - on the marketing site it scrolls away and only the
   white nav pins itself.
   -------------------------------------------------------------------------- */

.ll-topbar {
    background-color: var(--ll-primary);
    /* Symmetric, so the phone sits centred in the band. This was `1rem 1rem 0`
       when the Holidays / Ownership tabs lived here - they were 48px tall with
       rounded top corners and had to sit flush against the white bar below, so
       the bar carried no bottom padding. The tabs went on 2026-08-27 and that
       asymmetry just left the phone off-centre. */
    padding: .75rem 1rem;
    font-family: var(--ll-font-body);
}

.ll-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ll-topbar__promo {
    display: none; /* hidden on small screens, as on the marketing site */
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
}

    .ll-topbar__promo:hover,
    .ll-topbar__promo:focus {
        color: #fff;
        text-decoration: underline;
    }

.ll-topbar__tabs {
    display: flex;
    gap: 1rem;
}

.ll-topbar__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 .75rem;
    border-radius: 12px 12px 0 0;
    background-color: var(--ll-tertiary);
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

    .ll-topbar__tab:hover,
    .ll-topbar__tab:focus {
        color: #fff;
        text-decoration: none;
    }

/* The tab for the section you are already in - on the booking engine that is Holidays */
.ll-topbar__tab--active {
    background-color: #fff;
    color: var(--ll-primary);
}

    .ll-topbar__tab--active:hover,
    .ll-topbar__tab--active:focus {
        color: var(--ll-primary);
    }

.ll-topbar__phone {
    /* The promo line and the Holidays/Ownership tabs were removed 2026-08-27,
       so the phone is the only child left - the auto margin keeps it hard
       right rather than falling to the left of the bar. */
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

    .ll-topbar__phone:hover,
    .ll-topbar__phone:focus {
        color: #fff;
        text-decoration: underline;
    }

    .ll-topbar__phone svg {
        flex: 0 0 auto;
        width: 1rem;
        height: 1rem;
        fill: currentColor;
    }

.ll-topbar__phone-full {
    display: none;
}

@media (min-width: 768px) {
    .ll-topbar {
        padding: .75rem 2rem;
    }

    .ll-topbar__promo {
        display: block;
    }
}

@media (min-width: 992px) {
    .ll-topbar__inner {
        gap: 4rem;
    }

    .ll-topbar__tabs {
        margin-left: auto;
    }

    .ll-topbar__tab {
        padding: 0 2rem;
    }

    .ll-topbar__phone-short {
        display: none;
    }

    .ll-topbar__phone-full {
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.ll-header__nav {
    position: relative; /* anchors the mobile drop-down panel */
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.ll-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
}

/* No `margin-right: auto` here below the desktop breakpoint: in a wrapping flex
   container the auto margin eats the whole line and pushes the hamburger onto a
   row of its own. Whatever should sit hard right gets `margin-left: auto`
   instead, and the logo only takes the auto margin at 992px+ where the row no
   longer wraps. */
.ll-header__logo {
    display: block;
    flex: 0 0 auto;
}

    .ll-header__logo img {
        display: block;
        width: 104px;
        height: auto;
    }

.ll-header__menu,
.ll-header__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ll-header__menu {
    gap: 1.5rem;
}

.ll-header__cta {
    gap: 5px;
}

.ll-header__menu a {
    font-family: var(--ll-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ll-primary);
    text-decoration: none;
    transition: color .3s ease-in-out;
}

    .ll-header__menu a:hover,
    .ll-header__menu a:focus {
        color: var(--ll-tertiary);
        text-decoration: underline;
    }

/* --- Below the desktop breakpoint: links live behind the hamburger ---------
   The bar itself stays as logo + toggle (+ the booking buttons once there is
   room), and the three links drop down as a panel under the nav. It is
   deliberately not sticky here - a phone screen has little enough room during
   a booking without the chrome pinning itself to the top. */

.ll-header__toggle {
    order: 1;
    margin-left: auto; /* hard right of the logo row */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: var(--ll-primary);
    cursor: pointer;
}

    .ll-header__toggle svg {
        display: block;
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

/* The drop-down panel. Hidden until the toggle adds .is-open. */
.ll-header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1029;
    flex-direction: column;
    flex-wrap: nowrap; /* column + wrap + max-height would break into columns */
    align-items: stretch;
    gap: 0;
    max-height: 76vh;
    overflow-y: auto;
    padding: .5rem 0;
    background-color: var(--ll-secondary);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

    .ll-header__menu.is-open {
        display: flex;
    }

    .ll-header__menu a {
        display: block;
        padding: .75rem 1rem;
    }

.ll-header__cta {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
}

@media (min-width: 576px) {
    /* Buttons fit on the top row once there is room; toggle moves to the end.
       The auto margin moves onto the buttons so the pair sits hard right. */
    .ll-header__cta {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .ll-header__toggle {
        order: 3;
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    .ll-header__inner {
        padding: 1rem 2rem;
    }

    .ll-header__menu a {
        padding: .75rem 2rem;
    }
}

/* --- Desktop: hamburger gone, links back inline ---------------------------- */
@media (min-width: 992px) {
    .ll-header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* 1rem + 46px logo + 1rem = the ~80px bar height used on largoleisure.co.uk */
    .ll-header__inner {
        flex-wrap: nowrap;
    }

    .ll-header__logo {
        margin-right: auto; /* safe here - the row no longer wraps */
    }

        .ll-header__logo img {
            width: 140px;
        }

    .ll-header__toggle {
        display: none;
    }

    .ll-header__menu,
    .ll-header__menu.is-open {
        display: flex;
        position: static;
        order: 1;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        max-height: none;
        overflow: visible;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
    }

        .ll-header__menu a {
            padding: 0;
        }

    .ll-header__cta {
        order: 2;
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ll-footer {
    background-color: var(--ll-primary);
    color: #fff;
    font-family: var(--ll-font-body);
    padding: 2rem 1rem 0;
}

    .ll-footer a {
        color: #fff;
        text-decoration: none;
        transition: color .3s ease-in-out;
    }

        .ll-footer a:hover,
        .ll-footer a:focus {
            color: #fff;
            text-decoration: underline;
        }

/* The `.ll-footer a` rules above are more specific than the plain `.ll-btn--*`
   ones, so a button inside the footer needs its colours restating here - without
   this the white button ends up with white text on a white background. */
.ll-footer .ll-btn--white {
    color: var(--ll-primary);
    text-decoration: none;
}

    .ll-footer .ll-btn--white:hover,
    .ll-footer .ll-btn--white:focus {
        background-color: transparent;
        color: #fff;
        text-decoration: none;
    }

.ll-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ll-footer__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.ll-footer__logo img {
    display: block;
    width: 140px;
    height: auto;
}

.ll-footer__title {
    font-family: var(--ll-font-body);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.ll-footer__subtitle {
    font-family: var(--ll-font-body);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.ll-footer__links,
.ll-footer__contact {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-style: normal;
}

    .ll-footer__links a:hover,
    .ll-footer__links a:focus,
    .ll-footer__contact a:hover,
    .ll-footer__contact a:focus {
        text-decoration: underline;
    }

.ll-footer__awards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ll-footer__awards img {
        display: block;
        height: 60px;
        width: auto;
    }

/* "Follow us" + the social icons, bottom-right of the reviews column */
.ll-footer__follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: #fff;
}

.ll-footer__follow-label {
    font-size: 1rem;
}

.ll-footer__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ll-footer__social li {
        background-color: #fff;
        border-radius: 9999px;
        padding: .5rem;
        line-height: 0;
    }

    .ll-footer__social a {
        display: block;
        line-height: 0;
    }

    .ll-footer__social svg {
        display: block;
        height: 1rem;
        width: auto;
        fill: var(--ll-primary);
    }

/* --------------------------------------------------------------------------
   Guest reviews card

   A plain show/hide rotator driven by the small script at the foot of
   Main.master - no carousel library. Without JS the first review just stays
   visible and the arrows do nothing.
   -------------------------------------------------------------------------- */

.ll-review {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 1rem;
    color: var(--ll-body-text);
}

.ll-review__item {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

    .ll-review__item.is-active {
        display: flex;
    }

.ll-review__name {
    font-family: var(--ll-font-head);
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 400;
    color: var(--ll-primary);
    margin: 0;
}

.ll-review__stayed {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.ll-review__stars {
    color: var(--ll-star);
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: .125rem;
}

.ll-review__body {
    max-height: 100px;
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.5;
}

    .ll-review__body p {
        margin: 0 0 .5rem;
    }

        .ll-review__body p:last-child {
            margin-bottom: 0;
        }

.ll-review__nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.ll-review__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: .5rem;
    background-color: transparent;
    border: 2px solid var(--ll-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
}

    .ll-review__btn svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: var(--ll-primary);
        transition: fill .3s ease-in-out;
    }

    .ll-review__btn:hover,
    .ll-review__btn:focus {
        background-color: var(--ll-primary);
    }

        .ll-review__btn:hover svg,
        .ll-review__btn:focus svg {
            fill: #fff;
        }

.ll-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-top: 1px solid #fff;
}

.ll-footer__legal {
    font-size: .75rem;
    line-height: 1rem;
    font-style: normal;
    max-width: 555px;
    margin: 0;
}

.ll-footer__credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .75rem;
    line-height: 1rem;
}

/* --------------------------------------------------------------------------
   Availability date cards on a phone

   The three cards cannot sit side by side on a narrow screen. Below roughly
   310px of container - which is a 320px-viewport phone once `.last-col` takes
   its 15px of padding either side - they wrap 2 + 1 and the third stretches to
   double width. Even at 375px they are only ~107px wide with a 91px button
   inside. So they stack on phones instead.

   That class combination appears only in AvailabilityRange.aspx and
   AvailabilityLastMinute.aspx, which is what makes it safe to target. The
   margins need `!important` because Bootstrap's ml-1/mr-1 utilities carry it.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .booking-form-lg .row > .col.pl-0.pr-0.ml-1.mr-1 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: .5rem !important;
    }

    /* Both the button and this link are inline-block, so on a full-width card
       they sat side by side on one line. Give the link its own row. */
    .booking-form-lg .navi-col .datesavailable {
        display: block;
    }

    /* Some breathing room now the card is wide */
    .booking-form-lg .navi-col {
        padding: .5rem 0 1rem;
    }

    /* Stacked, there is nothing left to line the buttons up with, so the blank
       row that reserves the price height is just a gap. (It still does its job
       from 576px up, where the cards sit side by side.) */
    .booking-form-lg .navi-col .now--empty {
        display: none;
    }
}

@media (min-width: 768px) {
    /* Same 2rem inset as the top bar and nav, so all three line up */
    .ll-footer {
        padding: 2rem 2rem 0;
    }

    .ll-footer__grid {
        /* Two content-sized blocks since 2026-08-27: the brand block (logo +
           award badges) and Contact. Quick Links, the newsletter, the reviews,
           the social icons and the blurb were all removed at the client's
           request. Sized to content and pushed apart rather than given fr
           tracks - neither block is wide any more, so equal tracks would leave
           a large dead gap in the middle with Contact stranded mid-footer. */
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .ll-footer__col {
        align-items: flex-start;
        text-align: left;
    }

    /* Reviews sit on their own full-width row until there is space for them alongside */
    .ll-footer__col--wide {
        grid-column: 1 / -1;
    }

    .ll-footer__awards {
        justify-content: flex-start;
    }
}

@media (min-width: 992px) {
    .ll-footer {
        padding: 5rem 2rem 0;
    }

    .ll-footer__col--wide {
        grid-column: span 2;
    }

    .ll-footer__follow {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 2rem;
    }

    .ll-footer__logo img {
        width: 180px;
    }

    .ll-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
        text-align: left;
    }

    .ll-footer__credit {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Booking-flow buttons

   The flow's own buttons live in css/style.bundle.css and were square, Prata,
   blue-grey #5d8197, wrapped in a 4px outline halo. These rules repoint them
   at the new palette from this file, which loads after the bundle, so the
   bundle itself is left alone.

   The flow layers its classes, and these rules follow the same convention:

       btn btn-pr                 primary        teal
       btn btn-pr btn-pr-light    secondary/Back white, teal border
       btn btn-pr btn-pay         takes payment  yellow   (btn-pay is new)
       btn btn-str                outline        teal border
       btn btn-str btn-str_alt    emphasised     solid teal

   Geometry (padding, margin, font-size) is deliberately left as the bundle
   had it - only colour, radius, typeface and the outline halo change - so
   this does not reflow any of the booking pages.

   WATCH OUT: a handful of pages carry their own <style> block redefining
   .btn-pr or .btn-continue. Those load after this file and win, so they were
   updated in place too - AccommodationUpgrade.aspx, SpecialOfferDetails.aspx,
   SpecialOfferPopup.aspx and controls/ManageBooking.ascx.
   ========================================================================== */

/* Primary. Covers .btn-pr and Bootstrap's .btn-primary, which style-xs.css
   had repointed at the old blue-grey. */
.btn-pr,
.btn-primary {
    border-radius: 12px;
    border: 2px solid var(--ll-primary);
    outline: 0;
    background-color: var(--ll-primary);
    color: #fff;
    font-family: var(--ll-font-body);
    font-weight: 400;
    transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
}

    .btn-pr:hover,
    .btn-pr:focus,
    .btn-primary:hover,
    .btn-primary:focus {
        outline: 0;
        background-color: #fff;
        border-color: var(--ll-primary);
        color: var(--ll-primary);
    }

/* Secondary / Back. Always layered on .btn-pr, so it has to out-specify it. */
.btn.btn-pr-light {
    background-color: #fff;
    border-color: var(--ll-primary);
    color: var(--ll-primary);
}

    .btn.btn-pr-light:hover,
    .btn.btn-pr-light:focus {
        background-color: var(--ll-primary);
        border-color: var(--ll-primary);
        color: #fff;
    }

/* Payment. Yellow so the button that actually takes money is unmistakable
   against the teal ones around it. */
.btn.btn-pay {
    background-color: var(--ll-cta-second);
    border-color: var(--ll-cta-second);
    color: #000;
}

    .btn.btn-pay:hover,
    .btn.btn-pay:focus {
        background-color: #fff;
        border-color: var(--ll-cta-second);
        color: #000;
    }

/* Outline variant - night-break pickers, filter toggles */
.btn-str {
    border-radius: 12px;
    border: 2px solid var(--ll-primary);
    outline: 0;
    background-color: transparent;
    color: var(--ll-primary);
    font-family: var(--ll-font-body);
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

    .btn-str:hover,
    .btn-str:focus {
        outline: 0;
        background-color: var(--ll-primary);
        color: #fff;
    }

/* Emphasised outline - was gold #cfab66, a colour with no home in the new
   palette. Now the filled teal, keeping its "louder than .btn-str" role. */
.btn-str.btn-str_alt {
    /* The bundle's .btn-str.btn-str_alt is the same specificity as this rule and
       sets border-width:1px plus a 4px gold outline halo. Both have to be reset
       explicitly here or the gold ring survives. */
    border-width: 2px;
    outline: 0;
    background-color: var(--ll-primary);
    border-color: var(--ll-primary);
    color: #fff;
}

    .btn-str.btn-str_alt:hover,
    .btn-str.btn-str_alt:focus {
        background-color: #fff;
        color: var(--ll-primary);
    }

/* Extras "Show advanced / simple options" toggle - was green #88ad67, which
   style-md.css sets with !important, so this has to answer in kind. */
.btn.btngreen {
    border-radius: 12px;
    border: 2px solid var(--ll-primary);
    outline: 0;
    background-color: #fff !important;
    color: var(--ll-primary) !important;
    font-family: var(--ll-font-body);
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

    .btn.btngreen:hover,
    .btn.btngreen:focus {
        background-color: var(--ll-primary) !important;
        color: #fff !important;
    }

/* Sold out. The availability pages render this as a *disabled* LinkButton
   carrying "btn btn-pr outstock", so it picked up the teal fill from .btn-pr
   and then Bootstrap knocked the whole element back to opacity .65, leaving
   pale text on a pale fill. Give it a deliberate muted treatment at full
   opacity instead.

   SPECIFICITY: the bundle styles the button on the highlighted card as
   `.booking-form-lg .navi-col.nav-col-colored .btn-pr` (0-4-0), so a sold-out
   button sitting on that card needs more weight than that - hence the long
   selector below. The short one covers sold-out buttons anywhere else. */
.booking-form-lg .navi-col .btn.btn-pr.outstock,
.booking-form-lg .navi-col .btn.btn-pr.outstock:hover,
.booking-form-lg .navi-col .btn.btn-pr.outstock:focus,
.btn.btn-pr.outstock,
.btn.btn-pr.outstock:hover,
.btn.btn-pr.outstock:focus {
    opacity: 1;
    /* A shade deeper than the card wash behind it so it still reads as a
       control, with a muted grey ring rather than a teal one - "Book now"
       wears the 2px teal ring, and that is what tells the two apart. */
    background-color: #dde8e9;
    border-color: #c3d4d6;
    color: #3f4c4e;
    cursor: not-allowed;
}

/* ==========================================================================
   Availability results cards

   Brought onto the marketing site's card language. Reference values were read
   off largoleisure.co.uk's accommodation cards:
       card tint    #d5e1e3  ("bg-primary-tint")
       card radius  8-12px
       CTA          white fill, 2px teal border, teal text, 12px radius
       park pill    teal fill, white underlined text, 16px radius, pin icon
       headings     Prata, teal

   Every rule the bundle sets for these cards is nested under .booking-form-lg
   (0-3-0 or 0-4-0), so these have to match that weight - a plain .navi-col
   selector silently loses. This file loads last, so equal weight wins.
   ========================================================================== */

/* Cards themselves - rounded, and the "featured" one takes the pale tint
   instead of the old gold #D5B060. */
.booking-form-lg .navi-col {
    border-radius: 12px;
    overflow: hidden;
    /* was rgb(93 129 151/0.1) - a wash of the retired blue-grey */
    background-color: var(--ll-secondary);
}

/* The featured (centre) card: solid teal, white text. */
.booking-form-lg .navi-col.nav-col-colored {
    background-color: var(--ll-primary);
    color: #fff;
}

/* Plain cards sit on the pale wash, so their text is teal... */
.booking-form-lg .navi-col .now,
.booking-form-lg .navi-col .old,
.booking-form-lg .navi-col .left,
.booking-form-lg .navi-col .datesavailable,
.booking-form-lg .navi-col .navi-col-header,
.booking-form-lg .step-table .form-step-navi .navi-col-header {
    color: var(--ll-primary);
}

/* ...and on the teal card everything goes white. These come after the block
   above so they win at equal weight. */
.booking-form-lg .navi-col.nav-col-colored .now,
.booking-form-lg .navi-col.nav-col-colored .old,
.booking-form-lg .navi-col.nav-col-colored .left,
.booking-form-lg .navi-col.nav-col-colored .datesavailable,
.booking-form-lg .navi-col.nav-col-colored .navi-col-header,
.booking-form-lg .navi-col.nav-col-colored .navi-col-date,
.booking-form-lg .navi-col.nav-col-colored .navi-col-duration,
.booking-form-lg .navi-col.nav-col-colored small {
    color: #fff;
}

/* Card buttons. The bundle gave these height:39px + line-height:39px but only
   zeroed padding-top, leaving padding-bottom - which is what pushed the label
   off-centre. Normal box, normal line-height, symmetric padding. */
.booking-form-lg .navi-col .btn {
    height: auto;
    line-height: 1.5;
    padding: .5rem 1rem;
}

/* "Book now" takes the marketing site's "View & Book" treatment - white fill,
   teal ring, teal label - so it reads as the action and no longer resembles
   the muted sold-out pill. */
.booking-form-lg .navi-col .btn.btn-pr {
    background-color: #fff;
    border-color: var(--ll-primary);
    color: var(--ll-primary);
}

    .booking-form-lg .navi-col .btn.btn-pr:hover,
    .booking-form-lg .navi-col .btn.btn-pr:focus {
        background-color: var(--ll-primary);
        border-color: var(--ll-primary);
        color: #fff;
    }

/* On the teal card that hover would paint the button the same colour as the
   card it sits on, so it goes to the darker teal instead. */
.booking-form-lg .navi-col.nav-col-colored .btn.btn-pr:hover,
.booking-form-lg .navi-col.nav-col-colored .btn.btn-pr:focus {
    background-color: var(--ll-tertiary);
    border-color: #fff;
    color: #fff;
}

/* Park name rendered as the marketing site's pill: teal, white underlined
   label, location pin. The pin is an inline data-URI so it needs no asset. */
.booking-form-lg .step-table .form-step-line .item-title h4 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    border-radius: 16px;
    background-color: var(--ll-primary);
    color: #fff;
    font-family: var(--ll-font-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-decoration: underline;
}

    .booking-form-lg .step-table .form-step-line .item-title h4::before {
        content: "";
        flex: 0 0 auto;
        width: 11px;
        height: 14px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ffffff' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

/* Accommodation name - Prata teal, as on the marketing site's cards */
.booking-form-lg .step-table .form-step-line .item-title h5 a,
.booking-form-lg .step-table .form-step-line .item-content {
    color: var(--ll-primary);
}

/* Retire the remaining gold. .item-meta is the SLEEPS / PET FRIENDLY row and
   its icons; .daystylehover is the availability calendar's hovered day. */
.booking-form-lg .step-table .form-step-line .item-meta-list .item-meta,
.item-meta,
.item-meta svg,
.item-meta .icon svg {
    color: var(--ll-primary);
    fill: currentColor;
}

/* Hovered calendar day. The darker teal, so it reads as feedback against the
   plain teal of an available day. (The calendar popup has its own copy of this
   in css/AvailabilityCalendar.css, which loads after this file.) */
.daystylehover {
    background-color: var(--ll-tertiary);
    color: #fff;
}

/* Rounded corners on the accommodation photos and the promo banner, matching
   the marketing site. .item-img already sets overflow:hidden, so this clips
   the carousel inside it. */
.item-img {
    border-radius: 12px;
}

    .item-img .carousel,
    .item-img .carousel-inner,
    .item-img .carousel-item,
    .item-img img {
        border-radius: 12px;
    }

.ll-banner img {
    border-radius: 12px;
}

/* ==========================================================================
   Step indicator (Search > Availability > ... > Confirmation)

   Selectors mirror style.bundle.css exactly so they win on source order.
   ========================================================================== */

.booking-form-lg .form-steps .form-step .step-num {
    border-radius: 12px; /* was 0 */
    background-color: var(--ll-secondary);
    color: var(--ll-primary);
}

.booking-form-lg .form-steps .form-step.active .step-num {
    background-color: var(--ll-primary);
    color: #fff;
}

/* The bar joining completed steps */
.booking-form-lg .form-steps .form-step.active:after {
    background-color: var(--ll-primary);
}

.booking-form-lg .form-steps .form-step .step-title {
    color: var(--ll-primary);
}

/* "Edit search" link above the results. Was uppercase blue-grey. */
.booking-form-lg .step-table .back-btn {
    color: var(--ll-primary);
    border-bottom-color: var(--ll-primary);
    text-transform: none;
    letter-spacing: normal;
}

/* The results heading ("<Park> — <type> available for N adults arriving...").
   style.bundle.css gives it `line-height: 2.3em`, which reads as generous
   spacing while it stays on one line but leaves huge gaps once it wraps to
   four lines on a phone. Normal leading below the desktop breakpoint, with the
   spacing kept as margin instead. */
@media (max-width: 991.98px) {
    .booking-form-lg .step-table .form-step-title {
        line-height: 1.35;
        margin-bottom: 1.25rem;
    }
}

/* ==========================================================================
   Your Holiday Summary panel (SubMaster.master sidebar)

   Was blue-grey with a 4px outline halo and gold #cfab66 labels.
   ========================================================================== */

.pnlSummary {
    background-color: var(--ll-primary);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 12px;
    outline: 0; /* kills the 4px blue-grey halo */
    overflow: hidden;
}

    /* Field labels - a soft tint rather than the retired gold, so they still
       read as secondary against the white values. */
    .pnlSummary label {
        color: var(--ll-secondary);
        font-weight: 400;
    }

    .pnlSummary span,
    .pnlSummary .total {
        color: #fff;
    }

.texttitle {
    background: var(--ll-primary);
    font-family: var(--ll-font-head);
}

/* ==========================================================================
   Loading overlay

   Styling only. The behaviour is ASP.NET's own asp:UpdateProgress in
   controls/ProgressPanel.ascx, which fires on async (UpdatePanel) postbacks -
   full postbacks show nothing, as has always been the case here.

   Two things make it cover the whole page:

   1. z-index must clear the sticky header (1030), or the header stays lit
      while the rest of the page dims.
   2. `.booking-form-lg` in style.bundle.css sets `position: relative;
      z-index: 2`, which **creates a stacking context**. UpdateProgress renders
      its template inside the page content, i.e. inside that context, so it was
      trapped below the header whatever its own z-index said. Dropping the
      z-index below removes the stacking context; `position: relative` on its
      own does not create one. The 2 was only ever layering it against
      `.hero-block`, which Main.master renders with `d-none`.
   ========================================================================== */

.booking-form-lg {
    z-index: auto;
}

.bgDivPleaseWait {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 1090;
    background-color: rgba(0, 40, 45, .72);
}

.divProg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1091;
    width: 360px;
    max-width: calc(100% - 2rem);
    height: auto;
    padding: 2rem 1.75rem;
    border: 0;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.35);
    text-align: center;
    font-family: var(--ll-font-body);
    font-size: 1rem;
    color: var(--ll-body-text);
}

.ll-progress__logo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 1.5rem;
}

.ll-progress__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--ll-primary);
}

.ll-progress__msg {
    margin: .25rem 0 0;
}

.ll-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1.25rem;
    border: 4px solid var(--ll-secondary);
    border-top-color: var(--ll-primary);
    border-radius: 50%;
    animation: ll-spin .9s linear infinite;
}

@keyframes ll-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ll-spinner { animation-duration: 3s; }
}

/* ==========================================================================
   Remaining gold, and form controls

   Sweep of every #cfab66 still live in the loaded stylesheets. `.stepactive`
   and `.activities-list-block ... .list-item-more` are also gold but no
   markup uses either, so they were left alone.
   ========================================================================== */

/* Section headings on Your Details / Payment / Manage Booking
   ("Your address", "Newsletter", "Special requirements"...) */
.subheader {
    color: var(--ll-primary);
}

/* Selected day in the inline calendars (Extras, Owner booking, the search
   form). The Calendar *popup* has its own copy in AvailabilityCalendar.css -
   keep the two in step. Black on yellow: white on yellow is illegible. */
.selectedday {
    background-color: var(--ll-cta-second);
    color: #000;
}

/* Link style used on the payment pages */
.highslide {
    color: var(--ll-primary);
}

/* --------------------------------------------------------------------------
   Form fields

   The bundle sets `border-radius: 2px` on these in four places, at up to
   0-4-0, so each of its selectors is restated here to win on source order.
   `.form-control` also appears in AvailabilityCalendar.css, which loads after
   this file - that copy was edited directly.
   -------------------------------------------------------------------------- */

.form-control,
.booking-form .form-control,
.booking-form-lg .form .form-group .form-control,
.newsletter-form-block .newsletter-form .form-group .form-control {
    border-radius: 12px;
}

/* Was the retired blue-grey */
.booking-form-lg .form .form-group .form-control {
    color: var(--ll-primary);
}

/* Bootstrap's default focus is a blue glow (#80bdff) which clashes badly with
   the teal. Swap it for the brand colour.

   These have to be restated at the same weights as the border rules above:
   a plain `.form-control:focus` is only 0-2-0 and loses its border-color to
   `.booking-form-lg .form .form-group .form-control` at 0-4-0. */
.form-control:focus,
.booking-form .form-control:focus,
.booking-form-lg .form .form-group .form-control:focus,
.newsletter-form-block .newsletter-form .form-group .form-control:focus {
    border-color: var(--ll-primary);
    box-shadow: 0 0 0 .2rem rgba(19, 108, 117, .25);
}

/* --------------------------------------------------------------------------
   Checkboxes and radios

   asp:CheckBox renders `<input type="checkbox"><label>` with no spacing, so
   the box sat jammed against its label. `accent-color` tints the native
   control teal - no custom markup, and it keeps the browser's own focus and
   keyboard behaviour.
   -------------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: .5rem;
    vertical-align: -.2em;
    accent-color: var(--ll-primary);
    cursor: pointer;
}

    input[type="checkbox"] + label,
    input[type="radio"] + label {
        cursor: pointer;
        vertical-align: middle;
        margin-bottom: 0;
    }

/* Small shared utilities for the standalone pages (Upgrade, Special Offers),
   which have no master page and so carry their own markup. */
.ll-rounded {
    border-radius: 12px;
}

/* A tinted panel matching the availability cards - replaces the inline
   `style="background-color: rgb(93 129 151/0.1)"` the Upgrade page carried. */
.ll-panel {
    background-color: var(--ll-secondary);
    border-radius: 12px;
}

/* Hover must only change colour - never size or typeface.

   style.bundle.css re-declares the whole box on `.btn-pr:hover`, including
   `font-family: Prata,serif`. That swapped the label back to the serif on
   hover and, because Prata is wider than Lato at the same size, made every
   button visibly grow as the pointer crossed it. Pinning the typography here
   fixes both symptoms - they were one cause.

   Each selector below is listed individually so it matches the bundle's own
   weight and wins on source order.

   font-size and line-height are deliberately NOT declared here. They are
   already stable - the card buttons take theirs from
   `.booking-form-lg .navi-col .btn` (0-3-0), which outranks any :hover rule,
   and the flow buttons' hover values match their base. Declaring them here
   (especially as `inherit`) would reintroduce a size jump. */
.btn:hover, .btn:focus,
.btn-pr:hover, .btn-pr:focus,
.btn-pr-light:hover, .btn-pr-light:focus,
.btn-primary:hover, .btn-primary:focus,
.btn-str:hover, .btn-str:focus,
.btn-white:hover, .btn-white:focus,
.booking-form-lg .navi-col .btn:hover,
.booking-form-lg .navi-col .btn:focus {
    font-family: var(--ll-font-body);
}

/* The old 4px outline halo doubled as the focus indicator. It is gone, so
   keyboard focus needs its own ring or the flow becomes hard to navigate. */
.btn-pr:focus-visible,
.btn-primary:focus-visible,
.btn-str:focus-visible,
.btn.btn-pay:focus-visible,
.btn.btngreen:focus-visible {
    outline: 3px solid var(--ll-tertiary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Search page instruction line

   `<div class="form-group form-title">` on Search.aspx sits as a DIRECT child
   of .booking-form-lg, but every .form-title rule in style.bundle.css needs a
   .form or .booking-form ancestor:
       .booking-form .form-title                        (no - different block)
       .booking-form-lg .form .form-group.form-title    (no - no .form wrapper)
       .newsletter-form-block .form-title               (no)
   so NONE of them match and the line was rendering on inherited body styles
   alone - 14px, regular weight, and whatever colour body happened to carry.
   That is why it changed appearance when the rebrand repointed `body` at the
   warm grey --ll-body-text: it had never been styled in its own right.

   Given a deliberate treatment here. Search.aspx is the only page using the
   class, so this is safely scoped. Nothing else currently matches at any
   weight, so 0-3-0 is enough.
   -------------------------------------------------------------------------- */

.booking-form-lg .form-group.form-title {
    font-family: var(--ll-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ll-primary);
    /* The markup used to end in `<br /> <br />` to make this gap; that came out
       when this rule went in, so the spacing lives here now. */
    margin-bottom: 2.5rem;
}

@media (max-width: 575px) {
    .booking-form-lg .form-group.form-title {
        margin-bottom: 1.75rem;
    }
}