.hotel-info img,
.roomItem img {
  border-radius: 8px;
}

.taxArea {
  display: block !important;
}

.taxItem {
  display: flex;
  justify-content: space-between;
}

.taxItem > div,
.taxItem > span {
  font-weight: 700 !important;
}

.taxArea {
  background: #f8fafc;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.taxadd {
  font-size: 12px;
  padding: 5px;
  color: gray;
}

.contactAdresArea {
  width: 100%;
}

.catalogItem {
  margin: 10px !important;
  min-height: 200px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.priceShowed .pricedItem {
  font-size: 9px;
}

.detailRateBar {
  display: none;
  margin-bottom: 15px;
}

div#roomSection > .roomItem:first-child {
  margin-top: 0 !important;
}

.row.roomItem {
  margin: 10px 0 !important;
  padding: 10px !important;
}

.infoBarType {
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
}

.dailypriceArea {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 18px;
}

.dailyPriceIn .priceShower {
  font-weight: 600;
}

.dailyprice {
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  margin: 10px 0;
  width: auto;
  background: white;
  border-radius: 8px;
  border: 1px solid #d1fae5;
}

.roomAvCount {
  color: var(--button);
  margin-bottom: 5px;
}

.dailyprice .dailydate {
  padding: 3px 20px;
  background: rgba(15, 186, 84, 0.1);
  padding: 5px 15px;
  margin-bottom: 10px;
  font-size: 12px;
  position: relative;
}

.dailydate:after {
  content: ' ';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(51, 148, 222, 0.1);
}

.infoBarType .infoLabel {
  font-weight: 700;
  font-size: 14px;
}

.row {
  margin: 0 !important;
}

.sectionWidget {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin: 0 0 10px 0;
  width: 100%;
}

.roomText {
  padding: 0;
  margin: 10px 0;
}

select#rezcurrency {
  width: 49px;
}

.rezimg {
  width: 100%;
  object-fit: cover;
  margin-top: 10px;
  height: 300px;
  cursor: pointer;
}

.stockimage {
  position: absolute;
  text-align: center;
  width: 100%;
  background: #ffffff;
  bottom: 28px;
}

.roomTypeDetailSliderArea {
  display: flex;
  align-items: center;
}

.roomTypeDetailSliderArea i {
  background: #ffffffd1;
  padding: 10px;
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 10px;
}

.roomTypeDetailSliderArea .right {
  right: 0;
}

.roomTypeDetailSliderArea i:hover {
  background: white;
  transition: 0.5s;
}

.roomname {
  font-size: 24px;
  font-weight: 600;
  margin: 5px 0px;
}

.themeMod .roomname {
  margin-top: 0;
}

.themeMod .roomDesc {
  margin: 10px 0;
  line-height: 18px;
}

.pricebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rateInfoSection {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.rateInfoBadges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.priceRightSection {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ratePolicyDesc {
  font-size: 12px;
  color: #888;
  padding-left: 2px;
  line-height: 1.4;
}

.mobileRateRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.mobileRateBadges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mobilePriceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.priceStack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.roomprice {
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.priceRight {
  display: flex;
  flex-direction: column;
}

.priceRight > div {
  line-height: 13px;
}

.addbasket {
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  font-size: 14px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 110px;
  justify-content: center;
  height: 40px;
  border-radius: 22px;
  transition: all 0.2s ease;
}

.priceTopBar .addbasket::after,
.rezSec .addbasket::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  flex-shrink: 0;
}

.showExchangePriceAreaIn {
  display: grid;
  grid-template-columns: auto auto auto;
}

.showExchangePriceItem {
  font-weight: 700;
  background: #f9f9f9;
  margin: 5px;
  padding: 5px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  text-align: center;
}

.showExchangePriceArea i {
  width: 28px;
  height: 28px;
  text-align: center;
  margin: auto 5px !important;
}

.addbasket:hover {
  opacity: 0.88;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.clickToCall {
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  padding: 5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.clickToCall:hover {
  opacity: 0.88;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.clickToCall > svg {
  fill: #fff;
  margin-right: 5px;
}

.roomItem {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.deleteRez {
  background: var(--secondary);
  color: var(--secondary-contrast);
  width: fit-content;
  padding: 10px;
  cursor: pointer;
  margin: auto;
}

.infobar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.infobar .itemRez {
  font-weight: 700;
  text-align: center;
  padding: 0;
  margin: 5px;
  text-align: center;
  min-width: 160px;
  max-width: 170px;
}

.rezbar {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: self-start;
}

.roomType {
  background: var(--primary);
  min-width: 40px;
  padding: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  display: none;
}

.personalitem .row {
  padding-left: 0;
  padding-right: 0;
}

.reservationArea .row {
  padding-left: 0;
  padding-right: 0;
}

.genderInput {
  text-indent: 10px;
}

.genderInput option {
  text-indent: 5px !important;
  padding: 5px;
}

#buyLaterFormValidation .personalitem .rezinput label {
  position: static;
  top: auto;
}

.reservationArea .rezinput label {
  position: static;
  top: auto;
  background: transparent;
  padding: 0;
  display: block;
  z-index: auto;
  left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.basketAgrements {
  font-size: 20px;
}

.viofunContainer {
  width: 100%;
}

.viofunContainer > a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px auto;
}

.viofunContainer > a > img {
  width: auto;
}

@media (min-width: 1100px) {
  .RoomInfoPopup .roomTypeDetailSliderArea img.rezimg {
    height: 450px !important;
  }

  .voucherfield {
    width: 57% !important;
  }

  .personalitem .rezinput input,
  .personalitem .rezinput select {
    position: relative;
    /* margin: 15px 0 0; */
  }

  .personalitem .row {
    display: flex;
    width: 100%;
    flex-wrap: initial;
    flex-wrap: wrap;
  }

  .guest-list {
    border: 1px solid #e2e8f0;
    margin: 10px 0;
    padding: 8px;
    border-radius: 8px;
  }

  .personalitem label.error {
    top: 0 !important;
    left: 0;
    padding: 0;
    position: relative;
    margin: 12px 0;
  }

  input.error {
    border: none !important;
    border: 1px solid red !important;
  }

  .roomprice {
    min-width: 135px;
    padding-left: 0;
  }

  .themeMod .roomcount-basket {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
}

.guest {
  font-weight: 700;
  height: 25px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0 0 0;
}

.guest i {
  margin-right: 5px;
}

.checkinNoteItemIn {
  display: flex;
  gap: 15px;
  padding: 5px 10px;
  margin: 0px 0px 10px;
}

.checkinNoteItem label {
  font-weight: 600;
}

.requiredMod {
  display: flex;
  align-items: center;
  gap: 5px;
}

.requiredMod label {
  padding: 0;
}

.rezinfo {
  display: flex;
  background-color: #fff;
  font-size: 18px;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 20px 15px;
  margin-top: 10px;
  gap: 5px;
}

.reservationArea label.error {
  position: relative;
  top: 0;
  left: 0;
  padding: 5px;
}

.personalitem label#-error {
  display: none !important;
}

.groupPageWidget {
  margin-top: -53px;
  position: relative;
  z-index: 10;
}

.GroupHotelArea:before,
.GroupHotelArea:after {
  display: none;
}

.GroupHotelArea .listPriceContent {
  margin: 0;
}

.groupPageWidget .rezinfo {
  box-shadow: none !important;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0px 0px 48px 0px rgba(70, 72, 76, 0.1) !important;
  padding: 55px 15px;
  margin-top: -78px;
}

.groupPageWidget .rezinfo .rezLabel {
  background: white;
}

.groupPageWidget #rezpicker {
  /* background: none; */
}

.groupPageWidget #rezpicker i {
  background: none;
  /* color: var(--secondary-contrast); */
}

.showCalendar i {
  margin-right: 4px;
}

.showBillArea div,
.showNotArea div {
  display: flex;
  align-items: center;
}

.reservationArea.col-md-8.customshadow {
  padding: 10px;
  border-radius: 10px;
}

.reservationArea {
  background-color: #fff;
}

.cardMessage {
  margin-left: 10px;
  margin-bottom: 10px;
}

.reservationArea label {
  padding: 2px 8px;
}

.showBillArea div label,
.showNotArea div label {
  margin-left: 5px !important;
  padding: 3px;
}

.rateType {
  display: flex;
  width: 30%;
  flex-direction: column;
  justify-content: center;
}

.top-rateType {
  display: flex;
  align-items: center;
  width: 100%;
}

.bottom-rateType {
  margin-top: 5px;
  width: 100%;
  display: flex;
}

.period-in-days {
  white-space: nowrap;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 5px;
  margin-right: 5px;
  /* border: solid 1px #ededed; */
  height: 28px;
  font-weight: 400;
  /* background-color: #fff; */
  font-size: 13px;
  font-weight: 500;
  color: rgb(43, 187, 94);
}

.rateType svg,
.detailsRate svg {
  width: 20px;
  margin-right: 5px;
}

li.description.active {
  background: #636363 !important;
}

.expandedStatus {
  display: none;
}

.expededArea {
  background: #fff;
  position: relative;
}

.unexped {
  text-align: center;
  background: white;
  padding: 5px;
  width: fit-content;
  margin: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  border-radius: 15px;
  padding: 7px 30px;
}

.unexped svg {
  margin-left: 10px;
}

.themeMod .calendarAvailibiltyIn {
  border-radius: 5px 5px 5px 0px;
  top: 0px;
}

.calendarAvailibiltyIn {
  position: absolute;
  background: #ffffffba;
  top: 10px;
  z-index: 55;
  padding: 5px 12px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 7px 5px 5px 0px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
}

/* ForeCast Css*/
.hideCalendarPrice {
  display: none;
}

.foreCastArea .table-container td,
.foreCastArea .table-container th {
  border: 3px solid white;
}

.foreCastArea th {
  background: white;
}

.table-container .month-container {
  color: #a1a1a1;
  font-size: 10px;
}

.table-container td {
  text-align: center;
  position: relative;
  height: 40px;
}

.table-container {
  overflow-x: auto;
}

.table-container > table {
  margin-bottom: 10px;
}

.foreCastArea {
  margin: 35px 0;
}

.forecastInfoBar > div {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

#daterangecalendar {
  margin: 45px 0 0;
}

.table-container .sticky-col {
  font-weight: 500;
  position: -webkit-sticky;
  position: sticky;
  left: -3px;
  background-color: #fff;
  z-index: 1;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  background: white;
}

.table-container .sticky-col:nth-child(2) {
  left: 115px;
}

.table-container tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table-container tbody tr:hover {
  background-color: #f1f1f1;
}

.forecastInfoBar {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.forecastInfoButtons {
  display: flex;
  justify-content: space-between;
}

.mounthGapper {
  text-align: center;
  background: #636262 !important;
  font-size: 20px;
  font-weight: 500;
  color: white;
}

.ForecastButton {
  background: var(--primary);
  color: var(--primary-contrast);
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ForecastButton:hover {
  opacity: 0.88;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.table-container .available {
  cursor: pointer;
}

.table-container .selected {
  color: white;
  background-color: #96bdf9 !important;
}

.table-container .range-selected {
  background-color: #4682b4 !important;
  color: white;
}

.disabledSelecting {
  opacity: 0.5;
}

.range-hover {
  background-color: #96bdf9 !important;
  color: white;
}

.totalPriceSection {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.totalPriceSection i {
  font-size: 12px;
}

.toolTipPrice {
  position: absolute;
  top: -75px;
  background: #000000bd;
  color: white;
  padding: 10px 5px;
  z-index: 1;
  font-size: 20px !important;
  right: 0;
  border-radius: 5px;
}

.toolTipDate {
  font-size: 15px;
  padding: 0px 0px 5px;
  color: orange;
}

.unavailable {
  background-color: #ffcccc;
  /*  pointer-events: none !important; */
  cursor: pointer;
}

.forecastroomcount {
  position: absolute;
  top: 1px;
  left: 1px;
  background: #e79898;
  color: white;
  font-size: 10px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  padding: 0 2px;
}

.table-container .pricedItem {
  white-space: nowrap;
  line-height: 12px;
}

.forecastprice {
  font-weight: 600;
  letter-spacing: -0.5px;
}

.rateDetails {
  font-size: 12px;
  margin-bottom: 5px;
}

.clearSelection {
  display: flex;
  align-items: center;
  background: white;
  padding: 10px;
  border: 1px solid #cecece;
  cursor: pointer;
  display: none;
}

/* Genel */
.foreCastArea {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.table-container {
  overflow: auto;
}

/* TABLO */
.table-container table {
  border-collapse: separate;
  border-spacing: 2px;
  width: max-content;
  min-width: 100%;
  background: #f4f6f9;
}

/* Ay başlığı */
.mounthGapper {
  background: #565656;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Gün başlıkları */
thead th {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.activity-date-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.day-str {
  color: #8d8d8d;
  font-size: 12px;
}

/* Sol sticky kolon */
.sticky-col {
  position: sticky;
  left: 0;
  background: #fff !important;
  z-index: 15;
  white-space: nowrap;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

tbody .sticky-col {
  border-bottom: 1px solid #eee;
}

/* Hücre */
.available {
  cursor: pointer;
  transition: 0.18s;
  position: relative;
  background: #fff !important;
  border: 1px solid #d8eadf;
}

.available:hover {
  transform: scale(1.05);
  z-index: 50;
  background: #f4fff7 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* İç kart */
.pricedItem {
  min-width: 78px;
  min-height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Fiyat */
.forecastprice {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

/* Oda sayısı */
.forecastroomcount {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #34c759;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Seçili */
.available.selected {
  background: #1b74e4 !important;
  border-color: #1b74e4;
}

.available.selected .forecastprice {
  color: #fff;
}

.available.selected .forecastroomcount {
  background: #fff;
  color: #1b74e4;
}

/* Oda isimleri */
tbody td:first-child {
  font-size: 15px;
  font-weight: 600;
}

/* Bilgi Bar */
.forecastInfoBar {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 15px;
  background: #fff;
  border-top: 1px solid #eee;
}

.forecastInfoBar div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.forecastInfoBar i {
  border-radius: 5px;
}

.range-hover .nightText {
  color: black;
}

/* Butonlar */
.forecastInfoButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
}

.ForecastButton {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #b50707;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

.ForecastButton:hover {
  background: #d10a0a;
  transform: translateY(-2px);
}

.clearSelection {
  background: #f3f4f6;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.clearSelection:hover {
  background: #e6e8eb;
}

/* ForeCast Css End*/
.maxadult svg {
  width: 6px;
  fill: #fff;
}

.maxadult {
  position: absolute;
  bottom: 0;
  background: #1b1b1b4f;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border-radius: 0px 0px 8px 8px;
}

.maxadult span {
  color: #fff;
}

.nationalty {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  color: #454545;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 5px;
}

.rezinfoItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  border-bottom-width: 1px;
  width: 45%;
  height: 46px;
  border-color: #d3d3d3;
  border-style: solid;
  box-sizing: border-box;
}

.priceBar .rezinfoItem {
  height: 42px;
  width: fit-content;
  min-width: 161px;
  margin-top: 5px;
}

span.select2.select2-container.select2-container--default {
  width: 100% !important;
  display: block;
  margin: 0;
  padding: 0;
}

.rezinfoItem:last-child {
  border: none;
  padding: 0;
}

.rezinfoItem span {
  margin-right: 5px;
  font-weight: 400;
  font-size: 12px;
}

.removeInfoItem {
  position: absolute;
  right: 0;
  top: 0px;
  cursor: pointer;
}

/********/
#guestAreaInfo {
  cursor: pointer;
}

.guestAreaInner {
  display: flex;
  flex-wrap: wrap;
  background: white;
  padding: 15px;
  position: absolute;
  top: 45px;
  z-index: 10000000;
  overflow: auto;
}

.infoItem {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #8c0b0b;
  margin: 5px 0;
  padding: 15px;
  border-radius: 10px;
  /* background: whitesmoke; */
  position: relative;
  gap: 15px;
}

.seasonStart {
  background: linear-gradient(135deg, #fff3cd, #ffffff82);
  border-left: 6px solid #f59e0b;
  padding: 3px 16px;
  border-radius: 5px;
  font-size: 14px;
  color: #7c4a00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: 5px 0;
}

#nationalitymarketArea .select2-selection--single {
  background-color: #8b191900;
}

/****/
li.description {
  background: #6495ed;
}

li.description.active:hover {
  background: gray !important;
}

.paypopup {
  position: fixed;
  z-index: 10000;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  top: 0;
  background: #2b2a2866;
  padding: 20px;
  display: none;
}

.paypopup iframe {
  max-width: 720px;
}

.roomcount-basket .rezinfoItem {
  width: 100%;
}

@media (min-width: 720px) and (max-width: 1230px) {
  .guestCallArea {
    flex-wrap: wrap;
  }

  .rezinfoItem.callButtonArea {
    display: flex;
    flex-wrap: revert;
  }

  .guestCallArea .rezinfoItem {
    width: 24% !important;
  }
}

@media (min-width: 720px) and (max-width: 920px) {
  .themeMod .roomcount-basket .addbasket {
    margin-top: 15px;
  }

  .themeMod .roomcount-basket {
    margin-top: 15px;
    gap: 25px;
  }
}

@media (max-width: 1236px) {
  .GuestCallAreaContainer {
    position: relative !important;
    top: 0 !important;
  }

  .priceBar {
    flex-wrap: unset !important;
  }

  .roomTypeItem {
    width: 100% !important;
    margin-right: 0;
  }

  .roomTypesArea {
    flex-wrap: wrap;
  }

  table.month1,
  table.month2 {
    width: 100% !important;
  }

  .month-wrapper .gap {
    display: none;
  }

  .childItems {
    background: #ececec;
  }

  .deleteRez {
    width: 100%;
    text-align: center;
  }

  .itemRez {
    width: 47%;
  }

  .guest {
    width: 100%;
  }

  .rezinfo {
    flex-wrap: wrap;
    gap: 0;
  }

  .rezinfoItem {
    background: #fff;
    color: #000;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    height: 45px;
    margin-top: 15px;
  }

  .dailypriceArea {
    gap: 0px;
    margin-top: 0;
    font-size: 14px;
  }

  .dailyprice {
    width: 31.33%;
    margin: 2px;
  }
}

.rezinfoItem input,
.rezinfoItem select,
.rezinfoItem .select2-container .select2-selection--single {
  border-radius: 0;
  width: 100%;
  font-size: 14px;
  border: none !important;
  text-align: center;
}

.rezinfoItem.roomTypeGroup select,
#manuelDiscounts {
  text-align: left !important;
}

.rezinfoItem i {
  margin-right: 5px;
}

#refreshRez {
  text-shadow: none;
  font-size: 16px;
  height: 50px;
  border-radius: 0;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rezInfoSearchArea {
  margin: 20px 0;
}

.availibiltyCalendarSearchArea {
  width: auto;
}

.availibiltyCalendarSearchArea i {
  margin-right: 0;
}

.notRoom {
  font-weight: 700;
  margin: 20px 0;
  text-align: center;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.childItems {
  position: absolute;
  top: 48px;
  display: flex;
  flex-wrap: wrap;
  display: none;
  z-index: 1;
  border: 1px solid #ebe5e5;
  z-index: 100;
  border-radius: 7px;
  background: #fefdfd;
  border: 1px solid lightgrey;
}

.childArea {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.childageIn {
  font-size: 12px;
  padding: 5px;
  min-width: 50%;
}

.childageIn label {
  display: block;
  margin: 0;
  margin-left: 10px;
}

.childArea select {
  margin: 5px 0;
  border-radius: 20px;
  border: 1px solid lightgrey !important;
  background: #f4f6f8;
  max-width: 130px;
}

#applyChild {
  background: var(--primary);
  width: fit-content;
  text-align: center;
  font-size: 14px;
  cursor: pointer !important;
  padding: 5px 21px;
  z-index: 1;
  color: #fff;
  margin: auto;
  margin-bottom: 5px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  border: none;
  margin: auto;
}

#applyChild:disabled {
  opacity: 0.5;
}

.childageIn {
  display: none;
}

.notSale {
  color: #b0b0b0;
  pointer-events: none;
  width: fit-content;
  opacity: 0.5;
}

ul.tab-menu {
  display: flex;
  margin: 10px 0;
  overflow: auto;
}

#changeHotel {
  font-weight: 700;
}

ul.tab-menu li {
  padding: 0;
  text-align: center;
  border-radius: 10px 10px 0px 0px;
}

ul.tab-menu li a {
  color: #9c9c9c;
  margin: 0 !important;
  padding: 10px !important;
  display: flex;
}

.roomItem .tab-menu {
  border-bottom: solid 1px gray;
  margin-bottom: 0;
}

.roomItem .tab-menu .current {
  display: inline-block;
  border-bottom: 3px solid var(--secondary);
}

.roomItem .tab-menu .current > a {
  display: inline-block;
  width: 100%;
}

.roomItem.boardTypesMode .tab-menu {
  display: none;
}

.roomTotalPrice {
  font-size: 16px;
  padding: 10px;
}

.openSection {
  display: block !important;
}

.tab-content {
  width: 100%;
  overflow: visible;
}

.moreRead {
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.showRead {
  background: rgba(0, 0, 0, 0.045);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  padding: 7px 16px;
  border-radius: 30px;
  font-size: 13px;
  letter-spacing: 0.2px;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.showRead:hover {
  background: rgba(0, 0, 0, 0.09);
  transform: translateY(-1px);
}

.extraMore {
  display: inline-block !important;
}

.showText {
  max-height: 250px;
  overflow: hidden;
}

.roomText {
  padding: 0;
  margin: 0 0 10px 0;
}

/* GENEL ALAN */
#paymentMethodArea {
  display: flex !important;
  flex-direction: column;
}

/* HER ITEM */
.creditCardPayHotel .creditCardArea label {
  height: auto !important;
  width: fit-content !important;
  border-radius: 5px;
}

.payItem {
  position: relative;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 0px 0 0px 48px;
  background: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  margin: 5px 0;
}

/* HOVER */
.payItem:hover {
  border-color: #b30000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* RADIO HIDE */
.payItem input[type='radio'] {
  position: absolute;
  opacity: 0;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  cursor: pointer;
}

/* CUSTOM RADIO */
.payItem label {
  display: block;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}

/* RADIO ICON */
.payItem::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition: 0.2s;
}

/* SELECTED */
.payItem input[type='radio']:checked + label {
  color: #b30000;
  font-weight: 600;
}

.payItem input[type='radio']:checked ~ label::after {
  content: '';
}

/* SELECTED BORDER */
.payItem input[type='radio']:checked ~ label,
.payItem input[type='radio']:checked ~ div {
  color: #000000;
}

/* SELECTED CARD EFFECT */
.payItem:has(input[type='radio']:checked) {
  border: 2px solid #3182ce;
  background: #f0f7ff;
}

/* SELECTED RADIO DOT */
.payItem:has(input[type='radio']:checked)::before {
  border-color: #b30000;
  background: radial-gradient(#b30000 40%, transparent 41%);
}

/* ALT AÇIKLAMALAR */
.paymethodDescription,
#mailOrderDesc,
.creditCardArea > div {
  /* margin-top: 12px !important; */
  background: transparent !important;
  border-radius: 8px;
  /* padding: 12px !important; */
  font-size: 14px;
  color: #555;
}

/* INPUT ALANI */
.creditCardArea {
  /* margin-top: 12px; */
}

.creditCardArea .rezinput {
  margin-bottom: 10px;
}

.creditCardArea input {
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 8px;
  transition: 0.2s;
}

.creditCardArea input:focus {
  border-color: #b30000;
  outline: none;
  box-shadow: 0 0 0 2px rgba(179, 0, 0, 0.1);
}

/* MOBILE */
#closeFrame {
  background: #000;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

.closeFrame {
  display: flex;
  justify-content: flex-end;
}

.roompricenodiscount * {
  color: #999;
}

.roompricenodiscount {
  text-decoration: line-through;
  font-weight: 400;
  color: #999;
  font-size: 13px;
  line-height: 1.4;
}

.discountRate {
  background: var(--secondary);
  color: var(--secondary-contrast);
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  padding: 0 5px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  min-width: 60px;
}

.memberShipDiscount {
  width: 100%;
  justify-content: end;
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--primary);
  font-weight: 600;
}

.memberShipDiscount i {
  border: 1px solid var(--primary);
  padding: 4px 8px;
  border-radius: 5px;
}

.themeMod .discountRate {
  position: relative;
  background: var(--warn);
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-width: 55px;
  color: var(--warn-contrast);
  min-height: 55px;
}

.discountRate:before {
  content: ' ';
  position: absolute;
  left: -5px;
  top: 0;
  width: 0;
  height: 0;
  border-bottom: 5px solid #000;
  border-left: 2px solid transparent;
  border-right: 3px solid #000;
}

.discountRate:after {
  content: ' ';
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 15px solid #fff0;
  border-left: 27px solid var(--warn);
  border-right: 28px solid var(--warn);
  bottom: -15px;
}

.BestRoomItemSec .discountRate:after,
.BestRoomItemSec .discountRate:before {
  display: none;
}

.BestRoomItemSec .item {
  padding: 5px;
  display: inline-block;
  /* height: 100%; */
}

.priceBar {
  display: flex;
  gap: 15px;
  align-items: end;
  margin-bottom: 5px;
}

.comission {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px;
}

.comissionLabel {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.standartDiscount {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* margin: 0px 10px; */
}

.priceRight {
  display: flex;
  flex-direction: column;
}

.roomPriceCon {
  display: flex;
  font-size: 14px;
  align-items: baseline;
  color: #1a1a1a;
}

.roomPriceContent {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.roompricenodiscount .priceLeft {
  font-size: 14px;
  line-height: 1.4;
}

.priceLeft {
  font-size: 28px;
  letter-spacing: -1px;
  display: flex;
  color: #1a1a1a;
}

.comissionLabel {
  display: none;
}

.roompricenodiscount .priceRight {
  font-size: 10px;
}

.roompricenodiscount .priceMin {
  margin-bottom: 0;
}

.promoionFrontArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.promoionFrontArea .discountRate .promoIcon {
  margin-right: 4px;
  font-size: 11px;
}

.promoionFrontArea .promoLabel {
  font-size: 10px;
  font-weight: 700;
  color: #b45309;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.comission div i {
  font-size: 28px;
  /* margin-bottom: 17px; */
}

.promoionFrontArea .discountRate {
  background: #f59e0b !important;
  color: #fff !important;
  min-width: 44px;
  min-height: 0;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
}

.promoionFrontArea .discountRate:before,
.promoionFrontArea .discountRate:after {
  display: none !important;
  content: none !important;
}

.rezbar .rezLabel:after {
  width: 0;
  height: 0;
  border-top: 15px solid #fff;
  border-bottom: 13px solid #fff;
  border-left: 14px solid #f5f5f5;
  border-right: 0 solid #fff;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.rezbar .rezLabel:before {
  width: 0;
  height: 0;
  border-top: 15px solid #f5f5f5;
  border-bottom: 13px solid #f5f5f5;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

#rezpicker .drp_top-bar.normal {
  background: transparent !important;
}

#rezpicker .drp_top-bar.normal i {
  display: none !important;
}

#rezpicker .drp_top-bar .default-top,
.drp_top-bar .normal-top {
  display: block;
  text-align: center;
  color: #000;
}

#rezpicker .drp_top-bar {
  padding: 10px !important;
}

.roomTypeCalendarUnavaible {
  text-align: center;
  background: var(--primary);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid;
  color: var(--primary-contrast);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  justify-content: center;
}

@media (min-width: 720px) {
  .rooms.col-md-8 .extraDescriptionArea img {
    width: 100%;
    height: 150px;
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .dailyprice {
    min-width: 175px;
  }

  .RoomInfoPopup .listAmenitiesItem {
    width: 31%;
  }

  .personalitem .w33 {
    width: 33%;
  }

  .personalitem .w20 {
    width: 25%;
  }

  .personalitem .w25 {
    width: 25%;
  }

  .personalitem .w50 {
    width: 25%;
  }

  #roomTypeCalendar .lb-wrap {
    width: 48%;
    left: 26%;
  }

  .HeadLabel {
    display: block !important;
  }

  #rezpicker-container {
    width: 650px;
    top: 50px;
    left: 0;
  }

  .calendarRoomAvaiable table.month1,
  .calendarRoomAvaiable table.month2 {
    width: 47% !important;
    border: 1px solid #fff;
    border-radius: 10px !important;
    border-collapse: unset;
    min-height: 270px;
  }

  #creditCard {
    padding: 0px 10px;
  }

  .themeMod .themeModRezArea {
    max-width: 200px;
    float: right;
  }

  .themeMod .roomprice {
    display: flex !important;
    gap: 10px;
  }
}

@media (max-width: 992px) {
  .themeMod .roomcount-basket {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  .themeModRezArea {
    width: 100%;
  }
}

.rezinfoItemRoom .rezLabel {
  position: relative;
  display: flex;
  gap: 5px;
  padding: 0px;
}

.rezinfoItemRoom .inputReset {
  background: white;
  text-align: center;
  width: 110px;
  height: 40px;
}

.rezinfoItemRoom {
  padding-top: 5px;
}

@media (max-width: 920px) {
  .RoomInfoPopup {
    padding: 0 !important;
  }

  .RoomInfoPopup .roomTypeDetailSliderArea img.rezimg {
    height: 300px !important;
  }

  .upRoomDesc {
    margin: 10px 0;
  }

  .groupPageWidget {
    z-index: inherit;
  }

  .guestArea .flex {
    justify-content: center;
    white-space: nowrap;
    gap: 0;
  }

  .guestAreaInner {
    max-height: 500px;
  }

  .ChoosesArea .item {
    font-size: 14px !important;
  }

  .barArea {
    position: fixed;
    bottom: 0;
    background: lightgoldenrodyellow;
    width: 100%;
    display: flex;
    padding: 5px;
    left: 0;
    z-index: 10000;
    border: 1px solid #d1d1d1;
  }

  .guestAreaInnerHtml,
  .guestAreaInnerHtml .infoItem {
    width: 100%;
  }

  .guestAreaInner {
    position: fixed;
    bottom: 0;
    max-height: 500px;
    top: inherit;
    left: 0;
    overflow: auto;
    width: 100%;
    margin-bottom: 80px;
  }

  .searchInfo span {
    min-width: auto !important;
    padding: 3px 5px !important;
    font-size: 12px !important;
  }

  .BestRoomItem {
    flex-wrap: wrap;
  }

  .BestRoomItem .roomprice {
    flex-direction: row;
  }

  .BestRoomItem .bHotelInfo {
    justify-content: space-between;
    width: 100%;
  }

  #showbasketItems {
    margin: 10px 0px !important;
  }
}

@media (min-width: 1100px) {
  #rezInfoSearchArea .guestArea {
    max-width: 16%;
  }

  .table-container {
    overflow-x: visible;
  }

  .maxWidth {
    max-width: 115px;
  }
}

.discountDetailArea .discountRate:after {
  visibility: hidden;
}

#paymentForm input,
#paymentForm select {
  height: 55px !important;
  margin: 0px 0px 10px;
}

#buyLaterFormValidation .rezinput {
  width: 100%;
  padding: 0 6px 14px;
}

.rezinput input,
.rezinput select,
.rezinput textarea {
  /* border: none; */
  /* border-bottom: 1px solid #ccc; */
  /* box-sizing: border-box; */
  height: 40px;
  /* font-size: 14px; */
  /* font-weight: 600; */
  border-radius: 5px;
  padding: 0 10px;
  font-size: 16px;
}

.rezinput textarea {
  border-radius: 0;
}

.genderMessage {
  max-width: fit-content;
  white-space: normal;
}

.HeadLabel .hlabel {
  border-bottom: 1px solid #000;
  display: block;
  margin: 5px;
  padding: 5px 0;
  background: #f5f5f5;
  text-align: center;
}

.HeadLabel {
  display: none;
}

.hideprice {
  display: none;
}

.lossmessage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #ff3a3a;
  font-size: 14px;
  margin-top: 5px;
  gap: 8px;
}

.losSuggestionBtn {
  background: #ff3a3a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.losSuggestionBtn:hover {
  background: #d92626;
}

.lossMessageIcon {
  text-decoration: none;
}

.lossMessageIcon > i {
  padding: 5px;
  margin-right: 5px;
  font-size: 17px;
}

.lossMessageText {
  /* text-decoration: underline; */
}

.lossMessageText > a {
  color: #8b0000;
  font-weight: normal;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.roomTypesArea {
  width: 100%;
  display: flex;
  overflow: auto;
}

.roomTypeItem {
  background: #fff;
  padding: 5px;
  margin-right: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #c7c0c0;
  display: flex;
  align-items: center;
  border-radius: 5px 5px 0 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

#rezpicker {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: baseline;
  min-width: 255px;
  cursor: pointer;
  z-index: 1000;
  background: #fff;
  padding: 0 0 0 5px;
  position: relative;
}

.pickerArea > span {
  /* border-bottom-width: 1px; */
  /* border-style: solid; */
  /* border-color: #d3d3d3; */
}

#rezpicker-container {
  position: absolute;
}

.pickerArea span {
  font-size: 14px;
  width: 100%;
  min-height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#rezpicker .day.toMonth.invalid {
  opacity: 0.3;
}

.rezgapper {
  border: 1px solid lightgrey;
  height: 45px;
  width: 1px !important;
}

.rezpickerdate {
  font-size: 18px;
  padding: 0px 10px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  margin-top: -5px;
}

.rezpickerday {
  text-align: center;
  line-height: 10px;
  font-size: 14px;
  /* margin-bottom: 10px; */
}

.pickerArea {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.calendarRoomAvaiable .date-picker-wrapper {
  width: 100%;
  padding: 0;
}

.calendarRoomAvaiable .month-wrapper {
  width: 100% !important;
}

.calendarRoomAvaiable .month-wrapper td {
  width: 30px;
  border: 1px solid #fff;
}

.colorBar {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.colorBar div {
  padding: 10px;
}

.aroomCount {
  background: #370e0e8a;
  position: absolute;
  top: 0;
  padding: 0 4px;
}

.priceShowed {
  position: relative;
}

.colorBar {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.colorBar div {
  padding: 10px;
}

.day.toMonth.valid.tmp.checked {
  background: var(--secondary);
}

span.pickerDate {
  font-size: 10px !important;
}

.pricedItem span {
  font-size: 12px;
}

.week-name,
.week-name > th {
  color: #fff;
  border-color: #fff;
}

.week-name > th {
  color: #b4b4b4 !important;
}

.date-picker-wrapper table .caption > th {
  background: none;
  border: none;
}

.roomTypeItem.active {
  border-bottom: 2px solid red;
  box-sizing: border-box;
  background: #4e4e4e;
  color: #fff;
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
  background-color: transparent;
  color: #000;
}

.available.availablenoprice {
  background: #f4fff7 !important;
}

.avaibilitymessage {
  background: #fff;
  width: 100%;
  display: block;
  text-align: center;
  padding: 18px;
  margin-bottom: 20px;
  font-weight: 700;
}

.date-picker-wrapper {
  margin-bottom: 20px;
}

.showCalendar {
  font-size: 15px;
  background-color: var(--primary);
  margin: 10px 0;
  padding: 10px 15px 10px 25px;
  cursor: pointer;
  color: #fff;
  box-shadow:
    0 3px 3px -2px #0003,
    0 3px 4px #00000024,
    0 1px 8px #0000001f;
  display: none !important;
}

.detailsRate {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 5px;
  margin-right: 5px;
  border: solid 1px #ededed;
  height: 28px;
  font-weight: 600;
  background-color: #fff;
  /* color: var(--primary); */
  width: fit-content;
  border-radius: 15px;
}

.firstbar {
  display: flex;
}

.firstSecondBar {
  justify-content: center;
  text-align: center;
  width: 50%;
}

.firstSecondBar .comission {
  display: block;
  flex-wrap: wrap;
  justify-content: center;
  max-width: unset !important;
}

.firstinBar {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mobileadd {
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0;
}

.agentConsole {
  flex-direction: column;
  display: flex;
}

.rpItem {
  width: 33.33%;
  position: relative;
}

.rpItemContent {
  display: flex;
  flex-wrap: wrap;
}

.rpItemContent label {
  display: block !important;
  position: relative;
  background: transparent;
  padding: 0;
}

.rpItemFull {
  width: 100%;
}

.rpItemFull > textarea {
  height: 80px;
  position: relative;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  margin: 15px 0 0;
  background-color: #fff;
}

.rpItem label {
  top: 8px;
  padding: 2px 8px;
  display: block;
  z-index: 1;
}

.rpItem input,
.rpItem select {
  position: relative;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  margin: 15px 0 0;
  background-color: #fff;
}

.showDescIconBest {
  background: var(--primary);
  padding: 4px 10px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  font-size: 19px;
}

.iti input::placeholder {
  font-size: 12px;
  font-weight: 300;
  opacity: 0.5;
}

@media (max-width: 720px) {
  .table-container .sticky-col {
    max-width: 150px;
    white-space: normal !important;
    overflow: hidden;
  }

  .dailyprice {
    width: 48%;
  }

  .rezsearchButton,
  .availibiltyCalendarSearchArea,
  .availibiltyCalendarSearchArea button {
    width: 100%;
    max-width: 100%;
  }

  .personalitem .rezinput label {
    position: absolute;
    top: -5px;
    background: #fff;
    padding: 2px 8px;
    display: block;
    z-index: 1;
    left: 9px;
  }

  .personalitem .rezinput label.error {
    position: relative;
    top: 5px;
    left: 0px;
    padding: 0px;
  }

  .rezinput {
    margin: 10px 0 0px 0;
  }

  .table-container .pricedItem {
    margin-top: 12px;
  }

  #roomTypeCalendar .lb-wrap {
    padding: 2px;
    max-width: 95% !important;
    width: 95%;
    left: 3%;
  }

  .pricedItem span {
    font-size: 10px !important;
  }

  #rezpicker {
    margin-top: 15px;
    padding: 5px 0 0 5px;
  }

  .rezpickerday {
    margin: 10px 0;
  }

  .roomname {
    font-size: 1rem;
  }

  .roomItem .tab-menu {
    margin: 0;
  }

  .roomprice {
    font-size: 24px !important;
  }

  span.rateTypeLabel {
    white-space: nowrap;
  }

  .showRead {
    display: none;
  }

  .showText {
    max-height: inherit;
  }

  .roomItem .tab-menu li {
    white-space: nowrap;
  }

  .calendarAvailibiltyIn {
    top: 10px !important;
    border-radius: 0;
    padding: 5px;
    width: fit-content;
    left: auto;
  }

  .showDescIcon {
    background: var(--primary);
    padding: 4px 8px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
  }

  .lossmessage {
    margin-bottom: 15px;
    font-size: 13px;
  }
}

@media (max-width: 720px) {
  .personalitem {
    margin: 10px 5px;
    padding: 5px 5px;
    border-radius: 5px;
    border: 1px solid #ebebeb;
  }

  .rezinput input,
  .rezinput select {
    padding: 5px;
  }

  .rezinfoItem span {
    font-size: 11px !important;
  }

  .rateType {
    flex-wrap: wrap;
    width: 100%;
  }

  .rateType .rateTypeLabel {
    margin-top: 5px;
    white-space: break-spaces;
    height: auto;
    width: 100%;
    margin-right: 0;
    padding: 0;
    font-size: 14px;
  }

  .itemRez {
    width: 47%;
  }
}

.row {
  margin: 0 !important;
  padding: 0 10px;
}

#paymethodArea .row {
  padding: 0;
}

.babybed {
  display: flex;
  align-items: center;
  margin: 5px 5px;
  border: 1px solid #cccccc;
  padding: 10px;
  border-radius: 5px;
}

.babybed input {
  width: 20px;
  height: 20px;
}

.rezinput {
  padding: 5px;
}

.sectionInfo {
  font-weight: 700;
  /* background: linear-gradient(45deg, #979797, #00000030); */
  color: #fff;
  padding: 5px;
  width: 100%;
  position: relative;
}

/* .sectionInfo::before {
    content: ' ';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    border-bottom: solid 2px var(--primary);
    z-index: 1;
} */
.reservationArea .sectionInfo {
  font-weight: 600;
  color: #fff;
  padding: 5px;
  width: 100%;
  font-size: 14px;
  display: flex;
  background: none;
}

/* .reservationArea .sectionInfo::before {
    content: ' ';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    border-bottom: solid 2px var(--primary);
    z-index: 1;
}
 */
.sectionInfo > div {
  position: relative;
  z-index: 2;
  color: var(--primary);
  width: fit-content;
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 16px;
}

#payArea {
  display: none !important;
  position: fixed;
  background: #0000004f;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 100000;
  display: flex;
  align-items: center;
}

.pay {
  margin: auto;
  align-items: center;
  background: #fff;
  width: 300px;
  height: 500px;
}

.payinfo {
  color: black;
  width: fit-content;
  padding: 8px;
  border-radius: 10px;
  margin: 15px 5px;
  font-size: 18px;
  margin: 20px auto;
  font-weight: 600;
  background-color: #80808014;
}

.percentArea {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin-left: 20px;
  align-items: center;
  background: #f8f8f8;
  flex-wrap: wrap;
  gap: 10px;
}

.percentButtons {
  display: flex;
  gap: 10px;
}

.percentButtons button {
  background: #fff;
  border: 1px solid;
  color: black !important;
  border-radius: 5px;
}

.percentArea .priceArea {
  font-weight: 700;
  font-size: 16px;
}

.percentButtons .active {
  background: #c5c5c5;
}

.paymentSeller {
  max-width: 720px;
}

#paymentSellerForm {
  margin: auto;
}

.paymentItem {
  padding: 5px;
}

.messageArea {
  display: inline-block;
  background: #fff;
  width: 100%;
  padding: 5px;
  text-align: center;
  color: red;
  font-size: 18px;
  padding: 10px;
  border: 1px solid;
}

.infobar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.infobar .itemRez {
  font-weight: 700;
  text-align: center;
  padding: 0;
  margin: 5px;
  text-align: center;
  min-width: 160px;
  max-width: 170px;
}

.rezbar {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.HotelArea {
  display: flex;
  width: 100%;
  padding: 5px;
}

.paymentProcessArea,
.paymentProcessAreaWired {
  width: 100%;
  display: flex;
  gap: 10px;
  margin: 10px 0;
  /* background: #f5f5f5; */
  padding: 5px;
  border-radius: 5px;
}

.hotellogo {
  max-height: 70px;
  margin: 10px;
}

.HotelArea {
  justify-content: center;
}

.waitingLoading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: center;
  padding-top: 18%;
}

.rezLabel {
  margin-bottom: 0;
  text-align: center;
  display: flex;
  position: absolute;
  background: #fff;
  width: fit-content;
  top: -7px;
  padding: 0px 5px 5px 5px;
  left: 5px;
  z-index: 5;
  align-items: center;
}

.bankLogo {
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.installOptions {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin: 10px;
}

.showInstalments {
  cursor: pointer;
}

.flexIns span {
  font-weight: 700;
  margin-left: 10px;
  font-size: 18px;
}

.flexIns {
  display: flex;
  align-items: center;
  min-height: 55px;
}

.flexIns > input {
  margin-bottom: 0 !important;
}

.roomloading {
  width: 4rem;
  height: 4rem;
  border: 5px solid #f3f3f3;
  border-top: 6px solid #9c41f2;
  border-radius: 100%;
  margin: 10px auto;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rateTypeLabel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 12px;
  height: auto;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  background-color: #f5ede3;
  color: #6b3f1a;
  border: 1px solid #e2ccb3;
  border-radius: 20px;
}

.priceBarArea .rezLabel,
.rezSec .rezLabel,
.priceTopBar .rezLabel {
  background: transparent;
}

.priceBarArea .rezinfoItem,
.rezSec .rezinfoItem,
.priceTopBar .rezinfoItem {
  background: transparent;
}

.rezSec {
  padding: 12px;
  border: 1px solid #e8ddd4;
  background: #fff;
  border-radius: 10px;
  margin: 5px 0;
}

.priceTopBar {
  padding: 12px 16px;
  background: #fff;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #f0ebe4;
}

.priceBarArea > .rezSec {
  margin-bottom: 10px;
}

.priceBarArea > .rezSec:last-child {
  margin-bottom: 0;
}

.priceTopBar:last-child {
  border-bottom: none;
}

.priceBarArea .priceTopBar:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.rezinfoItem span {
  margin-right: 5px;
  font-weight: 400;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  position: relative;
  display: flex;
  line-height: 11px;
}

.rezinfoItem .select2-container .select2-selection--single {
  height: 38px;
  border-radius: 0;
  border: none;
}

.rezinfo .rezLabel {
  display: flex;
  position: absolute;
  top: 0;
  background: white;
  width: fit-content;
  top: -10px;
  padding: 3px;
  left: 2px;
  z-index: 5;
}

.headerActionbar .rezinfoItem {
  border: none;
  background: #fff;
  height: 30px;
  margin: auto;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 35px !important;
}

.paymethodDescription {
  width: 100%;
  margin: 15px 0;
  /* background: #f5f5f5; */
  padding: 10px;
}

.basketButtons {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  text-align: center;
}

.basketButtons .deleteRez {
  margin: 0;
  width: 100%;
  background: var(--secondary);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-contrast);
}

.basketButtons .deleteRez i {
  margin-right: 5px;
}

.guestInfoArea {
  flex-wrap: wrap;
  margin-bottom: 8px;
  display: flex;
}

.guestInfoArea .guestItem {
  font-weight: 600;
  border: 1px solid #f1f1f1;
  padding: 5px;
  margin: 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
}

.basketItemBasicInfo .mat-content {
  display: flex;
  justify-content: space-between;
}

.basketItemBasicInfo .mat-content > .mat-expansion-panel-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.basketItemBasicInfo .mat-content button {
  background: no-repeat;
  color: #000 !important;
  border: none;
}

.basketContainer {
  width: 100%;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
}

#showbasketItems {
  margin: 0 0 0 10px;
  border: 1px solid #eaeaea;
  padding: 10px;
  background-color: #fff;
}

.basketItem {
  display: flex;
  flex-direction: column;
}

.basketItem .bHotelInfo {
  align-items: flex-start;
  gap: 0;
}

.basketItem .bHotelInfo .roomImg {
  width: 50%;
  height: 158px;
}

.bHotelInfo.extraInfo {
  flex-wrap: wrap;
}

.bHotelInfo.extraInfo * {
  width: 100%;
  overflow: auto;
}

.bHotelInfo.extraInfo .roomImg img {
  width: 100%;
}

.deleteBasketItem {
  padding: 0 !important;
}

#creditCardandBasketArea button.deleteBasketItem {
  display: none;
}

.basketItem .bHotelInfo .roomImg img {
  object-fit: cover;
  width: 100;
  border-radius: 5px;
}

.basketItem .bHotelInfo address {
  width: 100%;
  padding-left: 10px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.hotelAddress * {
  display: block;
}

.nodiscount {
  justify-content: flex-end;
  text-decoration: line-through;
}

.basketItem .bHotelInfo .hotelAddress-ar {
  padding-right: 10px;
  padding-left: 0;
}

.basketItem .checkInOut {
  justify-content: space-between;
  display: block;
  width: 50%;
}

.basketItem .checkInOut .checkInfo {
  background-color: #fcfbfb;
  width: 100%;
  flex-direction: column;
  margin-bottom: 5px;
  border-radius: 0px 5px 5px 0;
}

.basketItem .checkInOut .checkInfo:last-child {
  margin-bottom: 0;
  background-color: #f1f1f2;
}

.basketItem .checkInOut .checkInfo .checkContent {
  flex-direction: column;
  padding: 8px;
}

.basketItem .checkInOut .checkInfo .checkContent .checkHead {
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.basketItem .checkInOut .checkInfo .checkContent .checkCon .checkDay {
  font-size: 40px;
  align-items: center;
  margin-right: 5px;
  line-height: 35px;
}

.basketItem .checkInOut .checkInfo .checkContent .checkCon .checkMoreInfo {
  flex-direction: column;
  justify-content: flex-end;
}

.basketItem
  .checkInOut
  .checkInfo
  .checkContent
  .checkCon
  .checkMoreInfo
  .checkM {
  line-height: 8px;
  font-size: 11px !important;
}

.basketItem
  .checkInOut
  .checkInfo
  .checkContent
  .checkCon
  .checkMoreInfo
  .checkMY {
  font-weight: 500;
  line-height: 20px;
  font-size: 16px;
  white-space: nowrap;
}

.basketItem .basketPInfo {
  padding-top: 10px;
  border-bottom: solid 1px #b3b3b3;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.basketItem .basketPInfo .roomName {
  display: flex;
  align-items: center;
  width: 50%;
  font-size: 16px;
  font-weight: 600;
}

.basketItem .basketPInfo .roomPrice {
  flex-direction: column;
  width: 50%;
}

.basketItem .basketPInfo .roomPrice .bPrice {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: flex-end;
}

.basketItem .basketPInfo .roomPrice .bInformation {
  justify-content: flex-end;
  font-size: 14px;
}

.basketItem .bBottom {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.basketItem .bBottom .typeCon {
  width: 70%;
  font-size: 12px;
  flex-direction: column;
}

.basketItem .bBottom .typeCon .rateType {
  width: 100%;
}

.basketItem .bBottom .typeCon .boardType {
  margin-bottom: 5px;
}

.promoitem {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  background: #f5f5f5;
  padding: 7px 5px;
  line-height: 16px;
}

.basketItem .bBottom .totalP {
  align-self: center;
  width: 30%;
  justify-content: flex-end;
  align-items: center;
}

.basketItem .bBottom .totalP i {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.basketItem .bBottom button {
  align-items: center;
  justify-content: center;
  padding: 0;
  min-width: 50px;
  font-size: 14px;
}

.basketItem .promobox {
  width: 100%;
  flex-direction: column;
  margin: 4px 0;
}

.basketItem .promobox .promoitem {
  width: 100%;
  justify-content: space-between;
}

.basketItem .promobox .promoitem span:first-child {
  font-weight: 500;
}

.iti__country-list {
  z-index: 10000;
}

.iti__search-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  padding: 6px;
  border-bottom: 1px solid #ccc;
}

.iti__country-list .iti__search-wrap .iti__search-input {
  width: 100%;
  min-width: 200px;
  box-sizing: border-box;
  height: 35px !important;
  padding: 6px 8px 6px 10px !important;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  max-height: 35px;
}

.iti__country-list .iti__search-wrap .iti__search-input:focus {
  border-color: #999;
}

.available-days {
  display: flex;
  gap: 2px;
  margin: 7px 0;
  flex-wrap: wrap;
  font-size: 10px;
}

.dayItem {
  background: ghostwhite;
  padding: 5px 5px;
  border-radius: 5px;
  /* color: var(--primary-contrast); */
  min-width: 49px;
  text-align: center;
  border: 1px solid #e6e6e6;
}

.available-daysHeading {
  font-weight: 700;
  padding: 5px;
}

.tabOpen {
  min-width: 100px;
  cursor: pointer;
}

ul.tab-menu {
  gap: 10px;
}

li.tabOpen {
  background: white;
  padding: 10px !important;
  font-weight: 700;
}

li.tabOpen.active {
  border-bottom: 2px solid var(--primary);
}

li.tabOpen:hover {
  color: white !important;
}

.basketItem .basketExtraService {
  display: inline-block;
}

.extraQuantity {
  text-align: end;
  font-weight: 700;
}

.extraItemDescription table td,
.extraItemDescription table {
  border: none !important;
}

.hotelItem * {
  display: flex;
}

.extraInfo * {
  display: block;
}

.exServiceDate {
  text-align: center;
  margin: 15px 0;
  background: whitesmoke;
  padding: 5px;
  border-radius: 50px;
}

.extraItemPriceArea {
  display: flex;
  gap: 5px;
  align-items: center;
  /* flex-wrap: wrap; */
  justify-content: flex-end;
}

.extraItemPriceArea button {
  border-radius: 5px;
  border: none;
  height: 30px;
}

.extraItemPriceArea select {
  width: 110px;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  padding: 4px 6px;
  border-radius: 6px;
}

label.extraLabel {
  font-size: 15px;
  background: #f0f7ff;
  padding: 5px;
  min-width: 100px;
  border: 1px solid #dad3d3;
  height: 30px;
  line-height: 18px;
  border-radius: 5px;
}

.basketItem .basketExtraServiceItems {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.basketItem .checkTitle {
  font-size: 14px;
}

.roomNameInfo {
  margin-left: 3px;
  color: var(--secondary);
  border-left: solid 3px var(--secondary);
  border-radius: 0;
  padding: 3px 5px;
  width: fit-content;
  min-width: 213px;
  font-weight: 600;
  font-size: var(--sizeMedium);
}

.voucherInput {
  margin: 20px 0;
}

.vocuherItem {
  background: white;
  padding: 15px;
}

.voucherInput input {
  background: beige;
}

.infoGroup {
  /* border: 1px solid #EEE; */
  margin: 10px 0 0 0;
  padding-bottom: 10px;
}

.basketActions {
  display: flex;
}

.deleteBasketIcon {
  background: transparent;
  color: inherit;
}

.roomnameBasket {
  font-weight: 600;
  width: 75%;
}

.bItem.generalTotal {
  display: flex;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 5px;
}

.bItem.generalTotal > span:first-child {
  margin-right: 3px;
}

.extraDescriptionArea {
  display: flex;
  justify-content: space-between;
  /* gap: 10px; */
  overflow: auto;
  flex-wrap: wrap;
}

.extraDescriptionArea img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.extraDescriptionArea img {
  /* max-width: 320px; */
  /* height: 250px; */
}

.selectExtraItem {
  display: flex;
  align-items: center;
  width: 1000%;
}

.extraFieldArea {
  width: 100%;
}

.extraItem {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  width: 48%;
  display: inline-grid;
}

.extraItemDescription {
  /* width: 50%; */
  padding: 0 10px;
  display: none;
}

.extraItemPriceArea {
  margin: 0px;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
  /* width: 100%; */
}

.questionArea input.error {
  border: 1px solid red !important;
}

.extraItemPrice {
  font-weight: 700;
  font-size: 16px;
  width: auto;
  text-align: end;
  padding: 5px;
  width: 100%;
}

.extraServiceItems {
  height: 30px;
  width: 100%;
  font-size: 12px;
  text-align: center;
  padding: 0;
}

.instalmentInfoItem {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #ff0000;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid;
}

.installmentsInfo {
  display: flex;
  align-items: center;
  justify-content: end;
  margin: 5px;
}

#instalments .lb-wrap {
  width: 80%;
  max-width: 80%;
  left: 10%;
  right: 10%;
}

.closeExtra {
  display: flex;
  justify-content: flex-end;
  font-size: 25px;
  cursor: pointer;
}

#extraServices {
  color: var(--secondary-contrast);
  max-width: 100% !important;
  display: flex;
  justify-content: space-between;
  padding: 0px 15px;
  background: var(--secondary);
}

#completeBasketButton {
  max-width: 100% !important;
}

#extraServiceButton i {
  margin-right: 5px;
}

.totalExtraItem {
  float: right;
  font-size: 25px;
}

.modalArea {
  background: #fff;
  width: 100%;
  margin: 20px auto;
  max-width: 720px;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid #efdbdb;
  position: relative;
}

.extraServiceButtonArea {
  width: 100%;
}

.extraHeadingFilter {
  font-size: 14px;
  font-weight: 700;
}

.extraHeading {
  font-weight: 700;
  margin: 10px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
}

#extraServiceButton {
  border: none;
  border-radius: 5px;
  background: var(--primary);
  margin: 10px;
  font-size: 18px;
  padding: 5px 25px !important;
  height: auto;
}

.modal {
  display: flex;
  max-height: 500px;
  overflow: auto;
}

.modalOverlay {
  position: fixed;
  top: 0;
  z-index: 555;
  background: #00000080;
  left: 0;
  right: 0;
  height: 100%;
  display: none;
}

.selectExtraItem span {
  margin-left: 10px;
  font-weight: 700;
}

.selectExtraItem span {
  margin: 5px 0;
  font-size: 14px;
  font-weight: 600;
}

input.extraItemsCheck {
  height: 44px;
  width: 25px;
}

.questionLabel {
  margin: 5px 0;
  padding: 5px;
  font-weight: 700;
}

.basketWrap {
  margin: 10px 0;
  border: 1px solid gray;
  padding: 5px;
}

.rezInfoArea .rezInfoItem {
  margin-bottom: 1px;
  display: block;
  background: #f5f5f5;
  padding: 5px;
}

.rezInfoArea .rezInfoItem span:first-child {
  font-weight: 700;
  margin-right: 10px;
  width: 80px;
}

.rezInfoArea .rezInfoItem span:last-child:before {
  content: ':';
  margin: 5px;
}

.rezInfoItem span {
  display: inline-block;
}

.basketLink {
  background: #f5f5f5;
  padding: 5px;
  margin: 2px 0;
  display: block;
  color: #000 !important;
}

#callErrorsMessage {
  background: linear-gradient(45deg, #f0f0f0, transparent);
  margin: 5px 0;
  border-radius: 5px;
}

.iconed {
  display: flex;
  align-items: center;
}

.iconed i {
  background: blue;
  padding: 3px 7px;
  z-index: 5;
  margin: 5px;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.payLinksVoucher {
  background: #f5f5f5;
  padding: 15px 9px;
  width: fit-content;
  border-radius: 6px;
}

#calculatedArea {
  padding: 5px;
  /* background: linear-gradient(211deg, white, #ebebeb); */
}

#calculatedArea .label {
  width: 100px !important;
  display: inline-block;
  font-weight: 700;
}

#calculatedArea .item {
  padding: 5px 0;
  font-size: 16px;
}

