/* Write your css codes here */


/* ================================================
   HILLTOP HERO SLIDER
   ================================================ */

/* Header - always white */
.header-main-area { position: relative !important; z-index: 999 !important; }
.header-main-area .header {
    position: relative !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

/* Slider wrapper - full width, fixed height */
.hilltop-hero-wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 650px;
    overflow: hidden;
    background: #111;
}

/* Slick container */
.hilltop-slides,
.hilltop-slides .slick-list,
.hilltop-slides .slick-track { height: 650px !important; }

/* Each slide */
.hilltop-slide {
    height: 650px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}
.hilltop-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.55) 100%);
}

/* Content overlay - sits above slider, never moves */
.hilltop-hero-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px 60px;
    pointer-events: none;
}
.hilltop-hero-text {
    text-align: center;
    margin-bottom: 24px;
    pointer-events: none;
}
.hilltop-hero-text h6 {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    font-family: inherit;
}
.hilltop-hero-text h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    line-height: 1.2;
}
.hilltop-hero-text p {
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Search bar */
.hilltop-hero-search { width: 100%; max-width: 860px; pointer-events: all; }
.hilltop-search-inner {
    background: rgba(255,255,255,0.97);
    border-radius: 50px;
    padding: 8px 8px 8px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    flex-wrap: nowrap;
}
.hs-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 4px 10px;
}
.hs-field + .hs-field { border-left: 1px solid #e0e0e0; }
.hs-field i { color: #999; font-size: 13px; margin-right: 7px; flex-shrink: 0; }
.hs-field input,
.hs-field select {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100%;
    font-size: 14px;
    padding: 6px 0;
    color: #333;
    cursor: pointer;
}
.hs-btn {
    background: var(--base-color, #0d6efd);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 6px;
}
.hs-btn:hover { opacity: 0.9; }

/* Arrows */
.hilltop-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    width: 46px; height: 46px;
    color: #fff;
    font-size: 26px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}
.hilltop-arr:hover { background: rgba(255,255,255,0.35); }
.hilltop-arr-prev { left: 16px; }
.hilltop-arr-next { right: 16px; }

/* Hide original hero text/search, keep mosaic */
.hero .hero-content--wrap .col-lg-8,
.hero .hero-content--wrap .col-lg-11,
.hero .hero--element__wrap { display: none !important; }
.hero { padding-top: 0 !important; }
.hero .hero-content--wrap { padding-top: 30px !important; }

/* Responsive */
@media (max-width: 767px) {
    .hilltop-hero-wrap,
    .hilltop-slides,
    .hilltop-slides .slick-list,
    .hilltop-slides .slick-track,
    .hilltop-slide { height: 500px !important; }
    .hilltop-search-inner {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 10px;
        gap: 2px;
    }
    .hs-field { flex: 1 1 45%; border-left: none !important; padding: 6px 8px; }
    .hs-field + .hs-field { border-top: 1px solid #eee; }
    .hs-btn { width: 100%; border-radius: 12px; margin-left: 0; margin-top: 6px; padding: 10px; }
    .hilltop-hero-content { padding: 0 12px 20px; }
    .hilltop-arr { display: none; }
}
@media (max-width: 480px) {
    .hilltop-hero-wrap,
    .hilltop-slides,
    .hilltop-slides .slick-list,
    .hilltop-slides .slick-track,
    .hilltop-slide { height: 420px !important; }
    .hs-field { flex: 1 1 100%; }
}


.hilltop-slides .slick-list { overflow: hidden !important; }
.hilltop-slides .slick-track { width: 100% !important; }
.hilltop-slides .slick-slide { 
    position: absolute !important; 
    top: 0; left: 0;
    opacity: 0 !important;
    transition: opacity 0.8s ease !important;
    width: 100% !important;
}
.hilltop-slides .slick-slide.slick-active { 
    opacity: 1 !important; 
    position: relative !important;
}

/* Fix 2: Mobile - ensure title shows at top */
@media (max-width: 575px) {
    .hilltop-hero-wrap,
    .hilltop-slides,
    .hilltop-slides .slick-list,
    .hilltop-slides .slick-track,
    .hilltop-slide { height: 560px !important; }
    .hilltop-hero-content {
        justify-content: center !important;
        padding: 20px 12px 16px !important;
    }
    .hilltop-hero-text h6 { font-size: 15px !important; margin-bottom: 5px !important; }
    .hilltop-hero-text h1 { font-size: 1.5rem !important; margin-bottom: 8px !important; }
    .hilltop-hero-text p { font-size: 13px !important; }
    .hilltop-hero-text { margin-bottom: 12px !important; }
}







.hilltop-slides .slick-slide {
    width: 100vw !important;
}
.hilltop-slides.slick-initialized .slick-slide {
    display: block !important;
}
/* Remove any gap from slick-track in fade mode */
.hilltop-slides .slick-track {
    height: 650px !important;
}



/* Pure CSS Crossfade Slider */
.hilltop-css-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hilltop-css-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 1;
}
.hilltop-css-slide.active {
    opacity: 1;
    z-index: 2;
}
/* Dark overlay on each slide */
.hilltop-css-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 100%);
}

