/* RoomDetails Starts  */

#__MTS #__MTS_roomdetail-pricecalculator {
  padding: 123px 50px;
}

#__MTS #__MTS_roomdetail-pricecalculator section.MTS__relative.MTS__w-full.MTS__h-full.MTS__border.MTS__border-\[color\:var\(--MTS-borderColor-outer\)\].MTS__rounded-sm.MTS__p-0 {
  border: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .imageslider {
    order: 1;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpFormClass {
    font-size: 20px;
    padding-left: 28px;
    padding-right: 22px;
    padding-top: 24px;
    background-color: #111111;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpFormClass select {
    max-width: 195px;
    padding: 9px 30px 9px 10px;
    appearance: none;
    background-image: url(../static/images/select-down-arrow-light.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 15px 9px;
    background-color: #111111;
    border: 1px solid #ffffff;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass svg {
    stroke: #FFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass .MTS__text-smallCaption {
  font-size: 16px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass span.MTS__px-2.MTS__flex.MTS__items-center {
    padding: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass {
    position: relative;
    gap: 16px;
    padding-left: 40px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 28px;
  height: 30px;
  background-image: url(../static/images/calendar-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__backFlipClass svg {
    fill: #FFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__defaultBackRangeClass,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__backTitleClass,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__backTitleClass+p,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__rangeClass {
    color: #FFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__backTitleClass {
    padding-top: 22px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__EnquiryBookButtonClass button {
    border-radius: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__defaultRangeClass {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 4px;
    padding-top: 62px;
    font-size: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__defaultRangeClass .MTS__font-bold {  
    font-weight: 400;
}

#__MTS #__MTS_roomdetail-pricecalculator .offer-nights-info {
    position: relative;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__flipClass svg {
    fill: #FFF;
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__flipClass {
    position: relative;
    padding-right: 18px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__flipClass:after {
    position: relative;
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-style: solid solid none none;
    transform: rotate(45deg);
    flex-shrink: 0;
    top: 2px;
}

#__MTS #__MTS_roomdetail-pricecalculator #adultselect,
#__MTS #__MTS_roomdetail-pricecalculator #childrenselect {
    max-width: 195px;
    background-color: #111111;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__CancelButtonClass {
    background-color: #000;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__Room_sizeInfo span {
    font-family: old-standard-tt, sans-serif
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpTitleClass {
    background-color: #ffffff;
    color: #111111;
    padding: 9px 18px;
    font-size: 24px;
    line-height: 1.5;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpTitleClass div {
    border-color: transparent transparent #000 transparent !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .header-section {
    order: 2;
    margin: 0;
    margin-top: 18px !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__descriptionClass {
    order: 3;
    text-align: center;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__expandButtonClass {
    order: 4;
}

#__MTS #__MTS_roomdetail-pricecalculator .header-section .MTS__text-subHeading.MTS__font-subHeading.MTS__leading-subHeading {
    display: none;
}


#__MTS #__MTS_roomdetail-pricecalculator .room_occupancy_size {
    flex-direction: row-reverse;
}

#__MTS #__MTS_roomdetail-pricecalculator .roomOccupancyInfo span {
    margin-right: 4px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__sizeInfo span {
    display: inline;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass {
  --MTS-fontWeight-semibold: 400;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    --MTS-color-secondary-light: #ffffff;
    --MTS-color-primary-darker: #ffffff;
    justify-content: space-between;
    margin-top: 30px;
    padding: 47px 63px 47px 39px;
    border: 0;
    gap: 18px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar {
    padding: 0;
    border: 1px solid #111111;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar .MTS__flex.MTS__flex-col.MTS__mt-2.MTS__py-1.MTS__gap-2.MTS__justify-start {
    gap: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar > div.MTS__mt-4.MTS__text-xs.MTS__py-1 {
    margin-top: 0;
    font-size: 18px;
    text-align: left;
    padding: 23px 20px 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar > div.MTS__flex.MTS__gap-4 {
    padding: 10px 20px 32px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar > div.MTS__flex.MTS__gap-4 .MTS__h-4 {
    width: 24px;
    height: 24px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar .lg\:MTS__text-\[12\.5px\] {
    font-size: 18px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainDaysAndDatesHolderID {
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #C7B39A;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .request-bar-calendar > div {
    border: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass + div .MTS__tabparent {
    margin-top: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass + div .MTS__tabparent #MTS__tabsHolderID {
    padding-top: 50px;
    gap: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass + div .MTS__tabparent .MTS__tabCalendarClass {
    padding-top: 40px;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 1689px;
    margin: 0 auto;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox {
    gap: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox > div {
    padding: 0 24px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__separate_line {
    border-color: #000000;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__MonthParentClass > div:first-child {
    padding: 16px 0;
    border-bottom: 1px solid #111111;
    line-height: 1.5;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__MonthParentClass .MTS__MonthNameClass {
    margin: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID > button {
    width: 30px;
    height: 30px;
    top: 20px;
    background-image: url(../static/images/right-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID > button:first-child {
    transform: rotate(180deg);
    left: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID > button:nth-child(2) {
    right: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID > button svg {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID {
    --MTS-fontSize-calendarSubHeading-base: 18px;
    --MTS-fontSize-calendarBody-base: 12px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID .MTS_OnlyDeparture,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass #MTS__MainCalendarHolderID .MTS__bottom-\[10px\] {
    bottom: 8px !important;
    font-size: 8px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__DatesClass>span {
    width: 48px;
    height: 48px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__DatesClass>span {
    width: 48px;
    height: 48px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__DaysClass {
    padding-bottom: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div {
    padding: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__separate_line {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__priceTab {
    order: 2;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__occupancyTab {
    order: 0;
    margin-bottom: 0;
    border-right: 1px solid #ffffff;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__occupancyTab .pricecalculator_requestbar_text {
    padding-right: 30px;
    background-image: url(../static/images/select-down-arrow-light.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__occupancyTab .MTS__occupancy_selection_wrapper {
    left: 0;
    right: unset;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__mealplanTab {
    order: 1;
    border-right: 1px solid #ffffff;
    margin: 0 !important;
    border-top: 0;
    border-bottom: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-calandar-icon svg,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-occupancy-icon svg,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-mealplan-icon svg {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-calandar-icon,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-occupancy-icon,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-mealplan-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 57px;
    width: 60px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-calandar-icon {
    background-image: url('../static/images/calendar.svg');
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-occupancy-icon {
    background-image: url('../static/images/person.svg');
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-mealplan-icon {
    background-image: url('../static/images/mealplan.svg');
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__tabsHolderID {
    gap: 14px;
    justify-content: center;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__tabsHolderID>span {
    padding: 14px 32px;
    margin-left: 0 !important;
    font-weight: 600;
    border: 1px solid #111111;
    font-size: 20px;
    line-height: 1.5;

}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__currentTabClass.MTS__bg-primary-dark,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__offers span,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__backRangeClass {
    color: #FFFFFF !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__offers span {
    right: -10px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__offer-length-numbers,
#__MTS #__MTS_roomdetail-pricecalculator span.MTS__flex.MTS__items-center.MTS__justify-center.MTS__absolute.MTS__top-\[-30\%\].MTS__right-\[-10\%\].MTS__w-7.MTS__h-7.MTS__rounded-2xl.MTS__currentTabClass.MTS__bg-primary-darker.MTS__border-t-2.MTS__border-b-\[\#dfded9\].MTS__text-secondary-lighter.MTS__text-sm.MTS__font-bold {
    background-color: #000000;
    color: #FFFFFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span {
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 64px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span.MTS__text-effect-light[class*="lc_daysdisable"] {
  color: rgba(0,0,0,.5);
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span[class*="calendar-module_lar_closed"] {
    background: repeating-linear-gradient(to bottom right, #cccccc 3%, rgba(53,53,53,0.05) 5%, rgba(53,53,53,0.05) 12%);
    color: #666666;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span[class*="calendar-module_lar_dept_only"] {
    background: #2A2A2A;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass {
    place-items: center;
    row-gap: 8px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__border-b.MTS__text-button.MTS__text-center span {
    font-size: 25px;
    line-height: 1.5;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__MonthNameClass b {
    font-weight: 400;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monYear-popUp-monthSelection-popUp {
    background-color: #FFFFFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monYear-popUp-monthSelection-popUp>div {
    border-color: #D7D5D2;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBar_cta_buttonWrapper button {
    text-transform: uppercase;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monYear-popUp-monthSelection-popUp .MTS__monthSelection-popUp-selectedMonth {
    background-color: #000000;
    color: #FFFFFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBar_book_button:hover {
    background-color: #4C4C4C;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBar_request_button:hover {
    background-color: #E3E2DF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monthYear-selectionPopup-yearSelection-dropDown {
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monthYear-selectionPopup-yearSelection-dropDown::-webkit-scrollbar {
    width: 2px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBar-from-label {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monthYear-selectionPopup-yearSelection-dropDown::-webkit-scrollbar-thumb {
    background: #000000;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monthYear-selectionPopup-yearSelection-dropDown option {
    border-color: #D7D5D2;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monthYear-selectionPopup-yearSelection-dropDown option:checked {
    background-color: #000000;
    color: #FFFFFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__InfoClass {
    font-size: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__text-xs,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__SelectedClass,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ArrivalClass,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__DepartureClass,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ClosedClass {
    font-size: 20px;
    margin: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID span.MTS__h-4.MTS__w-4 {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 12px;
    margin-right: 16px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__select-date-label {
    font-size: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper .MTS__price-text {
    font-size: 40px;
    font-weight: 700;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper .MTS__requestBar-from-label {
    font-size: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__InfoClass {
    text-align: center;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID {
    justify-content: flex-start;
    margin: 25px 0 0;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID > div {
    margin: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID > div {
    gap: 38px;
    padding-top: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__DepartureClass span {
    background: #2a2a2a !important;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ClosedClass span {
    background: repeating-linear-gradient(to bottom right, #cccccc 2%, rgba(53, 53, 53, 0.05) 7%, rgba(53, 53, 53, 0.05) 12%) !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__select-date-label {
    text-align: center;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper {
    justify-content: flex-end;
    align-items: flex-end;
    gap: 63px;
    --MTS-borderColor-button-lighter: #111111;
    --MTS-color-button-lighter: #111111;
    --MTS-color-button-darker: #ffffff;
    --MTS-backgroundColor-button-darker: #111111;
    --MTS-borderColor-button-hover-lighter: #111111;
    --MTS-borderColor-button-darker: #111111;
    --MTS-borderColor-button-hover-darker: #111111;
    --MTS-backgroundColor-button-hover-lighter: #111111;
    --MTS-color-button-hover-lighter: #ffffff;
    --MTS-color-button-hover-darker: #111111;
    --MTS-backgroundColor-button-hover-darker: #ffffff;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper > .sm\:MTS__flex.MTS__justify-center.lg\:MTS__justify-end.MTS__gap-8 {
  align-items: flex-end;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__expandButtonClass span {
    color: #000;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper .MTS__requestBar_request_button,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper .MTS__requestBar_book_button {
    text-transform: uppercase;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__offerTitleClass {
    font-size: 32px;
    line-height: 1.5;
    padding-top: 25px;
    word-break: break-word;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__enquiry_and_book_request_button,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__enquiry_and_book_book_button {
    text-transform: uppercase;
    padding: 10px 26px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__enquiry_and_book_request_button:hover {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__enquiry_and_book_book_button:hover {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__offerCard-wrapper {
    max-width: 100%;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass {
    padding-left: 15px;
    padding-right: 15px;
    min-height: 657px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .offer-price-info .MTS__font-bold {
    display: inline;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .offer_date_dropdown {
    display: none !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__defaultRangeClass,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__defaultRangeClass span,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__offerTitleClass,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__text-secondary-lighter {
    color: #FFFFFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__defaultRangeClass {
  flex-wrap: wrap;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__defaultRangeClass .discounted-price {
  text-decoration: line-through 2px #ffffff !important;
  font-size: 1em !important;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__EnquiryBookButtonClass {
    gap: 14px;
    padding-bottom: 0;
    flex: unset;
    padding-top: 22px;
    --MTS-color-button-light: #C7B39A;
    --MTS-backgroundColor-button-hover-light: #C7B39A;
    --MTS-color-button-hoverlight: #C7B39A;
    --MTS-backgroundColor-button-dark: #C7B39A;
    --MTS-color-button-dark: #111111;
    --MTS-backgroundColor-button-hover-dark: transparent;
    --MTS-color-button-hover-dark: #C7B39A;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__EnquiryBookButtonClass button {
    border: 1px solid #C7B39A;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__EnquiryBookButtonClass .MTS__gap-1 {
    gap: 14px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__summaryClass {
    flex: 1;
    opacity: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__flipClass {
    align-items: center;
    justify-content: center;
    margin-top: auto;
    gap: 6px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__flipClass p {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__monthSelection-popUp {
    background-color: #FFF;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__BackCardID .MTS__flex.MTS__flex-col.MTS__px-5.MTS__pt-10.MTS__pb-4.MTS__relative.MTS__bg-gradient-to-b.MTS__from-\[color\:var\(--MTS-backgroundColor-surface-light\)\].MTS__to-\[color\:var\(--MTS-backgroundColor-surface-light\)\].MTS__h-full.MTS__w-\[100\%\],
#__MTS #__MTS_roomdetail-pricecalculator #MTS__FrontCardID>:nth-child(2)>:first-child>:first-child {
    padding: 40px 32px 58px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__defaultBackRangeClass {
    font-size: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__defaultBackRangeClass .MTS__font-bold {
    font-weight: 400;
    font-size: 1em;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass span.MTS__px-2.MTS__flex.MTS__items-center svg {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__FrontCardID>:first-child {
    background-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.65) 100%);
    margin: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__label-v2-mealPlan-title {
    display: none !important;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__BackCardID>:first-child>:first-child {
     background-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.8) 100%);
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__BackCardID>:first-child>:first-child p.MTS__text-sm.MTS__font-body.MTS__text-secondary-lighter {
    margin-bottom: auto;
    margin-top: 32px;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__BackCardID>:first-child>:first-child p.MTS__text-sm.MTS__font-body.MTS__text-secondary-lighter,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__BackCardID>:first-child>:first-child p.MTS__text-sm.MTS__font-body.MTS__text-secondary-lighter .MTS__text-xs {
    font-size: 18px;
    line-height: 1.5;
}

#__MTS #__MTS_roomdetail-pricecalculator span.MTS__label-v2-perNight-label {
    order: 4;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__descriptionClass {
    margin-top: 40px;
    text-align: left;
}

#__MTS #__MTS_roomdetail-pricecalculator .header-section::after {
    content: '';
    display: block;
    width: 29.28px;
    height: 38px;
    margin: 40px auto 0px auto;
    background-image: url(../static/images/icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#__MTS #__MTS_roomdetail-pricecalculator span.MTS__label-v2-from-label {
    order: 1;
}

#__MTS #__MTS_roomdetail-pricecalculator span.MTS__label-v2-roomPrice {
    order: 2;
}

#__MTS #__MTS_roomdetail-pricecalculator span.MTS__label-v2-perPerson-label {
    order: 3;
}

#__MTS #__MTS_roomdetail-pricecalculator .imageslider {
    height: 834px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__flipClass>:first-child {
    color: #FFF;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-mealplan-icon+div span {
    align-self: start;
    margin-top: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__mealPlan_selection {
    padding-left: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__TotalPriceInfo,
#__MTS #__MTS_roomdetail-pricecalculator .MTS__offerTitleClass {
    font-family: old-standard-tt, sans-serif;
}

#__MTS #__MTS_roomdetail-pricecalculator div[class*="calendar-module_lar_container"] div[class*="calendar-module_lar_dept_only"] {
    background: #2a2a2a;
    color: #ffffff;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent > section:first-child {
    background-color: transparent;
    --MTS-color-label-darker: #111111;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div {
    margin-top: 26px;
    padding: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div .lg\:MTS__flex.sm\:MTS__flex.MTS__justify-between.MTS__mt-4.MTS__mb-2 {
    margin: 12px 0;
    line-height: 1.5;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__descriptionClass {
    margin-top: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div .lg\:MTS__flex.sm\:MTS__flex.MTS__justify-between.MTS__mt-4.MTS__mb-2 svg {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div .lg\:MTS__flex.sm\:MTS__flex.MTS__justify-between.MTS__mt-4.MTS__mb-2 pre.MTS__text-subHeading.MTS__font-subHeading.MTS__text-secondary span {
    white-space: normal;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div .lg\:MTS__flex.sm\:MTS__flex.MTS__justify-between.MTS__mt-4.MTS__mb-2 > div {
    flex-direction: row-reverse;
    line-height: 1;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div .lg\:MTS__flex.sm\:MTS__flex.MTS__justify-between.MTS__mt-4.MTS__mb-2 > div > pre:last-child {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #111111;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__absolute.MTS__flex.MTS__justify-center.MTS__w-full.MTS__h-10.MTS__bottom-\[5\%\] {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .AmenitiesDiv {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__imageslider-parent-container {
    height: calc(100% - 70px) !important;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__image-sliderbutton {
    width: 100%;
    justify-content: center;
    gap: 8px;
    pointer-events: all;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__image-sliderbutton > button {
    width: 30px;
    height: 30px;
    background-image: url(../static/images/right-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__image-sliderbutton > button:first-child {
    transform: rotate(180deg);
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__image-sliderbutton > button svg {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > div:first-child {
    position: absolute;
    top: 10px;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > button,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > div:first-child > button {
    height: 32px;
    width: 32px;
    background-image: url(../static/images/right-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > button svg,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > div:first-child > button svg {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > button:first-child,
#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > div:first-child > button:first-child {
    transform: rotate(180deg);
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass {
    padding-top: 40px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul {
    display: block;
    column-count: 3;
    max-width: 1405px;
    margin: 0 auto;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul li {
    position: relative;
    width: auto;
    display: block;
    margin: 0;
    padding: 16px 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul li p {
    position: relative;
    margin: 0;
    display: flex;
    gap: 20px;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul li p:before {
    position: relative;
    top: 8px;
    content: '';
    width: 21px;
    height: 20px;
    background-image: url(../static/images/tick.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul li span {
    display: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__OffersContentClass {
  max-width: 1693px;
  margin: 0 auto;
  padding: 40px 0 10px;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainMonthHolderID {
    max-width: 1600px;
    margin: 0 auto;
}

#__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl {
    height: 886px;
    padding: 0;
    pointer-events: none;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__container {
  padding: 0;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__occupancyPopUpFormClass select option {
  background-color: #111111 !important;
}

#__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID .MTS__LoaderClass {
  background-color: transparent;
}

#__MTS #__MTS_roomdetail-pricecalculator .MTS__room-category-name {
  display: none;
}

@media screen and (max-width:1600px) {
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass {
        padding: 37px 22px 37px 10px;
        --MTS-fontSize-subText-base: 16px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox > div {
        padding: 0 14px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBar_cta_buttonWrapper button {
       padding-left: 20px; 
       padding-right: 20px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl {
        height: 750px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID {
      margin-bottom: 25px;
    }
}

@media screen and (max-width:1256px) {
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass {
        flex-direction: column;
        padding: 24px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span {
      height: 52px;
      width: 52px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__text-xs, #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__SelectedClass, #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ArrivalClass, #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__DepartureClass, #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ClosedClass {
      font-size: 16px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__FrontCardID>:nth-child(2)>:first-child>:first-child {
      padding-left: 16px;
      padding-right: 16px;
    }
}

@media screen and (max-width:1049px) {

  #__MTS #__MTS_roomdetail-pricecalculator {
    padding: 80px 16px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__accordianBodyClass #MTS__MainCalendarHolderID {
    max-width: 680px;
    margin: 0 auto;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__PricesContentClass {
    padding: 30px 0;
  }
  
  #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID {
    justify-content: center;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__select-date-label {
    margin-bottom: 20px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__accordianUlClass {
    --MTS-color-label-dark: #111111
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__OffersContentClass {
    padding-left: 0;
    padding-right: 0;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul {
    column-count: 2;
  }

  div#__MTS .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300 > div:first-child > svg {
    top: 24px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass {
    padding-top: 20px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul li p:before {
    top: 4px;
    width: 16px;
    height: 20px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul li {
    padding: 8px 0;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__defaultRangeClass {
    padding-top: 32px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox {
    flex-direction: column;
    gap: 16px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox > div {
    justify-content: flex-start;
    border-right: 0;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox > div.MTS__occupancyTab {
    align-items: flex-start;
  }
}

@media screen and (max-width:1024px) {
    #__MTS #__MTS_roomdetail-pricecalculator #MTS__widget-header>:first-child {
        padding-left: 20px;
        padding-right: 20px;
        max-width: unset;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass {
        padding: 0;
    }


    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass>:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass.MTS__border.MTS__pr-4.MTS__flex.MTS__justify-between.before\:\!MTS__content-\[none\].MTS__py-1.MTS__cursor-pointer.MTS__bg-label-darker.MTS__text-label-darker.MTS__border-label-light.hover\:MTS__border-label-lighter {
        background-color: #000;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass.MTS__border.MTS__pr-4.MTS__flex.MTS__justify-between.before\:\!MTS__content-\[none\].MTS__py-1.MTS__cursor-pointer.MTS__bg-label-darker.MTS__text-label-darker.MTS__border-label-light.hover\:MTS__border-label-lighter div {
        color: #FFF !important;
    }


    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass svg {
        display: none;
    }


    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass>:first-child::after {
        content: '';
        display: block;
        width: 20px;
        height: 13px;
        flex-shrink: 0;
        background-image: url(../static/images/dropdown-arrow.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass.MTS__border.MTS__pr-4.MTS__flex.MTS__justify-between.before\:\!MTS__content-\[none\].MTS__py-1.MTS__cursor-pointer.MTS__bg-label-darker.MTS__text-label-darker.MTS__border-label-light.hover\:MTS__border-label-lighter>:first-child::after {
        transform: rotate(-90deg);
        width: 16px;
        height: 16px;
        background-image: url(../static/images/Right-arrow.svg);
    }

    #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl {
        height: 650px;
    }

}

/* ===== RESPONSIVE - Mobile (max-width: 768px) ===== */
@media (max-width: 768px) {

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__offerCard-wrapper>:nth-child(2) button svg {
        fill: #FFF;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__offerCard-wrapper>:nth-child(2)>:first-child {
        left: 7px !important;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__offerCard-wrapper>:nth-child(2)>:nth-child(2) {
        right: 7px !important;
    }

    /* Room title */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__text-heading.MTS__font-heading {
        font-size: 32px;
        line-height: 1.25;
        margin-top: 12px;
        margin-bottom: 8px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .room_occupancy_size {
        margin-bottom: 12px;
    }

    /* Room occupancy & size info */
    #__MTS #__MTS_roomdetail-pricecalculator .roomOccupancyInfo {
        font-size: 15px !important;
        line-height: 1.47;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__Room_sizeInfo {
        font-size: 15px;
    }

    /* Price label area */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__sizeInfo {
        font-size: 15px;
    }

    /* Body / description text */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__descriptionClass {
        font-size: 15px;
        line-height: 1.47;
    }

    /* Request bar price */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__TotalPriceInfo {
        font-size: 30px;
        line-height: 1.5;
    }

    /* Request bar icons */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-calandar-icon,
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-occupancy-icon,
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-mealplan-icon {
        min-height: 40px;
    }

    /* Tabs - full width stacked */
    #__MTS #__MTS_roomdetail-pricecalculator #MTS__tabsHolderID {
        flex-direction: column;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyTab {
        padding-left: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__mealplanTab {
        justify-content: start;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .pricecalculator_requestbar_text {
        justify-content: start;
        padding-left: 0;
        align-items: center;
        padding-right: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__tabsHolderID>span {
        font-size: 20px;
        width: 100%;
        justify-content: center;
    }

    /* Calendar heading */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__font-calendarHeading {
        font-size: 18px;
    }

    /* Calendar day names */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__font-calendarSubHeading {
        font-size: 12px;
    }

    /* Calendar month dropdown */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__border-b.MTS__text-button.MTS__text-center span {
        font-size: 14px;
    }

    /* Calendar day cells - round and smaller */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span {
        width: 50px;
        height: 50px;
        min-width: 32px;
    }

    /* Calendar day numbers */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass .MTS__text-calendarBody {
        font-size: 10px !important;
    }

    /* Calendar cell price text */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass .MTS__text-effect-lighter {
        font-size: 9px !important;
    }

    /* Price info & legends */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__InfoClass {
        font-size: 15px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__text-xs,
    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__SelectedClass,
    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ArrivalClass,
    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__DepartureClass,
    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID .MTS__ClosedClass {
        font-size: 12px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID span.MTS__h-4.MTS__w-4 {
        width: 16px;
        height: 16px;
        min-width: 16px;
        border-radius: 8px;
    }

    /* Bottom price section */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__select-date-label {
        font-size: 15px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper .MTS__price-text {
        font-size: 30px;
    }

    /* Offer cards */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass {
        height: 439px;
        padding-left: 0;
        padding-right: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__offerTitleClass {
        font-size: 20px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass #MTS__FrontCardID .MTS__EnquiryBookButtonClass .MTS__gap-1 {
      gap: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__EnquiryBookButtonClass .MTS__gap-1 {
        flex-direction: column;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__defaultRangeClass,
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__text-sm {
        font-size: 18px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__OfferCardClass .MTS__font-bold.MTS__text-xl {
        font-size: 15px;
    }

    /* Request bar subtext */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__font-subText {
        font-size: 14px;
    }



    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID>:nth-child(2) {
        margin-left: 0;
    }

    /* More details link */
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__expandButtonClass {
        font-size: 15px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__FrontCardID>:nth-child(2)>:first-child>:first-child {
        padding: 40px 20px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__flipClass>:first-child {
        font-size: 18px;
        margin: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass {
        padding: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .header-section::after {
        width: 12px;
        height: 15.571px;
        margin: 12px auto 0px auto;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__descriptionClass {
        margin-top: 12px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .header-section {
        margin-top: 0 !important;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .imageslider {
        height: 654px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__calPriceLabelClass {
        font-size: 9px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl .MTS__imageslider-parent-container {
        height: calc(100% -50px) !important; 
    }
}

@media (max-width: 767px) {

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__MainCalendarHolderID > button {
        top: 10px;
        width: 26px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div {
        padding: 0;
    }
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox > div {
        padding: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestBarClass .MTS__SelectionBox {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__mealplanTab,
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__SelectionBox > div.MTS__occupancyTab {
        border-right: 0;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass.MTS__border.MTS__pr-4.MTS__flex.MTS__justify-between.before\:\!MTS__content-\[none\].MTS__py-1.MTS__cursor-pointer.MTS__bg-label-darker.MTS__text-label-darker.MTS__border-label-light.hover\:MTS__border-label-lighter div {
        justify-content: space-between;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__LiElementClass {
        --MTS-color-label-dark: #111111;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__PricesContentClass {
        max-width: 500px;
        margin: 0 auto;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__selectPrice-CTA-button-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl {
        height: 550px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-calandar-icon, #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-occupancy-icon, #__MTS #__MTS_roomdetail-pricecalculator .MTS__requestbar-mealplan-icon {
      width: 42px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__availableOfferClass:before {
      width: 24px;
      height: 26px;
    }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpTitleClass {
    font-size: 18px;
  }
}

@media screen and (max-width: 639px) {
  #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl + div .lg\:MTS__flex.sm\:MTS__flex.MTS__justify-between.MTS__mt-4.MTS__mb-2 > div {
    justify-content: flex-end;
    margin-left: 0;
  }

  #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID, #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID > div {
    gap: 18px;
  }

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpFormClass {
    font-size: 16px;
  }  

  #__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpFormClass select,
  #__MTS #__MTS_roomdetail-pricecalculator #adultselect, #__MTS #__MTS_roomdetail-pricecalculator #childrenselect {
    max-width: 172px;
  }
}

@media screen and (max-width:500px) {
    #__MTS #__MTS_roomdetail-pricecalculator .imageslider {
        height: 254px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__MainDaysAndDatesHolderID {
        padding-left: 0;
        padding-right: 0;
    }


    #__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancy_selection_wrapper {
        width: 300px;
        left: -30px !important;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__occupancyPopUpFormClass {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS_OnlyDeparture,
    #__MTS #__MTS_roomdetail-pricecalculator .MTS__calNightsLabelClass {
        font-size: 6px;
        top: 18px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__calPriceLabelClass {
        font-size: 7px;
        top: 20px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__DatesClass>span {
        width: 36px;
        height: 36px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID {
        flex-direction: column;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID, #__MTS #__MTS_roomdetail-pricecalculator #MTS__KeyCartogramID > div {
        gap: 16px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator #priceDetailHeaderParent .MTS__RoomDetailsTitleControl {
        height: 400px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__bottom-\[10px\] {
      bottom: 6px;
    }

    #__MTS #__MTS_roomdetail-pricecalculator .MTS__AmneitiesContentClass ul {
      column-count: 1;
    }
}

/* RoomDetails Ends */

/* Roomlist Starts */
/* === SELLA — WidgetRoomsList4 Layout11 List + Slider === */
/* Figma: K6OI2uF0yukFiZH1R6SlVs node 5055-12405 (list) / 5055-12449 (slider) */

/* === GLOBAL === */
#__MTS #__MTS_room-list,
#__MTS #__MTS_room-slider {
  background-color: var(--MTS-backgroundColor-primary);
  position: relative;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper,
#__MTS #__MTS_room-slider .MTS__roomSectionWrapper {
  padding: 0 24px;
}

#__MTS #__MTS_room-list .MTS__roomslist-listLayout, #__MTS #__MTS_room-slider .MTS__roomslist-listLayout {
  padding-left: 0;
  padding-right: 0;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:last-child {
  display: flex;
  justify-content: center;
  gap: 22px;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout {
  padding: 0 0 60px;
  justify-content: center;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout > div {
  width: 100%;
}

#__MTS #__MTS_room-slider .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout {
    padding: 0;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:last-child .MTS_CatTab {
  padding: 14px 32px !important;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid #111111;
  color: #111111;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:last-child .MTS_CatTab:first-child {
  display: none;
}

#__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:last-child .MTS_CatTab.activeTab {
  background-color: #111111;
  color: #ffffff;
}

/* === SLIDER WRAPPER — remove sm:MTS__w-[calc(100%-164px)] side shrink === */

#__MTS #__MTS_room-list .MTS__roomSliderWrapper,
#__MTS #__MTS_room-slider .MTS__roomSliderWrapper {
    padding-top: 8px;
}

#__MTS #__MTS_room-list .MTS__roomSliderWrapper > div > div > div:first-child,
#__MTS #__MTS_room-slider .MTS__roomSliderWrapper > div > div > div:first-child {
  width: 100% !important;
}

/* === CARD GAP === */
#__MTS #__MTS_room-list .MTS__roomslist-listLayout,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout {
  display: flex;
  flex-direction: column;
  gap: 84px;
}

/* === CARD CONTAINER === */
#__MTS #__MTS_room-list .MTS__roomslist-listLayout-container {
  border: 1px solid #ffffff;
  flex-direction: row !important;
  gap: 0;
  min-height: 526px;  
}

#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container {
  border: 1px solid #C7B39A;
  flex-direction: row !important;
  gap: 0;
  min-height: 526px;
}

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-container,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container {
    margin-top: 30px;
}

/* === IMAGE SECTION === */
#__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head {
  width: 50%;
  flex-shrink: 0;
  margin-top: -30px;
  margin-bottom: 0;
  margin-left: 28px;
  position: relative;
  overflow: hidden;
}

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head img,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__image-sliderbutton > button,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__image-sliderbutton > button {
  height: 40px;
  width: 40px;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === CONTENT BODY === */
#__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-body,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-body {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 60px 20px 30px 65px;
}

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-body > div,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-body > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* === ROOM TITLE === */
#__MTS #__MTS_room-list .MTS__roomslist-listLayout-title,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-title {
  margin-bottom: 4px;
  width: 100%;
}

/* === SUBHEADING === */
#__MTS #__MTS_room-list .MTS__roomslist-listLayout-subHeading,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-subHeading {
  margin-top: 4px;
  width: 100%;
}

/* === PRICE === */
#__MTS #__MTS_room-list .MTS__mt-3.MTS__roomslist-listLayout-price,
#__MTS #__MTS_room-list .md\:MTS__mt-10.MTS__roomslist-listLayout-price,
#__MTS #__MTS_room-slider .MTS__mt-3.MTS__roomslist-listLayout-price,
#__MTS #__MTS_room-slider .md\:MTS__mt-10.MTS__roomslist-listLayout-price {
  margin-top: 0 !important;
  color: #FFFFFF;
  font-family: open-sans, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

/* === BUTTONS SECTION === */
#__MTS #__MTS_room-list #MTS__listButtonSectionID,
#__MTS #__MTS_room-slider #MTS__listButtonSectionID {
  flex-direction: column !important;
  margin-top: auto !important;
  width: 100%;
}

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-buttonWrapper,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-buttonWrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100%;
}

/* Details */
#__MTS #__MTS_room-list .MTS__detailButtonClass,
#__MTS #__MTS_room-slider .MTS__detailButtonClass {
  order: -1;
  flex-basis: 100%;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  margin-bottom: 20px;
}

#__MTS #__MTS_room-list .MTS__roomListDetailsLink,
#__MTS #__MTS_room-slider .MTS__roomListDetailsLink {
  font-family: open-sans, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF !important;
  line-height: 1.5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#__MTS #__MTS_room-list .MTS__roomListDetailsLink::after,
#__MTS #__MTS_room-slider .MTS__roomListDetailsLink::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='14' viewBox='0 0 7 14' fill='none'%3E%3Cpath d='M1 1L6 7L1 13' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

/* Anfragen + Buchen */
#__MTS #__MTS_room-list .MTS__enquiryButtonClass,
#__MTS #__MTS_room-list .MTS__bookingButtonClass,
#__MTS #__MTS_room-slider .MTS__enquiryButtonClass,
#__MTS #__MTS_room-slider .MTS__bookingButtonClass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#__MTS #__MTS_room-list .MTS__enquiryButtonClass + .MTS__bookingButtonClass,
#__MTS #__MTS_room-slider .MTS__enquiryButtonClass + .MTS__bookingButtonClass {
  margin-left: 21px;
}

/* === SLIDER NAV ARROWS === */
#__MTS #__MTS_room-list .MTS__roomSlider-navigation,
#__MTS #__MTS_room-slider .MTS__roomSlider-navigation {
  pointer-events: none;
}

#__MTS #__MTS_room-list .MTS__roomSlider-navigation-prev,
#__MTS #__MTS_room-list .MTS__roomSlider-navigation-next,
#__MTS #__MTS_room-slider .MTS__roomSlider-navigation-prev,
#__MTS #__MTS_room-slider .MTS__roomSlider-navigation-next {
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#__MTS #__MTS_room-list .MTS__roomSlider-navigation-prev svg,
#__MTS #__MTS_room-list .MTS__roomSlider-navigation-next svg,
#__MTS #__MTS_room-slider .MTS__roomSlider-navigation-prev svg,
#__MTS #__MTS_room-slider .MTS__roomSlider-navigation-next svg {
  stroke: #FFFFFF;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
}

#__MTS #__MTS_room-list .MTS__roomSlider-navigation .MTS__font-body,
#__MTS #__MTS_room-slider .MTS__roomSlider-navigation .MTS__font-body {
  font-family: open-sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
}

/* === HIDE UNWANTED === */
#__MTS #__MTS_room-list .MTS__roomTypeInfo,
#__MTS #__MTS_room-slider .MTS__roomTypeInfo { display: none; }

#__MTS #__MTS_room-list .actionButton,
#__MTS #__MTS_room-slider .actionButton { display: none; }

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-description,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-description { display: none; }

#__MTS #__MTS_room-list .roomeDescriptionDiv,
#__MTS #__MTS_room-slider .roomeDescriptionDiv { display: none; }

#__MTS #__MTS_room-list .MTS__roomslist-listLayout-head button,
#__MTS #__MTS_room-slider .MTS__roomslist-listLayout-head button { display: none !important; }

#__MTS #__MTS_room-slider .sm\:MTS__w-\[calc\(100\%_-_164px\)\] {
    width: 100%;
}

#__MTS #__MTS_room-slider .MTS__roomSlider-navigation {
    top: 0;
    transform: unset;
    justify-content: flex-end;
}

#__MTS #__MTS_room-slider .MTS__roomSlider-navigation > span {
    order: 0;
    display: flex;
}

#__MTS #__MTS_room-slider .MTS__roomSlider-navigation > button {
    order: 1;
    background-image: url(../static/images/arrow-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 32px;
    height: 32px;
}

#__MTS #__MTS_room-slider .MTS__roomSlider-navigation > button:first-child {
    transform: rotate(180deg);
}

#__MTS #__MTS_room-slider .MTS__roomSlider-navigation > button svg {
    display: none;
}

/* ============================================
   RESPONSIVE — ALL @media AT THE VERY END
   ONE block per breakpoint — never duplicate
   ============================================ */

@media (max-width: 1049px) {
  #__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head,
  #__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  #__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-body,
  #__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-body {
    width: 100%;
    padding: 40px 32px;
  }

  #__MTS #__MTS_room-list .MTS__roomslist-listLayout-container,
  #__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container {
    flex-direction: column;
  }

  #__MTS #__MTS_room-list #MTS__listButtonSectionID,
  #__MTS #__MTS_room-slider #MTS__listButtonSectionID {
    margin-top: 32px !important;
  }
  
  #__MTS #__MTS_room-slider .MTS__roomSlider-navigation {
    position: relative;
    margin-top: 16px;
  }

  #__MTS #__MTS_room-list .MTS__roomslist-listLayout-container, #__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container {
    margin-top: 24px;
  }
  
  #__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head, #__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-head {
    margin: -24px auto 0;
    width: calc(100% - 32px);
  }

  div#__MTS #__MTS_offer-list .MTS__offerCardGrid-title, div#__MTS #__MTS_offer-slider .MTS__offerCardGrid-title {
    font-size: 24px;
    word-break: break-word;
  }

  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:first-child > div {
    padding: 14px !important;
    color: #111111;
    border: 1px solid #111111;
    text-decoration: none;
  }

  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:first-child > div > .MTS__text-\[color\:var\(--MTS-color-alter\)\] {
    padding-bottom: 10px;
  }

  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:first-child > div.MTS__bg-\[color\:var\(--MTS-backgroundColor-main\)\] {
    background-color: #C7B39A;
  }

  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:first-child > div svg {
    fill: #111111;
  }

  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar .MTS__text-\[color\:var\(--MTS-color-alter\)\] {
    color: #111111;
    text-decoration: none;
    min-height: unset !important;
  }
  
  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar .MTS__overflow-scroll.MTS__mt-2.MTS__border-2.MTS__border-\[\#ebebebcc\].MTS__max-h-72 {
    border: 0 !important;
    overflow: hidden;
  }

  #__MTS #__MTS_room-list .MTS__roomSectionWrapper > .MTS__roomslist-cardLayout .services_sidebar > div:last-child {
    display: none;
  }

  #__MTS #__MTS_room-list .MTS__opacity-\[65\%\] {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  #__MTS #__MTS_room-list .MTS__roomslist-listLayout,
  #__MTS #__MTS_room-slider .MTS__roomslist-listLayout {
    gap: 40px;
  }

  #__MTS #__MTS_room-list .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-body,
  #__MTS #__MTS_room-slider .MTS__roomslist-listLayout-container .MTS__roomslist-listLayout-body {
    padding: 24px 20px;
  }

  #__MTS #__MTS_room-list .MTS__enquiryButtonClass,
  #__MTS #__MTS_room-list .MTS__bookingButtonClass,
  #__MTS #__MTS_room-slider .MTS__enquiryButtonClass,
  #__MTS #__MTS_room-slider .MTS__bookingButtonClass {
    padding: 14px 8px !important;
    flex-basis: calc(50% - 6px);
  }

  #__MTS #__MTS_room-list .MTS__enquiryButtonClass + .MTS__bookingButtonClass,
  #__MTS #__MTS_room-slider .MTS__enquiryButtonClass + .MTS__bookingButtonClass {
    margin-left: 12px;
  }

  #__MTS #__MTS_room-list .MTS__mt-3.MTS__roomslist-listLayout-price, #__MTS #__MTS_room-list .md\:MTS__mt-10.MTS__roomslist-listLayout-price, #__MTS #__MTS_room-slider .MTS__mt-3.MTS__roomslist-listLayout-price, #__MTS #__MTS_room-slider .md\:MTS__mt-10.MTS__roomslist-listLayout-price,
  #__MTS #__MTS_room-list .MTS__roomListDetailsLink, #__MTS #__MTS_room-slider .MTS__roomListDetailsLink {
    font-size: 14px !important;
  }

  #__MTS #__MTS_offer-list .MTS__offerCardGrid-price, #__MTS #__MTS_offer-slider .MTS__offerCardGrid-price {
    font-size: 14px;
  }

}

/* Roomlist Ends */


/* Offerlist/slider Starts */

/* === SELLA — WidgetOffersList LIST + SLIDER === */
/* Client: u1340 | Hotel: S005940 | Provider: kognitiv | Lang: de */
/* Figma: K6OI2uF0yukFiZH1R6SlVs node 5055-12472 */

/* === GLOBAL === */
#__MTS #__MTS_offer-list,
#__MTS #__MTS_offer-slider {
  font-family: open-sans, sans-serif;
}


/* Figma: slider actions group y=84 */
#__MTS #__MTS_offer-slider .MTS__max-w-widget {
  max-width: 1800px;
  padding-top: 0;
  padding-bottom: 0;
  padding: 0 16px;
}

/* === CARD GRID WRAPPER === */
/* Remove top padding from flex container */
#__MTS #__MTS_offer-list .MTS__flex.MTS__flex-col.MTS__pt-10 {
  padding-top: 0 !important; /* !important: overrides MTS__pt-10 */
}

#__MTS #__MTS_offer-list .MTS__flex.MTS__flex-wrap.MTS__filteredCards {
  row-gap: 84px;
  column-gap: 0;
  padding-left: 0;
}

/* === CARD ROOT === */
/* Figma: card bg = #C7B39A (gold), no border */
#__MTS #__MTS_offer-list .MTS__bg-primary-lighter .MTS__offerCardGrid-body {
    border: 1px solid #ffffff !important;
    border-top: 0 !important;
}

#__MTS #__MTS_offer-slider .MTS__bg-primary-lighter {
  border: 1px solid #C7B39A !important;
}

/* === IMAGE SECTION === */
/* Figma: image rect h=320px */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-head > div,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-head > div {
  min-height: 320px !important; /* !important: overrides md:MTS__min-h-[330px] */
  height: 320px;
}

/* === CARD BODY === */
/* Figma: text group width=356px centered inside 573px card */
/* Use max-width on content, not large padding */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-body,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-body {
  padding: 40px 16px !important; /* !important: overrides MTS__p-4 lg:MTS__p-6 */
  border: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 0 !important;
}

#__MTS #__MTS_offer-slider .MTS__image-head-popup {
    display: none;
}

/* Constrain text content to Figma width 356px */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-title,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-title,
#__MTS #__MTS_offer-list .MTS__offerCardGrid-availability-period,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-availability-period,
#__MTS #__MTS_offer-list .MTS__offerCardGrid-price,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-price,
#__MTS #__MTS_offer-list .MTS__offerCardGrid-buttons,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-buttons,
#__MTS #__MTS_offer-list .MTS__detailButtonClass,
#__MTS #__MTS_offer-slider .MTS__detailButtonClass {
  max-width: 556px;
  width: 100%;
}

/* === OFFER TITLE === */
/* Figma: Old Standard TT 32px 700 white CENTER, h=48px */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-title,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-title {
  text-align: center;
  color: #FFFFFF;
  font-family: old-standard-tt, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0 !important; /* !important: overrides MTS__mb-4 */
  word-break: break-word;
}

/* === AVAILABILITY PERIOD (date) === */
/* Figma: y=56 in text group → gap from title bottom (48px) = 56-48 = 8px */
/* open-sans 20px 400 white center */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-availability-period,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-availability-period {
  margin-top: 16px;
  margin-bottom: 0 !important; /* !important: overrides MTS__mb-4 */
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 400;
}

#__MTS #__MTS_offer-list .MTS__availabilityPeriod-head,
#__MTS #__MTS_offer-slider .MTS__availabilityPeriod-head {
  justify-content: center;
}

/* Hide calendar icon — Figma shows plain text date only */
#__MTS #__MTS_offer-list .MTS__availabilityPeriod-head svg,
#__MTS #__MTS_offer-slider .MTS__availabilityPeriod-head svg {
  display: none;
}

#__MTS #__MTS_offer-list .MTS__availabilityPeriod-head > div,
#__MTS #__MTS_offer-slider .MTS__availabilityPeriod-head > div {
  gap: 0 !important;
  font-family: open-sans, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

/* === PRICE ROW === */
/* Figma: y=94 in text group → gap from date bottom (56+30=86) = 94-86 = 8px */
/* open-sans 20px 400 white center */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-price,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-price {
  justify-content: center !important; /* !important: overrides MTS__justify-start */
  margin-top: 12px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 400;
}

#__MTS #__MTS_offer-list .MTS__offerCardGrid-price .MTS__font-semibold,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-price .MTS__font-semibold {
    font-size: 1em;
    font-weight: 400;
}

/* === DETAILS LINK — empty in buttonWithLink mode, handled by .MTS__detailButtonClass above === */

/* === DETAILS BUTTON → styled as text link (Figma: Details + arrow, top of actions) === */
/* cardDetailBtnView=buttonWithLink renders Details as .MTS__detailButtonClass inside buttons wrapper */
/* Fix: flex-basis 100% pushes it above Anfragen+Buchen row */
#__MTS #__MTS_offer-list .MTS__detailButtonClass,
#__MTS #__MTS_offer-slider .MTS__detailButtonClass {
  flex-basis: 100%;
  order: -1;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 0 8px 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #FFFFFF !important;
  font-family: open-sans, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  cursor: pointer;
}

/* Arrow after Details text */
#__MTS #__MTS_offer-list .MTS__detailButtonClass::after,
#__MTS #__MTS_offer-slider .MTS__detailButtonClass::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='14' viewBox='0 0 7 14' fill='none'%3E%3Cpath d='M1 1L6 7L1 13' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

/* === CTA BUTTONS (Anfragen + Buchen) === */
/* Figma: Actions frame gap=21.33px */
/* Anfragen: transparent bg, #111111 border 1px, #111111 text */
/* Buchen: #111111 bg, #111111 border 1px, #FFFFFF text */
#__MTS #__MTS_offer-list .MTS__offerCardGrid-buttons,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-buttons {
  justify-content: center;
  gap: 21px;
  margin-top: 72px;
  align-items: center;
  flex-wrap: wrap;
}

#__MTS #__MTS_offer-list .MTS__filterMain > div.MTS__flex.MTS__flex-wrap.MTS__w-full > div {
  padding: 42px 8px;
}

#__MTS #__MTS_offer-list .MTS__offerCardGrid-head .MTS__flex.MTS__items-center.MTS__absolute.MTS__gap-\[var\(--MTS-buttonGap\)\],
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-head .MTS__flex.MTS__items-center.MTS__absolute.MTS__gap-\[var\(--MTS-buttonGap\)\] {
  gap: 0;
}

#__MTS #__MTS_offer-list .MTS__offerCardGrid-head .MTS__flex.MTS__items-center.MTS__absolute.MTS__gap-\[var\(--MTS-buttonGap\)\] > button,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-head .MTS__flex.MTS__items-center.MTS__absolute.MTS__gap-\[var\(--MTS-buttonGap\)\] > button {
  background-color: #111111;
}

#__MTS #__MTS_offer-list .MTS__offerCardGrid-head .MTS__flex.MTS__items-center.MTS__absolute.MTS__gap-\[var\(--MTS-buttonGap\)\] > button > svg,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-head .MTS__flex.MTS__items-center.MTS__absolute.MTS__gap-\[var\(--MTS-buttonGap\)\] > button > svg {
  color: #ffffff;
}

/* === SLIDER CONTAINER === */
/* Figma: cards fill full width 1753px — remove 160px arrow reservation */
/* Make outer container flex-col so nav sits below cards */
#__MTS #__MTS_offer-slider .MTS__offerSlider-container {
  flex-direction: column;
  align-items: stretch;
}

#__MTS #__MTS_offer-slider .MTS__offerSlider-container .MTS__offerSlider-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

#__MTS #__MTS_offer-slider .MTS__offerSlider-container .MTS__offerSlider-wrapper .MTS__relative.MTS__top-0.MTS__bottom-0.MTS__flex.MTS__cursor-pointer > div {
    padding: 8px;
}

/* === SLIDER NAV === */
/* Figma: nav below cards, centered, gap=48px from cards, arrows gap=8px */
/* Override absolute positioning — nav must be below cards not overlapping */
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation {
  position: relative !important; /* !important: overrides MTS__absolute */
  top: auto !important;
  transform: none !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important; /* Figma: layout_UTWH5E gap=8px */
  margin-top: 48px; /* Figma: gap between cards row and nav */
  pointer-events: auto !important;
}

/* Arrow buttons — transparent bg, no border */
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-prev,
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-next {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Custom arrow image — Figma: 32×32px */
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-prev img,
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-next img {
  width: 32px !important;
  height: 32px !important;
}

/* Hide default BsChevron SVG when custom icon is used */
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-prev svg,
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-next svg {
  display: none;
}

#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-prev div,
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-next div {
    width: 32px;
    height: 32px;
}

/* Progress counter — white */
#__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-progress {
  color: #FFFFFF;
  font-family: open-sans, sans-serif;
  font-size: 20px;
}

/* === HIDE UNWANTED === */
#__MTS #__MTS_offer-list .MTS__sticky,
#__MTS #__MTS_offer-slider .MTS__sticky { display: none; }

#__MTS #__MTS_offer-list .MTS_offer-category,
#__MTS #__MTS_offer-slider .MTS_offer-category { display: none; }

#__MTS #__MTS_offer-list .MTS__offerCardGrid-mealplanInfo,
#__MTS #__MTS_offer-slider .MTS__offerCardGrid-mealplanInfo { display: none; }

/* ============================================
   RESPONSIVE — ALL @media AT THE VERY END
   ONE block per breakpoint — never duplicate
   ============================================ */

@media (max-width: 767px) {

  #__MTS #__MTS_offer-list .MTS__offerCardGrid-body, #__MTS #__MTS_offer-slider .MTS__offerCardGrid-body {
    padding: 26px 10px !important;
  }

  #__MTS #__MTS_offer-list .MTS__offerCardGrid-buttons, #__MTS #__MTS_offer-slider .MTS__offerCardGrid-buttons {
    margin-top: 28px;
  }

  #__MTS #__MTS_offer-list .MTS__offerCardGrid-buttons, #__MTS #__MTS_offer-slider .MTS__offerCardGrid-buttons {
    gap: 10px;
  }

  #__MTS #__MTS_offer-list .MTS__offerCardGrid-buttons .MTS__p-button, #__MTS #__MTS_offer-slider .MTS__offerCardGrid-buttons .MTS__p-button {
    padding: 10px 14px;
  }

  #__MTS #__MTS_offer-list .MTS__max-w-widget {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #__MTS #__MTS_offer-slider .MTS__offerSlider-navigation {
    margin-top: 12px;
  }

  #__MTS #__MTS_offer-slider .MTS__offerSlider-navigation-progress {
    font-size: 14px;
  }

  #__MTS #__MTS_offer-list .MTS__filterMain > div.MTS__flex.MTS__flex-wrap.MTS__w-full > div {
    padding: 10px 8px;
  }

  #__MTS #__MTS_room-slider .MTS__roomSlider-navigation,
  #__MTS #__MTS_offer-list .MTS__detailButtonClass, #__MTS #__MTS_offer-slider .MTS__detailButtonClass,
  #__MTS #__MTS_offer-list .MTS__offerCardGrid-price, #__MTS #__MTS_offer-slider .MTS__offerCardGrid-price,
  #__MTS #__MTS_offer-list .MTS__availabilityPeriod-head > div, #__MTS #__MTS_offer-slider .MTS__availabilityPeriod-head > div {
    font-size: 14px !important;
  }
}


/* Offerlist/slider Ends */


/* Start:: Request form */

/* === GLOBAL === */
#__MTS #__MTS_request-form-offers .MTS__requestform-container,
#__MTS #__MTS_request-form .MTS__requestform-container {
  border: none;
}

#__MTS #__MTS_request-form-offers .MTS__requestform-container > form > div,
#__MTS #__MTS_request-form .MTS__requestform-container > form > div {
  gap: 66px;
}

#__MTS #__MTS_request-form .MTS__requestform-container > form > div > div:last-child .MTS-personal-field > div:nth-child(2) {
  margin-top: 6.2em;
}

/* === FIELD SPACING === */
#__MTS #__MTS_request-form-offers .MTS__flex.MTS__gap-2.MTS__flex-col,
#__MTS #__MTS_request-form .MTS__flex.MTS__gap-2.MTS__flex-col {
  gap: 24px;
}

#__MTS #__MTS_request-form-offers .MTS__flex.MTS__flex-col.MTS__gap-2,
#__MTS #__MTS_request-form .MTS__flex.MTS__flex-col.MTS__gap-2 {
  gap: 24px;
}

#__MTS #__MTS_request-form-offers .MTS__flex.MTS__flex-col.MTS__gap-2 .MTS__offer-price-info strong {
  font-weight: 400;
}

/* === INPUTS === */
/* Input inner padding — text must start at 22px from left */
#__MTS #__MTS_request-form-offers .MTS__border-input input,
#__MTS #__MTS_request-form .MTS__border-input input {
  padding-left: 22px;
}

/* === TEXTAREA === */
#__MTS #__MTS_request-form-offers textarea,
#__MTS #__MTS_request-form textarea {
  min-height: 137px;
  padding-left: 22px;
}

/* === CALENDAR ICON — custom white Figma icon === */
/* Hide default SVG, show custom via background on the span */
#__MTS #__MTS_request-form-offers .MTS__calendarIcon,
#__MTS #__MTS_request-form .MTS__calendarIcon {
  display: flex !important; /* overrides Tailwind hidden — specificity needed */
  width: 33px;
  height: 33px;
  margin-top: 0;
}

#__MTS #__MTS_request-form-offers .MTS__calendarIcon > span,
#__MTS #__MTS_request-form .MTS__calendarIcon > span {
  display: block;
  width: 33px;
  height: 33px;
  margin-top: 0;
  position: relative;
}

#__MTS #__MTS_request-form-offers .MTS__calendarIcon > span > svg,
#__MTS #__MTS_request-form .MTS__calendarIcon > span > svg {
  display: none;
}

#__MTS #__MTS_request-form-offers .MTS__altCalendar > span::before,
#__MTS #__MTS_request-form .MTS__altCalendar > span::before,
#__MTS #__MTS_request-form-offers .MTS__calendarIcon > span::before,
#__MTS #__MTS_request-form .MTS__calendarIcon > span::before {
  content: '';
  display: block;
  width: 33px;
  height: 33px;
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='33' viewBox='0 0 31 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.10022 0C6.04728 0 5.18043 0.878173 5.18043 1.94486V3.22427H3.2845C1.47445 3.22427 0 4.7212 0 6.55489V29.6694C0 31.5031 1.47445 33 3.2845 33H27.7155C29.5255 33 31 31.5031 31 29.6694L30.9984 6.55489C30.9984 4.7212 29.524 3.22427 27.7139 3.22427H25.8196V1.94486C25.8196 0.878173 24.9527 0 23.8998 0C22.8453 0 21.9768 0.878173 21.9768 1.94486V3.22427H9.02346V1.94486C9.02346 0.878173 8.15319 0 7.10022 0ZM7.10022 1.26972C7.48195 1.26972 7.77142 1.55815 7.77142 1.94486V5.77823C7.77142 6.16495 7.48194 6.45337 7.10022 6.45337C6.7185 6.45337 6.42902 6.16494 6.42902 5.77823V1.94486C6.42902 1.55814 6.7185 1.26972 7.10022 1.26972ZM23.9014 1.26972C24.2816 1.26972 24.5663 1.55815 24.5663 1.94486V5.77823C24.5663 6.16495 24.2816 6.45337 23.9014 6.45337C23.5197 6.45337 23.2302 6.16494 23.2302 5.77823V1.94486C23.2302 1.55814 23.5197 1.26972 23.9014 1.26972ZM3.28613 4.49238H5.18206V5.77662C5.18206 6.84492 6.04891 7.71987 7.10185 7.71987C8.15637 7.71987 9.02485 6.84331 9.02485 5.77662V4.49238H21.9782V5.77662C21.9782 6.84492 22.8482 7.71987 23.9012 7.71987C24.9541 7.71987 25.821 6.84331 25.821 5.77662V4.49238H27.7153C28.8526 4.49238 29.7449 5.40116 29.7449 6.55328V10.3867H1.25017V6.55328C1.25017 5.40116 2.14724 4.49238 3.2845 4.49238H3.28613ZM1.2518 11.6563H29.7465V29.6694C29.7465 30.8215 28.8542 31.7303 27.7169 31.7303H3.28593C2.14867 31.7303 1.2516 30.8215 1.2516 29.6694L1.2518 11.6563ZM5.73733 14.7855C5.39059 14.7839 5.10905 15.0675 5.10905 15.4171V20.0982C5.10905 20.2674 5.17426 20.4301 5.29197 20.5494C5.40967 20.6686 5.57031 20.7363 5.73734 20.7347H10.3581C10.7048 20.7331 10.9832 20.4478 10.9815 20.0982V15.4171C10.9799 15.0691 10.7016 14.7871 10.3581 14.7855L5.73733 14.7855ZM13.1925 14.7855C12.8473 14.7839 12.5642 15.0675 12.5642 15.4171V20.0982C12.5642 20.2674 12.6294 20.4301 12.7471 20.5494C12.8648 20.6686 13.0254 20.7363 13.1925 20.7347H17.8115C17.9786 20.7347 18.1376 20.667 18.2553 20.5477C18.373 20.4285 18.4382 20.2658 18.4366 20.0982V15.4171C18.435 15.0675 18.1551 14.7855 17.8115 14.7855L13.1925 14.7855ZM20.6459 14.7855C20.3024 14.7871 20.0241 15.0691 20.0225 15.4171V20.0982C20.0209 20.4494 20.3008 20.7347 20.6459 20.7347H25.2667C25.4337 20.7347 25.5943 20.6686 25.712 20.5493C25.8297 20.4301 25.8965 20.2674 25.8965 20.0982V15.4171C25.8965 15.2479 25.8297 15.0868 25.7104 14.9692C25.5927 14.8499 25.4337 14.7839 25.2667 14.7855L20.6459 14.7855ZM6.36114 16.0552H9.72834V19.4648H6.36114V16.0552ZM13.8163 16.0552H17.1819V19.4648H13.8163V16.0552ZM21.2742 16.0552H24.6414V19.4648H21.2742V16.0552ZM5.73611 22.4407C5.5691 22.4407 5.40846 22.5068 5.29074 22.626C5.17303 22.7453 5.10623 22.908 5.10782 23.0772V27.7583C5.10941 28.1095 5.39094 28.3915 5.7361 28.3899H10.3568C10.7004 28.3883 10.9787 28.1063 10.9803 27.7583V23.0772C10.9819 22.7276 10.702 22.4423 10.3568 22.4407L5.73611 22.4407ZM13.1912 22.4407C13.0242 22.4407 12.8636 22.5068 12.7459 22.626C12.6282 22.7453 12.5614 22.908 12.5629 23.0772V27.7583C12.5645 28.1095 12.8461 28.3915 13.1912 28.3899H17.8103C18.1555 28.3899 18.4338 28.1063 18.4354 27.7583V23.0772C18.4354 22.908 18.3702 22.7469 18.2541 22.6277C18.1364 22.5084 17.9773 22.4408 17.8103 22.4408L13.1912 22.4407ZM20.6447 22.4407C20.298 22.4423 20.0196 22.7275 20.0212 23.0772V27.7583C20.0228 28.1063 20.3012 28.3883 20.6447 28.3899H25.2654C25.4324 28.3899 25.5915 28.3238 25.7092 28.2062C25.8269 28.087 25.8937 27.9258 25.8953 27.7583V23.0772C25.8953 22.908 25.8301 22.7453 25.7108 22.626C25.5931 22.5068 25.4324 22.4391 25.2654 22.4407L20.6447 22.4407ZM6.35992 23.712H9.72712V27.1216H6.35992V23.712ZM13.815 23.712H17.1806V27.1216H13.815V23.712ZM21.273 23.712H24.6402V27.1216H21.273V23.712Z' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#__MTS #__MTS_request-form-offers .MTS__altCalendar > span::before,
#__MTS #__MTS_request-form-offers .MTS__calendarIcon > span::before {
  background-image: url('../static/images/calendar-dark.svg');
}

/* Also target the alt calendar icon */
#__MTS #__MTS_request-form-offers .MTS__altCalendar,
#__MTS #__MTS_request-form .MTS__altCalendar {
  display: flex !important; /* overrides Tailwind hidden */
  width: 33px;
  height: 33px;
}

#__MTS #__MTS_request-form-offers .MTS__altCalendar > span,
#__MTS #__MTS_request-form .MTS__altCalendar > span {
  display: block;
  width: 33px;
  height: 33px;
  position: relative;
}

#__MTS #__MTS_request-form-offers .MTS__altCalendar > span > svg,
#__MTS #__MTS_request-form .MTS__altCalendar > span > svg {
  display: none;
}

/* === CHECKBOX === */
/* Visual checkbox div (the actual input is opacity-0) */
#__MTS #__MTS_request-form-offers .MTS__newsletter > div:first-child,
#__MTS #__MTS_request-form .MTS__newsletter > div:first-child,
#__MTS #__MTS_request-form-offers .MTS__privacy_checkbox > div:first-child,
#__MTS #__MTS_request-form .MTS__privacy_checkbox > div:first-child {
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
  background-color: var(--MTS-backgroundColor-primary-lighter);
  border: 1px solid var(--MTS-borderColor);
  border-radius: 0px;
}

/* Checkmark SVG inside — scale up for 27px box */
#__MTS #__MTS_request-form-offers .MTS__newsletter > div:nth-child(2) svg,
#__MTS #__MTS_request-form .MTS__newsletter > div:nth-child(2) svg,
#__MTS #__MTS_request-form-offers .MTS__privacy_checkbox > div:nth-child(2) svg,
#__MTS #__MTS_request-form .MTS__privacy_checkbox > div:nth-child(2) svg {
  width: 18px;
  height: 18px;
  left: 4px;
}

#__MTS #__MTS_request-form-offers .MTS__privacy_checkbox > div:nth-child(2) svg,
#__MTS #__MTS_request-form .MTS__privacy_checkbox > div:nth-child(2) svg {
  top: 8px;
}

#__MTS #__MTS_request-form-offers .MTS__occupancy-dropdown,
#__MTS #__MTS_request-form .MTS__occupancy-dropdown {
  gap: 20px;
}

/* Hidden input — match size for click area */
#__MTS #__MTS_request-form-offers input[type="checkbox"],
#__MTS #__MTS_request-form input[type="checkbox"] {
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
}

/* Newsletter label left margin to account for bigger checkbox */
#__MTS #__MTS_request-form-offers .MTS__newsletter .MTS__newsletter_label,
#__MTS #__MTS_request-form .MTS__newsletter .MTS__newsletter_label {
  margin-left: 36px;
}

/* === SELECT OPTIONS === */
#__MTS #__MTS_request-form-offers select option,
#__MTS #__MTS_request-form select option {
  background-color: #C7B39A;
  color: #111111;
}

/* === PLACEHOLDER TEXT === */
#__MTS #__MTS_request-form-offers input::placeholder,
#__MTS #__MTS_request-form input::placeholder,
#__MTS #__MTS_request-form-offers textarea::placeholder,
#__MTS #__MTS_request-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* === FONT WEIGHTS (not wired via tokens) === */
#__MTS #__MTS_request-form-offers .MTS__font-label,
#__MTS #__MTS_request-form .MTS__font-label {
  font-weight: 400;
}

#__MTS #__MTS_request-form-offers .MTS__font-button,
#__MTS #__MTS_request-form .MTS__font-button {
  font-weight: 600;
}

/* === ROOM CARD === */
/* Card container — gold bg, white border, 24px padding */
#__MTS #__MTS_request-form-offers .roomCardClass .MTS__roomCardBox {
  border: 1px solid #111111;
  padding: 24px;
}

#__MTS #__MTS_request-form .roomCardClass .MTS__roomCardBox {
  border: 1px solid #FFFFFF;
  padding: 24px;
}

#__MTS #__MTS_request-form .roomCardClass .MTS__roomCardBox .lg\:MTS__h-\[360px\] {
  max-height: 280px;
}

#__MTS #__MTS_request-form-offers .roomCardClass .MTS__roomCardBox > .MTS__flex.MTS__flex-col.lg\:MTS__pt-5.MTS__pt-4.MTS__break-all > .MTS__flex.MTS__flex-wrap.MTS__items-end {
  align-items: flex-start;
}

#__MTS #__MTS_request-form .roomCardClass .MTS__roomCardBox > .MTS__flex.MTS__flex-col.lg\:MTS__pt-5.MTS__pt-4.MTS__break-all > .MTS__flex.MTS__flex-wrap.MTS__items-end {
  align-items: center;
}

/* Title — Old Standard TT, 32px, Bold, white, left-aligned */
#__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-heading {
  font-family: old-standard-tt, sans-serif;
  font-size: 32px;
  color: #111111;
  text-align: left;
}

#__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-heading {
  font-family: old-standard-tt, sans-serif;
  font-size: 32px;
  color: #FFFFFF;
  text-align: left;
  font-weight: 700;
}

/* Price text — right aligned */
#__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-subHeading {
  color: #111111;
  margin-left: 0;
  margin-bottom: 10px;
  font-size: 24px;
}

#__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-subHeading strong {
  font-weight: 400;
}

#__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-subHeading {
  color: #FFFFFF;
}

#__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-subHeading strong {
  font-weight: 400;
}

/* Size/persons info */
#__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-label {
  color: #111111;
  font-size: 24px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

#__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-label {
  color: #FFFFFF;
  font-size: 18px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

#__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-label .MTS__forLabel {
  height: 100%;
  width: 2px;
  background-color: #111111;
  margin: 0 8px;
}

#__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-label .MTS__forLabel {
  height: 100%;
  width: 2px;
  background-color: #ffffff;
  margin: 0 8px;
}

/* Description */
#__MTS #__MTS_request-form-offers .MTS__requestform_roomdescription {
  color: #111111;
}

#__MTS #__MTS_request-form .MTS__requestform_roomdescription {
  color: #FFFFFF;
}

/* === OFFER CARD CALENDAR ICON === */
/* Replace react-icons checkmark calendar with same custom icon as period field */
#__MTS #__MTS_request-form-offers .MTS__offer-calendar-icon,
#__MTS #__MTS_request-form .MTS__offer-calendar-icon {
  width: 25px;
  height: 25px;
  position: relative;
}

#__MTS #__MTS_request-form-offers .MTS__offer-calendar-icon > g,
#__MTS #__MTS_request-form .MTS__offer-calendar-icon > g,
#__MTS #__MTS_request-form-offers .MTS__offer-calendar-icon > path,
#__MTS #__MTS_request-form .MTS__offer-calendar-icon > path {
  display: none;
}

#__MTS #__MTS_request-form-offers .MTS__offerDate-wrapper,
#__MTS #__MTS_request-form .MTS__offerDate-wrapper {
  position: relative;
}

#__MTS #__MTS_request-form-offers .MTS__offerDate-wrapper .MTS__offer-calendar-icon {
  background-image: url('../static/images/calendar-dark.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

#__MTS #__MTS_request-form .MTS__offerDate-wrapper .MTS__offer-calendar-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='33' viewBox='0 0 31 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.10022 0C6.04728 0 5.18043 0.878173 5.18043 1.94486V3.22427H3.2845C1.47445 3.22427 0 4.7212 0 6.55489V29.6694C0 31.5031 1.47445 33 3.2845 33H27.7155C29.5255 33 31 31.5031 31 29.6694L30.9984 6.55489C30.9984 4.7212 29.524 3.22427 27.7139 3.22427H25.8196V1.94486C25.8196 0.878173 24.9527 0 23.8998 0C22.8453 0 21.9768 0.878173 21.9768 1.94486V3.22427H9.02346V1.94486C9.02346 0.878173 8.15319 0 7.10022 0ZM7.10022 1.26972C7.48195 1.26972 7.77142 1.55815 7.77142 1.94486V5.77823C7.77142 6.16495 7.48194 6.45337 7.10022 6.45337C6.7185 6.45337 6.42902 6.16494 6.42902 5.77823V1.94486C6.42902 1.55814 6.7185 1.26972 7.10022 1.26972ZM23.9014 1.26972C24.2816 1.26972 24.5663 1.55815 24.5663 1.94486V5.77823C24.5663 6.16495 24.2816 6.45337 23.9014 6.45337C23.5197 6.45337 23.2302 6.16494 23.2302 5.77823V1.94486C23.2302 1.55814 23.5197 1.26972 23.9014 1.26972ZM3.28613 4.49238H5.18206V5.77662C5.18206 6.84492 6.04891 7.71987 7.10185 7.71987C8.15637 7.71987 9.02485 6.84331 9.02485 5.77662V4.49238H21.9782V5.77662C21.9782 6.84492 22.8482 7.71987 23.9012 7.71987C24.9541 7.71987 25.821 6.84331 25.821 5.77662V4.49238H27.7153C28.8526 4.49238 29.7449 5.40116 29.7449 6.55328V10.3867H1.25017V6.55328C1.25017 5.40116 2.14724 4.49238 3.2845 4.49238H3.28613ZM1.2518 11.6563H29.7465V29.6694C29.7465 30.8215 28.8542 31.7303 27.7169 31.7303H3.28593C2.14867 31.7303 1.2516 30.8215 1.2516 29.6694L1.2518 11.6563ZM5.73733 14.7855C5.39059 14.7839 5.10905 15.0675 5.10905 15.4171V20.0982C5.10905 20.2674 5.17426 20.4301 5.29197 20.5494C5.40967 20.6686 5.57031 20.7363 5.73734 20.7347H10.3581C10.7048 20.7331 10.9832 20.4478 10.9815 20.0982V15.4171C10.9799 15.0691 10.7016 14.7871 10.3581 14.7855L5.73733 14.7855ZM13.1925 14.7855C12.8473 14.7839 12.5642 15.0675 12.5642 15.4171V20.0982C12.5642 20.2674 12.6294 20.4301 12.7471 20.5494C12.8648 20.6686 13.0254 20.7363 13.1925 20.7347H17.8115C17.9786 20.7347 18.1376 20.667 18.2553 20.5477C18.373 20.4285 18.4382 20.2658 18.4366 20.0982V15.4171C18.435 15.0675 18.1551 14.7855 17.8115 14.7855L13.1925 14.7855ZM20.6459 14.7855C20.3024 14.7871 20.0241 15.0691 20.0225 15.4171V20.0982C20.0209 20.4494 20.3008 20.7347 20.6459 20.7347H25.2667C25.4337 20.7347 25.5943 20.6686 25.712 20.5493C25.8297 20.4301 25.8965 20.2674 25.8965 20.0982V15.4171C25.8965 15.2479 25.8297 15.0868 25.7104 14.9692C25.5927 14.8499 25.4337 14.7839 25.2667 14.7855L20.6459 14.7855ZM6.36114 16.0552H9.72834V19.4648H6.36114V16.0552ZM13.8163 16.0552H17.1819V19.4648H13.8163V16.0552ZM21.2742 16.0552H24.6414V19.4648H21.2742V16.0552ZM5.73611 22.4407C5.5691 22.4407 5.40846 22.5068 5.29074 22.626C5.17303 22.7453 5.10623 22.908 5.10782 23.0772V27.7583C5.10941 28.1095 5.39094 28.3915 5.7361 28.3899H10.3568C10.7004 28.3883 10.9787 28.1063 10.9803 27.7583V23.0772C10.9819 22.7276 10.702 22.4423 10.3568 22.4407L5.73611 22.4407ZM13.1912 22.4407C13.0242 22.4407 12.8636 22.5068 12.7459 22.626C12.6282 22.7453 12.5614 22.908 12.5629 23.0772V27.7583C12.5645 28.1095 12.8461 28.3915 13.1912 28.3899H17.8103C18.1555 28.3899 18.4338 28.1063 18.4354 27.7583V23.0772C18.4354 22.908 18.3702 22.7469 18.2541 22.6277C18.1364 22.5084 17.9773 22.4408 17.8103 22.4408L13.1912 22.4407ZM20.6447 22.4407C20.298 22.4423 20.0196 22.7275 20.0212 23.0772V27.7583C20.0228 28.1063 20.3012 28.3883 20.6447 28.3899H25.2654C25.4324 28.3899 25.5915 28.3238 25.7092 28.2062C25.8269 28.087 25.8937 27.9258 25.8953 27.7583V23.0772C25.8953 22.908 25.8301 22.7453 25.7108 22.626C25.5931 22.5068 25.4324 22.4391 25.2654 22.4407L20.6447 22.4407ZM6.35992 23.712H9.72712V27.1216H6.35992V23.712ZM13.815 23.712H17.1806V27.1216H13.815V23.712ZM21.273 23.712H24.6402V27.1216H21.273V23.712Z' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* === BUTTONS === */
#__MTS #__MTS_request-form-offers .MTS__bg-button,
#__MTS #__MTS_request-form .MTS__bg-button {
  margin-left: auto;
}

/* === CALENDAR === */
/* Calendar popup wrapper — white bg, no shadow, contained */
#__MTS #__MTS_request-form-offers .MTS__shadow-lg.MTS__absolute,
#__MTS #__MTS_request-form .MTS__shadow-lg.MTS__absolute {
  background-color: #FFFFFF;
  color: #111111;
  box-shadow: none;
  max-width: 100%;
  z-index: 100;
  border: 0;
  padding: 0;
}

/* Calendar outer border — Figma: 0.5px solid black, no internal borders */
#__MTS #__MTS_request-form-offers .MTS__border.formCalendar,
#__MTS #__MTS_request-form .MTS__border.formCalendar {
  background-color: #FFFFFF;
  overflow: hidden;
}

/* Restore the month row bottom border (Figma: thin line below title) */
#__MTS #__MTS_request-form-offers .formCalendar .MTS__border-b,
#__MTS #__MTS_request-form .formCalendar .MTS__border-b {
  border-bottom: 0.5px solid #e0e0e0 !important; /* !important: Figma shows thin light grey separator */
}


/* Month name — Figma: "May 2025" centered, ~24px, regular weight */
#__MTS #__MTS_request-form-offers .MTS__MonthNameClass,
#__MTS #__MTS_request-form .MTS__MonthNameClass {
  color: #111111;
  font-family: open-sans, sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

#__MTS #__MTS_request-form-offers .MTS__MonthNameClass b,
#__MTS #__MTS_request-form .MTS__MonthNameClass b {
  font-weight: 400;
}

/* Nav arrows — Figma: custom long arrows, gold fill #C7B39A, grey stroke #666666 */
#__MTS #__MTS_request-form-offers .formCalendar button,
#__MTS #__MTS_request-form .formCalendar button {
  color: #666666;
  background: transparent;
  border: none !important; /* !important: remove any Tailwind border */
  padding: 0;
  width: 30px;
  height: 17px;
  top: 22px;
}

#__MTS #__MTS_request-form-offers .formCalendar button svg,
#__MTS #__MTS_request-form .formCalendar button svg {
  display: none;
}

/* Left arrow */
#__MTS #__MTS_request-form-offers .formCalendar button:first-of-type,
#__MTS #__MTS_request-form .formCalendar button:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='17' viewBox='0 0 30 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.465842 8.5L8.70446 16.5554L8.87079 16.405L1.4599 9.12079L0.894554 8.56535H29.5233V8.3703H0.95396L1.52525 7.81386L8.93416 0.592079L8.76881 0.443564L0.465842 8.5Z' fill='%23C7B39A' stroke='%23666666' stroke-width='0.64'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Right arrow */
#__MTS #__MTS_request-form-offers .formCalendar button:last-of-type,
#__MTS #__MTS_request-form .formCalendar button:last-of-type {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='17' viewBox='0 0 30 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.3822 8.5L21.1436 16.5554L20.9772 16.405L28.3881 9.12079L28.9535 8.56535H0.324752V8.3703H28.8941L28.3228 7.81386L20.9139 0.592079L21.0792 0.443564L29.3822 8.5Z' fill='%23C7B39A' stroke='%23666666' stroke-width='0.64'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Day headers (Mo Di Mi...) — Figma: open-sans 18px Regular, black */
#__MTS #__MTS_request-form-offers .MTS__DaysClass,
#__MTS #__MTS_request-form .MTS__DaysClass {
  gap: 8px;
  padding: 0 0 14px;
}

#__MTS #__MTS_request-form-offers .MTS__DaysClass > div,
#__MTS #__MTS_request-form .MTS__DaysClass > div {
  color: #111111;
  font-weight: 400;
  font-size: 18px;
}

/* Date cells grid — Figma: ~8px gap between 48.49px circles */
#__MTS #__MTS_request-form-offers .MTS__DatesClass,
#__MTS #__MTS_request-form .MTS__DatesClass {
  gap: 8px;
}

/* Date cells — Figma: 48.49px circles, open-sans 12px, white text */
#__MTS #__MTS_request-form-offers .MTS__DatesClass > span {
  color: #111111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  aspect-ratio: 1 / 1;
  font-size: 12px;
  width: 100%;
  height: auto;
}

#__MTS #__MTS_request-form .MTS__DatesClass > span {
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  aspect-ratio: 1 / 1;
  font-size: 12px;
  width: 100%;
  height: auto;
}

/* Calendar month separator */
#__MTS #__MTS_request-form-offers .MTS__MonthParentClass,
#__MTS #__MTS_request-form .MTS__MonthParentClass {
  border-bottom: none;
}

/* Calendar legend dots — circles */
#__MTS #__MTS_request-form-offers #MTS__KeyCartogramID span,
#__MTS #__MTS_request-form #MTS__KeyCartogramID span {
  border-radius: 50% !important;
}

/* Legend "gewählter Zeitraum" dot = gold */
#__MTS #__MTS_request-form-offers .MTS__SelectedClass,
#__MTS #__MTS_request-form .MTS__SelectedClass {
  background-color: #C7B39A; 
}

/* Legend "Ankunft möglich" dot = dark grey */
#__MTS #__MTS_request-form-offers .MTS__ArrivalClass,
#__MTS #__MTS_request-form .MTS__ArrivalClass {
  background-color: #666666;
}

/* === REQUIRED ASTERISK === */
#__MTS #__MTS_request-form-offers .MTS__text-danger,
#__MTS #__MTS_request-form .MTS__text-danger {
  color: #ffffff;
}

#__MTS #__MTS_request-form-offers .MTS-privacy-field,
#__MTS #__MTS_request-form .MTS-privacy-field {
  margin-top: 25px;
}

#__MTS #__MTS_request-form-offers .MTS-privacy-field .MTS__privacy_text,
#__MTS #__MTS_request-form .MTS-privacy-field .MTS__privacy_text {
  padding-top: 5px;
}

#__MTS #__MTS_request-form-offers .MTS__MonthParentClass,
#__MTS #__MTS_request-form .MTS__MonthParentClass,
#__MTS #__MTS_request-form-offers .MTS__calendarMain,
#__MTS #__MTS_request-form .MTS__calendarMain {
  padding: 0;
}

#__MTS #__MTS_request-form-offers .MTS__calendarMain .formCalendar,
#__MTS #__MTS_request-form .MTS__calendarMain .formCalendar {
  border: 0 !important;
}

#__MTS #__MTS_request-form-offers .formCalendar .MTS__border-b,
#__MTS #__MTS_request-form .formCalendar .MTS__border-b {
  padding: 16px;
}

#__MTS #__MTS_request-form-offers .formCalendar #MTS__MainDaysAndDatesHolderID,
#__MTS #__MTS_request-form .formCalendar #MTS__MainDaysAndDatesHolderID {
  padding: 0 20px 20px;
}

#__MTS #__MTS_request-form-offers #MTS__MainMonthHolderID .MTS__DatesClass > span[class*="calendar-module_lar_closed"],
#__MTS #__MTS_request-form #MTS__MainMonthHolderID .MTS__DatesClass > span[class*="calendar-module_lar_closed"] {
  background: repeating-linear-gradient(to bottom right, #cccccc 3%, rgba(233, 232, 232, 0.50) 5%, rgba(233, 232, 232, 0.50) 12%);
  color: #666666;
}

#__MTS #__MTS_request-form-offers #MTS__MainCalendarHolderID .MTS__MonthNameClass + div .MTS__text-center.MTS__py-2.MTS__border-b,
#__MTS #__MTS_request-form #MTS__MainCalendarHolderID .MTS__MonthNameClass + div .MTS__text-center.MTS__py-2.MTS__border-b {
  padding: 0;
}

#__MTS #__MTS_request-form-offers #MTS__MainCalendarHolderID .MTS__MonthNameClass + div .MTS__text-center.MTS__py-2.MTS__border-b > span,
#__MTS #__MTS_request-form #MTS__MainCalendarHolderID .MTS__MonthNameClass + div .MTS__text-center.MTS__py-2.MTS__border-b > span {
  display: inline-block;
}

#__MTS #__MTS_request-form-offers .MTS__CancelButtonClass,
#__MTS #__MTS_request-form .MTS__CancelButtonClass {
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
}

#__MTS #__MTS_request-form-offers .MTS__CancelButtonClass > svg,
#__MTS #__MTS_request-form .MTS__CancelButtonClass > svg {
  width: 8px;
  height: 8px;
}

#__MTS #__MTS_request-form-offers .MTS__preriodtext,
#__MTS #__MTS_request-form .MTS__preriodtext {
  margin-top: 5px;
}

#__MTS #__MTS_request-form-offers .MTS-period-field > .MTS__flex.MTS__flex-col.MTS__gap-2.MTS__justify-between.MTS__items-start.MTS__w-full.MTS__mb-3 .MTS__shadow-lg.MTS__absolute.MTS__top-12.MTS__left-0.sm\:MTS__translate-x-0.MTS__left-0.MTS__w-\[320px\].sm\:MTS__w-\[430px\].MTS__bg-input.MTS__z-50.MTS__p-2.MTS__visible,
#__MTS #__MTS_request-form .MTS-period-field > .MTS__flex.MTS__flex-col.MTS__gap-2.MTS__justify-between.MTS__items-start.MTS__w-full.MTS__mb-3 .MTS__shadow-lg.MTS__absolute.MTS__top-12.MTS__left-0.sm\:MTS__translate-x-0.MTS__left-0.MTS__w-\[320px\].sm\:MTS__w-\[430px\].MTS__bg-input.MTS__z-50.MTS__p-2.MTS__visible {
  top: 5.25em;
}

#__MTS #__MTS_request-form-offers input:-webkit-autofill,
#__MTS #__MTS_request-form-offers input:-webkit-autofill:hover, 
#__MTS #__MTS_request-form-offers input:-webkit-autofill:focus, 
#__MTS #__MTS_request-form-offers input:-webkit-autofill:active
#__MTS #__MTS_request-form input:-webkit-autofill,
#__MTS #__MTS_request-form input:-webkit-autofill:hover, 
#__MTS #__MTS_request-form input:-webkit-autofill:focus, 
#__MTS #__MTS_request-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 60px #C7B39A inset !important;
    -webkit-text-fill-color: #ffffff !important
}

#__MTS #__MTS_request-form-offers .MTS__text-heading,
#__MTS #__MTS_request-form .MTS__text-heading {
  word-break: break-word;
}

#__MTS #__MTS_request-form-offers .MTS__requestForm-success,
#__MTS #__MTS_request-form .MTS__requestForm-success {
  background-color: #111111;
  border: 0;
}

#__MTS #__MTS_request-form .offerCardClass .MTS__flex.MTS__flex-col.MTS__gap-2 {
  gap: 8px;
  font-size: 1em;
}

#__MTS #__MTS_request-form .offerCardClass .MTS__text-sm {
  font-size: 1em;
}

/* width */
#__MTS ::-webkit-scrollbar,
#__MTS ::-webkit-scrollbar {
  width: 5px !important;
}

/* Track */
#__MTS ::-webkit-scrollbar-track,
#__MTS ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25) !important; 
}
 
/* Handle */
#__MTS ::-webkit-scrollbar-thumb,
#__MTS ::-webkit-scrollbar-thumb {
  background: #111111 !important; 
}

/* Handle on hover */
#__MTS ::-webkit-scrollbar-thumb:hover,
#__MTS ::-webkit-scrollbar-thumb:hover {
  background: #111111 !important; 
}

@media only screen and (max-width: 1049px) {
  #__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-label,
  #__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-label {
    font-size: 18px
  }

  #__MTS #__MTS_request-form-offers .MTS-privacy-field .MTS__privacy_text,
  #__MTS #__MTS_request-form .MTS-privacy-field .MTS__privacy_text {
    padding-left: 5px;
  }

  #__MTS #__MTS_request-form-offers .MTS__requestform-container > form > div,
  #__MTS #__MTS_request-form .MTS__requestform-container > form > div {
    gap: 24px;
  }
}

@media only screen and (max-width: 767px) {

  #__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-heading,
  #__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-heading {
    font-size: 24px;
  }

  #__MTS #__MTS_request-form-offers .roomCardClass .MTS__roomCardBox,
  #__MTS #__MTS_request-form .roomCardClass .MTS__roomCardBox {
    padding: 16px;
  }

  #__MTS #__MTS_request-form-offers .MTS__roomCardBox .MTS__font-subHeading,
  #__MTS #__MTS_request-form .MTS__roomCardBox .MTS__font-subHeading {
    margin-left: 0;
  }

  #__MTS #__MTS_request-form .MTS__requestform-container > form > div > div:last-child .MTS-personal-field > div:nth-child(2) {
    margin-top: 0;
  }
}

/* End:: Request form */


/* Start:: Offer detail */

/* === GLOBAL === */
#__MTS #__MTS_offer-detail {
  background-color: #FFFFFF;
  font-family: 'open-sans', sans-serif;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__max-w-widget {
  max-width: 1300px;
  padding: 0;
}
/* Figma: content at x=49, y=49 inside 1300px frame → 49px padding */
#__MTS #__MTS_offer-detail .MTS__room-card-wrapper {
  padding-left: 49px;
  padding-right: 49px;
  padding-top: 123px;
}

/* === CARD WRAPPER === */

/* === LAYOUT ORDER: image(1) → title+price/date row(2) → description(3) ===
   v7 DOM order: offerDetail-title → offer-header-image → offer-header-wrapper
   Figma order:  image → title LEFT + price RIGHT → date below title → description */
#__MTS #__MTS_offer-detail .MTS__offer-head {
  display: flex;
  flex-direction: column;
}
#__MTS #__MTS_offer-detail .MTS__offer-header-image {
  order: 1;
  margin-top: 0;
  background-color: transparent;
}
#__MTS #__MTS_offer-detail .MTS__offerDetail-title {
  order: 2;
  margin-top: 36px; /* Figma: title y=732, image bottom y=696 → gap=36px */
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
#__MTS #__MTS_offer-detail .MTS__offer-header-wrapper {
  order: 3;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  margin-top: 16px;
}

/* === v7 TITLE ROW LAYOUT FIX ===
   Figma: title h1 LEFT, price RIGHT on same row (x=0 title, x=832 price)
   v7 wraps both in a column by default — override to row */
#__MTS #__MTS_offer-detail .MTS__offerDetail-title > div {
  position: relative;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Title h1 — left side */
#__MTS #__MTS_offer-detail .MTS__offerHeading {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0;
  flex: 0 0 auto;
  max-width: 60%;
}

/* Price+date wrapper — right side, column layout */
#__MTS #__MTS_offer-detail .MTS__offersPersonInfo {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  flex: 0 0 auto;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

#__MTS #__MTS_offer-detail .MTS__offersPersonInfo > .MTS__flex.MTS__w-fit.MTS__items-center.MTS__cursor-pointer {
  width: 100%;
}

/* === OFFER HEADING (h1) === */
/* Figma: Old Standard TT 32px 700, line-height 1.5, color #111111 */
#__MTS #__MTS_offer-detail .MTS__offerHeading {
  font-family: old-standard-tt, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0px;
  color: #111111;
  margin-bottom: 0;
  text-align: left;
}

/* === PRICE + DATE ROW ===
   Figma: price RIGHT-aligned (x=832), date below price
   open-sans 24px 400 */
#__MTS #__MTS_offer-detail .MTS__Offerdetails_pricedetails {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #111111;
  text-align: right;
}
#__MTS #__MTS_offer-detail .MTS__Offerdetails_pricedetails .MTS__font-semibold {
  font-weight: 600;
}
/* Date wrapper — right-aligned, below price */
#__MTS #__MTS_offer-detail .MTS__calendar-wrapper,
#__MTS #__MTS_offer-detail .MTS__offerInfoDates {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #111111;
  text-align: right;
  justify-content: flex-end;
  gap: 0;
}

