/* 
 * Campaign Style Overrides - ASN Bank
 */

/* Custom FontFace */
@font-face {
    font-display: swap;
    font-family: 'ASN Slab';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.advieskeuze.nl/content/advieskeuze/campaigns/asn/fonts/ASNBankSlab-Bold.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.advieskeuze.nl/content/advieskeuze/campaigns/asn/fonts/ProximaNovaRegular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.advieskeuze.nl/content/advieskeuze/campaigns/asn/fonts/ProximaNovaBold.woff2') format('woff2');
}

/* Variables */
:root {
    /* Body */
    --body-background: #fff;
    --body-color: #373737;
    --body-font-family: 'Proxima Nova', sans-serif;

    /* Header */
    --header-background: #fff;
    --header-border-color: #fff;
    --header-border-width: 1px;

    /* Container */
    --container-padding: 0 12px;
    --container-margin: 2rem auto;
    --container-width: 1320px;

    /* Separators */
    --separator-color: #fff;

    /* Panels */
    --panel-background: #fff;
    --panel-border-width: 0;
    --panel-border-color: #fff;
    --panel-border-radius: 0;
    --panel-separator-color: #f1f4f2;

    /* Images */
    --image-border-width: 0;
    --image-border-color: transparent;
    --image-border-radius: 0;

    /* Titles */
    --title-primary-color: #1F7D65;
    --title-primary-font-family: 'ASN Slab', serif;
    --title-primary-font-weight: 500;
    --title-secondary-color: #373737;
    --title-secondary-font-family: 'Proxima Nova', sans-serif;
    --title-secondary-font-weight: 500;

    /* Links */
    --link-color: #761234;
    --link-hover-color: #590e27;

    /* Buttons */
    --button-border-radius: 24px;
    --button-border-radius-md: 24px;
    --button-font-family: 'Proxima Nova', sans-serif;
    --button-background: transparent;
    --button-hover-background: transparent;
    --button-color: #1f7d65;
    --button-hover-color: #175c4a;
    --button-border-width: 2px;
    --button-border-color: #1f7d65;
    --button-hover-border-color: #175c4a;

    /* Yellow Button */
    --button-primary-background: #1f7d65;
    --button-primary-hover-background: #175c4a;
    --button-primary-color: #fff;
    --button-primary-hover-color: #fff;
    --button-primary-border-width: 0;
    --button-primary-border-color: transparent;
    --button-primary-hover-border-color: transparent;

    /* Blue Button */
    --button-secondary-background: #1f7d65;
    --button-secondary-hover-background: #175c4a;
    --button-secondary-color: #fff;
    --button-secondary-hover-color: #fff;
    --button-secondary-border-width: 0;
    --button-secondary-border-color: transparent;
    --button-secondary-hover-border-color: transparent;

    /* Outline Button */
    --button-outline-background: transparent;
    --button-outline-hover-background: transparent;
    --button-outline-color: #1f7d65;
    --button-outline-hover-color: #175c4a;
    --button-outline-border-width: 2px;
    --button-outline-border-color: #1f7d65;
    --button-outline-hover-border-color: #175c4a;

    /* Disabled Button */
    --button-disabled-background: #f5f5f5;
    --button-disabled-color: #aaa;
    --button-disabled-border-width: 0;
    --button-disabled-border-color: transparent;

    /* Forms */
    --form-label-color: #373737;
    --form-accent-color: #761234;
    --form-border-color: #8c8c8c;
    --form-border-focus-color: #007ab3;
    --form-placeholder-color: #aaa;

    /* Star Rating */
    --star-on-color: #f5a623;
    --star-off-color: #ccc;
}

/* Custom CSS */

.campaign-layout-wrapper .panel,
.campaign-layout-wrapper .search-result-card {
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .12) !important;
}
.campaign-layout-wrapper .search-result-card {
    padding-block: 25px;
}

.font-avantgarde.font-bold,
.font-display.font-bold,
.filter-label {
    font-family: var(--body-font-family);
    font-weight: 500;
    color: #1F7D65;
}

.button {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 24px !important;
}

.button .campaign-accent-color {
    color: #f5a623;
}
.button:hover .campaign-accent-color {
    color: #f5a623;
}

.button.button--lg {
    min-height: unset !important;
}

.pagination-button.pagination-button--disabled,
.pagination-button.pagination-button--disabled:hover {
    color: rgb(0 97 146 / 0.4);
}

