/* =========================================
   MUTSAERS - modal cart clear fixes + mobile header hide
   ========================================= */

/* ---------------------------------------------------------
   MUT_MODAL_OVERLAY_SCOPE v20260202-1806
   Probleem:
   - Popup login + reCAPTCHA bframe werd geblokkeerd doordat
     .modals-overlay globaal op z-index 2147483646 stond.
   Oplossing:
   - Houd confirm-modal klikbaar (OK) via hoge z-index,
     maar scope overlay-boost alleen naar cart-clear confirm flow.
   - Laat overige modals (auth popup) hun eigen z-index regelen,
     zodat reCAPTCHA fix kan winnen.
   --------------------------------------------------------- */

/* Modal boven overlay, zodat OK klikbaar blijft (confirm only) */
body.mut-cartclear-confirm-open .modal-popup.confirm._show{z-index:2147483647 !important;}
body.mut-cartclear-confirm-open .modals-overlay{z-index:2147483646 !important;}
body.mut-cartclear-confirm-open .modal-overlay,
body.mut-cartclear-confirm-open .modals-overlay .modal-overlay{z-index:2147483646 !important;}

/* Extra ruimte boven modal zodat hij niet onder header valt (jouw eerdere fix) */
.modal-popup.confirm._show .modal-inner-wrap{margin-top:150px !important;}

/* Verberg minicart tijdens confirm op mobiel (jouw eerdere fix) */
@media (max-width:767px){
  body.mut-cartclear-confirm-open .block-minicart{display:none !important;}
}

/* MUTSAERS: verberg top panel "argento-grid" op mobiel */
@media (max-width:767px){
  .panel.header.argento-grid{
    display:none !important;
  }
}

/* =========================================
   MUT_QO_TOAST_MESSAGES v20260128-0142
   - Fixed message bar under sticky header
   - Only used by QuickOrder JS (customer-data messages)
   ========================================= */

#mt-qo-toast{
  position:fixed;
  left:0;
  right:0;
  top: calc(var(--total-header-h, 0px) + 10px);
  z-index:2147483647;
  display:none;
  pointer-events:none; /* niet klikbaar (voorkomt rare overlays) */
}

#mt-qo-toast.is-open{
  display:block;
}

#mt-qo-toast .messages{
  margin:0;
}

#mt-qo-toast .message{
  margin:0 auto;
  width: calc(100% - 40px);
  max-width: 1400px;
  border-radius: 4px;
  pointer-events:auto; /* binnenkant mag selecteerbaar zijn */
}

/* Zorg dat native top-messages geen dubbel effect geven tijdens toast */
body.mt-qo-toast-open .page.messages{
  display:none !important;
}

/* =========================================
   MUT_MOBILE_HIDE_CUSTOM_MESSAGES v20260205-1409
   Doel:
   - Op mobiel/tablet GEEN (custom) message-bar tonen
   - Alleen toast (#mt-qo-toast) laten gebruiken
   - Desktop (>=1025px) ongemoeid laten
   ========================================= */
@media (max-width:1024px){
  body .page.messages{
    display:none !important;
  }
}

/* =========================================================
   MUT_RECAPTCHA_ZINDEX v20260128-2306
   Forceer reCAPTCHA (badge + challenge overlay) boven ALLES
   (modal overlay gebruikt bij jullie extreem hoge z-index)
   ========================================================= */
:root { --mut-recaptcha-z: 2147483647; }

/* wrapper(s) die Magento/Recaptcha module gebruikt */
#recaptcha-popup-login-wrapper,
#recaptcha-popup-login,
#recaptcha-invisible {
  position: relative;
  z-index: var(--mut-recaptcha-z) !important;
}

/* reCAPTCHA badge */
.grecaptcha-badge{
  z-index: var(--mut-recaptcha-z) !important;
}

/* Google injecteert challenge overlay in BODY met inline z-index (vaak 2000000000)
   Dit forceert alles wat Google injecteert naar de top. */
body > div[style*="z-index: 2000000000"],
body > div[style*="z-index:2000000000"],
body > div[style*="z-index: 2000000001"],
body > div[style*="z-index:2000000001"]{
  z-index: var(--mut-recaptcha-z) !important;
}

/* iframe containers (anchor/bframe) */
iframe[title^="reCAPTCHA"],
iframe[src*="google.com/recaptcha"]{
  z-index: var(--mut-recaptcha-z) !important;
}
/* /MUT_RECAPTCHA_ZINDEX */