/* Hide calendar icon — Figma shows plain text date only */
#__MTS #__MTS_offer-detail .MTS__calendar-wrapper > span:first-child svg,
#__MTS #__MTS_offer-detail .MTS__calendar-wrapper .MTS__px-2 {
  display: none;
}
/* Hide dropdown arrow icon */
#__MTS #__MTS_offer-detail .MTS__calendar-wrapper .MTS__px-2 svg {
  display: none;
}
/* Hide the dropdown bubble — causes date duplication */
#__MTS #__MTS_offer-detail .MTS__availabilityDates {
  display: none;
}

/* === IMAGE SLIDER === */
/* Figma: sliderHeight 650px */
#__MTS #__MTS_offer-detail .MTS__offer-header-image > div {
  height: 650px;
  min-height: 650px;
  position: relative;
}
#__MTS #__MTS_offer-detail .MTS__offer-header-image .MTS__flex.MTS__w-full.MTS__justify-between.MTS__mb-2 {
  position: absolute;
  bottom: 16px;
  right: 16px;
  top: auto;
  left: auto;
  width: auto;
  z-index: 10;
  gap: 8px;
  margin-bottom: 0;
}
#__MTS #__MTS_offer-detail .MTS__offer-header-image button[class*="MTS__left-4"],
#__MTS #__MTS_offer-detail .MTS__offer-header-image button[class*="MTS__right-4"] {
  position: static;
  background: rgba(0,0,0,0.5);
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
#__MTS #__MTS_offer-detail .MTS__offer-header-image button svg {
  color: #FFFFFF;
  fill: #FFFFFF;
  stroke: #FFFFFF;
  width: 20px;
  height: 20px;
}

