/* 
Theme Name: 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: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
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 */

/*****************************************************
 * Gravity Forms - .bestelhulp radios als nette tegels
 *****************************************************/

/*****************************************************
 * Gravity Forms - .bestelhulp radios als nette tegels
 *****************************************************/
/* Tegel moet de héle tegel vullen en tekst perfect centreren */
.gform_wrapper .bestelhulp .gfield_radio li { 
  display: block; 
}

/* Pak zowel het standaard choice-label als de inline variant */
.gform_wrapper .bestelhulp .gfield-choice-input + label,
.gform_wrapper .bestelhulp label.gform-field-label--type-inline {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
margin-left: 0px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  /* visuele stijl (pas aan naar wens) */
  padding: 22px 18px;
  min-height: 100px;         /* gelijke hoogte, mag je tweaken */
  border-radius: 12px;
  border: 1px solid #E1E1E1;
  background: #F6F6F6;
  font-weight: 700;
  line-height: 1.35;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;

  /* tekstbreking netjes */
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Verwijder event. pseudo-icoon/inspringing van radios */
.gform_wrapper .bestelhulp .gfield-choice-input + label::before,
.gform_wrapper .bestelhulp label.gform-field-label--type-inline::before {
  content: none !important;
}

/* Zorg dat de input zelf geen layout beïnvloedt */
.gform_wrapper .bestelhulp .gfield-choice-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}

/* States */
.gform_wrapper .bestelhulp .gfield-choice-input:checked + label {
  border-color: #232175;
  background: #E9ECFF;
  color: #232175;
  box-shadow: 0 0 0 2px rgba(35,33,117,.15) inset;
}
.gform_wrapper .bestelhulp .gfield-choice-input:focus + label {
  outline: 2px solid #232175;
  outline-offset: 2px;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label .bestel {
  font-size: 24px !important;
}

/* Primaire kleuren */
.gform_wrapper .gform_button,
.gform_wrapper .gform_page_footer .button.gform_next_button,
.gform_wrapper .gform_page_footer .button.gform_previous_button {
    background-color: var(--e-global-color-accent) !important;
    border-color: var(--e-global-color-accent) !important;
}

/* Hover states voor buttons */
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_page_footer .button.gform_next_button:hover,
.gform_wrapper .gform_page_footer .button.gform_previous_button:hover {
    background-color: var(--e-global-color-accent) !important;
    opacity: 0.9;
}

/* Focus states voor input velden */
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: var(--e-global-color-accent) !important;
    outline-color: var(--e-global-color-accent) !important;
}

/* Radio buttons en checkboxes */
.gform_wrapper input[type=radio]:checked + label:before,
.gform_wrapper input[type=checkbox]:checked + label:before {
    background-color: var(--e-global-color-accent) !important;
    border-color: var(--e-global-color-accent) !important;
}

/* Progress bar */
.gform_wrapper .percentbar_blue {
    background-color: var(--e-global-color-accent) !important;
}

/* Links */
.gform_wrapper a {
    color: var(--e-global-color-accent) !important;
}

/* Validation en error states (optioneel) */
.gform_wrapper .gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
.gform_wrapper .gfield_error textarea:focus {
    border-color: var(--e-global-color-accent) !important;
}

/* Wrapper vervangt het zichtbare select */
.wg-select {
  position: relative;
  font-size: 16px;
}
.wg-select.is-disabled { opacity: .6; pointer-events: none; }

.wg-trigger {
  width: 100%;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
  padding: 12px 40px 12px 14px;
  text-align: left;
  cursor: pointer;
  line-height: 1.2;
  transition: border-color .2s, box-shadow .2s;
}
.wg-trigger:focus {
  outline: none;
  border-color: #4f9ee3;
  box-shadow: 0 0 0 3px rgba(79,158,227,.18);
}

/* Chevron */
.wg-trigger::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:14px; height:14px;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:14px 14px; background-repeat:no-repeat;
}

/* Options menu */
.wg-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 260px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 6px;
  display: none;
}
.wg-select.is-open .wg-options { display: block; }

