body {
  background-color: rgba(218, 218, 218, 0.15);
}

.main-wrapper {
  padding-top: 0px!important;
  padding: 20px 100px;
  max-width: 1920px;
  margin: 0 auto;
}

.offer-header {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
}

.offer-banner {
  background-image: url("../img/oferte/world-map.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  border-radius: 20px;
  /* color: white; */
  padding: 30px;
  padding-top: 50px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.offer-banner .text {
  /* max-width: 650px; */
}

.offer-banner h1 {
  color: #ee9134;
  font-size: 36px;
  margin-bottom: 1rem;
  font-weight: 800;
  /* color: white; */
}

.offer-banner p {
  font-size: 16px;
  font-weight: 600;
  font-size: 24px;
}

.map-wrapper {
  /* 360px pe lista de cautari (cerut de Sebastian, 3 aug) - teaser-ul de harta nu mai
     ocupa toata coloana; max-width tine ecranele inguste in frau. */
  width: 360px;
  max-width: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  box-shadow: var(--box-shadow);
  background: #e9eef8;
}

.map-wrapper .btn {
  background-color: white;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 900;
}

.search-mini-map {
  position: absolute;
  inset: 0;
  background: #e9eef8;
}

.search-mini-map__canvas {
  width: 100%;
  height: 100%;
}

/* Stratul transparent păstrează teaser-ul complet static: fără drag, pinch sau scroll-zoom.
   Butonul și atribuirea OpenStreetMap au z-index mai mare și rămân accesibile. */
.search-mini-map__blocker {
  position: absolute;
  inset: 0;
  z-index: 700;
  cursor: pointer;
}

.search-mini-map .leaflet-control-attribution {
  font-size: 9px;
  line-height: 1.25;
  pointer-events: auto;
}

.search-mini-map__marker {
  background: transparent;
  border: 0;
}

.search-mini-map__marker span {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--color-primary, #ee9134);
  box-shadow: 0 3px 9px rgba(0, 14, 61, 0.35);
  transform: rotate(-45deg);
}

.search-mini-map__marker span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.search-mini-map--loading .search-mini-map__canvas {
  opacity: 0.72;
}

.search-mini-map--unavailable::after {
  content: "Harta nu este disponibilă momentan";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--color-text-primary);
  text-align: center;
}

.offers-wrapper {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.filters-wrapper {
  width: 360px;
  background-color: white;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  flex-shrink: 0;
}

.offers {
  width: 100%;
}

.filter-section-buttons {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  display: flex;
  justify-content: space-evenly;
}

.filter-section-buttons .filter-section-btn {
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  cursor: pointer;
  text-decoration: none;
  background-color: white;
  border: none;
  border-bottom: 1px solid rgba(0, 14, 61, 0.24);
  transition: 0.2s ease;
}

.filter-section-buttons .filter-section-btn:hover {
  background-color: var(--color-bg-hover);
}

.filter-section-buttons .filter-section-btn:first-child {
  border-top-left-radius: 15px;
}

.filter-section-buttons .filter-section-btn:last-child {
  border-top-right-radius: 15px;
}

.filter-section-buttons .filter-section-btn.active {
  border-bottom: 3px solid var(--color-text-primary);
}

.filter-section {
  padding: 20px 10px;
  border-bottom: 1px solid rgba(0, 14, 61, 0.24);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-section .accordion-item {
  border: none;
  background-color: transparent !important;
  outline: none !important;
}

.filter-section .accordion-button {
  padding: 0;
  border: none !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 18px;
}

.filter-section .accordion-button:not(.collapsed) .dropdown-arrow svg {
  transform: rotate(180deg);
}

.filter-section .accordion-button::after {
  display: none;
}

.filter-section .accordion-body {
  padding: 0;
  padding-top: 20px;
  border: none;
}

.filter-section:last-child {
  border-bottom: none;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.filter-section .filter-title {
  color: rgba(0, 14, 61, 0.89);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.filter-section .filter-buttons-large {
  gap: 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.filter-section .filter-buttons-large.multiple .filter-btn-large {
  padding: 15px 0;
  width: 100%;
}

.filter-section .filter-buttons-large .filter-btn-large:hover,
.filter-section .filter-buttons-large.multiple .filter-btn-large:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.filter-section .filter-buttons-large.multiple {
  gap: 10px;
}

.filter-section .filter-buttons-large .filter-btn-large {
  padding: 15px 30px;
  color: black;
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 1px solid var(--color-bg-hover);
  border-radius: 10px;
  width: 100%;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}

.filter-section .filter-buttons-large .filter-btn-large.active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.filter-section .filter-range {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-section .filter-range .filter-slider {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  align-items: center;
}

.filter-section .filter-range .filter-slider .filter-slider-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #bbbbbb;
}

.filter-section .filter-range .filter-slider .filter-slider-grab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background-color: var(--color-text-primary);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: grab;
  z-index: 999;
}

.filter-section .filter-range .filter-slider .filter-slider-grab.start {
  left: 0;
}

.filter-section .filter-range .filter-slider .filter-slider-grab.end {
  left: 190px;
}

.filter-section .filter-range .filter-slider .filter-fill {
  background-color: #bbbbbb;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.filter-section .filter-range .filter-slider .filter-fill-range {
  background-color: var(--color-text-primary);
  position: absolute;
  width: 190px;
  left: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  z-index: 2;
}

.filter-section .filter-range .filter-slider-values {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-section .filter-range .filter-slider-values input {
  border: 1px solid var(--color-bg-hover);
  border-radius: 5px;
  color: #7e7e7e;
  background-color: white;
  padding: 6px 10px;
  /* 80px taia placeholder-ul „Fără limită" la „Fără li" (vazut la 1366) */
  width: 104px;
  text-align: center;
  -moz-appearance: textfield;
}

.filter-section
.filter-range
.filter-slider-values
input::-webkit-outer-spin-button,
.filter-section
.filter-range
.filter-slider-values
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-section .filter-range .filter-slider-values .value {
  display: flex;
  flex-direction: column;
}

.filter-section .filter-range .filter-slider-values .value:last-of-type {
  text-align: right;
}

.filter-section .filter-range .filter-slider-values p {
  color: #7e7e7e;
  margin-bottom: 10px;
}

.filter-section .filter-range .filter-slider-values .value.active p {
  color: var(--color-text-primary);
}

.filter-section .filter-range .filter-slider-values .value.active input {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.filter-section .dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.filter-section .dropdown-arrow svg {
  transition: 0.2s ease-in-out;
}

.filter-section .filter-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.filter-section .filter-checks .filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.filter-section .filter-checks .filter-option input {
  border-radius: 5px;
  background-color: white;
  border: 1px solid #bbbbbb;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  margin: 0;
}

.filter-section .filter-checks .filter-option span {
  color: #7e7e7e;
  font-size: 16px;
  font-weight: 400;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.filter-section .filter-checks .filter-option input:checked {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.02 5.3142C12.1136 5.40795 12.1662 5.53503 12.1662 5.66753C12.1662 5.80003 12.1136 5.92711 12.02 6.02086L7.35333 10.6875C7.25958 10.7812 7.1325 10.8338 7 10.8338C6.8675 10.8338 6.74042 10.7812 6.64667 10.6875L3.98 8.02086C3.93088 7.97509 3.89147 7.91989 3.86415 7.85855C3.83682 7.79722 3.82212 7.73101 3.82094 7.66388C3.81976 7.59674 3.8321 7.53006 3.85725 7.4678C3.8824 7.40554 3.91983 7.34898 3.96731 7.3015C4.01479 7.25402 4.07134 7.21659 4.1336 7.19145C4.19586 7.1663 4.26255 7.15395 4.32968 7.15513C4.39682 7.15632 4.46303 7.17101 4.52436 7.19834C4.58569 7.22567 4.64089 7.26507 4.68667 7.3142L7 9.62753L11.3133 5.3142C11.4071 5.22056 11.5342 5.16797 11.6667 5.16797C11.7992 5.16797 11.9263 5.22056 12.02 5.3142Z' fill='white'/%3E%3C/svg%3E");
}

.filter-section .filter-checks .filter-option label {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-primary);
}

.special-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.special-filters .dropdown {
  width: 100%;
}

/* Desktop lat: campurile de search stau inline pe un singur rand (nu stivuite 2+1+1).
   nowrap + fiecare camp flex:1 (se micsoreaza uniform) + butonul dimensionat la continut. */
@media (min-width: 1200px) {
  .special-filters.desktop {
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .special-filters.desktop > .dropdown {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .special-filters.desktop > .large-search-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

.special-filters .dropdown-menu {
  margin-top: 10px !important;
  border: none;
  box-shadow: var(--box-shadow);
  border-radius: 10px;
  width: 100%;
  min-width: 100%;
  padding: 10px;
}

.special-filters .dropdown.room-search .rooms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 350px;
  overflow-y: auto;
  height: 100%;
}

.special-filters .dropdown-menu .search {
  position: relative;
  margin-bottom: 10px;
}

.special-filters .dropdown-menu .search input {
  padding-right: 32px;
  color: var(--color-text-primary);
}

.special-filters .dropdown-menu .search svg {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.special-filters .dropdown-menu .search-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.special-filters .dropdown-menu .dropdown-item {
  padding: 5px 10px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: 0.2s ease;
  border-radius: 5px;
}

.special-filters .dropdown-menu .dropdown-item:hover {
  background-color: var(--color-bg-hover);
}

.special-filters .dropdown-menu .dropdown-item.selected {
  background-color: var(--color-bg-hover);
}

.special-filters .dropdown-menu .room {
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.special-filters .dropdown-menu .room .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.special-filters .dropdown-menu .room .top .close {
  font-size: 14px;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: 0.2s ease;
  background-color: white;
}

.special-filters .dropdown-menu .room .top .close:hover {
  background-color: var(--color-bg-hover);
}

.special-filters .dropdown-menu .room .bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.special-filters .dropdown-menu .room .bottom .type {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.special-filters .dropdown-menu .room .bottom .type .numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.special-filters .dropdown-menu .room .bottom .type .numbers .control {
  font-size: 14px;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: 0.2s ease;
  background-color: white;
}

.special-filters .dropdown-menu .room .bottom .type .numbers span {
  width: 10px;
  text-align: center;
}

.special-filters .dropdown-menu .room .bottom .type .numbers .control:hover {
  background-color: var(--color-bg-hover);
}

.special-filters
.dropdown-menu
.room
.bottom
.type
.numbers
.control[disabled] {
  cursor: not-allowed;
  background-color: #e2e2e2;
}

.special-filters .dropdown-menu .add-room-btn {
  background-color: var(--color-primary);
  color: white;
  border-radius: 5px;
  width: 100%;
  border: none;
  text-align: center;
  padding: 5px 10px;
}

.special-filters  .dropdown-menu {
  min-width: 300px;
}

.special-filters  .dropdown-menu input[type="date"] {
  min-height: 44px;
}

.special-filters  .dropdown-menu .numbers {
  display: flex;
  align-items: center;
  gap: 2px;
}

.special-filters  .dropdown-menu .numbers .count {
  width: 30px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text-primary);
}

.special-filters  .dropdown-menu .numbers .control {
  font-size: 14px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: 0.2s ease;
  background-color: white;
}

.special-filters  .dropdown-menu .numbers .control:hover {
  background-color: var(--color-bg-hover);
}

.special-filters  .dropdown-menu .numbers .control[disabled] {
  cursor: not-allowed;
  background-color: #e2e2e2;
}

.special-filters .large-filter-btn {
  display: flex;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  color: var(--color-text-primary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 20px;
  width: 100%;
  background-color: white;
  transition: 0.2s ease;
}

.special-filters .large-filter-btn:hover {
  background-color: var(--color-bg-hover);
}

.special-filters .large-filter-btn .title {
  display: flex;
  gap: 10px;
  align-items: center;
}

.special-filters .large-filter-btn .name {
  font-weight: 500;
  color: rgba(0, 14, 61, 0.68);
}

.special-filters .large-filter-btn .name.active {
  color: var(--color-text-primary);
}

.special-filters .large-search-btn {
  /* teal ca butonul Cauta din hero (tema) si .filters .large-search-btn (mobil) —
     accentul magenta ramane pt. favorite/discount, nu pt. actiunea principala */
  background-color: var(--color-primary);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: var(--box-shadow);
  text-decoration: none;
  border: none;
}

.order-filters {
  background-color: white;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-filters .results p {
  color: var(--color-text-faded);
  margin: 0;
}

.order-filters .results .map-btn {
  display: none;
}

.order-filters .filters {
  display: flex;
  gap: 10px;
  align-items: center;
}

.filters .dropdown-menu,
.filters .dropdown {
  --bs-dropdown-spacer: 0.25rem;
  --bs-dropdown-min-width: 0px;
}

.filters .dropdown-menu {
  border: 1px solid var(--color-bg-hover);
  border-radius: 5px;
}

.filters .dropdown-menu .dropdown-item {
  padding: 8px;
}

.filters .dropdown .btn {
  background-color: white;
  color: #252525;
  border-radius: 5px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--color-bg-hover);
  gap: 30px;
}

.filters .dropdown-menu {
  width: 100%;
  padding: 0;
  margin-top: 8px !important;
}

.filters .dropdown .btn::after {
  display: none;
}

.offers-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.offers-list .offer {
  border-radius: 10px;
  display: flex;
  gap: 10px;
  box-shadow: var(--box-shadow);
  background-color: white;
}

.offers-list .offer .resort {
  max-width: 420px;
  width: 100%;
  position: relative;
}

.offers-list .offer .resort span {
  position: absolute;
  border-top-right-radius: 43px;
  border-bottom-right-radius: 43px;
  color: white;
  background-color: transparent !important;
  z-index: 99;
  font-size: 14px;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offers-list .offer .resort span.sale {
  background-color: var(--price-sale);
}

.offers-list .offer .resort span.early {
  background-color: var(--price-early);
}

.offers-list .carousel {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.offers-list .carousel-inner {
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.offers-list .carousel .carousel-item {
  position: relative;
  height: 100%;
  min-height: 250px;
  overflow: hidden;
}

.offers-list .carousel .hotel-carousel-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  object-position: center;
}

.offers-list .carousel .carousel-item.active {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.offers-list .carousel .carousel-item-start {
  overflow: hidden;
}

.offers-list .carousel .carousel-indicators {
  align-items: center;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 20px;
}

.offers-list .carousel .carousel-indicators button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: white !important;
  opacity: 1;
  transition: 0.2s ease-in-out;

  flex-shrink: 0;
  border: none !important;
}

.offers-list .carousel .carousel-indicators button.active {
  height: 9px;
  width: 9px;
}

.offers-list .carousel .carousel-control-prev,
.offers-list .carousel .carousel-control-next {
  width: 42px;
  opacity: 1;
  z-index: 2;
}

.offers-list .carousel .carousel-control-prev {
  justify-content: flex-start;
  left: 8px;
}

.offers-list .carousel .carousel-control-next {
  justify-content: flex-end;
  right: 8px;
}

.offers-list .carousel .carousel-control-prev-icon,
.offers-list .carousel .carousel-control-next-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(8, 31, 96, 0.7);
  background-size: 14px 14px;
}

/* Layout desktop: .features si .options trebuie sa ramana coloane surori.
   Fara flex aici, .options cade sub .features, iar pretul si butoanele ies din card. */
.offers-list .offer .details {
  padding: 20px;
  gap: 20px;
  min-height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.offers-list .offer .features {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.offers-list .offer .features .about {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}

.offers-list .offer .features .about h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: black;
}

.offers-list .offer .features .about .rating {
  display: flex;
  gap: 0px;
  align-items: center;
  padding-right: 10px;
  border-right: 1px solid #e2e2e2;
}

.offers-list .offer .features .about .rating .rating-value{
  margin-left: 0.5rem;
}

.offers-list .offer .features .about .location {
  padding-left: 10px;
  color: #7e7e7e;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.offers-list .offer .description {
  color: #7e7e7e;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 500px;
  margin-bottom: 10px;
  max-height: 63px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offers-list .offer .includes {
  display: flex;
  flex-wrap: wrap;
  /* gap: 0px; */
  /*max-width: 500px;*/
  overflow: hidden;
  margin-left: -5px;
}

.offers-list .offer .includes .perk {
  color: #5796a4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  font-size: 14px;
  font-weight: 500;
}

.offers-list .offer .details .options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 42%;
  gap: 6px;
}

.offers-list .offer .details .options h1 {
  font-size: 36px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.offers-list .offer .details .options h1.early {
  color: var(--price-early);
}

.offers-list .offer .details .options h1.sale {
  color: var(--price-sale);
}

.offers-list .offer .details .options span {
  font-size: 10px;
  color: var(--color-text-faded);
  font-weight: 500;
}

.offers-list .offer .details .options .preferences {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 170px;
  justify-content: flex-end;
}

.offers-list .offer .details .options .preferences div {
  border-radius: 5px;
  background-color: #edfaff;
  padding: 3px 5px;
  color: #5796a4;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.offers-list .offer .details .options .buttons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.offers-list .offer .details .options .buttons a,
.offers-list .offer .details .options .buttons button {
  border-radius: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.offers-list .offer .details .options .buttons .favourite-tooltip {
  display: flex;
}

.offers-list .offer .details .options .buttons button.favourite-btn {
  background-color: var(--color-accent);
  border: 0;
  padding: 10px 15px;
  height: 100%;
}

.offers-list .offer .details .options .buttons button.favourite-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.offers-list .offer .details .options .buttons button.favourite-btn.is-favorite {
  background-color: #f9f9f9;
  border: 0;
  color: var(--color-accent);
  cursor: pointer;
  padding: 10px 15px;
  height: 100%;
}

.offers-list .offer .details .options .buttons a.details-btn {
  background-color: var(--color-primary);
  padding: 10px 20px;
}

.offers .pages {
  width: 100%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.offers .pages .page-prev,
.offers .pages .page-next {
  border-radius: 5px;
  border: 1px solid #c8c8c8;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: white;
  transition: 0.2s ease-in-out;
}

.offers .pages .page-prev svg {
  transform: rotate(90deg);
}

.offers .pages .page-next svg {
  transform: rotate(-90deg);
}

.offers .pages .page-list {
  display: flex;
  gap: 20px;
  align-items: center;
}

.offers .pages .page-list .page {
  border-radius: 5px;
  border: 1px solid #c8c8c8;
  background-color: white;
  font-size: 16px;
  color: #1d1d1e;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease-in-out;
  text-decoration: none;
}

.offers .pages .page-list .page:hover,
.offers .pages .page-prev:hover,
.offers .pages .page-next:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.offers .pages .page-prev:hover svg path,
.offers .pages .page-next:hover svg path {
  fill: white;
}

.offers .pages .page-list .page.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.offers .pages .page-list .page-dots {
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1d1d1e;
}

.mobile-filters {
  display: none;
}

.mobile-filters .modal-body {
  padding: 0;
}

.mobile-filters .modal-header {
  padding: 10px;
  border: none;
}

.mobile-filters .right-btns {
  display: flex;
  gap: 10px;
}

.mobile-filters .mobile-filter-btn {
  text-decoration: none;
  color: var(--color-text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  padding: 5px 10px;
  border: 1px solid white;
  transition: 0.2s ease-in-out;
}

.mobile-filters .mobile-filter-btn:hover {
  border-color: var(--color-text-primary);
}

.offcanvas {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.offcanvas-header {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border: none;
  padding: 10px;
}

.offcanvas {
  --bs-offcanvas-height: 80vh;
}

.order-offcanvas {
  --bs-offcanvas-height: 80vh;
}

.offcanvas-body {
  padding: 0;
}

.offcanvas-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  cursor: pointer;
}

.search-offcanvas .offcanvas-body {
  overflow: hidden;
}

.search-offcanvas .special-filters {
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.search-offcanvas .special-filters .special-filters-wrapper {
  display: flex;
  gap: 10px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 0 2px;
}

.search-offcanvas .special-filters .special-filters-wrapper .dropdown {
  width: 100%;
}

.mobile-search-btn {
  width: 100%;
  justify-content: space-between;
  display: none;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.mobile-search-btn p {
  color: var(--color-text-faded);
  margin: 0;
  padding: 15px;
}

.mobile-search-btn button {
  display: flex;
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 6px;
}

.mobile-order-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mobile-order-btns button {
  padding: 5px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.offcanvas-title {
  color: var(--color-text-primary);
}

.account-required {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.account-required img {
  max-width: 200px;
  margin-bottom: 20px;
}

.account-required p {
  color: var(--color-text-primary);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  max-width: 300px;
}

.account-required span {
  color: var(--color-text-primary);
  font-size: 14px;
}

.account-required a:first-of-type {
  background-color: var(--color-primary);
  color: white;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  width: 100%;
  font-size: 16px;
}

.account-required a:last-child {
  background-color: white;
  color: var(--color-primary);
  border: none;
  font-size: 16px;
  padding: 10px;
}

#saved-tab-pane .saved-offers-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}

#saved-tab-pane .saved-offer {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  gap: 12px;
  overflow: visible;
  padding: 10px 8px;
}

#saved-tab-pane .saved-offer img {
  border-radius: 5px;
  flex: 0 0 76px;
  height: 68px;
  object-fit: cover;
  width: 76px;
}

#saved-tab-pane .saved-offer__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

#saved-tab-pane .saved-offer__title {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

#saved-tab-pane .saved-offer__meta {
  align-items: center;
  color: var(--color-text-secondary, #667085);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 4px 10px;
  line-height: 1.35;
  margin-top: 6px;
}

#saved-tab-pane .saved-offer__rating {
  align-items: center;
  display: inline-flex;
  gap: 1px;
  white-space: nowrap;
}

#saved-tab-pane .saved-offer__rating .rating-value {
  color: var(--color-text-primary);
  margin-left: 4px;
}

#saved-tab-pane .saved-offer__location {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#saved-tab-pane .saved-offer__open {
  align-items: center;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  text-decoration: none;
  width: 36px;
}

#saved-tab-pane .saved-offer__open:hover,
#saved-tab-pane .saved-offer__open:focus {
  background: var(--color-primary-dark, var(--color-primary));
  color: #fff;
}

#saved-tab-pane .saved-offer-divider {
  border: 0;
  border-top: 1px solid #d9dee7;
  margin: 0 8px;
  opacity: 1;
}

#saved-tab-pane .saved-offers-all {
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  padding: 8px;
  text-decoration: none;
}

.saved-offers-empty {
  color: var(--color-text-primary);
  padding: 24px 10px;
  text-align: center;
}

.search-history-list {
  padding: 8px 0;
}

.search-history-item {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 10px 8px;
}

.search-history-item__main {
  flex: 1 1 auto;
  min-width: 0;
}

.search-history-item__title {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.search-history-item__results {
  white-space: nowrap;
}

.search-history-item__meta {
  color: var(--color-text-secondary, #667085);
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 3px;
}

.search-history-item__resume {
  align-items: center;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  margin-left: auto;
  height: 36px;
  padding: 0;
  text-decoration: none;
  width: 36px;
}

.search-history-item__resume:hover,
.search-history-item__resume:focus {
  background: var(--color-primary-dark, var(--color-primary));
  color: #fff;
}

/* Păstrează efectul Bootstrap pentru toate acțiunile principale. Regulile
   componentelor de mai sus sunt mai specifice decât `.btn:hover`, așa că
   repetăm proprietățile Bootstrap la aceeași specificitate. */
.offers-list .offer .details .options .buttons a.details-btn:hover,
.offers-list .offer .details .options .buttons a.details-btn:focus-visible,
.offers-list .offer .details .options .buttons a.details-btn:active,
#saved-tab-pane .saved-offer__open:hover,
#saved-tab-pane .saved-offer__open:focus-visible,
#saved-tab-pane .saved-offer__open:active,
.search-history-item__resume:hover,
.search-history-item__resume:focus-visible,
.search-history-item__resume:active {
  color: var(--bs-btn-hover-color, #fff);
  background-color: var(--bs-btn-hover-bg, color-mix(in srgb, var(--color-primary) 82%, #000));
  border-color: var(--bs-btn-hover-border-color, color-mix(in srgb, var(--color-primary) 82%, #000));
}

.search-history-divider {
  border: 0;
  border-top: 1px solid #d9dee7;
  margin: 0 8px;
  opacity: 1;
}

.map-modal .modal-body {
  padding: 0;
}

.mobile-map-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mobile-map-wrapper iframe {
  width: 100%;
  height: 100%;
}

.mobile-map-wrapper .list {
  position: absolute;
  display: flex;
  height: 100%;
  left: 0;
  top: 0;
  width: 400px;
  padding: 16px;
  z-index: 9999999999999;
}

.map-modal .map-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 50%;
  font-size: 33px;
  transition: 0.2s ease;
  cursor: pointer;
  z-index: 9999;
}

.map-modal .map-close:hover {
  background-color: var(--color-bg-hover);
}

.mobile-map-wrapper .filters-wrapper {
  height: fit-content;
}

.mobile-map-filter-button {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  padding: 5px 10px;
  color: white;
  background-color: var(--color-primary);
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  width: calc(100% - 32px);
}

.mobile-filters-inner {
  height: 100%;
  overflow-y: auto;
  margin-bottom: 10px;
}

@media screen and (max-width: 1820px) {
  .main-wrapper {
    padding: 20px;
  }
}

@media screen and (max-width: 1664px) {
  .offers {
    min-width: 0;
  }

  .special-filters {
    flex-wrap: wrap;
  }

  .special-filters .dropdown {
    width: calc(50% - 5px);
  }

  .special-filters .large-search-btn {
    width: 100%;
  }

  .offers-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .offers-list .offer {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    width: 100%;
  }

  .offers-list .offer .resort {
    flex: 0 0 36%;
    width: 36%;
    min-width: 300px;
    max-width: 420px;
  }

  .offers-list .offer .details {
    flex: 1 1 0;
    min-width: 0;
    min-height: auto;
    width: auto;
  }

  .offers-list .offer .details .options {
    width: auto;
  }

  .offers-list .carousel-inner,
  .offers-list .carousel .carousel-item.active {
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0;
  }

  .offers-list .offer .details .options .preferences {
    margin-top: 10px;
  }
}

@media screen and (max-width: 1430px) {
  .offers-list .offer {
    width: 100%;
  }

  .offers-list .offer .details .options {
    width: 40%;
    min-width: 202px;
  }
}

@media screen and (max-width: 1200px) {
  .offer-header {
    flex-direction: column;
  }

  .offer-header .map-wrapper {
    width: 100%;
    padding: 60px 20px;
  }
}

@media screen and (max-width: 1200px) {
  .filters-section,
  .map-wrapper {
    display: none;
  }

  .order-filters .results .map-btn {
    display: flex;
    background-color: #da8300;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 6px;
  }

  .order-filters .results {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-filters {
    display: flex;
  }

  .order-filters:not(.mobile-filters, .mobile-search-btn) {
    flex-direction: column-reverse;
    gap: 10px;
    align-items: flex-start;
  }

  .order-filters .filters {
    width: 100%;
  }

  .order-filters .filters .dropdown {
    width: 100%;
  }

  .order-filters .filters .dropdown button {
    width: 100%;
  }

  .offer-banner {
    padding: 20px 10px;
  }

  .offer-banner h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .offer-banner p {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 600px) {
  .order-filters .filters {
    flex-direction: column;
  }

  .special-filters .dropdown {
    width: 100%;
  }

  /* (c) pe mobil: pretul ramane INLINE cu numele hotelului (.about) - detaliile raman pe rand, nu stivuite */
  .offers-list .offer .details {
    min-height: auto;
    gap: 10px;
    align-items: flex-start;
  }

  .offers-list .offer .details .options {
    width: auto;
    min-width: 110px;
    max-width: 42%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
  }

  .offers-list .offer .details .options h1 {
    font-size: 28px;
    line-height: 1.1;
  }

  .offers-list .offer .details .options .preferences {
    display: none;
  }

  .offers-list .offer .details .options .buttons {
    width: 100%;
    gap: 6px;
    align-items: center;
  }

  .offers-list .offer .details .options .buttons a.details-btn {
    flex: 1 1 auto;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .special-filters.desktop {
    display: none;
  }

  .mobile-search-btn {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .main-wrapper {
    padding: 10px;
  }

  .offers .pages .page-list {
    gap: 10px;
  }

  .filters .dropdown .btn {
    width: 100%;
  }

  .filters {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .order-offcanvas .filters {
    padding: 10px;
    justify-content: space-between;
    gap: 10px;
  }

  .filters .filters-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-shadow: none;
  }

  .filters .large-search-btn {
    background-color: var(--color-primary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: var(--box-shadow);
    cursor: pointer;
  }

  .filter-section {
    padding: 10px;
  }

  .order-offcanvas .dropdown p {
    margin-bottom: 10px;
    color: var(--color-text-primary);
  }

  .filters-offcanvas .filters {
    justify-content: space-between;
    padding-bottom: 10px;
  }

  .filters-offcanvas .filters .large-search-btn {
    margin: 0 10px;
  }

  .special-filters .large-search-btn {
    cursor: pointer;
  }

  .mobile-map-wrapper .list {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .mobile-map-filter-button {
    display: flex;
  }

  .filters-offcanvas {
    z-index: 9999999999999999;
  }

  .special-filters .dropdown.room-search .rooms-list {
    max-height: 250px;
  }
}


/* Flight results card */
.offers-list .offer.flight-offer {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.offers-list .offer.flight-offer .details .options .buttons a {
  border-radius: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.offers-list .offer.flight-offer .flight-offer-main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

.offers-list .offer.flight-offer .flight-offer-route {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.offers-list .offer.flight-offer .flight-leg-separator {
  border-top: 1px solid #ececec;
}

.offers-list .offer.flight-offer .flight-leg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.offers-list .offer.flight-offer .flight-leg-info {
  flex: 1;
  min-width: 0;
}

.offers-list .offer.flight-offer .flight-offer-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #252525;
  margin-bottom: 8px;
  font-weight: 700;
}

.offers-list .offer.flight-offer .flight-offer-times {
  font-size: 34px;
  color: #121212;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.offers-list .offer.flight-offer .flight-offer-airports {
  font-size: 28px;
  color: #000e3d;
  line-height: 1.2;
}

.offers-list .offer.flight-offer .flight-offer-date {
  margin-top: 8px;
  color: #7d8189;
  font-weight: 500;
}

.offers-list .offer.flight-offer .flight-offer-carrier {
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  text-align: center;
  color: #000e3d;
  font-weight: 600;
}

.offers-list .offer.flight-offer .flight-offer-carrier.leg-carrier {
  min-width: 130px;
  border-left: 1px solid #ececec;
  border-right: none;
  padding: 0 0 0 16px;
}

.offers-list .offer.flight-offer .flight-offer-price {
  min-width: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  border-left: 1px solid #ececec;
  padding-left: 24px;
  gap: 8px;
}

.offers-list .offer.flight-offer .flight-offer-price h1 {
  font-size: 36px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.offers-list .offer.flight-offer .flight-offer-price span {
  font-size: 10px;
  color: var(--color-text-faded);
  font-weight: 500;
}

.offers-list .offer.flight-offer .flight-offer-price .details-btn {
  background-color: var(--color-primary);
  padding: 10px 20px;
}
.offers-list .offer.flight-offer .flight-offer-price a{
  margin-top: 20px;
  border-radius: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.offers-list .offer.flight-offer .flight-offer-footer {
  border-top: 1px solid #ececec;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.offers-list .offer.flight-offer .flight-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #252525;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 991px) {
  .offers-list .offer.flight-offer .flight-offer-main {
    flex-direction: column;
  }

  .offers-list .offer.flight-offer .flight-offer-carrier {
    border-left: none;
    border-right: none;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 12px 0;
  }

  .offers-list .offer.flight-offer .flight-offer-price {
    align-items: flex-start;
  }

  .offers-list .offer.flight-offer .flight-leg-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .offers-list .offer.flight-offer .flight-offer-carrier.leg-carrier {
    border-left: none;
    padding: 0;
    min-width: auto;
    align-items: flex-start;
  }
}

/* Results page custom period calendar (loaded by app/Travel/Views/search/* via oferte.css) */
.offers .special-filters .period-nights-picker .dropdown-menu,
.offers .special-filters .date-picker .dropdown-menu {
  min-width: min(398px, calc(100vw - 32px));
  border: 2px solid #dedede;
  border-radius: 0;
  box-shadow: none !important;
  padding: 14px !important;
}
.offers .special-filters .period-range-labels {
  color: #000;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  justify-content: space-between;
  line-height: 1.2;
  text-transform: none;
}
.offers .special-filters .period-nights-picker .numbers {
  border: 2px solid #dedede;
  justify-content: space-between;
  gap: 0;
  padding: 6px 10px;
}
.offers .special-filters .period-nights-picker .numbers .control {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font-size: 18px;
  width: 28px;
  height: 28px;
}
.offers .special-filters .period-nights-picker .numbers .count {
  color: #222;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  width: 100%;
}
.offers .special-filters .travel-js-calendar,
.offers .special-filters .travel-js-calendar.jsCalendar,
.offers .special-filters .travel-js-calendar.jsCalendar table,
.offers .special-filters .travel-js-calendar .jsCalendar,
.offers .special-filters .travel-js-calendar .jsCalendar table {
  width: 100% !important;
  max-width: 100%;
}
.offers .special-filters .travel-js-calendar.jsCalendar table,
.offers .special-filters .travel-js-calendar .jsCalendar table {
  border-collapse: separate;
  border-spacing: 4px;
  margin: 0 auto;
  table-layout: fixed;
}
.offers .special-filters .travel-js-calendar.jsCalendar thead,
.offers .special-filters .travel-js-calendar .jsCalendar thead {
  display: table-header-group;
  margin: 0;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody,
.offers .special-filters .travel-js-calendar .jsCalendar tbody {
  display: table-row-group;
  margin: 0;
}
.offers .special-filters .travel-js-calendar.jsCalendar tr,
.offers .special-filters .travel-js-calendar .jsCalendar tr {
  display: table-row;
  line-height: normal;
}
.offers .special-filters .travel-js-calendar.jsCalendar thead .jsCalendar-title,
.offers .special-filters .travel-js-calendar .jsCalendar thead .jsCalendar-title {
  display: table-cell;
  height: 44px;
  line-height: 1.05;
  position: relative;
  text-align: center;
  width: auto !important;
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-title-name,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-title-name {
  color: #111;
  display: inline-block;
  float: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.05;
  max-width: 92px;
  text-align: center;
  text-transform: none;
  white-space: normal;
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-left,
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-right,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-left,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-right {
  color: transparent;
  height: 26px;
  margin: 0;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-left,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-left {
  left: 8px;
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-right,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-right {
  right: 8px;
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-left::before,
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-right::before,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-left::before,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-right::before {
  border: solid #000;
  border-width: 0 2px 2px 0;
  content: "";
  display: inline-block;
  height: 13px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 13px;
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-left::before,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-left::before {
  transform: translate(-35%, -50%) rotate(135deg);
}
.offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-right::before,
.offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-right::before {
  transform: translate(-65%, -50%) rotate(-45deg);
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td,
.offers .special-filters .travel-js-calendar.jsCalendar thead .jsCalendar-week-days th,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td,
.offers .special-filters .travel-js-calendar .jsCalendar thead .jsCalendar-week-days th {
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  display: table-cell !important;
  margin: 0 !important;
  vertical-align: middle;
  width: 14.285% !important;
}
.offers .special-filters .travel-js-calendar.jsCalendar thead .jsCalendar-week-days th,
.offers .special-filters .travel-js-calendar .jsCalendar thead .jsCalendar-week-days th {
  color: #2f2f2f;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0;
  text-transform: none;
  text-align: center;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td {
  background: #f3f3f3 !important;
  color: #8f8f8f;
  font-size: 13px;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
  padding: 0 !important;
  text-align: center;
}
.offers .special-filters .dropdown-menu .search-list {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.offers .special-filters .destinations-filter .mini-search .search-list {
  display: none;
}
.offers .special-filters .destinations-filter .mini-search:focus-within .search-list,
.offers .special-filters .destinations-filter .mini-search .search-list:hover {
  display: flex;
}
.special-filters .destinations-filter .mini-search .search-list {
  max-height: 250px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.special-filters .destinations-filter .mini-search:focus-within .search-list,
.special-filters .destinations-filter .mini-search .search-list:hover {
  display: flex;
}
.special-filters .destinations-filter .mini-search .dropdown-item {
  padding: 5px 10px;
  color: #000e3d;
  cursor: pointer;
  transition: 0.2s ease;
  border-radius: 5px;
}
.special-filters .destinations-filter .mini-search .dropdown-item:hover,
.special-filters .destinations-filter .mini-search .dropdown-item.selected {
  background-color: #d5dded;
}
.special-filters .destinations-filter .mini-search .search-list:hover .dropdown-item.selected:not(:hover) {
  background-color: transparent;
}
.special-filters .destinations-filter .mini-search .form-control {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.9374 7.87433C12.9374 8.53915 12.8065 9.19746 12.5521 9.81167C12.2977 10.4259 11.9248 10.984 11.4547 11.4541C10.9846 11.9242 10.4265 12.2971 9.81228 12.5515C9.19807 12.8059 8.53976 12.9368 7.87495 12.9368C7.21013 12.9368 6.55182 12.8059 5.93761 12.5515C5.3234 12.2971 4.76531 11.9242 4.29522 11.4541C3.82512 10.984 3.45222 10.4259 3.19781 9.81167C2.94339 9.19746 2.81245 8.53915 2.81245 7.87433C2.81245 6.53168 3.34581 5.24401 4.29522 4.29461C5.24462 3.3452 6.53229 2.81184 7.87495 2.81184C9.2176 2.81184 10.5053 3.3452 11.4547 4.29461C12.4041 5.24401 12.9374 6.53168 12.9374 7.87433ZM12.0149 13.2068C10.6586 14.2598 8.95198 14.7563 7.24247 14.5952C5.53296 14.4342 3.94908 13.6277 2.81329 12.3399C1.67749 11.0521 1.07517 9.37992 1.12892 7.66368C1.18268 5.94744 1.88848 4.31619 3.10264 3.10203C4.3168 1.88787 5.94805 1.18207 7.66429 1.12831C9.38053 1.07455 11.0527 1.67688 12.3405 2.81268C13.6283 3.94847 14.4348 5.53235 14.5959 7.24186C14.7569 8.95137 14.2604 10.658 13.2074 12.0143L16.3462 15.1531C16.4291 15.2303 16.4956 15.3235 16.5417 15.427C16.5878 15.5305 16.6126 15.6422 16.6146 15.7555C16.6166 15.8688 16.5958 15.9813 16.5533 16.0864C16.5109 16.1914 16.4477 16.2869 16.3676 16.367C16.2875 16.4471 16.1921 16.5103 16.087 16.5527C15.9819 16.5952 15.8694 16.616 15.7561 16.614C15.6428 16.612 15.5311 16.5872 15.4276 16.5411C15.3241 16.495 15.2309 16.4285 15.1537 16.3456L12.0149 13.2068Z' fill='%23000e3d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.offers .special-filters .dropdown-menu .dropdown-item {
  padding: 5px 10px;
  color: #000e3d;
  cursor: pointer;
  transition: 0.2s ease;
  border-radius: 5px;
}
.offers .special-filters .dropdown-menu .dropdown-item:hover {
  background-color: #d5dded;
}
.offers .special-filters .dropdown-menu .dropdown-item.selected {
  background-color: #d5dded;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-available,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-available {
  background: #2cbbb559 !important;
  color: #111;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-next,
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-previous,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-next,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-previous {
  background: #f7f7f7 !important;
  color: #c8c8c8 !important;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-disabled,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-disabled {
  background: #f3f3f3 !important;
  color: #cfcfcf !important;
  cursor: not-allowed !important;
  opacity: 0.55;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-range,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-range {
  background: #2cbbb559 !important;
  color: #111 !important;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-range-start,
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-range-end,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-range-start,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-range-end {
  background: #2cbbb5 !important;
  color: #fff !important;
}
.offers .special-filters .travel-js-calendar.jsCalendar tbody td.jsCalendar-selected,
.offers .special-filters .travel-js-calendar .jsCalendar tbody td.jsCalendar-selected {
  background: #2cbbb5 !important;
  color: #fff !important;
}
@media (max-width: 576px) {
  .offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-title-name,
  .offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-title-name {
    font-size: 22px;
  }
  .offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-left,
  .offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-right,
  .offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-left,
  .offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-right {
    height: 24px;
    width: 24px;
  }
  .offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-left::before,
  .offers .special-filters .travel-js-calendar.jsCalendar .jsCalendar-nav-right::before,
  .offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-left::before,
  .offers .special-filters .travel-js-calendar .jsCalendar .jsCalendar-nav-right::before {
    height: 12px;
    width: 12px;
  }
  .offers .special-filters .travel-js-calendar.jsCalendar thead th,
  .offers .special-filters .travel-js-calendar .jsCalendar thead th,
  .offers .special-filters .travel-js-calendar.jsCalendar tbody td,
  .offers .special-filters .travel-js-calendar .jsCalendar tbody td {
    font-size: 12px;
    height: 28px;
    line-height: 28px;
  }
}

/* Fără rezultate: coloana de filtre dispare, mesajul rămâne pe toată lățimea.
   Clasa e pusă din search.js (#updateResultsCount), doar când căutarea s-a încheiat —
   nu cât timp mai vin rezultate din poll, altfel ar clipi la fiecare căutare.
   `.offers` are deja width:100%, deci în flex lățimea plină vine de la sine. */
.offers-wrapper.tp-fara-rezultate .filters-section {
  display: none;
}

/* Obiectivele din "Ce poti vizita in zona": etichete-pilula cu nume oricat de lungi
   (ex. "Vladimir K. Arseniev Museum of Far East History") - ellipsis in loc de iesire
   din card; pozele de pe Commons au proportii oricum diferite -> cover pe inaltime fixa. */
.visit-card { position: relative; overflow: hidden; border-radius: 12px; }
.visit-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.visit-card .visit-label {
  position: absolute; top: 10px; left: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Markerele hartii de rezultate: eticheta cu pret in loc de pin-ul standard Leaflet.
   Randate din search.js (#buildPriceIcon) ca divIcon fara dimensiune fixa, fiindca pretul n-are
   lungime constanta ("450 €" vs "de la 1.290 €").

   Cum sta ancorat: .search-results-map-pricetag-icon e chiar elementul pe care Leaflet il aseaza
   cu top/left exact pe coordonata hotelului. Il lasam un punct fara dimensiuni proprii, iar
   eticheta se centreaza pe orizontala si se ridica deasupra punctului din `translate`. Asa
   varful cozii cade pe coordonata reala oricat de lat ar fi textul - un `iconAnchor` in JS ar
   cere latimea dinainte, adica o masuratoare in DOM inainte de randare. */
.search-results-map-pricetag-icon {
  width: auto !important;
  height: auto !important;
  background: none;
  border: 0;
}

.search-results-map-pricetag {
  display: inline-block;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
  transition: background 0.15s ease, color 0.15s ease;
}

/* Coada care leaga eticheta de punctul de pe harta. */
.search-results-map-pricetag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--color-primary);
  border-bottom: 0;
}

/* .is-selected e pusa din search.js (#buildPinMarker) cat timp popup-ul etichetei e deschis.
   Leaflet nu marcheaza in niciun fel marker-ul cu popup deschis, deci fara ea eticheta pe care
   tocmai ai dat click ar reveni la culoarea normala in clipa in care muti mouse-ul de pe ea. */
.search-results-map-pricetag-icon:hover .search-results-map-pricetag,
.search-results-map-pricetag-icon:focus .search-results-map-pricetag,
.search-results-map-pricetag-icon.is-selected .search-results-map-pricetag {
  background: var(--color-primary-hover);
  color: white;
}

.search-results-map-pricetag-icon:hover .search-results-map-pricetag::after,
.search-results-map-pricetag-icon:focus .search-results-map-pricetag::after,
.search-results-map-pricetag-icon.is-selected .search-results-map-pricetag::after {
  border-top-color: var(--color-primary-hover);
}

/* Etichetele sunt late si se suprapun des; cea vizata trece deasupra vecinilor.
   Leaflet pune z-index inline pe fiecare marker (dupa latitudine), deci e nevoie de !important. */
.search-results-map-pricetag-icon:hover,
.search-results-map-pricetag-icon.is-selected {
  z-index: 10000 !important;
}

/* Popup-ul se ridica peste eticheta de pret, care sta ea insasi deasupra punctului.
   !important pentru ca Leaflet scrie `bottom` INLINE, din `L.Popup._updatePosition()` - o regula
   normala n-ar avea nicio sansa. Valoarea e constanta: `bottom` calculat de Leaflet depinde de
   `iconAnchor` si de offset-ul popup-ului, iar la noi ambele sunt fixe.
   Limitat la harta de rezultate, ca sa nu miste popup-urile altor harti de pe site. */
#search-results-map .leaflet-popup {
  bottom: 25px !important;
}

/* Cautarea dupa numele hotelului din panoul de filtre.
   Filtrarea e in JS, pe cardurile deja randate (search.js -> #applyHotelNameFilter). */
.filters .tp-name-filter {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filters .tp-name-filter::placeholder {
  color: var(--color-text-secondary);
}

.filters .tp-name-filter:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 187, 181, 0.18);
}

/* !important, ca la .tp-flight-hidden: cardul e un `.offer` cu display propriu, iar peste el mai
   trec si paginarea (.tp-page-hidden) si filtrul de zbor - toate trebuie sa poata ascunde singure. */
.offers-list .tp-name-hidden {
  display: none !important;
}

/* Mesajul de "niciun hotel" al filtrului dupa nume. Fara el lista goala ar semana leit cu o
   cautare fara rezultate, desi ofertele sunt acolo, doar ascunse de textul tastat. */
.offers-list .tp-name-empty {
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Cardurile-schelet de la coada listei, cat timp mai vin rezultate din poll (search.js ->
   #skeletonCards). Erau injectate din JS ca <style id="tp-sk-styles">; stau aici fiindca oferte.css
   e oricum incarcat de toate view-urile de cautare. */
.offer-skeleton { pointer-events: none; }
.offer-skeleton .resort { position: relative; overflow: hidden; }

.tp-sk { position: relative; overflow: hidden; background: #e9ecf2; border-radius: 8px; }
.tp-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: tp-sk-shimmer 1.3s infinite;
}

.tp-sk-img { width: 100%; height: 100%; min-height: 190px; border-radius: 10px; }
.tp-sk-line { height: 14px; margin: 10px 0; }
.tp-sk-title { width: 55%; height: 22px; }
.tp-sk-sub { width: 38%; }
.tp-sk-text { width: 92%; }
.tp-sk-text.short { width: 70%; }
.tp-sk-chips { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.tp-sk-chips span { width: 68px; height: 22px; border-radius: 11px; display: inline-block; }
.tp-sk-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.tp-sk-price { width: 130px; height: 26px; }
.tp-sk-btn { width: 130px; height: 40px; border-radius: 8px; }

@keyframes tp-sk-shimmer { 100% { transform: translateX(100%); } }

/* Respectam preferinta de sistem: shimmerul e pur decorativ. */
@media (prefers-reduced-motion: reduce) {
  .tp-sk::after { animation: none; }
}

/* MOBIL: continutul cardului are randuri clare. Facilitățile tip pill stau pe penultimul rand,
   iar Favorite + Vezi detalii ocupă ultimul rand. display:contents dizolvă .features/.options
   ca elementele lor să poată fi ordonate direct în .details. */
@media screen and (max-width: 768px) {
  .offers-list .offer {
    flex-direction: column;
  }
  .offers-list .offer .resort {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .offers-list .carousel-inner,
  .offers-list .carousel .carousel-item.active {
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
  }
  .offers-list .offer .details { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: auto; }
  .offers-list .offer .details .features,
  .offers-list .offer .details .options { display: contents; }

  .offers-list .offer .details .about { order: 1; width: 100%; }
  .offers-list .offer .details .options > .d-flex { order: 2; width: 100%; align-items: flex-start !important; }
  .offers-list .offer .details .options .preferences { order: 2; justify-content: flex-start; max-width: none; }
  .offers-list .offer .details .description { order: 3; width: 100%; max-width: 100%; }
  .offers-list .offer .details .includes { order: 4; flex: 0 0 100%; width: 100%; margin-left: 0; }
  .offers-list .offer .details .preferences.hotel-facilities {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .offers-list .offer .details .options .buttons {
    order: 6;
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    align-self: auto;
  }
}

/* Facilitatile de pe cardul din listare: exact doua randuri, restul taiate.
   `.includes` are deja `flex-wrap` si `overflow: hidden`, deci e nevoie doar de inaltime.
   24px pe rand (18 line-height + 3 + 3 padding) x 2 = 48px. `line-height` e pus explicit tocmai
   ca inaltimea randului sa nu depinda de font. Twig-ul randeaza 12 facilitati ca randurile sa fie
   pline pe orice latime de card. */
.offers-list .offer .includes .perk {
  line-height: 18px;
}

.offers-list .offer .includes {
  max-height: 48px;
}

/* Randul de facilitati de pe cardul din listare (.preferences.hotel-facilities).
   Pastila vine din style.css, regula generica `.preferences div` — aici doar spatierea si
   taierea la doua randuri. Selectorul din `.options .preferences` NU-l atinge: blocul asta sta in
   `.about`, nu in `.options`. 22px pe rand + 6px gap = 50px. */
.offers-list .offer .preferences.hotel-facilities {
  /* Aceeasi latime ca zona `.includes` de deasupra (acolo e comentata, dar asta e valoarea
     intentionata) — fara ea pastilele se intind pe toata coloana si cele doua randuri se umplu
     cu mult mai multe decat trebuie. */
  max-width: 500px;
  margin-top: 8px;
  max-height: 50px;
  overflow: hidden;
}

/* Formularul mobil de căutare este o pagină completă, nu o suită de dropdown-uri.
   Clasele Bootstrap rămân în DOM pentru compatibilitate cu logica de selecție, dar
   trigger-ele sunt ascunse, iar conținutul fiecărei secțiuni este expus permanent. */
@media screen and (max-width: 768px) {
  .search-offcanvas {
    --bs-offcanvas-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .search-offcanvas .offcanvas-header {
    flex: 0 0 auto;
    border-radius: 0;
    padding: 14px 16px;
  }

  .search-offcanvas .offcanvas-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 0 16px 16px;
  }

  .search-offcanvas .special-filters {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    gap: 24px;
    overflow-y: auto;
    padding: 4px 2px 20px;
  }

  .search-offcanvas .special-filters > .dropdown {
    display: block;
    width: 100%;
    margin: 0;
  }

  .search-offcanvas .special-filters > .destinations-filter::before,
  .search-offcanvas .special-filters > .period-nights-picker::before,
  .search-offcanvas .special-filters > .room-search::before {
    display: block;
    margin-bottom: 10px;
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
  }

  .search-offcanvas .special-filters > .destinations-filter::before { content: "Destinație"; }
  .search-offcanvas .special-filters > .period-nights-picker::before { content: "Perioadă"; }
  .search-offcanvas .special-filters > .room-search::before { content: "Turiști"; }

  .search-offcanvas .large-filter-btn {
    display: none !important;
  }

  .search-offcanvas .dropdown-menu {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
  }

  .search-offcanvas .offcanvas-body > .large-search-btn {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px !important;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
  }
}