/* === DESCRIPTION ===
   v7 adds MTS__px-6 MTS__pt-16 sm:MTS__px-14 — override to 0
   Figma: open-sans 24px 400, left-aligned, no extra padding */
#__MTS #__MTS_offer-detail .MTS__offer-header-wrapper {
  padding: 0;
  margin-top: 16px;
}
#__MTS #__MTS_offer-detail .RoomDescriptionDiv,
#__MTS #__MTS_offer-detail .RoomDescriptionDiv span,
#__MTS #__MTS_offer-detail .RoomDescriptionDiv p,
#__MTS #__MTS_offer-detail .RoomDescriptionDiv ul,
#__MTS #__MTS_offer-detail .RoomDescriptionDiv ol,
#__MTS #__MTS_offer-detail .RoomDescriptionDiv li {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #111111;
  text-align: left;
}

/* v7 adds MTS__text-center on the teaser div — override */
#__MTS #__MTS_offer-detail .MTS__offer-header-wrapper .MTS__text-center,
#__MTS #__MTS_offer-detail .MTS__offer-header-wrapper .RoomDescriptionDiv {
  text-align: left;
  margin-bottom: 49px;
}
/* Remove MTS__mt-4 on teaser div */
#__MTS #__MTS_offer-detail .MTS__offer-header-wrapper .RoomDescriptionDiv.MTS__mt-4 {
  margin-top: 0;
}
#__MTS #__MTS_offer-detail .MTS__offerdetail__showMoreButton,
#__MTS #__MTS_offer-detail .MTS__offerdetail__showLessButton {
  font-family: 'open-sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #111111;
}

