/*
   Preems grafiska profil. Egen fil, inga ändringar i Pays app.css — den delas med
   MAUI-appen och varje ändring där hade nått butiks- och bokningsvyerna också.
*/
.preem {
    /* Ändras den här måste PreemSitePage.BackgroundHex följa med — den målar
       iOS-safe-area via jbsSetThemeColor innan sidan renderat. */
    --preem-bg: #0A3B2A;
    --preem-surface: #0F4A35;
    --preem-line: rgba(255, 255, 255, .13);
    --preem-ink: #F5F2EA;
    --preem-soft: #9FC0AD;
    --preem-accent: #F9A83C;
    --preem-open: #8FE0B4;

    min-height: 100dvh;

    /* SKROLLYTAN ÄR SIDAN SJÄLV.
       Skalet ovanför oss skrollar inte: Pay Core sätter overflow: hidden med fast höjd på
       både #app och .jbs-main-container. Blir Preem-vyn högre än skärmen — fem tjänster,
       plus felrad, hjälpruta och "försök öppna igen" — klipptes botten bort utan någon väg
       att nå den. max-height låser höjden till skärmen så att overflow-y har något att
       skrolla; utan den växer .preem bara vidare och klipps av skalet som förut.

       overflow-x: hidden behåller x-axeln som den var (skalet klippte redan där) i stället
       för att ett långt stationsnamn plötsligt ger horisontell skroll — overflow-y: auto
       ensamt hade gjort x-axeln till auto också. */
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;

    background: var(--preem-bg);
    color: var(--preem-ink);
    padding: max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preem-center { flex: 1; display: flex; flex-direction: column; align-items: center;
                justify-content: center; text-align: center; gap: 6px; }

/* Innehållsblocket i tjänstevyn. Låg tidigare topp-packat med ~40 % tom skärm under sista
   tjänsten på en iPhone.

   FLEX-CENTRERING, inte margin: auto eller en fast padding-top: höjden skiljer sig
   drastiskt mellan tillstånden (en tjänst mot fem, med eller utan banner, felrad,
   hjälpruta och retry-knapp), så avståndet måste räknas ut per tillstånd — ett fast mått
   som ser rätt ut med en tjänst är fel med fem.

   ÖVERSPILLSSKYDDET är att blocket är ett flex-item med min-height: auto och därför aldrig
   kan krympa under sitt eget innehåll. När tjänsterna blir många finns inget fritt utrymme
   kvar, centreringen upphör av sig själv, innehållet börjar överst och resten skrollar i
   .preem. Samma justify-content: center direkt på .preem hade i stället klippt TOPPEN
   oåterkalleligt, eftersom .preem är skrollytan — det som hamnar ovanför skrollstarten går
   inte att nå. Därför ett eget block i stället. */
.preem-body { flex: 1; display: flex; flex-direction: column; justify-content: center;
              gap: 12px; }

/* Loggan. Uppskalad ett steg 2026-08-26 på ägarens begäran — den läste som en ikon, inte
   som ett märke, på en iPhone. Radie och textstorlek följer med i samma proportion
   (≈23 % av bredden respektive ≈26 %), annars ser kvadraten platt eller texten inklämd ut.
   Kostnaden är ~16 px extra höjd i tjänstevyn, vilket .preem-body tar ur det fria
   utrymmet — och när det utrymmet är slut skrollar sidan i stället för att klippa. */
.preem-mark { width: 112px; height: 112px; border-radius: 26px; background: var(--preem-accent);
              display: grid; place-items: center; margin-bottom: 12px;
              box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
.preem-mark span { font-size: 29px; font-weight: 700; color: #0E6A45; letter-spacing: -.02em; }
.preem-mark--sm { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 8px; }
.preem-mark--sm span { font-size: 19px; }

/* Betalvyns märke. Mindre än --sm med flit: på en betalskärm är märket avsändare, inte
   budskap — vad kunden köper och vad det kostar ska väga tyngst. Ett 72px-märke sköt
   dessutom ner kortformuläret under vikningen på en liten telefon. */
.preem-mark--xs { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 8px;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.preem-mark--xs span { font-size: 12px; }

.preem-hero { text-align: center; padding: 8px 0 4px; }

/* Betalvyns rubrik. Tätare än den vanliga: allt utrymme ovanför kortformuläret är utrymme
   kunden måste skrolla förbi med tangentbordet uppe. */
.preem-hero--pay { padding: 0 0 12px; }
.preem-title--pay { font-size: 20px; margin: 0 0 2px; }

/* Priset. Samma vikt som rubriken men i accentfärgen — kunden ska kunna svara på "vad
   kostar det" utan att skrolla ner till Adyens knapp. */
.preem-payprice { font-size: 22px; font-weight: 700; color: var(--preem-accent);
                  margin: 0 0 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Avbryt-raden. Vänsterställd som en bakåtknapp ska vara, och utanför .preem-hero så den
   inte ärver dess centrering. */
.preem-payhead { display: flex; align-items: center; min-height: 44px; margin-bottom: 4px; }

/* 44px träffyta enligt Apples riktlinje, trots att texten är liten. Negativ vänstermarginal
   låter texten linjera med sidans innehåll medan träffytan sticker ut i paddingen. */
.preem-back { display: inline-flex; align-items: center; gap: 6px;
              min-height: 44px; padding: 0 12px 0 4px; margin-left: -4px;
              background: none; border: 0; color: var(--preem-soft);
              font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.preem-back span { font-size: 22px; line-height: 1; }
.preem-back:active { color: var(--preem-ink); }
.preem-back:disabled { opacity: .45; cursor: not-allowed; }
.preem-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                 color: var(--preem-soft); margin: 0; }
.preem-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
/* margin: 0 AUTO, inte margin: 0.
   Med max-width men utan auto-marginaler blir stycket ett smalt block längst till VÄNSTER,
   och text-align: center från .preem-hero centrerar då texten inuti det blocket — inte på
   sidan. Resultatet läste som vänsterställd text under en centrerad rubrik.
   Syntes inte i inloggningsvyn, eftersom .preem-center har align-items: center och rättar
   till det åt oss. I betalvyn och under "Vad vill du öppna?" fanns ingen sådan hjälp. */
.preem-lede { font-size: 14px; color: var(--preem-soft); margin: 0 auto; max-width: 30ch; }

/* Lösningens beskrivning under stationsnamnet.
   FONT: ärver sidans (font: inherit gäller bara formulärelement, en <p> ärver redan) —
   ingen egen family, så den följer Pays typografi som allt annat här.
   STORLEK: 14px, samma steg som .preem-lede. Beskrivningen har samma roll — ett stycke
   under rubriken — och ett eget mellansteg hade gjort skalan (11 / 13 / 14 / 15 / 17 / 24)
   otydlig utan att tillföra något.
   RADAVSTÅND: 1.55, till skillnad från .preem-lede som är en rad. Det här kan bli fem, och
   14px med default line-height läser tätt på en telefon.
   MARGINALER: 0 — rubrikens margin-bottom (8px) bär avståndet uppåt, hero:ns padding plus
   .preem-body:s gap (4 + 12px) nedåt mot kortet. Egna marginaler här hade lagts PÅ dem.
   max-width i ch plus auto-marginaler håller radlängden läsbar på en bred skärm; utan
   auto-marginalerna hade max-width vänsterställt stycket i stället för att smalna av det.
   pre-line: fältet är en textarea i admin, så radbrytningar är avsiktliga. */
.preem-description { font-size: 14px; line-height: 1.55; color: var(--preem-soft);
                     white-space: pre-line; margin: 0 auto; max-width: 34ch; }

/* Knapparna nedtill, inom räckhåll för tummen. 56px — Apples spann för deras egen
   inloggningsknapp går 44 till 64, och 64 kändes uppblåst. */
.preem-actions { display: flex; flex-direction: column; gap: 12px; }
.preem-btn { width: 100%; min-height: 56px; border-radius: 14px; border: 1px solid var(--preem-line);
             background: rgba(255, 255, 255, .06); color: var(--preem-ink);
             font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
             transition: transform .14s cubic-bezier(.32, .72, 0, 1); }
.preem-btn:active { transform: scale(.985); }
.preem-btn:disabled { opacity: .45; cursor: not-allowed; }
.preem-btn--primary { background: var(--preem-accent); border-color: var(--preem-accent); color: #0A3B2A; }
.preem-btn--sm { min-height: 44px; width: auto; padding: 0 18px; font-size: 15px; }

.preem-banner { border: 1px solid var(--preem-line); background: var(--preem-surface);
                border-radius: 14px; padding: 14px; }
.preem-banner--free { background: rgba(143, 224, 180, .13); border-color: rgba(143, 224, 180, .36); }
.preem-banner-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.preem-banner--free .preem-banner-title { color: var(--preem-open); }
.preem-banner-sub { font-size: 13px; color: var(--preem-soft); }

.preem-field { display: flex; gap: 8px; margin-top: 12px; }
.preem-input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px;
               border: 1px solid var(--preem-line); background: rgba(0, 0, 0, .18);
               color: var(--preem-ink); font: inherit; font-size: 16px; }
.preem-input::placeholder { color: var(--preem-soft); }

.preem-section { font-size: 17px; font-weight: 700; margin: 8px 0 0; }

.preem-service { width: 100%; display: flex; align-items: center; justify-content: space-between;
                 gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--preem-line);
                 background: var(--preem-surface); color: inherit; font: inherit; cursor: pointer;
                 transition: transform .14s cubic-bezier(.32, .72, 0, 1); }
.preem-service:active { transform: scale(.985); }
.preem-service:disabled { opacity: .5; }
.preem-service-name { font-size: 15px; font-weight: 600; }
.preem-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.preem-open { font-size: 15px; font-weight: 700; color: var(--preem-open); }

.preem-error { font-size: 13.5px; color: var(--preem-accent); margin: 0; text-align: center; }

/* Hjälpraden vid utrustningsfel. Visas bara när kunden inte kan lösa läget själv, så den
   får ta plats — men den ska inte konkurrera med Öppna-knapparna om uppmärksamheten. */
.preem-help { display: flex; flex-direction: column; gap: 10px; align-items: center;
              padding: 14px; border-radius: 14px;
              border: 1px solid var(--preem-line); background: var(--preem-surface); }
.preem-help-text { margin: 0; font-size: 13.5px; color: var(--preem-soft); text-align: center; }

/* Sekundär knapp. Ärver .preem-btn men är en <a> — display och centrering måste sättas
   eftersom ankare inte centrerar sin text som en knapp gör. */
.preem-btn--ghost { display: flex; align-items: center; justify-content: center;
                    text-decoration: none; background: rgba(255, 255, 255, .06);
                    border-color: var(--preem-line); color: var(--preem-ink); }

.preem-spinner { width: 32px; height: 32px; border-radius: 50%;
                 border: 3px solid var(--preem-line); border-top-color: var(--preem-accent);
                 animation: preem-spin 900ms linear infinite; }
@keyframes preem-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .preem-spinner { animation-duration: 2.4s; }
    .preem-btn, .preem-service { transition: none; }
}

.preem-service-meta { font-size: 13px; color: var(--preem-soft); }

/* Högerkolumnen i en tjänsterad. Fick en egen regel först nu — den bar inget format alls,
   och med två saker i sig (Upptaget + pris) hade de suttit ihop utan mellanrum. */
.preem-service-right { display: flex; align-items: center; gap: 10px; }

/* Upptaget. Full kontrast och fetstil, till skillnad från .preem-service-meta:
   raden är samtidigt disabled, och .preem-service:disabled sänker opaciteten till .5 —
   mjuk grå text på det blev nästan oläslig. Klassen nedan höjer radens opacitet igen så
   beskedet går fram; knappen är fortfarande spärrad. */
.preem-busy { font-size: 13px; font-weight: 700; color: var(--preem-ink);
              letter-spacing: .01em; white-space: nowrap; }
.preem-service--busy:disabled { opacity: .82; }
.preem-price--muted { color: var(--preem-soft); font-weight: 600; }

/* "Betald" — kvitto på att trycket använder en betalning som redan är gjord. Grön som
   öppna-tillståndet, eftersom den betyder samma sak för kunden: det här kostar inget mer.
   Ram i stället för fyllning så den inte konkurrerar med "Öppna ›" intill. */
.preem-paid { font-size: 12px; font-weight: 700; color: var(--preem-open);
              border: 1px solid rgba(143, 224, 180, .38); border-radius: 999px;
              padding: 3px 9px; white-space: nowrap; letter-spacing: .01em; }
.preem-service:disabled { opacity: .5; cursor: not-allowed; }