.calCulatedItem label {
  width: 100px;
}

.calCulatedItem {
  margin-bottom: 10px;
  border-bottom: 1px solid #fff;
  padding: 6px;
  align-items: center;
}

.flex .cbutton {
  padding: 8px;
  max-width: 100px;
}

.clearButton {
  background: red !important;
}

.cbutton.cancelDiscount {
  background: red;
}

#discoutLabel,
#priceLabel {
  display: flex;
}

.flex .cbutton {
  max-width: 120px;
  padding: 8px;
  margin: 5px;
}

.makeReservationform-control {
  width: 50%;
}

ul#callErrorsMessage li {
  text-align: left;
  line-height: 1px;
  font-weight: 700;
  color: red;
  padding: 10px 0;
}

.guestCallArea {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
}

.guestCallArea input {
  text-align: left;
}

.cbutton {
  background: var(--primary);
  width: 100%;
  color: var(--primary-contrast);
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}

.callButtonArea {
  flex-wrap: inherit;
  gap: 5px;
}

.callMessage {
  text-align: center;
  font-weight: 700;
  background: #f5f5f5;
}

ul#callErrorsMessage {
  margin: 0;
}

.GuestCallAreaContainer {
  position: sticky;
  top: 50px;
  z-index: 10;
  background-color: #fff;
  padding: 1px 10px 10px;
  margin-bottom: 20px;
  display: none;
}