/* === TABS === */
#__MTS #__MTS_offer-detail .MTS__tab-view.MTS__tabbing-head {
  border-bottom: none;
  padding-left: 0;
  gap: 21px; /* Figma: gap 21.33px — overrides hardcoded MTS__gap-[4px] */
}

/* Inactive tab */
#__MTS #__MTS_offer-detail .MTS__tabbing-head-item {
  font-family: 'open-sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  padding: 14px 32px; /* Figma: padding 14px 32px */
  color: #111111;
  border: 1px solid #111111;
  background-color: #FFFFFF;
  cursor: pointer;
  top: 0;
}

/* Active tab */
#__MTS #__MTS_offer-detail .MTS__tabbing-head-item.MTS__activeTabLarge {
  background-color: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

/* Anfragen tab button — variation lighter */
#__MTS #__MTS_offer-detail .MTS__tabbing-head-item[class*="button-lighter"] {
  background-color: #FFFFFF;
  color: #111111;
  border-color: #111111;
}

/* Buchen tab button — variation darker */
#__MTS #__MTS_offer-detail .MTS__tabbing-head-item[class*="button-darker"] {
  background-color: #111111;
  color: #FFFFFF;
  border-color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__tabbing-head-item[class*="button-darker"]:hover {
  background-color: #333333;
}

