/* ============================================================
   Mobilabonnemangen.nu — "Varm prisguide"
   Display: Gabarito · Body: Instrument Sans
   Built on Bootstrap 5.3.8 (overrides only)
   ============================================================ */

/* ---- Fonts (self-hosted, variable) ---- */
@font-face{
  font-family:'Gabarito';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/mobilabonnemangen-nu/gabarito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Gabarito';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/mobilabonnemangen-nu/gabarito-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/mobilabonnemangen-nu/instrumentsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/mobilabonnemangen-nu/instrumentsans-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(/fonts/mobilabonnemangen-nu/instrumentsans-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Tokens ---- */
:root{
  --ink:#2A1726;          /* aubergine text */
  --ink-soft:#6E5A66;     /* muted text */
  --plum:#5B2150;         /* accent */
  --plum-deep:#3E1438;
  --orange:#F26B21;       /* primary CTA */
  --orange-deep:#D8551A;
  --paper:#FBEAE8;        /* warm-pink canvas */
  --cream:#FFF6F2;        /* soft surface */
  --card:#ffffff;
  --line:rgba(74,30,69,.14);
  --line-soft:rgba(74,30,69,.08);
  --gold:#E8A33D;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 10px 30px rgba(74,30,69,.08);
  --shadow-lg:0 18px 48px rgba(74,30,69,.14);
  --bs-primary:#F26B21;
}

*{ -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(120% 80% at 100% 0%, #FFF1EC 0%, var(--paper) 46%);
  background-attachment:fixed;
  font-size:1.04rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-font{
  font-family:'Gabarito',system-ui,sans-serif;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.018em;
  line-height:1.12;
}
h1,.h1{ font-weight:800; letter-spacing:-.03em; }
a{ color:var(--plum); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--orange-deep); }
.text-orange{ color:var(--orange)!important; }
.text-plum{ color:var(--plum)!important; }
.text-muted-warm{ color:var(--ink-soft)!important; }
strong,b{ font-weight:600; }

/* ---- Navbar ---- */
.navbar{
  background:rgba(251,234,232,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:.6rem; padding-bottom:.6rem;
}
.navbar-brand img{ height:46px; width:auto; }
.navbar .nav-link{
  font-weight:600; color:var(--ink); border-radius:999px;
  padding:.4rem .85rem!important; transition:color .15s, background .15s;
}
.navbar .nav-link:hover,.navbar .nav-link:focus{ color:var(--orange-deep); background:rgba(242,107,33,.08); }
.navbar .dropdown-menu{
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:.4rem; background:#fff;
}
.navbar .dropdown-item{ border-radius:var(--r-sm); font-weight:500; padding:.5rem .8rem; }
.navbar .dropdown-item:hover{ background:var(--cream); color:var(--orange-deep); }
.navbar-toggler{ border:1px solid var(--line); border-radius:12px; }
.navbar-toggler:focus{ box-shadow:none; }

/* ---- Hero ---- */
.hero{ padding:3.4rem 0 1.4rem; position:relative; }
.hero .kicker{
  font-family:'Gabarito',sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-deep);
}
.hero h1{ font-size:clamp(2.1rem,5vw,3.4rem); margin:.4rem 0 .9rem; }
.hero .lead{ font-size:1.18rem; color:var(--ink-soft); max-width:42ch; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:.5rem .35rem; margin-top:1.2rem; }
.hero-trust .pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.4rem .8rem; font-size:.9rem; font-weight:500; box-shadow:var(--shadow);
}
.hero-trust .pill i{ color:var(--orange); }

/* ---- Section frame ---- */
.section{ padding:2.6rem 0; }
.section-head{ margin-bottom:1.4rem; }
.section-head h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); }
.eyebrowless-rule{ width:54px; height:4px; border-radius:999px; background:var(--orange); margin-bottom:.9rem; }

