/* Gedeeld, geladen NA de pagina-CSS uit het design. */

/* Taalswitch: in het design <button>, hier echte links. */
.lang{display:flex;gap:6px;margin-left:12px}
.lang a{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff !important;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:100px;text-decoration:none;transition:.2s;line-height:1.2
}
.lang a:hover{background:rgba(255,255,255,.25)}
.lang a.active{background:var(--orange);border-color:var(--orange)}
.lang a.active:hover{background:var(--orange-dark)}

/* Header onder de WordPress-adminbalk. */
body.admin-bar .sc-header{top:32px}
@media (max-width:782px){ body.admin-bar .sc-header{top:46px} }

.sc-footer .foot-base a.inline{display:inline;padding:0;color:inherit}
.sc-footer .foot-base a.inline:hover{color:var(--orange)}

img{max-width:100%;height:auto}
html,body{overflow-x:clip}

/* ===== Mobiel menu (het design verbergt de nav onder 900px) ===== */
.sc-menu-toggle{
  display:none;background:transparent;border:1px solid rgba(255,255,255,.3);
  border-radius:12px;width:46px;height:42px;padding:10px 11px;cursor:pointer;
  flex-direction:column;justify-content:space-between
}
.sc-menu-toggle span{display:block;height:2px;border-radius:2px;background:#fff;transition:.2s}
.sc-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.sc-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.sc-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:900px){
  .sc-header{flex-wrap:wrap}
  .sc-header .logo img{height:44px}
  .sc-menu-toggle{display:flex}
  .sc-header nav{
    display:none !important;width:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:12px 0 6px
  }
  .sc-header nav.open{display:flex !important}
  .sc-header nav > a{padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
  .sc-header nav > a.btn{margin-top:14px;justify-content:center;border-bottom:0;padding:13px 24px}
  .sc-header nav .lang{display:none}
  .sc-header .lang-mobile{display:flex;gap:5px;margin:0 10px 0 auto}
  .sc-header .lang-mobile a{padding:6px 9px}
}
@media (min-width:901px){ .sc-header .lang-mobile{display:none} }
@media (max-width:360px){
  .sc-header .lang-mobile{gap:4px;margin-right:8px}
  .sc-header .lang-mobile a{padding:5px 7px;font-size:11px}
}

/* ===== Gewone pagina's (winkelwagen, kassa, account, overige) ===== */
.sc-default{max-width:1060px;margin:0 auto;padding:56px 24px 80px}
.sc-default h1{font-family:'Poppins',sans-serif;color:var(--navy);font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:24px}
.sc-default h2,.sc-default h3{font-family:'Poppins',sans-serif;color:var(--navy);margin:28px 0 12px}
.sc-default p,.sc-default li{line-height:1.7;margin-bottom:12px}
.sc-default a{color:var(--navy)}
.sc-default .sc-card{background:#fff;border-radius:var(--radius);box-shadow:0 24px 60px rgba(27,48,89,.12);padding:36px}

/* WooCommerce-knoppen in huisstijl */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button,.wp-element-button{
  background:var(--orange) !important;color:#fff !important;border:0 !important;
  border-radius:100px !important;font-family:'Poppins',sans-serif !important;font-weight:600 !important;
  padding:14px 30px !important;box-shadow:0 10px 24px rgba(253,141,59,.3);transition:.2s
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.wc-block-components-button:hover{background:var(--orange-dark) !important}
.woocommerce input.input-text,.woocommerce select,.woocommerce textarea,
.wc-block-components-text-input input{border:1.5px solid #D5DEEE !important;border-radius:12px !important;padding:12px 14px !important}
.woocommerce-message,.woocommerce-info{border-top-color:var(--orange) !important;background:#fff;border-radius:12px}

/* Kalender (Gravity Forms datepicker): maand- en jaarkeuze niet laten vallen onder de kassa-stijl hierboven */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
  padding:0 26px 0 10px !important;height:36px !important;line-height:34px !important;
  font-size:14px !important;color:var(--ink,#22314F) !important;border-radius:10px !important
}

/* ===== Kassa: betaalblok en overzicht in huisstijl (i.p.v. WooCommerce-grijs/paars) ===== */
.woocommerce-checkout #payment{
  background:#fff;border:1px solid #E3E9F4;border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(27,48,89,.10);overflow:hidden
}
.woocommerce-checkout #payment ul.payment_methods{padding:22px 26px;border-bottom:1px solid #E3E9F4}
.woocommerce-checkout #payment ul.payment_methods li{padding:6px 0;line-height:1.5}
.woocommerce-checkout #payment ul.payment_methods li > label{font-weight:600;color:var(--navy);cursor:pointer}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{accent-color:var(--orange);width:18px;height:18px;vertical-align:-3px;margin-right:8px}
.woocommerce-checkout #payment div.payment_box{
  background:var(--cloud);color:var(--ink);border:1px solid #E3E9F4;border-radius:14px;padding:20px 22px;margin:12px 0 6px
}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--cloud)}
.woocommerce-checkout #payment div.payment_box .mollie-component{border:1.5px solid #D5DEEE !important;border-radius:12px !important;background:#fff !important;box-shadow:none !important}
.woocommerce-checkout #payment div.payment_box .mollie-component-label{font-weight:600;color:var(--navy);font-size:14px}
.woocommerce-checkout #payment div.form-row{padding:22px 26px;margin:0}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text{color:var(--grey);font-size:14px}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text a{color:var(--navy);font-weight:600}
.woocommerce-checkout #payment #place_order{float:right;margin-top:8px}

.woocommerce-checkout table.shop_table{
  background:#fff;border:1px solid #E3E9F4 !important;border-radius:var(--radius) !important;
  border-collapse:separate !important;overflow:hidden;margin-bottom:24px
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{border-color:#E3E9F4 !important;padding:14px 20px !important}
.woocommerce-checkout table.shop_table thead th{background:var(--cloud);color:var(--navy);font-family:'Poppins',sans-serif}
.woocommerce-checkout table.shop_table tfoot .order-total td,
.woocommerce-checkout table.shop_table tfoot .order-total th{color:var(--navy);font-size:17px}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{font-family:'Poppins',sans-serif;color:var(--navy)}
@media (max-width:600px){
  .woocommerce-checkout #payment ul.payment_methods,
  .woocommerce-checkout #payment div.form-row{padding:18px}
  .woocommerce-checkout #payment #place_order{float:none;width:100%}
}

/* E-mailadressen per onderwerp (footer en contact) */
.sc-footer .foot-mail{margin:0 0 10px;line-height:1.4}
.sc-footer .foot-mail span{display:block;font-size:12px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.5px}
.sc-footer .foot-mail a{display:inline;padding:0;word-break:break-all}
.mail-line{margin:0 0 8px;line-height:1.4}
.mail-line span{display:block;font-size:12.5px;color:var(--grey)}
.mail-line a{word-break:break-all}

/* Blok "Nog één stap: je documenten" (bedankpagina en Mijn account) */
.sc-docs-box{background:#fff;border:2px solid var(--orange);border-radius:var(--radius);padding:26px 28px;margin:0 0 32px;box-shadow:0 18px 40px rgba(27,48,89,.08)}
.sc-docs-box h3{font-family:'Poppins',sans-serif;color:var(--navy);font-size:20px;margin:0 0 8px}
.sc-docs-box p{color:var(--grey);line-height:1.6;margin:0 0 14px}
.sc-docs-box .docs-received{list-style:none;margin:0 0 18px;padding:0}
.sc-docs-box .docs-received li{padding:4px 0 4px 26px;position:relative;font-size:14px}
.sc-docs-box .docs-received li::before{content:"✓";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:#E8F5EE;color:#1E9E5A;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sc-docs-box .docs-received li.todo::before{content:"!";background:#FFF1E5;color:var(--orange-dark)}

/* ===== Dienstenbalk boven het menu (niet op het portaal) ===== */
.sc-switch{
  background:#12213F;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 48px;font-family:'Poppins',sans-serif;font-size:13px;position:relative;z-index:51
}
.sc-switch a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:600;white-space:nowrap}
.sc-switch a:hover{color:#fff}
.sc-switch-back span[aria-hidden]{display:inline-block;transition:transform .2s}
.sc-switch-back:hover span[aria-hidden]{transform:translateX(-3px)}
.sc-switch-tabs{display:flex;gap:4px;background:rgba(255,255,255,.08);border-radius:100px;padding:3px}
.sc-switch-tabs a{padding:5px 14px;border-radius:100px;font-size:12.5px}
.sc-switch-tabs a.active{background:var(--orange);color:#fff}
body.admin-bar .sc-switch{margin-top:0}
@media (max-width:900px){ .sc-switch{padding:6px 20px} }
@media (max-width:420px){
  .sc-switch{padding:6px 12px;gap:8px}
  .sc-switch-back .lbl{display:none}
  .sc-switch-back{font-size:18px;line-height:1}
  .sc-switch-tabs a{padding:5px 11px;font-size:12px}
}
.sc-header nav > a.nav-staff{color:var(--orange,#FD8D3B)}