/* Tab body */
#__MTS #__MTS_offer-detail .MTS__roomDetail-body-wrapper {
  padding: 48px 0 0;
}

/* === ACCORDION (mobile — Tabs3.tsx < 768px) ===
   Source: MTS__roomDetail-accordian-head with MTS__bg-label-dark / MTS__bg-label-darker
   Figma: same button style as tabs */
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head {
  font-family: 'open-sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  padding: 14px 32px;
  border: 1px solid #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__bg-label-dark {
  background-color: #FFFFFF;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__bg-label-darker,
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__activeTabSmall {
  background-color: #111111;
  color: #FFFFFF;
}

/* Accordion arrow icon */
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head .MTS__my-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #111111;
  flex-shrink: 0;
}
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__activeTabSmall .MTS__my-auto,
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__bg-label-darker .MTS__my-auto {
  border-color: #FFFFFF;
}
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head span svg {
  fill: #111111;
  width: 12px;
  height: 12px;
}
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__activeTabSmall span svg,
#__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__bg-label-darker span svg {
  fill: #FFFFFF;
}

/* === ROOM ACCORDION ARROW (availability tab) ===
   Source: span.MTS__transition-all inside .MTS__roomdetail-offerAccordian-head */

#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head {
  padding-left: 4px;
}

#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head > span.MTS__transition-all {
  position: relative;
  top: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1px solid #111111;
  flex-shrink: 0;
  border-radius: 0;
  border-style: none solid solid none;
  transform: rotate(45deg);
}
#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head > span.MTS__transition-all svg {
  fill: #111111;
  width: 10px;
  height: 10px;
  display: none;
}

