/* Tour listing components, shared by both layouts.
   The listing pages are still served by the legacy `default` layout, which
   does not load the Touria stylesheet, so the .tour-* rules live here and
   both layouts link this file. .pagination and .theme-btn are COPIED (other
   Touria sections use them); the .tour-* rules are moved. */

:root {
  --body-font: "Roboto", sans-serif;
  --theme-color: #f98225;
  --theme-color2: #3772fc;
  --theme-bg-light: #f6f6f6;
  --body-text-color: #757f95;
  --color-white: #ffffff;
  --color-dark: #2a4456;
  --color-red: #fd6a6a;
  --box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.05);
  --transition: all 0.5s ease-in-out;
  --transition2: all 0.3s ease-in-out;
  --border-info-color: rgba(0, 0, 0, 0.08);
}



/*====================
10. Pagination css 
======================*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.pagination .page-item .page-link {
  border: none;
  background: var(--theme-bg-light);
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 6px;
  border-radius: 12px !important;
  width: 40px;
  height: 40px;
  line-height: 28px;
  text-align: center;
  transition: var(--transition);
  z-index: 1;
}
.pagination .page-item .page-link:hover, .pagination .page-item.active .page-link {
  background: var(--theme-color);
  color: var(--color-white);
}

.theme-btn:hover {
  color: var(--color-white);
}

.theme-btn2 {
  background: var(--theme-color2);
  color: var(--color-white);
}
.theme-btn2::before {
  background: var(--color-dark);
}
.theme-btn2:hover {
  color: var(--color-white);
}

/*====================
42. Tour css
======================*/
.tour-area {
  position: relative;
}
.tour-area .shape-1 {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 25%;
  transform: rotate(-15deg);
}
.tour-area .tour-item {
  background: var(--color-white);
  padding: 8px;
  border-radius: 25px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  position: relative;
}
.tour-area .tour-item:hover {
  transform: scale(1.02);
}
.tour-area .tour-img {
  position: relative;
}
.tour-area .tour-img img {
  border-radius: 18px 18px 0 0;
}
.tour-area .tour-img .shape {
  position: absolute;
  left: -0.1px;
  bottom: -0.4px;
  width: 100%;
  border-radius: 0;
}
.tour-area .tour-img .favorite {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgb(from var(--color-white) r g b/0.6);
  color: var(--color-dark);
  width: 35px;
  height: 35px;
  line-height: 37px;
  text-align: center;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  z-index: 2;
}
.tour-area .tour-img .favorite:hover {
  color: var(--color-white);
  background: var(--theme-color2);
}
.tour-area .tour-btn {
  position: absolute;
  right: 25px;
  bottom: 8px;
  color: var(--theme-color);
  z-index: 1;
}
.tour-area .tour-btn a {
  background: var(--color-white);
  color: var(--color-dark);
  width: 35px;
  height: 35px;
  line-height: 37px;
  text-align: center;
  border-radius: 50px;
  margin-right: 8px;
  box-shadow: var(--box-shadow);
  z-index: 2;
}
.tour-area .tour-btn a:hover {
  color: var(--color-white);
  background: var(--theme-color2);
}
.tour-area .tour-content {
  padding: 0 20px 15px 20px;
}
.tour-area .tour-content .tour-top {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--color-dark);
  margin-bottom: 10px;
}
.tour-area .tour-content .tour-top a:hover {
  color: var(--theme-color2);
}
.tour-area .tour-content .tour-top i {
  color: var(--theme-color2);
}
.tour-area .tour-content .tour-title {
  font-weight: 500;
}
.tour-area .tour-content .tour-title a {
  color: var(--color-dark);
}
.tour-area .tour-content .tour-title a:hover {
  color: var(--theme-color2);
}
.tour-area .tour-content .tour-location {
  color: var(--body-text-color);
  margin-top: 6px;
}
.tour-area .tour-content .tour-location i {
  color: var(--theme-color2);
}
.tour-area .tour-content .tour-rate {
  margin: 8px 0;
}
.tour-area .tour-content .tour-rate .badge {
  background: var(--theme-color);
  border-radius: 50px;
  font-size: 13px;
  padding: 3px 5px;
}
.tour-area .tour-content .tour-rate-type {
  color: var(--theme-color);
  font-weight: 500;
  margin: 0 5px;
}
.tour-area .tour-content .tour-duration {
  color: var(--body-text-color);
}
.tour-area .tour-content .tour-duration i {
  color: var(--theme-color2);
}
.tour-area .tour-content .tour-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-info-color);
  margin-top: 10px;
  padding-top: 10px;
}
.tour-area .tour-content .tour-price {
  font-size: 16px;
  color: var(--body-text-color);
}
.tour-area .tour-content .tour-price span {
  color: var(--theme-color2);
  font-size: 18px;
  font-weight: 500;
}
.tour-area .tour-content .theme-btn {
  padding: 3px 3px 3px 18px;
  font-size: 15px;
}
.tour-area .tour-content .theme-btn i {
  margin-left: 4px;
}
.tour-area .tour-badge {
  position: absolute;
  left: -5px;
  top: 30px;
  background: var(--theme-color2);
  color: var(--color-white);
  font-size: 14px;
  padding: 0px 10px;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  z-index: 2;
}
.tour-area .tour-badge.badge-discount {
  background: var(--color-red);
}

