/* dizains/_logi-core/logi-core.css
   Logu konfiguratora kodola stils.

   Viss krāsu un atstatumu kopums iet caur --lg-* tokeniem. Tēma tos pārraksta
   savā logi-tokens.css failā, neaiztiekot šo failu — tāpat kā veikala un
   pieteikumu kodolos. Ja tēma tokenus nedefinē, tie atvasinās no tēmas
   mainīgajiem (--r-*, --vk-*) vai no drošiem noklusējumiem. */

:root {
    --lg-paper:      var(--vk-paper, var(--r-paper, #ffffff));
    --lg-paper-2:    var(--vk-paper-2, var(--r-paper-2, #f6f6f4));
    --lg-ink:        var(--vk-ink, var(--r-ink, #16181c));
    /* Grafīts, ne pelēks. Tēmu --muted toņi ir domāti dekoratīvam tekstam, bet
       konfiguratorā tajos ir izmēri, parametri un cenu rindas — tas viss ir
       jālasa, ne jāuztver kā fons. Kontrasts pret balto tagad ir ap 8:1. */
    --lg-muted:      var(--lg-muted-override, #3f454d);

    /* Etiķetes ir jautājumi, ne piezīmes: "Apakšējo daļu skaits", "Platums",
       "Vertikāli". Tās jālasa tikpat viegli kā pogu tekstu, tāpēc tām savs,
       tumšāks tonis nekā paskaidrojumiem. Kontrasts pret balto ap 13:1. */
    --lg-etikete:    var(--lg-etikete-override, #23282e);
    --lg-line:       var(--vk-line, var(--r-line, #e3e2de));
    --lg-accent:     var(--vk-accent, var(--r-accent, #1f6f5c));
    --lg-accent-ink: #ffffff;
    --lg-warn:       #9a6413;
    --lg-ok:         #2f6b3a;
    --lg-card:       var(--vk-card, var(--r-card, #ffffff));

    /* Cik zem loga augšmalas apstājas lipīgais cenas panelis. Tēmām ar
       fiksētu galveni šo pārraksta savā logi-tokens.css failā. */
    --lg-sticky-top: 96px;

    --lg-radius:     10px;
    --lg-gap:        1.25rem;
    --lg-atstatums:  .85rem;
    --lg-glass:      #d9e7ef;   /* stikla laukums skicē */
    --lg-frame-line: #8e8d87;   /* rāmja kontūra skicē */
    --lg-symbol:     #6f7b84;   /* vēršanās simboli */
}

/* Pārlūka noklusējums `[hidden] { display: none }` zaudē pret jebkuru autora
   likumu, kas uzstāda display. Tāpēc .lg-pazinojums { display: flex } lika
   paziņojumam rādīties arī paslēptā stāvoklī — tukšs balts rāmis lapas augšā.
   Tas pats skāra sēriju kartītes, moskītu skaita rindu un vēršanās pusi. */
.lg-wrap [hidden] { display: none !important; }

/* ── Karkass ───────────────────────────────────────────────────────────── */

/* Platums un malas nāk no tēmas, nevis no kodola.

   Redakcijā tie ir --max un --gut, un tos pašus lieto .r-wrap, ar ko tēma
   centrē visas pārējās sadaļas. Tāpēc konfigurators nostājas vienā līnijā ar
   pārējo lapu, nevis tuvāk vai tālāk no malas.

   Rezerves vērtības der tēmām, kurām šo mainīgo nav. Ja tēmai vajag citu
   platumu tieši konfiguratoram, to nosaka ar --lg-max un --lg-gut savā
   logi-tokens.css failā.

   `width: 100%` ir apzināti: bez tā bloks flex vai grid vecākā sarūk līdz
   saturam, un tad katra jauna sadaļa maina visas lapas platumu. */
.lg-wrap {
    width: 100%;
    box-sizing: border-box;
    max-width: var(--lg-max, var(--max, var(--vk-max, 1240px)));
    margin-inline: auto;
    padding-inline: var(--lg-gut, var(--gut, clamp(1.25rem, 4.5vw, 4rem)));
    padding-block: 1.5rem 4rem;
    color: var(--lg-ink);
}
.lg-wrap * { box-sizing: border-box; }

/* Konfigurators pats pārzīmējas biežāk nekā parasta lapa, tāpēc izolējam tā
   izkārtojumu no pārējās lapas. Bez tā katra jauna sadaļa liek pārlūkam
   pārrēķināt visu dokumentu, un tēmas animācijas var to pamanīt kā izmēru
   maiņu. `contain` neietekmē izskatu, tikai to, cik tālu sniedzas pārrēķins. */
.lg-grid, .lg-card, .lg-panelis { contain: layout style; }
.lg-head { margin-bottom: 1.5rem; }
.lg-h1   { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .4rem; line-height: 1.15; }
/* Bez platuma ierobežojuma: teksts ir viena teikuma gara, un 60ch to lauza
   divās rindās bez iemesla. */
.lg-lead { color: var(--lg-muted); margin: 0; }

/* Abas slejas ir noteiktas skaidri, tāpēc labā paliek rezervēta arī tad, kad
   cenas panelis vēl ir paslēpts — kreisā puse neizpletās un pēc tam nesaraujas. */
.lg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: var(--lg-gap);
    align-items: start;
    width: 100%;
}
.lg-kol--sanu { position: sticky; top: var(--lg-sticky-top, 96px); }

@media (max-width: 900px) {
    .lg-grid { grid-template-columns: 1fr; }
    .lg-kol--sanu { position: static; }
}

.lg-card {
    background: var(--lg-card);
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    padding: 1.35rem;
    margin-bottom: var(--lg-gap);
}
/* Sadaļas mala. Konstrukcijas sadaļai agrāk bija sava izteiktāka mala, bet
   pārējām nekas, tāpēc pāreja no vienas uz otru izskatījās nejauša. Tagad
   visām atvērtajām sadaļām ir viena un tā pati akcenta svītra kreisajā malā. */
.lg-wrap section[data-solis] { border-left: 1px solid var(--lg-accent); }
.lg-card--akcents { border-color: var(--lg-line); border-width: 1px; }
.lg-card--ok      { border-color: var(--lg-ok); }

.lg-h2 { font-size: 1.0625rem; margin: 0 0 1.1rem; font-weight: 600; }
.lg-h3 { font-size: .9375rem; margin: 1.6rem 0 .6rem; font-weight: 600; }
.lg-h4 { font-size: .875rem; margin: 1.3rem 0 .5rem; font-weight: 600; }
.lg-etikete { font-size: .8125rem; color: var(--lg-etikete); font-weight: 500; margin: 1rem 0 .45rem; }
.lg-etikete:first-child { margin-top: 0; }
.lg-piez { font-size: .8125rem; color: var(--lg-muted); margin: .65rem 0 0; line-height: 1.55; }
.lg-piez--akcents { color: var(--lg-accent); }
.lg-piez--bulta::before { content: "↓ "; }
.lg-brid { font-size: .8125rem; color: var(--lg-warn); margin: .6rem 0 0; line-height: 1.55; }
.lg-note { padding: 2rem; text-align: center; color: var(--lg-muted); }

/* ── Pogas ─────────────────────────────────────────────────────────────── */

.lg-pogas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.lg-pogas + .lg-pogas,
.lg-pogas + .lg-saraksts,
.lg-saraksts + .lg-pogas { margin-top: .85rem; }
.lg-pogas--2  { grid-template-columns: repeat(2, 1fr); }
.lg-pogas--3  { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .lg-pogas--3 { grid-template-columns: 1fr; } }
.lg-pogas--sm { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
/* Blakus, ne zem: divas īsas pogas nedrīkst krist viena zem otras. */
.lg-pogas--rinda { display: flex; flex-wrap: wrap; gap: .6rem; }
.lg-pogas--rinda .lg-poga { flex: 0 1 auto; }

/* Pogas augstums vienāds rindā, lai divrindu teksts nelauž izkārtojumu. */
.lg-poga {
    appearance: none;
    font: inherit;
    font-size: .8125rem;
    line-height: 1.45;
    text-align: left;
    color: inherit;
    background: var(--lg-paper);
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    padding: .65rem .75rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease,
                background-color .15s ease;
}

/* Viens un tas pats hover visur, kur var izvēlēties: pacēlums un viegla ēna.
   Bez tā vienās vietās izvēle jūtas dzīva, citās nekustīga, un lietotājam
   katrā sadaļā jāmācās no jauna, kas te ir spiežams. */
.lg-poga:hover:not([disabled]) {
    border-color: var(--lg-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.lg-poga:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.lg-poga[aria-pressed="true"] {
    border-color: var(--lg-accent);
    background: var(--lg-paper-2);
    font-weight: 600;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 20%, transparent);
}
.lg-poga[disabled] { opacity: .4; cursor: not-allowed; }
.lg-poga small { display: block; color: var(--lg-muted); font-weight: 400; }
.lg-poga--ikona { text-align: center; padding: .3rem .55rem; min-width: 2rem; }

.lg-saraksts { display: grid; gap: .5rem; }
.lg-saraksts .lg-poga { display: block; width: 100%; }
.lg-saraksts .lg-poga span { display: flex; justify-content: space-between; gap: .5rem; }

/* ── Toņu palete ───────────────────────────────────────────────────────── */

.lg-toni { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.lg-tonis {
    width: 34px; height: 34px; padding: 0;
    border-radius: 6px;
    border: 1px solid var(--lg-line);
    cursor: pointer;
}
.lg-tonis {
    transition: transform .15s ease, box-shadow .15s ease;
}
.lg-tonis:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}
.lg-tonis[aria-pressed="true"] {
    outline: 2px solid var(--lg-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 20%, transparent);
}
/* Agrāk šeit bija "+", ko varēja saprast kā "pievienot vēl toni". Tā ir
   izvēle no ražotāja pilnās paletes, tāpēc tā arī jāraksta. */
.lg-tonis--cits {
    width: auto;
    padding: 0 .6rem;
    background: transparent;
    border-style: dashed;
    color: var(--lg-muted);
    font-size: .75rem;
    line-height: 1;
    white-space: nowrap;
}
.lg-tonis--cits[aria-pressed="true"] { color: var(--lg-accent); border-style: solid; }
.lg-toni[data-atslegts="1"] { opacity: .35; pointer-events: none; }

/* ── Izmēri ────────────────────────────────────────────────────────────── */

.lg-divi   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* Vertikāli un horizontāli ir viens jautājums divās daļās, tāpēc tie stāv
   blakus, nevis viens zem otra. */
.lg-divi--skaiti { gap: 1rem; align-items: start; }
.lg-divi--skaiti .lg-rinda { margin: 0; gap: .5rem; }
@media (max-width: 520px) { .lg-divi--skaiti { grid-template-columns: 1fr; } }
.lg-rinda  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .9rem 0; }
.lg-izmers { display: flex; align-items: center; gap: .65rem; margin: .8rem 0; }
.lg-izmers label { font-size: .8125rem; color: var(--lg-etikete); font-weight: 500; min-width: 5.5rem; }
.lg-izmers input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--lg-accent); }
.lg-izmers input[type="number"] { width: 5.5rem; text-align: right; }
.lg-izmers output { font-size: .8125rem; min-width: 4.5rem; text-align: right; }

input[type="number"], input[type="text"], input[type="email"], input[type="tel"], textarea {
    font: inherit;
    font-size: .875rem;
    color: inherit;
    background: var(--lg-paper);
    border: 1px solid var(--lg-line);
    border-radius: 8px;
    padding: .4rem .55rem;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 1px; }

.lg-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; margin: .6rem 0 0; line-height: 1.5; }
.lg-check input { margin-top: .15rem; accent-color: var(--lg-accent); }
.lg-slepts { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Konstrukcijas skice ───────────────────────────────────────────────── */

.lg-skati { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-start; margin: 1rem 0 .75rem; }
.lg-skati figure { margin: 0; text-align: center; }
.lg-skati figcaption { font-size: .75rem; color: var(--lg-etikete); margin-top: .35rem; }
.lg-skati svg { display: block; }
.lg-skati [data-sekcija] { cursor: pointer; }
.lg-merogs { font-size: .75rem; color: var(--lg-muted); text-align: center; margin: .2rem 0; }

/* ── Darbi ─────────────────────────────────────────────────────────────── */

.lg-darbi { margin-top: .85rem; }
.lg-darbs { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; font-size: .875rem; }
.lg-darbs span:first-of-type { flex: 1; }
.lg-darbs .lg-cena-mini { color: var(--lg-muted); font-size: .8125rem; }
.lg-darbs .lg-bezmaksas { color: var(--lg-ok); font-size: .8125rem; }
.lg-darbs--obligats { color: var(--lg-muted); }

/* ── Cenas panelis ─────────────────────────────────────────────────────── */

.lg-panelis {
    background: var(--lg-card);
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    padding: .9rem;
    margin-bottom: var(--lg-gap);
}
.lg-panelis-etik { font-size: .75rem; color: var(--lg-etikete); margin: 0 0 .2rem; }
.lg-cena { font-size: 1.35rem; font-weight: 600; margin: 0 0 .1rem; line-height: 1.15; }

.lg-rindas { display: grid; grid-template-columns: 1fr auto; gap: .2rem 0; margin: .75rem 0 0;
             padding-top: .7rem; border-top: 1px solid var(--lg-line); font-size: .8125rem; }
.lg-rindas dt:not(.lg-kopa), .lg-rindas dd:not(.lg-kopa) { padding-top: .1rem; padding-bottom: .1rem; }
.lg-rindas dt { color: var(--lg-etikete); }
.lg-rindas dd { margin: 0; text-align: right; }
.lg-rindas .lg-atlaide { color: var(--lg-ok); }

.lg-statuss { font-size: .8125rem; margin: .6rem 0 0; }
.lg-statuss--ok   { color: var(--lg-ok); }
.lg-statuss--brid { color: var(--lg-warn); }

.lg-cta {
    display: block; width: 100%;
    font: inherit; font-size: .9375rem; font-weight: 600;
    color: var(--lg-accent-ink); background: var(--lg-accent);
    border: 1px solid var(--lg-accent); border-radius: var(--lg-radius);
    padding: .7rem 1rem; margin-top: .75rem;
    cursor: pointer;
}
.lg-cta:hover { filter: brightness(1.08); }
.lg-cta:focus-visible { outline: 2px solid var(--lg-ink); outline-offset: 2px; }
.lg-cta[disabled] { opacity: .5; cursor: not-allowed; }
.lg-cta--klusa { background: transparent; color: var(--lg-ink); border-color: var(--lg-line); font-weight: 400; }
.lg-cta--pilns { margin-bottom: var(--lg-gap); }

/* ── Grozs ─────────────────────────────────────────────────────────────── */

.lg-grozs { list-style: none; margin: 0; padding: 0; }
.lg-grozs li { display: flex; align-items: center; gap: .4rem; padding: .5rem 0;
               border-bottom: 1px solid var(--lg-line); font-size: .8125rem; }
.lg-grozs .lg-poz-nos { flex: 1; line-height: 1.4; }
.lg-grozs .lg-poz-cena { color: var(--lg-muted); }
.lg-grozs input[type="text"] { width: 100%; font-size: .8125rem; padding: .2rem .35rem;
                               border-color: transparent; background: transparent; }
.lg-grozs input[type="text"]:hover { border-color: var(--lg-line); }

#lgSerijasBlok { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--lg-line); }

/* ── Sēriju kartītes ───────────────────────────────────────────────────── */

.lg-kartites { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; margin-top: 1rem; }

/* Kartīte ir viena poga: skice pa kreisi, teksts pa labi. Skice palīdz
   atpazīt izstrādājumu ātrāk nekā nosaukums un milimetri. */
.lg-kartite {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem .8rem;
}
.lg-kartite-skice {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    min-height: 48px;
}
.lg-kartite-teksts { flex: 1; min-width: 0; line-height: 1.4; }
.lg-kartite-teksts small { display: block; color: var(--lg-muted); font-weight: 400; }

/* ── Pieteikuma forma ──────────────────────────────────────────────────── */

.lg-lauki { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lg-lauki label { display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; color: var(--lg-etikete); font-weight: 500; }
.lg-lauki input, .lg-lauki textarea { color: var(--lg-ink); }
.lg-lauks--pilns { grid-column: 1 / -1; }
@media (max-width: 600px) { .lg-lauki, .lg-divi { grid-template-columns: 1fr; } }

.lg-links { display: block; word-break: break-all; font-size: .75rem;
            background: var(--lg-paper-2); padding: .5rem; border-radius: 8px; margin-top: .3rem; }

@media (prefers-reduced-motion: reduce) {
    .lg-poga, .lg-cta, .lg-tonis, .lg-paraugs, .lg-kartite--cena { transition: none; }
    .lg-poga:hover, .lg-tonis:hover, .lg-paraugs:hover, .lg-kartite--cena:hover {
        transform: none;
    }
}

/* ── Paziņojums pēc pievienošanas ──────────────────────────────────────────
   Parādās lapas augšā, jo grozs ir sānu panelī un pēc garas ritināšanas to
   nepamana. Ikona un poga padara to par darbību, ne par teksta rindiņu. */

.lg-pazinojums {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--lg-card);
    border: 1px solid var(--lg-ok);
    border-radius: var(--lg-radius);
    padding: 1rem 1.1rem;
    margin-bottom: var(--lg-gap);
    font-size: .9375rem;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.lg-pazinojums-ikona {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lg-ok);
    color: #fff;
}
.lg-pazinojums-teksts { flex: 1; min-width: 12rem; }
.lg-pazinojums-teksts strong { display: block; color: var(--lg-ok); }
.lg-pazinojums-teksts span   { color: var(--lg-muted); font-size: .875rem; }
/* .lg-cta ir pilna platuma bloks, jo parasti stāv panelī viens pats. Rindā ar
   tekstu tas jāatgriež savā dabiskajā platumā, citādi poga izstiepjas un
   izkārtojums saļimst. */
.lg-pazinojums-poga {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .lg-pazinojums { flex-wrap: wrap; }
    .lg-pazinojums-poga { width: 100%; text-align: center; }
}

/* "Pievienots grozam" ir peldošs paziņojums, ne parasta rindas elements —
   tas nedrīkst pabīdīt "Ar ko sākt" bloku, kuram jāpaliek vienmēr pirmajam.
   Fiksēts virs lapas satura, necaurspīdīgs fons, augsts z-index. Novietojums
   ņem vērā tēmas lipīgo galveni (--lg-sticky-top), lai nepārklātos ar to. */
.lg-pazinojums--peldosa {
    position: fixed;
    top: calc(var(--lg-sticky-top, 0px) + .75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: min(100% - 2rem, 640px);
    margin-bottom: 0;
}
@media (max-width: 560px) {
    .lg-pazinojums--peldosa { width: calc(100% - 1.5rem); }
}


/* ── "Turpināt" katras sadaļas apakšā ──────────────────────────────────────
   Sadaļas atveras arī pēc jebkuras izvēles, bet daudzviet klients neko negrib
   mainīt. Skaidra poga pa labi pasaka, ka var iet tālāk. */

.lg-solis-beigas {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--lg-line);
}
.lg-turpinat {
    font-weight: 600;
    color: var(--lg-accent);
    border-color: var(--lg-accent);
    text-align: center;
}
.lg-turpinat:hover { background: var(--lg-paper-2); }

/* ── Ikonas un attēli pogās ────────────────────────────────────────────────
   Ikona palīdz atpazīt izvēli ar acu kaktiņu, nelasot katru pogu no jauna. */

.lg-poga--ikonots {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.lg-poga--ikonots .lg-ikona { flex: 0 0 auto; color: var(--lg-muted); }
.lg-poga[aria-pressed="true"] .lg-ikona { color: var(--lg-accent); }
.lg-poga-teksts { flex: 1; min-width: 0; }
.lg-poga-teksts small { display: block; color: var(--lg-muted); font-weight: 400; }

/* Profila šķērsgriezums zem sistēmas nosaukuma */
.lg-poga-zim { display: block; width: 100%; margin-top: .6rem; }
.lg-poga-zim svg { display: block; width: 100%; height: auto; }

/* Skaitītājs turpat rindā ar atzīmi — bez atsevišķas rindas zemāk */
.lg-skaititajs {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .25rem;
}
.lg-skaititajs input[type="number"] { width: 3.4rem; text-align: center; padding: .2rem .3rem; }
.lg-skaititajs .lg-poga--ikona { padding: .15rem .45rem; }
.lg-skaititajs .lg-mv { color: var(--lg-muted); font-size: .8125rem; }

/* Balts vienmēr ir pirmais paraugs paletē */
.lg-toni .lg-tonis:first-child { box-shadow: inset 0 0 0 1px var(--lg-line); }

/* Profila šķērsgriezuma attēls zem sistēmas nosaukuma */
.lg-profila-att {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: var(--lg-paper-2);
}

/* ── Groza pozīcijas detaļas ───────────────────────────────────────────────
   Grozā ir tikai izmērs un cena, bet atgriežoties pie saglabāta piedāvājuma
   klients grib pārbaudīt, ko tieši pasūta. Detaļas ir aizvērtas pēc
   noklusējuma, lai grozs paliek īss. */

.lg-poz-galva { display: flex; align-items: center; gap: .5rem; width: 100%; }
.lg-poz-skice { flex: 0 0 auto; display: flex; align-items: center; width: 40px; }
.lg-poz-skice svg { width: 100%; height: auto; }
.lg-poz-sk { min-width: 1.2rem; text-align: center; }
.lg-grozs li { display: block; }

.lg-poz-vairak { margin-top: .4rem; }
.lg-poz-vairak summary {
    cursor: pointer;
    font-size: .75rem;
    color: var(--lg-accent);
    list-style: none;
}
.lg-poz-vairak summary::-webkit-details-marker { display: none; }
.lg-poz-vairak summary::before { content: "▸ "; }
.lg-poz-vairak[open] summary::before { content: "▾ "; }

.lg-poz-detalas {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .5rem;
    align-items: baseline;
    margin: .5rem 0 .2rem;
    font-size: .75rem;
    line-height: 1.45;
}
.lg-poz-detalas dt { color: var(--lg-etikete); }
.lg-poz-detalas dd { margin: 0; }

/* ── Skatu pāreja ──────────────────────────────────────────────────────────
   Konfigurēšana → piedāvājums → paldies. Pāreju vada View Transitions API;
   šie nosaukumi pasaka pārlūkam, kuri elementi ir "tie paši" abās pusēs,
   lai grozs no sānu paneļa pāraug pilna platuma sarakstā, nevis pazūd un
   parādās no jauna. Pārlūkos bez atbalsta viss darbojas, tikai bez kustības. */

.lg-wrap                { view-transition-name: lg-wrap; }
#lgGrozsBlok, #lgGrozsPilns { view-transition-name: lg-grozs; }
#lgForma2               { view-transition-name: lg-forma; }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(lg-grozs),
    ::view-transition-new(lg-grozs) { animation-duration: .35s; }
}

/* Pilnā platuma grozs pie piedāvājuma */
.lg-grozs-galva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.lg-grozs-galva .lg-h2 { margin: 0; }
.lg-grozs--plats .lg-poz-skice { width: 52px; }
.lg-grozs--plats .lg-poz-detalas { grid-template-columns: 10rem 1fr; font-size: .8125rem; }
.lg-rindas--plats { max-width: 26rem; margin-left: auto; }

/* Obligātā piekrišana */
.lg-obligats { color: var(--lg-warn); }
.lg-check--kluda { color: var(--lg-warn); }
.lg-check--kluda input { outline: 2px solid var(--lg-warn); outline-offset: 2px; }

/* Sinhronizācijas ķeksis un termiņa paskaidrojums vienā rindā — tie runā par
   vienu un to pašu izvēli, tāpēc nav vērts tērēt divas rindas. */
.lg-krasas-apakša {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.lg-krasas-apakša .lg-check { margin: 0; }
.lg-krasas-apakša .lg-piez  { margin: 0; text-align: right; }
@media (max-width: 560px) {
    .lg-krasas-apakša { flex-direction: column; align-items: flex-start; }
    .lg-krasas-apakša .lg-piez { text-align: left; }
}

/* Stiklu paketes divās kolonnās — sarakstā to ir līdz deviņām */
.lg-saraksts--2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Paziņojums par jau iesniegtu piedāvājumu */
.lg-pazinojums--info { border-color: var(--lg-accent); }
.lg-pazinojums--info .lg-pazinojums-teksts strong { color: var(--lg-accent); }

.lg-poz-telpa { display: block; font-weight: 600; }
.lg-piez--brid { color: var(--lg-warn); }

/* Labošanas režīms: skaidri redzams, ka izmaiņas iet esošajā pozīcijā */
.lg-pazinojums--labo { border-color: var(--lg-warn); }
.lg-pazinojums--labo .lg-pazinojums-teksts strong { color: var(--lg-warn); }
.lg-poz-labot { padding: .3rem .6rem; font-size: .75rem; white-space: nowrap; }

/* Apstiprinājums ir tas pats paziņojums, tikai lielāks — klients to jau
   pazīst no "Pievienots grozam", un divi dažādi veidoli tam pašam nozīmētu
   divas reizes mācīties vienu un to pašu. */
.lg-pazinojums--liels { padding: 1.25rem 1.35rem; }
.lg-pazinojums--liels .lg-pazinojums-ikona { width: 46px; height: 46px; }
.lg-pazinojums--liels .lg-pazinojums-ikona svg { width: 30px; height: 30px; }
.lg-pazinojums--liels .lg-pazinojums-teksts strong { font-size: 1.0625rem; }

/* Labošanas poga sānu panelī ir šaura — tur vietas ir maz */
.lg-grozs .lg-poz-labot { padding: .25rem .45rem; }

/* ── Lauku kļūdas ──────────────────────────────────────────────────────────
   Paziņojums stāv pie sava lauka, nevis formas augšā. Sarkanā krāsa nav
   vienīgā pazīme — ir arī teksts un rāmis, tāpēc tas strādā arī tiem, kas
   krāsas neatšķir. */

.lg-lauka-kluda {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    line-height: 1.4;
    color: #9a2b25;
}
.lg-lauka-kluda::before { content: "▲ "; font-size: .65rem; }
.lg-lauki label.lg-lauks--kluda input,
.lg-lauki label.lg-lauks--kluda textarea { border-color: #9a2b25; }
.lg-lauki label.lg-lauks--kluda input:focus-visible { outline-color: #9a2b25; }


/* Stiklu kategorijas: četras vienā rindā, vienāda platuma daļas */
.lg-pogas--kat .lg-poga { flex: 1 1 auto; text-align: center; }

/* Divi bloki: loga cena un papildus izmaksas. Katra bloka virsraksts ir tā
   kopsumma, atdalīta ar līniju, un zem tā — no kā tā sastāv. */
/* ── Cenas sadalījums ──────────────────────────────────────────────────────
   Vienādi izskatošos rindu sarakstā nevar saprast, kas ir kopsumma un kas ir
   tās sastāvdaļas. Tāpēc kopsummas rinda ir ar fonu un treknu druku, bet
   sastāvdaļas zem tās ir atkāptas un klusākas — hierarhija redzama uzreiz,
   arī neizlasot.

   Noteikumi attiecas gan uz sānu paneli (.lg-rindas), gan groza pozīciju
   (.lg-poz-cenas). Agrāk tie bija piesaistīti tikai panelim, tāpēc grozā
   nekas no tā neuzklājās un visas rindas izskatījās vienādas. */

/* Bloku virsraksti — treknāki un ar līniju zem, bez fona. Fons paliek tikai
   gala summai, lai acs uzreiz atrod to vienu skaitli, kas ir svarīgākais. */
.lg-rindas .lg-kopa,
.lg-poz-cenas .lg-kopa {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--lg-ink);
    padding: .35rem 0 .3rem;
    border-bottom: 1px solid var(--lg-line);
}

/* Sastāvdaļas zem kopsummas — atkāptas, lai redzams, ka tās pieder tai */
.lg-rindas dt:not(.lg-kopa),
.lg-poz-cenas dt:not(.lg-kopa) { padding-left: .75rem; }

.lg-rindas .lg-kopa--otra,
.lg-poz-cenas .lg-kopa--otra { margin-top: .9rem; }

/* Gala summa paliek uz tā paša pelēkā fona: akcenta krāsa ir pogām un
   apstiprinājumam, un summa nav ne viens, ne otrs. Tā izceļas ar izmēru un
   augšējo līniju, ne ar krāsu. */
.lg-rindas .lg-kopa--gala,
.lg-poz-cenas .lg-kopa--gala {
    margin-top: .9rem;
    font-size: 1rem;
    background: var(--lg-paper-2);
    padding: .45rem .5rem;
    border-bottom: 0;
    border-top: 2px solid var(--lg-line);
}
.lg-rindas dt.lg-kopa--gala,
.lg-poz-cenas dt.lg-kopa--gala { border-radius: 6px 0 0 6px; }
.lg-rindas dd.lg-kopa--gala,
.lg-poz-cenas dd.lg-kopa--gala { border-radius: 0 6px 6px 0; }

/* Cenas sadalījums groza pozīcijā — atdalīts no konfigurācijas apraksta */
.lg-poz-cenas {
    grid-template-columns: 1fr auto;
    gap: .15rem 0;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--lg-line);
}
.lg-poz-cenas dd { text-align: right; }
.lg-poz-cenas dd:not(.lg-kopa) { padding-top: .1rem; padding-bottom: .1rem; }

/* ── Sērijas kartīte ar cenu ───────────────────────────────────────────────
   Klients grib redzēt ciparu, pirms atver konfiguratoru. Kartīte tāpēc rāda
   pilnu sadalījumu un pogu, ar ko pievienot uzreiz. */

.lg-kartite--cena {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: var(--lg-paper);
}
/* Aktīvā kartīte: viena pikseļa krāsas maiņa pazuda pilnīgi. Tagad tā ir
   biezāka mala, akcenta ēna un neliels pacēlums — trīs pazīmes vienlaikus,
   tāpēc to redz arī ar acs kaktiņu un arī tad, ja krāsas neatšķir. */
/* Visa kartīte ir klikšķināma, tāpēc tai jāizskatās klikšķināmai: kursors,
   pacēlums pie hover un skaidrs stāvoklis, kad tā ir izvēlēta. Mala paliek
   viena pikseļa bieza — biezāka lēkāja izkārtojumā. */
.lg-kartite--cena {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lg-kartite--cena:hover {
    border-color: var(--lg-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.lg-kartite--akt {
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 20%, transparent),
                0 4px 14px rgba(0, 0, 0, .10);
}

.lg-kart-galva {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
}

.lg-kart-cenas {
    display: block;
    padding-top: .5rem;
    border-top: 1px solid var(--lg-line);
    font-size: .75rem;
    line-height: 1.5;
}
.lg-kart-rinda { display: flex; justify-content: space-between; gap: .5rem; }
.lg-kart-rinda > span:first-child { color: var(--lg-muted); }
.lg-kart-kopa {
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: 1px solid var(--lg-line);
    font-weight: 600;
    font-size: .8125rem;
}
.lg-kart-kopa > span:first-child { color: var(--lg-ink); }
.lg-kart-gaida { color: var(--lg-muted); font-style: italic; }
.lg-kart-poga { margin-top: 0; padding: .5rem .75rem; font-size: .8125rem; }

/* Kartīšu kolonnu skaits nāk no --lg-kolonnas, ko uzstāda JS pēc kartīšu
   skaita. auto-fit vien deva 4+1 vai 5+1 sadalījumu, kur pēdējā rinda ir gandrīz
   tukša — sešiem logiem 3+3 izskatās kārtīgāk nekā 4+2 ar platu tukšumu. */
.lg-kartites {
    grid-template-columns: repeat(var(--lg-kolonnas, 3), minmax(0, 1fr));
    justify-content: start;
}
@media (max-width: 900px) { .lg-kartites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lg-kartites { grid-template-columns: 1fr; } }

/* ── Konstrukciju paraugi ──────────────────────────────────────────────────
   Biežākās kombinācijas kā gatavi paraugi ar skici — salikt pa vienai daļai
   ir lieks darbs tam, kurš grib parastu divdaļīgu logu. */

.lg-paraugi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}
.lg-paraugs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .5rem .6rem;
    font: inherit;
    font-size: .75rem;
    line-height: 1.3;
    color: inherit;
    text-align: center;
    background: var(--lg-paper);
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    cursor: pointer;
}
.lg-paraugs {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lg-paraugs:hover {
    border-color: var(--lg-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.lg-paraugs:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.lg-paraugs[aria-pressed="true"] {
    border-color: var(--lg-accent);
    background: var(--lg-paper-2);
    font-weight: 600;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 20%, transparent);
}
.lg-paraugs-skice { display: flex; align-items: center; justify-content: center; height: 40px; }
.lg-paraugs-skice svg { max-height: 40px; width: auto; }
.lg-paraugs-nos { max-width: 8rem; }

/* Divas pogas kartītes apakšā */
.lg-kart-pogas { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.lg-kart-pogas .lg-poga { text-align: center; padding: .5rem .6rem; font-size: .8125rem; }
@media (max-width: 420px) { .lg-kart-pogas { grid-template-columns: 1fr; } }

/* ── Izcelts paskaidrojums ─────────────────────────────────────────────────
   Sērijas arhīva piezīme ir svarīgāka par parastu palīgtekstu — tā pasaka,
   kāpēc izmēri tālāk ir fiksēti. Gaišs fons un kreisā mala, ne tikai treknāks
   teksts. */
.lg-piez--iezimets {
    padding: .6rem .75rem;
    background: var(--lg-paper-2);
    border-left: 3px solid var(--lg-accent);
    border-radius: 0 6px 6px 0;
}
.lg-piez--iezimets strong { color: var(--lg-ink); }

/* Specifikācijas poga tagad ir viena no trim kolonnām, ne atsevišķa pilna
   platuma rinda — pielāgo tikai izkārtojumu iekšpusē, ne platumu. */
.lg-start-spec { text-align: left; }

/* Faila augšupielādes lauks */
.lg-fails {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .75rem;
    border: 1px dashed var(--lg-line);
    border-radius: var(--lg-radius);
    cursor: pointer;
    font-size: .8125rem;
    color: var(--lg-muted);
    transition: border-color .15s ease;
}
.lg-fails:hover { border-color: var(--lg-accent); }
.lg-fails input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }