/* ============================================================================
   bld-theme.css — BLD polish layer (loaded LAST, after custom.css).
   Hand-maintained (not SCSS-generated). Keeps BLD's original structure/colors;
   only refines typography, readability and spacing.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   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 (it was oversized
   relative to the nav).
   ---------------------------------------------------------------------------- */
#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 {
    height: 30px !important;
    background-size: contain !important;
    background-position: left center !important;
}

/* ----------------------------------------------------------------------------
   Dropdown / submenu readability. The top nav sits transparent over the hero
   with WHITE text, but the open dropdown panels have a light background — force
   dark text inside them so the items are legible (they were white-on-white).
   ---------------------------------------------------------------------------- */
.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: #000 !important;
}
/* Dropdown panel: clean white surface with a soft shadow.
   Only the floating panel itself — a simple submenu's <ul>, or the megamenu's
   .menu-wrapper. Exclude lists nested INSIDE a megamenu (li:not(.megamenu)) so the
   city/type sub-lists don't each render as their own shadowed white box. */
.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;
    /* Clip item hover backgrounds to the rounded corners so the first/last items
       don't square off the panel on hover. (Submenus are single-level — no flyout
       to clip.) */
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Spacing / line-height: the content was too cramped. A bit more air = tidier,
   more professional 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 labels (checkout, date pickers, search) read clearer in semibold so they
   stand out from the input/select text. Keep the boxed panel header (.inner)
   flush by leaving .box_style_1 at its native 30px padding (its header uses a
   matching -30px bleed — overriding the padding broke that alignment). */
.form-group > label,
.styled-select-common + label,
label.lbl-bold { font-weight: 600; }

/* ----------------------------------------------------------------------------
   Modern, soft inputs (subtle, brand-agnostic).
   ---------------------------------------------------------------------------- */
.form-control,
.styled-select-common {
    border-radius: 6px;
}
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.08);
    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; }
.tour_container:hover .img_container img,
.hotel_container:hover .img_container img { transform: scale(1.06); }

/* ----------------------------------------------------------------------------
   Checkout: make the order summary readable and the TOTAL unmistakable.
   ---------------------------------------------------------------------------- */
.table_summary { width: 100%; }
.table_summary td { vertical-align: middle; }
/* Sidebar summary: labels left, values (date / due date / total) right. BS5
   dropped .text-right, so force the value column right-aligned. */
.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: #111;
    border-top: 2px solid #111;
    padding-top: 12px;
}
.table_summary tr.total td:first-child { text-transform: uppercase; letter-spacing: .5px; }
/* Cart service rows: a touch more air so the detail reads clearly. */
.table.cart-list td { padding: 12px 10px; line-height: 1.6; }
.table.cart-list .item_name,
.table.cart-list strong { color: #1d2126; }
/* The service/passenger detail column reads better left-aligned than centered
   (the name + description was cramped and hard to scan when centered). */
.table.cart-list thead th:nth-child(2),
.table.cart-list tbody td:nth-child(2) { text-align: left; }

/* ----------------------------------------------------------------------------
   Footer contact: the phone/email text sat at the top of their (taller) icons,
   leaving the icon and the text vertically out of line. Center them together.
   ---------------------------------------------------------------------------- */
footer a#phone,
footer a#email_footer {
    display: flex;
    align-items: center;
    min-height: 30px;
}
footer a#phone::before,
footer a#email_footer::before {
    top: 50%;
    transform: translateY(-50%);
}
/* The envelope glyph sits a touch high in its em-box, so its icon reads ~2px
   above the email text — nudge just that icon down to line up with the text. */
footer a#email_footer::before {
    transform: translateY(calc(-50% + 2px));
}

/* ----------------------------------------------------------------------------
   Secondary (outline) buttons — used for Cancel / Close in confirmation modals
   and the checkout, so the primary action stays visually dominant.
   ---------------------------------------------------------------------------- */