.tour-list .tour-item {
  display: flex;
  gap: 22px;
}@media all and (max-width: 991px) {
  .tour-list .tour-item {
    flex-direction: column;
  }
}



.tour-list .tour-item .tour-img {
  max-width: 315px;
}
.tour-list .tour-item .tour-img img {
  border-radius: 15px;
}@media all and (max-width: 991px) {
  .tour-list .tour-item .tour-top {
    flex-wrap: wrap;
    gap: 2px 15px;
  }
}



.tour-list .tour-item .tour-content {
  flex: 1;
}
.tour-list .tour-item .tour-content .tour-duration {
  color: var(--color-dark);
}

.tour-slider .tour-item {
  box-shadow: none;
}
.tour-slider .tour-item:hover {
  transform: unset;
}
.tour-slider .tour-item .tour-img .shape {
  left: -0.8px;
}
.tour-slider .tour-item .tour-badge {
  left: 0;
}
.tour-slider.owl-theme .owl-nav {
  margin-top: 0px;
}
.tour-slider.owl-theme .owl-nav button {
  color: var(--theme-color);
  font-size: 25px;
  margin: 0;
  padding: 0;
  background: var(--color-white);
  display: inline-block;
  cursor: pointer;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: var(--transition);
}
.tour-slider.owl-theme .owl-nav button:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.tour-slider.owl-theme .owl-nav .owl-prev {
  left: -15px;
}@media all and (max-width: 767px) {
  .tour-slider.owl-theme .owl-nav .owl-prev {
    left: -4px;
  }
}



.tour-slider.owl-theme .owl-nav .owl-next {
  right: -15px;
}@media all and (max-width: 767px) {
  .tour-slider.owl-theme .owl-nav .owl-next {
    right: -4px;
  }
}