/* === DROPDOWN ARROW — fix invisible SVG ===
   Source: DropDownIcon fill uses backgroundColor-effect-light token */
#__MTS #__MTS_offer-detail .MTS__roomDropdown-selection svg,
#__MTS #__MTS_offer-detail .MTS__roomDropdown-selection .MTS__absolute svg {
  fill: #111111;
  color: #111111;
  opacity: 1;
}

/* === ROOM FILTER DROPDOWN === */
#__MTS #__MTS_offer-detail .MTS__roomDropdown-selection .MTS__text-label {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__roomDropdown-selection select {
  font-family: 'open-sans', sans-serif;
  font-size: 18px;
  color: #111111;
  background-color: #FFFFFF;
  border: 1px solid #111111;
  padding: 8px 36px 8px 12px;
  -webkit-appearance: none;
  appearance: none;
}

/* === ROOM ACCORDION ROWS === */
#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian {
  border-bottom: 1px solid #111111;
  padding-top: 20px;
  padding-bottom: 20px;
}
#__MTS #__MTS_offer-detail .MTS__roomDetail-offerList-title-head {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__tab-priceperPerson,
#__MTS #__MTS_offer-detail .MTS__tab-priceperPerson span {
  font-family: 'open-sans', sans-serif;
  font-size: 20px;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian .MTS__text-secondary-light,
