/* ------------------------------------------------------------------
   Crociera-specific overrides layered on top of the Travlla theme.
   Loaded after style.css so these rules win.
   ------------------------------------------------------------------ */

/* The pre-existing site stylesheet (webroot/css/style.min.css, loaded before
   the Travlla assets) carries dead leftover CSS targeting a bare ".swiper"
   class with !important:
       .swiper{width:100%;height:auto;padding:53px 0 30px!important}
   Nothing in the old codebase actually used Swiper (it used Splide), so this
   never did anything - until the Travlla carousels introduced real ".swiper"
   elements. Because it's !important, it silently overrides every Travlla
   carousel's own spacing, most importantly ".swiper-nav-center-bottom"'s
   116px bottom padding that makes room for the nav arrows below the slides -
   without it the arrows sit pulled up into the slide images instead of in
   their own row underneath.

   Reset to 0 first (neutralizes the legacy rule for every carousel), then
   restore the theme's own 116px/90px bottom padding specifically for
   carousels using .swiper-nav-center-bottom - as a compound selector
   (.swiper.swiper-nav-center-bottom) its higher specificity wins over the
   plain ".swiper" reset above regardless of cascade order, so this survives
   even though both rules are !important. */
.swiper {
    padding: 0 !important;
}

.swiper.swiper-nav-center-bottom {
    padding-bottom: 116px !important;
}

@media (max-width: 1024px) {
    .swiper.swiper-nav-center-bottom {
        padding-bottom: 90px !important;
    }
}

/* NOTE on the legacy global link rule:
   webroot/css/style.min.css used to declare
       a { text-decoration:none!important; color:inherit!important;
           text-transform:none!important; font-weight:700!important }
   The colour + font-weight parts beat every theme rule regardless of
   specificity, so all links were forced to bold 700 in an inherited colour
   (white nav links turned dark, etc). Those two declarations have been
   removed at source in style.min.css so the normal cascade applies and the
   theme styles its own links.

   They are deliberately NOT "fixed" here with an override: any
   `a { ... !important }` rule in this file would beat the theme's own
   per-component link styling just as badly, and `revert` resolves to the
   *browser* default (underlined, link-blue) rather than the theme's value.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   CONTENT LINKS - BLUE SITE-WIDE
   Links written into CMS/editor HTML need to read as links. #063268 was
   already the colour for this, but each template declared it in its own
   inline <style> (Articles, Wikis, Packages/view, Cruises/view), so the
   pages that render body HTML without their own rule - FAQ answers,
   destination/cruise listing descriptions, the search page - were left
   with prose links indistinguishable from surrounding text.

   Scoped to the containers that actually hold editor HTML rather than a
   blanket `a {}`, for exactly the reason in the note above: the nav menu,
   card titles, breadcrumbs and every button on the site are <a> elements
   too, and a global rule would repaint all of them.

   !important because several legacy stylesheets still ship bare `a{}`
   colour rules of their own (webroot/css/style.min.css has, among others,
   `a{color:#1a77b9!important}`), which a plain declaration would lose to.
   ------------------------------------------------------------------ */
.trv-inr-para a,
.single_desc .desc a,
.content_text a,
.content_overview a,
.descPage a,
.acod-content a,
.accordion-body a,
.trv-itinerary-day-body a,
#payment .card-body a,
#faq p a {
    color: #063268 !important;
}

/* ------------------------------------------------------------------
   "LE NOSTRE ESPERIENZE DI VIAGGIO" CARD TITLES
   The theme's destination cards use h3 (28px) for the title pill because its
   demo labels are single words ("Paris", "Tokyo"). Our labels are full trip
   names - "Escursioni dai Porti Egiziani", "Capodanno e Natale in Egitto" -
   and half of them wrap at 28px. The pill is absolutely positioned against
   the bottom of the card, so a wrapped title grows upward and each card ends
   up with a different-height pill covering a different amount of its image.

   Size the title so nearly all fit on one line, and give the pill a fixed
   height with centred text so every card's pill is identical regardless of
   label length.
   ------------------------------------------------------------------ */
.trv-popular-destination .trv-destination-bx1 .trv-content .trv-title a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tall enough that a two-line label still fits without the pill growing,
       so every card's pill stays the same height and sits at the same point
       on the image - the uniform look the theme gets for free from its
       single-word labels. */
    min-height: 84px;
    padding: 12px 18px;
    /* 22px is the theme's own smaller step (it uses this below 768px); the
       full 28px wraps on half our labels. */
    font-size: 22px;
    line-height: 1.25;
}

/* ------------------------------------------------------------------
   SUB-PACKAGE HERO (Travlla tour-package.html banner)
   The banner carries the page title + filters on the left and the enquiry
   form on the right. The theme has no equivalent for an in-banner form, so
   the legacy .inquireSection card is restyled here to sit on the theme's
   palette instead of its old grey glass look.
   ------------------------------------------------------------------ */
/* The theme fixes this banner at 600px and bottom-aligns it, which suits a
   short search bar but not a full enquiry form - let it grow instead.

   It also never sets background-size/repeat: its demo image is large enough to
   fill 600px, but CMS destination photos are not, so they tiled (the banner
   showed the same ship repeated with visible seams). */
.trv-tr-pack-bnr-wrap {
    /* min-height rather than height so the banner can still grow on short
       screens instead of clipping the enquiry form. 80vh left a lot of
       empty banner above/below the form (which only needs ~500px) - 55vh
       is enough to read as a hero while fitting the form closely. */
    height: auto;
    min-height: 55vh;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The theme's scrim runs to solid black at the bottom, which is a subtle
   vignette across 600px but a heavy black band once the banner is taller.
   Even it out: enough contrast for the white heading, without burying the photo. */
.trv-tr-pack-bnr-wrap::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.3) 45%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* The theme covers the banner with a full-bleed gradient:
       .trv-tr-pack-bnr-wrap::after { position:absolute; inset:0; ... }
   It has no z-index, so it paints over the banner's content and swallows
   clicks - the theme's own .trv-search-st5 escapes it with z-index:100.
   Lift the whole container so the enquiry form is interactive too. */
.trv-tr-pack-bnr-wrap > .container {
    position: relative;
    z-index: 20;
}

/* The row carries the header clearance, so it - not the wrapper - is what has
   to reach 80vh; the wrapper then wraps tightly around it.
   The header no longer floats over this banner (layout/default.php puts it
   back in normal flow on every non-home page), so this only needs a normal
   symmetric top/bottom padding now, not extra clearance for it. */
.trv-tr-pack-bnr-wrap .trv-pack-bnr-row {
    min-height: 55vh;
    padding: 32px 0;
}

/* The sub-package banners (.trv-subpack-bnr, added in
   Packages/view_destinations.php) get a taller hero than the cruise pages -
   asked for explicitly. Two classes on the wrapper, so this outranks the
   55vh rule above without touching /crociere-egitto and friends. */
.trv-tr-pack-bnr-wrap.trv-subpack-bnr,
.trv-tr-pack-bnr-wrap.trv-subpack-bnr .trv-pack-bnr-row {
    min-height: 68vh;
}

/* Below lg the two columns stack, so a locked 80vh would leave the heading
   alone on the first screen and push the form out of sight. Let it size to
   its content instead. */
@media (max-width: 991px) {
    .trv-tr-pack-bnr-wrap {
        min-height: 0;
    }

    .trv-tr-pack-bnr-wrap .trv-pack-bnr-row {
        min-height: 0;
        padding: 40px 0;
    }

    /* ...except on the sub-package listing pages (.trv-subpack-bnr, added in
       Packages/view_destinations.php). The rule above sizes the banner to its
       content, which was right when the enquiry form still stacked inside it
       here - but on mobile that form is buffered out of the hero and rendered
       below the card grid instead, leaving only the page heading behind. At
       content height that came out ~210px, a third of the screen: a thin strip
       rather than a hero. Give it a real share of the viewport again - there's
       no form left in it to push off-screen. */
    /* Carries .trv-tr-pack-bnr-wrap too: the desktop rule above is now a
       two-class selector, so a plain .trv-subpack-bnr here would lose to it
       and the mobile height would never apply. */
    .trv-tr-pack-bnr-wrap.trv-subpack-bnr,
    .trv-tr-pack-bnr-wrap.trv-subpack-bnr .trv-pack-bnr-row {
        min-height: 55vh;
    }
}

/* Left column: let the theme's search bar sit flush in the two-column row. */
.trv-tr-pack-bnr-wrap .trv-search-st5 {
    margin: 0;
}

/* Right column: the enquiry card. Dark glass over the hero photo, not the
   solid white/teal Travlla card style - matches the same look every other
   page's own .inquireSection already uses (see the un-prefixed rules
   further down), so the enquiry form reads the same wherever it appears. */
.trv-pack-bnr-form .inquireSection {
    background: rgba(64, 64, 64, 0.3);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 0;
    border-radius: 6px;
    overflow: hidden;
}

.trv-pack-bnr-form .inquireSection .headerInquery {
    background: none;
    color: #fff;
    font-family: "Figtree", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    padding: 16px 24px;
}

/* ---- Field sizing --------------------------------------------------------
   The .fromHeader rules in the page's own <style> give the controls their
   46px height and radii; make sure every control also fills its grid column
   (bootstrap-select used to impose a fixed pixel width here) and that the
   code + number pair still reads as one joined field. */
.trv-pack-bnr-form .inquireSection .form-control,
.trv-pack-bnr-form .inquireSection .form-select,
.trv-pack-bnr-form
    .inquireSection
    input:not([type="checkbox"]):not([type="radio"]),
.trv-pack-bnr-form .inquireSection select,
.trv-pack-bnr-form .inquireSection textarea {
    width: 100%;
    max-width: 100%;
}

/* Rows sit flush inside the card. */
.trv-pack-bnr-form .inquireSection .form_inquire > .row {
    margin-left: 0;
    margin-right: 0;
}

/* ---- "Aggiungi volo": keep the airport field hidden until it's ticked ------
   css/listtours/style.min.css already says .flightFelid{display:none} and
   .flightFelid.active{display:block}, and the checkbox's JS does add/remove
   that .active class - but the field is markup like
       <input class="form-control flightFelid" name="departure_airport">
   and Bootstrap's own .form-control{display:block} is the same specificity
   (0,1,0) while loading later in the layout (travlla/bootstrap.min.css is
   stylesheet #10, listtours #4). So display:block won on source order and the
   airport field sat open on every one of these pages regardless of the
   checkbox. Restating both halves here - this file is the last stylesheet in
   the layout - puts the toggle back in charge.

   Deliberately NOT .flightFelidM: that's the hero/detail copy of this field,
   where the JS toggles the wrapping .flightFieldM div's inline display and
   the input itself must stay display:block. Hiding the input there would
   break a field that currently works. */
.flightFelid {
    display: none;
}
.flightFelid.active {
    display: block;
}

/* ---- Date fields: no dead strip under them --------------------------------
   The calendar icon is markup like
       <div class="date"><input class="hasDatepicker"><button
            class="ui-datepicker-trigger"><i class="fa-calendar-day"></i></button></div>
   and the page templates only ever position the <i>, never the <button> that
   holds it. So the button stayed in normal flow as an inline-block sibling
   after the inline-block input, wrapped onto a second line box, and left ~21px
   of empty space under both date fields - a visibly bigger gap under that row
   than between any of the other rows.

   Take the button itself out of flow (.date is already position:relative, from
   the page's own <style>) and the row collapses to the height of the input.
   The <i> then has to be put back to static, because the templates' absolute
   "bottom: 38px" on it was measured against the old 46px-tall fields and puts
   the icon outside a 30px one. */
.trv-pack-bnr-form .inquireSection .date .ui-datepicker-trigger,
.trv-pack-bnr-form .inquireSection .endDate .ui-datepicker-trigger {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    line-height: 0;
}
.trv-pack-bnr-form .inquireSection .date .ui-datepicker-trigger i,
.trv-pack-bnr-form .inquireSection .endDate .ui-datepicker-trigger i {
    position: static;
    right: auto;
    bottom: auto;
}

/* Passenger counters: keep the -/+ controls from squeezing the number box. */
.trv-pack-bnr-form .inquireSection .adultCounter,
.trv-pack-bnr-form .inquireSection .childCounter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
}

.trv-pack-bnr-form .inquireSection .input-number {
    border: 0 !important;
    text-align: center;
    background: transparent;
}

/* The Bambini (children) counter is real Bootstrap .input-group markup
   (minus <button> / #children_book input / plus <button>), unlike the
   Adulti counter's plain flex row of icons - .input-group's own default
   is flex-wrap:wrap. The general "every field fills its column" rule
   above (input:not([type=checkbox]):not([type=radio]) { width:100% })
   is more specific than Bootstrap's own ".input-group>.form-control"
   sizing rule, so it was winning and forcing #children_book to 100% -
   which, combined with the wrap, wasn't just widening the input, it
   pushed the two buttons onto their own wrapped lines above and below
   it (confirmed via computed flex-wrap:wrap and each child's rect).
   Turning wrap off and giving the input back Bootstrap's own
   shrink-to-fit sizing puts all three back on one line, matching the
   Adulti counter. */
