/* Tillägg till originalets stilmall (app.css): toast, dialogruta och kodfält. */
.sp-toaster { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 2rem); width: 360px; }
.sp-toast { background: #fff; color: #0a0a0a; border: 1px solid hsl(var(--border)); border-radius: .5rem; padding: 1rem 1.25rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); animation: sp-in .2s ease-out; }
.sp-toast-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); }
@keyframes sp-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-toast { animation: none; } }

.sp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sp-dialog { max-height: 90vh; overflow-y: auto; }

.sp-otp { width: 15rem; height: 3.5rem; text-align: center; font-size: 1.75rem; letter-spacing: .6em; padding-left: .6em; border: 1px solid hsl(var(--input)); border-radius: .5rem; background: transparent; font-variant-numeric: tabular-nums; }
.sp-otp:focus { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); }

a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
.justify-end { justify-content: flex-end; }

/* Recept: underrubriker, ingredienslista och numrerade steg */
.sp-recipe { font-size: .875rem; line-height: 1.6; color: #57534e; }
.sp-recipe-part + .sp-recipe-part { margin-top: 1.25rem; }
.sp-recipe-sub { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1E622B; padding-bottom: .35rem; margin-bottom: .6rem; border-bottom: 1px solid #e7e5e4; }
.sp-recipe-list { list-style: none; padding: 0; margin: 0; }
.sp-recipe-list li { position: relative; padding-left: 1rem; margin-bottom: .3rem; }
.sp-recipe-list li::before { content: ""; position: absolute; left: .1rem; top: .6em; width: .35rem; height: .35rem; border-radius: 50%; background: #10b981; }
.sp-recipe-steps { list-style: none; padding: 0; margin: 0; }
.sp-recipe-steps li { display: flex; gap: .7rem; margin-bottom: .6rem; }
.sp-recipe-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #d1fae5; color: #047857; font-size: .75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: .05rem; }
.sp-add-sub { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; color: #047857; padding: .15rem .5rem; border-radius: 9999px; background: #ecfdf5; }
.sp-add-sub:hover { background: #d1fae5; }

/* Restaurangansökan: markera obligatoriskt avsnitt som saknar svar */
.sp-required-error > * { border-color: #f87171 !important; box-shadow: 0 0 0 2px #fecaca; }
#allergianpassning { scroll-margin-top: 5rem; }

/* Admin: sammanfattning av besöksstatistik */
.sp-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: .75rem; padding: .9rem 1rem; }
.sp-summary p { flex: 1 1 18rem; margin: 0; }