/* =============================================================================
   /transfers/ route pages — layer on top of the live main.css.

   Uses ONLY the custom properties already declared in main.css (--primary,
   --secondary, --alternate, --light-secondary, --light-four, --font-primary-font).
   Nothing here hard-codes a brand colour, so a palette change on the main site
   carries into all 300+ route pages without touching this file.
   ============================================================================= */

.routePage .routeSection {
    padding: 2.5rem 0;
    border-top: 1px solid var(--gray, #eee);
    /* Same stack main.css gives the rest of the site, so /transfers/ is not the one
       section rendering in a different typeface. */
    font-family: var(--font-primary-font), var(--font-family-sans-serif);
}

.routePage .routeHero,
.routePage .quickQuoteRoute {
    font-family: var(--font-primary-font), var(--font-family-sans-serif);
}

.routePage .routeSection > .container > h2 {
    font-family: var(--font-primary-font);
    font-size: 1.5rem;
    color: var(--primary, #003399);
    margin-bottom: 1.25rem;
}

.routeEyebrow {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dark-secondary, #0095C6);
    font-weight: 600;
    margin-bottom: .35rem;
}

.sectionIntro { max-width: 100%; }

/* --- hero ---------------------------------------------------------------- */

.routeBluf {
    font-size: 1.125rem;
    line-height: 1.6;
}

.routeBlufSub {
    color: #555;
}

/* --- facts strip --------------------------------------------------------- */

.routeFacts {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    background: var(--gray, #eee);
    border: 1px solid var(--gray, #eee);
    border-radius: 6px;
    overflow: hidden;
}

.routeFacts__item {
    flex: 1 1 9rem;
    background: var(--white, #fff);
    padding: 1rem 1.15rem;
    text-align: center;
}

.routeFacts__label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
}

.routeFacts__value {
    display: block;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--primary, #003399);
    font-family: var(--font-primary-font), var(--font-family-sans-serif);
}

.routeFacts__value small {
    display: block;
    font-weight: 400;
    font-size: .8rem;
    color: #6b7280;
}

/* --- quote form ----------------------------------------------------------
   The site's quickquote component, presented as the page's centrepiece: centred,
   full container width, two rows. main.css already styles the inner controls, so
   this only handles the container and the two-row rhythm. */

.routeHero { margin-bottom: 1.5rem; }

/* The form is the homepage component, styled by main.css, and it stays that way: white
   card, 20px radius, 30px padding, same control colours. The ONLY change is the 120px
   bottom padding main.css adds to clear the hero fleet photo, which has nothing to sit
   under here and would otherwise leave a large dead band inside the card. */
.quickQuoteRoute {
    margin: 0 0 2.25rem;
}

.quickQuoteRoute .quickQuoteContainer {
    max-width: 100%;
    padding-bottom: 30px;
    max-height: none;
    overflow: visible;
    opacity: 1;
}

.quickQuoteRoute .quickquote__row { align-items: flex-end; }

.quickQuoteRoute .form-group { margin-bottom: .85rem; }

/* main.css parks the Route 2 field off to the side with margin-right:-25% until Return
   is selected, and lets the submit button ride over it. That works across the full-width
   homepage hero; in this two-row layout it collides with People and the button. Collapse
   it outright instead, and let it expand when .hasReturnLocation is added. */
.quickQuoteRoute .quickquote:not(.hasReturnLocation) .returndateDIV {
    /* Height matters as much as width here: collapsing only the width leaves the labels
       and controls wrapping inside a zero-width box, which kept the field 234px tall and
       pushed the rest of the row down by a third of the card. */
    max-width: 0;
    max-height: 0;
    flex: 0 0 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

.quickQuoteRoute .quickquote.hasReturnLocation .returndateDIV {
    max-width: 100%;
    max-height: 120px;
    flex: 1 1 0;
    opacity: 1;
    margin-right: 0;
}

.quickQuoteRoute .searchButtonContainer {
    align-items: flex-end;
    padding-bottom: .85rem;
}

.quickQuoteRoute #searchButton.btn {
    margin-left: 0;
    margin-top: 0 !important;
    max-width: 100%;
    min-width: 11rem;
    white-space: nowrap;
}

/* Oneway / Return radios. main.css hides the paired checkbox site-wide
   (label.toggle[for=myToggle] { display:none !important }); the radios click it
   programmatically, so only the radio group is ever visible. */
/* main.css gives .form-group.toggle width:100% for the stacked homepage hero, which in
   a Bootstrap row forces it onto a line of its own. Here it is one control among
   several, so it sizes to its content and sits beside the two location selects. */
.quickQuoteRoute .form-group.toggle {
    width: auto;
    max-width: none;
}

.quickQuoteRoute .quickquote__direction {
    display: flex;
    align-items: flex-end;
    padding-bottom: .85rem;
    min-width: 11rem;
}

/* The Oneway/Return radios keep main.css's own appearance - it draws the selector circle
   with .textToggleResult:before and reserves space for it with padding-left:30px. An
   earlier override here replaced that padding and dropped the circle on top of the label
   text. Only the container width is adjusted. */

/* Trust badges under the controls, from the live component. */
.quickQuoteRoute .quoteBenefits {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    padding-top: .4rem;
    font-size: .85rem;
    color: #4a5568;
}

.quickQuoteRoute .quoteBenefits i {
    color: var(--dark-secondary, #0095C6);
    margin-right: .3rem;
}

.quoteForm__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
}

.quoteForm__note { text-align: center; }

.quoteForm__title {
    font-weight: 700;
    color: var(--primary, #003399);
    font-size: 1.1rem;
    font-family: var(--font-primary-font), var(--font-family-sans-serif);
}

.quoteForm__from { color: #333; }

.quoteForm__direction { border: 0; margin: 0 0 .85rem; padding: 0; }

.quoteForm__legend {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: .3rem;
    width: auto;
    float: none;
}

.quoteForm__radio {
    display: block;
    font-size: .9rem;
    margin-bottom: .2rem;
    cursor: pointer;
}

.quoteForm__radio input { margin-right: .45rem; }

.quoteForm__row {
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
}

.quoteForm__field { flex: 1 1 0; min-width: 0; }

.quoteForm__field label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: .2rem;
}

.quoteForm__field input,
.quoteForm__field select {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid #cfd6e4;
    border-radius: 4px;
    background: var(--white, #fff);
    font: inherit;
}

.quoteForm__field--submit { display: flex; align-items: flex-end; }

.quoteForm__submit { width: 100%; }

.quoteForm__note {
    font-size: .8rem;
    color: #555;
    margin: .5rem 0 0;
}

/* --- info boxes ---------------------------------------------------------- */

.infoBox {
    background: var(--light-four, #f9f5ef);
    border: 1px solid rgba(0, 51, 153, .10);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.infoBox--compare {
    background: var(--light-secondary, #E6F4F1);
    border-color: rgba(20, 203, 255, .35);
}

.infoBox__title {
    font-weight: 700;
    color: var(--primary, #003399);
    margin-bottom: .4rem;
}

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

.infoBox__list { margin: 0; padding-left: 1.1rem; }

.infoBox__list li { margin-bottom: .25rem; }

/* --- prices -------------------------------------------------------------- */

.routePrices th, .routePrices td { vertical-align: middle; }

.routePrices thead th {
    background: var(--primary, #003399);
    color: var(--white, #fff);
    border: 0;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.routePrices__fleet { color: #555; font-size: .9rem; }

.routePrices__note { font-size: .9rem; color: #555; max-width: 100%; }

/* --- map ----------------------------------------------------------------- */

.routeMap {
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--light-secondary, #E6F4F1);
    border: 1px solid #cfd6e4;
}

.routeMap__fallback { padding: 1rem; margin: 0; }

/* Map pins. divIcon has no styling of its own, so the whole pin is drawn here:
   a circular head with the Font Awesome glyph, and a rotated square for the point. */
.routeMap__pin { background: none; border: 0; }

.routeMap__pinDot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    border: 2px solid var(--white, #fff);
}

.routeMap__pinDot i {
    transform: rotate(45deg);
    color: var(--white, #fff);
    font-size: 14px;
}

.routeMap__pin--from .routeMap__pinDot { background: var(--primary, #003399); }
.routeMap__pin--to .routeMap__pinDot { background: var(--red, #C93240); }

/* --- resorts ------------------------------------------------------------- */

.resortList {
    columns: 3 15rem;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.resortList__item {
    break-inside: avoid;
    padding: .3rem 0 .3rem 1.25rem;
    position: relative;
}

.resortList__item::before {
    content: "\f236";                       /* fa-hotel — Font Awesome is already loaded */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--secondary, #14cbff);
    font-size: .8rem;
}

.resortList__item--more {
    font-style: italic;
    color: #6b7280;
}

.resortList__item--more::before { content: "\f067"; }   /* fa-plus, not a bed */

.resortList__note { font-size: .9rem; color: #555; }

/* --- USPs ---------------------------------------------------------------- */

.uspGrid__col { margin-bottom: 1.25rem; }

.uspCard {
    height: 100%;
    background: var(--white, #fff);
    border: 1px solid var(--gray, #eee);
    border-radius: 8px;
    padding: 1.25rem;
}

.uspCard__icon {
    color: var(--secondary, #14cbff);
    font-size: 1.4rem;
    margin-bottom: .5rem;
    display: block;
}

.uspCard__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary, #003399);
}

.uspCard__body { font-size: .93rem; margin: 0; color: #444; }

.uspGrid__note { font-size: .9rem; color: #555; }

/* --- FAQ ----------------------------------------------------------------- */

.faqItem {
    border-bottom: 1px solid var(--gray, #eee);
    padding: .35rem 0;
}

.faqItem__q {
    cursor: pointer;
    padding: .6rem 0;
    list-style: none;
    font-weight: 600;
    color: var(--primary, #003399);
}

.faqItem__q h3 {
    display: inline;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.faqItem__q::-webkit-details-marker { display: none; }

.faqItem__q::before {
    content: "\f067";                       /* fa-plus */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .7rem;
    margin-right: .6rem;
    color: var(--secondary, #14cbff);
}

.faqItem[open] .faqItem__q::before { content: "\f068"; }   /* fa-minus */

.faqItem__a { padding: 0 0 .75rem 1.4rem; max-width: 100%; }

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

/* --- internal links ------------------------------------------------------ */

.routeLinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.routeLinks__item a {
    display: block;
    padding: .7rem .9rem;
    border: 1px solid var(--gray, #eee);
    border-radius: 6px;
    text-decoration: none;
    background: var(--white, #fff);
    height: 100%;
}

.routeLinks__item a:hover {
    border-color: var(--secondary, #14cbff);
    background: var(--light-secondary, #E6F4F1);
}

.routeLinks__name {
    display: block;
    font-weight: 600;
    color: var(--primary, #003399);
}

.routeLinks__meta { display: block; font-size: .85rem; color: #6b7280; }

.routeLinks__subhead {
    font-size: 1.05rem;
    color: var(--primary, #003399);
    margin-top: 1.5rem;
}

.routeLinks__prose { max-width: 100%; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 767px) {
    .routePage .routeSection { padding: 1.75rem 0; }
    .routeFacts__item { flex: 1 1 50%; }
    .quoteForm__row { flex-wrap: wrap; }
    .resortList { columns: 1; }
    .routeMap { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .routeLinks__item a { transition: none; }
}