/* ===========================
   PRINT (scoped)
   =========================== */
@media print {
  #mb-plugin-wrapper,
  #mb-plugin-wrapper #board-wrapper,
  #mb-plugin-wrapper #puzzle_container {
    width: auto;
    height: auto;
  }
  #mb-plugin-wrapper .puzzle_block {
    page-break-inside: avoid;
  }
}

/* ===========================
   BASE (scoped, ingen globale resets)
   =========================== */
#mb-plugin-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#mb-plugin-wrapper {
  font-family: "Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  display: flex;
  min-height: 800px;
  max-height: 75vh;
  max-width: 1050px;
  background-color: #E2E9ED;
  position: relative;
}
#mb-plugin-wrapper :where(h1,h2,h3,h4,h5,h6){
  font-family: "Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

/* Accept marketing */
#mb-plugin-wrapper #accept-marketing-text {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
  line-height: 1.4;
}
#mb-plugin-wrapper #accept-marketing-text a {
  color: #925c3a;
  text-decoration: underline;
}

/* ===========================
   ICONS
   =========================== */
#mb-plugin-wrapper .mb-icon { aspect-ratio:1/1; height:22px; }
/* alias for eksisterende markup */
#mb-plugin-wrapper .icon { aspect-ratio:1/1; height:22px; }

/* ===========================
   CONTROLS + CONTENT
   =========================== */
#mb-plugin-wrapper #controls-icon {
  position: absolute;
  top: 12px;
  left: 5%;
}
#mb-plugin-wrapper #controls-content {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
#mb-plugin-wrapper #controls-content > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* skift .hidden -> .mb-hidden, men behold alias */
#mb-plugin-wrapper #controls-content.mb-hidden,
#mb-plugin-wrapper #controls-content.hidden { display:none; }

/* ===========================
   BOARD
   =========================== */
#mb-plugin-wrapper #board-wrapper {
  position: absolute;
  left: 62%;
  transform: translateX(-50%);
  height: 70%;
}

/* =========================----------
   SIDEBAR
   =========================== */
#mb-plugin-wrapper .mb-sidebar-container{
  width:24%;
  background-color:#e2e9ed;
  box-shadow:2px 0 10px rgba(0,0,0,0.1);
  transition:all 0.3s ease;
  overflow-y:auto;
  height:100%;
  position:relative;
  
}
#mb-plugin-wrapper .mb-sidebar-container.minimized{ width:60px; }

#mb-plugin-wrapper .mb-sidebar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;

  border-bottom:1px solid #E2E9ED;
  background-color:#243b4c;
  color:#fff;
}
#mb-plugin-wrapper .mb-sidebar-title{
  font-size:18px;
  font-weight:600;
  color:#fff;
  transition:opacity 0.3s;
}

/* =========================----------
   FILTERS (prefixed + aliaser)
   =========================== */
/* alias: .filter-section -> .mb-filter-section */
#mb-plugin-wrapper .mb-filter-section,
#mb-plugin-wrapper .filter-section{
  padding:15px;
  border-bottom:1px solid #E2E9ED;
  transition:opacity 0.3s;
  background-color:#e2e9ed;
}
#mb-plugin-wrapper .mb-filter-toggle,
#mb-plugin-wrapper .filter-toggle{
  width:100%;
  background:none;
  border:none;
  color:#243b4c;
  font-size:16px;
  font-weight:600;
  font-family:"Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  padding:0;
  text-align:left;
  gap:8px;
}
#mb-plugin-wrapper .mb-filter-toggle:focus-visible,
#mb-plugin-wrapper .filter-toggle:focus-visible{
  outline:2px solid #243b4c;
  outline-offset:2px;
}
#mb-plugin-wrapper .mb-filter-toggle::after,
#mb-plugin-wrapper .filter-toggle::after{
  content:'\25BC';
  font-size:0.9em;
  transition:transform 0.2s ease;
}
#mb-plugin-wrapper .mb-filter-toggle[aria-expanded="false"]::after,
#mb-plugin-wrapper .filter-toggle[aria-expanded="false"]::after{
  transform:rotate(-90deg);
}
#mb-plugin-wrapper .mb-filter-body,
#mb-plugin-wrapper .filter-body{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#mb-plugin-wrapper .mb-filter-section.collapsed .mb-filter-body,
#mb-plugin-wrapper .filter-section.collapsed .filter-body{ display:none; }

