/*
 Theme Name:     Domizil am Ostseewald (BYT Child)
 Theme URI:      http://themeforest.net/item/book-your-travel-online-booking-wordpress-theme/5632266?ref=themeenergy
 Description:    Book Your Travel Child Theme
 Author:         Panatom and themeenergy
 Template:       BookYourTravel
 Version:        1.0.0
*/

/* =Theme customization starts here
-------------------------------------------------------------- */
:root {
    --color-primary: #dedbba;
    --color-secondary: #e8e8e8;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey: #757575;
    --color-light-grey: #cccccc;
    --color-dark-grey: #444444;


    --font-size-tiny: .75rem;
    --font-size-small: 1.125rem;
    --font-size-body: 1.2rem;
    --font-size-h1: 3.875rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 2.125rem;

    --line-height-body: 1.4;

    --font-family: "Arial", Helvetica, sans-serif;
    --font-family-alt: "Barlow Condensed", sans-serif;

    --width-content: 865px;

    --gap-1: 1rem;
    --gap-2: 2rem;
    --gap-3: 3rem;

    @media screen and (max-width: 479px) {
        --font-size-body: 1rem;
        --font-size-small: 1rem;
        --font-size-tiny: .75rem;
        --font-size-h1: 3rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.8rem;
    }
}




.is-hidden {
    display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

body {
    font-size: var(--font-size-body);
}

input {
    &::placeholder {
        color: var(--color-dark-grey);
    }
    &[type="search"], &[type="email"], &[type="text"], &[type="number"], &[type="password"], &[type="tel"], &[type="url"], &[type="date"] {
        color: var(--color-black);
        font-size: var(--font-size-small);
        font-weight: normal;
        background: var(--color-primary);
    }
    &[type="button"], &[type="reset"], &[type="submit"] {
        color: var(--color-black);
        font-size: var(--font-size-small);
        font-weight: normal;
        background: var(--color-primary);
        text-transform: none;
    }
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: normal;
}

h1 {
  font-size: var(--font-size-h1) !important;
}
h2 {
  font-size: var(--font-size-h2) !important;
}
h3 {
  font-size: var(--font-size-h3) !important;
}


div.selector {
    color: var(--color-black);
    background: var(--color-primary);
    span {
        color: var(--color-dark-grey);
    }
}

.wc-block-components-button:not(.is-link), .gradient-button, .scroll-to-top, .button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    font-weight: normal;
    text-transform: none;
    font-size: var(--font-size-small);
}


header.header {
    z-index: 99998;

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        img {
            height: 80px;
            display: block;
            width: auto;
        }
        .logo--plant {
            height: 135px;
        }

    }
    > .wrap {
        justify-content: center;
        @media screen and (min-width: 768px) {
            justify-content: space-between;
        }
    }
    .main-nav {
        margin-left: 0;
        margin-right: auto;
        #menu-primary-menu {
            display: flex;
            gap: 20px;
            li {
                padding-left: 0;
            }
            &:after {
                display: none;
            }
        }
        @media screen and (min-width: 768px) {
            margin-left: auto;
            margin-right: initial;
            #menu-primary-menu {
                display: inline-block;
                li {
                    padding-left: 20px;
                }
            }
        }
        @media screen and (max-width: 479px) {
            li.page-item-1847, li#menu-item-1849 {
                display: none;
            }
        }
    }
    .main-nav li {
        font-size: var(--font-size-small);
        text-transform: none;
        line-height: 1.5;
        font-weight: normal;
        text-shadow: none;
        letter-spacing: 0;
        a {
            font-weight: normal;
            color: var(--color-black);
            &:hover {
                color: var(--color-dark-grey);
            }
        }
    }
    .main-nav ul ul {
        top: unset;
        background: transparent;
        li {
            list-style-type: circle !important;
            margin-left: 1.5em;
            padding: 0;
        }
    }
}

footer.footer {
    .full-width {
        gap: 20px;
        margin-bottom: 0;
        h6 {
            margin-bottom: 8px;
        }
        @media screen and (max-width: 767px) {
            justify-content: start;
            align-content: start;
        }
        @media screen and (min-width: 768px) {
            display: grid;
            grid-template-columns: 3fr 3fr 4fr;
            align-items: center;
            .logo {
                display: flex;
                align-items: center;
                gap: 10px;
                img {
                    height: 80px;
                }
                img.logo--plant {
                    height: 135px;
                }
            }
            nav {
                justify-self: end;
            }
            p {
                margin: 0 0 1px !important;
            }
            h6 {
                margin-bottom: 3px;
            }
        }
    }

}