.guestCallFinder {
  margin: 10px 0;
}

.guestCallFinder td {
  text-align: left;
}

.guestCallFinder table {
  margin: 0;
}

.guestCallFinder {
  margin: 10px 0;
  max-height: 200px;
  overflow: auto;
}

.createGuest {
  background: #5cd95c;
  color: #fff;
  padding: 8px 4px 8px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100px;
}

.priceTypeOptions {
  opacity: 0.5;
  pointer-events: none;
  background: #f0f7ff;
  border-radius: 5px;
  padding: 5px;
  display: inherit;
  border: 2px solid #3182ce;
}

.priceTypeOptions.active {
  opacity: 1;
  pointer-events: auto;
}

#priceTypeArea label {
  display: block !important;
  padding: 0;
}

.priceTypeOptions input {
  margin-bottom: 5px;
  font-weight: 700;
}

.priceCalculateMessage {
  display: inline-block;
  background: #f5f5f5;
  width: 100% !important;
  color: red;
  text-align: center;
}

.guetInfoArea {
  background: blue;
  color: #fff;
  padding: 0 7px;
  border-radius: 50%;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
}

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

.promItem Input {
  width: 125px;
  text-align: right;
}

.creditCardArea input {
  margin: 5px 0;
  font-size: inherit;
}

#creditCard > div {
  margin: 0px 0px 15px 0px;
}

.payDescription {
  margin: 15px 0;
}

.themeMod .roomcount-basket .addbasket {
  width: 100% !important;
}

.themeMod .roomprice .discountRate:before {
  display: none !important;
}

.themeMod .roomprice .discountRate:after {
  display: none !important;
}

.themeMod .roomprice .discountRate {
  min-height: 20px;
  border-radius: 5px;
}

.themeMod .roomprice .standartDiscount {
  margin-top: 0;
  margin: 0;
}

.themeModBar .listAmenitiesItem {
  white-space: nowrap;
}

.themeModBar .listAmenitiesItem span {
  font-size: 12px;
}

@media (max-width: 720px) {
  #instalments .lb-wrap {
    width: 100%;
    max-width: 100%;
  }

  .themeModBar {
    flex-wrap: wrap;
    height: auto !important;
  }

  .makeReservationform-control {
    width: 100%;
  }

  .extraItemDescription {
    width: 100%;
    text-align: justify;
  }

  .extraFieldArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
  }

  .extraDescriptionArea {
    flex-wrap: wrap;
  }

  .extraItemPriceArea {
    flex-wrap: wrap;
  }

  .extraItem {
    width: 100%;
  }

  .specialDate {
    position: relative !important;
    top: 0 !important;
  }

  .guestCallArea {
    flex-wrap: wrap;
    margin: 30px 0;
  }

  .guestCallArea .rezinfoItem {
    width: 45%;
    margin: 5px;
  }

  .rezinfoItem.callButtonArea {
    display: flex;
    width: 100%;
  }

  .rezinfoItem.callButtonArea div {
    width: 24%;
  }

  .firstSecondBar .comission {
    display: flex;
    padding-right: 0;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 5px;
    gap: 5px;
  }

  .discountRate {
    font-size: 16px;
  }

  .comission {
    gap: 0;
  }

  .firstinBar {
    width: 50%;
    align-items: flex-start;
    padding-top: 10px;
  }

  .firstSecondBar {
    width: 50%;
    padding-top: 10px;
  }

  .roomprice {
    font-size: 18px;
  }

  .roomprice {
    text-align: end;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 0;
  }

  .themeMod .roomprice .standartDiscount {
    margin: 0 !important;
  }

  .themeMod .themeModBar {
    width: 100% !important;
    justify-content: space-around;
  }

  .themeMod .roomprice .discountRate:before {
    display: none !important;
  }

  .themeMod .roomprice .discountRate:after {
    display: none !important;
  }

  .themeMod .roomprice .discountRate {
    min-height: 35px !important;
    border-radius: 10px;
  }

  .themeMod .roomname {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .themeMod .roomcount-basket {
    justify-content: space-between;
    flex-direction: row;
    gap: 25px;
  }

  .roomcount-basket .rezinfoItem {
    margin-top: 0;
    width: 100% !important;
  }

  .comissionLabel {
    width: 95px;
    white-space: inherit;
  }

  .extraHeading {
    flex-direction: column;
    margin: 0;
  }

  .extraHeadingFilter {
    font-size: 12px;
  }
}

table th {
  background: #f3f3f3;
  border: 1px solid #ccc;
  padding: 5px;
}

.row {
  margin: 0;
}

.formItemP.readonly input {
  pointer-events: none;
  color: #a0a0a0;
}

.formItemP.readonly {
  color: silver;
}

.saveBtn {
  margin: 10px 0;
}

.flexMod {
  display: flex;
  align-items: center;
}

#pDescription {
  padding: 0 9px;
  border-radius: 5px;
}

main.main.newMain h2 {
  border: none;
  background: linear-gradient(45deg, #d9d9d9, transparent);
  padding: 0;
  color: #000;
  margin: 10px 0;
}

.formItemPTc {
  margin: 8px;
  text-align: center;
}

.formItemPTc input {
  width: 15px;
  height: 15px;
}

.formItemP {
  margin: 15px 8px;
  position: relative;
  border: 1px solid #e7e0e0;
  border-radius: 5px;
}

.grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}

