/* =============================================================
   PRODUKTER - se produkter.js. Fragt og Integrationer (app.js) bruger
   de samme brikker og står nederst.
   Al farve kommer fra skallens variabler (app.css), så lys og mørk
   følger med. Lister, faner, bokse og knapper er skallens egne klasser;
   her står kun det, de ikke dækker.
   ============================================================= */
.pr-rum [hidden], .pr-ind [hidden]{ display:none !important; }
.pr-rum > .faner{ margin-bottom:.8rem; border-bottom:1px solid var(--kant); padding-bottom:.6rem; flex-wrap:wrap; }
/* Statuslinjen står fast øverst, så den også ses fra bunden af et langt kort. */
.pr-rum > .besked{ position:sticky; top:0; z-index:2; margin:0 0 .8rem; padding:.5rem .7rem; background:var(--flade); border:1px solid var(--kant); border-radius:.4rem; }
.pr-rum > .besked:empty{ display:none; }
.pr-rum .hint, .pr-ind .hint{ color:var(--daempet); font-size:.85rem; margin:.2rem 0; }
.pr-rum h3{ font-size:1.05rem; margin:0 0 .6rem; }
.pr-rum h4{ font-size:.95rem; margin:1rem 0 .4rem; }
.pr-rum input[type=checkbox], .pr-ind input[type=checkbox]{ width:auto; padding:0; }
.pr-rum .afkryds, .pr-ind .afkryds{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.5rem 0; }
.pr-rum .afkryds label{ cursor:pointer; }
.pr-forklaring{ max-width:40rem; margin:0; }
.pr-titel{ margin:.2rem 0 .8rem; font-size:1.35rem; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; overflow-wrap:anywhere; }
.pr-kort{ margin:0 0 1.2rem; }
.pr-handlinger{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.8rem; }

/* Listen */
.pr-thumb{ width:3.4rem; }
.pr-thumb img, .pr-ingen{ display:block; width:2.6rem; height:2.6rem; border-radius:.4rem; object-fit:cover; background:var(--bund); border:1px solid var(--kant); }
.pr-navn{ font-weight:600; text-decoration:none; overflow-wrap:anywhere; margin-right:.5rem; }
.pr-navn:hover{ text-decoration:underline; }
.pr-tag{ display:inline-block; font-size:.75rem; font-weight:400; padding:.05rem .5rem; margin:0 .25rem .15rem 0; border-radius:1rem; border:1px solid var(--tagfarve, var(--kant)); color:var(--daempet); }
.pr-tabel small{ margin-top:.15rem; }
.pr-arkiv{ opacity:.65; }
.pr-status{ display:inline-block; font-size:.8rem; padding:.05rem .5rem; border-radius:1rem; border:1px solid var(--kant); color:var(--daempet); white-space:nowrap; }
.pr-s-sendt{ border-color:var(--god); color:var(--god); }
.pr-s-aendret{ border-color:var(--advarsel); color:var(--advarsel); }