#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian .MTS__font-subText,
#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian .MTS__text-subText {
  color: #111111;
}

/* === DETAILS TAB === */
#__MTS #__MTS_offer-detail .MTS__offerDescription,
#__MTS #__MTS_offer-detail .MTS__offerDescription span,
#__MTS #__MTS_offer-detail .MTS__offerDescription p,
#__MTS #__MTS_offer-detail .MTS__offerDescription li {
  font-family: 'open-sans', sans-serif;
  font-size: 24px;
  line-height: 1.5;
  color: #111111;
}

/* === CALENDAR ===
   Source: PriceCalculator.tsx — Calendar2 (version v2)
   Outer wrapper: div.MTS__border.MTS__border-primary-darker
   Figma: 1px #111111 border around 3-month grid
   Nav arrows: 32×32px downloaded SVGs (arrow-left.svg / arrow-right.svg)
*/

/* Month name — Figma: Old Standard TT 20px 400 */
#__MTS #__MTS_offer-detail .MTS__MonthNameClass {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #111111;
}

#__MTS #__MTS_offer-detail .MTS__MonthNameClass b {
  font-weight: 400;
}

/* Day-of-week row — Figma: open-sans 14px */
#__MTS #__MTS_offer-detail .MTS__DaysClass > div {
  font-family: 'open-sans', sans-serif;
  font-size: 12px;
  color: #111111;
}

/* Month container — no individual border, border is on outer wrapper */
#__MTS #__MTS_offer-detail .MTS__MonthParentClass {
  border: 1px solid #111111;
}

/* Month header separator line */
#__MTS #__MTS_offer-detail .MTS__MonthParentClass .MTS__border-b {
  border-bottom: 1px solid #111111;
}

/* === CALENDAR OUTER BORDER ===
   Source: div.MTS__border.MTS__border-primary-darker wraps the calendar
   Figma: 1px solid #111111 */

/* === ALL DATE CELLS = CIRCLES ===
   Figma: circles — available = light grey, selected = black
   aspect-ratio 1/1 + border-radius 50% = true circle */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #EEEEEE;
  color: #111111;
  font-size: 12px;
}

/* Override Tailwind md:MTS__h-14 fixed height */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="md:MTS__h-14"] {
  height: auto;
}

/* In-range — flat rectangle, NOT a circle */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="lar_inrange"] {
  border-radius: 0;
  background-color: #EEEEEE;
  color: #111111;
}

/* Arrival available — GOLD filled circle (Figma: Primary Gold #C7B39A) */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="lar_arr_avil"] {
  border-radius: 50%;
  background-color: #666666;
  color: #ffffff;
}

/* Selected / valid selection — BLACK filled circle */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="lar_selected_success"],
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="lar_selected"] {
  border-radius: 50%;
  background-color: #111111;
  color: #FFFFFF;
}

/* Departure only — grey circle */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="lar_dept_only"] {
  border-radius: 50%;
  background: #2A2A2A;
  color: #ffffff;
}

/* Closed — light grey circle (Figma: #F4F4F4) */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span[class*="lar_closed"] {
  border-radius: 50%;
  background-color: #F4F4F4;
  color: #111111;
}

/* === CALENDAR NAV ARROWS ===
   Source: buttons with MTS__left-4 / MTS__right-4 inside _lar_container
   Figma: 32×32px bordered squares, downloaded SVGs */
