/**
 * Mitt Bryllupsunivers – Invitasjonsdesigner CSS (v1.1.0)
 * Oppdatert for ny kontrollpanel-modell og skjult scrollbar.
 */

:root{
  --mbu-ink:#2f2f2f;
  --mbu-muted:#6c655b;
  --mbu-bg:#faf8f4;
  --mbu-card:#ffffff;
  --mbu-border:#e7e1d6;
  --mbu-gold:#c6a667;
  --mbu-green:#4caf50;
}

.mbu-invitation{color:var(--mbu-ink);}
.mbu-card{background:var(--mbu-card); border:1px solid var(--mbu-border); border-radius:16px; padding:16px;}
.mbu-muted{color:var(--mbu-muted);}

.mbu-inv-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--mbu-card);
  border:1px solid var(--mbu-border);
  border-radius:14px; padding:12px 14px; margin:8px 0 16px 0;
  gap:12px; flex-wrap:wrap;
}
.mbu-inv-topbar h2{margin:0; font-size:20px;}
.mbu-right,.mbu-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.mbu-publish-wrap{display:flex; flex-direction:column; align-items:flex-start;}

.mbu-btn{
  border:none; background:var(--mbu-ink); color:#fff; padding:10px 14px;
  border-radius:12px; cursor:pointer; font-weight:600;
}
.mbu-btn:hover{filter:brightness(0.95);}
.mbu-btn.outline{background:#fff; color:var(--mbu-ink); border:1px solid var(--mbu-border);}
.mbu-btn.gold{background:var(--mbu-gold); color:#fff;}
.mbu-btn.subtle{background:#f7f7f5; color:var(--mbu-ink); border:1px solid var(--mbu-border);}

.mbu-upload input[type=file]{display:none;}
.mbu-upload{
  border:1px dashed var(--mbu-border); color:var(--mbu-muted); background:#fff;
  padding:9px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}

.mbu-page-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.mbu-tab{
  background:#fff; border:1px solid var(--mbu-border); padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.mbu-tab.active{background:#f0efe9; border-color:var(--mbu-gold);}

.mbu-panel{
  background:#fff; border:1px solid var(--mbu-border); border-radius:12px; padding:12px; margin-bottom:12px;
  display:flex; flex-direction:column; gap:10px;
}
.mbu-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.mbu-field{display:flex; flex-direction:column; gap:6px; min-width:180px;}
.mbu-field input[type="text"], .mbu-field select{
  padding:9px 10px; border-radius:10px; border:1px solid var(--mbu-border); background:#fff;
}

.mbu-pages{display:block;}
.mbu-page{
  width:min(500px,100%); height:100vh; margin:0 auto 12px auto; position:relative;
  border:1px solid var(--mbu-border); background:#fff; overflow:hidden;
  scroll-snap-align:start;
}
.mbu-bg{position:absolute; inset:0;}
.mbu-text{
  background:transparent; color:#1f2937; padding:8px 10px; border-radius:8px;
  outline:none; border:1px dashed transparent;
}
.mbu-text:focus{border-color:var(--mbu-gold); background:#ffffffc0;}
.mbu-qr{display:flex; align-items:center; justify-content:center;}

.mbu-nextbtn{
  position:absolute; left:50%; transform:translateX(-50%); bottom:22px;
  padding:10px 16px; border-radius:999px; border:1px solid var(--mbu-border);
  background:#ffffffcc; backdrop-filter:saturate(160%) blur(2px); font-weight:600;
}

.mbu-switch{position:relative; display:inline-flex; align-items:center; gap:8px;}
.mbu-switch input{display:none;}
.mbu-slider{
  width:40px; height:22px; background:#d7d7d7; border-radius:999px; position:relative; transition:background .16s;
}
.mbu-slider::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:999px; transition:left .16s;
}
.mbu-switch input:checked + .mbu-slider{ background:var(--mbu-green); }
.mbu-switch input:checked + .mbu-slider::after{ left:20px; }
.mbu-switch-label{font-size:14px; color:var(--mbu-muted);}

.mbu-toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:10px 14px; border-radius:10px; opacity:0; transition:all .25s;
}
.mbu-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* Skjul scrollbar i editor-visningen også */
.mbu-pages{scrollbar-width:none;}
.mbu-pages::-webkit-scrollbar{width:0;height:0;}

@media (max-width:560px){
  .mbu-inv-topbar{gap:10px;}
}