.trv-pack-bnr-form .inquireSection .counterContainer.input-group {
    flex-wrap: nowrap;
}
.trv-pack-bnr-form
    .inquireSection
    .counterContainer.input-group
    input.form-control {
    width: 1%;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
}
.trv-pack-bnr-form .inquireSection .input-group-btn {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.trv-pack-bnr-form .inquireSection .btn-number {
    background: none;
    border: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
}
.trv-pack-bnr-form .inquireSection .btn-number:disabled {
    opacity: 0.35;
}

/* Full-width primary action. */
.trv-pack-bnr-form .inquireSection #Enquire-btn {
    width: 100%;
}

/* ---- Fitting the card inside the hero ------------------------------------
   This form was designed for a full page column, not a banner: ~10 stacked
   rows at 46px with 16px (mb-3) gaps, an 84px textarea and a padded button
   block come to roughly 700px, which forced the banner to grow far past a
   hero's worth of height.

   Nothing can be dropped - every field is posted to Inquires::mail - so the
   card is compacted instead: shorter controls, tighter gaps, and the dead
   padding around the submit removed. That takes ~140px off the card and lets
   the banner settle at hero proportions with the whole form inside it. */
.trv-pack-bnr-form .inquireSection .form-control,
.trv-pack-bnr-form .inquireSection .form-select,
.trv-pack-bnr-form .inquireSection .startDate input,
.trv-pack-bnr-form .inquireSection .endDate input {
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    /* 13px, not smaller: the card is compact but these are still the fields
       someone has to fill in, and there are ~10 of them. The height comes off
       the padding instead. */
    font-size: 13px;
}

/* Bootstrap's mb-3 (16px) between every row is generous for a banner card. */
.trv-pack-bnr-form .inquireSection .form_inquire .row.mb-3,
.trv-pack-bnr-form .inquireSection .form_inquire .form-group.row,
.trv-pack-bnr-form .inquireSection .drobdownCounter.mb-3,
.trv-pack-bnr-form .inquireSection .form_inquire .col-12.mb-3,
.trv-pack-bnr-form .inquireSection .form_inquire .d-flex.mb-3 {
    margin-bottom: 4px !important;
}

/* Adulti / Bambini counter row: a little air above it. The labels sit
   directly under the previous field's input otherwise, and the two counters
   read as a pair that belongs slightly apart from the fields above. */
.trv-pack-bnr-form .inquireSection .drobdownCounter {
    padding-top: 10px;
}

.trv-pack-bnr-form .inquireSection .form_inquire {
    padding: 6px 12px !important;
}

.trv-pack-bnr-form .inquireSection .headerInquery {
    font-size: 15px;
    padding: 6px 16px;
}

/* ---- Hero card: last of the vertical trim ---------------------------------
   Only inside the banner card - the same form rendered full-width elsewhere
   (blog/wiki sidebars, /contattaci) keeps its normal label and notice sizing.
   The field labels here were a mix of 14px/21px and 12px/18px; matching them
   all to the smaller pair takes a few px off each of ~10 rows. */
.trv-pack-bnr-form .inquireSection .form_inquire label {
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 2px;
}


/* Counter labels: sit them close to the control they name. */
.trv-pack-bnr-form .inquireSection .drobdownCounter label {
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.trv-pack-bnr-form .inquireSection .adultCounter,
.trv-pack-bnr-form .inquireSection .childCounter {
    height: 34px;
}

/* view_destinations.php's hero form no longer has the "Aggiungi volo"
   checkbox + "Aeroporti comodi per la partenza" row above this (removed -
   they duplicated a JS toggle function that was never actually defined
   anywhere, so the field was permanently visible regardless of the
   checkbox). That freed ~80px in the card, which this field absorbed - at
   120px it was the single biggest item in the hero card, taller than the
   heading and submit button combined and sized for text nobody has typed
   yet. Three lines is enough to start writing in; it scrolls past that and
   still posts the full message either way. The height has to be set here
   rather than left to min-height, because the textarea carries a rows
   attribute that would otherwise size it. */
.trv-pack-bnr-form .inquireSection textarea.form-control {
    height: 72px;
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

/* The submit sits in a wrapper carrying p-3 my-2 - ~40px of padding around a
   button that is already full width. */
.trv-pack-bnr-form .inquireSection .bottonInqueryFrom {
    padding: 0 !important;
    margin: 2px 0 0 !important;
}

/* Labels/help text read white against the dark glass card - the theme's
   own page-level stylesheet already says as much (.drobdownCounter
   label/.contextFormInauire {color:#fff}); restated here so it also wins
   over anything else touching these selectors. */
.trv-pack-bnr-form .inquireSection .drobdownCounter label,
.trv-pack-bnr-form .inquireSection .contextFormInauire,
.trv-pack-bnr-form .inquireSection label {
    color: #fff;
}

.trv-pack-bnr-form .inquireSection .form-control,
.trv-pack-bnr-form .inquireSection .form-select {
    border: 0;
    border-radius: 6px;
}

/* The enquiry form's selects are handed back to the browser (bootstrap-select is
   destroyed for them in the layout - see the note there), so style the native
   control directly: suppress the OS indicator and draw one plain chevron. */
.trv-pack-bnr-form .inquireSection select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    padding-right: 36px;
}

.trv-pack-bnr-form .inquireSection select.form-select::-ms-expand {
    display: none;
}

.trv-pack-bnr-form .inquireSection .form-control:focus,
.trv-pack-bnr-form .inquireSection .form-select:focus {
    border-color: #43a3bd;
    box-shadow: 0 0 0 0.15rem rgba(67, 163, 189, 0.15);
}

/* "Aggiungi volo" checkbox. Matches the page's own stylesheet
   (.form-check-input {background:none; border:2px solid #fff}), meant for
   this dark glass card - a plain white outline, unfilled until checked. */
.trv-pack-bnr-form .inquireSection .form-check-input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex: 0 0 18px;
    /* Bootstrap's own ".form-check .form-check-input" rule sets float:left and
       margin-left:-1.5em - the latter is meant to pull the box back under the
       ".form-check" padding-left:1.5em it also sets, so the visible box lands
       flush with the label. Since .form-check below is flex (float already
       does nothing there) with padding-left:0, that -1.5em margin is no
       longer being offset by anything and just shoves the box ~24px left of
       where the label sits - reset both to 0 so the box sits inline instead. */
    margin: 0;
    margin-top: 0.2em;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    vertical-align: middle;
}

.trv-pack-bnr-form .inquireSection .form-check-input[type="checkbox"]:checked {
    background-color: #43a3bd;
    border-color: #43a3bd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.trv-pack-bnr-form .inquireSection .form-check-input:focus {
    border-color: #43a3bd;
    box-shadow: 0 0 0 0.15rem rgba(67, 163, 189, 0.3);
}

/* Keep the box and its label on one line, vertically centred. */
.trv-pack-bnr-form .inquireSection .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.trv-pack-bnr-form .inquireSection .form-check .form-check-label {
    margin: 0;
    cursor: pointer;
}

/* Submit button: same solid cyan used for this form's "show more"-style
   buttons elsewhere on the site, not the Travlla lime/teal pairing. */
.trv-pack-bnr-form .inquireSection #Enquire-btn {
    background-color: #43a3bd;
    color: #fff;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 0;
    border-radius: 6px;
    padding: 7px 24px;
    transition: 0.3s all ease;
}

.trv-pack-bnr-form .inquireSection #Enquire-btn:hover {
    background-color: #43a3bd;
    color: #fff;
}

/* ------------------------------------------------------------------
   ACHIEVEMENT COUNTERS ROW
   The theme's counter labels are all short and single-line ("Happy Traveler",
   "Tours success"), so label and number stack tightly and line up for free.
   At the theme's 24px, "Recensioni Tripadvisor" needs ~264px in a ~250px
   column - it only just overflows, wrapping to two lines and dropping its
   number a full line below the others.

   Trim the label a little so all four fit on one line, which restores the
   theme's tight label/number pairing rather than working around the wrap.
   ------------------------------------------------------------------ */
@media (min-width: 1200px) {
    .trv-vid-st2-counter
        .trv-counter-outer-one
        .trv-icon-content-info
        .trv-icon-title {
        font-size: 21px;
    }
}

/* Safety net: should a label ever wrap anyway (a longer translation, an
   in-between viewport), let each counter fill its column and push the number
   to the bottom so the numbers still share a baseline. No visual effect while
   every label is single-line, since the columns are then equal height.
   Scoped to >=992px, where the theme's icon-left/text-right row layout is
   still in play - below that, the counters switch to a stacked, centered
   layout (see "VIDEO-WITH-ACHIEVEMENT COUNTER ROW" further down) that
   doesn't need a baseline to share. */
@media (min-width: 992px) {
    .trv-vid-st2-counter .trv-counter-outer-one {
        height: 100%;
    }

    .trv-vid-st2-counter .trv-counter-outer-one .trv-icon-content-info {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .trv-vid-st2-counter
        .trv-counter-outer-one
        .trv-icon-content-info
        .counter-out {
        margin-top: auto;
    }
}

/* ------------------------------------------------------------------
   SOCIAL CHANNELS ROW
   Reuses the theme's scrolling client-logo carousel, but with icon + label
   links instead of <img> brand logos. The theme's own rule only styles
   ".client-logo img" (height 45px at 0.4 opacity), which does not apply to
   icons - and muted 40% would be wrong for links meant to be clicked.
   ------------------------------------------------------------------ */
.trv-client-carousel .trv-social-logo a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #063268;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transition: color 0.3s ease;
}

.trv-client-carousel .trv-social-logo a i {
    font-size: 30px;
    line-height: 1;
}

.trv-client-carousel .trv-social-logo a:hover {
    color: #43a3bd;
}

@media (max-width: 991px) {
    .trv-client-carousel .trv-social-logo a {
        font-size: 16px;
        gap: 8px;
    }
    .trv-client-carousel .trv-social-logo a i {
        font-size: 24px;
    }
}

/* ------------------------------------------------------------------
   "WE RECOMMEND" IMAGE COLLAGE (Home 2 layout)
   The theme styles these images with only "width: 100%" - no height and no
   object-fit - so the collage only holds its shape when the source files are
   exactly the dimensions the demo ships: 417x630 for the left/right boxes and
   a square 380x380 for the centre circle.

   Our own photos have different aspect ratios (e.g. a 540x359 landscape in the
   circle slot), which renders as a short wide strip inside the fixed 390x390
   circular box instead of filling it. Pin the theme's intended ratios and let
   object-fit crop, so any image renders like the demo.
   ------------------------------------------------------------------ */
.trv-we-recommend2 .trv-we-rec2-media-main-wrap .trc-we-rec-l-bx img,
.trv-we-recommend2 .trv-we-rec2-media-main-wrap .trc-we-rec-r-bx img {
    display: block;
    aspect-ratio: 417 / 630;
    height: auto;
    object-fit: cover;
}

.trv-we-recommend2 .trv-we-rec2-media-main-wrap .trc-we-rec-circle-bx2 img {
    display: block;
    height: 100%;
    object-fit: cover;
}

/* Header style 1: "Personalizza il tuo viaggio" CTA in the right section.
   The theme only scopes .trv-r-section-block-btn to header-style-3, so
   mirror that spacing/behaviour for the style we use. */
.header-style-1 .trv-r-section-block-btn {
    margin-left: 20px;
}

.header-style-1 .trv-r-section-block-btn .site-button {
    white-space: nowrap;
}

/* Below the drawer breakpoint the bar only has room for the logo and the
   toggle; the floating "Chiedi Preventivo" button covers the CTA there. */
@media (max-width: 991px) {
    .header-style-1 .trv-r-section-block-btn {
        display: none;
    }
}

/* Call/email top-bar: same drawer breakpoint - the collapsed mobile header
   should show only the logo and the toggle, nothing else. The phone/email
   it carries move into the expanded menu instead (header.php's
   .mobile-menu-contact, a d-lg-none copy already hidden on desktop where
   the top-bar still shows them). */
@media (max-width: 991px) {
    .header-style-1 .top-bar {
        display: none;
    }
}

/* .header-nav (the drawer) is itself a flex ROW by default (d-flex in the
   markup, un-overridden for direction at this breakpoint) - .nav and
   .mobile-menu-contact were sitting side by side as its two flex items,
   squeezed into shares of the 250px width, instead of one below the other.
   Force it into a column here so they stack.

   style.css also fixes the drawer itself to height:100vh. On a phone with
   a lot of menu items (or any submenu expanded) that's not tall enough,
   and 100vh doesn't even match the *visible* screen on most mobile
   browsers to begin with - it's measured against the largest the viewport
   could be, ignoring the address bar that's actually on screen, so the
   drawer is taller than what's really visible even before the content
   overflows. Either way the fix is the same: only the nav links list
   scrolls internally (flex:1 fills the space, overflow-y:auto scrolls
   past it, min-height:0 is what lets a flex child shrink below its content
   size enough to scroll at all) while the drawer itself and the contact
   block pinned after it (flex-shrink:0, no longer needs margin-top:auto -
   the scrolling sibling above already claims all the leftover space) stay
   put - so the phone/email are always on screen without scrolling the
   drawer itself, however long the link list gets. */