/* =========================================================
   MUT_RECAPTCHA_ACTIVE_ZFIX v20260128-2326
   Als reCAPTCHA challenge actief is, verlaag modal overlay
   zodat reCAPTCHA altijd klikbaar is (desktop + mobiel).
   ========================================================= */
body.mut-recaptcha-active .modals-overlay{
  z-index: 2147483000 !important;
}
body.mut-recaptcha-active .modal-popup{
  z-index: 2147483001 !important;
}

/* Zet reCAPTCHA zelf zo hoog mogelijk */
body.mut-recaptcha-active .grecaptcha-badge,
body.mut-recaptcha-active iframe[title^="reCAPTCHA"],
body.mut-recaptcha-active iframe[src*="google.com/recaptcha"]{
  z-index: 2147483647 !important;
  position: relative !important;
}
/* /MUT_RECAPTCHA_ACTIVE_ZFIX */

/* =========================================================
   MUT_RECAPTCHA_PARENT_FORCE_TOP v20260129-0022
   Fix: bframeParent blijft op z-index 2000000000 (lager dan modal).
   We forceren de TOP-LEVEL wrapper naar 2147483647 tijdens mut-recaptcha-active.
   ========================================================= */

/* 1) Google wrapper-div (inline z-index 2000000000/2000000001)
   LET OP:
   - Niet fullscreen maken op normale paginas (blokkeert inputs)
   - Echte fullscreen elevatie gebeurt via JS wanneer bframe verschijnt
*/
body.mut-recaptcha-active > div[style*="z-index: 2000000000"],
body.mut-recaptcha-active > div[style*="z-index:2000000000"],
body.mut-recaptcha-active > div[style*="z-index: 2000000001"],
body.mut-recaptcha-active > div[style*="z-index:2000000001"]{
  z-index: 2147483647 !important;
}

/* 2) Forceer ALLEEN de challenge iframe (bframe) boven alles */
body.mut-recaptcha-active iframe[src*="recaptcha"][src*="bframe"],
body.mut-recaptcha-active iframe[src*="recaptcha/api2/bframe"],
body.mut-recaptcha-active iframe[src*="recaptcha/enterprise/bframe"]{
  z-index: 2147483647 !important;
  position: fixed !important;
  pointer-events: auto !important;
}

/* 3) Stacking-context killer: als er transforms/filters op wrappers zitten,
      kan fixed/overlay raar doen. Alleen tijdens challenge neutraliseren. */
body.mut-recaptcha-active .page-wrapper,
body.mut-recaptcha-active .modals-wrapper,
body.mut-recaptcha-active .modal-popup{
  transform: none !important;
  filter: none !important;
}

/* /MUT_RECAPTCHA_PARENT_FORCE_TOP */

/* MUT_LOGIN_POPUP_SELECTOR_EXT v20260213-0002
   Alleen selectors uitbreiden zodat login modal dezelfde "on top" behandeling krijgt als op TEST.
   Geen nieuwe z-index waarden introduceren.
*/

/* Login popup gebruikt inline z-index (902). Forceer dat dit altijd boven sticky valt. */
.modal-popup.popup-authentication,
.modal-popup.popup-authentication._show,
.modal-popup.popup-authentication.modal-slide._show,
.modal-popup.popup-authentication .modal-inner-wrap {
  z-index: 902 !important;
}

/* Overlay band zoals al gebruikt */
.modals-overlay {
  z-index: 901 !important;
}

/* /MUT_LOGIN_POPUP_SELECTOR_EXT */

/* MUT_MODAL_BEATS_STICKY_PANEL v20260213-0003
   Alleen tijdens modals: sticky header panel onder de modal zetten.
   Dit behoudt je bestaande modal/recaptcha z-index aanpak.
*/
body._has-modal .panel.wrapper {
  z-index: 900 !important; /* onder modal (902) en overlay (901) */
}
/* /MUT_MODAL_BEATS_STICKY_PANEL */

/* MUT_MODAL_BEATS_FIXED_HEADER_WRAPPER v20260213-0005
   Alleen tijdens modals: fixed header wrapper (z=1000) onder modal (902) zetten.
*/
body._has-modal .header.wrapper {
  z-index: 900 !important;
}
/* /MUT_MODAL_BEATS_FIXED_HEADER_WRAPPER */

