/*
Theme Name: Triodos Bank
Theme URI: https://woocommerce.com/products/glowzy
Author: ArtifyWeb
Author URI: https://artifyweb.com/
Description: Glowzy is a WooCommerce block theme designed specifically for skincare products. It focuses on a clean, elegant design that highlights beauty and wellness, offering seamless customization with full-site editing. Glowzy is optimized for conversions, providing an intuitive shopping experience for skincare brands, beauty stores, and cosmetic retailers.
Tags: e-commerce, blog, full-site-editing, block-patterns, custom-colors, one-column, full-width-template, rtl-language-support, translation-ready, threaded-comments, wide-blocks, editor-style, block-styles
Version: 1.0.7
Requires at least: 6.6
WC requires at least: 8.5.0
WC tested up to: 10.4.3
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glowzy
 * Woo: 18734005121032:b71069d3c211225efbb9e171d99836d6

*/

/* Center container on the page */
.custom-ideal-checkout-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
}

/* Card Styling */
.custom-ideal-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 24px;
  color: #1a202c;
  font-weight: 700;
}

/* Amount box */
.amount-box {
  background-color: #f7fafc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 28px;
  border: 1px solid #edf2f7;
}

.amount-label {
  display: block;
  font-size: 0.9rem;
  color: #718096;
  margin-bottom: 4px;
}

.amount-value {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: #2d3748;
}

/* iDEAL Button */
.btn-ideal-pay {
  width: 100%;
  background-color: #cc0066; /* iDEAL Magenta */
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-ideal-pay:hover {
  background-color: #a30052;
}

.btn-ideal-pay:active {
  transform: scale(0.99);
}

/* ==========================================================================
   Custom Express iDEAL Checkout Layout (Gutenberg Block)
   ========================================================================== */

/* 1. Verberg overbodige blokken */
.wc-block-components-express-payment,
.wc-block-components-express-payment-continue-rule,
#contact-fields,
#billing-fields,
#order-notes,
.wc-block-checkout__terms,
.wc-block-components-sidebar,
.wc-block-components-checkout-step__heading-container {
    display: none !important;
}

/* 2. Verberg de overige betaalmethoden (Kaart & Klarna) binnen het accordeon */
.wc-block-components-radio-control-accordion-option:has(input[value="woocommerce_payments"]),
.wc-block-components-radio-control-accordion-option:has(input[value="woocommerce_payments_klarna"]) {
    display: none !important;
}

/* 3. Transformeer de hoofd-container naar een gecentreerde kaart */
.wc-block-checkout__main {
    max-width: 460px !important;
    margin: 60px auto !important;
    padding: 35px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    float: none !important;
    width: 100% !important;
}

/* 4. Stijl de iDEAL optie */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border: 1px solid #cc0066 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    background-color: #fff0f6 !important;
}

/* 5. Stijl de 'Plaats bestelling' knop */
.wc-block-components-checkout-place-order-button {
    background-color: #cc0066 !important; /* iDEAL Magenta */
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 16px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    border: none !important;
    margin-top: 20px !important;
    transition: background-color 0.2s ease !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background-color: #a30052 !important;
}

/* ==========================================================================
   Gutenberg React Checkout Component Hiding
   ========================================================================== */

/* 1. Express Payment (Google Pay / Stripe Express) & 'Of ga hieronder verder' */
.wc-block-components-express-payment,
.wc-block-components-express-payment-continue-rule {
    display: none !important;
}

/* 2. Contactgegevens (E-mailadres veld & gastmelding) */
#contact-fields,
.wp-block-woocommerce-checkout-contact-information-block {
    display: none !important;
}

/* 3. Factuuradres (Adreskaart & invulvelden) */
#billing-fields,
.wp-block-woocommerce-checkout-billing-address-block {
    display: none !important;
}

/* 4. Notities & Voorwaarden */
#order-notes,
.wp-block-woocommerce-checkout-order-note-block,
.wc-block-checkout__terms,
.wp-block-woocommerce-checkout-terms-block {
    display: none !important;
}

/* 5. Sidebar (Rechterkolom met Besteloverzicht, productafbeelding, subtotaal & kortingsbon) */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-totals-block {
    display: none !important;
}

/* 6. Betalingsopties: Verberg Creditcard & Klarna opties uit de radio list */
.wc-block-components-radio-control-accordion-option:has(input[value="woocommerce_payments"]),
.wc-block-components-radio-control-accordion-option:has(input[value="woocommerce_payments_klarna"]) {
    display: none !important;
}

/* 7. Titel boven Betalingsopties verbergen */
#payment-method .wc-block-components-checkout-step__heading-container {
    display: none !important;
}

/* ==========================================================================
   Layout Transformation: Maak er één strakke kaart van
   ========================================================================== */

/* 8. Centreren van de hoofd-container */
.wc-block-checkout {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 780px !important;
}

.wc-block-checkout__main {
    width: 100% !important;
    max-width: 460px !important;
    margin: 40px auto !important;
    padding: 30px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
}

/* 9. Stijl de iDEAL button en container */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border: 1px solid #cc0066 !important;
    border-radius: 10px !important;
    background-color: #fff0f6 !important;
    padding: 12px !important;
}

