/*
    Theme Name: Salbos PRO - broneerimissüsteem hotellidele
    Description: Lihtne ja mugav veebiliides paketide või tubade broneerimiseks kliendi poolel.

    Text Domain: salbos
    Author: Confemar OÜ

    Version: 2.0
    Domain Path: /lang
*/

:root {
    --opacity: .75;
}

body {
    background: linear-gradient(rgba(255, 255, 255, var(--opacity)), rgba(255, 255, 255, var(--opacity))), url(assets/images/default-header.jpg) no-repeat center center fixed;
    background-size: cover;
}

.offcanvas, .pop-up{ 
    z-index: 1060;
}

#mobile-nav{
    width: 18rem;
    transition: transform .4s ease-in-out;
}

.price-compare li::marker {
    color: var(--bs-primary);
}

.cursor-pointer{
    cursor: pointer !important;
}

.price-compare{
    top: 14rem;
    z-index: 1030;
}

.price-compare .closed, .price-compare .closed .card-header{
    width: 2.563rem;
    height: 2.563rem;
    line-height: 2.563rem;
}

.filter-backdrop {
    z-index: 1040;
}

#ui-datepicker-div, .guest-block, .code-block{
    z-index: 1060 !important;
}

.alert-block{
    z-index: 1070;
}

.carousel img, img.default{
    width: 100%;
    max-width: none;
    object-fit: cover;
    height: 17rem;
}

.room-description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 2.75rem;
    -webkit-line-clamp: 2;
}

.room-description::after{
    content: "\203A";
    position: absolute;
    top: 0;
    right: .5rem;
    bottom: 0;
    font-size: 2rem;
}

/* icons */

.bi-tripadvisor::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M175.335 281.334c0 24.483-19.853 44.336-44.336 44.336-24.484 0-44.337-19.853-44.337-44.336 0-24.484 19.853-44.337 44.337-44.337 24.483 0 44.336 19.853 44.336 44.337zm205.554-44.337c-24.48 0-44.336 19.853-44.336 44.337 0 24.483 19.855 44.336 44.336 44.336 24.481 0 44.334-19.853 44.334-44.336-.006-24.47-19.839-44.31-44.309-44.323l-.025-.01v-.004zm125.002 44.337c0 68.997-55.985 124.933-124.999 124.933a124.466 124.466 0 01-84.883-33.252l-40.006 43.527-40.025-43.576a124.45 124.45 0 01-84.908 33.3c-68.968 0-124.933-55.937-124.933-124.932A124.586 124.586 0 0146.889 189L6 144.517h90.839c96.116-65.411 222.447-65.411 318.557 0H506l-40.878 44.484a124.574 124.574 0 0140.769 92.333zm-290.31 0c0-46.695-37.858-84.55-84.55-84.55-46.691 0-84.55 37.858-84.55 84.55 0 46.691 37.859 84.55 84.55 84.55 46.692 0 84.545-37.845 84.55-84.54v-.013.003zM349.818 155.1a244.01 244.01 0 00-187.666 0C215.532 175.533 256 223.254 256 278.893c0-55.634 40.463-103.362 93.826-123.786l-.005-.006h-.003zm115.64 126.224c0-46.694-37.858-84.55-84.55-84.55-46.691 0-84.552 37.859-84.552 84.55 0 46.692 37.855 84.55 84.553 84.55 46.697 0 84.55-37.858 84.55-84.55z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M175.335 281.334c0 24.483-19.853 44.336-44.336 44.336-24.484 0-44.337-19.853-44.337-44.336 0-24.484 19.853-44.337 44.337-44.337 24.483 0 44.336 19.853 44.336 44.337zm205.554-44.337c-24.48 0-44.336 19.853-44.336 44.337 0 24.483 19.855 44.336 44.336 44.336 24.481 0 44.334-19.853 44.334-44.336-.006-24.47-19.839-44.31-44.309-44.323l-.025-.01v-.004zm125.002 44.337c0 68.997-55.985 124.933-124.999 124.933a124.466 124.466 0 01-84.883-33.252l-40.006 43.527-40.025-43.576a124.45 124.45 0 01-84.908 33.3c-68.968 0-124.933-55.937-124.933-124.932A124.586 124.586 0 0146.889 189L6 144.517h90.839c96.116-65.411 222.447-65.411 318.557 0H506l-40.878 44.484a124.574 124.574 0 0140.769 92.333zm-290.31 0c0-46.695-37.858-84.55-84.55-84.55-46.691 0-84.55 37.858-84.55 84.55 0 46.691 37.859 84.55 84.55 84.55 46.692 0 84.545-37.845 84.55-84.54v-.013.003zM349.818 155.1a244.01 244.01 0 00-187.666 0C215.532 175.533 256 223.254 256 278.893c0-55.634 40.463-103.362 93.826-123.786l-.005-.006h-.003zm115.64 126.224c0-46.694-37.858-84.55-84.55-84.55-46.691 0-84.552 37.859-84.552 84.55 0 46.692 37.855 84.55 84.553 84.55 46.697 0 84.55-37.858 84.55-84.55z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.spinner-thin{
    --bs-spinner-border-width: 3px;
}

/* material symbols */

@font-face {
    font-family: 'Material Symbols';
    font-style: normal;
    font-weight: 200;
    src: url(assets/css/fonts/materialIcons.woff2) format('woff2');
}