/* tour sidebar  */
.tour-area .sidebar {
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--box-shadow);
}
.tour-area .sidebar .widget {
  margin-bottom: 35px;
}
.tour-area .sidebar .widget:last-child {
  margin-bottom: 0;
}
.tour-area .sidebar .widget .title {
  font-size: 19px;
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tour-area .sidebar .widget .form-check {
  margin: 12px 0;
}
.tour-area .sidebar .widget .form-check-input {
  margin-top: 6px;
  box-shadow: none;
  border-color: var(--color-dark);
  border-radius: 6px;
}
.tour-area .sidebar .widget .form-check-input:focus {
  border-color: var(--theme-color);
}
.tour-area .sidebar .widget .form-check-label {
  width: 100%;
  color: var(--color-dark);
}
.tour-area .sidebar .widget .form-check-label span {
  float: right;
}

/* tour category*/
.tour-category .category-item {
  transition: var(--transition);
}
.tour-category .category-item:hover {
  transform: scale(1.05);
}
.tour-category .category-img {
  position: relative;
}
.tour-category .category-img .shape {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 110px;
}
.tour-category .category-img img {
  border-radius: 50px;
}
.tour-category .category-img .category-arrow {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  line-height: 41px;
  background: var(--theme-color);
  box-shadow: var(--box-shadow);
  border-radius: 50px;
  color: var(--color-white);
  text-align: center;
  font-size: 19px;
  z-index: 1;
}
.tour-category .category-img .category-arrow i {
  transform: rotate(-45deg);
  transition: var(--transition2);
}
.tour-category .category-img .category-arrow:hover i {
  transform: rotate(0);
}
.tour-category .category-content {
  margin-top: 18px;
  text-align: center;
}
.tour-category .category-content h4 {
  font-weight: 500;
}
.tour-category .category-content h4 a {
  font-size: 20px;
  color: var(--color-dark);
}
.tour-category .category-content h4 a:hover {
  color: var(--theme-color);
}
.tour-category .category-content span {
  color: var(--body-text-color);
  font-size: 15px;
}
/* The theme caps .tour-list .tour-item .tour-img at 315px but never constrains
   the <img> itself. The legacy layout has no global `img{max-width:100%}`
   either, so a wider source overflowed the container and covered the text.
   Also pins typography, since the legacy base CSS would otherwise impose its
   own font and metrics on these cards. Scoped to .tour-area. */
.tour-area .tour-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* The card image is wrapped in a link so the whole thumbnail is clickable.
   An <a> is inline-block here, so it shrink-wraps the image and `width:100%`
   on the <img> resolved against the image's own intrinsic width instead of the
   card. Make the link a block so the image fills the card. */
.tour-area .tour-img > a {
  display: block;
}
.tour-list .tour-item .tour-img {
  flex: 0 0 315px;
}
.tour-area,
.tour-area p,
.tour-area h4,
.tour-area span,
.tour-area a {
  font-family: var(--body-font);
}
.tour-area .tour-content .tour-title {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 8px;
}
.tour-area .tour-excerpt {
  color: var(--body-text-color);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
}
.tour-area .tour-content .theme-btn {
  background-color: var(--theme-color) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 10px;
  padding: 10px 20px !important;
  font-weight: 600;
  letter-spacing: normal;
  white-space: nowrap;
}
.tour-area .tour-content .theme-btn:hover {
  background-color: var(--color-dark) !important;
  color: var(--color-white) !important;
}
@media all and (max-width: 991px) {
  .tour-list .tour-item .tour-img {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* tour-3 sidebar, filter widgets and breadcrumb, moved from style.css so the
   legacy layout gets them too. .sidebar-popup (the header off-canvas) is
   deliberately NOT included and stays in style.css. */



/*====================
9. Breadcrumb css
======================*/
.site-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  text-align: center;
  position: relative;
  padding-top: 150px;
  padding-bottom: 150px;
  z-index: 1;
}
.site-breadcrumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}
.site-breadcrumb .breadcrumb-title {
  font-size: 35px;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.site-breadcrumb .breadcrumb-menu {
  position: relative;
  z-index: 1;
}
.site-breadcrumb .breadcrumb-menu li {
  position: relative;
  display: inline-block;
  margin-left: 25px;
  color: var(--color-white);
  font-weight: 500;
  text-transform: capitalize;
}
.site-breadcrumb .breadcrumb-menu li a {
  color: var(--color-white);
  transition: all 0.5s ease-in-out;
}
.site-breadcrumb .breadcrumb-menu li a:hover {
  color: var(--theme-color);
}
.site-breadcrumb .breadcrumb-menu li::before {
  position: absolute;
  content: "\f101";
  font-family: "Font Awesome 6 Pro";
  right: -21px;
  top: 1px;
  text-align: center;
  font-size: 16px;
  color: var(--color-white);
}
.site-breadcrumb .breadcrumb-menu li:first-child {
  margin-left: 0;
}
.site-breadcrumb .breadcrumb-menu li:last-child:before {
  display: none;
}
.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--theme-color);
}@media all and (min-width: 992px) {
  .navbar .nav-right .sidebar-btn span {
    display: block;
    width: 24px;
    border-bottom: 3px solid var(--color-dark);
    border-radius: 50px;
    margin-top: 6px;
    margin-left: auto;
    transition: var(--transition);
  }
  .navbar .nav-right .sidebar-btn span:first-child {
    width: 10px;
    margin-top: 0;
  }
  .navbar .nav-right .sidebar-btn span:nth-child(3) {
    width: 15px;
  }
}
@media all and (max-width: 1199px) {
  .navbar .nav-right .nav-btn,
  .navbar .nav-right .sidebar-btn {
    display: none;
  }
}
@media all and (min-width: 992px) {
  .navbar.light .nav-right .sidebar-btn span {
    border-color: var(--color-white);
  }
  .navbar.light.fixed-top .nav-right .sidebar-btn span {
    border-color: var(--color-dark);
  }
}