#__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__left-4"],
#__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__right-4"] {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 17px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
#__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__left-4"] svg,
#__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__right-4"] svg {
  display: none;
}
#__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__left-4"] {
  background-image: url('../static/images/arrow-left-dark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__right-4"] {
  background-image: url('../static/images/arrow-right-dark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Nav row — arrows at edges */
#__MTS #__MTS_offer-detail [class*="_lar_container"] .MTS__flex.MTS__w-full.MTS__justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0 0;
  margin-bottom: 30px;
}

/* === CALENDAR LABELS (nur Abreise / nicht verfügbar text inside cells) === */
#__MTS #__MTS_offer-detail .MTS__DatesClass > span .MTS__text-effect-lighter,
#__MTS #__MTS_offer-detail .MTS__DatesClass > span .MTS__absolute {
  color: #111111;
  font-size: 7px;
  line-height: 1.1;
  font-weight: 400;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

#__MTS #__MTS_offer-detail .MTS__DatesClass > span .MTS__ToolTipClass1,
#__MTS #__MTS_offer-detail .MTS__DatesClass > span .MTS__ToolTipClass2 {
  color: #ffffff;
  font-size: 10px;
}

#__MTS #__MTS_offer-detail .MTS_OnlyDeparture {
  color: #111111;
  font-size: 7px;
  bottom: 5px !important;
}

/* === LEGEND DOTS === */

#__MTS #__MTS_offer-detail .MTS__availability-legend {
  --MTS-backgroundColor-primary-lighter: #2A2A2A;
  --MTS-backgroundColor-success-light: #2A2A2A;
}

#__MTS #__MTS_offer-detail .MTS__availability-legend span.MTS__h-4 {
  border-radius: 50%;
  width: 19px;  /* Figma: 18.69px */
  height: 19px;
  flex-shrink: 0;
  display: inline-block;
  overflow: hidden;
}

/* Dot 1 — gewählter Zeitraum: gold #C7B39A (Figma: Primary Gold) */
#__MTS #__MTS_offer-detail .MTS__availability-legend .MTS__bg-success {
  background-color: #C7B39A;
  border-radius: 50%;
  width: 19px;
  height: 19px;
}

/* Dot 2 — Ankunft möglich: grey #EEEEEE */
#__MTS #__MTS_offer-detail .MTS__availability-legend .MTS__bg-success-light {
  background-color: #666666;
  border-radius: 50%;
  width: 19px;
  height: 19px;
}

/* Dots 3 & 4 use inline styles — force circle shape only */
#__MTS #__MTS_offer-detail .MTS__availability-legend span[style] {
  border-radius: 50%;
  width: 19px;
  height: 19px;
}

/* Legend text — Figma: open-sans 16px 400 */
#__MTS #__MTS_offer-detail .MTS__InfoClass {
  font-family: 'open-sans', sans-serif;
  font-size: 16px;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__select-date-label {
  font-family: 'open-sans', sans-serif;
  font-size: 16px;
  color: #111111;
}

/* === SELECTED RANGE TEXT ===
   Source: "ab X zu Y ausgewählt" — open-sans 20px 400, centered */
#__MTS #__MTS_offer-detail .MTS__calendar-legend-wrapper {
  font-family: 'open-sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #111111;
}

#__MTS #__MTS_offer-detail .MTS__calendar-legend-wrapper .MTS__flex.MTS__flex-col.lg\:MTS__flex-row.MTS__flex-wrap.MTS__my-4.MTS__gap-2.MTS__mx-auto.MTS__items-center {
  gap: 30px;
}

/* === CTA TITLE TEXT ===
   Source: div.MTS__calender-btn-title — "Neuen Anreisetag wählen oder"
   Figma: open-sans 20px 600 */
#__MTS #__MTS_offer-detail .MTS__calender-btn-title {
  font-family: 'open-sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #111111;
}

/* === CTA BUTTONS ===
   Source: Button v5 — variation="light" → .MTS__button--light, variation="dark" → .MTS__button--dark
   Inside div.MTS__calendar-button-wrapper
   Figma: gap 21px between buttons, padding 14px 32px, open-sans 20px 600 */
#__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper {
  gap: 21px; /* Figma: gap 21px */
}

/* Anfragen — variation="light": bg #FFFFFF, text #111111, border 1px #111111 */
#__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper .MTS__button--light {
  background-color: #FFFFFF;
  color: #111111;
  border: 1px solid #111111;
  font-family: 'open-sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  padding: 14px 32px;
}
#__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper .MTS__button--light:hover {
  background-color: #111111;
  color: #ffffff;
}

/* Buchen — variation="dark": bg #111111, text #FFFFFF, border 1px #111111 */
#__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper .MTS__button--dark {
  background-color: #111111;
  color: #FFFFFF;
  border: 1px solid #111111;
  font-family: 'open-sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  padding: 14px 32px;
}
#__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper .MTS__button--dark:hover {
  background-color: #FFFFFF;
  color: #111111;
}

/* === INCLUDED SERVICES === */
#__MTS #__MTS_offer-detail .MTS__includedServices_label {
  font-family: 'open-sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__included_services li {
  font-family: 'open-sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #111111;
  line-height: 1.5;
}

/* === AVAILABILITY DATES DROPDOWN === */
#__MTS #__MTS_offer-detail .MTS__availabilityDates {
  background-color: #FFFFFF;
  border: 1px solid #111111;
  color: #111111;
}
#__MTS #__MTS_offer-detail .MTS__offerInfoDatesDropdown {
  font-family: 'open-sans', sans-serif;
  font-size: 18px;
  color: #111111;
}

#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head-wrapper {
  margin-left: 14px;
}

#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head-wrapper .MTS__flex.MTS__justify-between.MTS__flex-wrap.MTS__text-secondary-light {
  font-size: 20px;
}

#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian .MTS__availability-calendar-wrapper #MTS__MainDaysAndDatesHolderID .MTS__DatesClass > span .MTS__text-\[10px\] {
  display: none;
}

#__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian .MTS__availability-calendar-wrapper #MTS__MainDaysAndDatesHolderID .MTS__DatesClass > span[class*="calendar-module_lar_dail_animate_forward"] .MTS__text-\[10px\] {
  display: block;
}

#__MTS #__MTS_offer-slider .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300,
#__MTS #__MTS_offer-list .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300 {
  width: 100% !important;
  max-width: 1300px ;
  min-width: unset !important;
  margin: 0;
}

#__MTS #__MTS_room-slider .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300,
#__MTS #__MTS_room-list .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300 {
  width: 100% !important;
  max-width: 1920px;
  min-width: unset !important;
  margin: 0;
  height: 100% !important;
}

#__MTS .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300 > div:first-child > svg {
  background-color: transparent;
  fill: #111111;
  margin-right: 42px;
  top: 42px;
}

#__MTS .MTS__modal .MTS__max-w-widget {
  padding-left: 0;
  padding-right: 0;
}

#__MTS .MTS__modal .MTS__bg-surface {
  background-color: #ffffff !important;
}

#__MTS #__MTS_offer-detail .MTS__availability-wrapper > div.MTS__w-full.MTS__border.MTS__border-primary-darker.MTS__overflow-x-auto:first-child {
  border: 0;
}

#__MTS #__MTS_offer-detail #MTS__MainMonthHolderID {
  gap: 10px;
  padding: 0 30px;
  max-width: 1118px;
  margin: 0 auto;
}

/* ============================================
   RESPONSIVE — ALL @media AT THE VERY END
   ONE block per breakpoint — never duplicate
   ============================================ */

@media (max-width: 1199px) {
  #__MTS #__MTS_offer-detail .MTS__offerHeading {
    font-size: 26px;
  }
  #__MTS #__MTS_offer-detail .MTS__Offerdetails_pricedetails,
  #__MTS #__MTS_offer-detail .MTS__calendar-wrapper,
  #__MTS #__MTS_offer-detail .MTS__offerInfoDates,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv span,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv p {
    font-size: 18px;
  }
  #__MTS #__MTS_offer-detail .MTS__tabbing-head-item {
    font-size: 16px;
    padding: 10px 20px;
  }
  #__MTS #__MTS_offer-detail .MTS__offer-header-image > div {
    height: 400px;
    min-height: 400px;
  }
  #__MTS #__MTS_offer-detail .MTS__includedServices_label,
  #__MTS #__MTS_offer-detail .MTS__included_services li,
  #__MTS #__MTS_offer-detail .MTS__roomDetail-offerList-title-head {
    font-size: 18px;
  }

  #__MTS #__MTS_offer-detail .MTS__tab-priceperPerson, #__MTS #__MTS_offer-detail .MTS__tab-priceperPerson span,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv, #__MTS #__MTS_offer-detail .RoomDescriptionDiv span, #__MTS #__MTS_offer-detail .RoomDescriptionDiv p, #__MTS #__MTS_offer-detail .RoomDescriptionDiv ul, #__MTS #__MTS_offer-detail .RoomDescriptionDiv ol, #__MTS #__MTS_offer-detail .RoomDescriptionDiv li {
    font-size: 18px;
  }

  #__MTS #__MTS_offer-detail .MTS__offerHeading {
    position: relative;
  }

  #__MTS #__MTS_offer-detail .MTS__offersPersonInfo {
    align-items: flex-start;
  }

}

@media (max-width: 767px) {

  #__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head-wrapper .MTS__flex.MTS__justify-between.MTS__flex-wrap.MTS__text-secondary-light {
    font-size: 14px;
  }

  #__MTS #__MTS_offer-detail .MTS__room-card-wrapper {
    padding-top: 80px;
    padding-left: 1em;
    padding-right: 1em;
  }

  #__MTS #__MTS_offer-detail .MTS__offer-header-image > div {
    height: auto;
    min-height: 220px;
  }
  #__MTS #__MTS_offer-detail .MTS__offerDetail-title {
    margin-top: 20px;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
  }
  #__MTS #__MTS_offer-detail .MTS__offerHeading {
    font-size: 24px;
  }
  #__MTS #__MTS_offer-detail .MTS__offersPersonInfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #__MTS #__MTS_offer-detail .MTS__Offerdetails_pricedetails {
    font-size: 16px;
    text-align: left;
  }
  #__MTS #__MTS_offer-detail .MTS__calendar-wrapper,
  #__MTS #__MTS_offer-detail .MTS__offerInfoDates {
    font-size: 16px;
  }
  #__MTS #__MTS_offer-detail .MTS__offer-header-wrapper {
    padding-left: 0;
    padding-right: 0;
    margin-top: 12px;
  }
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv span,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv p {
    font-size: 16px;
  }
  #__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head {
    font-size: 16px;
    padding: 12px 16px;
  }
  #__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head .MTS__my-auto {
    width: auto;
    height: 10px;
    width: 10px;
    border: 2px solid #000000;
    border-style: none solid solid none;
    transform: rotate(45deg);
  }

  #__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head.MTS__activeTabSmall .MTS__my-auto {
    border-color: #ffffff;
    transform: rotate(225deg);
  }

  #__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-head .MTS__my-auto path {
    display: none;
  }

  #__MTS #__MTS_offer-detail .MTS__offerHeading {
    position: relative;
  }

  #__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper .MTS__button--light,
  #__MTS #__MTS_offer-detail .MTS__calendar-button-wrapper .MTS__button--dark {
    font-size: 16px;
    padding: 10px 20px;
    width: 100%;
  }
  #__MTS #__MTS_offer-detail .MTS__roomDetail-offerList-title-head,
  #__MTS #__MTS_offer-detail .MTS__tab-priceperPerson,
  #__MTS #__MTS_offer-detail .MTS__tab-priceperPerson span {
    font-size: 16px;
  }
  #__MTS #__MTS_offer-detail .MTS__includedServices_label,
  #__MTS #__MTS_offer-detail .MTS__included_services li {
    font-size: 16px;
  }
  #__MTS #__MTS_offer-detail .MTS__tab-view {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  #__MTS #__MTS_offer-detail .MTS__tabbing-head-item {
    font-size: 14px;
    padding: 10px 16px;
    white-space: nowrap;
  }

  #__MTS #__MTS_offer-detail .MTS__tab-priceperPerson, #__MTS #__MTS_offer-detail .MTS__tab-priceperPerson span,
  #__MTS #__MTS_offer-detail .RoomDescriptionDiv, #__MTS #__MTS_offer-detail .RoomDescriptionDiv span, #__MTS #__MTS_offer-detail .RoomDescriptionDiv p, #__MTS #__MTS_offer-detail .RoomDescriptionDiv ul, #__MTS #__MTS_offer-detail .RoomDescriptionDiv ol, #__MTS #__MTS_offer-detail .RoomDescriptionDiv li {
    font-size: 14px;
  }

  #__MTS .MTS__modal > .MTS__bg-surface.MTS__p-4.MTS__flex.MTS__flex-col.MTS__mx-2.MTS__w-full.lg\:\!MTS__w-auto.lg\:\!MTS__min-w-\[75\%\].MTS__h-full.\!MTS__bg-\[\#00000000\].MTS__overflow-hidden.MTS__mx-0.\!MTS__z-\[10000\].\!MTS__p-0.MTS__relative.MTS__transition.MTS__transform.MTS__ease-in.MTS__duration-300 > div:first-child > svg {
    margin-right: 16px;
    top: 16px;
  }

  #__MTS #__MTS_offer-detail .MTS__offer-header-wrapper .MTS__text-center, #__MTS #__MTS_offer-detail .MTS__offer-header-wrapper .RoomDescriptionDiv {
    margin-bottom: 1em;
  }

  #__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian .MTS__text-subText {
    align-items: center;
  }

  #__MTS #__MTS_offer-detail .MTS__roomdetail-offerAccordian-head > span.MTS__transition-all {
    width: 12px;
    height: 12px;
  }

  #__MTS #__MTS_offer-detail #MTS__MainMonthHolderID {
    width: 100%;
    max-width: 600px;
    padding: 0;
  }

  #__MTS #__MTS_offer-detail .MTS__DatesClass {
    gap: 20px;
  }

  #__MTS #__MTS_offer-detail #MTS__MainCalendarHolderID {
    padding-top: 40px;
    margin-top: 40px;
  }
  
  #__MTS #__MTS_offer-detail .MTS__DatesClass > span .MTS__text-effect-lighter, #__MTS #__MTS_offer-detail .MTS__DatesClass > span .MTS__absolute {
    font-size: 7px;
  }
}

@media only screen and (max-width: 575px) {
  #__MTS #__MTS_offer-detail #MTS__MainCalendarHolderID {
    padding-top: 0;
  }

  #__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__left-4"], #__MTS #__MTS_offer-detail [class*="_lar_container"] button[class*="MTS__right-4"] {
    top: 20px;
  }
  
  #__MTS #__MTS_offer-detail .MTS__DatesClass {
    gap: 5px;
  }

  #__MTS #__MTS_offer-detail .MTS__roomDetail-accordian-body > div {
    padding: 0;
  }

  #__MTS #__MTS_offer-detail .MTS__calendar-legend-wrapper {
    margin-top: 0;
    font-size: 1em;
    gap: 10px;
  }
}

/* End:: Offer Detail */