#mb-plugin-wrapper .mb-filter-title,
#mb-plugin-wrapper .filter-title{
  font-size:16px;
  font-weight:500;
  margin-bottom:15px;
  color:#243b4c;
}

#mb-plugin-wrapper .mb-filter-options,
#mb-plugin-wrapper .filter-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:ease-in;
  transition-duration:0.4ms;
  font-size:16px;
  font-weight:500;
  margin-bottom:15px;
  color:#243b4c;
}
#mb-plugin-wrapper .mb-filter-options select,
#mb-plugin-wrapper .mb-filter-options input,
#mb-plugin-wrapper .filter-options select,
#mb-plugin-wrapper .filter-options input{
  padding:8px;
  border-radius:4px;
  border:1px solid #E2E9ED;
  font-size:14px;
  margin-bottom:8px;
  background-color:#fff;
}

/* Multiselect */
#mb-plugin-wrapper .mb-filter-multiselect,
#mb-plugin-wrapper .filter-multiselect{ position:relative; }

#mb-plugin-wrapper .mb-filter-multiselect__toggle,
#mb-plugin-wrapper .filter-multiselect__toggle{
  width:100%;
  padding:8px 32px 8px 12px;
  border-radius:4px;
  border:1px solid #E2E9ED;
  background-color:#fff;
  font-size:14px;
  color:#243b4c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  text-align:left;
  gap:8px;
}
#mb-plugin-wrapper .mb-filter-multiselect__toggle::after,
#mb-plugin-wrapper .filter-multiselect__toggle::after{
  content:'\25BC';
  font-size:0.8rem;
  color:#243b4c;
  margin-left:auto;
  display:inline-block;
  transition:transform 0.2s ease;
}
#mb-plugin-wrapper .mb-filter-multiselect.is-open .mb-filter-multiselect__toggle::after,
#mb-plugin-wrapper .filter-multiselect.is-open .filter-multiselect__toggle::after{
  transform:rotate(-180deg);
}
#mb-plugin-wrapper .mb-filter-multiselect__toggle:focus-visible,
#mb-plugin-wrapper .filter-multiselect__toggle:focus-visible{
  outline:2px solid #243b4c;
  outline-offset:2px;
}

#mb-plugin-wrapper .mb-filter-multiselect__dropdown,
#mb-plugin-wrapper .filter-multiselect__dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  background-color:#fff;
  border:1px solid #d0dbe3;
  border-radius:6px;
  box-shadow:0 8px 16px rgba(0,0,0,0.08);
  max-height:220px;
  overflow-y:auto;
  padding:6px 0;
  
}
#mb-plugin-wrapper .mb-filter-multiselect.is-open .mb-filter-multiselect__dropdown,
#mb-plugin-wrapper .filter-multiselect.is-open .filter-multiselect__dropdown{ display:block; }

#mb-plugin-wrapper .mb-filter-multiselect__option,
#mb-plugin-wrapper .filter-multiselect__option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  font-size:14px;
  color:#243b4c;
  cursor:pointer;
}
#mb-plugin-wrapper .mb-filter-multiselect__option:hover,
#mb-plugin-wrapper .filter-multiselect__option:hover{ background-color:#f3f7f9; }
#mb-plugin-wrapper .mb-filter-multiselect__option input,
#mb-plugin-wrapper .filter-multiselect__option input{ cursor:pointer; }

#mb-plugin-wrapper .mb-filter-options button,
#mb-plugin-wrapper .filter-options button{
  padding:8px 12px;
  background-color:#87624e;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
  margin-bottom:8px;
  transition:background-color 0.2s;
  color:#e2e9ed;
  font-family:"Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

#mb-plugin-wrapper #produkt-search {
	background: white !important;
}

/* =========================----------
   PRODUCT LIST
   =========================== */
#mb-plugin-wrapper #mb-sidebar{
  padding:15px;
  display:grid;
  grid-template-columns:1fr;
  gap:15px;
  transition:opacity 0.3s;
  background-color:#E2E9ED;
}
#mb-plugin-wrapper .produkt-item{
  cursor:pointer;
  transition:transform 0.2s;
  border-radius:8px;
  padding:10px;
  outline:none;
}
/* #mb-plugin-wrapper .produkt-item:hover{ transform:scale(1.12); } */

