/**
 * Dynamic Color Overrides
 * Overrides all hardcoded #066168 (primary), #054c52 (primary-hover),
 * #85d200 (secondary/green buttons), and #ffaa0d (gold/secondary) values
 * with CSS variables set from admin portal settings.
 *
 * This file is loaded AFTER all theme CSS files so it wins on specificity.
 */

/* ── Utility classes ─────────────────────────────────────────────────────── */
.site-bg-primary           { background-color: var(--primary-color) !important; }
.site-text-primary         { color: var(--primary-color) !important; }
.site-text-yellow          { color: var(--secondary-color) !important; }

/* ── Headings & section titles ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6     { color: var(--heading-color); }
.section-head.trv-head-title-wrap .trv-head-title { color: var(--primary-color); }
.trv-page-banner-wrap .page-banner-entry .page-banner-title { color: var(--primary-color); }

/* ── Primary site button (green CTA) ─────────────────────────────────────── */
.site-button {
    background-color: var(--secondary-color) !important;
    color: var(--btn-text-color, #000) !important;
}
.site-button.outline {
    background-color: transparent !important;
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.site-button.outline:after,
.site-button.white-bg.butn-bg-shape:after { background: var(--secondary-color) !important; }
.site-button.white-bg { color: var(--primary-color) !important; }
.site-button:hover    { background-color: var(--secondary-color-hover, var(--secondary-color)) !important; }

/* ── .site-button-link ───────────────────────────────────────────────────── */
.site-button-link,
.site-button-link:hover { color: var(--primary-color) !important; }

/* ── Header style-1 ──────────────────────────────────────────────────────── */
.header-style-1 .top-bar .wt-topbar-left-info li i        { color: var(--primary-color) !important; }
.header-style-1 .top-bar .wt-topbar-right-info ul li a:hover { background-color: var(--primary-color) !important; }
.header-style-1 .trv-r-section-block > a                  { color: var(--primary-color) !important; }
.header-style-1 .company-site-info li i                   { color: var(--primary-color) !important; }
.header-style-1 .header-nav .nav > li.current-menu-item > a { color: var(--secondary-color) !important; }
.header-style-1 .header-nav .nav > li:hover > a            { color: var(--secondary-color) !important; }
.header-style-1 .header-nav .nav > li .sub-menu li a       { color: var(--primary-color) !important; }
.header-style-1 .header-nav .nav > li .sub-menu li:hover > a { color: var(--primary-color) !important; }
.header-style-1 .header-nav .nav > li .sub-menu li .fa     { color: var(--primary-color) !important; }
.header-style-1 .header-nav .nav li.has-child.nav-active > a { color: var(--primary-color) !important; }
.header-style-1 .extra-nav .extra-cell .header-search .header-search-icon:hover i { color: var(--secondary-color) !important; }
.header-style-1.sticky-header.is-fixed                    { background-color: var(--primary-color) !important; }

/* ── Header style-2 ──────────────────────────────────────────────────────── */
.header-style-2 .top-bar .wt-topbar-left-info li i        { color: var(--primary-color) !important; }
.header-style-2 .top-bar .wt-topbar-right-info ul li a:hover { background-color: var(--primary-color) !important; }
.header-style-2 .trv-r-section-block > a                  { color: var(--primary-color) !important; }
.header-style-2 .trv-r-section-block > a span             { background-color: var(--primary-color) !important; }
.header-style-2 .company-site-info li i                   { color: var(--primary-color) !important; }
.header-style-2 .header-nav .nav > li > a                 { color: var(--primary-color) !important; }
.header-style-2 .header-nav .nav > li.current-menu-item > a { color: var(--primary-color) !important; }
.header-style-2 .header-nav .nav > li:hover > a            { color: var(--primary-color) !important; }
.header-style-2 .header-nav .nav > li .sub-menu li a       { color: var(--primary-color) !important; }
.header-style-2 .header-nav .nav > li .sub-menu li:hover > a { color: var(--primary-color) !important; }
.header-style-2 .header-nav .nav li.has-child.nav-active > a { color: var(--primary-color) !important; }
.header-style-2 .extra-nav .extra-cell .header-search .header-search-icon { color: var(--primary-color) !important; }
.header-style-2 .navbar-toggler .icon-bar                 { background: var(--primary-color) !important; }
.header-style-2 .trv-switcher .trv-switcher-toggle        { color: var(--primary-color) !important; }
header-style-2.sticky-header.is-fixed                     { background-color: var(--primary-color) !important; }

/* ── Header style-3 ──────────────────────────────────────────────────────── */
.header-style-3 .header-style-3-area                      { background-color: var(--primary-color) !important; }
.header-style-3 .header-style-top-bar .trv-tp-slogn       { color: var(--primary-color) !important; }
.header-style-3 .extra-nav .extra-cell .header-search .header-search-icon { color: var(--primary-color) !important; }
.header-style-3 .extra-nav .extra-cell .header-search .header-search-icon:hover i { color: var(--secondary-color) !important; }
.header-style-3 .trv-r-section-block > a                  { color: var(--primary-color) !important; }
.header-style-3 .trv-r-section-block > a span             { background-color: var(--primary-color) !important; }
.header-style-3 .company-site-info li i                   { color: var(--primary-color) !important; }
.header-style-3 .header-nav .nav > li > a                 { color: var(--primary-color) !important; }
.header-style-3 .header-nav .nav > li.current-menu-item > a { color: var(--secondary-color) !important; }
.header-style-3 .header-nav .nav > li:hover > a            { color: var(--secondary-color) !important; }
.header-style-3 .header-nav .nav > li .sub-menu li a       { color: var(--primary-color) !important; }
.header-style-3 .header-nav .nav > li .sub-menu li:hover > a { color: var(--primary-color) !important; }
.header-style-3 .header-nav .nav > li .sub-menu li .fa     { color: var(--primary-color) !important; }
.header-style-3 .header-nav .nav li.has-child.nav-active > a { color: var(--primary-color) !important; }
.header-style-3 .navbar-toggler .icon-bar                 { background: var(--primary-color) !important; }

/* ── Header social / switcher ────────────────────────────────────────────── */
.trv-hdr-1-social ul li a                                 { color: var(--primary-color) !important; }
.header-style-1 .trv-switcher .trv-switcher-toggle:hover  { color: var(--secondary-color) !important; }
.header-style-2 .trv-switcher .trv-switcher-toggle,
.header-style-3 .trv-switcher .trv-switcher-toggle        { color: var(--primary-color) !important; }
.trv-switcher .trv-switcher-menu li a:hover               { color: var(--primary-color) !important; }

/* ── Nav / mobile menu inline color chips ────────────────────────────────── */
.header-style-1 .header-nav .nav > li > a[style],
.header-style-2 .header-nav .nav > li > a[style],
.header-style-3 .header-nav .nav > li > a[style]          { color: var(--primary-color) !important; }

/* ── Sticky header background bars ───────────────────────────────────────── */
.header-style-2 .top-bar .wt-topbar-right-info ul li > a { background-color: transparent; }
.header-style-1 .main-bar[style*="background"],
.header-style-2 .main-bar[style*="background"],
.header-style-3 .main-bar[style*="background"]            { background-color: var(--primary-color) !important; }

/* ── OWL carousel dots & nav ─────────────────────────────────────────────── */
.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span                { background: var(--primary-color) !important; }
.owl-carousel .owl-nav button.owl-prev:focus,
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:focus,
.owl-carousel .owl-nav button.owl-next:hover               { background-color: var(--primary-color) !important; }

/* ── Swiper pagination ───────────────────────────────────────────────────── */
.swiper-pagination-bullet.swiper-pagination-bullet-active  { background-color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.wt-tabs .nav-tabs > li a.active:focus,
.wt-tabs .nav-tabs > li a.active:hover                    { background-color: var(--primary-color) !important; }

/* ── Footer dark ─────────────────────────────────────────────────────────── */
.footer-dark                                               { background-color: var(--primary-color) !important; }
.footer-dark .call-us a                                    { color: var(--primary-color) !important; }
.footer-dark .copyrights-nav li a:focus,
.footer-dark .copyrights-nav li a:hover                   { color: var(--primary-color) !important; }

/* ── Newsletter / subscribe sections ─────────────────────────────────────── */
.trv-subscribe-nl .container                               { background-color: var(--secondary-color) !important; }
.trv-subscribe-nl.trv-full-bx                              { background-color: var(--secondary-color) !important; }
.trv-subscribe-nl-st2 .container                           { background-color: var(--primary-color) !important; }
.trv-subscribe-nl-st2.trv-full-bx                          { background-color: var(--secondary-color) !important; }
.trv-subscribe-nl .trv-nl-large-text,
.trv-subscribe-nl .trv-nl-title                            { color: var(--primary-color) !important; }
.ftr-nw-form .ftr-nw-subcribe-btn                          { background-color: var(--primary-color) !important; }
.ftr-nw-form .ftr-nw-subcribe-btn:hover                    { color: var(--primary-color) !important; background-color: var(--secondary-color) !important; }
.trv-sidebar-nl .trv-sidebar-nl-inner                      { background-color: var(--secondary-color) !important; }
.trv-sidebar-nl .trv-sidebar-nl-heading,
.trv-sidebar-nl .trv-sidebar-nl-subtitle                   { color: var(--primary-color) !important; }
.trv-sidebar-nl .trv-sidebar-nl-btn:hover                  { color: var(--primary-color) !important; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.wt-breadcrumb li a                                        { color: var(--primary-color) !important; }
.wt-breadcrumb                                             { color: var(--primary-color) !important; }

/* ── Sidebar widgets ─────────────────────────────────────────────────────── */
.side-bar .search-bx .form-control                        { color: var(--primary-color) !important; }
.side-bar .search-bx .input-group-btn .btn                { color: var(--primary-color) !important; }
.side-bar .widget_services ul li a                        { color: var(--primary-color) !important; }
.side-bar .widget_archives ul li a:hover                  { color: var(--primary-color) !important; }
.side-bar .widget_archives ul li .badge                   { color: var(--primary-color) !important; }
.side-bar .widget_tag_cloud .tagcloud a                   { color: var(--primary-color) !important; }
.side-bar .widget_tag_cloud .tagcloud a:hover             { background-color: var(--secondary-color) !important; }

/* ── Tag clouds / share ──────────────────────────────────────────────────── */
.s-post-tag-share .tagcloud a                             { color: var(--primary-color) !important; }
.s-post-tag-share .tagcloud a:hover                       { background-color: var(--secondary-color) !important; }

/* ── Search modal ────────────────────────────────────────────────────────── */
#search .search-btn                                        { background: var(--primary-color) !important; }
#search .search-btn:hover                                  { background-color: var(--secondary-color) !important; }
#search .close-btn                                         { background-color: var(--secondary-color) !important; }
#search .close-btn:hover                                   { background-color: var(--primary-color) !important; }
#search input[type=search]                                 { color: var(--primary-color) !important; }
#search input[type=search]::placeholder                    { color: var(--primary-color) !important; }

/* ── Tour category filter carousel (.trv-pro-filtr-cate-carousal-wrap) ─────
   Active chip = primary, hover chip = secondary                             */
.trv-pro-filtr-cate-carousal-wrap .trv-project-filter-wrap.pro-filtr-cate-carousal span.active {
    background-color: var(--primary-color) !important;
}
.trv-pro-filtr-cate-carousal-wrap .trv-project-filter-wrap.pro-filtr-cate-carousal span:hover {
    background-color: var(--secondary-color) !important;
}
/* Generic project filter (no wrap) */
.project-filter-wrap.pro-filtr-cate-carousal span.active,
.project-filter-wrap.pro-filtr-cate-carousal span:hover   { background-color: var(--primary-color) !important; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.custom-pagination li.prev a:hover,
.custom-pagination li.next a:hover                         { background-color: var(--primary-color) !important; }

/* ── Tour filter panel (tour-filter.css overrides) ───────────────────────── */
.filter-widget-header .filter-icon,
.filter-widget-header .filter-title                        { color: var(--primary-color) !important; }

.custom-filter-label:hover                                 { border-color: var(--primary-color) !important; }
.custom-filter-check input:checked + .custom-filter-label {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.custom-filter-check input:checked + .custom-filter-label::before {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.filter-toggle-btn                                         { color: var(--primary-color) !important; }
.filter-widget input[type="number"]:focus                  { border-color: var(--primary-color) !important; }

/* ── Hotel tier buttons ───────────────────────────────────────────────────── */
.trv-hotel-tier-btn                                        { color: var(--primary-color) !important; }
.trv-hotel-tier-btn .bi-star-fill                          { color: var(--secondary-color) !important; }
.trv-hotel-tier-btn:hover                                  { border-color: var(--primary-color) !important; }
.btn-check:checked + .trv-hotel-tier-btn                   { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }

/* ── Tour action buttons (Compare / Wishlist / Share) ────────────────────── */
.trv-tour-action                                           { color: var(--primary-color) !important; }
.trv-tour-action:hover                                     { border-color: var(--primary-color) !important; }
.trv-tour-action--compare.active                           { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }

/* ── Rating bars ─────────────────────────────────────────────────────────── */
.trv-rating-bar .progress-bar                              { background-color: var(--primary-color) !important; }
.trv-rating-bar-label .bi-star-fill                        { color: var(--secondary-color) !important; }

/* ── Review form submit button (green CTA) ───────────────────────────────── */
.box-form-reviews .btn-primary,
.box-form-reviews button[type="submit"]                    { background-color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; }
.box-form-reviews .btn-primary:hover:not(:disabled),
.box-form-reviews button[type="submit"]:hover:not(:disabled) { background-color: var(--secondary-color-hover, var(--secondary-color)) !important; border-color: var(--secondary-color-hover, var(--secondary-color)) !important; }
.box-form-reviews .form-control:focus                      { border-color: var(--primary-color) !important; }

/* ── Filter action buttons ───────────────────────────────────────────────── */
.filter-actions .filter-reset                              { color: var(--primary-color) !important; }
.filter-actions .filter-reset:hover,
.filter-actions .filter-reset:focus                        { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }

/* ── Filter / Sort toggle buttons ────────────────────────────────────────── */
.btn-filter, .btn-filter svg                               { color: var(--primary-color) !important; }
.btn-filter:hover, .btn-filter:focus,
.btn-filter:focus-visible,
.btn-filter[aria-expanded="true"]                          { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }

.tour-sort-dropdown .dropdown-toggle                       { color: var(--primary-color) !important; }
.tour-sort-dropdown .dropdown-toggle:hover,
.tour-sort-dropdown .dropdown-toggle:focus,
.tour-sort-dropdown .dropdown-toggle[aria-expanded="true"] { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
.tour-sort-dropdown .dropdown-item:hover,
.tour-sort-dropdown .dropdown-item:focus                   { color: var(--primary-color) !important; }
.tour-sort-dropdown .dropdown-item.active,
.tour-sort-dropdown .dropdown-item:active                  { background: var(--primary-color) !important; }

/* ── Grid/List view toggle ───────────────────────────────────────────────── */
.listing-tabs .item-menu.layout-tour:hover                 { border-color: var(--primary-color) !important; }
.listing-tabs .item-menu.layout-tour:hover svg circle,
.listing-tabs .item-menu.layout-tour:hover svg rect        { stroke: var(--primary-color) !important; }
.listing-tabs .item-menu.layout-tour.active                { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }

/* ── Compare remove button ───────────────────────────────────────────────── */
.compare-item-remove-table                                 { color: var(--primary-color) !important; }
.compare-item-remove-table:hover                           { background: var(--primary-color) !important; }

/* ── Bootstrap-select dropdowns ─────────────────────────────────────────── */
.bootstrap-select .dropdown-menu li a.dropdown-item:hover,
.bootstrap-select .dropdown-menu li a.dropdown-item:focus  { color: var(--primary-color) !important; }
.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: var(--primary-color) !important; }
.bootstrap-select .dropdown-menu .bs-searchbox .form-control:focus { border-color: var(--primary-color) !important; }

/* ── Sidebar (theme-overrides.css) ───────────────────────────────────────── */
.side-bar .widget-title                                    { color: var(--primary-color) !important; }
.side-bar .trv-recent-name                                 { color: var(--primary-color) !important; }
.side-bar .trv-recent-price                                { color: var(--secondary-color) !important; }
.side-bar .trv-tag-list li a:hover                         { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }

/* ── Author bio box ──────────────────────────────────────────────────────── */
.trv-author-box .trv-author-name                           { color: var(--primary-color) !important; }

/* ── Comment form (fob) ─────────────────────────────────────────────────── */
.fob-comment-form-section .btn-primary,
.fob-comment-form-section button[type="submit"]            { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.fob-comment-form-section .btn-primary:hover,
.fob-comment-form-section button[type="submit"]:hover      { background-color: var(--primary-color-hover) !important; border-color: var(--primary-color-hover) !important; }
.fob-comment-form-section .form-control:focus,
.fob-comment-list-section .form-control:focus              { border-color: var(--primary-color) !important; }

/* ── Post navigation ─────────────────────────────────────────────────────── */
.post-navigation .post-nav-links .post-nav-item .nav-post-meta b { color: var(--primary-color) !important; }
.post-navigation .post-nav-links .post-nav-item:hover a    { color: var(--primary-color) !important; }

/* ── Destination box hover ───────────────────────────────────────────────── */
.trv-destination-bx1:hover .trv-content .trv-title a       { background-color: var(--primary-color) !important; }

/* ── Counter / stats sections ────────────────────────────────────────────── */
.trv-counter-outer-two-wrap                                { background-color: var(--primary-color) !important; }
.trv-we-off-service                                        { background-color: var(--primary-color) !important; }

/* ── Side panel (trv-side-pnl) ──────────────────────────────────────────── */
.trv-side-pnl-info .trv-side-pnl-content .trv-lg-title    { color: var(--secondary-color) !important; }
.trv-side-pnl-info .trv-side-pnl-plan .trv-side-pnl-plan-count { color: var(--secondary-color) !important; }

/* ── Banner hero social links ────────────────────────────────────────────── */
.trv-banner-1-wrap .trv-banner-1-overlay .trv-banner-1-social ul li a:hover { color: var(--secondary-color) !important; }
.trv-banner-2-wrap .trv-banner-2-overlay .trv-banner-2-social ul li a:hover { color: var(--secondary-color) !important; }

/* ── Popular tour names hover ────────────────────────────────────────────── */
.tvr-pop-tour .tvr-pop-tour-name:hover,
.tvr-pop-search-carousel .owl-item:nth-child(2n) .item .tvr-pop-tour-name:hover { color: var(--secondary-color) !important; }

/* ── Right top part / compare buttons (green CTA) ────────────────────────── */
.trv-right-tp-part .site-btn,
.trv-tour-compare-signel-right .site-btn                   { background-color: var(--secondary-color) !important; }

/* ── Trustpilot / star reviews ────────────────────────────────────────────── */
.trv-Trustpilot-section .trv-stars .star.filled,
.trv-rate-review .trv-stars-sec .trv-stars .star           { background: var(--secondary-color) !important; background-color: var(--secondary-color) !important; }

/* ── Night count slider ────────────────────────────────────────────────────── */
.trv-night-count-slider .slider.slider-horizontal .slider-track,
.trv-night-count-slider .slider.slider-horizontal .slider-handle { background-color: var(--secondary-color) !important; background-image: none !important; }
.trv-night-count-slider .slider-selection                  { background: var(--primary-color) !important; }

/* ── Booking widget / subscription inline color dots ─────────────────────── */
.trv-subscribe-nl-st2 .trv-nl-dot,
[class*="trv-"] > [style*="background-color: #066168"],
[class*="trv-"] > [style*="background-color:#066168"]      { background-color: var(--primary-color) !important; }

/* ── "We recommend" 24/7 box ─────────────────────────────────────────────── */
.trv-we-recommend-content .trv-24-7-bx .trv-24-7-info     { background-color: var(--primary-color) !important; }

/* ── Popular tours section background ───────────────────────────────────── */
.trv-popular-tours3                                        { background-color: var(--primary-color) !important; }

/* ── Counter media icons ─────────────────────────────────────────────────── */
.trv-counter-outer-three-wrap .row [class*=col-]:nth-child(2n) .trv-counter-media { background-color: var(--secondary-color) !important; }

/* ── Step corner decoration ─────────────────────────────────────────────── */
.trv-servi-bx1.trv-servi-bx-clr3 .trv-step-corner-bx .trv-step-corner { border-bottom-color: var(--secondary-color) !important; }

/* ── Product box ─────────────────────────────────────────────────────────── */
.wt-product-box .wt-info .wt-title a:hover                 { color: var(--primary-color) !important; }
.wt-product-box .price ins                                 { color: var(--primary-color) !important; }
.wt-product-box .item-cart-view .item-btn a i:hover        { color: var(--primary-color) !important; }

/* ── Gallery / section background accents ────────────────────────────────── */
.trv-banner-2-wrap .trv-circle-bg-one                      { background-color: var(--primary-color) !important; }
.trv-banner-2-wrap .trv-circle-bg-two                      { background-color: var(--secondary-color) !important; }

/* ── Secondary / gold color uses ────────────────────────────────────────── */
.site-text-yellow                                          { color: var(--secondary-color) !important; }
.trv-hotel-tier-btn .bi-star-fill,
.form-rating-stars label                                   { color: var(--secondary-color) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BACKGROUND COLORS  (admin-controlled via --bg-light / --bg-medium)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page/site background */
body                                        { background-color: var(--bg-light) !important; }

/* Light teal (#efffff) backgrounds */
.trv-tsmo-banner-wrap                       { background-color: var(--bg-light) !important; }
.trv-we-off-service:before                  { background-color: var(--bg-light) !important; }
.trv-subscribe-nl-st2 .trv-nl-light-bg,
[class*="trv-"] .trv-switcher .trv-switcher-menu li a:hover { background-color: var(--bg-light) !important; }
/* Sticky header uses --bg-light tint when not solid */
.header-style-1 .sticky-header:not(.is-fixed),
.header-style-2 .sticky-header:not(.is-fixed) { background-color: var(--bg-light); }

/* Medium teal (#dbeeee) backgrounds */
.trv-ben-book-wrap                          { background-color: var(--bg-medium) !important; }
.trv-blog-style2-section                    { background-color: var(--bg-medium) !important; }
.trv-service-st1 .trv-service-back-bg       { background-color: var(--bg-medium) !important; }

/* Section that uses primary as background */
.trv-we-off-service                         { background-color: var(--primary-color) !important; }
.trv-service-st1                            { background-color: var(--primary-color) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOADER  (page preloader)
   ═══════════════════════════════════════════════════════════════════════════ */
.loading-area .loading-box                  { background-color: var(--loader-bg) !important; }
.loader .white                              { background: var(--loader-bg) !important; }

/* The four animated dots */
.loader .dot:nth-child(2)                   { background: var(--loader-dot1) !important; }
.loader .dot:nth-child(3)                   { background: var(--loader-dot2) !important; }
.loader .dot:nth-child(4)                   { background: var(--loader-dot3) !important; }
.loader .dot:nth-child(5)                   { background: var(--loader-dot4) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL TO TOP BUTTON  (.scroltop)
   ═══════════════════════════════════════════════════════════════════════════ */
button.scroltop {
    width: 46px !important;
    height: 46px !important;
    background: var(--scroll-top-bg) !important;
    color: var(--scroll-top-color) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

button.scroltop:hover {
    background: var(--scroll-top-color) !important;
    color: var(--scroll-top-bg) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28) !important;
}

button.scroltop span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

button.scroltop span svg,
button.scroltop svg {
    color: inherit !important;
    stroke: currentColor !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESTINATION DETAIL — rich-text list styling
   Any ul/ol inside .trv-inr-para gets the same yellow tick treatment as
   .trv-checklist-st1, using a CSS ::before pseudo-element so no extra
   markup is needed (TinyMCE outputs plain <li> tags).
   ═══════════════════════════════════════════════════════════════════════════ */
.trv-inr-para ul,
.trv-inr-para ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 24px;
}

.trv-inr-para ul li,
.trv-inr-para ol li {
    position: relative;
    padding-left: 42px;
    margin-bottom: 16px;
    font-family: Figtree, sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-color, #346065);
    line-height: 1.6;
}

/* Bootstrap Icons check-circle-fill via unicode — same glyph used by the template */
.trv-inr-para ul li::before,
.trv-inr-para ol li::before {
    font-family: "bootstrap-icons" !important;
    content: "\f26a";                        /* bi-check-circle-fill */
    position: absolute;
    left: 0;
    top: 0px;
    font-size: 22px;
    color: var(--secondary-color, #85d200);
    line-height: 1.5;
}

/* ── Search widget: widen pill to fit 3 columns + button ─────────────────── */
.trv-hp4-bnr-wrap .trv-search-st5 {
    max-width: 900px !important;
}

/* Each column takes an equal share of the available width */
.trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* Allow the pill height to adapt when it wraps on smaller screens */
.trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-bg {
    height: auto !important;
    min-height: 80px;
    border-radius: 50px !important;
    padding: 10px 12px !important;
}

/* Ensure the flex row doesn't overflow on medium screens */
.trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column-wrap {
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Tighten horizontal padding on columns so text isn't clipped */
.trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column {
    padding: 0 12px !important;
}

/* Keep the select/input transparent and full-width inside the column */
.trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column .form-control {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 24px !important;
    font-size: 13px !important;
    color: #545454 !important;
}

/* On tablets wrap gracefully */
@media (max-width: 767px) {
    .trv-hp4-bnr-wrap .trv-search-st5 {
        max-width: calc(100% - 20px) !important;
    }
    .trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-bg {
        border-radius: 20px !important;
        padding: 16px !important;
    }
    .trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column-wrap {
        flex-wrap: wrap !important;
    }
    .trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        border-left: none !important;
    }
    .trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-column:before {
        display: none !important;
    }
    .trv-hp4-bnr-wrap .trv-search-st5 .trv-search-st1-search-btn .srch-btn {
        width: 100% !important;
        border-radius: 10px !important;
    }
}

/* ── Search tab pill buttons ─────────────────────────────────────────────── */
#tab-tours, #tab-cars {
    transition: background .25s, color .25s, border-color .25s;
}
#tab-tours:hover, #tab-cars:hover {
    opacity: .88;
}
