/* Easy-Fitt webshop. Bron: docs/HUISSTIJL-EASY-FITT.md. */
@font-face { font-family: "Bai Jamjuree"; src: url("../fonts/BaiJamjuree-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bai Jamjuree"; src: url("../fonts/BaiJamjuree-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Bai Jamjuree"; src: url("../fonts/BaiJamjuree-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bai Jamjuree"; src: url("../fonts/BaiJamjuree-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bai Jamjuree"; src: url("../fonts/BaiJamjuree-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --ef-dark-blue: #003257;
    --ef-yellow: #FFDF00;
    --ef-medium-blue: #1871A4;
    --ef-black: #000000;
    --ef-text: #1A2433;
    --ef-white: #FFFFFF;
    --ef-tint: #E9EFF5;
    --ef-yellow-tint: #FFF8C2;
    --ef-muted: #4F5B6B;
    --ef-rule: #DDE4EC;
    --ef-field-line: #9AA7B6;
    --ef-footer-text: #333333;
    --ef-font: "Bai Jamjuree", Arial, sans-serif;
    --ef-font-price: "Montserrat", Arial, sans-serif;
    --bs-body-font-family: var(--ef-font);
    --bs-font-sans-serif: var(--ef-font);
    --bs-body-font-size: 15px;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--ef-text);
    --bs-body-color-rgb: 26, 36, 51;
    --bs-body-bg: var(--ef-white);
    --bs-primary: var(--ef-yellow);
    --bs-primary-rgb: 255, 223, 0;
    --bs-warning: var(--ef-yellow);
    --bs-warning-rgb: 255, 223, 0;
    --bs-blue: var(--ef-medium-blue);
    --bs-darkblue: var(--ef-dark-blue);
    --darkblue: var(--ef-dark-blue);
    --bs-info: var(--ef-medium-blue);
    --bs-info-rgb: 24, 113, 164;
    --bs-success: var(--ef-medium-blue);
    --bs-success-rgb: 24, 113, 164;
    --bs-danger: var(--ef-dark-blue);
    --bs-danger-rgb: 0, 50, 87;
    --bs-secondary: var(--ef-muted);
    --bs-secondary-rgb: 79, 91, 107;
    --bs-light: var(--ef-white);
    --bs-light-rgb: 255, 255, 255;
    --bs-dark: var(--ef-dark-blue);
    --bs-dark-rgb: 0, 50, 87;
    --bs-border-color: var(--ef-rule);
    --bs-link-color: var(--ef-medium-blue);
    --bs-link-hover-color: var(--ef-dark-blue);
    --bs-highlight-bg: var(--ef-yellow-tint);
    --bs-gradient: none;
}

html, body { background-color: var(--ef-white); }
body { color: var(--ef-text); font-family: var(--ef-font); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ef-dark-blue);
    font-family: var(--ef-font);
    font-weight: 700;
}
h1, .h1 { font-size: clamp(24px, 3vw, 30px); letter-spacing: .03em; }
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 { font-size: 18px; }
.section-subheading { color: var(--ef-medium-blue) !important; font-size: 15px !important; font-style: italic; }
.color_dark_blue { color: var(--ef-dark-blue); }
.font_montserrat, .font_bai { font-family: var(--ef-font) !important; }
.ef-price, .price, .font_euro, .show_price_valuta, .show_price_euro, .show_price_cent {
    font-family: var(--ef-font-price) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ef-price { font-size: inherit; }
.show_price_valuta, .show_price_euro, .show_price_cent {
    font-size: 30px;
    font-weight: 700;
    position: static;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    line-height: 1;
}
.show_price_cent { font-size: 16px; }
h4.ef-price, h3.ef-price { font-size: 30px; line-height: 1; }
h3 > .ef-price { font-size: 24px; }
/* De kantoorstatus sluit aan op de werkelijke hoogte van de bovenbalk. */
.topliner { overflow: visible; }
.topliner > .subliner { position: absolute; top: 100%; }
.ef-top-contact, .topclip { font-size: 15px; }
.card-title, .link_box, .link_box a { color: var(--ef-dark-blue) !important; }
.text-muted, .text-secondary, .cart-label, .projects-place { color: var(--ef-muted) !important; }
.text-primary { color: var(--ef-medium-blue) !important; }
.text-warning { color: var(--ef-dark-blue) !important; }
.text-info, .text-success { color: var(--ef-medium-blue) !important; }
.text-danger { color: var(--ef-dark-blue) !important; text-decoration: underline; text-decoration-style: dotted; }
small, .small { font-size: 12px; }

/* Geen schaduwen; focus blijft zichtbaar voor toetsenbordgebruikers. */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ef-medium-blue) !important;
    outline-offset: 3px;
}
.bg-gradient { background-image: none !important; }
.algemeen-content.is-collapsed::after { background: none; }
.algemeen-content.is-collapsed { border-bottom: 1px solid var(--ef-rule); }

.btn-primary, .btn-warning, .cookie_accept {
    --bs-btn-color: var(--ef-dark-blue);
    --bs-btn-bg: var(--ef-yellow);
    --bs-btn-border-color: var(--ef-yellow);
    --bs-btn-hover-color: var(--ef-yellow);
    --bs-btn-hover-bg: var(--ef-dark-blue);
    --bs-btn-hover-border-color: var(--ef-dark-blue);
    --bs-btn-active-color: var(--ef-yellow);
    --bs-btn-active-bg: var(--ef-dark-blue);
    --bs-btn-active-border-color: var(--ef-dark-blue);
    --bs-btn-disabled-color: var(--ef-dark-blue);
    --bs-btn-disabled-bg: var(--ef-yellow);
    --bs-btn-disabled-border-color: var(--ef-yellow);
}
.btn-lightblue, .btn-info, .btn-success, .btn-secondary, .btn-danger {
    --bs-btn-color: var(--ef-white);
    --bs-btn-bg: var(--ef-medium-blue);
    --bs-btn-border-color: var(--ef-medium-blue);
    --bs-btn-hover-color: var(--ef-white);
    --bs-btn-hover-bg: var(--ef-dark-blue);
    --bs-btn-hover-border-color: var(--ef-dark-blue);
    --bs-btn-active-color: var(--ef-white);
    --bs-btn-active-bg: var(--ef-dark-blue);
    --bs-btn-active-border-color: var(--ef-dark-blue);
    --bs-btn-disabled-color: var(--ef-white);
    --bs-btn-disabled-bg: var(--ef-muted);
    --bs-btn-disabled-border-color: var(--ef-muted);
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
}
.btn-secondary:hover { background-color: var(--ef-dark-blue); }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-warning, .btn-outline-danger {
    --bs-btn-color: var(--ef-dark-blue);
    --bs-btn-border-color: var(--ef-field-line);
    --bs-btn-hover-color: var(--ef-white);
    --bs-btn-hover-bg: var(--ef-dark-blue);
    --bs-btn-hover-border-color: var(--ef-dark-blue);
    --bs-btn-active-color: var(--ef-white);
    --bs-btn-active-bg: var(--ef-dark-blue);
    --bs-btn-active-border-color: var(--ef-dark-blue);
}
.cookie_accept { background: var(--ef-yellow); color: var(--ef-dark-blue); }
.cookie_decline { background: var(--ef-tint); color: var(--ef-dark-blue); }
.cookie_accept:hover, .cookie_decline:hover { background: var(--ef-dark-blue); color: var(--ef-white); }
.alert { --bs-alert-color: var(--ef-dark-blue); --bs-alert-bg: var(--ef-tint); --bs-alert-border-color: var(--ef-rule); }
.alert-warning, .alert-danger { --bs-alert-bg: var(--ef-yellow-tint); border-left: 4px solid var(--ef-yellow); }
.alert-link { color: var(--ef-dark-blue); }
.flash-toast--success { background: var(--ef-dark-blue); color: var(--ef-white); border-left: 4px solid var(--ef-yellow); }
.flash-toast--error { background: var(--ef-yellow-tint); color: var(--ef-dark-blue); border-left: 4px solid var(--ef-dark-blue); }

table { --bs-table-color: var(--ef-text); --bs-table-border-color: var(--ef-rule); }
thead { background: var(--ef-tint); color: var(--ef-dark-blue); }
thead th { border-bottom: 2px solid var(--ef-dark-blue); }
.ef-total { background: var(--ef-dark-blue); color: var(--ef-white); border-top: 3px solid var(--ef-yellow); padding-top: .75rem; padding-bottom: .75rem; }
.ef-total p { margin-bottom: 0; }
.ef-total .ef-price { font-weight: 700; }
.ef-cart-count { display: inline-block; min-width: 19px; padding: 2px 5px; border-radius: 12px; background: var(--ef-yellow); color: var(--ef-dark-blue); font-size: 12px; line-height: 1.25; text-align: center; }
.ef-user-link { color: var(--ef-yellow) !important; }
.ef-logo { display: block; height: auto; max-width: 100%; }
.footer h5, .footer a, .footer p { color: var(--ef-white); }
.footer .text-white-50 { color: var(--ef-white) !important; }
.footer hr { border-color: var(--ef-yellow) !important; opacity: 1; }
.footer { border-top: 4px solid var(--ef-yellow); }
.modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5 { color: var(--ef-white); }
.modal-header { background: var(--ef-dark-blue); color: var(--ef-white); }
.dropdown-menu {
    --bs-dropdown-link-color: var(--ef-dark-blue);
    --bs-dropdown-link-hover-color: var(--ef-dark-blue);
    --bs-dropdown-link-hover-bg: var(--ef-yellow-tint);
    --bs-dropdown-link-active-color: var(--ef-white);
    --bs-dropdown-link-active-bg: var(--ef-dark-blue);
}

@media print {
    body, p, td { color: var(--ef-black); background: var(--ef-white); }
}