/* Hide language selector in header */
li.language { display: none !important; }


/* ---- Select2 in hero search bar - clean fix ---- */
.hilltop-search-inner .select2-container--default .select2-selection--single {
    height: 41px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
}
.hilltop-search-inner .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 41px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    color: #555 !important;
    font-size: 14px !important;
}
.hilltop-search-inner .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 41px !important;
    top: 0 !important;
    right: 0 !important;
    width: 16px !important;
}
.hilltop-search-inner .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #999 transparent transparent transparent !important;
}

/* Logo preloader */
#preloader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#preloader-logo {
    animation: preloaderPulse 1s ease-in-out infinite alternate;
}
#preloader-logo img {
    width: 180px;
    height: auto;
}
@keyframes preloaderPulse {
    from { opacity: 0.4; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1.05); }
}

/* Hilltop preloader overrides */
#preloader { background: #0a2540 !important; flex-direction: column !important; gap: 20px !important; }
#preloader #text { flex-wrap: wrap !important; justify-content: center !important; max-width: 600px !important; }
#preloader #text p { font-size: 28px !important; }
#preloader #text p.space { width: 16px !important; min-width: 16px !important; }
#preloader-logo img { width: 160px !important; }

/* Fix preloader for 23 letters */
#preloader #text p:nth-child(1)  { animation-delay: 0.1s; }
#preloader #text p:nth-child(2)  { animation-delay: 0.2s; }
#preloader #text p:nth-child(3)  { animation-delay: 0.3s; }
#preloader #text p:nth-child(4)  { animation-delay: 0.4s; }
#preloader #text p:nth-child(5)  { animation-delay: 0.5s; }
#preloader #text p:nth-child(6)  { animation-delay: 0.6s; }
#preloader #text p:nth-child(7)  { animation-delay: 0.7s; }
#preloader #text p:nth-child(8)  { animation-delay: 0.75s; }
#preloader #text p:nth-child(9)  { animation-delay: 0.8s; }
#preloader #text p:nth-child(10) { animation-delay: 0.9s; }
#preloader #text p:nth-child(11) { animation-delay: 1.0s; }
#preloader #text p:nth-child(12) { animation-delay: 1.05s; }
#preloader #text p:nth-child(13) { animation-delay: 1.1s; }
#preloader #text p:nth-child(14) { animation-delay: 1.2s; }
#preloader #text p:nth-child(15) { animation-delay: 1.3s; }
#preloader #text p:nth-child(16) { animation-delay: 1.4s; }
#preloader #text p:nth-child(17) { animation-delay: 1.5s; }
#preloader #text p:nth-child(18) { animation-delay: 1.6s; }
#preloader #text p:nth-child(19) { animation-delay: 1.7s; }
#preloader #text p:nth-child(20) { animation-delay: 1.8s; }
#preloader #text p:nth-child(21) { animation-delay: 1.9s; }
#preloader #text p:nth-child(22) { animation-delay: 2.0s; }
#preloader #text p:nth-child(23) { animation-delay: 2.1s; }
#preloader-logo { display: none !important; }

/* ---- TourRadar-style hero pickers (month + travelers) ---- */
.tr-picker { position: relative; cursor: pointer; }
.tr-trigger {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 6px 0;
    color: #333;
    cursor: pointer;
}
.tr-panel {
    /* position: fixed (not absolute) - the primary hero wrapper clips
       overflow, and fixed positioning (computed in JS from the trigger's
       getBoundingClientRect()) is the only way the panel isn't cut off. */
    display: none;
    position: fixed;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    padding: 16px;
    z-index: 1050;
    cursor: default;
}
.tr-picker.is-open .tr-panel { display: block; }