@media (max-width: 991px) {
    .header-style-1.mobile-sider-drawer-menu .header-nav {
        flex-direction: column;
        /* Progressive enhancement over style.css's height:100vh!important -
           dvh tracks the address bar showing/hiding, so the drawer's real
           height matches what's actually visible instead of the largest the
           viewport could ever be. Ignored by browsers that don't support
           dvh, leaving the 100vh from style.css as their fallback. */
        height: 100dvh !important;
    }
    .header-style-1.mobile-sider-drawer-menu .header-nav .nav.navbar-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* .wt-topbar-left-info's own colour (style.css) is tuned for the top-bar's
   teal background; inside the drawer's light background it needs to read
   as normal dark menu text instead, and sits at the end of the drawer with
   a divider rather than beside the nav links. */
.header-nav .mobile-menu-contact {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
    margin: 0 !important;
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.header-nav .mobile-menu-contact li {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.6;
}
.header-nav .mobile-menu-contact li i {
    color: #063268;
    padding-right: 10px;
    font-size: 16px;
    width: 18px;
    text-align: center;
}
.header-nav .mobile-menu-contact li a {
    color: #1f2937;
    font-weight: 600;
}
.header-nav .mobile-menu-contact li span {
    font-weight: 600;
}

/* Shorter navbar: the theme's own .main-bar min-height (120px) plus its
   30px top/bottom link padding made the header taller than this site
   needs. Bring both down - the logo and CTA button are already
   height:100%/flex-centered, so they shrink to fit rather than needing
   their own size rules. Matches the theme's own >991px mobile min-height,
   just applied at every width instead of only below the drawer breakpoint. */
.header-style-1 .main-bar {
    min-height: 80px;
}
.header-style-1 .header-nav .nav > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ------------------------------------------------------------------
   HOME BANNER HEADLINE
   The theme sets this to a flat 250px because its demo headline is a
   single short word ("Vietnam"). Our headline is the site name,
   "Crociera sul Nilo" (17 characters), which at 250px is ~2000px wide:
   it wraps onto several lines while the outlined copy layered on top of
   it wraps differently, so the two renderings fall out of register.

   Fix: widen the text column and scale the headline with the viewport so
   it always sits on one line. Everything else about the banner is left
   to the theme.
   ------------------------------------------------------------------ */
.trv-banner-1-wrap .trv-banner-1-text {
    /* Wider than the theme's 1020px so the headline has room to grow before
       it runs into the edge of the banner. */
    max-width: 1750px;
}

.trv-banner-1-wrap .trv-banner-1-text .trv-banner-1-text-large,
.trv-banner-1-wrap .trv-banner-1-text .trv-banner-1-text-large-outline {
    /* As large as the site name can go while still fitting on one line.
       The 9vw term does the work on desktop; 170px caps it on very wide
       screens. The 30px floor is what a 320px phone can actually fit -
       a larger floor overflows and gets clipped by the banner. */
    font-size: clamp(30px, 9vw, 170px);
    /* Both layers must stay on one line, otherwise the outlined copy
       cannot sit exactly on top of the solid one. */
    white-space: nowrap;
    /* The solid layer is an <h1> and the outlined layer a <span>, so pin
       every metric that would otherwise differ between the two elements
       and knock the outline out of alignment. */
    line-height: 1.2;
    margin: 0;
    padding: 0;
    font-family: "Kaushan Script", cursive;
    font-weight: 400;
    letter-spacing: normal;
}

/* ------------------------------------------------------------------
   HOME BANNER SEARCH BAR
   Was a small transparent underline field tucked in the theme's "Seguici"
   corner slot (bottom-right of the overlay) - now stands in for the
   "Chiedi Preventivo" CTA button in the main hero text column instead, so
   it needs to read as the thing to notice, not a discreet utility: a wide,
   solid white pill that stays legible over the video regardless of what's
   playing behind it, with a lime submit button (the site's own accent
   color, already used for every other primary action) rather than a bare
   icon.
   ------------------------------------------------------------------ */
/* The theme's decorative rotating-circle rings (.twm-img-bg-circle-area)
   are an absolutely-positioned div spanning the full hero overlay, stacked
   above this non-positioned text column - it has no visible fill, but its
   box still intercepts clicks over the whole hero, including this search
   field. It's purely decorative, so opt it out of hit-testing. */
.trv-banner-1-wrap .twm-img-bg-circle-area {
    pointer-events: none;
}

.trv-banner-hero-search {
    position: relative;
    z-index: 4;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
}

.trv-banner-hero-search form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 100px;
    padding: 6px 6px 6px 26px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.trv-banner-hero-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #063268;
    font-family: "Afacad", sans-serif;
    font-size: 17px;
}

.trv-banner-hero-search input::placeholder {
    color: #94a3b8;
}

.trv-banner-hero-search button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #43a3bd;
    color: #1f2937;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s all ease;
}

.trv-banner-hero-search button:hover {
    background: #063268;
    color: #fff;
}

@media (max-width: 767px) {
    .trv-banner-hero-search {
        max-width: 100%;
    }

    .trv-banner-hero-search form {
        padding: 5px 5px 5px 18px;
    }

    .trv-banner-hero-search button {
        width: 40px;
        height: 40px;
    }
}

/* ------------------------------------------------------------------
   DOUBLE SELECT ARROWS
   The theme's custom.js runs `jQuery('select').selectpicker()` on every select
   on the page, so bootstrap-select replaces each one with a wrapper + button.
   Building that wrapper it does `addClass(this.$element.attr("class"))`, which
   copies the original select's classes onto the wrapper - so a
   `<select class="form-select">` yields `.bootstrap-select.form-select`, and
   Bootstrap paints its chevron background-image there on top of the plugin's
   own caret. Two arrows, side by side.

   Keep the plugin's caret (it sits inside the button, where it belongs) and
   drop the inherited background chevron from the wrapper.
   ------------------------------------------------------------------ */
.bootstrap-select.form-select,
.bootstrap-select.form-control {
    background-image: none;
    padding: 0;
    border: 0;
    /* bootstrap-select predates Bootstrap 5, so its width guard
           .bootstrap-select:not([class*=col-]):not([class*=form-control])... { width:220px }
       does not recognise .form-select and every wrapper falls through to a fixed
       220px. Inside a grid column (the phone code sits in a .col-4) that overflows
       and lands on top of the next field. Fill the column instead. */
    width: 100%;
}

/* The wrapper is only a positioning shell; the button carries the visuals. */
.bootstrap-select > .dropdown-toggle.form-select,
.bootstrap-select > .dropdown-toggle.form-control {
    background-image: none;
}

/* ---- Arrow ----------------------------------------------------------------
   Draw one themed chevron on the toggle button and suppress every default
   indicator (the plugin's .caret span and Bootstrap's ::after triangle), so the
   arrow matches the rest of the form regardless of which layer would show. */
.bootstrap-select > .dropdown-toggle::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0;
    border: 0;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23066168' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: transform 0.2s ease;
}

.bootstrap-select.show > .dropdown-toggle::after {
    transform: rotate(180deg);
}

.bootstrap-select > .dropdown-toggle .caret {
    display: none;
}

/* ------------------------------------------------------------------
   TOP FILTER BAR (Travlla tour-package.html)
   The theme's bar is decoration - its dropdowns open and close and nothing
   else. Ours drives the Isotope grid (see element/travlla-filter-bar.php), so
   it needs a result count beside "Azzera filtri" that the theme has no slot
   for.
   ------------------------------------------------------------------ */
.trv-filter-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.trv-filter-count:empty {
    display: none;
}

.trv-filter-count {
    background: #063268;
    color: #fff;
    font-family: "Afacad", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 100px;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .trv-filter-bar-right {
        justify-content: center;
    }
}

/* .trv-compare-bar's own margin-bottom:20px (further below) was for when it
   sat as its own block directly above the grid - now it's an inline sibling
   of "Azzera filtri" in this already-flex row, where that margin would just
   misalign it. */
.trv-filter-bar-right .trv-compare-bar {
    margin-bottom: 0;
}

/* Below lg, the type/price/duration dropdowns + "Azzera filtri" take up a lot
   of vertical space for controls most visitors on a phone won't touch above
   a grid they're about to scroll through anyway - hidden here. "Confronta"
   doesn't go with it (see the standalone copy travlla-filter-bar.php renders
   right after this bar, d-lg-none, for exactly this breakpoint). */
@media (max-width: 991px) {
    .trv-pack-filter-bar-wrap {
        display: none;
    }
}

