/* 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; }

/* Toppmenyn visas som knapprad först från 1024 px (fler menyval) */
@media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } }

/* Utomlands */
.sp-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.sp-country { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .75rem; background: #fff; border: 1px solid #e7e5e4; border-radius: .75rem; transition: border-color .15s, box-shadow .15s; }
.sp-country:hover { border-color: hsl(var(--brand)); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sp-flag { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .35rem; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.sp-flag-lg { width: 4.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .35rem; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

/* Klasser som inte fanns i originalets stilmall */
.divide-y > * + * { border-top: 1px solid #f5f5f4; }
.h-36 { height: 9rem; }
.max-h-64 { max-height: 16rem; }
.pl-5 { padding-left: 1.25rem; }
.space-y-0\.5 > * + * { margin-top: .125rem; }
.text-stone-800 { color: #292524; }
.hover\:bg-red-100:hover { background-color: #fee2e2; }
@media (min-width: 640px) { .sm\:justify-between { justify-content: space-between; } .sm\:w-48 { width: 12rem; } }

/* 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; }