/* Fräschare stil (2026-10-18). Läggs ovanpå sidornas egna stilar.
   Rundade hörn, lugnare rubriker, klistrad meny, frågor med plustecken och ringknapp på mobilen. */

:root { --orange: #F69454; --rost: #C2602A; --sand: #F3F1ED; --linje: #E6E3DD; --text2: #4A4640; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }

/* Menyn klistrar sig när man scrollar */
header.fast { position: fixed !important; top: 0; left: 0; right: 0; z-index: 50 !important; background: rgba(243,241,237,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(17,17,17,.08) !important; animation: ned .25s ease-out; }
header.fast > div { padding-top: 10px !important; padding-bottom: 10px !important; }
header.fast img { height: 40px !important; }
header.fast nav a { color: #111111 !important; }
header nav a:not([style*="background"]) { position: relative; }
header nav a:not([style*="background"])::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .2s; }
header nav a:hover::after { transform: scaleX(1); }
@keyframes ned { from { transform: translateY(-100%); } to { transform: none; } }

/* Knappar och kort */
a[style*="border-radius:999px"], button[style*="border-radius:999px"] { transition: transform .15s, background-color .15s, box-shadow .15s; }
a[style*="border-radius:999px"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(17,17,17,.12); }
.kort { transition: transform .2s, box-shadow .2s; }
.kort:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,17,17,.10); }
.kort img { transition: transform .5s; }
.kort:hover img { transform: scale(1.03); }
.pk img, .bk img { border-radius: 16px; }
.pk, .bk { border-radius: 16px; }
.pk:hover img, .bk:hover img { opacity: 1 !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17,17,17,.14); }
.pk img, .bk img { transition: transform .2s, box-shadow .2s !important; }
input:focus, select:focus, textarea:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(246,148,84,.18); outline: none; }

/* Frågor med plustecken */
.fragor { max-width: 860px; }
.fragor details { border-top: 1px solid rgba(17,17,17,.12); }
.fragor details:last-child { border-bottom: 1px solid rgba(17,17,17,.12); }
.fragor summary { cursor: pointer; list-style: none; font-size: 20px; font-weight: 600; padding: 22px 56px 22px 0; position: relative; line-height: 1.35; }
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--linje); display: grid; place-items: center; font-size: 22px; font-weight: 500; color: var(--rost); transition: transform .2s, background .2s; }
.fragor summary:hover::after { background: var(--orange); color: #111111; border-color: var(--orange); }
.fragor details[open] summary::after { transform: rotate(45deg); }
.fragor details p { margin: 0; padding: 0 56px 24px 0; color: var(--text2); }

/* Mjuk inglidning */
.in { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.in.syns { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .in { opacity: 1; transform: none; transition: none; } }

/* Ringknapp på mobilen */
.ringknapp { display: none; }
@media (max-width: 700px) {
  .ringknapp { font-family: "Onest", ui-sans-serif, system-ui, sans-serif; font-size: 17px; display: flex; position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; justify-content: center; align-items: center; gap: 10px; padding: 15px 20px; border-radius: 999px; background: var(--orange); color: #111111 !important; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(17,17,17,.25); }
  body { padding-bottom: 84px; }
  .fragor summary { font-size: 18px; }
  header.fast nav { display: none !important; }
}