/* ---- Deal cards ---- */
.deal-grid{ }
.bd-deal{ position:relative; height:100%; }
.bd-deal .card{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
  overflow:visible; height:100%;
}
.bd-deal:hover .card{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(242,107,33,.35); }
.bd-deal .card-header{
  background:linear-gradient(180deg,var(--cream),#fff);
  border-bottom:1px solid var(--line-soft);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.6rem 1rem 1.1rem;
}
.bd-company-logo{ max-height:48px; max-width:62%; width:auto; object-fit:contain; }

/* rank numeral */
.bd-rank{
  position:absolute; top:-14px; left:-10px; z-index:3;
  font-family:'Gabarito',sans-serif; font-weight:800;
  background:var(--plum); color:#fff; line-height:1;
  border-radius:14px; padding:.45rem .6rem; font-size:1rem;
  box-shadow:0 6px 16px rgba(91,33,80,.32);
}
.bd-rank small{ font-weight:600; opacity:.8; }

/* jämförpris badge — centered desktop, right mobile */
.bd-compare{
  position:absolute; top:-13px; z-index:3;
  right:14px;                       /* mobile: right */
  background:var(--plum); color:#fff;
  border-radius:999px; padding:.32rem .7rem;
  font-size:.74rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 6px 16px rgba(91,33,80,.28); cursor:help;
}
.bd-compare i{ opacity:.7; margin-left:.15rem; }
@media (min-width:768px){
  .bd-compare{ right:auto; left:50%; transform:translateX(-50%); } /* desktop: center */
}
.bd-promo{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--orange); color:#fff; border-radius:999px;
  padding:.3rem .7rem; font-size:.72rem; font-weight:700;
}

.bd-deal .stars{ color:var(--gold); font-size:1rem; letter-spacing:.06em; margin-top:.5rem; }
.bd-deal .op-name{
  font-family:'Gabarito',sans-serif; font-weight:700; color:var(--ink-soft);
  font-size:1rem; margin-top:.35rem;
}
.bd-deal .card-body{ padding:1.2rem 1.2rem 1.4rem; }
.bd-price{ font-family:'Gabarito',sans-serif; font-weight:800; font-size:2.5rem; color:var(--ink); line-height:1; }
.bd-price small{ font-size:1rem; font-weight:600; color:var(--ink-soft); }
.bd-specs{ list-style:none; padding:0; margin:1rem 0 1.2rem; text-align:left; }
.bd-specs li{ padding:.35rem 0; border-bottom:1px solid var(--line-soft); display:flex; gap:.5rem; align-items:baseline; }
.bd-specs li:last-child{ border-bottom:0; }
.bd-specs li i{ color:var(--orange); font-size:1rem; }
.bd-specs .lead-spec{ font-weight:700; font-size:1.08rem; font-family:'Gabarito',sans-serif; }

/* details table */
.bd-toggle{ display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; color:var(--plum); font-weight:600; font-size:.9rem; }
.bd-toggle:hover{ color:var(--orange-deep); }
.bd-detail-table{ font-size:.92rem; margin-top:1rem; }
.bd-detail-table td{ padding:.5rem .6rem; }
.bd-detail-table .table-light th{ background:var(--cream); }

/* ---- Buttons ---- */
.btn{ border-radius:999px; font-weight:600; letter-spacing:.005em; padding:.7rem 1.3rem; transition:transform .15s, box-shadow .15s, background .15s; }
.btn-lg{ padding:.85rem 1.4rem; font-size:1.02rem; }
.btn-primary,.btn-cta{
  --bs-btn-bg:var(--orange); --bs-btn-border-color:var(--orange);
  --bs-btn-hover-bg:var(--orange-deep); --bs-btn-hover-border-color:var(--orange-deep);
  --bs-btn-active-bg:var(--orange-deep); --bs-btn-active-border-color:var(--orange-deep);
  --bs-btn-disabled-bg:var(--orange); --bs-btn-disabled-border-color:var(--orange);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  box-shadow:0 8px 20px rgba(242,107,33,.28);
}
.btn-primary:hover,.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(242,107,33,.36); }
.btn-outline-plum{
  --bs-btn-color:var(--plum); --bs-btn-border-color:var(--line);
  --bs-btn-hover-bg:var(--plum); --bs-btn-hover-border-color:var(--plum); --bs-btn-hover-color:#fff;
  background:#fff; border-width:1px;
}
.btn-soft{ background:var(--cream); border:1px solid var(--line); color:var(--plum); }
.btn-soft:hover{ background:#fff; color:var(--orange-deep); }

/* ---- Breadcrumb ---- */
.breadcrumb{ font-size:.86rem; margin-bottom:0; }
.breadcrumb-chevron{ background:transparent!important; padding:.8rem 0!important; }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb .active a{ color:var(--ink); }

/* ---- Prose ---- */
.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.4rem,3vw,1.9rem); margin:2.2rem 0 .9rem; }
.prose h3{ font-size:1.25rem; margin:1.7rem 0 .6rem; }
.prose p,.prose li{ color:#3a2733; }
.prose a:not(.btn){ color:var(--plum); text-decoration:underline; font-weight:500; }
.prose a:not(.btn):hover{ color:var(--orange-deep); }
.prose ul,.prose ol{ padding-left:1.2rem; }
.prose li{ margin:.3rem 0; }
.prose blockquote{
  border-left:4px solid var(--orange); background:var(--cream);
  padding:1rem 1.2rem; border-radius:0 var(--r) var(--r) 0; margin:1.4rem 0; font-style:normal;
}

/* info / fact panels */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 1.5rem; box-shadow:var(--shadow); }
.panel-cream{ background:var(--cream); border-color:var(--line-soft); box-shadow:none; }
.fact-list{ list-style:none; padding:0; margin:0; }
.fact-list li{ display:flex; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--line-soft); }
.fact-list li:last-child{ border-bottom:0; }
.fact-list li i{ color:var(--orange); margin-top:.2rem; }

