/* ==========================================================================
   1. AUTOCOMPLETE CONTAINERS (Søgefelter)
   ========================================================================== */
.autocomplete-container,
.autocomplete-container-internet,
.autocomplete-container-wp-popup-internet {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 2px solid #E5E5E5;
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.autocomplete-container,
.autocomplete-container-wp-popup-internet {
    max-width: 30em;
    margin: 0 auto;
}

.autocomplete-container:hover,
.autocomplete-container-internet:hover,
.autocomplete-container-wp-popup-internet:hover {
    border-color: #FFB380;
}

.autocomplete-container:focus-within,
.autocomplete-container-internet:focus-within,
.autocomplete-container-wp-popup-internet:focus-within {
    border-color: #FF6600;
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.12), 0 4px 16px rgba(255, 102, 0, 0.15);
}

/* ==========================================================================
   2. ICONS I SØGEFELTER
   ========================================================================== */
.autocomplete-container .address-icon,
.autocomplete-container-internet .address-icon-internet,
.autocomplete-container-wp-popup-internet .address-icon-wp-popup-internet {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    font-size: 19px !important;
    color: #FF6600 !important;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.autocomplete-container:focus-within .address-icon,
.autocomplete-container-internet:focus-within .address-icon-internet,
.autocomplete-container-wp-popup-internet:focus-within .address-icon-wp-popup-internet {
    transform: scale(1.12) !important;
}

/* Rødt ikon mens brugeren skriver, men endnu ikke har valgt en adresse fra listen (se
   KDSAutocomplete.setActiveState i kds-autocomplete.js) */
.autocomplete-container.is-typing .address-icon,
.autocomplete-container-internet.is-typing .address-icon-internet,
.autocomplete-container-wp-popup-internet.is-typing .address-icon-wp-popup-internet {
    color: #dc2626 !important;
}

/* ==========================================================================
   2b. "ADRESSE"-LABEL I SØGEFELTET
   ========================================================================== */
.address-field-label,
.address-field-label-internet,
.address-field-label-wp-popup-internet {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block !important;
    position: static !important;
    text-align: left !important;
    font-size: 12px !important;
    color: #8A8A8A !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    pointer-events: none;
}

/* ==========================================================================
   2c. "VÆLG FRA LISTEN"-HJÆLPETEKST (vises inde i selve søgefeltet, under adressen)
   ========================================================================== */
.address-field-hint {
    grid-column: 1 / -1;
    grid-row: 3;
    display: none;
    text-align: left;
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2px;
}

.autocomplete-container.is-typing .address-field-hint,
.autocomplete-container-internet.is-typing .address-field-hint,
.autocomplete-container-wp-popup-internet.is-typing .address-field-hint {
    display: block;
}

/* Anker-div som kds-autocomplete.js indsætter dynamisk lige efter input, til at
   positionere dropdown-forslagene i. Tages ud af grid-flowet og fastgøres til
   selve kortets yderste bundkant (position:absolute; top:100%), så dropdown'en
   "svæver" korrekt under hele kortet med den tiltænkte lille afstand (margin-top
   på .dawa-autocomplete-suggestions) - uanset hvor meget padding kortet har. */
.dawa-suggestions-anchor {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 0 !important;
}

/* ==========================================================================
   3. INPUT FELTER
   ========================================================================== */
.autocomplete-container input,
.autocomplete-container-internet input,
.autocomplete-container-wp-popup-internet input {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #333B4B !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.autocomplete-container input::placeholder,
.autocomplete-container-internet input::placeholder,
.autocomplete-container-wp-popup-internet input::placeholder {
    color: #9CA3AF !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

/* "Søg"-knap under adressefeltet - aktiverer/fokuserer feltet. Rent visuelt signal om at
   feltet er interaktivt (den udløser ikke selv en søgning - det gør valg af forslag). */
.address-activate-btn {
    display: block;
    width: 100%;
    max-width: 30em;
    margin: 12px auto 0;
    padding: 14px;
    background: #FF6600;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Varela Round', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.address-activate-btn:hover {
    background: #e65c00;
}

.address-activate-btn:active {
    transform: scale(0.98);
}

/* Knappen slår nu adressen op, før den kan søge (se KDSAutocomplete.submit). Det tager
   typisk et par hundrede millisekunder - uden en synlig kvittering føles klikket dødt,
   og brugeren klikker igen. */
.autocomplete-container.is-submitting + .address-activate-btn,
.autocomplete-container-internet.is-submitting + .address-activate-btn,
.autocomplete-container-wp-popup-internet.is-submitting + .address-activate-btn {
    background: #e65c00;
    cursor: progress;
}

/* Knappen ligger på en mørk hero, hvor den almindelige browser-fokusring drukner. */
.address-activate-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* ==========================================================================
   4. DAWA SUGGESTIONS (Dropdown)
   ========================================================================== */
.dawa-autocomplete-suggestions {
    margin: 8px 0 0;
    padding: 6px;
    text-align: left;
    background: #ffffff;
    border: 2px solid #E5E5E5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    position: absolute !important;
    /* -2px, fordi absolut positionering regner fra feltets PADDING-boks: med left/right: 0
       lander listen inden for feltets 2px fokus-kant, som så stikker ud som en orange stribe
       langs begge sider af dropdownen. De 2px trækker listen ud på kantens yderside i stedet. */
    left: -2px;
    right: -2px;
    z-index: 9;
    max-height: 240px;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 16px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #D0D5DD transparent;
}

/* Browserens standard-scrollbar tegner et ugennemsigtigt spor med FIRKANTEDE hjørner
   oven i dropdownens afrunding, så det øverste og nederste højre hjørne kommer til at se
   firkantet ud. Et gennemsigtigt spor lader den afrundede hvide baggrund komme til syne
   hele vejen rundt, og selve gribeklodsen holdes inde fra kanten med en gennemsigtig
   kant + background-clip, så den ikke rører afrundingen. */
.dawa-autocomplete-suggestions::-webkit-scrollbar {
    width: 10px;
}

.dawa-autocomplete-suggestions::-webkit-scrollbar-track,
.dawa-autocomplete-suggestions::-webkit-scrollbar-corner {
    background: transparent;
}

.dawa-autocomplete-suggestions::-webkit-scrollbar-thumb {
    background-color: #D0D5DD;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.dawa-autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
    background-color: #98A2B3;
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    color: #333;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    transition: background 0.15s;
}

.dawa-autocomplete-suggestion-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF6600;
    flex-shrink: 0;
}

/* .is-active sættes både af piletasterne og af mouseenter (se KDSAutocomplete.setActiveIndex),
   så mus og tastatur peger på det samme punkt og ikke kan fremhæve hver sit på én gang. */
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.dawa-selected,
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.is-active,
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:hover {
    background: #FFF3EB;
    color: #b34700;
}

/* Fokus bliver i selve inputfeltet under tastaturnavigation (ARIA-mønsteret for en
   combobox), så det markerede punkt kan ikke vise en fokusring. Markeringen sker derfor
   med baggrund + halvfed tekst + en større prik - bevidst uden nogen form for kant eller
   bjælke, som ville tilføje en ekstra grafisk form i en i forvejen enkel liste. */
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.is-active {
    font-weight: 600;
}

/* transform frem for width/height: en ændret bredde ville skubbe teksten 2px til højre
   for hvert punkt, man piler henover, så listen sitrer under navigationen. */
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.is-active .dawa-autocomplete-suggestion-dot {
    transform: scale(1.4);
}

.dawa-autocomplete-suggestion-dot {
    transition: transform 0.12s ease-out;
}

/* ==========================================================================
   5. POPUP MODALS & OVERLAYS
   ========================================================================== */
body.disable-background {
    pointer-events: none !important;
    user-select: none !important;
    overflow: hidden;
    position: relative;
}

.div-popup-modal,
.div-popup-modal * {
    pointer-events: auto !important;
    user-select: auto !important;
}

.page-overlay {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9990;
}

/* ==========================================================================
   6. FILTER PROVIDERS
   ========================================================================== */
.dropdown-menu {
    z-index: 10 !important;
}   

.site-footer {
    z-index: 0 !important;
}

.all-filters-elements {
    position: relative;
    /* Skjult som standard, indtil et søgeresultat rent faktisk viser filtre (fn_show_filter) -
       forhindrer at filterbjælken glimter synlig ved sideindlæsning, før JS når at skjule den. */
    display: none;
}

.container-sort-by {
    display: none;
}

/* KANTET STIL FOR DROPDOWN */
.filter-header-dropdown {
    background-color: white;
    border: 1px solid #D0D5DD;
    padding: 10px 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
    font-weight: 600;
    color: #333;
    border-radius: 0; /* Ingen afrunding */
}

.filter-header-dropdown:hover {
    background-color: #f0f9ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border-color: #60a5fa;
    color: #1d4ed8;
}

/* Sikrer at chevron-ikonet aldrig presses ud af syne, hvis label-teksten fylder mere
   end forventet (fx på et smallere skærmbillede, selv efter boksen er gjort bredere). */
.filter-header-dropdown svg {
    flex-shrink: 0;
}

/* ---- SORTERING (adskilt fra filtrene) ----
   Sorteringen brugte tidligere nøjagtig samme .filter-header-dropdown-udseende som de fire
   filtre ved siden af. Men de to gør vidt forskellige ting: et filter FJERNER pakker fra
   listen, en sortering OMARRANGERER dem uden at fjerne noget. Når begge er en hvid boks med
   en chevron i samme række, kan brugeren ikke vide, hvad et klik kommer til at gøre.
   Adskillelsen sker med tre ting, ikke kun farve: et ikon (retningen på listen), et fast
   "Sortér:"-præfiks (ordet siger hvad boksen er), og en aktiv tilstand. */
.nt-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    color: #333333;
}

.nt-sort-icon {
    color: #667085;
    flex-shrink: 0;
    transition: color 0.2s ease-in-out;
}

/* Præfikset er bevidst nedtonet: det er en etiket, ikke selve værdien. Brugerens blik skal
   lande på hvad der er valgt, ikke på ordet "Sortér" igen og igen. */
.nt-sort-prefix {
    color: #667085;
    font-weight: 500;
    flex-shrink: 0;
}

#sort-label {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Aktiv tilstand: listen står ikke længere i sin standardrækkefølge. Det skal kunne ses uden
   at åbne dropdownen - ellers kan man scrolle en omsorteret liste igennem i den tro, at det
   er vores anbefalede rækkefølge. Orange frem for det blå hover, så tilstanden ikke forveksles
   med "musen er her lige nu". */
.nt-sort-toggle.is-active {
    border-color: #FF6600;
    background-color: #FFF8F3;
}
.nt-sort-toggle.is-active .nt-sort-icon,
.nt-sort-toggle.is-active #sort-label {
    color: #b34700;
}
/* Hover-reglen for .filter-header-dropdown farver ellers hele boksen blå og ville slette
   den aktive tilstand, i præcis det øjeblik brugeren peger på den for at ændre den. */
.nt-sort-toggle.is-active:hover {
    background-color: #FFF3EB;
    border-color: #FF6600;
    color: #b34700;
}

/* Punkterne i sorteringsmenuen. Baggrunden sad før på ALLE punkter (bg-[#F9FAFB]), så det
   valgte ikke kunne skelnes fra de øvrige - åbnede man menuen for at kontrollere sit valg,
   var der intet at se. */
.nt-sort-option {
    background-color: #ffffff;
    transition: background-color 0.15s ease-in-out;
}
.nt-sort-option:hover {
    background-color: #F9FAFB;
}
.nt-sort-option.is-selected {
    background-color: #FFF3EB;
}
.nt-sort-option.is-selected label {
    color: #b34700 !important;
    font-weight: 600;
}

/* Simpelt tekst-link til at rydde alle aktive filtre på én gang - vises kun når der
   rent faktisk er filtre valgt (se fn_generate_filter_badges). */
.nt-clear-filters-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #004080;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.nt-clear-filters-link:hover {
    color: #FF6600;
}

/* Lille "trust signal", der viser hvornår priserne sidst blev efterset - udfyldes af
   fn_show_prices_fetched_note, når et søgeresultat rent faktisk vises. Sidder nu inde i
   hero'ens resultatkort (se afsnit 10 og shortcoden nettjek_search_status) og skal derfor
   læses på blå baggrund, ikke på hvid. Farven er dæmpet i forhold til resultatteksten -
   den skal kunne findes, ikke konkurrere med "vi fandt X tilbud". */
.nt-prices-fetched-note {
    font-size: 13px;
    /* Står på sidens lyse baggrund, ikke på hero'ens blå - derfor mørk grå og ikke den
       lyseblå sekundærfarve, hero'ens egne undertekster bruger. */
    color: #616161;
    display: none;
    /* Venstrestillet og flugter med Sortér-boksen lige nedenunder. Under hero'en er vi
       tilbage i sidens venstrestillede indholdsområde - centreringen hører til inde i
       hero'en, som er et banner og har sin egen akse. */
    margin: 0 0 10px 0;
}