.btn-secondary-outline {
    background: #fff !important;
    color: #444 !important;
    border: 1px solid #ccc !important;
}
.btn-secondary-outline:hover {
    background: #f3f3f3 !important;
    color: #111 !important;
}
/* Confirmation modal polish */
.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: use the BLD red (matching the * asterisks) so the
   client-side "field required" labels are obvious and on-brand.
   ---------------------------------------------------------------------------- */
label.error { color: #ea2d47 !important; font-weight: 600; }
.text-danger { color: #ea2d47 !important; }

/* ----------------------------------------------------------------------------
   Keep the full-screen preloader BELOW open modals (Bootstrap backdrop is 1050,
   modal 1055) so the dim overlay never covers a modal. It was at z-index 99999.
   ---------------------------------------------------------------------------- */
#beglobberloader,
.beglobber-loader { z-index: 1040 !important; }

/* Service detail: the rate total sits right next to the booking button.
   The amount stays prominent; the secondary "vehicles count" line is smaller and
   muted so the block doesn't read as one oversized heading. */
.total-amount { font-size: 16px; font-weight: 700; color: #111; line-height: 1.3; }
.total-amount .total-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

/* ----------------------------------------------------------------------------
   Rates module (rates/main + service detail).
   ---------------------------------------------------------------------------- */
/* Tabs: Bootstrap's default link-blue was off-brand — use the brand black. */
.nav-tabs .nav-link { color: #555; font-weight: 600; }
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus { color: #000; }
.nav-tabs .nav-link.active { color: #000; }

/* Experiences list: 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 at a fixed height that lines up with the description. */
.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: the booking detail / list sat flush under the fixed header. Add a
   little breathing room at the top on small screens.
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #booking { padding-top: 18px; }
    main.white_bg > .container.margin_60 { padding-top: 12px; }
}

/* ----------------------------------------------------------------------------
   Mobile header tools: the cart, logout and hamburger must share the same icon
   size and even spacing (the hamburger was larger and the logout/menu gap was
   tighter than the cart/logout one).
   ---------------------------------------------------------------------------- */
@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, just below the brand/version.
   ---------------------------------------------------------------------------- */
#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; }

/* ----------------------------------------------------------------------------
   Profile bookings: icon-only action buttons (view detail / download voucher).
   ---------------------------------------------------------------------------- */
.booking_buttons .bld-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0 6px 6px 0;
    font-size: 18px;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid #d7dade;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.booking_buttons .bld-icon-btn i { margin: 0; }
/* View detail: solid BLD black. Download voucher: white / outline. No maroon. */
.booking_buttons .bld-icon-btn-dark { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.booking_buttons .bld-icon-btn-dark:hover { background: #000 !important; color: #fff !important; }
.booking_buttons .bld-icon-btn-light { background: #fff !important; color: #1d2126 !important; border-color: #d7dade !important; }
.booking_buttons .bld-icon-btn-light:hover { background: #111 !important; color: #fff !important; border-color: #111 !important; }

/* Booking detail modal: the pickup / flight / schedule row spans the full width
   so it has room to breathe (was cramped in a single centered cell). */
.pickup-detail-row {
    text-align: left !important;
    padding: 8px 14px !important;
    background: #f7f8f9;
    font-size: 13px;
    color: #33363a;
    line-height: 1.7;
}

/* On mobile, widen the booking-detail / confirmation modals so the content has
   more room and doesn't feel cramped. */
@media (max-width: 575px) {
    #modalBookDetailControl .modal-dialog,
    #modalCancelBook .modal-dialog,
    #modalConfirmBook .modal-dialog,
    #modalConfirmCancel .modal-dialog {
        margin: 0.5rem 0.4rem;
        max-width: none;
    }
}

/* ----------------------------------------------------------------------------
   Mobile stacked tables: the theme injects generic English labels
   (Item/Quantity/Discount/Total/Actions) via td::before that don't match BLD's
   real cart columns and aren't translated. Suppress them and give the values the
   full width so the mobile cart reads cleanly instead of mislabeled + cramped.
   ---------------------------------------------------------------------------- */
@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: destination + dates being searched.
   Label left, value right — matching the checkout summary style.
   ---------------------------------------------------------------------------- */
.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: #ea2d47; }
.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; }