/* =========================================
   DATING OVERSIGT - GLOBAL BOX SIZING FIX
   ========================================= */
.dating-overview-wrapper, 
.dating-overview-wrapper * {
    box-sizing: border-box !important;
}

.dx-provider-name {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--brand-primary) !important;
    margin-bottom: 6px !important;
    line-height: 1 !important;
}

/* =========================================
   DATING OVERSIGT - FILTER SIDEBAR & LAYOUT
   ========================================= */
.dating-overview-wrapper { 
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    align-items: flex-start; 
    font-family: 'Montserrat', sans-serif; 
    margin: 0 auto 40px auto; 
    max-width: 1420px; 
}

.dating-filter-container { 
    width: 320px; 
    flex-shrink: 0; 
    background: #fff; 
    border: 1px solid #e5e7eb; 
    border-radius: 12px; 
    padding: 24px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    position: sticky;
    top: 120px;
}

.dating-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dating-filter-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: #1f2937; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin: 0 !important;
}

.dx-mobile-filter-toggle {
    display: none; 
}

/* Skjul de nye mobil elementer på desktop */
.dx-mobile-modal-header,
.dx-mobile-sort-group {
    display: none;
}

/* Skal bruge !important her, fordi knappen også har klassen
   .dx-btn-primary, som sætter display: flex !important */
.dating-filter-content .dx-mobile-apply-btn {
    display: none !important;
}

.dating-filter-group { 
    margin-bottom: 15px; 
}

.dating-filter-group label { 
    display: block; 
    font-size: 13px; 
    font-weight: 600; 
    color: #4b5563; 
    margin-bottom: 8px; 
}

/* Scopet under .dating-filter-content med vilje.
   Reglen hed før #filter-reset-btn - en ID-selektor (1,0,0), der uden videre
   slog Elementors `.elementor-kit-1776 button` (0,1,1). Da id'et blev til en
   klasse for at undgå dubletter, faldt den til (0,1,0) og TABTE til Elementor:
   knappen blev grøn med hvid tekst. Forælderen løfter den til (0,2,0). */
.dating-filter-content .dx-filter-reset-btn {
    width: 100%;
    background: #f3f4f6;
    color: #4b5563;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.dating-filter-content .dx-filter-reset-btn i { margin-right: 6px; }
.dating-filter-content .dx-filter-reset-btn:hover:not(:disabled) { background: #e5e7eb; }
.dating-filter-content .dx-filter-reset-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* BAGSTOPPER
   Mobil-modalen flyttes til <body>, mens den er åben, så en forælder med
   overflow eller transform ikke kan klippe den. JavaScript flytter den hjem
   igen ved luk - men fyrer et resize/change-event ikke (ældre webviews,
   baggrundsfaner), ville panelet stå tilbage som direkte barn af <body>.
   Alle regler der gør det til en modal ligger i @media (max-width: 900px),
   så over den bredde ville det blive tegnet som en almindelig blok nederst
   på siden - fuld bredde, alle chips synlige.
   Denne ene regel gør den tilstand usynlig uden at røre JavaScript.
   Ingen !important: .dating-filter-content.is-open vinder med sin egen,
   så den åbne modal på mobil er upåvirket. Panelet i sidebaren er ikke
   direkte barn af <body> og rammes derfor slet ikke. */
body > .dating-filter-content { display: none; }

/* Scroll-lås mens mobil-modalen er åben.
   Scopet til samme bredde som modalen selv, så låsen ophører automatisk, hvis
   viewporten bliver bred - ellers kunne en telefon, der roteres til landskab
   med modalen åben, ende med en side, der ikke kan scrolles. */
@media (max-width: 900px) {
    body.dx-modal-open { overflow: hidden !important; }
}

/* =========================================
   NY FILTER STYLING (CHIPS)
   ========================================= */
.dx-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px !important; 
}

.dx-chip input[type="checkbox"] {
    display: none;
}

.dx-chip span {
    display: inline-block;
    padding: 6px 10px !important; 
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.dx-chip span:hover {
    background: var(--bg-softer);
    border-color: #d1d5db;
}

.dx-chip input[type="checkbox"]:checked + span {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(255, 79, 103, 0.2);
}

/* =========================================
   HOVEDINDHOLD & TOP HEADER
   ========================================= */
.dx-main-content {
    flex-grow: 1;
    max-width: 1080px;
}

.dx-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: transparent; 
    padding: 0 0 10px 0; 
    border: none; 
    box-shadow: none; 
}

.dx-results-lead {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.dx-sort-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dx-sort-container label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-medium);
}

.dx-sort-select {
    /* !important er nødvendigt her, ikke bare højere specificitet: temaets
       `select`-regel sætter selv padding med !important, og kun !important
       slår !important. Uden det bliver padding-right 20px i stedet for 12px. */
    padding: 8px 12px !important;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    outline: none;
    cursor: pointer;
}

/* =========================================
   KORT DESIGN (DX-PREFIX) & FARVER
   ========================================= */
:root {
    --brand-primary: #ff4f67;
    --brand-primary-hover: #e63e54;
    --brand-cta: #10b981;
    --brand-cta-hover: #059669;
    --text-dark: #1f2937;
    --text-medium: #4b5563;
    --text-light: #9ca3af;
    --bg-light: #f9fafb;
    --bg-softer: #f3f4f6;
    --border-color: #e5e7eb;
    --rank-silver: #9ca3af; 
    --success-green: #10b981;
    --success-bg: #e6f7f1;
    
    /* OPDATEREDE RATING FARVER */
    --rating-excellent: #059669; /* Klar, stærk grøn - bestod WCAG */
    --rating-good: #65a30d;      /* Lidt mere afdæmpet/oliven grøn */
    --rating-medium: #ca8a04;    /* Mørkere orange for læsbarhed */
    --rating-bad: #dc2626;       /* Dyb og tydelig rød */
}
.dx-color-excellent { color: var(--rating-excellent) !important; }
.dx-color-good { color: var(--rating-good) !important; }
.dx-color-medium { color: var(--rating-medium) !important; }
.dx-color-bad { color: var(--rating-bad) !important; }

.dx-bg-excellent { background-color: var(--rating-excellent) !important; }
.dx-bg-good { background-color: var(--rating-good) !important; }
.dx-bg-medium { background-color: var(--rating-medium) !important; }
.dx-bg-bad { background-color: var(--rating-bad) !important; }

.dx-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important; 
}

.dx-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    position: relative !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    font-family: 'Montserrat', sans-serif !important;
}

@media (hover: hover) and (pointer: fine) {
    .dx-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    }
}

.dx-card-main {
    display: flex !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* --- BADGES OG RANK --- */
.dx-badge-wrap {
    position: absolute !important;
    top: -1px !important; 
    left: -1px !important;
    display: flex !important;
    background: #fff5f6 !important;
    border-bottom-right-radius: 16px !important;
    border-top-left-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #ffe6e9 !important;
    border-top: none !important;
    border-left: none !important;
    z-index: 10 !important;
}

.dx-badge-wrap.dx-badge-silver {
    background: var(--bg-light) !important;
    border-color: var(--border-color) !important;
}

.dx-rank {
    background: var(--brand-primary) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important; 
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.dx-rank.dx-rank-silver {
    background: var(--rank-silver) !important;
}

.dx-favorit {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
    font-size: 10px !important; 
    padding: 5px 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
}

/* --- VENSTRE KOLONNE (LOGO + RATING) --- */
.dx-col-left {
    flex: 0 0 210px !important; /* Øget fra 180px for at gøre plads til "Hervorragend" */
    max-width: 210px !important; /* Sikrer at den ALDRIG bliver bredere */
    padding: 30px 12px 24px 12px !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; 
    border-right: 1px solid var(--border-color) !important;
}

.dx-logo-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.dx-logo-wrap img {
    max-width: 150px !important; 
    width: 100% !important;
    height: auto !important;
    margin-bottom: 4px !important; 
    display: block !important;
}

.dx-rating-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.dx-rating-score {
    font-weight: 900 !important;
    font-size: 32px !important; 
    line-height: 1 !important;
}

.dx-rating-divider {
    width: 1px !important;
    height: 32px !important;
    background-color: #e1e5ee !important;
}

.dx-rating-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
}

.dx-rating-stars {
    font-size: 13px !important; 
    margin-bottom: 4px !important; 
}

.dx-rating-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    margin: 0 !important; 
}