/* ==========================================================================
   6b. TAILWIND-ERSTATNING (håndskrevet CSS for de utility-klasser, der reelt
   bruges i pluginet - erstatter cdn.tailwindcss.com, som genererer CSS med
   JavaScript EFTER siden er indlæst og derfor gav et synligt "ustylet" glimt
   ved sideindlæsning. Se nettjek24-integration.php for fjernelse af CDN-scriptet.)
   ========================================================================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }
.absolute { position: absolute; }
.relative { position: relative; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.self-start { align-self: flex-start; }

.w-full { width: 100%; }
.h-fit { height: fit-content; }
[class~="w-[160px]"] { width: 160px; }
[class~="w-[190px]"] { width: 190px; }
[class~="w-[36px]"] { width: 36px; }
[class~="h-[36px]"] { height: 36px; }
[class~="h-[42px]"] { height: 42px; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.p-2 { padding: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
[class~="px-[14px]"] { padding-left: 14px; padding-right: 14px; }
[class~="px-[24px]"] { padding-left: 24px; padding-right: 24px; }
[class~="px-[28px]"] { padding-left: 28px; padding-right: 28px; }
[class~="py-[10px]"] { padding-top: 10px; padding-bottom: 10px; }
[class~="py-[8px]"] { padding-top: 8px; padding-bottom: 8px; }
[class~="top-[110%]"] { top: 110%; }
.left-0 { left: 0; }

.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
[class~="border-[#D0D5DD]"] { border-color: #D0D5DD; }
[class~="border-[#EAECF0]"] { border-color: #EAECF0; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }

.bg-white { background-color: #ffffff; }
[class~="bg-[#004080]"] { background-color: #004080; }
[class~="bg-[#F9FAFB]"] { background-color: #F9FAFB; }
.bg-slate-50 { background-color: #f8fafc; }
[class~="text-[#182230]"] { color: #182230; }
[class~="text-[#333333]"] { color: #333333; }
[class~="text-[#FFF]"] { color: #FFFFFF; }
.text-white { color: #ffffff; }
.text-slate-900 { color: #0f172a; }
[class~="hover:bg-[#004080]"]:hover { background-color: #004080; }
.hover\:opacity-80:hover { opacity: 0.8; }
.active\:scale-90:active { transform: scale(0.9); }
.active\:scale-95:active { transform: scale(0.95); }

.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-nowrap { white-space: nowrap; }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.06); }
.cursor-pointer { cursor: pointer; }
[class~="z-[1]"] { z-index: 1; }

@media not all and (min-width: 768px) {
    .max-md\:pt-\[48px\] {
        padding-top: 160px;
    }
    [class~="max-md:flex-col"] { flex-direction: column; }
    [class~="max-md:w-full"] { width: 100%; }
    [class~="max-md:fixed"] { position: fixed; }
    [class~="max-md:right-0"] { right: 0; }
    [class~="max-md:top-0"] { top: 0; }
    [class~="max-md:z-[10]"] { z-index: 10; }
    [class~="max-md:p-[24px]"] { padding: 24px; }
    [class~="max-md:bg-[#FAFAFA]"] { background-color: #FAFAFA; }
    [class~="max-md:h-screen"] { height: 100vh; }
    [class~="max-md:max-w-[80%]"] { max-width: 80%; }
    [class~="max-md:shadow-[0_35px_60px_200px_rgba(0,0,0,0.3)]"] { box-shadow: 0 35px 60px 200px rgba(0,0,0,0.3); }
    [class~="max-md:hidden"] { display: none; }
}

@media (min-width: 768px) {
    [class~="md:hidden"] { display: none; }
}

/* Grundtilstand uden for mobil-blokken nedenfor: begge elementer hører KUN til drawer'en.
   Uden det her ville "Vis resultater"-knappen stå og flyde midt på desktop-siden, da alle
   dens regler ellers kun findes inde i @media (max-width: 767px). */
.nt-filter-overlay,
.nt-filter-apply {
    display: none;
}

/* ==========================================================================
   6c. FILTER-DRAWER PÅ MOBIL
   Panelet var bygget udelukkende af utility-klasserne ovenfor, og det gik galt tre steder.
   Dette blok står bevidst EFTER dem og med højere specificitet (#id + klasse), så det vinder.

   1. padding-top forsvandt. .max-md\:pt-\[48px\] (padding-top: 160px) og
      [class~="max-md:p-[24px]"] (padding: 24px) har begge specificitet (0,1,0), og
      shorthand'en står sidst - så den nulstillede de 160px, der skulle holde panelet fri af
      det faste sidehoved. Resultat: lukkeknappen lå under headeren og kunne ikke rammes.
      Løsningen her er ikke mere padding, men z-index: et modalt panel hører OVEN PÅ headeren,
      ikke ned under den. Så er der heller ingen headerhøjde at gætte på.
   2. Ingen scroll. height: 100vh uden overflow betyder, at alt under skærmkanten er
      uopnåeligt - og en åben dropdown nederst i panelet blev klippet af.
   3. Ingen rigtig overlay. Baggrunden var simuleret med en box-shadow med 200px spread,
      hvilket hverken kan klikkes for at lukke eller spærrer for siden bagved.
   ========================================================================== */
@media (max-width: 767px) {
    #filter-section.filter-container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 88%;
        max-width: 360px;
        /* dvh frem for vh: på mobil regner vh med browserens adresselinje som skjult, så
           bunden af panelet - hvor "Vis resultater" sidder - havner uden for skærmen. */
        height: 100dvh;
        max-height: 100dvh;
        /* Over sidehovedet. Tallet var 9995, valgt for at slå .page-overlay på 9990 - men
           sidens klæbrige sidehoved er en Elementor-SEKTION (ikke <header>) med
           position: fixed og z-index 9999, og den slog panelet. Den bliver først fixed, når
           man scroller, så fejlen viste sig kun efter at brugeren var rullet ned til
           resultaterne: dér lå lukkeknappen under sidehovedet og kunne ikke rammes.
           Samme lektie som søgepanelet lærte - se .nt-search-overlay på 100000 længere nede. */
        z-index: 100001;
        /* Bundpolstring giver plads til den faste "Vis resultater"-knap, så det sidste filter
           ikke kan gemme sig bagved den. */
        padding: 20px 20px 100px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -8px 0 32px rgba(16, 24, 40, 0.25);
        background-color: #FAFAFA;
    }

    /* Overlay bag panelet. Et tryk udenfor lukker - det er den mest brugte lukkegestus på
       mobil, og indtil nu var X'et den eneste vej ud. */
    .nt-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, 0.45);
        /* Skal også over det klæbrige sidehoved (9999) - ellers ligger headeren oven på
           mørklægningen og ser ud til at være det eneste aktive på siden. */
        z-index: 100000;
        display: none;
    }
    .nt-filter-overlay.is-open {
        display: block;
    }

    /* Fast bundknap. Uden den skal brugeren scrolle helt op igen for at komme ud af panelet,
       efter at have sat sit sidste filter i bunden. Knappen lukker blot - filtrene er allerede
       anvendt løbende (se fn_toggle_checkbox), så den bekræfter ikke noget, den viser resultatet. */
    .nt-filter-apply {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 88%;
        max-width: 360px;
        /* Øverst af de tre: knappen skal kunne rammes oven på både panel og mørklægning. */
        z-index: 100002;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid #EAECF0;
        box-sizing: border-box;
        display: none;
    }
    .nt-filter-apply.is-open {
        display: block;
    }
    .nt-filter-apply button {
        width: 100%;
        padding: 14px;
        background: #004080;
        color: #ffffff;
        border: none;
        border-radius: 12px;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    /* Panelets egen overskriftsrække - X'et stod før alene uden nogen forklaring på, hvad
       panelet er. */
    .nt-filter-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .nt-filter-drawer-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: #182230;
    }

    /* Siden bagved må ikke scrolle med, mens panelet er åbent. */
    body.nt-filter-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   7. LOADER ANIMATION
   ========================================================================== */
.loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.dots {
    display: flex;
    gap: 5px;
}

.dot {
    width: 15px; 
    height: 15px; 
    border-radius: 50%;
    background-color: #333; 
    animation: dotBounce 1s infinite, colorChange 1.5s infinite;
}

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes colorChange {
    0%   { background-color: #ff3d00; }
    50%  { background-color: #ffeb3b; }
    100% { background-color: #4caf50; }
}

/* ==========================================================================
   9. RENE HTML KORT (Høj Performance, ingen Elementor-støj)
   ========================================================================== */
.nt-sep {
    text-align: center;
    border-bottom: 2px solid #CFEDFA;
    line-height: 0.1em;
    margin: 40px 0 30px;
}
.nt-sep span {
    background: #f4f5f7;
    padding: 0 15px;
    color: #004080;
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 600;
}

/* Kun for skærmlæsere: target="_blank" bliver ikke annonceret af sig selv, så uden det her
   ville et klik uventet lande i et nyt vindue. Ikonet er aria-hidden af samme grund -
   det taler til de seende, teksten her til resten. */
.nt-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nc-btn-outline { background: transparent; border: 2px solid #004080; color: #004080; padding: 10px 30px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.nc-btn-outline:hover { background: #004080; color: #fff; }

/* ---- NEDTONEDE (IKKE-PARTNER) KORT: FORKLARENDE LINJE OG TOOLTIP ----
   Montserrat, ikke Varela Round: de nedtonede kort skal aflæses som SAMME slags kort som
   partnerkortene, bare med mindre vægt - og et skiftende skriftsnit er den ene forskel, øjet
   opdager allerhurtigst. Selve kortet ligger i afsnit 18 (.nt2-card.is-muted); her er kun
   den forklarende linje og dens tooltip, som markup'en stadig bygger i JS. */
.nt-muted-note {
    position: relative;
    font-size: 12px; line-height: 1.4; color: #8A8A8A;
    font-family: 'Montserrat', sans-serif;
    display: flex; align-items: center; gap: 6px;
}

/* ---- FORKLARENDE TOOLTIP ----
   "Ikke tilgængelig gennem os" rejser uundgåeligt spørgsmålet "hvorfor står den her så?".
   Svaret hører ikke hjemme på kortet - det ville være tre linjer brødtekst på det kort i
   listen, der betyder mindst. Derfor et ikon, der kun folder forklaringen ud på forlangende.
   Knap frem for et rent span: en <button> kan nås og udløses med tastatur, og et tryk på
   mobil giver den fokus - så :hover OG :focus-within dækker mus, tastatur og touch. */
.nt-tooltip-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    padding: 0; border: none; background: transparent;
    color: #98A2B3; font-size: 13px; line-height: 1;
    cursor: pointer; border-radius: 50%;
    transition: color 0.15s ease-in-out;
}
.nt-tooltip-btn:hover, .nt-tooltip-btn:focus-visible { color: #004080; }
.nt-tooltip-btn:focus-visible { outline: 2px solid #004080; outline-offset: 2px; }

.nt-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 20;
    width: 250px;
    max-width: 80vw;
    background: #333B4B;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22);
    /* visibility frem for display:none, så den kan tone frem - og så den stadig er
       udenfor tilgængelighedstræet, når den er skjult. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s;
    pointer-events: none;
}

/* Den lille trekant peger ned mod ikonet. */
.nt-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #333B4B;
}

.nt-tooltip-btn:hover + .nt-tooltip,
.nt-tooltip-btn:focus + .nt-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .nt-tooltip { transition: none; }
}
/* På mobil står noten centreret i bunden af kortet, så tooltip'en centreres over den i
   stedet for at hænge ud til venstre. */
.nt2-m-card .nt-tooltip {
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
}
.nt2-m-card .nt-tooltip::after {
    left: 50%;
    margin-left: -6px;
}


/* ==========================================================================
   10. SØGE-STATUS KORT (venstre: tekst/fremgang/resultat, højre: adressekort)
   Selvstændigt UI, uafhængigt af Elementor-widgets - se shortcode
   nettjek_search_status og fn_show_search_status_* i helper-functions.js.
   Bygget til at sidde på en mørk/farvet hero-baggrund (se nettjek-hero-section) -
   venstre kolonne har derfor lys tekst, mens adressekortet til højre er sin egen
   hvide boks og altid har mørk tekst uanset baggrunden bag den.
   ========================================================================== */
.nt-search-status,
.nt-search-status * {
    font-family: 'Montserrat', sans-serif !important;
}

.nt-search-status {
    max-width: 1000px;
    margin: 0 auto 24px auto;
    text-align: left;
}

.nt-search-status-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.nt-search-status-left {
    flex: 1 1 260px;
    min-width: 0;
}

/* JS sætter kun "display: flex" inline (fn_show_search_status_results) - retningen på
   den flex skal styres herfra, ellers lægger browseren tekst-rækken og pills ved siden
   af hinanden (default row) i stedet for tekst ovenpå og pills nedenunder. */
.nt-search-result-heading {
    flex-direction: column;
    align-items: flex-start;
}

/* 17px var sat som en billedtekst, ikke som et resultat. I en hero med 1100px
   indholdsbredde forsvandt "Vi har fundet 26 tilbud fra 16 udbydere" - selve svaret på
   det, brugeren kom efter - fuldstændig ved siden af det hvide adressekort. 26px gør den
   til hero'ens tydeligste element uden at nå op på siden-overskriftens 43px, som den
   afløser. Mobil skruer ned igen i afsnit 12. */
.nt-search-progress-heading,
.nt-search-result-heading .nt-result-text {
    font-size: 26px;
    /* 600 og ikke 700. Lys tekst på mørk baggrund "bløder" optisk ud i baggrunden
       (irradiation) og ser tungere ud, end den er - jo federe snit, jo mere lukker
       bogstavernes indvendige huller (a, e, o) sig. Tommelfingerreglen er ét snit
       lettere på mørk bund end på lys. Fed skrift skal desuden nu bruges til NOGET,
       se strong-reglen nedenfor. */
    font-weight: 600;
    color: #ffffff;
    /* Uden det her renderer WebKit lys-på-mørk med subpixel-antialiasing, som lægger
       endnu en anelse vægt på hver streg oveni. Det er den samme fejl set fra
       renderingens side. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 4px;
    /* Fast linjehøjde, der er nøjagtig lige så høj som .nt-result-icon. Så flugter
       flueben og første tekstlinje af sig selv under align-items: flex-start - også
       når teksten brydes til to linjer, hvor ikonet skal blive på den FØRSTE linje og
       ikke midt i blokken. Ændres den ene værdi, skal den anden følge med. */
    line-height: 32px;
}

/* fn_show_search_status_results pakker de to tal i <strong> - men da hele sætningen stod
   i 700, og browserens standard-fed ER 700, gjorde de tags ingenting: markup'en fremhævede
   tallene, uden at noget blev fremhævet. Nu bærer de forskellen, og "26" og "16" - det
   eneste i sætningen, der faktisk skifter fra søgning til søgning - springer i øjnene. */
.nt-search-result-heading .nt-result-text strong {
    font-weight: 700;
}

/* "Henter stadig Telenor…" under resultatoverskriften, når listen er vist, mens en udbyder
   endnu ikke har svaret. Se fn_set_search_status_pending().

   Den skal være til at læse og ikke til at bemærke: resultatet er svaret, det her er en
   fodnote om, at der kan komme en linje mere. Derfor 13px og dæmpet - samme vægt som
   progress-subteksten ovenover, som den i praksis afløser. Den pulserer bevidst ikke; en
   animation ville trække øjet væk fra den liste, brugeren netop har fået. */
.nt-result-pending {
    font-size: 13px;
    font-weight: 400;
    color: #cfe4f7;
    margin-top: 6px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nt-search-progress-subtext {
    font-size: 13px;
    color: #e6f2ff;
    margin-bottom: 10px;
}

.nt-progress-track {
    width: 100%;
    max-width: 320px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    overflow: hidden;
}

.nt-progress-fill {
    height: 100%;
    width: 0%;
    background: #ff8c00;
    border-radius: 999px;
    transition: width 0.3s ease-out;
}

/* Én linje, altid. Seks fliser à 56px med 10px mellemrum kræver 386px, og en telefon på
   375px har kun 345px indvendigt - så rækken knækkede i to, og logostrippen blev to etager
   i en boks, der skal læses på et par sekunder.

   Fliserne krymper i stedet for at wrappe: flex-basis holder dem på 56px, hvor der er plads
   (uændret på desktop), og lader dem skrumpe proportionalt, når der ikke er. Mellemrummet
   følger med via clamp. Ingen breakpoints - det virker fra 320px og opefter af sig selv,
   også hvis der en dag kommer en udbyder mere i strippen. */
.nt-progress-logos {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(4px, 2vw, 10px);
    margin-top: 14px;
}

/* 44px var for lille til pointen: brugeren skal kunne GENKENDE de udbydere, vi er ved at
   tjekke - det er hele grunden til at vise logoer frem for en anonym bjælke. Et logo som
   Hiper eller Fastspeed er typisk bredt og lavt, så inde i en 44px-flise med 6px padding
   blev selve mærket kun ~15px højt. 56px med lidt mere luft giver mærket plads nok til at
   kunne aflæses på et par sekunder, mens rækken stadig er en detalje og ikke et galleri. */
.nt-progress-logo-tile {
    position: relative;
    /* 56px hvor der er plads, mindre hvor der ikke er - se .nt-progress-logos ovenfor.
       min-width: 0 er nødvendig: flex-elementer nægter som udgangspunkt at krympe under
       deres indhold, og uden den ville rækken flyde ud over kanten i stedet for at tilpasse
       sig. aspect-ratio holder flisen kvadratisk, mens bredden ændrer sig, så height ikke
       skal sættes til et fast tal. */
    flex: 0 1 56px;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Skrumper med flisen, så selve mærket beholder mest muligt af pladsen. */
    padding: clamp(5px, 1.6vw, 8px);
    box-sizing: border-box;
    opacity: 0.45;
    filter: grayscale(1);
    animation: nt-progress-logo-pulse 1.6s ease-in-out infinite;
}

.nt-progress-logo-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes nt-progress-logo-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.75; }
}

.nt-progress-logo-tile.nt-progress-logo-done {
    opacity: 1;
    filter: grayscale(0);
    animation: none;
}

.nt-progress-logo-status {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: #16a34a;
    /* Hvid ring, så fluebenet ikke smelter sammen med et mørkt logo bag hjørnet. */
    box-shadow: 0 0 0 2px #ffffff;
}

.nt-progress-logo-tile.nt-progress-logo-done .nt-progress-logo-status {
    display: flex;
}

.nt-progress-logos-note {
    margin-top: 10px;
    font-size: 12px;
    color: #e6f2ff;
}

.nt-result-text-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Højden matcher tekstens linjehøjde præcist (32px, se ovenfor) - det er hele pointen.
   Tidligere var ikonet 28px høj med margin-top: 2px som kompensation, men det tal var
   gættet, ikke regnet, og satte cirklen ~4px for lavt i forhold til den sætning, den
   hører til. To lige høje elementer på flex-start behøver ingen margin. */
.nt-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #004080;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
}

.nt-search-result-heading.nt-result-heading-empty .nt-result-icon {
    background: #FFF3E0;
    color: #FF6600;
}

.nt-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.nt-tech-pill {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.nt-tech-pill:hover {
    background: #ffffff;
    color: #004080;
    border-color: #ffffff;
}

/* Skyggen var 0 15px 40px / 35%: så stor og så mørk, at den på den blå hero blev en grå
   sky under kortet frem for en kant, øjet kan aflæse. En strammere skygge giver kortet
   den samme løftede fornemmelse uden at smitte af på baggrunden. */
.nt-address-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 32, 64, 0.18);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 420px;
    min-width: 340px;
}

/* Stedsnålen - samme ikon og samme orange som i søgefeltet (.address-icon), så kortet
   aflæses som resultatet af det, brugeren tastede, og ikke som en anonym hvid boks. */
.nt-address-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #FF6600;
}

.nt-address-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0;
    min-width: 0;
}

.nt-address-label {
    font-size: 12px;
    line-height: 1.3;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.nt-address-value {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: #333B4B;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.nt-address-value:hover {
    color: #004080;
    text-decoration-color: currentColor;
}

/* Diskret "ret adresse"-ikon i stedet for en fuld knap - placeret som et ledende ikon
   til venstre for hele adresseblokken. Klik-fladen (32px) er bevidst større end selve
   ikonet (16px), og hover/focus giver en tydelig cirkulær baggrund, så det stadig er
   let at opdage og ramme. Selve adresseteksten (.nt-address-value) er også klikbar og
   fungerer som en større, mere synlig genvej til det samme. */
.nt-address-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.nt-address-edit-btn:hover,
.nt-address-edit-btn:focus-visible {
    color: #004080;
    background-color: #EFF8FF;
}

.nt-address-edit-wrap {
    position: relative;
}

.nt-address-edit-input {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #333B4B;
    border: 1.5px solid #D0D5DD;
    border-radius: 8px;
    padding: 6px 8px;
    box-sizing: border-box;
    outline: none;
}
.nt-address-edit-input:focus {
    border-color: #FF6600;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}

/* --------------------------------------------------------------------------
   SØGE-FASEN (body.nt-searching): ét lodret, centreret spor
   Når søgningen starter, skjuler hero'en sit eget søgefelt - men brugerens blik
   er stadig forankret dér, hvor feltet stod: midt på siden. Den brede to-kolonne-
   opsætning nedenfor ville tvinge øjet ~250px til venstre i præcis det øjeblik,
   ankeret forsvinder, og lægge det tunge hvide adressekort dér, hvor blikket i
   forvejen står - så bekræftelsen af en allerede kendt adresse råber højere end
   selve fremdriften. Derfor stables rækken lodret og centreres i denne fase, og
   adressen skrumper til en kompakt chip.
   To-kolonne-visningen bruges stadig ved resultatet (body.nt-has-results), hvor
   der reelt er to ting at vise side om side.
   -------------------------------------------------------------------------- */
body.nt-searching .nt-search-status {
    /* Kun venstre/højre margin sættes - bundmargin styres af hero'ens egen CSS. */
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.nt-searching .nt-search-status-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

body.nt-searching .nt-search-status-left {
    flex: 0 1 auto;
    width: 100%;
}

body.nt-searching .nt-progress-track {
    margin-left: auto;
    margin-right: auto;
}

body.nt-searching .nt-progress-logos {
    justify-content: center;
}

/* order: -1, fordi adressen skal læses FØR "Henter tilbud..." - i markup'en står
   adressekortet sidst, da resultatvisningen vil have det ude til højre. */
body.nt-searching .nt-address-card {
    order: -1;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    padding: 5px 6px 5px 14px;   /* Nålen leder nu, blyantsknappen afslutter - derfor byttet om. */
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 32, 64, 0.18);
}

/* I chip-form er "ADRESSE"-etiketten overflødig - teksten aflæses som en adresse
   i sig selv, og de to linjer ville gøre pillen dobbelt så høj. */
body.nt-searching .nt-address-label {
    display: none;
}

body.nt-searching .nt-address-info {
    flex-direction: row;
    align-items: center;
}

body.nt-searching .nt-address-value {
    font-size: 14px;
}

body.nt-searching .nt-address-edit-btn {
    width: 26px;
    height: 26px;
    font-size: 14px;
}

/* Chippen er shrink-to-fit, så uden en min-bredde ville inline-redigering af
   adressen foregå i et felt på bredde af den gamle adressetekst. */
body.nt-searching .nt-address-edit-wrap {
    min-width: 240px;
}

@media (max-width: 640px) {
    /* flex-basis følger hovedaksen, og den skifter retning her (row -> column) - uden disse
       overrides ville .nt-search-status-left og .nt-address-card's brede-tal (260px/420px)
       blive fortolket som HØJDE i stedet for bredde og efterlade store tomme områder. */
    .nt-search-status-row {
        flex-direction: column;
        gap: 16px;
    }
    .nt-search-status-left {
        flex: 1 1 auto;
        width: 100%;
    }
    .nt-address-card {
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
    }
}
/* ==========================================================================
   11. TEKNOLOGI-SEPARATORER ("Fibernet", "Coax (Kabel-tv)", "5G Internet")
   Marginerne lå tidligere som inline style i nettjek_resultater-shortcoden, hvor de
   ikke kunne strammes op på mobil - inline vinder over ethvert media query. JS rører
   kun display (fn_show_separator/fn_hide_all_separator), så afstandene hører hjemme her.
   ========================================================================== */
.nt-tech-separator {
    margin: 40px 0 30px 0;
}

/* ==========================================================================
   12. MOBIL-OPSTRAMNING AF RESULTATVISNINGEN
   På desktop er de store afstande luft; på en 375px-skærm er de spildplads. Mellem
   hero'ens bund og det første udbyderkort lå der ~135px ren luft, hvilket skubbede
   selve tilbuddene - det brugeren kom efter - under skærmkanten. Blokken her skruer
   ned for de afstande, vi selv ejer, uden at røre desktop.
   Breakpointet er 768px, så det følger hero'ens eget mobil-breakpoint på siden.
   ========================================================================== */
@media (max-width: 768px) {
    /* Resultatkortet i hero'en: teksten, pills og "priser hentet" må gerne stå tættere,
       når de alligevel læses som én blok. */
    /* De 26px fra desktop ville lægge sig over tre linjer på en 375px-skærm. Ikonets
       højde følger linjehøjden - de to skal altid være ens, ellers holder flugten
       mellem flueben og første tekstlinje ikke. */
    .nt-search-progress-heading,
    .nt-search-result-heading .nt-result-text {
        font-size: 16px;
        line-height: 24px;
    }

    .nt-result-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .nt-tech-pills {
        margin-top: 10px;
        gap: 6px;
    }

    /* Adressekortet er en bekræftelse af noget, brugeren allerede ved - det behøver ikke
       fylde 68px i højden, når skærmen er 812px høj.
       Skyggen er samtidig dæmpet fra 0 15px 40px/35%: den er kalibreret til desktop, hvor
       kortet er en smal boks, der skal løftes fri af en bred blå flade. På mobil fylder
       kortet næsten hele hero'ens bredde, og så bliver den store, mørke skygge til en grå
       udtværing langs alle fire kanter i stedet for en kant, man kan aflæse. */
    .nt-address-card {
        padding: 12px 14px;
        box-shadow: 0 4px 14px rgba(0, 32, 64, 0.20);
    }

    /* Overskrift/adresse stod 16px fra hinanden i en i forvejen høj kolonne. */
    .nt-search-status-row {
        gap: 10px;
    }

    /* Sortering og filter er ét kontrol-par og bør aflæses som ét. De havde forskellig
       højde (42px mod 40px, fordi kun sorteringen har en kant, der tæller med) og
       forskellig afrunding (8px mod 12px). Hver for sig er forskellene små nok til ikke
       at kunne udpeges - tilsammen er de præcis nok til, at rækken ser skæv ud. */
    .container-sort-by .filter-header-dropdown,
    .nt-filter-open-btn {
        height: 42px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* Højden styrer nu knappen; py-[10px] ville lægge sig oveni og gøre den 62px høj. */
    .nt-filter-open-btn {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 40/30 blev til en næsten tom skærmhøjde mellem filterbjælken og første kort.
       Topmarginen er mindre end bundmarginen med vilje: sortér/filter-rækken STYRER
       listen nedenfor, så den skal høre sammen med den - stod afstandene ens, ville
       rækken svæve lige midt imellem hero'en og resultaterne og tilhøre ingen af dem. */
    .nt-tech-separator {
        margin: 10px 0 14px 0;
    }

    /* 32px overskrift i en 300-vægt med streger på begge sider er et desktop-ornament.
       Den skal stadig kunne ses som et sektionsskel, men den skal ikke koste 42px
       lodret plads på den skærmhøjde, hvor det første kort skal nå at være med. */
    .nt-tech-separator h2 {
        font-size: 22px !important;
        padding: 0 14px !important;
    }
}

/* ==========================================================================
   13. ADRESSEN ØVERST I RESULTAT-TILSTAND PÅ MOBIL
   Rækken stables først i kolonne ved 640px (se blokken ovenfor), og først dér giver
   "øverst/nederst" mening - mellem 641 og 768px står de to kolonner stadig side om
   side, hvor et order-skift i stedet ville bytte om på venstre og højre. Derfor 640
   og ikke 768 som resten af mobil-opstramningen.

   To ting løses her:
   1. Adressekortet lå øverst under søgningen (body.nt-searching, order: -1) og sprang
      til bunden, når resultatet landede. Det var det eneste element på skærmen, der
      flyttede sig ved overgangen - og det flyttede sig hele vejen.
   2. Læserækkefølgen bliver den logiske: adressen er forudsætningen for tallet.
      "På Oktobervej 26 fandt vi 19 tilbud", ikke omvendt.

   Chip-formen fra søgefasen føres med over. Som fuldt hvidt kort ØVERST ville adressen -
   en bekræftelse af noget, brugeren selv har tastet - blive hero'ens tungeste element og
   skubbe selve resultatet ned under det. Som chip kan den aflæses og rettes uden at
   overdøve "vi har fundet 19 tilbud".
   ========================================================================== */
@media (max-width: 640px) {
    body.nt-has-results .nt-address-card {
        order: -1;
        /* Vinder over .nt-address-card { width: 100% } i 640px-blokken ovenfor, så
           chippen krymper til sit indhold i stedet for at spænde hele bredden ud. */
        width: auto;
        max-width: 100%;
        gap: 4px;
        padding: 5px 6px 5px 14px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(0, 32, 64, 0.18);
    }

    /* "ADRESSE"-etiketten er overflødig, når teksten selv aflæses som en adresse - og
       de to linjer ville gøre chippen dobbelt så høj. Samme begrundelse som i søgefasen. */
    body.nt-has-results .nt-address-label {
        display: none;
    }

    body.nt-has-results .nt-address-info {
        flex-direction: row;
        align-items: center;
    }

    body.nt-has-results .nt-address-value {
        font-size: 14px;
    }

    body.nt-has-results .nt-address-edit-btn {
        width: 26px;
        height: 26px;
    }

    /* Chippen er shrink-to-fit, så uden en min-bredde ville inline-redigering foregå i
       et felt på bredde af den gamle adressetekst. 200px frem for søgefasens 240px, så
       feltet stadig er inden for skærmkanten på en 375px-skærm. */
    body.nt-has-results .nt-address-edit-wrap {
        min-width: 200px;
    }
}

/* ==========================================================================
   14. CENTRERET HERO-INDHOLD I RESULTAT-TILSTAND PÅ MOBIL
   Søgefasen er centreret (se body.nt-searching-blokken ovenfor: ét lodret, centreret
   spor). Resultat-tilstanden var venstrestillet, så hele indholdet sprang vandret i
   samme øjeblik, resultatet landede - samme slags fejl som adressekortet, der sprang
   fra top til bund, bare på den anden akse. Nu er begge faser centreret, og overgangen
   er ren: progressbaren bliver til en resultatlinje, uden at noget flytter sig.

   Det løser samtidig de tre venstrekanter i blokken (chip, flueben+sætning, note,
   pills) ved at fjerne spørgsmålet - centreret indhold aflæses på midteraksen, ikke
   på en fælles venstrekant.

   640px og ikke 768px: rækken stables først i kolonne dér (se afsnit 13). Mellem 641
   og 768px står de to kolonner stadig side om side, hvor centrering ikke giver mening.
   ========================================================================== */
@media (max-width: 640px) {
    body.nt-has-results .nt-search-status-row {
        align-items: center;
    }

    /* Centrerer flueben+sætning, note og pills som hver sin blok om midteraksen.
       .nt-result-text-row beholder sin egen align-items: flex-start indvendigt, så
       fluebenet stadig sidder ud for FØRSTE tekstlinje. */
    body.nt-has-results .nt-search-result-heading {
        align-items: center;
    }

    /* Teksten inde i den centrerede gruppe forbliver venstrestillet. Overskriften
       brydes til to linjer ved 375px, og med text-align: center ville anden linje
       ("udbydere") lægge sig midt under den første med fluebenet hængende alene ude
       til venstre. Som venstrestillet blok, centreret som helhed, falder linje to
       pænt ind under linje ét. */
    body.nt-has-results .nt-result-text {
        text-align: left;
    }

    /* Pills'ene er to bokse, der kan brydes til to rækker på en smal skærm - uden
       justify-content ville anden række klæbe til venstre kant af en ellers
       centreret blok. */
    body.nt-has-results .nt-tech-pills {
        justify-content: center;
    }
}

/* ==========================================================================
   18. UDBYDERKORTENE (.nt2-*)
   Kortene i resultatlisten og i "Udvalgte tilbud". Markup'en bygges to steder, som skal
   følges ad: fn_nt2_* i assets/js/mapping-providers.js tegner søgeresultaterne, og
   nettjek24_nt2_* i includes/shortcodes.php tegner smugkigs-kortene.

   Layoutet afløste et ældre kortdesign (.nt-card/.nt-card-mobile), som en overgang lå
   side om side med dette bag ?nt_layout og ?nt_mobil, så de to kunne vurderes mod hinanden
   på samme data. Det gamle design er fjernet igen; kun de dele, begge havde brug for
   (.nt-sr-only, .nt-muted-note og tooltip'en), står tilbage længere oppe i filen.

   Den bærende idé: hastighed og pris er to selvstændige, store tal frem for punkter i en
   fælles "specs"-stribe, mens oprettelse/binding/router ligger som en let vilkårslinje.
   Prisen har sin egen kolonne med kant og tonet baggrund, så øjet kan løbe lodret ned ad
   ét tal i stedet for at lede i en midterstribe.
   ========================================================================== */
/* .nt-results-skeleton står med i selektoren og ikke med sine egne farver: skelettet TEGNER
   de her kort, og to steder med hver sin sandhed om linjefarven eller skyggen ville drive fra
   hinanden, første gang den ene rettes. Se afsnittet om skelettet nederst i filen. */
.nt2-card, .nt2-m-card, .nt-results-skeleton {
    --nt2-navy:#004080; --nt2-blue:#0073e6; --nt2-sky:#72aee6; --nt2-sky-tint:#F2F7FD;
    --nt2-orange:#FF6600; --nt2-orange-dark:#e65c00;
    --nt2-green:#027A48; --nt2-green-tint:#E7F6EF; --nt2-green-line:#BFE6D4;
    --nt2-gold:#8A4B00; --nt2-gold-tint:#FFF4E5; --nt2-gold-line:#FFD9A8;
    --nt2-ink:#182230; --nt2-muted:#616161;
    --nt2-line:#EAECF0;
    --nt2-display:'Montserrat', sans-serif;
    --nt2-body:'Varela Round', sans-serif;
    --nt2-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(0,64,128,.06);
    --nt2-shadow-hover:0 2px 4px rgba(16,24,40,.06), 0 14px 32px rgba(0,64,128,.11);
    font-family: var(--nt2-body);
    color: var(--nt2-ink);
}
/* Kortene regner overalt med, at padding og kant ligger INDE i den opgivne bredde.
   Pluginnets CSS sætter ikke box-sizing globalt, så uden den her regel bliver
   mobilknappens width:100% lagt oven i dens egen padding, og knappen stikker 13px ud
   over kortkanten. Reglen er scopet til kortene og ikke sat som en global *-regel, saa den
   ikke kan faa utilsigtede foelger andre steder paa siden. */
.nt2-card, .nt2-card *, .nt2-m-card, .nt2-m-card *{box-sizing:border-box}

/* ---- fælles dele ---- */
/* Fast lærred til logoet, ikke "så stor som filen tilfældigvis er": ellers afgør
   beskæringen i den enkelte billedfil, hvem der visuelt dominerer listen. Samme
   begrundelse som det tidligere kortlayout brugte - kun målene er mindre her, fordi navnerækken
   skal kunne rumme logo + teknologimærkat side om side. */
.nt2-logo{display:flex; align-items:center; flex:none}
.nt2-logo img{width:120px; height:40px; object-fit:contain; display:block}
/* Stoerre paa mobil end foer: da chippen flyttede ned UNDER logoet, blev der plads i
   bredden, og logoet er det, brugeren genkender foerst. 118px svarer til det samme
   forhold mellem logo og kortbredde som paa desktop (120 af 960 mod 118 af 390 er ikke
   ens, men mobilkortet har kun ET maerke at vise, hvor desktop har fire spalter). */
/* width:auto og ikke en fast bredde. Logofilerne er 300x150 (forhold 2,0), mens en boks
   paa 118x42 har forhold 2,81 - object-fit:contain skalerer derfor efter hoejden, tegner
   billedet 84px bredt og CENTRERER det, saa der stod 17px tom luft i hver side. Logoet saa
   dermed ud til at ligge laengere til hoejre end teknologi-chippen lige under, som starter
   ved kortets venstrekant. Med width:auto faar elementet billedets egen tegnede bredde, og
   venstrekanterne flugter. max-width fanger et usaedvanligt bredt maerke. */
.nt2-m-card .nt2-logo img{width:auto; max-width:118px; height:42px}
.nt2-muted-name{font-family:var(--nt2-display); font-weight:700; font-size:16px; color:#667085;
                line-height:1.3; display:block; max-width:120px; word-break:break-word}
/* Det nedtonede korts navn er tekst, hvor partnerkortene har et logolærred. Uden en fast
   højde bliver navnerækken lavere, og da .nt2-info centrerer sit indhold, rykker HELE
   kortets indhold op - vilkårslinjen lander højere end på kortene omkring det, og så er
   den lodrette scanning, de nedtonede kort er lavet for at bevare, netop brudt. */
.nt2-card .nt2-muted-name{min-height:40px; display:flex; align-items:center}
.nt2-m-card .nt2-muted-name{min-height:42px; display:flex; align-items:center; max-width:118px}

/* Teknologi-chip. Formen er pointen: en chip har sin egen afgrænsning og behøver derfor
   ikke flugte med noget for at se bevidst ud - løs tekst gjorde ikke, og en label over den
   hjalp ikke nok. Chippen gør samtidig labelen overflødig, fordi den i sig selv læses som
   en kategori.
   Bevidst stillere end det oprindelige mærkat: ingen versaler, ingen bogstavspærring,
   intet ikon og én neutral farve i stedet for én per teknologi. Radius 6px og ikke 999px,
   så den ikke forveksles med badge'erne ("Testvinder", "Spar X kr."), der er runde piller
   med skygge og hænger uden for kortkanten. */
.nt2-tech{display:inline-flex; align-items:center; font-family:var(--nt2-display); font-weight:600;
          font-size:12.5px; line-height:1.2; color:var(--nt2-navy); background:var(--nt2-sky-tint);
          border:1px solid #E1ECF8; border-radius:6px; padding:5px 10px; white-space:nowrap}
/* De nedtonede kort er ikke partnere - chippen skal følge kortets dæmpede vægt, ikke
   trække opmærksomhed til et kort uden handling. */
.nt2-card.is-muted .nt2-tech, .nt2-m-card.is-muted .nt2-tech{
    background:#F2F3F5; border-color:#E3E5E9; color:#667085;
}

/* Vilkårslinjen: label og værdi står i SAMME farve som resten af brødteksten.
   Værdierne var før grønne, når de var en fordel for kunden (0 kr., Ingen, Medfølger).
   Det gav tre grønne pletter på hvert eneste kort, og da næsten alle partnere har
   0 kr. i oprettelse og router med, farvede den "fordel" stort set hele listen ens -
   så signalet adskilte ikke kortene, det larmede bare. Grøn er nu forbeholdt de to
   steder, hvor den faktisk peger på noget, der varierer: tilbudsprisen og besparelsen. */
.nt2-fact{display:flex; align-items:baseline; gap:7px; white-space:nowrap}
.nt2-fact svg{width:16px; height:16px; flex:none; align-self:center; color:var(--nt2-sky)}
.nt2-fact-lbl{font-size:14px; line-height:1.25; color:var(--nt2-muted)}
.nt2-fact-val{font-family:var(--nt2-display); font-weight:600; font-size:14px; line-height:1.25; color:var(--nt2-ink)}

.nt2-badge{display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--nt2-display);
           font-weight:700; font-size:12px; line-height:1; padding:6px 11px; border-radius:999px;
           box-shadow:0 1px 2px rgba(16,24,40,.06)}
/* Badge-teksten er admin-indtastet og har typisk sit eget ikon med. Derfor sættes der
   ingen hardcodet stjerne her - kun en ramme om det, redaktøren selv skriver. */
.nt2-badge img, .nt2-badge svg, .nt2-badge i{flex:none; max-height:14px; width:auto}
.nt2-badge-win{color:var(--nt2-gold); background:var(--nt2-gold-tint); border:1px solid var(--nt2-gold-line)}
.nt2-badge-save{color:var(--nt2-green); background:var(--nt2-green-tint); border:1px solid var(--nt2-green-line)}

.nt2-price-main{display:flex; align-items:baseline; gap:4px}
.nt2-price-num{font-family:var(--nt2-display); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--nt2-navy)}
.nt2-price-per{font-family:var(--nt2-display); font-weight:600; font-size:14px; color:var(--nt2-muted)}
/* Grøn, ikke rød: rød er sitets FEJLfarve - og
   nøjagtig samme grønne værdi. Den var kortvarigt #0E8A5F, men den gav kun 3,91:1 mod
   den grønne tone bagved og faldt dermed under WCAG AA, som kræver 4,5:1 for tekst under
   18,66px. Sitets egen #027A48 giver 4,85:1 og består. Gælder også .nt2-badge-save, der
   sidder på samme tone. */
.nt2-offer{display:inline-block; font-size:12.5px; color:var(--nt2-green); background:var(--nt2-green-tint);
           border-radius:5px; padding:3px 8px; line-height:1.35; white-space:nowrap}
.nt2-offer b{font-family:var(--nt2-display); font-weight:700}
/* Den grå "intet tilbud"-linje fylder med vilje NØJAGTIG det samme som den grønne, så
   rækkerne under den flugter på tværs af kort med og uden tilbud. */
.nt2-offer.is-none{color:var(--nt2-muted); background:#F3F4F6}
.nt2-total{font-size:13px; color:var(--nt2-navy); opacity:.9}
.nt2-total b{font-family:var(--nt2-display); font-weight:700; font-size:14px; opacity:1}

/* ---- knap ----
   Signaturen orange fyld + diagonalt "ud af siden"-pileikon er FORBEHOLDT links til en udbyder,
   kun geometrien er ny. Signaturen er FORBEHOLDT links, der sender brugeren til en udbyder. */
.nt2-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
         font-family:var(--nt2-display); font-weight:700; font-size:15.5px;
         background:var(--nt2-orange); border:0; border-radius:10px; padding:12px 14px; cursor:pointer;
         text-decoration:none; box-shadow:0 2px 0 rgba(180,70,0,.25);
         transition:background .15s ease, transform .1s ease}
.nt2-btn:hover{background:var(--nt2-orange-dark)}
.nt2-btn:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(180,70,0,.25)}
/* Temaets globale a:visited/a:focus farver ellers knapteksten blå, når brugeren vender
   tilbage fra en udbyder. :visited SKAL neutraliseres af privatlivshensyn - forskellen i
   knapfarve ville ellers afsløre, hvilke udbydere brugeren tidligere har klikket sig ud til. */
.nt2-btn, .nt2-btn:link, .nt2-btn:visited, .nt2-btn:hover, .nt2-btn:focus, .nt2-btn:active{
    color:#fff !important; text-decoration:none !important;
}
.nt2-btn:focus-visible{outline:3px solid var(--nt2-blue); outline-offset:2px}
.nt2-btn .nt2-arw{width:17px; height:17px; flex:none; transition:transform .15s ease}
/* Hover følger pilens egen diagonale retning - se NT2_ICO.arrow i mapping-providers.js for hvorfor
   pilen er diagonal og ikke vandret. */
.nt2-btn:hover .nt2-arw{transform:translate(2px,-2px)}
/* Intern handling ("Tjek min adresse") - fører op til søgefeltet, ikke ud af sitet, og
   må derfor ikke bære partnerknappens signatur. */
.nt2-btn-secondary{background:transparent; border:2px solid var(--nt2-navy); box-shadow:none}
.nt2-btn-secondary, .nt2-btn-secondary:link, .nt2-btn-secondary:visited, .nt2-btn-secondary:hover,
.nt2-btn-secondary:focus, .nt2-btn-secondary:active{color:var(--nt2-navy) !important}
.nt2-btn-secondary:hover{background:rgba(0,64,128,.06)}

/* ---- DESKTOP ----
   max-width og ikke fuld bredde: informationskolonnen er 1fr, og dens indhold (logo,
   mærkat, hastighed / de tre vilkår) har en målt naturlig bredde på 490px - sat af den
   bredeste vilkårslinje, "Router: Ikke inkluderet". I en 1000px bred beholder stod der
   dødt hul mellem hastigheden og prisfeltet, som fik de to sider af kortet til at falde
   fra hinanden. 960px er den smalleste bredde, der stadig rummer vilkårene ved 14px
   skrift OG holder de tre vilkårskolonner lige brede på tværs af kort. Skal kortet
   længere ned, koster det enten skriftstørrelsen eller den lodrette flugt.
   Beholderen omkring (filterbjælken, overskrifterne) beholder sin egen bredde. */
.nt2-card{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 216px 192px; align-items:stretch;
          background:#fff; border:1px solid var(--nt2-line); border-radius:14px; box-shadow:var(--nt2-shadow);
          max-width:960px; margin:26px auto; transition:box-shadow .18s ease, transform .18s ease}
.nt2-card:hover{box-shadow:var(--nt2-shadow-hover); transform:translateY(-2px)}
/* Informationsfeltet er to rækker: logo | teknologi + hastighed øverst, og de tre vilkår
   på én linje under, spændt over BEGGE kolonner.

   Vilkårslinjen skal ligge i hele bredden og ikke inde i den højre kolonne. De tre punkter
   har en målt naturlig bredde på ca. 490px ved 14px skrift, og den højre kolonne har kun
   ~357px, når logokolonnen har taget sin del - så dér ville de altid ombryde til to linjer.
   Over hele bredden er der 514px at tage af, og de står på én linje som tiltænkt. */
/* Informationsfeltet er to rækker: logo | teknologi + hastighed øverst, og de tre vilkår
   på én linje under, spændt over BEGGE kolonner.

   Vilkårslinjen skal ligge i hele bredden og ikke inde i den højre kolonne. De tre punkter
   har en målt naturlig bredde på ca. 490px ved 14px skrift, og den højre kolonne har kun
   ~357px, når logokolonnen har taget sin del - så dér ville de altid ombryde til to linjer.
   Over hele bredden er der 514px at tage af, og de står på én linje som tiltænkt. */
/* Informationsfeltet er to rækker: logo | teknologi + hastighed øverst, og de tre vilkår
   på én linje under, spændt over BEGGE kolonner.

   Vilkårslinjen skal ligge i hele bredden og ikke inde i den højre kolonne. De tre punkter
   har en målt naturlig bredde på ca. 490px ved 14px skrift, og den højre kolonne har kun
   ~357px, når logokolonnen har taget sin del - så dér ville de altid ombryde til to linjer.
   Over hele bredden er der 514px at tage af, og de står på én linje som tiltænkt. */
.nt2-info{position:relative; padding:15px 18px; display:grid; grid-template-columns:auto minmax(0,1fr);
          align-items:center; column-gap:20px; row-gap:12px}
/* Logoet står i sin egen kolonne, lodret centreret mod overskriftsrækken. Ingen lodret
   streg her: den ville kun kunne følge den øverste række og stoppe midt i kortet, mens
   kanterne ind mod pris og handling går hele vejen ned. */
.nt2-logo-col{display:flex; align-items:center; justify-content:center; width:120px; flex:none}

/* align-items:flex-start: de to labels skal stå på SAMME linje. Centreres blokkene i
   stedet, glider den lave teknologiblok ned midt i den høje hastighedsblok.

   justify-content:flex-start plus en FAST bredde på teknologiblokken. Rækken var før
   centreret, og det havde to følger. Den ene var, at gruppen svævede midt i en bred
   kolonne uden en kant at hænge på. Den anden var værre: en centreret gruppe flytter sig,
   når indholdet skifter bredde, så "HASTIGHED" landede 23px længere til højre på et
   5G-kort end på et coax-kort. På en liste, der blander teknologier, vuggede kolonnerne
   dermed ned gennem siden - og den lodrette scanning er hele grunden til kortformatet.
   Venstrestillet og med fast bredde ligger begge labels samme sted på hvert kort.
   104px: "5G Internet" er den bredeste værdi og måler 81px.

   flex-wrap: på smalle skærme falder hastigheden ned under teknologien i stedet for at
   klemme de to sammen. */
.nt2-headline{display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap;
              column-gap:24px; row-gap:8px}
.nt2-spd-block{display:flex; flex-direction:column; align-items:flex-start; gap:3px}
/* Fast bredde, selvom chippen er smallere: uden den flytter hastighedskolonnen sig, alt
   efter om der står "Coax" eller "5G Internet", og kolonnerne vugger ned gennem listen. */
.nt2-tech-block{width:104px; display:flex; align-items:center}
/* Labelen over værdien: et tal eller en
   værdi uden overskrift tvinger brugeren til at gætte, hvad den betyder. */
.nt2-lab{font-family:var(--nt2-display); font-weight:600; font-size:10.5px; letter-spacing:.08em;
         text-transform:uppercase; color:var(--nt2-navy); opacity:.7; white-space:nowrap}
.nt2-spd{display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.nt2-spd-num{font-family:var(--nt2-display); font-weight:800; font-size:26px; line-height:1;
             letter-spacing:-.025em; color:var(--nt2-navy)}
.nt2-spd-unit{font-family:var(--nt2-display); font-weight:600; font-size:13.5px; color:var(--nt2-muted)}
/* Faste kolonner og venstrestilling af samme grund som navnerækken: med centrering og
   auto-bredder rykkede de tre punkter sig fra kort til kort, alt efter om der stod
   "0 kr." eller "99 kr.". Bredderne er sat efter de bredeste værdier (målt 142,9 /
   131,1 / 188,5px) og bruger 508 af de 514px, der er til rådighed. */
.nt2-row-bot{grid-column:1 / -1; display:grid; grid-template-columns:150px 138px auto;
             column-gap:16px; align-items:baseline; justify-items:start}
/* Ensfarvet og ikke en gradient. Tonen skal markere ET FELT, og et felt skal have en
   defineret udstrækning: gradienten gav prisfeltet én hård kant (den blå streg) og én, der
   opløste sig ud mod knapkolonnen, så øjet ikke kunne se, hvor feltet sluttede. Ensfarvet
   danner desuden ét sammenhængende lodret bånd ned gennem listen - og den lodrette
   scanning er hele pointen med kortformatet. En gradient fader forskelligt alt efter
   kortets bredde og bryder båndet.
   Tonen er nu --nt2-sky-tint samme sted som strip og chip; tidligere lå der en næsten
   identisk #F7FAFE ved siden af variablen, hvilket bare var to sandheder om samme farve. */
.nt2-card .nt2-price{padding:15px 18px; display:flex; flex-direction:column; justify-content:center;
                     align-items:flex-start; gap:6px; border-left:3px solid var(--nt2-sky);
                     background:var(--nt2-sky-tint)}
.nt2-card .nt2-price-num{font-size:33px}
.nt2-cta{position:relative; padding:15px 16px; display:flex; flex-direction:column; justify-content:center;
         border-left:1px solid var(--nt2-line)}
.nt2-card .nt2-badge{position:absolute; top:-12px; z-index:2}
.nt2-card .nt2-badge-win{left:18px}
.nt2-card .nt2-badge-save{left:50%; transform:translateX(-50%)}

/* ---- MOBIL ---- */
.nt2-m-card{position:relative; background:#fff; border:1px solid var(--nt2-line); border-radius:14px;
            box-shadow:var(--nt2-shadow); margin:26px 0}
.nt2-m-card .nt2-badge{position:absolute; top:-11px; z-index:2}
.nt2-m-card .nt2-badge-win{left:14px}
.nt2-m-card .nt2-badge-save{right:14px}
.nt2-m-head{display:flex; align-items:center; gap:10px; padding:15px 15px 0}
.nt2-m-card .nt2-btn{width:100%; padding:14px; font-size:16px; border-radius:11px}
.nt2-m-foot{padding:12px 15px 13px}
.nt2-strip{margin:12px 15px 0; padding:8px 12px; background:var(--nt2-sky-tint); border:1px solid #E1ECF8;
           border-radius:8px; display:flex; align-items:center; justify-content:space-between; gap:8px}

/* Labelen i mobilkortets hastighedsrække - samme form som .nt2-lab på desktop. */
.nt2-cell-lab{font-family:var(--nt2-display); font-weight:600; font-size:10.5px; letter-spacing:.08em;
              text-transform:uppercase; color:var(--nt2-navy); opacity:.7; display:block}
/* "Mbit" står inline med tallet, ikke på sin egen række. Enheden fyldte før 16% af en
   celle på 194x37px - 30px tekst i en række, der kun eksisterede for at balancere
   tilbudspillen overfor. En enhed hører til sit tal; skilt ad læses den som et selvstændigt
   felt uden indhold. Nu er formen den samme som på desktop ("1000 / 1000 Mbit").
   Tredje række findes stadig, men kun i prisspalten, hvor tilbudslinjen bor. */
.nt2-m-spd{display:flex; align-items:baseline; gap:5px; min-width:0}
/* line-height:1 og ikke 1.15: prisen ved siden af står allerede i 1, og de to tal er
   grid-søskende i samme række. Med 1.15 bliver hastighedens kasse højere, de to tal
   centrerer sig hver sit sted, og bundlinjerne falder fra hinanden.
   Ellipse frem for nowrap: 5G-hastigheder er tekst ("Fra 300", "300 - 500") og kan blive
   længere end de faste "1000 / 1000" - de må beskæres, ikke sprænge kolonnen. min-width:0
   er nødvendig, for et flex-element krymper ellers ikke under sit indhold, og så ville
   ellipsen aldrig træde i kraft. */
.nt2-m-spd-num{font-family:var(--nt2-display); font-weight:800; font-size:22px; line-height:1;
               letter-spacing:-.025em; color:var(--nt2-navy);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.nt2-m-card .nt2-price-num{font-size:22px}
.nt2-m-card .nt2-price-per{font-size:13px}
.nt2-m-spd-unit{font-family:var(--nt2-display); font-weight:600; font-size:13px; color:var(--nt2-muted); flex:none}

.nt2-m-toggle, .nt2-m-toggle:hover, .nt2-m-toggle:focus, .nt2-m-toggle:active, .nt2-m-toggle:visited{
    width:100%; background:transparent !important; border:0 !important;
    border-top:1px solid var(--nt2-line) !important;
    box-shadow:none !important; outline:none !important; padding:12px; cursor:pointer;
    font-family:var(--nt2-display); font-weight:600; font-size:14px; color:var(--nt2-navy) !important;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.nt2-m-toggle .nt2-chev{width:15px; height:15px; transition:transform .18s ease}
.nt2-m-card.is-open .nt2-m-toggle .nt2-chev{transform:rotate(180deg)}
.nt2-m-facts{display:none; flex-direction:column; gap:10px; padding:2px 17px 15px}
.nt2-m-card.is-open .nt2-m-facts{display:flex}

/* ---- NEDTONEDE (IKKE-PARTNER) KORT ----
   Samme skelet og samme kolonner som partnerkortene, så øjet kan scanne lodret hele vejen
   ned ad listen - kun VÆGTEN adskiller dem. Den forklarende linje og dens tooltip ligger
   længere oppe i filen (.nt-muted-note), fordi markup en bygger dem uafhængigt af
   begrundelse; den gælder uændret her. Ingen løftet hover: kortet har ingen handling, og
   en hover-effekt ville love et klik, der ikke findes. */
.nt2-card.is-muted, .nt2-m-card.is-muted{background:#F9FAFB; border-color:#E7E9EE; box-shadow:none}
.nt2-card.is-muted:hover{box-shadow:none; transform:none}
.nt2-card.is-muted .nt2-price{background:#F9FAFB; border-left-color:#D8DCE3}
.nt2-card.is-muted .nt2-cta{border-left-color:#E7E9EE}
.nt2-card.is-muted .nt2-spd-num, .nt2-m-card.is-muted .nt2-m-spd-num{color:#667085}
.nt2-muted-price{font-family:var(--nt2-display); font-weight:600; font-size:15px; color:#667085; line-height:1.35}
/* Afstanden fra toppen, når søgestatussen rulles i syne. Bruges af scrollIntoView i
   fn_scroll_search_status_into_view(), som sætter --nt-scroll-offset til headerens faktiske
   højde plus lidt luft.

   HVORFOR CSS OG IKKE ET UDREGNET TAL I JS: browseren læser scroll-margin-top i det øjeblik,
   rulningen udføres. Regner man i stedet positionen ud på forhånd og scroller til tallet,
   rammer man forkert, hvis noget flytter sig undervejs - og det gør det her, hero'en krymper
   380px med en transition på 0,3s. Fallback-værdien dækker det tilfælde, hvor JS ikke nåede
   at sætte variablen. */
.nt-search-status {
    scroll-margin-top: var(--nt-scroll-offset, 96px);
}

/* Prisfeltet på de grå kort. Det bærer en tankestreg og ikke et tal, og skal derfor heller
   ikke have et talformats vægt - halvfed 15px trækker øjet til et felt, hvor der ingenting
   står. Lysere og lettere, så kortet læses som det, det er: en oplysning om at udbyderen
   findes, ikke et tilbud der kan sammenlignes. */
.nt2-muted-price.is-quiet{font-weight:500; color:#98A2B3}
.nt2-muted-note{position:relative; display:flex; align-items:center; gap:6px;
                font-family:var(--nt2-display); font-size:13px; line-height:1.4; color:#8A8A8A}

@media (prefers-reduced-motion: reduce){
    .nt2-card, .nt2-btn, .nt2-btn .nt2-arw, .nt2-m-toggle .nt2-chev{transition:none}
    .nt2-card:hover{transform:none}
    .nt2-btn:hover .nt2-arw{transform:none}
}

/* ---- SMALLE DESKTOP-BREDDER (tablet og små laptops) ----
   Mobilkortet er skjult på BÅDE desktop og tablet (se .mobile-provider-*-container i
   includes/shortcodes.php), så det er DESKTOP-kortet, der skal holde helt ned til 768px.
   Kortet bygger på faste px-mål, som ikke skalerer af sig selv - det tidligere design
   brugte procentbredder og klarede det uden hjælp. Uden reglerne her skæres pris- og
   handlingskolonnen så smalle,
   at knapteksten og tilbudslinjen ikke kan være der.
   Vilkårene ombryder allerede af sig selv (flex-wrap), så de klarer sig uden hjælp. */
@media (max-width: 1099px) {
    .nt2-card{grid-template-columns:minmax(0,1fr) 194px 176px}
    .nt2-info{padding:14px; column-gap:14px}
    .nt2-logo-col{width:104px}
    .nt2-logo img{width:104px; height:36px}
    .nt2-spd-num{font-size:23px}
    /* Faste px-kolonner kan ikke ombryde; her skal de tre punkter kunne falde til en
       ny linje frem for at flyde ind i prisfeltet. */
    .nt2-row-bot{display:flex; flex-wrap:wrap; column-gap:16px; row-gap:6px}
    .nt2-tech-block{width:auto}
    .nt2-card .nt2-price{padding:14px}
    .nt2-card .nt2-price-num{font-size:29px}
    .nt2-cta{padding:14px 12px}
    .nt2-btn{font-size:14.5px; padding:11px 12px}
}

/* Det nedtonede kort har ikke tre vilkår, men én forklarende linje. Uden den her regel
   lander den i vilkårsgridets FØRSTE kolonne (150px) og ombrydes til to linjer. */
.nt2-card.is-muted .nt2-row-bot{display:block}

/* ---- MOBIL: STRAMMET LUFT ----
   Knap og udfoldning fyldte 115px tilsammen - mere end hastighed og pris til sammen, på et
   kort hvor under halvdelen af højden var data. Polstringen er skåret, men ikke længere end
   at berøringsmålene holder: knappen måler stadig over 44px, som er den grænse, hvor et mål
   kan rammes pålideligt med en tommel. Udfoldningen lander lavere, men den er fuld
   kortbredde, så det reelle mål er stort. */
.nt2-m-head{padding:13px 15px 0}
.nt2-m-card .nt2-btn{padding:13px 14px}
.nt2-m-foot{padding:10px 15px 11px}
.nt2-m-toggle, .nt2-m-toggle:hover, .nt2-m-toggle:focus, .nt2-m-toggle:active, .nt2-m-toggle:visited{padding:10px}
.nt2-strip{margin-top:10px; padding:7px 12px}
.nt2-m-facts{padding:2px 17px 13px}

/* ---- MOBILKORTETS HOVEDRÆKKE ---- */
.nt2-m-card .nt2-m-head{display:flex; align-items:flex-start; justify-content:space-between;
                          gap:12px; padding:14px 15px 12px}
.nt2-m-card .nt2-price-num{font-size:24px}
.nt2-m-card .nt2-price-per{font-size:13px}
/* Samme form som .nt2-strip nedenfor: indrykket, tonet, afrundet. Raekken havde foer to
   streger over og under, altsaa en fuldbredde-stribe, der stoedte direkte op til striben
   under - og DET saa rodet ud. To indrykkede kasser med hvidt imellem laeses derimod som
   to selvstaendige felter, og hierarkiet mellem dem baeres af typografien: 20px fed navy
   mod 13px broedtekst. Kassen er bare beholderen. */
.nt2-m-spdrow{display:flex; align-items:center; justify-content:space-between; gap:12px;
              margin:12px 0 0; padding:9px 15px; background:var(--nt2-sky-tint);
              border-top:1px solid #E1ECF8; border-bottom:1px solid #E1ECF8}
.nt2-m-card .nt2-m-spd-num{font-size:20px}
/* Mindsteprisen som ren tekst: ingen flade, ingen ramme, ingen afrunding. En afrundet,
   indrykket kasse har en KNAPS form, og der maa kun vaere ét element i kortet, der ser ud
   som noget man trykker paa - den orange CTA. Hastighedsbaandet ovenfor er derimod
   fuldbredde og uden hjoerner, saa det laeses som en skillelinje og ikke som et felt. */
.nt2-m-card .nt2-strip{background:none; border:0; border-radius:0; margin:10px 15px 0; padding:0}
/* Badgen svaever igen over kortkanten, som paa desktop - men nu over PRISEN, fordi det
   er den, den handler om. Den var kortvarigt inde i flowet paa prislinjen; det kolliderede
   med teknologi-chippen, fordi prisgruppen ikke giver plads (flex:none) og chippen ikke
   ombryder (nowrap), saa de to skubbede ind i hinanden paa 390px. */
.nt2-m-card .nt2-badge-save{right:15px}

/* Tilbudslinjen som ren tekst her - ingen fyldt pille. Den står allerede samlet med
   prisen og har ikke brug for sin egen ramme; en kasse mere i samme hjørne var netop
   det, der gjorde kortet uroligt. */
.nt2-m-card .nt2-offer{background:none; padding:0; font-size:12px}
.nt2-m-card .nt2-offer.is-none{background:none; color:var(--nt2-muted)}

/* Chippen vejer mindre på mobil. Den står lige under logoet i samme spalte, og med samme
   størrelse som på desktop konkurrerede de to om det samme blik - logoet er det, brugeren
   genkender først, og chippen skal kun bekræfte teknologien. Mindre skrift og strammere
   polstring; farve og form er uændret, så den stadig læses som samme element. */
.nt2-m-card .nt2-tech{font-size:11.5px; padding:4px 9px}

/* Hovedrækken: to spalter, lodret CENTRERET mod hinanden - ikke et 2x2-gitter.
   Gitteret parrede tilbudslinjen med CHIPPEN, fordi de delte række. Men tilbuddet hører
   til PRISEN, ikke til teknologien, og parringen trak det 22px ned væk fra det tal, det
   handler om. Nu ligger pris og tilbud tæt sammen i deres egen spalte.
   align-items:center og ikke flex-start: med flex-start blev prisen hængt op i logoets
   overkant, og chippen blev efterladt alene nederst uden noget ved siden af sig. Centreret
   står den lave prisspalte midt for den høje brandspalte, og ingen af delene dingler. */
.nt2-m-card .nt2-m-head{display:flex; align-items:center; justify-content:space-between;
                          gap:12px; padding:14px 15px 12px}
.nt2-m-brand{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0}
/* gap:4px: tilbudslinjen skal ligge TÆT på prisen - de er ét udsagn om, hvad abonnementet
   koster. Prisen er højrestillet op ad kortkanten, saa den danner et lodret bånd ned
   gennem listen, ligesom prisspalten gør på desktop. */
.nt2-m-price{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none;
             text-align:right; min-width:0}

/* Udfoldningen skruet ned. Den er en sekundær handling og skal ikke konkurrere med den
   orange CTA lige over: dæmpet grå frem for navy, og INGEN skillelinje. Stregen delte
   knappen fra teksten og gav dermed teksten sin egen "sektion", hvilket er mere vægt,
   ikke mindre. Uden den læses den som en fodnote til knappen. */
.nt2-m-toggle, .nt2-m-toggle:hover, .nt2-m-toggle:focus, .nt2-m-toggle:active, .nt2-m-toggle:visited{
    border-top:0 !important; color:#667085 !important; font-weight:500;
}
.nt2-m-toggle:hover{color:var(--nt2-navy) !important}

/* Det udfoldede indhold som en tonet skuffe i fuld bredde - samme sprog som
   hastighedsbåndet: en tonet flade uden hjørner betyder "afsnit", en afrundet kasse
   betyder "knap". Uden fladen lå de tre vilkår som løs tekst i bunden af et hvidt kort,
   venstrestillet mod et kort hvor alt andet er kant- eller midterstillet, og de lignede
   noget, der var blevet til overs. Nu ser kortet ud til at folde sig ud.
   Bundhjørnerne følger kortets egen radius minus kanten, ellers stikker fladen ud. */
.nt2-m-card.is-open .nt2-m-facts{
    background:var(--nt2-sky-tint); border-top:1px solid #E1ECF8;
    padding:12px 15px 13px; gap:11px;
    border-bottom-left-radius:13px; border-bottom-right-radius:13px;
}

/* Mindsteprisen centreret og alene. "inkl. oprettelse" er fjernet efter aftale - se
   fn_six_months_total() i helper-functions.js for hvad tallet dækker. */
.nt2-strip{justify-content:center; text-align:center}

/* Kolonet sættes i CSS og kun dér, hvor label og værdi står SIDE OM SIDE. I skuffen på
   mobil skubbes værdien helt ud til højre kant, og et kolon, der hænger midt i rækken
   med 200px luft efter sig, peger ikke på noget. */
.nt2-row-bot .nt2-fact-lbl::after{content:':'}



/* Vilkårene i skuffen som TRE KOLONNER med indholdet stablet og centreret.
   To forsøg gik galt hver sin vej, og de peger på samme grundproblem: tre korte par i en
   388px bred skuffe. Stablet og venstrestillet fyldte hver linje kun ~150px, så der stod
   en bred tom kolonne ned langs højre side. Spredt ud med værdien i højre kant blev der
   ~230px mellem "Oprettelse" og "0 kr.", og så mister øjet forbindelsen mellem de to -
   på en telefon læses det som to selvstændige kolonner frem for tre par.
   Tre kolonner løser begge dele: bredden bliver brugt, og label og værdi står lige over
   hinanden. Det halverer samtidig skuffens højde.
   white-space:normal fordi "Ikke inkluderet" er den længste værdi og skal kunne ombryde
   frem for at sprænge sin kolonne på en smal telefon. */
.nt2-m-card.is-open .nt2-m-facts{display:grid; grid-template-columns:repeat(3,1fr);
                                 align-items:start; gap:0}
.nt2-m-facts .nt2-fact{flex-direction:column; align-items:center; text-align:center;
                       gap:5px; width:auto; white-space:normal}
.nt2-m-facts .nt2-fact svg{width:18px; height:18px; align-self:center}
.nt2-m-facts .nt2-fact-lbl{font-size:12.5px; line-height:1.3}
.nt2-m-facts .nt2-fact-val{font-size:13.5px; line-height:1.3}

/* ==========================================================================
   HERO-GLØDEN MÅ IKKE GØRE SIDEN BREDERE END SKÆRMEN

   .nettjek-hero-section::before er en dekorativ radial lyseffekt på faste 900x900px,
   centreret med left:50% + translate(-50%,-50%). På en 375px telefon rækker den fra
   -262px til 638px, og da hero-sektionen har overflow:visible, slap den ud og gjorde hele
   dokumentet 638px bredt. Det gav vandret panorering på mobil - og på iOS Safari også et
   ryk i billedet, når man rørte adressefeltet, fordi browseren så skal passe et felt ind
   på en side, der er bredere end skærmen.

   Selve reglen ligger i Elementors indlejrede CSS, ikke her, så den kan ikke rettes ved
   kilden herfra. Vi begrænser den i stedet.

   HVORFOR IKKE overflow:hidden PÅ SEKTIONEN
   Det ville også virke - men adressefeltet ligger INDE i hero-sektionen, og forslagslisten
   hænger ~31px ned under dens underkant. overflow:hidden ville klippe det nederste forslag
   af, og ved en lang liste langt mere end det. Målt efter, ikke gættet.

   Derfor begrænses dekorationen i stedet for containeren: gløden fylder nu præcis
   hero-sektionen, sektionen beholder overflow:visible, og dropdownen er urørt. */
.nettjek-hero-section::before {
    max-width: 100%;
    max-height: 100%;
}

/* ==========================================================================
   MOBIL-SØGEOVERLAY

   Se kds-autocomplete.js for hvorfor det findes: forslagslisten lå bag tastaturet på
   telefonen. Panelet får sin højde sat fra JS ud fra visualViewport - altså pladsen OVER
   tastaturet - og listens loft kommer med som --nt-overlay-liste-h.

   Panelet vises kun, når JS åbner det, så der er ikke brug for en media query til at
   skjule det. Men z-index skal slå Elementors klæbrige header, og baggrunden skal være
   uigennemsigtig: brugeren skal ikke kunne se siden bevæge sig bagved, mens der skrives.
   ========================================================================== */
/* Panelet spænder hele layout-viewporten - top OG bund. Højden sættes bevidst IKKE fra JS
   længere: første udgave satte den til visualViewport.height, og på iOS endte panelet for
   kort, så siden bagved kom til syne i mellemrummet ned til tastaturet, og forslagslisten
   blev klippet midt i et punkt. Målt på en rigtig iPhone.

   Med bund i layout-viewporten kan der ikke opstå et hul: strækker panelet sig ned bag
   tastaturet, er den del alligevel usynlig. Det er kun LISTEN, der skal holde sig over
   tastaturet, og den styres af --nt-overlay-liste-h. */
.nt-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top center;
}

.nt-search-overlay[hidden] { display: none; }

.nt-search-overlay__top {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    flex: 0 0 auto;
}

.nt-search-overlay__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px er Apples og Googles mindstemål for et trykmål. Knappen sidder i toppen ved
       skærmkanten, hvor tommelfingeren rammer upræcist - den skal ikke gøres pænere og
       mindre end det. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: #333B4B;
    cursor: pointer;
    border-radius: 50%;
}

.nt-search-overlay__back:active { background: #EEF2F7; }

.nt-search-overlay__titel {
    font-size: 20px;
    font-weight: 700;
    color: #101828;
    line-height: 1.2;
}

/* Feltet flyttes herind af JS. Padding matcher resten af panelet, så det ikke hopper
   vandret, når det skifter plads. */
.nt-search-overlay__felt {
    flex: 0 0 auto;
    padding: 4px 16px 0;
    position: relative;
}

/* Listen hænger stadig under feltet via .dawa-suggestions-anchor, men får her et loft, så
   den aldrig kan nå ned bag tastaturet - og scroller indvendigt i stedet. */
.nt-search-overlay .dawa-autocomplete-suggestions {
    max-height: var(--nt-overlay-liste-h, 60vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---- Seneste søgninger ---------------------------------------------------
   Den reelle gevinst ved panelet: en tilbagevendende bruger slipper for at skrive sin
   adresse igen. Skjules, så snart der er forslag på skærmen - de to lister ville ellers
   ligge oven i hinanden, fordi forslagene er absolut positioneret. */
.nt-search-overlay__seneste {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 16px 24px;
}

.nt-search-overlay:has(input[aria-expanded="true"]) .nt-search-overlay__seneste {
    display: none;
}

.nt-search-overlay__seneste[hidden] { display: none; }

.nt-search-overlay__seneste-titel {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #667085;
}

.nt-search-overlay__seneste-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nt-search-overlay__seneste-punkt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    /* Mindst 56px højt: en adresse kan ombryde til to linjer, og punkterne skal stadig
       kunne rammes uden at man tager fejl af naboen. */
    min-height: 56px;
    padding: 10px 4px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 16px;
    line-height: 1.35;
    color: #101828;
    cursor: pointer;
}

.nt-search-overlay__seneste-punkt:active { background: #F5F8FC; }

.nt-search-overlay__seneste-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EAF2FB;
    color: #2F5AAE;
}

/* ---- Baggrunden må ikke scrolle bagved ----------------------------------
   body{overflow:hidden} alene holder ikke på iOS. position:fixed låser den for alvor,
   og JS husker scrollpositionen i body.style.top og lægger den tilbage ved lukning. */
body.nt-search-overlay-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* "Ret adresse"-feltet over resultaterne bruger samme panel som hovedsøgefeltet, men det
   har sin egen, mindre styling ude på siden. To ting skal rettes, når det står i panelet:

   1. 16px er ikke kosmetik. iOS Safari zoomer ind på et felt med skrift under 16px, og
      feltet står normalt på 15px - det ville give præcis det zoom-ryk, panelet er bygget
      for at undgå. Hovedsøgefeltet slipper, fordi det står på 18px.
   2. Feltet er lavt ude på siden, hvor det sidder i et smalt adressekort. I panelet har
      det hele skærmen og skal have et trykmål, en tommelfinger kan ramme. */
.nt-search-overlay .nt-address-edit-wrap {
    width: 100%;
}

.nt-search-overlay .nt-address-edit-input {
    font-size: 16px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;
}

/* ==========================================================================
   NEDTONEDE KORT: FORKLARINGEN FLYTTET UD I CTA-KOLONNEN

   "Ikke tilgængelig gennem os" lå før i vilkårsfeltet nederst til venstre, hvor den hang
   alene i en kolonne beregnet til tre nøgletal. Den står nu dér, hvor partnerkortene har
   deres knap - både fordi det er den plads, øjet søger hen efter "hvad kan jeg gøre", og
   fordi linjen så flugter med knapperne i resten af listen i stedet for at bryde rytmen.

   .nt2-row-bot er tom på de nedtonede kort nu. Den skal ikke fylde højde, ellers får de
   nedtonede kort en luftlomme, partnerkortene ikke har. */
.nt2-card.is-muted .nt2-row-bot { display: none; }

.nt2-card.is-muted .nt2-cta { display: flex; align-items: center; }

.nt2-card.is-muted .nt2-cta .nt-muted-note {
    /* Knapkolonnen er smal, og linjen er lang. Uden ombrydning ville den enten skubbe
       kolonnen bredere eller blive klippet. */
    align-items: flex-start;
    text-align: left;
    line-height: 1.45;
}

/* ---- MOBIL ----
   Skuffen "Vilkår og detaljer" tegnes slet ikke længere på nedtonede kort (se
   fn_nt2_mobile_card): den ville folde ud til den ene linje, der allerede står på kortet.
   Her er kun foden, forklaringen nu bor i. */
.nt2-m-card.is-muted .nt2-m-foot {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.nt2-m-card.is-muted .nt2-m-foot .nt-muted-note {
    justify-content: flex-end;
    /* Ikonet skal blive hos teksten, når linjen ombrydes - ikke stå alene på linje to. */
    flex-wrap: wrap;
}


/* ==========================================================================
   19. BY-SIDER UDEN ELEMENTOR

   By-siderne tegnes af includes/city-pages.php og templates/byside.php i stedet for af et
   Elementor-dokument. Det betyder, at Elementors sidespecifikke CSS-fil
   (uploads/elementor/css/post-<id>.css) ikke længere bliver lagt ind på dem - og den fil
   var alt, der holdt heroen og produktvalgsblokken sammen. Derfor bor deres udseende her nu.

   HVORFOR DET ER EN FORBEDRING OG IKKE BARE EN FLYTNING
   Se kommentaren ved .nettjek-hero-section::before længere oppe i filen: hero-reglerne lå i
   Elementors indlejrede CSS og kunne ikke rettes ved kilden herfra, så en fejl måtte
   lappes bagefter. Nu ligger de i repoet, hvor de kan versionsstyres og rettes ét sted.

   BEMÆRK at /internet/, /bredbaand/, /5g/ og /fibernet/ stadig har deres hero fra en
   Elementor HTML-widget med den samme CSS indlejret. Reglerne herunder er identiske med
   dem, så de to udgaver ikke kan komme til at se forskellige ud. Bliver de sider en dag
   også lagt om, kan den indlejrede kopi fjernes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19a. HERO
   Overført fra HTML-widgetten på /internet/. Eneste bevidste afvigelse er max-width og
   max-height på ::before, se afsnittet HERO-GLØDEN ovenfor - her er rettelsen bagt ind ved
   kilden i stedet for at skulle lappes bagefter.
   -------------------------------------------------------------------------- */
:root {
    --hero-bg-start: #0052cc;
    --hero-bg-end: #003380;
    --hero-text-main: #ffffff;
    --hero-text-sub: rgba(255, 255, 255, 0.92);
    --hero-highlight: #FFC107; /* Guldfarven til fremhævning og ikoner */
    --pill-bg: rgba(255, 255, 255, 0.12);
    --pill-bg-hover: rgba(255, 255, 255, 0.2);
}

.nettjek-hero-section {
    position: relative;
    background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
    color: var(--hero-text-main);
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 32px rgba(0, 51, 128, 0.2);
    transition: padding 0.3s ease;
}

/* Subtil glød bag søgefeltet. max-width/max-height holder den inde i sektionen - uden dem
   bliver dokumentet bredere end skærmen på mobil. */
.nettjek-hero-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    max-width: 100%;
    max-height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 65%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.nettjek-hero-content {
    position: relative;
    z-index: 1;
    max-width: 950px;
    margin: 0 auto;
    animation: fadeIn 0.6s ease-out;
}

.nettjek-hero-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--hero-text-main);
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: nowrap; /* Holder overskriften på én linje på desktop */
}

.text-highlight {
    color: var(--hero-highlight);
    position: relative;
    display: inline-block;
}

.nettjek-hero-content p {
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 35px;
    color: var(--hero-text-sub);
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* z-index 50 lægger forslagslisten foran tillidsmærkaterne. */
.nettjek-search-wrapper {
    position: relative;
    z-index: 50;
    max-width: 520px;
    margin: 0 auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.nettjek-search-wrapper button,
.nettjek-search-wrapper input[type="submit"] {
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.25) !important;
}

.nettjek-search-wrapper button:hover,
.nettjek-search-wrapper input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4) !important;
    filter: brightness(1.05);
}

.nettjek-hero-status-wrapper {
    max-width: 100%;
    margin: 24px auto 0 auto;
}

.nettjek-hero-status-wrapper .nt-search-status {
    max-width: 100%;
    margin: 0;
}

/* z-index 1 holder mærkaterne bag forslagslisten. */
.nettjek-hero-usps {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.usp-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hero-text-main);
    background: var(--pill-bg);
    padding: 8px 16px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
    animation: pillFadeIn 0.5s ease-out backwards;
}

/* Forskyder indflyvningen, så mærkaterne kommer ind én ad gangen. */
.usp-pill:nth-child(1) { animation-delay: 0.2s; }
.usp-pill:nth-child(2) { animation-delay: 0.35s; }
.usp-pill:nth-child(3) { animation-delay: 0.5s; }

.usp-pill:hover {
    background: var(--pill-bg-hover);
}

/* Sammenfoldet tilstand, når der søges eller er resultater. */
body.nt-searching .nettjek-hero-content > h1,
body.nt-searching .nettjek-hero-content > p,
body.nt-searching .nettjek-search-wrapper,
body.nt-searching .nettjek-hero-usps,
body.nt-has-results .nettjek-hero-content > h1,
body.nt-has-results .nettjek-hero-content > p,
body.nt-has-results .nettjek-search-wrapper,
body.nt-has-results .nettjek-hero-usps {
    display: none;
}

body.nt-searching .nettjek-hero-section,
body.nt-has-results .nettjek-hero-section {
    padding: 32px 20px;
}

body.nt-searching .nettjek-hero-content,
body.nt-has-results .nettjek-hero-content {
    max-width: 1100px;
}

body.nt-searching .nettjek-hero-status-wrapper,
body.nt-has-results .nettjek-hero-status-wrapper {
    margin-top: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pillFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .nettjek-hero-section {
        padding: 50px 15px;
        margin-bottom: 6px;
    }

    .nettjek-hero-content h1 {
        white-space: normal; /* Lader den bryde linjer, så den passer på skærmen */
    }

    .nettjek-hero-content p {
        font-size: 1.05rem;
        margin-bottom: 25px;
    }

    .nettjek-hero-usps {
        gap: 10px;
        margin-top: 25px;
    }

    .usp-pill {
        font-size: 0.9rem;
        padding: 6px 14px;
    }

    body.nt-searching .nettjek-hero-section,
    body.nt-has-results .nettjek-hero-section {
        padding: 20px 16px;
    }
}

/* --------------------------------------------------------------------------
   19b. INDHOLDSBOKSE

   Erstatter Elementors boksede sektioner om de tre shortcodes.

   BREDDERNE ER IKKE ENS, OG DE ER MÅLT - IKKE VALGT
   På /internet/ har hver af de tre sektioner fået sin egen bredde i hånden. Elementors
   standard er 1140px, men filtersektionen står på 1350px og smugkig-sektionen på 1295px.
   Tallene herunder er aflæst på den levende side (sektion 53cea92, 3d78e2d og 72ac530).

   Det betyder mest for filtret: det har ingen max-width af sig selv og fylder præcis den
   boks, det står i. Med 1140px blev der 210px for lidt, og "Tilbud" faldt ned på anden
   linje. Smugkig og resultater har hver deres egen inderbredde på 1000px og ser ens ud
   uanset boksen - de får de rigtige tal med for en ordens skyld.

   box-sizing sættes udtrykkeligt, så polstringen tælles MED i max-width, præcis som i
   Elementors container. Uden den bliver alle tre bokse 20px for brede, og filtret ville
   igen stå anderledes end på /internet/.

   Ingen media queries: en max-width kan kun binde, når skærmen er bredere end den, og på
   alt smallere er boksen alligevel begrænset af skærmen. Elementors egne knækpunkter for
   containerbredde gør her nøjagtig ingenting.
   -------------------------------------------------------------------------- */
.nettjek24-byside-boks {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.nettjek24-byside-boks--filter { max-width: 1350px; }
.nettjek24-byside-boks--smugkig { max-width: 1295px; }
.nettjek24-byside-boks--resultater { max-width: 1140px; }

/* --------------------------------------------------------------------------
   19c. PRODUKTVALG ("Hvilken type internet leder du efter?")

   Tre kort med gradient, billede og orange knap. Farver, radius, skygge og
   skriftstørrelser er overført fra den Elementor-CSS, blokken havde før - ikke gættet.
   --e-global-color-secondary kommer fra Elementors kit og er #87CEEB; fallbacken gør, at
   blokken også holder, hvis Elementor en dag er væk.
   -------------------------------------------------------------------------- */
/* Kortrækken er 1254px UDEN polstring - sådan står sektionen på /internet/ (ec3dde9, hvis
   widget-wrap har 0 i polstring, modsat sidens øvrige sektioner der har 10px). Overskriften
   ovenover står derimod i en almindelig 1140px-sektion (d789134). Derfor de to bredder. */
.nt-produktvalg {
    box-sizing: border-box;
    max-width: 1254px;
    margin: 0 auto 20px auto;
    padding: 0;
}

@media (max-width: 767px) {
    /* Uden polstring ville kortene røre skærmkanten, når rækken bliver til én kolonne. */
    .nt-produktvalg { padding: 0 10px; }
}

.nt-produktvalg-titel {
    box-sizing: border-box;
    max-width: 1140px;
    text-align: center;
    font-family: "Montserrat", Sans-serif;
    font-size: xx-large;
    font-weight: 600;
    margin: 0 auto 20px auto;
    padding: 0 10px;
}

.nt-produktvalg-raekke {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.nt-produktvalg-kort {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(360deg, var(--e-global-color-secondary, #87CEEB) 0%, #18A6E0 100%);
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    /* Ingen vandret polstring: billedet er 50% af kortet, og i Elementor-udgaven var de 50%
       af hele kolonnebredden. Med polstring her ville billedet blive mærkbart mindre end
       på /internet/. Titlen får sin egen polstring i stedet. */
    padding: 20px 0;
}

/* Afstandene 33px og 31px er målt på den nuværende blok på /internet/, hvor de opstår som
   summen af Elementors widget-afstand og et par håndsatte margener. Her står de som de tal,
   de faktisk er. */
.nt-produktvalg-kort-titel {
    margin: 0 0 33px 0;
    padding: 0 12px;
    text-align: center;
    font-family: "Montserrat", Sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
}

/* HVORFOR BILLEDET FÅR EN BREDDE HER
   I Elementor-udgaven sidder billedet i et <a> med display:inline-block og har selv
   width:50%. En procentbredde inde i en kasse, hvis bredde bestemmes af indholdet, kan
   ikke opløses - og Chrome ender på 0. Målt på både /internet/ og alle by-siderne: de tre
   produktbilleder har boksen 0x0 og har aldrig været synlige. Her får linket en rigtig
   bredde, så de 50% har noget at regne af, og billederne kommer frem. */
.nt-produktvalg-billede {
    display: block;
    width: 50%;
    margin: 0 auto 31px auto;
}

.nt-produktvalg-billede img {
    display: block;
    width: 100%;
    height: auto;
}

/* Knappen er en <a>, ikke en Elementor-knap, så den skal have hele sit udseende her.
   Værdierne er målt på Elementor-knappen: orange, Varela Round 25px, skarpe hjørner,
   line-height 25px og 10px mellem tekst og vinkel. */
.nt-produktvalg-knap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    line-height: 25px;
    padding: 15px 40px;
    background-color: #FF8930;
    color: #FFFFFF;
    font-family: "Varela Round", Sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.nt-produktvalg-knap:hover,
.nt-produktvalg-knap:focus {
    color: #FFFFFF;
    transform: scale(1.05);
    filter: brightness(1.05);
}

@media (max-width: 767px) {
    .nt-produktvalg-raekke {
        grid-template-columns: 1fr;
    }

    .nt-produktvalg-knap {
        font-size: 22px;
        padding: 13px 32px;
    }
}

/* --------------------------------------------------------------------------
   19d. BYENS BRØDTEKST

   Teksten kommer nu fra post_content i stedet for fra Elementor-tekstwidgets. Reglerne
   herunder er dem, teksten hele tiden har haft - de lå som "custom CSS" på selve
   Elementor-sektionen og fulgte derfor med sidens CSS-fil i graven.

   revert frem for faste værdier: temaet nulstiller lister og margener globalt, og det, der
   ønskes her, er netop browserens standard tilbage - ikke et nyt sæt tal at vedligeholde.
   -------------------------------------------------------------------------- */
/* 1140px med polstringen talt med giver 1120px tekstbredde - præcis som den redaktionelle
   sektion på /internet/ (fdd151c: 1140px container minus 10px polstring i hver side). */
.nettjek24-byside-indhold {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 10px;
}

.right-internet-product-selection h1,
.right-internet-product-selection h2,
.right-internet-product-selection h3,
.right-internet-product-selection h4,
.right-internet-product-selection h5,
.right-internet-product-selection h6 {
    font-size: xx-large;
    font-weight: 600;
}

.right-internet-product-selection blockquote,
.right-internet-product-selection dd,
.right-internet-product-selection dl,
.right-internet-product-selection figure,
.right-internet-product-selection h1,
.right-internet-product-selection h2,
.right-internet-product-selection h3,
.right-internet-product-selection h4,
.right-internet-product-selection h5,
.right-internet-product-selection h6,
.right-internet-product-selection hr,
.right-internet-product-selection p,
.right-internet-product-selection pre {
    margin: revert;
}

.content-right-broadband-product-selection ol,
.content-right-broadband-product-selection ul {
    list-style: revert;
    margin: revert;
    padding: revert;
}


/* ==========================================================================
   20. DESKTOP- OG MOBILVISNING (.nt-hidden-*)

   Udbyderkortene findes i to udgaver - .nt2-card til desktop og .nt2-m-card til mobil - og
   begge står altid i markup'en. Hvilken af dem der vises, har hidtil været afgjort af
   Elementors klasser elementor-hidden-mobile/-tablet/-desktop.

   HVORFOR DET IKKE HOLDT
   Elementors regler er skrevet som `.elementor .elementor-hidden-desktop{display:none}` -
   altså med krav om en forælder med klassen .elementor. Den forælder er dokument-wrapperen
   om et Elementor-dokument. På en side, der ikke ER et Elementor-dokument - fx en byside
   tegnet af templates/byside.php - findes den ikke, reglerne rammer ingenting, og BEGGE
   udgaver af hvert kort blev vist samtidig: fire pæne desktop-kort og derefter de samme
   udbydere igen i mobiludgave.

   Klasserne herunder gør nøjagtig det samme uden at afhænge af nogen forælder. De er lagt
   VED SIDEN AF Elementors i shortcodes.php frem for i stedet for, så de sider, der stadig
   er Elementor-dokumenter, opfører sig præcis som før - der er ingen ændring at fortryde,
   hvis noget skulle vise sig anderledes end ventet. Elementor-klasserne kan fjernes, når
   alle sider er lagt om.

   Knækpunkterne er Elementors egne (elementor-kit-5): mobil ≤767, tablet 768-1024,
   desktop ≥1025. De må ikke afvige, så længe begge sæt klasser sidder på de samme
   elementer.

   Afsnittet ligger sidst i filen med vilje: .nt2-card sætter display:grid på sig selv, og
   ved samme specificitet er det rækkefølgen, der afgør. Flyttes afsnittet op, holder
   skjulningen op med at virke.
   ========================================================================== */

@media (max-width: 767px) {
    .nt-hidden-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .nt-hidden-tablet { display: none; }
}

@media (min-width: 1025px) {
    .nt-hidden-desktop { display: none; }
}


/* ==========================================================================
   21. BESKEDER I ADRESSE-DROPDOWNEN

   To tilstande, som listen ikke havde før:

   "Mente du?"  - overskrift over gættede forslag, når den almindelige søgning gav nul, og
                  redningen i kds-autocomplete.js fandt noget alligevel. Gættet SKAL være
                  mærket: et forslag, der ser ud som et træf, men er et gæt, er værre end
                  ingen forslag.

   Ingen match  - erstatter den gamle opførsel, hvor listen simpelthen lukkede. Brugeren
                  stod så tilbage med den røde hjælpetekst "Indtast hele adressen", som
                  står der ligeså meget, når man er halvvejs gennem en RIGTIG adresse. Der
                  var altså intet, der kunne skelne "skriv videre" fra "det her matcher
                  aldrig".

   Punkterne er role="presentation" og kan ikke vælges - derfor ingen hover, ingen peger.
   ========================================================================== */

.dawa-autocomplete-note {
    padding: 8px 12px 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #667085;
    list-style: none;
    cursor: default;
    user-select: none;
}

/* Gæt: adskilt fra forslagene under med en tynd streg, så det er tydeligt at overskriften
   hører til dem - og at de ikke er et almindeligt søgeresultat. */
.dawa-autocomplete-note--gæt {
    margin-bottom: 4px;
    border-bottom: 1px solid #EAECF0;
}

/* Ingen match: normal vægt, for det er en oplysning og ikke en overskrift, og teksten
   ombrydes, fordi den indeholder det, brugeren selv skrev, og det kan være langt. */
.dawa-autocomplete-note--tom {
    font-weight: 400;
    color: #475467;
    white-space: normal;
    word-break: break-word;
}

/* Kun til skærmlæsere. Beskedpunkterne ovenfor er taget ud af tilgængelighedstræet med
   role="presentation", så uden det her ville en blind bruger opleve, at der ikke skete
   noget som helst. clip-path frem for display:none - skjulte elementer læses ikke op. */
.dawa-autocomplete-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Fejl: samme rolige form som "ingen match", men i en advarselsfarve, så det kan skelnes
   fra "din adresse findes ikke" - de to kræver hver sin handling af brugeren. */
.dawa-autocomplete-note--fejl {
    font-weight: 400;
    color: #B42318;
    white-space: normal;
    word-break: break-word;
}


/* ==========================================================================
   22. SKELET UNDER SØGNINGEN

   Målene er kopieret fra .nt2-card og .nt2-m-card ovenfor - kolonnebredder (216/192px),
   logokolonne (120px), padding, margin (26px) og radius (14px). Det er ikke kosmetik: hele
   pointen med skelettet er, at pladsen er den samme før og efter, så hverken søgestatussen
   ovenover eller sidens eget indhold nedenunder flytter sig, når kortene lander. Ændrer
   kortenes mål sig, skal de her følge med.

   Bygges af fn_show_result_skeletons() i assets/js/helper-functions.js, som også forklarer,
   hvorfor det er skeletkort og ikke en spinner.
   ========================================================================== */

.nt-results-skeleton { max-width:1000px; margin:0 auto; }

/* Wrapperen om kortene bærer .nt-hidden-*-klasserne og må derfor IKKE have en display-regel
   her - se kommentaren i fn_show_result_skeletons(). */

/* ---- DESKTOP - spejler .nt2-card / .nt2-info ---- */
.nt-sk-card {
    display:grid; grid-template-columns:minmax(0,1fr) 216px 192px; align-items:stretch;
    background:#fff; border:1px solid var(--nt2-line); border-radius:14px;
    box-shadow:var(--nt2-shadow); max-width:960px; margin:26px auto; overflow:hidden;
}
.nt-sk-info { padding:15px 18px; display:grid; grid-template-columns:auto minmax(0,1fr);
              align-items:center; column-gap:20px; row-gap:12px; }
.nt-sk-headline { display:flex; flex-direction:column; gap:9px; max-width:280px; }
/* Vilkårslinjen spænder over begge kolonner, ligesom .nt2-row-bot gør på det rigtige kort. */
.nt-sk-facts { grid-column:1 / -1; display:grid; grid-template-columns:150px 138px auto;
               column-gap:16px; }
.nt-sk-price { padding:15px 18px; display:flex; flex-direction:column; justify-content:center;
               gap:10px; border-left:3px solid var(--nt2-sky); background:var(--nt2-sky-tint); }
.nt-sk-cta   { padding:15px 16px; display:flex; align-items:center;
               border-left:1px solid var(--nt2-line); }

/* ---- MOBIL - spejler .nt2-m-card ---- */
.nt-sk-m-card {
    background:#fff; border:1px solid var(--nt2-line); border-radius:14px;
    box-shadow:var(--nt2-shadow); margin:26px 0; overflow:hidden;
}
.nt-sk-m-head  { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:15px 15px 0; }
.nt-sk-m-row   { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:14px 15px 0; }
.nt-sk-m-strip { height:34px; margin:12px 15px 0; border-radius:8px;
                 background:var(--nt2-sky-tint); border:1px solid #E1ECF8; }
.nt-sk-m-foot  { padding:12px 15px 13px; }
/* "Vilkår og detaljer"-rækken nederst. Den er med, fordi den findes på det rigtige
   mobilkort (.nt2-m-toggle) og alene fylder godt 50px - uden den var skelettet en femtedel
   for lavt pr. kort, og hele pointen er, at pladsen er den samme før og efter. */
.nt-sk-m-toggle { padding:15px; border-top:1px solid var(--nt2-line);
                  display:flex; justify-content:center; }
.nt-sk-m-toggle .nt-sk-bar { max-width:130px; height:14px; }

/* ---- BYGGEKLODSERNE ----
   Tonen er lysere end kortenes linjefarve: en flade, der er lige så mørk som en tekst, læses
   som indhold, og skelettet skal netop kunne ses som en tom plads. */
.nt-sk-bar, .nt-sk-logo, .nt-sk-btn {
    display:block; border-radius:6px;
    background:linear-gradient(90deg, #EDF1F5 0%, #F7FAFD 45%, #EDF1F5 90%);
    background-size:340px 100%;
    animation:nt-sk-shimmer 1.3s linear infinite;
}
.nt-sk-bar   { height:11px; width:100%; }
.nt-sk-lg    { height:22px; }
.nt-sk-xl    { height:28px; }
.nt-sk-w-90  { max-width:90%; }
.nt-sk-w-80  { max-width:80%; }
.nt-sk-w-70  { max-width:70%; }
.nt-sk-w-60  { max-width:60%; }
.nt-sk-w-50  { max-width:50%; }
.nt-sk-w-40  { max-width:40%; }
/* Samme mål som logokolonnen og logobilledet på kortet (.nt2-logo-col / .nt2-logo img), så
   logoet ikke hopper i størrelse i det øjeblik, det lander. */
.nt-sk-logo  { width:120px; height:40px; border-radius:8px; flex:none; }
.nt-sk-btn   { width:100%; height:44px; border-radius:11px; }

/* Bevægelsen går mod højre, altså samme vej som læseretningen, og er langsom nok til at læses
   som "der arbejdes" frem for som et blink. */
@keyframes nt-sk-shimmer {
    0%   { background-position:-340px 0; }
    100% { background-position: 340px 0; }
}

/* ---- LINJEN NEDENUNDER ----
   Én sætning, der skifter mens der ventes. Den står UNDER kortene og ikke over dem, fordi
   søgestatus-panelet lige ovenover allerede har brugerens blik - to konkurrerende beskeder
   samme sted får ingen af dem læst. */
.nt-skeleton-tip {
    margin:4px auto 8px; max-width:640px; text-align:center;
    font-family:var(--nt2-body); font-size:14px; line-height:1.5; color:#667085;
    opacity:0; transition:opacity .35s ease;
}
.nt-skeleton-tip.is-vis { opacity:1; }

/* Har brugeren bedt om mindre bevægelse, står skelettet stille. Formen og pladsen - det, der
   løser problemet - er der uændret; det er kun glimtet og teksternes overgang, der falder væk. */
@media (prefers-reduced-motion: reduce) {
    .nt-sk-bar, .nt-sk-logo, .nt-sk-btn { animation:none; background:#EDF1F5; }
    .nt-skeleton-tip { transition:none; opacity:1; }
}

/* Samme sammenklemning, som kortene selv får på tablet og små laptops - ellers ville skelettet
   og den færdige liste ikke længere fylde det samme, og pladsen ville springe alligevel.
   Breakpoint og tal følger .nt2-card i afsnittet ovenfor. */
@media (max-width: 1099px) {
    .nt-sk-card  { grid-template-columns:minmax(0,1fr) 194px 176px; }
    .nt-sk-info  { padding:14px; column-gap:14px; }
    .nt-sk-logo  { width:104px; height:36px; }
    .nt-sk-facts { grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:12px; }
}