.elementor-51790 .elementor-element.elementor-element-fdc9b98{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ============================================================
   SävCon – Custom CSS för Gravity Forms
   Färgpalett:
   --sc-svartbrun : #1C1511  (bakgrund)
   --sc-vit       : #FBFBFB  (text / ljusa fält-bakgrunder)
   --sc-kramvit   : #F2EFD3  (ENDAST accent, t.ex. hover)
   --sc-ljusrod   : #EFA4AA  (accent / fokus)
   --sc-rod       : #B7232F  (knapp-bakgrund / accent)
   --sc-morkrod   : #5E101A  (hover-text / mörk accent)
   ============================================================ */

:root {
  --sc-svartbrun: #1C1511;
  --sc-vit: #FBFBFB;
  --sc-kramvit: #F2EFD3;
  --sc-ljusrod: #EFA4AA;
  --sc-rod: #B7232F;
  --sc-morkrod: #5E101A;

  --sc-btn-text: #FBFBFB;
  --sc-btn-bg: #B7232F;
  --sc-btn-hover-text: #5E101A;
  --sc-btn-hover-bg: #F2EFD3;
}

/* ============================================================
   GRAVITY FORMS CSS API — Orbital-temats rot-tokens
   Källa: docs.gravityforms.com/css-api/ + temats egen källkod.
   Nästan ALLT (knappar, kryssruta/radio-fyllning, avklarade steg
   i progressbaren, uppladdningsikonen, "Välj filer"-knappen) ärver
   från --gf-color-primary. Genom att skriva över den roten slår
   vi ut standardblått (#204ce5) överallt på en gång, istället för
   att jaga varenda enskild härledd variabel. !important behövs
   eftersom Gravity Forms sätter sina egna värden i en inline
   <style>-tagg scopead till formulärets ID, som annars vinner. */
.gform_wrapper.gform-theme--framework {
  --gf-color-primary: var(--sc-rod) !important;
  --gf-color-primary-rgb: 183, 35, 47 !important;
  --gf-color-primary-darker: var(--sc-morkrod) !important;
  --gf-color-primary-lighter: var(--sc-ljusrod) !important;
  --gf-color-primary-contrast: var(--sc-vit) !important;
  --gf-color-primary-contrast-rgb: 251, 251, 251 !important;

  /* Etikett-/beskrivningstext ärver INTE från --gf-color-primary,
     utan från denna separata "out-ctrl-dark"-familj. */
  --gf-color-out-ctrl-dark: var(--sc-vit) !important;
  --gf-color-out-ctrl-dark-darker: var(--sc-vit) !important;
  --gf-ctrl-desc-color: var(--sc-vit) !important;
  --gf-ctrl-label-color-primary: var(--sc-vit) !important;
  --gf-ctrl-label-color-secondary: var(--sc-vit) !important;
  --gf-ctrl-label-color-tertiary: var(--sc-vit) !important;

  /* Knapp-hover ska vara krämvit bakgrund / mörkröd text (inte bara
     en mörkare nyans av rött, som är temats eget standardbeteende) —
     måste därför sättas explicit för både "primary"-knappar
     (Nästa/Skicka/Markera alla) och "ctrl"-knappar (t.ex. "Välj filer"). */
  --gf-ctrl-btn-bg-color-hover-primary: var(--sc-kramvit) !important;
  --gf-ctrl-btn-color-hover-primary: var(--sc-morkrod) !important;
  --gf-ctrl-btn-bg-color-hover-ctrl: var(--sc-kramvit) !important;
  --gf-ctrl-btn-color-hover-ctrl: var(--sc-morkrod) !important;
}

/* ── Formulärets grundläge ───────────────────────────────── */
.gform_wrapper {
  background: var(--sc-svartbrun);
  color: var(--sc-vit);
  padding: 32px;
  border-radius: 8px;
}

/* Extra skyddsnät ovanpå CSS API-overriden ovan, ifall en specifik
   sida/instans skriver över variablerna längre ner i DOM-trädet. */
.gform_wrapper.gform-theme--framework {
  --gf-local-color: var(--sc-vit) !important;
  --gf-ctrl-choice-check-color: var(--sc-rod) !important;
  --gf-ctrl-accent-color: var(--sc-rod) !important;
}

/* Rubrik och beskrivning överst i formuläret */
.gform_wrapper .gform_heading {
  margin-bottom: 24px;
}
.gform_wrapper .gform_title {
  color: var(--sc-vit);
}
.gform_wrapper .gform_description {
  color: var(--sc-vit);
  opacity: 0.85;
}

/* ── Fältetiketter och beskrivningar ─────────────────────── */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gform-field-label {
  color: var(--sc-vit) !important;
  font-weight: 600;
  opacity: 1;
}

.gform_wrapper .gfield_description,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .instruction {
  color: var(--sc-vit) !important;
  opacity: 0.75;
}

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_text {
  color: var(--sc-ljusrod) !important;
}

/* Sektionsrubriker (t.ex. "Riktlinjer och regler för scenario") */
.gform_wrapper .gsection {
  border-bottom: 1px solid var(--sc-rod);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.gform_wrapper .gsection .gsection_title {
  color: var(--sc-vit) !important;
}
.gform_wrapper .gsection .gsection_description {
  color: var(--sc-vit) !important;
  opacity: 0.8;
}

/* "*" anger obligatoriska fält-texten */
.gform_wrapper .gform_required_legend {
  color: var(--sc-vit) !important;
  opacity: 0.7;
}

/* ── Text-, e-post-, nummer- och textarea-fält ───────────── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
  background: var(--sc-vit);
  color: var(--sc-svartbrun);
  border: 1px solid var(--sc-morkrod);
  border-radius: 4px;
  padding: 10px 12px;
}

.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper textarea::placeholder {
  color: var(--sc-svartbrun);
  opacity: 0.5;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--sc-ljusrod);
  box-shadow: 0 0 0 2px var(--sc-ljusrod);
}

.gform_wrapper input[type="file"] {
  color: var(--sc-vit);
}
.gform_wrapper input[type="file"]::file-body.elementor-page-51790-button {
  background: var(--sc-btn-bg);
  color: var(--sc-btn-text);
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gform_wrapper input[type="file"]::file-body.elementor-page-51790-button:hover {
  background: var(--sc-btn-hover-bg);
  color: var(--sc-btn-hover-text);
}

/* Multi-fil-dropzonen ("Dra filer hit eller Välj filer") — skyddsnät
   utöver --gf-color-primary-overriden ovan. */
.gform_wrapper .gform_drop_area {
  --gf-ctrl-file-zone-icon-color: var(--sc-rod) !important;
  --gf-ctrl-file-btn-bg-color: var(--sc-btn-bg) !important;
  --gf-ctrl-file-btn-bg-color-hover: var(--sc-btn-hover-bg) !important;
  --gf-ctrl-file-btn-color: var(--sc-btn-text) !important;
  --gf-ctrl-file-btn-color-hover: var(--sc-btn-hover-text) !important;
}

/* ── Kryssrutor (checkbox) ───────────────────────────────── */
.gform_wrapper .gfield_checkbox li,
.gform_wrapper .gfield_radio li {
  color: var(--sc-vit);
}
.gform_wrapper .gfield_checkbox li label,
.gform_wrapper .gfield_radio li label {
  color: var(--sc-vit) !important;
  opacity: 1;
}

.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
  accent-color: var(--sc-rod) !important;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.gform_wrapper input[type="checkbox"]:hover,
.gform_wrapper input[type="radio"]:hover {
  accent-color: var(--sc-morkrod) !important;
}

/* Ta bort webbläsarens/temats blå fokusring på kryssrutor och radioknappar */
.gform_wrapper input[type="checkbox"]:focus,
.gform_wrapper input[type="radio"]:focus,
.gform_wrapper input[type="checkbox"]:focus-visible,
.gform_wrapper input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--sc-ljusrod) !important;
}

