/* SIST-ENDRET: 2026-08-13 14:17:59 */

  /* Instituttets offisielle palett, hentet fra Madina Institute sitt eget
     materiell. Blå er hovedfargen, men den står ikke alene: marineblå
     bærer flatene, oransje markerer det som skal handles på, og grønn
     brukes til bekreftelser. En side i kun én blåtone blir flat og
     vanskelig å navigere — kontrasten mellom fargene er det som gjør at
     øyet finner fram.

       #1A9BEC  blå        hovedfarge, lenker, ikoner
       #06195B  marine     bakgrunn, overskrifter
       #FF771F  oransje    handling: påmelding, viktige knapper
       #62C038  grønn      bekreftelse, positive punkter          */
  :root{
    --ink:#0d2033;
    --emerald:#1A9BEC; --emerald-d:#06195B; --emerald-l:#4fb3f2;
    --gold:#FF771F; --gold-l:#ff9a56;
    --coral:#FF771F; --coral-d:#e05f0d;
    --leaf:#62C038;
    --paper:#F0F7FE; --paper-2:#E1EFFB;
    --line:rgba(6,25,91,0.12); --shadow:0 10px 26px rgba(6,25,91,0.10);
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--paper); font-family:'Lora',serif; color:var(--ink); min-height:100vh; line-height:1.7;}
  html[dir="rtl"] body{font-family:'Tajawal','Lora',serif;}
  html[lang="ur"] body{line-height:2.1;}

  #inAppBrowserBanner{
    display:none; position:sticky; top:0; z-index:3000; background:var(--gold);
    color:#3a2e10; font-family:'Jost',sans-serif; font-size:12.5px; line-height:1.5; padding:12px 16px; text-align:center; box-shadow:var(--shadow);
  }
  html[dir="rtl"] #inAppBrowserBanner{font-family:'Tajawal',sans-serif;}
  #inAppBrowserBanner .close-banner{background:none; border:none; color:#3a2e10; font-weight:700; font-size:14px; cursor:pointer; margin-inline-start:10px; text-decoration:underline;}

  /* ===== شريط علوي ===== */
  nav.topbar{
    position:sticky; top:0; z-index:200; background:rgba(240,247,254,0.94); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line); padding:12px 20px;
  }
  /* 🔴 Toppbaren er sticky. Uten dette stanset hvert avsnitt AKKURAT
     under den, og overskriften — «Program», «Priser» — lå skjult bak
     baren. Man trykket på en lenke, siden hoppet, og man landet midt i
     en tekst uten å vite hvor man var.
     Verdien er baren pluss litt luft. Den settes i én variabel fordi
     baren har ulik høyde på telefon og skjerm, og to tall som skal være
     like ender alltid med å bli ulike. */
  /* Baren er nå en søyle — logo, to lenkerader, språkvalg — og da blir
     den høy: rundt 200 piksler, og verdien her er satt litt over
     så overskriften får luft under baren i stedet for å klistre seg til den. To tall som skal være like ender alltid
     med å bli ulike, så høyden står ett sted og brukes derfra.
     ⚠️ På telefon spiser en fast bar på 190 px omtrent en fjerdedel av
     skjermen hele tiden. Se notatet nederst i denne filen. */
  /* 🔴 Baren har nå TRE lenkerader (Hjem kom til, og ni felt deles 3+3+3).
     Verdien måtte opp tilsvarende. Står den for lavt, havner overskriften
     i avsnittet man hoppet til bak baren — det var nettopp dette tallet
     ble innført for.
     ⚠️ Baren tar nå en god del av en telefonskjerm. Neste steg der er å
     la den krympe når man ruller nedover, ikke å kutte i lenkene. */
  :root{ --topbar-h:280px; }
  section[id], header[id]{ scroll-margin-top:var(--topbar-h); }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

  .topbar-inner{
    max-width:1080px; margin:0 auto; display:flex; flex-direction:column;
    align-items:center; gap:10px;
  }
  /* Logo og navn står øverst og midtstilt, som på et brevhode. Da er
     det første man ser hvem dette er — ikke en rad med lenker. */
  .brand{display:flex; align-items:center; justify-content:center; gap:10px;}
  .brand img{height:36px; width:auto; border-radius:8px;}
  .brand-text{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:18px; color:var(--emerald-d);}
  html[dir="rtl"] .brand-text{font-family:'Tajawal',sans-serif;}
  /* Lenkene i to rammer med skillelinjer mellom feltene, i stedet for
     frittstående ord som brøt over to linjer uten at det så tilsiktet ut. */
  .topbar-links{display:flex; flex-direction:column; gap:6px; width:100%; max-width:640px; min-width:0;}
  .nav-rad{
    display:flex; background:#fff; border:1px solid var(--line);
    border-radius:9px; overflow:hidden;
  }
  .topbar-links a{
    flex:1 1 0; min-width:0; text-align:center;
    color:var(--emerald-d); text-decoration:none;
    font-family:'Jost',sans-serif; font-size:11.5px; font-weight:600;
    padding:9px 4px; border-inline-end:1px solid #e6edf4;
    /* Ordene er ulike lange på de tre språkene. Uten dette ville et langt
       arabisk ord presset naboene sine sammen til de ikke var lesbare. */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .nav-rad a:last-child{border-inline-end:0;}
  html[dir="rtl"] .topbar-links a{font-family:'Tajawal',sans-serif;}
  .topbar-links a:hover{background:var(--paper-2);}
  .topbar-links a:focus-visible{outline:2px solid var(--emerald); outline-offset:-2px;}
  /* På de smaleste skjermene er fire felt fortsatt trangt. Da faller
     skriften ned et hakk heller enn at ordene kuttes. */
  @media (max-width:400px){
    .topbar-links a{font-size:10.5px; padding:8px 2px;}
  }
  /* Språkvelgeren har samme form som fanene over: samme ramme, samme
     hjørner, samme skillelinjer. To ulike former rett over hverandre
     leses som to ulike systemer — det er én rad til, ikke noe annet. */
  .lang-switch-inner{
    display:flex; background:#fff; border:1px solid var(--line);
    border-radius:9px; overflow:hidden; width:100%; max-width:400px;
  }
  /* Fire språk, ikke tre. På de smaleste telefonene blir «English» og
     «العربية» trange ved siden av hverandre — da faller skriften ett
     hakk heller enn at ordene kuttes midt i. */
  @media (max-width:400px){
    .lang-switch-inner button{ font-size:10px; padding:8px 2px; }
  }
  .lang-switch-inner button{
    flex:1 1 0; background:transparent; border:none; cursor:pointer;
    color:var(--emerald-d); font-family:'Jost',sans-serif;
    font-size:11.5px; font-weight:600; letter-spacing:0.02em;
    padding:9px 4px; border-inline-end:1px solid #e6edf4;
  }
  .lang-switch-inner button:last-child{border-inline-end:0;}
  .lang-switch-inner button:hover{background:var(--paper-2);}
  .lang-switch-inner button.active{background:var(--emerald-d); color:#fff;}
  .lang-switch-inner button:focus-visible{outline:2px solid var(--emerald); outline-offset:-2px;}

  /* ===== Hero (تصميم مطابق لهيكل SALAM، بألوان مدرسة مدينة) ===== */
  header.hero{
    background:
      radial-gradient(circle at 88% 12%, rgba(255,119,31,0.30) 0%, rgba(255,119,31,0) 50%),
      radial-gradient(circle at 8% 95%, rgba(26,155,236,0.45) 0%, rgba(26,155,236,0) 45%),
      linear-gradient(155deg, var(--emerald) 0%, var(--emerald-d) 100%);
    padding:56px 20px 46px; text-align:center; color:#fff;
  }
  .hero-inner{max-width:900px; margin:0 auto;}
  .hero-badge{
    display:inline-block; background:var(--leaf); border:1px solid rgba(255,255,255,0.2); color:#fff;
    font-family:'Jost',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:0.04em; text-transform:uppercase; padding:6px 16px; border-radius:20px; margin-bottom:20px;
  }
  html[dir="rtl"] .hero-badge{font-family:'Tajawal',sans-serif; letter-spacing:0; text-transform:none;}
  header.hero h1{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:27px; margin:0 0 6px; color:#fff; line-height:1.4;}
  html[dir="rtl"] header.hero h1{font-family:'Tajawal',sans-serif; font-size:23px;}
  header.hero .school-year{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:19px; color:#ffb98e; margin:0 0 18px;}
  html[dir="rtl"] header.hero .school-year{font-family:'Tajawal',sans-serif; font-style:normal;}
  header.hero p.lead{max-width:600px; margin:0 auto 26px; font-size:15px; color:rgba(255,255,255,0.88);}

  .quick-facts{
    display:flex; flex-direction:column; gap:0; justify-content:center; margin-bottom:28px; border-top:1px solid rgba(255,255,255,0.2);
    border-bottom:1px solid rgba(255,255,255,0.2);
  }
  .quick-fact{
    font-family:'Jost',sans-serif; font-size:12.5px; color:#fff; font-weight:500; padding:12px 0;
    border-top:1px solid rgba(255,255,255,0.15); text-align:center;
  }
  html[dir="rtl"] .quick-fact{font-family:'Tajawal',sans-serif;}
  .quick-fact:first-child{border-top:none;}
  .quick-fact b{display:block; font-weight:700; font-size:13.5px; margin-top:2px;}
  @media (min-width:560px){
    .quick-facts{ flex-direction:row; padding:16px 0; }
    .quick-fact{ padding:4px 20px; border-top:none; border-inline-start:1px solid rgba(255,255,255,0.25); flex:1 1 0; }
    .quick-fact:first-child{ border-inline-start:none; }
  }

  .hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
  .btn{
    display:inline-block; text-decoration:none; font-family:'Jost',sans-serif; font-weight:700; font-size:13.5px;
    padding:13px 26px; border-radius:8px;
  }
  html[dir="rtl"] .btn{font-family:'Tajawal',sans-serif;}
  .btn-primary{background:var(--coral); color:#fff; box-shadow:0 8px 20px rgba(255,119,31,0.35);}
  .btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.6);}
  /* For buttons placed on the plain light page background (not the dark
     hero/tuition sections) — btn-outline's white-on-transparent style is
     unreadable there, so this uses a solid dark fill instead. */
  .btn-onlight{background:var(--emerald-d); color:#fff; box-shadow:0 8px 20px rgba(33,30,66,0.18);}
  .btn-onlight:hover{background:var(--emerald);}

  main{max-width:1080px; margin:0 auto; padding:0 20px 70px;}
  section{margin-top:56px;}
  .section-head{text-align:center; margin-bottom:28px;}
  .section-head .eyebrow{font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px;}
  html[dir="rtl"] .section-head .eyebrow{font-family:'Tajawal',sans-serif; letter-spacing:0; text-transform:none;}
  .section-head h2{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:24px; margin:0; color:var(--ink);}
  html[dir="rtl"] .section-head h2{font-family:'Tajawal',sans-serif; font-size:22px;}
  .section-head p{font-family:'Jost',sans-serif; color:#5a6b7d; font-size:13.5px; max-width:560px; margin:10px auto 0;}
  html[dir="rtl"] .section-head p{font-family:'Tajawal',sans-serif;}

  /* Steg (How to register) */
  .steps-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;}
  .step-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; box-shadow:var(--shadow); position:relative;}
  .step-num{
    width:54px; height:54px; border-radius:50%; background:var(--paper-2); color:var(--emerald-d);
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
  .step-card h3{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:16px; margin:0 0 6px; color:var(--emerald-d);}
  html[dir="rtl"] .step-card h3{font-family:'Tajawal',sans-serif; font-size:15px;}
  .step-card p{font-family:'Jost',sans-serif; font-size:12.5px; color:#5a6b7d; margin:0;}
  html[dir="rtl"] .step-card p{font-family:'Tajawal',sans-serif; font-size:13px;}

  /* Tuition box */
  .tuition-box{
    background:linear-gradient(135deg, var(--emerald) 0%, var(--emerald-d) 100%); border-radius:16px; padding:30px 26px;
    text-align:center; color:#fff; margin-top:20px; box-shadow:var(--shadow);
  }
  .tuition-box .tag{font-family:'Jost',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--coral); margin-bottom:6px;}
  html[dir="rtl"] .tuition-box .tag{font-family:'Tajawal',sans-serif; letter-spacing:0; text-transform:none;}
  .tuition-box .amt{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:32px; margin-bottom:4px;}
  html[dir="rtl"] .tuition-box .amt{font-family:'Tajawal',sans-serif; font-size:26px;}
  .tuition-box .sub{font-family:'Jost',sans-serif; font-size:12.5px; opacity:0.9; margin-bottom:16px;}
  html[dir="rtl"] .tuition-box .sub{font-family:'Tajawal',sans-serif;}
  .tuition-box ul{list-style:none; padding:0; margin:0 0 18px; font-family:'Jost',sans-serif; font-size:12.5px; opacity:0.95;}
  html[dir="rtl"] .tuition-box ul{font-family:'Tajawal',sans-serif;}
  .tuition-box li{margin-bottom:5px;}
  .tuition-box .btn-primary{background:var(--coral); color:#fff;}

  /* Key dates timeline */
  .dates-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px;}
  .date-card{border-radius:12px; padding:20px 18px; box-shadow:var(--shadow); text-align:start;}
  .date-card.tone-1{background:#faf1e2;}
  .date-card.tone-2{background:#fce9e9;}
  .date-card.tone-3{background:#e9ecfa;}
  .date-card .when{
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px; color:var(--coral); margin-bottom:8px; display:block;
  }
  html[dir="rtl"] .date-card .when{font-family:'Tajawal',sans-serif; font-size:17px;}
  .date-card h3{display:none;}
  .date-card p{font-family:'Jost',sans-serif; font-size:13px; color:var(--ink); margin:0; font-weight:500;}
  html[dir="rtl"] .date-card p{font-family:'Tajawal',sans-serif; font-size:13.5px;}

  /* Program cards (3 subjects) */
  .card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px;}
  .card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; box-shadow:var(--shadow); text-align:center;}
  /* Kort MED bilde: bildet går helt ut i kanten, teksten får sin egen
     luft. Padding på kortet ville lagt en hvit ramme rundt fotoet og
     fått det til å se ut som et vedlegg i stedet for en del av kortet. */
  .card.med-bilde{padding:0; overflow:hidden; display:flex; flex-direction:column;}
  .card.med-bilde .kort-tekst{padding:18px 20px 22px;}
  .kort-bilde{
    display:block; width:100%; height:190px; object-fit:cover;
    /* Bordet og bøkene ligger i nedre halvdel av bildene. Uten dette
       ville beskjæringen tatt midten og vist mest bordplate. */
    object-position:center 42%;
    background:var(--paper-2);
  }
  @media (min-width:760px){ .kort-bilde{height:210px;} }
  .card .ic{font-size:30px; margin-bottom:10px;}
  .card h3{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:17px; margin:0 0 8px; color:var(--emerald-d);}
  html[dir="rtl"] .card h3{font-family:'Tajawal',sans-serif; font-size:16px;}
  .card p{font-family:'Jost',sans-serif; font-size:12.5px; color:#5a6b7d; margin:0; line-height:1.7;}
  html[dir="rtl"] .card p{font-family:'Tajawal',sans-serif; font-size:13px;}

  .sted-bilde{
    display:block; width:100%; border-radius:14px; border:1px solid var(--line);
    box-shadow:var(--shadow); margin-bottom:20px; background:var(--paper-2);
    /* Fast høydeforhold, ikke fast pikselhøyde: da beskjæres bildet likt
       på alle skjermbredder i stedet for å bli en stripe på de smale. */
    aspect-ratio:16/9; height:auto; object-fit:cover;
    /* 🔴 Sto på 62% og dro utsnittet NED mot asfalten — halve bildet ble
       vei, mens døra og skiltet lå klemt i overkanten. Motivet er
       inngangen: den ligger i øvre halvdel, så utsnittet må dit. */
    object-position:center 34%;
  }
  @media (max-width:520px){
    /* På telefon er 16:9 for lav til at døra og skiltet leses. */
    .sted-bilde{ aspect-ratio:4/3; }
  }

  /* Mission/Vision/Philosophy */
  .mvp-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px;}
  .mvp-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 22px; box-shadow:var(--shadow);}
  .mvp-card .eyebrow{font-family:'Jost',sans-serif; font-size:11px; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
  html[dir="rtl"] .mvp-card .eyebrow{font-family:'Tajawal',sans-serif; letter-spacing:0; text-transform:none;}
  .mvp-card h3{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:18px; margin:0 0 10px; color:var(--ink);}
  html[dir="rtl"] .mvp-card h3{font-family:'Tajawal',sans-serif; font-size:16px;}
  .mvp-card p{font-family:'Jost',sans-serif; font-size:13px; color:#5a6b7d; margin:0;}
  html[dir="rtl"] .mvp-card p{font-family:'Tajawal',sans-serif; font-size:13.5px;}

  /* Team */
  .team-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px;}
  .team-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 16px; box-shadow:var(--shadow); text-align:center;}
  .team-avatar{
    width:56px; height:56px; border-radius:50%; background:var(--emerald); color:#fff; display:flex; align-items:center;
    justify-content:center; margin:0 auto 12px; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px;
  }
  .team-card h3{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:15.5px; margin:0 0 4px; color:var(--ink);}
  html[dir="rtl"] .team-card h3{font-family:'Tajawal',sans-serif; font-size:14.5px;}
  .team-card .role{font-family:'Jost',sans-serif; font-size:11px; color:var(--emerald-d); font-weight:600;}
  html[dir="rtl"] .team-card .role{font-family:'Tajawal',sans-serif;}

  /* Portals */
  a.portal-card{
    display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 18px;
    box-shadow:var(--shadow); text-align:center; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s;
  }
  a.portal-card:hover{border-color:var(--gold); transform:translateY(-3px);}
  a.portal-card .ic{font-size:30px; margin-bottom:10px;}
  a.portal-card .title{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:16px; color:var(--emerald-d); margin-bottom:5px;}
  html[dir="rtl"] a.portal-card .title{font-family:'Tajawal',sans-serif; font-size:15px;}
  a.portal-card .desc{font-family:'Jost',sans-serif; font-size:11px; color:#5a6b7d; line-height:1.5;}
  html[dir="rtl"] a.portal-card .desc{font-family:'Tajawal',sans-serif;}

  /* CTA final */
  .final-cta{
    background:linear-gradient(135deg, var(--emerald) 0%, var(--emerald-d) 100%); border-radius:16px; padding:40px 26px;
    text-align:center; box-shadow:var(--shadow);
  }
  .final-cta h2{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:23px; margin:0 0 10px; color:#fff;}
  html[dir="rtl"] .final-cta h2{font-family:'Tajawal',sans-serif; font-size:20px;}
  .final-cta p{font-family:'Jost',sans-serif; font-size:13px; color:rgba(255,255,255,0.9); margin:0 0 20px;}
  html[dir="rtl"] .final-cta p{font-family:'Tajawal',sans-serif;}
  .final-cta .btn-primary{background:#fff; color:var(--emerald-d); box-shadow:none;}

  footer{background:#fff; border-top:1px solid var(--line); margin-top:70px; padding:34px 20px; text-align:center;}
  footer .foot-inner{max-width:1080px; margin:0 auto;}
  footer h4{font-family:'Cormorant Garamond',serif; font-size:17px; margin:0 0 10px; color:var(--emerald-d);}
  html[dir="rtl"] footer h4{font-family:'Tajawal',sans-serif;}
  footer p{font-family:'Jost',sans-serif; font-size:12.5px; color:#8a978f; margin:4px 0;}
  html[dir="rtl"] footer p{font-family:'Tajawal',sans-serif;}
  footer a.plink{color:var(--emerald-d); text-decoration:none;}
  /* Prisseksjon. Beløpene er full pris — rabattsatsene er ikke fastsatt
     ennå, og derfor står de bevisst uten prosent her. Å love en sats vi
     ikke har vedtatt ville vært verre enn å si at den kommer. */
  .pris-kort{
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:26px 24px; box-shadow:var(--shadow); text-align:center;
  }
  .pris-kort .pris-navn{
    font-family:'Jost',sans-serif; font-size:13px; font-weight:600;
    letter-spacing:.04em; color:var(--emerald-d); margin-bottom:4px;
  }
  .pris-kort .pris-dag{
    font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold); margin-bottom:14px;
  }
  .pris-kort .pris-belop{
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:38px;
    color:var(--emerald); line-height:1.1;
  }
  .pris-kort .pris-per{
    font-family:'Jost',sans-serif; font-size:12px; color:#6b7480; margin-top:4px;
  }
  .pris-kort .pris-info{
    font-size:13.5px; color:#5a6b7d; margin-top:14px; padding-top:14px;
    border-top:1px solid var(--line); line-height:1.6;
  }
  .pris-noter{ margin-top:22px; display:grid; gap:12px; }
  .pris-note{
    background:rgba(183,146,74,0.09); border-inline-start:3px solid var(--gold);
    border-radius:0 8px 8px 0; padding:14px 18px;
    font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.65; color:var(--ink);
  }
  .pris-note b{ color:var(--emerald-d); }


  /* ---- Læremidler i programseksjonen ---- */
  .bok-blokk{
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); margin-top:16px; overflow:hidden;
  }
  .bok-hode{
    padding:15px 20px 12px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fff,var(--paper-2));
  }
  .bok-hode h3{
    font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700;
    color:var(--emerald-d); margin:0 0 3px;
  }
  html[dir="rtl"] .bok-hode h3{font-family:'Tajawal',sans-serif; font-size:17px;}
  .bok-hode p{margin:0; font-size:12.5px; color:#5a6b7d;}
  .bok-rad{
    display:flex; gap:16px; padding:15px 20px; align-items:flex-start;
    border-bottom:1px solid var(--line); text-align:start;
  }
  .bok-rad:last-child{border-bottom:0;}
  /* Fast bredde på omslaget. Uten den ville bøker med ulike bildeformater
     fått hver sin kolonnebredde, og listen sett tilfeldig ut nedover. */
  .bok-rad picture{flex:0 0 92px;}
  .bok-rad img{
    display:block; width:100%; height:auto; border-radius:7px;
    border:1px solid var(--line); background:var(--paper-2);
  }
  .bok-info{flex:1; min-width:0;}
  .bok-info h4{
    font-family:'Jost',sans-serif; font-size:14px; font-weight:700;
    color:var(--ink); margin:0 0 3px;
  }
  html[dir="rtl"] .bok-info h4{font-family:'Tajawal',sans-serif;}
  .bok-niva{
    display:inline-block; font-size:10px; font-weight:600; letter-spacing:.03em;
    background:var(--paper-2); color:var(--emerald-d); border-radius:999px;
    padding:3px 9px; margin-bottom:6px;
  }
  .bok-info p{margin:0; font-size:12.5px; color:#5a6b7d; line-height:1.65;}
  .bok-info a{color:var(--emerald-d); font-weight:700; text-decoration:none;}

  /* ---- Medlemskort ---- */
  .medlem-kort{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:24px 22px; margin-top:22px; box-shadow:var(--shadow);
    max-width:760px; margin-inline:auto;
  }
  .medlem-tittel{
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px;
    color:var(--emerald-d); margin-bottom:10px;
  }
  html[dir="rtl"] .medlem-tittel{ font-family:'Tajawal','Cormorant Garamond',serif; font-size:20px; }
  .medlem-brod{
    font-family:'Jost',sans-serif; font-size:14px; line-height:1.7;
    color:#4a5a52; margin:0 0 10px;
  }
  html[dir="rtl"] .medlem-brod{ font-family:'Tajawal',sans-serif; }
  /* Advarselen skal ikke kunne overses. Den handler om noe skolen kan
     bli medansvarlig for, ikke om en preferanse. */
  .medlem-advarsel{
    font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.7; color:#7a5c12;
    background:#fdf8ec; border-inline-start:4px solid #b7924a;
    border-radius:10px; padding:14px 16px; margin:14px 0 16px;
  }
  html[dir="rtl"] .medlem-advarsel{ font-family:'Tajawal',sans-serif; }
  .medlem-knapper{ display:flex; gap:10px; flex-wrap:wrap; }
  .medlem-knapp{
    font-family:'Jost',sans-serif; font-size:14px; font-weight:600; text-decoration:none;
    padding:12px 20px; border-radius:10px; border:1.5px solid var(--emerald);
    color:var(--emerald-d); background:#fff; transition:background .15s, color .15s;
  }
  html[dir="rtl"] .medlem-knapp{ font-family:'Tajawal',sans-serif; }
  .medlem-knapp.primar{ background:var(--emerald); border-color:var(--emerald); color:#fff; }
  .medlem-knapp:hover{ background:var(--emerald); border-color:var(--emerald); color:#fff; }
  .medlem-moske{
    font-family:'Jost',sans-serif; font-size:13px; color:#6a7870; margin-top:16px;
  }
  html[dir="rtl"] .medlem-moske{ font-family:'Tajawal',sans-serif; }
  .medlem-moske a{ color:var(--emerald-d); }

  #devEditBadge{
    display:none; position:fixed; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    inset-inline-end:10px; z-index:5000;
    font-family:'Jost',sans-serif,Arial,sans-serif; font-size:10.5px; color:#6a7870;
    background:rgba(255,255,255,0.94); backdrop-filter:blur(3px);
    padding:4px 10px; border-radius:20px; border:1px solid rgba(0,0,0,0.08);
    pointer-events:none; letter-spacing:.01em; box-shadow:0 2px 8px rgba(0,0,0,0.12);
  }


  /* ═══════════════════════════════════════════════════════════════
     PRISKORT — hentet ORDRETT fra påmeldingsskjemaet.

     🔴 Skjemaet er fasit. Det er der familien faktisk betaler, og det
     er tallene derfra de husker. Sto forsiden med sin egen utforming
     og sine egne ord, ville de to før eller siden fortalt ulike ting
     om samme pris — akkurat som 2 750 og 5 500 gjorde.

     Derfor: samme to priser side om side, samme etiketter, samme
     rekkefølge. Medlemsprisen får mest vekt fordi den er tilbudet,
     og den er lavest.
     ═══════════════════════════════════════════════════════════════ */
  .pk-priser{display:flex;}
  .pk-pris{flex:1; padding:18px 16px; text-align:center;}
  .pk-pris + .pk-pris{border-inline-start:1px solid var(--line);}
  .pk-pris.medlem{background:rgba(26,155,236,0.06);}
  .pk-etikett{
    font-family:'Jost',sans-serif; font-size:10px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:#8a9aa8; margin-bottom:6px;
  }
  html[dir="rtl"] .pk-etikett{font-family:'Tajawal',sans-serif; letter-spacing:0; text-transform:none;}
  .pk-pris.medlem .pk-etikett{color:var(--emerald);}
  .pk-tall{
    font-family:'Cormorant Garamond',serif; font-weight:700;
    font-size:34px; line-height:1; color:var(--ink);
  }
  html[dir="rtl"] .pk-tall{font-family:'Tajawal',sans-serif; font-size:30px;}
  .pk-pris.medlem .pk-tall{color:var(--emerald-d); font-size:38px;}
  html[dir="rtl"] .pk-pris.medlem .pk-tall{font-size:33px;}
  .pk-enhet{font-family:'Jost',sans-serif; font-size:11px; color:#8a9aa8; margin-top:5px;}
  html[dir="rtl"] .pk-enhet{font-family:'Tajawal',sans-serif; font-size:12px;}
  .pk-spar{
    font-family:'Jost',sans-serif; font-size:11px; font-weight:600;
    color:var(--emerald); margin-top:7px;
  }
  html[dir="rtl"] .pk-spar{font-family:'Tajawal',sans-serif; font-size:12px;}
  .pk-fot{
    padding:11px 18px; font-family:'Jost',sans-serif; font-size:11.5px;
    color:#6b7d8f; border-top:1px solid var(--line); line-height:1.55;
  }
  html[dir="rtl"] .pk-fot{font-family:'Tajawal',sans-serif; font-size:12.5px;}

  /* Søskenrabatt — også ordrett fra skjemaet. */
  .sosken{
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:22px; margin-top:16px; box-shadow:var(--shadow); text-align:start;
  }
  .sosken h3{
    font-family:'Cormorant Garamond',serif; font-size:19px; margin:0 0 3px; color:var(--emerald-d);
  }
  html[dir="rtl"] .sosken h3{font-family:'Tajawal',sans-serif; font-size:18px;}
  .s-sub{font-family:'Jost',sans-serif; font-size:11.5px; color:#8a9aa8; margin-bottom:14px;}
  html[dir="rtl"] .s-sub{font-family:'Tajawal',sans-serif; font-size:12.5px;}
  .s-rad{display:flex; gap:10px;}
  .s-boks{flex:1; text-align:center; padding:14px 8px; background:var(--paper-2); border-radius:8px;}
  .s-barn{
    font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:#8a9aa8;
  }
  html[dir="rtl"] .s-barn{font-family:'Tajawal',sans-serif; letter-spacing:0; text-transform:none; font-size:12px;}
  .s-pst{
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:30px;
    line-height:1.1; color:var(--emerald-d); margin-top:4px;
  }
  .s-full{color:#b3bfc9; font-size:19px;}
  .s-note{
    font-family:'Jost',sans-serif; font-size:11.5px; color:#6b7d8f;
    margin-top:13px; line-height:1.6; padding-top:12px; border-top:1px solid var(--line);
  }
  html[dir="rtl"] .s-note{font-family:'Tajawal',sans-serif; font-size:12.5px;}