#mb-plugin-wrapper .produkt-item.selected{ transform:scale(1.12); outline:none; }
#mb-plugin-wrapper .produkt-item.selected img{
  box-shadow:0 4px 15px rgba(153,111,88,0.4);
}
#mb-plugin-wrapper .produkt-item:focus{ outline:none; }
#mb-plugin-wrapper .produkt-item img{
  width:100%;
  aspect-ratio:1/1;
  display:block;
  object-fit:cover;
  border-radius:6px;
  margin-bottom:8px;
}

#mb-plugin-wrapper .produkt-item .produkt-image-container{
  position:relative;
}

#mb-plugin-wrapper .produkt-item .produkt-image-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  font-size:22px;
  background:none;
  border: none;
  color:white;
  cursor:pointer;
  transition: transform 0.15s ease;

  z-index:2;
}



#mb-plugin-wrapper .produkt-item .produkt-image-nav:hover{
  transform: translateY(-50%) scale(1.1);
}

#mb-plugin-wrapper .produkt-item .produkt-image-nav--prev{
  left:8px;
}

#mb-plugin-wrapper .produkt-item .produkt-image-nav--next{
  right:8px;
}

#mb-plugin-wrapper .produkt-item .produkt-image-nav[hidden]{
  display:none;
}

.produkt-item .produkt-surface-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: #996F58;
    color: #fff;
    padding: 1px 5px !important;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 0.02em;
    pointer-events: none;
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}

#mb-plugin-wrapper .mb-no-products-message{
  grid-column:1/-1;
  text-align:center;
  background-color:#fff;
  color:#243b4c;
  padding:20px;
  border-radius:8px;
  font-weight:600;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* =========================----------
   CONTROLS BAR
   =========================== */
#mb-plugin-wrapper #controls{
  margin-bottom:20px;
  padding:15px;
  background-color:#243b4c;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  display:flex;
  justify-content:center;
  width:100%;
  position:relative;
  min-height:40px;
  font-family:"Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

#mb-plugin-wrapper #gridSize {
	width: 75px;
	
}
#mb-plugin-wrapper #reset-grid{ aspect-ratio:1/1; }
#mb-plugin-wrapper .mb-button-icon{ font-size:16px; }
/* alias */
#mb-plugin-wrapper .button-icon{ font-size:16px; }

#mb-plugin-wrapper #controls label{
  color:#e2e9ed;
  font-weight:bold;
}
#mb-plugin-wrapper #controls select,
#mb-plugin-wrapper #controls button{
  margin:0;
  padding:8px 12px;
  border-radius:4px;
  border:1px solid #E2E9ED;
  font-family:"Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
#mb-plugin-wrapper #controls select{ background-color:#fff; }
#mb-plugin-wrapper #controls button{
  background-color:#85604c;
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background-color 0.2s;
}
#mb-plugin-wrapper #controls button:hover{ background-color:#1a2d3c; }

/* =========================----------
   FLOATING EXPORT BUTTON
   =========================== */
#mb-plugin-wrapper .floating-export-button{
  position:absolute;
  bottom:32px;
  right:-13px;
  min-width:150px;
  padding:14px 20px;
  height:auto;
  border-radius:10px;
  background-color:#996F58;
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(0,0,0,0.2);
  transition:transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  z-index:1000;
}
#mb-plugin-wrapper .floating-export-button:hover,
#mb-plugin-wrapper .floating-export-button:focus{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,0.25);
  background-color:#85604c;
  outline:none;
}
#mb-plugin-wrapper .floating-export-button:active{ transform:translateY(0); }

/* =========================----------
   EXPORT MODAL
   =========================== */
