:root {
  --navy: #062e57;
  --navy-2: #0b477d;
  --blue: #1a659e;
  --ice: #eef7fb;
  --white: #fff;
  --gold: #c8a45a;
  --ink: #102235;
  --muted: #66788a;
  --danger: #9f2f2f;
  --success: #216e48;
  --shadow: 0 12px 32px rgba(6, 46, 87, .14);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12px 12px, rgba(26,101,158,.08) 1px, transparent 1px) 0 0/24px 24px,
    var(--ice);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.topbar {
  background: var(--navy);
  color: white;
  border-bottom: 4px solid var(--gold);
}
.topbar-inner {
  max-width: 1050px;
  margin: auto;
  padding: 20px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark {
  width: 54px; height:54px; border:2px solid white; border-radius:50%;
  display:grid; place-items:center; font-size:27px;
}
.brand h1 { margin:0; letter-spacing:.12em; font-size:clamp(24px,5vw,40px); }
.brand p { margin:2px 0 0; opacity:.82; font-size:14px; }
.container { max-width:1050px; margin:auto; padding:22px 16px 90px; }
.hero {
  background: white;
  border: 1px solid #c9dce9;
  border-top: 7px solid var(--navy);
  padding: 24px;
  box-shadow: var(--shadow);
  text-align:center;
  margin-bottom:22px;
}
.hero h2 { color:var(--navy); margin:0 0 8px; font-size:clamp(26px,5vw,44px); }
.hero .rule { display:flex; align-items:center; gap:12px; color:var(--gold); justify-content:center; }
.hero .rule:before,.hero .rule:after { content:""; height:1px; width:90px; background:var(--gold); }
.notice {
  background:#fff8e8; border:1px solid #ead39e; padding:12px 14px; border-radius:10px; margin:14px 0;
}
.name-box {
  display:grid; grid-template-columns:1fr auto; gap:10px; max-width:620px; margin:18px auto 0;
}
input, textarea, select {
  width:100%; border:1px solid #abc3d5; border-radius:8px; padding:11px 12px; background:white; color:var(--ink);
}
textarea { min-height:90px; resize:vertical; }
.btn {
  border:0; border-radius:8px; padding:11px 16px; background:var(--navy); color:white; font-weight:bold;
}
.btn.secondary { background:white; color:var(--navy); border:1px solid var(--navy); }
.btn.gold { background:var(--gold); color:#17212b; }
.btn.danger { background:var(--danger); }
.btn.success { background:var(--success); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.category { margin:30px 0; }
.category-title {
  color:var(--navy); text-transform:uppercase; letter-spacing:.12em; border-bottom:2px solid var(--gold);
  padding-bottom:8px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
}
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.menu-item {
  background:white; border:1px solid #c7d9e6; border-left:5px solid var(--navy);
  padding:16px; display:grid; grid-template-columns:1fr auto; gap:14px; box-shadow:0 5px 15px rgba(6,46,87,.08);
}
.menu-item h3 { margin:0 0 5px; color:var(--navy); }
.item-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.menu-badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 8px; font-family:Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:#e6eef5; color:var(--navy); border:1px solid #afc4d4; }
.menu-badge.bad { background:#fff0ed; color:#8b261f; border-color:#dcaaa3; }
.menu-badge.choice { background:#fff7d9; color:#6b4d06; border-color:#dcc277; }
.menu-item p { margin:4px 0; line-height:1.38; }
.joke { color:var(--muted); font-style:italic; }
.stock { font-size:13px; color:var(--success); font-weight:bold; }
.stock.out { color:var(--danger); }
.qty { display:flex; align-items:center; gap:8px; justify-content:flex-end; margin-top:10px; }
.qty button { width:34px; height:34px; border-radius:50%; border:1px solid var(--navy); background:white; color:var(--navy); font-weight:bold; }
.qty strong { min-width:20px; text-align:center; }
.price { font-weight:bold; white-space:nowrap; }
.cart {
  position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--navy); color:white;
  border-top:4px solid var(--gold); padding:12px 16px;
}
.cart-inner { max-width:1050px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.cart-summary { font-size:14px; opacity:.9; }
.modal {
  position:fixed; inset:0; z-index:40; background:rgba(0,22,43,.75); display:none; place-items:center; padding:16px;
}
.modal.open { display:grid; }
.modal-card { background:white; width:min(620px,100%); max-height:90vh; overflow:auto; padding:22px; border-top:7px solid var(--gold); }
.modal-card h2 { color:var(--navy); margin-top:0; }
.order-line { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #dae6ee; }
.toast { margin-top:12px; min-height:22px; font-weight:bold; }
.admin-shell { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 99px); }
.sidebar { background:#092f52; color:white; padding:20px 12px; }
.sidebar button { width:100%; text-align:left; background:transparent; border:0; color:white; padding:12px; border-radius:7px; margin:3px 0; }
.sidebar button.active,.sidebar button:hover { background:rgba(255,255,255,.13); }
.admin-main { padding:22px; min-width:0; }
.panel { background:white; border:1px solid #c7d9e6; padding:18px; margin-bottom:16px; box-shadow:var(--shadow); }
.panel h2 { color:var(--navy); margin-top:0; }
.hidden { display:none !important; }
.login-wrap { max-width:420px; margin:60px auto; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-grid .full { grid-column:1/-1; }
.order-card { border-left:6px solid var(--gold); background:white; padding:16px; margin:12px 0; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.order-card[data-status="preparing"] { border-left-color:var(--blue); }
.order-card[data-status="served"] { border-left-color:var(--success); opacity:.78; }
.order-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.badge { background:#e6f1f7; color:var(--navy); border-radius:999px; padding:4px 9px; font-size:12px; font-weight:bold; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.editor-row { display:grid; grid-template-columns:1fr 120px auto; gap:10px; align-items:center; border-bottom:1px solid #dbe6ed; padding:11px 0; }
.muted { color:var(--muted); }
.small { font-size:13px; }
@media (max-width:760px) {
  .menu-grid { grid-template-columns:1fr; }
  .name-box { grid-template-columns:1fr; }
  .admin-shell { grid-template-columns:1fr; }
  .sidebar { display:flex; overflow-x:auto; gap:4px; padding:8px; position:sticky; top:0; z-index:10; }
  .sidebar button { width:auto; white-space:nowrap; }
  .admin-main { padding:14px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .editor-row { grid-template-columns:1fr; }
  .topbar-inner { align-items:flex-start; }
}


/* Version 3: beställningsflöde, matillustrationer och lyckohjul */
.menu-item {
  grid-template-columns: 112px minmax(0,1fr) auto;
  align-items: center;
}
.dish-visual {
  width: 108px;
  min-height: 88px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#f9fcfe,#e5f2f8);
  border: 1px solid #bcd2df;
  border-radius: 14px;
}
.dish-visual svg { width: 100%; height: 82px; display:block; }
.item-copy { min-width:0; }
.item-buy { align-self:stretch; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.warning-step { text-align:center; padding:16px 0; }
.warning-symbol {
  margin:0 auto 14px; width:70px; height:70px; border-radius:50%;
  display:grid; place-items:center; background:#9f2f2f; color:white; font-size:42px; font-weight:bold;
}
.name-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:16px 0; }
.name-choice {
  border:1px solid #0b477d; background:white; color:#062e57; padding:12px 8px; border-radius:10px; font-weight:bold;
}
.name-choice:hover,.name-choice.selected { background:#062e57; color:white; }
.chosen-name { min-height:26px; color:#216e48; font-weight:bold; }
.waiting-icon { font-size:58px; text-align:center; }
.wheel-wrap { position:relative; width:min(320px,82vw); margin:18px auto; }
.wheel {
  width:100%; aspect-ratio:1; border-radius:50%; border:10px solid #062e57;
  background:conic-gradient(#dcecf5 0 60deg,#c8a45a 60deg 120deg,#fff 120deg 180deg,#8bb4cf 180deg 240deg,#f4e4bd 240deg 300deg,#b7d5e6 300deg 360deg);
  position:relative; transition:transform 4.1s cubic-bezier(.12,.65,.08,1);
  box-shadow:inset 0 0 0 5px white,0 10px 25px rgba(6,46,87,.25);
}
.wheel:after { content:"⚓"; position:absolute; inset:39%; display:grid; place-items:center; border-radius:50%; background:#062e57; color:white; font-size:30px; border:4px solid white; }
.wheel-pointer { position:absolute; z-index:3; top:-17px; left:50%; transform:translateX(-50%); color:#9f2f2f; font-size:34px; text-shadow:0 2px white; }
.wheel-label { position:absolute; left:50%; top:50%; transform-origin:0 0; font-family:Arial,sans-serif; font-size:11px; font-weight:900; color:#062e57; }
.w1{transform:rotate(28deg) translate(78px) rotate(-28deg)}
.w2{transform:rotate(88deg) translate(78px) rotate(-88deg)}
.w3{transform:rotate(148deg) translate(78px) rotate(-148deg)}
.w4{transform:rotate(208deg) translate(78px) rotate(-208deg)}
.w5{transform:rotate(268deg) translate(78px) rotate(-268deg)}
.w6{transform:rotate(328deg) translate(78px) rotate(-328deg)}
.wheel-play { display:block; margin:8px auto; min-width:150px; font-size:20px; }
.wheel-result { min-height:60px; text-align:center; font-size:18px; margin-top:14px; }
@media (max-width:760px) {
  .menu-item { grid-template-columns:88px minmax(0,1fr); }
  .dish-visual { width:84px; min-height:76px; }
  .dish-visual svg { height:70px; }
  .item-buy { grid-column:2; flex-direction:row; align-items:center; }
  .name-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* Version 4 – tryckt meny i blått och vitt */
body {
  background:
    linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(6,46,87,.035) 29px 30px),
    #f4f1e9;
}
.topbar {
  background:#fff;
  color:var(--navy);
  border-top:10px solid var(--navy);
  border-bottom:3px double var(--navy);
}
.topbar-inner {
  justify-content:center;
  text-align:center;
  padding:24px 18px 18px;
}
.menu-brand {
  justify-content:center;
}
.menu-brand .brand-mark {
  border-color:var(--navy);
  background:white;
}
.brand-kicker {
  letter-spacing:.45em;
  font-size:12px;
  margin-left:.45em;
}
.brand-subtitle {
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  margin-top:4px;
  color:var(--muted);
}
.hero {
  box-shadow:none;
  border:0;
  border-bottom:1px solid var(--gold);
  background:transparent;
  padding:26px 12px 22px;
  margin-bottom:18px;
}
.hero h2 {
  font-weight:normal;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero p {
  margin:6px 0;
}
.category {
  background:#fff;
  border:1px solid #b8cedb;
  border-top:5px solid var(--navy);
  padding:20px;
  position:relative;
}
.category-ornament {
  position:absolute;
  left:50%;
  top:-14px;
  transform:translateX(-50%);
  background:white;
  color:var(--gold);
  padding:0 10px;
  font-size:20px;
}
.category-title {
  justify-content:center;
  text-align:center;
  border-bottom:1px solid var(--gold);
  font-weight:normal;
  margin:0 0 18px;
}
.menu-grid {
  grid-template-columns:1fr 1fr;
  gap:0 24px;
}
.menu-item {
  box-shadow:none;
  border:0;
  border-bottom:1px dotted #9fb7c7;
  border-left:0;
  padding:15px 0;
  background:transparent;
  grid-template-columns:94px minmax(0,1fr) auto;
}
.menu-item:last-child {
  border-bottom:0;
}
.menu-item h3 {
  font-weight:normal;
  letter-spacing:.02em;
}
.dish-visual {
  width:88px;
  min-height:72px;
  border:0;
  border-radius:0;
  background:transparent;
}
.dish-visual svg {
  height:70px;
}
.item-title-line {
  align-items:flex-start;
}
.menu-badge {
  white-space:nowrap;
}
.price {
  font-size:15px;
}
.cart {
  background:white;
  color:var(--navy);
  border-top:4px double var(--navy);
  box-shadow:0 -8px 20px rgba(6,46,87,.12);
}
.cart-summary {
  color:var(--muted);
}
.modal-card {
  border:1px solid #adc4d3;
  border-top:8px solid var(--navy);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
@media (max-width:760px) {
  .menu-grid { grid-template-columns:1fr; }
  .category { padding:16px; }
  .menu-item { grid-template-columns:78px minmax(0,1fr); }
  .dish-visual { width:72px; }
  .item-buy { grid-column:2; }
}


/* Version 5 – större typografi, förbättrad mobilvy och nytt lyckohjul */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: 18px;
  line-height: 1.5;
}
.container {
  max-width: 1120px;
}
.hero p {
  font-size: 1.08rem;
}
.category-title {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}
.menu-item h3 {
  font-size: 1.22rem;
  line-height: 1.22;
}
.menu-item p {
  font-size: 1rem;
  line-height: 1.45;
}
.price {
  font-size: 1.05rem;
}
.qty strong {
  font-size: 1.05rem;
}
.qty button {
  width: 42px;
  height: 42px;
  font-size: 1.35rem;
  touch-action: manipulation;
}
.btn {
  min-height: 48px;
  font-size: 1rem;
  touch-action: manipulation;
}
.cart-inner {
  min-height: 62px;
}
.cart strong {
  font-size: 1.05rem;
}
.modal-card {
  width: min(720px, 100%);
  padding: 26px;
}
.modal-card h2 {
  font-size: clamp(1.7rem, 5vw, 2.2rem);
}
.modal-card label,
.modal-card textarea {
  font-size: 1rem;
}
.order-preview-item {
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid #d6e2ea;
}
.order-preview-icon {
  width:72px;
  height:62px;
  display:grid;
  place-items:center;
}
.order-preview-icon svg {
  width:72px;
  height:58px;
}
.order-preview-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.order-preview-copy strong {
  font-size:1.13rem;
  color:var(--navy);
}
.order-preview-copy span {
  color:var(--muted);
  font-size:.95rem;
}
.order-preview-price {
  font-size:1.08rem;
  white-space:nowrap;
}
.order-preview-total {
  display:flex;
  justify-content:space-between;
  font-size:1.25rem;
  padding:18px 0 12px;
  border-top:3px double var(--navy);
  margin-top:8px;
}
.wheel-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.eyebrow {
  margin:0 0 2px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.78rem;
  color:var(--muted);
}
.chance-badge {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#f4e4bd;
  color:#5b4313;
  border:1px solid #c8a45a;
  padding:6px 10px;
  font-size:.82rem;
  font-weight:bold;
  white-space:nowrap;
}
.wheel-prize-copy {
  font-size:1.1rem;
  background:#eef6fa;
  border-left:5px solid var(--gold);
  padding:12px 14px;
}
.wheel-wrap {
  width:min(390px, 88vw);
  margin:22px auto;
}
.wheel {
  border-width:12px;
  background:
    conic-gradient(
      #d5a936 0deg 60deg,
      #d9edf7 60deg 120deg,
      #9fc4da 120deg 180deg,
      #f8f8f5 180deg 240deg,
      #f2dfad 240deg 300deg,
      #78a9c8 300deg 360deg
    );
  transition:none;
}
.wheel.free-spin {
  animation: wheel-spin .85s linear infinite;
}
.wheel.stopping {
  transition: transform 4.2s cubic-bezier(.08,.72,.12,1);
}
@keyframes wheel-spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.wheel-pointer {
  top:-22px;
  width:0;
  height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:30px solid #a63232;
  filter:drop-shadow(0 2px 0 white);
}
.wheel-label {
  width:92px;
  margin-left:-46px;
  text-align:center;
  line-height:1.05;
  color:#052f58;
  text-shadow:0 1px rgba(255,255,255,.65);
}
.wheel-label b {
  display:block;
  font-family:Arial,sans-serif;
  font-size:12px;
  letter-spacing:.04em;
}
.wheel-label small {
  display:block;
  margin-top:3px;
  font-family:Arial,sans-serif;
  font-size:9px;
  font-weight:normal;
}
.w1{transform:rotate(30deg) translateY(-128px) rotate(-30deg)}
.w2{transform:rotate(90deg) translateY(-128px) rotate(-90deg)}
.w3{transform:rotate(150deg) translateY(-128px) rotate(-150deg)}
.w4{transform:rotate(210deg) translateY(-128px) rotate(-210deg)}
.w5{transform:rotate(270deg) translateY(-128px) rotate(-270deg)}
.w6{transform:rotate(330deg) translateY(-128px) rotate(-330deg)}
.wheel-controls {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.wheel-play,
.wheel-stop {
  min-width:160px;
  font-size:1.08rem;
}
.wheel-help {
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
}
.wheel-result {
  font-size:1.14rem;
  min-height:72px;
}
.centered {
  justify-content:center;
}
@media (max-width:760px) {
  body { font-size:17px; }
  .container { padding:14px 10px 96px; }
  .topbar-inner { padding:18px 12px 14px; }
  .brand h1 { font-size:2rem; }
  .hero { padding:20px 8px; }
  .category { padding:15px 12px; margin:22px 0; }
  .menu-item {
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    padding:17px 0;
  }
  .dish-visual { width:78px; min-height:70px; }
  .dish-visual svg { width:78px; height:68px; }
  .menu-item h3 { font-size:1.18rem; }
  .menu-item p { font-size:1rem; }
  .item-title-line { display:block; }
  .menu-badge { display:inline-flex; margin-top:5px; }
  .item-buy {
    grid-column:2;
    flex-direction:row;
    align-items:center;
    margin-top:6px;
  }
  .modal {
    align-items:end;
    padding:0;
  }
  .modal-card {
    width:100%;
    max-height:92dvh;
    border-radius:18px 18px 0 0;
    padding:20px 16px calc(22px + env(safe-area-inset-bottom));
  }
  .order-preview-item {
    grid-template-columns:64px minmax(0,1fr);
    gap:10px;
  }
  .order-preview-icon,
  .order-preview-icon svg {
    width:60px;
    height:54px;
  }
  .order-preview-price {
    grid-column:2;
    justify-self:end;
  }
  .name-choices {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .name-choice {
    min-height:50px;
    font-size:1rem;
  }
  .wheel-heading { display:block; }
  .chance-badge { margin-top:4px; }
  .wheel-wrap { width:min(330px,86vw); }
  .w1{transform:rotate(30deg) translateY(-108px) rotate(-30deg)}
  .w2{transform:rotate(90deg) translateY(-108px) rotate(-90deg)}
  .w3{transform:rotate(150deg) translateY(-108px) rotate(-150deg)}
  .w4{transform:rotate(210deg) translateY(-108px) rotate(-210deg)}
  .w5{transform:rotate(270deg) translateY(-108px) rotate(-270deg)}
  .w6{transform:rotate(330deg) translateY(-108px) rotate(-330deg)}
  .wheel-controls { flex-direction:column; }
  .wheel-play,.wheel-stop { width:100%; }
}
@media (max-width:390px) {
  .menu-item { grid-template-columns:68px minmax(0,1fr); }
  .dish-visual,.dish-visual svg { width:64px; }
  .modal-card { padding-left:13px; padding-right:13px; }
}


/* Version 6 – illustrationer och mobil meny inspirerad av den nya mockupen */
.topbar-inner {
  min-height:88px;
}
.menu-brand .brand-mark {
  width:48px;
  height:48px;
}
.brand h1 {
  letter-spacing:.18em;
}
.hero {
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.category {
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  border-left:0;
  border-right:0;
  border-bottom:0;
}
.menu-item {
  grid-template-columns:128px minmax(0,1fr) auto;
  min-height:150px;
}
.dish-visual {
  width:124px;
  min-height:108px;
}
.dish-visual svg {
  width:120px;
  height:100px;
  filter:drop-shadow(0 5px 4px rgba(6,46,87,.16));
}
.item-copy {
  align-self:center;
}
.item-buy {
  min-width:96px;
}
.cart .btn.gold {
  min-width:190px;
  font-size:1.08rem;
}
@media (max-width:760px) {
  body {
    background:#fff;
  }
  .topbar {
    position:sticky;
    top:0;
    z-index:30;
    border-top:4px solid var(--navy);
    box-shadow:0 2px 12px rgba(6,46,87,.08);
  }
  .topbar-inner {
    min-height:70px;
    padding:10px 14px;
  }
  .brand-kicker,
  .brand-subtitle {
    display:none;
  }
  .brand h1 {
    font-size:2rem;
  }
  .menu-brand .brand-mark {
    width:42px;
    height:42px;
    font-size:21px;
  }
  .hero {
    margin:0;
    padding:24px 14px 26px;
    border-bottom:0;
  }
  .hero h2 {
    font-size:1.75rem;
  }
  .hero .rule:before,
  .hero .rule:after {
    width:70px;
  }
  .category {
    margin:0;
    padding:12px 14px 6px;
    border-top:0;
  }
  .category + .category {
    margin-top:6px;
  }
  .category-title {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0 12px;
    margin:0;
    border-bottom:1px solid #b5c9d6;
    font-size:1.35rem;
  }
  .category-title:before,
  .category-title:after {
    content:"";
    flex:1;
    height:1px;
    background:var(--gold);
  }
  .category-title span {
    white-space:nowrap;
  }
  .category-ornament {
    display:none;
  }
  .menu-grid {
    display:block;
  }
  .menu-item {
    grid-template-columns:112px minmax(0,1fr);
    min-height:150px;
    padding:18px 0;
    gap:14px;
  }
  .dish-visual {
    width:108px;
    min-height:102px;
    align-self:center;
  }
  .dish-visual svg {
    width:106px;
    height:96px;
  }
  .item-copy {
    align-self:start;
  }
  .menu-item h3 {
    font-size:1.18rem;
    margin-bottom:7px;
  }
  .menu-item p {
    font-size:.98rem;
  }
  .item-buy {
    grid-column:2;
    min-width:0;
    margin-top:10px;
  }
  .price {
    font-weight:700;
  }
  .qty {
    gap:10px;
  }
  .qty button {
    width:44px;
    height:44px;
  }
  .cart {
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .cart-inner {
    min-height:58px;
  }
  .cart .btn.gold {
    min-width:145px;
  }
}
@media (max-width:430px) {
  .menu-item {
    grid-template-columns:96px minmax(0,1fr);
    gap:10px;
  }
  .dish-visual,
  .dish-visual svg {
    width:92px;
  }
  .dish-visual svg {
    height:88px;
  }
  .menu-item h3 {
    font-size:1.12rem;
  }
  .menu-item p {
    font-size:.94rem;
  }
  .cart .btn.gold {
    min-width:130px;
    padding-left:14px;
    padding-right:14px;
  }
}


/* Version 7 – korrigerade bilder, sparad order och exakt lyckohjul */
.portion-tag {
  font-size:.78em;
  font-weight:normal;
  color:var(--muted);
  white-space:nowrap;
}
.latest-order-btn {
  margin:16px auto 0;
}
.receipt-mark {
  width:68px;
  height:68px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--success);
  color:white;
  font-size:38px;
  font-weight:bold;
}
.receipt-intro {
  text-align:center;
}
.receipt-meta {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.receipt-meta > div {
  border:1px solid #bfd1dc;
  padding:10px;
  border-radius:10px;
  background:#f6fafc;
}
.receipt-meta span,
.receipt-meta strong {
  display:block;
}
.receipt-meta span {
  color:var(--muted);
  font-size:.82rem;
}
.receipt-line {
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #d8e4eb;
}
.receipt-icon,
.receipt-icon svg {
  width:60px;
  height:54px;
}
.receipt-line > div:nth-child(2) {
  display:flex;
  flex-direction:column;
}
.receipt-line > div:nth-child(2) span {
  color:var(--muted);
  font-size:.9rem;
}
.receipt-note {
  background:#fff8e8;
  border-left:4px solid var(--gold);
  padding:10px 12px;
}
.receipt-total {
  display:flex;
  justify-content:space-between;
  font-size:1.3rem;
  border-top:3px double var(--navy);
  padding-top:15px;
  margin-top:12px;
}

/* Jackpot är medvetet betydligt mindre än övriga fält. */
.wheel {
  background:conic-gradient(
    #d5a936 0deg 24deg,
    #d9edf7 24deg 91.2deg,
    #9fc4da 91.2deg 158.4deg,
    #f8f8f5 158.4deg 225.6deg,
    #f2dfad 225.6deg 292.8deg,
    #78a9c8 292.8deg 360deg
  ) !important;
  transition:none;
  will-change:transform;
}
.wheel.free-spin {
  animation:none !important;
}
.wheel-label {
  position:absolute;
  left:50%;
  top:50%;
  width:96px;
  margin-left:-48px;
  text-align:center;
  line-height:1.05;
  transform-origin:50% 50%;
}
.jackpot-label { transform:translate(-50%,-50%) rotate(12deg) translateY(-134px) rotate(-12deg); }
.loss1 { transform:translate(-50%,-50%) rotate(57.6deg) translateY(-126px) rotate(-57.6deg); }
.loss2 { transform:translate(-50%,-50%) rotate(124.8deg) translateY(-126px) rotate(-124.8deg); }
.loss3 { transform:translate(-50%,-50%) rotate(192deg) translateY(-126px) rotate(-192deg); }
.loss4 { transform:translate(-50%,-50%) rotate(259.2deg) translateY(-126px) rotate(-259.2deg); }
.loss5 { transform:translate(-50%,-50%) rotate(326.4deg) translateY(-126px) rotate(-326.4deg); }
.jackpot-label b {
  font-size:9px;
}
.jackpot-label small {
  font-size:7px;
}
@media (max-width:760px) {
  .receipt-meta {
    grid-template-columns:1fr;
  }
  .receipt-line {
    grid-template-columns:58px minmax(0,1fr);
  }
  .receipt-line > strong {
    grid-column:2;
    justify-self:end;
  }
  .jackpot-label { transform:translate(-50%,-50%) rotate(12deg) translateY(-112px) rotate(-12deg); }
  .loss1 { transform:translate(-50%,-50%) rotate(57.6deg) translateY(-105px) rotate(-57.6deg); }
  .loss2 { transform:translate(-50%,-50%) rotate(124.8deg) translateY(-105px) rotate(-124.8deg); }
  .loss3 { transform:translate(-50%,-50%) rotate(192deg) translateY(-105px) rotate(-192deg); }
  .loss4 { transform:translate(-50%,-50%) rotate(259.2deg) translateY(-105px) rotate(-259.2deg); }
  .loss5 { transform:translate(-50%,-50%) rotate(326.4deg) translateY(-105px) rotate(-326.4deg); }
}


/* Version 9 – version 7-meny med klassisk Frejas väntesida */
:root {
  --frejas-navy: #082e58;
  --frejas-gold: #cda957;
  --frejas-paper: #fffefa;
}

body {
  background: var(--frejas-paper);
}

.topbar {
  background: #fff;
  color: var(--frejas-navy);
  border-top: 5px solid var(--frejas-navy);
  border-bottom: 3px double var(--frejas-navy);
}

.brand h1,
.hero h2,
.category-title,
.modal-card h2,
.receipt-card h3 {
  color: var(--frejas-navy);
  letter-spacing: .08em;
}

.hero,
.category,
.modal-card {
  background: #fff;
}

.btn.gold {
  background: var(--frejas-gold);
  color: var(--frejas-navy);
}

.waiting-receipt {
  color: var(--frejas-navy);
}

.waiting-heading {
  text-align: center;
  padding: 4px 8px 18px;
}

.waiting-anchor {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  border: 2px solid var(--frejas-navy);
  border-radius: 50%;
  font-size: 24px;
}

.waiting-kicker {
  margin: 0;
  color: var(--frejas-gold);
  font-size: .78rem;
  letter-spacing: .35em;
  text-indent: .35em;
  font-weight: bold;
}

.waiting-heading h2 {
  margin: 6px 0;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: normal;
}

.waiting-heading p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}

.waiting-scene {
  margin: 0 -22px 22px;
  overflow: hidden;
  background: var(--frejas-navy);
  border-top: 3px solid var(--frejas-gold);
  border-bottom: 3px solid var(--frejas-gold);
}

.waiting-scene img {
  display: block;
  width: 100%;
  height: auto;
}

.waiting-scene figcaption {
  background: var(--frejas-navy);
  color: #fff;
  text-align: center;
  padding: 9px 12px;
  font-size: .92rem;
  letter-spacing: .04em;
}

.receipt-card {
  border: 1px solid #c9d8e2;
  border-radius: 12px;
  padding: 18px;
  background: #fff;
}

.receipt-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #d7e2e9;
}

.receipt-card-heading h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 1.25rem;
}

.receipt-card-heading span {
  color: var(--muted);
  font-size: .9rem;
}

.receipt-actions {
  margin-top: 18px;
}

@media (max-width: 760px) {
  .modal-card {
    max-height: 94dvh;
  }

  .waiting-scene {
    margin-left: -16px;
    margin-right: -16px;
  }

  .waiting-heading h2 {
    font-size: 1.75rem;
  }

  .waiting-heading p {
    font-size: 1rem;
  }

  .waiting-scene figcaption {
    font-size: .84rem;
  }

  .receipt-card {
    padding: 14px;
  }

  .receipt-card-heading {
    display: block;
  }

  .receipt-card-heading span {
    display: block;
    margin-top: 3px;
  }
}


/* Version 10 – akvarell, oljemålad vintagekänsla och nautiska kategoriomslag */
:root {
  --paint-paper: #fbf7eb;
  --paint-paper-deep: #f1e8d2;
  --paint-navy: #082e58;
  --paint-gold: #c8a052;
  --paint-ink: #1a2c3d;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--paint-ink);
  background:
    linear-gradient(rgba(251,247,235,.94), rgba(251,247,235,.94)),
    repeating-linear-gradient(17deg, transparent 0 33px, rgba(8,46,88,.025) 34px 35px),
    var(--paint-paper);
  position: relative;
}

/* Diskreta vattenstämplar: kompassros, ankare och rep. */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  opacity: .055;
  background-repeat: no-repeat;
  background-size: contain;
}

body::before {
  width: 520px;
  height: 520px;
  right: -140px;
  top: 18vh;
  background-image:
    radial-gradient(circle at center, transparent 0 28%, var(--paint-navy) 28.5% 29.5%, transparent 30%),
    conic-gradient(from 0deg,
      transparent 0 6deg, var(--paint-navy) 6deg 8deg, transparent 8deg 37deg,
      var(--paint-navy) 37deg 39deg, transparent 39deg 82deg,
      var(--paint-navy) 82deg 84deg, transparent 84deg 127deg,
      var(--paint-navy) 127deg 129deg, transparent 129deg 172deg,
      var(--paint-navy) 172deg 174deg, transparent 174deg 217deg,
      var(--paint-navy) 217deg 219deg, transparent 219deg 262deg,
      var(--paint-navy) 262deg 264deg, transparent 264deg 307deg,
      var(--paint-navy) 307deg 309deg, transparent 309deg 352deg,
      var(--paint-navy) 352deg 354deg, transparent 354deg);
  border: 5px solid var(--paint-navy);
  border-radius: 50%;
}

body::after {
  content: "⚓";
  left: 4vw;
  bottom: 8vh;
  width: 220px;
  height: 260px;
  display: grid;
  place-items: center;
  font-size: 190px;
  color: var(--paint-navy);
  transform: rotate(-12deg);
}

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background:
    repeating-radial-gradient(ellipse at 20% 40%, transparent 0 31px, var(--paint-navy) 32px 33px, transparent 34px 63px);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

.hero {
  background:
    linear-gradient(rgba(255,253,247,.90), rgba(255,253,247,.90)),
    radial-gradient(circle at 50% 100%, rgba(200,160,82,.2), transparent 42%);
  border: 1px solid rgba(8,46,88,.16);
  border-top: 5px solid var(--paint-navy);
  box-shadow: 0 12px 30px rgba(8,46,88,.08);
}

/* Kategori som illustrerad menyplansch. */
.category {
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(8,46,88,.22);
  border-top: 6px solid var(--paint-navy);
  box-shadow: 0 14px 34px rgba(8,46,88,.09);
  background: rgba(255,254,250,.92);
  padding: 0 22px 24px;
}

.category-backdrop {
  height: 112px;
  margin: 0 -22px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(200,160,82,.55);
  background-color: #f6f0df;
}

.category-backdrop::before,
.category-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Förrätt: ljust gammalt sjökort. */
.category-forratt .category-backdrop {
  background:
    linear-gradient(rgba(247,241,222,.82), rgba(247,241,222,.82)),
    repeating-linear-gradient(12deg, transparent 0 32px, rgba(39,103,134,.15) 33px 34px),
    repeating-linear-gradient(102deg, transparent 0 45px, rgba(39,103,134,.10) 46px 47px),
    #efe4c8;
}
.category-forratt .category-backdrop::before {
  background:
    radial-gradient(circle at 18% 45%, transparent 0 23px, rgba(8,46,88,.22) 24px 25px, transparent 26px),
    radial-gradient(circle at 78% 55%, transparent 0 35px, rgba(8,46,88,.16) 36px 37px, transparent 38px);
}
.category-forratt .category-backdrop::after {
  content: "N 59° 19'   E 18° 04'      FREJAS SJÖKORT";
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:14px;
  color:rgba(8,46,88,.48);
  font-size:.76rem;
  letter-spacing:.24em;
}

/* Varmrätt: gammalt teakdäck. */
.category-varmratt .category-backdrop {
  background:
    linear-gradient(rgba(46,32,20,.30), rgba(46,32,20,.30)),
    repeating-linear-gradient(90deg,
      #a87949 0 68px,
      #79502f 69px 72px,
      #b38759 73px 140px,
      #684126 141px 144px);
}
.category-varmratt .category-backdrop::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,.08) 22px 23px),
    radial-gradient(circle at 22% 44%, rgba(16,12,8,.22) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 70%, rgba(16,12,8,.20) 0 3px, transparent 4px);
}
.category-varmratt .category-backdrop::after {
  content:"";
  inset: 15px auto auto 50%;
  width: 80px;
  height: 80px;
  transform:translateX(-50%);
  border:3px solid rgba(247,226,177,.52);
  border-radius:50%;
  box-shadow: inset 0 0 0 8px rgba(8,46,88,.18);
}

/* Tillbehör: säckväv, örter och rep. */
.category-tillbehor .category-backdrop {
  background:
    linear-gradient(rgba(246,238,214,.83),rgba(246,238,214,.83)),
    repeating-linear-gradient(45deg, rgba(113,90,49,.18) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, rgba(113,90,49,.12) 0 1px, transparent 1px 8px),
    #decba4;
}
.category-tillbehor .category-backdrop::after {
  content:"⚓   ~~~~~~   ⚓   ~~~~~~   ⚓";
  display:grid;
  place-items:center;
  color:rgba(8,46,88,.38);
  font-size:1.4rem;
  letter-spacing:.22em;
}

/* Barnmat: lekfullt men marint. */
.category-barnmat .category-backdrop {
  background:
    linear-gradient(rgba(245,250,251,.84),rgba(245,250,251,.84)),
    radial-gradient(circle at 15% 50%, #d7ecf6 0 18px, transparent 19px),
    radial-gradient(circle at 85% 48%, #f3df9b 0 22px, transparent 23px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(8,46,88,.08) 19px 20px);
}
.category-barnmat .category-backdrop::after {
  content:"🛟   ⛵   🐟   ⚓";
  display:grid;
  place-items:center;
  opacity:.45;
  font-size:1.65rem;
  letter-spacing:.6em;
}

/* Dessert: botaniska citroner. */
.category-dessert .category-backdrop {
  background:
    linear-gradient(rgba(255,251,231,.86),rgba(255,251,231,.86)),
    radial-gradient(ellipse at 15% 55%, #e6c64e 0 17px, transparent 18px),
    radial-gradient(ellipse at 84% 45%, #e2bd3b 0 20px, transparent 21px),
    radial-gradient(ellipse at 48% 72%, #f0d86d 0 13px, transparent 14px),
    #fbf1c6;
}
.category-dessert .category-backdrop::before {
  background:
    linear-gradient(30deg, transparent 48%, rgba(69,120,61,.35) 49% 51%, transparent 52%) 12% 50% / 90px 60px no-repeat,
    linear-gradient(-35deg, transparent 48%, rgba(69,120,61,.30) 49% 51%, transparent 52%) 88% 45% / 105px 70px no-repeat;
}
.category-dessert .category-backdrop::after {
  content:"BOTANICA CITRUS · FREJAS DESSERTSALONG";
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:12px;
  color:rgba(79,83,39,.50);
  font-size:.72rem;
  letter-spacing:.19em;
}

/* Dryck: gammalt barskåp och mässing. */
.category-dryck .category-backdrop {
  background:
    linear-gradient(rgba(18,38,54,.66),rgba(18,38,54,.66)),
    repeating-linear-gradient(90deg, #69462b 0 54px, #422b1b 55px 58px),
    #2a1e17;
}
.category-dryck .category-backdrop::before {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(222,178,76,.68) 0 9px, transparent 10px),
    radial-gradient(ellipse at 50% 70%, rgba(222,178,76,.58) 0 9px, transparent 10px),
    radial-gradient(ellipse at 80% 70%, rgba(222,178,76,.68) 0 9px, transparent 10px);
}
.category-dryck .category-backdrop::after {
  content:"FREJAS BAR · KALLA DRYCKER · VARMA BESLUT";
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,239,194,.75);
  font-size:.78rem;
  letter-spacing:.18em;
}

.category-heading {
  width: min(520px, calc(100% - 28px));
  margin: -39px auto 22px;
  position: relative;
  z-index: 2;
  background: var(--paint-paper);
  border: 1px solid rgba(8,46,88,.28);
  border-top: 4px solid var(--paint-gold);
  box-shadow: 0 8px 20px rgba(8,46,88,.12);
  text-align: center;
  padding: 11px 18px 10px;
}

.category-symbol {
  display:block;
  font-size:1.25rem;
  margin-bottom:2px;
}

.category-heading h2 {
  margin:0;
  color:var(--paint-navy);
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.45rem;
}

.category-caption {
  display:block;
  color:#7b6846;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.66rem;
  margin-top:4px;
}

/* Menyillustrationerna får målad papperskänsla. */
.menu-item {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.89), rgba(255,255,255,.89)),
    repeating-linear-gradient(8deg, transparent 0 9px, rgba(116,82,43,.028) 10px 11px);
  border-bottom: 1px dotted rgba(8,46,88,.28);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.menu-item:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.96)),
    repeating-linear-gradient(8deg, transparent 0 9px, rgba(116,82,43,.035) 10px 11px);
  box-shadow: 0 10px 22px rgba(8,46,88,.08);
}

.dish-visual {
  border: 1px solid rgba(8,46,88,.12);
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.98), rgba(242,230,202,.76));
  border-radius: 50% 46% 48% 44%;
  transform: rotate(-1.5deg);
}

.dish-visual svg {
  filter: saturate(.88) contrast(.96);
  transition: transform .22s ease;
}

.menu-item:hover .dish-visual svg {
  transform: scale(1.045) rotate(1deg);
}

.painted-svg path,
.painted-svg ellipse,
.painted-svg circle,
.painted-svg rect {
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Liten penseldragen linje under rättnamn. */
.menu-item h3::after {
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin-top:7px;
  opacity:.55;
  background:
    linear-gradient(90deg, transparent, var(--paint-gold) 10% 88%, transparent);
  transform:rotate(-1deg);
}

@media (max-width:760px) {
  body::before {
    width: 300px;
    height: 300px;
    right: -120px;
  }

  body::after {
    font-size: 115px;
    width: 140px;
    height: 170px;
  }

  .category {
    padding-left: 13px;
    padding-right: 13px;
  }

  .category-backdrop {
    height: 92px;
    margin-left: -13px;
    margin-right: -13px;
  }

  .category-heading {
    margin-top: -33px;
    padding: 9px 12px;
  }

  .category-heading h2 {
    font-size: 1.22rem;
  }

  .category-caption {
    font-size: .59rem;
  }

  .category-dessert .category-backdrop::after,
  .category-dryck .category-backdrop::after,
  .category-forratt .category-backdrop::after {
    font-size: .56rem;
    letter-spacing: .10em;
  }

  .menu-item:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item,
  .dish-visual svg {
    transition: none;
  }
}


/* Version 11 – fullbredda kategorier på mobil */
@media (max-width: 760px) {
  .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .hero {
    margin-left: 12px;
    margin-right: 12px;
  }

  #menu {
    width: 100%;
  }

  .category {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  .category-backdrop {
    width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
  }

  .category-heading {
    width: calc(100% - 28px);
    max-width: none;
  }

  .menu-grid {
    width: 100%;
  }

  .menu-item {
    width: 100%;
  }
}


/* Version 12 – professionella matbilder utan personer i menyn */
.menu-item {
  grid-template-columns: 155px minmax(0,1fr) auto;
  align-items: center;
}

.dish-image-shell {
  width: 146px;
  height: 116px;
  overflow: hidden;
  border: 1px solid rgba(8,46,88,.18);
  border-radius: 18px 15px 19px 14px;
  background: #172737;
  box-shadow:
    0 8px 18px rgba(8,46,88,.16),
    inset 0 0 0 4px rgba(255,255,255,.38);
  transform: rotate(-.6deg);
}

.dish-menu-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.03);
  transition: transform .25s ease, filter .25s ease;
}

.menu-item:hover .dish-menu-image {
  transform: scale(1.04);
  filter: saturate(.98) contrast(1.05);
}

.order-preview-icon img,
.receipt-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width:760px) {
  .menu-item {
    grid-template-columns: 126px minmax(0,1fr);
    gap: 14px;
  }

  .dish-image-shell {
    width: 120px;
    height: 106px;
    align-self: start;
    margin-top: 3px;
  }

  .item-buy {
    grid-column: 2;
  }

  .menu-item:hover .dish-menu-image {
    transform: none;
  }
}

@media (max-width:390px) {
  .menu-item {
    grid-template-columns: 104px minmax(0,1fr);
    gap: 10px;
  }

  .dish-image-shell {
    width: 99px;
    height: 92px;
  }
}


/* Version 13 – riktiga restaurangbilder ersätter tidigare clipartfiler */
.dish-image-shell {
  background: #121f2b;
}

.dish-menu-image {
  object-fit: cover;
  object-position: center;
}

@media (max-width:760px) {
  .dish-image-shell {
    width: 132px;
    height: 112px;
  }
}

@media (max-width:390px) {
  .dish-image-shell {
    width: 108px;
    height: 96px;
  }
}


/* Version 14 – komplett professionellt matbildsbibliotek */
.dish-image-shell {
  background: #101d29;
  border-color: rgba(200,160,82,.48);
}

.dish-menu-image {
  object-fit: cover;
  object-position: center;
  background: #101d29;
}

.menu-item:has(.menu-badge.bad) .dish-menu-image {
  filter: saturate(.72) brightness(.82);
}

.menu-item:has(.menu-badge.bad) .dish-image-shell {
  position: relative;
}

.menu-item:has(.menu-badge.bad) .dish-image-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 46%, rgba(137,42,42,.72) 47% 53%, transparent 54%);
  pointer-events: none;
}


/* Version 15 – rena restaurangbilder och exakt SVG-lyckohjul */
.wheel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

.wheel::after {
  content: none !important;
}

.wheel-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wheel-svg-label {
  font-family: Arial, Helvetica, sans-serif;
  fill: #082e58;
  pointer-events: none;
}

.wheel-svg-label text {
  dominant-baseline: middle;
}

.wheel-svg-label-jackpot {
  fill: #082e58;
}

.wheel-label,
.jackpot-label,
.loss1,
.loss2,
.loss3,
.loss4,
.loss5 {
  display: none !important;
}

.wheel-pointer {
  z-index: 6;
  top: -15px;
  border-left-width: 18px;
  border-right-width: 18px;
  border-top-width: 34px;
}

.dish-image-shell {
  background: #101d29;
  border: 1px solid rgba(200,160,82,.55);
  box-shadow: 0 8px 20px rgba(8,46,88,.17);
}

.dish-menu-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Endast spärrade rätter får en diskret mörk hinna. */
.menu-item:has(.menu-badge.bad) .dish-menu-image {
  filter: saturate(.68) brightness(.78);
}

@media (max-width:760px) {
  .wheel-wrap {
    width: min(356px, 91vw);
  }

  .wheel-pointer {
    top: -13px;
  }

  .dish-image-shell {
    width: 136px;
    height: 116px;
  }
}

@media (max-width:390px) {
  .dish-image-shell {
    width: 110px;
    height: 98px;
  }
}


/* Version 16 – redigerbar bildstorlek och visningsläge */
.image-layout-grid { margin-top:10px; }
.image-admin-preview { margin-top:10px; }
.admin-image-preview {
  width:240px; max-width:100%; min-height:110px; display:grid; place-items:center;
  overflow:hidden; border:1px dashed rgba(8,46,88,.35); border-radius:12px;
  background:#f5f1e5; color:#6e7781;
}
.admin-image-preview img { width:100%; height:100%; display:block; }
.admin-image-preview.size-small { width:160px; }
.admin-image-preview.size-medium { width:240px; }
.admin-image-preview.size-large { width:360px; }
.admin-image-preview.size-hero { width:100%; }
.admin-image-preview.ratio-landscape { aspect-ratio:4/3; }
.admin-image-preview.ratio-wide { aspect-ratio:16/9; }
.admin-image-preview.ratio-square { aspect-ratio:1/1; }
.admin-image-preview.ratio-portrait { aspect-ratio:3/4; }
.admin-image-preview.is-full-width { width:100%; }

.dish-image-shell.image-size-small { width:104px; height:auto; }
.dish-image-shell.image-size-medium { width:146px; height:auto; }
.dish-image-shell.image-size-large { width:210px; height:auto; }
.dish-image-shell.image-size-hero { width:100%; height:auto; }
.dish-image-shell.image-ratio-landscape { aspect-ratio:4/3; }
.dish-image-shell.image-ratio-wide { aspect-ratio:16/9; }
.dish-image-shell.image-ratio-square { aspect-ratio:1/1; }
.dish-image-shell.image-ratio-portrait { aspect-ratio:3/4; }
.menu-item:has(.dish-image-shell.image-full-width) { grid-template-columns:1fr; }
.dish-image-shell.image-full-width { width:100%; grid-column:1/-1; border-radius:16px; }
.menu-item:has(.dish-image-shell.image-full-width) .item-copy,
.menu-item:has(.dish-image-shell.image-full-width) .item-buy { grid-column:1/-1; }

@media (max-width:760px) {
  .dish-image-shell.image-size-small { width:96px; }
  .dish-image-shell.image-size-medium { width:132px; }
  .dish-image-shell.image-size-large { width:172px; }
  .dish-image-shell.image-size-hero { width:100%; }
  .menu-item:has(.dish-image-shell.image-size-large):not(:has(.image-full-width)) {
    grid-template-columns:172px minmax(0,1fr);
  }
}
@media (max-width:390px) {
  .dish-image-shell.image-size-small { width:86px; }
  .dish-image-shell.image-size-medium { width:110px; }
  .dish-image-shell.image-size-large { width:145px; }
}


/* Version 17 – menyvisning, stegvis beställning och mobil bilduppladdning */
.mobile-image-upload {
  padding: 14px;
  border: 1px solid rgba(8,46,88,.18);
  border-radius: 12px;
  background: #f9f6ed;
}
.mobile-image-upload input[type="file"] {
  display:block;
  width:100%;
  margin-top:7px;
}
.upload-progress {
  height:10px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#dde6eb;
}
.upload-progress-bar {
  height:100%;
  width:0;
  background:#c8a052;
  transition:width .18s ease;
}

.ordering-guide {
  max-width: 980px;
  margin: 0 auto 22px;
  padding: 18px 20px;
  border: 1px solid rgba(8,46,88,.22);
  border-top: 5px solid #082e58;
  background: #fffdf8;
  box-shadow: 0 9px 24px rgba(8,46,88,.08);
}
.ordering-guide-top {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:baseline;
  color:#082e58;
}
.ordering-guide-top span {
  font:700 .78rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#7a6847;
}
.ordering-guide-top strong {
  font:normal 1.55rem Georgia,serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ordering-progress {
  height:7px;
  margin:12px 0 10px;
  overflow:hidden;
  border-radius:999px;
  background:#e5e9e8;
}
.ordering-progress > div {
  height:100%;
  width:20%;
  background:linear-gradient(90deg,#082e58,#c8a052);
  transition:width .25s ease;
}
.ordering-guide p { margin:0; }

.menu-item.browse-only .item-buy {
  justify-content:center;
}
.browse-label {
  max-width:150px;
  color:#77818a;
  font-size:.82rem;
  text-align:right;
  font-style:italic;
}
.ordering-nav-buttons {
  display:flex;
  gap:8px;
  align-items:center;
}
.empty-step {
  max-width:900px;
  margin:20px auto;
  text-align:center;
}

@media (max-width:760px) {
  .ordering-guide {
    margin-left:12px;
    margin-right:12px;
    padding:15px;
  }
  .ordering-guide-top {
    display:block;
  }
  .ordering-guide-top strong {
    display:block;
    margin-top:4px;
    font-size:1.3rem;
  }
  .ordering-actions {
    align-items:flex-end;
    gap:10px;
  }
  .ordering-nav-buttons {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .ordering-nav-buttons .btn {
    min-height:44px;
    padding:8px 10px;
    font-size:.82rem;
  }
  #nextOrderingStep {
    grid-column:1/-1;
  }
  .browse-label {
    text-align:left;
    max-width:none;
  }
}


/* Version 18 – tydligt fel om en lokal bildsökväg inte kan laddas */
.dish-image-shell.image-load-error {
  position:relative;
  min-height:96px;
  background:
    linear-gradient(135deg,#f8eee8,#fffaf4);
  border:1px dashed #9b3939;
}
.dish-image-shell.image-load-error::after {
  content:"Bilden hittades inte";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:8px;
  color:#8b2f2f;
  font:700 .78rem Arial,sans-serif;
  text-align:center;
}


/* Version 19 – admin utan Firebase Storage */
.local-image-help {
  padding: 14px;
  border: 1px solid rgba(8,46,88,.18);
  border-radius: 12px;
  background: #f9f6ed;
}
#loginMessage {
  min-height: 24px;
  color: #922f2f;
  font-weight: 700;
}


/* Version 20 – robust admininloggning */
.login-help { margin-top:14px; color:#53616d; font-size:.9rem; }
.login-help summary { cursor:pointer; color:#082e58; font-weight:700; }
.error-box { padding:12px; border:1px solid #b44; border-radius:8px; background:#fff2f0; color:#7f2424; }


/* Version 21 – robusta adminflikar */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.admin-tab-panel[hidden] {
  display:none !important;
}

.sidebar button {
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.sidebar button[aria-selected="true"] {
  background:rgba(255,255,255,.17);
  box-shadow:inset 4px 0 #c8a052;
}

@media (max-width:760px) {
  .sidebar {
    top:var(--admin-topbar-height, 0px);
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }

  .sidebar button {
    flex:0 0 auto;
    min-height:46px;
    padding:11px 15px;
  }

  .sidebar button[aria-selected="true"] {
    box-shadow:inset 0 -3px #c8a052;
  }

  .admin-main {
    min-height:70vh;
  }
}

/* Version 22 – korrigerad flikvisning */
.admin-tab-panel[hidden] { display:none !important; }
#adminTabs button { touch-action:manipulation; }


/* Version 23 – flikpaneler styrs direkt av JavaScript */
.active-tab-status {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 4px solid #c8a052;
  background: #f8f4e9;
  color: #082e58;
  font-size: .9rem;
}

.admin-tab-panel {
  width: 100%;
}

.admin-tab-panel:not([data-active]) {
  display: none !important;
}

.admin-tab-panel[data-active] {
  display: block !important;
}


/* Version 24 – fristående flikstyrning, oberoende av Firebase-modulen */
.admin-tab-panel { display:none; }
#tab-orders { display:block; }


/* Version 31 – Cloudflare Pages */
.build-version {
  position: fixed;
  right: 7px;
  bottom: 4px;
  z-index: 9999;
  color: rgba(8,46,88,.35);
  font: 10px Arial,sans-serif;
  pointer-events: none;
}