/*
 * Kirkepakka — presentasjon. bestilling.css
 * ============================================================
 * Scopet stilark for /kom-i-gang/ (fase 13). Lastes KUN der
 * (kpp_bestilling_assets()). Alt henger under .kpp-bestilling, saa
 * ingenting lekker ut i resten av salgsflaten.
 *
 * Skjemaet kjoerer GF 2.10 sitt «orbital»-tema (markupVersion 2). GF sitt eget
 * stilark BEHOLDES — det baerer a11y-tilstandene (skjulte felt, feilmarkering,
 * skjermleserklasser, betinget logikk). Reglene under legger MERKET oppaa:
 * samme tokens, samme pill-knapper, samme fokusmarkering som ellers paa flaten.
 * ============================================================ */

/* Feil-/suksessfarge maa ha egen moerk variant: --color-danger fra main.css
   er definert KUN for lys flate (#9B3324 paa #0E1B22 stryker AA). */
.kpp-bestilling{--kpp-feil:#9B3324;--kpp-feil-flate:#FBEDEA}
html[data-mode="dark"] .kpp-bestilling{--kpp-feil:#FF9E8C;--kpp-feil-flate:#3A1B16}

/* Orbital eksponerer sine egne --gf-*-variabler (default: knallblaa #204ce5).
   Selve mappingen til merkets tokens ligger i kpp_bestilling_inline_css()
   (inc/bestilling.php), ikke her: GF skriver sine verdier i en inline-blokk med
   ID-selektor (#gform_wrapper_N[data-form-index="0"].gform-theme), og et
   klassebasert regelsett i denne fila taper mot den uansett rekkefoelge.
   Inline-blokken vaar bruker samme ID + `body` foran, og vinner. */

/* ============================================================
   HEROEN — badge, tittel, lede og prislinje, alt over skjemaet

   Maalt paa live-siden 14.09 (375x812): med intro + forventningstrappen foran
   skjemaet var foerste felt ferdig tegnet foerst paa 2 094 px. Heroen er derfor
   komprimert til det som maa staa foer et menneske kan begynne aa skrive:
   loeftet (badgen), hva siden er (H1 + lede) og hva det koster (prislinja).
   Alt annet er flyttet under skjemaet.
   ============================================================ */
.kpp-bestilling-intro{padding-block:clamp(1.25rem,3vw,2rem) clamp(.875rem,2vw,1.625rem)}
/* Seksjonshodet er hele heroen her — luften under det er skjemaseksjonens. */
.kpp-bestilling-intro .kpp-sec-head{margin-bottom:0}
.kpp-bestilling-intro .kpp-h1{font-size:clamp(2rem,5.3vw,3.5rem)}
.kpp-bestilling-intro .kpp-lede{
  font-size:clamp(1.0625rem,2.2vw,1.1875rem);
  max-width:34ch;margin-inline:auto;
}

/* Proeveperioden er det ene loeftet som senker terskelen, og den staar derfor
   der kickeren «Kom i gang» sto: oeverst, foer tittelen. Ravflaten er bevisst
   litt varmere enn --color-surface-2 — den skal leses som et merke, ikke som
   enda et kort. */
.kpp-prove-badge{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .9rem;
  padding:6px 14px;
  background:#FBF2E1;color:var(--color-accent-text);
  border:1px solid rgba(217,164,65,.5);border-radius:var(--rounded-full);
  font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.kpp-prove-badge .kpp-icon{flex:none}
html[data-mode="dark"] .kpp-prove-badge{
  background:rgba(232,183,94,.12);color:#E8B75E;border-color:rgba(232,183,94,.4);
}

/* Prislinja som tokort. Beloepene er de samme som foer (kpp_pris()); det er
   plasseringen og innrammingen som er ny — den skal leses FOER knappen, ikke
   ved siden av den. Venstrestilt inni et sentrert seksjonshode: to linjer med
   tall leses ikke sentrert. */
.kpp-prislinje{
  display:flex;align-items:flex-start;gap:.65rem;
  max-width:46rem;margin:clamp(.875rem,2vw,1.25rem) auto 0;
  padding:clamp(.75rem,2vw,.875rem) clamp(1rem,3vw,1.375rem);
  background:var(--color-primary-tint);border:1px solid var(--color-line);
  border-radius:var(--rounded-lg);text-align:left;
}
.kpp-prislinje .kpp-icon{color:var(--color-accent-text);flex:none;margin-top:1px}
.kpp-prislinje__belop{
  margin:0;font-size:clamp(.9375rem,2vw,1.0625rem);font-weight:600;line-height:1.35;
}
.kpp-prislinje__vilkar{
  margin:.2rem 0 0;font-size:clamp(.8125rem,1.8vw,.9375rem);
  color:var(--color-ink-muted);line-height:1.45;
}

/* ============================================================
   FORVENTNINGSSTIGEN — fire steg UNDER skjemaet

   Trappen svarer paa «hva skjer etterpaa». Det spoersmaalet kommer etter at
   feltene er sett, saa den ligger naa under dem — paa hvit flate, mellom den
   graa skjemaflaten og bunnen.
   ============================================================ */
.kpp-forvent-seksjon{background:var(--color-surface)}
/* .kpp-lede er 42ch bred og sentrerer bare TEKSTEN sin; uten denne staar
   underlinja litt til venstre for overskriften paa brede skjermer. */
.kpp-forvent-seksjon .kpp-lede{margin-inline:auto}
.kpp-forvent{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.kpp-forvent__steg{
  background:var(--color-surface-2);border:1px solid var(--color-line);
  border-radius:var(--rounded-lg);padding:clamp(1.25rem,2.5vw,1.75rem);
}
.kpp-forvent__nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:var(--rounded-full);
  background:var(--color-primary);color:var(--btn-fg);
  font-family:var(--font-display);font-weight:800;font-size:1.125rem;
  margin-bottom:.85rem;
}
html[data-mode="dark"] .kpp-forvent__nr{background:var(--btn-bg);color:var(--btn-fg)}
.kpp-forvent__tittel{font-size:1.1875rem;font-weight:800;margin:0 0 .4rem}
.kpp-forvent__steg p{margin:0;color:var(--color-ink-muted);font-size:1rem;line-height:1.55}

/* ============================================================
   SKJEMAFLATEN
   ============================================================ */
/* Skjemaet er det foerste kortet paa siden, ikke det siste avsnittet: kort
   toppluft, og resten av seksjonsrytmen tatt ut i bunnen. */
.kpp-bestilling{padding-block:clamp(1.5rem,4vw,2rem) clamp(2rem,5vw,4rem)}
.kpp-bestilling__inner{
  max-width:46rem;margin-inline:auto;position:relative;z-index:2;
  background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--rounded-lg);box-shadow:var(--shadow-md);
  padding:clamp(1rem,3vw,1.75rem) clamp(1.125rem,3vw,2.25rem) clamp(1.5rem,3vw,2.25rem);
}

/* GF sin honeypot (enableHoneypot i seeden) rendres som et ekstra felt oeverst,
   med en tilfeldig ekte-utseende etikett fra GF sin egen liste — «Comments»,
   «Company», «Facebook». GF skjuler den selv med
   `.gform-theme--foundation .gform_validation_container{display:none!important}`,
   og maalingen 2.9 bekrefter at den er ute av tilgjengelighetstreet (computed
   display:none, offsetParent null). Regelen under er en SIKRING, ikke en
   dublett: faller foundation-stilarket ut — en CSS-kombinerende cache-plugin,
   eller GF sin «output CSS»-bryter — vokser skjemaet et falskt synlig felt midt
   i en fem-felts flate. display:none holder det ute av skjermlesere ogsaa. */
.kpp-bestilling .gform_wrapper .gform_validation_container{display:none !important}

.kpp-bestilling .gform_wrapper{
  font-family:var(--font-body);color:var(--color-ink);
}
.kpp-bestilling .gform_wrapper .gform_fields{
  grid-row-gap:clamp(1.35rem,3vw,1.9rem);
}

/* Etiketter + hjelpetekst */
.kpp-bestilling .gform_wrapper .gfield_label{
  font-family:var(--font-body);font-weight:600;font-size:1.0625rem;
  color:var(--color-ink);margin-bottom:.4rem;
}
.kpp-bestilling .gform_wrapper .gfield_required{
  color:var(--color-ink-muted);font-weight:400;font-size:.9375rem;
}
.kpp-bestilling .gform_wrapper .gfield_description{
  color:var(--color-ink-muted);font-size:.9375rem;line-height:1.5;
  padding-top:.35rem;
}
.kpp-bestilling .gform_wrapper .gfield_description a{color:var(--color-primary)}

/* Seksjonsskiller = mellomtittel. Skjemaet har ÉN seksjon, og den er det
   foerste elementet i kortet — toppluften er kortets egen padding, ikke en
   margin til. Kommer det en seksjon nummer to, maa den ha margin-top igjen. */
.kpp-bestilling .gform_wrapper .gsection{
  border-bottom:1px solid var(--color-line);
  margin-top:0;padding-bottom:.75rem;
}
.kpp-bestilling .gform_wrapper .gsection_title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:var(--text-h3);color:var(--color-ink);margin:0 0 .25rem;
}
/*
 * Seksjonsbeskrivelsen («Seks felt — det er alt vi trenger …») sier naa det
 * samme som leden rett over skjemaet, med flere ord. Den skjules HER og ikke i
 * seeden: seeden eier feltene, og en feltendring maa kjoeres med wp eval-file
 * paa hver installasjon — denne linja foelger med deployen og overlever en
 * re-seed. Selektoren gaar paa klasse og ikke paa #field_1_1: skjema-ID-en er
 * ulik paa dev og prod (jf. kpp_bestilling_skjema_id()), og skjemaet har bare
 * én seksjon.
 */
.kpp-bestilling .gform_wrapper .gsection_description{display:none}

/* Tekstfelt */
.kpp-bestilling .gform_wrapper input[type=text],
.kpp-bestilling .gform_wrapper input[type=email],
.kpp-bestilling .gform_wrapper input[type=url],
.kpp-bestilling .gform_wrapper input[type=tel],
.kpp-bestilling .gform_wrapper textarea{
  width:100%;font-family:var(--font-body);font-size:1.0625rem;line-height:1.5;
  padding:.8rem .95rem;color:var(--color-ink);
  background:var(--color-surface);
  border:1px solid var(--color-line-strong);border-radius:var(--rounded-sm);
  transition:border-color .2s,box-shadow .2s;
}
.kpp-bestilling .gform_wrapper textarea{min-height:6.5rem;resize:vertical}
.kpp-bestilling .gform_wrapper input:focus-visible,
.kpp-bestilling .gform_wrapper textarea:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:1px;
  border-color:var(--color-primary);
}
.kpp-bestilling .gform_wrapper ::placeholder{color:var(--color-ink-muted);opacity:1}

