body { --light-blue: rgba(0, 147, 208, 0.051); --blue: #0093d0; --off-blue: #f1f7fb; --off-black: rgba(0, 0, 0, 0.651); --highlight-blue: #66d1ff; --off-orange: rgba(240, 171, 0, 0.051); --light-gray: rgba(0, 0, 0, 0.0588); --dark-gray: rgba(0, 0, 0, 0.851); --orange: #e84f0e; --green: #52c41a; --off-green: #b7eb8f; } .offers-incentive { width: 100%; box-sizing: border-box; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; position: relative; } .offers-incentive h2 { margin: 0; font-size: 28px; line-height: 38px; font-weight: 600; } .offers-incentive .offers-wrapper { display: flex; gap: 12px; align-items: flex-start; } @media (max-width: 910px) { .offers-incentive .offers-wrapper { display: flex; flex-direction: column; } }.selector { width: 100%; box-sizing: border-box; background-color: #fff; border-radius: 0 0 14px 14px; padding: 10px 7px; display: inline-flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; } .selector .destination-selector { width: 100%; background-color: var(--light-blue); gap: 12px; display: inline-flex; align-items: center; overflow-x: auto; border-radius: 100px; } .selector .destination-selector .destination { min-width: 100px !important; width: 100%; padding: 6px; display: flex; justify-content: center; align-items: center; color: #000; font-size: 14px; font-weight: 400; background-color: transparent; border: none; font-family: inherit !important; border-radius: 100px; cursor: pointer; transition: background-color 0.3s ease; flex-shrink: 1; } .selector .destination-selector .destination.selected { color: #fff; background-color: var(--blue); } .selector .departure-selector-wrapper { display: flex; max-width: 250px !important; min-width: 150px !important; width: 100%; flex-shrink: 2; position: relative; } .selector .departure-selector-wrapper .departure-selector { width: 100%; cursor: pointer; background-color: transparent; color: #000; font-size: 14px; font-weight: 400; font-family: inherit !important; border-radius: 6px; border: 2px solid var(--light-blue); display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; margin: 0; box-sizing: border-box; transition: border-color 0.3s ease; } .selector .departure-selector-wrapper .departure-selector span { pointer-events: none; } .selector .departure-selector-wrapper .departure-selector:focus { border-color: var(--highlight-blue); } .selector .departure-selector-wrapper .departure-list { width: 100%; position: absolute; top: 32px; left: 0; background-color: #fff; border-radius: 6px; display: none; flex-direction: column; gap: 0; } .selector .departure-selector-wrapper.open .departure-list { display: flex; z-index: 2; border: 1px solid var(--light-gray); } .selector .departure-selector-wrapper .departure-selector svg { transition: transform 0.3s ease; } .selector .departure-selector-wrapper.open .departure-selector svg { transform: rotate(180deg); } .selector .departure-selector-wrapper .departure-list .departure { width: 100%; padding: 6px 12px; box-sizing: border-box; color: #000; font-size: 14px; font-weight: 400; background-color: transparent; border: none; cursor: pointer; border-radius: 6px; font-family: inherit !important; } .selector .departure-selector-wrapper .departure-list .departure.selected { color: var(--blue); background-color: var(--off-blue); font-weight: 600; } @media (hover: hover) { .selector .destination-selector .destination:hover { color: #fff; background-color: var(--blue); } .selector .departure-selector-wrapper .departure-list .departure:not(.selected):hover { color: var(--blue); } .selector .departure-selector-wrapper .departure-selector:hover { border-color: var(--highlight-blue); } } @media (max-width: 768px) { .selector { box-sizing: border-box; background-color: #fff; border-radius: 6px; position: relative; } .selector .departure-selector-wrapper { max-width: 150px !important; min-width: initial !important; } .selector .destination-selector .destination { height: 32px; } } @media (max-width: 425px) { .selector { display: flex; flex-direction: column; gap: 12px; } .selector .departure-selector-wrapper { order: 1; max-width: initial !important; min-width: initial !important; } }.side-selector { max-width: 310px; width: 100%; position: sticky; top: 64px; background-color: #fff; border-radius: 12px; border: 1px solid var(--light-gray); padding: 7px; box-sizing: border-box; overflow-y: auto; max-height: calc(100vh - 64px); height: 100%; flex-shrink: 1; scrollbar-width: thin; scrollbar-color: #d9d9d9 transparent; } .side-selector .wrapper, .side-selector .wrapper .additional-filters { display: flex; flex-direction: column; gap: 16px; position: relative; } .side-selector::-webkit-scrollbar { width: 4px; height: 4px; } .side-selector::-webkit-scrollbar-thumb { background-color: #d9d9d9; border-radius: 9999px; } .side-selector::-webkit-scrollbar-button { display: none; } .side-selector .separator { width: 100%; background-color: var(--light-gray); height: 1px; } .side-selector .additional-filters .buttons { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; position: sticky; bottom: 8px; width: 100%; background-color: #fff; z-index: 1; justify-content: space-between; } .side-selector .additional-filters .buttons .remove-filters, .side-selector .additional-filters .buttons .submit-filters { border: 1px solid var(--light-gray); background-color: #fff; cursor: pointer; font-size: 14px; font-family: inherit !important; font-weight: 400; color: #000; border-radius: 6px; width: 100%; height: 40px; transition: all 0.3s ease; } .side-selector .additional-filters .buttons .submit-filters { background-color: var(--blue); color: #fff; } .side-selector .wrapper .additional-filters-button { width: 100%; display: none; align-items: center; justify-content: space-between; border: none; background-color: transparent; color: #000; font-size: 14px; font-family: inherit !important; cursor: pointer; padding-bottom: 10px; } .side-selector .wrapper .additional-filters-button svg { transition: transform 0.3s ease; } .side-selector .wrapper .additional-filters-button.open svg { transform: rotate(180deg); } .side-selector .additional-filters.open { display: flex !important; } @media (hover: hover) { .side-selector .additional-filters .buttons .remove-filters:hover { border-color: var(--blue); } .side-selector .additional-filters .buttons .submit-filters:hover { background-color: var(--highlight-blue); } } @media (max-width: 1100px) { .side-selector { max-width: 250px; } } @media (max-width: 910px) { .side-selector { max-width: initial; width: 100%; position: initial; top: initial; } .side-selector .wrapper .additional-filters-button { display: flex; } .side-selector .additional-filters { display: none !important; } } @media (max-width: 768px) { .side-selector { max-height: 300px; } }.list { width: 100%; display: flex; flex-direction: column; gap: 12px; } .list .card { width: 100%; display: flex; gap: 12px; border-radius: 12px; border: 1px solid var(--light-gray); height: 275px !important; max-height: 275px !important; height: 100%; box-sizing: border-box; background-color: #fff; } .list .card .info { padding: 6px; width: 100%; display: flex; gap: 12px; } .list .card .info .image-wrapper { max-width: 355px !important; width: 100% !important; height: 100%; } .list .card .info .image-wrapper img { width: 355px !important; height: 100%; border-radius: 7px; object-fit: cover; } .list .card .info .details { width: 100%; display: flex; flex-direction: column; gap: 12px; justify-content: center; } .list .card .info .details .hotel { width: 100%; display: flex; flex-direction: column; gap: 6px; } .list .card .info .details .hotel .location { display: inline-flex; align-items: center; gap: 6px; color: rgba(0, 0, 0, 0.651); } .list .card .info .details .hotel .hotel-name { margin: 0; font-size: 20px; color: #000; font-weight: 600; } .list .card .info .details .rating { display: inline-flex; align-items: center; gap: 4px; } .list .card .info .details .rating .no-star-category { display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: #f6ffed; border: 1px solid var(--off-green); color: var(--green); font-size: 12px; padding: 0 7px; } .list .card .info .details .extra-info { display: inline-flex; gap: 12px; align-items: center; } .list .card .info .details .extra-info .item { display: inline-flex; gap: 4px; align-items: center; } .list .card .info .details .extra-info .item span { font-size: 12px; font-weight: 300; color: #000; } .list .card .separator { width: 1px; height: 100%; background-color: var(--light-gray); } .list .card .price-info { max-width: 280px !important; width: 100%; box-sizing: border-box; padding: 14px 14px 14px 2px; display: flex; flex-direction: column; justify-content: space-between; } .list .card .price-info .top { width: 100%; display: flex; flex-direction: column; gap: 8px; } .list .card .price-info .top .price { display: flex; flex-direction: column; } .list .card .price-info .top .price .price-from { font-size: 12px; color: var(--dark-gray); font-weight: 400; } .list .card .price-info .top .price .old-price-wrapper { display: inline-flex; align-items: center; gap: 8px; } .list .card .price-info .top .price .old-price-wrapper .old-price { font-size: 14px; color: #000; font-weight: 400; text-decoration: line-through; } .list .card .price-info .top .price .old-price-wrapper .discount { background-color: var(--orange); border-radius: 4px; padding: 2px 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; } .list .card .price-info .top .price .current-price { font-size: 12px; color: var(--dark-gray); font-weight: 400; } .list .card .price-info .top .price .current-price-per-person { color: var(--blue); font-size: 20px; font-weight: 600; } .list .card .price-info .top .additional-price-info { display: flex; flex-direction: column; gap: 4px; } .list .card .price-info .top .additional-price-info .travelers, .list .card .price-info .top .additional-price-info .flight { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 2px 6px; background-color: rgba(0, 0, 0, 0.0392); justify-content: center; font-size: 10px; width: fit-content; } .list .card .price-info .top .additional-price-info .flight { background-color: #f6ffed; border: 1px solid var(--off-green); color: var(--green); } .list .card .price-info .choose-button { width: 100%; box-sizing: border-box; padding: 12px 24px; display: flex; align-items: center; justify-content: center; background-color: var(--green); border-radius: 8px; color: #fff !important; font-size: 16px; font-weight: 400; text-decoration: none !important; } .list .view-all-btn { width: 100%; box-sizing: border-box; padding: 12px 24px; display: flex; align-items: center; justify-content: center; background-color: #fff; text-decoration: none !important; border: 1px solid var(--light-gray); border-radius: 8px; color: #000 !important; font-size: 14px; font-weight: 400; } @media (max-width: 1200px) { .list, .list .card { flex-shrink: 2; } .list .card .price-info { max-width: 200px !important; } .list .card .info .image-wrapper { width: auto !important; max-width: 275px !important; height: 100%; } .list .card .info .image-wrapper img { width: 275px !important; } } @media (max-width: 768px) { .list .card { flex-direction: column; height: auto !important; max-height: initial !important; } .list .card .info { flex-direction: column; width: initial; } .list .card .info .image-wrapper { max-width: initial !important; width: 100% !important; height: 210px; box-sizing: border-box; } .list .card .info .image-wrapper img { width: 100% !important; height: 210px; } .list .card .separator { display: none; } .list .card .price-info { max-width: initial !important; padding: 6px; gap: 12px; } }.hotel-category { width: 100%; display: flex; flex-direction: column; gap: 12px; z-index: 1; height: 100%; } .hotel-category span { font-size: 14px; font-weight: 600; color: #000; } .hotel-category .items { width: 100%; display: flex; flex-direction: column; gap: 6px; } .hotel-category .items .item { display: inline-flex; align-items: center; width: 100%; gap: 8px; } .hotel-category .items .item .star-checkbox { margin: 0; width: 20px; height: 20px; cursor: pointer; border-radius: 4px !important; border: 1px solid var(--light-gray); background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border 0.3s ease; position: relative; } .hotel-category .items .item.checked .star-checkbox { background-color: var(--blue); } .hotel-category .items .item.checked .star-checkbox::after { content: ""; position: absolute; top: 1px; left: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (hover: hover) { .hotel-category .items .item .star-checkbox:hover { border-color: var(--blue); } } .hotel-category .items .item .stars { display: inline-flex; gap: 4px; align-items: center; } @media (hover: hover) { .hotel-category .items .item .stars:hover { cursor: pointer; } }.date-selector { width: 100%; display: flex; flex-direction: column; gap: 12px; z-index: 1; height: 100%; } .date-selector span { font-size: 14px; font-weight: 600; color: #000; } .date-selector .date-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; } .date-selector .date-items .date { width: 100%; padding: 2px 4px; width: 100%; box-sizing: border-box; border-radius: 4px; border: none; background-color: transparent; color: var(--off-black); font-size: 14px; font-weight: 400; font-family: inherit !important; cursor: pointer; text-align: center; transition: background-color 0.3s ease; } @media (hover: hover) { .date-selector .date-items .date:hover { color: var(--blue); background-color: var(--off-blue); } } .date-selector .date-items .date.selected { border: 1px solid var(--blue); background-color: var(--off-blue); color: var(--blue); font-weight: 600; } @media (max-width: 910px) { .date-selector { gap: 6px; position: relative; top: 0; background-color: #fff; padding: 10px 7px; box-sizing: border-box; border-radius: 6px; } .date-selector .date-items { display: inline-flex; flex-direction: initial; align-items: center; overflow-x: auto; flex-shrink: 0; padding-bottom: 6px; } .date-selector .date-items .date { text-align: center; text-wrap: nowrap; } } @media (max-width: 768px) { .date-selector { padding: 10px 0 0 0; } }.loading-banner, .warning-banner { width: 100%; padding: 24px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border-radius: 12px; background-color: var(--light-blue); box-sizing: border-box; } .warning-banner { background-color: var(--off-orange); } .loading-banner .content, .warning-banner .content { display: flex; align-items: center; gap: 12px; } .loading-banner .content .text, .warning-banner .content .text { display: flex; flex-direction: column; gap: 6px; } .loading-banner .content .text .title, .warning-banner .content .text .title { font-size: 16px; font-weight: 600; } .loading-banner .content .text .subtitle, .warning-banner .content .text .subtitle { font-size: 14px; } .loading-banner .loading-spinner, .warning-banner .loading-spinner { display: flex; margin: 0 auto; border: 4px solid transparent; border-top: 4px solid var(--blue); border-radius: 50%; width: 41px; height: 41px; animation: spin 2s linear infinite; position: relative; } .warning-banner .loading-spinner { border-top: 4px solid #f0ab00; } .button-wrapper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .button-wrapper span { font-size: 14px; } .button-wrapper .alt-search { background-color: #f0ab00; padding: 8px 16px; width: fit-content; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff !important; text-decoration: none !important; font-size: 14px; } .button-wrapper .contact-us { background-color: transparent; padding: 8px 16px; width: fit-content; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #f0ab00 !important; text-decoration: none !important; border: 1px solid #f0ab00; font-size: 14px; } @media (max-width: 425px) { .button-wrapper { flex-direction: column; } .button-wrapper .alt-search { order: 1; } .button-wrapper .contact-us { order: 3; } .button-wrapper span { order: 2; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }