/* --------------------------------------------------------------------------
 * Parken grid
 * -------------------------------------------------------------------------- */

.devakantiegids-parken-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* Titel boven de resultaten */
#list-view h1#vakantieparken-count-title {
    margin-top: 0;
    margin-bottom: 24px;
    padding-top: 0;

    color: var(--hc-text);

    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}


/* Hotelkaart */
.vakantiepark_card {
    display: flex;
    flex-direction: column;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fcfd 100%
        );

    border: 1px solid rgba(7, 153, 173, 0.14);
    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(5, 70, 80, 0.08),
        0 2px 6px rgba(5, 70, 80, 0.04);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


/* Gekleurde lijn onderaan */
.vakantiepark_card::after {
    content: "";

    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--hc-green) 0%,
            var(--hc-turquoise) 48%,
            var(--hc-yellow) 100%
        );

    border-radius: 10px 10px 0 0;

    opacity: 0;

    transform: scaleX(0.65);

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}


.vakantiepark_card:hover {
    border-color: rgba(7, 153, 173, 0.28);

    box-shadow:
        0 20px 44px rgba(5, 70, 80, 0.15),
        0 5px 14px rgba(5, 70, 80, 0.07);

    transform: translateY(-5px);
}


.vakantiepark_card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}


/* Promotielabel */
.vakantiepark_card .promo-label {
    position: absolute;
    z-index: 5;

    top: 14px;
    left: 14px;

    margin: 0;
    padding: 7px 12px;

    color: var(--hc-text);

    background:
        linear-gradient(
            135deg,
            #ffc12c 0%,
            var(--hc-yellow) 60%,
            #ff9f00 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;

    box-shadow:
        0 6px 16px rgba(255, 174, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* Afbeeldingsgedeelte */
.vakantiepark_card .park-image {
    position: relative;

    overflow: hidden;

    background: var(--hc-turquoise-light);
}


.vakantiepark_card .park-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 58%,
            rgba(3, 45, 52, 0.18) 100%
        );

    pointer-events: none;
}


.vakantiepark_card .park-image img {
    width: 100%;
    height: 225px;

    display: block;

    object-fit: cover;

    transition:
        opacity 0.35s ease,
        transform 0.45s ease;
}


.vakantiepark_card .park-image .featured-image {
    display: block;
}


.vakantiepark_card .park-image .hover-image {
    position: absolute;

    top: 0;
    left: 0;

    opacity: 0;
}


.vakantiepark_card:hover .park-image .featured-image {
    opacity: 0;
    transform: scale(1.04);
}


.vakantiepark_card:hover .park-image .hover-image {
    opacity: 1;
    transform: scale(1.04);
}


/* Logo van aanbieder */
.vakantiepark_card .park-image .aanbieder-logo {
    width: 58px;
    height: 58px;

    position: absolute;
    z-index: 4;

    top: 14px;
    right: 14px;

    padding: 6px;

    object-fit: contain;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(7, 153, 173, 0.12);
    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(5, 70, 80, 0.16);
}


/* Inhoud hotelkaart */
.vakantiepark_card .park-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 20px 20px 22px;
}


/* Meta-informatie */
.vakantiepark_card .park-content .park-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 12px;
}


/* Locatielabel */
.vakantiepark_card .park-content .park-meta .park-location {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 7px 11px;

    color: var(--hc-turquoise-dark);

    background: var(--hc-turquoise-light);

    border: 1px solid rgba(7, 153, 173, 0.12);
    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.vakantiepark_card .park-content .park-meta .park-location::before {
    content: "\f3c5";

    margin-right: 6px;

    color: var(--hc-turquoise);

    font-family: "Font Awesome 5 Free";
    font-size: 11px;
    font-weight: 900;
}


.vakantiepark_card .park-content .park-meta .park-location a {
    color: inherit;

    text-decoration: none;
}


/* Beoordeling en sterren */
.vakantiepark_card .park-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 12px;

    color: var(--hc-muted);

    font-size: 14px;
}


.vakantiepark_card .rating-text {
    margin-right: 2px;

    color: var(--hc-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.vakantiepark_card .star-rating {
    display: inline-flex;
    align-items: center;

    color: var(--hc-yellow);

    font-size: 14px;
}


.vakantiepark_card .star-rating i {
    margin-right: 2px;
}


/* Hotelnaam */
.vakantiepark_card .park-title {
    margin: 0 0 18px;

    color: var(--hc-text);

    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-decoration: none;

    transition: color 0.2s ease;
}


.vakantiepark_card:hover .park-title {
    color: var(--hc-turquoise-dark);
}


/* USP-lijst */
.vakantiepark_card .park-usps {
    margin: 0 0 22px;
    padding: 0;

    overflow: visible;

    list-style: none;
}


.vakantiepark_card .park-usps li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 30px;

    color: var(--hc-muted);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}


.vakantiepark_card .park-usps li:last-child {
    margin-bottom: 0;
}


/* Nieuw HolaCanaria-icoon voor USP’s */
.vakantiepark_card .park-usps li::before {
    content: "✓";

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;

    top: 0;
    left: 0;

    color: #ffffff;
    background: var(--hc-green);

    border-radius: 50%;

    box-shadow:
        0 3px 8px rgba(65, 173, 136, 0.24);

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}


/* Responsive grid */
@media (max-width: 1024px) {
    .devakantiegids-parken-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 600px) {
    .devakantiegids-parken-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .vakantiepark_card .park-image img {
        height: 220px;
    }

    .vakantiepark_card .park-content {
        padding: 18px;
    }

    .vakantiepark_card .park-title {
        font-size: 20px;
    }
}

.vakantiepark_card .park-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;
    padding: 14px 24px;

    position: relative;
    overflow: hidden;

    color: var(--hc-text);

    background:
        linear-gradient(
            135deg,
            #ffc12c 0%,
            var(--hc-yellow) 55%,
            #ff9f00 100%
        );

    border: none;
    border-radius: 14px;

    box-shadow:
        0 9px 22px rgba(255, 174, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;
    user-select: none;

    transition:
        color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.vakantiepark_card .park-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -110%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.4),
            transparent
        );

    transform: skewX(-20deg);
    transition: left .55s ease;
}

.vakantiepark_card .park-button:hover,
.vakantiepark_card:hover .park-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--hc-turquoise) 0%,
            var(--hc-turquoise-dark) 100%
        );

    box-shadow:
        0 12px 26px rgba(7,153,173,.30),
        inset 0 1px 0 rgba(255,255,255,.25);

    transform: translateY(-2px);
}

.vakantiepark_card .park-button:hover::before {
    left: 140%;
}

@media (max-width: 768px) {
    .devakantiegids-parken-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .devakantiegids-parken-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   HOLACANARIA – PAGINERING
   ========================================================= */

.devakantiegids-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 32px 0 10px;
}


.devakantiegids-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    margin: 0;
    padding: 0 12px;

    color: var(--hc-text, #17383d);
    background: #ffffff;

    border: 1px solid rgba(7, 153, 173, 0.20);
    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(5, 70, 80, 0.06);

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.devakantiegids-pagination .page-numbers:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--hc-turquoise, #0799ad) 0%,
            var(--hc-turquoise-dark, #05778a) 100%
        );

    border-color: var(--hc-turquoise, #0799ad);

    box-shadow:
        0 7px 18px rgba(7, 153, 173, 0.20);

    transform: translateY(-1px);
}


.devakantiegids-pagination .page-numbers.current {
    color: var(--hc-text, #17383d);

    background:
        linear-gradient(
            135deg,
            #ffc12c 0%,
            var(--hc-yellow, #ffb800) 55%,
            #ff9f00 100%
        );

    border-color: transparent;

    box-shadow:
        0 6px 16px rgba(255, 174, 0, 0.24);
}


.devakantiegids-pagination .prev,
.devakantiegids-pagination .next {
    width: auto;
    min-width: 90px;

    border-radius: 10px;
}


.devakantiegids-pagination .dots {
    min-width: auto;
    width: auto;

    padding: 0 4px;

    background: transparent;
    border: 0;
    box-shadow: none;

    pointer-events: none;
}


/* Mobiel iets compacter */
@media (max-width: 600px) {

    .devakantiegids-pagination {
        gap: 6px;

        margin-top: 24px;
    }

    .devakantiegids-pagination .page-numbers {
        min-width: 38px;
        height: 38px;

        padding: 0 10px;

        font-size: 13px;
    }

    .devakantiegids-pagination .prev,
    .devakantiegids-pagination .next {
        min-width: auto;
    }
}


/* Active filter badges boven parken grid */

.active-filters-container {
    margin-bottom: 20px;
}

.active-filters-container .filter-badge {
    display: inline-block;
    background: var(--bde-palette-primary-medium-light-8);
    border-radius: 50px;
    padding: 5px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: .6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.active-filters-container .filter-badge i {
    cursor: pointer;
    margin-left: 5px;
    color: #999;
}

.active-filters-container .filter-badge i:hover {
    color: #333;
}


/* --------------------------------------------------------------------------
 * Vakantiepark single - Faciliteiten lijst
 * -------------------------------------------------------------------------- */

.vakantie-faciliteiten {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.vakantie-faciliteiten .faciliteit-groep {
    margin-bottom: 20px;
}

.vakantie-faciliteiten .faciliteit-groep strong {
    color: var(--bde-headings-color);
    display: block;
    margin-bottom: 10px;
}

.vakantie-faciliteiten .faciliteit-groep ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.vakantie-faciliteiten .faciliteit-groep li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 10px;
}

.vakantie-faciliteiten .material-icons {
    font-size: 15px;
    margin-right: 10px;
    color: var(--bde-palette-color-1-74c3d91d-4867-46d9-b0d6-6a730af9904d);
}

@media (min-width: 768px) {
    .vakantie-faciliteiten .faciliteit-groep ul {
        margin: 0 -10px;
    }

    .vakantie-faciliteiten .faciliteit-groep li {
        width: 50%;
        padding: 0 10px;
    }
}


/* Vakantiepark single - wp block gallery styles */

.gallery {
    display: flex;
    gap: .5rem;
    border: none;
}

.gallery img {
    border-radius: 10px;
    border: none !important;
}


/* --------------------------------------------------------------------------
 * Regio grid
 * -------------------------------------------------------------------------- */

.regio-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.regio-card {
    position: relative;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.regio-card:hover {
    transform: scale(1.02);
}

/* Overlay voor regio-name */

.regio-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 1024px) {
    .regio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .regio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --------------------------------------------------------------------------
 * Vakantieparken map
 * -------------------------------------------------------------------------- */

.vakantie-popup {
    max-width: 300px;
    padding: 0px;
}

.leaflet-container a.leaflet-popup-close-button {
    top: 5px !important;
    right: 5px !important;
}

.vakantie-popup h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--bde-headings-color);
    text-decoration: none;
}

.vakantie-popup h5 a {
    color: var(--bde-headings-color);
    text-decoration: none;
}

.vakantie-popup h5 a:hover {
    color: var(--bde-palette-color-5);
    text-decoration: underline;
}

.vakantie-popup img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    aspect-ratio: 1/1;
    object-fit: cover;
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
}

.vakantie-popup p {
    margin: 0;
    overflow: hidden;
}

.vakantie-popup a {
    display: inline-block;
    margin-top: 10px;
    clear: both;
}

.vakantie-popup::after {
    content: "";
    display: table;
    clear: both;
}


/* Laatst bekeken parken - grid */

.laatst-bekeken-parken-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

@media (max-width: 768px) {
    .laatst-bekeken-parken-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .laatst-bekeken-parken-grid {
        grid-template-columns: 1fr;
    }
}


.devakantiegids-blog-parken-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* Desktop (standaard) */

@media screen and (min-width: 1024px) {
    .devakantiegids-blog-parken-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet en mobiel */

@media screen and (max-width: 1023px) {
    .devakantiegids-blog-parken-grid {
        grid-template-columns: 1fr;
    }
}

/* Optioneel: stijl voor de individuele park kaarten */

.devakantiegids-blog-parken-grid .vakantiepark_card {
    width: 100%;
    /* Voeg hier eventueel extra stijlen toe voor de park kaarten */
}


/* --------------------------------------------------------------------------
 * Parken sidebar filter
 * -------------------------------------------------------------------------- */

/* Sidebar filters */

#sidebar-filter {
    width: 100%;
    font-family: var(--preset-id-51360576-c85c-4b91-bcc6-7af18c35ab88-font-family);
    font-weight: var(--preset-id-51360576-c85c-4b91-bcc6-7af18c35ab88-font-weight);
    color: var(--bde-headings-color);
}

/* =========================================================
   SIDEBAR FILTER
   Regel 1194 t/m 1408
   ========================================================= */

#sidebar-filter .filter-section {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 1rem !important;
    border-radius: 8px;
    background: var(--bde-palette-primary-medium-light-8);
    transition: background-color 0.3s ease;
}

#sidebar-filter .filter-section:hover {
    background: #eee9e8;
}


/* =========================================================
   INKLAPBARE FILTERONDERDELEN
   ========================================================= */

#sidebar-filter .collapsible {
    position: relative;
    display: block;
    width: 100%;
    color: var(--bde-headings-color);
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

#sidebar-filter .collapsible::after {
    content: "\25BC";
    position: absolute;
    top: 50%;
    right: 10px;
    color: var(--inactiveColor);
    font-size: 10px;
    transform: translateY(-50%);
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

#sidebar-filter .collapsible.active::after {
    color: var(--bde-headings-color);
    transform: translateY(-50%) rotate(180deg);
}

#sidebar-filter .content {
    width: 100%;
    padding-top: 10px;
}

#sidebar-filter .content:not(.active) {
    display: none;
}


/* =========================================================
   CHECKBOXES EN RADIOBUTTONS
   ========================================================= */

#sidebar-filter .checkbox-wrapper {
    display: flex;
}

.checkbox-wrapper.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.checkbox-wrapper.disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkbox-group label,
.radio-group label {
    display: flex;
    align-items: center;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    font-weight: normal !important;
}

.checkbox-group input,
.radio-group input {
    margin-right: 5px;
}


/* =========================================================
   SELECTVELDEN EN TEKSTVELDEN
   ========================================================= */

#sidebar-filter select,
#sidebar-filter input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #ff9600;
    border-radius: 20px;
    background-color: #ffffff;
    font-size: 14px;
}

#sidebar-filter select {
    padding-right: 30px;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23121212" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
}


/* =========================================================
   MEER TONEN
   ========================================================= */

.show-more {
    margin-top: 5px;
    padding: 0;
    border: none;
    background: none;
    color: #ff9600;
    font-size: 14px;
    cursor: pointer;
}


/* =========================================================
   FILTERKNOP
   ========================================================= */

.filter-button {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 50px;
    background-color: #ff9600;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-button:hover {
    background-color: #121212;
}


/* =========================================================
   ZWEVENDE FILTERKNOP
   ========================================================= */

.filter-toggle-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;
    background-color: #ff9600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

    color: #ffffff;
    font-size: 24px;
    text-decoration: none;

    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-toggle-btn:hover {
    background-color: #121212;
}

.filter-toggle-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


/* =========================================================
   TABLET EN MOBIEL
   ========================================================= */

@media (max-width: 991px) {
    #sidebar-filter {
    position: fixed;

    top: 90px;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1001;

    display: none;

    width: 100%;
    height: auto;

    padding:
        20px
        20px
        calc(110px + env(safe-area-inset-bottom));

    overflow-y: auto;
    overscroll-behavior: contain;

    background-color: #ffffff;

    -webkit-overflow-scrolling: touch;
}

    #sidebar-filter.active {
        display: block;
    }

    .filter-toggle-btn {
        display: flex;
    }

    .filter-submit-btn {
    position: static;
    z-index: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 56px;

    margin-top: 18px;
    margin-bottom: calc(20px + env(safe-area-inset-bottom));
    padding: 16px 20px;

    color: var(--hc-text, #17252a);

    background:
        linear-gradient(
            135deg,
            #ffc12c 0%,
            var(--hc-yellow, #ffae00) 55%,
            #ff9f00 100%
        );

    border: 0;
    border-radius: 14px;

    box-shadow:
        0 10px 24px rgba(255, 174, 0, 0.28);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    text-align: center;

    cursor: pointer;
}

    .filter-submit-btn:hover {
        background: var(--bde-palette-color-3);
    }

    .close-filter {
        display: none;
    }
}
	/* --------------------------------------------------------------------------
 * NOODHERSTEL HOLACANARIA FILTER
 * Zorgt dat het filter op desktop en tablet zichtbaar blijft
 * -------------------------------------------------------------------------- */

:root {
    --hc-text: #17383d;
    --hc-muted: #586f73;
    --hc-turquoise: #0799ad;
    --hc-turquoise-dark: #05778a;
    --hc-turquoise-light: #eaf8fa;
    --hc-yellow: #ffb800;
    --hc-green: #44a987;
    --hc-white: #ffffff;
}


/* Filter altijd zichtbaar vanaf tablet/desktop */
@media (min-width: 768px) {
    #sidebar-filter,
    #sidebar-filter.active {
        display: block !important;
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .filter-toggle-btn {
        display: none !important;
    }

    .filter-submit-btn {
        position: static !important;
        width: 100% !important;
    }
}


/* Filtersecties rustig en duidelijk */
#sidebar-filter .filter-section {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 16px !important;
    background: #ffffff;
    border: 1px solid #dcebed;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
}


/* Geen verspringing bij hover */
#sidebar-filter .filter-section:hover {
    background: #ffffff;
    border-color: #b8dfe4;
    box-shadow: none;
    transform: none;
}


/* Filterkoppen */
#sidebar-filter .collapsible {
    display: block;
    width: 100%;
    position: relative;
    padding-right: 28px;
    color: #17383d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}


/* Filterinhoud */
#sidebar-filter .content {
    width: 100%;
    padding-top: 12px;
}


/* Alleen gesloten onderdelen verbergen */
#sidebar-filter .content:not(.active) {
    display: none;
}


/* Checkboxregels */
#sidebar-filter .checkbox-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
}


/* Labels */
#sidebar-filter .checkbox-group label,
#sidebar-filter .radio-group label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 3px 0 !important;
    color: #586f73;
    font-size: 14px;
    font-weight: 500 !important;
    border: 0 !important;
}


/* Checkboxen */
#sidebar-filter input[type="checkbox"],
#sidebar-filter input[type="radio"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0 9px 0 0;
    accent-color: #0799ad;
}


/* Select- en tekstvelden */
#sidebar-filter select,
#sidebar-filter input[type="text"] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 38px 10px 12px;
    color: #17383d;
    background-color: #ffffff;
    border: 1px solid #b8dfe4;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
}


/* Filterknop */
#sidebar-filter .filter-button,
#sidebar-filter .filter-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 13px 18px;
    color: #17383d;
    background: #ffb800;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}


/* Mobiel: filter alleen verbergen wanneer de mobiele knop wordt gebruikt */
@media (max-width: 767px) {
    #sidebar-filter {
        display: none;
    }

    #sidebar-filter.active {
        display: block;
    }

    .filter-toggle-btn {
        display: flex;
    }
}


/* =========================================================
   PRIJS OP HOTELKAART
   ========================================================= */

.park-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    margin-top: 12px;
    margin-bottom: 12px;

    color: var(--hc-text, #17252a);
}

.park-price-prefix,
.park-price-suffix {
    font-size: 14px;
    font-weight: 500;
    color: var(--hc-muted, #607077);
}

.park-price-amount {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hc-text, #17252a);
}
/* =========================================================
   HOLACANARIA – HOTELRESULTATEN ALS LIJST
   Alleen voor de hoofdfilter /urlaub-kanaren/
   ========================================================= */

.hc-hotel-results-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* Eén horizontaal hotelresultaat */
.hc-hotel-list-item {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr) 180px;

    min-height: 250px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(7, 153, 173, 0.14);
    border-radius: 18px;

    box-shadow:
        0 8px 26px rgba(5, 70, 80, 0.09);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.hc-hotel-list-item:hover {
    border-color: rgba(7, 153, 173, 0.28);

    box-shadow:
        0 14px 34px rgba(5, 70, 80, 0.14);

    transform: translateY(-2px);
}


/* =========================================================
   AFBEELDING
   ========================================================= */

.hc-hotel-list-image {
    position: relative;

    min-width: 0;
    min-height: 250px;
    height: 100%;

    overflow: hidden;

    background: var(--hc-turquoise-light, #eaf8fa);
}


.hc-hotel-list-image a {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}


.hc-hotel-list-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.35s ease;
}


.hc-hotel-list-item:hover .hc-hotel-list-image img {
    transform: scale(1.035);
}


.hc-hotel-list-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;

    background:
        linear-gradient(
            135deg,
            rgba(234, 248, 250, 1) 0%,
            rgba(214, 241, 245, 1) 100%
        );
}


/* =========================================================
   INHOUD
   ========================================================= */

.hc-hotel-list-content {
    min-width: 0;

    padding: 24px 26px;

    border-right: 1px solid rgba(7, 153, 173, 0.10);
}


.hc-hotel-list-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;
}


.hc-hotel-location-label {
    display: inline-flex;
    align-items: center;

    min-height: 29px;
    padding: 6px 10px;

    color: var(--hc-turquoise-dark, #057f91);
    background: var(--hc-turquoise-light, #eaf8fa);

    border: 1px solid rgba(7, 153, 173, 0.14);
    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.hc-hotel-location-label:hover {
    color: #ffffff;
    background: var(--hc-turquoise, #0799ad);

    border-color: var(--hc-turquoise, #0799ad);

    transform: translateY(-1px);
}


/* Plaatslabel iets lichter onderscheiden */
.hc-hotel-place-label {
    color: var(--hc-text, #17252a);
    background: #ffffff;
}


.hc-hotel-list-title {
    margin: 0 0 8px;

    color: var(--hc-text, #17252a);

    font-size: clamp(21px, 2vw, 28px);
    font-weight: 800;
    line-height: 1.15;
}


.hc-hotel-list-title a {
    color: inherit;
    text-decoration: none;
}


.hc-hotel-list-title a:hover {
    color: var(--hc-turquoise-dark, #057f91);
}


/* Sterren */
.hc-hotel-list-rating {
    margin-bottom: 14px;
}


.hc-hotel-list-rating .star-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    color: var(--hc-yellow, #ffae00);

    font-size: 16px;
}


/* USP's */
.hc-hotel-list-usps {
    display: grid;
    gap: 7px;

    margin: 0 0 16px;
    padding: 0;

    list-style: none;
}


.hc-hotel-list-usps li {
    position: relative;

    padding-left: 23px;

    color: var(--hc-text, #17252a);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}


.hc-hotel-list-usps li::before {
    position: absolute;
    top: 0;
    left: 0;

    color: var(--hc-green, #41ad88);

    content: "✓";

    font-size: 15px;
    font-weight: 900;
}


/* Tags */
.hc-hotel-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.hc-hotel-list-tag {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    padding: 5px 10px;

    color: var(--hc-turquoise-dark, #057f91);
    background: var(--hc-turquoise-light, #eaf8fa);

    border: 1px solid rgba(7, 153, 173, 0.14);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}
/* Unterkunftstyp: Hotelzimmer, Apartment, Bungalow */
.hc-hotel-type-tag {
    color: var(--hc-text, #17252a);

    background:
        linear-gradient(
            135deg,
            #fff7dc 0%,
            #ffedb2 100%
        );

    border-color: rgba(255, 174, 0, 0.24);
}


/* Thema's blijven turquoise */
.hc-hotel-theme-tag {
    color: var(--hc-turquoise-dark, #057f91);
    background: var(--hc-turquoise-light, #eaf8fa);
}


/* =========================================================
   PRIJS EN KNOP
   ========================================================= */

.hc-hotel-list-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;

    padding: 24px 20px;
}


.hc-hotel-list-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin-bottom: 16px;

    color: var(--hc-text, #17252a);
}


.hc-hotel-list-price-prefix {
    font-size: 13px;
    font-weight: 600;
}


.hc-hotel-list-price-amount {
    color: var(--hc-turquoise-dark, #057f91);

    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
}


.hc-hotel-list-price-suffix {
    margin-top: 3px;

    color: var(--hc-muted, #607176);

    font-size: 12px;
    font-weight: 600;
}


.hc-hotel-list-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 12px 16px;

    color: var(--hc-text, #17252a);

background:
    linear-gradient(
        135deg,
        #ffc12c 0%,
        var(--hc-yellow, #ffae00) 55%,
        #ff9f00 100%
    );

    border-radius: 12px;

    box-shadow:
    0 8px 18px rgba(255, 174, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);

    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.hc-hotel-list-button:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--hc-turquoise, #0799ad) 0%,
            var(--hc-turquoise-dark, #057f91) 100%
        );

    box-shadow:
        0 11px 24px rgba(7, 153, 173, 0.30);

    transform: translateY(-1px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .hc-hotel-list-item {
        grid-template-columns: minmax(200px, 34%) minmax(0, 1fr);
    }


    .hc-hotel-list-content {
        border-right: 0;
    }


    .hc-hotel-list-action {
        grid-column: 1 / -1;

        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;

        padding: 15px 20px;

        border-top: 1px solid rgba(7, 153, 173, 0.10);
    }


    .hc-hotel-list-price {
        align-items: flex-end;

        margin: 0;
    }


    .hc-hotel-list-button {
        min-width: 170px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .hc-hotel-results-list {
        gap: 16px;
    }


    .hc-hotel-list-item {
        display: block;

        min-height: 0;

        border-radius: 16px;
    }


    .hc-hotel-list-image {
    position: relative;

    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 10;
}


    .hc-hotel-list-image img,
    .hc-hotel-list-image-placeholder {
        min-height: 0;
        height: 100%;
    }


    .hc-hotel-list-content {
        padding: 19px 18px 16px;

        border: 0;
    }


    .hc-hotel-list-title {
        font-size: 22px;
    }


    .hc-hotel-list-action {
        display: block;

        padding: 0 18px 19px;

        border: 0;
    }


    .hc-hotel-list-price {
        align-items: flex-start;

        margin-bottom: 13px;
    }


    .hc-hotel-list-button {
        width: 100%;
    }

}
/* =========================================================
   DESKTOPFIX – AFBEELDING VULT VOLLEDIGE LIJSTKAART
   Mobiele weergave blijft ongewijzigd
   ========================================================= */

@media (min-width: 1051px) {

    .hc-hotel-list-image {
        position: relative;
        align-self: stretch;

        height: auto;
        min-height: 250px;
    }

    .hc-hotel-list-image > a {
        position: absolute !important;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;
    }

    .hc-hotel-list-image img {
        position: absolute;
        inset: 0;

        display: block;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        object-fit: cover;
        object-position: center;
    }

    .hc-hotel-list-image-placeholder {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
        min-height: 0;
    }
}
@media (max-width: 767px) {

    #sidebar-filter.active {
        display: flex;
        flex-direction: column;
    }

    #sidebar-filter .filter-submit-btn {
        flex: 0 0 auto;
    }

}
/* =========================================================
   HolaCanaria - hotel ratings
   ========================================================= */


/* ---------- Verticale hotelkaarten ---------- */

/* Eiland links, sterren + beoordeling rechts */
.park-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.park-rating-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin-left: auto;
}

.park-rating-group .park-rating {
    margin: 0;
}


/* Rating badge */
.park-review-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 5px 9px;
    border: 1px solid #ffd978;
    border-radius: 999px;

    background: #fff7df;

    line-height: 1;
    white-space: nowrap;
}

.park-review-score strong {
    color: #d98b00;
    font-size: 14px;
    font-weight: 800;
}

.park-review-score span {
    color: #17252a;
    font-size: 12px;
    font-weight: 600;
}


/* ---------- Horizontale zoekresultaten ---------- */

.hc-hotel-list-review {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    width: fit-content;

    margin-top: 5px;
    margin-bottom: 10px;

    padding: 5px 9px;
    border: 1px solid #ffd978;
    border-radius: 999px;

    background: #fff7df;

    line-height: 1;
    white-space: nowrap;
}

.hc-hotel-list-review-score {
    color: #d98b00;
    font-size: 14px;
    font-weight: 800;
}

.hc-hotel-list-review-label {
    color: #17252a;
    font-size: 12px;
    font-weight: 600;
}


/* ---------- Mobiel ---------- */

@media (max-width: 767px) {

    .park-rating-group {
        gap: 4px;
    }

    .park-review-score,
    .hc-hotel-list-review {
        padding: 4px 8px;
    }

    .park-review-score strong,
    .hc-hotel-list-review-score {
        font-size: 13px;
    }

    .park-review-score span,
    .hc-hotel-list-review-label {
        font-size: 11px;
    }
}
/* =========================================================
   HolaCanaria - Grote aanbodkaart V2
   Filter- en zoekresultaten
   ========================================================= */


/* Resultaten onder elkaar */
.hc-hotel-results-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =========================================================
   DESKTOP - BASIS
   ========================================================= */

.hc-offer-card {
    position: relative;

    display: grid;
    grid-template-columns: minmax(260px, 36%) minmax(0, 1fr) 210px;

    width: 100%;
    min-width: 0;
    min-height: 360px;

    background: #ffffff;
    border: 1px solid #e3e8ea;
    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 5px 22px rgba(23, 37, 42, 0.07);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.hc-offer-card > * {
    min-width: 0;
}
.hc-hotel-results-list {
    width: 100%;
    min-width: 0;
}

.hc-hotel-results-main,
.hc-filter-results,
.hc-results-column {
    min-width: 0;
}

.hc-offer-card:hover {
    box-shadow: 0 9px 30px rgba(23, 37, 42, 0.11);
}


/* =========================================================
   FOTO / CAROUSEL
   ========================================================= */

.hc-offer-card-media {
    position: relative;

    min-width: 0;
    min-height: 360px;

    overflow: hidden;

    background: #eef2f3;
}

.hc-offer-slider {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 360px;

    overflow: hidden;
}

.hc-offer-slide {
    display: none;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.hc-offer-slide.is-active {
    display: block;
}
.hc-offer-slide,
.hc-offer-slide.is-active {
    width: 100%;
    height: 100%;
}

.hc-offer-slide img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.hc-offer-card:hover .hc-offer-slide.is-active img {
    transform: scale(1.015);
}

.hc-offer-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 360px;

    background: #edf1f2;
}


/* Sliderpijlen */
.hc-offer-slider-prev,
.hc-offer-slider-next {
    position: absolute;
    top: 50%;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #17252a;

    font-size: 29px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.15);

    transform: translateY(-50%);
}

.hc-offer-slider-prev {
    left: 14px;
}

.hc-offer-slider-next {
    right: 14px;
}

.hc-offer-slider-prev:hover,
.hc-offer-slider-next:hover {
    background: #ffffff;
}


/* Favoriet */
.hc-offer-favorite {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 8;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);
    color: #17252a;

    font-size: 21px;

    cursor: pointer;

    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.13);
}

.hc-offer-favorite:hover {
    color: #0799AD;
}


/* =========================================================
   MIDDENKOLOM - HOTEL
   ========================================================= */

.hc-offer-card-hotel {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 28px 30px 25px;

    border-right: 1px solid #e8edef;
}


/* Locatie */
.hc-offer-location {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 13px;
}

.hc-offer-location a,
.hc-offer-location span {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    background: #e9f8fa;
    color: #057f91;

    font-size: 11px;
    line-height: 1;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    text-decoration: none;
}

.hc-offer-location a:hover {
    background: #d8f2f5;
}


/* Hotelnaam */
.hc-offer-title {
    margin: 0 0 7px;

    font-size: 27px;
    line-height: 1.15;
    font-weight: 800;

    color: #17252a;
}

.hc-offer-title a {
    color: inherit;
    text-decoration: none;
}

.hc-offer-title a:hover {
    color: #057f91;
}


/* Sterren */
.hc-offer-stars {
    margin-bottom: 23px;
}

.hc-offer-stars .star-rating {
    display: inline-flex;
    gap: 3px;

    font-size: 18px;
    line-height: 1;

    color: #f7b500;
}


/* USP's */
.hc-offer-usps {
    display: flex;
    flex-direction: column;
    gap: 11px;

    margin: 0 0 22px;
    padding: 0;

    list-style: none;
}

.hc-offer-usps li {
    position: relative;

    padding-left: 25px;

    color: #26393e;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.hc-offer-usps li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: #23a36d;

    font-size: 16px;
    font-weight: 800;
}


/* Tags onderaan middenkolom */
.hc-offer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: auto;
}

.hc-offer-tag {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border: 1px solid #e1e7e9;
    border-radius: 999px;

    background: #f7f9f9;
    color: #42565b;

    font-size: 11px;
    line-height: 1;
    font-weight: 650;
}


/* =========================================================
   RECHTERKOLOM - SCORE / PRIJS / AANBOD
   ========================================================= */

.hc-offer-card-booking {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 26px 24px 24px;

    background: #fbfcfc;
}


/* Review rechtsboven */
.hc-offer-review {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-bottom: 28px;
}

.hc-offer-review-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    min-width: 0;
}

.hc-offer-review-text strong {
    color: #17252a;

    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
}

.hc-offer-review-text span {
    margin-top: 3px;

    color: #77878b;

    font-size: 11px;
    line-height: 1.15;
}

.hc-offer-review-score {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 49px;
    height: 49px;

    padding: 0 9px;

    border-radius: 12px;

    background: #0799AD;
    color: #ffffff;

    font-size: 18px;
    line-height: 1;
    font-weight: 850;
}


/* =========================================================
   PRIJS
   ========================================================= */

.hc-offer-price-sticker {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin: 0 0 5px;
}

.hc-offer-price-prefix {
    margin-bottom: 2px;

    color: #596b70;

    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
}

.hc-offer-price {
    color: #17252a;

    font-size: 34px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.02em;
}


/* Prijsinfo-i */
.hc-offer-price-info {
    position: relative;

    display: flex;
    justify-content: flex-end;

    margin-bottom: 24px;
}

.hc-offer-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    padding: 0;

    border: 1px solid #aab7ba;
    border-radius: 50%;

    background: transparent;
    color: #687a7f;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.hc-offer-info-button:hover {
    border-color: #0799AD;
    color: #0799AD;
}

.hc-offer-info-popover {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 20;

    width: 285px;

    padding: 13px 15px;

    border: 1px solid #dce4e6;
    border-radius: 10px;

    background: #ffffff;
    color: #34484d;

    font-size: 12px;
    line-height: 1.45;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   REISDETAILS
   ========================================================= */

.hc-offer-trip-details {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding-top: 16px;
    padding-bottom: 18px;

    border-top: 1px solid #e4e9ea;
}

.hc-offer-trip-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;

    color: #34484d;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 550;
}

.hc-offer-trip-row i {
    width: 22px;

    color: #0799AD;

    font-size: 15px;

    text-align: center;
}


/* =========================================================
   CTA
   ========================================================= */

.hc-offer-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: auto;
    padding: 15px 18px;

    border-radius: 10px;

    background: #0799AD;
    color: #ffffff !important;

    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;

    text-align: center;
    text-decoration: none !important;

    transition: background 0.2s ease;
}

.hc-offer-cta:hover {
    background: #057F91;
}




/* =========================================================
   KLEINERE DESKTOP / TABLET LANDSCAPE
   ========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .hc-offer-card {
        grid-template-columns: 35% 40% 25%;
        min-height: 420px;
    }

    .hc-offer-card-media,
    .hc-offer-slider,
    .hc-offer-image-placeholder {
        min-height: 420px;
    }

    .hc-offer-card-hotel {
        padding: 22px;
    }

    .hc-offer-title {
        font-size: 22px;
    }

    .hc-offer-card-booking {
        padding: 22px 18px;
    }

    .hc-offer-price {
        font-size: 29px;
    }

    .hc-offer-usps li {
        font-size: 13px;
    }
}

/* =========================================================
   HolaCanaria - Aanbodkaart V2 MOBIEL COMPACT
   Desktop blijft ongewijzigd
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       KAART VOLLE BESCHIKBARE BREEDTE
       ----------------------------------------------------- */

    .hc-hotel-results-list {
        width: 100%;
        max-width: none;
    }

    .hc-offer-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;

    margin-left: 0;
    margin-right: 0;

    box-sizing: border-box;

    border-radius: 15px;
    overflow: hidden;
}
	.hc-offer-card-media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.hc-offer-slider {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.hc-offer-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.hc-offer-card-hotel {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e8edef;
}

.hc-offer-card-booking {
    width: 100%;
}

	.hc-offer-card *,
.hc-offer-card *::before,
.hc-offer-card *::after {
    box-sizing: border-box;
    min-width: 0;
}

.hc-hotel-results-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
    overflow-x: clip;
}


    /* -----------------------------------------------------
       HOTELGEDEELTE
       ----------------------------------------------------- */

    .hc-offer-card-hotel {
        padding: 18px 18px 16px;
    }

    /* Locatie iets compacter */
    .hc-offer-location {
        gap: 6px;
        margin-bottom: 12px;
    }

    .hc-offer-location a,
    .hc-offer-location span {
        padding: 5px 9px;
        font-size: 10px;
    }

    /* Hotelnaam */
    .hc-offer-title {
        margin-bottom: 7px;
        font-size: 22px;
        line-height: 1.18;
    }

    /* Sterren dichter bij hotelnaam */
    .hc-offer-stars {
        margin-bottom: 0;
    }

    .hc-offer-stars .star-rating {
        font-size: 17px;
    }


    /* -----------------------------------------------------
       OP MOBIEL GEEN USP'S EN THEMATAGS
       Concrete reisinfo is belangrijker
       ----------------------------------------------------- */

    .hc-offer-usps,
    .hc-offer-tags {
        display: none;
    }


    /* -----------------------------------------------------
       BOEKINGSBLOK
       Boven: reisinfo + prijs
       Onder: rating + CTA
       ----------------------------------------------------- */

    .hc-offer-card-booking {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(130px, 155px);

        grid-template-areas:
            "trip price"
            "review cta";

        column-gap: 14px;
        row-gap: 18px;

        width: 100%;
        padding: 18px;

        background: #ffffff;
    }


    /* -----------------------------------------------------
       REISGEGEVENS LINKSBOVEN
       ----------------------------------------------------- */

    .hc-offer-trip-details {
        grid-area: trip;

        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 10px;

        min-width: 0;
        padding: 0;

        border: 0;
    }

    .hc-offer-trip-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);

        gap: 8px;

        font-size: 13px;
        line-height: 1.3;
    }

    .hc-offer-trip-row i {
        color: #0799AD;
        font-size: 15px;
    }


    /* -----------------------------------------------------
       PRIJS RECHTSBOVEN
       ----------------------------------------------------- */

    .hc-offer-price-sticker {
        grid-area: price;

        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;

        align-self: center;

        margin: 0;
        padding: 0 0 27px;
    }

    .hc-offer-price-prefix {
        margin-bottom: 3px;

        font-size: 11px;
        line-height: 1.1;
    }

    .hc-offer-price {
        color: #17252a;

        font-size: 31px;
        font-weight: 800;
        line-height: 1;
    }


    /* -----------------------------------------------------
       INFO-I DIRECT ONDER DE PRIJS
       ----------------------------------------------------- */

    .hc-offer-price-info {
    grid-area: price;

    position: relative;

    align-self: end;
    justify-self: end;

    margin: 0;
    z-index: 5;
}

.hc-offer-info-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    padding: 0;

    border-radius: 50%;

    font-size: 11px;
    line-height: 1;
}

.hc-offer-info-popover {
    position: absolute;

    top: 28px;
    right: 0;
    left: auto;

    width: min(270px, calc(100vw - 55px));

    z-index: 30;
}


    /* -----------------------------------------------------
       RATING LINKSONDER
       ----------------------------------------------------- */

    .hc-offer-review {
        grid-area: review;

        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;

        gap: 8px;

        min-width: 0;
        margin: 0;
    }

    .hc-offer-review-score {
        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 42px;
        height: 42px;

        padding: 0 7px;

        border-radius: 10px;

        font-size: 15px;
        line-height: 1;
    }

    .hc-offer-review-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        min-width: 0;
    }

    .hc-offer-review-text strong {
        font-size: 14px;
        line-height: 1.15;
    }

    .hc-offer-review-text span {
        font-size: 10px;
        line-height: 1.2;
    }


    /* -----------------------------------------------------
       CTA RECHTSONDER
       ----------------------------------------------------- */

    .hc-offer-cta {
        grid-area: cta;

        display: flex;
        align-items: center;
        justify-content: center;

        align-self: center;

        width: 100%;
        min-height: 46px;

        margin: 0;
        padding: 10px 9px;

        border-radius: 12px;

        background: #0799AD;
        color: #ffffff !important;

        font-size: 13px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
    }

    .hc-offer-cta:hover {
        background: #057F91;
    }
}
/* =========================================================
   HolaCanaria - mobiele resultatenbreedte
   Zelfde breedte voor initieel en gefilterd resultaat
   ========================================================= */

@media (max-width: 768px) {

    .bde-div-512-241,
    #list-view,
    .bde-shortcode-512-291,
    #devakantiegids-parken-container,
    .hc-hotel-results-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .bde-div-512-241,
    #list-view,
    .bde-shortcode-512-291 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hc-offer-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}