/* FAQ accordion */
.accordion{ --bs-accordion-border-color:var(--line); --bs-accordion-border-radius:var(--r); --bs-accordion-active-bg:var(--cream); --bs-accordion-active-color:var(--plum); --bs-accordion-btn-focus-box-shadow:none; }
.accordion-button{ font-family:'Gabarito',sans-serif; font-weight:600; font-size:1.05rem; }
.accordion-item{ margin-bottom:.6rem; border-radius:var(--r)!important; overflow:hidden; box-shadow:var(--shadow); }

/* tooltip larger for jämförpris explanation */
.tooltip.show{ opacity:1; }
.tooltip-inner{ max-width:300px; background:var(--plum-deep); color:#fff; font-size:.85rem; padding:.7rem .9rem; border-radius:var(--r-sm); text-align:left; box-shadow:var(--shadow-lg); }
.tooltip .tooltip-arrow::before{ border-top-color:var(--plum-deep); }

/* tables in prose */
.prose table,.tbl{ width:100%; border-collapse:separate; border-spacing:0; margin:1.4rem 0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.prose table th,.tbl th{ background:var(--plum); color:#fff; font-family:'Gabarito',sans-serif; font-weight:600; padding:.7rem .85rem; text-align:left; }
.prose table td,.tbl td{ padding:.65rem .85rem; border-top:1px solid var(--line-soft); }
.prose table tr:nth-child(even) td,.tbl tr:nth-child(even) td{ background:var(--cream); }

/* operator logo grid (footer + listings) */
.op-logo-grid img{ max-height:40px; max-width:100%; width:auto; object-fit:contain; filter:saturate(.9); transition:filter .15s, transform .15s; }
.op-logo-grid a:hover img{ filter:saturate(1.1); transform:scale(1.04); }

/* ---- Footer ---- */
footer.site-footer{ background:var(--plum-deep); color:#EBD9E4; margin-top:3rem; }
footer.site-footer a{ color:#F4D9CC; text-decoration:none; }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer .footer-head{ font-family:'Gabarito',sans-serif; color:#fff; font-weight:700; font-size:.95rem; letter-spacing:.02em; margin-bottom:.8rem; }
footer.site-footer .footer-company-logo{ max-height:30px; width:auto; background:#fff; padding:5px 8px; border-radius:8px; }
/* uniform operator logo tiles (footer) */
.op-logo-grid .op-logo-tile{ display:flex; align-items:center; justify-content:center; height:54px; background:#fff; border-radius:12px; padding:8px 10px; box-shadow:0 2px 8px rgba(0,0,0,.10); transition:transform .15s ease, box-shadow .15s ease; }
.op-logo-grid .op-logo-tile:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.op-logo-grid .op-logo-tile img{ max-height:28px; max-width:84%; width:auto; object-fit:contain; }
footer.site-footer .footer-disclaimer{ font-size:.82rem; color:#C6A9BB; border-top:1px solid rgba(255,255,255,.12); }

/* editorial article image */
.guide-hero-img{ margin:0 0 .5rem; }
.guide-hero-img img{ width:100%; height:auto; max-height:340px; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.guide-hero-img figcaption{ font-size:.82rem; color:var(--ink-soft); margin-top:.5rem; }

/* utility */
.bg-cream{ background:var(--cream)!important; }
.bg-card{ background:#fff!important; }
.rounded-xl{ border-radius:var(--r-lg)!important; }
.shadow-warm{ box-shadow:var(--shadow)!important; }
.lift{ transition:transform .15s, box-shadow .15s; }
.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
hr.soft{ border-color:var(--line); opacity:1; }

/* mobile: more generous side padding so nothing sits flush at the edge */
@media (max-width:575.98px){
  .container,.container-sm,.container-md,.container-lg,.container-xl{ padding-left:18px; padding-right:18px; }
  .hero{ padding-top:2.4rem; }
  .section{ padding:2rem 0; }
  .bd-price{ font-size:2.2rem; }
  /* never clip content tables on mobile — wide ones scroll, narrow ones fit */
  .panel.p-0,.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .prose table,.tbl,section table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}