/* ============================================================================
   abax-theme.css — Abax polish layer (loaded LAST, after custom.css).
   Hand-maintained (not SCSS-generated). Keeps Abax's brand colors from
   style.css/custom.css; only refines typography, readability and spacing.
   Brand: primary #34387d (blue), accent #f06021 (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 {
    /* Logo is 602x202 (~2.98:1). Keep that aspect ratio so it is never stretched
       (the base theme forced 179x34 = 5.26:1). Box matches the ratio and
       background-size:contain fills it 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: #34387d !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 Abax primary.
   ---------------------------------------------------------------------------- */
.form-control,
.styled-select-common { border-radius: 6px; }
.form-control:focus {
    border-color: #34387d;
    box-shadow: 0 0 0 3px rgba(52, 56, 125, 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. */
.abax-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 (Abax 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: #34387d;
    border-top: 2px solid #34387d;
    padding-top: 12px;
}
.table_summary tr.total td:first-child { text-transform: uppercase; letter-spacing: .5px; }
.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;
    /* Fixed, centered icon box: both glyphs occupy an identical 22x22 square, so
       the text starts at the same x on every row and is vertically centered. */
    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: #34387d; 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 (Abax primary instead of link-blue).
   ---------------------------------------------------------------------------- */
/* Clean "underline" tabs: a single light baseline under the whole strip and a brand
   underline on the active tab — no boxed borders / odd bottom line on the selected tab. */
.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: #34387d; border-color: transparent; border-bottom-color: #c9cbe0; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #34387d;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #34387d;
}

/* 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: #f06021; }
.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; }

/* ----------------------------------------------------------------------------
   Primary search button: keep it on the Abax 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
   (no gap). Only add vertical spacing BETWEEN wrapped tab rows on narrow screens,
   so a wrapped row never sits on top of the panel — without pushing the panel away.
   ---------------------------------------------------------------------------- */
#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. (Toggle navigation is fixed in functions.js —
   .open_close handlers now preventDefault so a tap toggles instead of navigating.)
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Group cart + logout to the right, just left of the hamburger, with even gaps. */
    header #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;
    }
    /* Submenu parents expand on tap (don't navigate) — give them a clear hit area. */
    .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 (it was wrapping —
   "RATE SCHEDULE" dropped to a second row — because 7 items incl. the long
   "GUARANTEED DEPARTURES" didn't fit). Tighten item spacing and force no-wrap so
   the bar stays a single, vertically-centered row next to the logo.
   ---------------------------------------------------------------------------- */
@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 (even line rhythm, clear
   values), keep the agency logo contained in a neat rounded frame, and give the
   section headings consistent spacing so the form reads cleanly and aligned.
   ---------------------------------------------------------------------------- */
#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 and the rest of the rounded imagery.
   ---------------------------------------------------------------------------- */
.abax-room-thumb {
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
}

/* ----------------------------------------------------------------------------
   Booking detail / cancel modals: use more of the screen (wider than the
   default modal-lg) 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. A
   "menu inside the menu" must read flat (the boxed-card look is desktop-only,
   where the dropdown actually floats over the page).
   ---------------------------------------------------------------------------- */
@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. The header also contains the top contact/social bar, so
   centering the absolute tools on the whole header (top:50%) lifted them ~18px
   above the logo (they lined up with the top bar instead). Making the .row the
   positioning context centers the tools on the logo row in BOTH the tall top
   state and the compact sticky state. (.container + nav stay static so the tools
   bubble up to .row, never to a deeper wrapper.)
   ---------------------------------------------------------------------------- */
@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.
   ---------------------------------------------------------------------------- */
.abax-pager { margin: 28px 0 8px; }
.abax-pager a,
.abax-pager span {
    display: inline-block;
    min-width: 38px;
    padding: 7px 11px;
    margin: 0 3px;
    border: 1px solid #e3e6e9;
    border-radius: 8px;
    color: #34387d;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.abax-pager a:hover { background: #f1f2f8; border-color: #34387d; }
.abax-pager .abax-pager-current {
    background: #34387d;
    border-color: #34387d;
    color: #fff;
}