/* "Markera alla" / "Avmarkera alla"-knappen (select-all-toggle) */
.gform_wrapper .gfield_choice_all_toggle,
.gform_wrapper button.gfield_choice_all_toggle {
  background: var(--sc-btn-bg) !important;
  color: var(--sc-btn-text) !important;
  border: none !important;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gform_wrapper .gfield_choice_all_toggle:hover {
  background: var(--sc-btn-hover-bg) !important;
  color: var(--sc-btn-hover-text) !important;
}

/* ── Knappar (Nästa / Föregående / Skicka / Markera alla) ── */
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input.button,
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
  background: var(--sc-btn-bg) !important;
  color: var(--sc-btn-text) !important;
  border: none !important;
  border-radius: 4px;
  padding: 12px 28px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.gform_wrapper .gform_footer input.button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input.button:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover {
  background: var(--sc-btn-hover-bg) !important;
  color: var(--sc-btn-hover-text) !important;
}

/* "Skicka"-knappen har klassen gform-theme-button--width-full (en
   inställning i formulärredigaren, inte en CSS-bugg) — enklast är att
   byta "Width: Full Width" till "Auto" där. Denna regel är en CSS-
   fallback om du hellre löser det härifrån. inline-size måste också
   sättas: Gravity Forms storleks-variabel appliceras via inline-size,
   inte width, så bara width:auto räcker inte. */
.gform_wrapper .gform_page_footer {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
  gap: 12px;
}
.gform_wrapper .gform_page_footer input[type="submit"].gform_button,
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform-theme-button--width-full {
  width: auto !important;
  inline-size: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

/* "Välj filer"-knappen i fil-dropzonen (klasserna
   gform-theme-button--control / gform_button_select_files) följer inte
   --gf-color-primary-kedjan hos er — troligen bakar Orbital-temats
   färginställning in konkreta hex-värden. Direkt background/color med
   hög specificitet är säkrare här än fler variabel-overrides. */
.gform_wrapper .gform-theme-button--control,
.gform_wrapper button.gform_button_select_files,
.gform_wrapper .gform_drop_area button {
  background: var(--sc-btn-bg) !important;
  color: var(--sc-btn-text) !important;
  border-color: var(--sc-btn-bg) !important;
}
.gform_wrapper .gform-theme-button--control:hover,
.gform_wrapper button.gform_button_select_files:hover,
.gform_wrapper .gform_drop_area button:hover {
  background: var(--sc-btn-hover-bg) !important;
  color: var(--sc-btn-hover-text) !important;
  border-color: var(--sc-btn-hover-bg) !important;
}

/* ── Progress-indikator (steg 1/2/3: ADMINISTRATIVT osv.) ── */
.gform_wrapper .gf_progressbar_wrapper,
.gform_wrapper .gf_page_steps {
  background: transparent;
  border-bottom: 1px solid var(--sc-morkrod);
  margin-bottom: 24px;
}

.gform_wrapper .gf_step .gf_step_number {
  background: var(--sc-svartbrun);
  border: 2px solid var(--sc-vit);
  color: var(--sc-vit);
  opacity: 0.6;
}
.gform_wrapper .gf_step .gf_step_label {
  color: var(--sc-vit);
  opacity: 0.6;
}

.gform_wrapper .gf_step_active .gf_step_number {
  background: var(--sc-rod);
  border-color: var(--sc-rod);
  color: var(--sc-btn-text);
  opacity: 1;
}
.gform_wrapper .gf_step_active .gf_step_label {
  color: var(--sc-vit);
  opacity: 1;
  font-weight: 700;
}

.gform_wrapper .gf_step_completed .gf_step_number {
  background: var(--sc-morkrod);
  border-color: var(--sc-morkrod);
  color: var(--sc-vit);
  opacity: 1;
}

/* Fyllnadslinjen i progressbaren, om temat använder .gf_progressbar_percentage */
.gform_wrapper .gf_progressbar_percentage {
  background: var(--sc-rod) !important;
}

/* ── Valideringsfel ───────────────────────────────────────── */
.gform_wrapper .validation_error {
  color: var(--sc-ljusrod);
  border: 1px solid var(--sc-ljusrod);
  border-radius: 4px;
  padding: 12px 16px;
  background: rgba(239, 164, 170, 0.08);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: var(--sc-ljusrod) !important;
}

.gform_wrapper .gfield_validation_message {
  color: var(--sc-ljusrod) !important;
  opacity: 1;
}

/* ── Länkar inuti formulärtext (t.ex. "Anmälan", "savcon.se") ── */
.gform_wrapper a {
  color: var(--sc-ljusrod);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.gform_wrapper a:hover {
  color: var(--sc-kramvit);
}

/* ── Bekräftelsemeddelande efter inskickat formulär ─────────── */
.gform_wrapper .gform_confirmation_message {
  color: var(--sc-vit);
  background: var(--sc-svartbrun);
  border: 1px solid var(--sc-rod);
  border-radius: 8px;
  padding: 24px;
}/* End custom CSS */