/*==========================
37. Blog sidebar widget css
============================*/
/* sidebar widget */
.blog-sidebar .widget {
  background: var(--theme-bg-light);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 25px;
}

/* sidebar widget title */
.blog-sidebar .widget-title {
  padding-bottom: 10px;
  margin-bottom: 30px;
  position: relative;
  font-size: 22px;
  color: var(--color-dark);
  font-weight: 700;
}
.blog-sidebar .widget-title::before {
  position: absolute;
  content: "";
  width: 15px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 0;
}
.blog-sidebar .widget-title::after {
  position: absolute;
  content: "";
  width: 30px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 22px;
}

/* sidebar widget search */
.blog-sidebar .widget .search-form .form-group {
  position: relative;
}
.blog-sidebar .widget .search-form .form-control {
  padding-right: 50px;
}
.blog-sidebar .widget .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 9px 18px 6px 18px;
  background: transparent;
  border: none;
  color: var(--theme-color);
}

/* sidebar widget category */
.blog-sidebar .widget .category-list a {
  display: block;
  padding: 10px 0;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--border-info-color);
  transition: var(--transition);
}
.blog-sidebar .widget .category-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}
.blog-sidebar .widget .category-list a:hover {
  padding-left: 10px;
  color: var(--theme-color);
}
.blog-sidebar .widget .category-list a i {
  margin-right: 5px;
  color: var(--theme-color);
}
.blog-sidebar .widget .category-list a span {
  float: right;
}

/* sidebar widget recent post */
.blog-sidebar .widget .recent-post-item {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.blog-sidebar .widget .recent-post-img img {
  width: 75px;
  border-radius: 15px;
}
.blog-sidebar .widget .recent-post-info {
  flex: 1;
}
.blog-sidebar .widget .recent-post-info h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.blog-sidebar .widget .recent-post-info h5 a:hover {
  color: var(--theme-color);
}
.blog-sidebar .widget .recent-post-info span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}
.blog-sidebar .widget .recent-post-info i {
  margin-right: 5px;
}

/* sidebar widget social */
.blog-sidebar .widget .social-link a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: var(--transition);
}
.blog-sidebar .widget .social-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* sidebar widget tag */
.blog-sidebar .widget .tag-list a {
  background: var(--color-white);
  color: var(--color-dark);
  padding: 5px 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 50px;
  display: inline-block;
  transition: var(--transition);
}
.blog-sidebar .widget .tag-list a:hover {
  background-color: var(--theme-color);
  color: var(--color-white);
}