.pagination-button.pagination-button--disabled,
.pagination-button.pagination-button--disabled:hover,
.pagination-link,
.pagination-link:hover {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

.campaign-layout-wrapper .pagination-link {
    color: var(--link-color);
}
.campaign-layout-wrapper .pagination-link:hover {
    color: #fff;
    background: var(--link-hover-color) !important;
}

.campaign-layout-wrapper .review-card.review-card--link:hover {
    border-color: #1F7D65;
    box-shadow: 0 3px 5px #1F7D6520 !important;
}

.campaign-layout-wrapper .pagination-link.pagination-link--current,
.campaign-layout-wrapper .pagination-link.pagination-link--current:hover {
    color: #fff;
    background: #1F7D65 !important;
}
.campaign-layout-wrapper .pagination-button {
    border: 0;
}

.form-input {
    border: 1px solid #8c8c8c !important;
    color: #373737 !important;
}
.form-input:focus {
    border-color: #1f7d65 !important;
    box-shadow: 0 0 0 2px #1f7d6520 !important;
}
.generic-search-bar__label {
    font-size: 14px;
    font-weight: 400;
    color: #373737;
}
.panel.bg-blue-25,
.panel.bg-stone-50 {
    box-shadow: none !important;
    background: #f1f4f2 !important;
}
.panel.bg-blue-25 a.text-blue-700 {
    color: var(--link-color);
}
.panel.bg-blue-25 a.text-blue-700:hover {
    color: var(--link-hover-color);
}

#search-bar-input::placeholder,
.form-input::placeholder {
    color: #999;
}
.filter-label, .form-label {
    font-weight: 600;
    color: #373737;
    font-size: 16px;
}
.form-checkbox__input {
    border-color: #8c8c8c !important;
}
.form-checkbox__input:checked {
    border-color: #1f7d65 !important;
    background: #1f7d65 !important;
}

.campaign-layout-wrapper .score-number {
    background-color: #1f7d65;
    border-color: #175c4a;
}
.campaign-layout-wrapper .score-number + svg {
    color: #f5a623;
}
.loading-spinner__text {
    color: #1F7D65;
}
.loading-spinner__orb {
    border-color: #1F7D65;
}
.form-toggle-landelijk__label {
    color: var(--link-color);
}
label:hover > .form-toggle-landelijk__label {
    color: var(--link-hover-color);
    text-decoration: underline;
}

@media (min-width: 576px) {
    .button.button--md,
    .button.button--lg {
        padding: 10px 30px;
    }

    .search-result-card .button--md {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
}

@media (min-width: 1440px) {
    .search-result-card .search-result-card__footer {
        width: 235px;
    }

    .search-result-card__stars {
        right: -215px;
    }
}

.campaign-layout-wrapper .office__social-link {
    background: var(--link-color);
    color: #FFDD76;
}
.campaign-layout-wrapper .office__social-link:hover {
    background: var(--link-hover-color);
    color: #FFDD76;
}

.campaign-layout-wrapper footer[role="contentinfo"] {
    background: #f1f4f2;
}
.campaign-layout-wrapper footer[role="contentinfo"] .bg-blue-800 {
    background: #7c1230;
}
.campaign-layout-wrapper .campaign-accent-background {
    background: #f1f4f2;
}
.campaign-layout-wrapper .campaign-accent-background.text-white {
    color: #373737;
    padding-block: 10px;
}

button[aria-label="Terug naar boven"] {
    background: var(--link-color);
}
button[aria-label="Terug naar boven"]:hover {
    background: var(--link-hover-color);
}

.campaign-layout-wrapper .form-toggle-landelijk__background {
    background: #e4e4e4;
}
.form-toggle-landelijk:checked + .form-toggle-landelijk__background {
    background: #1f7d65;
}

@media sceen and (max-width: 575px) {
    body[data-page-template="search-results"] .campaign-container:first-child {
        margin-bottom: 0;
    }

    body[data-page-template="search-results"] .campaign-container:nth-child(2) {
        margin-top: 10px;
    }
}

@media screen and (min-width: 360px) and (max-width: 419px) {
    body[data-page-template="search-results"] .mobileView.gap-2.flex {
        flex-flow: column;
    }
    .button[title="Filteren"], .button[title="Sorteren"], .button[title="Landelijk"] {
        border-radius: 0;
    }
    .button[title="Filteren"] {
        border-radius: 12px 12px 0 0 !important;
        border-right-width: 2px !important;
        border-bottom-width: 0;
    }
    .button[title="Sorteren"] {
        border-right-width: 2px !important;
        border-bottom-width: 0;
    }
    .button[title="Landelijk"] {
        border-radius: 0 0 12px 12px !important;
    }

    body[data-page-template="search-results"] .search-result-card__footer {
        flex-flow: column;
        gap: 10px;
    }
}


@media screen and (max-width: 420px) {
    .button {
        font-size: 12px !important;
        gap: 5px;
        letter-spacing: 0;
    }

    .button[title="Filteren"], .button[title="Sorteren"], .button[title="Landelijk"] {
        border-radius: 0;
    }

    .button[title="Filteren"] {
        border-radius: 12px 0 0 12px;
        border-right-width: 0;
    }
    .button[title="Sorteren"] {
        border-right-width: 0;
    }
    .button[title="Landelijk"] {
        border-radius: 0 12px 12px 0;
    }

    body[data-page-template="search-results"] .mobileView.gap-2.flex {
        gap: 0;
    }

    body[data-page-template="search-results"] .search-result-card__footer {
        gap: 8px;
    }
}

@media screen and (max-width: 460px) {
    .button {
        font-size: 14px !important;
        gap: 8px;
        letter-spacing: 0;
    }
}