.checkItem {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
}

.formItemP input {
  border: none;
}

/* ANA BONUS KART */
#promotionAndBonusArea {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 16px;
  padding: 8px 15px;
  border: 1px solid #eef2f7;
  max-width: 650px;
  margin: 5px 0;
  font-family: 'Inter', sans-serif;
}

#promotionAndBonusArea .bonusLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

#promotionAndBonusArea .bonusLabel i {
  background: #0ea5a4;
  color: #fff;
  padding: 8px;
  border-radius: 10px;
  font-size: 14px;
}

#promotionAndBonusArea .totalBonus > div:nth-child(2) {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

#promotionAndBonusArea .priceShower {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.5px;
}

#promotionAndBonusArea .fontPrice {
  font-size: 20px;
  font-weight: 600;
  margin-left: 6px;
  color: #0ea5a4;
}

#promotionAndBonusArea .promItem label {
  font-size: 13px;
  color: #6b7280;
}

#promotionAndBonusArea #bonusAmount {
  height: 45px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 0 16px;
  font-size: 16px;
  transition: all 0.2s ease;
  background: #fff;
}

#promotionAndBonusArea #bonusAmount:focus {
  outline: none;
  border-color: #0ea5a4;
  box-shadow: 0 0 0 4px rgba(14, 165, 164, 0.15);
}

#promotionAndBonusArea .bonusError {
  margin-top: 10px;
  font-size: 13px;
  color: #ef4444;
  font-weight: 500;
}

.BonusActions {
  display: flex;
  gap: 10px;
  margin: 10px 0px;
}

.bonusAprove {
  padding: 10px;
  width: fit-content;
  margin: 5px 0;
}

.secretCodeArea,
.bonusAproveArea {
  margin: 10px 0;
}

.bonusText {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

.error {
  color: red;
}

.formItemP label {
  position: absolute;
  top: -10px;
  margin-left: 10px;
  background: #fff;
  padding: 1px 8px;
}

.phoneArea span {
  display: initial;
}

.reasonItem {
  text-align: center;
  font-weight: 700;
  margin: 10px;
}

@media screen and (max-width: 860px) {
  .profileContent .inner-nav {
    width: 100%;
  }

  .profileContent .inner-nav li {
    width: 100%;
  }

  .profileContent .inner-nav li.active {
    width: 100%;
  }

  .inner-nav li.active a:after {
    display: none;
  }

  div#lastBasketsArea {
    overflow-y: auto;
  }

  div#lastBasketsArea table td {
    white-space: nowrap;
  }

  div#lastBasketsArea table th {
    white-space: nowrap;
  }
}

.disabledActions {
  opacity: 0.3;
  pointer-events: none;
}

span.count {
  background: #fff;
  width: 15px;
  padding: 0;
  margin: 0;
  height: 23px;
  line-height: 25px;
  padding: 0 0;
  width: 23px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  margin: 20px 7px;
  color: #000;
}

td.green {
  color: green;
}

.agencySelectArea {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.agencySelectArea label {
  padding: 0;
  width: 100%;
}

.agencySelectArea span.select2-selection.select2-selection--single {
  background: transparent;
  border: 1px solid #fff;
}

.agencySelectArea span#select2-chooseAgency-container,
.agencySelectArea span#select2-chooseHotel-container {
  color: #fff;
  line-height: 28px !important;
  width: 200px;
}

.agencySelectArea
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #fff;
}

.select2-dropdown {
  z-index: 1000000;
}

#chooseAgency option {
  color: #000;
}

.getCallRez {
  cursor: pointer;
  text-align: center;
}

#depositPaymentMessage {
  margin: 10px;
}

#loginUserForm label.error {
  display: none !important;
}

li.description a {
  text-align: center;
  padding: 8px;
}

.count-profile {
  display: none;
}

.createCallSimple {
  background: orange;
}

.selectGuestActions {
  display: flex;
  gap: 10px;
  justify-content: start;
  align-items: center;
}

.selectGuestActions i {
  cursor: pointer;
}

#wiredpayButtonArea .button {
  background: whitesmoke;
  padding: 20px;
  border-radius: 5px;
  display: block;
  border: 1px solid #dfdfdf;
  cursor: pointer;
  font-weight: 700;
}

#wiredpayButtonArea {
  display: flex;
  gap: 10px;
  height: 145px;
  align-items: center;
  flex-wrap: wrap;
}

#contentBoxSlider .lb-wrap,
#contentBoxSlider .lb-content,
#Gallery .lb-wrap,
#Gallery .lb-content {
  padding: 0;
  margin: 0 auto;
  border-radius: 0;
}

#Gallery .lb-wrap {
  top: 20%;
}

#contentBoxSlider .close,
#contentBoxSlider .close i,
#Gallery .close,
#Gallery .close i {
  background: transparent;
}

.group .slider {
  flex-direction: column !important;
}

.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slide {
  min-width: 100%;
  position: relative;
  width: 100% !important;
}

img.bg-img {
  z-index: -1;
  width: 100%;
  opacity: 0.5;
  object-fit: cover;
  filter: blur(10px);
  height: 100%;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* width: 100% !important; */
}

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

.slide img {
  width: 100%;
}

span.slideButton {
  background: #ffffffe8;
  color: black;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  z-index: 1;
}

.prevButton {
  left: 15px;
}

.nextButton {
  right: 15px;
}

.rezSearchIcon {
  position: absolute;
  right: 0;
  left: 0;
  width: fit-content;
  margin: auto;
  top: 40%;
  color: black;
  font-size: 20px;
  background: #ffffffd4;
  padding: 10px;
  cursor: pointer;
  display: none;
  border-radius: 50% !important;
  transition: 1s;
  z-index: 1;
}

.roomItemDetail:hover .rezSearchIcon {
  display: block;
}

.reservationOptions {
  display: flex !important;
  gap: 20px;
}

.offerOptions {
  max-height: 120px;
  max-width: 350px;
}

.resActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.options i {
  background: green;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.resActions .options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selectGuestActions .fa-basket-shopping {
  color: red;
  padding: 5px;
  border-radius: 3px;
}

.selectGuestActions i {
  padding: 5px;
}

.discountDetailArea {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.discountItem {
  background: #ffffff8f;
  display: flex;
  gap: 10px;
  margin: 3px 0;
  align-items: center;
  padding: 5px 10px;
  width: fit-content;
  box-shadow: 0px 0px 7px #d7d7d7;
  border-radius: 10px;
}

.discountItem .discountRate {
  font-size: 12px;
  height: auto;
  min-width: fit-content;
  padding: 0;
  margin: 0;
  padding: 5px;
}

.discountItem .discountName {
  min-width: 165px;
}

.manuelDiscountItemsArea .items {
  display: flex;
  gap: 5px;
  background: #fff;
  padding: 5px;
  margin: 1px 0;
  align-items: center;
}

.manuelDiscountArea {
  justify-content: space-between;
  margin: 10px 0;
  font-size: 20px;
  background: whitesmoke;
  padding: 5px;
  align-items: center;
  border-radius: 5px;
}

.actionsM {
  display: flex;
  gap: 5px;
  width: 100%;
  align-items: center;
}

.actionsM .cbutton {
  padding: 5px;
  width: auto;
}

.items label {
  min-width: 200px;
}

.rezinput textarea {
  height: 75px;
  padding-top: 15px;
}

.basicModeArea .rateTypeLabel {
  white-space: normal;
  width: 200px;
  height: auto;
}

.basicModeArea .addbasket {
  width: fit-content;
}

.basicMode {
  display: flex;
  gap: 5px;
  margin: 0 10px;
  font-weight: 700;
  text-decoration: underline;
  flex-wrap: wrap;
  width: 80p;
}

.basicModeArea .top-rateType {
  display: block;
}

.basicModeArea .top-rateType div {
  margin: 5px 0;
}

.basicItem {
  background: whitesmoke;
  padding: 3px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
  font-size: 12px;
  overflow: hidden;
  width: 150px;
}

.callMesssages {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

.chatComment.directionTrue {
  display: flex;
  justify-content: end;
}

.chatComment {
  display: flex;
  justify-content: start;
}

.chatComment.directionTrue span {
  background: #d9fdd3;
}

.chatComment span {
  border: 1px solid #d4cece;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
}

.kvkkAgrement {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0;
  width: 100%;
  margin-bottom: 15px;
}

.kvkkAgrement span {
  width: 100%;
}

.kvkkAgrement input {
  width: 20px;
}

.kvkkAgrement span:hover {
  text-decoration: underline;
  cursor: pointer;
}

label#kvkk-error {
  position: absolute;
  top: -10px;
}

#finallyButton {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.showBillArea {
  width: 100%;
}

.changeRezMod {
  margin: 10px 0;
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  background: #fff;
}

.changeRezMod button {
  color: inherit !important;
  background: #fff;
  border: none;
  border-bottom: 2px solid lightgrey;
  border-radius: 0;
  width: 100%;
  background: whitesmoke;
  border-radius: 5px;
  display: inline-block;
  height: auto;
  padding: 5px !important;
  font-weight: 600;
  letter-spacing: 1px;
}

.changeRezMod button.active {
  border-color: #000;
}

.buyLater {
  text-align: center;
  margin: 6px 0;
  background: var(--secondary);
  color: var(--secondary-contrast);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.buyLaterButtons {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  width: 100%;
}

.buyLaterButtons .cbutton {
  padding: 10px;
  width: 70%;
}

.buyLaterButtons .cbuttonCancel {
  width: 30%;
  background: #fff;
  border: 1.5px solid var(--gray-200, #e2e8f0);
  color: var(--gray-600, #475569);
}

.buyLaterButtons .cbuttonCancel:hover {
  border-color: var(--gray-400, #94a3b8);
  color: var(--gray-800, #1e293b);
}

/* ===================================================
   BUY LATER MODAL — redesign
   =================================================== */
#buyLaterForm .lb-wrap {
  width: 460px;
  max-width: 92%;
  left: 0;
  right: 0;
  top: 8%;
  padding: 26px 26px 22px;
}

#buyLaterFormValidation .buyLaterHeader {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
}

#buyLaterFormValidation .buyLaterHeaderIcon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100, #f1f5f9);
  color: var(--primary);
  font-size: 16px;
}

#buyLaterFormValidation .buyLaterHeaderText h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800, #1e293b);
}

#buyLaterFormValidation .buyLaterHeaderText p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-500, #64748b);
}

#buyLaterFormValidation .rezinput label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
  background: transparent;
  display: block;
  padding: 0;
  left: auto;
  z-index: auto;
}

#buyLaterFormValidation .rezinput input,
#buyLaterFormValidation .rezinput textarea {
  width: 100%;
  border: 1.5px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--gray-800, #1e293b);
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#buyLaterFormValidation .rezinput input {
  height: 42px;
}

#buyLaterFormValidation .rezinput textarea {
  padding: 10px 12px;
  resize: vertical;
}

#buyLaterFormValidation .rezinput input:focus,
#buyLaterFormValidation .rezinput textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

#buyLaterFormValidation .buyLaterButtons {
  margin: 8px 0 0;
}

#buyLaterFormValidation .buyLaterButtons .cbutton {
  gap: 8px;
  height: 44px;
}

@media (max-width: 480px) {
  #buyLaterForm .lb-wrap {
    width: 94%;
    top: 5%;
    padding: 20px 16px 18px;
  }

  #buyLaterFormValidation .buyLaterButtons {
    flex-direction: column;
  }

  #buyLaterFormValidation .buyLaterButtons .cbutton,
  #buyLaterFormValidation .buyLaterButtons .cbuttonCancel {
    width: 100%;
  }
}

.basketListDiscounItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  margin: 3px 4px 3px 0;
  width: fit-content;
}

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

.promotionInput input {
  width: fit-content !important;
}

#promotionError p {
  padding: 5px 5px;
}

.promotionItem input {
  border: 1px solid #dcdada;
}

.promotionItem button {
  border-radius: 5px;
  border: none;
  background: var(--secondary) !important;
  color: var(--secondary-contrast) !important;
}

.head-info {
  display: flex;
  justify-content: space-between;
}

.hotel-map {
  cursor: pointer;
  width: 125px;
  display: flex;
}

.showMap {
  width: 100%;
  height: 90px;
  border: solid 4px #fdf4cc;
  position: relative;
}

.showMap > img {
  width: 100%;
  height: 82px;
}

.showMap > span {
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
  font-size: 12px;
  width: 100%;
  text-align: center;
  font-weight: 600;
  bottom: 0;
  line-height: 14px;
}

.mapText {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}

.hotel-con {
  padding: 0 15px;
}

.hotel-con h1 {
  padding: 0;
  text-shadow: 1px 1px 13px white;
}

.socials {
  display: flex;
}

.socials > div:last-child > a {
  margin-right: 0;
}

.socials > div:last-child > a > i {
  margin-right: 0;
}

.hotel-contact {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.hotel-contact .socials i {
  font-size: 20px;
  width: auto;
  background: none;
  color: var(--primary);
  margin: 0;
}

.hotel-contact .socials a {
  margin-right: 0;
}

.hotel-contact a span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-contact .socials {
  background: none;
  border: none;
}

.hotel-contact a {
  /* padding: 0; */
  display: flex;
  align-items: center;
  gap: 5px;
  color: #000;
  margin-right: 10px;
  background: linear-gradient(45deg, #ffffff, transparent);
}

.hotel-contact > div {
  margin-bottom: 3px;
  background: whitesmoke;
  border-radius: 20px 5px 5px 20px;
  border: 1px solid #e0e0e0;
  width: 49%;
}

.hotel-contact a > i {
  font-size: 15px;
  margin-right: 5px;
  color: #9f9f9f;
  background: var(--primary);
  padding: 6px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  color: white;
  line-height: 20px;
}

.hotel-info-def-facility .item {
  border: 1px solid #dedede;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  border-radius: 5px;
  padding: 5px;
}

.hotel-info-def-facility .item > i {
  font-size: 16px;
  margin-right: 5px;
}

.hotel-info-def-facility {
  display: flex;
  width: 100%;
  justify-content: start;
  margin-top: 15px;
  gap: 5px;
}

.photoContent .defPhotoCon {
  height: 380px;
}

ul#imageGallery img {
  max-height: 380px;
}

img.defaultPhoto {
  height: 100%;
  width: 100%;
}

.photoContent {
  width: 100%;
}

.hotel-info {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}

.hotel-info .InfoItem {
  position: relative;
  width: 50%;
}

.carbon-free {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 60px;
  height: 60px;
  z-index: 10000;
}

.carbon-free > img {
  width: 100%;
}

.hotel-desc-wrap {
  position: relative;
  z-index: 0;
  margin-top: 26px;
  width: 100%;
}

.hotel-desc-wrap::before {
  content: '\201C';
  position: absolute;
  top: -18px;
  left: 2px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 56px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.hotel-desc,
.hotel-desc-new {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 16px 18px 14px 22px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
  line-height: 1.7;
  font-size: 0.95rem;
  color: #363636;
}

.hotel-desc * {
  padding: 0px;
}

.hotel-desc-wrap.is-truncated .hotel-desc {
  max-height: 108px;
  overflow: hidden;
}

.hotel-desc-wrap.is-truncated::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 60px;
  z-index: 1;
  border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 65%
  );
  pointer-events: none;
}

.hotel-desc-new {
  font-size: 0.95rem;
  line-height: 1.7;
  overflow: hidden;
  max-height: max-content;
}

@media (max-width: 480px) {
  .hotel-desc-wrap::before {
    font-size: 42px;
    top: -14px;
  }
}

.tripAdvisorRating {
  position: absolute;
  bottom: 110px;
  left: 5px;
  z-index: 10000;
}

.tripAdvisorRating iframe {
  width: 170px;
  height: 109px;
  border-radius: 8px;
}

.reviews-heading svg {
  width: 28px;
  height: auto;
}

.reviews-heading i {
  font-size: 28px;
  width: 38px;
}

.facilityContainer {
  margin: 10px 0px !important;
  display: inline-block;
}