/*====================
43. Tour booking css
======================*/
.tour-booking .widget {
  background: var(--color-white);
  padding: 30px;
  border-radius: 25px;
  margin-bottom: 30px;
  border: 1px solid var(--border-info-color);
}
.tour-booking .widget .title {
  margin-bottom: 20px;
}
.destination-single .sidebar h4 {
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 20px;
}
.destination-single .sidebar .destination-info {
  background: var(--theme-bg-light2);
  border-radius: 15px;
  padding: 30px;
}
.destination-single .sidebar .destination-info ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0;
}
.destination-single .sidebar .destination-info ul li .list-title {
  font-size: 16px;
  color: var(--color-dark);
  font-weight: 500;
}
.destination-single .sidebar .destination-info ul li .list-title i {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 1px solid var(--border-info-color);
  text-align: center;
  border-radius: 10px;
  margin-right: 8px;
}




/* activity-single */
.activity-single .sidebar .widget {
  background: var(--theme-bg-light2);
  padding: 25px;
  border-radius: 15px;
}
.activity-single .sidebar .widget h4 {
  color: var(--color-dark);
  margin-bottom: 20px;
  font-weight: 500;
}
.activity-single .sidebar .category-list a {
  display: block;
  margin: 10px 0;
  font-weight: 500;
}
.activity-single .sidebar .category-list a:hover {
  color: var(--theme-color);
}
.activity-single .sidebar .category-list a i {
  color: var(--theme-color);
  margin-right: 5px;
}
.activity-single .sidebar .activity-banner .img img {
  border-radius: 15px;
}

/* visa-single */
.visa-single .sidebar .widget {
  background: var(--theme-bg-light2);
  padding: 25px;
  border-radius: 15px;
}
.visa-single .sidebar .widget h4 {
  color: var(--color-dark);
  margin-bottom: 20px;
  font-weight: 500;
}
.visa-single .sidebar .visa-info ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0;
}
.visa-single .sidebar .visa-info ul li .list-title {
  font-size: 16px;
  color: var(--color-dark);
  font-weight: 500;
}
.visa-single .sidebar .visa-info ul li .list-title i {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 1px solid var(--border-info-color);
  text-align: center;
  border-radius: 10px;
  margin-right: 8px;
}
.visa-single .sidebar .visa-banner .img img {
  border-radius: 15px;
}
/* .pagination-area is only a layout wrapper in the demo (the theme ships no rule
   for it), so give it the spacing the demo gets from its surrounding markup. */
.tour-area .pagination-area,
.pagination-area {
  margin-top: 40px;
  margin-bottom: 70px;
  display: flex;
  justify-content: center;
}
.pagination-area .pagination {
  gap: 10px;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* tour-3 puts its cards in a col-lg-8/col-xl-9 results column. This site keeps a
   third column for the enquiry form, so the listing sits in a col-md-6 and the
   horizontal card would only get ~220px for its text. Stack image over content
   in that context -- the same thing the theme does at its own 991px breakpoint. */
.tour-list.tour-list-narrow .tour-item {
  flex-direction: column;
}
.tour-list.tour-list-narrow .tour-item .tour-img {
  flex: 1 1 auto;
  max-width: 100%;
}
.tour-list.tour-list-narrow .tour-item .tour-top {
  flex-wrap: wrap;
  gap: 2px 15px;
}

/* ==========================================================================
   Filter sidebar widgets, redesigned as separate boxed cards (one border +
   shadow per widget, a chevron that collapses it) instead of one continuous
   list. Scoped as .sidebar .widget so it outranks the template's own inline
   <style> block further down the cascade (that block predates this design
   and still sets .form-check-input/.count-badge/.price-slider unscoped;
   those rules are otherwise dead now, since nothing outside .sidebar .widget
   uses those classes on these pages).
   ========================================================================== */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidebar .widget {
  margin-bottom: 0;
  background: var(--color-white);
  border: 1px solid rgba(228, 230, 232, 1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
}
.sidebar .widget hr {
  display: none;
}
.sidebar .widget .widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
}
.sidebar .widget .title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  padding: 0;
  border: none;
}
.sidebar .widget .widget-toggle {
  color: #a7b0ba;
  font-size: 14px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.sidebar .widget.collapsed .widget-toggle {
  transform: rotate(-90deg);
}
.sidebar .widget .widget-body {
  margin-top: 20px;
}
.sidebar .widget.collapsed .widget-body {
  display: none;
}

/* radio list */
.sidebar .widget .filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar .widget .filter-item {
  margin-bottom: 18px;
}
.sidebar .widget .filter-item:last-child {
  margin-bottom: 0;
}
.sidebar .widget .form-check {
  margin: 0;
}
.sidebar .widget .form-check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--color-dark);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.sidebar .widget .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(214, 215, 216, 1);
  accent-color: var(--theme-color);
  cursor: pointer;
}
/* price slider */
.sidebar .widget .price-range {
  margin: 4px 0 0;
}
.sidebar .widget .price-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--theme-color);
  border-radius: 2px;
  outline: none;
}
.sidebar .widget .price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--theme-color);
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.sidebar .widget .price-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--theme-color);
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.sidebar .widget .price-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 600;
}

