/**
 * Global theme overrides.
 *
 * bootstrap-select dropdowns (hero-search Location / Activity selects, and any
 * other <select> the theme upgrades via jQuery('select').selectpicker()) render
 * a Bootstrap dropdown whose selected option inherits Bootstrap's default blue
 * .active background. Recolour the open menu to the theme teal and round it,
 * matching the tour-listing sort dropdown. The toggle/field itself is already
 * styled by the hero-search CSS, so only the menu is themed here.
 */
/* When a .form-select upgrades to bootstrap-select, the wrapper keeps the
   .form-select class — so Bootstrap's native background arrow shows on top of
   bootstrap-select's own caret (double chevron). Drop the native one. */
/* Service detail — sidebar widgets (search / recent tours / destinations / categories). */
.side-bar .widget-title {
    font-size: 20px;
    color: #066168;
    margin-bottom: 16px;
}

.side-bar .trv-sidebar-search .form-control {
    border: 1px solid #e4e9ee;
    border-radius: 30px 0 0 30px;
}

.side-bar .trv-sidebar-search .site-button {
    border-radius: 0 30px 30px 0;
    padding: 0 18px;
}

.side-bar .trv-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-bar .trv-recent-name {
    color: #066168;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    display: block;
}

.side-bar .trv-recent-price {
    color: #ffaa0d;
    font-weight: 600;
    font-size: 14px;
}

.side-bar .trv-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.side-bar .trv-tag-list li a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #e4e9ee;
    border-radius: 30px;
    color: #346065;
    font-size: 14px;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.side-bar .trv-tag-list li a:hover {
    border-color: #066168;
    background: #eafafa;
    color: #066168;
}

/* Blog detail — author bio box (post author). */
.trv-author-box {
    background: #f4fbfb;
    border: 1px solid #e4e9ee;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 30px 0;
}

.trv-author-box .trv-author-avatar img {
    border-radius: 50%;
}

.trv-author-box .trv-author-label {
    font-size: 13px;
    color: #66868a;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.trv-author-box .trv-author-name {
    margin: 2px 0 6px;
    color: #066168;
    font-size: 20px;
}

.trv-author-box .trv-author-info p {
    margin: 0;
    color: #346065;
    font-size: 14px;
}

.bootstrap-select.form-select {
    background-image: none;
    padding-right: 0;
}

.bootstrap-select .dropdown-menu {
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}

.bootstrap-select .dropdown-menu li a.dropdown-item {
    border-radius: 8px;
    padding: 9px 14px;
    color: #346065;
    transition: background-color .15s ease, color .15s ease;
}

.bootstrap-select .dropdown-menu li a.dropdown-item:hover,
.bootstrap-select .dropdown-menu li a.dropdown-item:focus {
    background: #eafafa;
    color: #066168;
}

/* Selected option → theme teal (was Bootstrap blue) */
.bootstrap-select .dropdown-menu li.selected a.dropdown-item,
.bootstrap-select .dropdown-menu li a.dropdown-item.active,
.bootstrap-select .dropdown-menu li a.dropdown-item.selected {
    background: #066168 !important;
    color: #fff !important;
}

.bootstrap-select .dropdown-menu li.selected a.dropdown-item small,
.bootstrap-select .dropdown-menu li a.dropdown-item.active small {
    color: rgba(255, 255, 255, .6) !important;
}

/* bootstrap-select live-search box (when present) */
.bootstrap-select .dropdown-menu .bs-searchbox .form-control {
    border: 1px solid #e4e9ee;
    border-radius: 8px;
}

.bootstrap-select .dropdown-menu .bs-searchbox .form-control:focus {
    border-color: #066168;
    box-shadow: 0 0 0 .15rem rgba(6, 97, 104, .15);
}

/* ── Banner-2 hero (hero-search style-2): robust height ───────────────────────
   The template hero uses a fixed height (950px) tuned for a 1–2 word title.
   CMS titles vary in length; a long title overflowed the fixed box and the
   in-flow search bar spilled into the next section. Use min-height so the hero
   grows with its content instead of overflowing. */
.trv-banner-2-wrap { height: auto; min-height: 950px; }
.trv-banner-2-wrap .trv-banner-2-overlay { height: auto; min-height: 880px; }
.trv-banner-2-wrap .trv-banner-2-content-section { height: auto; min-height: 880px; }

/* ── Header style-2 (centered-logo): pin the logo to the true horizontal centre
   (aligned with the circular badge) regardless of menu length. Menu flows on the
   left, action icons pushed right; the centred logo sits in the gap. Menu is
   width-capped so it never runs under the logo. */
