@import url("https://use.typekit.net/ivg5jbr.css");

:root {
    --menutoggle-color: #000000;
    --menu-background-color: #40732a;
    --menu-pagebutton-background-color: #d8d8d8;
    --menu-pagebutton-font-color: #000000;
    --menu-pagebutton-active-background-color: #333333;
    --menu-pagebutton-active-font-color: #ffffff;
    --bookbutton-background-color: #40732a;
    --bookbutton-fontcolor: #ffffff;
    --result-facilityname-fontcolor: #40732a;
    --result-facilityname-fontsize: 22px;
    --moreinfobutton-background-color: rgba(255, 255, 255, 0.7);
    --moreinfobutton-fontcolor: #212529;
    --moreinfobutton-background-color-hover: rgba(255, 255, 255, 0.7);
    --moreinfobutton-fontcolor-hover: #212529;
    --price-fontcolor: #8EA84C;
    --price-fontsize: 22px;
    --originalprice-fontcolor: #4A4542;
    --originalprice-fontsize: 18px;
    --discount-fontcolor: #8EA84C;
    --discount-fontsize: 16px;
    --result-period-fontcolor: #000000;
    --result-period-fontsize: 16px;
    --result-description-fontcolor: #4A4542;
    --result-description-fontsize: 14px;
    --activityfilter-items-border-color: #ededed;
    --activityfilter-itemgroups-gap: 10px;
    --totalcosts-fontcolor: #4A7042;
    --general-fontcolor: #4A4542;
}

/* Menu */
body.menu-on-top .menu,
body.menu-on-left .menu {
    background-color: transparent;
}

.filter-control-placeholder {
    border: 1px solid #EDEDED;

    .filter-control-toggle {
        color: var(--general-fontcolor);
    }
}

.filter.maps-toggle a {
    background-color: #8EA84C !important;
    color: #ffffff;
    max-width: none;
}

.pagination-row .page-button {
    background-color: #d8d8d8;
    color: #000000;
}

.pagination-row .page-button.active {
    background-color: #333333;
    color: #ffffff;
}

.form-check-input {
    border: 1px solid #BABABA;
    border-radius: 3px;
}

.pagination-footer-row {
    background-color: transparent;
}

.activitytype-group.reset-activity-selection-group {
    border-top: none !important;

    .reset-activity-link {
        display: block;
        font-weight: 700;
        margin: .25rem 0 1rem;
        color: #F39200;
        text-decoration: underline;
    }
}

.activity-types-container {
    padding: 1rem 0;
}

/* Result items */
.accommodation-result-list .accommodation-result {
    background-color: #F9F9F9;
    border: none;
}

.accommodation-name h4 {
    color: #4A7042;
    font-size: 24px;
    font-family: "Roundark" !important;

    span {
      font-family: "Roundark" !important;  
    }
}

.accommodation-name {
    margin-top: 1rem;
}

.accommodation-result
    .accommodation-image
    .accommodation-more-information-inline {
    background-color: rgba(255, 255, 255, 0.7);
}

.show-information,
.show-external-information,
.accommodation-result
    .accommodation-image
    .accommodation-more-information-inline
    a {
    color: #212529;
}

.accommodation-result .accommodation-more-information a svg path {
    fill: #212529;
}

.accommodation-result .period,
.general-information-container .accommodation-period {
    color: #B45239;
    font-size: 16px;

    span:last-of-type {
        font-weight: 400;
    }
}

.accommodation-price,
.accommodation-result .accommodation-price {
    color: #8EA84C;
    font-size: 22px;
}

.accommodation-result .accommodation-price .original-price {
    color: #808080;
    font-size: 18px;
}

.accommodation-result .accommodation-price .discount-name,
.discount-name {
    color: #ee8422;
    font-size: 16px;
}

.accommodation-result .accommodation-description {
    color: #4A4542;
    font-size: 14px;
    font-family: "Nicky Sans";
}

.accommodation-button button {
    background-color: #F39200 !important;
    color: #ffffff;
    border-radius: 50px;
}

/* More information page */
.backtoresultsbutton-container a {
    font-family: "Nicky Sans";
    text-decoration: underline;
    font-weight: 700;
    color: #F39200;

    &:hover {
        text-decoration: none;
    }
}

