:root { --font-scale: 1; --theme: rgb(255, 25, 80); --theme-secondary: rgb(255, 70, 115); --box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.3125rem 0.625rem; --text-shadow: 2.0.3125rem 2.0.3125rem 0.25rem rgba(0, 0, 0, 0.4); } @font-face { font-family: "Asap Condensed"; src: url("fonts/AsapCondensed[class~="ttf"]"); } @font-face { font-family: "Outfit"; src: url("fonts/Outfit[class~="ttf"]"); } @font-face { font-family: "Montserrat"; src: url("fonts/Montserrat[class~="ttf"]"); } html, body { width: 100%; } *::selection{ background-color: rgba(0, 0, 0, 0.1); } *{ margin: 0rem; transition: ease-in-out 0.3s box-shadow; } button, #logo, #langs img, [class~="select"], [class~="option"], [class~="slider-dot"]{ cursor: pointer; } #langs, [class~="card"], [class~="card-content"], [class~="card-bottom"], [class~="guest-info"], [class~="slider"]{ display: flex; } header, #search-btn, #book-container, [class~="select"], [class~="book-btn"], [class~="card-location"], [class~="counter"], [class~="counter-btn"], [class~="card-highlights"], [class~="guest-container"], [class~="datepicker"] [class~="navigation"], [class~="slider-dots"]{ display: flex; align-items: center; } #book-container, [class~="select-wrapper"], #search-btn, [class~="card"], [class~="book-btn"]{ font-family: "Outfit"; } header { position: relative; height: 4.6875rem; padding: 0.3125rem 1.5625rem; box-shadow: var(--box-shadow); } #logo{ display: flex; align-items: center; } #logo img{ height: 3.125rem; margin-top: -0.3125rem; } #isotype{ display: none; } #langs{ margin-left: auto; gap: 0.625rem; } #langs img{ width: 3.125rem; height: 3.125rem; } #main-container{ font-family: "Asap Condensed"; width: 100%; padding: 4.6875rem 0rem; background-image: url("img/lisboa[class~="jpg"]"); background-repeat: no-repeat; background-size: cover; box-shadow: var(--box-shadow); } #main-container h1{ color: white; padding-left: 4.6875rem; padding: 1.875rem 0rem 0.3125rem 4.6875rem; font-size: calc(3.75rem * var(--font-scale)); text-shadow: var(--text-shadow); } #main-container h2{ padding-left: 77.0.3125rem; color: rgba(255, 255, 255, 0.65); font-size: calc(1.5rem * var(--font-scale)); text-shadow: var(--text-shadow); } #book-container{ margin: 0 auto; width: fit-content; margin-top: 7.8125rem; border-radius: 0.625rem; justify-content: center; gap: 1.5625rem; padding: 1.25rem; flex-wrap: wrap; background-color: rgba(255, 255, 255, 0.5); font-family: "Outfit"; border: 0.0625rem solid #ccc; } [class~="select"]{ position: relative; border: 0.0625rem solid rgb(200, 200, 200); background-color: white; padding: 0rem 1.25rem; border-radius: 0.9375rem; } [class~="select"]:hover{ box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.125rem 0.3125rem; } [class~="select-text"]{ font-family: "Outfit"; text-align: center; padding: 0.9375rem; font-size: calc(1.75rem * var(--font-scale)); color: rgba(0, 0, 0, 0.5); transition: width 0.6s ease; white-space: nowrap; overflow: hidden; } [class~="select"] img{ width: 1.875rem; height: 1.875rem; } [class~="options"]{ font-family: "Outfit"; position: absolute; top: 105%; left: 50%; width: 100%; background-color: white; border: 0.0625rem solid #ccc; border-radius: 1rem; display: none; min-width: fit-content; transform: translateX(-50%); z-index: 1; box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.3125rem 0.9375rem; } [class~="option"] { padding: 0.9375rem; transition: ease-in-out 0.3s background-color; border-bottom: 0.0625rem solid #ccc; font-size: calc(1.1rem * var(--font-scale)) } [class~="option"]:first-child { border-radius: 1rem 1rem 0rem 0rem; } [class~="option"]:last-child { border-radius: 0rem 0rem 1rem 1rem; } [class~="option"]:hover { background-color: rgb(240, 240, 240); } .option[class~="selected"] { background-color: #d0d0d0; } [class~="datepicker"] { font-family: "Outfit"; display: none; position: absolute; background: white; border-radius: 1.25rem; padding: 1.25rem; z-index: 2; bottom: 105%; left: 50%; transform: translateX(-50%); box-shadow: 0 0.1875rem 0.75rem rgb(0 0 0 / 0.15); cursor: auto; } .datepicker[class~="active"] { display: block; } [class~="datepicker"] table { width: 100%; border-collapse: separate; table-layout: fixed; } [class~="datepicker"] th, [class~="datepicker"] td { text-align: center; width: 2.5rem; height: 2.5rem; border-radius: 100%; font-weight: 600; transition: box-shadow 0.2s ease-in-out; } [class~="datepicker"] th { font-size: 0.85rem; color: rgba(0, 0, 0, 0.65); } [class~="datepicker"] td:not([class~="disabled"]):not(:empty):hover { cursor: pointer; box-shadow: 0 0 0 0.0625rem black; } [class~="datepicker"] td[class~="disabled"] { color: #ccc; cursor: not-allowed; } [class~="prev-month"], [class~="next-month"] { padding: 1.25rem; background-size: 50%; background-position: center; background-repeat: no-repeat; background-color: white; border: none; border-radius: 100%; transition: background-color 0.3s ease-in-out; } [class~="prev-month"] { background-image: url("img/left[class~="png"]"); } [class~="next-month"] { background-image: url("img/right[class~="png"]"); } [class~="prev-month"]:hover, [class~="next-month"]:hover { background-color: rgba(0, 0, 0, 0.1); } [class~="datepicker"] td[class~="selected"], [class~="datepicker"] td[class~="in-range"] { color: white; position: relative; overflow: visible; } [class~="datepicker"] td[class~="selected"] { background-color: var(--theme); } [class~="datepicker"] td[class~="in-range"]::after, [class~="datepicker"] td.selected[class~="checkIn"]::after, [class~="datepicker"] td.selected[class~="checkOut"]::after { content: ""; position: absolute; top: 50%; height: 1.875rem; background-color: rgb(255, 52, 100); z-index: -1; } [class~="datepicker"] td[class~="in-range"]::after { left: 50%; transform: translate(-50%, -50%); width: 150%; } [class~="datepicker"] td.selected[class~="checkIn"]::after { left: 50%; transform: translateY(-50%); width: 75%; } [class~="datepicker"] td.selected[class~="checkOut"]::after { right: 50%; transform: translateY(-50%); width: 75%; } [class~="datepicker"] [class~="navigation"] { justify-content: space-between; } [class~="popup"] { font-family: "Montserrat", sans-serif; display: none; position: absolute; background-color: #fff; color: #ff1a4e; border: 0.1875rem solid transparent; background: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, rgba(255,24,78,1) 0%, rgba(255,70,113,1) 100%); background-clip: padding-box, border-box; padding: 0.625rem; font-weight: 600; border-radius: 0.5rem; font-size: 0.9rem; z-index: 1; bottom: 120%; width: 80%; left: 50%; transform: translateX(-50%); pointer-events: none; box-shadow: 0rem 0.25rem 1rem rgba(0, 0, 0, 0.1); } [class~="popup"]::after { content: ""; position: absolute; border-width: 0.5rem; border-style: solid; display: block; top: 102%; left: 20%; border-color: rgba(255,24,78,1) transparent transparent transparent; } [class~="book-btn"], #search-btn, #check-availability-btn{ background: linear-gradient(90deg, var(--theme) 0%, var(--theme-secondary) 100%); color: white; border-radius: 0.9375rem; text-align: center; font-weight: bold; border: none; box-shadow: rgba(255,24,78,0.4) 0rem 2.0.3125rem 7.0.3125rem; transition: transform 0.2s ease-in-out, ease-in-out 0.2s box-shadow; position: relative; font-family: "Outfit"; } [class~="book-btn"]{ padding: 0.9375rem 6.25rem; font-size: calc(2.5rem * var(--font-scale)); } #search-btn { padding: 0.9375rem 2.1875rem; font-size: calc(1.75rem * var(--font-scale)); } #check-availability-btn{ width: 100%; padding: 1.875rem 0rem; font-size: 2.5rem; } #search-btn:active, #check-availability-btn:active { animation: clickEffect 0.3s forwards; } #search-btn[class~="loading"] , #check-availability-btn[class~="loading"]{ background: linear-gradient(90deg, rgba(235,15,65,1) 0%, rgba(235,50,100,1) 100%); color: rgba(255, 255, 255, 0); cursor: not-allowed; } [class~="loading"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.5625rem; height: 1.5625rem; border: 0.1875rem solid rgba(255, 255, 255, 0.8); border-top: 0.1875rem solid rgba(255, 255, 255, 0.5); border-radius: 50%; animation: spin 1s linear infinite; transform: translate(-50%, -50%); } [class~="book-btn"]:hover, #search-btn:hover, #check-availability-btn:hover{ box-shadow: rgba(255,24,78,0.75) 0rem 2.0.3125rem 7.0.3125rem; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes clickEffect { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } [class~="slider-container"] { max-width: 37.5rem; max-height: 28.125rem; position: relative; overflow: hidden; border-radius: 1.25rem; display: flex; align-items: center; justify-content: center; } [class~="slider"]{ width: 100%; transition: transform 0.5s ease-in-out; } [class~="slider"] img { display: block; max-width: 100%; min-width: 100%; min-height: 100%; object-fit: contain; } [class~="slider-prev"], [class~="slider-next"] { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; padding: 1rem; background-size: 55%; background-position: center; background-repeat: no-repeat; background-color: rgba(255, 255, 255, 0.8); border: 0.0625rem solid transparent; border-radius: 100%; transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; } [class~="slider-prev"]:hover, [class~="slider-next"]:hover { background-color: rgb(255, 255, 255); border-color: rgba(0, 0, 0, 0.75); } [class~="slider-prev"] { left: 0.625rem; background-image: url("img/left[class~="png"]"); } [class~="slider-next"] { right: 0.625rem; background-image: url("img/right[class~="png"]"); } [class~="slider-dots-wrapper"] { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: calc(5 * (0.4375rem + 0.375rem)); overflow: hidden; } [class~="slider-dots"] { display: flex; align-items: center; gap: 0.375rem; transition: transform 0.3s ease-in-out; white-space: nowrap; } [class~="slider-dot"] { width: 0.4375rem; height: 0.4375rem; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out; flex-shrink: 0; } [class~="slider-"]dot[class~="active"] { background-color: rgba(255, 255, 255, 0.8); width: 0.5rem; height: 0.5rem; } [class~="card"] { margin: auto; background-color: #f8f8f8; border: 0.1875rem solid #EAEAEA; box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.3125rem 0.9375rem; width: 90%; padding: 1.25rem; gap: 3.125rem; margin-top: 2.8125rem; } [class~="card-content"] { flex-direction: column; justify-content: space-between; width: 100%; } [class~="card-location"]{ gap: 0.625rem; } [class~="card-location"] img { width: 22.0.3125rem; opacity: 0.65; } [class~="card-location"] span { font-size: calc(1.35rem * var(--font-scale)); color: rgba(0, 0, 0, 0.75); font-weight: 500; } [class~="card-top"] h1 { font-size: calc(2.75rem * var(--font-scale)); font-weight: 600; } [class~="card-top"] p { margin: 0.9375rem 0rem 1.25rem 0rem; font-size: calc(1.15rem * var(--font-scale)); } [class~="card-bottom"] { justify-content: space-between; align-items: flex-end; } [class~="card-highlights"] { flex-wrap: wrap-reverse; gap: 1.5625rem; } [class~="highlight"] img { max-width: 3.125rem; opacity: 0.75; position: relative; } [class~="highlight"] img:hover { opacity: 0.65; transition: opacity 0.15s ease-in-out; } [class~="highlight"] { position: relative; display: inline-block; } [class~="highlight"]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 118%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.65); color: #fff; padding: 0.3125rem 0.625rem; border-radius: 0.3125rem; white-space: nowrap; z-index: 10; font-size: calc(0.875rem * var(--font-scale)); opacity: 1; pointer-events: none; } [class~="highlight"]:hover::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 0.3125rem; border-style: solid; border-color: rgba(0, 0, 0, 0.65) transparent transparent transparent; } [class~="guest-container"] { justify-content: space-between; padding: 1.25rem 1.5625rem; } [class~="guest-info"] { flex-direction: column; margin-right: 1.5625rem; } [class~="guest"] { font-size: calc(1.15rem * var(--font-scale)); white-space: nowrap; } [class~="guest-description"] { font-size: calc(0.9rem * var(--font-scale)); color: #999; margin-top: 0.25rem; } [class~="counter"] { gap: 0.625rem; } [class~="counter-btn"] { background-color: #fff; border: 0.0625rem solid #595959; border-radius: 50%; width: 1.875rem; height: 1.875rem; justify-content: center; position: relative; transition: background-color 0.2s; } [class~="counter-btn"]:hover:not([class~="disabled"]) { background-color: #e0e0e0; } [class~="counter-"]btn[class~="disabled"] { border-color: #dbdbdb; cursor: not-allowed; } [class~="counter-btn"]::before, [class~="counter-btn"]::after { content: ''; position: absolute; background-color: #595959; border-radius: 0.125rem; } [class~="counter-"]btn[class~="decrement"]::before, [class~="counter-"]btn[class~="increment"]::before { width: 0.75rem; height: 0.125rem; } [class~="counter-"]btn[class~="increment"]::after { width: 0.125rem; height: 0.75rem; } [class~="counter-"]btn[class~="disabled"]::before, [class~="counter-"]btn[class~="disabled"]::after { background-color: #dbdbdb; } [class~="guest-count"] { font-size: 1.125rem; width: 1.25rem; text-align: center; } [class~="separator-line"] { width: 85%; height: 0.0625rem; background-color: rgba(0, 0, 0, 0.3); margin: 0 auto; } #no-results{ text-align: center; font-family: "Outfit"; font-size: calc(2rem * var(--font-scale)); color: rgba(0, 0, 0, 0.75); padding: 4.6875rem; transition: opacity 2s ease; opacity: 0; display: none; } [class~="price-block"] { margin-left: auto; padding: 0.5rem 1.25rem; border-radius: 0.5rem; } [class~="since"], [class~="night"] { display: block; font-size: 0.875rem; color: #666; } [class~="price"] { display: block; font-size: 1.75rem; font-weight: bold; color: #333; } footer { border-top: 0.0625rem solid rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.75); font-family: "Montserrat"; background-color: rgba(0, 0, 0, 0.015); } [class~="footer-container"] { padding: 3.125rem 1.25rem 1.875rem 1.25rem; display: flex; justify-content: space-around; flex-wrap: wrap; text-align: left; } [class~="footer-section"] { flex: 1; margin-right: 1.25rem; max-width: 20%; } [class~="footer-section"] h3 { font-size: 1.2em; margin-bottom: 0.625rem; } [class~="footer-section"] ul { list-style-type: none; padding: 0; } [class~="footer-section"] ul li { margin-bottom: 0.3125rem; } [class~="footer-section"] ul li a { text-decoration: none; color: rgb(0, 0, 0); } [class~="footer-section"] ul li a:hover { text-decoration: underline; } [class~="footer-bottom"] { width: 100%; background-color: rgba(0, 0, 0, 0.025); padding: 1.25rem 0; text-align: center; font-size: 1rem; margin-top: 1.25rem; border-top: 0.0625rem solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.75); box-sizing: border-box; } [class~="hidden"]{ display: none !important; } [class~="show"]{ opacity: 1 !important; display: block; } [class~="modal"]{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1; overflow-y: auto; transition: opacity 0.3s ease-in-out; opacity: 0; } [class~="modal-content"] { background-color: rgb(255, 255, 255); padding: 1.5625rem 3.125rem; width: 50%; max-height: fit-content; border-radius: 0.5rem; position: absolute; top: 5%; z-index: 1; border: 0.125rem solid #424242; } #close-modal { position: absolute; top: 0.625rem; left: 0.625rem; padding: 1.25rem; background-size: 50%; background-position: center; background-repeat: no-repeat; background-color: white; border: none; border-radius: 100%; transition: background-color 0.3s ease-in-out; background-image: url("img/left[class~="png"]"); } #close-modal:hover{ background-color: rgba(0, 0, 0, 0.1); } #modal-accommodation-title{ padding: 1.25rem 0rem 0.9375rem 0rem; font-family: "Outfit"; color: rgba(0, 0, 0, 0.8); font-weight: 500; font-size: calc(2.3rem * var(--font-scale)); } [class~="slider-"]container[class~="large"]{ max-width: 100%; max-height: 37.5rem; display: flex; align-items: center; position: relative; overflow: hidden; border-radius: 1.25rem; box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.3125rem 0.9375rem; border: 0.0625rem solid #424242; } #reservation-info { margin: auto; border: 0.0625rem solid rgba(0, 0, 0, 0.5); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9375rem; box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.3125rem 0.9375rem; padding: 0.625rem 0.625rem; border-radius: 0.9375rem; width: fit-content; max-width: 100%; } #reservation-info [class~="select"] { display: flex; flex: 1; } [class~="table-wrapper"] { margin: 2.1875rem auto; margin-bottom: 0.9375rem; font-family: "Outfit", sans-serif; } [class~="details-table"] { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 0.5rem; overflow: hidden; border: 0.0625rem solid #ddd; } [class~="details-table"] td { padding: 0.625rem; border: 0.0625rem solid #ddd; font-size: 1rem; vertical-align: top; } [class~="details-table"] td img { height: 1rem; width: 1rem; margin-right: 0.5rem; vertical-align: middle; } [class~="details-label"] { font-weight: bold; width: 30%; background-color: #f8f1f1; white-space: nowrap; } [class~="details-value"] { width: 70%; } #al-description{ padding: 1.875rem 0.625rem; font-family: "Montserrat"; } #al-description h2{ font-weight: 600; font-size: calc(1.5rem * var(--font-scale)); } #al-description h3{ font-weight: 400; font-size: calc(1.25rem * var(--font-scale)); } #al-license{ font-family: "Montserrat"; margin-bottom: 1.5625rem; padding-left: 0.125rem; } #al-license h4{ font-weight: 600; font-size: calc(1rem * var(--font-scale)); } #al-license h5{ font-weight: 400; font-size: calc(0.85rem * var(--font-scale)); } [class~="availability-modal"] { font-family: "Outfit"; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1; } [class~="availability-modal-content"] { background-color: white; padding: 1.25rem; border-radius: 0.5rem; text-align: center; width: 18.75rem; position: relative; } #availability-status-title{ margin-bottom: 1.25rem; background: linear-gradient(90deg, rgba(255,24,78,1) 0%, rgba(255,70,113,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [class~="close-availability-modal-btn"] { position: absolute; top: 0.625rem; right: 0.625rem; background: none; border: none; font-size: 1.125rem; cursor: pointer; } [class~="confirm-reservation-modal"] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1; overflow-y: auto; } [class~="confirm-reservation-modal-content"] { background-color: rgb(255, 255, 255); padding: 1.5625rem 3.125rem; width: 45%; max-height: fit-content; border-radius: 0.5rem; position: absolute; top: 5%; z-index: 1; } @media (max-width: 81.25rem) { :root { --font-scale: 0.95; } } @media (max-width: 68.75rem) { :root { --font-scale: 0.85; } } @media (max-width: 56.25rem) { :root { --font-scale: 0.75; } } @media (max-width: 43.75rem) { :root { --font-scale: 0.65; } } @media (max-width: 31.25rem) { #logo h1{ display: none; } } @media (max-width: 109.375rem) { [class~="modal-content"] { width: 50%; } } @media (max-width: 103.125rem) { [class~="modal-content"] { width: 55%; } } @media (max-width: 96.875rem) { [class~="book-btn"] { padding: 0.9375rem 4.6875rem; } } @media (max-width: 93.75rem) { [class~="book-btn"] { padding: 0.9375rem 3.4375rem; } [class~="modal-content"] { width: 60%; } } @media (max-width: 90.625rem) { [class~="book-btn"] { padding: 0.9375rem 2.5rem; } } @media (max-width: 87.5rem) { [class~="book-btn"] { padding: 0.9375rem 3.4375rem; } #book-container { max-width: 85%; } [class~="modal-content"] { width: 65%; } } @media (max-width: 85.9375rem) { [class~="card"] { flex-flow: column; gap: 1.25rem; } [class~="slider-container"] { max-width: 100%; max-height: 46.875rem; } } @media (max-width: 81.25rem) { [class~="modal-content"] { width: 70%; } } @media (max-width: 78.4375rem) { #book-container { max-width: 65%; } } @media (max-width: 75rem) { #book-container { max-width: 67.5%; } [class~="slider"] img { object-fit: cover; } [class~="modal-content"] { width: 75%; } } @media (max-width: 71.875rem) { #book-container { max-width: 70%; } } @media (max-width: 68.75rem) { #book-container { max-width: 72.5%; } [class~="price-block"] { padding: 0.3125rem 1.25rem; } } @media (max-width: 56.25rem) { [class~="select"] { width: 100%; margin-bottom: 0.625rem; } [class~="price-block"] { padding: 0rem 1.25rem; } } @media (max-width: 48rem) { [class~="footer-container"] { flex-direction: column; justify-content: flex-end; text-align: left; } [class~="footer-section"] { margin-right: 0; margin-bottom: 1.25rem; max-width: 100%; } [class~="footer-section"] h3, [class~="footer-section"] ul li { text-align: left; } } @media (max-width: 37.5rem) { [class~="modal-content"] { width: 90%; padding: 2.1875rem 1.25rem; top: 10%; box-sizing: border-box; } [class~="slider-"]container[class~="large"] { box-shadow: rgba(0, 0, 0, 0.25) 0rem 0.3125rem 0.3125rem;; } #check-availability-btn { padding: 0.9375rem 3.125rem; font-size: 1.5rem; max-width: 100%; } [class~="details-table"] { font-size: 0.9rem; } [class~="details-table"] td { padding: 0.5rem; } [class~="select"] img { width: 1.5625rem; height: 1.5625rem; } [class~="select-text"] { font-size: calc(1.5rem * var(--font-scale)); } [class~="counter-btn"] { width: 1.5625rem; height: 1.5625rem; } [class~="counter-"]btn[class~="decrement"]::before, [class~="counter-"]btn[class~="increment"]::before, [class~="counter-"]btn[class~="increment"]::after { width: 0.5rem; height: 0.0625rem; } [class~="counter-"]btn[class~="increment"]::after { width: 0.0625rem; height: 0.5rem; } [class~="popup"] { font-size: 0.625rem; padding: 0.3125rem; } #reservation-info { gap: 0rem; } } @media (max-width: 35.3125rem) { [class~="card-highlights"] { flex-wrap: nowrap; } [class~="card-bottom"] { flex-wrap: wrap; } [class~="book-btn"] { margin-top: 2.1875rem; width: 100%; padding: 1.25rem 0; justify-content: center; } [class~="card-price"] { padding: 1.5625rem 0.625rem; } [class~="slider-"]container[class~="big"] { max-height: 28.125rem; } } @media (max-width: 31.25rem) { #logo h1 { display: none; } [class~="footer-bottom"] { font-size: 0.9rem; } #isotype { display: block; } #imagotype { display: none; } #main-container h1, #main-container h2 { padding: 0; margin: auto; width: fit-content; } #main-container { padding: 3.125rem 0rem; } #book-container { margin-top: 1.875rem; } } @media (max-width: 30rem) { [class~="highlight"] img { max-width: 2.8125rem; } [class~="price"] { font-size: 1.5rem; } #book-container { gap: 0; } } @media (max-width: 29.6875rem) { [class~="highlight"] img { max-width: 2.5rem; } [class~="price"] { font-size: 1.4rem; } [class~="night"], [class~="since"] { font-size: 0.75rem; } } @media (max-width: 25.625rem) { [class~="highlight"] img { max-width: 3.125rem; } [class~="card-highlights"] { width: 100%; } [class~="price"] { font-size: 1.5rem; } [class~="night"] { font-size: 0.8rem; } [class~="since"] { font-size: 0.8rem; } [class~="book-btn"] { width: 60%; text-align: center; padding: 1.25rem 0rem; } [class~="price-block"] { margin-left: 0; margin-right: auto; padding: 0; } #check-availability-btn { padding: 0.9375rem 1.25rem; font-size: 1.25rem; } } @media (max-width: 37.5rem) { [class~="datepicker"] { font-family: "Outfit"; display: none; position: absolute; background: white; border-radius: 1.25rem; padding: 1.25rem; z-index: 2; bottom: 105%; left: 50%; transform: translateX(-50%); box-shadow: 0 0.1875rem 0.75rem 0 rgb(0 0 0 / 0.15); } [class~="datepicker"] th, [class~="datepicker"] td { width: 1.875rem; height: 1.875rem; } [class~="datepicker"] td { font-size: 0.75rem; } [class~="datepicker"] td[class~="in-range"]::after, [class~="datepicker"] td.selected[class~="checkIn"]::after, [class~="datepicker"] td.selected[class~="checkOut"]::after { height: 1.5625rem; } } @media (max-width: 48rem) { [class~="details-table"] { font-size: 0.9rem; border: none; } [class~="details-table"] td { display: block; width: 100%; box-sizing: border-box; border-bottom: 0.0625rem solid #ddd; } [class~="details-label"] { font-weight: bold; width: 100%; } [class~="details-value"] { width: 100%; } [class~="details-table"] td img { display: inline-block; margin-right: 0.5rem; } }