/* Datoden Pro-sidor 1.0.19 — 2026-10-13 | Illustrationerna (Så ser det ut): Pro-etikett, statusbrickor, reglage – följer ljust och mörkt läge.
   Datoden Pro-sidor 1.0.18 — 2026-10-13 | Så ser det ut: bilderna centrerade, breda bilder i full bredd (högst 1040 px), ram och skugga som korten.
   Datoden Pro-sidor 1.0.17 — 2026-10-13 | Så fungerar <tillägg>: funktionskorten (Pro-märkta med blå kant).
   Datoden Pro-sidor 1.0.8 — 2026-10-11 | Svävande tilläggsikoner och bildspelets bilder (ddpro-float, ddpro-art).
   Datoden Pro-sidor 1.0.0 — 2026-10-11 | Pro-sidorna: tilläggskort, jämförelse, priser och köpformuläret. Bygger på portalens site.css
   (variablerna --surface, --border, --brand … följer ljust och mörkt läge). */
.ddpro-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:var(--brand-soft,#eef0f8);color:var(--brand-text,#3953a4);font-size:.72em;font-weight:800;letter-spacing:.02em;vertical-align:.18em}
.ddpro-badge--big{font-size:.42em;padding:4px 12px;vertical-align:.5em}
.ddpro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.ddpro-plugin{display:flex;flex-direction:column}
.ddpro-plugin h3{margin:14px 0 4px;font-size:1.15rem}.ddpro-plugin h3 a{color:inherit;text-decoration:none}.ddpro-plugin h3 a:hover{color:var(--brand-text,#3953a4)}
.ddpro-tag{margin:0 0 12px;color:var(--muted,#4f586c);font-size:.95rem}
.ddpro-more{margin:auto 0 0;padding-top:10px;font-weight:700}.ddpro-more a{color:var(--brand-text,#3953a4);text-decoration:none}.ddpro-more a:hover{text-decoration:underline}
.ddpro-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:7px;font-size:.95rem;line-height:1.45}
.ddpro-list li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start}
.ddpro-check{width:18px;height:18px;margin-top:2px;color:var(--brand-text,#3953a4)}
.ddpro-note{margin:22px 0 0;text-align:center;color:var(--muted,#4f586c);font-size:.95rem}
.ddpro-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:920px;margin:0 auto}
.ddpro-compare h3{margin:0 0 14px}.ddpro-compare__pro{border-color:var(--brand,#3953a4);box-shadow:0 0 0 1px var(--brand,#3953a4) inset}
.ddpro-plus{margin:-6px 0 12px;color:var(--muted,#4f586c);font-size:.95rem}
.ddpro-alert{max-width:920px;margin:0 auto 18px;padding:12px 16px;border-radius:14px;background:var(--brand-soft,#eef0f8);font-weight:600;text-align:center}

/* köpformuläret */
.ddpro-buy{max-width:1040px;margin:0 auto;display:grid;gap:22px}
.ddpro-seg{border:0;margin:0 auto;padding:4px;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;border-radius:16px;background:var(--surface-2,#eef0f8)}
.ddpro-seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ddpro-seg label{position:relative;cursor:pointer}
.ddpro-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ddpro-seg span{display:block;padding:10px 18px;border-radius:12px;font-weight:700;font-size:.95rem;color:var(--muted,#4f586c);transition:background .15s,color .15s}
.ddpro-seg input:checked+span{background:var(--surface,#fff);color:var(--text,#141824);box-shadow:0 4px 14px rgba(20,28,60,.12)}
.ddpro-seg input:focus-visible+span{outline:3px solid var(--brand,#3953a4);outline-offset:2px}
.ddpro-buy>.ddpro-seg{justify-self:center}
.ddpro-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.ddpro-plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:1.5px solid var(--border,#dfe3ee);border-radius:var(--radius,18px);background:var(--surface,#fff);transition:border-color .18s,box-shadow .18s,transform .18s}
.ddpro-plan>input[name=product]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:0}
.ddpro-plan select,.ddpro-interval{position:relative;z-index:1}
.ddpro-plan:hover{border-color:color-mix(in srgb,var(--brand,#3953a4) 50%,var(--border,#dfe3ee))}
.ddpro-plan:has(>input[name=product]:checked){border-color:var(--brand,#3953a4);box-shadow:0 0 0 2px var(--brand,#3953a4) inset,0 18px 40px rgba(var(--datoden-accent-rgb,57,83,164),.16)}
.ddpro-plan:has(>input[name=product]:focus-visible){outline:3px solid var(--brand,#3953a4);outline-offset:3px}
.ddpro-plan__name{font-weight:800;font-size:1.2rem;padding-right:24px}
.ddpro-plan::after{content:"";position:absolute;top:24px;right:22px;width:20px;height:20px;border-radius:50%;border:2px solid var(--border,#dfe3ee);box-sizing:border-box;transition:border .15s;pointer-events:none}
.ddpro-plan:has(>input[name=product]:checked)::after{border:6px solid var(--brand,#3953a4)}
.ddpro-plan--best{padding-top:34px}
.ddpro-flag{position:absolute;top:-12px;left:22px;padding:4px 12px;border-radius:999px;background:var(--brand,#3953a4);color:var(--datoden-on-accent,#fff);font-size:.78rem;font-weight:800;letter-spacing:.02em}
.ddpro-plan__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ddpro-plan__price strong{font-size:2rem;line-height:1.1;letter-spacing:-.01em}
.ddpro-plan__price small{color:var(--muted,#4f586c);font-size:.9rem}
.ddpro-price{display:none}
.ddpro-buy:has(input[name=sites][value="1"]:checked) .ddpro-price[data-sites="1"],
.ddpro-buy:has(input[name=sites][value="5"]:checked) .ddpro-price[data-sites="5"],
.ddpro-buy:has(input[name=sites][value="0"]:checked) .ddpro-price[data-sites="0"]{display:inline}
.ddpro-plan__price[data-interval="month"]{display:none}
.ddpro-plan:has(input[name=interval][value=month]:checked) .ddpro-plan__price[data-interval="month"]{display:flex}
.ddpro-plan:has(input[name=interval][value=month]:checked) .ddpro-plan__price[data-interval="year"]{display:none}
.ddpro-plan select{width:100%;min-height:42px;padding:8px 12px;border-radius:12px;border:1px solid var(--border,#dfe3ee);background:var(--bg,#fff);color:var(--text,#141824);font:inherit;font-weight:600}
.ddpro-interval{display:grid;gap:6px;font-size:.92rem}
.ddpro-interval label{display:flex;align-items:center;gap:8px;cursor:pointer}
.ddpro-interval input{width:16px;height:16px;margin:0;accent-color:var(--brand,#3953a4)}
.ddpro-plan .ddpro-list{margin-top:6px}
.ddpro-pay{display:grid;justify-items:center;gap:14px;text-align:center}
.ddpro-terms{display:flex;gap:10px;align-items:flex-start;max-width:640px;text-align:left;font-size:.95rem;color:var(--muted,#4f586c);cursor:pointer}
.ddpro-terms input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--brand,#3953a4)}
.ddpro-terms a{color:var(--brand-text,#3953a4)}
.ddpro-pay .ddp-btn{min-width:260px}
.ddpro-pay .ddp-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.ddpro-small{margin:0;max-width:560px;color:var(--muted,#4f586c);font-size:.88rem}
/* DT 3.0.0: namnet på WordPress.org under knapparna på tilläggets sida */
.ddpro-wporg{margin-top:14px}
.ddpro-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ddpro-chips a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:1px solid var(--border,#dfe3ee);background:var(--surface,#fff);color:var(--text,#141824);font-weight:700;text-decoration:none;transition:border-color .15s,color .15s}
.ddpro-chips a:hover{border-color:var(--brand,#3953a4);color:var(--brand-text,#3953a4)}
@media (max-width:900px){.ddpro-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto;width:100%}.ddpro-compare{grid-template-columns:1fr}}
@media (max-width:520px){.ddpro-seg{display:flex;width:100%}.ddpro-seg label{flex:1}.ddpro-seg span{padding:10px 8px;text-align:center}.ddpro-pay .ddp-btn{width:100%;min-width:0}}
.ddpro-plan.is-on{border-color:var(--brand,#3953a4);box-shadow:0 0 0 2px var(--brand,#3953a4) inset}.ddpro-plan.is-on::after{border:6px solid var(--brand,#3953a4)}
.ddpro-terms.is-missing{color:#c0392b}.ddpro-terms.is-missing input{outline:2px solid #c0392b;outline-offset:2px}
/* knappen i formuläret: Datodens formulärstil för button ska inte ta över portalens primärknapp */
.ddpro-pay button.ddp-btn.ddp-btn--primary{background:var(--brand,#3953a4)!important;color:var(--datoden-on-accent,#fff)!important;border:1px solid transparent!important;box-shadow:0 12px 28px rgba(var(--datoden-accent-rgb,57,83,164),.32)!important;font:inherit;font-weight:750!important;font-size:1rem!important;min-height:48px;padding:12px 24px!important;border-radius:14px!important}
.ddpro-pay button.ddp-btn.ddp-btn--primary:hover{background:var(--brand-dark,#2f478f)!important}

/* 1.0.8: sidan WordPress-tillägg – svävande tilläggsikoner i första avsnittet och bilden i bildspelet (färg efter tilläggets plats) */
.ddpro-c0{--g1:#3953a4;--g2:#5b7be0}
.ddpro-c1{--g1:#177f60;--g2:#2fb38a}
.ddpro-c2{--g1:#c2410c;--g2:#f08a3e}
.ddpro-c3{--g1:#7c3aed;--g2:#a879f5}
.ddpro-c4{--g1:#0e7490;--g2:#22b8cf}
.ddpro-c5{--g1:#be185d;--g2:#ec5f9b}
.ddpro-float{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);max-width:500px;margin-inline:auto;padding-bottom:28px}
.ddpro-float__item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(12px,1.6vw,18px) 8px;border-radius:20px;background:var(--surface,#fff);border:1px solid var(--border,#e2e6f0);box-shadow:0 16px 36px rgba(20,28,60,.08);color:var(--text,#141824);text-decoration:none;animation:ddpro-float 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.55s);transition:box-shadow .25s ease,border-color .25s ease}
.ddpro-float__item:nth-child(3n+2){margin-top:28px;margin-bottom:-28px}
.ddpro-float__item:hover,.ddpro-float__item:focus-visible{box-shadow:0 22px 46px rgba(20,28,60,.16);border-color:var(--g1);animation-play-state:paused}
.ddpro-float__icon{display:grid;place-items:center;width:clamp(42px,4.4vw,54px);height:clamp(42px,4.4vw,54px);border-radius:15px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff}
.ddpro-float__icon svg{width:56%;height:56%}
.ddpro-float__name{font-weight:800;font-size:clamp(.82rem,1.1vw,.95rem);letter-spacing:-.01em;color:var(--text,#141824)!important;text-align:center;overflow-wrap:break-word;hyphens:manual} /* 1.0.22: radbryts vid bindestrecket i DT-namnen, inte mitt i ordet */
@keyframes ddpro-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ddpro-art{position:relative;display:grid;place-items:center;align-content:center;gap:14px;min-height:clamp(240px,40svh,380px);padding:28px;border-radius:24px;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--g2) 22%,transparent),transparent 60%),var(--surface-2,#f3f5fa);overflow:hidden}
.ddpro-art__icon{display:grid;place-items:center;width:clamp(96px,12vw,136px);height:clamp(96px,12vw,136px);border-radius:32px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;box-shadow:0 24px 50px color-mix(in srgb,var(--g1) 35%,transparent);animation:ddpro-float 6.5s ease-in-out infinite}
.ddpro-art__icon svg{width:54%;height:54%}
.ddpro-art__name{font-weight:800;font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:-.01em}
.ddpro-art__chip{position:absolute;display:inline-flex;align-items:center;gap:6px;max-width:33%;padding:7px 12px;border-radius:999px;background:var(--surface,#fff);border:1px solid var(--border,#e2e6f0);box-shadow:0 10px 24px rgba(20,28,60,.1);font-size:.8rem;font-weight:600;line-height:1.25;animation:ddpro-float 7s ease-in-out infinite}
.ddpro-art__chip svg{flex:none;width:14px;height:14px;color:var(--g1)}
.ddpro-art__chip--0{top:8%;left:4%;animation-delay:-1s}.ddpro-art__chip--1{top:40%;right:3%;animation-delay:-3s}.ddpro-art__chip--2{bottom:8%;left:4%;animation-delay:-5s}
.ddpro-show .ddp-checks .ddpro-badge{font-size:.62em;vertical-align:.12em;margin-left:4px}
.ddpro-hero .ddp-kicker{margin-bottom:.6em}
@media (max-width:900px){.ddpro-float{max-width:420px;margin-top:6px}.ddpro-art__chip,.ddpro-art__name{display:none}.ddpro-art{min-height:150px;padding:18px}.ddpro-art__icon{width:84px;height:84px;border-radius:24px}}
@media (max-width:600px){.ddpro-float{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-bottom:6px}.ddpro-float__item{padding:9px 4px;gap:5px;border-radius:14px}.ddpro-float__item:nth-child(3n+2){margin:0}.ddpro-float__item:nth-child(4n+2),.ddpro-float__item:nth-child(4n+4){margin-top:12px;margin-bottom:-12px}.ddpro-float__icon{width:36px;height:36px;border-radius:11px}.ddpro-float__name{font-size:.68rem}}
@media (prefers-reduced-motion:reduce){.ddpro-float__item,.ddpro-art__icon,.ddpro-art__chip{animation:none}}

/* 1.0.13: årspriset per månad under prenumerationens pris */
.ddpro-pm{display:block;margin:-4px 0 12px;color:var(--brand,#3953a4);font-size:.95rem;font-weight:700}.ddpro-pm strong{font-weight:800}
html[data-theme=dark] .ddpro-pm,html.datoden-theme-dark .ddpro-pm{color:#9cacdf}
.ddpro-plan:has(input[name=interval][value=month]:checked) .ddpro-pm{display:none}
.ddpro-feats .ddp-card h3{margin:0 0 8px;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ddpro-feats .ddp-card p{margin:0;color:var(--muted,inherit);line-height:1.55}.ddpro-feat--pro{border-color:color-mix(in srgb,var(--brand,#3953a4) 55%,var(--border,transparent))}
.ddp-site-body{--ill-ok:#1e8e4e;--ill-ok-soft:rgba(30,142,78,.12);--ill-warn:#b7791f;--ill-warn-soft:rgba(183,121,31,.14);--ill-bad:#c0392b;--ill-bad-soft:rgba(192,57,43,.12)}
html[data-theme="dark"] .ddp-site-body{--ill-ok:#4ade80;--ill-ok-soft:rgba(74,222,128,.14);--ill-warn:#fbbf24;--ill-warn-soft:rgba(251,191,36,.14);--ill-bad:#f87171;--ill-bad-soft:rgba(248,113,113,.14)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .ddp-site-body{--ill-ok:#4ade80;--ill-ok-soft:rgba(74,222,128,.14);--ill-warn:#fbbf24;--ill-warn-soft:rgba(251,191,36,.14);--ill-bad:#f87171;--ill-bad-soft:rgba(248,113,113,.14)}}
.ill-tiny{font:600 11px system-ui,sans-serif;fill:var(--text)}.ill-mono{font:600 12px ui-monospace,SFMono-Regular,Consolas,monospace;fill:var(--text)}.ill-pro{fill:var(--brand)}.ill-pro-text{font:800 10.5px system-ui,sans-serif;fill:#fff;letter-spacing:.02em}.ill-ok{fill:var(--ill-ok)}.ill-ok-soft{fill:var(--ill-ok-soft)}.ill-ok-text{fill:var(--ill-ok)}.ill-warn{fill:var(--ill-warn)}.ill-warn-soft{fill:var(--ill-warn-soft)}.ill-warn-text{fill:var(--ill-warn)}.ill-bad{fill:var(--ill-bad)}.ill-bad-soft{fill:var(--ill-bad-soft)}.ill-bad-text{fill:var(--ill-bad)}.ill-ok-stroke{fill:none;stroke:var(--ill-ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.ill-knob{fill:#fff}.ill-outline{fill:transparent;stroke:var(--brand-text);stroke-width:1.5}.ill-spark{fill:none;stroke:var(--brand-text);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.ill-lock{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linejoin:round}.ill-grip{stroke:var(--muted);stroke-width:2;stroke-linecap:round}.ill-brand-soft{fill:var(--brand-soft)}.ill-play{fill:var(--muted)}.ill-arrow{fill:none;stroke:var(--brand-text);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ddpro-illus-grid{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;gap:34px}.ddpro-illus-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.ddpro-illus-fig{margin:0}.ddpro-illus-fig .ddp-illus{width:100%;max-height:none}.ddpro-illus-fig figcaption{margin:14px auto 0;max-width:520px;text-align:center;font-size:14.5px;color:var(--muted,inherit);line-height:1.5}
@media (max-width:900px){.ddpro-illus-grid--2{grid-template-columns:minmax(0,1fr)}}
.ddpro-illus .ill-body{fill:var(--text)}
/* 1.0.20: färgklasser vinner över textstorlek (ill-tiny/ill-small) */
.ddpro-illus .ill-muted{fill:var(--muted)}.ddpro-illus .ill-brand{fill:var(--brand-text)}.ddpro-illus .ill-chip-text,.ddpro-illus .ill-block-text{fill:#fff}.ddpro-illus .ill-ok-text{fill:var(--ill-ok)}.ddpro-illus .ill-warn-text{fill:var(--ill-warn)}.ddpro-illus .ill-bad-text{fill:var(--ill-bad)}

/* 1.0.20: bild bredvid huvudtexten på tilläggens sidor */
.ddpro-pagehero--ill .ddp-crumbs{margin-bottom:18px}.ddpro-hero-ill{margin:0}.ddpro-hero-ill .ddp-illus{width:100%;max-height:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.14))}.ddpro-hero-ill figcaption{margin:12px auto 0;max-width:460px;text-align:center;font-size:14px;color:var(--muted,inherit);line-height:1.5}
@media (max-width:900px){.ddpro-hero-ill{max-width:620px;margin:8px auto 0}}
.ddpro-freeline{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-4px 0 22px;padding:0;list-style:none;font-weight:650;font-size:.98rem}.ddpro-freeline li{display:inline-flex;align-items:center;gap:7px}.ddpro-freeline svg{width:18px;height:18px;color:var(--ill-ok,#16a34a);stroke:currentColor}.ddpro-freeline .ddpro-badge{font-size:.78em;vertical-align:0}
.ddpro-badge--free{background:var(--ill-ok-soft);color:var(--ill-ok)}

/* 1.0.26: tilläggens egna ikoner (samma som på WordPress.org och i wp-admin) i rutorna, bildspelet och intill namnet */
.ddpro-float__icon:has(.ddpro-pic),.ddpro-art__icon:has(.ddpro-pic){background:none;overflow:hidden}
.ddpro-float__icon .ddpro-pic,.ddpro-art__icon .ddpro-pic{display:block;width:100%;height:100%;border-radius:inherit}
.ddpro-titlerow{display:flex;align-items:center;gap:18px}
.ddpro-titlerow__icon{flex:none;width:72px;height:72px;border-radius:18px;box-shadow:0 12px 28px rgba(20,28,60,.18)}
@media (max-width:600px){.ddpro-titlerow{gap:14px}.ddpro-titlerow__icon{width:56px;height:56px;border-radius:14px}}
/* 1.0.28: ikonerna har ett bortklippt hörn – små rundade hörn, ingen ruta eller skugga bakom */
.ddpro-float__icon:has(.ddpro-pic){border-radius:7px;box-shadow:none}
.ddpro-art__icon:has(.ddpro-pic){border-radius:17px;box-shadow:none}
.ddpro-titlerow__icon{border-radius:9px;box-shadow:none}
@media (max-width:600px){.ddpro-titlerow__icon{border-radius:7px}}
@media (max-width:900px){.ddpro-art__icon:has(.ddpro-pic){border-radius:11px}}