.mi{
    font-family: 'Material Symbols';
    font-weight: 200;
    font-style: normal;
    display: inline-block !important;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 200;
    src: url(assets/css/fonts/materialIconsOutlined.woff2) format('woff2');
}

.mi-o{
    font-family: 'Material Symbols Outlined';
    font-weight: 200;
    font-style: normal;
    display: inline-block !important;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}


/* datepicker wrapper */

.ui-datepicker {
    display: none;
    z-index: 1060 !important;
    width: auto !important;
    padding: .5rem;
    background: var(--vz-secondary-bg, var(--bs-body-bg, #fff));
    border: 1px solid var(--vz-border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--vz-border-radius-xl, var(--bs-border-radius, .375rem));
    box-shadow: var(--vz-box-shadow, var(--bs-box-shadow, 0 .5rem 1rem rgba(0,0,0,.15)));
    color: var(--vz-body-color, var(--bs-body-color, #212529));
    font-size: .875rem;
}

#ui-datepicker-div.ui-datepicker-multi-2[style*="display: block"] {
    display: block !important;
}

#ui-datepicker-div.ui-datepicker-multi-2 {
    width: auto !important;
}

#ui-datepicker-div.ui-datepicker-multi-2 .ui-datepicker-group {
    float: none;
    display: inline-block;
    vertical-align: top;
}

#ui-datepicker-div.ui-datepicker-multi-2 .ui-datepicker-group + .ui-datepicker-group {
    margin-left: 1rem;
}

#ui-datepicker-div .ui-datepicker-buttonpane {
    clear: both;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
}

.ui-datepicker-header {
    position: relative;
    padding: .25rem 2rem .75rem;
    border: 0;
    background: transparent;
}

.ui-datepicker-title {
    text-align: center;
    font-weight: 600;
    color: var(--bs-body-color);
}


.ui-datepicker-prev, .ui-datepicker-next {
    position: absolute;
    top: .15rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    cursor: pointer;
    text-decoration: none;
}

.ui-datepicker-prev {
    left: .25rem;
}

.ui-datepicker-next {
    right: .25rem;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    background: var(--bs-secondary-bg);
}


.ui-datepicker-prev span, .ui-datepicker-next span {
    display: none;
}


.ui-datepicker-prev::before, .ui-datepicker-next::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "bootstrap-icons";
    font-size: 1rem;
    line-height: 1;
}

.ui-datepicker-prev::before {
    content: "\F284"; /* bi-chevron-left */
}

.ui-datepicker-next::before {
    content: "\F285"; /* bi-chevron-right */
}

.ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.ui-datepicker-calendar th{
    padding: .35rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-align: center;
}

.ui-datepicker-calendar td::after{
    content: attr(title);
    display: block;
    font-size: 0.625rem;
    white-space: nowrap;
}

.ui-datepicker-calendar td{
    padding: .15rem;
    text-align: center;
}

.ui-datepicker-calendar td.no-rooms a{
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}


.ui-datepicker-calendar a, .ui-datepicker-calendar span {
    display: block;
    min-width: 2rem;
    padding: .35rem .45rem;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    text-decoration: none;
}

.ui-datepicker-calendar a:hover {
    background: var(--vz-light, var(--bs-secondary-bg, #f3f6f9));
}

.ui-datepicker-today a {
    outline: 1px solid var(--vz-primary, var(--bs-primary, #0d6efd));
    color: var(--vz-primary, var(--bs-primary, #0d6efd));
}

.ui-datepicker-calendar .ui-state-active {
    background: var(--vz-primary, var(--bs-primary, #0d6efd));
    color: #fff;
}

.ui-datepicker-unselectable span {
    color: var(--bs-secondary-color);
    opacity: .45;
}

#ui-datepicker-div {
    position: relative;
}

#ui-datepicker-div.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .75);
    border-radius: var(--vz-border-radius-xl, var(--bs-border-radius, .375rem));
}

#ui-datepicker-div.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid rgba(var(--vz-primary-rgb, var(--bs-primary-rgb, 13, 110, 253)), .25);
    border-top-color: var(--vz-primary, var(--bs-primary, #0d6efd));
    border-radius: 50%;
    animation: datepicker-spin .7s linear infinite;
}

@keyframes datepicker-spin {
    to {
        transform: rotate(360deg);
    }
}

.ui-datepicker-calendar td.ui-start-date a,
.ui-datepicker-calendar td.ui-end-date a {
    background: var(--vz-primary, var(--bs-primary, #0d6efd));
    color: #fff;
}

.ui-datepicker-calendar td.ui-selected-range a {
    background: rgba(var(--vz-primary-rgb, var(--bs-primary-rgb, 13, 110, 253)), .16);
    color: var(--vz-primary, var(--bs-primary, #0d6efd));
}

.ui-datepicker-calendar td.ui-start-date a {
    border-radius: var(--bs-border-radius-sm) 0 0 var(--bs-border-radius-sm);
}

.ui-datepicker-calendar td.ui-end-date a {
    border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
}

.salbos-product-block .multiple-cont p.form-field:nth-child(2) label{
    float: none;
    margin: 0 0 0 0.625rem;
    vertical-align: inherit;
}

/* mobile fallback */

@media ( max-width: 575.98px ){

    #ui-datepicker-div.ui-datepicker-multi-2[style*="display: block"] {
        display: block !important;
    }

    .ui-datepicker-multi-2 .ui-datepicker-group {
        width: 100%;
    }

    .ui-datepicker-multi-2 .ui-datepicker-group + .ui-datepicker-group {
        margin-top: 1rem;
    }

}