/* ============================================================================
   Typography: Plus Jakarta Sans across the site (replaces Montserrat and the
   decorative "Gochi Hand" cursive). `body` sets it for everything that inherits;
   the extra selectors cover the few spots the theme pins explicitly. Icon fonts
   (fontello / icon_set_1 / ElegantIcons / whatsApp) are intentionally NOT touched.
   ============================================================================ */
body,
input, button, select, textarea, .form-control, .styled-select-common select,
div.datedropper, .td-wrap,
.features-content h3, blockquote.styled, .banner h4,
#searchDropdownBox, .plan-price, .pricing-table-header .price-value, .qtyTotal {
    font-family: "Plus Jakarta Sans", "Montserrat", Arial, sans-serif !important;
}

/* ============================================================================
   modern.css — CL Mundo modernization layer
   Loaded LAST (after custom.css) so it overrides the theme. NOT generated by
   the SCSS pipeline, so it is safe to hand-edit here.
   Goal: subtle, professional form controls — soft borders, gentle shadows,
   smooth focus — consistent across every input/select on the site.
   ============================================================================ */

/* --- Inputs & selects: shared modern shell -------------------------------- */
.form-control,
.styled-select-common,
.styled-select-common select,
.date-pick {
    border-radius: 6px;
}

.form-control,
.styled-select-common {
    border: 1px solid #d8dde3;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The styled-select wrapper holds the border/shadow; the inner <select> stays
   transparent so the wrapper's white background + arrow show through. */
.styled-select-common select {
    box-shadow: none;
}

/* --- Focus: gentle neutral ring (brand-agnostic, works on any client color) - */
.form-control:focus,
.styled-select-common:focus-within {
    border-color: #98a2b3;
    box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
    outline: none;
}

/* Hover hint for the clickable selects */
.styled-select-common:hover {
    border-color: #c4cad2;
}

/* ============================================================================
   Layout: align the home search hero to the same page gutter as the header /
   content / footer on phones (the theme used an oversized percentage inset,
   ~20% , so the search box didn't line up with everything else on mobile).
   The rest of the site already shares a consistent ~12px container gutter.
   ============================================================================ */
@media (max-width: 767px) {
    #search {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Tabs sat 10px in from the box; pull them flush so they match the panel. */
    #search .nav-tabs {
        margin-left: 0;
    }

    /* ------------------------------------------------------------------------
       Data tables (.cart-list) on phones.
       The theme stacks every .cart-list table and injects generic cart labels
       ("Item / Quantity / Discount / Total / Actions") via td::before. The
       room-rate / tarifario tables reuse .cart-list, so those labels are wrong
       and the tables become unusable. Render them as a normal table that scrolls
       horizontally inside its .table-responsive wrapper: real headers show and
       the bogus labels disappear.
       ------------------------------------------------------------------------ */
    .table.cart-list { display: table; width: 100%; }
    .table.cart-list thead { display: table-header-group; }
    .table.cart-list tbody { display: table-row-group; }
    .table.cart-list tr { display: table-row; border: 0; }
    .table.cart-list th,
    .table.cart-list td { display: table-cell; }

    .table.cart-list thead tr {
        position: static;
        top: auto;
        left: auto;
    }

    .table.cart-list td {
        position: static;
        padding-left: 0.6rem;
        border: 0;
        border-bottom: 1px solid #eef0f2;
        white-space: nowrap;
    }

    /* Drop the injected cart labels (need !important to beat the nth-of-type rules). */
    .table.cart-list td:before {
        content: none !important;
    }
}

/* ============================================================================
   Result cards (hotels / CL Packs / services): modern elevation, rounded
   corners, and a subtle hover lift + image zoom. Applies on every viewport.
   ============================================================================ */
.tour_container,
.hotel_container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 20px rgba(16, 24, 40, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tour_container:hover,
.hotel_container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.08), 0 16px 32px rgba(16, 24, 40, 0.12);
}

/* Subtle image zoom on hover (image sits inside .img_container with overflow:hidden). */
.img_container img {
    transition: transform 0.45s ease;
}

.tour_container:hover .img_container img,
.hotel_container:hover .img_container img {
    transform: scale(1.06);
}

/* ============================================================================
   Misc polish
   ============================================================================ */
/* Form labels (search, checkout, date pickers, every form) read clearer in semibold
   so they stand out from the input/select text — matching the BLD polish. */
#search label,
#search .form-group label,
.form-group > label,
.styled-select-common + label,
label.lbl-bold {
    font-weight: 600;
}

/* ============================================================================
   Client-side / required-field validation: make the "field required" and error
   labels obvious and on-brand (CL Mundo red). jQuery Validate renders label.error;
   Bootstrap helpers use .text-danger.
   ============================================================================ */
