/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root{
    --cbc-free-color-dark: #3c3731;
}

#cbc-free-popup {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background: rgba(0,0,0,0.7);
    padding: 1.3rem;
}

.cbc-free-popup__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: center;
    align-items: center;
    max-width: clamp(40rem, calc(40rem + ((1vw - 3.2rem) * 3.3537)), 40rem);
    max-height: 20%;
    top: 50%;
    left: 50%;
    padding: 8rem clamp(2rem, calc(2rem + ((1vw - 3.2rem) * 0.3659)), 8rem);
    transform: translate(-50%, -50%);
    background: var(--cbc-free-color-dark);
    border-radius: 30px;
}

.cbc-free-popup__logo {
    width: clamp(18.5rem, calc(18.5rem + ((1vw - 3.2rem) * 1.5549)), 31.25rem)
}

.cbc-free-popup__country-wrapper {
    position: relative;
    width: 100%;
}

.cbc-free-popup__country-wrapper svg {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--cbc-free-color-dark);
}

.cbc-free-popup__country {
    width: 100%;
    border: none;
    border-radius: 30px;
    padding: .8rem 2rem;
    font-size: 1.2em;
    color: var(--cbc-free-color-dark);
    background: #fff;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*
  const countries = $.parseJSON(cbc_data.countries)
        let popup = `<div id="cbc-free-popup">
            <div class="cbc-free-popup__content">
                <img class="cbc-free-popup__logo" src="${cbc_data.site_url}/wp-content/uploads/2022/02/emmentaler-logo-rot.svg" />
                <select name="cbc-free-country" class="cbc-free-popup__country">
                    <option value="NULL">Bitte wählen Sie ihr Land</option>`

                    countries.forEach(country => {
                        popup += `<option value="${country.slug.toUpperCase()}">${country.name}</option>`
                    })

        popup += '</select></div></div>'
*/