.nightPrice {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
  color: #888;
  margin-top: 2px;
}

.roomPriceContent .roomPriceCon {
  color: #212121;
}

.roomPriceContent .roompricenodiscount .roomPriceCon {
  color: #2121219e;
}

.lastRoomWarning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c96a00;
  background: transparent;
  border: 1px solid #e8940040;
  background: #fff8ee;
  padding: 4px 12px;
  width: fit-content;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 0;
}

.bestPriceIn {
  margin: 5px 0;
  font-size: 18px;
  background: var(--primary);
  color: white;
  padding: 5px;
  display: block;
  width: fit-content;
  border-radius: 5px;
  font-size: 12px;
}

@media (max-width: 720px) {
  span.slideButton {
    background: #ffffffb5;
    padding: 5px 10px;
  }

  .tripAdvisorRating {
    top: -31px;
    left: -22px;
    transform: scale(0.7);
  }

  #extraServiceButton {
    width: 90%;
    max-width: 250px;
  }

  .nightPrice {
    text-align: right;
    margin-right: 0;
  }

  .hotel-info .InfoItem {
    width: 100%;
  }

  .hotel-con {
    padding: 0;
    margin: 20px 0;
  }
}

.extraServiceMessage {
  text-align: center;
  font-size: 18px;
  padding: 10px;
  border-radius: 5px;
}

.extraServiceSearchArea {
  display: flex;
  align-items: center;
  width: fit-content;
  border-bottom: 1px solid #000;
}

.extraServiceSearchArea input {
  border: none;
}

.extraServiceSearchArea #changeHotel {
  border: none !important;
}

.clickToCallRez {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #f44336;
  font-weight: 500;
  font-size: 13px;
}

.clickToCallRez > i {
  font-size: 22px;
}

.clickToCallRez > span {
  text-decoration: underline;
  margin-left: 5px;
}

.buyLaterFinal {
  background: var(--secondary);
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  justify-content: center;
  margin: 0 10px;
  cursor: pointer;
  padding: 10px;
  font-size: 14px;
}

.detail-stars i {
  color: var(--primary);
  font-size: 18px;
}

.detail-addres {
  font-weight: 500;
  margin: 10px 0;
}

.cancelPromotion {
  cursor: pointer;
  width: 100%;
  text-align: center;
  width: fit-content;
  margin: auto;
  background: var(--primary) !important;
  color: var(--primary-contrast);
}

.themeMod .comission {
  display: flex;
  justify-content: end;
  position: relative;
}

.themeMod .roomPriceCon {
  display: flex;
  justify-content: end;
}

.themeMod .roomprice {
  justify-content: end;
  flex-wrap: wrap;
  display: grid;
  text-align: end;
  color: var(--secondary);
  font-size: 24px;
  margin: 2px 0;
  line-height: 35px;
  align-items: flex-end;
  gap: 0;
}

.themeMod .roompricenodiscount {
  font-size: 20px;
}

.themeMod .roomBasketArea {
  justify-content: end;
  display: flex;
  flex-wrap: wrap;
}

.themeMod .roomBasketArea > * {
  width: 100%;
}

.themeMod .roomBasketArea > * {
  margin: 3px 0;
}

.themeMod .boardType {
  text-align: center;
  font-weight: 700;
  margin: 5px 0 5px !important;
}

.themeMod .standartDiscount > * {
  width: fit-content;
  white-space: nowrap;
}

.showOtherBoard {
  text-align: center;
  cursor: pointer;
  justify-content: center;
}
.themeModBoardsArea .addbasket {
  min-width: 125px !important;
}

.themeModBar * {
  color: inherit !important;
}

.themeModBar .listAmenities i {
  border: none;
}

.themeModBar {
  display: flex;
  gap: 15px;
}

.themeModBar {
  align-items: center;
  border: 1px solid #d0d0d0;
  padding: 5px;
  border-radius: 5px;
  height: 50px;
  width: fit-content;
  margin: 10px 0 10px 0;
}

.themeModBar svg {
  height: 20px;
  width: 8px;
}

.themeMod .rezimg {
  height: 305px;
  border-radius: 5px;
  margin-top: 0;
}

/* .themeMod .nightPrice {
    margin: 10px 0;
} */

.roomText ul li {
  list-style: disc;
  padding: 0;
  margin-left: 20px;
}

.themeMod .roomText p {
  padding: 0;
  line-height: 18px;
}

.themeMod .roomText {
  max-height: 180px;
}

.makeReservation {
  font-size: 14px !important;
  font-weight: 600;
}

.classicSearchBox .rezinfoItem {
  border-width: 1px;
  border-radius: 5px;
}

.classicSearchBox .pickerArea span:first-child {
  border-top-width: 1px;
  border-left-width: 1px;
  border-radius: 5px 0 0 5px;
}

.classicSearchBox .pickerArea span:last-child {
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-radius: 0 5px 5px 0;
}

.bottomLeftTopContent {
  display: flex;
}

@media (min-width: 921px) {
  .themeMod {
    display: flex;
    justify-content: end;
    height: 100%;
  }
}

@media (max-width: 720px) {
  .bottomLeftContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .bottomLeftTopContent {
    width: 100%;
    justify-content: space-between;
  }

  .bottomLeftBottomLinks {
    margin-bottom: 15px;
    justify-content: space-around;
  }

  /*     .themeMod .rezimg {
        max-height: 160px;
    } */
  .themeMod .addbasket {
    min-width: 50%;
  }

  #showbasketItems {
    margin-left: 0;
  }

  .reservationArea {
    padding: 0;
  }

  .makeReservation {
    width: 100%;
  }

  .buyLaterFinal {
    width: 40%;
    margin: 0;
    white-space: nowrap;
  }

  .hotel-info-def-facility {
    flex-direction: column;
  }

  .hotel-info-def-facility .item {
    width: 100%;
  }

  .roomText {
    margin: 0;
  }

  .roomItemDetail div.row {
    padding: 0;
  }

  .groupPageWidget {
    margin-top: inherit;
  }

  .groupPageWidget .rezinfoItem {
    border-color: #000;
  }

  .groupPageWidget .rezinfo {
    border-radius: 0;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow:
      0 3px 3px -2px #0003,
      0 3px 4px #00000024,
      0 1px 8px #0000001f !important;
    margin-top: 0;
    padding: 10px 15px;
  }

  .groupPageWidget .hotelItemIn {
    margin: 0;
  }

  .period-in-days {
    white-space: normal;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .sectionInfo {
    justify-content: center;
  }

  .groupPageWidget #rezpicker i {
    color: #000;
  }

  .groupPageWidget .rezinfoItem span {
    color: #000;
    text-shadow: none;
  }

  .groupPageWidget .inputReset {
    color: #000;
    text-shadow: none;
  }

  .addbasket {
    width: 50%;
  }

  .addToBasketCon {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .rezinfoItemRoom {
    flex-shrink: 0;
  }

  .mobileadd {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 125px;
    margin-top: 20px;
  }

  .rezSec {
    padding: 12px;
    margin-bottom: 5px;
    width: 100%;
    box-sizing: border-box;
  }

  .boardTypeContent .rezSec:last-child {
    border-bottom: none;
  }

  .mobilePriceRow {
    flex-direction: row;
    align-items: center;
  }

  .priceTopBar {
    padding: 12px;
  }

  .boardTypeHeader {
    flex-wrap: wrap;
    gap: 6px;
  }

  .priceRightSection {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .pricebar {
    flex-direction: column;
    align-items: flex-start;
  }

  .priceRightSection {
    width: 100%;
    justify-content: space-between;
  }
}

/*Best Room — Modern */
.bestRoomSection.row {
  display: flex;
  flex-wrap: wrap;
}

.BestRoomItem {
  display: flex;
  margin-bottom: 16px;
}

.BestRoomItemSec .bHotelInfo {
  width: 100%;
  display: flex;
  justify-content: end;
}

.bestPriceSelectAllList {
  font-weight: 700;
  align-items: center;
  display: flex;
  padding: 14px 18px;
  justify-content: space-between;
  font-size: 15px;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}

.bestCombinationGroup {
  margin-bottom: 28px;
}

.bestCombinationGroup:last-child {
  margin-bottom: 0;
}

.bestOfferNotice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8ecf0;
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 16px 20px;
  margin: 0 0 20px;
}

.bestOfferNoticeIcon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  font-size: 16px;
}

.bestOfferNoticeBody {
  flex: 1;
  min-width: 0;
}

.bestOfferNoticeBody .roomMessage {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  text-align: left;
}

.bestOfferSearchSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bestOfferSearchSummary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f5f7;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
}

.bestOfferSearchSummary span i {
  color: var(--primary);
}

@media (max-width: 768px) {
  .bestOfferNotice {
    flex-direction: column;
    align-items: flex-start;
  }
}

.BestRoomItemSec,
.BestRoomItemSecond {
  background: #fff !important;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e8ecf0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.BestRoomItemSecond {
  width: 100%;
}

.BestRoomItemSecond:hover,
.BestRoomItemSec:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
  transform: translateY(-3px);
}

.BestRoomItemSec > .item {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 0;
}

.bestPriceAra {
  display: flex;
  gap: 5px;
  align-items: center;
}

.bHotelInfo {
  display: flex;
  gap: 15px;
  align-items: center;
}

.roomName {
  font-weight: 700;
  font-size: 15px;
}

.m4 {
  margin: 0;
}

.BestRoomItemSecond .roomItemDetail,
.BestRoomItemSec .roomItemDetail {
  margin: 0 !important;
  padding: 0 !important;
}

.BestRoomItemSecond .rezimg,
.BestRoomItemSec .rezimg {
  height: 190px;
  margin-top: 0;
}

.BestRoomItemSecond > .col-md-12.col-xs-12:last-child,
.BestRoomItemSec .item > .col-md-12.col-xs-12:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}

