/* =========================================================================
   plus.css — Buddy Plus: låsene, betalingsarket, betalingssiderne, Fremgang-
   kortet og takkesiden. Ejes af plus (runde 5) og indlæses efter app.css.

   Samme regler som resten: flader adskilles af tone og luft, aldrig af streger;
   kobolt er handling; solgul KUN når der fejres — her kun på takkesiden.
   Betalingssiden er et salgsvindue, men i appens egen stemme: Buddy, en boble,
   brugerens egne tal. Ingen nedtællinger, intet rødt, intet blink.
   ========================================================================= */

/* ------------------------------------------------------------- låsen
   Den lille pille andre moduler sætter ind med plusLaas(). */
.plus-laas {
    display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
    background: var(--dis); color: var(--blaa-dyb); font-weight: 650; font-size: 13px; line-height: 1; white-space: nowrap; flex: none;
    transition: background .15s;
}
.plus-laas svg { width: 14px; height: 14px; }
.plus-laas:hover { background: var(--dis-2); }

/* ------------------------------------------------------------- fordelene */
.plus-fordele { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.plus-fordele li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; }
.plus-ikon { width: 42px; height: 42px; border-radius: 14px; background: var(--himmel); color: var(--blaa); display: grid; place-items: center; flex: none; }
.plus-ikon svg { width: 21px; height: 21px; }
.plus-fordele b { display: block; font-weight: 650; line-height: 1.3; }
.plus-fordele small { display: block; color: var(--marine-2); font-size: 14px; line-height: 1.4; margin-top: 2px; }
/* I arket: kun overskrifterne, så pris og knap kan ses uden at rulle på en telefon. */
.plus-fordele.kompakt { gap: 10px; margin: 18px 0 20px; }
.plus-fordele.kompakt li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.plus-fordele.kompakt .plus-ikon { width: 36px; height: 36px; border-radius: 12px; }
.plus-fordele.kompakt .plus-ikon svg { width: 18px; height: 18px; }
.plus-fordele.kompakt small { display: none; }

/* ------------------------------------------------------------- købet */
.plus-planer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plus-plan {
    position: relative; display: grid; justify-items: start; align-content: start; gap: 1px; text-align: left;
    padding: 14px 16px 15px; border-radius: var(--r-m); background: var(--himmel); color: var(--marine);
    box-shadow: inset 0 0 0 2.5px transparent; transition: box-shadow .15s, background .15s;
}
.plus-plan b { font-weight: 650; font-size: 14.5px; color: var(--marine-2); }
.plus-plan .tal { font-size: 27px; line-height: 1.15; margin-top: 2px; }
.plus-plan small { font-size: 13px; color: var(--marine-2); line-height: 1.35; }
.plus-plan i {
    position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 12px; font-weight: 650; line-height: 1;
    padding: 5px 9px; border-radius: 999px; background: var(--dis); color: var(--blaa-dyb); white-space: nowrap;
}
.plus-plan.valgt { background: var(--hvid); box-shadow: inset 0 0 0 2.5px var(--blaa), var(--skygge); }
.plus-plan.valgt i { background: var(--blaa); color: var(--hvid); }
.plus-plan:not(.valgt):hover { background: var(--dis); }

.plus-samtykke {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px;
    font-size: 14.5px; line-height: 1.45; cursor: pointer;
}
.plus-samtykke input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blaa); cursor: pointer; }
.plus-samtykke.mangler { animation: plus-puf .4s cubic-bezier(.36, .07, .19, .97); }
.plus-samtykke.mangler input { outline: 3px solid var(--roed); outline-offset: 2px; border-radius: 4px; }
@keyframes plus-puf { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.plus-fejl { margin-top: 8px; min-height: 0; }
.plus-fejl:empty { display: none; }
.plus-koeb .knap.bred, .plus-betal .knap.bred { margin-top: 14px; }
.plus-cta { min-height: 54px; font-size: 16.5px; }
.plus-smaat { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--marine-2); }
.plus-smaat a { color: var(--blaa); font-weight: 600; text-underline-offset: 2px; }
.plus-centreret { text-align: center; margin-top: 8px; }
.plus-hellere { display: block; margin: 10px auto 0; font-size: 14.5px; }
.plus-koeb [data-plus-betal-boks] { margin-top: 14px; }
.plus-test { margin-top: 12px; padding: 9px 12px; border-radius: var(--r-s); background: var(--himmel); font-size: 13px; color: var(--marine-2); }

/* ------------------------------------------------------------- arket */
.ark.plus-ark .plus-hilsen { margin-top: 6px; }
.plus-hilsen .boble small { font-weight: 500; }
@media (min-width: 720px) { .ark.plus-ark { padding: 26px 30px 30px; } }

/* ------------------------------------------------------------- betalingssiderne
   Siderne bor i midterzonen, som fra 1200 px deler bredden med Buddy-panelet. Derfor
   styres spalterne af sidens EGEN bredde (container query), ikke vinduets. */
.plus-side { container-type: inline-size; }
.plus-gitter { display: grid; gap: 22px; }
.plus-venstre, .plus-hoejre { display: grid; gap: 22px; align-content: start; min-width: 0; }
.plus-venstre > .sektion, .plus-venstre > div > .sektion { margin-top: 0; }
.plus-venstre .sektion + .sektion { margin-top: 22px; }
.plus-side .plus-hilsen { grid-template-columns: 84px minmax(0, 1fr); }
.plus-koeb-flade { padding: 20px; }
.plus-fordele-flade { padding: 20px; }
.plus-links { text-align: center; margin-top: 0; }