/* =========================================================
   MUT_NAVPRO_FULLWIDTH_FLYOUT_FIX v20260213-1608
   Doel:
   - Level1 mega dropdown altijd 100vw (alle topmenu items)
   - Submenu's (level2/3) openen rechts naast hovered item
     (JS doet exacte positionering; CSS zet basis/box-styling)
   - Logo/brand tiles bij Collecties iets groter
   - Hover-gap bridge + overflow visible behouden
   ========================================================= */

@media (min-width:768px){
  /* Header mag dropdown niet afknippen */
  .page-header,
  .header.content,
  .header__content{
    overflow: visible !important;
  }

  /* NavPro boven header (z-index) */
  #navpro-topnav{
    position: relative;
    z-index: 6000 !important;
  }

  /* Hover-bridge: overbrugt het ‘gaatje’ tussen level0 en dropdown */
  #navpro-topnav > li.level0.parent{
    position: relative;
  }
  #navpro-topnav > li.level0.parent::after{
    content:'';
    position:absolute;
    left:-60px;
    right:-60px;
    bottom:-60px;
    height: 60px;
    background:transparent;
  }

  /* Level1 dropdown altijd full width */
  #navpro-topnav > li.level0 > .navpro-dropdown-level1,
  #navpro-topnav > li.level0 > .navpro-dropdown{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 7000 !important;
    top: calc(var(--mt-navpro-top, 140px) + 0px) !important;
  }

  /* Kolommen voor level1 */
  #navpro-topnav > li.level0 > .navpro-dropdown-level1 .ui-menu,
  #navpro-topnav > li.level0 > .navpro-dropdown .ui-menu{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  #navpro-topnav > li.level0 > .navpro-dropdown-level1 .ui-menu > li,
  #navpro-topnav > li.level0 > .navpro-dropdown .ui-menu > li{
    width: 20% !important;
    min-width: 220px !important;
  }

  
  /* Ankerpunt voor absolute submenu's */
  #navpro-topnav .navpro-dropdown-level1 .ui-menu li,
  #navpro-topnav .navpro-dropdown .ui-menu li{
    position: relative !important;
  }

/* Submenu flyouts (level2/3): basis box styling.
     Let op: exacte left/top komt via JS (mt-navpro-flyout-fix.js). */
  #navpro-topnav .navpro-dropdown-level1 .submenu,
  #navpro-topnav .navpro-dropdown .submenu,
  #navpro-topnav .navpro-dropdown-level1 .ui-menu ul,
  #navpro-topnav .navpro-dropdown .ui-menu ul{
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: 360px !important;
    transform: none !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    z-index: 9000 !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
  }

  /* Flyout items netjes */
  #navpro-topnav .navpro-dropdown-level1 .submenu > li,
  #navpro-topnav .navpro-dropdown .submenu > li,
  #navpro-topnav .navpro-dropdown-level1 .ui-menu ul > li,
  #navpro-topnav .navpro-dropdown .ui-menu ul > li{
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  #navpro-topnav .navpro-dropdown-level1 .submenu a,
  #navpro-topnav .navpro-dropdown .submenu a,
  #navpro-topnav .navpro-dropdown-level1 .ui-menu ul a,
  #navpro-topnav .navpro-dropdown .ui-menu ul a{
    display:block !important;
    padding: 8px 16px !important;
    white-space: normal !important;
  }

  /* Logo/brand tiles iets groter (Collecties) */
  #navpro-topnav .navpro-dropdown img,
  #navpro-topnav .navpro-dropdown-level1 img{
    max-width: 380px !important;
    max-height: 220px !important;
    height: auto !important;
    width: auto !important;
  }

  #navpro-topnav .navpro-dropdown [class*="logo"],
  #navpro-topnav .navpro-dropdown-level1 [class*="logo"],
  #navpro-topnav .navpro-dropdown [class*="brand"],
  #navpro-topnav .navpro-dropdown-level1 [class*="brand"]{
    max-width: 420px !important;
  }

  /* Als header pseudo-elementen ooit over menu liggen: niet klik-vangend */
  .header.content::before,
  .header.content::after,
  .header__content::before,
  .header__content::after{
    pointer-events: none !important;
  }
}

/* /MUT_NAVPRO_FULLWIDTH_FLYOUT_FIX */