.BestRoomItemSecond .roomname,
.BestRoomItemSec .roomname {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

.BestRoomItemSecond .showDescIconBest,
.BestRoomItemSec .showDescIconBest {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  border-radius: 50%;
}

.BestRoomItemInner {
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  width: 100%;
  padding: 0;
  min-height: auto;
  align-items: center;
}

.BestRoomItemInner > span {
  border: none;
  background: #f1f5f9;
  color: #475569;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.BestRoomItemInner > span i {
  color: var(--primary);
  margin-right: 3px;
}

.BestRoomItem .discountRate:before,
.BestRoomItem .discountRate:after {
  visibility: hidden;
}

.BestRoomItemSecond .bHotelInfo,
.BestRoomItemSec .bHotelInfo {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed #eef1f4;
}

.BestRoomItemSecond .roomprice,
.BestRoomItemSec .roomprice {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

.bestItemSelectAllButton {
  gap: 8px;
  width: fit-content;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 14px;
}

.bestItemSelectAllButton i {
  background: rgba(255, 255, 255, 0.25);
  padding: 5px;
  color: inherit;
  width: 26px;
  height: 26px;
  line-height: 16px;
  border-radius: 50%;
}

.priceParams {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.priceParams .roomPriceCon {
  color: var(--primary);
}

@media (max-width: 768px) {
  .BestRoomItemSecond .rezimg,
  .BestRoomItemSec .rezimg {
    height: 200px;
  }

  .bestPriceSelectAllList {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
/*Best Room End */
/*UpRoom — Modern */
.upRoomItem {
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8ecf0;
  margin: 12px 0;
  background: #fff;
  transition: box-shadow 0.2s ease;
}

.upRoomItem:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
}

.upRoomItem-imgWrap {
  position: relative;
  flex: 0 0 200px;
  min-height: 160px;
  overflow: hidden;
}

.upRoomItem-imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.upRoomItem-imgBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
  pointer-events: none;
}

.upRoomItem-content {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.upRoomItem-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.upRoomItem-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

.upRoomItem-infoBtn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  border: none;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.15s;
}

.upRoomItem-infoBtn:hover {
  opacity: 0.82;
}

.upRoomItem-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.upRoomItem-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.upRoomItem-tags span {
  background: #f1f5f9;
  color: #475569;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}

.upRoomItem-action {
  flex: 0 0 160px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-left: 1px solid #f1f5f9;
  background: #fafbfc;
}

.upRoomItem-priceBox {
  text-align: center;
}

.upRoomItem-priceDiff {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.upRoomItem-perNight {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

.UpButtons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}

.UpButtons * {
  cursor: pointer;
}

.UpRoom {
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.18s ease;
  width: 100%;
  box-sizing: border-box;
}

.UpRoom:hover {
  opacity: 0.88;
}

.UpRoomCancel {
  text-decoration: underline;
  padding: 4px;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}

.uproomModal {
  font-size: 15px;
  margin: 10px 0;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: break-spaces;
  line-height: 20px;
}

@media (max-width: 768px) {
  .upRoomItem {
    flex-direction: column;
  }

  .upRoomItem-imgWrap {
    flex: 0 0 auto;
    height: 170px;
    min-height: unset;
  }

  .upRoomItem-action {
    border-left: none;
    border-top: 1px solid #f1f5f9;
    flex-direction: row;
    flex: 0 0 auto;
    padding: 14px 16px;
  }

  .upRoomItem-priceBox {
    flex: 1;
    text-align: left;
  }

  .UpButtons {
    flex-direction: row;
    width: auto;
    gap: 10px;
  }

  .UpRoom {
    width: auto;
    white-space: nowrap;
  }
}

/*Uproom End*/
/*Multi Search*/
.offerCount {
  background: #ffd78d;
  border-radius: 25px;
  margin: 5px 0px;
  width: fit-content;
  padding: 5px 45px;
  color: black;
}

.chooseAreaIn {
  flex-wrap: wrap;
}

.guestAreaInnerHtml .rezinfoItem {
  height: auto;
}

.buttonChoose {
  display: flex;
  align-items: center;
  background: #f4f6f8;
  border-radius: 50px;
  padding: 5px;
  gap: 8px;
  margin: 15px 0px;
}

.buttonChoose button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: black !important;
  display: flex;
  justify-content: center;
}

.buttonChoose button:hover {
  background: #e2f0ff;
  color: #fff;
  transform: scale(1.05);
}

.buttonChoose select {
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  appearance: none;
}

.guestAreaInnerHtml .rezinfoItem {
  border: none;
}

.otherromoptions {
  text-align: center;
  background: #ffbb00;
  border-radius: 26px;
  color: black;
  padding: 5px;
  cursor: pointer;
}

.shortcouts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shortcouts .otherromoptions {
  background: #ffd78d;
  padding: 5px 10px;
}

.searchInfo {
  padding: 10px;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  white-space: nowrap;
  width: 100%;
  overflow: auto;
  gap: 5px;
  align-items: center;
}

.searchInfo span {
  background: var(--primary);
  color: var(--primary-contrast);
  padding: 3px 30px;
  border: 1px solid #ebebeb;
  display: inline-block;
  border-radius: 40px;
  font-weight: 700;
  min-width: 190px;
  text-align: center;
}

.barArea {
  display: flex;
  justify-content: center;
  width: 100%;
}

.barArea > * {
  width: 50%;
  text-align: center;
  margin: auto;
  cursor: pointer;
}

.ChoosesArea .item {
  display: flex;
  gap: 15px;
  background: #ffbb00;
  align-items: center;
  color: black;
  padding: 5px 20px;
  font-size: 20px;
  border-radius: 40px;
  font-weight: 500;
  cursor: pointer;
}

.ChoosesArea {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
}

/*Multi Search End* / 


/*HotelInfo Popup */
#showPopup .lb-content {
  margin: 0;
}

.room-badges {
  display: flex;
  gap: 5px;
}

.RoomInfoPopup .roomname {
  font-size: 28px;
}

.RoomInfoPopup {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}

.RoomInfoPopup .roomPopupGrid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.RoomInfoPopup .popupColGallery {
  flex: 1 1 60%;
  max-width: 60%;
  min-width: 0;
}

.RoomInfoPopup .popupColSummary {
  flex: 1 1 38%;
  max-width: 38%;
  min-width: 0;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  width: 100%;
}

.RoomInfoPopup .roomPopupRatesArea {
  margin-top: 20px;
}

/* Resim slider */
.roomTypeDetailSliderArea {
  width: 100%;
  position: relative;
}

.RoomInfoPopup .roomTypeDetailSliderArea img.rezimg {
  max-height: 450px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 0;
}

.RoomInfoPopup .roomTypeDetailSliderArea i.left:hover,
.RoomInfoPopup .roomTypeDetailSliderArea i.right:hover {
  background: #007bff;
  color: #fff;
}

.roomTypeDetailSliderArea i.left {
  left: 10px;
}

.roomTypeDetailSliderArea i.right {
  right: 10px;
}

/*  (label) */
.RoomInfoPopup label {
  font-weight: 400;
  font-size: 16px;
  display: block;
  position: relative;
  padding-bottom: 4px;
  color: #666666;
  margin: 20px 0px;
}

/*  listesi */
.RoomInfoPopup .listAmenitiesItem {
  background: #f9fafb;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.RoomInfoPopup .detailAmenitiesArea {
  margin: 15px 0;
}

.RoomInfoPopup .innerAmenities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.RoomInfoPopup .listAmenitiesItem:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
}

.RoomInfoPopup .listAmenitiesItem i {
}

.RoomInfoPopup .listAmenitiesItem span {
  font-size: 12px;
  font-weight: 300;
  color: #444;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  height: 14px;
  line-height: 10px;
}

.RoomInfoPopup .roomprop {
  background: #f4f6f8;
  padding: 5px 15px;
  border-radius: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.roompopDesc {
  line-height: 1.6;
  color: #555;
  margin-bottom: 25px;
}

.roompopDesc.roomDescCollapsed {
  max-height: 160px;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}

.roompopDesc.roomDescCollapsed:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.roomDescToggle {
  display: inline-block;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
}

.roomDescToggle:hover {
  text-decoration: underline;
}

.rezimg.loadingImg {
  filter: blur(4px);
  opacity: 0.6;
}

.roomprop i {
  font-size: 26px;
  width: 30px;
  margin: 5px 0;
  text-align: center;
}

.roomprop svg {
  width: 30px;
}

.RoomInfoPopup .listAmenitiesItem {
  width: 54px;
  height: 54px;
  padding: 0;
  justify-content: center;
  flex-direction: column;
}

.RoomInfoPopup .listAmenitiesItem i {
  font-size: 18px;
}

.RoomInfoPopup .listAmenitiesItem span {
  display: none;
}

.RoomInfoPopup .roomThumbList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.RoomInfoPopup .roomThumbList .roomThumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
}

.RoomInfoPopup .roomThumbList .roomThumb:hover {
  opacity: 0.85;
}

.RoomInfoPopup .roomThumbList .roomThumb.active {
  opacity: 1;
  border-color: var(--primary);
}

.RoomInfoPopup .roomBookingPanel {
  background: #f9fafb;
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
}

.RoomInfoPopup .roomBookingPanel label {
  margin: 0 0 4px 0;
}

.RoomInfoPopup .bookingPanelTotal {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.RoomInfoPopup .bookingPanelRow {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #e6e6e6;
  font-size: 14px;
}

.RoomInfoPopup .bookingPanelBtn {
  margin-top: 15px;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.RoomInfoPopup .bookingPanelBtn:hover {
  opacity: 0.9;
}

.RoomInfoPopup .bookingPanelBtn.disabled {
  background: #ccc;
  color: #777;
  cursor: not-allowed;
}

.RoomInfoPopup .bookingPanelBtn.disabled:hover {
  opacity: 1;
}

.RoomInfoPopup .ratePackageBoardGroup {
  margin-top: 15px;
}

.RoomInfoPopup .ratePackageBoardTitle {
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.RoomInfoPopup .ratePackageList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.RoomInfoPopup .ratePackageItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 15px 20px;
}

.RoomInfoPopup .ratePackageItem:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.RoomInfoPopup .ratePackageItem.ratePackageUnavailable {
  opacity: 0.55;
}

.RoomInfoPopup .ratePackageItem.ratePackageUnavailable .ratePackageLabel {
  cursor: not-allowed;
}

.RoomInfoPopup .ratePackageUnavailableBadge {
  background: #f1f1f1;
  color: #888;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.RoomInfoPopup .ratePackageLabel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  flex: 0 0 260px;
  max-width: 260px;
}

.RoomInfoPopup .ratePackageLabel input[type='radio'] {
  margin-top: 4px;
  flex-shrink: 0;
}

.RoomInfoPopup .ratePackageTitleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.RoomInfoPopup .ratePackageTitle {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}

.RoomInfoPopup .ratePackageDiscountBadge {
  background: #fde8f0;
  color: #d6336c;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.RoomInfoPopup .ratePackageDesc {
  font-size: 12px;
  color: #777;
  margin: 6px 0 0;
}

.RoomInfoPopup .ratePackageDaily {
  display: flex;
  gap: 0;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

.RoomInfoPopup .ratePackageDayItem {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 15px;
  border-right: 1px solid #eee;
}

.RoomInfoPopup .ratePackageDayItem:last-child {
  border-right: none;
}

.RoomInfoPopup .ratePackageDayDate {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}

.RoomInfoPopup .ratePackageDayPrice {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.RoomInfoPopup .ratePackageRight {
  flex: 0 0 140px;
  max-width: 140px;
  text-align: right;
}

.RoomInfoPopup .ratePackageTotal {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.RoomInfoPopup .ratePackageOriginal {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .RoomInfoPopup .roomThumbList .roomThumb {
    width: 50px;
    height: 50px;
  }

  .RoomInfoPopup .roomBookingPanel {
    margin: 15px 0;
  }

  .RoomInfoPopup .ratePackageItem {
    align-items: center;
    gap: 10px;
  }

  .RoomInfoPopup .ratePackageLabel {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .RoomInfoPopup .ratePackageDaily {
    display: none;
  }

  .RoomInfoPopup .ratePackageRight {
    flex: 0 0 auto;
    max-width: none;
    margin-left: auto;
    text-align: right;
  }
}

#showPopup .lb-wrap {
  width: fit-content;
  max-width: 1200px;
  min-width: 1200px;
}

.roomDesc {
  cursor: pointer;
}

/* Mobil uyumluluk */
@media (min-width: 768px) and (max-width: 1200px) {
  #showPopup .lb-wrap {
    min-width: 768px;
  }

  .rooms.col-md-8 label.extraLabel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #showPopup .lb-wrap {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    min-width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0 !important;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #showPopup .lb-content {
    max-height: none;
    margin-top: 0;
    padding-top: 70px;
    box-sizing: border-box;
    min-height: 100%;
  }

  #showPopup .close {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  .RoomInfoPopup .roomPopupGrid {
    flex-direction: column;
  }

  .RoomInfoPopup .popupColGallery,
  .RoomInfoPopup .popupColSummary {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .RoomInfoPopup .popupColGallery {
    padding: 0 15px;
    width: 100%;
  }

  .RoomInfoPopup .popupColSummary {
    box-shadow: none;
    border-radius: 0;
    padding: 0 15px;
  }

  .RoomInfoPopup .roomPopupRatesArea {
    padding: 0 15px 20px;
  }
}

/*hotelInfo Popup End */
/*Other Hotels */
.hotel-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.25s ease;
  height: 100%;
  margin: 8px;
}

.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.img-wrap img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.card-body {
  padding: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hotel-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}

.room-type,
.rate-type {
  font-size: 13px;
  color: #6c757d;
}

.price {
  font-size: 18px;
  font-weight: 700;
  margin-top: 6px;
}

.price.old {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}

.price.discounted {
  color: #e63946;
}

.discount-badge {
  position: absolute;
  top: -12px;
  right: 12px;
  background: #e63946;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 600;
}

.btn-book {
  margin-top: 10px;
  background: var(--secondary);
  color: var(--secondary-contrast);
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
}

.btn-book:hover {
  background: #163fa3;
  color: #fff;
}

.roomheading {
  text-align: center;
  margin: 25px 7px;
  font-size: 20px;
  border-radius: 10px;
  padding: 5px;
}

/* Other Hotels */
#showbasketItems.fixed {
  position: fixed;
  top: 60px;
  z-index: 1000;
  min-width: 445px;
  max-width: 445px;
}

/* getVoucherPriceHtml - basket item */
.basketGetVoucherPriceHtml {
  margin: 15px 0;
}

.basketGetVoucherPriceHtml * {
  flex-wrap: wrap;
}

.paymentInfoBox {
  margin-top: 12px;
  border: 1px solid #d9e2f2;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f9ff;
}

.paymentInfoHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #eaf3ff;
  color: #003b95;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #d9e2f2;
}

.paymentInfoContent {
  padding: 14px;
}

.paymentInfoRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

#voucherInner .paymentInfoRow {
  justify-content: inherit;
}

.paymentInfoRow .label {
  color: #555;
  font-size: 14px;
}

.paymentInfoRow .amount {
  font-size: 22px;
  font-weight: 700;
  color: #222;
}

.paymentInfoRow .rate {
  font-size: 16px;
  font-weight: 600;
  color: #003b95;
}

.paymentInfoNotice {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #d9e2f2;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}

/* getVoucherPriceHtml */
/* ===================================================
   EXTRA SERVICE AREA — REDESIGN
   =================================================== */
/* Grid layout for service cards */
.extraTab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 12px 0;
}

@media (max-width: 576px) {
  .extraTab {
    grid-template-columns: 1fr;
  }
}

/* Card */
.extraItem {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius-lg, 12px);
  border: 1.5px solid var(--gray-200, #e2e8f0);
  box-shadow: var(--shadow, 0 4px 8px rgba(0, 0, 0, 0.06));
  overflow: hidden;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.extraItem:hover {
  box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.1));
  transform: translateY(-3px);
}