/* 10. Stijl de 'Plaats bestelling' knop */
.wc-block-components-checkout-place-order-button {
    background-color: #cc0066 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 16px !important;
    border: none !important;
    cursor: pointer !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background-color: #a30052 !important;
}

html,body{
    height: 100%;
}

       body {
            background-color: #ebe9ff!important;
            margin: 0;
            padding: 0;
             font-family: 'InterTriodos', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .maintxt {
            font-family: 'Freigeist', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .header-bar {
            height: 70px;
            width: 100%;
            background-color: #ffffff;
        }

        .container-780 {
            max-width: 780px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0rem;
            padding-right: 0rem;
        }

        @font-face {
  font-family: 'InterTriodos';
  src: url('InterTriodos.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.intertriodos {
  font-family: 'InterTriodos', -apple-system, BlinkMacSystemFont, sans-serif;
}

        @font-face {
  font-family: 'Freigeist';
  src: url('freigeist.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.freigeist {
  font-family: 'Freigeist', -apple-system, BlinkMacSystemFont, sans-serif;
}

.btn-custom-pill {
  /* Pill shape and padding */
  border-radius: 50rem; /* Creates fully rounded pill shape */
  padding: 0.75rem 2rem;
  
  /* Background & Border */
  background-color: #ffffff;
  border: 2px solid #8e7a88; /* Soft muted purple/plum border */
  
  /* Typography */
  color: #3b0a24; /* Dark plum text color */
  font-weight: 700; /* Bold text */
  text-decoration: none;
  
  /* Smooth transitions for hover effects */
  transition: all 0.2s ease-in-out;
}

/* Hover and active states */
.btn-custom-pill:hover,
.btn-custom-pill:focus {
  background-color: #f8f5f7;
  color: #3b0a24;
  border-color: #725e6c;
}


/* Verberg de sidebar met besteloverzicht */
.wc-block-checkout__sidebar {
    display: none !important;
}

/* Verberg het mobiele orderoverzicht en de extra opvulling van WooCommerce */
.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper,
.wc-block-checkout__actions .checkout-order-summary-block-fill,
.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
    display: none !important;
}

div#radio-control-wc-payment-method-options-woocommerce_payments_ideal__content {
    display: none;
}

.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    display: none;
}

.wc-block-components-checkout-step__content {
    display: none;
}

.wc-block-checkout__main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
    background: transparent!important;
    border-radius: 0px!important;
    box-shadow: none!important;
    border: 0px!important;
}

button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button--full-width.contained {
    border-radius: 50rem !important;
    padding: 0.75rem 2rem !important;
    background-color: #ffffff !important;
    border: 2px solid #8e7a88 !important;
    color: #3b0a24 !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out !important;
}

button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button--full-width.contained:hover {
  background-color: #f8f5f7!important;
  color: #3b0a24!important;
  border-color: #725e6c!important;
}

.wp-block-group.alignwide.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

p.maintxt {
    font-size: 19.6px;
    color: #3c132e;
}

button.accordion-button.collapsed.rounded-4.py-3.px-4.fw-semibold.fs-5.text-dark.bg-white {
    font-size: 19.6px !important;
    margin-bottom: 2rem;
    z-index:100;
}

p {
    font-size: 19.6px;
}

.wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
    margin-top: -132px;
}

div#collapseOne {
    margin-bottom: 2rem;
}

.fw-medium {
    font-weight: normal !important;
}
.small, small {
    font-size: .875em;
    font-size: 19.6px !important;
}

.fw-bold {
    font-weight: 700 !important;
    font-weight: bold !important;
}
.fs-5 {
    font-size: 1.25rem !important;
    font-size: 19.6px !important;
}

.fw-normal {
    font-weight: 400 !important;
    font-size: 19.6px;
}

.fw-semibold {
    font-weight: bold !important;
    font-size: 19.6px !important;
}

.fw-medium {
    font-weight: normal !important;
    font-size: 19.6px !important;
}

/* Reset base html and body heights cleanly */
html {
  height: 100%;
}

body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Force WordPress outer container to be a Flex column */
.wp-site-blocks {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
}

/* Force the main content area (or your inner group block) to grow */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group.alignwide.has-global-padding.is-layout-constrained {
  flex: 1 0 auto !important;
}

/* Keep the sticky footer anchored at the bottom */
.sticky-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

button.ontdek {
    /* padding: 0px; */
    border-radius: 50rem !important;
    /* padding: 0.75rem 2rem !important; */
    background-color: #ffffff !important;
    border: 2px solid #8e7a88 !important;
    color: #3b0a24 !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out !important;
    width:100%;
}

.ontdek p {
    padding: 3px;
    margin: 0px;
}

.pale{
    padding-left:32px;
    padding-right:32px;
}

button.ontdek:hover{
  background-color: #f8f5f7!important;
  color: #3b0a24!important;
  border-color: #725e6c!important;
}

.wp-site-blocks {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Druk het middenstuk uit, zodat de footer altijd naar de bodem wordt geduwd */
.wp-site-blocks > .wp-block-columns,
.wp-site-blocks > .entry-content,
.wp-site-blocks > main {
    flex: 1 0 auto !important;
}

/* Zorg dat de footer onderaan blijft staan en niet inkrimpt */
.wp-site-blocks > .wc-blocks-footer-pattern,
.wp-site-blocks > footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.m-tops {
    margin-top: -22px;
}