label.error {
    color: #d83348 !important;
    font-weight: 600;
}

.text-danger {
    color: #d83348 !important;
}

/* Header logo: make the whole logo area clickable (the anchor was narrower than
   a wide/horizontal logo, so only part of it was a link). */
#logo_home,
#logo_home h1 {
    width: 100%;
}

#logo_home h1 a {
    width: 100%;
    background-size: contain;
}

/* ============================================================================
   Home search box alignment.
   The theme insets #search with a percentage padding (~5-20%), so it never lines
   up with the header / content / footer (which use Bootstrap .container). Make
   #search mirror .container exactly — same responsive max-widths, centered, same
   12px gutter — at every breakpoint. (#search_container keeps the full-width hero
   background; only the box inside is constrained.)
   ============================================================================ */
#search {
    padding-left: 12px;
    padding-right: 12px;
}

/* #search is a table-cell (max-width is ignored), so match the .container content
   edges with calc padding: (viewport - container_content_width) / 2, where
   container content = bootstrap max-width - 24px gutter. */
@media (min-width: 576px)  { #search { padding-left: calc((100% - 516px) / 2);  padding-right: calc((100% - 516px) / 2); } }
@media (min-width: 768px)  { #search { padding-left: calc((100% - 696px) / 2);  padding-right: calc((100% - 696px) / 2); } }
@media (min-width: 992px)  { #search { padding-left: calc((100% - 936px) / 2);  padding-right: calc((100% - 936px) / 2); } }
@media (min-width: 1200px) { #search { padding-left: calc((100% - 1116px) / 2); padding-right: calc((100% - 1116px) / 2); } }

/* ============================================================================
   Tour/hotel "strip" list items (CL Packs results + the hotel options inside a
   CL Pack): make each a clean, professional card.
   ============================================================================ */
.strip_all_tour_list {
    border: 1px solid #e7eaee;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    transition: box-shadow 0.2s ease;
}

.strip_all_tour_list:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
}

/* Category / group heading above each set of hotel options inside a CL Pack. */
#section-hotels .main_title h2,
#section-itinerary .main_title h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   Preloader (between-screens spinner): always CL Mundo red, regardless of the
   logged-in client's brand colour.
   ============================================================================ */
.sk-rotating-plane {
    background-color: #d83348 !important;
}

/* ============================================================================
   Header right-hand icons (cart / logout / menu) — even spacing.
   #top_tools icons use padding:0 10px (≈40px centre gap); nudge the hamburger so
   its gap to the logout icon matches, on the breakpoints where it shows.
   ============================================================================ */
@media (max-width: 991px) {
    .cmn-toggle-switch {
        right: 24px;
    }
}

/* ============================================================================
   Checkout cart-list: prevent horizontal scroll.
   The table is inside col-lg-8; the only thing that pushes it wider is the
   thumbnail image (no width/height attributes) and long product names.
   Constrain the image and let text wrap so the table never overflows the
   .table-responsive container.
   ============================================================================ */
.cart-list td img {
    max-width: 70px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.cart-list td {
    white-space: normal;
    word-break: break-word;
}

/* ============================================================================
   Footer: phone + social + language layout.
   The main row uses Bootstrap's col / col-auto flex, so the language selector
   (col-auto) always sits on the right regardless of auth state. On narrow
   screens wrap the contact items so they don't overflow.
   ============================================================================ */
footer .col span {
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 575px) {
    footer .col span {
        display: block;
        margin-bottom: 4px;
    }
    footer .col span.me-4 {
        margin-right: 0 !important;
    }
}

/* ============================================================================
   Footer "Powered by Beglobber" — small, muted, always last line.
   ============================================================================ */
footer .powered_by {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

footer .powered_by a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
}

footer .powered_by a:hover {
    color: #fff;
}

/* ============================================================================
   Rates module + dropdowns + menu polish (parity with the BLD design review).
   ============================================================================ */
/* Rates tabs: Bootstrap's default link-blue was off-brand — use CL Mundo red.
   Scoped to #rate-tab so the home search-box tabs are untouched. */
#rate-tab .nav-link { color: #555; font-weight: 600; }
#rate-tab .nav-link:hover,
#rate-tab .nav-link:focus { color: #d83348; }
#rate-tab .nav-link.active { color: #d83348; }

/* Rate lists (CL Packs / hotels / experiences): the thumbnail was an absolutely-
   positioned oversized image (width:auto; left:-10%), so a small image left empty
   space in its col-lg-4. Make it fill the column and line up with the text. */
/* Round the image CONTAINER (not just the <img>) and clip it, so the bottom
   ".short_info" overlay (price / tour-type, dark gradient that sits absolutely at
   the bottom of .img_list) follows the rounded corners instead of squaring off the
   bottom of the image. (.img_list already has overflow:hidden in the base theme;
   the border-radius is what was missing.) Applies to CL Packs search results AND
   the hotel/experience options listed inside a CL Pack detail. */
.strip_all_tour_list .img_list {
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
}
.strip_all_tour_list .img_list img {
    position: static;
    left: auto;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    transform: none;
}
.strip_all_tour_list .img_list a:hover img { transform: none; }

/* ============================================================================
   Rounded imagery — consistency pass across hotels, CL Packs and detail screens.
   Goal: every result/detail thumbnail has the same rounded corners, and the
   overlays on top of them (the dark ".short_info" price/type gradient and the
   green "Disponible" corner ribbon) are clipped to those same corners — nothing
   squares off at the bottom or pokes a square tab outside the card.
   ============================================================================ */

/* Hotel result card: the image is flush at the top of the rounded card. The card
   already clips (border-radius:10px + overflow:hidden), but make the image
   container's own top rounding explicit so the top corners stay rounded even if
   the card clip is overridden, and so the bottom ".short_info" price overlay is
   contained. The green "Disponible" ribbon is a child of .hotel_container, so the
   card's overflow:hidden already clips it to the rounded corner. */
.hotel_container .img_container {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

/* CL Pack detail (Tours/Detail.aspx): itinerary service thumbnails and the
   "Categorías & Hoteles" availability option thumbnails are plain <img.img-fluid>
   inside the accordion card bodies. Round them to match the search results.
   Scoped to .accordion_styled so other .img-fluid images are untouched. */
.accordion_styled .card-body img.img-fluid {
    border-radius: 8px;
}

/* ============================================================================
   Hotel detail — room category header.
   Put the room category title (e.g. "Superior") and the "Precios por persona /
   * Sujeto a disponibilidad" legend on the same line: the title sits left in the
   flow, the legend is pinned to the top-right of the room block. (.room-head-wrap
   wraps the title + the .disclaimer legend in Hotels/Detail.aspx.)
   ============================================================================ */
.room-head-wrap {
    position: relative;
}
.room-head-wrap .disclaimer {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    line-height: 1.3;
}
@media (max-width: 767px) {
    /* On phones, drop the legend below the title so it never overlaps a long name. */
    .room-head-wrap .disclaimer {
        position: static;
        margin-top: 6px;
    }
}

/* ============================================================================
   Cart / rate tables: never overflow their container (kill the horizontal
   scrollbar in the checkout cart). table-layout:fixed makes the columns honour
   their width classes (td10/td25/...) and wrap long content instead of pushing
   the table wider than its .table-responsive wrapper. Complements the earlier
   .cart-list td img / word-break rules above.
   ============================================================================ */
.cart-list {
    width: 100%;
    table-layout: fixed;
}
.cart-list th,
.cart-list td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================================
   Login / Register pages (standalone, no master): make the hero fill the
   viewport so there is no white strip between the form and the footer, and the
   card is vertically centred. The brand override sets #hero.login{height:auto},
   which only covers the card height; here we stretch the form to 100vh and let
   the hero grow to fill the gap above the footer. Scoped via :has() so only the
   login/register pages are affected.
   ============================================================================ */
body:has(#hero.login) #frmMain {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body:has(#hero.login) #frmMain > main.white_bg {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body:has(#hero.login) #hero.login {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
}

/* ============================================================================
   Dropdowns — consistent custom arrow everywhere.
   The theme draws the down-arrow on the .styled-select-common WRAPPER, with the
   inner <select> set to appearance:none. Selects used WITHOUT that wrapper (e.g.
   País / Ciudad on Register) ended up with appearance:none but no arrow, so they
   looked flat. Give every bare <select.form-control> the same arrow + neutral
   shell, and suppress it again for the wrapped ones so they never get two arrows.
   ============================================================================ */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(/Assets/img/arrow_down.svg);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #fff;
    padding-right: 32px;
}
/* Wrapped selects: the .styled-select-common wrapper already paints the arrow. */
.styled-select-common select.form-control {
    background-image: none;
    padding-right: 5px;
}
/* Hide the legacy IE arrow on every select. */
select.form-control::-ms-expand {
    display: none;
}

/* Service-detail total: keep the amount prominent and render the secondary
   "Cant. de vehículos" line small + muted (it was the same bold size). */
.total-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

/* Dropdown / megamenu panels: same modern polish BLD got — rounded corners, a
   soft shadow, and clip item hover backgrounds so the first/last items keep the
   rounded corners on hover. :not(.megamenu) so the lists nested inside a megamenu
   don't get their own panel surface. (Submenus are single-level — nothing for
   overflow:hidden to clip.) The brand-red top border (theme) stays. */
.main-menu ul li:not(.megamenu) ul,
.main-menu .megamenu .menu-wrapper {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    overflow: hidden;
}