:where(.tt-scope) .tours-hero {

min-height:420px;

padding-top:90px;

background:
linear-gradient(
rgba(11,31,51,.7),
rgba(11,31,51,.7)
),
url("../images/8b1eb67f6b589727e47a48835a9dbfeb.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

color:white;

}



:where(.tt-scope) .tours-hero span {

color:#7ED6D6;

letter-spacing:4px;

font-weight:700;

}



:where(.tt-scope) .tours-hero h1 {

font-size:55px;

font-weight:800;

}





/* FILTER */
:where(.tt-scope) .tour-filter {

    background:white;

    padding:28px;

    border-radius:24px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    position:sticky;

    top:100px;

}



:where(.tt-scope) .tour-filter h3 {

    font-size:28px;

    font-weight:800;

    color:#0B1F33;

    margin-bottom:8px;

}



:where(.tt-scope) .tour-filter::before {

    content:attr(data-tt-label);

    text-transform:uppercase;

    display:block;

    color:#1BA6A6;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;

}



:where(.tt-scope) .filter-header p {

    color:#777;

    font-size:14px;

    margin-bottom:30px;

}





:where(.tt-scope) .filter-group {

    margin-bottom:28px;

}




:where(.tt-scope) .filter-group label {

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:15px;

    font-weight:700;

    color:#0B1F33;

    margin-bottom:12px;

}




:where(.tt-scope) .filter-group select {

    width:100%;

    height:48px;

    padding:0 15px;

    border-radius:12px;

    border:1px solid #e8e8e8;

    background:#fafafa;

    color:#555;

    outline:none;

    cursor:pointer;

}



:where(.tt-scope) .filter-group select:focus {

    border-color:#1BA6A6;

}



/* Search field: was missing entirely -- .filter-group select above
   already establishes the height/padding/border/background this
   reuses, so the search box lines up with the other filter fields
   instead of falling back to a tiny unstyled native input. */
:where(.tt-scope) .search-input {

    position:relative;

}

:where(.tt-scope) .search-input input {

    width:100%;

    height:48px;

    padding:0 15px 0 42px;

    border-radius:12px;

    border:1px solid #e8e8e8;

    background:#fafafa;

    color:#555;

    outline:none;

}

:where(.tt-scope) .search-input input:focus {

    border-color:#1BA6A6;

}

:where(.tt-scope) .search-input i {

    position:absolute;

    left:15px;

    top:50%;

    transform:translateY(-50%);

    font-size:15px;

    font-style:normal;

    color:#999;

    pointer-events:none;

}



/* Empty state (Tours + Packages archives share #noResults) --
   was a bare unstyled <p>, out of place next to the styled grid. */
:where(.tt-scope) .no-results {

    background:white;

    border-radius:24px;

    padding:60px 20px;

    text-align:center;

}

:where(.tt-scope) .no-results p {

    color:#777;

    font-size:15px;

    margin:0;

}







/* destination buttons */

:where(.tt-scope) .filter-options {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}



:where(.tt-scope) .filter-options button {

    border:1px solid #ddd;

    background:white;

    color:#555;

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

    cursor:pointer;

    transition:.3s;

}



:where(.tt-scope) .filter-options button:hover,
:where(.tt-scope) .filter-options button.active {

    background:#1BA6A6;

    color:white;

    border-color:#1BA6A6;

}







/* range */

:where(.tt-scope) .price-box input[type="range"] {

    width:100%;

    accent-color:#1BA6A6;

}







:where(.tt-scope) .reset-btn {

    width:100%;

    margin-top:10px;

    background:transparent;

    border:1px solid #0B1F33;

    color:#0B1F33;

    padding:12px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}



:where(.tt-scope) .reset-btn:hover {

    background:#0B1F33;

    color:white;

}








/* TOUR CARD */


:where(.tt-scope) .tour-item {

    background:white;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #eee;

    height:100%;

    display:flex;

    flex-direction:column;

    transition:.35s;

}



:where(.tt-scope) .tour-item:hover {

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);

}






