/* Bjud in till middag eller fest (Christian 2026-10-26): fliken Bjud in på Mitt konto och gästernas sida /inbjudan/<länk>. */
.inb { --inb-svart: #1a1a1a; --inb-gra: #f4f4f4; --inb-linje: #e4e4e4; --inb-mork: #555; --inb-gron: #1f7a3f; --inb-gul: #fff4d6; font-size: 16px; color: var(--inb-svart); }
.inb *, .inb *::before, .inb *::after { box-sizing: border-box; }
.inb p { margin: 0; line-height: 1.55; }
.inb h2, .inb h3, .inb h4 { margin: 0; line-height: 1.2; text-wrap: balance; }

/* Knappar och fält, som på Mitt konto */
.inb-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; font: inherit; font-size: 16px; font-weight: 600; color: #fff !important; background: var(--inb-svart); border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background .15s; }
.inb-knapp:hover { background: #333; }
.inb-knapp:disabled { opacity: .5; cursor: default; }
.inb-knapp--vit { color: var(--inb-svart) !important; background: #fff; border: 1.5px solid var(--inb-svart); }
.inb-knapp--vit:hover { background: var(--inb-svart); color: #fff !important; }
.inb-knapp--liten { height: 40px; padding: 0 16px; font-size: 14px; }
.inb-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.inb-textknapp { padding: 0; font: inherit; font-size: 15px; color: var(--inb-svart); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inb-textknapp--rod { color: #b3261e; }
.inb-falt { display: grid; gap: 6px; min-width: 0; }
.inb-falt > span { font-size: 13px; color: var(--inb-mork); font-weight: 500; }
.inb-falt input, .inb-falt textarea, .inb-falt select { margin: 0; width: 100%; min-height: 52px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--inb-svart); background: #fff; border: 1px solid #dcdcdc; border-radius: 12px; }
.inb-falt textarea { min-height: 104px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.inb-falt input:focus, .inb-falt textarea:focus, .inb-falt select:focus { outline: 2px solid var(--inb-svart); outline-offset: -1px; }
.inb-falt small { color: #777; font-size: 13px; }
.inb-rutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.inb-rutnat .hel { grid-column: 1 / -1; }
.inb-rutnat .halv { grid-column: span 1; }
@media (max-width: 640px) { .inb-rutnat { grid-template-columns: 1fr 1fr; } .inb-rutnat .mobil-hel { grid-column: 1 / -1; } }
.inb-fel { color: #c0392b; font-weight: 600; font-size: 15px; }
.inb-ok { color: var(--inb-gron); font-weight: 600; font-size: 15px; }
.inb-liten { color: #666; font-size: 14px; }

/* Val med runda knappar: Middag eller Fest, Kommer eller Kommer inte */
.inb-val { display: flex; flex-wrap: wrap; gap: 8px; }
.inb-val button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; font: inherit; font-size: 16px; font-weight: 600; color: var(--inb-svart); background: #fff; border: 1.5px solid #d0d0d0; border-radius: 999px; cursor: pointer; }
.inb-val button[aria-pressed="true"] { background: var(--inb-svart); border-color: var(--inb-svart); color: #fff; }
.inb-val--stor button { flex: 1 1 0; justify-content: center; min-height: 60px; padding: 0 12px; font-size: 17px; line-height: 1.2; border-radius: 16px; }

/* Varor att bjuda på */
.inb-sok { position: relative; }
.inb-traffar { display: grid; gap: 6px; margin-top: 8px; }
.inb-vara { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px 8px 8px; background: #fff; border: 1px solid var(--inb-linje); border-radius: 14px; }
.inb-vara img, .inb-vara .inb-varubild { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #ececec; }
.inb-vara b { flex: 1; min-width: 0; font-weight: 500; line-height: 1.3; }
.inb-vara button { flex: none; }
.inb-valda { display: flex; flex-wrap: wrap; gap: 8px; }
.inb-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 4px; background: #fff; border: 1px solid var(--inb-linje); border-radius: 999px; font-size: 14px; font-weight: 500; }
.inb-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #ececec; }
.inb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inb-chip button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; font-size: 18px; line-height: 1; color: var(--inb-svart); background: var(--inb-gra); border: 0; border-radius: 50%; cursor: pointer; }
.inb-meny-val { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.inb-meny-val label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--inb-linje); border-radius: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; }
.inb-meny-val input { width: 20px; height: 20px; accent-color: var(--inb-svart); flex: none; }

/* Värdens lista med inbjudningar */
.inb-intro { position: relative; overflow: hidden; display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); border-radius: 20px; color: #fff; background: #1a1a1a; }
.inb-intro > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.inb-intro::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .25) 100%); }
.inb-intro > *:not(img) { position: relative; z-index: 2; }
.inb-intro h3 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
.inb-intro p { max-width: 56ch; color: #f0f0f0; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.inb-intro .inb-knapp { justify-self: start; color: var(--inb-svart) !important; background: #fff; }
.inb-intro .inb-knapp:hover { background: #e9e9e9; }
@media (max-width: 640px) { .inb-intro::before { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .85) 100%); } }
.inb-lista { display: grid; gap: 14px; }
.inb-rad { display: grid; gap: 14px; padding: 20px; background: #fff; border-radius: 18px; min-width: 0; }
.inb-rad-topp { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.inb-typ { display: inline-block; padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--inb-svart); border-radius: 999px; }
.inb-rad h4 { margin-top: 8px; font-size: 20px; font-weight: 600; }
.inb-nar { color: var(--inb-mork); margin-top: 4px; }
.inb-siffror { display: flex; flex-wrap: wrap; gap: 8px; }
.inb-siffra { display: grid; gap: 2px; min-width: 120px; padding: 12px 16px; background: var(--inb-gra); border-radius: 14px; }
.inb-siffra b { font-size: 26px; font-weight: 700; line-height: 1; }
.inb-siffra span { font-size: 14px; color: var(--inb-mork); }
.inb-siffra--gron b { color: var(--inb-gron); }
.inb-allergi { display: grid; gap: 6px; padding: 14px 16px; background: var(--inb-gul); border-radius: 14px; }
.inb-allergi b { font-size: 15px; }
.inb-allergi ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.inb-svar { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--inb-linje); }
.inb-svar li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--inb-linje); }
.inb-svar .inb-svar-text { grid-column: 1 / -1; color: var(--inb-mork); font-size: 14px; }
.inb-svar .ja { color: var(--inb-gron); font-weight: 600; }
.inb-svar .nej { color: #8a8a8a; font-weight: 600; }
.inb-lank { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; background: var(--inb-gra); border-radius: 12px; font-size: 14px; }
.inb-lank code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
.inb-form { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: 18px; }
.inb-form h4 { font-size: 20px; font-weight: 600; }
.inb-del { display: grid; gap: 10px; }
.inb-del > b { font-size: 16px; font-weight: 600; }

/* Gästernas sida */
.inb-sida { max-width: 880px; margin: 24px auto 72px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 18px; }
.inb-kort { position: relative; overflow: hidden; display: grid; align-content: end; gap: 10px; min-height: 420px; padding: clamp(24px, 5vw, 48px); border-radius: 24px; color: #fff; background: #1a1a1a; }
.inb-kort > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.inb-kort::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .88) 100%); }
.inb-kort > *:not(img) { position: relative; z-index: 2; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.inb-overrubrik { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #e9e9e9; }
.inb-kort h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); font-weight: 700; line-height: 1.02; color: #fff; text-wrap: balance; }
.inb-kort .inb-vem { font-size: 18px; color: #f2f2f2; }
.inb-fakta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.inb-fakta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 15px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: none; }
.inb-fakta svg { flex: none; }
.inb-ruta { display: grid; gap: 14px; padding: clamp(20px, 3.4vw, 32px); background: var(--inb-gra); border-radius: 20px; min-width: 0; }
.inb-ruta h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; }
.inb-halsning { font-size: 18px; line-height: 1.6; white-space: pre-line; }
.inb-halsning-fran { font-weight: 600; }
.inb-varor { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.inb-varukort { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: #fff; border-radius: 16px; color: var(--inb-svart); text-decoration: none; }
.inb-varukort img, .inb-varukort .inb-varubild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ececec; display: block; }
.inb-varukort div { display: grid; gap: 4px; align-content: start; padding: 12px 14px 14px; }
.inb-varukort b { font-weight: 600; line-height: 1.3; }
.inb-varukort span { font-size: 14px; color: var(--inb-mork); text-decoration: underline; text-underline-offset: 3px; }
.inb-tack { display: grid; gap: 8px; padding: 18px 20px; background: #e8f4ec; border-radius: 16px; }
.inb-tack b { font-size: 18px; color: var(--inb-gron); }
.inb-banner { padding: 12px 16px; font-weight: 600; background: var(--inb-gul); border-radius: 14px; }
.inb-stjarnor { display: flex; gap: 4px; }
.inb-stjarnor button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-size: 30px; line-height: 1; color: #cfcfcf; background: none; border: 0; cursor: pointer; }
.inb-stjarnor button[aria-pressed="true"] { color: #1f8a46; }
.inb-omdome { display: grid; gap: 12px; padding: 16px; background: #fff; border-radius: 16px; }
.inb-omdome-topp { display: flex; align-items: center; gap: 12px; }
.inb-omdome-topp img, .inb-omdome-topp .inb-varubild { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #ececec; flex: none; }
.inb-borta { display: grid; justify-items: center; gap: 14px; padding: 48px 20px; text-align: center; background: var(--inb-gra); border-radius: 20px; }
.inb-borta p { max-width: 46ch; color: var(--inb-mork); }
@media (max-width: 640px) { .inb-kort { min-height: 480px; border-radius: 20px; } .inb-varor { grid-template-columns: 1fr 1fr; gap: 10px; } .inb-varukort div { padding: 10px 12px 12px; } }
/* Gästens sida: rätterna, varorna och allergenerna, inte receptet */
.inb-menyn { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inb-menyn li { padding: 14px 18px; font-size: 18px; font-weight: 600; line-height: 1.3; background: #fff; border-radius: 14px; }
.inb-allergener { display: grid; gap: 10px; padding: 16px 18px; background: #fff; border-radius: 16px; }
.inb-allergener h3 { margin: 0; font-size: 17px; font-weight: 600; }
.inb-allergener ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.inb-allergener li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--inb-linje); }
.inb-allergener li:last-child { border-bottom: 0; }
.inb-allergener li b { font-weight: 500; }
.inb-allergener li span { font-size: 14px; color: var(--inb-mork); }
.inb-allergener li span.ja { font-weight: 600; color: #a33a00; }
/* Värdens formulär: recepten att välja */
.inb-ratter { display: grid; gap: 10px; }
.inb-rattval { display: grid; gap: 8px; justify-items: start; padding: 14px; background: #fff; border: 1px solid var(--inb-linje); border-radius: 14px; }
.inb-rattval-namn { font-size: 15px; font-weight: 600; }
.inb-rattval > input { margin: 0; width: 100%; min-height: 52px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--inb-svart); background: #fff; border: 1px solid #dcdcdc; border-radius: 12px; }
.inb-rattval > input:focus { outline: 2px solid var(--inb-svart); outline-offset: -1px; }
.inb-rattval .inb-receptval { display: grid; gap: 6px; width: 100%; }
.inb-rattval .inb-receptval[hidden] { display: none; }
.inb-forslag { display: grid; gap: 6px; width: 100%; }
.inb-forslag-knapp { width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 15px; text-align: left; color: var(--inb-svart); background: var(--inb-gra); border: 1px solid transparent; border-radius: 12px; cursor: pointer; }
.inb-forslag-knapp:hover { border-color: var(--inb-svart); }
.inb-forslag-knapp.vald { color: #fff; background: var(--inb-svart); }
.inb-bjuder { margin: 0; padding: 12px 14px; font-size: 15px; background: #e8f4ec; border-radius: 12px; }
.inb-receptrad > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.inb-receptrad > div span { font-size: 13px; color: var(--inb-mork); line-height: 1.35; }
.inb-receptrad { padding: 12px 12px 12px 16px; }
/* Tidigare inbjudningar */
.inb-tidigare { display: grid; gap: 12px; margin-top: 12px; }
.inb-tidigare h3 { margin: 0; font-size: 20px; }
.inb-rad--tidigare { gap: 10px; background: var(--inb-gra); }
.inb-rad--tidigare h4 { margin: 0; }
.inb-tidigare-meny { margin: 0; }
.inb-kom { display: grid; gap: 6px; padding: 12px 16px; background: #fff; border-radius: 14px; }
.inb-kom ul { display: grid; gap: 2px; margin: 0; padding-left: 18px; }
/* Inköpslistan hos värden */
.inb-inkop { display: grid; gap: 12px; padding: 14px 16px; background: var(--inb-gra); border-radius: 16px; }
.inb-inkop > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; cursor: pointer; list-style: none; }
.inb-inkop > summary::-webkit-details-marker { display: none; }
.inb-inkop > summary b { font-size: 17px; }
.inb-inkop > summary b::after { content: " ▾"; font-weight: 400; }
.inb-inkop[open] > summary b::after { content: " ▴"; }
.inb-inkop > summary span { font-size: 14px; color: var(--inb-mork); }
.inb-inkop[open] { gap: 14px; }
.inb-inkop h5 { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.inb-inkop-antal { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.inb-inkop-antal > b { min-width: 2ch; font-size: 20px; text-align: center; }
.inb-inkop-antal > span { white-space: nowrap; }
.inb-inkop-antal .inb-knapp { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 20px; }
.inb-inkop-lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; background: #fff; border-radius: 14px; }
.inb-inkop-lista li { border-bottom: 1px solid var(--inb-linje); }
.inb-inkop-lista li:last-child { border-bottom: 0; }
.inb-inkop-lista li:has(> .inb-korg) { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.inb-inkop-lista li > .inb-bock { min-width: 0; }
.inb-korg { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #111; border: 0; border-radius: 999px; cursor: pointer; }
.inb-korg:hover { background: #333; }
.inb-korg-alla { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
@media (max-width: 480px) { .inb-korg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .inb-korg { width: 42px; height: 42px; justify-content: center; padding: 0; } }
.inb-bock { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.inb-bock-ring { display: grid; flex: none; place-items: center; width: 26px; height: 26px; font-size: 15px; font-weight: 700; color: #fff; border: 2px solid #b9b9b9; border-radius: 50%; }
.inb-bock-text { display: grid; gap: 2px; min-width: 0; }
.inb-bock-text b { font-weight: 500; line-height: 1.3; }
.inb-bock-text small { font-size: 13px; color: var(--inb-mork); line-height: 1.35; }
.inb-inkop-lista li.klar .inb-bock-ring { background: var(--inb-gron); border-color: var(--inb-gron); }
.inb-inkop-lista li.klar .inb-bock-text { opacity: .55; }
.inb-inkop-lista li.klar .inb-bock-text b { text-decoration: line-through; }
.inb-inkop-lista li.fraga { display: grid; gap: 10px; padding: 12px 14px; background: var(--inb-gul); }
.inb-inkop-lista li.fraga > span { font-weight: 600; }
.inb-inkop-summa { display: flex; justify-content: space-between; margin: 0; padding: 0 4px; }
.inb-sa { padding: 14px 18px; background: var(--inb-gra); border-radius: 16px; }
.inb-sa > summary { font-size: 17px; font-weight: 600; cursor: pointer; }
.inb-sa ol { display: grid; gap: 10px; margin: 14px 0 4px; padding-left: 22px; }
.inb-sa li { padding-left: 4px; line-height: 1.45; }
.inb-sa li b { font-weight: 600; }
.inb-rad--tidigare .inb-typ { justify-self: start; }
/* Långa receptnamn bryts i stället för att trycka ut formuläret */
.inb-form > *, .inb-del { min-width: 0; }
.inb-chip { padding: 4px 6px 4px 14px; border-radius: 20px; }
.inb-chip span { min-width: 0; white-space: normal; line-height: 1.3; }
.inb-chip button { flex: none; }

/* Vuxna och barn med − och + (Christian 2026-10-26), går också att skriva */
.inb-raknare { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.inb-raknare label { flex: 1; font-size: 16px; font-weight: 500; color: var(--inb-svart); }
.inb-raknare button { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; font: inherit; font-size: 22px; color: var(--inb-svart); background: #fff; border: 1px solid #111; border-radius: 50%; cursor: pointer; }
.inb-raknare button:disabled { opacity: .35; cursor: default; }
.inb-raknare input { width: 56px; height: 44px; padding: 0; font: inherit; font-size: 18px; font-weight: 600; text-align: center; background: #fff; border: 1px solid #d4d4d4; border-radius: 12px; -moz-appearance: textfield; }
.inb-raknare input::-webkit-outer-spin-button, .inb-raknare input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Mer liv på gästernas sida (Christian 2026-10-26: “behöver hela sidan mer liv”, “ser allmänt tråkigt ut”) */
.inb-sida { --inb-guld: #d9a441; --inb-papper: #fbf6ec; }
.inb-kort { min-height: 460px; }
.inb-kort::after { content: ""; position: absolute; left: clamp(24px, 5vw, 48px); right: clamp(24px, 5vw, 48px); bottom: 0; z-index: 2; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--inb-guld), #f3d58a, var(--inb-guld)); }
.inb-overrubrik { color: #f3d58a; }
.inb-nedrakning { position: absolute !important; top: clamp(16px, 3vw, 24px); right: clamp(16px, 3vw, 24px); padding: 8px 16px; font-size: 15px; font-weight: 700; color: #1a1a1a; background: var(--inb-guld); border-radius: 999px; text-shadow: none !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); animation: inb-puls 2.4s ease-in-out infinite; }
@keyframes inb-puls { 50% { transform: scale(1.05); } }

/* Värdens hälsning som ett brev */
.inb-brev { position: relative; padding: clamp(26px, 4vw, 40px) clamp(24px, 4vw, 44px); background: var(--inb-papper); border: 1px solid #efe3c8; box-shadow: 0 10px 30px rgba(110, 80, 20, .08); transform: rotate(-.6deg); }
.inb-brev::before { content: "\201C"; position: absolute; top: -6px; left: 16px; font: 700 96px/1 Georgia, "Times New Roman", serif; color: var(--inb-guld); opacity: .55; }
.inb-brev .inb-halsning { position: relative; font: italic 21px/1.6 Georgia, "Times New Roman", serif; color: #2b2418; }
.inb-brev .inb-halsning-fran { font: italic 600 19px Georgia, "Times New Roman", serif; color: #6b5328; justify-self: end; }

/* Menyn med bilder på rätterna */
.inb-menyruta { gap: 18px; background: #fff; border: 1px solid var(--inb-linje); }
.inb-menyrubrik { display: grid; gap: 4px; justify-items: center; text-align: center; }
.inb-menyrubrik span { display: inline-flex; align-items: center; gap: 12px; font: italic 600 15px Georgia, "Times New Roman", serif; letter-spacing: .2em; text-transform: uppercase; color: #a9781f; }
.inb-menyrubrik span::before, .inb-menyrubrik span::after { content: ""; width: 36px; height: 1px; background: var(--inb-guld); }
.inb-menyn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.inb-ratt { position: relative; overflow: hidden; min-width: 0; aspect-ratio: 4 / 3; max-height: 300px; width: 100%; border-radius: 18px; background: #1a1a1a; }
.inb-ratt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.inb-ratt:hover img { transform: scale(1.04); }
.inb-ratt-tom { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a3326 0%, #1c1b19 70%); }
.inb-ratt-tom svg { width: 64px; height: 44px; stroke: var(--inb-guld, #d9a441); opacity: .8; }
/* Rättens namn står mitt på bilden (Christian 2026-10-26), med en mjuk mörk ton bakom så att texten syns på alla bilder */
.inb-ratt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, .15) 100%); }
.inb-ratt div { position: absolute; inset: 0; z-index: 1; display: grid; gap: 6px; place-content: center; justify-items: center; padding: 18px 22px; text-align: center; color: #fff; }
.inb-ratt-typ { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f3d58a; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.inb-ratt b { max-width: 22ch; font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; line-height: 1.25; text-wrap: balance; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.inb-menyruta .inb-allergener { background: var(--inb-gra); }

/* Kommer du? */
#inb-svara { background: #fff; border: 1px solid var(--inb-linje); }
.inb-kommer-antal { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; font-weight: 600; color: var(--inb-gron); background: #e8f4ec; border-radius: 999px; }
.inb-kommer-antal::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--inb-gron); box-shadow: 0 0 0 4px rgba(31, 122, 63, .18); }
#inb-kommer button[data-kommer="ja"][aria-pressed="true"] { background: var(--inb-gron); border-color: var(--inb-gron); }
.inb-tack { position: relative; overflow: hidden; }
.inb-tack .inb-knappar { align-items: center; gap: 16px; margin-top: 4px; }
.inb-konfetti { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; pointer-events: none; animation: inb-konfetti 2.2s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes inb-konfetti { to { transform: translate(var(--x), 260px) rotate(var(--v)); opacity: 0; } }

/* Omdömena med större bilder */
.inb-omdome-topp img, .inb-omdome-topp .inb-varubild { width: 72px; height: 72px; }
.inb-omdome-topp b { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .inb-nedrakning { animation: none; } .inb-ratt img { transition: none; } }
@media (max-width: 640px) { .inb-brev { transform: none; } .inb-kort { min-height: 440px; padding-top: 72px; } }

/* Längst ner: bjud själv, och några varor från butiken */
.inb-tips { position: relative; overflow: hidden; display: grid; gap: 18px; padding: clamp(22px, 4vw, 36px); border-radius: 24px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2b2b2b 0%, #141414 60%); }
.inb-tips::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 164, 65, .35), rgba(217, 164, 65, 0) 70%); pointer-events: none; }
.inb-tips-topp { position: relative; display: grid; gap: 8px; max-width: 60ch; }
.inb-tips-over { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f3d58a; }
.inb-tips h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
.inb-tips p { color: #e6e6e6; }
.inb-tips p a { color: #f3d58a; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.inb-tips-varor { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .inb-tips-varor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inb-tips-vara { display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0; color: var(--inb-svart); background: #fff; border-radius: 16px; text-decoration: none; transition: transform .2s; }
.inb-tips-vara:hover { transform: translateY(-3px); }
.inb-tips-vara img, .inb-tips-vara .inb-varubild { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; background: #ececec; }
.inb-tips-vara div { display: grid; gap: 4px; align-content: start; padding: 10px 12px 12px; }
.inb-tips-vara b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.inb-tips-vara span { font-size: 14px; font-weight: 700; color: var(--inb-gron); }
.inb-tips-knapp { position: relative; justify-self: start; color: var(--inb-svart) !important; background: var(--inb-guld, #d9a441); }
.inb-tips-knapp:hover { background: #f3d58a; }