@container (min-width: 700px) {
    .plus-gitter { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 26px; align-items: start; }
    .plus-hoejre { position: sticky; top: 24px; }
    .plus-side .plus-hilsen { grid-template-columns: 112px minmax(0, 1fr); }
    .plus-side .plus-hilsen .buddy-fig { width: 112px; height: 112px; }
}

/* Mad: brugerens egen plan for i dag */
.plus-smag-liste { padding: 6px 18px; }
.plus-ret { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; }
.plus-ret + .plus-ret { box-shadow: 0 -1px 0 var(--himmel); }
.plus-ret .hvornaar { display: block; font-size: 12.5px; font-weight: 650; color: var(--blaa); }
.plus-ret b { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.plus-ret small { display: block; color: var(--marine-2); font-size: 13px; margin-top: 1px; }
.plus-note { margin-top: 12px; font-size: 14.5px; color: var(--marine-2); }
/* På en telefon tager "Opskrift" pladsen fra retternes navne — så står kun låsen tilbage. */
@container (max-width: 520px) {
    .plus-ret .plus-laas { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .plus-ret .plus-laas span { display: none; }
    .plus-ret .plus-laas svg { width: 16px; height: 16px; }
}
.plus-flade-titel { font-size: 19px; margin-bottom: 16px; }

/* Buddy: det han har skrevet, eksempler og makkerne */
.plus-traad { display: grid; gap: 8px; justify-items: start; }
.plus-traad .besked { max-width: 92%; }
.plus-spm { gap: 8px; }
.plus-spm .chip { white-space: normal; text-align: left; min-height: 40px; padding: 8px 16px; line-height: 1.3; }
.plus-makker {
    width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 14px; align-items: center; text-align: left;
    background: var(--hvid); border-radius: var(--r-m); box-shadow: var(--skygge); padding: 14px 16px; transition: background .15s;
}
.plus-makker:hover { background: var(--himmel-2, #f6f9ff); }
.plus-makker b { display: block; font-weight: 650; }
.plus-makker small { display: block; color: var(--marine-2); font-size: 13.5px; }
.plus-makker > svg { width: 18px; height: 18px; color: var(--marine-3); }

/* Status på #/plus for dem der betaler */
.plus-status .liste-rad b { font-weight: 650; }
.plus-status .knap.bred { margin-top: 14px; }
.plus-status .knap svg, .plus-profil .knap svg { width: 16px; height: 16px; }

/* Profil */
.plus-profil p { color: var(--marine-2); font-size: 15px; }
.plus-profil p b { color: var(--marine); font-weight: 650; }
.plus-profil-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------- Fremgang uden Plus */
.plus-skjult { display: none !important; }
.fremgang-gitter .plus-fg { grid-column: 1 / -1; margin-top: 0; }
.plus-fg-flade { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.plus-fg-flade .buddy-fig { width: 64px; height: 64px; }
.plus-fg-flade h2 { font-size: 19px; margin-bottom: 6px; }
.plus-fg-flade p { color: var(--marine-2); font-size: 15px; margin-bottom: 14px; max-width: 46em; }

/* ------------------------------------------------------------- takkesiden (fejring: solgul) */
.plus-tak { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 7vh 0 20px; }
.plus-tak .loader { min-height: 0; }
.plus-tak h1 { font-size: clamp(32px, 7vw, 50px); font-weight: 800; }
.plus-tak p { color: var(--marine-2); max-width: 30em; font-size: 17px; }
.plus-tak-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.plus-tak-fig { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.plus-tak-fig::before {
    content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--sol);
    animation: plus-sol .7s cubic-bezier(.2, .8, .2, 1) both;
}
.plus-tak-fig .buddy-fig { position: relative; width: 150px; height: 150px; animation: plus-hop .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
.plus-tak-fig i { position: absolute; width: 12px; height: 12px; border-radius: 4px; background: var(--sol); animation: plus-drys 1s cubic-bezier(.2, .8, .2, 1) .1s both; }
.plus-tak-fig i:nth-child(1) { left: 6px; top: 40px; }
.plus-tak-fig i:nth-child(2) { right: 4px; top: 30px; background: var(--blaa); transform: rotate(20deg); }
.plus-tak-fig i:nth-child(3) { left: 22px; bottom: 18px; background: var(--blaa); width: 9px; height: 9px; }
.plus-tak-fig i:nth-child(4) { right: 18px; bottom: 26px; }
.plus-tak-fig i:nth-child(5) { left: 50%; top: -4px; width: 9px; height: 9px; }
.plus-tak-fig i:nth-child(6) { right: 40px; top: 2px; background: var(--dis-2); }
@keyframes plus-sol { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes plus-hop { from { transform: translateY(18px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes plus-drys { from { transform: scale(0); opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .plus-tak-fig::before, .plus-tak-fig .buddy-fig, .plus-tak-fig i, .plus-samtykke.mangler { animation: none; }
}

/* ------------------------------------------------------------- runde 6 (08-10-2026)
   Familievalget i købet (kun i en husstand), vejen til gavekort i arket, og rækkerne
   på #/plus der fører til "Inviter en ven" og "Gavekort" (lib/moduler/vaekst.php). */
.plus-hvem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--himmel); }
.plus-hvem button { min-height: 40px; padding: 0 10px; border-radius: 999px; font-weight: 650; font-size: 14.5px; color: var(--marine-2); transition: background .15s, color .15s; }
.plus-hvem button.valgt { background: var(--hvid); color: var(--blaa-dyb); box-shadow: var(--skygge); }
.plus-familie-note { margin: -2px 2px 12px; font-size: 14px; line-height: 1.4; color: var(--marine-2); }
.plus-gavelink { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px auto 0; font-size: 14.5px; }
.plus-gavelink svg { width: 17px; height: 17px; }
.plus-vaekst { display: grid; gap: 10px; }
a.plus-makker { text-decoration: none; color: var(--marine); }