.wg-option {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.wg-option:hover,
.wg-option[aria-selected="true"],
.wg-option.is-active {
  background: #f4f7fb;
}
.wg-option.is-placeholder {
  color:#6b7280;
}
.wg-option.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* Originele select visueel verbergen, maar wel toegankelijk/submitbaar houden */
.wg-native {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
}

/* ===== CART CONTAINER ===== */
.e-cart__container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== CART TABLE ===== */
.e-shop-table {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.shop_table thead th {
    background: transparent;
    padding: 15px 10px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
    border-bottom: 2px solid #e9ecef;
}

.shop_table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.shop_table tbody tr:hover {
    background: #f8f9fa;
}

.shop_table td {
    padding: 20px 10px;
    vertical-align: middle;
}

/* ===== PRODUCT THUMBNAIL ===== */
.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

/* ===== PRODUCT NAME ===== */
.product-name a {
    color: #5DC1D8;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s;
}

.product-name a:hover {
    color: #4ab0c7;
}

.variation {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

/* ===== REMOVE BUTTON ===== */
.product-remove a {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    transition: color 0.2s;
}

.product-remove a:hover {
    color: #dc3545;
}

/* ===== QUANTITY INPUT ===== */
.quantity input[type="number"] {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}

.quantity input[type="number"]:focus {
    outline: none;
    border-color: #5DC1D8;
}

/* ===== PRICE STYLING ===== */
.woocommerce-Price-amount {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

/* ===== ACTIONS ROW ===== */
.actions {
    background: transparent;
    padding: 20px !important;
    border-radius: 0 0 8px 8px;
}

.actions button {
    background: transparent;
    color: #5DC1D8;
    border: 2px solid #5DC1D8;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.actions button:hover:not(:disabled) {
    background: #5DC1D8;
    color: white;
}

.actions button:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}

/* ===== COUPON SECTION ===== */
.coupon.e-cart-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
}

.coupon-col {
    display: flex;
    gap: 10px;
    align-items: center;
}

.coupon-col-start {
    flex: 1;
}

#coupon_code {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.e-apply-coupon {
    background: transparent;
    color: #5DC1D8;
    border: 2px solid #5DC1D8;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s;
}

.e-apply-coupon:hover {
    background: #5DC1D8;
    color: white;
}

/* ===== CART TOTALS (RECHTER KOLOM) ===== */
.e-cart__column-end {
    position: relative;
}

.e-sticky-right-column {
    position: sticky;
    top: 20px;
}

.e-cart-totals {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    border: 1px solid #e9ecef;
}

.cart_totals h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    border-bottom: 2px solid #5DC1D8;
    padding-bottom: 10px;
}

.cart_totals table {
    width: 100%;
    margin-bottom: 20px;
}

.cart_totals th,
.cart_totals td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart_totals th {
    font-weight: 600;
    text-align: left;
    color: #666;
}

.cart_totals td {
    text-align: right;
    color: #0D2A38;
    font-weight: 600;
}

.order-total th,
.order-total td {
    font-size: 18px;
    padding: 15px 0;
    border-top: 2px solid #0D2A38;
    border-bottom: none;
    color: #0D2A38;
    font-weight: 700;
}

.order-total td strong {
    color: #0D2A38;
}

.order-total .includes_tax {
    color: #0D2A38;
    font-weight: 400;
}

/* ===== SHIPPING CALCULATOR ===== */
.shipping-calculator-button {
    color: #5DC1D8;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin-top: 10px;
}

.shipping-calculator-button:hover {
    text-decoration: underline;
}

.shipping-calculator-form {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

.shipping-calculator-form input,
.shipping-calculator-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
}

/* ===== CHECKOUT BUTTON ===== */
.wc-proceed-to-checkout {
    margin-top: 20px;
}

.checkout-button {
    display: block;
    width: 100%;
    padding: 16px;
    background: #5DC1D8;
    color: white !important;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 6px;
    transition: all 0.2s;
    border: none;
}

.checkout-button:hover {
    background: #4ab0c7;
    transform: translateY(-2px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .e-cart__container {
        grid-template-columns: 1fr;
    }
    
    .e-sticky-right-column {
        position: static;
    }
}

@media (max-width: 768px) {
    .shop_table thead {
        display: none;
    }
    
    .shop_table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
    }
    
    .shop_table td {
        display: block;
        text-align: right;
        padding: 10px 0;
        border: none;
    }
    
    .shop_table td:before {
        content: attr(data-title);
        float: left;
        font-weight: 600;
        color: #666;
    }
    
    .product-thumbnail {
        text-align: center !important;
    }
    
    .product-thumbnail:before {
        display: none;
    }
    
    .coupon-col {
        flex-direction: column;
    }
    
    .e-apply-coupon {
        width: 100%;
    }
}

/* ===== FORCE TEXT COLOR IN TOTALS ===== */
.cart_totals td,
.cart_totals td *,
.cart_totals .woocommerce-Price-amount,
.cart_totals .woocommerce-Price-amount *,
.order-total td,
.order-total td *,
.order-total strong,
.order-total .woocommerce-Price-amount,
.order-total .woocommerce-Price-currencySymbol,
.cart-subtotal td,
.cart-subtotal .woocommerce-Price-amount,
.woocommerce-shipping-totals td,
.includes_tax,
.includes_tax * {
    color: #0D2A38 !important;
}

/* Verzendkosten tekst */
.woocommerce-shipping-destination,
.shipping-calculator-button {
    color: #5DC1D8 !important;
}

/* ===== DATA-TITLE ATTRIBUTES ===== */
.cart_totals td,
    color: #0D2A38 !important;
}