:root { --hero:#C9184A; --bg:#f5f3f4; }
*{ box-sizing:border-box; }
html, body { height:100%; }
body{ font-family:'Montserrat',Arial,sans-serif; background:var(--bg); margin:0; color:#111; -webkit-text-size-adjust:100%; }
/* Topbar */
.topbar{ background:linear-gradient(135deg,#C9184A,#FF7F51); padding:14px 20px; color:#fff; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100;}
/* Layout */
.container{ max-width:1100px; margin:20px auto 36px; padding:0 16px; }
.card{ background:#fff; border-radius:14px; padding:18px 20px 22px; box-shadow:0 10px 30px rgba(0,0,0,.02); }
/* Steps */
.steps{ display:flex; gap:10px; margin-bottom:20px; }
.step{ flex:1; background:#fff; border-radius:10px; padding:10px 14px; display:flex; gap:10px; align-items:center; border:2px solid transparent; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; min-height:56px;}
.step.active{ border-color:var(--hero); box-shadow:0 6px 20px rgba(201,24,74,.1); }
.step-circle{ width:26px; height:26px; border-radius:50%; background:#eee; display:flex; align-items:center; justify-content:center; font-weight:700; }
.step.active .step-circle{ background:var(--hero); color:#fff; }
.disabledStep{ opacity:.5; pointer-events:none; }
/* Forms & buttons */
label{ display:block; font-weight:600; margin-top:11px; margin-bottom:6px;}
input[type=text], textarea, select{ width:100%; padding:12px 12px; border:1px solid #ddd; border-radius:8px; font:inherit; background:#fff;}
textarea{ min-height:96px;}
.btn{ background:var(--hero); color:#fff; border:none; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer; margin-top:14px; line-height:1; box-shadow:0 2px 0 rgba(0,0,0,.06);}
.btn:hover{ filter:brightness(1.03);}
.btn:active{ transform:translateY(1px);}
.btn.secondary{ background:#efefef; color:#333;}
/* Table */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;}
table{ width:100%; border-collapse:collapse; margin-top:16px; min-width:760px;}
th,td{ border:1px solid #eee; padding:10px; vertical-align:top; font-size:13px;}
th{ background:#fdf1f5; text-align:left;}
/* Tooltip */
.img-prompt{ position:relative; border-bottom:1px dotted #C9184A; cursor:pointer; display:inline-block;}
.img-tip{ position:absolute; left:0; top:120%; background:#111; color:#fff; padding:8px 10px; border-radius:8px; font-size:12px; max-width:260px; line-height:1.35; opacity:0; pointer-events:none; transform:translateY(4px); transition:all .15s ease-out; z-index:50; box-shadow:0 6px 18px rgba(0,0,0,.25); word-break:break-word;}
.img-prompt:hover .img-tip{ opacity:1; pointer-events:auto; transform:translateY(0);}
/* Loader */
#loaderOverlay{ position:fixed; inset:0; background:rgba(245,243,244,.9); display:none; align-items:center; justify-content:center; z-index:1000; flex-direction:column; padding:24px;}
.spinner{ width:48px; height:48px; border:4px solid rgba(201,24,74,.25); border-top-color:#C9184A; border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg);} }
/* Mobile */
@media (max-width:820px){
  body{ font-size:16px;}
  .container{ margin:16px auto 28px; padding:0 12px;}
  .steps{ flex-direction:column; gap:8px;}
  .step{ padding:12px 14px;}
  input[type=text], textarea, select{ padding:13px 14px; border-radius:12px;}
  .btn{ width:100%; padding:14px 16px; border-radius:12px;}
  .btn.secondary{ order:2;}
  .img-action{ width:100%;}
  .img-action .btn{ width:100%; margin-top:8px;}
  .img-action input[type=file]{ width:100%; margin-top:8px;}
  .img-tip{ left:auto; right:0; top:calc(100% + 6px); max-width:min(84vw,320px);}
  .table-wrap{ overflow:visible;}
  table{ border:0; min-width:0;}
  thead{ display:none;}
  tr{ display:block; background:#fff; border:1px solid #eee; border-radius:12px; margin-bottom:12px; box-shadow:0 4px 12px rgba(0,0,0,.03);}
  td{ display:grid; grid-template-columns:120px 1fr; gap:10px; border:0; border-bottom:1px solid #f3f3f3; padding:10px 12px;}
  td:last-child{ border-bottom:0;}
  td::before{ content:attr(data-label); font-weight:700; color:#444;}
  td a{ word-break:break-all;}
  .card{ padding:16px 14px 18px;}
}
@media (max-width:380px){ td{ grid-template-columns:100px 1fr; } }
.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem; /* ruimte tussen links */
}

/* Verwijder bullet en standaard marge */
.nav-inner ul,
.nav-inner li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links mooi uitlijnen */
.nav-inner a {
  text-decoration: none;
  color: #fff; /* Of jouw kleur */
  font-weight: 500;
  display: flex;
  align-items: center;
}

/* Hover als extra (optioneel) */
.nav-inner a:hover {
  opacity: .8;
  text-decoration: underline;
}
/* --- Basis topbar layout --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  color: #fff;
  background: linear-gradient(135deg,#C9184A,#FF7F51);
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand { margin: 0; font-size: 28px; }
.tagline { font-size: 12px; opacity: .9; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative; /* voor dropdown positionering op mobiel */
}

/* --- Desktop standaard: acties zichtbaar, hamburger verborgen --- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hamburger {
  display: none;              /* geen hamburger op desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  border: none;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hamburger:focus { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }

/* --- Mobiel: acties als dropdown, hamburger tonen --- */
@media (max-width: 720px) {
  .tagline { display: none; }

  .hamburger { display: flex; }     /* zichtbaar op mobiel */
  .nav-actions {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    color: #111;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 10px;
    display: grid;                  /* dropdown layout */
    gap: 8px;

    /* verborgen standaard */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
    min-width: 220px;
  }
  .nav-actions.open {
    max-height: 260px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-actions .nav-link {
    color: #111;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 10px;
    text-decoration: none;
  }
  .nav-actions .nav-link:hover { background: #efefef; }
}

/* --- Hamburger animatie naar X wanneer open --- */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}