/* ============================================================================
   acercar-theme.css — Acercar Viajes polish layer (loaded LAST, after custom.css).
   Hand-maintained (not SCSS-generated). Keeps Acercar's brand colors from
   style.css/custom.css; only refines typography, readability and spacing.
   Ported from the Abax polish layer. Brand: primary #0084ff (blue), accent #ff9000 (orange).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Typography: Plus Jakarta Sans everywhere (replaces Montserrat / Gochi Hand).
   Icon fonts (fontello / icon_set_1 / ElegantIcons) are intentionally NOT listed,
   so the icons keep their own glyph font.
   ---------------------------------------------------------------------------- */
body,
input, button, select, textarea, .form-control, .styled-select-common select,
h1, h2, h3, h4, h5, h6,
a, p, li, td, th, label, strong, span, .btn_1, .btn_full, .btn_full_outline,
.main-menu ul li a, #top_line, .main_title h2, .box_style_1 {
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
}

/* ----------------------------------------------------------------------------
   Header logo: align it with the menu and keep it compact.
   ---------------------------------------------------------------------------- */
#logo_home { margin-top: 4px; }
#logo_home h1 { margin: 0; }
#logo_home h1 a,
header.sticky #logo_home h1 a,
header#plain #logo_home h1 a,
header#colored #logo_home h1 a {
    /* Keep the logo aspect ratio so it is never stretched (the base theme forced
       179x34 = 5.26:1). background-size:contain fills the box without distortion. */
    width: 119px !important;
    height: 40px !important;
    background-size: contain !important;
    background-position: left center !important;
}

/* ----------------------------------------------------------------------------
   Dropdown / submenu readability — force dark text inside the light panels and
   give the floating panel a clean white surface with a soft shadow.
   ---------------------------------------------------------------------------- */
.main-menu ul li ul li a,
.main-menu ul ul a,
.main-menu .megamenu .menu-wrapper a,
.main-menu .megamenu .menu-wrapper li a {
    color: #2b2f33 !important;
}
.main-menu ul li ul li a:hover,
.main-menu ul ul a:hover,
.main-menu .megamenu .menu-wrapper a:hover {
    color: #0084ff !important;
}
.main-menu ul li:not(.megamenu) ul,
.main-menu .megamenu .menu-wrapper {
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important;
    border-radius: 8px;
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Spacing / line-height: a bit more air = tidier reading rhythm.
   ---------------------------------------------------------------------------- */
body { line-height: 1.6; }
p { line-height: 1.7; margin-bottom: 1rem; }
.main_title { margin-bottom: 1.5rem; }
.main_title h2 { margin-bottom: 0.5rem; }
.form-group { margin-bottom: 1.1rem; }
.table_summary td { padding: 10px 6px; line-height: 1.6; }

.form-group > label,
.styled-select-common + label,
label.lbl-bold { font-weight: 600; }

/* ----------------------------------------------------------------------------
   Modern, soft inputs. Focus ring uses the Acercar primary.
   ---------------------------------------------------------------------------- */
.form-control,
.styled-select-common { border-radius: 6px; }
.form-control:focus {
    border-color: #0084ff;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.12);
    outline: none;
}

/* ----------------------------------------------------------------------------
   Result cards: gentle elevation + hover lift.
   ---------------------------------------------------------------------------- */
.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);
}
.img_container img { transition: transform 0.45s ease; }

/* Circuit detail: round the service / hotel / room thumbnails in the itinerary and
   options lists, to match the rounded search-result cards. */
.acercar-list-thumb { border-radius: 8px; }
.tour_container:hover .img_container img,
.hotel_container:hover .img_container img { transform: scale(1.06); }

/* ----------------------------------------------------------------------------
   Checkout: readable order summary with an unmistakable TOTAL (Acercar primary).
   ---------------------------------------------------------------------------- */
.table_summary { width: 100%; }
.table_summary td { vertical-align: middle; }
.table_summary td:first-child { text-align: left; }
.table_summary td:last-child,
.table_summary td.text-right { text-align: right !important; }
.table_summary tr.total td {
    font-size: 18px;
    font-weight: 700;
    color: #0084ff;
    border-top: 2px solid #0084ff;
    padding-top: 12px;
}
.table_summary tr.total td:first-child { text-transform: uppercase; letter-spacing: .5px; }
/* Circuit quote "Detalle" sub-table: no borders so there is no double line where it meets the
   summary table (Cantidad Pax / Habitaciones / ...). */