/* Filopplasting */
.kpp-bestilling .gform_wrapper input[type=file]{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--color-ink);
  background:var(--color-surface);border:1px dashed var(--color-line-strong);
  border-radius:var(--rounded-sm);padding:.85rem;
}
.kpp-bestilling .gform_wrapper input[type=file]:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:1px;
}

/* ============================================================
   SAMTYKKE
   ============================================================ */
.kpp-bestilling .gform_wrapper .ginput_container_consent{
  display:flex;align-items:flex-start;gap:.65rem;
}
/*
 * GF orbital setter appearance:none paa checkbox og maler med
 * --gf-ctrl-bg-color (= --gf-color-in-ctrl) + ::before-hake fra gform-icons
 * (--gf-ctrl-choice-check-color = --gf-color-in-ctrl-primary). Token-mappingen
 * i kpp_bestilling_inline_css() er den egentlige fiksen (in-ctrl maa vaere
 * flatefarge, ikke primary). Reglene under gjoer av/paa eksplisitt for
 * samtykkefeltet: tom lys boks / petrol-fyll + SVG-hake — uten aa stole paa
 * ikonfonten, og scopet saa andre felt ikke treffes.
 */
.kpp-bestilling .gform_wrapper .ginput_container_consent input[type=checkbox]{
  flex:none;width:1.35rem;height:1.35rem;margin:.1rem 0 0;
  -webkit-appearance:none;appearance:none;
  background-color:var(--color-surface);
  background-image:none;
  border:1.5px solid var(--color-line-strong);
  border-radius:3px;
  accent-color:var(--color-primary);
  cursor:pointer;
  transition:background-color .15s,border-color .15s;
}
.kpp-bestilling .gform_wrapper .ginput_container_consent input[type=checkbox]::before{
  content:none;
}
.kpp-bestilling .gform_wrapper .ginput_container_consent input[type=checkbox]:checked{
  background-color:var(--color-primary);
  border-color:var(--color-primary);
  /* Hvit hake; currentColor via %23fff — uavhengig av gform-icons-fonten. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size:.85rem .85rem;
  background-position:center;
  background-repeat:no-repeat;
}
html[data-mode="dark"] .kpp-bestilling .gform_wrapper .ginput_container_consent input[type=checkbox]:checked{
  /* --btn-fg er mork i dark mode; haken maa foelge knappekontrasten. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%230E1B22' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.kpp-bestilling .gform_wrapper .ginput_container_consent input[type=checkbox]:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:2px;
}
.kpp-bestilling .gform_wrapper .ginput_container_consent label{
  font-weight:400;font-size:1rem;line-height:1.5;color:var(--color-ink);
}
.kpp-bestilling .gform_wrapper .gfield_consent_description{
  margin-top:.5rem;padding:.85rem 1rem;
  background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--rounded-sm);
  color:var(--color-ink-muted);font-size:.9375rem;line-height:1.55;
}

/* ============================================================
   FEILMELDINGER — farge ER ikke eneste baerer (ikon + tekst)
   ============================================================ */
.kpp-bestilling .gform_wrapper .gform_validation_errors{
  background:var(--kpp-feil-flate);border:1px solid var(--kpp-feil);
  border-radius:var(--rounded-sm);box-shadow:none;
}
.kpp-bestilling .gform_wrapper .gform_validation_errors>h2,
.kpp-bestilling .gform_wrapper .gform_validation_errors a{color:var(--kpp-feil)}
.kpp-bestilling .gform_wrapper .validation_message{
  background:transparent;border:0;border-left:3px solid var(--kpp-feil);
  color:var(--kpp-feil);font-size:.9375rem;padding:.35rem 0 .35rem .6rem;margin-top:.5rem;
}
.kpp-bestilling .gform_wrapper .gfield_error input[type=text],
.kpp-bestilling .gform_wrapper .gfield_error input[type=email],
.kpp-bestilling .gform_wrapper .gfield_error input[type=url],
.kpp-bestilling .gform_wrapper .gfield_error textarea{border-color:var(--kpp-feil)}
.kpp-bestilling .gform_wrapper .gfield_error .gfield_label{color:var(--color-ink)}

/* ============================================================
   SEND-KNAPPEN — samme pille som resten av flaten
   ============================================================ */
.kpp-bestilling .gform_wrapper .gform_footer{
  margin-top:clamp(1.5rem,3vw,2.25rem);padding:0;
}
/*
 * !important er noedvendig HER og bare her. Orbital-temaets reset og
 * knappe-regler vinner ellers over enhver klassebasert selektor vi kan skrive
 * (de lastes etter oss og bruker :where()-kjeder som er vanskelige aa overby).
 * Dette er samme funn som er notert fra tidligere GF-bygg i stacken: submit-
 * knappen maa tvinges for aa faa tema-stil. Holdt til de faa deklarasjonene
 * som faktisk trengs — resten av skjemaet stiles uten !important.
 */
.kpp-bestilling .gform_wrapper .gform_button{
  display:inline-flex !important;align-items:center;justify-content:center;
  font-family:var(--font-body) !important;font-weight:600 !important;
  font-size:1.0625rem !important;line-height:1 !important;
  padding:1rem 1.85rem !important;min-height:3rem !important;width:auto;
  background:var(--btn-bg) !important;color:var(--btn-fg) !important;
  border:2px solid var(--btn-bg) !important;
  border-radius:var(--rounded-full) !important;
  cursor:pointer;transition:background-color .3s,border-color .3s;
}
.kpp-bestilling .gform_wrapper .gform_button:hover{
  background:var(--btn-bg-hover) !important;border-color:var(--btn-bg-hover) !important;
}
.kpp-bestilling .gform_wrapper .gform_button:focus-visible{
  outline:2px solid var(--color-primary) !important;outline-offset:3px;
}

/* Mikroteksten under knappen. Staar utenfor skjemaet (GF eier alt innenfor),
   men skal lese som en del av det — derfor samme dempede graa som
   hjelpetekstene over. */
.kpp-bestilling__knappenote{
  margin:.75rem 0 0;font-size:.875rem;line-height:1.5;color:var(--color-ink-muted);
}

/* ============================================================
   VENTETILSTANDEN etter innsending
   ============================================================ */
/* Ligger naa INNE i .kpp-bestilling__inner, som selv er et hvitt kort. En hvit
   ramme til inni den leste som en feil, saa kvitteringen er en innfelt flate:
   graa bunn, petrol-kant i venstre marg. */
.kpp-kvittering{
  background:var(--color-surface-2);border:1px solid var(--color-line);
  border-left:4px solid var(--color-primary);
  border-radius:var(--rounded-sm);
  padding:clamp(1.25rem,3vw,1.75rem);
}
.kpp-kvittering__tittel{font-size:var(--text-h2);font-weight:800;margin:0 0 .5rem}
.kpp-kvittering__lede{font-size:1.1875rem;line-height:1.55;color:var(--color-ink);margin:0 0 1.25rem}
.kpp-kvittering__liste{margin:0 0 1.25rem;padding-left:1.15rem;color:var(--color-ink-muted)}
.kpp-kvittering__liste li{margin-bottom:.5rem;line-height:1.55}
.kpp-kvittering__note{margin:0;color:var(--color-ink-muted);font-size:.9375rem}

/* Fallback naar Gravity Forms ikke er aktivt. Den baerer ikke lenger sin egen
   ramme: etter TSK-20479 ER .kpp-bestilling__inner kortet, og to rammer utenpaa
   hverandre leste som en feil. */
.kpp-bestilling__fallback>*:first-child{margin-top:0}
.kpp-bestilling__fallback>*:last-child{margin-bottom:0}

/* ============================================================
   MOBIL — 375 px
   ============================================================ */
@media (max-width:30rem){
  .kpp-bestilling .gform_wrapper .gform_button{width:100%}
}

/* Adressefeltet — suffikset ligger utenfor input-en, så verdien som sendes
   inn er bare adressen og kunden ikke kan slette domenet ved et uhell. */
/* `!important` av samme grunn som borderne under: Gravity Forms' eget ark
   treffer `.ginput_container div` med høyere spesifisitet og gjorde raden til
   `display:block`, slik at «.kirkepakka.no» la seg som en løs linje UNDER feltet
   (persona-testen 08.09, ~800 px). `flex-wrap` skrives ut for at ingen arvet
   ombrekking skal kunne gjøre det samme igjen. */
.kpp-slug { display: flex !important; flex-wrap: nowrap; align-items: stretch; }
.kpp-slug input[type="text"] {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-right: none !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	/* Uten denne kan ikke feltet krympe under sin egen innholdsbredde, og
	   suffikset dyttes ut av raden på smale skjermer. */
	min-width: 0;
}
.kpp-slug__suffiks {
	display: flex; flex: 0 0 auto; align-items: center; padding: 0 .75rem;
	border: 1px solid var(--color-line, #D9E1E6); border-left: none;
	border-radius: 0 .4rem .4rem 0;
	background: var(--color-surface-2, #F1F5F7);
	color: var(--color-ink-muted, #5A6B75);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88rem; white-space: nowrap;
}
.kpp-slug__status { margin: .4rem 0 0; font-size: .84rem; min-height: 1.2em; }
.kpp-slug__status--ledig  { color: var(--color-success, #2E7D57); }
.kpp-slug__status--endret { color: var(--color-warning, #8A6212); }
.kpp-slug__status--feil   { color: var(--color-danger, #A6392C); }
.kpp-slug__status--venter,
.kpp-slug__status--tom    { color: var(--color-ink-muted, #5A6B75); }