/* Bigger breadcrumb hero on the package and cruise pages (listings + detail). */
.site-breadcrumb.site-breadcrumb-lg {
  padding-top: 230px;
  padding-bottom: 230px;
}
.site-breadcrumb.site-breadcrumb-lg .breadcrumb-title {
  font-size: 50px;
  margin-bottom: 14px;
}
.site-breadcrumb.site-breadcrumb-lg .breadcrumb-menu li {
  font-size: 18px;
}
@media (max-width: 991px) {
  /* mobile banners 15% shorter (was 170px) */
  .site-breadcrumb.site-breadcrumb-lg {
    padding-top: 145px;
    padding-bottom: 145px;
  }
  .site-breadcrumb.site-breadcrumb-lg .breadcrumb-title {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  /* was 120px */
  .site-breadcrumb.site-breadcrumb-lg {
    padding-top: 102px;
    padding-bottom: 102px;
  }
  .site-breadcrumb.site-breadcrumb-lg .breadcrumb-title {
    font-size: 30px;
  }
  .site-breadcrumb.site-breadcrumb-lg .breadcrumb-menu li {
    font-size: 16px;
  }
}

/* Splide arrows: white circles with the theme-orange arrow, inside the slide. */
.splide .splide__arrow {
  width: 46px;
  height: 46px;
  background: var(--color-white, #fff);
  opacity: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.splide .splide__arrow--prev {
  left: 32px;
}
.splide .splide__arrow--next {
  right: 32px;
}
.splide .splide__arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--theme-color, #f98225);
}
.splide .splide__arrow:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
.splide .splide__arrow:disabled {
  opacity: 0.5;
}
/* The tour/cruise gallery uses a stroked long-arrow path (arrowPath option). */
#image-carousel .splide__arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
}
#image-carousel .splide__arrow svg path {
  fill: none;
  stroke: var(--theme-color, #f98225);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Tour/cruise gallery: the arrows sit beside the photo (in a gutter either
   side of it) instead of on top of it. On phones there is no room for a
   gutter, so they stay on the photo's edges there. */
@media (min-width: 576px) {
  #image-carousel {
    padding-left: 60px;
    padding-right: 60px;
  }
  #image-carousel .splide__arrow--prev {
    left: 0;
  }
  #image-carousel .splide__arrow--next {
    right: 0;
  }
}
@media (max-width: 575px) {
  .splide .splide__arrow {
    width: 38px;
    height: 38px;
  }
  .splide .splide__arrow--prev { left: 16px; }
  .splide .splide__arrow--next { right: 16px; }
}

/* Homepage "i nostri articoli" cards: the covers are wide banner images, so
   crop them to the card's 416x280 frame. */
.blog-item .blog-img img.blog-cover {
  width: 100%;
  aspect-ratio: 416 / 280;
  object-fit: cover;
}

/* plain breadcrumb banner (search page): 15% shorter on mobile */
@media (max-width: 991px) {
  .site-breadcrumb:not(.site-breadcrumb-lg) {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}