/* Inside card: stack image → content → price */
.extraDescriptionArea {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: visible;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.extraDescriptionArea img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Title */
.selectExtraItem {
  padding: 12px 14px 4px;
  width: 100%;
}

.selectExtraItem span {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800, #1e293b);
  line-height: 1.4;
  margin: 0;
}

/* Description text */
span.room-desc {
  display: block;
  padding: 0 14px 4px;
  font-size: 12px;
  color: var(--gray-500, #64748b);
  line-height: 1.6;
}

.extraMore {
  display: block;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin: 10px;
}

/* Available days chips */
.available-days {
  padding: 4px 14px;
}

/* Pricing zone */
.extraFieldArea {
  width: 100%;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--gray-100, #f1f5f9);
  margin-top: auto;
}

.extraItemPriceArea {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 0;
  border-radius: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

label.extraLabel {
  font-size: 11px;
  font-weight: 600;
  background: var(--gray-100, #f1f5f9);
  border: 1px solid var(--gray-200, #e2e8f0);
  color: var(--gray-600, #475569);
  padding: 3px 8px;
  height: auto;
  min-width: 60px;
  line-height: 20px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
}

/* Minus / Plus buttons */
.minusBtn,
.plusBtn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50% !important;
  background: var(--gray-800, #1e293b) !important;
  color: white !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0 !important;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.minusBtn:hover,
.plusBtn:hover {
  background: var(--primary, #7a6c3a) !important;
}

/* Quantity select dropdown */
.extraServiceItems {
  width: 72px !important;
  height: 32px;
  border: 1.5px solid var(--gray-200, #e2e8f0) !important;
  border-radius: var(--radius, 8px);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800, #1e293b);
  background: white;
  text-align: center;
  text-align-last: center;
  padding: 0 4px;
}

/* Unit price */
.extraItemPrice {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800, #1e293b);
  padding: 0;
  width: auto;
  min-width: 55px;
  text-align: right;
}

/* Total line */
.totalExtraItem {
  float: none;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  color: var(--gray-700, #334155);
  border-top: 1px dashed var(--gray-200, #e2e8f0);
  padding: 8px 0 0;
  margin-top: 6px;
}

/* Question area */
.questionLabel {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px 2px;
  color: var(--gray-700, #334155);
  display: block;
  margin: 0;
}

.questionArea {
  padding: 0 14px 10px;
}

.questionArea input {
  width: 100%;
  border: 1.5px solid var(--gray-200, #e2e8f0);
  border-radius: var(--radius, 8px);
  padding: 6px 10px;
  font-size: 13px;
}

/* --- TAB NAVIGATION (pill style) --- */
li.tabOpen {
  background: var(--gray-100, #f1f5f9);
  border: 1.5px solid transparent;
  border-radius: 9999px !important;
  padding: 6px 18px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600, #475569);
  min-width: auto;
  transition: all 0.2s ease;
}

li.tabOpen:hover {
  background: var(--gray-200, #e2e8f0) !important;
  color: var(--gray-800, #1e293b) !important;
}

li.tabOpen.active {
  background: var(--primary, #7a6c3a) !important;
  border-color: var(--primary, #7a6c3a);
  color: white !important;
  border-bottom: none !important;
}

/* --- HEADING --- */
.extraHeading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--gray-800, #1e293b);
  background: white;
  padding: 16px 20px;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.extraHeadingFilter {
  font-size: 13px;
  font-weight: 400;
}

/* --- CONTINUE BUTTON --- */
.extraServiceButtonArea {
  text-align: right;
  padding: 16px 0 4px;
  border-top: 1px solid var(--gray-200, #e2e8f0);
  margin-top: 16px;
  width: 100%;
}

#extraServiceButton {
  background: var(--primary) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 10px 32px !important;
  font-size: 15px !important;
  font-weight: 600;
  height: auto !important;
  margin: 0 !important;
}

/* No items message */
.extraServiceMessage {
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .extraHeading {
    font-size: 16px;
    padding: 12px 14px;
  }

  .extraServiceButtonArea {
    text-align: center;
  }

  #extraServiceButton {
    width: 100%;
    max-width: 100% !important;
  }
}

/* ===================================================
   BASKET SUMMARY PANEL — REDESIGN
   =================================================== */
/* Container */
#showbasketItems {
  background: transparent;
  border: none !important;
  padding: 0;
  margin: 0 0 0 10px;
}

/* Book Later button */
.buyLater {
  background: var(--secondary);
  color: var(--secondary-contrast, #fff);
  border-radius: 9999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Action buttons area */
.basketButtons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.basketButtons .deleteRez {
  background: white !important;
  border: 1.5px solid var(--gray-200, #e2e8f0) !important;
  color: var(--gray-600, #475569) !important;
  border-radius: 9999px !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: auto;
  margin: 0;
}

.basketButtons .deleteRez:hover {
  background: var(--gray-100, #f1f5f9) !important;
}

/* Room/Service card */
.basketContainer {
  background: white;
  border: 1.5px solid var(--gray-200, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 0;
  margin: 0 0 10px 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
}

/* Card header */
.basketTopSide {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
}

.basketItemBasicInfo .mat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.basketItemBasicInfo .mat-content > .mat-expansion-panel-header-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  flex: 1;
}

.roomnameBasket {
  font-weight: 500;
  font-size: 20px;
  color: var(--gray-800, #1e293b);
  width: auto;
}

.basketActions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.basketItemBasicInfo .mat-content button {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--gray-600, #475569) !important;
  border: none;
  cursor: pointer;
  min-width: unset;
}

button.mat-focus-indicator.mat-flat-button.mat-button-base.mat-warn {
  background: var(--gray-100, #f1f5f9) !important;
}

.deleteBasketItem {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  background: var(--color-red, #ef4444) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
  flex-shrink: 0 !important;
}

.deleteBasketItem:hover {
  opacity: 0.82 !important;
}

.deleteBasketIcon {
  background: transparent !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: inline !important;
  font-size: 11px !important;
  padding: 0 !important;
}

/* Card body */
.basketItem {
  display: flex;
  flex-direction: column;
}

/* Image → full width on top */
.basketItem .bHotelInfo {
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.basketItem .bHotelInfo .roomImg {
  width: 100%;
  height: 150px;
}

.basketItem .bHotelInfo .roomImg img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Check-in / Check-out side by side below image */
.basketItem .checkInOut {
  display: flex !important;
  width: 100% !important;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
}

.basketItem .checkInOut .checkInfo {
  flex: 1;
  background: var(--gray-50, #f8fafc);
  border-radius: 0;
  margin-bottom: 0;
  border-right: 1px solid var(--gray-100, #f1f5f9);
}

.basketItem .checkInOut .checkInfo:last-child {
  border-right: none;
  background: white;
  margin-bottom: 0;
}

.basketItem .checkInOut .checkInfo .checkContent {
  padding: 8px 10px;
  flex-direction: column;
}

.basketItem .checkInOut .checkInfo .checkContent .checkHead {
  justify-content: space-between;
  margin-bottom: 2px;
  font-size: 10px;
  color: var(--gray-400, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.basketItem .checkInOut .checkInfo .checkContent .checkCon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.basketItem .checkInOut .checkInfo .checkContent .checkCon .checkDay {
  font-size: 28px;
  line-height: 1;
  margin-right: 0;
  font-weight: 700;
  color: var(--gray-800, #1e293b);
}

.basketItem .checkInOut .checkInfo .checkContent .checkCon .checkMoreInfo {
  flex-direction: column;
  gap: 0;
}

.basketItem
  .checkInOut
  .checkInfo
  .checkContent
  .checkCon
  .checkMoreInfo
  .checkM {
  font-size: 10px;
  line-height: 1.3;
  color: var(--gray-400, #94a3b8);
}

.basketItem
  .checkInOut
  .checkInfo
  .checkContent
  .checkCon
  .checkMoreInfo
  .checkMY {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray-700, #334155);
  white-space: nowrap;
}

/* Price info section */
.basketItem .basketPInfo {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.basketItem .basketPInfo .roomName {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-700, #334155);
  width: auto;
  flex: 1;
  display: flex;
  align-items: center;
}

.basketItem .basketPInfo .roomPrice {
  width: auto;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.basketItem .basketPInfo .roomPrice .bPrice {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-800, #1e293b);
  display: flex;
  justify-content: flex-end;
}

.basketItem .basketPInfo .roomPrice .bInformation {
  font-size: 10px;
  color: var(--gray-400, #94a3b8);
  justify-content: flex-end;
  display: flex;
}

/* Board type + pax row */
.basketItem .bBottom {
  padding: 8px 14px 10px;
  border-bottom: none;
  display: flex;
  align-items: center;
}

.basketItem .bBottom .typeCon {
  display: flex;
  gap: 4px;
  width: auto;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
}

.basketItem .bBottom .typeCon .boardType,
.basketItem .bBottom .typeCon .rateType {
  font-size: 10px;
  font-weight: 600;
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-600, #475569);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-200, #e2e8f0);
  width: auto;
  flex-direction: row;
  display: inline-flex;
  align-items: center;
  height: 35px;
}

.basketItem .bBottom .totalP {
  width: auto;
  color: var(--gray-400, #94a3b8);
  justify-content: flex-end;
  display: flex;
}

.basketItem .bBottom .totalP i {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

/* Extra service item in basket */
.basketContainer.basketExtraService {
  background: var(--gray-50, #f8fafc);
  border-style: dashed;
  box-shadow: none;
}

.basketExtraService .basketTopSide {
  padding: 8px 12px;
  border-bottom: none;
}

.basketExtraService .roomnameBasket {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700, #334155);
}

.exServiceDate {
  background: var(--gray-100, #f1f5f9);
  border-radius: 6px;
  margin: 4px 10px 8px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--gray-500, #64748b);
  text-align: center;
}

.basketExtraService .bHotelInfo.extraInfo .hotelAddress {
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-600, #475569);
  margin: 10px 0;
}

.basketExtraService .bHotelInfo.extraInfo .hotelAddress p:first-child {
  margin-top: 0;
}

.basketExtraService .basketPInfo {
  justify-content: flex-end;
}

.basketItem .basketPInfo .roomPrice .extraQuantity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: end;
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500, #64748b);
}

.basketItem .basketPInfo .roomPrice .extraQuantity .extraTotal {
  text-align: end;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800, #1e293b);
}

.basketItem
  .basketPInfo
  .roomPrice
  .extraQuantity
  .extraTotal:not(:only-child) {
  width: 100%;
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px dashed var(--gray-200, #e2e8f0);
}

/* Extra Services button */
#extraServices.addbasket {
  border-radius: var(--radius, 8px) !important;
  margin: 0 0 10px 0;
  font-size: 13px;
  height: auto;
  padding: 10px 14px;
}

/* Applied promo box */
.promobox {
  background: var(--color-green-bg, #ecfdf5);
  border: 1px solid var(--color-green-light, #d1fae5);
  border-radius: var(--radius, 8px);
  padding: 8px 12px;
  margin: 8px 0;
  flex-direction: column;
  width: 100%;
}

.promoitem {
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  padding: 2px 0;
  line-height: 1.5;
  justify-content: space-between;
  display: flex;
}

/* Promo code input */
.promotionItem {
  display: flex;
  gap: 5px;
  align-items: stretch;
  margin: 8px 0;
  /* border: 1.5px solid var(--gray-200, #e2e8f0); */
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.promotionItem input {
  flex: 1;
  border: none !important;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  background: white;
  min-width: 0;
}

.promotionItem button {
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0 !important;
  background: var(--secondary) !important;
  color: var(--secondary-contrast, white) !important;
  padding: 8px 16px !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: none !important;
  height: auto;
  margin: 0;
}

/* Total Amount */
.bItem.generalTotal {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  margin: 8px 0;
  padding: 10px 14px;
  background: var(--gray-50, #f8fafc);
  border-radius: var(--radius, 8px);
  border: 1.5px solid var(--gray-200, #e2e8f0);
  align-items: center;
}

.bItem.generalTotal > span:first-child {
  color: var(--gray-600, #475569);
  font-weight: 500;
  margin-right: 0;
}

/* Complete basket button */
#completeBasketButton.addbasket {
  border-radius: 9999px !important;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  margin-top: 8px;
  height: auto;
}

/* Mobile sticky basket summary bar */
.mobileBasketBar {
  display: none;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99998;
}

@media (max-width: 720px) {
  .mobileBasketBar.mobileBasketBarVisible {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--gray-200, #e2e8f0);
  }

  .mobileBasketBar .mobileBasketBarTotal {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
  }

  .mobileBasketBar .mobileBasketBarTotal .label {
    font-size: 15px;
    color: var(--gray-600, #475569);
    font-weight: 400;
  }

  .mobileBasketBar .mobileBasketBarTotal .value {
    font-size: 27px;
    font-weight: 800;
    color: var(--gray-900, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobileBasketBar .mobileBasketBarContinue {
    flex-shrink: 0;
    border: none;
    border-radius: 14px;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    font-size: 17px;
    font-weight: 700;
    padding: 18px 28px;
    cursor: pointer;
  }

  .mobileBasketBar .mobileBasketBarContinue:active {
    opacity: 0.85;
  }

  body.hasMobileBasketBar {
    padding-bottom: 100px;
  }
}

/* Upgrade room */
.uproomModal {
  background: var(--color-blue-light, #dbeafe);
  color: var(--color-blue, #3b82f6);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius, 8px);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

/* Info text */
.basketInfoContent {
  font-size: 11px;
  color: var(--gray-400, #94a3b8);
  text-align: center;
  margin: 6px 0;
  line-height: 1.5;
  display: block;
}

/* Nodiscount */
.nodiscount {
  font-size: 11px;
  color: var(--gray-400, #94a3b8);
}

/* Guest name tags */
/* Tax area */
.taxItem {
  font-size: 11px;
  color: var(--gray-500, #64748b);
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

/* Bonus */
.bonusText {
  background: var(--color-gold-light, #fef3c7);
  color: var(--gray-700, #334155);
  border-radius: var(--radius, 8px);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0;
  text-align: center;
}

/* Discount details */
.basketListDiscounItem {
  font-size: 11px;
  color: var(--gray-600, #475569);
  padding: 2px 10px;
}

/* Manuel discount */
.manuelDiscountArea {
  background: var(--color-green-bg, #ecfdf5);
  border-radius: var(--radius, 8px);
  padding: 6px 12px;
  margin: 4px 0;
  font-size: 12px;
  gap: 6px;
}

@media (max-width: 768px) {
  #showbasketItems {
    margin: 10px 0 !important;
  }

#showbasketItems:not(:empty),
#extraServiceArea:not(:empty) {
    margin-bottom: 80px !important;
}
}

/* ===================================================
   CONSISTENT FOCUS RING — ALL RESERVATION INPUTS
   =================================================== */
.reservationArea .rezinput input:focus,
.reservationArea .rezinput select:focus,
.reservationArea .rezinput textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
  outline: none !important;
}

/* ===================================================
   GUEST INFORMATION AREA — REDESIGN
   =================================================== */
/* Room name: de-emphasize to secondary metadata */
.roomNameInfo {
  font-size: 15px !important;
  font-weight: 600 !important;
  border-left: 2px solid var(--gray-300, #cbd5e1) !important;
  padding: 2px 8px !important;
  margin: 10px 0 !important;
  min-width: 250px !important;
  width: fit-content !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0px 10px 10px 0px !important;
}

/* Per-room group card */
.personalinfo .infoGroup {
  border: 1.5px solid var(--gray-200, #e2e8f0);
  border-radius: 0px !important;
  overflow: visible !important;
  margin: 0 0 14px 0;
  background: #fff;
}

/* Guest item — remove inner borders, keep separator */
.personalinfo .personalitem {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--gray-100, #f1f5f9) !important;
  overflow: visible !important;
}

.personalinfo .personalitem:last-child {
  border-bottom: none !important;
}

/* Round the top corners of first guest header, bottom of last item row */
.personalinfo .infoGroup .personalitem:first-child .guest {
  border-radius: 10px 10px 0 0;
}

/* Allow flatpickr calendar to overflow all ancestor containers */
.personalinfo .personalitem > .row,
.personalinfo .personalitem .rezinput,
.personalinfo .personalitem .flatpickr-wrapper {
  overflow: visible !important;
}

/* Guest header bar */
.personalinfo .personalitem .guest {
  background: var(--gray-50, #f8fafc);
  border-bottom: 1px solid var(--gray-100, #f1f5f9);
  padding: 10px 14px !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: space-between !important;
}

/* Numbered badge circle */
.guestBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-200, #e2e8f0);
  color: var(--gray-700, #334155);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Guest type label */
.guestLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600, #475569);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex: 1;
}

/* Input row padding */
.personalinfo .personalitem > .row {
  padding: 12px 6px 4px !important;
  margin: 0 !important;
}

/* Input field wrappers */
.personalinfo .personalitem .rezinput {
  padding: 0 8px 12px !important;
}

.personalinfo .personalitem .rezinput label:not(.error) {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gray-500, #64748b) !important;
  display: block !important;
  margin-bottom: 5px !important;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
}

.personalinfo .personalitem .rezinput input,
.personalinfo .personalitem .rezinput select:not(.genderInput) {
  border: 1.5px solid var(--gray-200, #e2e8f0) !important;
  border-radius: 8px !important;
  height: 40px !important;

  font-size: 13px !important;
  color: var(--gray-800, #1e293b) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
  width: 100% !important;
}

.personalinfo
  .personalitem
  .rezinput
  .select2-container--default
  .select2-selection--single {
  border: 1.5px solid var(--gray-200, #e2e8f0) !important;
  border-radius: 8px !important;
  height: 40px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}

.personalinfo
  .personalitem
  .rezinput
  .select2-container--default.select2-container--focus
  .select2-selection--single,
.personalinfo
  .personalitem
  .rezinput
  .select2-container--default.select2-container--open
  .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

.personalinfo
  .personalitem
  .rezinput
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 37px !important;
  font-size: 13px !important;
  color: var(--gray-800, #1e293b) !important;
  padding-left: 12px !important;
}

.personalinfo
  .personalitem
  .rezinput
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 38px !important;
}

.nationalityOption {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left; 

}

.nationalityFlag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.select2-selection__rendered .nationalityOption {
  display: inline-flex;
}

.genderOption {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select2-selection__rendered .genderOption {
  display: inline-flex;
}

.genderOption i,
.genderIconMan,
.genderIconWoman,
.genderIconNeutral {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.genderIconMan {
  color: #2563eb;
}

.genderIconWoman {
  color: #db2777;
}

.genderIconNeutral {
  color: #94a3b8;
}

.personalinfo .personalitem .rezinput input:focus,
.personalinfo .personalitem .rezinput select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

.personalinfo .personalitem .rezinput .flatpickr-months input,
.personalinfo .personalitem .rezinput .flatpickr-months select {
  border: none !important;
  width: fit-content !important;
  height: 26px !important;
  padding: 0px !important;
}

/* Fix w50 which was incorrectly set to 25% */
.personalitem .w50 {
  width: 50% !important;
}

/* Gender field — full row */
.genderField {
  width: 100% !important;
  max-width: 100% !important;
}

/* Gender toggle buttons */
.genderToggle {
  display: flex;
  gap: 8px;
  width: 100%;
}

.genderBtn {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--gray-200, #e2e8f0) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--gray-600, #475569) !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.genderBtn:hover {
  border-color: var(--gray-400, #94a3b8) !important;
  color: var(--gray-800, #1e293b) !important;
}

.genderBtn.genderBtnActive {
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 700;
  background: #fff !important;
}

@media (max-width: 600px) {
  .personalitem .w25,
  .personalitem .w33,
  .personalitem .w20 {
    width: 50% !important;
  }

  .personalitem .w50 {
    width: 100% !important;
  }
}

@media (max-width: 400px) {
  .personalitem .w25,
  .personalitem .w33,
  .personalitem .w20 {
    width: 100% !important;
  }
}

/* ===================================================
   RATE CARD REDESIGN — discount badge + select button
   =================================================== */
/* 1. Price layout — left col (badge + strikethrough) / right col (final price) */
.roomprice {
  align-items: center !important;
  gap: 10px !important;
}

.priceLeftCol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.priceLeftCol .comission {
  padding: 0 !important;
}

.priceLeftCol .roompricenodiscount {
  padding: 0 !important;
}

/* Discount badge — gray outlined pill */
.standartDiscount .discountRate {
  background: var(--gray-50, #f8fafc) !important;
  border: 1.5px solid var(--gray-300, #cbd5e1) !important;
  color: var(--gray-700, #334155) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
  height: auto !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  position: relative !important;
}

.standartDiscount .discountRate::before,
.standartDiscount .discountRate::after {
  display: none !important;
}

/* Tighten .comission padding */
.pricebar .comission,
.mobilePriceRow .comission {
  padding: 0 !important;
}

/* 2. Strikethrough original price — lighter */
.pricebar .roompricenodiscount,
.mobilePriceRow .roompricenodiscount {
  font-size: 13px !important;
  color: var(--gray-400, #94a3b8) !important;
  font-weight: 400 !important;
}

/* 3. Night / tax label */
.nightPrice {
  font-size: 11px !important;
  color: var(--gray-500, #64748b) !important;
  font-weight: 400 !important;
}

/* 4. Room count — hide label, overlay transparent select on button chevron area */
/* Desktop: .pricebar .priceRightSection */
.pricebar .priceRightSection {
  position: relative !important;
}

.pricebar .rezinfoItemRoom {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: 40px !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.pricebar .rezinfoItemRoom .rezLabel {
  display: none !important;
}

.pricebar .rezinfoItemRoom .inputReset {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: all !important;
  z-index: 6 !important;
}

.pricebar .priceRightSection .addbasket {
  padding-right: 40px !important;
  position: relative !important;
}

/* Mobile: .addToBasketCon */
.addToBasketCon {
  position: relative !important;
}

.addToBasketCon .rezinfoItemRoom {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: 40px !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.addToBasketCon .rezinfoItemRoom .rezLabel {
  display: none !important;
}

.addToBasketCon .rezinfoItemRoom .inputReset {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: all !important;
  z-index: 6 !important;
}

.addToBasketCon .addbasket {
  padding-right: 36px !important;
  position: relative !important;
}

/* 5. Chevron for mobile button (desktop already has it via .priceTopBar .addbasket::after) */
.addToBasketCon .addbasket::after {
  content: '' !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) translateY(1px) !important;
}

/* Separator line before chevron */
.pricebar .priceRightSection .addbasket::before,
.addToBasketCon .addbasket::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: 34px !important;
  top: 20% !important;
  bottom: 20% !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Fix desktop chevron positioning (currently inline in flex, move to absolute) */
.priceTopBar .addbasket::after {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) translateY(1px) !important;
}