.dx-review-btn {
    font-size: 11px !important; 
    color: var(--brand-primary) !important;
    background: #ffffff !important;
    border: 1px solid var(--brand-primary) !important; 
    padding: 8px 12px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.dx-review-btn:hover {
    background: #fff5f6 !important;
    color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

/* --- MIDTERSTE KOLONNE (OVERSKRIFT, FAKTA, FORDELE) --- */
.dx-col-middle {
    flex: 1 !important; 
    padding: 24px 16px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: #fff !important;
}

.dx-best-for {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    color: var(--text-dark) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

.dx-support-line {
    font-size: 15px !important; 
    color: var(--text-dark) !important;
    line-height: 1.6 !important;
    margin: 0 0 16px 0 !important; 
}

.dx-lists-wrap {
    display: block !important; 
}

.dx-facts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important; 
    margin-bottom: 16px !important; 
}

.dx-fact-chip {
    background: var(--bg-softer) !important;
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

.dx-fact-chip > i {
    color: var(--brand-primary) !important;
    opacity: 0.9 !important;
    font-size: 14px !important; 
}

.dx-gender-icon-pink { color: #ff4f67 !important; font-size: 13px !important; }
.dx-gender-icon-blue { color: #3b82f6 !important; font-size: 13px !important; }
.dx-gender-split { display: inline-flex; align-items: center; gap: 4px; }
.dx-gender-divider { color: var(--text-light); font-weight: 400; margin: 0 2px; }

.dx-pros {
    display: flex !important;
    flex-wrap: wrap !important; 
    gap: 6px 8px !important; 
    margin-bottom: 0 !important; 
}

.dx-pro-item {
    font-size: 12.5px !important; 
    color: var(--text-dark) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important; 
    white-space: nowrap !important; 
}

.dx-pro-item > i {
    color: var(--success-green) !important;
    font-size: 14px !important; 
    line-height: 1 !important;
}

/* --- HØJRE KOLONNE (PRIS & KNAP) --- */
.dx-col-right {
    flex: 0 0 260px !important; 
    background: #ffffff !important; 
    border-left: 1px solid var(--border-color) !important; 
    padding: 30px 16px 56px 16px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important; 
}

.dx-price-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

.dx-price-label {
    font-size: 11px !important;
    color: var(--text-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.dx-price-value {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--text-dark) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.dx-price-period {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-light) !important;
}

.dx-btn-primary {
    background: var(--brand-cta) !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 16px 12px !important; 
    border-radius: 12px !important; 
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important; 
    margin-bottom: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dx-btn-primary:hover {
    background: var(--brand-cta-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important; 
}

.dx-btn-text-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 800 !important; 
    font-size: 17px !important; 
    white-space: nowrap !important; 
    text-align: center !important;
    line-height: 1.2 !important;
}

.dx-toggle-btn {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important; /* Giver en subtil grå ramme */
    border-radius: 99px !important; /* Giver den bløde pille-form */
    color: var(--text-medium) !important;
    font-size: 13px !important; 
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
    cursor: pointer !important;
    padding: 8px 16px !important; /* Gjort lidt større for bedre UX/klikbarhed */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    position: absolute !important;
    bottom: 16px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important; /* Lige akkurat nok skygge til at løfte den lidt */
}

.dx-toggle-btn:hover {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important; /* Rammen bliver pink ved hover */
    background: #fff5f6 !important; /* Meget svag pink baggrund ved hover */
}

.dx-toggle-btn i {
    font-size: 11px !important;
    color: var(--brand-primary) !important; /* Ikonet er altid pink for at trække øjet lidt ned */
    transition: transform 0.2s ease !important;
}

/* =========================================
   DETALJER (HARMONIKA) & REVIEWS
   ========================================= */
.dx-details-wrapper {
    border-top: 1px solid var(--border-color) !important;
    background: #ffffff !important;
    padding: 30px !important; 
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    animation: dxFadeIn 0.3s ease-out !important;
    display: none; 
}

@keyframes dxFadeIn { 
    from { opacity: 0; transform: translateY(-5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.dx-details-intro-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--text-dark) !important;
    margin: 40px 0 24px 0 !important;
}

.dx-details-intro-text p {
    margin-bottom: 15px !important;
}

.dx-details-caveat {
    background: #fff5f6 !important;
    border-left: 3px solid var(--brand-primary) !important;
    padding: 12px 16px !important;
    border-radius: 0 6px 6px 0 !important;
    margin-bottom: 24px !important; 
}

.dx-details-caveat strong {
    color: var(--brand-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
}

/* --- NYT MODERNE REVIEW LAYOUT --- */
.dx-review-rows-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 10px !important;
}

.dx-review-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important; 
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
}

.dx-review-header-icon {
    width: 48px !important;
    height: 48px !important;
    background: var(--success-bg, #e6f7f1) !important; 
    color: var(--success-green, #10b981) !important; 
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

.dx-review-header-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.dx-review-header-text h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--text-dark, #1f2937) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.dx-review-header-text p {
    font-size: 13px !important;
    color: var(--text-medium, #64748b) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.dx-review-details {
    margin: 0 !important;
    transition: background-color 0.2s ease !important;
    border-bottom: 1px solid #f3f4f6 !important; 
    border-radius: 8px !important;
    border-top: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}

.dx-review-details:last-child {
    border-bottom: none !important;
}

.dx-review-details:not(.is-open):hover {
    background-color: var(--bg-softer, #f8fafc) !important;
}

.dx-review-row-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important; 
    cursor: pointer !important;
    list-style: none !important;
    outline: none !important;
    border-radius: 8px !important;
}

.dx-review-row-label {
    flex: 0 0 190px !important; 
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-dark, #1f2937) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.dx-review-row-label i {
    color: var(--text-light, #9ca3af) !important;
    width: 16px !important;
    text-align: center !important;
}

.dx-review-row-bar-bg {
    flex-grow: 1 !important;
    height: 6px !important;
    background: #e2e8f0 !important;
    border-radius: 99px !important;
    overflow: hidden !important;
    margin: 0 16px !important;
}

.dx-review-row-bar-fill {
    height: 100% !important;
    border-radius: 99px !important;
    width: 0; /* VIGTIGT: !important er fjernet herfra */
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) !important; 
}

.dx-review-row-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.dx-review-row-score {
    font-size: 14px !important;
    font-weight: 800 !important;
    width: 36px !important; 
    text-align: right !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 2px !important;
}

.dx-review-row-score span {
    font-size: 10px !important;
    color: var(--text-light, #9ca3af) !important;
    font-weight: 600 !important;
}

.dx-review-chevron {
    color: var(--text-medium, #64748b) !important;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
    font-size: 11px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50% !important;
}

/* ANIMATION: Slide-down effekt */
.dx-review-content-wrapper {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dx-review-content-inner {
    overflow: hidden !important;
}

.dx-review-content {
    padding: 0 16px 20px 40px !important; 
    font-size: 13.5px !important;
    color: var(--text-medium, #4b5563) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ÅBEN TILSTAND */
.dx-review-details.is-open {
    background-color: #ffffff !important; 
    border-bottom: 1px solid transparent !important;
}

.dx-review-details.is-open .dx-review-content-wrapper {
    grid-template-rows: 1fr !important; 
}

.dx-review-details.is-open .dx-review-chevron {
    transform: rotate(180deg) !important;
    color: #ffffff !important;
    background: var(--brand-primary, #ff4f67) !important;
    border-color: var(--brand-primary, #ff4f67) !important;
}

.dx-review-details:hover .dx-review-chevron {
    border-color: var(--brand-primary, #ff4f67) !important;
    color: var(--brand-primary, #ff4f67) !important;
}
.dx-review-details.is-open:hover .dx-review-chevron {
    color: #ffffff !important; 
}

/* =========================================
   INLINE BILLEDER OG VIDEO I TEKST
   ========================================= */
.dx-inline-img,
.dx-details-intro-text img {
    display: block !important;
    width: auto !important; /* Ændret fra 100% for at forhindre vertikale billeder i at eksplodere i størrelse */
    max-width: 100% !important; /* Sikrer at brede landskabsbilleder stadig tilpasser sig skærmen */
    max-height: 550px !important; /* Sætter et loft over højden (perfekt til mobil-screenshots) */
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    margin: 30px auto !important; /* Sørger for at smalle billeder automatisk centreres pænt */
    object-fit: contain !important;
}

.dx-lazy-video, 
.dx-responsive-video {
    position: relative !important;
    width: 100% !important;
    max-width: 800px !important; 
    margin: 40px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    background: #000 !important;
    aspect-ratio: 16 / 9 !important; 
}

.dx-lazy-video { cursor: pointer !important; }

.dx-lazy-video img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.85 !important;
    transition: opacity 0.3s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.dx-lazy-video:hover img {
    opacity: 1 !important;
}

.dx-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Mørk semi-transparent baggrund og blur giver glas-effekten */
    background: rgba(31, 41, 55, 0.85) !important; /* Bruger din var(--text-dark) farve med 85% opacity */
    backdrop-filter: blur(6px) !important; 
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Svag hvid kant for at definere pilleformen */
    
    border-radius: 99px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #ffffff !important; 
    padding: 16px 28px !important;
    transition: all 0.3s ease !important;
    z-index: 2 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important; /* Kraftig skygge løfter den op fra billedet */
}

.dx-play-btn i {
    font-size: 20px !important;
}

.dx-play-text {
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: 'Montserrat', sans-serif !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

.dx-lazy-video:hover .dx-play-btn {
    transform: translate(-50%, -50%) scale(1.05) !important;
    background: rgba(31, 41, 55, 0.98) !important; /* Næsten helt solid ved hover */
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.5) !important;
}

.dx-responsive-video iframe, 
.dx-responsive-video object, 
.dx-responsive-video embed {
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    border-radius: 12px !important;
}

/* =========================================
   WORDPRESS EDITOR FIXES
   ========================================= */
.dx-details-intro-text .wp-caption,
.dx-details-intro-text figure.wp-caption {
    margin: 40px auto 30px auto !important;
    max-width: 800px !important; 
    text-align: center !important;
    display: block !important;
}

.dx-details-intro-text .wp-caption-text,
.dx-details-intro-text figcaption {
    display: block !important;
    font-size: 13px !important;
    color: var(--text-medium) !important;
    text-align: center !important;
    margin: 12px 0 0 0 !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.dx-details-intro-text {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
}

.dx-details-intro-text figure,
.dx-details-intro-text .wp-caption,
.dx-details-intro-text .wp-block-image,
.dx-details-intro-text picture,
.dx-details-intro-text div {
    width: 100% !important;        
    max-width: 100% !important;    
    min-width: 0 !important;       
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

.dx-details-intro-text p,
.dx-details-intro-text span,
.dx-details-intro-text a,
.dx-details-intro-text figcaption,
.dating-overview-wrapper * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* RØR IKKE denne regel uden at teste på mobil.
   Den ser ud som en doven "carpet bomb", og jeg forsøgte i v1.6.0 at snævre
   den ind til kun img/video/iframe/svg. Det brød mobilvisningen:
   .dx-col-left har max-width: 210px og .dx-col-bestfor har 250px fra
   desktop-layoutet, og det er præcis denne regel, der neutraliserer dem
   under 900px. Uden den klemmes venstre kolonne til 210px, og logoet
   skrumper til ~12px.
   Skal den engang gøres smallere, så overskriv de to max-widths eksplicit
   i mobil-media-queryen først - og mål efter. */
.dating-overview-wrapper * {
    max-width: 100% !important;
}

/* =========================================
   TOP MATCH HIGHLIGHT (WIZARD)
   ========================================= */
.dx-match-found .dx-card.dx-card-top-match {
    border: 2px solid var(--brand-primary) !important;
    box-shadow: 0 15px 40px rgba(255, 79, 103, 0.15) !important;
    transform: translateY(-2px) !important;
    margin-top: 15px !important; 
}

.dx-match-found .dx-card.dx-card-top-match::before {
    content: '🔥 Dein Top-Match basierend auf deinen Antworten';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-primary);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(255, 79, 103, 0.3);
}

.dx-match-found .dx-card.dx-card-top-match .dx-badge-wrap {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.dx-match-found .dx-card.dx-card-top-match .dx-rank {
    background: #ffffff !important;
    color: var(--brand-primary) !important;
}
.dx-match-found .dx-card.dx-card-top-match .dx-favorit {
    color: #ffffff !important;
}

/* =========================================
   MOBIL RESPONSIVITET (< 900px)
   ========================================= */
@media (max-width: 900px) {

    .dx-review-btn, .dx-btn-text-row {
        white-space: normal !important;
        text-align: center !important;
    }
    
    .dx-details-wrapper img,
    .dx-details-wrapper iframe,
    .dx-details-wrapper .dx-lazy-video,
    .dx-details-wrapper .dx-responsive-video {
        max-width: 100% !important;
    }
    
    .dx-card-main {
        flex-direction: column !important;
    }

    .dx-col-left {
        flex: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 16px !important; 
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .dx-logo-wrap { justify-content: flex-start !important; }
    .dx-logo-wrap img { max-width: 130px !important; margin-bottom: 0 !important; }

    .dx-rating-block {
        margin-bottom: 0 !important;
        width: auto !important;
        gap: 8px !important;
    }

    .dx-rating-score { font-size: 24px !important; }
    .dx-rating-divider { height: 24px !important; }
    .dx-rating-text { font-size: 10px !important; }
    .dx-rating-stars { font-size: 10px !important; margin-bottom: 2px !important; }

    .dx-col-middle {
        padding: 24px 16px 16px 16px !important; 
        display: flex !important;
        flex-direction: column !important;
    }

    .dx-provider-name {
        margin-bottom: 8px !important; 
    }

    .dx-lists-wrap {
        display: contents !important; 
    }

    .dx-best-for {
        order: 1 !important; 
        font-size: 17px !important;
        margin-bottom: 12px !important; 
    }

    .dx-facts {
        order: 2 !important; 
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        justify-content: space-between !important; 
        gap: 4px !important; 
        margin-bottom: 16px !important; 
        padding-bottom: 0 !important; 
        border-bottom: none !important; 
    }

    .dx-fact-chip {
        background: var(--bg-softer) !important; 
        padding: 4px 6px !important; 
        border-radius: 6px !important; 
        font-size: 11px !important; 
        font-weight: 600 !important;
        color: var(--text-dark) !important;
        display: flex !important;
        align-items: center !important; 
        justify-content: center !important;
        gap: 4px !important; 
        white-space: nowrap !important;
        flex: 1 1 auto !important; 
    }

    .dx-fact-chip > i { font-size: 12px !important; }
  
    .dx-gender-split {
        display: flex !important;
        align-items: center !important;
    }

    .dx-support-line {
        order: 3 !important; 
        font-size: 14px !important;
        margin-bottom: 16px !important; 
        line-height: 1.5 !important;
    }

    .dx-pros {
        order: 4 !important; 
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; 
        margin-top: 0 !important; 
        margin-bottom: 0 !important;
        width: 100% !important; 
    }

    .dx-pro-item {
        background: transparent !important; 
        padding: 0 !important; 
        font-size: 13px !important; 
        font-weight: 500 !important;
        color: var(--text-dark) !important;
        display: flex !important;
        align-items: flex-start !important; 
        justify-content: flex-start !important;
        white-space: normal !important; 
        line-height: 1.4 !important; 
        gap: 8px !important; 
    }

    .dx-pro-item > i {
        margin-top: 2px !important;
        flex-shrink: 0 !important; 
        width: 16px !important; 
        text-align: center !important;
    }

   .dx-col-right {
        flex: none !important;
        border-left: none !important; 
        border-top: none !important; 
        padding: 16px 16px 24px 16px !important; /* Ændret fra 60px til 24px i bunden */
    }

  .dx-toggle-btn {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important; /* Strækker knappen ud, så den matcher bredden på den grønne knap */
        margin-top: 12px !important; /* Skaber lidt luft op til den grønne knap */
    }

    .dx-price-box {
        flex-direction: row !important; 
        align-items: baseline !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .dx-price-label { margin-bottom: 0 !important; }
    .dx-price-value { font-size: 20px !important; }
    
    .dx-btn-primary { padding: 14px 10px !important; }
    .dx-btn-text-row { font-size: 16px !important; }
    .dx-details-wrapper { padding: 20px 16px !important; }

    /* NYT REVIEW LAYOUT MOBIL */
    .dx-review-header { align-items: flex-start !important; }
    .dx-review-header-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
    .dx-review-row-summary { flex-wrap: wrap !important; padding: 10px 8px !important; gap: 8px !important; }
    .dx-review-row-label { flex: 0 0 100% !important; margin-bottom: 2px !important; }
    .dx-review-row-bar-bg { margin: 0 8px 0 0 !important; }
    .dx-review-content { padding: 0 12px 20px 12px !important; }

    .dx-match-found .dx-card.dx-card-top-match::before {
        content: '🔥 Dein Top-Match' !important; 
        font-size: 12px !important;    
        padding: 5px 12px !important;  
    }

    .dx-match-found .dx-card.dx-card-top-match .dx-favorit {
        display: none !important;
    }

    /* =========================================
       APP-MENU LAYOUT & MODAL (RENSLET KODE)
       ========================================= */
       
    .dx-results-lead,
    .dating-filter-title,
    .dx-content-header {
        display: none !important; 
    }

    /* Wrapper tvinges til normal blok/kolonne */
    .dating-overview-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 16px !important;
        /* Arver ellers 30px fra desktop. Det er denne gap - ikke notens egen
           margin - der giver luften mellem filterknappen og annoncemærkningen.
           16px matcher notens bundmargin, så den står symmetrisk, og første
           kort rykker 14px højere op. */
        gap: 16px !important;
    }
    
    .dating-filter-container,
    .dx-main-content {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: static !important;
    }

    /* Den store fuldskærms-knap der aktiverer menuen */
    .dating-filter-header {
        display: block !important;
        width: 100% !important;
        /* 0, ikke 24px. På desktop adskiller marginen overskriften fra
           filterindholdet nedenunder - men på mobil ER filterindholdet en
           modal, så der står intet under headeren. De 24px lagde sig oveni
           wrapperens gap og gav 40px luft over annoncemærkningen mod 16px
           under. Afstanden styres nu ét sted: wrapperens gap. */
        margin-bottom: 0 !important;
    }
    
    .dx-mobile-filter-toggle {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 48px !important;
        padding: 0 20px !important;
        justify-content: center !important;
        border-radius: 12px !important;
        margin: 0 !important;
        font-size: 15px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-dark) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
        cursor: pointer;
        box-sizing: border-box !important;
    }

   /* MODAL: Den fulde, låste skærm */
    .dating-filter-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 99999999 !important; 
        padding: 24px 24px calc(env(safe-area-inset-bottom, 20px) + 40px) 24px !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: none; 
        flex-direction: column;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .dating-filter-content.is-open {
        display: flex !important;
        animation: dxFadeIn 0.3s ease-out;
    }

    .dx-mobile-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }

    .dx-mobile-modal-title {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--text-dark);
    }

    /* Samme historie som reset-knappen: var #dx-mobile-close-btn (1,0,0),
       blev klasse (0,1,0) og tabte til Elementors knapstil - krydset fik
       grøn baggrund. Forælderen løfter den til (0,2,0). */
    .dating-filter-content .dx-mobile-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-dark);
        cursor: pointer;
        padding: 4px;
    }

    .dx-mobile-sort-group {
        display: block;
        margin-bottom: 24px;
    }

    .dx-mobile-sort-group .dx-sort-select {
        width: 100%;
        height: 48px;
        margin-top: 8px;
        font-size: 15px;
    }

    .dx-filter-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: auto; 
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .dating-filter-content .dx-mobile-apply-btn {
        display: flex !important;
        width: 100%;
        height: 48px;
        font-size: 15px;
        justify-content: center;
        border: none;
    }
}

/* =========================================
   DATING TABEL (NY SHORTCODE)
   ========================================= */
.dx-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    overflow: hidden; 
}

.dx-dating-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dx-dating-table th {
    padding: 16px 20px;
    border-bottom: 2px solid #f3f4f6;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
}

.dx-dating-table td {
    padding: 20px;
    vertical-align: middle;
    border-bottom: none;
}

.dx-table-row {
    border-bottom: 1px dashed #e5e7eb;
}

.dx-table-row:last-child {
    border-bottom: none;
}

/* Kolonne 1: Anbieter */
.dx-provider-inner {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Scopet under .dx-table-wrapper: som ren enkeltklasse (0,1,0) taber height
   til Elementors `.elementor img { height: auto }` (0,1,1), og logoet blev
   150px højt i stedet for 45px. Forælderen løfter den til (0,2,0). */
.dx-table-wrapper .dx-table-logo {
    width: 90px;
    height: 45px;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
}

.dx-table-name {
    font-weight: 700;
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 2px;
}

.dx-table-stars {
    font-size: 12px;
    font-weight: 600;
}

/* Kolonne 2: Note */
.dx-note-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dx-note-box {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1;
    min-width: 45px;
    text-align: center;
    background-color: #003a5d; 
}

.dx-note-box.dx-bg-excellent { background-color: var(--rating-excellent); }
.dx-note-box.dx-bg-good { background-color: var(--rating-good); }

.dx-note-text strong {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.dx-note-text span {
    font-size: 11px;
    color: #9ca3af;
}

/* Kolonne 3: Beste für */
.dx-col-bestfor {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    max-width: 250px;
}

/* Kolonne 4: Knapper */
.dx-col-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.dx-btn-table-outline {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 99px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dx-btn-table-outline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Scopet: `.elementor a { box-shadow: none }` (0,1,1) slog ellers skyggen ud. */
.dx-table-wrapper .dx-btn-table-primary {
    padding: 10px 20px;
    background: var(--brand-cta);
    color: #fff;
    border-radius: 99px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.dx-btn-table-primary:hover {
    background: var(--brand-cta-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}

/* Mobil Responsivitet for Tabel */
@media (max-width: 900px) {
    .dx-dating-table th {
        display: none; 
    }
    
    .dx-dating-table tr.dx-table-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 16px;
        border-bottom: 3px solid #f3f4f6;
        gap: 16px;
    }
    
    .dx-dating-table td {
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
        padding: 0;
        border: none;
    }
    
    .dx-provider-inner {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    /* Samme scoping som basisreglen, ellers ville den her (0,1,0) tabe til
       Elementor og efterlade mobilhøjden ustyret. */
    .dx-table-wrapper .dx-table-logo {
        width: 120px;
        height: 50px;
        margin-bottom: 0;
    }
    
    .dx-table-name {
        font-size: 16px;
    }
    
    .dx-note-wrapper {
        background: #f9fafb;
        padding: 8px 24px;
        border-radius: 99px;
        margin: 0 auto;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        border: 1px solid #f3f4f6;
    }
    
    .dx-col-bestfor {
        text-align: center;
        font-size: 14px;
        color: #4b5563;
        padding: 0 10px;
        line-height: 1.5;
    }
    
    .dx-col-actions {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin-top: 8px;
    }
    
    .dx-btn-table-outline, 
    .dx-btn-table-primary {
        flex: 1;
        width: auto;
        text-align: center;
        padding: 14px 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

/* =========================================
   DATING TABEL - VIS ALLE KNAP OG SKJUL
   ========================================= */
.dx-hidden-row {
    display: none !important;
}

/* [hidden] taber til klassernes egne display-regler - derfor eksplicit. */
.dx-table-show-more[hidden],
.dx-table-empty[hidden] {
    display: none !important;
}

/* Søgefelt over store tabeller ([dating_tabel soeg="auto"], fra 20 rækker).
   Scopet under .dx-table-wrapper (0,2,0), så temaets input[type=search]
   (0,1,1) ikke overtager. */
.dx-table-search {
    padding: 16px 20px 4px;
}

.dx-table-wrapper .dx-table-search-input {
    width: 100%;
    max-width: 360px;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 99px;
    font: inherit;
    font-size: 14px;
    color: var(--text-dark, #1f2937);
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%;
    background-size: 16px 16px;
    box-shadow: none;
}

.dx-table-wrapper .dx-table-search-input:focus {
    outline: none;
    border-color: var(--brand-primary, #ff4f67);
    box-shadow: 0 0 0 3px rgba(255, 79, 103, 0.15);
}

.dx-table-empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: var(--text-medium, #4b5563);
    font-size: 14px;
}

/* "15 von 86 Anbietern" over knappen. */
.dx-table-count {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-medium, #4b5563);
    font-variant-numeric: tabular-nums;
}

/* Fokus flyttes til første nye række efter "Weitere ... anzeigen".
   Kun synlig ved tastaturbrug. */
.dx-table-row:focus {
    outline: none;
}

.dx-table-row:focus-visible {
    outline: 2px solid var(--brand-primary, #ff4f67);
    outline-offset: -2px;
}

.dx-table-show-more {
    text-align: center;
    padding: 16px 24px 30px 24px; /* Lidt mere luft i bunden */
    background: #ffffff;
    border-radius: 0 0 12px 12px;
}

.dx-btn-show-all {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important; /* Lidt tydeligere streg */
    border-radius: 99px !important;
    padding: 12px 28px !important;
    color: #4b5563 !important; /* Tvinger teksten til at være mørkegrå */
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 160px !important; /* Sikrer at knappen ikke klapper sammen */
    min-height: 46px !important;
}

.dx-btn-show-all:hover {
    color: #ff4f67 !important; /* Din pink brand-farve */
    border-color: #ff4f67 !important;
    background: #fff5f6 !important;
}

.dx-btn-show-all i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.dx-btn-show-all:hover i {
    transform: translateY(3px); /* Pilen peger nedad */
}

/* Speciel styling til lange Coin-priser, så de ikke bliver for voldsomme */
.dx-price-value.dx-price-value-coin {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: block !important; /* Fjerner flex, som skaber mærkelige linjeskift */
    margin-top: 4px !important;
}

/* =========================================
   GØR AT OVERSIGTER UDEN FILTER FYLDER BREDDEN
   ========================================= */
.dating-overview-wrapper.dx-no-filter {
    justify-content: center !important;
}
.dating-overview-wrapper.dx-no-filter .dx-main-content {
    max-width: 100% !important;
    width: 100% !important;
}
/* =========================================
   v1.6.0 - TILGÆNGELIGHED & KNAP-RESET
   ========================================= */

/* .dx-review-row-summary er nu et <button> (kan betjenes med tastatur),
   så den skal have browserens knap-styling nulstillet. */
.dx-review-row-summary {
    width: 100% !important;
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
    text-align: left !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Bar-fill er nu et <span> inde i et <span>, så den skal blokificeres
   for at width/height virker. */
.dx-review-row-bar-fill {
    display: block !important;
}

/* Synlig fokus-markering. Uden dette er tastaturnavigation usynlig
   (WCAG 2.4.7). :focus-visible viser den kun ved tastatur, ikke ved museklik. */
.dating-overview-wrapper a:focus-visible,
.dating-overview-wrapper button:focus-visible,
.dating-overview-wrapper select:focus-visible,
.dating-overview-wrapper input:focus-visible,
.dating-overview-wrapper [tabindex]:focus-visible,
.dating-filter-content a:focus-visible,
.dating-filter-content button:focus-visible,
.dating-filter-content select:focus-visible,
.dating-filter-content input:focus-visible,
.dx-table-wrapper a:focus-visible,
.dx-table-wrapper button:focus-visible {
    outline: 3px solid var(--brand-primary, #ff4f67) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Chips er <label> med skjult checkbox - markér den omsluttende chip. */
.dx-chip:focus-within {
    outline: 3px solid var(--brand-primary, #ff4f67) !important;
    outline-offset: 2px !important;
}

/* Respektér brugerens systemindstilling om reduceret bevægelse (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .dating-overview-wrapper *,
    .dx-table-wrapper *,
    .dating-filter-content * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   v1.6.2 - ANNONCEMÆRKNING
   Dæmpet variant: læses som redaktionel metadata, ikke som en advarselsboks.
   ========================================= */

/* Skjult for øjet, men læst op af skærmlæsere. Et ikon alene er ikke
   en tilgængelig mærkning - der skal et rigtigt ord med. */
.dx-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dx-affiliate-hinweis {
    margin: 0 0 22px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.dx-affiliate-hinweis p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: var(--text-light, #9ca3af) !important;
}

.dx-affiliate-hinweis a {
    color: var(--text-medium, #4b5563) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.dx-affiliate-hinweis a:hover {
    color: var(--brand-primary, #ff4f67) !important;
}

/* Symbolet - både i sætningen og ude ved knapperne, så koblingen er tydelig. */
.dx-anzeige-icon {
    font-size: 0.85em !important;
    vertical-align: baseline !important;
    margin: 0 1px !important;
    color: var(--text-light, #9ca3af) !important;
}

/* .dx-btn-text-row er en flex-container, og vertical-align virker IKKE på
   flex-items. Derfor pakkes tekst + markør i én fælles inline-kontekst,
   så markøren kan hæves som en ægte fodnote frem for at blive endnu et
   centreret ikon ved siden af teksten. */
.dx-btn-label {
    display: inline !important;
}

/* Fodnote-markøren inde i knappen.
   Bevidst IKKE vertical-align:super - den hæver så meget, at ikonet stikker
   ud over tekstens linjeboks og ser løsrevet ud. I stedet grundlinje-justering
   plus et målt løft, så underkanten lander ca. 2,7px over grundlinjen og
   overkanten bliver inde i linjen. */
.dx-anzeige-inline {
    display: inline-block !important;
    vertical-align: baseline !important;
    position: relative !important;
    top: -0.2em !important;
    font-size: 0.62em !important;
    line-height: 1 !important;
    margin-left: 3px !important;
}

/* Tabelknappen har mindre grundskrift (13px), så 0.62em ville blive
   for lille til at fungere som mærkning. */
.dx-btn-table-primary .dx-anzeige-inline {
    font-size: 0.75em !important;
}

/* Inde i en farvet knap skal ikonet arve knappens tekstfarve - ikke stå
   gråt på grøn baggrund. */
.dx-btn-primary .dx-anzeige-icon,
.dx-btn-table-primary .dx-anzeige-icon {
    color: currentColor !important;
    opacity: 0.7 !important;
    font-size: 1em !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    margin: 0 !important;
}

.dx-anzeige-tag {
    margin-top: 7px !important;
    text-align: center !important;
    line-height: 1 !important;
    cursor: help !important;
}

/* Tydelig variant: ordet i stedet for symbolet. */
.dx-anzeige-tag-deutlich {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--text-light, #9ca3af) !important;
}

.dx-hinweis-deutlich p {
    padding: 12px 16px !important;
    background: var(--bg-light, #f9fafb) !important;
    border-left: 3px solid var(--text-light, #9ca3af) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: var(--text-medium, #4b5563) !important;
}

/* I tabellen sidder mærkningen under "Zum Anbieter". */
.dx-col-actions .dx-anzeige-tag {
    margin-top: 5px !important;
}

@media (max-width: 900px) {
    .dx-affiliate-hinweis {
        margin-bottom: 16px !important;
    }
    .dx-affiliate-hinweis p {
        font-size: 11.5px !important;
    }
}

/* =====================================================================
   DANSK UDGAVE (findenkaereste.dk)
   ===================================================================== */

/* Etiketten foran faktachippens værdi ("Målgruppe: Alle"). */
.dx-fact-label {
    font-weight: 600;
}

/* Udbydere uden samarbejde: ingen knap, men en tydelig, neutral besked. */
.dx-no-partner {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px dashed var(--border-color, #d0d5dd);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #475467;
    background: #f9fafb;
}

/* "Læs mere" / "Læs anmeldelsen" i kortets højre kolonne. */
.dx-col-right .dx-laes-mere {
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
    box-sizing: border-box;
}

/* Ingen fordele på kortet (normalt på findenkaereste.dk): faktarækken er
   sidste element og skal ikke skubbe en tom margin ned mod knappen. */
.dx-lists-wrap > .dx-facts:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    /* Med etiketter ("Målgruppe:", "Alder:", "Aktivitet:") er chippene for
       lange til én linje på en telefon - det tyske nowrap skar dem af.
       De må gerne bryde, og hver chip beholder sin naturlige bredde. */
    .dx-facts {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    .dx-fact-chip {
        flex: 0 1 auto !important;
    }
    .dx-lists-wrap > .dx-facts:last-child {
        margin-bottom: 0 !important;
    }
}

/* ---------------------------------------------------------------------
   Udbyderens afsnit inde i "Læs mere" (desc_<kategori>).
   Afsnittene kom fra Elementor-sektioner med Fordele/Ulemper og
   Gratis/Betalte funktioner side om side - samme opbygning her.
   --------------------------------------------------------------------- */
.dx-details-intro-text h4 {
    margin: 28px 0 10px;
    font-size: 17px;
    line-height: 1.35;
}

.dx-details-intro-text .dx-detail-lists {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.dx-details-intro-text .dx-detail-list {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--bg-softer, #f6f7f9);
}

.dx-detail-list h4 {
    margin: 0 0 10px;
    font-size: 15px;
}

.dx-detail-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-detail-list li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.45;
}

.dx-detail-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.dx-detail-pro li::before,
.dx-detail-free li::before { content: "✓"; color: #12a150; }
.dx-detail-con li::before  { content: "✕"; color: #d92d20; }
.dx-detail-paid li::before { content: "★"; color: #f79009; }
.dx-detail-list:not(.dx-detail-pro):not(.dx-detail-con):not(.dx-detail-free):not(.dx-detail-paid) li::before { content: "•"; }

/* TablePress inde i kortet må gerne rulle vandret på smalle skærme. */
.dx-detail-table {
    margin: 12px 0 20px;
    overflow-x: auto;
}
.dx-detail-table table {
    margin: 0 !important;
}

.dx-detail-img {
    margin: 20px 0;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Filteret flugter med første kort (desktop).
   Over kortene står "12 udbydere fundet" + sortering. Rækken får en fast
   højde, og filteret rykkes præcis så langt ned - så toppen af filteret og
   toppen af kort nr. 1 står på samme linje, uanset om sorteringen er der.
   Retter I højden her, så ret margin-top på filteret tilsvarende.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
    .dating-overview-wrapper .dx-content-header {
        height: 44px;
        margin-bottom: 20px;
        padding: 0;
    }
    .dating-overview-wrapper .dating-filter-container {
        margin-top: 64px; /* 44px række + 20px luft */
    }
    .dating-overview-wrapper.dx-no-filter .dx-content-header {
        height: auto;
    }
}

/* ---------------------------------------------------------------------
   Sorteringsfeltet: egen pil i stedet for browserens, afrundet som
   chippene, og brandfarven ved hover og fokus.
   --------------------------------------------------------------------- */
.dating-overview-wrapper .dx-sort-container label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

.dating-overview-wrapper .dx-sort-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: 44px;
    min-width: 200px;
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ff4f67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05);
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 42px;
    color: var(--text-dark) !important;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dating-overview-wrapper .dx-sort-select:hover {
    border-color: var(--brand-primary) !important;
}

.dating-overview-wrapper .dx-sort-select:focus,
.dating-filter-content .dx-sort-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 79, 103, 0.15);
    outline: none;
}

/* Samme felt i mobil-modalen (står i <body>, mens den er åben). */
.dating-filter-content .dx-sort-select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ff4f67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    font-weight: 600;
    color: var(--text-dark) !important;
}

/* ---------------------------------------------------------------------
   Højre kolonne: "Læs mere" i det normale flow (desktop).
   Den stod absolut 16px fra bunden, mens pris og "Besøg side" var
   centreret lodret - så afstanden imellem dem voksede med kortets højde.
   Nu er pris, knap og "Læs mere" én samlet, centreret blok med fast
   afstand, uanset hvor højt kortet er.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
    .dx-col-right {
        padding: 24px 16px !important;
    }
    .dx-col-right .dx-toggle-btn {
        position: static !important;
        transform: none !important;
        margin-top: 14px !important;
    }
    .dx-col-right .dx-no-partner + .dx-toggle-btn,
    .dx-col-right .dx-no-partner + .dx-laes-mere {
        margin-top: 14px !important;
    }
}

/* Pil i den grønne CTA, der glider en anelse frem ved hover. */
.dx-btn-arrow {
    font-size: 0.8em !important;
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.dx-btn-primary:hover .dx-btn-arrow,
.dx-btn-table-primary:hover .dx-btn-arrow {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .dx-btn-arrow { transition: none; }
}

/* ---------------------------------------------------------------------
   Pristabel ([dx_priser]) - erstatter TablePress i "Læs mere".
   Scopet under .dx-details-intro-text, fordi den gamle regel
   ".dx-details-intro-text div { display:block !important }" ellers vinder.
   --------------------------------------------------------------------- */
.dx-details-intro-text .dx-pris-tabel-wrap {
    margin: 12px 0 24px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

.dx-details-intro-text .dx-pris-tabel {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.4;
    table-layout: fixed;
}

.dx-details-intro-text .dx-pris-tabel th,
.dx-details-intro-text .dx-pris-tabel td {
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent;
    text-align: left;
    vertical-align: middle;
}

.dx-details-intro-text .dx-pris-tabel tbody tr:last-child th,
.dx-details-intro-text .dx-pris-tabel tbody tr:last-child td {
    border-bottom: 0 !important;
}

.dx-details-intro-text .dx-pris-tabel thead th {
    background: #fff5f6;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dx-details-intro-text .dx-pris-tabel tbody th {
    font-weight: 600;
    color: var(--text-dark);
}

.dx-details-intro-text .dx-pris-tabel .dx-pris-periode {
    font-weight: 800;
    color: var(--text-dark);
}

.dx-details-intro-text .dx-pris-tabel .dx-pris-total {
    color: var(--text-medium);
}

.dx-details-intro-text .dx-pris-tabel tr.dx-pris-billigst th,
.dx-details-intro-text .dx-pris-tabel tr.dx-pris-billigst td {
    background: #ecfdf3;
}

.dx-details-intro-text .dx-pris-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--brand-cta);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .dx-details-intro-text .dx-pris-tabel {
        font-size: 13px;
    }
    .dx-details-intro-text .dx-pris-tabel th,
    .dx-details-intro-text .dx-pris-tabel td {
        padding: 12px 10px !important;
    }
    .dx-details-intro-text .dx-pris-tabel thead th {
        font-size: 10px;
    }
    /* "Billigst" under periodens navn, så den ikke presser kolonnerne. */
    .dx-details-intro-text .dx-pris-tag {
        display: table;
        margin: 4px 0 0;
    }
}

/* ---------------------------------------------------------------------
   Punktopstillinger i "Læs mere"-teksten.
   Neve nulstiller ALLE lister (ul { list-style: none; padding: 0 }).
   Elementors tekstwidget sætter punkterne på igen andre steder på sitet,
   men udbyderteksten her ligger uden for Elementor og arvede nulstillingen.
   Kun lister direkte i teksten - ikke Fordele/Ulemper-boksene, som har
   deres egne ikoner.
   --------------------------------------------------------------------- */
.dx-details-intro-text > ul,
.dx-details-intro-text > ol {
    margin: 0 0 20px !important;
    padding-left: 22px !important;
}

.dx-details-intro-text > ul {
    list-style: none !important;
}

.dx-details-intro-text > ol {
    list-style: decimal !important;
}

.dx-details-intro-text > ul > li,
.dx-details-intro-text > ol > li {
    position: relative;
    margin: 0 0 8px !important;
    line-height: 1.6;
}

/* Brandfarvede prikker i stedet for browserens sorte. */
.dx-details-intro-text > ul > li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-primary);
}

.dx-details-intro-text > ol > li::marker {
    color: var(--brand-primary);
    font-weight: 700;
}

/* Undertegnede lister (liste i en liste). */
.dx-details-intro-text li > ul,
.dx-details-intro-text li > ol {
    margin: 8px 0 0 !important;
    padding-left: 20px !important;
}
.dx-details-intro-text li > ul {
    list-style: circle !important;
}

/* ---------------------------------------------------------------------
   Fakta på kortet (variant B): ikon i pink cirkel, lille etiket over
   en fed værdi. Erstatter de grå piller (.dx-fact-chip).
   Scopet under .dx-card, så de gamle .dx-facts-regler (bl.a. mobilens
   nowrap/space-between) ikke rammer.
   --------------------------------------------------------------------- */
.dx-card .dx-facts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px 26px !important;
    margin: 4px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
}

.dx-card .dx-fact {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.dx-card .dx-fact-ikon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff5f6;
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.dx-card .dx-fact-tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.dx-card .dx-fact-etiket {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
}

.dx-card .dx-fact-vaerdi {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.dx-lists-wrap > .dx-facts:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 900px) {
    .dx-card .dx-facts {
        order: 2 !important;
        gap: 10px 18px !important;
        margin-bottom: 16px !important;
    }
    .dx-card .dx-fact-ikon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------------
   Fakta på MOBIL som kompakt liste (variant 2): ikon + etiket til
   venstre, værdi til højre, tynde skillelinjer.
   Holdt inden for samme højde som før (70px for tre faktaer), så
   kortene ikke bliver højere: 20px ikon, 3px luft, ingen kant øverst
   og nederst - kun imellem rækkerne.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .dx-card .dx-facts {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin-bottom: 16px !important;
    }
    .dx-card .dx-fact {
        width: 100%;
        gap: 8px;
        padding: 3px 0;
    }
    .dx-card .dx-fact + .dx-fact {
        border-top: 1px solid #eef0f3;
    }
    .dx-card .dx-fact-ikon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .dx-card .dx-fact-tekst {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        line-height: 1.3;
    }
    .dx-card .dx-fact-etiket {
        font-size: 12px;
        color: var(--text-medium);
        white-space: nowrap;
    }
    .dx-card .dx-fact-vaerdi {
        font-size: 13px;
        text-align: right;
    }
}
@media (max-width: 900px) {
    /* Målt: listen gav +10px pr. kort. 2px luft (i stedet for 3) og 12px
       bundmargin (i stedet for 16) tager præcis de 10px igen. */
    .dx-card .dx-fact { padding: 2px 0; }
    .dx-card .dx-facts { margin-bottom: 12px !important; }
}

/* ---------------------------------------------------------------------
   KOMPAKT KORT PÅ MOBIL (godkendt 05.10.2026)
   Rækkefølge som på desktop: overskrift -> beskrivelse -> fakta.
   Fjernet på mobil (står stadig på desktop og i "Læs mere"):
     - udbydernavnet over overskriften (logoet viser det; navnet er stadig
       i HTML'en for skærmlæsere og søgemaskiner)
     - fordele-fluebenene (står i Fordele-boksen under "Læs mere")
   "Læs mere" er et tekstlink i stedet for en pilleknap.
   Mål: ca. 590px -> ca. 420px pr. kort.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .dx-card .dx-provider-name {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .dx-card .dx-col-middle {
        padding: 14px 16px 4px !important;
    }

    .dx-card .dx-best-for {
        order: 1 !important;
        margin-bottom: 4px !important;
    }

    .dx-card .dx-support-line {
        order: 2 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 0 0 10px !important;
    }

    .dx-card .dx-facts {
        order: 3 !important;
    }

    .dx-card .dx-pros {
        display: none !important;
    }

    .dx-card .dx-col-right {
        padding: 2px 16px 12px !important;
    }

    .dx-card .dx-price-box {
        justify-content: center !important;
        margin-bottom: 8px !important;
    }

    .dx-card .dx-price-value {
        font-size: 18px !important;
    }

    /* "Læs mere" som tekstlink. */
    .dx-card .dx-col-right .dx-toggle-btn,
    .dx-card .dx-col-right .dx-laes-mere {
        width: auto !important;
        margin: 6px auto 0 !important;
        padding: 6px 12px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 13px !important;
    }
}

/* "Ikke tilgængelig gennem os" på én linje. */
.dx-card .dx-no-partner {
    white-space: nowrap;
    padding: 12px 10px;
}

/* ---------------------------------------------------------------------
   Fordele på desktop: altid ÉN linje.
   Linjen har højde til præcis én række (21,25px). Et punkt, der ikke kan
   være der, ombrydes HELT ned på række to, som er skjult - så intet punkt
   bliver skåret over, og antallet tilpasser sig skærmbredden af sig selv.
   Ingen JavaScript, så intet hop, når siden indlæses.
   Alle fordele står stadig i Fordele-boksen under "Læs mere".
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
    .dx-card .dx-pros {
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        max-height: 22px !important;
        overflow: hidden !important;
    }
}

/* ---------------------------------------------------------------------
   Fordele på kortet (variant B1, 05.10.2026): kun et grønt flueben uden
   cirkel og en tynd skillestreg mellem punkterne, så de ikke flyder
   sammen. Stregen sidder på punktet selv (::before), så et punkt, der
   ombrydes til den skjulte række to, tager sin streg med.
   --------------------------------------------------------------------- */
.dx-card .dx-pros {
    gap: 6px 25px !important; /* 12px luft + 1px streg + 12px luft */
}
.dx-card .dx-pro-item {
    position: relative;
    gap: 5px !important;
}
.dx-card .dx-pro-item > i {
    color: var(--brand-cta) !important;
    font-size: 11px !important;
}
.dx-card .dx-pro-item + .dx-pro-item::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--border-color);
}

/* Mobil-fakta, variant B (05.10.2026): fast etiketkolonne, så værdien
   står lige efter etiketten - ikke helt ude til højre med et stort hul
   imellem. Alle værdier starter på samme lodrette linje. 118px rummer
   "Aktivitetsniveau", den længste etiket. */
@media (max-width: 900px) {
    .dx-card .dx-fact-tekst {
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    .dx-card .dx-fact-etiket {
        flex: 0 0 118px;
    }
    .dx-card .dx-fact-vaerdi {
        text-align: left !important;
    }
}

/* ---------------------------------------------------------------------
   FAKTA: ALT ELLER INTET (05.10.2026)
   Enten står alle tre faktaer på én linje, eller hver på sin egen linje -
   aldrig to på én linje og én alene, og en værdi brydes aldrig.
   Afgøres af midterkolonnens egen bredde (container query), ikke af
   skærmen: ved skærme på ca. 900-1200px er kolonnen for smal til tre
   side om side, selv om det er "desktop".
   450px: det bredeste kort (Partner Med Niveau) kræver 433px til tre på
   én linje. Kommer der længere tekster til, så hæv tallet.
   Listen er samme opstilling som på mobil: ikon, fast etiketkolonne,
   værdien lige efter.
   --------------------------------------------------------------------- */
.dx-card .dx-col-middle {
    container-type: inline-size;
    container-name: dxmidt;
}

.dx-card .dx-fact-vaerdi,
.dx-card .dx-fact-etiket {
    white-space: nowrap;
}

@container dxmidt (max-width: 449px) {
    .dx-card .dx-facts {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    .dx-card .dx-fact {
        width: 100%;
        gap: 8px;
        padding: 2px 0;
    }
    .dx-card .dx-fact + .dx-fact {
        border-top: 1px solid #eef0f3;
    }
    .dx-card .dx-fact-ikon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .dx-card .dx-fact-tekst {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        line-height: 1.3;
    }
    .dx-card .dx-fact-etiket {
        flex: 0 0 118px;
        font-size: 12px;
        color: var(--text-medium);
    }
    .dx-card .dx-fact-vaerdi {
        font-size: 13px;
        text-align: left;
    }
}

/* Meget smal midterkolonne (tabletbredder, hvor filter + logo- og
   priskolonne tager pladsen): etiketten over værdien, så værdien aldrig
   skæres af. Midlertidig nødløsning - se noten om tabletlayoutet. */
@container dxmidt (max-width: 299px) {
    .dx-card .dx-fact-tekst {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }
    .dx-card .dx-fact-etiket {
        flex: 0 0 auto !important;
        font-size: 11px !important;
    }
    .dx-card .dx-fact-vaerdi {
        white-space: normal !important;
    }
}

/* ---------------------------------------------------------------------
   MOBIL: FAKTABÅND (godkendt 05.10.2026)
   Faktaerne står som et pink bånd i fuld bredde lige under logo og
   karakter - tre kasser med centreret indhold, lille etiket over værdien,
   ingen ikoner. Erstatter mobil-listen ovenfor.
   Kasserne er lige brede, men kan vokse, hvis en værdi kræver det
   (minmax(max-content, 1fr)), så teksten aldrig brydes.
   Kun CSS: båndet er stadig .dx-facts inde i midterkolonnen; det flyttes
   op med order og strækkes ud til kortets kanter med negativ margin.
   Højere specificitet end container query-reglerne, som ellers også
   ville ramme på mobil.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .dating-overview-wrapper .dx-card .dx-col-left {
        border-bottom: 0 !important;
    }
    .dating-overview-wrapper .dx-card .dx-col-middle .dx-facts {
        order: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(max-content, 1fr));
        flex-direction: row !important;
        gap: 0 !important;
        margin: -14px -16px 12px !important;
        padding: 8px 6px !important;
        background: #fff5f6;
        border-top: 1px solid #fde1e5 !important;
        border-bottom: 1px solid #fde1e5 !important;
    }
    .dating-overview-wrapper .dx-card .dx-fact {
        width: auto;
        padding: 0 8px;
        justify-content: center;
        border: 0 !important;
    }
    .dating-overview-wrapper .dx-card .dx-fact + .dx-fact {
        border-left: 1px solid #f6c9d1 !important;
    }
    .dating-overview-wrapper .dx-card .dx-fact-ikon {
        display: none !important;
    }
    .dating-overview-wrapper .dx-card .dx-fact-tekst {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        text-align: center;
    }
    .dating-overview-wrapper .dx-card .dx-fact-etiket {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        font-weight: 600;
        color: #c2415a !important;
    }
    .dating-overview-wrapper .dx-card .dx-fact-vaerdi {
        font-size: 12.5px !important;
        font-weight: 800;
        text-align: center !important;
        white-space: nowrap !important;
    }
    .dating-overview-wrapper .dx-card .dx-best-for {
        order: 1 !important;
    }
    .dating-overview-wrapper .dx-card .dx-support-line {
        order: 2 !important;
    }
}
@media (max-width: 900px) {
    /* Midterkolonnen lægger sine børn til venstre (align-items), så den
       negative højremargin ikke strakte båndet ud. Bredden sættes derfor
       eksplicit til kolonnen + de to gange 16px polstring. */
    .dating-overview-wrapper .dx-card .dx-col-middle .dx-facts {
        align-self: stretch !important;
        width: calc(100% + 32px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* MOBIL: båndet UNDER teksten, lige over prisen (valgt 05.10.2026).
   Læseretning: hvorfor -> hvem den passer til -> hvad den koster -> knap.
   Tynd streg under logo/karakter i stedet for båndet. */
@media (max-width: 900px) {
    .dating-overview-wrapper .dx-card .dx-col-left {
        border-bottom: 1px solid var(--border-color) !important;
    }
    .dating-overview-wrapper .dx-card .dx-col-middle .dx-facts {
        order: 3 !important;
        margin: 2px -16px -4px !important; /* -4px: midterkolonnens bundpolstring */
    }
    .dating-overview-wrapper .dx-card .dx-support-line {
        margin-bottom: 12px !important;
    }
    .dating-overview-wrapper .dx-card .dx-col-right {
        padding-top: 12px !important;
    }
}

/* MOBIL: mindre luft omkring logo og karakter (05.10.2026).
   Logoerne er 300x150 med indbygget hvid kant; grafikken fylder højst 59 %
   af højden (Scor.dk) og har mindst 31px hvidt over og under. Vi viser kun
   de midterste 60 % (object-fit: cover) - samme bredde, så logoet ser lige
   så stort ud, men boksen er 39px høj i stedet for 65px.
   Nyt logo med grafik helt ud til kanten? Så tjek, at det ikke beskæres.
   Mere luft øverst, så rang-mærket (#2) ikke rammer logoet. */
@media (max-width: 900px) {
    .dating-overview-wrapper .dx-card .dx-col-left {
        padding: 28px 16px 12px !important;
    }
    .dating-overview-wrapper .dx-card .dx-logo-wrap img {
        width: 130px !important;
        max-width: 130px !important;
        height: 39px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* Udbydernavnet er en rigtig H2 (overskrift="h2"), så hver udbyder er sin
   egen sektion for Google og skærmlæsere. Temaets h2-regler (margin,
   skrift, linjehøjde) må ikke ændre det lille pink navn. */
.dx-card h2.dx-provider-name {
    font-family: 'Montserrat', sans-serif !important;
    margin-top: 0 !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Luft mellem hero og oversigt. Tidligere gav H2'en "De bedste
   netdating-sider" den luft; den er fjernet (navnene er nu H2). */
.dx-hero-sektion + .elementor-section .dating-overview-wrapper,
.dx-hero-sektion + .e-con .dating-overview-wrapper {
    margin-top: 32px !important;
}
@media (max-width: 900px) {
    .dx-hero-sektion + .elementor-section .dating-overview-wrapper,
    .dx-hero-sektion + .e-con .dating-overview-wrapper {
        margin-top: 20px !important;
    }
}

/* =====================================================================
   NYT FILTER (05.10.2026)
   Afkrydsningsfelter med antal, karakter som segmenteret knap, pris i
   grupper, aktive filtre som chips over listen. "Nulstil" som link i
   toppen. Den gamle titel i .dating-filter-header er erstattet af
   .dx-fpanel-head inde i panelet (som også flyttes med i mobil-modalen).
   ===================================================================== */
.dating-filter-header .dating-filter-title { display: none !important; }
.dating-filter-header { margin-bottom: 0 !important; }

.dating-filter-container { padding: 20px !important; }

.dx-fpanel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 6px;
}
.dx-fpanel-titel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
}
.dx-fpanel-titel i { color: var(--brand-primary); font-size: 14px; }

.dating-filter-content .dx-reset-link {
    width: auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--brand-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.dating-filter-content .dx-reset-link:disabled {
    color: var(--text-light) !important;
    opacity: 1 !important;
    cursor: default;
}

.dating-filter-content .dx-fg {
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid #f0f1f3;
}
.dating-filter-content .dx-fpanel-head + .dx-mobile-sort-group + .dx-fg,
.dating-filter-content .dx-fpanel-head + .dx-fg { border-top: 0; padding-top: 6px !important; }

.dating-filter-content .dx-fg-titel {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}
.dating-filter-content .dx-fg-titel i { color: var(--brand-primary); font-size: 12px; width: 14px; text-align: center; }

/* Ét valg: [boks] tekst ........ antal */
.dating-filter-content label.dx-opt {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 6px 4px !important;
    border-radius: 8px;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer;
    transition: background 0.15s;
}
.dating-filter-content label.dx-opt:hover { background: var(--bg-softer); }
.dating-filter-content .dx-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.dating-filter-content .dx-box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.dating-filter-content .dx-opt input:checked + .dx-box {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.dating-filter-content .dx-opt input:checked + .dx-box::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.dating-filter-content .dx-opt input:focus-visible + .dx-box {
    box-shadow: 0 0 0 3px rgba(255, 79, 103, 0.25);
}
.dating-filter-content .dx-opt input:checked ~ .dx-opt-tekst { font-weight: 700; color: var(--text-dark); }
.dating-filter-content .dx-opt-antal {
    margin-left: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--bg-softer);
    color: var(--text-medium);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.dating-filter-content .dx-opt input:checked ~ .dx-opt-antal {
    background: #fff5f6;
    color: var(--brand-primary);
}
.dating-filter-content .dx-opt.is-tom { opacity: 0.45; }

/* Karakter: segmenteret knap */
.dating-filter-content .dx-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-softer);
}
.dating-filter-content .dx-seg-opt {
    position: relative;
    display: block !important;
    margin: 0 !important;
    cursor: pointer;
}
.dating-filter-content .dx-seg-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.dating-filter-content .dx-seg-opt span {
    display: block;
    padding: 7px 0;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-medium);
    transition: all 0.15s;
}
.dating-filter-content .dx-seg-opt input:checked + span {
    background: #fff;
    color: var(--brand-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dating-filter-content .dx-seg-opt input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(255, 79, 103, 0.25);
}

/* Aktive filtre over listen */
.dx-aktive-filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: -8px 0 14px;
}
.dx-aktive-filtre[hidden] { display: none !important; }
.dx-aktive-filtre .dx-aktiv-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 5px 10px !important;
    border: 1px solid #fde1e5 !important;
    border-radius: 99px !important;
    background: #fff5f6 !important;
    color: #c2415a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    cursor: pointer;
}
.dx-aktive-filtre .dx-aktiv-chip i { font-size: 10px; }
.dx-aktive-filtre .dx-aktiv-chip:hover { background: #ffe8ec !important; }
.dx-aktive-filtre .dx-ryd-alle {
    margin: 0 0 0 4px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-medium) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: underline;
    cursor: pointer;
}

/* Mobil: modalen har sin egen titel - behold kun "Nulstil" i panelets top. */
@media (max-width: 900px) {
    .dating-filter-content .dx-fpanel-titel { visibility: hidden; }
    .dating-filter-content .dx-fpanel-head { margin-bottom: 0; }
    .dating-filter-content label.dx-opt { padding: 9px 4px !important; font-size: 14px !important; }
    .dx-aktive-filtre { margin: 0 0 12px; }
}

/* Chips i samme række som "X af 11 udbydere" og sortering (05.10.2026).
   Rækken har fast højde (filteret flugter med første kort), så chippene
   står på én linje og kan rulles vandret, hvis der er mange. */
.dx-content-header .dx-aktive-filtre {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    margin: 0 16px !important;
    overflow-x: auto;
    scrollbar-width: none;
}
.dx-content-header .dx-aktive-filtre::-webkit-scrollbar { display: none; }
.dx-content-header .dx-aktive-filtre .dx-aktiv-chip,
.dx-content-header .dx-aktive-filtre .dx-ryd-alle { flex: 0 0 auto; white-space: nowrap; }
.dx-content-header .dx-results-lead,
.dx-content-header .dx-sort-container { flex: 0 0 auto; }

/* Mobil: rækken med antal og sortering er skjult - men er der aktive
   filtre, vises rækken med KUN chippene. */
@media (max-width: 900px) {
    .dating-overview-wrapper .dx-content-header:has(.dx-aktive-filtre:not([hidden])) {
        display: flex !important;
        height: auto !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    .dating-overview-wrapper .dx-content-header:has(.dx-aktive-filtre:not([hidden])) .dx-results-lead,
    .dating-overview-wrapper .dx-content-header:has(.dx-aktive-filtre:not([hidden])) .dx-sort-container {
        display: none !important;
    }
    .dx-content-header .dx-aktive-filtre { margin: 0 !important; flex-wrap: wrap; overflow: visible; }
}

/* =====================================================================
   TABLET / SMÅ LAPTOPS (901-1279px), 05.10.2026
   Filterboksen i siden tog ca. 350px, så kortenes midterkolonne kun fik
   63-167px. Her bliver filteret til knappen "Filtrér & sortér", der åbner
   et skuffepanel fra venstre (samme indhold som mobilens vindue). Kortene
   beholder desktop-layoutet og får hele bredden.
   Grænsen 1279/1280 skal matche matchMedia i script.js.
   ===================================================================== */
@media (min-width: 901px) and (max-width: 1279px) {
    body.dx-modal-open { overflow: hidden !important; }

    .dating-overview-wrapper {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .dating-overview-wrapper .dating-filter-container {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        position: static !important;
    }

    .dating-overview-wrapper .dx-main-content {
        width: 100% !important;
        max-width: none !important;
    }

    .dating-filter-header {
        display: flex !important;
        margin: 0 !important;
    }

    .dx-mobile-filter-toggle {
        display: inline-flex !important;
        align-items: center !important;
        height: 42px !important;
        padding: 0 16px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        font-size: 14px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        background: #fff !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-dark) !important;
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05) !important;
        cursor: pointer;
    }
    .dx-mobile-filter-toggle i { color: var(--brand-primary); }

    /* Skuffepanel: lukket som standard, åbent med .is-open. Resten af
       siden dæmpes med en stor skygge i stedet for et ekstra element. */
    .dating-filter-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 380px !important;
        max-width: 90vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 24px 24px 28px !important;
        background: #fff !important;
        overflow-y: auto !important;
        z-index: 99999999 !important;
        box-sizing: border-box !important;
        box-shadow: 0 0 0 100vmax rgba(17, 24, 39, 0.35), 8px 0 30px rgba(0, 0, 0, 0.12) !important;
        display: none;
        flex-direction: column;
    }
    .dating-filter-content.is-open {
        display: flex !important;
        animation: dxSkuffe 0.25s ease-out;
    }

    .dx-mobile-modal-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border-color);
    }
    .dx-mobile-modal-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-dark); }
    .dating-filter-content .dx-mobile-close-btn {
        background: none; border: none; font-size: 22px; color: var(--text-dark); cursor: pointer; padding: 4px;
    }

    /* Sorteringen står allerede over listen - ikke to gange. */
    .dx-mobile-sort-group { display: none !important; }
    .dating-filter-content .dx-fpanel-titel { visibility: hidden; }

    .dx-filter-actions {
        display: flex;
        margin-top: auto;
        padding-top: 20px;
    }
    .dating-filter-content .dx-mobile-apply-btn {
        display: flex !important;
        width: 100%;
        height: 46px;
        font-size: 15px;
        justify-content: center;
        border: none;
    }
}

@keyframes dxSkuffe {
    from { transform: translateX(-24px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dating-filter-content.is-open { animation: none !important; }
}

/* Desktop/tablet (06.10.2026): den grønne knap (eller "Ikke tilgængelig
   gennem os") står lodret centreret i højre kolonne; "Læs mere" ligger
   fast i bunden, 14px fra kortets underkant på alle kort.
   Knappen centreres i HELE kolonnen (ens polstring top/bund), og "Læs
   mere" er taget ud af flowet, så den ikke skubber knappen op. */
@media (min-width: 901px) {
    .dating-overview-wrapper .dx-card .dx-col-right {
        position: relative !important;
        justify-content: center !important;
        padding: 24px 16px !important;
        min-height: 200px;
    }
    .dating-overview-wrapper .dx-card .dx-col-right .dx-toggle-btn,
    .dating-overview-wrapper .dx-card .dx-col-right .dx-laes-mere {
        position: absolute !important;
        left: 50% !important;
        bottom: 14px !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        width: auto !important;
    }
}

/* ---------- Tilbud: mærkat hen over kortets øverste kant (2.13.0) ----------
   Ligger uden for .dx-card-main og fylder kun i mellemrummet mellem kortene
   (24px), så kortets indhold står præcis, hvor det plejer. */
.dx-card .dx-tilbud {
    position: absolute;
    top: -12px;
    right: 24px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 200px);
    padding: 3px 12px;
    background: #fff;
    border: 1.5px solid #e9b949;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: #7a4b00;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}
.dx-card .dx-tilbud i { color: #d99a00; font-size: 11px; }
.dx-card .dx-tilbud-kort { display: none; }
@media (max-width: 900px) {
    .dx-card .dx-tilbud { right: 14px; max-width: calc(100% - 150px); font-size: 11px; padding: 2px 10px; }
    .dx-card .dx-tilbud-har-kort .dx-tilbud-lang { display: none; }
    .dx-card .dx-tilbud-har-kort .dx-tilbud-kort { display: inline; }
}
/* Tilbud centreret på mobil - undtagen når kortet også har "Vores favorit",
   for så ville mærkaten ramme fanen til venstre. */
@media (max-width: 900px) {
    .dx-card .dx-tilbud { left: 50%; right: auto; transform: translateX(-50%); }
    .dx-card:has(.dx-favorit) .dx-tilbud { left: auto; right: 14px; transform: none; }
}

/* Tilbud: mere luft i mærkaten, stadig centreret på kortets kant. */
.dx-card .dx-tilbud { top: -15px; padding: 6px 16px; gap: 7px; }
@media (max-width: 900px) {
    .dx-card .dx-tilbud { top: -14px; padding: 5px 14px; }
}

/* ---------- [dating_bund] - indholdet under oversigten (2.16.0) ---------- */
.dx-bund { font-family: 'Montserrat', sans-serif; color: #1f2937; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.dx-bund-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dx-bund-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #1f2937 !important; font-size: 14px; font-weight: 600; text-decoration: none; }
.dx-bund-nav a:hover { border-color: #ff4f67; color: #c41831 !important; }
.dx-bund-sek { background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 32px 36px; margin: 0 0 20px; scroll-margin-top: 100px; }
.dx-bund-ey { margin: 0 0 4px !important; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #c41831; }
.dx-bund-sek h2 { margin: 0 0 8px !important; font-size: 28px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #1f2937 !important; }
.dx-bund-intro { margin: 0 0 20px !important; font-size: 16px; line-height: 1.6; color: #4b5563; max-width: 720px; }
.dx-bund-fliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 20px; }
.dx-bund-flise { background: #f9fafb; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #4b5563; line-height: 1.45; }
.dx-bund-flise strong { font-size: 17px; font-weight: 800; color: #1f2937; }
.dx-bund-fl { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
.dx-bund-tabel { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 14px; }
.dx-bund-tabel table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0 !important; font-size: 15px; border: none !important; }
.dx-bund-tabel th, .dx-bund-tabel td { padding: 12px 14px !important; border: none !important; border-bottom: 1px solid #f1f2f4 !important; text-align: left; vertical-align: middle; background: #fff; }
.dx-bund-tabel thead th { background: #f9fafb !important; font-size: 13px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.dx-bund-tabel tbody th { font-weight: 700; color: #1f2937; white-space: nowrap; }
.dx-bund-tabel tbody tr:last-child th, .dx-bund-tabel tbody tr:last-child td { border-bottom: none !important; }
.dx-bund-tabel td a { color: #c41831 !important; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.dx-bund-tabel td a i { font-size: 11px; margin-left: 3px; }
.dx-bund-lang { background: #fff8e6; color: #7a4b00; border-radius: 6px; padding: 2px 7px; font-weight: 600; }
.dx-bund-gratis { background: #e6f7f1; color: #0f6e56; border-radius: 6px; padding: 2px 7px; font-weight: 600; }
.dx-bund-note { margin: 12px 0 0 !important; font-size: 13px; color: #6b7280; }
.dx-bund-typer { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dx-bund-type { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; color: #4b5563 !important; font-size: 14px; line-height: 1.45; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.dx-bund-type:hover { border-color: #ff4f67; transform: translateY(-2px); }
.dx-bund-type strong { font-size: 16px; font-weight: 800; color: #1f2937; }
.dx-bund-fav { font-size: 13px; color: #1f2937; margin-top: 4px; }
.dx-bund-fav b { font-weight: 800; }
.dx-bund-type em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 700; font-size: 14px; color: #c41831; }
.dx-bund-type em i { font-size: 11px; margin-left: 3px; }
.dx-bund-trin { list-style: none; counter-reset: dxtrin; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.dx-bund-trin li { counter-increment: dxtrin; display: flex; flex-direction: column; gap: 6px; margin: 0 !important; font-size: 14px; line-height: 1.55; color: #4b5563; }
.dx-bund-trin li::before { content: counter(dxtrin); width: 36px; height: 36px; border-radius: 50%; background: #1f2937; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.dx-bund-trin strong { font-size: 15px; font-weight: 800; color: #1f2937; }
.dx-bund-af { margin: 22px 0 0 !important; padding-top: 16px; border-top: 1px solid #f1f2f4; font-size: 14px; color: #4b5563; }
.dx-bund-af a { color: #c41831 !important; font-weight: 700; }
.dx-bund-faq details { border: 1px solid #e5e7eb; border-radius: 12px; margin: 0 0 10px; background: #fff; transition: border-color 0.2s ease; }
.dx-bund-faq details[open] { border-color: #ff4f67; }
.dx-bund-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; font-weight: 700; font-size: 16px; color: #1f2937; }
.dx-bund-faq summary::-webkit-details-marker { display: none; }
.dx-bund-faq summary i { color: #ff4f67; transition: transform 0.2s ease; flex: none; }
.dx-bund-faq details[open] summary i { transform: rotate(180deg); }
.dx-bund-faq details p { margin: 0 !important; padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: #4b5563; }
@media (max-width: 700px) {
    .dx-bund { padding: 0; }
    .dx-bund-sek { padding: 22px 18px; border-radius: 16px; }
    .dx-bund-sek h2 { font-size: 22px !important; }
    .dx-bund-intro { font-size: 15px; }
    .dx-bund-faq summary { font-size: 15px; padding: 14px 16px; }
    .dx-bund-faq details p { padding: 0 16px 16px; }
}/* Prisoversigten på mobil: uden "Se kortet"-kolonnen og uden sidelæns scroll. */
@media (max-width: 700px) {
    .dx-bund-tabel table { min-width: 0; font-size: 13.5px; }
    .dx-bund-tabel th, .dx-bund-tabel td { padding: 10px 8px !important; }
    .dx-bund-tabel th:last-child, .dx-bund-tabel td:last-child { display: none; }
    .dx-bund-tabel tbody th { white-space: normal; }
    .dx-bund-tabel thead th { white-space: normal; font-size: 12px; }
}

/* ---------- [dating_bund] samme panel-design som sidens egne afsnit (2.16.3) ----------
   Følger .fek-panel på /datingsider/: samme bredde, ramme, skygge, typografi og 24px mellem panelerne. */
.dx-bund { max-width: 1200px; padding: 0 20px; }
.dx-bund-sek {
    border: 1px solid #e1e5eb;
    border-radius: 20px;
    padding: 36px 40px;
    margin: 0 0 24px;
    box-shadow: 0 8px 30px rgba(32, 43, 58, 0.035);
    color: #283344;
}
.dx-bund > .dx-bund-sek:last-child { margin-bottom: 0; }
.dx-bund-nav { margin: 0 0 24px; }
.dx-bund-ey { margin: 0 0 12px !important; color: #d92c4b; letter-spacing: 0.08em; font-weight: 800; }
.dx-bund-sek h2 { margin: 0 0 20px !important; font-size: 29px !important; font-weight: 750 !important; color: #202b3b !important; }
.dx-bund-intro { max-width: none; margin: 0 0 24px !important; font-size: 17px; line-height: 1.75; color: #283344; }
.dx-bund-flise { background: #f7f8fa; border-radius: 12px; }
.dx-bund-tabel { border-color: #eceff3; border-radius: 12px; }
.dx-bund-type { border-color: #e1e5eb; border-radius: 12px; }
.dx-bund-faq details { border-color: #e1e5eb; }
.dx-bund-af { border-top-color: #eceff3; }
@media (max-width: 600px) {
    .dx-bund { padding: 0 16px; }
    .dx-bund-sek { padding: 24px 20px; border-radius: 16px; }
    .dx-bund-sek h2 { font-size: 25px !important; }
    .dx-bund-intro { font-size: 16px; }
}/* Mobil: samme sidemargen (10px) som sidens egne paneler. */
@media (max-width: 600px) { .dx-bund { padding: 0 10px; } }
/* Under containerbredden: samme 10px sidemargen som sidens egne paneler. */
@media (max-width: 1219px) { .dx-bund { padding: 0 10px; } }
/* Typekort: 4 pr. række (7 kort = 4 + 3), 2 på tablet/mobil, 1 på smalle telefoner. */
.dx-bund-typer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .dx-bund-typer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .dx-bund-typer { grid-template-columns: 1fr; } }

/* ---------- [dating_bund] mere liv (2.17.0): logo + navn, prisbarer, ikoner ---------- */
/* Logo + navn: logoet er det visuelle, navnet er tekst til læsere og Google. */
.dx-bund-udb { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dx-bund-logo { width: 72px; height: 36px; object-fit: contain; flex: none; mix-blend-mode: multiply; border-radius: 6px; }
.dx-bund-tabel tbody th .dx-bund-udb span { font-weight: 700; }
.dx-bund-pris { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.dx-bund-bar { flex: 1; height: 10px; border-radius: 6px; background: #f1f2f4; position: relative; overflow: hidden; max-width: 260px; }
.dx-bund-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #ff8a9c, #ff4f67); }
.dx-bund-bar-gratis i { background: #10b981; }
.dx-bund-pris b { flex: none; min-width: 84px; font-weight: 700; color: #202b3b; }
.dx-bund-ikon { width: 40px; height: 40px; border-radius: 50%; background: #fff0f3; color: #d92c4b; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 6px; }
.dx-bund-fav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #f1f2f4; }
.dx-bund-fav-l { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #6b7280; }
.dx-bund-fav .dx-bund-udb { gap: 8px; color: #202b3b; font-weight: 700; font-size: 14px; }
.dx-bund-fav .dx-bund-logo { width: 56px; height: 28px; }
.dx-bund-fav b { margin-left: auto; font-weight: 800; }
/* Top-listen: logo + navn. */
.dx-top5-udb { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dx-top5-logo { width: 64px; height: 32px; object-fit: contain; flex: none; mix-blend-mode: multiply; }
@media (max-width: 700px) {
    .dx-bund-logo { width: 54px; height: 27px; }
    .dx-bund-udb { gap: 8px; }
    .dx-bund-pris { min-width: 0; gap: 8px; flex-direction: column; align-items: flex-start; }
    .dx-bund-bar { width: 100%; height: 8px; }
    .dx-bund-pris b { min-width: 0; }
    .dx-bund-tabel tbody th .dx-bund-udb { flex-direction: column; align-items: flex-start; gap: 4px; }
}/* Gratis: ingen bar (en fuld bar ville ligne den dyreste) - bare grøn tekst. */
.dx-bund-bar-gratis i { display: none; }
.dx-bund-bar-gratis + b { color: #0f6e56; }

/* ---------- Navnet som lille, diskret tekst under logoet (2.17.2) ----------
   Logoet er det, man ser - navnet står stadig som tekst for læsere og Google.
   Uden logo vises navnet som normalt. */
.dx-bund-udb { flex-direction: column; align-items: flex-start; gap: 3px; }
.dx-bund-udb img + span { font-size: 11.5px !important; font-weight: 600 !important; color: #6b7280 !important; line-height: 1.2; }
.dx-bund-tabel tbody th .dx-bund-udb { flex-direction: column; align-items: flex-start; gap: 3px; }
/* Favorit: logo + navn til venstre, karakteren til højre. */
.dx-bund-fav .dx-bund-udb { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; width: 100%; }
.dx-bund-fav .dx-bund-udb img { grid-column: 1; grid-row: 1; }
.dx-bund-fav .dx-bund-udb span { grid-column: 1; grid-row: 2; }
.dx-bund-fav .dx-bund-udb b { grid-column: 2; grid-row: 1 / 3; justify-self: end; font-size: 16px; }
/* Top 10: nummer, så logo med navnet under. */
.dx-top5-udb { display: grid !important; grid-template-columns: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.dx-top5-udb .dx-top5-rank { grid-column: 1; grid-row: 1 / 3; margin-right: 0 !important; }
.dx-top5-udb img { grid-column: 2; grid-row: 1; }
.dx-top5-udb img + span { grid-column: 2; grid-row: 2; font-size: 11.5px; font-weight: 600; color: #6b7280; line-height: 1.2; }
/* Trustpilot-tabellerne. */
a.fek-tp-navn { flex-direction: column; align-items: flex-start !important; gap: 3px !important; }
a.fek-tp-navn img + span { font-size: 11.5px; font-weight: 600; color: #6b7280; line-height: 1.2; }
@media (max-width: 700px) {
    .dx-bund-udb img + span, .dx-top5-udb img + span, a.fek-tp-navn img + span { font-size: 11px !important; }
}

/* Større logoer (2.17.3) - nu hvor navnet står diskret under. */
.dx-bund-logo { width: 96px; height: 48px; }
.dx-bund-fav .dx-bund-logo { width: 76px; height: 38px; }
.dx-top5-logo { width: 84px; height: 42px; }
.fek-tp-logo { width: 72px !important; height: 36px !important; }
@media (max-width: 700px) {
    .dx-bund-logo { width: 72px; height: 36px; }
    .dx-bund-fav .dx-bund-logo { width: 68px; height: 34px; }
    .dx-top5-logo { width: 72px; height: 36px; }
    .fek-tp-logo { width: 60px !important; height: 30px !important; }
}

/* Navnet skjules visuelt, når der er et logo (2.17.4): logoet viser allerede
   navnet. Teksten bliver i HTML'en til Google og skærmlæsere (samme teknik som
   .screen-reader-text). Uden logo står navnet synligt som før. */
.dx-bund-udb img + span,
.dx-top5-udb img + span,
a.fek-tp-navn img + span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.dx-bund-udb, .dx-top5-udb, a.fek-tp-navn { position: relative; }
.dx-top5-udb .dx-top5-rank { grid-row: 1 !important; }
.dx-bund-fav .dx-bund-udb b { grid-row: 1 !important; }
/* Fire typer (2.27.6, uden netdating og elitedating): 4 på én række. */
@media (min-width: 901px) { .dx-bund-typer { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Prisoversigten v2 (2.18.0) ---------- */
/* Fliser: ikon, stort tal, logo. */
.dx-bund-flise { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.dx-bund-fikon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.dx-bund-fikon-pris { background: #fff0f3; color: #d92c4b; }
.dx-bund-fikon-gratis { background: #e6f7f1; color: #0f6e56; }
.dx-bund-fikon-binding { background: #eef2ff; color: #3c3489; }
.dx-bund-ftekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-bund-flise strong { font-size: 22px; line-height: 1.15; }
.dx-bund-fsub { font-size: 13px; color: #6b7280; }
.dx-bund-flise .dx-bund-logo { width: 72px; height: 30px; object-position: left center; }
/* Sortering. */
.dx-bund-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: #6b7280; }
.dx-bund-sort button { font-family: inherit; font-size: 14px; font-weight: 600; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid #e1e5eb; background: #fff; color: #202b3b; cursor: pointer; transition: all 0.15s ease; }
.dx-bund-sort button:hover { border-color: #ff4f67; color: #c41831; background: #fff; }
.dx-bund-sort button[aria-pressed="true"] { background: #202b3b; border-color: #202b3b; color: #fff; }
/* Kompakte, klikbare rækker. */
.dx-bund-tabel th, .dx-bund-tabel td { padding: 8px 14px !important; }
.dx-bund-tabel thead th { padding: 10px 14px !important; }
.dx-bund-tabel .dx-bund-logo { width: 84px; height: 42px; }
.dx-bund-tabel tbody tr { cursor: pointer; transition: background-color 0.15s ease; }
.dx-bund-tabel tbody tr:hover th, .dx-bund-tabel tbody tr:hover td { background: #fff7f9; }
.dx-bund-tabel tbody tr.dx-bund-ekstra { display: none; }
.dx-bund-per { background: #f3f4f6; color: #374151; border-radius: 6px; padding: 2px 7px; font-weight: 600; }
.dx-bund-gaa { width: 36px; text-align: right !important; }
.dx-bund-gaa a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: #c41831 !important; }
.dx-bund-gaa a i { font-size: 12px !important; margin: 0 !important; }
tr:hover .dx-bund-gaa a { background: #ffe4ea; }
/* Vis alle. */
.dx-bund-alle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 0; min-height: 44px; border: 1px solid #e1e5eb; border-radius: 12px; background: #fff; color: #c41831; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.dx-bund-alle:hover { border-color: #ff4f67; background: #fff7f9; color: #c41831; }
.dx-bund-alle[aria-expanded="true"] i { transform: rotate(180deg); }
.dx-bund-alle i { transition: transform 0.2s ease; font-size: 12px; }
@media (max-width: 700px) {
    .dx-bund-fliser { grid-template-columns: 1fr; gap: 8px; }
    .dx-bund-flise { padding: 12px 14px; }
    .dx-bund-flise strong { font-size: 19px; }
    .dx-bund-tabel th, .dx-bund-tabel td { padding: 8px 8px !important; }
    .dx-bund-tabel .dx-bund-logo { width: 68px; height: 34px; }
    .dx-bund-tabel th:last-child, .dx-bund-tabel td.dx-bund-gaa { display: table-cell !important; width: 22px; padding-left: 0 !important; }
    .dx-bund-gaa a { width: 22px; height: 22px; }
    .dx-bund-sort { font-size: 13px; gap: 6px; }
    .dx-bund-sort span { width: 100%; }
    .dx-bund-sort button { font-size: 13px; padding: 5px 11px; min-height: 36px; }
}@media (max-width: 700px) {
    .dx-bund-tabel th, .dx-bund-tabel td { padding: 8px 6px !important; }
    .dx-bund-tabel .dx-bund-logo { width: 64px; height: 32px; }
}

/* Trustpilot-tabellerne: samme rækkehøjde med og uden logo, indhold centreret lodret (2.18.2). */
.fek-trust-group tbody td { vertical-align: middle !important; height: 56px; padding-top: 6px !important; padding-bottom: 6px !important; box-sizing: border-box; }
.fek-trust-group .fek-tp-logo { width: 64px !important; height: 32px !important; display: block; }
.fek-trust-group a.fek-tp-navn { min-height: 32px; justify-content: center; }
@media (max-width: 600px) {
    .fek-trust-group tbody td { height: 50px; }
    .fek-trust-group .fek-tp-logo { width: 56px !important; height: 28px !important; }
}

/* Logoer med hvid JPG-bund blandes ind med mix-blend-mode. Temaets a:hover { opacity: .9 }
   og transform skaber et nyt lag, så den hvide bund kom frem ved hover (2.18.3). */
a.fek-tp-navn:hover, a.dx-bund-type:hover, .dx-bund-tabel a:hover,
.dx-hero-top-liste a:hover, .dx-hero-top-1:hover, .dx-hero-top-alle:hover { opacity: 1 !important; }
.dx-bund-type:hover { transform: none !important; box-shadow: 0 10px 24px rgba(32, 43, 58, 0.08); }

/* Introtilbud under korteste abonnement (2.18.4). */
.dx-bund-intro-tilbud { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #0f6e56; line-height: 1.35; }
.dx-bund-intro-tilbud i { font-size: 11px; margin-right: 3px; }
.dx-bund-tabel thead th { white-space: normal; }
/* Prisoversigten variant B (2.19.0): to prisceller, perioden under prisen. */
.dx-bund-tal { display: block; font-size: 15px; font-weight: 700; color: #202b3b; line-height: 1.3; }
.dx-bund-tal-gratis { color: #0f6e56; }
.dx-bund-ved { display: block; margin-top: 2px; font-size: 13px; color: #6b7280; line-height: 1.4; }
.dx-bund-ved .dx-bund-lang { font-size: 12.5px; }
.dx-bund-tabel td { min-width: 150px; }
@media (max-width: 700px) {
    .dx-bund-tabel td { min-width: 0; }
    .dx-bund-tal { font-size: 13.5px; }
    .dx-bund-ved { font-size: 11.5px; }
}
/* Prisoversigten på mobil (2.19.3): hver række som en lille blok -
   logo øverst, de to priser side om side med hver sin etiket. */
@media (max-width: 700px) {
    .dx-bund-tabel thead { display: none; }
    .dx-bund-tabel table, .dx-bund-tabel tbody { display: block; }
    .dx-bund-tabel tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px; column-gap: 12px; row-gap: 6px; padding: 12px 12px; border-bottom: 1px solid #f1f2f4; }
    .dx-bund-tabel tbody tr.dx-bund-ekstra { display: none; }
    .dx-bund-tabel tbody tr:last-child { border-bottom: none; }
    .dx-bund-tabel tbody th, .dx-bund-tabel tbody td { display: block; padding: 0 !important; border: none !important; background: transparent !important; min-width: 0; }
    .dx-bund-tabel tbody th { grid-column: 1 / 3; grid-row: 1; }
    .dx-bund-tabel tbody td:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .dx-bund-tabel tbody td:nth-of-type(2) { grid-column: 2; grid-row: 2; }
    .dx-bund-tabel tbody td.dx-bund-gaa { grid-column: 3; grid-row: 1 / 3; align-self: center; width: auto; }
    .dx-bund-tabel tbody td:nth-of-type(1)::before, .dx-bund-tabel tbody td:nth-of-type(2)::before { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #9ca3af; margin-bottom: 2px; }
    .dx-bund-tabel tbody td:nth-of-type(1)::before { content: "Kortest binding"; }
    .dx-bund-tabel tbody td:nth-of-type(2)::before { content: "Billigst pr. md."; }
    .dx-bund-tabel .dx-bund-logo { width: 72px; height: 32px; object-position: left center; }
    .dx-bund-tal { font-size: 14px; white-space: normal; }
    .dx-bund-tabel tbody tr:hover th, .dx-bund-tabel tbody tr:hover td { background: transparent !important; }
    .dx-bund-tabel tbody tr:hover { background: #fff7f9; }
}

/* Introtilbud som lille mærke + lige brede priskolonner (2.19.4). */
.dx-bund-intro-tilbud { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 5px; padding: 2px 8px; border-radius: 6px; background: #e6f7f1; font-size: 12px; cursor: help; }
@media (min-width: 701px) {
    .dx-bund-tabel table { table-layout: fixed; }
    .dx-bund-tabel thead th:nth-child(1) { width: 18%; }
    .dx-bund-tabel thead th:nth-child(2), .dx-bund-tabel thead th:nth-child(3) { width: 38%; }
    .dx-bund-tabel thead th:nth-child(4) { width: 6%; }
}
/* Intro-mærket: egen tooltip, der åbner med det samme (2.21.2) - browserens title-tooltip er forsinket. */
.dx-bund-intro-tilbud { position: relative; outline: none; }
.dx-bund-intro-tilbud::after {
    content: attr(data-tip);
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 20;
    width: max-content; max-width: 260px;
    padding: 8px 11px; border-radius: 8px;
    background: #1f2937; color: #fff;
    font-size: 12.5px; font-weight: 500; line-height: 1.45; white-space: normal; text-align: left;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s;
}
.dx-bund-intro-tilbud:hover::after,
.dx-bund-intro-tilbud:focus::after,
.dx-bund-intro-tilbud:focus-visible::after { opacity: 1; visibility: visible; }
.dx-bund-intro-tilbud:focus-visible { box-shadow: 0 0 0 2px #0f6e56; }
/* Top 10, kompakt (2.22.0): to kolonner 1-5 / 6-10, rækker på 52px, karakter som på kortene. */
.dx-tl { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--dx-tl-rk, 5), auto); grid-auto-flow: column; column-gap: 28px; }
.dx-tl li { margin: 0; padding: 0; border-bottom: 1px solid #eceef3; }
.dx-tl-r { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px; border-radius: 8px; color: inherit !important; text-decoration: none !important; opacity: 1 !important; transition: background .12s; }
.dx-tl-r:hover, .dx-tl-r:focus-visible { background: #fff5f6; }
.dx-tl-nr { flex: 0 0 24px; font-weight: 800; font-size: 15px; color: #c41831; }
.dx-tl-logo { flex: 0 0 96px; height: 40px; display: flex; align-items: center; overflow: hidden; }
.dx-tl-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; mix-blend-mode: multiply; transform: scale(1.15); transform-origin: left center; }
.dx-tl-k { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dx-tl-k b { font-size: 19px; font-weight: 800; line-height: 1; }
.dx-tl-st { font-size: 11px; letter-spacing: 1px; }
.dx-tl-k em { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; min-width: 78px; }
.dx-tl-pil { flex: 0 0 auto; font-size: 12px; color: #c41831; }
@media (max-width: 767px) {
    .dx-tl { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .dx-tl-r { height: 52px; gap: 10px; padding: 0 4px; }
    .dx-tl-logo { flex-basis: 84px; }
    .dx-tl-k em { display: none; }
}
@media (max-width: 340px) { .dx-tl-st { display: none; } }
/* 2.22.1: logoerne beskæres ikke - ingen zoom, kun object-fit. */
.dx-tl-logo { overflow: visible; }
.dx-tl-logo img { transform: none; }
@media (max-width: 767px) { .dx-tl-logo { flex-basis: 92px; height: 36px; } }

/* 2.23.0: priskasserne har samme opbygning (etiket, tal, "Udbyder · periode"),
   udbyderen linker til kortet. Forklaring ved sortering på laveste månedspris. */
.dx-bund-fsub a { color: #1f2937; font-weight: 700; text-decoration: none; }
.dx-bund-fsub a:hover, .dx-bund-fsub a:focus-visible { color: #d92c4b; text-decoration: underline; }
.dx-sort-note[hidden] { display: none; }
.dx-sort-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff0f3; color: #7a1f33; font-size: 14px; line-height: 1.5; }
.dx-sort-note i { margin-top: 3px; flex: none; }
.dx-sort-note a { color: inherit; text-decoration: underline; }
.dx-sort-note-link[hidden] { display: none; }
@media (max-width: 767px) { .dx-sort-note { font-size: 13px; padding: 9px 12px; margin: 0 12px 12px; } }
/* 701-900px: tre smalle kasser - ikonet over teksten, så "Udbyder · periode" står på én linje. */
@media (min-width: 701px) and (max-width: 900px) {
    .dx-bund-flise { flex-direction: column; align-items: flex-start; gap: 10px; }
    .dx-bund-fikon { width: 38px; height: 38px; font-size: 16px; }
}

/* ===== 2.24.0: bunden på mobil ===== */
.dx-sort-kort { display: none; }
.dx-bund-intro-tilbud { white-space: nowrap; }
@media (max-width: 700px) {
    /* Sortering: tre lige brede knapper på én række med korte tekster. */
    .dx-bund-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .dx-bund-sort > span { grid-column: 1 / -1; }
    .dx-bund-sort button { padding: 6px 4px; font-size: 13px; }
    .dx-sort-lang { display: none; }
    .dx-sort-kort { display: inline; }

    /* Pristabel: overskrifterne én gang øverst, logo og priser på samme linje. */
    .dx-bund-tabel thead { display: block; background: #f9fafb; border-bottom: 1px solid #f1f2f4; }
    .dx-bund-tabel thead tr,
    .dx-bund-tabel tbody tr { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 12px; column-gap: 10px; align-items: center; padding: 10px 12px; }
    .dx-bund-tabel thead th { display: block; padding: 0 !important; border: none !important; background: transparent !important; font-size: 10.5px !important; letter-spacing: 0.4px; text-transform: uppercase; color: #6b7280; line-height: 1.3; }
    .dx-bund-tabel thead th:first-child { visibility: hidden; }
    .dx-bund-tabel tbody tr { row-gap: 0; }
    .dx-bund-tabel tbody th { grid-column: 1; grid-row: 1; }
    .dx-bund-tabel tbody td:nth-of-type(1) { grid-column: 2; grid-row: 1; }
    .dx-bund-tabel tbody td:nth-of-type(2) { grid-column: 3; grid-row: 1; }
    .dx-bund-tabel tbody td.dx-bund-gaa { grid-column: 4; grid-row: 1; }
    .dx-bund-tabel tbody td:nth-of-type(1)::before,
    .dx-bund-tabel tbody td:nth-of-type(2)::before { content: none !important; }
    .dx-bund-tabel .dx-bund-logo { width: 72px; height: 36px; object-position: left center; }
    .dx-bund-tabel .dx-bund-tal { font-size: 13.5px; line-height: 1.3; }
    .dx-bund-tabel .dx-bund-ved { font-size: 12px; line-height: 1.3; }
    .dx-bund-intro-tilbud { font-size: 11.5px; padding: 2px 6px; }

    /* Typer: kompakte rækker i stedet for høje kort. */
    .dx-bund-typer { grid-template-columns: 1fr !important; gap: 8px; }
    .dx-bund-type { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; column-gap: 12px; row-gap: 1px; align-items: center; padding: 12px 14px; }
    .dx-bund-type .dx-bund-ikon { grid-column: 1; grid-row: 1 / 3; margin: 0; }
    .dx-bund-type strong { grid-column: 2; grid-row: 1; font-size: 15px; }
    .dx-bund-type > span:not(.dx-bund-ikon) { grid-column: 2; grid-row: 2; font-size: 13.5px; }
    .dx-bund-type em { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; font-size: 0; }
    .dx-bund-type em i { font-size: 13px; margin: 0; }
}
@media (max-width: 600px) {
    /* Vurdering og Trustpilot: ingen boks i boksen - tabellerne får hele bredden. */
    body .fek-panel .fek-trust-group { background: transparent; padding: 0; border-radius: 0; margin-top: 8px; }
    body .fek-panel .fek-trust-group + .fek-trust-group { border-top: 1px solid #e5e7eb; padding-top: 24px; margin-top: 24px; }
    body .fek-panel .fek-eksempel, body .fek-panel .fek-author, body .fek-panel .fek-note { padding-left: 14px; padding-right: 14px; }
    /* Ens kolonner i de to Trustpilot-tabeller. */
    body .fek-trust-group table { table-layout: fixed; }
    body .fek-trust-group th:nth-child(1) { width: 46%; }
    body .fek-trust-group th:nth-child(2) { width: 30%; }
    body .fek-trust-group th:nth-child(3) { width: 24%; }
    /* Til toppen: mindre og ude i kanten, så den ikke dækker tabellernes højre kolonne. */
    #scroll-to-top.scroll-to-top { width: 30px !important; height: 30px !important; min-width: 0 !important; right: 2px !important; bottom: 14px !important; padding: 0 !important; font-size: 13px !important; line-height: 30px !important; border-radius: 8px !important; opacity: 0.9; }
    #scroll-to-top.scroll-to-top svg, #scroll-to-top.scroll-to-top i { width: 13px !important; height: 13px !important; font-size: 13px !important; }
}
/* 2.24.1: mærkerne må aldrig gå ind over nabokolonnen på mobil. */
@media (max-width: 700px) {
    .dx-bund-tabel .dx-bund-intro-tilbud { white-space: normal; max-width: 100%; font-size: 11px; padding: 2px 6px; line-height: 1.3; }
    .dx-bund-tabel .dx-bund-intro-tilbud > i { display: none; }
    .dx-bund-tabel .dx-bund-gratis { display: inline-block; max-width: 100%; font-size: 12px; padding: 2px 6px; line-height: 1.3; }
}
/* 2.24.2: "Sådan finder vi..." på mobil/tablet - eksemplet lige efter teksten
   om de fem delkarakterer, forfatterboksen til sidst. Desktop (2 kolonner) uændret. */
@media (max-width: 900px) {
    body .fek-method-grid { row-gap: 0 !important; }
    body .fek-method-grid > .fek-method-tekst { display: contents; }
    body .fek-method-grid > .fek-eksempel { order: 1; margin: 8px 0 0 !important; }
    body .fek-method-grid > .fek-method-tekst > .fek-author { order: 2; margin-top: 16px !important; }
}
/* 2.24.3: typerækkerne lige høje på mobil, også når en beskrivelse fylder to linjer. */
@media (max-width: 700px) { .dx-bund-typer { grid-auto-rows: 1fr; } }

/* ---------- Redaktionelle paneler (2.27.0) ----------
   Samme design som panelerne på /datingsider/ (dér i sidens Elementor-CSS).
   Bruges ved at give Elementor-sektionen CSS-klassen "dx-paneler". */
.dx-paneler{padding:32px 0 48px;}
.dx-paneler>.elementor-container{max-width:1180px;}

.dx-paneler>.elementor-container>.elementor-column{width:100%!important;}
.dx-paneler>.elementor-container>.elementor-column>.elementor-widget-wrap{padding:10px;gap:24px;}
.dx-paneler>.elementor-container>.elementor-column .elementor-widget{margin-bottom:0;}
.dx-paneler .fek-panel{background:#fff;border:1px solid #e1e5eb;border-radius:20px;padding:36px 40px;color:#283344;font-size:17px;line-height:1.75;box-shadow:0 8px 30px rgba(32,43,58,.035);}
.dx-paneler .fek-panel h2{font-size:29px;line-height:1.25;font-weight:750;color:#202b3b;margin:0 0 20px;text-align:left;}
.dx-paneler .fek-panel h3{font-size:22px;line-height:1.35;font-weight:700;color:#202b3b;margin:0 0 16px;}
.dx-paneler .fek-panel p{margin:0 0 18px;}
.dx-paneler .fek-panel p:last-child{margin-bottom:0;}
.dx-paneler .fek-panel .fek-eyebrow{color:#d92c4b;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800;margin:0 0 12px;}
.dx-paneler .fek-panel a{color:#b82442;text-decoration:underline;text-underline-offset:3px;}
.dx-paneler .fek-panel a:focus-visible{outline:2px solid #b82442;outline-offset:4px;}
.dx-paneler .fek-criteria{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0;margin:24px 0;list-style:none;}
.dx-paneler .fek-criteria li{background:#fff4f6;border:1px solid #ffe2e8;border-radius:12px;padding:14px 12px;font-size:14px;line-height:1.5;font-weight:650;}
.dx-paneler .fek-panel .fek-note{background:#f7f8fa;border-radius:12px;padding:16px 20px;font-size:14px;line-height:1.65;color:#526075;}
.dx-paneler .fek-panel .dx-top5-box{background:none;border:0;box-shadow:none;padding:0;margin:24px 0;}
.dx-paneler .fek-panel .dx-top5-box h4{display:none;}
.dx-paneler .fek-panel .dx-top5-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:10px 20px;padding:0;margin:0;list-style:none;}
.dx-paneler .fek-panel .dx-top5-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;background:#f7f8fa;border:1px solid #eceff3;border-radius:12px;font-size:15px;font-weight:650;min-width:0;}
.dx-paneler .fek-panel .dx-top5-rank{color:#b82442;margin-right:8px;font-weight:800;}
.dx-paneler .fek-panel .dx-top5-score{background:#fff;color:#202b3b;border:1px solid #e1e5eb;border-radius:8px;padding:5px 9px;white-space:nowrap;font-size:14px;font-weight:750;}
.dx-paneler .fek-trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:28px 0;}
.dx-paneler .fek-trust-group{min-width:0;background:#f7f8fa;border-radius:16px;padding:24px;}
.dx-paneler .fek-trust-group p{font-size:15px;line-height:1.65;}
.dx-paneler .fek-trust-group table{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:14px;background:transparent;}
.dx-paneler .fek-trust-group th,.dx-paneler .fek-trust-group td{padding:12px 5px;border:0;border-bottom:1px solid #dfe4eb;text-align:left;vertical-align:top;}
.dx-paneler .fek-trust-group th{font-size:12px;color:#526075;font-weight:700;}
.dx-paneler .fek-trust-group td:nth-child(2),.dx-paneler .fek-trust-group th:nth-child(2){text-align:center;white-space:nowrap;}
.dx-paneler .fek-trust-group td:last-child,.dx-paneler .fek-trust-group th:last-child{text-align:right;white-space:nowrap;}
.dx-paneler .fek-trust-group tbody tr:last-child td{border-bottom:0;}
.dx-paneler .fek-trust-group a{font-weight:650;}
@media(max-width:900px){.dx-paneler .fek-criteria{grid-template-columns:repeat(3,minmax(0,1fr));}.dx-paneler .fek-trust-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.dx-paneler{padding:14px 0;}.dx-paneler .fek-panel{padding:24px 20px;font-size:16px;border-radius:16px;}.dx-paneler .fek-panel h2{font-size:25px;}.dx-paneler .fek-panel h3{font-size:21px;}.dx-paneler .fek-criteria{grid-template-columns:repeat(2,minmax(0,1fr));}.dx-paneler .fek-panel .dx-top5-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}.dx-paneler .fek-trust-group{padding:20px 14px;}.dx-paneler .fek-trust-group table{font-size:13px;}.dx-paneler .fek-panel .fek-note{padding:14px;}}
.dx-paneler{margin-top:0!important;}
.dx-paneler>.elementor-container{max-width:1180px!important;}
.dx-paneler .fek-panel>p{max-width:none;}
@media(max-width:600px){.dx-paneler .fek-criteria{grid-template-columns:1fr;}.dx-paneler .fek-criteria li{padding:12px 14px;}}
/* Mere liv (06.10.2026), rev. C: lyst panel med eksempel på en vurdering, Jesper, Trustpilot-stjernebarer. */
.dx-paneler .fek-method-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;}
.dx-paneler .fek-eksempel{margin:0;background:#f7f8fa;border:1px solid #eceff3;border-radius:16px;padding:22px 24px;}
.dx-paneler .fek-eksempel figcaption{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#526075;margin:0 0 14px;}
.dx-paneler .fek-eksempel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.dx-paneler .fek-eksempel li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 34px;gap:12px;align-items:center;font-size:14px;line-height:1.3;color:#283344;}
.dx-paneler .fek-eks-bar{height:9px;border-radius:6px;background:#e7eaef;position:relative;overflow:hidden;}
.dx-paneler .fek-eks-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#ff8a9c,#ff4f67);}
.dx-paneler .fek-eksempel li strong{text-align:right;font-weight:800;color:#202b3b;}
.dx-paneler .fek-eks-total{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #e1e5eb;}
.dx-paneler .fek-eks-total span{font-size:14px;font-weight:700;color:#526075;}
.dx-paneler .fek-eks-total strong{font-size:30px;line-height:1;font-weight:800;color:#65a30d;margin-left:auto;}
.dx-paneler .fek-eks-total em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#65a30d;}
.dx-paneler .fek-panel .fek-eks-note{margin:6px 0 0;font-size:12.5px;color:#6b7280;text-align:right;}
.dx-paneler .fek-author{display:flex;align-items:center;gap:14px;margin-top:24px;padding:14px 16px;border-radius:14px;background:#f7f8fa;}
.dx-paneler .fek-author img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #ff4f67;padding:2px;background:#fff;flex:none;}
.dx-paneler .fek-author p{margin:0;font-size:14px;line-height:1.6;color:#526075;}
.dx-paneler .fek-author strong{color:#202b3b;}
.dx-paneler .fek-tp{display:flex;align-items:center;gap:10px;}
.dx-paneler .fek-tp-bar{flex:1;max-width:120px;height:8px;border-radius:5px;background:#eef0f3;position:relative;overflow:hidden;}
.dx-paneler .fek-tp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;}
.dx-paneler .fek-tp strong{min-width:28px;}
.dx-paneler .fek-tp-navn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#202b3b;font-weight:650;}
.dx-paneler a.fek-tp-navn:hover span{text-decoration:underline;}
.dx-paneler .fek-tp-logo{width:56px;height:28px;object-fit:contain;mix-blend-mode:multiply;flex:none;}
@media (max-width:900px){.dx-paneler .fek-method-grid{grid-template-columns:1fr;gap:24px;}}
@media (max-width:600px){.dx-paneler .fek-tp-logo{width:44px;height:22px;}.dx-paneler .fek-tp-bar{max-width:60px;}.dx-paneler .fek-author{align-items:flex-start;}.dx-paneler .fek-eksempel{padding:18px 16px;}.dx-paneler .fek-eksempel li{font-size:13px;gap:8px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 30px;}}
/* Stjerner i eksemplet - som på kortene. */
.dx-paneler .fek-eks-total{align-items:center;}
.dx-paneler .fek-eks-stjerner{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.dx-paneler .fek-eks-stjerner .dx-rating-stars{display:flex;gap:2px;font-size:13px;color:#65a30d;}
.dx-paneler .fek-eks-total em{line-height:1;}

/* Trustpilot (06.10.2026): kun antallet linker til Trustpilot - navnene er ikke links. */
.dx-paneler span.fek-tp-navn:hover span{text-decoration:none;}
.dx-paneler .fek-tp-antal{display:inline-flex;align-items:center;gap:5px;color:#c41831;font-weight:650;text-decoration:none;white-space:nowrap;}
.dx-paneler .fek-tp-antal:hover{text-decoration:underline;}
.dx-paneler .fek-tp-antal i{font-size:10px;}

.dx-paneler .fek-panel ul.fek-raad { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.dx-paneler .fek-panel ul.fek-raad li { margin: 0 0 8px; }
.dx-paneler .fek-svindel { margin-top: 24px; background: #fff7e8; border: 1px solid #f3d9a4; border-radius: 14px; padding: 20px 24px; }
.dx-paneler .fek-svindel h3 { margin: 0 0 10px; font-size: 19px; display: flex; gap: 10px; align-items: center; }
.dx-paneler .fek-svindel h3 i { color: #c77700; }
.dx-paneler .fek-svindel p { margin: 0 0 10px; }
.dx-paneler .fek-svindel ul { margin: 0 0 10px; padding-left: 22px; list-style: disc; }
.dx-paneler .fek-svindel li { margin: 0 0 6px; }
@media (max-width: 600px) { .dx-paneler .fek-svindel { padding: 16px 16px; } }

/* ---------- [dating_bund] alder (2.27.0) ---------- */
.dx-alder-vaelg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; }
.dx-alder-vaelg > span { font-size: 14px; color: #526075; margin-right: 4px; }
.dx-alder-l { display: none; font-style: normal; }
.dx-alder-vaelg button { border: 1px solid #d5dbe3; background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 600; color: #202b3b; cursor: pointer; line-height: 1.3; }
.dx-alder-vaelg button:hover { border-color: #202b3b; background: #fff; color: #202b3b; }
.dx-alder-vaelg button[aria-pressed="true"] { background: #202b3b; color: #fff; border-color: #202b3b; }
.dx-alder-raekke, .dx-alder-skala { display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px; gap: 16px; align-items: center; }
.dx-alder-raekke { padding: 12px 0; border-top: 1px solid #eef0f3; transition: opacity .2s; }
.dx-alder-raekke > a { font-weight: 700; color: #202b3b; text-decoration: none; }
.dx-alder-raekke > a:hover { text-decoration: underline; }
.dx-alder-spor { position: relative; height: 12px; background: #f1f3f6; border-radius: 6px; }
.dx-alder-bar { position: absolute; top: 0; bottom: 0; background: #f7a8b5; border-radius: 6px; }
.dx-alder-match .dx-alder-bar { background: #d92c4b; }
.dx-alder-ude { opacity: .35; }
.dx-alder-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: #202b3b; display: none; }
.dx-alder-valgt .dx-alder-mark { display: block; }
.dx-alder-info { font-size: 14px; color: #526075; line-height: 1.35; }
.dx-alder-info b { display: block; color: #202b3b; font-size: 15px; }
.dx-alder-skala { font-size: 12px; color: #8a93a2; margin-bottom: 4px; }
.dx-alder-skala > div { position: relative; height: 16px; }
.dx-alder-skala > div span { position: absolute; transform: translateX(-50%); }
.dx-bund-alder .dx-bund-note { margin-top: 12px; }
@media (max-width: 700px) {
    .dx-alder-raekke { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .dx-alder-raekke > a { order: 1; }
    .dx-alder-info { order: 2; }
    .dx-alder-spor { order: 3; }
    .dx-alder-info b { display: inline; margin-right: 6px; }
    .dx-alder-skala { grid-template-columns: minmax(0, 1fr); }
    .dx-alder-skala > span { display: none; }
    /* Fire knapper på én række - "år" står i etiketten. */
    .dx-alder-vaelg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .dx-alder-vaelg > span { grid-column: 1 / -1; }
    .dx-alder-l { display: inline; }
    .dx-alder-vaelg button { padding: 8px 4px; font-size: 14px; }
    .dx-alder-aar { display: none; }
}
.dx-paneler, .dx-paneler [id] { scroll-margin-top: 100px; }

/* ---------- [dating_bund] Hvad søger du? (2.28.0) ---------- */
.dx-soeger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dx-soeger-kort { background: #f7f8fa; border: 1px solid #eceff3; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.dx-soeger-kort .dx-bund-ikon { margin-bottom: 4px; }
.dx-soeger-kort strong { font-size: 17px; color: #202b3b; line-height: 1.3; }
.dx-soeger-kort p { margin: 0 !important; font-size: 14.5px; line-height: 1.55; color: #526075; }
.dx-soeger-sider { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.dx-soeger-sider a { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e1e5eb; border-radius: 999px; padding: 5px 11px; font-size: 13.5px; font-weight: 650; color: #202b3b; text-decoration: none; white-space: nowrap; }
.dx-soeger-sider a:hover { border-color: #c41831; color: #c41831; }
.dx-soeger-sider a b { font-weight: 800; font-size: 12.5px; }
@media (max-width: 1024px) { .dx-soeger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dx-soeger { grid-template-columns: 1fr; gap: 10px; } .dx-soeger-kort { padding: 16px; } }
/* 4 behov: 2+2 (i 4 kolonner knækker pillerne ujævnt). */
.dx-soeger:has(> .dx-soeger-kort:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .dx-soeger:has(> .dx-soeger-kort:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dx-soeger:has(> .dx-soeger-kort:nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* ---------- [dating_bund] Hvad kan du uden at betale? (2.29.0) ---------- */
.dx-gf-svar { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px !important; padding: 14px 18px; background: #ecfdf5; border: 1px solid #b7ebd3; border-radius: 14px; font-size: 15.5px; line-height: 1.55; color: #134e3a; }
.dx-gf-svar i { color: #0f9b6c; font-size: 18px; margin-top: 2px; }
.dx-gf-svar a { color: #0f6e56; font-weight: 700; }
.dx-gf-tabel { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.dx-gf-tabel table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; background: #fff; }
.dx-gf-tabel th, .dx-gf-tabel td { padding: 12px 14px; border: 0; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
.dx-gf-tabel thead th { background: #f7f8fa; font-size: 12.5px; font-weight: 700; color: #526075; white-space: nowrap; }
.dx-gf-tabel tbody tr:last-child th, .dx-gf-tabel tbody tr:last-child td { border-bottom: 0; }
.dx-gf-tabel tbody th a { color: #202b3b; font-weight: 700; text-decoration: none; }
.dx-gf-tabel tbody th a:hover { text-decoration: underline; }
.dx-gf-tabel td:not(:first-child), .dx-gf-tabel thead th:not(:first-child) { text-align: center; width: 18%; }
.dx-gf-note { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #6b7280; line-height: 1.35; }
.dx-gf { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.dx-gf i { font-size: 11px; }
.dx-gf-ja { background: #e7f6ee; color: #0f6e56; }
.dx-gf-delvist { background: #fff6e0; color: #8a5a00; }
.dx-gf-nej { background: #fdecec; color: #b42318; }
.dx-gf-ukendt { background: #f1f3f6; color: #6b7280; }
@media (max-width: 600px) {
    .dx-gf-tabel th, .dx-gf-tabel td { padding: 10px 6px; }
    .dx-gf-tabel thead th { font-size: 11px; white-space: normal; }
    .dx-gf-tabel tbody th { font-size: 14px; }
    /* Smalle ikonkolonner, så navn og note får pladsen (færre linjeskift). */
    .dx-gf-tabel td:not(:first-child), .dx-gf-tabel thead th:not(:first-child) { width: 52px; padding-left: 2px; padding-right: 2px; }
    .dx-gf-note { font-size: 12px; }
    /* Kun ikon på mobil - farven og ikonet siger det samme som teksten. */
    .dx-gf { padding: 0; width: 28px; height: 28px; justify-content: center; font-size: 0; gap: 0; }
    .dx-gf i { font-size: 12px; }
}

/* ---------- Faktabokse i paneler, fx "Før du går i gang" på /sugardating/ (2.31.1) ---------- */
.dx-paneler .fek-fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 18px; }
.dx-paneler .fek-fakta > div { background: #f7f8fa; border: 1px solid #eceff3; border-radius: 16px; padding: 20px; }
.dx-paneler .fek-fakta h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 8px; }
.dx-paneler .fek-fakta h3 i { width: 34px; height: 34px; border-radius: 50%; background: #fff1f3; color: #d92c4b; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.dx-paneler .fek-fakta p { font-size: 15px; line-height: 1.6; margin: 0; color: #3b4658; }
.dx-paneler .fek-fakta a { font-weight: 600; }
@media (max-width: 700px) { .dx-paneler .fek-fakta { grid-template-columns: 1fr; } .dx-paneler .fek-fakta > div { padding: 16px; } }
/* Lange navne (fx DanskSugardating.com) må knække på mobil, så tabellen ikke bliver bredere end boksen. */
@media (max-width: 600px) { .dx-gf-tabel tbody th a, .fek-trust-group .fek-tp-navn span { overflow-wrap: anywhere; word-break: break-word; } }