.export-modal{
  position:fixed;
  inset:0;
  background:rgba(14,27,36,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.export-modal.open{
  opacity:1;
  pointer-events:auto;
}
.export-modal__content {
  position: fixed; /* så den kan ligge over alt */
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  width: min(400px, 100%);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  font-family: "Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  z-index: 9999; /* sikrer at den altid er øverst */
}

.export-modal__content h2{
  margin-top:0;
  margin-bottom:20px;
  color:#243b4c;
  font-size:22px;
}
.export-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  background:transparent;
  border:none;
  font-size:28px;
  cursor:pointer;
  color:#7c8a96;
}
.export-modal__close:hover,
.export-modal__close:focus{
  color:#243b4c;
  outline:none;
}

/* Form in modal */
.export-modal .form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.export-modal .form-group label{
  font-weight:600;
  color:#243b4c;
}
.export-modal .form-group input{
  padding:10px 12px;
  border:1px solid #d3dde3;
  border-radius:6px;
  font-family: "Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size:14px;
  background-color:#fff !important;
}
.export-modal .form-group input:focus{
  border-color:#996F58;
  outline:none;
  box-shadow:0 0 0 3px rgba(153,111,88,0.2);
}
.export-modal .form-group input.input-error{
  border-color:#c0392b;
  box-shadow:0 0 0 3px rgba(192,57,43,0.15);
}
.export-modal .form-error{
  font-size:12px;
  color:#c0392b;
  min-height:16px;
  margin:0;
}
.export-modal__submit{
  width:100%;
  padding:12px 18px;
  border-radius:6px;
  border:none;
  background-color:#996F58;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:background-color 0.2s ease;
}
.export-modal__submit:hover,
.export-modal__submit:focus{
  background-color:#85604c;
  outline:none;
}

/* Body scroll lock. Skift JS til at toggle .mb-export-modal-open på <body> */
body.mb-export-modal-open{ overflow:hidden; }
/* alias hvis du allerede bruger export-modal-open */
body.export-modal-open{ overflow:hidden; }



/* =========================----------
   PUZZLE
   =========================== */
#mb-plugin-wrapper #puzzle_container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:1px;
  background-color:#243b4c;
  margin-top:20px;
  padding:3px;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  aspect-ratio:1/1;
  width:100%;
  height:100%;
}
#mb-plugin-wrapper .puzzle_block{
  background-color:#E2E9ED;
  border-radius:2px;
  min-height:70px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-size:cover;
  background-position:center;
  position:relative;
  aspect-ratio:1/1;
}
#mb-plugin-wrapper .puzzle_block.empty{
  background-image:none;
  -webkit-user-drag:none;
  user-drag:none;
}
/* Tooltip */
#mb-plugin-wrapper .puzzle_block .tooltip{
  position:absolute;
  bottom:5px; left:5px;
  background:rgba(35,60,77,0.85);
  color:#fff;
  padding:4px 8px;
  border-radius:4px;
  opacity:0;
  transition:opacity 0.3s;
  font-size:12px;
  pointer-events:none;
  font-family:"Arial",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
#mb-plugin-wrapper .puzzle_block:hover .tooltip,
#mb-plugin-wrapper .puzzle_block:active .tooltip{ opacity:1; }

/* Remove button */
#mb-plugin-wrapper .mb-remove-btn{  /* var .remove-btn */
  opacity:0;
  position:absolute;
  top:5px; right:5px;
  background-color:#996F58;
  border:none;
  border-radius:50%;
  width:25px; height:25px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  font-weight:bold;
  color:#fff;
}
/* alias */
#mb-plugin-wrapper .remove-btn{ opacity:0; position:absolute; top:5px; right:5px; background-color:#996F58; border:none; border-radius:50%; width:25px; height:25px; display:flex; justify-content:center; align-items:center; cursor:pointer; font-weight:bold; color:#fff; }

#mb-plugin-wrapper .puzzle_block:not(.empty):hover > .mb-remove-btn,
#mb-plugin-wrapper .puzzle_block:not(.empty):hover > .remove-btn{ opacity:1; }

/* =========================----------
   CONTENT WRAPPER
   =========================== */
#mb-plugin-wrapper .mb-content-wrapper{ width:80vw; height:95vh; }
/* alias */
#mb-plugin-wrapper .content-wrapper{ width:80vw; height:95vh; }

/* =========================----------
   Minimized state: hide internals
   =========================== */
#mb-plugin-wrapper .mb-sidebar-container.minimized .mb-sidebar-title,
#mb-plugin-wrapper .mb-sidebar-container.minimized .mb-filter-section,
#mb-plugin-wrapper .mb-sidebar-container.minimized #mb-sidebar,
#mb-plugin-wrapper .mb-sidebar-container.minimized .filter-section { /* alias */
  opacity:0;
  height:0;
  overflow:hidden;
}