.header-style-2 .main-bar { position: relative; }
.header-style-2 .main-bar .logo-header {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); margin: 0; order: 0;
}
.header-style-2 .main-bar .header-nav { flex: 0 0 auto; }
.header-style-2 .main-bar .header-nav .nav { flex-wrap: nowrap; }
.header-style-2 .main-bar .extra-nav { margin-left: auto; }
@media (max-width: 1399px) {
    .header-style-2 .main-bar .logo-header { position: static; transform: none; }
}

/* ── hero search: the Location/Date/Traveler label icons render oversized
   (Botble outputs explicit 36x36 width/height attrs). Constrain them across every
   hero style — all variants share the .trv-search-st1-column column markup. */
.trv-search-st1-column label i img,
.trv-search-st1-column .form-group label img {
    width: 20px;
    height: auto;
    margin-inline-end: 5px;
}

/* ── Botble admin bar offset ──────────────────────────────────────────────────
   When an admin is logged in, Botble shows a 40px fixed bar at the top and adds
   body.show-admin-bar. The theme's overlay (absolute) and sticky (fixed) headers
   sit relative to the viewport, so they hide under the admin bar. Push them down
   by the 40px admin-bar height. */
body.show-admin-bar .site-header.is-fixed,
body.show-admin-bar .site-header.is-fixed .main-bar {
    top: 40px !important;
}
@media (min-width: 992px) {
    body.show-admin-bar .site-header.header-style-1:not(.is-fixed),
    body.show-admin-bar .site-header.header-style-2:not(.is-fixed) {
        top: 75px; /* 35px design offset + 40px admin bar */
    }
}

