/* =====================================================================
   kassa.css - kassan (cart.jsp), ombyggd 2026-10-17, och sedan samma dag
   aven kontosidorna, offert och kontakt (se avsnittet sist).

   Laddas av de sidorna, inte globalt. Bygger pa tokens.css. Tva kolumner pa
   skrivbord (formularet till vanster, summeringen klistrad till hoger),
   en kolumn pa telefon i ordningen varor -> summering -> uppgifter ->
   leverans -> betalning -> skicka.

   Rutnatets omraden ar namngivna, for kallkodens ordning ar bunden av
   proven (se kommentaren overst i cart.jsp) medan den visuella ordningen
   inte ar det.
   ===================================================================== */

.kassa {
    container-type: inline-size;
    --kassa-accent: var(--ws-color-primary, #0ea5e9);
    --kassa-accent-mork: var(--ws-color-primary-hover, #0284c7);
    --kassa-fel: #b91c1c;
    --kassa-text-svag: #4b5563;
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 0 40px;
    color: var(--ws-color-text, #1f2937);
    font-size: 15px;
    line-height: 1.45;
}
.kassa [hidden] { display: none !important; }

.kassa-topp {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 8px 24px; margin-bottom: 12px;
}
.kassa-topp h1 { margin: 0; font-size: 1.75rem; }
.kassa-konto { color: var(--kassa-text-svag); }

.kassa-besked:empty { display: none; }
.kassa-besked {
    border: 1px solid #fca5a5; background: #fef2f2; color: var(--kassa-fel);
    border-radius: var(--ws-radius-md, 8px); padding: 10px 14px; margin-bottom: 12px;
}

/* --- Rutnatet ---------------------------------------------------------- */
.kassa-rutnat {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "varor" "sida" "uppgifter" "valen" "avslut";
    gap: 16px 24px;
    align-items: start;
}
.kassa-varor      { grid-area: varor; }
.kassa-sida       { grid-area: sida; }
.kassa-uppgifter  { grid-area: uppgifter; }
.kassa-valen      { grid-area: valen; display: grid; gap: 16px; }
.kassa-avslut     { grid-area: avslut; }
.kassa-tom        { grid-template-columns: minmax(0, 1fr); grid-template-areas: "varor"; }

/* TVA KOLUMNER BARA NAR KASSAN SJALV AR BRED. Sajtens vanstermeny och ikonkolumn
   tar plats, sa vid 1280px fonster ar kassan bara ~770px - matt 2026-10-17, och
   med summeringen bredvid klipptes varutabellen. Samma skal som artikellistans
   container queries (CLAUDE.md, 2 okt): fonstrets bredd sager inget har. */
.kassa-sida { position: static; }
@container (min-width: 940px) {
    .kassa-rutnat {
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-areas:
            "varor     sida"
            "uppgifter sida"
            "valen     sida"
            "avslut    sida";
    }
    .kassa-sida { position: sticky; top: 16px; }
}

/* --- Korten ------------------------------------------------------------ */
.kassa-kort {
    background: var(--ws-color-surface, #fff);
    border: 1px solid var(--ws-color-border, #ddd);
    border-radius: var(--ws-radius-md, 8px);
    box-shadow: var(--ws-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    padding: 18px 20px;
    min-width: 0;
}
.kassa-kort h2 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px; font-size: 1.15rem;
}
.kassa-steg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--kassa-accent); color: #fff; font-size: .85rem; font-weight: 700;
    flex: none;
}
.kassa-ingress, .kassa-not { color: var(--kassa-text-svag); margin: 0 0 12px; font-size: .9rem; }
.kassa-not:last-child { margin-bottom: 0; }

/* --- Varorna ----------------------------------------------------------- */
#korgrader { border-collapse: collapse; width: 100%; }
#korgrader td { padding: 10px 6px; border-bottom: 1px solid var(--ws-color-border, #ddd); vertical-align: middle; }
#korgrader tr:last-child td { border-bottom: 0; }
#korgrader .korg-rubrik td {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--kassa-text-svag); padding-top: 0;
}
#korgrader img[title="Radera"], #korgrader img[src*="trash"] { cursor: pointer; opacity: .7; }
#korgrader img[title="Radera"]:hover, #korgrader img[src*="trash"]:hover { opacity: 1; }
.kassa-tomtext { padding: 18px 0 !important; font-size: 1.05rem; }
.kassa-fortsatt { margin: 12px 0 0; }
.kassa-dold-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Under en uppdatering: htmx satter htmx-request pa formularet. */
#mf.htmx-request #korgrader,
#mf.htmx-request #korg-summering,
#mf.htmx-request #betalval { opacity: .55; transition: opacity .15s; }

/* --- Summeringen ------------------------------------------------------- */
/* Varje rad ar "Etikett <span>tal</span> SEK" - tre anonyma eller riktiga
   rutnatsceller. Strukturen ar bunden av proven, se cart.jsp. */
.kassa-summarad {
    display: grid; grid-template-columns: 1fr auto auto; column-gap: 4px;
    align-items: baseline; padding: 4px 0;
}
.kassa-summarad .korg-belopp { text-align: right; font-variant-numeric: tabular-nums; }
.kassa-total {
    border-top: 1px solid var(--ws-color-border, #ddd);
    margin-top: 8px; padding-top: 12px; font-size: 1.2rem; font-weight: 700;
}
.kassa-summa .kassa-not { margin-top: 10px; }
.korg-frifrakt b { color: var(--ws-color-success, #15803d); }

/* --- Falten ------------------------------------------------------------ */
.kassa-faltrutnat {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
}
.kassa-falt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kassa-falt-hel, .kassa-faltrutnat > .kassa-falt-hel { grid-column: 1 / -1; }
.kassa-levfalt, .kassa-extra {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
}
.kassa-extra > summary { grid-column: 1 / -1; cursor: pointer; color: var(--kassa-accent-mork); }
.kassa-levfalt {
    border-left: 3px solid var(--kassa-accent); padding-left: 14px;
}
@media (max-width: 560px) {
    .kassa-faltrutnat, .kassa-levfalt, .kassa-extra { grid-template-columns: minmax(0, 1fr); }
    .kassa-kort { padding: 14px; }
}

.kassa label { font-weight: 600; font-size: .95rem; }
.kassa input[type=text], .kassa input[type=email], .kassa input[type=tel],
.kassa select, .kassa textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; /* 16px: iOS zoomar annars */
    padding: 10px 12px; min-height: 44px;
    border: 1px solid #c4c9d0; border-radius: 6px; background: #fff; color: inherit;
}
.kassa textarea { min-height: 80px; resize: vertical; }
.kassa input:focus, .kassa select:focus, .kassa textarea:focus {
    outline: none; border-color: var(--kassa-accent);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .25);
}
.kassa .kassa-adr2 { margin-top: 6px; }
.kassa .kassa-fel { border-color: var(--kassa-fel); box-shadow: 0 0 0 1px var(--kassa-fel); }
.kassa-feltext { color: var(--kassa-fel); font-size: .85rem; }
.kassa-hjalp { color: var(--kassa-text-svag); font-size: .85rem; }

.kassa-kryss {
    display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; cursor: pointer;
}
.kassa-kryss input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--kassa-accent); }

/* --- Valen (leverans och betalning) ----------------------------------- */
.kassa-alternativ { display: grid; gap: 10px; margin-bottom: 12px; }
.kassa-val {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px;
    align-items: center; padding: 12px 14px; cursor: pointer;
    border: 1px solid #c4c9d0; border-radius: var(--ws-radius-md, 8px); background: #fff;
    font-weight: 400 !important;
}
.kassa-val input { grid-row: 1 / span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--kassa-accent); }
.kassa-val-namn { font-weight: 600; }
.kassa-val-text { grid-column: 2; color: var(--kassa-text-svag); font-size: .88rem; }
.kassa-val:has(input:checked) {
    border-color: var(--kassa-accent); box-shadow: 0 0 0 1px var(--kassa-accent);
    background: #f0f9ff;
}
.kassa-val-ensam { cursor: default; grid-template-columns: 1fr; }
.kassa-bricka {
    display: inline-block; margin: 2px 4px 0 0; padding: 1px 8px; font-size: .78rem; font-weight: 600;
    border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: var(--ws-color-text, #1f2937);
}
.kassa-bricka-swish { background: #e0f7ea; }
.kassa-bricka-klarna { background: #ffd8e6; }

/* --- Skicka ------------------------------------------------------------ */
.kassa-avslut .kassa-falt { margin-bottom: 14px; }
.kassa-villkor { margin-bottom: 16px; }
.kassa-skicka {
    width: 100%; min-height: 52px; border: 0; border-radius: var(--ws-radius-md, 8px);
    background: var(--kassa-accent-mork); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 700;
    cursor: pointer;
}
.kassa-skicka:hover { background: #0369a1; }
.kassa-skicka:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
.kassa-skicka:disabled { opacity: .7; cursor: progress; }

.kassa-intern { margin-top: 16px; font-size: .9rem; }

@media (max-width: 800px) {
    .kassa { padding: 8px 10px 32px; }
    .kassa-topp h1 { font-size: 1.4rem; }
}

/* =====================================================================
   KONTOSIDORNA, OFFERT OCH KONTAKT (2026-10-17)

   Johan: "Jag vill att inloggning, kontoregistrering, offereraformularet och
   orderhistorik far samma kansla." login.jsp, edit.jsp, order.jsp,
   offert.jsp och kontakt.jsp ligger i samma .kassa-skal och anvander samma
   kort, falt och knappar. Det som bara de behover star har.
   ===================================================================== */
.kassa input[type=password], .kassa input[type=number] {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
    padding: 10px 12px; min-height: 44px;
    border: 1px solid #c4c9d0; border-radius: 6px; background: #fff; color: inherit;
}
.kassa input[type=file] { font: inherit; font-size: .95rem; max-width: 100%; }

/* PA SKRIVBORD AR 16px/44px FOR STORT - faltet ser gigantiskt ut bredvid
   etiketten (Johan 2026-10-17, Namnlos3.png). 16px/44px finns for att iOS
   annars zoomar in vid fokus och for att 44px ar en pekyta; ingen av de
   reglerna galler en muspekare. pointer:fine traffar bara enheter med mus. */
@media (pointer: fine) {
    .kassa input[type=text], .kassa input[type=email], .kassa input[type=tel],
    .kassa input[type=password], .kassa input[type=number],
    .kassa select, .kassa textarea {
        font-size: 15px; min-height: 40px; padding: 8px 10px;
    }
    .konto-visa { top: 20px; } /* halva faltets 40px */
}
.kassa-besked-ok { border-color: #86efac; background: #f0fdf4; color: #166534; }
.kassa-besked a { color: inherit; font-weight: 600; }

/* Flikarna mellan kontosidorna. */
.konto-flikar {
    display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 16px;
    border-bottom: 1px solid var(--ws-color-border, #ddd);
}
.konto-flik {
    padding: 10px 14px; margin-bottom: -1px; text-decoration: none; color: var(--kassa-text-svag);
    border: 1px solid transparent; border-radius: 6px 6px 0 0; min-height: 44px; box-sizing: border-box;
    display: inline-flex; align-items: center;
}
.konto-flik:hover { color: var(--ws-color-text, #1f2937); background: #f8fafc; }
.konto-flik-aktiv {
    color: var(--ws-color-text, #1f2937); font-weight: 600; background: var(--ws-color-surface, #fff);
    border-color: var(--ws-color-border, #ddd); border-bottom-color: var(--ws-color-surface, #fff);
}
.konto-flik-ut { margin-left: auto; }

/* Formular till vanster, upplysning till hoger nar det finns plats. */
.konto-rutnat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; align-items: start; }
/* kassa-uppgifter m.fl. bar kassans namngivna rutnatsomraden - har finns de inte. */
.konto-rutnat > * { grid-area: auto; }
@container (min-width: 760px) {
    .konto-rutnat { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .konto-rutnat > :only-child { grid-column: 1 / -1; max-width: 720px; }
}
.konto-rutnat > .kassa-kort > .kassa-falt + .kassa-falt { margin-top: 14px; }
.konto-info h2 { font-size: 1.05rem; }
.konto-info p { margin: 0 0 10px; color: var(--kassa-text-svag); }
.konto-skicka { margin-top: 18px; }
@container (min-width: 760px) { .konto-skicka { width: auto; padding: 0 32px; } }
.konto-lank { margin: 14px 0 0; }

/* Knappar som inte skickar formularet (genvagar, orderhistorikens knappar). */
.kassa-knapp {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 0 18px; border-radius: var(--ws-radius-md, 8px); border: 1px solid var(--kassa-accent-mork);
    background: var(--kassa-accent-mork); color: #fff !important; font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.kassa-knapp:hover { background: #0369a1; }
.kassa-knapp-svag { background: #fff; color: var(--kassa-accent-mork) !important; }
.kassa-knapp-svag:hover { background: #f0f9ff; }
.konto-genvagar, .order-knappar { display: flex; flex-wrap: wrap; gap: 10px; }

/* Losenordet med Visa-knapp.
   Knappen forankras mot FALTETS mitt (22px = halva faltets 44px), inte mot
   rutans (top:50%): faltFel laggar felmeddelandet i samma ruta, och med 50%
   gled knappen ned till rutans mitt och sag ut att ligga i underkant
   (Johans Namnlos3.png 2026-10-17). */
.konto-losen { position: relative; }
.konto-losen input { padding-right: 72px; }
.konto-visa {
    position: absolute; right: 4px; top: 22px; transform: translateY(-50%);
    min-height: 36px; padding: 0 12px; border: 0; background: transparent;
    color: var(--kassa-accent-mork); font: inherit; font-weight: 600; cursor: pointer;
}

/* --- Orderhistoriken ---------------------------------------------------- */
.order-kort { padding: 0; margin-bottom: 12px; }
.order-huvud {
    display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 6px 14px; align-items: center;
    padding: 16px 20px; cursor: pointer; list-style: none;
}
.order-huvud::-webkit-details-marker { display: none; }
.order-huvud::after { content: "\25BE"; color: var(--kassa-text-svag); transition: transform .15s; }
.order-kort[open] > .order-huvud::after { transform: rotate(180deg); }
.order-nr { font-weight: 700; }
.order-datum { color: var(--kassa-text-svag); font-variant-numeric: tabular-nums; }
.order-summa { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.order-status {
    justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: #f1f5f9; color: #334155;
}
.order-status-klar { background: #dcfce7; color: #166534; }
.order-status-fel { background: #fee2e2; color: #991b1b; }
.order-status-vantar { background: #e0f2fe; color: #075985; }
.order-innehall { padding: 0 20px 18px; border-top: 1px solid var(--ws-color-border, #ddd); }
.order-rader { width: 100%; border-collapse: collapse; margin: 12px 0; }
.order-rader th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--kassa-text-svag); font-weight: 600; }
.order-rader th, .order-rader td { padding: 8px 6px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.order-rader .korg-belopp { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-kod { white-space: nowrap; }
.order-text td { color: var(--kassa-text-svag); font-style: italic; }
.order-summering { max-width: 320px; margin-left: auto; }
.order-adresser { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin: 16px 0; }
.order-adresser h3, .order-meddelande h3 { margin: 0 0 4px; font-size: .9rem; }
.order-adresser p, .order-meddelande p { margin: 0; }
.order-meddelande { margin-bottom: 16px; }
@container (max-width: 560px) {
    .order-huvud { grid-template-columns: 1fr auto auto; padding: 14px; }
    .order-datum { grid-column: 1; grid-row: 2; }
    .order-status { grid-column: 2; grid-row: 1 / span 2; }
    .order-summa { grid-column: 3; grid-row: 1; }
    .order-huvud::after { grid-column: 3; grid-row: 2; justify-self: end; }
    .order-innehall { padding: 0 14px 14px; }
    /* Smal skarm: radtabellen staplas, a-priset faller bort - summan raknas. */
    .order-rader thead { display: none; }
    .order-rader tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid #eef0f3; }
    .order-rader td { border: 0; padding: 2px 0; }
    .order-rader td:nth-child(1) { grid-column: 1; color: var(--kassa-text-svag); font-size: .85rem; }
    .order-rader td:nth-child(2) { grid-column: 1 / -1; }
    .order-rader td:nth-child(3)::after { content: " st"; }
    .order-rader td:nth-child(3) { grid-column: 1; text-align: left; }
    .order-rader td:nth-child(4) { display: none; }
    .order-rader td:nth-child(5) { grid-column: 2; grid-row: 1; font-weight: 600; }
    .order-text { display: block !important; }
    .order-summering { max-width: none; }
}

/* --- Offert och kontakt ------------------------------------------------- */
.konto-valfritt { font-weight: 400; color: var(--kassa-text-svag); }
.kontakt-kontor h2 { font-size: 1.05rem; margin-bottom: 6px; }
.kontakt-kontor p { margin: 0 0 14px; }
.kontakt-kontor p:last-child { margin-bottom: 0; }
.kontakt-genvag { margin: 0 0 16px; }
/* webshop.css har offert-formularets aldre stil (.offert-form label/input). I
   skalet ar det kassans falt som galler. */
.kassa .offert-form { max-width: none; display: grid; gap: 16px; min-width: 0; }
.kassa .offert-form label { display: block; margin-top: 0; }
.kassa .offert-artikel { margin: 0 0 12px; }

/* --- Kundvagnen, finputs (2026-10-17 eftermiddag) ----------------------- */
.kassa-frakt-okand .korg-belopp { grid-column: 2 / -1; color: var(--kassa-text-svag); font-style: italic; }
.kassa-total-not { margin-top: 4px !important; }
.kassa-att-betala {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 10px;
    font-size: 1.05rem;
}
.kassa-att-betala b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.kassa-att-betala span { color: var(--kassa-text-svag); font-size: .88rem; }
#korgrader .korg-belopp { white-space: nowrap; }

/* VARURADERNA STAPLAS NAR KASSAN AR SMAL. Sju kolumner ryms inte pa en telefon:
   produktnamnet klams till tre rader och papperskorgen hamnar vid kanten. Raden
   blir i stallet
       art.nr                  [papperskorg]
       produktnamn
       antal    a-pris          radsumma
   Cellernas ordning kommer fran Order.ItemRow.getRowHtml och ar orord - det
   ar bara placeringen som andras, sa varukorg-test.sh och proven laser samma
   celler. Raden "finns inte kvar" har farre celler och hamnar ratt anda: kod
   overst, texten under. */
@container (max-width: 560px) {
    #korgrader, #korgrader > tbody { display: block; }
    #korgrader .korg-rubrik { display: none; }
    #korgrader tr {
        display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 2px;
        align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ws-color-border, #ddd);
    }
    #korgrader tr:last-child { border-bottom: 0; }
    #korgrader td { padding: 0; border: 0; }
    #korgrader td.korg-radnr { display: none; }
    #korgrader td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; font-size: .85rem; }
    #korgrader td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    #korgrader td:nth-child(4) { grid-column: 1; grid-row: 3; text-align: left; }
    #korgrader td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: left; color: var(--kassa-text-svag); }
    #korgrader td:nth-child(5)::before { content: "à "; }
    #korgrader td:nth-child(6) { grid-column: 3; grid-row: 3; font-weight: 600; }
    #korgrader td:nth-child(7) { grid-column: 3; grid-row: 1; text-align: right; }
    #korgrader td:nth-child(7) img { height: 24px; padding: 6px; margin: -6px; }
    /* "Finns inte kvar"-raden: texten i cell 3 (colspan), korgen i cell 4. */
    #korgrader td[colspan] + td { grid-column: 3; grid-row: 1; text-align: right; }
    #korgrader .kassa-tomtext { grid-column: 1 / -1; }
}