/* IMAGE */


:where(.tt-scope) .tour-item-image {

    aspect-ratio:16/10;

    position:relative;

    overflow:hidden;

}



:where(.tt-scope) .tour-item-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



:where(.tt-scope) .tour-item:hover .tour-item-image img {

    transform:scale(1.08);

}



:where(.tt-scope) .tour-item-image span {

    position:absolute;

    top:18px;

    left:18px;

    background:#1BA6A6;

    color:white;

    padding:7px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}






/* CONTENT */


:where(.tt-scope) .tour-item-content {

    padding:20px;

    display:flex;

    flex-direction:column;

    flex:1;

}



:where(.tt-scope) .tour-item-content small {

    color:#1BA6A6;

    font-weight:600;

    font-size:14px;

}



:where(.tt-scope) .tour-item-content h3 {

    color:#0B1F33;

    font-size:24px;

    font-weight:800;

    margin:8px 0 6px;

    overflow-wrap:break-word;

    word-break:break-word;

}



:where(.tt-scope) .tour-item-content p {

    color:#777;

    line-height:1.5;

    margin:0 0 4px;

    min-height:45px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    line-clamp:2;

    overflow:hidden;

    overflow-wrap:break-word;

    word-break:break-word;

}






/* RATING */


:where(.tt-scope) .tour-rating {

    color:#1BA6A6;

    letter-spacing:2px;

    margin:0 0 6px;

}






/* META */


:where(.tt-scope) .tour-meta {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:14px 0;

    padding:12px 0;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

    font-weight:600;

    color:#0B1F33;

}





/* BUTTON */


:where(.tt-scope) .details-btn {

    display:block;

    text-align:center;

    background:#0B1F33;

    color:white;

    padding:13px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    margin-top:auto;

    transition:.3s;

}



:where(.tt-scope) .details-btn:hover {

    background:#1BA6A6;

    color:white;

}



/* discounted price inside tour card meta */

:where(.tt-scope) .tour-meta .original-price {

    font-size:13px;

    font-weight:500;

    color:#999;

}



/* ============================================================
   MOBILE FILTER TOGGLE
   Desktop: toggle button hidden, filter body always visible.
   Mobile (<= 991px, matches Bootstrap's lg breakpoint used by
   the filter/grid columns): toggle button shown, filter body
   collapses/expands smoothly.
   ============================================================ */

:where(.tt-scope) .filter-toggle-btn {

    display:none;

    width:100%;

    align-items:center;

    justify-content:space-between;

    background:#0B1F33;

    color:white;

    border:none;

    padding:16px 20px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

}



:where(.tt-scope) .filter-toggle-icon {

    font-size:14px;

    transition:.3s;

}



@media (max-width:991px){

    :where(.tt-scope) .filter-toggle-btn {

        display:flex;

    }

    /* The toggle button already labels this panel ("Filter Tours /
       Filter Packages"); the ::before eyebrow above it repeated the
       same label, so hide it only where the toggle button takes over. */
    :where(.tt-scope) .tour-filter::before {

        display:none;

    }



    :where(.tt-scope) .filter-body {

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease;

    }



    :where(.tt-scope) .filter-body.open {

        margin-top:20px;

    }



    /* Sidebars are sticky (see .tour-filter) only while they sit
       beside the content in a two-column layout. Below the lg
       breakpoint both the archive filter and the single-page
       booking card (which reuses .tour-filter) stack full-width
       above/below the content instead, so sticky positioning no
       longer makes sense and can overlap content while scrolling. */
    :where(.tt-scope) .tour-filter {

        position:static;

        top:auto;

    }

}

@media (max-width:768px){

    :where(.tt-scope) .tours-hero {

        height:auto;

        padding:150px 0 40px;

    }

    :where(.tt-scope) .tours-hero h1 {

        font-size:32px;

    }

}