/* 
Theme Name: Echoscopisten.nl (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: M440
Author URI: https://m440.nl
Template: hello-elementor
Version: 2.0.1
Text Domain: echoscopisten
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

@import url("/wp-content/uploads/elementor/custom-icons/BEN-icons-1/style.css");

/* Main BEN colouring scheme */
:root {
    --ben-color-blue: #6482ad; /* Main brand blue color */
    --ben-color-hover: #5e7194; /* Darker hovering color */
    --ben-color-salmon: #f8e3e3; /* Default salmon color */
    --ben-color-salmon-light: #f5eded; /* Light salmon color */
    --ben-color-grey: #dddcdc; /* Default grey color */
    --ben-color-grey-light: #eeeeee; /* Light grey color */
}


/* Icon of menu level 3 items */
.iconben-l3 {
    font-size: 2em;
    color: #7fa1c3;
}
a:hover > i.iconben-l3 {
    color: #5e7194;
}

/* Menu tabs (level 2) */
/*
.level2-tabs .e-n-tab-title-text {
    flex-grow: 1 !important;
}
.level2-tabs .e-n-tabs-heading {
    padding-top: 30px;
    padding-bottom: 30px;
}
.level2-tabs .elementor-widget-container {
    !* padding-top: 30px; *!
}
*/

.level2-tabs button {
    border-radius: 5px !important; /* !CSS overrule needed because flaw in elementor! */
}



/* Content block */
.tussenblok-blauw a:link, .tussenblok-blauw a:visited, .tussenblok-blauw a:active {
    color:white;
    text-decoration: underline;
}
.tussenblok-blauw a:hover {
    color: #eee;
    /*text-decoration: underline;*/
}

/* Elementor doesn’t apply any margin or padding at the bottom of list items. */
.elementor-widget text-editor ul, .elementor-widget-theme-post-content ul {
    margin-block-end: .9rem;
}
.elementor-widget text-editor ol, .elementor-widget-theme-post-content ol {
    margin-block-end: .9rem;
}


/* The events calendar styling (obsolete, replaced by Elementor widgets) */
#tribe-events-pg-template {
    max-width: 1140px;
}

[class*=tec-events-elementor-event-widget] {
    font-family: inherit !important;
}


/* Contact Form 7 */
/**
.wpcf7
.wpcf7-form
.wpcf7-form-control
.wpcf7 input
.wpcf7 input[type=”text”]
.wpcf7 input[type=”email”]
.wpcf7 input[type=”checkbox”]
.wpcf7-file
.wpcf7 textarea
.wpcf7 select
.wpcf7 select option
.wpcf7 select option:hover
.wpcf7 p
*/

.wpcf7-form label {
    margin-bottom: 0.5rem;
}

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="date"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 textarea, .wpcf7-file {
    background-color: var(--ben-color-grey-light);
    border:none;
    border-radius: 20px; /* Rounded corners */
    padding: 10px 20px; /* Inner padding for better usability */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    width: 100%;
}

.wpcf7 textarea {
    height: 150px;
}

.wpcf7-select  {
    background-color: var(--ben-color-grey-light);
    border:none;
    border-radius: 20px; /* Rounded corners */
    padding: 10px 20px; /* Inner padding for better usability */
    /* border-right: 10px solid transparent; */
    color: #6d6d7e;


    appearance: none; /* Remove the default arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */

    /* Add space for the dropdown arrow */
    padding-right: 30px;

    /* Position it relative */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 25px;
}

.wpcf7 input[type="file"] {
    width: 100%; /* somehow this one is not included in the main theme */
}

.wpcf7-list-item {
    display: block;
}

.wpcf7 input[type="submit"], .woocommerce button, a.wc-block-components-button, button.wc-block-components-button, .wc-block-checkout span[type="button"] {
    font-size:1rem;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 600;
    background-color: var(--ben-color-blue) !important;
    border:none;
    border-radius: 10px !important;
    color:#fff;
    cursor:pointer;
    text-decoration: none;
}

.wpcf7 input[type="submit"]:hover, .woocommerce button:hover, a.wc-block-components-button:hover, button.wc-block-components-button:hover, .wc-block-checkout span[type="button"]:hover {
    background-color: var(--ben-color-hover) !important;
    border-radius: 10px !important;
    color:#fff;
}

.wpcf7 {
    container-type: inline-size;
    container-name: contactform7-div;
}


.wc-block-cart .wc-block-cart__totals-title, tr.wc-block-cart-items__header {
    font-size: 1em !important;
}



/*
    Two columns layout of ContactForm 7 fields based on its parent container min width
    https://wp-doin.com/contact-form-7-two-columns-layout-guide/
    https://css-tricks.com/css-container-queries/
*/
@container contactform7-div (min-width: 500px) {
    .my-contact7-2columngrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .my-contact7-3columngrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
}


/* Wocommerce */
.product_meta .posted_in { display: none !important; }

.wc-block-components-product-metadata {
    font-size: inherit !important;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color:inherit !important;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
    color:inherit !important;
}

.alignwide {
    margin-inline: initial !important; /* Fix the shoppingcart div not to be -80px misaligned! */
}


/* Cookie Yes */
div.cky-consent-container button, div.cky-modal button {
    /*font-size: var( --e-global-typography-text-font-size ) !important;*/
    font-size: inherit !important;
    border-radius: inherit !important;
}