.acercar-quote-detail { margin-bottom: 0 !important; }
.acercar-quote-detail td { border: 0 !important; }
.table.cart-list td { padding: 12px 10px; line-height: 1.6; }
.table.cart-list .item_name,
.table.cart-list strong { color: #1d2126; }
.table.cart-list thead th:nth-child(2),
.table.cart-list tbody td:nth-child(2) { text-align: left; }

/* ----------------------------------------------------------------------------
   Footer contact: icon + text on one row, vertically centered, text tight to the
   icon. The icon (::before glyph) becomes a static flex child with a small gap,
   instead of an absolutely-positioned icon + left padding (which left an uneven
   gap and slight misalignment).
   ---------------------------------------------------------------------------- */
footer a#phone,
footer a#email_footer {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    margin: 0 0 6px 0 !important;
    padding-left: 0 !important;
    line-height: 1.2;
}
footer a#phone::before,
footer a#email_footer::before {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px;
    margin: 0 !important;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 22px;
    text-align: center;
}

/* ----------------------------------------------------------------------------
   Secondary (outline) buttons — used for Cancel / Close so the primary action
   stays dominant. Modal polish.
   ---------------------------------------------------------------------------- */
.btn-secondary-outline { background: #fff !important; color: #444 !important; border: 1px solid #ccc !important; }
.btn-secondary-outline:hover { background: #f3f3f3 !important; color: #111 !important; }
.modal-content { border: none; border-radius: 10px; box-shadow: 0 12px 40px rgba(16, 24, 40, 0.18); }
.modal-header { border-bottom: 1px solid #eef0f1; }
.modal-footer { border-top: 1px solid #eef0f1; }
.modal-title { font-weight: 600; }

/* ----------------------------------------------------------------------------
   Required-field validation: clear error red so "field required" labels are
   obvious (kept distinct from the orange brand accent to read as an error).
   ---------------------------------------------------------------------------- */
label.error { color: #dc3545 !important; font-weight: 600; }
.text-danger { color: #dc3545 !important; }

/* Keep the full-screen preloader BELOW open modals (BS backdrop 1050/modal 1055). */
#beglobberloader,
.beglobber-loader { z-index: 1040 !important; }

/* Service detail: amount prominent, secondary line muted. */
.total-amount { font-size: 16px; font-weight: 700; color: #0084ff; line-height: 1.3; }
.total-amount .total-sub {
    display: block; font-size: 12px; font-weight: 400; color: #6c757d; margin-top: 2px;
}

/* ----------------------------------------------------------------------------
   Rates module / tabs: on-brand active state (Acercar primary instead of link-blue).
   ---------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 2px solid #e9ebf0; }
.nav-tabs .nav-link {
    color: #6b7177;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding: 12px 18px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus { color: #0084ff; border-color: transparent; border-bottom-color: #a9d4ff; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #0084ff;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #0084ff;
}

/* Experiences list: normalize the thumbnail to fill its column at a fixed height. */
.strip_all_tour_list .img_list { min-height: 0; }
.strip_all_tour_list .img_list img {
    position: static; left: auto; width: 100%; height: 220px; object-fit: cover; transform: none;
}
.strip_all_tour_list .img_list a:hover img { transform: none; }

/* ----------------------------------------------------------------------------
   Mobile breathing room under the fixed header.
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #booking { padding-top: 18px; }
    main.white_bg > .container.margin_60 { padding-top: 12px; }
}

/* Mobile header tools: even icon size + spacing for cart / logout / hamburger. */
@media (max-width: 991px) {
    ul#top_tools li { padding: 0 10px; }
    ul#top_tools li i { font-size: 22px; line-height: 1; vertical-align: middle; }
    .cmn-toggle-switch { width: 22px; height: 22px; right: 26px; top: 4px; }
    .cmn-toggle-switch span { top: 10px; }
}

/* Footer "Powered by Beglobber" — small, single line. */
#social_footer .powered_by { font-size: 11px; color: #777; margin-top: 2px; white-space: nowrap; }
#social_footer .powered_by a { color: #999; text-decoration: underline; }
#social_footer .powered_by a:hover { color: #fff; }

/* ----------------------------------------------------------------------------
   Mobile stacked tables: suppress the theme's generic injected English labels so
   the mobile cart reads cleanly (values get the full width).
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .table.cart-list td { padding-left: 12px !important; text-align: left !important; }
    .table.cart-list td:before { content: none !important; }
}

/* ----------------------------------------------------------------------------
   Search sidebar "Your search" summary: label left, value right. Accent icons.
   ---------------------------------------------------------------------------- */
.search-summary .search-summary-list { list-style: none; padding: 0; margin: 0; }
.search-summary .search-summary-list li {
    display: flex; align-items: baseline; gap: 6px; padding: 8px 0; border-bottom: 1px solid #eef0f1;
}
.search-summary .search-summary-list li:last-child { border-bottom: none; }
.search-summary .search-summary-list li i { color: #ff9000; }
.search-summary .search-summary-list li span { color: #6b7177; font-size: 13px; }
.search-summary .search-summary-list li strong { margin-left: auto; text-align: right; color: #1d2126; }

/* ----------------------------------------------------------------------------
   Search sidebar "Tu búsqueda" read-only summary card (top of the aside on the
   Hotels / Services / Tours search-results pages). Clean white card, brand-blue
   title with an icon, tidy list with muted values. Full-width on mobile.
   ---------------------------------------------------------------------------- */
.acercar-search-summary { margin-bottom: 25px; }
.acercar-search-summary h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef0f1;
    font-size: 16px;
    font-weight: 700;
    color: #0084ff;
}
.acercar-search-summary h4 i { font-size: 18px; line-height: 1; color: #0084ff; }
.acercar-search-summary ul { list-style: none; padding: 0; margin: 0; }
.acercar-search-summary ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    line-height: 1.4;
}
.acercar-search-summary ul li + li { border-top: 1px solid #f2f4f6; }
.acercar-search-summary ul li i {
    flex: 0 0 18px;
    margin-top: 1px;
    font-size: 15px;
    line-height: 1.4;
    color: #ff9000;
    text-align: center;
}
.acercar-search-summary ul li span {
    color: #4a5157;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}

/* ----------------------------------------------------------------------------
   Primary search button: keep it on the Acercar primary with a subtle hover.
   ---------------------------------------------------------------------------- */
.btn_1, .btn_full {
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn_1:active, .btn_full:active { transform: translateY(1px); }

/* ----------------------------------------------------------------------------
   Main search tabs: keep the tabs flush/attached to the search panel below them.
   ---------------------------------------------------------------------------- */
#search_container .nav-tabs { row-gap: 4px; }

/* ----------------------------------------------------------------------------
   Mobile header tidy-up: the hamburger and the cart/logout tools were both
   absolutely positioned to the same top-right spot and could overlap, making
   the menu hard to tap. Lay the tools out in a flex row and keep the hamburger
   on its own tappable layer.
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Also target header.sticky so the base `.sticky ul#top_tools { margin:3px 45px 0 0 }`
       rule can't push cart+logout ~45px left and detach them from the hamburger when the
       header collapses to its sticky state (same fix as abax/epikur themes). */
    header #top_tools,
    header.sticky #top_tools {
        position: absolute;
        top: 50%;
        right: 54px;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 0;
    }
    header #top_tools li { position: static; display: inline-flex; align-items: center; margin: 0; padding: 0; }
    header #top_tools li i { font-size: 22px; line-height: 1; }
    .cmn-toggle-switch {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
        margin: 0;
        z-index: 1002;
    }
    .main-menu ul li a.show-submenu,
    .main-menu ul li a.show-submenu-mega { cursor: pointer; }
}

/* ----------------------------------------------------------------------------
   Desktop header: keep the whole top-level menu on ONE line. Tighten item
   spacing and force no-wrap so the bar stays a single, vertically-centered row.
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .main-menu > ul { white-space: nowrap; display: flex; align-items: center; flex-wrap: nowrap; }
    .main-menu > ul > li { float: none; }
    .main-menu > ul > li > a {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 13px;
        letter-spacing: 0;
    }
}

/* ----------------------------------------------------------------------------
   Profile: tidy the read-only "Data & Logo" summary, keep the agency logo in a
   neat rounded frame, and give the section headings consistent spacing.
   ---------------------------------------------------------------------------- */
#profile h4 { margin-bottom: 1rem; font-weight: 700; color: #1d2126; }
#profile_summary { list-style: none; padding: 0; margin: 0 0 1rem 0; }
#profile_summary li {
    line-height: 1.6;
    padding: 8px 0;
    border-bottom: 1px solid #eef0f1;
}
#profile_summary li:last-child { border-bottom: none; }
#profile_summary li span { font-weight: 600; color: #1d2126; margin-left: 6px; }
.profile_pic {
    border-radius: 10px;
    max-height: 170px;
    width: auto;
    object-fit: contain;
}

/* ----------------------------------------------------------------------------
   Hotel detail: round the room thumbnails so they match the rounded result cards.
   ---------------------------------------------------------------------------- */
.acercar-room-thumb {
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: 96px;              /* compact thumbnail — the room image was oversized and left dead space */
}

/* Hotel detail rooms: tighter rate tables + room rows so there is no meaningless whitespace. */
.acercar-room-row { margin-bottom: 4px; }
.acercar-room-row h4 { margin-bottom: 2px; font-size: 17px; }
.acercar-room-row p { margin-bottom: 0; font-size: 13px; line-height: 1.35; }
.acercar-rooms .table.cart-list td,
.acercar-rooms .table.cart-list th { padding: 6px 8px; line-height: 1.3; }
.acercar-rooms hr { margin: 8px 0; }

/* ----------------------------------------------------------------------------
   Booking detail / cancel modals: use more of the screen so the itinerary +
   passenger tables breathe.
   ---------------------------------------------------------------------------- */
#modalBookDetailControl .modal-dialog,
#modalCancelBook .modal-dialog {
    max-width: 1040px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1200px) {
    #modalBookDetailControl .modal-dialog { max-width: 1100px; }
}

/* ----------------------------------------------------------------------------
   Mobile: submenus and megamenus render INLINE inside the full-screen menu, not
   as floating panels — so drop the white card / shadow / rounded corners.
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .main-menu ul li:not(.megamenu) ul,
    .main-menu .megamenu .menu-wrapper,
    .main-menu ul li ul li ul {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
}

/* ----------------------------------------------------------------------------
   Mobile header: anchor the cart/logout tools + hamburger to the LOGO ROW, not
   the full header (which also contains the top contact/social bar).
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
    header > .container,
    header nav.col-10 { position: static !important; }
    header > .container > .row { position: relative !important; }
}

/* ----------------------------------------------------------------------------
   Services-search pagination (DataPager): brand-aligned, centered pager.
   ---------------------------------------------------------------------------- */
.acercar-pager { margin: 28px 0 8px; }
.acercar-pager a,
.acercar-pager span {
    display: inline-block;
    min-width: 38px;
    padding: 7px 11px;
    margin: 0 3px;
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    color: #0084ff;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.acercar-pager a:hover { background: #eef6ff; border-color: #0084ff; }
.acercar-pager .acercar-pager-current {
    background: #0084ff;
    border-color: #0084ff;
    color: #fff;
}

/* ----------------------------------------------------------------------------
   Card titles: give the title a little breathing room below the card image so
   it is not stuck flush against the picture. Covers the grid cards on the home
   page and the Services search (.tour_container / .hotel_container > .tour_title)
   as well as the horizontal strip cards on the Hotels + Tours search results
   (.tour_list_desc), where the image and text columns stack on mobile.
   ---------------------------------------------------------------------------- */
.tour_container .tour_title,
.hotel_container .tour_title {
    margin-top: 12px;
}
.tour_container .tour_title h3,
.hotel_container .tour_title h3 {
    margin-top: 0;
}

@media (max-width: 767px) {
    /* Horizontal strip cards stack (image on top, text below) on mobile: push
       the title away from the image it now sits directly under. */
    .strip_all_tour_list .tour_list_desc { margin-top: 10px; }
    .strip_all_tour_list .tour_list_desc > h3:first-child { margin-top: 0; }
}

/* ----------------------------------------------------------------------------
   "Volver al buscador" button inside the "Tu búsqueda" summary card: full-width,
   brand color, sitting cleanly under the summary list with a small top margin.
   ---------------------------------------------------------------------------- */
.acercar-search-summary .acercar-back-to-search {
    display: block;
    width: 100%;
    margin-top: 18px;
    text-align: center;
}
.acercar-search-summary .acercar-back-to-search i { margin-right: 6px; }