/* ── Comment form (fob-comment) — match theme primary color ───────────── */
.fob-comment-form-section .btn-primary,
.fob-comment-form-section button[type="submit"] {
    background-color: var(--primary-color, #066168);
    border-color: var(--primary-color, #066168);
}
.fob-comment-form-section .btn-primary:hover,
.fob-comment-form-section .btn-primary:focus,
.fob-comment-form-section .btn-primary:active,
.fob-comment-form-section button[type="submit"]:hover {
    background-color: var(--primary-color-hover, #054c52);
    border-color: var(--primary-color-hover, #054c52);
}
.fob-comment-form-section .form-control:focus,
.fob-comment-list-section .form-control:focus {
    border-color: var(--primary-color, #066168);
    box-shadow: 0 0 0 .15rem rgba(6, 97, 104, .15);
}

/* ── Gallery detail comment area — themed inputs, constrained width ───── */
.trv-gallery-comments {
    max-width: 920px;
    margin: 40px auto 0;
    padding-top: 40px;
    border-top: 1px solid #eef0f2;
}
.fob-comment-form-section .form-control {
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    background-color: #fff;
    padding: 12px 16px;
}
.fob-comment-form-section textarea.form-control {
    min-height: 130px;
}
.fob-comment-form-section label,
.fob-comment-form-section .form-label {
    font-weight: 600;
    margin-bottom: 6px;
}
.fob-comment-form-section .fob-comment-form-note {
    margin-bottom: 24px;
}
.fob-comment-form-section .btn-primary {
    border-radius: 10px;
    padding: 12px 30px;
    font-weight: 600;
}

/* ── a11y target-size: expand carousel pagination dot tap area (no visual change) ── */
.swiper-pagination-bullet {
    position: relative;
}
.swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    inset: -12px;
}

/* ── Achievement counters: shrink stat labels so each stays on one line ── */
.trv-achivment-section .trv-icon-title {
    font-size: 18px;
    line-height: 26px;
    white-space: nowrap;
}

/* ── AGA v0.5.4: compact / viewport-fit Hero Style 2 ────────────────────────
   The travel search now lives inside Banner Style 2, so the old emergency
   min-height:950/880px overrides are no longer needed. They made the whole
   first screen look as if the browser had to be zoomed out. Keep the original
   composition, but size it to the actual desktop viewport. */
.trv-banner-2-wrap,
.trv-banner-2-wrap .trv-banner-2-overlay,
.trv-banner-2-wrap .trv-banner-2-content-section {
    min-height: 0 !important;
}

@media (min-width: 1200px) {
    .trv-banner-2-wrap {
        height: clamp(680px, 82vh, 820px) !important;
        overflow: hidden;
    }

    .trv-banner-2-wrap .trv-banner-2-overlay {
        top: 0 !important;
        height: calc(100% - 40px) !important;
        margin: 20px 28px !important;
        border-radius: 28px;
    }

    .trv-banner-2-wrap .trv-banner-2-content-section {
        height: 100% !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text {
        padding-top: clamp(115px, 14vh, 145px) !important;
        padding-left: clamp(28px, 4vw, 58px) !important;
        max-width: min(68vw, 1080px) !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-small {
        font-size: clamp(27px, 2.3vw, 38px) !important;
        line-height: 1.15 !important;
        padding-left: clamp(16px, 2.5vw, 38px) !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-large {
        font-size: clamp(96px, 8.4vw, 145px) !important;
        line-height: .96 !important;
        margin-bottom: 14px !important;
        text-shadow: 4px 10px 2px rgba(0,0,0,.18) !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-text-detail {
        font-size: clamp(18px, 1.45vw, 24px) !important;
        line-height: 1.3 !important;
        margin-bottom: 18px !important;
        padding-left: clamp(16px, 2.5vw, 38px) !important;
    }

    /* Keep the new multi-service search visually attached to the hero copy. */
    .trv-banner-2-wrap .trv-search-st2.aga-travel-search {
        margin-left: clamp(16px, 2.5vw, 38px) !important;
        margin-bottom: 0 !important;
        width: min(100%, 1040px) !important;
        max-width: 1040px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-media .media1 {
        top: 125px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-media .media2 {
        top: 115px !important;
        width: min(64vw, 760px) !important;
        margin-right: 20px !important;
    }

    .trv-banner-2-wrap .trv-bnr2-offer {
        right: 28px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .trv-banner-2-wrap {
        height: 720px !important;
        overflow: hidden;
    }

    .trv-banner-2-wrap .trv-banner-2-overlay {
        top: 0 !important;
        height: calc(100% - 28px) !important;
        margin: 14px 18px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-content-section {
        height: 100% !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text {
        padding-top: 118px !important;
        padding-left: 24px !important;
        max-width: 790px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-large {
        font-size: 92px !important;
        line-height: 1 !important;
        margin-bottom: 12px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-text-detail {
        font-size: 18px !important;
        margin-bottom: 16px !important;
        padding-left: 18px !important;
    }

    .trv-banner-2-wrap .trv-search-st2.aga-travel-search {
        margin-left: 18px !important;
        width: min(100%, 760px) !important;
        max-width: 760px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-media .media2 {
        top: 125px !important;
    }
}

/* Mobile/tablet should size naturally from its content; never inherit the old
   950px desktop minimum. */
@media (max-width: 991.98px) {
    .trv-banner-2-wrap,
    .trv-banner-2-wrap .trv-banner-2-overlay,
    .trv-banner-2-wrap .trv-banner-2-content-section {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* AGA v0.5.5 — final desktop fit. This block intentionally comes last. */
@media (min-width: 1200px) {
    .trv-banner-2-wrap {
        height: clamp(600px, 72vh, 700px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .trv-banner-2-wrap .trv-banner-2-overlay {
        top: 0 !important;
        height: calc(100% - 32px) !important;
        min-height: 0 !important;
        margin: 16px 28px !important;
        border-radius: 28px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-content-section {
        height: 100% !important;
        min-height: 0 !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text {
        padding-top: clamp(150px, 17vh, 175px) !important;
        padding-left: clamp(34px, 4vw, 58px) !important;
        max-width: 1040px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-small {
        font-size: clamp(28px, 2vw, 34px) !important;
        line-height: 1.1 !important;
        padding-left: 28px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-large {
        font-size: clamp(88px, 6.8vw, 118px) !important;
        line-height: .98 !important;
        margin-bottom: 10px !important;
        text-shadow: 4px 9px 2px rgba(0,0,0,.18) !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-text-detail {
        font-size: clamp(18px, 1.3vw, 22px) !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
        padding-left: 28px !important;
    }

    .trv-banner-2-wrap .trv-search-st2.aga-travel-search {
        width: min(100%, 980px) !important;
        max-width: 980px !important;
        margin-left: 28px !important;
        margin-bottom: 0 !important;
    }

    .trv-banner-2-wrap .trv-banner-2-media .media1 {
        top: 115px !important;
        width: 42% !important;
        right: 45% !important;
        left: auto !important;
    }

    .trv-banner-2-wrap .trv-banner-2-media .media2 {
        top: 88px !important;
        width: min(40vw, 620px) !important;
        margin-right: 34px !important;
        margin-left: auto !important;
    }

    .trv-banner-2-wrap .trv-bnr2-offer {
        right: 30px !important;
        transform: translateY(-50%) scale(.82) !important;
        transform-origin: center right !important;
    }

    .trv-banner-2-wrap .trv-cloud-1 {
        top: 105px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .trv-banner-2-wrap {
        height: 650px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .trv-banner-2-wrap .trv-banner-2-overlay {
        top: 0 !important;
        height: calc(100% - 24px) !important;
        min-height: 0 !important;
        margin: 12px 16px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text {
        padding-top: 145px !important;
        padding-left: 24px !important;
        max-width: 760px !important;
    }

    .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-large {
        font-size: 84px !important;
    }

    .trv-banner-2-wrap .trv-search-st2.aga-travel-search {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
        margin-left: 18px !important;
    }
}