/* Formularer */
.pr-form{ display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.8rem 1rem; align-items:start; }
.pr-felt{ display:grid; gap:.25rem; min-width:0; }
.pr-felt > label{ font-weight:600; }
.pr-felt.bred, .pr-form > .afkryds, .pr-del{ grid-column:1 / -1; }
.pr-form > .afkryds{ margin:0; }
.pr-del{ margin:.6rem 0 0 !important; padding-top:.6rem; border-top:1px solid var(--kant); }
.pr-flervalg{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pr-valg{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border:1px solid var(--kant); border-radius:1rem; cursor:pointer; font-weight:400; }
.pr-skema{ margin:.6rem 0; padding:.8rem; border:1px solid var(--kant); border-radius:.5rem; background:var(--bund); display:grid; gap:.6rem; }
.pr-skema > h4{ margin:0; }

/* Teksteditoren */
.pr-rigtekst{ border:1px solid var(--kant); border-radius:.4rem; background:var(--flade); min-width:0; }
.pr-rt-linje{ display:flex; flex-wrap:wrap; gap:.25rem; padding:.3rem; border-bottom:1px solid var(--kant); }
.pr-rt-k{ font:inherit; font-size:.85rem; padding:.2rem .5rem; border:1px solid var(--kant); border-radius:.3rem; background:var(--bund); color:var(--tekst); cursor:pointer; }
.pr-rt-fed{ font-weight:700; } .pr-rt-kursiv{ font-style:italic; } .pr-rt-avanceret{ margin-left:auto; }
.pr-rt-flade{ min-height:6rem; padding:.5rem .7rem; overflow-wrap:anywhere; }
.pr-rt-flade:focus-visible{ outline:2px solid var(--farve); outline-offset:-2px; }
.pr-rt-flade h3, .pr-rt-flade h4{ margin:.6rem 0 .3rem; }
.pr-rt-kilde{ border:0; border-radius:0 0 .4rem .4rem; }
.pr-rigtekst .pr-skema{ margin:.4rem; }

/* Billeder og filer */
.pr-medieliste{ display:grid; gap:.4rem; }
.pr-medie{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.pr-medie img{ width:2.6rem; height:2.6rem; object-fit:cover; border-radius:.3rem; border:1px solid var(--kant); flex:none; }
.pr-medienavn{ flex:1; min-width:0; overflow-wrap:anywhere; font-size:.85rem; }
.pr-medie .knap{ padding:.2rem .6rem; font-size:.85rem; }

/* Varianter og priser */
.pr-variant{ border:1px solid var(--kant); border-radius:.5rem; padding:.6rem .9rem; margin:.6rem 0; }
.pr-variant > summary{ cursor:pointer; overflow-wrap:anywhere; }
.pr-pris{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; padding:.45rem 0; border-bottom:1px solid var(--kant); }
.pr-prisnavn{ font-weight:600; min-width:8rem; overflow-wrap:anywhere; }
.pr-pristekst{ flex:1 1 12rem; }
.pr-pris .knap{ padding:.2rem .7rem; }

/* Send til Stripe */
.pr-stripe{ display:grid; gap:.5rem; margin-top:.6rem; }
.pr-stripe-række{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; }
.pr-stripe-række > strong{ min-width:2.6rem; }

/* Indstillinger: Integrationer og Fragt (app.js) */
.pr-ind h2{ display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; overflow-wrap:anywhere; }
.pr-ind .formular{ margin:.8rem 0; }
.pr-ind code{ overflow-wrap:anywhere; }
.pr-noegle{ margin:.3rem 0; overflow-wrap:anywhere; }
.pr-zone{ border-top:1px solid var(--kant); padding:.7rem 0; }
.pr-zone > .raekke{ flex-wrap:wrap; padding:0; }
.pr-zone .formular{ max-width:none; margin:.6rem 0 0; }
.pr-lande{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.3rem 0; }
.pr-land{ display:inline-flex; align-items:center; gap:.3rem; font-size:.85rem; padding:.1rem .2rem .1rem .6rem; border:1px solid var(--kant); border-radius:1rem; }
.pr-land button{ font:inherit; border:0; background:none; color:var(--daempet); cursor:pointer; padding:0 .4rem; border-radius:1rem; }

@media (max-width:760px){
  .pr-thumb{ width:auto; }
  .pr-rt-avanceret{ margin-left:0; }
  .pr-form{ grid-template-columns:1fr; }
}

/* Stripes webhook under Indstillinger → Integrationer. */
.pr-webhook-afsnit{ margin-top:-.8rem; }
.pr-webhook-afsnit h3{ font-size:1rem; margin:0 0 .5rem; display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; }
.pr-webhook{ flex-wrap:wrap; }
.pr-webhook .noegle{ flex:1 1 16rem; min-width:0; }
.pr-beskeder{ margin:.3rem 0 .6rem; padding-left:1.2rem; }
/* Indstillinger → Mailindstillinger: kilden, domænerne med DNS-poster og forbruget (0013). */
.pr-kilde{ border:0; margin:0; padding:0; display:grid; gap:.5rem; }
.pr-kilde label{ display:flex; align-items:flex-start; gap:.5rem; }
.pr-kilde input{ width:auto; margin-top:.25rem; }
.pr-kilde small{ display:block; color:var(--daempet); }
.pr-domaene{ border-top:1px solid var(--kant); padding:.7rem 0; }
.pr-domaene h3{ font-size:1rem; margin:0 0 .4rem; display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; overflow-wrap:anywhere; }
.pr-domaene > .raekke{ flex-wrap:wrap; padding:.2rem 0; }
.pr-dns{ width:100%; border-collapse:collapse; font-size:.85rem; table-layout:fixed; margin:.4rem 0; }
.pr-dns th, .pr-dns td{ text-align:left; vertical-align:top; padding:.3rem .4rem; border-bottom:1px solid var(--kant); overflow-wrap:anywhere; }
.pr-dns th:nth-child(1), .pr-dns td:nth-child(1){ width:4.5rem; }
.pr-dns th:nth-child(5), .pr-dns td:nth-child(5){ width:7rem; }
.pr-dns .knap{ padding:.1rem .5rem; font-size:.75rem; margin-top:.2rem; }
@media (max-width:640px){
  .pr-dns, .pr-dns tbody, .pr-dns tr, .pr-dns td{ display:block; width:auto !important; }
  .pr-dns thead{ display:none; }
  .pr-dns tr{ border:1px solid var(--kant); border-radius:.4rem; margin:.5rem 0; padding:.3rem .4rem; }
  .pr-dns td{ border:0; padding:.15rem 0; }
  .pr-dns td::before{ content:attr(data-kolonne) ': '; color:var(--daempet); }
}
.pr-forbrug{ display:grid; gap:.6rem; margin:.5rem 0; }
.pr-forbrug progress{ width:100%; height:.7rem; }
.pr-maillogo{ flex-wrap:wrap; }
.pr-maillogo img, .pr-maillogo-vis{ max-height:3rem; max-width:12rem; border:1px solid var(--kant); border-radius:.3rem; background:#fff; }