.accommodation_item {
    font-size: var(--font-size-small);
    transition: transform 0.2s;
    &:hover {
        transform: translateY(-5px);
        transition: transform 0.2s;
    }
    .item-header, .description {
        border-bottom: 0 !important;
    }
    .item-info-wrapper {
        width: 100%;
    }
    .item_info_grid {
        width: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr;
        margin-bottom: var(--gap-1) !important;
        .label {
            color: var(--color-grey);
        }
    }
    .item_price {
        padding: 0 !important;
        border: 0 !important;
    }
    .price {
        padding: 0;
        font-size: var(--font-size-small);
        em {
            font-style: normal;
            font-family: var(--font-family);
            font-weight: 400;
        }
    }
}


.widget-area {
    .divider {
        margin-top: var(--gap-3);
        margin-bottom: var(--gap-2);
        border-top: 2px solid var(--color-white);
    }
    .textwidget h3 {
        text-align: center;
        margin-bottom: -1rem;
    }
}


.home-footer-sidebar.widget-area .widget > div {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    padding: 0;
    box-shadow: none;

    h4 {
        order: 2;
        font-size: var(--font-size-h3);
    }
}

.hero-sidebar {
    .widget.widget-sidebar.full-width h4 {
        position: absolute;
        z-index: 999;
        color: #fff;
        font-size: 2em;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-shadow: 1px 1px 2px #0008;
        text-transform: uppercase !important;
        @media screen and (min-width: 768px) {
            font-size: 3em;
        }
        @media screen and (min-width: 961px) {
            font-size: 4em;
        }
        @media screen and (min-width: 1200px) {
            font-size: 5em;
        }
    }
    .byt-widget-search .byt-widget-search-inner {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}


/* single accommodation */
.section-accommodation-content {
    section.tab-content {
        margin-inline: auto;
        width: 100%;
        padding-inline: 20px;
        article {
            background: transparent !important;
            padding-inline: 0 !important;
            border-bottom: 2px solid var(--color-white);
            box-shadow: none;
        }
    }
    .tab-content .spinner {
        height: 550px;
        background: var(--color-light) !important;
    }
    #description.tab-content {
        & > article {
            .description__aside {
                display: none;
            }
            @media screen and (min-width: 768px) {
                display: flex;
                .description__main {
                    max-width: 700px;
                    flex: 1 1 70%;
                    padding-right: 5vw;
                }
                .description__aside {
                    display: block;
                    flex: 1 1 30%;
                    padding-top: var(--gap-2);
                }
            }

        }

    }
    .location_description {
        .button + p {
            margin-top: 1.2em;
        }
    }
    .accommodation-meta-info {
        display: flex;
        gap: var(--gap-2) var(--gap-3);
        margin-bottom: var(--gap-3);
        flex-wrap: wrap;
        div {
            align-items: center;
            display: flex;
            gap: var(--gap-1);
            text-wrap: nowrap;

            &:before {
                content: '';
                display: inline-block;
                background-size: cover;
                width: 44px;
                height: 45px;
                background-repeat: no-repeat;
                background-size: 100% auto;
            }
        }
        .meta-info--size {
            &:before {
                background-image: url("assets/icons/icon-area.svg");
            }
        }
        .meta-info--guests {
            &::before {
                width: 39px;
                height: 36px;
                background-image: url("assets/icons/icon-guests.svg");
            }
        }
        .meta-info--bedrooms {
            &:before {
                width: 55px;
                height: 32px;
                background-image: url("assets/icons/icon-bedrooms.svg");
            }
        }
    }

    .tags {
        margin-bottom: var(--gap-2);
        li {
            border-radius: 40px;
            border: 2px solid var(--color-white);
            background: var(--color-secondary);
            padding-inline: 14px !important;
            padding-block: 8px !important;
            height: 48px;
            &:before {
                display: none;
            }
            a:hover {
                color: var(--color-primary);
            }
        }
    }

    .text-wrap h2 {
        font-size: var(--font-size-body);
        font-family: var(--font-family);
        line-height: var(--line-height-body);
        text-transform: none;
        font-weight: bold;
        margin-bottom: 0;
    }

    @media screen and (min-width: 768px) {
        .facilities-extra-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }
    .facilities_extra, .facilities_extra_2 {
        & > h2 {
            display: none;
        }
    }
    .text-wrap {
        p + ul {
            margin-top: calc(-20px + 4px);
        }
        h2 + ul {
            margin-top: 4px;
        }
        ul {
            margin-left: 15px;
            li {
                list-style: none;
                padding-block: 0;
                &:before {
                    content: '⋆';
                    margin-left: -14px;
                    margin-right: 2px;
                    font-size: 1.3em;
                    line-height: 0.8em;
                }
            }
        }
    }
    .chart {
        color: #000;
    }
    .main & .reviews {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-1);
        li {
            padding: 10px;
            background: var(--color-white);
            font-size: var(--font-size-small);
            .review__head {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: var(--gap-1);
            }
            .review__author {
                font-weight: bold;
                width: 100%;
                flex: 0 1 100%;
            }
            .review__date {
                width: 30%;
                flex: 0 1 30%;
                font-size: var(--font-size-tiny);
                color: var(--color-grey);
            }
            .review__rating {
                flex: 1 1 0;
                font-size: var(--font-size-h3);
                line-height: var(--font-size-tiny);
            }

        }
    }

    #availability .extraitems {
        .per-day, .per-person {
            display: none;
        }
    }
}

/* search */

body .main aside .widget {
    background-color: transparent;
    box-shadow: none;
    padding: 0 var(--gap-1) 0 0 !important;

    color: var(--color-black) !important;
    .byt-widget-search {
        margin: 0;
    }
    .byt-widget-search-inner {
        padding: 0;
    }

    h4 {
        font-size: var(--font-size-h3);
        color: var(--color-black);
        border-bottom: 2px solid var(--color-white);
    }

    .filter {
        > .label {
            font-weight: 400;
        }
    }
}

.section-search-results {
    .sort-by  {
        padding: 0 0 5px;
        background: transparent !important;
        box-shadow: none;
        border-bottom: 2px solid var(--color-white);
        height: 55px;
        .sort {
            &, li {
                border: 0;
            }
            li {
                border-radius: 40px;
                background: var(--color-primary);
                padding-top: 8px !important;
                padding-bottom: 8px !important;
                .ascending {
                    top: calc(3px + 5px);
                }
                .descending {
                    top: calc(12px + 5px);
                }
            }
        }
    }
    .sort-by h3,.view-type, .sort li:nth-child(2) {
        display: none;
    }
}

/* Contact */

.contact__message {
    margin-bottom: var(--gap-1);
}

/* lightSlider */

.lightSlider li {
    aspect-ratio: 16/9;
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
.lSSlideOuter .lSPager.lSGallery {
    margin-inline: auto !important;
    li a {
        aspect-ratio: 3/2;
        display: inline-block;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}


/* ui */
#hero-sidebar .dOver {
    z-index: 99998;
}

.has-featured-image .section-accommodation-content  {
    .tab-content {
        margin-top: 0;
    }
    .page-featured-image + .tab-content {
        margin-top: 600px;
    }
}

.main .modal a.gradient-button:not(.right) {
  background: var(--color-primary) !important;
}

.ui-slider-horizontal .ui-slider-handle {
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.2);
}

.byt-widget-search .slider-container .ui-slider-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;

    padding: 3px 2px 0;
    text-align: center;
}

.ui-datepicker .ui-datepicker-group {

    > *, td,
    .dp-highlight a.ui-state-default, .f-item .unavailable span,
    .dp-highlight.dp-highlight-start-date::after
     {
        background: var(--color-white);
        color: var(--color-black);
    }
    .dp-highlight a.ui-state-default, .f-item .available span, .dp-highlight.dp-highlight-start-date::after, .dp-highlight.dp-highlight-end-date::after {
        background: var(--color-white);
        color: var(--color-black);
    }
    .ui-datepicker-unselectable, tbody .ui-datepicker-unselectable.ui-state-disabled .ui-state-default {
        background: var(--color-white);
        color: var(--color-light-grey);
        text-decoration: line-through;
    }
    .ui-datepicker-unselectable.dp-highlight.dp-highlight-end-date .ui-state-default {
        color: var(--color-grey);
        text-decoration: none;
    }

    .dp-highlight a.ui-state-hover, .dp-highlight-selected span, .f-item .selected span, td:not(.ui-datepicker-unselectable) a.ui-state-hover {
        background: var(--color-primary) !important;
        color: var(--color-black) !important;
        text-decoration: none !important;
    }
    td:not(.ui-datepicker-unselectable) a.ui-state-hover {
        background: var(--color-black) !important;
        color: var(--color-white) !important;
        border-radius: 40px;
        width: 44px;
    }
    .ui-datepicker-other-month {
        text-decoration: none !important;
    }

    .dp-highlight.dp-highlight-selected.dp-highlight-start-date, .dp-highlight.dp-highlight-selected.dp-highlight-end-date {
        .ui-state-default {
            color: var(--color-white) !important;
            text-decoration: none;
        }

        &::after {
            background: var(--color-black) !important;
            aspect-ratio: 1;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 25px;
        }
    }
    .dp-highlight.dp-highlight-selected.dp-highlight-start-date::before {
        content:'';
        position:absolute;
        background: var(--color-primary) !important;
        width: 50%;
        height: 100%;
        right: 0%;
    }
    .dp-highlight.dp-highlight-selected.dp-highlight-end-date::before {
        content:'';
        position:absolute;
        background: var(--color-primary) !important;
        width: 50%;
        height: 100%;
        left: 0%;
    }

    .dp-highlight.dp-highlight-start-date a, .dp-highlight.dp-highlight-end-date a, .dp-highlight.dp-highlight-start-date span, .dp-highlight.dp-highlight-end-date span {
        background: none !important;
    }

    .ui-datepicker-header, .ui-datepicker-calendar, table th {
        border: 0;
    }
    .ui-datepicker-calendar {
        border-collapse: separate;
        td {
            border-block: 3px solid #fff;
        }
    }

    .ui-datepicker-prev {
        left: 12px;
    }
    .ui-datepicker-next {
        right: 12px;
    }
    .ui-icon::before {
        color: var(--color-black);
    }
}