.book-now-button {
    background-color: #40732a;
    color: #ffffff;
}

.item-button button {
    background-color: #40732a;
    color: #ffffff;
}

.accommodation-tabs-container > ul.nav.nav-tabs > .nav-item > .nav-link {
    background-color: #d0d0d0;
    color: #ffffff;
}

.accommodation-tabs-container > ul.nav.nav-tabs > .nav-item > .nav-link.active {
    background-color: #ffffff;
    color: #40732a;
}

/* BookNow page */
.book-now-buttons .back-button,
.book-now-buttons .next-button,
.book-now-buttons .save-button {
    background-color: #70706e;
    color: #ffffff;
}

.book-now-header {
    background-color: transparent;
    display: block;
    margin: .25rem 0;
    color: #4A7042;

    span {
        font-family: "Roundark" !important;
        font-size: 24px;
    }
}

.book-now-form {
    background-color: #f5f5f5;
    color: #212529;
}

/* Payment buttons */
.paymentbutton {
    background-color: #70706e;
    color: #ffffff;
}

.root-container {
    display: flex !important;
    flex-direction: column;
}

@media (min-width: 1024px) {
 .root-container {
    flex-direction: row;
 }
}

.menu {
    position: relative;
    padding: 0;

    & > div {
        /* display: none !important; */
    }

    .main-filters {
        display: flex !important;
        flex-direction: column;
    }

    .secondary-filters {
        display: block !important;
        position: unset !important;
        /* width: 300px; */
    }

    .filters-row .filter {
        width: 100%;
    }

    .home-row {
        display: none;
    }

    .arrival-date-filter {
        padding-top: 0;
    }

    .pagination-row {
        display:flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0;
    }
}

@media (min-width: 1024px) {
 .menu {
    padding: 0 15px 10px;
 }
}

.result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-buttons {
    display: flex;
    gap: 1rem;
    padding: 0 1rem 1rem;
    height: fit-content;

    a, button {
        border: 2px solid #F39200;
        border-radius: 50px;
    }

    a {
        color: #F39200;
        padding: .5rem;

        &:hover {
            color: #F39200 !important;
        }
    }

    .result-book-button {
        border-radius: 50px;
    }
}

.result-properties ul {
    display: flex;
    flex-wrap: wrap;
    border: none;
    height: fit-content;
    margin: 1rem 0;

    li {
        height: fit-content;
        background-color: #EDEDED;
        width: fit-content;
        border-radius: 50px;
        padding: .25rem .75rem;
        letter-spacing: 0.7px;
        color: #4A4542;
        font-family: "Nicky Sans";
    }
}

.result-description {
    p {
        max-height: unset;
    }

    &::after {
        display: none;
    }
}

.result-period * {
    font-size: 16px;
    color: #B45239 !important;
}

.nav.nav-tabs {
    border-bottom: none;

    .nav-item {
        margin-bottom: 0;

        .nav-link {
            background-color: #fff !important;
            color: #4A4542 !important;
            box-shadow: none !important;
            border-radius: 50px;
            border: none;
        }

        .nav-link.active {
            background-color: #EDEDED !important;
        }
    }
}

.book-now-form {
    padding-bottom: 2rem;

    * {
        font-size: 15px;
    }

    .surcharge-group-header {
        padding-bottom: .5rem;
        font-weight: 400;
        /* font-family: "Nicky Sans" !important; */
    }

    .surcharge-group-item .form-group {
        .col-form-label:first-of-type {
            order: -1;
        }
    }

    .form-control {
        border: 1px solid #BABABA;
        border-radius: 50px;
    }

    .booknow-section {
        .form-control {
            border-radius: 50px;
        }

        .btn {
            background-color: #4A7042;
            color: #fff;
            border-radius: 50px;
            text-transform: uppercase;
        }
    }
}

.book-now-overview {
    background-color: #ffffff;
    color: #4A4542;
    line-height: 2;

    .total-price * {
        font-family: "Nicky Sans" !important;
    }
}

.book-now-buttons .btn {
    background-color: transparent;
    color: #F39200;
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

.accommodation-result {
    display: flex;
    flex-direction: column;
}

.result-periodandprice {
    margin: 1rem 0;
}

.information-wrapper {
    gap: 1rem;
}