/*
    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;
}


/* 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;
}

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

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

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

/* datepicker wrapper */

.ui-datepicker {
    display: none;
    z-index: 1060 !important;
    width: auto !important;
    padding: .5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    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(--bs-secondary-bg);
}

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

.ui-datepicker-calendar .ui-state-active {
    background: var(--bs-primary);
    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(--bs-border-radius);
}

#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(--bs-primary-rgb), .25);
    border-top-color: var(--bs-primary);
    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(--bs-primary);
    color: #fff;
}

.ui-datepicker-calendar td.ui-selected-range a {
    background: rgba(var(--bs-primary-rgb), .16);
    color: var(--bs-primary);
}

.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;
}

/* 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;
    }

}