.dp-highlight-selected {
    &.dp-highlight-start-date, &.dp-highlight-end-date {
        cursor: pointer;
        cursor: url("assets/icons/icon-reset.svg") 16 16, pointer;
    }
}

@media screen and (min-width: 768px) {
  .ui-datepicker-multi-2 {
    .ui-datepicker-group {
        width: calc(50% - 20px);
        padding: 10px;
        margin-inline: 10px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        background: var(--color-white);
    }
  }
}

section.full-width .ui-datepicker-multi-2 td, .full-screen section.three-fourth .ui-datepicker-multi-2 td {
    height: 50px;
}
section.full-width .ui-datepicker-multi-2 td span, section.full-width .ui-datepicker-multi-2 td a, .full-screen section.three-fourth .ui-datepicker-multi-2 td span, .full-screen section.three-fourth .ui-datepicker-multi-2 td a {
  line-height: 44px;
  height: 44px;
}

.calendar-colors {
    display: none;
}

.booking_terms > div {
    border: 0;
    background: var(--color-white);
}

article.static-content {
    background: transparent !important;
    box-shadow: none;
    max-width: var(--width-content);
    h1 {
        font-size: var(--font-size-h2);
    }
}


/** WooCommerce **/

.wp-child-theme-BookYourTravel-Child {
    .wc-blocks-components-select .wc-blocks-components-select__container {
        border-radius: 40px;
    }
    .wc-blocks-components-select .wc-blocks-components-select__label {
        top: 2px;
        left: 12px;
    }
    .wc-blocks-components-select .wc-blocks-components-select__select {
        padding-top: 12px;
        padding-inline: 11px;
    }
    .wc-blocks-components-select .wc-blocks-components-select__select:focus {
        padding-inline: 11px;
        padding-top: 12px;
    }
    .wc-block-components-form .wc-block-components-text-input input[type="email"], .wc-block-components-form .wc-block-components-text-input input[type="number"], .wc-block-components-form .wc-block-components-text-input input[type="password"], .wc-block-components-form .wc-block-components-text-input input[type="tel"], .wc-block-components-form .wc-block-components-text-input input[type="text"], .wc-block-components-form .wc-block-components-text-input input[type="url"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="number"], .wc-block-components-text-input input[type="password"], .wc-block-components-text-input input[type="tel"], .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="url"] {
        padding-inline: 14px;
    }
    .wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label {
        top: 22px;
        left: 12px;
    }
    .wc-block-components-form .wc-block-components-text-input input:autofill + label, .wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input input:autofill + label, .wc-block-components-text-input.is-active label {
        opacity: 0;
    }
}


/* Search widget slider current value. */
.slider-container {
    position: relative;
}

.slider-container .slider-current-value {
    display: block;
    text-align: center;
    margin-top: 0.35rem;
    font-weight: 600;
}

/* Datepicker clear button */
.datepicker-wrap {
    position: relative;
}
.datepicker-wrap .datepicker-clear {
    display: none;
    position: absolute;
    right: 2.5em;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0.25em 0.4em;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    color: #0005;
}

.widget-search .ui-datepicker-trigger {
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 479px) {
    body {
        font-size: var(--font-size-body) !important;
    }
    .ico-email a {
        font-size: 1rem;
        line-height: 1.2em;
        vertical-align: top;
    }
}