.tr-panel--month { width: 280px; }
.tr-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tr-year { font-weight: 600; font-size: 15px; }
.tr-nav {
    border: 1px solid #e0e0e0;
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.tr-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.tr-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.tr-month {
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 13px;
    cursor: pointer;
}
.tr-month.is-selected {
    background: var(--base-color, #0d6efd);
    color: #fff;
    border-color: var(--base-color, #0d6efd);
}
.tr-month:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.tr-anytime {
    width: 100%;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
}

.tr-panel--travelers { width: 260px; }
.tr-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.tr-row:last-of-type { border-bottom: none; }
.tr-row__label strong { display: block; font-size: 14px; }
.tr-row__label small { color: #888; font-size: 12px; }
.tr-stepper { display: flex; align-items: center; gap: 10px; }
.tr-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    background: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.tr-step:disabled { opacity: 0.35; cursor: not-allowed; }
.tr-count { min-width: 20px; text-align: center; font-size: 14px; }
.tr-apply {
    width: 100%;
    margin-top: 12px;
    background: var(--base-color, #0d6efd);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Tour details "Book This Tour" widget - denser layout ---- */
.booking-widget .product--info__item {
    padding-bottom: 0;
    margin-bottom: 14px;
    border-bottom: none;
}
.booking-widget .form--label {
    margin-bottom: 6px;
    font-size: 13px;
}
.booking-widget .form--control {
    padding: 8px 12px;
}
.booking-widget .form--check {
    margin-bottom: 4px !important;
}
.booking-widget .form--check .form-check-label {
    font-size: 14px;
    line-height: 22px;
}

/* Desktop: if the (now much shorter) widget is still taller than the
   viewport, scroll inside the sticky sidebar instead of running off-screen. */
@media (min-width: 992px) {
    .booking-widget {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}

/* Mobile: booking sits below all tour content, so surface a fixed
   "Book This Tour" bar that jumps straight to #bookingWidget. */
.mobile-booking-cta {
    display: none;
}
@media (max-width: 991.98px) {
    .mobile-booking-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .mobile-booking-cta__info {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .mobile-booking-cta__label {
        font-size: 11px;
        color: #888;
    }
    .mobile-booking-cta__price {
        font-size: 16px;
        font-weight: 700;
    }
    .mobile-booking-cta__btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.has-mobile-booking-cta {
        padding-bottom: 74px;
    }
}

/* Fix: main.css's .btn--success and .btn--warning both set text color to
   the same hue as their own background (e.g. color: hsl(var(--success))
   on a hsl(var(--success)) bg), making the label invisible - every
   sibling .btn--* variant (danger, base, base-two) uses white text
   against its colored background instead. .btn--success was found first
   (agency booking review's Approve button); .btn--warning has the
   identical bug, caught here before the Tour Package Activate/Deactivate
   toggle would have shipped a second invisible button. */
.btn--success,
.btn--warning {
    color: hsl(var(--white));
}
.btn--success:hover,
.btn--success:active,
.btn--success:focus,
.btn--warning:hover,
.btn--warning:active,
.btn--warning:focus {
    color: hsl(var(--white)) !important;
}

/* Agency booking-user-list table - Email/Full Name were wrapping onto
   multiple lines at normal laptop width, making rows tall and the
   table hard to scan. Phone is never truncated (nowrap only - hiding
   digits of a number someone needs to call would be actively harmful);
   Email/Full Name get a capped width + ellipsis, with the full value
   still in a title attribute for a hover tooltip and still selectable/
   copyable in the DOM (CSS-only clipping, not a server-side cut). The
   card wrapper gained .table-responsive so the table can scroll
   horizontally instead of breaking page layout if a row still needs
   more room than the viewport has. */
.booking-user-list-table td {
    white-space: nowrap;
}
.booking-user-list-table .col-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tour Package list Activate/Deactivate button (agency) - inside a
   flex-nowrap row that fixed the two-buttons-on-separate-lines issue,
   but the button itself could still shrink narrower than "Deactivate"
   (the longer of the two labels) and wrap its own text internally.
   flex-shrink: 0 stops the flex row from squeezing it, min-width sizes
   it to fit that label without wrapping. Admin's equivalent control is
   a checkbox/switch with no text label, so it has nothing to wrap. */
.status-toggle-btn {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
}

/* Browse page ("Choose Your Tour") header - the shared .breadcrumb
   component (used site-wide on every non-home page) has a very tall
   145px/80px top/bottom padding and a 48px heading, which reads as
   oversized and overly spacious specifically here. Scoped to this one
   page only (breadcrumb.blade.php adds this class when Route::is(
   'browse')) rather than changing .breadcrumb/.breadcrumb--title
   globally, since every other page's header is unaffected by this
   request. */
.breadcrumb--compact {
    padding: 60px 0 30px 0;
}
.breadcrumb--compact .breadcrumb--title {
    font-size: 28px;
}