.trv-pack-filter-bar-mobile-compare {
    margin-bottom: 20px;
}
.trv-pack-filter-bar-mobile-compare .trv-compare-bar {
    /* Left-aligned, matching the description text it now sits under (and
       the cruise pages' own copy, which uses .trv-compare-bar's default
       flex-start) - it used to be centred back when it sat on its own
       above the description rather than reading as part of that column. */
    justify-content: flex-start;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   PACKAGE / CRUISE GRID CARDS (tour-package.html masonry-wrap)
   Width and gap are already uniform for free - the theme's own Bootstrap
   classes on the card wrapper (col-xl-4 col-lg-6, m-b30) give every card the
   same column width and gutter regardless of content.

   What isn't uniform without help is card *height*: titles and descriptions
   run from one line to several depending on their length. The theme's own
   card markup has no flex column, so with cards of different heights the
   price/CTA row lands at a different vertical position on every card, and
   the row looks ragged even though it's a proper grid.

   Also see custom.js: layoutMode was 'masonry' (true brick packing, which
   packs each new card into whichever column is currently shortest) - changed
   to 'fitRows' so cards stay in strict left-to-right shelves instead, which
   is what makes the row alignment below meaningful in the first place.

   A flex column with margin-top:auto on the CTA does NOT fix the height
   mismatch here, even though that's the normal trick for equal-height cards.
   Isotope's fitRows takes every .masonry-item out of normal flow with
   position:absolute and sizes each one purely from its own content - there is
   no shared row height left for flexbox to stretch against, so height:100%
   resolves against nothing and margin-top:auto has no spare space to push
   into. Isotope will happily position boxes that are already equal height,
   but it will not make them equal itself.

   So the fix originally clamped the title and description to a fixed
   number of lines with line-clamp - since removed from the title (shown in
   full further down), so cards vary in height with it, same as the
   description. */

/* The duration/type badge is a free-text join ("<duration> | <type>").
   Packages' duration ("8 Giorni / 7 Notti") is always short, but cruises'
   is a full departure schedule ("Ogni venerdì da Assuan \ Ogni lunedì da
   Luxor | Crociera Standard") that wraps to a 2nd line on some cards and
   not others. Shown in full (no ellipsis) - a reserved 2-line min-height
   keeps every card's badge the same height regardless of whether its own
   text needs one line or two, the same way the title/description below
   are handled, instead of cutting the longer schedules off. */
.trv-popular-tour-pakagenew .trv-tour-duration {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.trv-popular-tour-pakagenew .trv-tour-duration span {
    display: block;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}

/* ------------------------------------------------------------------
   SHORTER, WIDER PACKAGE/CRUISE CARDS
   At 3-per-row (~270-300px wide) this card's stock proportions - a 220px
   image, 30px padding on all sides of the content block, a 24px 2-line
   title, a 16px 3-line description and a 96px-reserved 3-line highlights
   block - added up to roughly 730px tall: a narrow column nearly 3x
   taller than it is wide. Trimming every section a bit (rather than
   dropping one entirely) keeps the same information while landing at a
   much more balanced ~1.6:1 card. */
.trv-popular-tour-pakagenew .trv-media a img {
    height: 160px;
}
@media (max-width: 1199px) {
    .trv-popular-tour-pakagenew .trv-media a img {
        height: 220px;
    }
}
.trv-popular-tour-pakagenew .trv-content {
    padding: 18px;
}
/* Cards must be the same size regardless of content length. Isotope's
   fitRows can't equalize card height itself (see the note above on why
   margin-top:auto doesn't work with position:absolute masonry items), so
   clamping every variable-length piece - duration badge (above), title,
   description - to a fixed line count is the only way left: with the image
   height also fixed and the price/CTA row a constant height, every card's
   own natural height comes out identical without needing the grid to
   stretch anything. */
.trv-popular-tour-pakagenew .trv-tour-title .trv-title {
    font-size: 18px;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trv-popular-tour-pakagenew .trv-content-head-section .trv-tour-info p {
    font-size: 14px;
    line-height: 1.3;
    min-height: calc(1.3em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trv-popular-tour-pakagenew .trv-star-amount2 {
    font-size: 22px;
}
/* Price + CTA now share the bottom row (price left, button right) instead
   of the price sitting above the description - .trv-content-bottom-section
   is already flex + space-between (style.css), so the two just needed to
   both be direct children of it. */
.trv-card-price {
    display: flex;
    flex-direction: column;
}
.trv-popular-tour-pakagenew .trv-tour-duration,
.trv-popular-tour-pakagenew .trv-tour-title,
.trv-popular-tour-pakagenew .trv-content-head-section {
    margin-bottom: 6px;
}

/* ------------------------------------------------------------------
   ENQUIRY FORM ROW-COUNT PARITY ACROSS SUB-PACKAGE PAGES
   3 of the 10 sub-package pages (eclissi-solare, viaggi-in-giordania,
   escursioni-dai-porti-egiziani) render neither the destination nor the
   trip_type select that the other 7 get (existing controller logic - see the
   $hasExtraSelectRow comment in Packages/view_destinations.php) - one row
   shorter, so the card, and everything below the hero, sat at a different
   height than on the other 7 pages.

   view_destinations.php now renders a spacer row in that row's place instead
   of nothing. Size it to exactly what the row it stands in for costs: a
   40px control (see the compacted field-sizing rules above) plus the row's
   own mb-3, compacted to 8px. */
.trv-pack-bnr-form .inquireSection .trv-enquiry-row-spacer {
    height: 40px;
}

/* ------------------------------------------------------------------
   TOUR/CRUISE DETAIL PAGE - GALLERY SLIDER PAGINATION
   (Packages/view.php, Cruises/view.php - .trv-detail-slider .trv_d-slider)
   swiper-bundle's base ".swiper" rule sets overflow:hidden, and the theme
   positions ".swiper-pagination" 8px from the *inside* bottom edge of that
   same box - so the dots sit on top of the last few pixels of the photo
   instead of below it, and the row-of-dots background (inactive bullets are
   black at 20% opacity - practically invisible on a busy photo) reads as
   half missing rather than as pagination.

   Give the slider dedicated space below the photo for the dots to sit in,
   outside the clipped image area, and make both states clearly visible
   against the white background that space sits on.

   Needs !important: the earlier ".swiper { padding: 0 !important; }" reset
   near the top of this file (for the swiper-nav-center-bottom carousels)
   applies here too and otherwise wins regardless of this selector's higher
   specificity - !important beats specificity, not the other way round. */
.trv-detail-slider .trv_d-slider {
    padding-bottom: 56px !important;
}

.trv-detail-slider .swiper-pagination {
    bottom: 28px;
}

.trv-detail-slider .swiper-pagination-bullet {
    background: #cbd5e1;
    opacity: 1;
    width: 9px;
    height: 9px;
}

.trv-detail-slider .swiper-pagination-bullet-active {
    background: #063268;
}

/* Starting-price badge over the top-left corner of the gallery photo.
   .trv_d-slider already carries Swiper's own base position:relative and
   overflow:hidden (swiper-bundle.min.css), so this anchors and clips
   cleanly against the photo without any extra wrapper. */
.trv_d-slider {
    position: relative;
}

.trv-detail-price-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background: #43a3bd;
    color: #1f2937;
    border-radius: 10px;
    padding: 8px 14px;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.trv-detail-price-badge .trv-detail-price-label {
    display: block;
    font-family: "Figtree", sans-serif;
    font-size: 11px;
    font-weight: 500;
}

.trv-detail-price-badge .trv-detail-price-amount {
    display: block;
    font-family: "Afacad", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

/* Nav arrows, below the pagination dots rather than Swiper's own default
   (vertically centred against the photo's left/right edges - the photo is
   the whole point of the slide, so arrows sitting on top of it get in the
   way). First pass put both dots and arrows in the same 34px footer strip
   at the same bottom offset, which overlapped them - the strip is now 56px
   (padding-bottom rule above) with the dots pushed up to the top of it
   (bottom: 28px) and the arrows kept at the very bottom (bottom: 0),
   leaving a clear ~4px gap between the two rows. */
.trv-detail-slider .swiper-button-next,
.trv-detail-slider .swiper-button-prev {
    top: auto;
    bottom: 0;
    width: 24px;
    height: 24px;
    margin-top: 0;
    color: #063268;
}

.trv-detail-slider .swiper-button-next:after,
.trv-detail-slider .swiper-button-prev:after {
    font-size: 14px;
    font-weight: 700;
}

.trv-detail-slider .swiper-button-prev {
    left: calc(50% - 55px);
    right: auto;
}

.trv-detail-slider .swiper-button-next {
    right: calc(50% - 55px);
    left: auto;
}

/* .navbar-one (Panoramica/Itinerario/Prezzi/Informazioni) already jumps to
   each #section on click (custom.js) - style.css gives it no ".active"
   state at all, though, so every tab always looks identical regardless of
   which section is actually on screen. Reads as the tabs not really being
   wired to the content they're supposed to represent. custom.js now toggles
   this class on click and via scroll-spy - just the highlight itself here. */
.navbar-one a.active {
    background-color: #063268;
    color: #fff;
}

/* A bit more polish on the tab bar itself: Afacad to match every other
   button/nav label on the site (style.css leaves it on the body default),
   a softer shadow so it reads as a raised bar rather than a flat block,
   and fully rounded pill links to match .site-button elsewhere. */
.navbar-one {
    box-shadow: 0 12px 30px rgba(6, 50, 104, 0.18);
}

.navbar-one a {
    font-family: "Afacad", sans-serif;
    border-radius: 100px;
}

/* style.css shrinks this bar hard on phones - 12px text in a 4px/6px box,
   which came out as 26px-tall tabs: well under a comfortable tap target,
   and small enough that the bar reads as a caption rather than the section
   nav it is. Scale the links back up (~42px tall) and give the bar a little
   more room around them to match. */
@media (max-width: 767px) {
    .navbar-one {
        gap: 8px;
        padding: 12px;
    }

    .navbar-one a {
        font-size: 15px;
        padding: 10px 16px;
    }
}

/* ------------------------------------------------------------------
   PACKAGE/CRUISE COMPARE (tour-package.html ".trv-tour-compare" checkbox +
   confronta-pacchetti.php). The theme's own card markup already carries this
   checkbox pill - it just never did anything in the demo. See
   travlla/js/trv-compare.js for the behaviour; these rules are only for the
   parts the theme doesn't already style: the toast and the "Confronta" bar
   above the grid.
   ------------------------------------------------------------------ */
.trv-compare-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    z-index: 10000;
    max-width: 90vw;
    background: #063268;
    color: #fff;
    font-family: "Afacad", sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 100px;
    box-shadow: 0 12px 30px rgba(6, 50, 104, 0.35);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.trv-compare-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* The plain add/remove confirmation is display-only (pointer-events:none
   above, so clicks pass through to whatever's underneath) - once 2+ items
   are selected the toast carries a real link to the compare page instead
   (trv-compare.js), so it needs to be clickable. */
.trv-compare-toast.trv-compare-toast--action {
    pointer-events: auto;
}
.trv-compare-toast-link {
    display: inline-block;
    margin-left: 10px;
    padding-bottom: 1px;
    color: #43a3bd;
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;
}
.trv-compare-toast-link:hover {
    color: #fff;
}

/* "Confronta" bar sitting above the masonry grid. Present but inert at 0
   selected - a disabled-looking link would still be clickable without
   pointer-events, so grey it out and block interaction until there's
   something to compare. */
.trv-compare-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.trv-compare-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #43a3bd;
    color: #1f2937;
    font-family: "Afacad", sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 22px;
    border-radius: 100px;
    transition: 0.3s all ease;
    pointer-events: none;
    opacity: 0.45;
}

.trv-compare-bar.is-active .trv-compare-bar-btn {
    pointer-events: auto;
    opacity: 1;
}

.trv-compare-bar.is-active .trv-compare-bar-btn:hover {
    background: #063268;
    color: #fff;
}

.trv-compare-bar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    background: #063268;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.trv-compare-bar.is-active .trv-compare-bar-count {
    background: #fff;
    color: #063268;
}

/* The theme's own .trv-tour-compare pill assumes a dark-on-light card image -
   nothing to add for size/position, just make sure it sits above our own
   image treatment and reads as clickable. */
.trv-popular-tour-pakagenew .trv-tour-compare {
    cursor: pointer;
    z-index: 5;
}

.trv-popular-tour-pakagenew .trv-tour-compare input {
    cursor: pointer;
}

/* ------------------------------------------------------------------
   PACKAGE/CRUISE GRID - EQUAL-WIDTH COLUMNS AT EVERY BREAKPOINT
   The card markup only carries "col-xl-4 col-lg-6" - no base/md/sm class.
   Bootstrap's col-xl-4 and col-lg-6 are both behind min-width media queries
   (>=1200px and >=992px), so below 992px NEITHER applies: the card has no
   width rule of its own at all and sizes to its own content instead, which
   is exactly why cards were coming out different widths on tablet/mobile.

   Isotope's fitRows (percentPosition:true) then measures whatever width the
   browser already gave each card and writes it back as an inline
   "style=width:...%" - it reflects the inconsistency, it doesn't cause it,
   but it does mean a plain non-important override here would lose to that
   inline style. Every rule below needs !important to win against it. */
.masonry-wrap.row > .masonry-item {
    width: 100% !important;
}

@media (min-width: 576px) {
    .masonry-wrap.row > .masonry-item {
        width: 50% !important;
    }
}

@media (min-width: 992px) {
    .masonry-wrap.row > .masonry-item {
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
    .masonry-wrap.row > .masonry-item {
        width: 33.3333% !important;
    }
}

.masonry-wrap.row > .masonry-item {
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Packages/view_destinations.php: the grid sits in a col-lg-6 middle column
   flanked by an AddTwo banner on each side (.trv-package-with-sidebars
   row), half the container width the Cruises listing pages' 3-per-row grid
   assumes. Explicitly matching them at 3-per-row here too, even though
   that means narrower cards than a full-width 3-per-row would give -
   higher specificity than the site-wide rule above, needed since both are
   !important. Other listing pages (Cruises/*, no sidebars) are unaffected
   by this selector either way. */
@media (min-width: 1200px) {
    .trv-package-with-sidebars .masonry-wrap.row > .masonry-item {
        width: 33.3333% !important;
    }
}

/* ------------------------------------------------------------------
   PACKAGE LISTING SIDEBAR BANNERS (AddOne/AddTwo, Packages/view_destinations.php)
   Both still carry their original pre-Travlla styling: a flat 4px-radius
   corner and a plain cyan button (rgba(67, 163, 189, 1)) that match neither the
   tour cards' generous rounded corners/soft shadow nor the site's lime/teal
   button used everywhere else (.site-button, the enquiry form's submit).
   Restyle the chrome around them to match - the marketing images themselves
   (Add71.jpeg, Add3.webp) are static assets and outside CSS's reach.

   Needs !important: the rules being overridden are the page's own inline
   <style> block, which - despite living in this same template file - is
   written into the <body>, so the browser parses it after this external
   stylesheet's <link> in <head>. Equal specificity, later in the cascade:
   the inline block would otherwise win regardless of source-file layout. */
.AddTwo {
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px rgba(6, 50, 104, 0.15);
}

/* Pages/search.php's AddTwo carries Bootstrap's .sticky-top utility
   (position:sticky; top:0), so once scrolled it sticks to the top of the
   viewport, competing with the site header's own scroll-triggered
   position:fixed state for the same spot. Rather than chase that with an
   offset, just don't follow the scroll at all - the banner stays where it
   sits in the sidebar.

   Needs !important: the page's own inline <style> block re-declares
   ".sticky-top { position: sticky !important; }" (for view_destinations.php's
   unrelated use of the same class), and that block is written into <body>,
   so it's parsed after this external stylesheet's <link> in <head> - equal
   specificity, later in the cascade, would otherwise win regardless of
   source-file layout. */
.AddTwo.sticky-top {
    position: static !important;
}

/* Packages/view_destinations.php's AddOne, stacked below AddTwo in the
   right sidebar column - unlike AddTwo (kept static above), this one
   should follow the visitor down through the card grid. position:sticky
   naturally releases once its containing block (the column, stretched to
   the grid's full height by the row's default align-items:stretch) ends,
   which is right before the reviews section below - no manual scroll
   listener needed. top offset clears the site header once it goes
   position:fixed on scroll (~121px tall after the smaller-navbar pass). */
.trv-addone-sticky {
    position: sticky;
    top: 130px;
}

.add_banners .AddOne {
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(6, 50, 104, 0.15);
}

/* AddOne's own inline height:669px (Packages/view_destinations.php's page
   style) was sized for its old, much wider col-lg-3 row of its own - now
   that it's stacked under AddTwo in the same narrow col-lg-2 sidebar
   column, that height turns a 196px-wide column into a 196x669 sliver.
   AddTwo, right above it in the same column, comes out around 450px tall
   from its own content - matching that instead keeps the two banners
   visually paired rather than wildly different proportions. */
.trv-package-with-sidebars .AddOne {
    height: 420px !important;
}

/* AddOne's "Prenota ora" is a bare <span> (the whole banner is already one
   big <a>); AddTwo's is a real <a> of its own - style both. */
.add_banners .AddOne .add_link span,
.add_banners .AddOne .add_link a,
.AddTwo .add_link a {
    display: inline-block;
    background: #43a3bd !important;
    color: #1f2937 !important;
    font-family: "Afacad", sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 100px !important;
    padding: 10px 28px;
    transition: 0.3s all ease;
}

.add_banners .AddOne:hover .add_link span,
.add_banners .AddOne .add_link a:hover,
.AddTwo .add_link a:hover {
    background: #063268 !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------
   TOUR/CRUISE DETAIL PAGE - NAVBAR-ONE STICKY OVERLAP
   (Packages/view.php, Cruises/view.php)
   The theme makes this anchor nav position:sticky (top:120px) so it tracks
   the visitor while they scroll through Panoramica/Itinerario/Prezzi/
   Informazioni. It's meant to detach once its parent (.trv-inr-para2) scrolls
   out of view - but that parent's real height depends on how much real CMS
   content each package/cruise actually has (itinerary day count, trip-info
   entries, etc.), which varies a lot and isn't the fixed-height demo content
   the theme was built against. On a package with a short main column but a
   tall sidebar (the enquiry form + related-packages widget keep the row
   itself open), the nav can still be "stuck" once the page has scrolled well
   into "Tour correlati" below, and render on top of it.

   The anchor-jump behaviour (custom.js's smooth-scroll handler) is the part
   that actually matters here, not follow-while-scrolling - drop the sticky
   positioning so the nav can never end up floating over unrelated content
   further down the page. */
.navbar-one {
    position: static !important;
    top: auto !important;
}

/* Call/email top-bar (header.php): Font Awesome's phone-alt glyph faces left
   by default - mirror it so the handset points right, toward the number. */
.top-bar .wt-topbar-left-info li .fa-phone-alt {
    display: inline-block;
    transform: scaleX(-1);
}

/* ------------------------------------------------------------------
   HOME "ACHIEVEMENT" SECTION VIDEO CARD (trv-achivment-section)
   .video-section previously had no size/background of its own - the play
   button's absolute positioning (.play-now-video .icon/.ripple) just fell
   through to the nearest *positioned* ancestor, .parallax-content, and
   centered on the whole section instead.

   First pass gave .video-section a fixed 640x360 card size, sitting as a
   smaller box centered over the section - the ask was for the thumbnail to
   fill the whole section instead. Reusing the section's own background layer
   (.trv-vid-st2.parallax-image, which currently shows the theme's placeholder
   "1620 x 800" dummy graphic) was tried and reverted: that class carries
   opacity:0.5 site-wide (meant for a background texture sitting under other
   content, not a vivid photo), so the real thumbnail would render washed out.

   Instead, .video-section is now itself a full-bleed absolutely-positioned
   layer (inset:0) on top of that dimmed placeholder, at full opacity, filling
   the same rounded box (.trv-achivment-row's own overflow:hidden clips it to
   the 60px rounded corners - .video-section doesn't need its own radius).
   inset:0 resolves directly against .parallax-content's definite size, which
   sidesteps the 0x0 collapse the earlier percentage-width attempt hit (see
   git history) - an absolutely-positioned box with all four inset sides set
   doesn't need an intrinsic size to size itself from. */
.video-section {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Dims the thumbnail a little so the white play icon/ripple (both already
   z-index:1, and now positioned relative to .video-section, the nearest
   positioned ancestor) stay legible against a bright frame of the video.

   pointer-events:none is required, not optional: the play button <a> itself
   (.video-section a, in style.css) has no z-index of its own - only its
   .icon/.ripple children do - so this pseudo-element, later in paint order,
   was intercepting every click meant for the link underneath it (confirmed
   via a real click test: Playwright's actionability check reported
   ".video-section intercepts pointer events" on every attempt). The icon and
   ripple were still visually showing through because they're semi-
   transparent/small, which is why this looked like a working button that
   silently did nothing. */
.video-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* The theme's step-corner triangle ("01"/"02"/"03" badges in the
   "Offriamo i Migliori Servizi" cards) expects a <span>Step</span> label
   before the number (style.css .trv-step-corner span, padding-top:48px).
   That label was dropped here since it's untranslated English, but its
   padding was the only thing pushing the number down into the wide part
   of the triangle - without it the number renders at the triangle's
   pointy top tip, in a ~10px sliver too narrow to be visible. Restoring
   the offset directly on .number instead of reintroducing the label. */
.trv-servi-bx1 .trv-step-corner-bx .trv-step-corner .number {
    display: block;
    padding-top: 54px;
}

/* .tvr-large-title-st1 .lg-title is a decorative giant-text heading
   (style.css: 160px, single fixed size down to 60px at very narrow
   widths). The theme's own demo content for this slot is "Search" - one
   short word. "Attrazioni" is longer and, being a single word with no
   space to wrap at, was overflowing past the column/viewport edge and
   getting clipped by body's overflow-x:hidden instead of ever wrapping.
   A viewport-relative (vw) size doesn't track this reliably, since the
   column's own width isn't a fixed fraction of the viewport at every
   Bootstrap breakpoint - measured "ATTRAZIONI" needs ~6.12px of width
   per 1px of font-size, so tie font-size directly to the column's own
   width via a container query unit (14% of it stays safely under the
   ~16.3% break-even point). overflow-wrap stays as a last-resort net
   for any browser without cqi support (falls back to the 40px min). */
.trv-popular-search .tvr-large-title-st1 {
    container-type: inline-size;
}
.trv-popular-search .tvr-large-title-st1 .lg-title {
    font-size: clamp(40px, 14cqi, 160px);
    overflow-wrap: break-word;
    max-width: 100%;
}

/* .trv-tour-title (the dark overlay bar at the bottom of each tour-card
   image) was only as tall as its own title text - style.css gives it no
   height of its own, just padding. Since real package titles run from
   one word to a full sentence, that made every card's overlay a
   different height, breaking the row's alignment. Fix the bar to a
   height that fits exactly 2 lines at each breakpoint's font-size
   (28px/1.2 line-height desktop, 22px below 1199px) and center shorter,
   single-line titles inside it; -webkit-line-clamp is the safety net
   for any title long enough to want a 3rd line. */
.trv-popular-tour-st1 .trv-media .trv-tour-title {
    height: 100px;
    display: flex;
    align-items: center;
}
.trv-popular-tour-st1 .trv-media .trv-tour-title .trv-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
@media (max-width: 1199px) {
    .trv-popular-tour-st1 .trv-media .trv-tour-title {
        height: 84px;
    }
}

/* The price used to sit beside .trv-tour-info here (style.css reserves 90px
   for it via calc(100% - 90px)), but it's now moved to the bottom row (see
   .trv-content-bottom-section .trv-tour-price below), so the description
   gets the section's full width. Clamped to a fixed 3 lines - same reasoning
   as the title bar above: cards must be the same size regardless of content
   length, and a variable-length description was the one remaining piece
   that could still make two cards' overall height differ. */
.trv-popular-tour-st1 .trv-content .trv-content-head-section .trv-tour-info {
    width: 100%;
    line-height: 1.3;
    min-height: calc(1.3em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price, moved out of .trv-content-head-section (see above) into the
   bottom-left of the card, with "Prenota Ora" opposite it on the right -
   .trv-content-bottom-section is already flex + space-between, so the two
   just needed reordering in the markup (trv-tour-price now first). */
.trv-popular-tour-st1
    .trv-content
    .trv-content-bottom-section
    .trv-tour-price
    .price {
    color: #43a3bd;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 900;
    display: block;
}
.trv-popular-tour-st1
    .trv-content
    .trv-content-bottom-section
    .trv-tour-price
    .price-duration {
    font-size: 13px;
    display: block;
}

/* EQUAL CARD HEIGHT, BELT AND SUSPENDERS
   The title bar and description above are now both clamped to a fixed
   line count, so every card's own natural height already comes out
   identical - this is a second layer on top of that: if Swiper's slide-
   stretching (.swiper-wrapper is flex, .swiper-slide is height:100%, no
   autoHeight) does apply, making the card and .trv-content a height:100%
   flex column with the bottom row pinned via margin-top:auto means the
   card fills that stretched slide too, instead of leaving a gap under a
   shorter card sat inside an equally-tall slide. */
.trv-popular-tour-st1 {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.trv-popular-tour-st1 .trv-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.trv-popular-tour-st1 .trv-content .trv-content-bottom-section {
    margin-top: auto;
}

/* .trv-for-summer-text-wrap used to hold a short rotated "In Egitto!"
   caption, positioned with style.css's position:absolute so it sat
   inside the illustration's circle without affecting its layout.
   Swapped for a real "Contattaci" button, which shouldn't float on top
   of the girl/balloon illustration the way the decorative text did -
   taking it out of absolute positioning drops it back into normal flow,
   right after the illustration's img (the only other non-absolute child
   of .trv-for-summer-section), so it renders as its own row below the
   artwork instead of overlapping it. */
.trv-for-summer-section .trv-for-summer-text-wrap {
    position: static;
    width: auto;
    margin-top: 30px;
    text-align: center;
}

/* ------------------------------------------------------------------
   SUB-PACKAGE/CRUISE HERO ENQUIRY FORM - PULLED OUT OF THE GRID
   /Crociera/css/listtours/style.min.css (a legacy, pre-Travlla stylesheet
   still loaded on every page) carries a bare rule from the old banner
   design:
       .fromHeader { position:absolute; top:145px; right:35px; z-index:9; }
   Destinations/view.php and Pages/search.php still use the old
   .landPageHeader banner .fromHeader was built for, so that rule is still
   correct there and is left alone.

   But the new Travlla hero (.trv-tr-pack-bnr-wrap, used by
   Packages/view_destinations.php - which every sub-package page except
   the 3 Cruises-controller ones routes through - and by Cruises/index.php,
   lago_nasser.php and dahabeya_egitto.php) puts its enquiry card in a
   Bootstrap column via a div carrying BOTH "trv-pack-bnr-form" and
   "fromHeader". It inherits that same fixed absolute position, so instead
   of sitting in its col-lg-5 it's pinned near the top of the banner -
   overlapping the nav above it - and its column, now containing only an
   out-of-flow child, collapses to 0 height.

   Scoped to .trv-tr-pack-bnr-wrap so the old banner's own .fromHeader
   positioning is untouched; putting this one back in normal flow lets the
   Bootstrap grid place it the way the rest of the row already assumes it
   will be. (The nav no longer floats over this banner at all, so the row's
   own top padding is just normal spacing now, not header clearance.)

   On mobile, all 4 of these templates (view_destinations.php and the 3
   Cruises ones) echo this same form a second place - .trv-mobile-inquire,
   below the package/cruise grid instead of in the hero - so it needs the
   same normal-flow fix there too, or it inherits the same stray absolute
   positioning and floats over the filter bar/cards below it. */
.trv-tr-pack-bnr-wrap .trv-pack-bnr-form,
.trv-mobile-inquire .trv-pack-bnr-form {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
}

/* .inquireSection's dark glass (rgba(64,64,64,0.3) + blur) is built to sit
   over the hero photo - moved down here, with only the page's plain
   background behind it, the blur has nothing to soften and the tint just
   reads as a flat, low-contrast grey card (its labels/heading are white).
   Give it a solid card of its own instead, in the site's teal, so the white
   text stays readable and it looks placed rather than accidentally faded. */
.trv-mobile-inquire .inquireSection {
    background: #063268;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ------------------------------------------------------------------
   TRIPADVISOR BADGES - "WE RECOMMEND" SECTION
   .trv-hpy-cus is already display:flex (style.css), so the badge next to
   the happy-customers count just needs to be another flex item. The one
   under the years-of-experience counter sits in normal document flow as
   the next sibling - .trv-year-section2 itself is position:absolute on
   desktop (rotated -90deg text along the right edge), so it's taken out
   of flow and doesn't push this badge down there; that's fine since the
   badge isn't meant to trail the rotated text visually, just to render
   after it in markup.
   ------------------------------------------------------------------ */
.trv-tripadvisor-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
}

.trv-tripadvisor-badge img {
    height: 26px;
    width: auto;
}

.trv-tripadvisor-badge-year {
    display: inline-block;
    margin-top: 16px;
}

.trv-tripadvisor-badge-year img {
    height: 30px;
    width: auto;
}

/* VIDEO-WITH-ACHIEVEMENT COUNTER ROW
   Only 3 of the theme's usual 4 counter columns are used here (col-lg-3 x3
   = 9/12), so Bootstrap's default row leaves them left-aligned with a gap
   on the right instead of centered. */
.trv-vid-st2-counter .row {
    justify-content: center;
}

/* Below lg (992px) the theme's own grid (col-md-6/col-sm-6/col-6) wraps the
   3 counters two-per-row, stranding the 3rd counter alone on its own line.
   Force all 3 into one row instead, and since there's no icon-left/text-right
   room left at a third of the width, stack icon/label/number and center
   them - matching how the theme itself handles this row below 400px, just
   extended to the whole sub-992px range now that the column is this narrow
   everywhere in it. */
@media (max-width: 991px) {
    .trv-vid-st2-counter .row > [class*="col-"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    /* The theme's .m-b30 column margin exists only to separate the wrapped
       2nd row from the 1st - with a single row now, it's pure trailing
       space that the container's height:auto (see style.css) would turn
       into an empty band under the counters. */
    .trv-vid-st2-counter .row > .m-b30 {
        margin-bottom: 0;
    }

    .trv-counter-outer-one {
        display: block !important;
        text-align: center;
    }
    .trv-counter-outer-one .trv-counter-media {
        width: 30px;
        min-width: 0;
        margin: 0 auto 10px;
    }
    .trv-counter-outer-one .trv-icon-content-info .trv-icon-title {
        font-size: 13px;
        line-height: 1.25;
        margin-bottom: 4px;
    }
    .trv-counter-outer-one .counter-out,
    .trv-counter-outer-one .counter-out b,
    .trv-counter-outer-one .counter {
        font-size: 18px;
    }
}

/* FOOTER NEWSLETTER FORM
   .ftr-nw-form-cs-wrap (the theme's "text button" newsletter variant, from
   coming-soon.html) is normally a standalone block, free to size itself
   against the page. Here it's one of two flex children in
   .trv-subscribe-nl .container (the other being .trv-left-section), and
   .trv-left-section has no width of its own above the theme's 991px
   breakpoint - it just takes whatever its content's natural (max-content)
   width is, which for an 80px script heading is most of the row, leaving
   the newsletter pill squeezed into whatever's left over despite flex:1
   (flex-grow only distributes space beyond each item's own hypothetical
   size, and the heading's is already large). Capping the heading column's
   width gives the form real room for a full email address plus the
   "Iscriviti ora" button. */
@media (min-width: 992px) {
    .trv-subscribe-nl .container .trv-left-section {
        max-width: 600px;
    }
}
.trv-subscribe-nl .ftr-nw-form-cs-wrap {
    flex: 1;
    width: 100%;
}
@media (max-width: 767px) {
    .trv-subscribe-nl .ftr-nw-form-cs-wrap {
        margin: 0;
    }
}

/* /Crociera/css/style.min.css (legacy, pre-Travlla, still loaded on every
   page) carries a bare-element reset: button{background-color:inherit
   !important}. It wins over style.css's .ftr-nw-subcribe-btn rule despite
   lower specificity because of the !important, so the button was rendering
   with no visible background at all (inheriting its parent's, which has
   none set) - just invisible white-on-white text. Needs !important of its
   own, on the more specific selector, to win back. */
.ftr-nw-form-cs .ftr-nw-subcribe-btn {
    background-color: #063268 !important;
}
.ftr-nw-form-cs .ftr-nw-subcribe-btn:hover {
    background-color: #43a3bd !important;
}

/* FOOTER "CONTATTACI" ICONS SHOWING AS MISSING-GLYPH BOXES
   style.css's .footer-dark .widget_address li i forces font-weight:400
   (the "Regular" Font Awesome style), presumably written for whichever
   icons the theme's own demo footer used. But Font Awesome Free's Regular
   style is a small subset - fa-phone-alt, fa-map-marker-alt and
   fa-file-invoice only exist in the Solid (900) style, so at weight 400
   the browser has no glyph to show at all (fa-envelope happens to exist in
   both, which is why it alone rendered correctly). Same selector
   specificity as the rule above, but this file loads after style.css, so
   restoring 900 here wins on source order without needing !important. */
.footer-dark .widget_address li i {
    font-weight: 900;
}

/* SMALLER FOOTER
   The theme's default vertical rhythm here is generous: .footer-dark and
   .footer-top each add their own 80px top padding (160px combined before
   any content even starts), the newsletter bar's own padding adds another
   layer on top of that, widgets space themselves out by 40px, and the
   copyright bar has 40px top/bottom padding. Trimmed throughout rather
   than in one spot, so the whole footer reads more compact instead of
   just moving the bulk around. A second pass (padding alone wasn't moving
   the needle much further) also shrinks the newsletter's 80px script
   heading down to the 50px size the same font uses elsewhere on the site
   (.trv-hor-add-mid) - it was the single largest contributor to the
   section's height.

   background-image here is the site's own Egypt skyline illustration,
   replacing the theme's generic ftr-dark-bg.png texture. A plain
   background-image can't take its own opacity without fading the footer's
   text and links along with it (opacity applies to the whole element) - a
   second background layered on top instead, a flat wash of the section's
   own teal at partial transparency, stacks over the photo and mutes it
   while leaving the content layer untouched. */
.footer-dark {
    padding-top: 20px;
    background-image:
        linear-gradient(rgba(6, 50, 104, 0.75), rgba(6, 50, 104, 0.75)),
        url(/Crociera/img/footer.webp);
}
/* footer.webp is a wide landscape crop - on narrow viewports the skyline
   gets stretched/cropped oddly. footer-mobile.webp is a tall crop of the
   same illustration, composed for a phone-width aspect ratio instead. */
@media (max-width: 767px) {
    .footer-dark {
        background-image:
            linear-gradient(rgba(6, 50, 104, 0.75), rgba(6, 50, 104, 0.75)),
            url(/Crociera/img/footer-mobile.webp);
    }
}
.footer-dark .footer-top {
    padding-top: 20px;
}
.footer-dark .widget {
    margin-bottom: 16px;
}
.footer-dark .footer-bottom {
    padding: 12px 0px;
}
.trv-subscribe-nl .container {
    padding: 10px 30px;
}

/* Below 767px the container switches from a single row (heading | form) to
   4 stacked blocks (heading, subtitle, input, button - the button gets its
   own margin-top:10px and goes position:static/width:100% here per
   style.css). The 10px vertical padding above reads fine for one row, but
   is nowhere near enough once there's 4 stacked elements - the "Iscriviti
   ora" button ended up sitting almost flush with the card's rounded bottom
   edge, reading as if it bled into the footer content underneath. */
@media (max-width: 767px) {
    .trv-subscribe-nl .container {
        padding: 25px 30px 30px;
    }
}
.trv-subscribe-nl .trv-nl-large-text {
    font-size: 50px;
    line-height: 1;
    padding-bottom: 10px;
}
.trv-subscribe-nl .trv-nl-title {
    font-size: 16px;
}
.trv-subscribe-nl .trv-nl-section,
.ftr-nw-form-cs-wrap {
    height: 56px;
}
.ftr-nw-form-cs .form-control,
.ftr-nw-form .form-control {
    height: 44px;
}
/* BUTTON FLUSH WITH THE END OF THE FIELD
   Three separate things were each leaving a sliver of the wrap's light
   background visible around the button's rounded right end, and removing
   only some of them still read as "unchanged":

   1. style.css's own right:5px offset on the button.
   2. .ftr-nw-form-cs-wrap's 6px padding (the light ring around the white
      pill) - the button positions against .ftr-nw-form-cs *inside* that
      padding, so right:0 alone still stopped 6px short of the real edge.
   3. Height/radius mismatch: at 44px tall inside a 56px wrap the button was
      inset 6px top and bottom, and its corner arc (capped at half of 44px)
      curved tighter than the wrap's (capped at half of 56px) - so even with
      the box edges aligned, the wrap's background showed as a crescent
      around the button's end.

   Filling the wrap's full height (top:-6px cancels the wrap's top padding)
   makes both ends semicircular at the same 28px effective radius, so the
   button's right end traces the wrap's exactly and terminates the field. */
.ftr-nw-form-cs .ftr-nw-subcribe-btn {
    height: 56px;
    top: -6px;
    right: 0px;
}
.ftr-nw-form-cs-wrap {
    padding-right: 0px;
}

/* Below 575px style.css's own rules drop the button out of the input (see
   the theme's ".ftr-nw-form-cs .ftr-nw-subcribe-btn{position:static;
   width:100%}" above) and stack it underneath instead, so the wrap needs
   room for the input AND the button below it - but the fixed 56px height
   just above is sized for the single-row desktop layout (input and button
   overlaid), not stacked content, so the button was overflowing past the
   wrap's bottom instead of the wrap growing to fit it. */
@media (max-width: 575px) {
    .ftr-nw-form-cs-wrap {
        height: auto;
    }
}

/* NAV SUBMENU RENDERING BEHIND PAGE CONTENT ON NON-HOME PAGES
   Root cause is one level up from where it looks: .header-nav itself
   (style.css) is position:relative; z-index:10 - that's what actually
   establishes a stacking context here, not the submenu. Everything inside
   .header-nav, including .sub-menu regardless of ITS OWN z-index, is
   confined to compete only within that context; the context as a whole
   then competes against the rest of the page using .header-nav's z-index
   of 10. <header> itself is position:static (default.php's non-home
   override, so the header sits in normal flow instead of floating over
   the hero) - and z-index on a statically-positioned element is simply
   ignored, so it contributes nothing here.

   On the home page nothing else on the page has a competing z-index, so
   this was never visible. On sub-package pages, the hero's own content
   layer (.trv-tr-pack-bnr-wrap > .container, z-index:20 - lifted above
   the banner's dark overlay) sits in that same root stacking context at
   20, beats .header-nav's 10, and paints over the dropdown - which was
   still opening on hover, just hidden behind the hero photo except for a
   sliver in the gap between the header and the banner.

   Fixing it means raising the z-index that actually reaches the root
   context: .header-nav's own, not the submenu's. */
.header-style-1 .header-nav {
    z-index: 1000;
}

/* SUB-PACKAGE HERO ENQUIRY FORM - PUSH TO THE RIGHT EDGE
   Two layers of inset were between the form and the true right edge of
   the viewport:
   1) The col-lg-5 column's own Bootstrap gutter, inset from the
      .container's edge - dropped so the card's right edge sits flush
      against the container boundary.
   2) The .container itself is Bootstrap's standard capped-width,
      centered box (max-width:1320px at this breakpoint, leaving a 60px
      margin on either side at 1440px viewport width) - the same margin
      every other page's container has, but here it was the last thing
      keeping the form off the true edge. Letting just this hero's
      container go full-width removes that margin on the right, while a
      matching left padding keeps the title column's own inset looking
      the same as before. */
.trv-tr-pack-bnr-wrap .trv-pack-bnr-row > .col-lg-5 {
    padding-right: 0;
}
.trv-tr-pack-bnr-wrap > .container {
    max-width: 100%;
    padding-left: 60px;
    /* 30px, not 0: .row inside carries Bootstrap's usual -12px negative
       margin (gutter compensation), which needs at least 12px to absorb
       it without overflowing past the viewport's true edge - the rest
       (18px) is a deliberate small gap so the card doesn't sit perfectly
       flush against the screen edge. */
    padding-right: 30px;
}
/* Smaller card: was filling the whole col-lg-5 (568px at 1440px viewport) -
   capping it gives some breathing room on its left too, instead of the
   card stretching edge-to-edge of its column. Scoped to the hero banner
   specifically - Packages/view.php's sidebar also carries the
   .trv-pack-bnr-form class and should keep filling its own column. */
.trv-tr-pack-bnr-wrap .trv-pack-bnr-form {
    max-width: 480px;
    margin-left: auto;
}
@media (max-width: 767px) {
    .trv-tr-pack-bnr-wrap > .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* PACKAGE DETAIL PAGE HERO TITLE - CENTERED
   Packages/view.php's hero has no enquiry form or two-column row like the
   listing pages' .trv-pack-bnr-row - just a plain .container wrapping
   .trv-search-st5, so text-align:center alone isn't enough: style.css's
   own .trv-search-st5 already centers its *text*, but an earlier fix here
   (".trv-tr-pack-bnr-wrap .trv-search-st5 {margin:0}") zeroed out its
   margin:0-auto self-centering too, so the whole 650px-wide title block
   still sits flush left - needed there so the listing pages' title (which
   sits deliberately next to the form on its right) isn't auto-centered,
   but it catches this simpler hero via the same class. Restoring the
   margin here, on the more specific selector, undoes that just for this
   shape (a plain .container > .trv-search-st5, no .trv-pack-bnr-row
   involved), leaving the listing pages' title untouched. */
.trv-tr-pack-bnr-wrap > .container > .trv-search-st5 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Wikis/index.php, Articles/index.php and Pages/search.php build the
   identical "Chiedi Preventivo" sidebar (#formInquery / .inquireSection /
   .headerInquery) but without the .trv-pack-bnr-form wrapper class, so the
   compaction/re-color rules above (all scoped to that class) never reached
   them - they kept rendering each page's own original inline <style>
   block untouched: dark glass card, Figtree, 46px fields. That's the
   correct, wanted look (confirmed against a reference screenshot), so
   nothing needs overriding here after all - no rule block, on purpose. */

/* PACKAGE DETAIL SIDEBAR - STARTING PRICE BANNER
   Plain white card above the enquiry form: just the starting price, no
   button/CTA of its own (the form right below it already has one). */
.trv-side-price-banner {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(6, 50, 104, 0.15);
    padding: 20px 24px;
    margin-bottom: 20px;
    text-align: center;
}

.trv-side-price-banner .trv-side-price-label {
    display: block;
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #063268;
    margin-bottom: 6px;
}

.trv-side-price-banner .trv-side-price-amount {
    font-family: "Afacad", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #063268;
}

.trv-side-price-banner .trv-side-price-person {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    color: #4b5563;
    margin-left: 6px;
}

/* ENQUIRY FORM RECAPTCHA - OUT OF THE VISIBLE FORM
   data-size="invisible" should render as nothing until it needs to challenge
   the visitor, but the site key isn't authorised for localhost - so on any
   local dev domain Google renders its own "reCAPTCHA has been disabled for
   this domain" debug badge here instead. That badge is real content sitting
   inside a .form-group between two real fields, so it was pushing them apart
   and getting mistaken for a broken/misplaced field, on every one of the ~12
   templates that embed this same enquiry form.

   Pulling the container out of flow removes it (and Google's debug badge)
   from the form's visible layout everywhere at once, without moving the
   underlying <div id="recaptcha"> in ~12 separate template files - it isn't
   the widget's markup that needs to move, just where the browser paints it.
   grecaptcha only needs the element to exist in the DOM (it's driven by id
   via .execute()/.render(), not by any particular position), and the actual
   challenge popup Google shows on a real trigger is appended to <body> as
   its own overlay, not confined to this container, so this doesn't affect
   that when the domain is properly configured on the live site. */
.g-recaptcha {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   PACKAGE/CRUISE DETAIL - PANORAMICA & SERVIZI DELLA CROCIERA
   (Packages/view.php, Cruises/view.php)
   The last holdout of the pre-Travlla page: a plain black heading, bare
   Figtree body text, and (cruises only) icon+label pairs in the old cyan
   (#43A3BD - not this redesign's #063268) with no card/chip treatment at
   all. Everything else on this page - the itinerary timeline, the
   includes/excludes card, the price banner - was already redone with the
   teal/orange/cream palette and Afacad/Figtree pairing used site-wide;
   these two sections were the only ones left behind.

   Needs !important: the rules being overridden (.layoutviews h3,
   .layoutviews .content_overview, .toggle-btn, .iconBox and its children)
   live in each page's own inline <style> block. Despite sitting above the
   HTML in the template's PHP source, that block is captured by the layout
   system and written into <body>, so the browser parses it after this
   external stylesheet's <link> in <head> - equal specificity, later in the
   cascade, so it would otherwise win regardless of source file layout. */
.trv-overview-title {
    font-family: "Afacad", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #063268 !important;
    margin-bottom: 20px !important;
    position: relative;
    padding-left: 18px;
}
.trv-overview-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 5px;
    border-radius: 100px;
    background: #43a3bd;
}

.trv-overview-body {
    border-bottom: 0 !important;
}
.trv-overview-body .content_text {
    font-family: "Figtree", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: #444 !important;
}
.trv-overview-toggle {
    font-family: "Afacad", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #063268 !important;
    transition: 0.3s color ease;
}
.trv-overview-toggle:hover {
    color: #43a3bd !important;
}

/* Servizi della crociera: bare icon+label pairs become chips - a small
   circular teal icon badge on a cream pill, matching the itinerary
   timeline's own cream/teal/orange treatment directly above it on the page. */
.trv-service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.trv-service-chip {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    background: #f1f5f9;
    border-radius: 100px;
    padding: 8px 20px 8px 8px;
    margin: 0 !important;
}
.trv-service-chip i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #063268;
    color: #fff !important;
    font-size: 15px !important;
}
.trv-service-chip span {
    font-family: "Figtree", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1f2937 !important;
}

/* "Cosa è incluso e cosa no" (Packages/view.php, Cruises/view.php) - column
   titles above each list. Reuses the same check/cross-circle treatment as
   the list items themselves (.trv-inc-exc-col li::before, same file) at
   heading size, so the two columns read as labelled "comprende"/"non
   comprende" groups rather than two unlabelled checklists side by side. */
.trv-inc-exc-col-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Afacad", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #063268;
    margin-bottom: 20px;
}
.trv-inc-exc-col-title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
}
.trv-inc-exc-included .trv-inc-exc-col-title::before {
    content: "\f00c";
    background: #43a3bd;
}
.trv-inc-exc-excluded .trv-inc-exc-col-title::before {
    content: "\f00d";
    background: #cbd5e1;
}

/* Below 767px the card drops to a single column (the templates' own media
   query), which stacks "La quota non comprende" directly under the last
   line of the "comprende" list. Because the column title deliberately wears
   the same circle-icon treatment as the list items above it, that heading
   then reads as just one more row of the first list instead of the start of
   the opposite one - there is nothing in a 24px gap to say the meaning has
   flipped from included to NOT included, which is the one distinction this
   whole block exists to make.
   Side by side the two columns separate themselves, so this is mobile-only:
   a rule across the stack, and enough room around it that the second group
   reads as its own section. */
@media (max-width: 767px) {
    .trv-inc-exc-col + .trv-inc-exc-col {
        border-top: 1px solid #94a3b8;
        padding-top: 28px;
    }
}

/* ------------------------------------------------------------------
   MOBILE NAV DRAWER - CANCELLED-OUT SLIDE-IN OFFSET
   The theme's own "sider drawer" mobile menu slides .header-nav in from
   left:-250px (closed) to left:15px (open) - a 15px gap from the screen
   edge once open. But a separate, unconditional style.css rule also gives
   .header-nav margin:0 -15px at this breakpoint (meant for the theme's
   *other* mobile menu variant, "mobile-full-width-menu", where the
   negative margin cancels Bootstrap's container gutters instead). Since
   this site only uses the sider-drawer variant, that margin still applies
   here too and exactly cancels the 15px left offset (position:fixed's
   margin box sits at left:15px, then margin-left:-15px pulls the actual
   border box back to 0) - the drawer opened flush against the screen edge
   instead of with its intended small inset. */
@media (max-width: 991px) {
    .header-style-1.mobile-sider-drawer-menu .header-nav {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Site preference: flush against the screen edge instead of the theme's
   15px inset once the cancelled-out margin above stopped hiding it. */
@media (max-width: 991px) {
    .header-style-1.mobile-sider-drawer-menu.active .header-nav {
        left: 0;
    }
}

/* Divider lines between the drawer's nav items - the theme ships them as
   plain stacked rows with no separator, which reads as a flat, low-contrast
   block of text. A hairline under each item breaks the list up and gives
   every link its own clearly bounded tap target. */
@media (max-width: 991px) {
    .header-style-1 .header-nav .nav.navbar-nav > li {
        border-bottom: 1px solid rgba(6, 50, 104, 0.15);
    }
    .header-style-1 .header-nav .nav.navbar-nav > li:last-child {
        border-bottom: none;
    }
}

/* ------------------------------------------------------------------
   MOBILE FLOATING CTA ("Chiedi Preventivo!") - .button_moblie
   The mobile equivalent of the desktop header's "Personalizza il tuo
   viaggio" button (that one is hidden below the drawer breakpoint), fixed
   to the bottom of the screen on every page. Still in the pre-redesign
   cyan/navy (#43A3BD / #063268) from style.css/style.min.css - recolored
   here to the teal/orange pairing used for every other primary CTA
   site-wide, rather than editing those legacy stylesheets directly. */
.button_moblie {
    background: #063268 !important;
}
.button_moblie button {
    background-color: #43a3bd !important;
    color: #1f2937 !important;
}

/* ------------------------------------------------------------------
   BLOG LIST CARD IMAGE (Articles/index.php) - MOBILE WIDTH
   style.css sets only a fixed height on this image (290px below 767px),
   no width - a replaced element with height set but not width renders at
   whatever width its own intrinsic aspect ratio implies (here, the mobile
   Cloudinary crop is 401x430, so 290px tall computes to ~270px wide), then
   only shrinks further via max-width:100% if that computed width overflows
   the card. It doesn't here - 270px is already narrower than the ~366px
   card - so the image sits undersized with visible empty space on both
   sides instead of filling the card. Forcing the width closes that gap;
   object-fit:cover (already set) reflows the crop to match. */
@media (max-width: 767px) {
    .trv-blog-list-st .trv-media img {
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   HOME PAGE - LESS SPACE BETWEEN SECTIONS
   Most home sections already carry the theme's p-t120/p-b90 utility
   classes (reduced to p-t60/p-b40 directly in Pages/index.php's markup),
   but these two bake their own 120px top padding straight into the class
   instead of using a utility class, so they need their own override here.
   Both are home-page-only classes (not reused elsewhere), so no other
   page is affected. */
.trv-achivment-section {
    padding: 60px 0px;
}
.trv-3step-section {
    padding-top: 60px;
}
/* .trv-popular-tours (the two carousel sections) also bakes its own
   padding-bottom:106px directly into the class - loading after the p-b0
   utility class in style.css, it wins the cascade and was quietly keeping
   a large gap under both carousels regardless of that utility. */
.trv-popular-tours {
    padding-bottom: 40px;
}

/* "LE NOSTRE ESPERIENZE DI VIAGGIO" TRIP-TYPE CARDS - LESS CROP, SET HEIGHT
   style.css originally fixed this image at a flat 500px/450px/420px tall
   regardless of the card's own width - at the carousel's old 4-per-view
   breakpoint that made for a ~290x500 box (0.58 ratio) against landscape
   source photos (~1.5 ratio), so object-fit:cover had to crop away most of
   each photo's width to fill it. custom.js now caps the carousel at
   3-per-view instead of 4, giving each card real extra width, and the card
   is held at a flat 360px at every width - shorter than the theme's own
   500/450/420, so the box's ratio is much closer to the photos' landscape
   one and far less of each photo gets cropped away. The theme's two
   narrow-viewport overrides are restated here so they don't reintroduce
   their own taller heights below 1366px/400px. */
.trv-destination-bx1 .trv-media img {
    height: 360px;
}
@media (max-width: 1366px) {
    .trv-destination-bx1 .trv-media img {
        height: 360px;
    }
}
@media (max-width: 400px) {
    .trv-destination-bx1 .trv-media img {
        height: 360px;
    }
}

/* TOP FILTER BAR (Tipo di viaggio / Prezzo / Durata / Azzera filtri /
   Confronta) - DON'T STICK ON SCROLL
   style.css makes this bar position:sticky (top:90px/50px), so it pins
   itself under the header and stays on screen the whole time the visitor
   scrolls through the grid below. Not wanted here - it should just scroll
   away with the rest of the page like a normal in-flow element. */
.trv-pack-filter-bar-wrap {
    position: static;
    top: auto;
}

/* RECAPTCHA - NOT SHOWN ANYWHERE ON THE FORMS
   Google's invisible reCAPTCHA injects a badge into <body> with inline
   position:fixed, pinning it to the bottom-right of the viewport. It is
   hidden here rather than removed from the DOM: grecaptcha still needs the
   element, and detaching it breaks the widget (and with it the token the
   server checks before an enquiry is posted).

   Hiding it is allowed only if the reCAPTCHA branding is shown instead. That
   attribution used to sit under every enquiry form; it now lives once in the
   global footer (element/footer.php), which renders on every page - so the
   requirement is met site-wide and the forms themselves stay clean. If the
   footer notice ever goes, this rule has to go with it or the site is
   off-terms. */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* The footer ground is Navy, so the notice sits in a light grey with white
   links rather than the Gray 700 / Navy pairing used on light surfaces.
   Small and quiet - it is a legal attribution, not a footer link. */
.trv-recaptcha-branding {
    margin-top: 10px;
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #CBD5E1;
    /* Centred under the copyright line it sits below, which the theme
       already centres in .footer-bottom. */
    text-align: center;
}
.trv-recaptcha-branding a {
    color: #fff;
    /* !important only to escape the legacy global
       a{text-decoration:none!important} in webroot/css/style.min.css - these
       are the two links Google's terms require, so they have to read as
       links. */
    text-decoration: underline !important;
}
.trv-recaptcha-branding a:hover,
.trv-recaptcha-branding a:focus {
    color: #43A3BD;
}

/* BLOG/WIKI SIDEBAR FORM - STICK ON ITS OWN, DON'T GLUE THE CARDS ABOVE IT
   custom.js's sticky_sidebar() skips theiaStickySidebar for any .rightSidebar
   that also holds a .widget (these 4 pages: the "Tour Correlati" related-tour
   cards on the detail pages, the search box on the listing pages), so the
   form doesn't get carried along as part of one glued sidebar unit. Plain
   CSS position:sticky (top offset matches .trv-addone-sticky above, clearing
   the fixed header) handles the rest: it stays in view while the visitor
   scrolls past it and releases on its own once its containing block (the
   sidebar) ends - no JS needed.
   !important guards against the page's own inline <style> block (parsed
   later in <body>, equal specificity) setting ".inquireSection { position:
   relative }" for the pages that don't use this class at all.
   z-index: .sticky-md-top also sets z-index:1020, higher than the fixed site
   header's 999, so wherever the two boxes overlap (the form's top dips into
   the header's band near the end of the sidebar, or briefly during the
   sticky release) the form painted over the nav instead of the other way
   round. Dropping it below the header lets it slide under the nav instead. */
/* The <aside> is the form's containing block, so it's what bounds how far
   the form can stay stuck. Left at its content height it's only the cards
   widget (~4000px) plus the form itself (~515px), leaving ~30px of travel -
   the form never actually reached its own top:130px, it went straight to
   bottom-constrained and slid up behind the nav. Stretching it to the column
   (which the row's align-items:stretch already sizes to the article's full
   height) gives the same setup .trv-addone-sticky has: pinned at 130px all
   the way down the article, releasing only at the end of the column. */
.trv-sidebar-stretch {
    height: 100%;
}

.trv-sticky-form-wrap {
    position: sticky !important;
    top: 130px;
    z-index: 1;
}

/* ------------------------------------------------------------------
   "CHIEDI PREVENTIVO!" JUMP TARGET - CLEAR THE FIXED HEADER
   The mobile CTA jumps to the enquiry form: most pages via <a href="#from">
   (the sidebar <aside>), the blog/wiki ones via scrollToSidebar() ->
   scrollIntoView() on #formInquery (the form card itself - on those pages
   #from starts with the related-tour cards, not the form). Either way the
   browser aligns the target's top with the top of the *viewport*, which
   the site header then covers: it goes position:fixed on scroll, 80px tall
   on mobile and 121px on desktop, so the form's own heading and first
   fields ended up hidden behind it and the visitor landed mid-form.
   scroll-margin-top is exactly the property for this - it offsets where
   scrolling considers the element's top to be, for both native anchor
   jumps and scrollIntoView, without moving the element itself. */
#from,
#formInquery {
    scroll-margin-top: 96px;
}
@media (min-width: 992px) {
    #from,
    #formInquery {
        scroll-margin-top: 140px;
    }
}

/* ------------------------------------------------------------------
   BRAND LOGO - THE ASSET EXACTLY AS DRAWN, EVERYWHERE
   The logo is the two-tone brand mark: a Navy "CROCIERA" wordmark with the
   Aqua "Sul Nilo" script under it. It was previously knocked out to solid
   white in the header and footer (brightness(0) invert(1)), and then briefly
   given a white plate to sit on in the footer.
   Neither is wanted: the mark is to render exactly as the PNG is, in full
   colour on its own transparency, in the header and the footer alike. So no
   filter and no plate here - anything that repaints or backs the artwork
   belongs nowhere near it.
   In the footer that left the mark almost invisible - its ground is Navy
   (#063268 at 75% over the skyline photo), the same Navy as the wordmark and
   the ship, so only the aqua script showed. Rather than recolour the artwork
   there, the logo gets its own white plate to sit on: the light ground the
   two-tone mark was drawn for, so it renders exactly as the asset while
   staying legible. Header surfaces need none of this - they are white, or
   light enough behind the hero. */
.footer-dark .logo-footer {
    /* inline-block + width:auto so the plate wraps the artwork: the theme
       gives this block display:block and max-width:193px, which would
       otherwise stretch the plate across the column and let the padding eat
       into the logo. */
    display: inline-block;
    width: auto;
    background: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    /* A soft lift so the plate reads as a deliberate panel against the navy
       rather than a gap punched in the footer. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.footer-dark .logo-footer img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* JQUERY UI FORM CONTROLS - KEEP THE SITE FONT
   jquery-ui.min.css themes the widget itself to Figtree
   (.ui-widget{font-family:Figtree,sans-serif}) but leaves its own nested
   rule for controls INSIDE a widget on the library's stock Arial stack:
     .ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
       { font-family: Arial, Helvetica, sans-serif }
   Nothing renders in Arial today - the datepickers are configured without
   month/year dropdowns and without a button pane, so no such control is
   ever built. But the moment one is (changeMonth/changeYear, or a button
   pane), it would silently come out in Arial against Figtree everywhere
   else. Same specificity as the library's rule, and this file loads after
   jquery-ui.min.css, so it wins on order. */
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: "Figtree", sans-serif;
}

/* BLOG/WIKI LIST CARDS - NO GAP UNDER THE CARD IMAGE ON MOBILE
   On desktop .trv-info is pulled up over the photo (margin-top:-100px) so the
   white card overlaps it. style.css replaces that wholesale below 767px with
       .trv-blog-list-st .trv-info { margin: 30px 0 0 0 }
   which drops the overlap AND adds a 30px gap, leaving the card floating
   under the image instead of attached to it. Only the top margin needs to go
   - the 0 left/right from that same rule is what makes the card full-bleed on
   a phone, so it's left alone. Same specificity as the theme's rule, and this
   file loads after style.css, so it wins on order. */
@media (max-width: 767px) {
    .trv-blog-list-st .trv-info {
        margin-top: 0;
    }
}

/* "OFFRIAMO I MIGLIORI SERVIZI" - CARD BODY COPY IN BLACK
   The three service cards (.trv-servi-bx1) sit on white inside this navy
   section, and style.css gives their body copy the theme's muted teal
   (#346065 at .trv-servi-bx1 .trv-icon-content .p-text). Asked for black.
   One class more than the theme's selector, and this file loads after
   style.css, so it wins on both specificity and order. */
.trv-we-off-service .trv-servi-bx1 .trv-icon-content .p-text {
    color: #000;
}

/* "DI SÌ! ALLA TUA PROSSIMA AVVENTURA" BADGE - DESKTOP ONLY
   The decorative script badge over the video section (Pages/index.php).
   It keeps its full 430px height at every width, so on a phone it takes a
   whole screen of vertical space for a purely decorative flourish and
   crowds the play button and the counters around it. Dropped below the
   theme's own 991px mobile breakpoint - the same one this section's other
   rules use - rather than shrunk, since it is not carrying any content. */
@media (max-width: 991px) {
    .trv-achivment-section .trv-say-yesbx-wrap {
        display: none;
    }
}

/* FOOTER CLEARANCE FOR THE STICKY MOBILE CTA
   "Chiedi Preventivo!" (.button_moblie) is position:fixed against the bottom
   of the viewport below 768px and 75px tall, so the last 75px of the document
   can never be scrolled out from under it. The reCAPTCHA branding is the very
   last thing on the page, which put it permanently behind the bar on a phone -
   it was rendered and visible to the DOM, just never reachable by eye.
   Pad the footer by the bar's height plus a little breathing room. Scoped to
   the same 767px breakpoint the bar itself uses, so desktop is untouched. */
@media (max-width: 767px) {
    .site-footer .footer-bottom {
        padding-bottom: 90px;
    }
}

/* ABOUT BOX - "GUIDA DI VIAGGIO AFFIDABILE" / "MISSIONE E VISIONE" IN BLACK
   The two icon blocks in .trv-we-rec-mid2-section (element/aboutus-box.php:
   travel-guide.png and mission-icon.png). style.css tints the artwork Navy
   with a long filter chain and sets the body copy teal; the icons and that
   body copy are black here. The heading keeps the theme's Navy.
   The icons are flat PNGs, so brightness(0) is what blackens them - it
   crushes the artwork to solid black and the PNG's own transparency keeps
   the shape. It also replaces the theme's chain wholesale rather than
   layering on top of it. Scoped to this section so the same .trv-icon-bx-st2
   component keeps its Navy treatment wherever else it is used. */
.trv-we-rec-mid2-section .trv-icon-bx-st2 .trv-icon-bx-media img {
    filter: brightness(0);
}
.trv-we-rec-mid2-section .trv-icon-bx-st2 .p-text {
    color: #000;
}

/* ACHIEVEMENT / VIDEO SECTION ON MOBILE - WHOLE THUMBNAIL, COUNTERS BELOW IT
   The theme builds this block as three absolutely-positioned layers inside a
   fixed 640px .parallax-section: the vid-bg2 backdrop, the video thumbnail,
   and the counters pinned to the bottom with position:absolute. On a phone
   the thumbnail box ends up 366x640 - far taller than the 3:2 image - so
   background-size:cover cropped most of the photo away, and the counters sat
   on top of what was left.
   Below 992px the layers are put back into normal flow: the thumbnail keeps
   the image's own 3:2 ratio and switches to background-size:contain so the
   whole frame shows, and the counters follow underneath instead of overlaying
   it. Desktop keeps the theme's layered composition untouched. */
@media (max-width: 991px) {
    .trv-achivment-section .trv-achivment-row .parallax-section {
        height: auto;
    }
    .trv-achivment-section .parallax-section .parallax-content {
        display: block;
        height: auto;
    }
    .trv-achivment-section .video-section {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        /* thumbnail.webp is 1920x1280 */
        aspect-ratio: 3 / 2;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .trv-achivment-section .trv-vid-st2-counter {
        /* relative, not static: this has to leave the theme's absolute
           bottom-pinning and join the flow under the image, but it also has
           to keep the z-index:10 the theme gives it - and z-index is ignored
           on a static element. Left static, the backdrop layer (z-index:1,
           absolutely positioned) painted straight over the numbers as the
           parallax script drifts its inline top downward on scroll, so the
           row vanished the moment the section moved up the viewport. */
        position: relative;
        z-index: 10;
        height: auto;
        padding: 24px 16px 8px;
    }
    /* The backdrop layer is hard-coded to 800px; bring it down to the block.
       (Insets instead of height:100% collapse it to 0 here - it carries the
       theme's .parallax-image behaviour, not a plain absolute box.) */
    .trv-achivment-section .trv-achivment-row .trv-vid-st2 {
        height: 100%;
    }
    /* The counter panel's own background is only 62% navy
       (rgba(6,50,104,.62)), so it relies on that backdrop to read as a solid
       band. If the backdrop does not paint - it is absolutely positioned
       inside a now auto-height parent, which is fragile - the panel washes
       out to pale grey and its white numbers vanish into it. A solid navy
       floor here makes the row legible on its own. */
    .trv-achivment-section .trv-vid-st2-counter {
        background-color: #063268;
    }
}

/* THEME BODY COPY #346065 -> BLACK
   The theme paints its body copy a muted teal (#346065), set on body itself
   and repeated on ~25 selectors, so it is the inherited default for most
   text on the site. Asked for black.
   Mirrors the theme's own selector list rather than a blanket "* { color }",
   so only the text that was teal changes and everything with a colour of its
   own (Navy headings, white-on-navy panels, links) is left alone.
   .footer-dark / .footer-light are deliberately NOT included: they set
   #346065 as an inherited base on a Navy ground, and every piece of text
   inside them already overrides it with white - blackening the base there
   would only risk black text on navy. */
.site-text-paragraph,
body,
ol.comment-list li.comment .comment-meta span,
.post-navigation .post-nav-links .post-nav-item .nav-post-meta a,
.trv-step-bx1 p,
.trv-step-bx2 p,
.trv-guide-dtl-right-part .text,
.trv-list-st2 li,
.trv-testimo-bx1 .info p,
.trv-testimo-bx2 .info p,
.trv-de-list-st1 .trv-list-st-1 li .text,
.trv-blog-list-st .trv-info p,
.trv-testimo-stories-bx .info p {
    color: #000;
}
/* placeholders kept separate: one unsupported pseudo-element in a list
   invalidates the whole selector, so they cannot be merged above. */
.trv-form .form-group .form-control::-moz-placeholder {
    color: #000;
}
.trv-form .form-group .form-control::placeholder {
    color: #000;
}
.trv-form .form-group textarea.form-control::-moz-placeholder {
    color: #000;
}
.trv-form .form-group textarea.form-control::placeholder {
    color: #000;
}
.trv-contact2-form-wrap .trv-contact2-right-part .trv-form2 .form-group .form-control::-moz-placeholder {
    color: #000;
}
.trv-contact2-form-wrap .trv-contact2-right-part .trv-form2 .form-group .form-control::placeholder {
    color: #000;
}
.trv-contact2-form-wrap .trv-contact2-right-part .trv-form2 .form-group textarea.form-control::-moz-placeholder {
    color: #000;
}
.trv-contact2-form-wrap .trv-contact2-right-part .trv-form2 .form-group textarea.form-control::placeholder {
    color: #000;
}
.trv-enq-popup .form-control::-moz-placeholder {
    color: #000;
}
.trv-enq-popup .form-control::placeholder {
    color: #000;
}