/*
 Theme Name: Flyttfirma Landskrona
 Description: Child theme för flyttfirmailandskrona.se
 Author: Filip
 Template: hello-elementor
 Version: 1.0.15
*/

/* ===========================
   CSS VARIABLES – Designsystem
   =========================== */

:root {
  --color-primary: #0892A5;
  --color-primary-hover: #067c91;
  --color-secondary: #06908F;
  --color-text: #1F2933;
  --color-text-light: #666666;
  --color-accent: #0CA4A5;
  --color-accent-mauve: #7C6C77;
  --color-background: #FFFFFF;
  --color-background-light: #F9F9F9;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-border-light: #E5E7EB;
  --color-border-dark: #D1D5DB;
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  
  --container-max-width: 1200px;
  --container-narrow-max-width: 800px;
  
  --border-radius-pill: 999px;
  --border-radius-sm: 0.375rem;
}

/* ===========================
   TYPOGRAPHY – Inter font
   =========================== */

/* Global smooth scroll */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body,
.elementor-widget-text-editor,
.elementor-heading-title {
  font-family: var(--font-family);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
}

p {
  margin-bottom: var(--spacing-md);
  font-size: 1rem;
}

/* Korta meningar, en poäng per stycke */
.elementor-widget-text-editor p {
  max-width: 65ch;
}

/* ===========================
   DÖLJ WORDPRESS SIDANS TITEL NÄR ELEMENTOR ANVÄNDS
   =========================== */
/* Detta säkerställer att endast widgetens H1 syns (för SEO och tillgänglighet) */
.elementor-page .entry-title,
.elementor-page .page-title,
.elementor-page h1.entry-title,
.elementor-page h1.page-title,
.elementor-page .site-main .entry-title,
.elementor-page .site-main .page-title,
.elementor-page .entry-header .entry-title,
.elementor-page .entry-header .page-title,
.elementor-page .post-title,
.elementor-page h1.post-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ===========================
   LAYOUT UTILITY CLASSES
   =========================== */

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.container--narrow {
  max-width: var(--container-narrow-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* Sections */
.section {
  padding: var(--spacing-xl) var(--spacing-sm);
}

@media (max-width: 768px) {
  .section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
}

.section--light {
  background-color: var(--color-background-light);
}

.section--tight {
  padding: var(--spacing-lg) var(--spacing-sm);
}

/* Grid */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================
   BUTTONS – Pill-style
   =========================== */

.btn--primary,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
}

@media (min-width: 768px) {
  .btn--primary,
  .elementor-button.elementor-size-md,
  .elementor-button.elementor-size-lg {
    padding: 14px 32px;
  }
}

.btn--primary:hover,
.elementor-button:hover {
  background-color: #067c91;
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--secondary:hover {
  background-color: #057a7a;
  transform: translateY(-1px);
}

/* Elementor button text color */
.elementor-button-text {
  color: #ffffff;
}

/* ===========================
   HEADER V2 – Glassmorphism Pill Header
   Exakt enligt mockup med pills, dropdowns och mobilmeny
   =========================== */

/* SVG icon base */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-lg {
  width: 22px;
  height: 22px;
}

/* ============================================ */
/* HEADER CONTAINER */
/* ============================================ */
.header-wrapper {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

/* Global button reset för header (ta bort default-styling) */
.header-wrapper button,
.header button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
}

.header-wrapper button:focus,
.header-wrapper button:focus-visible,
.header-wrapper button:active,
.header button:focus,
.header button:focus-visible,
.header button:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25));
  backdrop-filter: blur(35px) saturate(200%);
  -webkit-backdrop-filter: blur(35px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  width: 95%;
  max-width: 1400px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  z-index: -1;
  pointer-events: none;
}

.header.scrolled {
  width: 85%;
  max-width: 1400px;
  transform: translateY(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* ============================================ */
/* LOGGA */
/* ============================================ */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  z-index: 10;
  flex-shrink: 0;
}

.logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #0CA4A5, #0892A5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-icon svg {
  width: 22px;
  height: 22px;
  color: white;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  width: auto;
  opacity: 1;
}

.logo-text span {
  font-weight: 700;
  font-size: 14px;
  color: white;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.header.scrolled .logo-text {
  width: 0;
  opacity: 0;
}

/* ============================================ */
/* PILLS CONTAINER */
/* ============================================ */
.pills-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header.scrolled .pills-container {
  pointer-events: auto;
  opacity: 1;
}

/* ============================================ */
/* PILL STYLES */
/* ============================================ */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  width: 130px;
  height: 44px;
  border-radius: 9999px;
  background: linear-gradient(145deg, rgba(8, 146, 165, 0.75), rgba(8, 146, 165, 0.5));
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 8px 32px rgba(8, 146, 165, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.5);
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ta bort default button-styling för button.pill */
button.pill,
.header button.pill,
.pills-container button.pill {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: linear-gradient(145deg, rgba(8, 146, 165, 0.75), rgba(8, 146, 165, 0.5)) !important;
  font-family: inherit;
  margin: 0;
  padding: 0 16px !important;
  color: white !important;
  border-radius: 9999px !important;
  box-shadow: 
    0 8px 32px rgba(8, 146, 165, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Vit text och SVG för button.pill */
button.pill,
button.pill .pill-text,
button.pill span,
.header button.pill,
.header button.pill .pill-text,
.header button.pill span,
.pills-container button.pill,
.pills-container button.pill .pill-text,
.pills-container button.pill span {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Vit SVG för button.pill */
button.pill svg,
.header button.pill svg,
.pills-container button.pill svg {
  color: white !important;
  stroke: white !important;
  fill: none !important;
}

button.pill:focus,
button.pill:focus-visible,
.header button.pill:focus,
.header button.pill:focus-visible,
.pills-container button.pill:focus,
.pills-container button.pill:focus-visible {
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 
    0 8px 32px rgba(8, 146, 165, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

button.pill:hover,
.header button.pill:hover,
.pills-container button.pill:hover {
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

button.pill:active,
.header button.pill:active,
.pills-container button.pill:active {
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.header.scrolled .pill {
  transform: scale(1);
  opacity: 1;
}

.pill:hover {
  transform: scale(1.03);
  box-shadow: 
    0 12px 40px rgba(8, 146, 165, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.15),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.header.scrolled .pill:hover {
  transform: scale(1.03);
}

.pill svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: white;
  stroke: white;
  fill: none;
}

/* Säkerställ att alla pills har samma border-radius */
.pill,
button.pill,
a.pill {
  border-radius: 9999px !important;
}

.pill .chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.pill-wrapper:hover .pill .chevron,
.pill-wrapper.open .pill .chevron {
  transform: rotate(180deg);
}

/* Stagger animation delays */
.pill-wrapper:nth-child(1) .pill,
.pills-container > a:nth-child(1) { transition-delay: 0.05s; }
.pill-wrapper:nth-child(2) .pill,
.pills-container > a:nth-child(2) { transition-delay: 0.1s; }
.pills-container > a:nth-child(3) { transition-delay: 0.15s; }
.pills-container > a:nth-child(4) { transition-delay: 0.2s; }

/* ============================================ */
/* DROPDOWN */
/* ============================================ */
.pill-wrapper {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 220px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

/* Desktop: hover för att öppna dropdown */
@media (min-width: 769px) {
  .pill-wrapper:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
  }
}

/* Mobil: dropdown öppnas ENDAST via .open-klassen (hanteras av JavaScript) */
@media (max-width: 768px) {
  /* Förhindra hover-effekter på mobil - dropdown ska ALDRIG öppnas via hover */
  .pill-wrapper:hover .dropdown,
  .pill-wrapper .dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Dropdown öppnas ENDAST när .open-klassen finns */
  .pill-wrapper.open .dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) scale(1);
  }
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown a:hover {
  background: rgba(8, 146, 165, 0.35);
  color: #0892A5;
  font-weight: 600;
  border: 2px solid rgba(8, 146, 165, 0.5);
  box-shadow: 
    0 4px 12px rgba(8, 146, 165, 0.3),
    0 0 0 3px rgba(8, 146, 165, 0.1);
  transform: translateX(4px) scale(1.02);
}

.dropdown-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(8, 146, 165, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-icon svg {
  width: 16px;
  height: 16px;
  color: #0892A5;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown a:hover .dropdown-icon {
  background: rgba(8, 146, 165, 0.4);
  transform: scale(1.1);
}

.dropdown a:hover .dropdown-icon svg {
  color: #0892A5;
  transform: scale(1.1);
}

/* ============================================ */
/* HAMBURGER */
/* ============================================ */
.hamburger {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
  appearance: none;
  padding: 0 !important;
  margin: 0;
  font-family: inherit;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.hamburger:focus,
.hamburger:focus-visible,
.hamburger:active,
.header .hamburger:focus,
.header .hamburger:focus-visible,
.header .hamburger:active {
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) !important;
}

.hamburger:hover:focus,
.hamburger:hover:focus-visible,
.header .hamburger:hover:focus,
.header .hamburger:hover:focus-visible,
.header-wrapper .hamburger:hover:focus,
.header-wrapper .hamburger:hover:focus-visible,
.elementor-location-header .hamburger:hover:focus,
.elementor-location-header .hamburger:hover:focus-visible {
  background: linear-gradient(135deg, rgba(8, 146, 165, 0.9), rgba(8, 146, 165, 0.75)) !important;
  outline: none !important;
  border: 1px solid rgba(8, 146, 165, 0.5) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
}

.hamburger:hover,
.header .hamburger:hover,
.header-wrapper .hamburger:hover,
.elementor-location-header .hamburger:hover,
.elementor-location-header.scrolled .hamburger:hover {
  background: linear-gradient(135deg, rgba(8, 146, 165, 0.9), rgba(8, 146, 165, 0.75)) !important;
  border: 1px solid rgba(8, 146, 165, 0.5) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 
    0 6px 20px rgba(8, 146, 165, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.05);
}

.hamburger svg {
  width: 20px;
  height: 20px;
  color: white;
  stroke: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: block;
}

.hamburger:hover svg {
  color: white !important;
  stroke: white !important;
}

.hamburger .icon-x {
  display: none;
}

.hamburger.open .icon-menu {
  display: none;
}

.hamburger.open .icon-x {
  display: block;
}

/* ============================================ */
/* MOBILE MENU */
/* ============================================ */
.mobile-menu {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 90%;
  max-width: 500px; /* Mindre max-width för cirkulär form */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 32px; /* Mycket rundad för cirkulär känsla */
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 24px;
  z-index: 1001; /* Högre än header-wrapper (1000) för att vara ovanpå */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

body.scrolled .mobile-menu {
  width: 85%;
  max-width: 450px;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Desktop: mobilmenyn ska matcha headerns bredd */
@media (min-width: 768px) {
  .mobile-menu {
    max-width: none; /* Ta bort max-width på desktop */
  }
  
  body.scrolled .mobile-menu {
    max-width: none; /* Ta bort max-width på desktop även när scrolled */
  }
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(8, 146, 165, 0.15);
  border-radius: 12px;
  margin-bottom: 16px;
  text-decoration: none;
}

.mobile-menu-header .phone-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0892A5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-header .phone-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.mobile-menu-header .phone-text {
  display: flex;
  flex-direction: column;
}

.mobile-menu-header .phone-label {
  font-size: 12px;
  color: #64748b;
}

.mobile-menu-header .phone-number {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.mobile-menu-section {
  margin-bottom: 8px;
}

.mobile-menu-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-section-title:hover {
  background: rgba(8, 146, 165, 0.2);
  border: 2px solid rgba(8, 146, 165, 0.4);
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.2);
  transform: scale(1.01);
}

.mobile-menu-section-title svg {
  width: 18px;
  height: 18px;
  color: #64748b;
  transition: transform 0.3s ease;
}

.mobile-menu-section.open .mobile-menu-section-title svg {
  transform: rotate(180deg);
}

.mobile-menu-section-content {
  display: none;
  padding-left: 16px;
}

.mobile-menu-section.open .mobile-menu-section-content {
  display: block;
}

.mobile-menu-section-content a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: #64748b;
  font-size: 14px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-section-content a:hover {
  background: rgba(8, 146, 165, 0.35);
  color: #0892A5;
  font-weight: 600;
  border: 2px solid rgba(8, 146, 165, 0.5);
  box-shadow: 
    0 4px 12px rgba(8, 146, 165, 0.3),
    0 0 0 3px rgba(8, 146, 165, 0.1);
  transform: translateX(4px) scale(1.02);
}

.mobile-menu-section-content a svg {
  width: 16px;
  height: 16px;
  color: #0892A5;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-section-content a:hover svg {
  transform: scale(1.1);
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: #1e293b;
  font-weight: 500;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-link:hover {
  background: rgba(8, 146, 165, 0.35);
  color: #0892A5;
  font-weight: 600;
  border: 2px solid rgba(8, 146, 165, 0.5);
  box-shadow: 
    0 4px 12px rgba(8, 146, 165, 0.3),
    0 0 0 3px rgba(8, 146, 165, 0.1);
  transform: translateX(4px) scale(1.02);
}

.mobile-menu-link svg {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-link:hover svg {
  transform: scale(1.1);
}

.mobile-menu-link svg {
  width: 20px;
  height: 20px;
  color: #0892A5;
}

.mobile-menu-cta {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  background: linear-gradient(to bottom right, #0CA4A5, #0892A5);
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-menu-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.4);
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 768px) {
  .header.scrolled {
    width: 92%;
  }
  
  .pills-container {
    gap: 6px;
  }
  
  .pill {
    padding: 0 12px;
    width: 110px;
    height: 40px;
    font-size: 13px;
  }
  
  .pill svg {
    width: 16px;
    height: 16px;
  }
  
  .pill-text {
    display: none;
  }
  
  .pill .chevron {
    display: none;
  }
}

@media (max-width: 480px) {
  .header.scrolled {
    width: 95%;
  }
  
  .pill {
    width: 44px;
    padding: 0;
  }
}

/* ===========================
   HEADER – Elementor Site Header (GAMMAL - behålls för bakåtkompatibilitet)
   Variant 4: Glassmorphism Light Header
   =========================== */

/* Header Container - Fixed över hero, blir solid vid scroll - Fullbredd
   Variant 1: Floating Navigation Cards */
.elementor-location-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 1.0) !important; /* Opak bakgrund när över hero-sektionen */
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease !important;
}

/* Header när man scrollat ner - solid bakgrund */
.elementor-location-header.scrolled,
.elementor-location-header:not(.at-hero) {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(8, 146, 165, 0.1) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Accent-stripe överst - BORTRAGEN för att matcha hero bättre */
.elementor-location-header::before {
  display: none !important;
  content: none !important;
}

/* Header Section - Fullbredd */
.elementor-location-header .elementor-section {
  background: transparent;
  padding: 1.5rem 0 !important; /* Lika mycket topp och botten */
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
}

/* Container - Fullbredd */
.elementor-location-header .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 4rem !important;
}

@media (max-width: 1200px) {
  .elementor-location-header .elementor-container {
    padding: 0 2rem !important;
  }
}

/* Row Layout - Flexbox för enkelradig header */
.elementor-location-header .elementor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem !important;
  min-height: 60px;
}

/* Kolumner */
.elementor-location-header .elementor-column {
  display: flex;
  align-items: center;
}

/* Logo - Vänster */
.elementor-location-header .elementor-column:first-child {
  flex-shrink: 0;
}

.elementor-location-header .elementor-widget-image img {
  max-height: 40px;
  height: auto;
  width: auto;
  transition: filter 0.3s ease;
}

/* Logo - Vit filter på hero, normal efter scroll */
.elementor-location-header .elementor-widget-image img {
  filter: brightness(0) invert(1);
}

.elementor-location-header.scrolled .elementor-widget-image img,
.elementor-location-header:not(.at-hero) .elementor-widget-image img {
  filter: none;
}

/* Navigation - Centrerad och balanserad */
.elementor-location-header .elementor-column:nth-child(2) {
  flex: none; /* Ingen expansion - bara så bred som innehållet */
  justify-content: center;
  min-width: 0;
}

/* Navigation Widget - Card wrapper (Variant 1: Floating Navigation Cards - Pill form) */
.elementor-location-header .elementor-widget-nav-menu,
.elementor-location-header .elementor-column .elementor-widget-nav-menu {
  width: auto !important;
  max-width: fit-content !important; /* Bara så bred som innehållet */
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* Card styling - FLOATING NAVIGATION CARD - Pill form */
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--border-radius-pill) !important; /* Pill form */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 0.5rem !important;
  margin: 0 !important;
}

/* Navigation Menu - Inside card */
.elementor-location-header .elementor-nav-menu {
  display: flex !important;
  align-items: center;
  gap: 0.5rem !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important; /* Inga wraps - kompakt layout */
  justify-content: center;
  background: transparent !important;
  border: none !important;
  width: auto !important; /* Bara så bred som innehållet */
}

/* CTA - Höger */
.elementor-location-header .elementor-column:last-child {
  flex-shrink: 0;
}

/* Navigation Widget - Scrolled state (Card wrapper) */
.elementor-location-header.scrolled .elementor-widget-nav-menu,
.elementor-location-header:not(.at-hero) .elementor-widget-nav-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(8, 146, 165, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.elementor-location-header .elementor-nav-menu a {
  font-size: 0.9rem !important;
  font-weight: 500;
  text-decoration: none;
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  position: relative;
  transition: all 0.3s ease;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--border-radius-pill) !important; /* Pill form */
  white-space: nowrap;
  display: block;
}

/* Navigation text - Mörk efter scroll */
.elementor-location-header.scrolled .elementor-nav-menu a,
.elementor-location-header:not(.at-hero) .elementor-nav-menu a {
  color: var(--color-text) !important;
  text-shadow: none !important;
}

/* Hover-effekt - Card elevation (Variant 1) */
.elementor-location-header .elementor-nav-menu a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
}

.elementor-location-header.scrolled .elementor-nav-menu a:hover,
.elementor-location-header:not(.at-hero) .elementor-nav-menu a:hover {
  background: rgba(8, 146, 165, 0.1) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.2) !important;
}

/* Remove old underline effect */
.elementor-location-header .elementor-nav-menu > li:not(.menu-item-has-children) > a::after {
  display: none !important;
}

/* Dropdown Menu */
.elementor-location-header .elementor-nav-menu li {
  position: relative;
}

.elementor-location-header .elementor-nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  min-width: 220px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1001;
  list-style: none;
  border: 1px solid rgba(8, 146, 165, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Sub-menu for hero state */
.elementor-location-header:not(.scrolled) .elementor-nav-menu .sub-menu {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.elementor-location-header .elementor-nav-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.elementor-location-header .elementor-nav-menu .sub-menu a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--color-text);
  font-size: 0.9rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  margin-bottom: 0.25rem;
}

.elementor-location-header .elementor-nav-menu .sub-menu a:last-child {
  margin-bottom: 0;
}

.elementor-location-header .elementor-nav-menu .sub-menu a::after {
  display: none;
}

.elementor-location-header .elementor-nav-menu .sub-menu a:hover {
  background: rgba(8, 146, 165, 0.1);
  color: var(--color-primary);
  transform: translateX(4px);
}

/* Dropdown-indikator */
.elementor-location-header .elementor-nav-menu .menu-item-has-children > a {
  padding-right: 1.2rem;
}

.elementor-location-header .elementor-nav-menu .menu-item-has-children > a::before {
  content: "▼";
  font-size: 0.6rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  transition: transform 0.2s ease, color 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.elementor-location-header.scrolled .elementor-nav-menu .menu-item-has-children > a::before,
.elementor-location-header:not(.at-hero) .elementor-nav-menu .menu-item-has-children > a::before {
  color: var(--color-text);
  text-shadow: none;
}

.elementor-location-header .elementor-nav-menu .menu-item-has-children:hover > a::before {
  transform: translateY(-50%) rotate(180deg);
}

.elementor-location-header.scrolled .elementor-nav-menu .menu-item-has-children:hover > a::before,
.elementor-location-header:not(.at-hero) .elementor-nav-menu .menu-item-has-children:hover > a::before {
  color: var(--color-primary);
}

/* CTA Button - White button på hero (Variant 1) - Pill form */
.elementor-location-header .elementor-button {
  background: white !important;
  color: #0892A5 !important;
  padding: 1rem 2.5rem !important;
  border-radius: var(--border-radius-pill) !important; /* Pill form */
  font-weight: 600;
  font-size: 1rem !important;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
}

/* CTA Button - Solid gradient efter scroll */
.elementor-location-header.scrolled .elementor-button,
.elementor-location-header:not(.at-hero) .elementor-button {
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(8, 146, 165, 0.4) !important;
}

.elementor-location-header .elementor-button:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
  color: #0892A5 !important;
}

.elementor-location-header .elementor-button:hover .elementor-button-text,
.elementor-location-header .elementor-button:hover span,
.elementor-location-header .elementor-button:hover * {
  color: #0892A5 !important;
}

.elementor-location-header.scrolled .elementor-button:hover,
.elementor-location-header:not(.at-hero) .elementor-button:hover {
  box-shadow: 0 12px 32px rgba(8, 146, 165, 0.5) !important;
  color: white !important;
}

.elementor-location-header.scrolled .elementor-button:hover .elementor-button-text,
.elementor-location-header.scrolled .elementor-button:hover span,
.elementor-location-header.scrolled .elementor-button:hover *,
.elementor-location-header:not(.at-hero) .elementor-button:hover .elementor-button-text,
.elementor-location-header:not(.at-hero) .elementor-button:hover span,
.elementor-location-header:not(.at-hero) .elementor-button:hover * {
  color: white !important;
}

.elementor-location-header .elementor-button-text {
  color: inherit !important;
}

/* Hamburger Menu Toggle - dölj på desktop */
.ffl-mobile-menu-toggle {
  display: none;
}

.ffl-mobile-menu-overlay {
  display: none !important;
}

.ffl-mobile-menu-close {
  display: none;
}

/* Mobil */
@media (max-width: 768px) {
  .elementor-location-header .elementor-container {
    padding: 0 1rem;
  }
  
  .elementor-location-header .elementor-section {
    padding: 1.25rem 0 !important; /* Öka padding för mer mellanrum i headern i mobilvy - !important för att åsidosätta desktop-regeln */
  }
  
  .elementor-location-header .elementor-row {
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: space-between;
  }
  
  /* Logo - vänster */
  .elementor-location-header .elementor-column:first-child {
    flex-shrink: 0;
    z-index: 1002;
  }
  
  .elementor-location-header .elementor-widget-image img {
    max-height: 35px;
  }
  
  /* Navigation - dölj helt på mobil som standard */
  .elementor-location-header .elementor-column:nth-child(2),
  .elementor-location-header .elementor-widget-nav-menu,
  .elementor-location-header .elementor-nav-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Adjust padding on mobile for Variant 1 */
  .elementor-location-header .elementor-container {
    padding: 0 1rem !important;
  }

  .elementor-location-header .elementor-row {
    gap: 1rem !important;
  }

  .elementor-location-header .elementor-button {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Navigation - visa som slide-in meny när aktiv */
  .elementor-location-header .elementor-column:nth-child(2).ffl-mobile-menu-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 80% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #ffffff !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1002 !important;
    padding: 4rem 2rem 2rem !important;
    overflow-y: auto;
    animation: slideInRight 0.3s ease;
  }
  
  .elementor-location-header .elementor-column:nth-child(2).ffl-mobile-menu-open .elementor-widget-nav-menu,
  .elementor-location-header .elementor-column:nth-child(2).ffl-mobile-menu-open .elementor-nav-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  @keyframes slideInRight {
    from {
      right: -100%;
      opacity: 0;
    }
    to {
      right: 0;
      opacity: 1;
    }
  }
  
  /* Navigation menu - vertikal på mobil */
  .elementor-location-header .elementor-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  
  .elementor-location-header .elementor-nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(8, 146, 165, 0.1);
  }
  
  .elementor-location-header .elementor-nav-menu a {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
    width: 100%;
  }
  
  .elementor-location-header .elementor-nav-menu a::after {
    display: none;
  }
  
  /* Dropdown - visa som expanderbar lista */
  .elementor-location-header .elementor-nav-menu .sub-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    background: rgba(8, 146, 165, 0.05);
    border: none;
    margin-top: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .elementor-location-header .elementor-nav-menu .menu-item-has-children.active > .sub-menu {
    max-height: 500px;
  }
  
  .elementor-location-header .elementor-nav-menu .sub-menu a {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  .elementor-location-header .elementor-nav-menu .sub-menu a:hover {
    padding-left: 1.5rem;
    background: rgba(8, 146, 165, 0.1);
  }
  
  /* Dropdown-indikator - gör klickbar */
  .elementor-location-header .elementor-nav-menu .menu-item-has-children > a {
    padding-right: 2rem;
    position: relative;
  }
  
  .elementor-location-header .elementor-nav-menu .menu-item-has-children > a::before {
    right: 0;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  
  .elementor-location-header .elementor-nav-menu .menu-item-has-children.active > a::before {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* CTA Button - gör mindre eller dölj */
  .elementor-location-header .elementor-column:last-child {
    flex-shrink: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
  }
  
  .elementor-location-header .elementor-button {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }
  
  /* Se till att hamburger-knappen alltid visas på mobil */
  .ffl-mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1003 !important;
    width: 24px;
    height: 20px;
  }
  
  .ffl-mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Hamburger-knapp mörk efter scroll */
  .elementor-location-header.scrolled .ffl-mobile-menu-toggle span,
  .elementor-location-header:not(.at-hero) .ffl-mobile-menu-toggle span,
  .ffl-custom-header.scrolled .ffl-mobile-menu-toggle span,
  .ffl-custom-header:not(.at-hero) .ffl-mobile-menu-toggle span {
    background: var(--color-text);
    box-shadow: none;
  }
  
  .ffl-mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .ffl-mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .ffl-mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  
  
  /* Hamburger Menu Toggle Button - visa på mobil */
  .ffl-mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
    position: relative;
    flex-shrink: 0;
  }
  
  .ffl-mobile-menu-close {
    display: flex !important;
  }
  
  /* Dölj navigation widget på mobil */
  .elementor-location-header .elementor-widget-nav-menu {
    display: none !important;
  }
  
  .elementor-location-header .elementor-column:nth-child(2).ffl-mobile-menu-open .elementor-widget-nav-menu {
    display: block !important;
    width: 100%;
  }
  
  /* Dölj alla navigation-länkar på mobil (för säkerhets skull) */
  .elementor-location-header .elementor-nav-menu:not(.ffl-mobile-menu-open *) {
    display: none !important;
  }
  
  .elementor-location-header .elementor-column:nth-child(2).ffl-mobile-menu-open .elementor-nav-menu {
    display: flex !important;
  }
  
  .ffl-mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Hamburger-knapp mörk efter scroll */
  .elementor-location-header.scrolled .ffl-mobile-menu-toggle span,
  .elementor-location-header:not(.at-hero) .ffl-mobile-menu-toggle span,
  .ffl-custom-header.scrolled .ffl-mobile-menu-toggle span,
  .ffl-custom-header:not(.at-hero) .ffl-mobile-menu-toggle span {
    background: var(--color-text);
    box-shadow: none;
  }
  
  .ffl-mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }
  
  .ffl-mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .ffl-mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
  }
  
  /* Overlay är borttagen - ingen mörk bakgrund */
  
  /* Stäng-knapp i mobil-meny */
  .ffl-mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1003 !important;
    line-height: 1;
  }
  
  /* Dölj alla stäng-knappar utom den första - mer robust */
  .ffl-header-nav.ffl-mobile-menu-open .ffl-mobile-menu-close:not(:first-child),
  .elementor-column.ffl-mobile-menu-open .ffl-mobile-menu-close:not(:first-child),
  .ffl-mobile-menu-close:not(:first-of-type),
  .ffl-mobile-menu-close ~ .ffl-mobile-menu-close,
  .ffl-mobile-menu-close + .ffl-mobile-menu-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
}

/* ===========================
   CUSTOM HEADER (Fallback om inte Elementor Site Header)
   Variant 4: Glassmorphism Light Header
   =========================== */

/* Custom Header - Variant 1: Floating Navigation Cards */
.ffl-custom-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease !important;
  padding: 1.5rem 0 !important; /* Lika mycket topp och botten */
}

/* Custom header när man scrollat ner - solid bakgrund */
.ffl-custom-header.scrolled,
.ffl-custom-header:not(.at-hero) {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(8, 146, 165, 0.1) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Navigation card - Scrolled state */
.ffl-custom-header.scrolled .ffl-header-nav,
.ffl-custom-header:not(.at-hero) .ffl-header-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(8, 146, 165, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.ffl-header-container {
  position: relative;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 4rem !important;
}

@media (max-width: 1200px) {
  .ffl-header-container {
    padding: 0 2rem !important;
  }
}

/* Accent-stripe - BORTRAGEN för att matcha hero bättre */
.ffl-header-accent {
  display: none !important;
}

.ffl-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 60px;
  padding: 0; /* Padding hanteras av headern */
}

.ffl-header-logo {
  flex-shrink: 0;
}

.ffl-header-logo img {
  max-height: 40px;
  height: auto;
  width: auto;
  transition: filter 0.3s ease;
  filter: brightness(0) invert(1); /* Vit logo på hero */
}

.ffl-custom-header.scrolled .ffl-header-logo img,
.ffl-custom-header:not(.at-hero) .ffl-header-logo img {
  filter: none; /* Normal logo efter scroll */
}

.ffl-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.ffl-custom-header.scrolled .ffl-logo-text,
.ffl-custom-header:not(.at-hero) .ffl-logo-text {
  color: var(--color-primary);
  text-shadow: none;
}

.ffl-header-nav {
  flex: none !important; /* Ingen expansion - bara så bred som innehållet */
  display: inline-flex !important;
  justify-content: center;
  min-width: 0;
  max-width: fit-content !important; /* Bara så bred som innehållet */
  width: auto !important;
  /* Variant 1: Floating Navigation Card - Pill form */
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--border-radius-pill) !important; /* Pill form */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 0.5rem !important;
}

.ffl-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem !important;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap; /* Inga wraps - kompakt layout */
  justify-content: center;
  background: transparent !important;
  border: none !important;
  width: auto; /* Bara så bred som innehållet */
}

.ffl-nav-menu a {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: all 0.3s ease;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--border-radius-pill) !important; /* Pill form */
  white-space: nowrap;
  display: block;
}

/* Navigation text - Mörk efter scroll */
.ffl-custom-header.scrolled .ffl-nav-menu a,
.ffl-custom-header:not(.at-hero) .ffl-nav-menu a {
  color: var(--color-text);
  text-shadow: none;
}

/* Remove underline effect - Variant 1 uses card hover instead */
.ffl-nav-menu > li:not(.menu-item-has-children) > a::after {
  display: none !important;
}

/* Hover-effekt - Card elevation (Variant 1) */
.ffl-nav-menu a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
}

.ffl-custom-header.scrolled .ffl-nav-menu a:hover,
.ffl-custom-header:not(.at-hero) .ffl-nav-menu a:hover {
  background: rgba(8, 146, 165, 0.1) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.2) !important;
}

/* Dropdown för custom header */
.ffl-nav-menu li {
  position: relative;
}

.ffl-nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1001;
  list-style: none;
  border: 1px solid rgba(8, 146, 165, 0.1);
  margin: 0;
}

.ffl-nav-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.ffl-nav-menu .sub-menu a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--color-text);
  font-size: 0.9rem;
}

.ffl-nav-menu .sub-menu a::after {
  display: none;
}

.ffl-nav-menu .sub-menu a:hover {
  background: rgba(8, 146, 165, 0.08);
  color: var(--color-primary);
  padding-left: 1.75rem;
}

/* Dropdown-indikator för custom header */
.ffl-nav-menu .menu-item-has-children > a {
  padding-right: 1.2rem;
}

.ffl-nav-menu .menu-item-has-children > a::before {
  content: "▼";
  font-size: 0.6rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  transition: transform 0.2s ease, color 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ffl-custom-header.scrolled .ffl-nav-menu .menu-item-has-children > a::before,
.ffl-custom-header:not(.at-hero) .ffl-nav-menu .menu-item-has-children > a::before {
  color: var(--color-text);
  text-shadow: none;
}

.ffl-nav-menu .menu-item-has-children:hover > a::before {
  transform: translateY(-50%) rotate(180deg);
}

.ffl-custom-header.scrolled .ffl-nav-menu .menu-item-has-children:hover > a::before,
.ffl-custom-header:not(.at-hero) .ffl-nav-menu .menu-item-has-children:hover > a::before {
  color: var(--color-primary);
}

.ffl-header-cta {
  flex-shrink: 0;
}

.ffl-cta-button {
  background: white !important;
  color: #0892A5 !important;
  padding: 1rem 2.5rem !important;
  border-radius: var(--border-radius-pill) !important; /* Pill form */
  font-weight: 600;
  font-size: 1rem !important;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
}

/* CTA Button - Solid gradient efter scroll */
.ffl-custom-header.scrolled .ffl-cta-button,
.ffl-custom-header:not(.at-hero) .ffl-cta-button {
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(8, 146, 165, 0.4) !important;
}

.ffl-cta-button:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

.ffl-custom-header.scrolled .ffl-cta-button:hover,
.ffl-custom-header:not(.at-hero) .ffl-cta-button:hover {
  box-shadow: 0 12px 32px rgba(8, 146, 165, 0.5) !important;
}

.ffl-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 146, 165, 0.35);
}

/* Custom header mobil */
@media (max-width: 768px) {
  .ffl-custom-header {
    padding: 1.5rem 0 !important; /* Padding för headern i mobilvy */
  }
  
  .ffl-header-container {
    padding: 0 1rem;
  }
  
  .ffl-header-content {
    flex-wrap: nowrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
  }
  
  /* Logo */
  .ffl-header-logo {
    flex: 1;
    flex-shrink: 1;
    min-width: 0;
    z-index: 1002;
    overflow: hidden;
  }
  
  .ffl-header-logo img {
    max-height: 32px;
    width: auto;
  }
  
  .ffl-logo-text {
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  /* Navigation - dölj på mobil */
  .ffl-header-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Navigation - visa som slide-in meny när aktiv */
  .ffl-header-nav.ffl-mobile-menu-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 80% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #ffffff !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1002 !important;
    padding: 4rem 2rem 2rem !important;
    overflow-y: auto;
    animation: slideInRight 0.3s ease;
    flex: none;
    justify-content: flex-start;
  }
  
  /* Navigation menu - vertikal på mobil */
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(8, 146, 165, 0.1);
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu a {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
    width: 100%;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu a::after {
    display: none;
  }
  
  /* Dropdown - visa som expanderbar lista */
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .sub-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    background: rgba(8, 146, 165, 0.05);
    border: none;
    margin-top: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .menu-item-has-children.active > .sub-menu {
    max-height: 500px;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .sub-menu a {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .sub-menu a:hover {
    padding-left: 1.5rem;
    background: rgba(8, 146, 165, 0.1);
  }
  
  /* Dropdown-indikator - gör klickbar */
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .menu-item-has-children > a {
    padding-right: 2rem;
    position: relative;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .menu-item-has-children > a::before {
    right: 0;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  
  .ffl-header-nav.ffl-mobile-menu-open .ffl-nav-menu .menu-item-has-children.active > a::before {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* CTA Button - dölj på mobil */
  .ffl-header-cta {
    flex-shrink: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    margin-left: auto;
  }
  
  .ffl-cta-button {
    display: none !important;
  }
  
  /* Hamburger-knappen i CTA-området - visa även om CTA-knappen är dold */
  .ffl-header-cta .ffl-mobile-menu-toggle {
    margin-right: 0;
    flex-shrink: 0;
    display: flex !important;
  }
  
  .ffl-header-content {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .ffl-header-nav {
    order: 3;
    width: 100%;
  }
}

/* ===========================
   CUSTOM FOOTER (Fallback)
   =========================== */

.ffl-custom-footer {
  background: var(--color-background-light);
  border-top: 1px solid rgba(8, 146, 165, 0.1);
  padding: 2rem 0;
  margin-top: 4rem;
}

.ffl-footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.ffl-footer-content {
  text-align: center;
}

.ffl-footer-copyright {
  color: var(--color-text);
  font-size: 0.9rem;
  margin: 0;
}

/* Säkerställ att Elementor-widgets följer designsystemet */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-family);
  color: var(--color-text);
}

/* Widget-specifika rubrikfärger - använder specifika selektorer för att bara påverka widgets */
/* Enligt Elementor best practices: använd widget-specifika klasser med högre specificitet */
/* Privatflytt Pris Widget */
.ffl-privatflytt-pris h2,
.ffl-privatflytt-pris-container h2,
.ffl-privatflytt-pris h3,
.ffl-privatflytt-pris-container h3,
section.ffl-privatflytt-pris h2,
section.ffl-privatflytt-pris .ffl-privatflytt-pris-container h2,
section.ffl-privatflytt-pris h3,
section.ffl-privatflytt-pris .ffl-privatflytt-pris-container h3 {
  color: var(--color-text) !important;
}

/* Privatflytt Process Widget */
.ffl-process-alternating-diagonal h2,
.ffl-process-alternating-diagonal-container h2,
.ffl-process-alternating-diagonal-header h2,
.ffl-process-alternating-diagonal-step-content h3,
section.ffl-process-alternating-diagonal h2,
section.ffl-process-alternating-diagonal .ffl-process-alternating-diagonal-container h2,
section.ffl-process-alternating-diagonal .ffl-process-alternating-diagonal-header h2,
section.ffl-process-alternating-diagonal .ffl-process-alternating-diagonal-step-content h3 {
  color: var(--color-text) !important;
}

.elementor-text-editor {
  font-family: var(--font-family);
  color: var(--color-text);
}

/* Hero-sektion */
.elementor-section.elementor-section-height-full {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* ===========================
   HERO SCROLL EXPANSION
   =========================== */

.ffl-hero-scroll-expansion {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

/* Bakgrundsbild med overlay */
.ffl-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  z-index: 1;
  pointer-events: none; /* Förhindra att bilden blockerar klick på innehåll */
}

/* Overlay borttagen - bilden visas utan färgfilter */

/* Innehållscontainer */
.ffl-hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-sm);
  text-align: center;
  color: #ffffff;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* Säkerställ att innehåll är klickbart */
}

/* H1 i hero */
.ffl-hero-content h1,
.ffl-hero-h1 {
  color: #ffffff;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;
  text-align: center;
  width: 100%;
}

/* Stödtext i hero */
.ffl-hero-content .ffl-hero-lead {
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
  text-align: center;
  width: 100%;
}

/* CTA-knappar container */
.ffl-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.25rem;
  position: relative;
  z-index: 1002; /* Högre än hero-content för att säkerställa klickbarhet */
  pointer-events: auto;
}

/* Primär CTA-knapp i hero */
.ffl-hero-cta-primary,
button.ffl-hero-cta-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #ffffff;
  padding: 16px 36px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(8, 146, 165, 0.45);
  min-width: 200px;
  position: relative;
  z-index: 1003; /* Högre än hero-ctas (1002) och header (1000) för att säkerställa att den är klickbar */
  pointer-events: auto;
  touch-action: manipulation; /* Förbättrar touch-respons på mobil */
  font-family: inherit; /* Ärv font från body */
  -webkit-appearance: none; /* Ta bort default iOS-styling */
  appearance: none;
}

.ffl-hero-cta-primary:hover {
  background: linear-gradient(135deg, #067c91 0%, #0a8d8e 100%);
  box-shadow: 0 8px 25px rgba(8, 146, 165, 0.6);
  transform: translateY(-3px);
}

/* Sekundär CTA-knapp i hero */
.ffl-hero-cta-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 16px 36px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 200px;
}

.ffl-hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

/* Microtrust-text */
.ffl-hero-microtrust {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow: hidden;
  width: 100%;
}

.ffl-hero-microtrust-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: scroll-microtrust 20s linear infinite;
  white-space: nowrap;
}

@keyframes scroll-microtrust {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ffl-hero-microtrust span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 0.25rem;
  white-space: nowrap;
}

.ffl-hero-microtrust span:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
  margin-right: 0.25rem;
  opacity: 0.65;
  font-weight: 300;
}

/* ===========================
   TYPOGRAPHY - Fasta storlekar för mobil
   =========================== */
@media (max-width: 768px) {
  /* Fasta fontstorlekar för rubriker på mobil */
  h1 {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.25;
  }

  h2 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.35;
  }

  h4 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4;
  }

  h5 {
    font-size: 1rem !important; /* 16px */
    line-height: 1.45;
  }

  h6 {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5;
  }

  /* Fasta fontstorlekar för brödtext på mobil */
  p,
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-text-editor,
  .elementor-widget-text-editor *,
  .elementor-text-editor * {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.6;
  }

  /* Överstyr inline-styles från Elementor för text */
  .elementor-widget-text-editor[style*="font-size"],
  .elementor-text-editor[style*="font-size"],
  .elementor-widget-text-editor p[style*="font-size"] {
    font-size: 0.9375rem !important;
  }

  /* Fasta storlekar för Elementor headings på mobil */
  .elementor-heading-title {
    font-size: inherit !important;
  }

  /* Se till att Elementor H2 får rätt storlek (vanligast för sektionsrubriker) */
  .elementor-widget-heading h2.elementor-heading-title,
  .elementor-widget-heading .elementor-heading-title.elementor-size-default,
  .elementor-widget-heading .elementor-heading-title[data-size="default"] {
    font-size: 1.5rem !important; /* 24px - samma som H2 */
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* Elementor H1 */
  .elementor-widget-heading h1.elementor-heading-title,
  .elementor-widget-heading .elementor-heading-title.elementor-size-xl {
    font-size: 1.75rem !important; /* 28px - samma som H1 */
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  /* Elementor H3 */
  .elementor-widget-heading h3.elementor-heading-title,
  .elementor-widget-heading .elementor-heading-title.elementor-size-small {
    font-size: 1.25rem !important; /* 20px - samma som H3 */
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  /* Överstyr inline-styles från Elementor */
  .elementor-widget-heading .elementor-heading-title[style*="font-size"] {
    font-size: inherit !important;
  }

  /* Fasta storlekar för länkar */
  a {
    font-size: 1rem;
  }

  /* Fasta storlekar för knappar */
  .btn,
  .elementor-button,
  button {
    font-size: 1rem !important;
  }
}

/* Responsiv design - mobil */
@media (max-width: 768px) {
  .ffl-hero-scroll-expansion {
    min-height: auto;
    padding: 7rem 0 2rem 0; /* Ökad padding-top för mer utrymme till header */
    display: flex;
    flex-direction: column; /* Stapla element vertikalt istället för horisontellt */
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Gradient-bakgrund - exakt samma som privatflytt */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  }

  /* Diagonala streck overlay - exakt samma som privatflytt */
  .ffl-hero-scroll-expansion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.03) 10px,
        rgba(255, 255, 255, 0.03) 20px
      ),
      linear-gradient(135deg, rgba(8, 146, 165, 0.95) 0%, rgba(12, 164, 165, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Dölj bilden på mobil */
  .ffl-hero-image {
    display: none;
  }

  .ffl-hero-content {
    padding: 1rem 1.25rem;
    max-width: 100%;
    width: 100%; /* Ta full bredd i flex-container */
    position: relative;
    z-index: 100 !important;
    /* Vit text på mörk gradient bakgrund - samma som privatflytt */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: auto !important;
    flex-shrink: 0; /* Förhindra att innehållet krymper */
  }

  .ffl-hero-content h1,
  .ffl-hero-h1 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    /* Vit text på mörk gradient bakgrund - samma som privatflytt */
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  .ffl-hero-content .ffl-hero-lead {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
    max-width: 100%;
    padding: 0;
    /* Vit text på mörk gradient bakgrund - samma som privatflytt */
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
  }

  .ffl-hero-ctas {
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1rem;
    width: 100%;
  }

  /* Dölj hero-knappen på mobil */
  .ffl-hero-cta-primary.ffl-hero-popup-trigger {
    display: none !important;
  }

  .ffl-hero-cta-secondary {
    width: 100%;
    max-width: 100%;
    padding: 16px 24px;
    font-size: 1.0625rem;
    min-width: auto;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(8, 146, 165, 0.2);
    touch-action: manipulation;
    position: relative;
    z-index: 100 !important;
    pointer-events: auto !important;
  }
  
  /* Visa formulär direkt i hero-sektionen på mobil */
  /* Formuläret är nu utanför .ffl-hero-content för att undvika opacity-arv */
  .ffl-hero-scroll-expansion .ffl-hero-form-inline {
    display: block;
    width: calc(100% - 2rem); /* Ta bort padding från bredden */
    max-width: calc(100% - 2rem);
    margin: 2rem 1rem 1rem 1rem; /* Padding: 1rem på höger, vänster och längst ner */
    padding: 1.5rem;
    background: #ffffff; /* Solid vit bakgrund istället för genomskinlig */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    scroll-margin-top: 80px; /* För att inte hamna under header vid scroll */
    position: relative;
    z-index: 2; /* Ändrat från 10 till 2 - lägre än hero-content (3) för att förhindra att formuläret syns bakom andra sektioner */
    contain: layout style; /* Förhindra att formuläret påverkar andra sektioner */
    isolation: isolate; /* Skapa ny stacking context */
    opacity: 1 !important; /* Formuläret ska alltid vara helt synligt, oavsett scroll */
    flex-shrink: 0; /* Förhindra att formuläret krymper i flex-container */
    /* Eftersom formuläret nu är utanför .ffl-hero-content, ärver det inte opacity från parent */
  }
  
  .ffl-hero-form-inline-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #0893a6 !important;
  }
  
  /* Styling för formuläret inuti inline-containern */
  .ffl-hero-form-inline-form {
    width: 100%;
  }
  
  .ffl-hero-form-inline-form .multi-step-form {
    width: 100%;
    max-width: 100%;
  }
  
  .ffl-hero-form-inline-form .multi-step-form .form-step {
    padding: 0;
  }
  
  /* Dölj popup på mobil */
  .ffl-hero-popup {
    display: none !important;
  }

  .ffl-hero-microtrust {
    font-size: 0.8125rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    /* Vit text på mörk gradient bakgrund - samma som privatflytt */
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 100%;
    opacity: 0.95;
  }

  .ffl-hero-microtrust-wrapper {
    animation: scroll-microtrust-mobile 15s linear infinite;
  }

  @keyframes scroll-microtrust-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .ffl-hero-microtrust span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .ffl-hero-microtrust span:not(:last-child)::after {
    content: "·";
    margin-left: 0.75rem;
    margin-right: 0;
    opacity: 0.8;
    font-weight: 300;
    display: inline-block;
  }
}

/* Säkerställ att alla sektioner efter hero-sektionen har högre z-index */
.ffl-hero-scroll-expansion ~ * {
  position: relative;
  z-index: 1; /* Standard z-index för sektioner efter hero */
}

/* Desktop: Visa hero-knappen och popup, dölj inline-formulär */
@media (min-width: 769px) {
  /* Visa hero-knappen på desktop */
  .ffl-hero-cta-primary.ffl-hero-popup-trigger {
    display: inline-flex !important;
  }
  
  /* Dölj inline-formulär på desktop */
  .ffl-hero-form-inline {
    display: none !important;
  }
  
  /* Visa popup på desktop */
  .ffl-hero-popup {
    display: flex !important;
  }
}

/* ===========================
   HERO POPUP MODAL
   =========================== */

.ffl-hero-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.ffl-hero-popup.ffl-hero-popup--open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.ffl-hero-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ffl-hero-popup-content {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
  z-index: 10000;
}

.ffl-hero-popup.ffl-hero-popup--open .ffl-hero-popup-content {
  transform: scale(1) translateY(0);
}

.ffl-hero-popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: all 0.2s ease;
  border-radius: 50%;
  z-index: 10001;
}

.ffl-hero-popup-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-primary);
}

.ffl-hero-popup-close svg {
  width: 24px;
  height: 24px;
}

.ffl-hero-popup-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--color-primary);
}

.ffl-hero-popup-form {
  margin-top: 1rem;
}

/* Contact Form 7 styling i popup */
.ffl-hero-popup-form .wpcf7 {
  margin: 0;
}

.ffl-hero-popup-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ffl-hero-popup-form .wpcf7-form-control-wrap {
  margin-bottom: 0;
}

.ffl-hero-popup-form .wpcf7 label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.9375rem;
}

.ffl-hero-popup-form .wpcf7 input[type="text"],
.ffl-hero-popup-form .wpcf7 input[type="email"],
.ffl-hero-popup-form .wpcf7 input[type="tel"],
.ffl-hero-popup-form .wpcf7 input[type="date"],
.ffl-hero-popup-form .wpcf7 input[type="number"],
.ffl-hero-popup-form .wpcf7 select,
.ffl-hero-popup-form .wpcf7 textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-family);
  color: var(--color-text);
  background: #ffffff;
  transition: all 0.2s ease;
}

.ffl-hero-popup-form .wpcf7 input[type="text"]:focus,
.ffl-hero-popup-form .wpcf7 input[type="email"]:focus,
.ffl-hero-popup-form .wpcf7 input[type="tel"]:focus,
.ffl-hero-popup-form .wpcf7 input[type="date"]:focus,
.ffl-hero-popup-form .wpcf7 input[type="number"]:focus,
.ffl-hero-popup-form .wpcf7 select:focus,
.ffl-hero-popup-form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 146, 165, 0.1);
}

.ffl-hero-popup-form .wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
}

.ffl-hero-popup-form .wpcf7-submit {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  margin-top: 0.5rem;
}

.ffl-hero-popup-form .wpcf7-submit:hover {
  background: linear-gradient(135deg, #067c91 0%, #0a8d8e 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 146, 165, 0.4);
}

.ffl-hero-popup-form .wpcf7-response-output {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.9375rem;
}

.ffl-hero-popup-form .wpcf7-mail-sent-ok {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid #10B981;
  color: #10B981;
}

.ffl-hero-popup-form .wpcf7-mail-sent-ng,
.ffl-hero-popup-form .wpcf7-aborted,
.ffl-hero-popup-form .wpcf7-spam,
.ffl-hero-popup-form .wpcf7-validation-errors {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #EF4444;
  color: #EF4444;
}

.ffl-hero-popup-form .wpcf7-not-valid-tip {
  color: #EF4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.ffl-hero-popup-form .wpcf7-not-valid {
  border-color: #EF4444;
}

/* Responsiv design för popup */
@media (max-width: 768px) {
  .ffl-hero-popup-content {
    padding: 1.5rem;
    width: 95%;
    max-height: 85vh;
    border-radius: 12px;
  }

  .ffl-hero-popup-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
  }

  .ffl-hero-popup-title {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    padding-right: 2rem;
  }

  .ffl-hero-popup-form .wpcf7 input[type="text"],
  .ffl-hero-popup-form .wpcf7 input[type="email"],
  .ffl-hero-popup-form .wpcf7 input[type="tel"],
  .ffl-hero-popup-form .wpcf7 textarea {
    padding: 0.75rem;
    font-size: 0.9375rem;
  }

  .ffl-hero-popup-form .wpcf7-submit {
    padding: 14px 24px;
    font-size: 1rem;
  }
}

/* USP-kort styling */
.elementor-icon-box-wrapper {
  text-align: center;
}

.elementor-icon-box-title {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--spacing-md);
}

/* Process-sektion */
.elementor-counter-number {
  font-family: var(--font-family);
  font-weight: 700;
  color: var(--color-primary);
}

/* ===========================
   UTILITY CLASSES
   =========================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* ===========================
   RESPONSIVE – Mobile first
   =========================== */

@media (max-width: 768px) {
  h1 {
    font-size: 1.875rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  .section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
}

/* ===========================
   USP ACCORDION SECTION
   =========================== */

/* USP Accordion Section */
.ffl-usp-accordion-section {
  padding: var(--spacing-xl) 0;
  background: white;
}

/* Minska padding på mobil */
@media (max-width: 768px) {
  .ffl-usp-accordion-section {
    padding: 0.25rem 0 0.5rem 0; /* 4px top, 8px bottom istället för 4rem */
    margin-top: 0;
  }

  /* Container padding på mobil - matchar andra sektioner */
  .ffl-usp-accordion-container {
    padding: 0 var(--spacing-sm); /* 1rem - samma som standard sections */
    max-width: 100%;
    width: 100%; /* Säkerställ full bredd */
  }

  /* Minska gap i wrapper på mobil */
  .ffl-usp-accordion-wrapper {
    gap: 1rem; /* Minskat från 3rem */
  }

  /* Ta bort extra margin från hero-sektionen */
  .ffl-hero-scroll-expansion {
    margin-bottom: 0;
    padding-bottom: 0.7rem; /* 0.7rem padding-bottom i mobilvy */
  }
}

/* ===========================
   SERVICE HERO - PRIVATFLYTT (Split Layout med Formulär)
   =========================== */

.ffl-service-hero {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Säkerställ att sektionen alltid är minst lika hög som viewport så att rubriken alltid är synlig */
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  overflow: hidden;
}

.ffl-service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    ),
    linear-gradient(135deg, rgba(8, 146, 165, 0.95) 0%, rgba(12, 164, 165, 0.95) 100%);
  z-index: 1;
}

.ffl-service-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0; /* Tagen bort - plugginnet styr nu allt */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: flex-start; /* Ändrat från center - så formuläret hamnar längst upp */
}

.ffl-service-hero__text {
  color: white;
}

.ffl-service-hero__text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: white;
}

.ffl-service-hero__lead {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  opacity: 0.95;
  line-height: 1.7;
  color: white;
}

.ffl-service-hero__intro {
  font-size: 1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
  color: white;
  font-weight: 400;
}

.ffl-service-hero__ctas {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.ffl-service-hero__cta-primary {
  display: inline-block;
  background: white;
  color: var(--color-primary);
  padding: 14px 32px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.ffl-service-hero__cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: var(--color-primary);
}

.ffl-service-hero__cta-secondary {
  display: inline-block;
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 12px 30px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ffl-service-hero__cta-secondary:hover {
  background: white;
  color: var(--color-primary);
}

.ffl-service-hero__usp {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.ffl-service-hero__usp-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.95;
  color: white;
}

.ffl-service-hero__usp-icon {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  font-weight: 700;
  color: white;
}

.ffl-service-hero__form {
  background: transparent; /* Tagen bort - plugginnet styr nu allt */
  border-radius: 0; /* Tagen bort - plugginnet styr nu allt */
  padding: 0; /* Tagen bort - plugginnet styr nu allt */
  box-shadow: none; /* Tagen bort - plugginnet styr nu allt */
  margin-top: 2rem; /* Flytta formuläret längre ner i hero-sektionen */
  transition: none !important; /* Ta bort transition för att förhindra hover-effekter */
}

/* Ingen hover-effekt på formuläret - explicit åsidosättning */
.ffl-service-hero__form:hover {
  transform: none !important; /* Ta bort hover-effekt */
}

.ffl-service-hero__form:hover #flyttfixarn-root {
  transform: none !important; /* Ta bort hover-effekt på formuläret */
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 8px 32px rgba(8, 146, 165, 0.15) !important; /* Behåll normal skugga */
}

.ffl-service-hero__form h3 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--color-text);
  font-weight: 600;
}

.ffl-service-hero__form-wrapper {
  margin-bottom: 0; /* Tagen bort - plugginnet styr nu allt */
}

/* Variant 3: Floating Card med 3D-effekt - Plugin-containern */
.ffl-service-hero__form #flyttfixarn-root {
  background: #ffffff !important; /* Vit bakgrund istället för ljusgrå */
  padding: 32px !important; /* Större padding */
  border-radius: 20px !important; /* Större border-radius */
  min-height: 400px;
  max-height: fit-content; /* Begränsa höjden till innehållet */
  height: auto !important; /* Låt höjden anpassas efter innehållet */
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 8px 32px rgba(8, 146, 165, 0.15) !important; /* Multi-lager skugga för 3D-effekt */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: none !important; /* Ta bort transition för att förhindra hover-effekter */
}

/* Ta bort padding från första barn-elementet (React root) för att matcha mockupen */
.ffl-service-hero__form #flyttfixarn-root > *:first-child {
  padding: 0 !important; /* Ta bort plugginnets padding så att endast #flyttfixarn-root har padding */
  margin: 0 !important;
  background: transparent !important; /* Ta bort plugin's #f0f4f8 bakgrund */
  min-height: auto !important; /* Åsidosätt React-appens min-height: 100vh så att elementet bara blir så högt som innehållet kräver */
  height: auto !important; /* Säkerställ att höjden anpassas efter innehållet */
}

/* Ta bort dubbel bakgrund från React-appens huvudcontainer (det andra lagret) */
.ffl-service-hero__form #flyttfixarn-root > *:first-child > div:first-child {
  background: transparent !important; /* Ta bort vit bakgrund från React-appens huvudcontainer */
  padding: 0 !important; /* Ta bort padding så att endast #flyttfixarn-root har padding */
  border-radius: 0 !important; /* Ta bort border-radius så att endast #flyttfixarn-root har border-radius */
  box-shadow: none !important; /* Ta bort box-shadow så att endast #flyttfixarn-root har box-shadow */
}

.ffl-service-hero__form-note {
  font-size: 0.875rem;
  color: #6B7280;
  margin-top: 1rem;
  text-align: center;
  margin-bottom: 0;
}

/* Contact Form 7 styling i hero */
.ffl-service-hero__form .wpcf7 {
  margin: 0;
}

.ffl-service-hero__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ffl-service-hero__form .wpcf7-form-control-wrap {
  margin-bottom: 0;
}

.ffl-service-hero__form .wpcf7 label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.ffl-service-hero__form .wpcf7 input[type="text"],
.ffl-service-hero__form .wpcf7 input[type="email"],
.ffl-service-hero__form .wpcf7 input[type="tel"],
.ffl-service-hero__form .wpcf7 input[type="date"],
.ffl-service-hero__form .wpcf7 input[type="number"],
.ffl-service-hero__form .wpcf7 select,
.ffl-service-hero__form .wpcf7 textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-family);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ffl-service-hero__form .wpcf7 input[type="text"]:focus,
.ffl-service-hero__form .wpcf7 input[type="email"]:focus,
.ffl-service-hero__form .wpcf7 input[type="tel"]:focus,
.ffl-service-hero__form .wpcf7 input[type="date"]:focus,
.ffl-service-hero__form .wpcf7 input[type="number"]:focus,
.ffl-service-hero__form .wpcf7 select:focus,
.ffl-service-hero__form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 146, 165, 0.1);
}

.ffl-service-hero__form .wpcf7 textarea {
  min-height: 100px;
  resize: vertical;
}

.ffl-service-hero__form .wpcf7-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: white;
  padding: 14px;
  border: none;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font-family);
}

.ffl-service-hero__form .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(8, 146, 165, 0.3);
}

.ffl-service-hero__form .wpcf7-response-output {
  margin: 1rem 0 0 0;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.ffl-service-hero__form .wpcf7-mail-sent-ok {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.ffl-service-hero__form .wpcf7-mail-sent-ng,
.ffl-service-hero__form .wpcf7-aborted,
.ffl-service-hero__form .wpcf7-spam,
.ffl-service-hero__form .wpcf7-validation-errors {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.ffl-service-hero__form .wpcf7-not-valid-tip {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.ffl-service-hero__form .wpcf7-not-valid {
  border-color: var(--color-error);
}

/* Responsive */
@media (max-width: 768px) {
  .ffl-service-hero {
    min-height: auto;
    padding: 7rem 0 3rem 0; /* Padding-top för att kompensera för headern (1.5rem padding = 24px, total header höjd ~105px) */
  }

  /* Justera padding för privatflytt-sidan - minska padding-top för att matcha andra sidor */
  /* Privatflytt-sidan har ett extra H1-element utanför herosektionen som skapar extra spacing */
  body.page-id-56 .ffl-service-hero {
    padding-top: 4rem !important; /* Minska padding-top för att matcha andra sidor */
  }

  /* Dölj det extra H1-elementet på privatflytt-sidan som skapar extra spacing */
  body.page-id-56 main > h1:first-of-type {
    display: none !important;
  }

  .ffl-service-hero__content {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 var(--spacing-sm); /* Lägg till padding på vänster och höger sida i mobilvy */
  }

  /* Ändra ordningen i mobilvy: rubrik + text först, sedan formuläret, sedan CTA + USPs */
  /* Använd display: contents för att göra text-containern transparent för grid-ordningen */
  .ffl-service-hero__text {
    display: contents; /* Gör containern transparent så att barn-elementen blir direkta grid-items */
  }

  /* Rubrik och text-paragraf stannar ovanför formuläret */
  .ffl-service-hero__text h1,
  .ffl-service-hero__text .ffl-service-hero__lead,
  .ffl-service-hero__text .ffl-service-hero__intro {
    order: 1;
  }

  .ffl-service-hero__form {
    order: 2; /* Formuläret visas efter rubrik + text */
  }

  /* CTA-knappen flyttas under formuläret */
  .ffl-service-hero__text .ffl-service-hero__ctas {
    order: 3;
  }

  /* USP-punkterna flyttas under formuläret */
  .ffl-service-hero__text .ffl-service-hero__usp {
    order: 4;
  }

  .ffl-service-hero__text h1 {
    font-size: 2rem;
  }

  .ffl-service-hero__lead {
    font-size: 1rem;
  }

  .ffl-service-hero__intro {
    font-size: 0.95rem;
  }

  .ffl-service-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0.75rem; /* Minska gapet mellan knappen och USP-punkterna i mobilvy */
  }

  /* Variant 3: Floating Card - Mobil-anpassningar */
  .ffl-service-hero__form #flyttfixarn-root {
    padding: 24px !important; /* Mindre padding på mobil */
    border-radius: 16px !important; /* Mindre border-radius på mobil */
  }

  /* Ta bort padding från första barn-elementet även på mobil */
  .ffl-service-hero__form #flyttfixarn-root > *:first-child {
    padding: 0 !important;
  }

  .ffl-service-hero__cta-primary,
  .ffl-service-hero__cta-secondary {
    width: 100%;
    text-align: center;
  }

  .ffl-service-hero__usp {
    flex-direction: column;
    gap: 1rem;
  }

  .ffl-service-hero__form {
    padding: 0; /* Tagen bort - plugginnet styr nu allt */
    background: transparent; /* Tagen bort - plugginnet styr nu allt */
    border-radius: 0; /* Tagen bort - plugginnet styr nu allt */
    box-shadow: none; /* Tagen bort - plugginnet styr nu allt */
    margin-top: 2rem; /* Lägg till margin-top för att skapa mellanrum från texten */
    margin-bottom: 0; /* Ingen margin-bottom */
  }
}

.ffl-usp-accordion-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%; /* Säkerställ full bredd */
}

/* Två-kolumns layout - fungerar med Elementors standard kolumner */
.ffl-usp-accordion-container .elementor-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

/* Fallback om inte Elementor-row finns */
.ffl-usp-accordion-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

/* Vänster kolumn - Text */
.ffl-usp-accordion-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ffl-usp-accordion-text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #0892A5 !important; /* Primärfärg */
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.ffl-usp-accordion-text p {
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 0; /* Ingen margin eftersom CTA-knappen är borttagen */
  line-height: 1.7;
}

.ffl-usp-accordion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: white;
  padding: 14px 32px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(8, 146, 165, 0.25);
  width: fit-content;
}

.ffl-usp-accordion-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 146, 165, 0.35);
}

/* Höger kolumn - Accordion */
.ffl-usp-accordion {
  display: flex;
  gap: 0.75rem;
  height: 600px;
  width: 100%;
  align-items: stretch;
}

/* Accordion Item */
.ffl-usp-accordion-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  height: 100%;
  min-height: 600px;
}

/* ========================================
   ACCORDION ITEM STATES - REN IMPLEMENTATION
   ======================================== */

/* STANDARD STATE: När inget hovras */
/* Första kortet: Öppet */
.ffl-usp-accordion:not(:hover) .ffl-usp-accordion-item:first-child {
  flex: 3 !important;
  min-width: 200px !important;
  box-shadow: 0 8px 30px rgba(8, 146, 165, 0.3) !important;
}

/* Övriga kort: Smala */
.ffl-usp-accordion:not(:hover) .ffl-usp-accordion-item:not(:first-child) {
  flex: 1 !important;
  min-width: 80px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* HOVER STATE: När accordion-containern har hover */
/* Det kort som hovras: Expandera */
.ffl-usp-accordion-item:hover {
  flex: 3 !important;
  min-width: 200px !important;
  box-shadow: 0 8px 30px rgba(8, 146, 165, 0.3) !important;
}

/* Första kortet när det INTE hovras men accordion-containern har hover: STÄNG */
.ffl-usp-accordion:hover .ffl-usp-accordion-item:first-child:not(:hover) {
  flex: 1 !important;
  min-width: 80px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Övriga kort när de INTE hovras men accordion-containern har hover: Smala */
.ffl-usp-accordion:hover .ffl-usp-accordion-item:not(:first-child):not(:hover) {
  flex: 1 !important;
  min-width: 80px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Background Image */
.ffl-usp-accordion-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* Säkerställ att Elementor inte lägger till extra styling på bilderna */
.ffl-usp-accordion-item img.ffl-usp-accordion-image,
.ffl-usp-accordion-item .ffl-usp-accordion-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ffl-usp-accordion-item:hover .ffl-usp-accordion-image,
.ffl-usp-accordion-item.active .ffl-usp-accordion-image {
  transform: scale(1.08);
}

/* VARIANT 2: Accordion item transition med bounce */
.ffl-usp-accordion-item {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Overlay Gradient */
.ffl-usp-accordion-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 2;
  transition: all 0.5s ease;
}

.ffl-usp-accordion-item:hover .ffl-usp-accordion-overlay,
.ffl-usp-accordion-item.active .ffl-usp-accordion-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

/* Content */
.ffl-usp-accordion-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 3;
  color: white;
}

/* VARIANT 2: Scale + Fade (Zoom Effect) - Desktop */
.ffl-usp-accordion-item:first-child .ffl-usp-accordion-title {
  writing-mode: horizontal-tb;
  text-orientation: unset;
  transform: translateX(0) translateY(0) scale(1);
  position: static;
  font-size: 1.5rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.75rem;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: normal;
  line-height: 1.3;
  opacity: 1;
}

.ffl-usp-accordion:hover .ffl-usp-accordion-item:first-child:not(:hover) .ffl-usp-accordion-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateX(-50%) translateY(0) scale(0.9);
  position: absolute;
  bottom: 2rem;
  left: 50%;
  font-size: 1rem;
  white-space: nowrap;
  margin-bottom: 0;
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.ffl-usp-accordion-item:not(:first-child) .ffl-usp-accordion-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(0) scale(0.9);
  white-space: nowrap;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0;
  opacity: 1;
}

.ffl-usp-accordion-item:not(:first-child):hover .ffl-usp-accordion-title,
.ffl-usp-accordion-item:not(:first-child).active .ffl-usp-accordion-title {
  writing-mode: horizontal-tb;
  text-orientation: unset;
  transform: translateX(0) translateY(0) scale(1);
  position: static;
  font-size: 1.5rem;
  white-space: normal;
  margin-bottom: 0.75rem;
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* När övriga kort inte hovras - säkerställ vertikal text */
.ffl-usp-accordion-item:not(:first-child):not(:hover) .ffl-usp-accordion-title {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: translateX(-50%) translateY(10px) !important;
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.ffl-usp-accordion-item:not(:first-child).active:not(:hover) .ffl-usp-accordion-title {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: translateX(-50%) translateY(10px) !important;
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

/* ========================================
   ACCORDION DESCRIPTION - REN IMPLEMENTATION
   ======================================== */

/* VARIANT 2: Description Animation - Scale + Fade */
.ffl-usp-accordion-description {
  font-size: 0;
  line-height: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              margin-top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              font-size 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              line-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
  margin: 0;
  padding: 0;
  display: none;
  visibility: hidden;
  height: 0;
  transform: scale(0.8) translateY(10px);
}

/* STANDARD STATE: När inget hovras - visa beskrivning på första kortet */
.ffl-usp-accordion:not(:hover) .ffl-usp-accordion-item:first-child .ffl-usp-accordion-description,
.ffl-usp-accordion-item:first-child:hover .ffl-usp-accordion-description,
.ffl-usp-accordion-item:not(:first-child):hover .ffl-usp-accordion-description,
.ffl-usp-accordion-item:not(:first-child).active .ffl-usp-accordion-description {
  opacity: 1 !important;
  max-height: 200px !important;
  margin-top: 0.75rem !important;
  display: block !important;
  visibility: visible !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  height: auto !important;
  transform: scale(1) translateY(0) !important;
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              margin-top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              font-size 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              line-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s !important;
}

.ffl-usp-accordion-item:first-child:hover .ffl-usp-accordion-description,
.ffl-usp-accordion-item:not(:first-child):hover .ffl-usp-accordion-description {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* HOVER STATE: När första kortet stängs (accordion har hover men inte första kortet) - DÖLJ beskrivning */
.ffl-usp-accordion:hover .ffl-usp-accordion-item:first-child:not(:hover) .ffl-usp-accordion-description {
  opacity: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  transform: scale(0.8) translateY(10px) !important;
  transition: opacity 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19),
              max-height 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19),
              transform 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
}

/* När övriga kort inte hovras - dölj beskrivning */
.ffl-usp-accordion-item:not(:first-child):not(:hover):not(.active) .ffl-usp-accordion-description {
  opacity: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
}

/* Responsiv design */
@media (max-width: 1024px) {
  .ffl-usp-accordion-wrapper {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ffl-usp-accordion {
    height: 500px;
    gap: 0.5rem;
  }

  .ffl-usp-accordion-item {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .ffl-usp-accordion-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ffl-usp-accordion-text h2 {
    text-align: center;
  }

  .ffl-usp-accordion-text p {
    text-align: center;
  }

  .ffl-usp-accordion {
    flex-direction: row;
    height: auto;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: visible; /* Tillåt box-shadow att visas */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding: 1rem;
    /* Dölj scrollbar - använder pagination dots istället */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE och Edge */
    padding: 1.5rem 1rem; /* Extra padding top/bottom för box-shadow (20px shadow behöver ~20px padding) */
    /* Förbättra scroll-funktionalitet */
    touch-action: pan-x;
    will-change: scroll-position;
  }
  
  /* Wrapper och container - tillåt box-shadow att visas */
  .ffl-usp-accordion-wrapper,
  .ffl-usp-accordion-container {
    overflow: visible; /* Tillåt box-shadow att visas utan att klippas */
  }
  
  /* Accordion items - se till att skuggan har utrymme */
  .ffl-usp-accordion-item {
    margin: 0.5rem 0; /* Margin top/bottom för att ge utrymme för box-shadow */
  }

  /* Dölj scrollbar för WebKit (Chrome, Safari, Edge) */
  .ffl-usp-accordion::-webkit-scrollbar {
    display: none;
  }

  /* Stängda kort - smala */
  .ffl-usp-accordion-item {
    flex: 0 0 80px;
    min-height: 280px;
    min-width: 80px;
    max-width: 80px;
    height: 280px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    scroll-snap-align: start;
  }

  /* Öppet kort - endast active (ingen hover i mobilvy) */
  .ffl-usp-accordion-item.active {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    min-height: 280px;
    height: 280px;
  }

  .ffl-usp-accordion-item:first-child {
    flex: 0 0 80px;
    min-width: 80px;
    max-width: 80px;
  }

  .ffl-usp-accordion-item:first-child.active,
  .ffl-usp-accordion-item:first-child:hover {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
  }

  /* Rubrik - horisontell text med Scale + Fade animation */
  .ffl-usp-accordion-title {
    writing-mode: horizontal-tb !important;
    text-orientation: unset !important;
    transform: translateX(0) translateY(0) scale(1) !important;
    position: static !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 0.75rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* När kortet är stängt - visa bara rubriken, centrerad, mindre text med scale */
  .ffl-usp-accordion-item:not(:hover):not(.active) .ffl-usp-accordion-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.75rem !important;
    line-height: 1.2;
    transform: scale(0.9) !important;
  }

  /* När kortet är öppet - visa allt med bättre spacing och scale (ingen hover i mobilvy) */
  .ffl-usp-accordion-item.active .ffl-usp-accordion-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    margin: 0 0 0.75rem 0;
    text-align: left;
    font-size: 1.125rem !important;
    transform: scale(1) !important;
  }

  /* Description Animation - Scale + Fade för mobil */
  .ffl-usp-accordion-item:not(:hover):not(.active) .ffl-usp-accordion-description {
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    transform: scale(0.85) translateY(8px) !important;
    transition: opacity 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19),
                max-height 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19),
                transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important;
  }

  /* Visa beskrivning när kortet är öppet med Scale + Fade (ingen hover i mobilvy) */
  .ffl-usp-accordion-item.active .ffl-usp-accordion-description {
    opacity: 1 !important;
    max-height: 150px !important;
    margin-top: 0.5rem !important;
    display: block !important;
    visibility: visible !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    height: auto !important;
    transform: scale(1) translateY(0) !important;
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                margin-top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                font-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                line-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s !important;
  }

  .ffl-usp-accordion-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    gap: 0.375rem; /* Minskat gap */
  }

  /* När kortet är stängt - centrera innehållet vertikalt */
  .ffl-usp-accordion-item:not(:hover):not(.active) .ffl-usp-accordion-content {
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }

  /* När kortet är öppet - balanserad layout (ingen hover i mobilvy) */
  .ffl-usp-accordion-item.active .ffl-usp-accordion-content {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem;
  }

  /* Navigation container - knappar + dots */
  .ffl-usp-accordion-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* Minskat gap eftersom knappar är dolda i mobilvy */
    margin-top: 1rem;
    padding: 0.5rem 0;
  }
  
  /* På desktop - visa knappar med större gap */
  @media (min-width: 769px) {
    .ffl-usp-accordion-navigation {
      gap: 1rem;
    }
  }

  /* Navigationsknappar - dölj i mobilvy (touch fungerar bra) */
  .ffl-usp-accordion-nav-btn {
    display: none !important; /* Dölj navigationsknappar i mobilvy */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Visa navigationsknappar på desktop */
  @media (min-width: 769px) {
    .ffl-usp-accordion-nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--color-primary);
      background: #ffffff;
      color: var(--color-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      padding: 0;
      outline: none;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(8, 146, 165, 0.2);
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  }

  .ffl-usp-accordion-nav-btn:hover:not(.disabled) {
    background: var(--color-primary);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(8, 146, 165, 0.3);
  }

  .ffl-usp-accordion-nav-btn:active:not(.disabled) {
    transform: scale(0.95);
  }

  .ffl-usp-accordion-nav-btn.disabled,
  .ffl-usp-accordion-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .ffl-usp-accordion-nav-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Pagination dots - moderna indikatorer */
  .ffl-usp-accordion-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
  }

  .ffl-usp-accordion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(8, 146, 165, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    outline: none;
  }

  .ffl-usp-accordion-dot:hover {
    background: rgba(8, 146, 165, 0.5);
    transform: scale(1.2);
  }

  .ffl-usp-accordion-dot.active {
    background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
    width: 24px;
    height: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(8, 146, 165, 0.4);
  }

  .ffl-usp-accordion-dot:focus {
    outline: 2px solid rgba(8, 146, 165, 0.5);
    outline-offset: 2px;
  }
}

/* Dölj pagination dots på desktop */
@media (min-width: 769px) {
  .ffl-usp-accordion-dots {
    display: none !important;
  }
}

/* ===========================
   PROCESS-SEKTION (Hur vi jobbar)
   =========================== */

.ffl-process {
  padding: var(--spacing-xl) 0;
  position: relative;
}

.ffl-process--light {
  background-color: var(--color-background-light);
}

.ffl-process-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-process-header {
  text-align: center;
  margin-bottom: 0.75rem;
}

.ffl-process-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.ffl-process-header p {
  font-size: 1.125rem;
  color: var(--color-text);
  max-width: 700px;
  margin: 0 auto;
}

/* Grid för process-steg */
.ffl-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .ffl-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ffl-process-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Process-steg kort */
.ffl-process__step {
  background: white;
  border-radius: 24px;
  padding: 3rem 2rem;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  /* Initial state för scroll-triggered animation */
  opacity: 0;
  transform: translateX(-120px) scale(0.8);
}

/* Fallback: Om JavaScript inte fungerar, visa innehållet ändå efter 3 sekunder */
@keyframes ffl-process-fallback {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Om ingen animation-klass finns efter 3 sekunder, visa ändå */
.ffl-process__step:not(.ffl-process-animate) {
  animation: ffl-process-fallback 0.5s ease-out 3s forwards;
}

/* Animation triggas av JavaScript när sektionen är synlig */
.ffl-process__step.ffl-process-animate {
  animation: ffl-process-scaleSlideIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0s; /* Överskriv fallback-delay */
}

.ffl-process__step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ffl-process__step:hover::before {
  opacity: 1;
}

.ffl-process__step-number {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.25rem;
  transition: opacity 0.3s ease;
  position: relative;
  z-index: 0;
  /* Initial state för scroll-triggered animation */
  opacity: 0;
  transform: scale(0.5) translateY(20px);
}

/* Fallback för siffror */
.ffl-process__step-number:not(.ffl-process-number-animate) {
  animation: ffl-process-numberPopIn 0.6s ease-out 3.5s forwards;
}

/* Animation triggas av JavaScript efter kortet är animerat */
.ffl-process__step-number.ffl-process-number-animate {
  animation: ffl-process-numberPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0s; /* Överskriv fallback-delay */
}

.ffl-process__step:hover .ffl-process__step-number {
  opacity: 0.25;
}

.ffl-process__icon {
  width: 64px;
  height: 64px;
  margin: -2rem auto 1.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(8, 146, 165, 0.3);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  color: white;
  font-size: 1.75rem;
  font-weight: 700;
  /* Initial state för scroll-triggered animation */
  opacity: 0;
  transform: scale(0) rotate(-180deg);
}

/* Fallback för ikoner */
.ffl-process__icon:not(.ffl-process-icon-animate) {
  animation: ffl-process-iconPopIn 0.5s ease-out 4s forwards;
}

/* Animation triggas av JavaScript efter stort nummer är animerat */
.ffl-process__icon.ffl-process-icon-animate {
  animation: ffl-process-iconPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0s; /* Överskriv fallback-delay */
}

.ffl-process__step:hover .ffl-process__icon {
  transform: scale(1.15) rotate(-5deg);
}

.ffl-process__step h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.ffl-process__step p {
  font-size: 1rem;
  color: #666;
  line-height: 1.7;
  margin: 0;
  position: relative;
  z-index: 1;
}

.ffl-process__step:hover {
  transform: translateX(0) translateY(-6px) scale(1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

/* ============================================
   PROCESS-SEKTION - Animationer (Scroll-triggered)
   Korten kommer in först, sen siffrorna, sen ikonerna
   Animationer triggas av JavaScript när sektionen är synlig
   ============================================ */

/* Animation delays hanteras av JavaScript - här är bara keyframes */

/* Keyframes för animationer */
@keyframes ffl-process-scaleSlideIn {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes ffl-process-numberPopIn {
  to {
    opacity: 0.15;
    transform: scale(1) translateY(1.5rem);
  }
}

@keyframes ffl-process-iconPopIn {
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Responsiv design - mobil */
@media (max-width: 768px) {
  .ffl-process {
    padding: var(--spacing-lg) 0;
  }

  .ffl-process-header {
    margin-bottom: 0.5rem;
  }

  .ffl-process-header h2 {
    font-size: 1.5rem;
  }

  .ffl-process-header p {
    font-size: 0.9375rem;
  }

  .ffl-process-grid {
    gap: var(--spacing-md);
  }

  .ffl-process__step {
    padding: 2rem 1.5rem;
  }

  .ffl-process__step-number {
    font-size: 5rem;
    margin-bottom: 0.75rem;
    transform: translateY(1.25rem);
  }

  .ffl-process__icon {
    width: 56px;
    height: 56px;
    margin: -1.5rem auto 1.25rem;
    font-size: 1.5rem;
  }

  .ffl-process__step h3 {
    font-size: 1.25rem;
  }

  .ffl-process__step p {
    font-size: 0.9375rem;
  }
}

/* ============================================
   PRIVATFLYTT PROCESS-SEKTION – Variant 3D
   Alternerande layout med diagonala accent-linjer
   ============================================ */
.ffl-process-alternating-diagonal {
  padding: var(--spacing-xl) 0;
  background: var(--color-background-light);
}

.ffl-process-alternating-diagonal-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-process-alternating-diagonal-header {
  text-align: center;
  margin-bottom: 4rem;
}

.ffl-process-alternating-diagonal-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text) !important;
  margin-bottom: 1rem;
}

.ffl-process-alternating-diagonal-header p {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.ffl-process-alternating-diagonal-header p a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(8, 146, 165, 0.3);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.ffl-process-alternating-diagonal-header p a:hover {
  color: var(--color-accent);
  text-decoration-color: rgba(12, 164, 165, 0.5);
}

.ffl-process-alternating-diagonal-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-bottom: 4rem;
  align-items: center;
  position: relative;
}

.ffl-process-alternating-diagonal-step:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ffl-process-alternating-diagonal-step {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .ffl-process-alternating-diagonal-step:nth-child(even) .ffl-process-alternating-diagonal-step-content {
    order: 2;
  }

  .ffl-process-alternating-diagonal-step:nth-child(even) .ffl-process-alternating-diagonal-step-visual {
    order: 1;
  }
}

.ffl-process-alternating-diagonal-step-content {
  padding: 2rem;
  background: white;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ffl-process-alternating-diagonal-step-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.ffl-process-alternating-diagonal-step:nth-child(even) .ffl-process-alternating-diagonal-step-content::before {
  left: auto;
  right: 0;
}

.ffl-process-alternating-diagonal-step-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.3);
  z-index: 2;
}

.ffl-process-alternating-diagonal-step-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text) !important;
  margin-bottom: 1rem;
  margin-top: 0;
}

.ffl-process-alternating-diagonal-step-content p {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}

.ffl-process-alternating-diagonal-step-content p a {
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-decoration-color: rgba(8, 146, 165, 0.3);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.ffl-process-alternating-diagonal-step-content p a:hover {
  color: var(--color-primary-hover) !important;
  text-decoration-color: var(--color-primary);
}

.ffl-process-alternating-diagonal-step-visual {
  background: white;
  border-radius: 20px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.ffl-process-alternating-diagonal-step-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  opacity: 0.1;
  transform: skewY(-5deg);
}

.ffl-process-alternating-diagonal-step-visual::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(8, 146, 165, 0.05) 20px,
    rgba(8, 146, 165, 0.05) 40px
  );
}

/* SVG Ikoner i visuella boxarna */
.ffl-process-alternating-diagonal-step-visual-icon {
  width: 120px;
  height: 120px;
  position: relative;
  z-index: 1;
}

.ffl-process-alternating-diagonal-step-visual-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-primary);
  opacity: 0.8;
  transition: all 0.3s ease;
}


/* Alternativ: Bild i visuella boxarna */
.ffl-process-alternating-diagonal-step-visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border-radius: 20px;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-process-alternating-diagonal {
    padding: var(--spacing-lg) 0;
  }

  .ffl-process-alternating-diagonal-header {
    margin-bottom: 2.5rem;
  }

  .ffl-process-alternating-diagonal-header h2 {
    font-size: 1.5rem;
  }

  .ffl-process-alternating-diagonal-header p {
    font-size: 1rem;
  }

  .ffl-process-alternating-diagonal-step {
    margin-bottom: 3rem;
    gap: var(--spacing-md);
    display: flex;
    flex-direction: column;
  }

  /* I mobilvy: visuell container först, sedan text */
  .ffl-process-alternating-diagonal-step .ffl-process-alternating-diagonal-step-visual {
    order: -1;
    width: 100%;
  }

  .ffl-process-alternating-diagonal-step-content {
    padding: 1.5rem;
  }

  .ffl-process-alternating-diagonal-step-number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  /* Steg 1 och 3: placera cirkeln till vänster i mobilvy */
  /* Notera: header-div räknas med, så första steget är :nth-child(2), tredje steget är :nth-child(4) */
  .ffl-process-alternating-diagonal-step:nth-child(2) .ffl-process-alternating-diagonal-step-number,
  .ffl-process-alternating-diagonal-step:nth-child(4) .ffl-process-alternating-diagonal-step-number {
    right: auto;
    left: 0.75rem;
  }

  .ffl-process-alternating-diagonal-step-content h3 {
    font-size: 1.25rem;
  }

  .ffl-process-alternating-diagonal-step-content p {
    font-size: 0.9375rem;
  }

  /* Mycket smalare höjd på mobil */
  .ffl-process-alternating-diagonal-step-visual {
    height: 120px;
  }

  .ffl-process-alternating-diagonal-step-visual-icon {
    width: 80px;
    height: 80px;
  }
}

/* ===========================
   PRIVATFLYTT PRIS-SEKTION
   =========================== */

.ffl-privatflytt-pris {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
}

.ffl-privatflytt-pris-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-privatflytt-pris h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text) !important;
  margin-bottom: 1rem;
}

.ffl-privatflytt-pris h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text) !important;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.ffl-privatflytt-pris p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  max-width: 65ch;
}

.ffl-privatflytt-pris-subtext {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

/* Tabell med zebra-stripes */
.ffl-privatflytt-pris-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ffl-privatflytt-pris-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: white;
}

.ffl-privatflytt-pris-table th {
  padding: 1.25rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ffl-privatflytt-pris-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.ffl-privatflytt-pris-table tbody tr:last-child td {
  border-bottom: none;
}

.ffl-privatflytt-pris-table tbody tr:nth-child(even) {
  background: var(--color-background-light);
}

.ffl-privatflytt-pris-table tbody tr:hover {
  background: #E5F7F9;
}

.ffl-privatflytt-pris-range {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.125rem;
}

/* Ikon-notis */
.ffl-privatflytt-pris-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-background-light);
  border-radius: 8px;
}

.ffl-privatflytt-pris-notice-icon {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  font-style: normal;
}

/* Faktorer-lista */
.ffl-privatflytt-pris-factors {
  margin-left: 1.5rem;
  margin-bottom: 2rem;
  color: var(--color-text-light);
  list-style: disc;
}

.ffl-privatflytt-pris-factors li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.ffl-privatflytt-pris-factors li strong {
  color: var(--color-text);
}

/* Länkar i pris-widgeten */
.ffl-privatflytt-pris a,
.ffl-privatflytt-pris-container a,
.ffl-privatflytt-pris-factors a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ffl-privatflytt-pris a:hover,
.ffl-privatflytt-pris-container a:hover,
.ffl-privatflytt-pris-factors a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* CTA-sektion med bild och overlay */
.ffl-privatflytt-pris-cta {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  color: white;
  margin-top: 3rem;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-privatflytt-pris-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 51, 0.6);
  z-index: 1;
}

.ffl-privatflytt-pris-cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.ffl-privatflytt-pris-cta-content h3 {
  color: white;
  margin-bottom: 1rem;
  margin-top: 0;
}

.ffl-privatflytt-pris-cta-content p {
  color: rgba(255,255,255,0.9);
  max-width: none;
  margin-bottom: 1.5rem;
}

.ffl-privatflytt-pris-cta-button {
  display: inline-block;
  padding: 14px 32px;
  background-color: #ffffff;
  color: var(--color-primary);
  border-radius: var(--border-radius-pill);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.ffl-privatflytt-pris-cta-button:hover,
.ffl-privatflytt-pris-cta-button:focus,
.ffl-privatflytt-pris-cta-button:active {
  background-color: #ffffff;
  color: var(--color-primary);
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ffl-privatflytt-pris-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.ffl-privatflytt-pris-cta-button--primary {
  background-color: #ffffff;
  color: var(--color-primary);
}

.ffl-privatflytt-pris-cta-button--primary:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: var(--color-primary);
  text-decoration: none;
}

.ffl-privatflytt-pris-cta-button--secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 12px 30px;
}

.ffl-privatflytt-pris-cta-button--secondary:hover {
  background: white;
  color: var(--color-primary);
  text-decoration: none;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-privatflytt-pris {
    padding: var(--spacing-lg) 0;
  }

  /* Konvertera tabell till kort-layout på mobil */
  .ffl-privatflytt-pris-table {
    display: block;
    border-radius: 12px;
    overflow: hidden;
  }

  .ffl-privatflytt-pris-table thead {
    display: none; /* Dölj header på mobil */
  }

  .ffl-privatflytt-pris-table tbody {
    display: block;
  }

  .ffl-privatflytt-pris-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: none;
  }

  .ffl-privatflytt-pris-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .ffl-privatflytt-pris-table tbody tr:nth-child(even) {
    background: white; /* Ta bort zebra-stripes på mobil */
  }

  .ffl-privatflytt-pris-table tbody td {
    display: block;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
  }

  .ffl-privatflytt-pris-table tbody td:last-child {
    border-bottom: none;
  }

  /* Lägg till labels före varje cell */
  .ffl-privatflytt-pris-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
  }

  /* Första cellen (Boendetyp) - större och mer framträdande */
  .ffl-privatflytt-pris-table tbody td:first-child {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem;
  }

  .ffl-privatflytt-pris-table tbody td:first-child::before {
    display: none; /* Dölj label för första cellen */
  }

  .ffl-privatflytt-pris-table tbody td:first-child strong {
    color: white;
  }

  /* Pris-kolumnen - gör mer framträdande */
  .ffl-privatflytt-pris-table tbody td:nth-child(2) {
    font-size: 1rem;
  }

  /* Sista kolumnen (Vad som ingår) */
  .ffl-privatflytt-pris-table tbody td:last-child::before {
    content: 'Vad som ingår:';
  }

  .ffl-privatflytt-pris-cta {
    padding: 2rem 1.5rem;
    min-height: 250px;
  }

  .ffl-privatflytt-pris-factors {
    margin-left: 1.25rem;
  }
}

/* ===========================
   FLYTT & STÄD PRIS WIDGET
   =========================== */

.ffl-flytt-och-stad-pris {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
}

.ffl-flytt-och-stad-pris-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  text-align: center;
}

.ffl-flytt-och-stad-pris h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text) !important;
  margin-bottom: 1rem;
}

.ffl-flytt-och-stad-pris h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text) !important;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.ffl-flytt-och-stad-pris p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* "I priset ingår"-sektion */
.ffl-flytt-och-stad-pris-includes {
  background: var(--color-background-light);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem auto;
  max-width: 800px;
  text-align: left;
}

.ffl-flytt-och-stad-pris-includes p {
  margin-bottom: 1rem;
  max-width: none;
}

.ffl-flytt-och-stad-pris-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ffl-flytt-och-stad-pris-includes li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.ffl-flytt-och-stad-pris-includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* Tabell med zebra-stripes */
.ffl-flytt-och-stad-pris-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem auto;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  max-width: 800px;
}

.ffl-flytt-och-stad-pris-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: white;
}

.ffl-flytt-och-stad-pris-table th {
  padding: 1.25rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ffl-flytt-och-stad-pris-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.ffl-flytt-och-stad-pris-table tbody tr:last-child td {
  border-bottom: none;
}

.ffl-flytt-och-stad-pris-table tbody tr:nth-child(even) {
  background: var(--color-background-light);
}

.ffl-flytt-och-stad-pris-table tbody tr:hover {
  background: #E5F7F9;
}

.ffl-flytt-och-stad-pris-range {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.125rem;
}

/* Notice text */
.ffl-flytt-och-stad-pris-notice-text {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-top: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA-sektion med bild och overlay */
.ffl-flytt-och-stad-pris-cta {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  color: white;
  margin-top: 3rem;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-flytt-och-stad-pris-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 51, 0.6);
  z-index: 1;
}

.ffl-flytt-och-stad-pris-cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.ffl-flytt-och-stad-pris-cta-content h3 {
  color: white !important;
  margin-bottom: 1rem;
  margin-top: 0;
}

.ffl-flytt-och-stad-pris-cta-content div {
  color: rgba(255,255,255,0.9);
  max-width: none;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.ffl-flytt-och-stad-pris-cta-content div p {
  color: rgba(255,255,255,0.9);
  max-width: none;
  margin-bottom: 1rem;
}

.ffl-flytt-och-stad-pris-cta-content div p:last-child {
  margin-bottom: 0;
}

.ffl-flytt-och-stad-pris-cta-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #ffffff;
  color: var(--color-primary);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ffl-flytt-och-stad-pris-cta-button:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  color: var(--color-primary);
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-flytt-och-stad-pris {
    padding: var(--spacing-lg) 0;
  }

  .ffl-flytt-och-stad-pris-container {
    padding: 0 1.5rem;
  }

  /* Konvertera tabell till kort-layout på mobil */
  .ffl-flytt-och-stad-pris-table {
    display: block;
    border-radius: 12px;
    overflow: hidden;
  }

  .ffl-flytt-och-stad-pris-table thead {
    display: none; /* Dölj header på mobil */
  }

  .ffl-flytt-och-stad-pris-table tbody {
    display: block;
  }

  .ffl-flytt-och-stad-pris-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: none;
  }

  .ffl-flytt-och-stad-pris-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .ffl-flytt-och-stad-pris-table tbody tr:nth-child(even) {
    background: white; /* Ta bort zebra-stripes på mobil */
  }

  .ffl-flytt-och-stad-pris-table tbody td {
    display: block;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
  }

  .ffl-flytt-och-stad-pris-table tbody td:last-child {
    border-bottom: none;
  }

  /* Lägg till labels före varje cell */
  .ffl-flytt-och-stad-pris-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
  }

  /* Första cellen (Boendetyp) - större och mer framträdande */
  .ffl-flytt-och-stad-pris-table tbody td:first-child {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem;
  }

  .ffl-flytt-och-stad-pris-table tbody td:first-child::before {
    display: none; /* Dölj label för första cellen */
  }

  .ffl-flytt-och-stad-pris-table tbody td:first-child strong {
    color: white;
  }

  /* Pris-kolumnen - gör mer framträdande */
  .ffl-flytt-och-stad-pris-table tbody td:nth-child(2) {
    font-size: 1rem;
  }

  .ffl-flytt-och-stad-pris-cta {
    padding: 2rem 1.5rem;
    min-height: 250px;
  }

  .ffl-flytt-och-stad-pris-includes {
    padding: 1.25rem;
  }
}

/* ===========================
   FLYTT & STÄD NÄR PASSER WIDGET
   Full width-sektion med gradient bakgrund och glassmorphism-kort
   =========================== */

.ffl-flytt-och-stad-nar-passer {
  background: linear-gradient(140deg, #0892A5 0%, #0CA4A5 50%, #06908F 100%);
  padding: 5rem 0 3rem 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Diagonala streck-mönster */
.ffl-flytt-och-stad-nar-passer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  z-index: 1;
  pointer-events: none;
}

/* Vågformad botten */
.ffl-flytt-och-stad-nar-passer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  clip-path: ellipse(120% 100% at 50% 100%);
  z-index: 2;
}

.ffl-flytt-och-stad-nar-passer-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  position: relative;
  z-index: 3;
}

.ffl-flytt-och-stad-nar-passer h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-flytt-och-stad-nar-passer-intro {
  font-size: 1rem;
  color: white;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-flytt-och-stad-nar-passer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

/* Första tre korten spänner över 2 kolumner var (totalt 6 kolumner) */
.ffl-flytt-och-stad-nar-passer-card:nth-child(1),
.ffl-flytt-och-stad-nar-passer-card:nth-child(2),
.ffl-flytt-och-stad-nar-passer-card:nth-child(3) {
  grid-column: span 2;
}

/* De två sista korten spänner över 3 kolumner var för bättre balans */
@media (min-width: 769px) {
  .ffl-flytt-och-stad-nar-passer-card:nth-last-child(2) {
    grid-column: 1 / 4;
  }
  
  .ffl-flytt-och-stad-nar-passer-card:nth-last-child(1) {
    grid-column: 4 / 7;
  }
}

.ffl-flytt-och-stad-nar-passer-card {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11);
  position: relative;
  z-index: 4;
}

.ffl-flytt-och-stad-nar-passer-card h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.ffl-flytt-och-stad-nar-passer-description {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ffl-flytt-och-stad-nar-passer-description p {
  margin-bottom: 0.75rem;
}

.ffl-flytt-och-stad-nar-passer-description p:last-child {
  margin-bottom: 0;
}

/* Länkar i när passer-widgeten - vita och fetmarkerade */
.ffl-flytt-och-stad-nar-passer-description a,
.ffl-flytt-och-stad-nar-passer-intro a {
  color: white !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.ffl-flytt-och-stad-nar-passer-description a:hover,
.ffl-flytt-och-stad-nar-passer-intro a:hover {
  color: white !important;
  text-decoration-color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 1024px) {
  .ffl-flytt-och-stad-nar-passer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Återställ grid-column spans på tablet */
  .ffl-flytt-och-stad-nar-passer-card:nth-child(1),
  .ffl-flytt-och-stad-nar-passer-card:nth-child(2),
  .ffl-flytt-och-stad-nar-passer-card:nth-child(3),
  .ffl-flytt-och-stad-nar-passer-card:nth-last-child(2),
  .ffl-flytt-och-stad-nar-passer-card:nth-last-child(1) {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .ffl-flytt-och-stad-nar-passer {
    padding: 3rem 0 2rem 0;
  }

  .ffl-flytt-och-stad-nar-passer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  /* Återställ grid-column spans på mobil */
  .ffl-flytt-och-stad-nar-passer-card:nth-child(1),
  .ffl-flytt-och-stad-nar-passer-card:nth-child(2),
  .ffl-flytt-och-stad-nar-passer-card:nth-child(3),
  .ffl-flytt-och-stad-nar-passer-card:nth-last-child(2),
  .ffl-flytt-och-stad-nar-passer-card:nth-last-child(1) {
    grid-column: span 1;
  }

  .ffl-flytt-och-stad-nar-passer-card {
    padding: 1.5rem;
  }

  .ffl-flytt-och-stad-nar-passer-intro {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .ffl-flytt-och-stad-nar-passer {
    padding: 3rem 0 2rem 0;
  }

  .ffl-flytt-och-stad-nar-passer-card {
    padding: 1.25rem;
  }
}

/* ===========================
   PRIVATFLYTT OMRÅDEN WIDGET
   =========================== */

.ffl-privatflytt-omraden {
  background: linear-gradient(140deg, #0892A5 0%, #0CA4A5 50%, #06908F 100%);
  padding: 5rem 0 3rem 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Diagonala streck-mönster som i service-hero-sektionen */
.ffl-privatflytt-omraden::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  z-index: 1;
  pointer-events: none;
}

/* Vågformad botten */
.ffl-privatflytt-omraden::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  clip-path: ellipse(120% 100% at 50% 100%);
  z-index: 2;
}

.ffl-privatflytt-omraden-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  position: relative;
  z-index: 3;
}

.ffl-privatflytt-omraden h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 1rem;
}

.ffl-privatflytt-omraden-intro {
  font-size: 1rem;
  color: white;
  margin-bottom: 3rem;
  line-height: 1.6;
}

.ffl-privatflytt-omraden-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ffl-privatflytt-omraden-card {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11);
  position: relative;
  z-index: 4;
  /* Ingen hover-effekt enligt önskemål */
}

.ffl-privatflytt-omraden-card h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.ffl-privatflytt-omraden-description {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ffl-privatflytt-omraden-description p {
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.95);
}

.ffl-privatflytt-omraden-description p:last-child {
  margin-bottom: 0;
}

.ffl-privatflytt-omraden-description a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ffl-privatflytt-omraden-description a:hover {
  color: white;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-privatflytt-omraden {
    padding: 4rem 0 2.5rem 0;
  }

  .ffl-privatflytt-omraden-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ffl-privatflytt-omraden-card {
    padding: 1.5rem;
  }

  .ffl-privatflytt-omraden-intro {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .ffl-privatflytt-omraden {
    padding: 3rem 0 2rem 0;
  }

  .ffl-privatflytt-omraden-card {
    padding: 1.25rem;
  }
}

/* ===========================
   FÖRETAGSFLYTT TYPER AV VERKSAMHETER WIDGET
   Full width-sektion med gradient bakgrund (2 kolumner)
   =========================== */

.ffl-foretagsflytt-typer-verksamheter {
  background: linear-gradient(140deg, #0892A5 0%, #0CA4A5 50%, #06908F 100%);
  padding: 5rem 0 3rem 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Diagonala streck-mönster som i service-hero-sektionen */
.ffl-foretagsflytt-typer-verksamheter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  z-index: 1;
}

/* Vågformad botten */
.ffl-foretagsflytt-typer-verksamheter::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  clip-path: ellipse(120% 100% at 50% 100%);
  z-index: 2;
}

.ffl-foretagsflytt-typer-verksamheter-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  position: relative;
  z-index: 3;
}

.ffl-foretagsflytt-typer-verksamheter h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 1rem;
}

.ffl-foretagsflytt-typer-verksamheter-intro {
  font-size: 1rem;
  color: white;
  margin-bottom: 3rem;
  line-height: 1.6;
}

.ffl-foretagsflytt-typer-verksamheter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.ffl-foretagsflytt-typer-verksamheter-card {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11);
  position: relative;
  z-index: 4;
}

.ffl-foretagsflytt-typer-verksamheter-card h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.ffl-foretagsflytt-typer-verksamheter-description {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ffl-foretagsflytt-typer-verksamheter-description p {
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.95);
}

.ffl-foretagsflytt-typer-verksamheter-description p:last-child {
  margin-bottom: 0;
}

.ffl-foretagsflytt-typer-verksamheter-description a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ffl-foretagsflytt-typer-verksamheter-description a:hover {
  color: white;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-foretagsflytt-typer-verksamheter {
    padding: 4rem 0 2.5rem 0;
  }

  .ffl-foretagsflytt-typer-verksamheter-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ffl-foretagsflytt-typer-verksamheter-card {
    padding: 1.5rem;
  }

  .ffl-foretagsflytt-typer-verksamheter-intro {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .ffl-foretagsflytt-typer-verksamheter {
    padding: 3rem 0 2rem 0;
  }

  .ffl-foretagsflytt-typer-verksamheter-card {
    padding: 1.25rem;
  }
}

/* ===========================
   TUNGA LYFT & PIANOFLYTT OMRÅDEN WIDGET
   Full width-sektion med gradient bakgrund och områdes-grid
   =========================== */

.ffl-tunga-lyft-omraden {
  background: linear-gradient(140deg, #0892A5 0%, #0CA4A5 50%, #06908F 100%);
  padding: 5rem 0 3rem 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Diagonala streck-mönster */
.ffl-tunga-lyft-omraden::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  z-index: 1;
  pointer-events: none;
}

/* Vågformad botten */
.ffl-tunga-lyft-omraden::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  clip-path: ellipse(120% 100% at 50% 100%);
  z-index: 2;
}

.ffl-tunga-lyft-omraden-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  position: relative;
  z-index: 3;
}

.ffl-tunga-lyft-omraden h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-tunga-lyft-omraden-intro {
  font-size: 1rem;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-tunga-lyft-omraden-subtext {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-tunga-lyft-omraden h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Områden Grid */
.ffl-tunga-lyft-omraden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.ffl-tunga-lyft-omraden-area {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: white;
  font-weight: 500;
  font-size: 0.9375rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* Ingen hover-effekt enligt önskemål */
}

/* Internlänkar */
.ffl-tunga-lyft-omraden-links {
  text-align: center;
  margin-bottom: 3rem;
}

.ffl-tunga-lyft-omraden-links p {
  color: white;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ffl-tunga-lyft-omraden-links a {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.ffl-tunga-lyft-omraden-links a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}

/* CTA-sektion */
.ffl-tunga-lyft-omraden-cta {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11);
}

.ffl-tunga-lyft-omraden-cta h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 1rem;
  margin-top: 0;
}

.ffl-tunga-lyft-omraden-cta p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.ffl-tunga-lyft-omraden-cta-button {
  display: inline-block;
  background: white;
  color: var(--color-primary);
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ffl-tunga-lyft-omraden-cta-button:hover,
.ffl-tunga-lyft-omraden-cta-button:focus,
.ffl-tunga-lyft-omraden-cta-button:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-tunga-lyft-omraden {
    padding: 3rem 0 2rem 0;
  }

  .ffl-tunga-lyft-omraden-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .ffl-tunga-lyft-omraden-area {
    padding: 1rem;
    font-size: 0.875rem;
  }

  .ffl-tunga-lyft-omraden-cta {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .ffl-tunga-lyft-omraden-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   FÖRETAGSFLYTT VARFÖR OSS WIDGET
   Variant 4: 2-3 Layout (2 större kort, 3 mindre kort)
   =========================== */

.ffl-foretagsflytt-varfor-oss {
  padding: 4rem 0;
  background: #F9F9F9;
}

.ffl-foretagsflytt-varfor-oss-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-foretagsflytt-varfor-oss h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #0892A5 !important;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-foretagsflytt-varfor-oss-intro {
  font-size: 1rem;
  color: #1F2933;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-foretagsflytt-varfor-oss-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.ffl-foretagsflytt-varfor-oss-card {
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    ),
    linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  border-radius: 16px;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.ffl-foretagsflytt-varfor-oss-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

/* Större kort (första 2) - spänner över 3 kolumner */
.ffl-foretagsflytt-varfor-oss-card--large {
  grid-column: span 3;
}

/* Mindre kort (sista 3) - spänner över 2 kolumner */
.ffl-foretagsflytt-varfor-oss-card--small {
  grid-column: span 2;
}

.ffl-foretagsflytt-varfor-oss-card h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.75rem;
  margin-top: 0;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.ffl-foretagsflytt-varfor-oss-card p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-foretagsflytt-varfor-oss {
    padding: 3rem 0;
  }

  .ffl-foretagsflytt-varfor-oss-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ffl-foretagsflytt-varfor-oss-card,
  .ffl-foretagsflytt-varfor-oss-card--large,
  .ffl-foretagsflytt-varfor-oss-card--small {
    grid-column: span 1 !important;
    padding: 1.5rem;
  }

  .ffl-foretagsflytt-varfor-oss-intro {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .ffl-foretagsflytt-varfor-oss {
    padding: 2.5rem 0;
  }

  .ffl-foretagsflytt-varfor-oss-card {
    padding: 1.25rem;
  }
}

/* ===========================
   PRIVATFLYTT VARFÖR OSS WIDGET
   =========================== */

.ffl-privatflytt-varfor-oss {
  padding: 4rem 0;
  background: #F9F9F9;
}

.ffl-privatflytt-varfor-oss-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-privatflytt-varfor-oss h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #0892A5 !important;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-privatflytt-varfor-oss-intro {
  font-size: 1rem;
  color: #1F2933;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-privatflytt-varfor-oss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.ffl-privatflytt-varfor-oss-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: 16px;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.ffl-privatflytt-varfor-oss-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    ),
    linear-gradient(135deg, rgba(8, 146, 165, 0.95) 0%, rgba(12, 164, 165, 0.95) 100%);
  z-index: 1;
}

.ffl-privatflytt-varfor-oss-card h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.75rem;
  margin-top: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}

.ffl-privatflytt-varfor-oss-card p {
  color: white !important;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-privatflytt-varfor-oss {
    padding: 3rem 0;
  }

  .ffl-privatflytt-varfor-oss-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ffl-privatflytt-varfor-oss-card {
    padding: 1.5rem;
  }

  .ffl-privatflytt-varfor-oss-intro {
    margin-bottom: 2rem;
  }

  .ffl-privatflytt-varfor-oss-card h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 480px) {
  .ffl-privatflytt-varfor-oss {
    padding: 2.5rem 0;
  }

  .ffl-privatflytt-varfor-oss-card {
    padding: 1.25rem;
  }
}

/* ===========================
   HOME VARFÖR OSS WIDGET
   =========================== */
.ffl-home-varfor-oss {
  padding: 4rem 0;
  background: #F9F9F9;
}

.ffl-home-varfor-oss-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-home-varfor-oss h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #0892A5 !important;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-home-varfor-oss-intro {
  font-size: 1rem;
  color: #1F2933;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-home-varfor-oss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.ffl-home-varfor-oss-card {
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    ),
    linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  border-radius: 16px;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.ffl-home-varfor-oss-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.ffl-home-varfor-oss-card h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.75rem;
  margin-top: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.ffl-home-varfor-oss-card p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-home-varfor-oss {
    padding: 3rem 0;
  }

  .ffl-home-varfor-oss-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ffl-home-varfor-oss-card {
    padding: 1.5rem;
  }

  .ffl-home-varfor-oss-intro {
    margin-bottom: 2rem;
  }

  .ffl-home-varfor-oss-card h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 480px) {
  .ffl-home-varfor-oss {
    padding: 2.5rem 0;
  }

  .ffl-home-varfor-oss-card {
    padding: 1.25rem;
  }
}

/* ========================================
   Privatflytt FAQ Widget (Variant B)
   ======================================== */

.ffl-privatflytt-faq {
  padding: 4rem 0;
  background: linear-gradient(135deg, #F9F9F9 0%, white 100%);
  position: relative;
}

.ffl-privatflytt-faq-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ffl-privatflytt-faq h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-privatflytt-faq-intro {
  font-size: 1rem;
  color: #1F2933;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-privatflytt-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ffl-privatflytt-faq-item {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #E5E7EB;
  transition: box-shadow 0.3s ease;
}

.ffl-privatflytt-faq-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ffl-privatflytt-faq-question {
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 1.125rem;
  font-weight: 600;
  user-select: none;
  position: relative;
}

.ffl-privatflytt-faq-question:hover {
  background: linear-gradient(135deg, #067c91 0%, #0a8d8e 100%);
}

.ffl-privatflytt-faq-question::after {
  content: '▼';
  font-size: 1rem;
  color: white;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.ffl-privatflytt-faq-item.active .ffl-privatflytt-faq-question::after {
  transform: rotate(180deg);
}

.ffl-privatflytt-faq-answer {
  padding: 0 2rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  color: #1F2933;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.ffl-privatflytt-faq-item.active .ffl-privatflytt-faq-answer {
  max-height: 500px;
  padding: 1.75rem 2rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ffl-privatflytt-faq {
    padding: 3rem 0;
  }

  .ffl-privatflytt-faq-intro {
    margin-bottom: 2rem;
  }

  .ffl-privatflytt-faq-question {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
  }

  .ffl-privatflytt-faq-item.active .ffl-privatflytt-faq-answer {
    padding: 1.25rem 1.5rem;
  }
}

/* ===========================
   TJÄNSTESEKTION – Karusell
   =========================== */

/* Sektion bas */
.ffl-services-section {
  padding: var(--spacing-xl) 0;
}

.ffl-services-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

@media (max-width: 768px) {
  .ffl-services-container {
    padding: 0;
  }
}

.ffl-services-header {
  text-align: center;
  margin-bottom: 3.5rem;
  padding: 0 var(--spacing-sm);
}

@media (max-width: 768px) {
  .ffl-services-header {
    margin-bottom: 2.5rem;
  }
}

.ffl-services-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.ffl-services-header p {
  font-size: 1.125rem;
  color: var(--color-text);
  max-width: 700px;
  margin: 0 auto;
}

/* Karusell container */
.ffl-services-carousel {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .ffl-services-carousel {
    overflow: hidden;
    touch-action: pan-x;
    padding: 0; /* Ingen padding för full bredd */
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
}

.ffl-services-carousel-wrapper {
  display: flex;
  gap: 1rem;
  transition: transform 0.3s ease;
  padding-bottom: 1rem;
  padding-top: 1.5rem;
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 768px) {
  .ffl-services-carousel-wrapper {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem; /* Lite mellanrum mellan korten (12px) */
    padding-left: 0;
    padding-right: 0;
    /* Wrapper ska ta exakt samma bredd som carousel-containerns synliga bredd (exklusive padding) */
    width: 100%; /* 100% av carousel-containerns bredd (som redan har padding) */
    display: flex;
    flex-wrap: nowrap; /* Förhindra att kort wrappar */
    box-sizing: border-box;
  }
}

.ffl-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  padding-top: 0;
  height: 100%;
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
}

/* Mobil: Säkerställ att endast 1 kort visas åt gången */
@media (max-width: 768px) {
  .ffl-service-card {
    /* Kortbredden ska vara wrapper-bredd minus gap, så att endast 1 kort visas åt gången */
    min-width: calc(100% - 0.75rem) !important; /* 100% minus gap (12px) */
    width: calc(100% - 0.75rem) !important; /* 100% minus gap (12px) */
    flex-shrink: 0 !important;
    flex-basis: calc(100% - 0.75rem) !important; /* Säkerställ full bredd minus gap */
    box-sizing: border-box; /* Inkludera border i breddberäkningen */
    max-width: calc(100% - 0.75rem) !important; /* Förhindra att kortet blir bredare än containern */
    /* Minska skugga-spridning så att den inte klipps av overflow: hidden */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Minska hover-skugga på mobil */
  .ffl-service-card:hover,
  .ffl-services-carousel-wrapper .ffl-service-card:hover,
  .ffl-service-card-link:hover .ffl-service-card,
  a:hover .ffl-service-card {
    box-shadow: 0 4px 12px rgba(8, 146, 165, 0.12) !important;
  }
  
  /* Säkerställ att wrapper tar full bredd av carousel (exklusive padding) */
  .ffl-services-carousel-wrapper {
    width: 100%;
  }
  
  /* Säkerställ att kortlänken också tar full bredd minus gap */
  .ffl-service-card-link {
    width: calc(100% - 0.75rem) !important;
    min-width: calc(100% - 0.75rem) !important;
    flex-shrink: 0 !important;
    flex-basis: calc(100% - 0.75rem) !important;
    display: block;
  }
}

/* Hover-effekt - fungerar både med och utan wrapper-länk */
.ffl-service-card:hover,
.ffl-services-carousel-wrapper .ffl-service-card:hover,
.ffl-service-card-link:hover .ffl-service-card,
a:hover .ffl-service-card {
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 24px rgba(8, 146, 165, 0.15) !important;
  transform: translateY(-4px) !important;
}

/* Desktop: gör hela kortet klickbart */
@media (min-width: 769px) {
  .ffl-service-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
  }

  .ffl-service-card-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 12px;
  }

  .ffl-service-card-link .ffl-service-card {
    cursor: pointer;
  }

  /* Förhindra hover-effekt på knappen när hela kortet är klickbart */
  .ffl-service-card-link .ffl-service-link {
    pointer-events: none;
  }
}

.ffl-service-header {
  position: relative;
  margin: -1.5rem 1rem 0;
  min-height: 120px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.3);
  border-radius: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.ffl-service-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

.ffl-service-content {
  padding: 1.5rem;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ffl-service-card p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.ffl-service-link {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.2);
  text-align: center;
  align-self: center;
  margin-top: auto;
}

.ffl-service-link:hover {
  background: #067c91;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.3);
  transform: translateY(-1px);
}

/* Karusell navigation */
.ffl-carousel-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
}

.ffl-carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.ffl-carousel-dot,
button.ffl-carousel-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #D1D5DB !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.ffl-carousel-dot:focus,
.ffl-carousel-dot:active,
.ffl-carousel-dot:focus-visible,
button.ffl-carousel-dot:focus,
button.ffl-carousel-dot:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 50% !important;
}

.ffl-carousel-dot.active,
button.ffl-carousel-dot.active {
  background: var(--color-primary) !important;
  width: 24px !important;
  border-radius: 5px !important;
  border: none !important;
  height: 10px !important;
}

.ffl-carousel-arrow,
button.ffl-carousel-arrow {
  position: relative;
  background: var(--color-primary);
  color: white;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 300;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.3);
  transition: all 0.2s ease;
  line-height: 1;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0 !important;
}

.ffl-carousel-arrow:focus,
.ffl-carousel-arrow:active,
.ffl-carousel-arrow:focus-visible,
button.ffl-carousel-arrow:focus,
button.ffl-carousel-arrow:active {
  outline: none !important;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.3) !important;
  border: none !important;
  border-radius: 50% !important;
}

@media (max-width: 768px) {
  .ffl-carousel-arrow:focus,
  .ffl-carousel-arrow:focus-visible,
  .ffl-carousel-arrow:active,
  .ffl-carousel-arrow:focus-within {
    outline: none !important;
    box-shadow: 0 2px 8px rgba(8, 146, 165, 0.3) !important;
    border: none !important;
  }
}

.ffl-carousel-arrow:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.4);
}

.ffl-carousel-arrow.prev,
button.ffl-carousel-arrow.prev {
  background: rgba(8, 146, 165, 0.2) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.2) !important;
  border-radius: 50% !important;
}

.ffl-carousel-arrow.prev:hover,
button.ffl-carousel-arrow.prev:hover {
  background: rgba(8, 146, 165, 0.3) !important;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.3) !important;
  color: var(--color-primary) !important;
  border-radius: 50% !important;
}

.ffl-carousel-arrow.next,
button.ffl-carousel-arrow.next {
  background: var(--color-primary) !important;
  color: white !important;
  border-radius: 50% !important;
}

.ffl-carousel-arrow.next:hover,
button.ffl-carousel-arrow.next:hover {
  background: var(--color-primary-hover) !important;
  color: white !important;
  border-radius: 50% !important;
}

.ffl-carousel-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Desktop - visa som grid */
@media (min-width: 769px) {
  .ffl-services-carousel {
    margin: 0;
    padding: 0;
  }

  .ffl-services-carousel-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    transform: none !important;
    padding-top: 0;
  }

  .ffl-service-card-link {
    display: block;
    height: 100%;
  }

  .ffl-service-card {
    min-width: auto;
    height: 100%;
  }

  .ffl-carousel-nav-container {
    display: none;
  }
}

/* Mobiljusteringar */
@media (max-width: 768px) {
  /* Ta bort alla outlines på karusell-element i mobil */
  .ffl-carousel-arrow:focus,
  .ffl-carousel-arrow:active,
  .ffl-carousel-arrow:focus-visible,
  .ffl-carousel-dot:focus,
  .ffl-carousel-dot:active,
  .ffl-carousel-dot:focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .ffl-services-carousel-wrapper {
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  /* Visuell balans: Justera padding och spacing för korten */
  .ffl-service-card {
    margin: 0; /* Ta bort eventuell margin */
  }

  .ffl-service-header {
    min-height: 100px;
    padding: 1.25rem 1rem; /* Ökad padding för bättre balans */
    margin: -1.5rem 1rem 0;
  }

  .ffl-service-header h3 {
    font-size: 1.125rem;
    line-height: 1.4; /* Bättre line-height för balans */
  }

  .ffl-service-content {
    padding: 1.5rem 1rem 1.25rem 1rem; /* Balanserad padding */
    padding-top: 1.5rem;
  }
  
  .ffl-service-card p {
    margin-bottom: 1.25rem; /* Minskat margin för bättre balans */
  }
  
  .ffl-service-link {
    margin-top: auto; /* Push knappen till botten */
  }

  /* Ta bort focus-outline på länkar och knappar i mobil */
  .ffl-service-card-link:focus,
  .ffl-service-card-link:active,
  .ffl-service-card-link:focus-visible,
  .ffl-service-card-link:focus-within {
    outline: none !important;
    box-shadow: none !important;
  }

  .ffl-carousel-arrow:focus,
  .ffl-carousel-arrow:active,
  .ffl-carousel-arrow:focus-visible,
  .ffl-carousel-arrow:focus-within,
  button.ffl-carousel-arrow:focus,
  button.ffl-carousel-arrow:active {
    outline: none !important;
    box-shadow: 0 2px 8px rgba(8, 146, 165, 0.3) !important;
    border: none !important;
  }

  .ffl-carousel-dot:focus,
  .ffl-carousel-dot:active,
  .ffl-carousel-dot:focus-visible,
  .ffl-carousel-dot:focus-within,
  button.ffl-carousel-dot:focus,
  button.ffl-carousel-dot:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }
}

/* ============================================
   OMDÖMEN-SEKTION – Sticky Scroll
   ============================================ */

/* Elementor-specifik fix för full bredd */
.elementor-section.ffl-testimonials-sticky,
.elementor-section .ffl-testimonials-sticky {
  overflow: visible !important;
}

.elementor-section.ffl-testimonials-sticky .elementor-container,
.elementor-section .ffl-testimonials-sticky .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Säkerställ att scroll-container också tillåter full bredd */
.ffl-testimonials-sticky-scroll-container {
  overflow: visible !important;
}

.ffl-testimonials-sticky {
  width: 100%;
  position: relative;
  overflow: visible;
}

/* Scroll-container som skapar scroll-utrymme (3x viewport height) */
.ffl-testimonials-sticky-scroll-container {
  position: relative;
  height: 300vh; /* 3x viewport height för 3 omdömen */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible; /* Tillåt att rektangeln går utanför */
}

/* Container för innehållet (centrerad, max-width) */
/* BEGRÄNSAD SCOPE: Bara påverka omdömme-sektionen, inte hero-sektionen */
.ffl-testimonials-sticky .ffl-testimonials-sticky-content,
.ffl-testimonials-sticky-scroll-container .ffl-testimonials-sticky-content {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  z-index: 2; /* LÄGRE än hero-sektionens z-index: 10 */
  min-height: 100vh;
  overflow: visible; /* Tillåt att rektangeln går utanför */
}

/* Förhindra att omdömme-sektionen påverkar hero-sektionen */
.ffl-hero-somerstone-section ~ .ffl-testimonials-sticky,
.ffl-hero-somerstone-section ~ * .ffl-testimonials-sticky {
  /* Omdömme-sektionen ska inte påverka hero-sektionens z-index eller position */
  z-index: 1 !important; /* LÄGRE än hero-sektionens z-index: 10 */
}

/* Mobilvy: Lägg till mellanrum ovanför */
@media (max-width: 768px) {
  .ffl-testimonials-sticky-content {
    top: 5rem; /* Mellanrum ovanför i mobilvy */
  }
}

/* Inner wrapper för positionering */
.ffl-testimonials-sticky-content-inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  z-index: 1;
  overflow: visible; /* Tillåt att rektangeln går utanför */
}

/* Rektangel-bakgrund som går bakom allt - FULL BREDD */
.ffl-testimonials-sticky-background-rectangle {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(135deg, #1F2933 0%, #2D3748 100%);
  border-radius: 20px;
  z-index: 0;
  min-height: 300px;
  height: 300px; /* Initial höjd - JavaScript justerar detta automatiskt */
  /* Höjden och positionen justeras via JavaScript för att sluta INNAN bildens topp/botten (3D-effekt) */
  /* Höjden ökas med 100% (50% ovanför och 50% under) via JavaScript */
}

/* Grid layout: bild vänster, text höger */
.ffl-testimonials-sticky-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 3rem;
}

/* Bild-sektion (vänster) - ska vara framför bakgrunden */
.ffl-testimonials-sticky-image-container {
  position: relative;
  z-index: 2;
}

.ffl-testimonials-sticky-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  position: relative;
  transition: opacity 0.6s ease;
}

/* Ta bort bakgrundsfärgen när bild finns - använd JavaScript för att lägga till klass */
.ffl-testimonials-sticky-image.has-image {
  background: #000 !important; /* Svart bakgrund istället för transparent */
}

.ffl-testimonials-sticky-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-radius: 20px; /* Matcha bildboxens border-radius */
  background: #000; /* Svart bakgrund om bilden inte täcker hela ytan */
  min-width: 100%;
  min-height: 100%;
}

/* Wrapper för text-sektionen */
.ffl-testimonials-sticky-text-wrapper {
  position: relative;
  z-index: 1;
}

/* Text-sektion (höger) */
.ffl-testimonials-sticky-text {
  position: relative;
  min-height: 400px;
  z-index: 1;
}

/* Text-wrapper ska ha en tydlig höjd på mobil */
@media (max-width: 768px) {
  .ffl-testimonials-sticky-text-wrapper {
    min-height: 300px;
  }
}

/* Stort citattecken - subtil på mörk bakgrund */
.ffl-testimonials-sticky-quote-mark {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 5.5rem;
  font-weight: 300;
  font-family: Georgia, serif;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.2);
}

/* Omdöme-kort (alla är absolut positionerade, bara active visas) */
.ffl-testimonials-sticky-testimonial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
  transform: translateY(20px);
}

.ffl-testimonials-sticky-testimonial.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrera innehållet vertikalt */
  min-height: 100%; /* Fyll hela höjden */
}

.ffl-testimonials-sticky-content-wrapper {
  position: relative;
  z-index: 1;
}

/* Stjärnbetyg */
.ffl-testimonials-sticky-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.ffl-testimonials-sticky-stars span {
  color: #F59E0B;
}

/* Rubrik - vit text på mörk bakgrund */
.ffl-testimonials-sticky-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* Text - vit text på mörk bakgrund */
.ffl-testimonials-sticky-text-content {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* Författare */
.ffl-testimonials-sticky-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ffl-testimonials-sticky-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ffl-testimonials-sticky-author-info {
  flex: 1;
}

.ffl-testimonials-sticky-author-name {
  font-weight: 600;
  color: #FFFFFF;
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.ffl-testimonials-sticky-author-type {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

/* Header-styling */
.ffl-testimonials-sticky-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.ffl-testimonials-sticky-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.ffl-testimonials-sticky-header p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--color-text);
  line-height: 1.7;
}

/* Responsiv design */
@media (max-width: 1024px) {
  .ffl-testimonials-sticky-wrapper {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ffl-testimonials-sticky-image {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .ffl-testimonials-sticky-content {
    padding: 0 1rem;
  }

  /* Dölj bilden på mobil */
  .ffl-testimonials-sticky-image-container {
    display: none;
  }

  /* Bara text-sektionen, centrerad */
  .ffl-testimonials-sticky-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    justify-items: center;
  }

  /* Text-sektion - centrerad och kompakt */
  .ffl-testimonials-sticky-text-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 2rem 1.5rem; /* Jämn padding ovanför och nedanför */
    text-align: center;
    display: flex;
    align-items: center; /* Centrera vertikalt */
    justify-content: center; /* Centrera horisontellt */
    min-height: 100%; /* Fyll hela höjden */
  }

  .ffl-testimonials-sticky-text {
    min-height: auto;
    padding: 0; /* Ta bort extra padding eftersom wrapper har padding */
    width: 100%; /* Full bredd */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrera innehållet vertikalt */
  }
  
  .ffl-testimonials-sticky-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrera innehållet vertikalt */
    align-items: center; /* Centrera horisontellt */
    width: 100%;
  }

  .ffl-testimonials-sticky-quote-mark {
    font-size: 4rem;
    top: 0.5rem;
    left: 0.5rem;
  }

  .ffl-testimonials-sticky-stars {
    margin-top: 0; /* Ta bort margin-top så att text-wrapper:ens padding styr toppen */
    margin-bottom: 1rem; /* Behåll margin-bottom för mellanrum till title */
    font-size: 1.25rem;
  }

  .ffl-testimonials-sticky-title {
    font-size: 1.25rem;
    margin-top: 0; /* Ta bort margin-top så att text-wrapper:ens padding styr */
    margin-bottom: 1rem; /* Behåll margin-bottom för mellanrum till text */
    line-height: 1.4;
  }

  .ffl-testimonials-sticky-text-content {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0; /* Ta bort margin-top */
    margin-bottom: 1rem; /* Lägg till margin-bottom för mellanrum till author */
  }

  /* Avatar och info inuti rektangeln på mobil */
  .ffl-testimonials-sticky-author {
    margin-top: 0; /* Ta bort margin-top så att text-content:ens margin-bottom styr */
    margin-bottom: 0; /* Ta bort margin-bottom så att text-wrapper:ens padding styr botten */
    padding-top: 0;
  }
  
  .ffl-testimonials-sticky-author-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .ffl-testimonials-sticky-author-name {
    font-size: 0.95rem;
  }

  .ffl-testimonials-sticky-author-type {
    font-size: 0.85rem;
  }

  .ffl-testimonials-sticky-scroll-container {
    height: 400vh; /* 4x viewport height för att ge omdöme 3 mer utrymme att visas klart */
  }

  .ffl-testimonials-sticky-content {
    min-height: 500px;
  }

  .ffl-testimonials-sticky-content-inner {
    min-height: 500px;
  }

  /* Rektangeln ska matcha text-innehållets höjd på mobil */
  .ffl-testimonials-sticky-background-rectangle {
    border-radius: 16px;
    z-index: 1; /* Bakgrundsrektangeln ska vara bakom texten */
    /* 3D-effekt med flerskiktad skugga */
    box-shadow: 
      0 8px 24px rgba(0, 0, 0, 0.3),
      0 16px 48px rgba(0, 0, 0, 0.2);
  }
  
  .ffl-testimonials-sticky-content-inner {
    position: relative;
  }

  /* Scroll Progress Indicator - Mobil (horisontell) */
  .ffl-testimonials-sticky-progress {
    position: absolute;
    bottom: 4rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
  }
  
  .ffl-testimonials-sticky-progress-bar {
    width: 0%;
    height: 100%;
  }
  
  /* Progress Counter - Mobil (alla varianter) - utanför bakgrundsrektangeln */
  /* Indikatorn ska vara utanför bakgrundsrektangeln, under wrapper:en */
  .ffl-testimonials-sticky-counter,
  .ffl-testimonials-sticky-counter--badge,
  .ffl-testimonials-sticky-counter--slash,
  .ffl-testimonials-sticky-counter--dots,
  .ffl-testimonials-sticky-counter--minimal,
  .ffl-testimonials-sticky-counter--line {
    position: absolute !important;
    bottom: auto !important;
    top: calc(100% + 0.25rem) !important; /* Placera den nästan exakt under wrapper:en med litet mellanrum (4px) */
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    z-index: 10 !important; /* Säkerställ att den är ovanför bakgrundsrektangeln */
    margin-top: 0 !important;
  }
  
  /* Säkerställ att wrapper har position relative för att indikatorn ska positioneras korrekt */
  .ffl-testimonials-sticky-wrapper {
    position: relative;
    margin-bottom: 0 !important; /* Ta bort extra margin */
  }
  
  /* Variant 7: Justera för mobil */
  .ffl-testimonials-sticky-counter--line {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  .ffl-testimonials-sticky-counter--line .counter-line {
    width: 80px;
  }
  
  /* Säkerställ att counter-text är synlig (mörk färg) */
  .ffl-testimonials-sticky-counter--line .counter-text {
    color: #1F2933 !important;
  }
  
  /* Navigation dots - centrerad längst ner på mobil, utanför bakgrundsrektangeln */
  .ffl-testimonials-sticky-navigation {
    position: relative !important; /* Ändra från absolute till relative */
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important; /* Lägg till margin-top för att placera den under indikatorn */
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    z-index: 10 !important; /* Säkerställ att den är ovanför bakgrundsrektangeln */
  }
  
  /* Scroll Progress Indicator - Mobil - utanför bakgrundsrektangeln */
  .ffl-testimonials-sticky-progress {
    position: relative !important; /* Ändra från absolute till relative */
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 200px !important;
    height: 4px !important;
    margin: 1rem auto 0 !important; /* Centrera och lägg till margin-top */
    z-index: 10 !important; /* Säkerställ att den är ovanför bakgrundsrektangeln */
  }
  
  /* Säkerställ att wrapper inte har overflow som klipper indikatorerna */
  .ffl-testimonials-sticky-wrapper {
    overflow: visible !important;
  }
  
  /* Säkerställ att content-inner inte klipper indikatorerna */
  .ffl-testimonials-sticky-content-inner {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .ffl-testimonials-sticky-scroll-container {
    height: 120vh; /* Minskat från 150vh för mindre tomrum (ca 40vh per omdöme) */
  }
  
  .ffl-testimonials-sticky-content {
    min-height: 70vh; /* Minskat från 80vh */
  }
  
  .ffl-testimonials-sticky-header {
    margin-bottom: 2rem; /* Minskat från 4rem */
    padding: 1.5rem 1rem; /* Minskat från 2rem 1rem */
  }
  
  .ffl-testimonials-sticky-text-wrapper {
    padding: 2rem 1.5rem; /* Jämn padding ovanför och nedanför */
    text-align: center;
    display: flex;
    align-items: center; /* Centrera vertikalt */
    justify-content: center; /* Centrera horisontellt */
    min-height: 100%; /* Fyll hela höjden */
  }
  
  .ffl-testimonials-sticky-text {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrera innehållet vertikalt */
    width: 100%;
  }
  
  .ffl-testimonials-sticky-testimonial.active {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrera innehållet vertikalt */
    min-height: 100%; /* Fyll hela höjden */
  }
  
  .ffl-testimonials-sticky-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrera innehållet vertikalt */
    align-items: center; /* Centrera horisontellt */
    width: 100%;
  }
  
  .ffl-testimonials-sticky-quote-mark {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .ffl-testimonials-sticky-stars {
    justify-content: center;
    margin-bottom: 0; /* Ta bort margin så att text-wrapper:ens padding styr */
    margin-top: 0; /* Ta bort margin-top också */
  }
  
  .ffl-testimonials-sticky-title,
  .ffl-testimonials-sticky-text-content {
    text-align: center;
  }
  
  .ffl-testimonials-sticky-author {
    justify-content: center; /* Centrera författare-info */
  }
  
  .ffl-testimonials-sticky-author-info {
    text-align: center; /* Centrera författare-info */
  }
}

/* Navigation Dots */
.ffl-testimonials-sticky-navigation {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  gap: 0.75rem;
  z-index: 10;
}

.ffl-testimonials-sticky-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.ffl-testimonials-sticky-dot:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}

.ffl-testimonials-sticky-dot.active {
  background: rgba(255, 255, 255, 0.9);
  width: 32px;
  border-radius: 6px;
}

/* Scroll Progress Indicator */
.ffl-testimonials-sticky-progress {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  z-index: 10;
  overflow: hidden;
}

.ffl-testimonials-sticky-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
  border-radius: 2px;
  transition: height 0.3s ease;
}

/* Progress Counter - Variant 7: Line Indicator (AKTIV) */
.ffl-testimonials-sticky-counter--line {
  position: absolute;
  bottom: 5rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
}

.ffl-testimonials-sticky-counter--line .counter-line {
  width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.ffl-testimonials-sticky-counter--line .counter-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  transition: width 0.3s ease;
  border-radius: 1px;
}

.ffl-testimonials-sticky-counter--line .counter-text {
  color: #1F2933;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ===========================
   OM OSS-SEKTION
   =========================== */

.ffl-about {
  padding: var(--spacing-xl) 0;
  position: relative;
}

.ffl-about--light {
  background-color: var(--color-background-light);
}

/* Section inner container */
.ffl-section-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

/* Split layout - två kolumner på desktop, vertikal på mobil */
.ffl-split {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
}

@media (min-width: 768px) {
  .ffl-split {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xl);
  }
}

.ffl-about__content {
  flex: 1;
}

.ffl-about__image {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .ffl-about__image {
    max-width: 500px;
  }
}

.ffl-about__image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.ffl-about h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

.ffl-about p {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
  max-width: 65ch;
}

.ffl-about__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  margin-top: var(--spacing-md);
  transition: all 0.2s ease;
}

.ffl-about__link:hover {
  color: var(--color-primary-hover);
  gap: 0.75rem;
}

.ffl-about__link::after {
  content: '»';
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.ffl-about__link:hover::after {
  transform: translateX(4px);
}

/* Variant: Bild med accent-border */
.ffl-about .ffl-about__image--accent-border {
  position: relative;
  padding: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 20px;
}

.ffl-about .ffl-about__image--accent-border img {
  border-radius: 12px;
}

/* Variant: Bild med overlay-gradient */
.ffl-about .ffl-about__image--overlay {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.ffl-about .ffl-about__image--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 146, 165, 0.1) 0%,
    rgba(12, 164, 165, 0.05) 100%
  );
  pointer-events: none;
}

.ffl-about .ffl-about__image--overlay img {
  border-radius: 20px;
}

/* Variant: Omvänd layout (bild vänster, text höger) */
.ffl-about--reverse .ffl-split {
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  .ffl-about--reverse .ffl-split {
    flex-direction: row-reverse;
  }
}

/* Variant: Med accent-stripe och gradient-bakgrund */
.ffl-about--accent-stripe {
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 50%,
    rgba(255, 255, 255, 0) 100%
  ),
  linear-gradient(to right, rgba(8, 146, 165, 0.05), rgba(12, 164, 165, 0.03));
  position: relative;
}

.ffl-about--accent-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0892A5 0%, #0CA4A5 50%, #06908F 100%);
}

.ffl-about--accent-stripe .ffl-about__image img {
  box-shadow: 0 12px 32px rgba(8, 146, 165, 0.15);
}

/* Variant: Med primär knapp istället för textlänk */
.ffl-about__link--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  margin-top: var(--spacing-md);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .ffl-about__link--button {
    padding: 14px 32px;
  }
}

.ffl-about__link--button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
  gap: 0.5rem;
}

.ffl-about__link--button::after {
  content: '→';
  font-size: 1.125rem;
}

.ffl-about__link--button:hover::after {
  transform: translateX(4px);
}

/* Responsiv */
@media (max-width: 768px) {
  .ffl-about {
    padding: var(--spacing-lg) 0;
  }

  .ffl-about h2 {
    font-size: 1.5rem;
  }

  .ffl-about p {
    font-size: 0.95rem;
  }
}

/* ===========================
   KONTAKT/OFFERT-SEKTION (NY DESIGN)
   =========================== */

.ffl-contact-cta {
  background: var(--color-background-light);
  padding: var(--spacing-xl) 0;
}

.ffl-contact-cta-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-contact-cta-card {
  background: white;
  padding: var(--spacing-xl);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ffl-contact-cta-heading {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
  line-height: 1.3;
}

.ffl-contact-cta-intro {
  font-size: 1.125rem;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: var(--spacing-xl);
  line-height: 1.7;
}

.ffl-contact-cta-checklist {
  list-style: none;
  padding: 0;
  margin: var(--spacing-xl) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.ffl-contact-cta-checklist li {
  padding: 0.75rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: 1rem;
  color: var(--color-text);
}

.ffl-contact-cta-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
  font-size: 1.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
}

.ffl-contact-cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin: var(--spacing-xl) 0;
  flex-wrap: wrap;
}

.ffl-contact-cta-primary,
button.ffl-contact-cta-primary {
  background: var(--color-primary);
  color: white;
  padding: 14px 32px;
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: inherit; /* Ärv font från body */
  -webkit-appearance: none; /* Ta bort default iOS-styling */
  appearance: none;
  touch-action: manipulation; /* Förbättrar touch-respons på mobil */
}

.ffl-contact-cta-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
  color: white;
}

.ffl-contact-cta-secondary {
  background: transparent;
  color: var(--color-primary);
  padding: 14px 32px;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  display: inline-block;
}

.ffl-contact-cta-secondary:hover {
  background: var(--color-primary);
  color: white;
}

.ffl-contact-cta-info {
  text-align: center;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border-light);
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.ffl-contact-cta-info strong {
  color: var(--color-text);
  display: block;
  margin-bottom: 0.5rem;
}

.ffl-contact-cta-info a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.ffl-contact-cta-info a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .ffl-contact-cta {
    padding: var(--spacing-lg) 0;
  }

  .ffl-contact-cta-card {
    padding: var(--spacing-lg);
  }

  .ffl-contact-cta-checklist {
    grid-template-columns: 1fr;
    gap: 0.5rem; /* Mindre gap mellan punkter */
  }

  .ffl-contact-cta-checklist li {
    font-size: 0.875rem; /* 14px istället för 16px */
    padding: 0.5rem 0; /* Mindre padding */
    padding-left: 2rem; /* Mindre padding-left för checkmark */
    line-height: 1.5; /* Tätare line-height */
  }

  .ffl-contact-cta-checklist li::before {
    font-size: 1.125rem; /* Mindre checkmark (från 1.5rem) */
    width: 1.5rem; /* Mindre cirkel (från 1.75rem) */
    height: 1.5rem;
  }

  .ffl-contact-cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm); /* Mindre gap mellan knappar */
  }

  .ffl-contact-cta-primary,
  .ffl-contact-cta-secondary {
    width: 100%;
    max-width: 400px;
    text-align: center; /* Centrera texten */
    display: flex; /* För bättre kontroll */
    align-items: center; /* Vertikal centrering */
    justify-content: center; /* Horisontell centrering */
  }

  /* Primärknappen - lite större */
  .ffl-contact-cta-primary {
    padding: 14px 28px; /* Mer padding än sekundär */
    font-size: 0.9375rem; /* 15px - lite större text */
    font-weight: 600;
  }

  /* Sekundärknappen - lite mindre */
  .ffl-contact-cta-secondary {
    padding: 12px 24px; /* Mindre padding */
    font-size: 0.875rem; /* 14px - mindre text */
    font-weight: 600;
  }
}

/* Variant: Med accent-stripe och gradient-bakgrund */
.ffl-contact--accent-stripe {
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 50%,
    rgba(255, 255, 255, 0) 100%
  ),
  linear-gradient(to right, rgba(8, 146, 165, 0.05), rgba(12, 164, 165, 0.03));
  position: relative;
}

.ffl-contact--accent-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0892A5 0%, #0CA4A5 50%, #06908F 100%);
}

/* Container och Wrapper */
.ffl-contact-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

@media (min-width: 1200px) {
  .ffl-contact-wrapper {
    gap: calc(var(--spacing-xl) * 1.5);
  }
}

/* Rubriker */
.ffl-contact h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

.ffl-contact h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

/* Punktlista med checkmarks */
.ffl-contact__checklist {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
}

.ffl-contact__checklist li {
  padding: 0.75rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ffl-contact__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
  font-size: 1.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
}

/* Kontaktvägar */
.ffl-contact__methods {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 2px solid var(--color-border-light);
}

.ffl-contact__method {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.ffl-contact__icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.ffl-contact__method strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  font-weight: 600;
}

.ffl-contact__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.ffl-contact__link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Formulärstyling */
.ffl-contact__form {
  background: var(--color-background);
  padding: var(--spacing-xl);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 146, 165, 0.15);
}

/* Formulärvarianter */
.ffl-contact__form--accent {
  border: 3px solid var(--color-primary);
  box-shadow: 0 8px 24px rgba(8, 146, 165, 0.2);
}

.ffl-contact__form--card {
  background: white;
  border: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.ffl-contact__form--gradient {
  background: linear-gradient(135deg, rgba(8, 146, 165, 0.05) 0%, rgba(12, 164, 165, 0.03) 100%);
  border: 2px solid rgba(8, 146, 165, 0.15);
}

.ffl-contact__form--minimal {
  background: white;
  border: none;
  border-top: 4px solid var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.ffl-contact__form--elevated {
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: 0 20px 60px rgba(8, 146, 165, 0.15);
  transform: translateY(-8px);
}

/* Form Intro Text */
.ffl-contact__form-intro {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

/* Form Microtrust */
.ffl-contact__form-microtrust {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.ffl-contact__form-microtrust-icon {
  color: var(--color-success);
  font-size: 1rem;
}

/* Trust Badges */
.ffl-contact__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: var(--spacing-lg) 0;
}

.ffl-contact__trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(8, 146, 165, 0.08);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Checklist */
.ffl-contact__checklist {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
}

.ffl-contact__checklist li {
  padding: 0.75rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}

.ffl-contact__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
  font-size: 1.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
}

/* Animerade ikoner */
.ffl-contact__icon--phone {
  animation: phoneRing 2s ease-in-out infinite;
}

.ffl-contact__icon--phone::before {
  content: "📞";
  font-size: 1.5rem;
}

.ffl-contact__icon--phone::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  animation: phonePulse 2s ease-in-out infinite;
}

@keyframes phoneRing {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
}

@keyframes phonePulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ffl-contact__icon--mail {
  animation: mailBounce 2s ease-in-out infinite;
}

.ffl-contact__icon--mail::before {
  content: "✉️";
  font-size: 1.5rem;
}

@keyframes mailBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.ffl-contact__icon--mail:hover {
  animation: mailBounce 0.5s ease-in-out infinite;
}

.ffl-contact__form .elementor-field-group {
  margin-bottom: var(--spacing-md);
}

.ffl-contact__form .elementor-field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}

.ffl-contact__form .elementor-field-type-text input,
.ffl-contact__form .elementor-field-type-email input,
.ffl-contact__form .elementor-field-type-tel input,
.ffl-contact__form .elementor-field-type-date input,
.ffl-contact__form .elementor-field-type-textarea textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border-light);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--color-background);
}

.ffl-contact__form .elementor-field-type-text input:focus,
.ffl-contact__form .elementor-field-type-email input:focus,
.ffl-contact__form .elementor-field-type-tel input:focus,
.ffl-contact__form .elementor-field-type-date input:focus,
.ffl-contact__form .elementor-field-type-textarea textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 146, 165, 0.1);
}

.ffl-contact__form .elementor-field-type-textarea textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit-knapp */
.ffl-contact__form .elementor-button {
  width: 100%;
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: var(--border-radius-pill);
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
  margin-top: var(--spacing-md);
}

.ffl-contact__form .elementor-button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
}

/* Success/Error-meddelanden */
.ffl-contact__form .elementor-message {
  padding: var(--spacing-md);
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
  font-weight: 500;
}

.ffl-contact__form .elementor-message.elementor-message-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 2px solid var(--color-success);
}

.ffl-contact__form .elementor-message.elementor-message-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 2px solid var(--color-error);
}

/* Felmeddelanden för validering */
.ffl-field-error {
  border-color: var(--color-error) !important;
}

.ffl-field-error-message {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* Felmeddelanden för checkboxar (villkor) */
.multi-step-form .wpcf7-acceptance.ffl-field-error,
.multi-step-form .wpcf7-list-item.ffl-field-error,
.multi-step-form span[data-name="terms_and_conditions"].ffl-field-error {
  border: 2px solid var(--color-error) !important;
  border-radius: 4px;
  padding: 0.5rem;
  background-color: rgba(239, 68, 68, 0.05);
}

.multi-step-form .wpcf7-acceptance .ffl-field-error-message,
.multi-step-form span[data-name="terms_and_conditions"] .ffl-field-error-message {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  display: block;
  font-weight: 500;
}

/* Gammal CSS för .ffl-contact--asymmetric borttagen - används inte i widgets */

/* Contact Form 7 styling */
.ffl-contact__form .wpcf7 {
  width: 100%;
}

.ffl-contact__form .wpcf7-form {
  width: 100%;
}

.ffl-contact__form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: var(--spacing-md);
}

.ffl-contact__form .wpcf7 label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}

.ffl-contact__form .wpcf7 input[type="text"],
.ffl-contact__form .wpcf7 input[type="email"],
.ffl-contact__form .wpcf7 input[type="tel"],
.ffl-contact__form .wpcf7 input[type="date"],
.ffl-contact__form .wpcf7 input[type="number"],
.ffl-contact__form .wpcf7 select,
.ffl-contact__form .wpcf7 textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border-light);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: var(--color-background);
}

.ffl-contact__form .wpcf7 input[type="text"]:focus,
.ffl-contact__form .wpcf7 input[type="email"]:focus,
.ffl-contact__form .wpcf7 input[type="tel"]:focus,
.ffl-contact__form .wpcf7 input[type="date"]:focus,
.ffl-contact__form .wpcf7 input[type="number"]:focus,
.ffl-contact__form .wpcf7 select:focus,
.ffl-contact__form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 146, 165, 0.1);
}

.ffl-contact__form .wpcf7 textarea {
  resize: vertical;
  min-height: 120px;
}

.ffl-contact__form .wpcf7-submit {
  width: 100%;
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: var(--border-radius-pill);
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
  margin-top: var(--spacing-md);
}

.ffl-contact__form .wpcf7-submit:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
}

.ffl-contact__form .wpcf7-response-output {
  padding: var(--spacing-md);
  border-radius: 8px;
  margin-top: var(--spacing-md);
  font-weight: 500;
}

.ffl-contact__form .wpcf7-mail-sent-ok {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 2px solid var(--color-success);
}

.ffl-contact__form .wpcf7-mail-sent-ng,
.ffl-contact__form .wpcf7-aborted,
.ffl-contact__form .wpcf7-spam,
.ffl-contact__form .wpcf7-validation-errors {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 2px solid var(--color-error);
}

.ffl-contact__form .wpcf7-not-valid-tip {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.ffl-contact__form .wpcf7-not-valid {
  border-color: var(--color-error) !important;
}

.ffl-contact__form .wpcf7-list-item {
  margin: 0.5rem 0;
}

.ffl-contact__form .wpcf7-checkbox input[type="checkbox"],
.ffl-contact__form .wpcf7-radio input[type="radio"] {
  margin-right: 0.5rem;
}

/* Gammal CSS för .ffl-contact--asymmetric borttagen - används inte i widgets */

/* Responsiv */
@media (max-width: 768px) {
  .ffl-contact {
    padding: var(--spacing-lg) 0;
  }

  .ffl-contact-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  /* Flytta kontaktinformationen under formuläret i mobilvy */
  .ffl-contact-text {
    display: contents;
  }

  .ffl-contact-text > h2 {
    order: 1;
    grid-column: 1;
  }

  .ffl-contact-text > p {
    order: 2;
    grid-column: 1;
  }

  .ffl-contact-text > .ffl-contact__trust-badges {
    order: 3;
    grid-column: 1;
  }

  .ffl-contact-text > .ffl-contact__checklist {
    order: 4;
    grid-column: 1;
  }

  .ffl-contact-wrapper > .ffl-contact__form-column,
  .ffl-contact-wrapper > div:last-child {
    order: 5;
    grid-column: 1;
  }

  .ffl-contact-text > .ffl-contact__methods {
    order: 6;
    grid-column: 1;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 2px solid var(--color-border-light);
  }

  .ffl-contact__form {
    padding: var(--spacing-lg);
  }

  .ffl-contact__method {
    flex-direction: column;
    align-items: flex-start;
  }

  .ffl-contact__icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .ffl-contact__icon--phone::before,
  .ffl-contact__icon--mail::before {
    font-size: 1.25rem;
  }

}

/* ========================================
   MULTI-STEP FORMULÄR (Contact Form 7 Multi-Step)
   ======================================== */

.ffl-multistep-form {
  position: relative;
}

/* Progress indicator */
.ffl-multistep-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-border-light);
}

.ffl-multistep-progress__step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 var(--spacing-xs);
}

.ffl-multistep-progress__step::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-border-light);
  color: var(--color-text);
  margin: 0 auto var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  border: 3px solid var(--color-border-light);
  transition: all 0.3s ease;
}

.ffl-multistep-progress__step[data-step="1"]::before { content: '1'; }
.ffl-multistep-progress__step[data-step="2"]::before { content: '2'; }
.ffl-multistep-progress__step[data-step="3"]::before { content: '3'; }
.ffl-multistep-progress__step[data-step="4"]::before { content: '4'; }
.ffl-multistep-progress__step[data-step="5"]::before { content: '5'; }

.ffl-multistep-progress__step.active::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.ffl-multistep-progress__step.completed::before {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}

.ffl-multistep-progress__step-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-weight: 500;
  margin-top: var(--spacing-xs);
}

.ffl-multistep-progress__step.active .ffl-multistep-progress__step-label {
  color: var(--color-primary);
  font-weight: 600;
}

/* Step container */
.ffl-step {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.ffl-step.active {
  display: block;
}

.ffl-step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
}

.ffl-step-note {
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

/* Navigation buttons */
.ffl-step-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 2px solid var(--color-border-light);
}

.ffl-step-btn {
  padding: 12px 32px;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.ffl-step-btn--prev {
  background: var(--color-background);
  color: var(--color-text);
  border: 2px solid var(--color-border-light);
}

.ffl-step-btn--prev:hover {
  background: var(--color-border-light);
  border-color: var(--color-text-light);
}

.ffl-step-btn--next,
.ffl-step-btn--submit {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
}

.ffl-step-btn--next:hover,
.ffl-step-btn--submit:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
}

.ffl-step-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Step-specific styling */
.ffl-step .wpcf7-form-control-wrap {
  margin-bottom: var(--spacing-sm) !important; /* Minska margin-bottom från md till sm */
}

/* Minska margin-bottom på CF7-form-control-wrap i multi-step-form */
.multi-step-form .wpcf7-form-control-wrap {
  margin-bottom: var(--spacing-sm) !important; /* Minska margin-bottom från md till sm */
}

.ffl-step .wpcf7-checkbox,
.ffl-step .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Variant 3: Minimalistisk Knapp med Subtle Intryckt-effekt */
.multi-step-form .wpcf7-checkbox,
.multi-step-form .wpcf7-list-item {
  margin-bottom: var(--spacing-xs) !important;
}

/* Checkbox-knapp styling - Förstärkt specificitet för Elementor */
.multi-step-form .wpcf7-checkbox label,
.multi-step-form .wpcf7-list-item label,
  .elementor-widget .multi-step-form .wpcf7-checkbox label,
.elementor-widget .multi-step-form .wpcf7-list-item label,
.elementor-container .multi-step-form .wpcf7-checkbox label,
.elementor-container .multi-step-form .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important;
  padding: 12px 24px !important; /* Matcha "Gå vidare"-knappens padding (12px vertikalt) */
  border: 1.5px solid var(--color-border-light) !important;
  border-radius: 6px !important;
  background-color: var(--color-background-light) !important;
  color: var(--color-text) !important;
  font-size: 1rem !important; /* Matcha "Gå vidare"-knappens font-size */
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  position: relative !important;
  margin: 0 !important;
  width: auto !important;
  min-height: 48px !important; /* Matcha knappens höjd */
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.multi-step-form .wpcf7-checkbox input[type="checkbox"] {
  display: none !important; /* Dölj standard checkbox */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.multi-step-form .wpcf7-checkbox label::before,
.multi-step-form .wpcf7-list-item label::before {
  content: "" !important;
  width: 20px !important; /* Checkbox-indikator */
  height: 20px !important; /* Checkbox-indikator */
  border: 2px solid var(--color-border-dark) !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  display: flex !important; /* Flex för att centrera checkmark inuti */
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; /* Subtil skugga för mer framträdande */
  position: relative !important;
  color: transparent !important; /* Gör text transparent när inte checked */
}

/* Variant 4 Förbättrad: Tydlig border och checkbox-indikator istället för bara bakgrund - Förstärkt specificitet */
.multi-step-form .wpcf7-checkbox input[type="checkbox"]:checked + span,
.multi-step-form .wpcf7-checkbox:has(input[type="checkbox"]:checked) label,
.multi-step-form .wpcf7-list-item:has(input[type="checkbox"]:checked) label,
.elementor-widget .multi-step-form .wpcf7-checkbox:has(input[type="checkbox"]:checked) label,
.elementor-widget .multi-step-form .wpcf7-list-item:has(input[type="checkbox"]:checked) label,
.elementor-container .multi-step-form .wpcf7-checkbox:has(input[type="checkbox"]:checked) label,
.elementor-container .multi-step-form .wpcf7-list-item:has(input[type="checkbox"]:checked) label {
  background-color: transparent !important; /* Ingen bakgrund på label - bara checkbox-boxen ska ha bakgrund */
  border-color: var(--color-primary) !important; /* Primärfärgad border */
  border-width: 2.5px !important; /* Tydligare border (2.5px istället för 2px) */
  color: var(--color-text) !important; /* Behåll mörk text för läsbarhet */
  box-shadow: 0 0 0 2px rgba(8, 146, 165, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; /* Tydligare border-effekt med outer glow */
  transform: translateY(1px) !important; /* Subtil intryckt-effekt */
}

.multi-step-form .wpcf7-checkbox:has(input[type="checkbox"]:checked) label::before,
.multi-step-form .wpcf7-list-item:has(input[type="checkbox"]:checked) label::before {
  background-color: var(--color-primary) !important; /* Primärfärg bakgrund i checkbox-indikatorn */
  border-color: var(--color-primary) !important; /* Primärfärgad border */
  box-shadow: 0 2px 4px rgba(8, 146, 165, 0.3) !important; /* Tydligare skugga för mer framträdande checkbox-indikator */
  content: "✓" !important; /* Visa checkmark direkt i boxen */
  color: #ffffff !important; /* Vit checkmark */
  font-size: 13px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.multi-step-form .wpcf7-checkbox:has(input[type="checkbox"]:checked) label::after,
.multi-step-form .wpcf7-list-item:has(input[type="checkbox"]:checked) label::after {
  display: none !important; /* Dölj ::after eftersom checkmarken nu är i ::before */
}

.multi-step-form .wpcf7-checkbox label:hover,
.multi-step-form .wpcf7-list-item label:hover {
  border-color: var(--color-primary) !important;
  background-color: rgba(8, 146, 165, 0.05) !important;
}

.multi-step-form .wpcf7-checkbox:has(input[type="checkbox"]:checked) label:hover,
.multi-step-form .wpcf7-list-item:has(input[type="checkbox"]:checked) label:hover {
  background-color: transparent !important; /* Ingen bakgrund vid hover - bara checkbox-boxen ska ha bakgrund */
  border-color: var(--color-primary-hover) !important; /* Mörkare border vid hover */
  transform: translateY(1px) !important; /* Behåll intryckt känsla */
}

/* Fallback för äldre webbläsare som inte stödjer :has() */
.multi-step-form .wpcf7-checkbox input[type="checkbox"]:checked ~ span {
  color: var(--color-primary) !important;
}

.ffl-step .wpcf7-checkbox label,
.ffl-step .wpcf7-radio label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 400;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: 8px;
  transition: background 0.2s ease;
}

.ffl-step .wpcf7-checkbox label:hover,
.ffl-step .wpcf7-radio label:hover {
  background: rgba(8, 146, 165, 0.05);
}

.ffl-step .wpcf7-checkbox input[type="checkbox"],
.ffl-step .wpcf7-radio input[type="radio"] {
  width: auto;
  margin-right: var(--spacing-xs);
  cursor: pointer;
}

/* Select styling */
.ffl-step .wpcf7-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230892A5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ffl-multistep-progress {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .ffl-multistep-progress__step {
    flex: 0 0 calc(50% - var(--spacing-xs));
  }

  .ffl-multistep-progress__step-label {
    font-size: 0.7rem;
  }

  .ffl-step-title {
    font-size: 1.25rem;
  }

  .ffl-step-navigation {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .ffl-step-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   MULTI-STEP FORMULÄR (Flyttfixarn-stil)
   Förbättrad version med designsystem
   ======================================== */

.multi-step-form {
  position: relative;
  font-family: var(--font-family);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: 0 !important; /* Ta bort margin på botten */
}

/* Säkerställ att CF7-wrapper inte döljer formuläret */
.wpcf7-form.multi-step-form,
.wpcf7 .multi-step-form,
.wpcf7-form .multi-step-form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: 0 !important; /* Ta bort margin på botten */
}

/* Ta bort padding från CF7-wrappers och Elementor-containers */
.elementor-widget .multi-step-form,
.elementor-container .multi-step-form,
.elementor-column .multi-step-form,
.elementor-widget-container .multi-step-form,
.elementor-element .multi-step-form,
.wpcf7-form-control-wrap .multi-step-form,
.wpcf7 .multi-step-form {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ytterligare specifika regler för Elementor-sektioner och kolumner som innehåller formuläret */
.elementor-section .multi-step-form,
.elementor-column .multi-step-form,
.elementor-widget-shortcode .multi-step-form,
.elementor-widget-text-editor .multi-step-form {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Progress Bar */
.progress-bar-container {
  display: none;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: var(--spacing-xs) !important; /* Minska margin-bottom från sm till xs */
}

.form-step[data-step="0"] ~ .progress-bar-container {
  display: none !important;
}

.progress-steps {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0 !important; /* Ta bort all padding */
  margin: 0 0 var(--spacing-xs) 0 !important; /* Minska margin-bottom från md till xs */
  border-bottom: 2px solid var(--color-border-light);
}

.progress-steps .step {
  flex: 1;
  text-align: center;
  padding: var(--spacing-xs) 0;
  border-bottom: 2px solid var(--color-border-light);
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-weight: 400;
  transition: all 0.3s ease;
  cursor: default;
}

.progress-steps .step.active {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.progress-steps .step.completed {
  color: var(--color-success);
  border-bottom: 2px solid var(--color-success);
}

/* Form Steps - Dölj alla som standard */
.multi-step-form .form-step {
  display: none !important;
  animation: fadeIn 0.3s ease-in-out;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: 0 !important; /* Ta bort margin på botten */
}

/* Visa första steget som standard (fallback om JavaScript inte laddas) */
.multi-step-form .form-step[data-step="0"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: 0 !important; /* Ta bort margin på botten */
}

/* Visa bara aktivt steg - detta måste ha högre specificitet */
.multi-step-form .form-step.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: 0 !important; /* Ta bort margin på botten */
}

/* Säkerställ att bara ett steg är synligt åt gången - extra säkerhet */
.multi-step-form .form-step:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ta bort padding från första elementet i varje form-step */
.multi-step-form .form-step.active > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ta bort padding från sista elementet i varje form-step */
.multi-step-form .form-step.active > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.multi-step-form h2,
.multi-step-form h3 {
  padding-left: 3px;
  padding-top: 0 !important; /* Ta bort padding på toppen */
  padding-bottom: 0 !important; /* Ta bort padding på botten */
  margin-top: 0 !important; /* Ta bort margin på toppen */
  margin-bottom: var(--spacing-xs) !important; /* Minska margin-bottom från sm till xs */
  color: var(--color-text);
}

.multi-step-form h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.multi-step-form h2.no-margin {
  margin: 0;
}

.multi-step-form h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

.multi-step-form h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: var(--spacing-sm) !important; /* Minska margin-top från lg till sm */
  margin-bottom: var(--spacing-sm) !important; /* Minska margin-bottom från md till sm */
}

.multi-step-form h4.storage-title {
  margin-top: var(--spacing-lg);
}

/* Labels */
.multi-step-form label {
  color: var(--color-text) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  display: block;
  margin-bottom: 2px !important; /* Minskat från 0.3125rem (5px) till 2px */
  padding-left: 5px;
  line-height: 1 !important;
}

/* Större text för "När vill du flytta?" label */
.multi-step-form label[for="moving_date"] {
  font-size: 1.1rem !important; /* Öka från 0.75rem till 1.1rem */
  font-weight: 500 !important; /* Gör den lite fetare */
  margin-bottom: 0.25rem !important; /* Minskat gap till checkboxen */
}

/* Minska gapet mellan datum-fältet och checkboxen */
.multi-step-form .wpcf7-form-control-wrap:has(#moving_date) {
  margin-bottom: 0.5rem !important; /* Mindre gap till checkboxen */
}

/* Form Rows & Columns */
.multi-step-form .form-row {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: 0;
  margin-bottom: var(--spacing-sm) !important; /* Minska margin-bottom från md till sm */
}

.multi-step-form .form-col {
  flex: 1;
}

/* Input Fields */
.multi-step-form .form-step input[type="text"],
.multi-step-form .form-step input[type="number"],
.multi-step-form .form-step input[type="date"],
.multi-step-form .form-step input[type="tel"],
.multi-step-form .form-step input[type="email"],
.multi-step-form .form-step select,
.multi-step-form .form-step textarea {
  border-radius: 5px !important;
  padding: 12px !important;
  height: 50px !important;
  border: 2px solid var(--color-border-light);
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Date input specifik styling */
.multi-step-form .form-step input[type="date"] {
  appearance: auto;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background-color: var(--color-background);
}

.multi-step-form .form-step input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 20px;
  height: 20px;
}

.multi-step-form .form-step input:focus,
.multi-step-form .form-step select:focus,
.multi-step-form .form-step textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 146, 165, 0.1);
}

.multi-step-form .form-step textarea {
  height: 140px !important;
  resize: vertical;
}

.multi-step-form .form-step select {
  appearance: none !important; /* Dölj webbläsarens standardpil */
  -webkit-appearance: none !important; /* Dölj webbläsarens standardpil i Safari/Chrome */
  -moz-appearance: none !important; /* Dölj webbläsarens standardpil i Firefox */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230892A5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Service Choice Wrapper */
.service-choice-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* Centrera knapparna */
  align-items: center !important;
  gap: 8px !important; /* Minskat gap för att ge mer plats åt knapparna */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: var(--spacing-sm) !important; /* Minska margin-bottom från lg till sm */
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important; /* Centrera innehåll */
  box-sizing: border-box !important;
}

/* Säkerställ att parent-element inte begränsar centreringen */
.multi-step-form .form-step .service-choice-wrapper,
.form-step[data-step="0"] .service-choice-wrapper,
.form-step.active .service-choice-wrapper,
.wpcf7-form .form-step .service-choice-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  text-align: center !important;
}

/* Säkerställ att CF7 wrapper inte påverkar centreringen */
.service-choice-wrapper .wpcf7-form-control-wrap {
  display: contents !important; /* Låt innehållet flöda direkt */
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: inherit !important;
}

/* Override eventuella Elementor-regler */
.elementor-widget .service-choice-wrapper,
.elementor-column .service-choice-wrapper,
.elementor-container .service-choice-wrapper,
.wpcf7-form .service-choice-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  .service-choice-wrapper {
    flex-wrap: nowrap !important; /* En rad på desktop */
    gap: 12px !important; /* Lagom gap mellan knapparna */
    justify-content: center !important; /* Centrera knapparna på desktop */
  }
}

.service-choice-wrapper label.service-choice-label,
.service-choice-wrapper label {
  width: auto !important; /* Låt flexbox bestämma bredden */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important; /* Ändra till flex för bättre centrering */
  cursor: pointer !important;
  position: relative !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  overflow: visible !important;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto !important; /* Låt flexbox bestämma storleken */
  max-width: calc(50% - 5px) !important;
  min-width: 160px !important; /* Minskat för smalare knappar */
  align-items: stretch !important; /* Låt innehållet sträcka sig */
  text-align: center !important; /* Centrera innehåll */
}

@media (min-width: 768px) {
  .service-choice-wrapper label.service-choice-label,
  .service-choice-wrapper label {
    max-width: calc(50% - 8px) !important; /* Säkerställ att de inte blir för breda */
    flex: 0 0 auto !important; /* Låt flexbox bestämma storleken */
    min-width: 190px !important; /* Minskat för smalare knappar på desktop */
  }
}

/* Säkerställ att hela label-området är klickbart */
.service-choice-wrapper label * {
  pointer-events: none !important;
}

.service-choice-wrapper label input[type="radio"],
.service-choice-wrapper input[type="radio"][name="service_choice"] {
  pointer-events: auto !important;
}

/* Säkerställ att label själv är klickbar */
.service-choice-wrapper label {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Säkerställ att CF7 wrapper inte blockerar klick */
.service-choice-wrapper .wpcf7-form-control-wrap {
  pointer-events: none !important;
}

.service-choice-wrapper .wpcf7-form-control-wrap label {
  pointer-events: auto !important;
}

.service-choice-wrapper input[type="radio"].service-radio,
.service-choice-wrapper input[type="radio"][name="service_choice"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 100 !important;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Initial checked state (subtle) - bara om användaren inte har klickat ännu */
.service-choice-wrapper input[type="radio"]:checked:not(.user-selected) + .choice-content,
.service-choice-wrapper label:has(input[type="radio"]:checked:not(.user-selected)) .choice-content {
  border: 2px solid var(--color-primary) !important;
  background-color: rgba(8, 146, 165, 0.03) !important;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.1) !important;
}

/* User-selected state (tydlig glow) - när användaren faktiskt klickat */
.service-choice-wrapper input[type="radio"]:checked.user-selected + .choice-content,
.service-choice-wrapper label:has(input[type="radio"]:checked.user-selected) .choice-content,
.service-choice-wrapper label.service-choice-selected .choice-content {
  border: 3px solid var(--color-primary) !important;
  background: linear-gradient(135deg, rgba(8, 146, 165, 0.08) 0%, rgba(8, 146, 165, 0.12) 100%) !important;
  box-shadow: 
    0 4px 20px rgba(8, 146, 165, 0.25) !important; /* Ta bort de cirkulära box-shadow värdena */
  transform: translateY(-2px) !important;
  animation: glowPulse 2s ease-in-out infinite;
}

/* När label är i :active state (under klick), ta bort ALL box-shadow och animation */
.service-choice-wrapper label:active .choice-content,
.service-choice-wrapper label:active .choice-content * {
  box-shadow: none !important;
  animation: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 
      0 4px 20px rgba(8, 146, 165, 0.25); /* Ta bort de cirkulära box-shadow värdena */
  }
  50% {
    box-shadow: 
      0 4px 25px rgba(8, 146, 165, 0.35); /* Ta bort de cirkulära box-shadow värdena */
  }
}

/* Extra klass för selected state (fallback om :has() inte fungerar) - används när användaren klickat */
.service-choice-wrapper label.service-choice-selected .choice-content .choice-icon {
  stroke: var(--color-primary) !important;
  transform: scale(1.15) !important;
  filter: drop-shadow(0 2px 8px rgba(8, 146, 165, 0.3)) !important;
}

.service-choice-wrapper label.service-choice-selected .choice-content .choice-text {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  transform: scale(1.05) !important;
}

/* Hover-effekt för omarkerade knappar */
.service-choice-wrapper label:not(:has(input:checked)):not(.service-choice-selected) .choice-content:hover {
  border-color: var(--color-primary);
  background-color: rgba(8, 146, 165, 0.03);
  box-shadow: 0 2px 12px rgba(8, 146, 165, 0.15);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.service-choice-wrapper .choice-content {
  border: 2px solid var(--color-border-dark) !important;
  border-radius: 12px !important;
  padding: 14px 10px !important; /* Minskat padding för mindre höjd och bredd */
  width: 100% !important;
  max-width: 100% !important; /* Säkerställ att den inte blir bredare än label */
  flex: 0 0 auto !important; /* Låt flexbox bestämma storleken baserat på innehåll */
  aspect-ratio: 1 / 1 !important; /* Gör knapparna kvadratiska */
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Perfekt horisontell centrering */
  justify-content: center !important; /* Perfekt vertikal centrering - balanserar ikon och text */
  align-content: center !important;
  gap: 0 !important; /* Inget gap mellan ikon och text */
  pointer-events: none !important;
  position: relative !important;
  z-index: 1 !important;
  background-color: var(--color-background) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Förbättrad visuell balans - säkerställ att innehåll är perfekt centrerat */
.service-choice-wrapper .choice-content > * {
  flex-shrink: 0 !important; /* Förhindra att element krymper */
}

/* Fallback för webbläsare som inte stödjer aspect-ratio */
@supports not (aspect-ratio: 1) {
  .service-choice-wrapper .choice-content {
    height: 0 !important;
    padding-bottom: 100% !important;
  }
  
  .service-choice-wrapper .choice-content > * {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 40px) !important;
  }
}

@media (min-width: 768px) {
  .service-choice-wrapper .choice-content {
    padding: 18px 14px !important; /* Minskat padding för mindre höjd och bredd */
    gap: 0 !important; /* Inget gap mellan ikon och text på desktop */
    justify-content: center !important; /* Perfekt vertikal centrering */
    align-items: center !important; /* Perfekt horisontell centrering */
  }
}

/* Säkerställ att SVG och text också inte blockerar klick */
.service-choice-wrapper .choice-content svg,
.service-choice-wrapper .choice-content .choice-icon,
.service-choice-wrapper .choice-content .choice-text,
.service-choice-wrapper svg,
.service-choice-wrapper .choice-text {
  pointer-events: none !important;
}

/* Centrera SVG-element */
.service-choice-wrapper .choice-content svg,
.service-choice-wrapper .choice-content .choice-icon svg {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
  text-align: center !important;
  outline: none !important; /* Ta bort focus ring */
  -webkit-tap-highlight-color: transparent !important; /* Ta bort tap highlight */
  -webkit-user-select: none !important; /* Förhindra selektion */
  user-select: none !important;
  pointer-events: none !important; /* Förhindra pointer events på SVG */
}

/* Dölj den stora bakgrundscirkeln i SVG:en (r="55") HELT */
/* Detta är den cirkel som syns vid klick - den är en del av SVG:en själv */
.service-choice-wrapper .choice-content svg > circle[r="55"],
.service-choice-wrapper .choice-icon svg > circle[r="55"],
.service-choice-wrapper label .choice-content svg > circle[r="55"],
.service-choice-wrapper label .choice-icon svg > circle[r="55"],
.service-choice-wrapper label:active .choice-content svg > circle[r="55"],
.service-choice-wrapper label:focus .choice-content svg > circle[r="55"],
.service-choice-wrapper label:active .choice-icon svg > circle[r="55"],
.service-choice-wrapper label:focus .choice-icon svg > circle[r="55"],
.service-choice-wrapper label:hover .choice-content svg > circle[r="55"],
.service-choice-wrapper label:hover .choice-icon svg > circle[r="55"],
.service-choice-wrapper label.service-choice-selected .choice-content svg > circle[r="55"],
.service-choice-wrapper label.service-choice-selected .choice-icon svg > circle[r="55"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dölj den stora bakgrundsellipsen i SVG:en (rx="65" ry="55") HELT */
/* Detta är den ellipse som syns vid klick på "Flytt + Städ"-ikonen */
.service-choice-wrapper .choice-content svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper .choice-icon svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label .choice-content svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label .choice-icon svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label:active .choice-content svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label:focus .choice-content svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label:active .choice-icon svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label:focus .choice-icon svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label:hover .choice-content svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label:hover .choice-icon svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label.service-choice-selected .choice-content svg > ellipse[rx="65"][ry="55"],
.service-choice-wrapper label.service-choice-selected .choice-icon svg > ellipse[rx="65"][ry="55"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Alternativ: Dölj första cirkeln/ellipsen direkt efter <defs> (bakgrundscirkeln/ellipsen) */
.service-choice-wrapper .choice-content svg > circle:first-of-type,
.service-choice-wrapper .choice-icon svg > circle:first-of-type,
.service-choice-wrapper .choice-content svg > ellipse:first-of-type,
.service-choice-wrapper .choice-icon svg > ellipse:first-of-type {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Säkerställ att SVG:en är centrerad inom ikonen */
.service-choice-wrapper .choice-icon svg {
  margin: 0 auto !important; /* Perfekt centrering */
  display: block !important;
  outline: none !important; /* Ta bort focus ring */
  -webkit-tap-highlight-color: transparent !important; /* Ta bort tap highlight */
  width: 100% !important; /* Fyll hela ikonen */
  height: 100% !important; /* Fyll hela ikonen */
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important; /* Säkerställ att SVG:en passar in perfekt */
}

/* Ta bort focus ring och click animation från ikoner och labels */
.service-choice-wrapper .choice-icon,
.service-choice-wrapper .choice-content svg,
.service-choice-wrapper label:focus .choice-icon,
.service-choice-wrapper label:focus .choice-content svg,
.service-choice-wrapper label:active .choice-icon,
.service-choice-wrapper label:active .choice-content svg,
.service-choice-wrapper label:focus-visible .choice-icon,
.service-choice-wrapper label:focus-visible .choice-content svg,
.service-choice-wrapper label *:focus,
.service-choice-wrapper label *:active,
.service-choice-wrapper label *:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
  box-shadow: none !important; /* Ta bort eventuell box-shadow som kan skapa cirkel */
  border: none !important; /* Ta bort eventuell border */
}

/* Ta bort alla möjliga focus-effekter från SVG */
.service-choice-wrapper svg:focus,
.service-choice-wrapper svg:active,
.service-choice-wrapper svg:focus-visible,
.service-choice-wrapper .choice-icon:focus,
.service-choice-wrapper .choice-icon:active,
.service-choice-wrapper .choice-icon:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ta bort focus ring från label när den klickas */
.service-choice-wrapper label:focus,
.service-choice-wrapper label:active,
.service-choice-wrapper label:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important; /* Ta bort eventuell box-shadow */
}

/* Ta bort focus ring från choice-content */
.service-choice-wrapper .choice-content:focus,
.service-choice-wrapper .choice-content:active,
.service-choice-wrapper .choice-content:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important; /* Ta bort eventuell box-shadow */
  animation: none !important; /* Stoppa animation vid klick */
}

/* SPECIFIK regel för att ta bort box-shadow från choice-content vid :active (när man klickar) */
.service-choice-wrapper label:active .choice-content {
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Ta bort CSS-animationer men INTE SVG-animationer */
.service-choice-wrapper label:active .choice-content:not(svg),
.service-choice-wrapper label:active .choice-text {
  animation: none !important;
}

/* Se till att SVG-animationer fortsätter fungera */
.service-choice-wrapper label:active .choice-content svg,
.service-choice-wrapper label:active .choice-content svg *,
.service-choice-wrapper label:active .choice-icon svg,
.service-choice-wrapper label:active .choice-icon svg * {
  animation: inherit !important; /* Behåll SVG-animationer */
}

/* Ta bort box-shadow från choice-content när label är i :active state */
/* OBS: Vi tar INTE bort SVG-animationer här */
.service-choice-wrapper label:active .choice-content {
  box-shadow: none !important;
  /* animation: none !important; - Tog bort för att inte påverka SVG-animationer */
}

/* Ta bort alla pseudo-element som kan skapa cirkel */
.service-choice-wrapper label::before,
.service-choice-wrapper label::after,
.service-choice-wrapper .choice-content::before,
.service-choice-wrapper .choice-content::after,
.service-choice-wrapper .choice-icon::before,
.service-choice-wrapper .choice-icon::after,
.service-choice-wrapper .choice-content svg::before,
.service-choice-wrapper .choice-content svg::after {
  display: none !important;
  content: none !important;
}

/* Ta bort focus ring från radio buttons */
.service-choice-wrapper input[type="radio"]:focus,
.service-choice-wrapper input[type="radio"]:active,
.service-choice-wrapper input[type="radio"]:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
}

/* Säkerställ att CF7 radio wrapper inte påverkar layouten */
.service-choice-wrapper .wpcf7-radio,
.service-choice-wrapper .wpcf7-list-item {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: inherit !important;
}

.service-choice-wrapper .choice-icon {
  display: flex !important; /* Flex för perfekt centrering */
  align-items: center !important;
  justify-content: center !important;
  width: 90px !important;
  height: 90px !important;
  transition: all 0.2s ease !important;
  margin: 0 auto !important; /* Perfekt centrering horisontellt */
  flex-shrink: 0 !important;
  max-width: 90px !important;
  max-height: 90px !important;
  align-self: center !important;
}

@media (min-width: 768px) {
  .service-choice-wrapper .choice-icon {
    width: 100px !important; /* Minskat för kompaktare knappar */
    height: 100px !important; /* Minskat för kompaktare knappar */
    margin-bottom: 0 !important; /* Margin-bottom hanteras av gap på choice-content */
    max-width: 100px !important;
    max-height: 100px !important;
  }
}

.service-choice-wrapper .choice-text {
  font-weight: 600 !important;
  color: var(--color-text) !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 1rem !important;
  margin: 0 auto !important; /* Perfekt centrering horisontellt */
  transition: all 0.3s ease !important;
  line-height: 1.4 !important; /* Bra line-height för läsbarhet */
  display: flex !important; /* Flex för bättre centrering */
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  word-break: keep-all !important;
  hyphens: none !important;
  align-self: center !important;
  flex-shrink: 0 !important; /* Förhindra att texten krymper */
}

@media (min-width: 768px) {
  .service-choice-wrapper .choice-text {
    font-size: 1.05rem !important; /* Minskat lite för bättre balans */
    white-space: nowrap !important; /* På desktop, håll "Flytt + Städ" på en rad */
    min-height: 1.4em !important; /* Säkerställ samma höjd oavsett text för bättre balans */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Text styling för user-selected state */
.service-choice-wrapper input[type="radio"]:checked.user-selected + .choice-content .choice-text,
.service-choice-wrapper label:has(input[type="radio"]:checked.user-selected) .choice-content .choice-text,
.service-choice-wrapper label.service-choice-selected .choice-content .choice-text {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  transform: scale(1.05) !important;
  transition: all 0.3s ease;
}

/* Subtle text styling för initial checked state */
.service-choice-wrapper input[type="radio"]:checked:not(.user-selected) + .choice-content .choice-text,
.service-choice-wrapper label:has(input[type="radio"]:checked:not(.user-selected)) .choice-content .choice-text {
  color: var(--color-primary);
  transition: all 0.3s ease;
}

.service-choice-wrapper label:not(:has(input:checked)) .choice-content:hover .choice-text {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

/* Icon styling för user-selected state */
.service-choice-wrapper input[type="radio"]:checked.user-selected + .choice-content .choice-icon,
.service-choice-wrapper label:has(input[type="radio"]:checked.user-selected) .choice-content .choice-icon,
.service-choice-wrapper label.service-choice-selected .choice-content .choice-icon {
  stroke: var(--color-primary) !important;
  transform: scale(1.15) !important;
  filter: drop-shadow(0 2px 8px rgba(8, 146, 165, 0.3)) !important;
  transition: all 0.3s ease;
}

/* Subtle icon styling för initial checked state */
.service-choice-wrapper input[type="radio"]:checked:not(.user-selected) + .choice-content .choice-icon,
.service-choice-wrapper label:has(input[type="radio"]:checked:not(.user-selected)) .choice-content .choice-icon {
  stroke: var(--color-primary);
  transition: all 0.3s ease;
}

.service-choice-wrapper label:not(:has(input:checked)) .choice-content .choice-icon {
  transition: all 0.2s ease;
}

.service-choice-wrapper label:not(:has(input:checked)) .choice-content:hover .choice-icon {
  stroke: var(--color-primary);
  transform: scale(1.05);
}

/* Access Choices (Markplan/Hiss/Trappor) */
.access-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--spacing-md);
}

.access-choice {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.access-choice.hidden {
  display: none !important;
}

.access-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.access-choice label {
  border: 2px solid var(--color-border-dark);
  border-radius: 8px;
  padding: 15px 5px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  margin: 0 !important;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-background);
  position: relative;
}

/* Hover-effekt */
.access-choice label:hover {
  border-color: var(--color-primary);
  background: rgba(8, 146, 165, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.1);
}

/* När vald - Tydlig visuell feedback - Flera selektorer för att säkerställa att det fungerar */
.access-choice input[type="radio"]:checked + label,
.access-choice:has(input[type="radio"]:checked) label,
.access-choice input[type="radio"]:checked ~ label,
.access-choice.access-choice-selected label,
.multi-step-form .access-choice input[type="radio"]:checked + label,
.multi-step-form .access-choice:has(input[type="radio"]:checked) label,
.multi-step-form .access-choice.access-choice-selected label {
  border: 3px solid var(--color-primary) !important;
  background: linear-gradient(135deg, rgba(8, 146, 165, 0.08) 0%, rgba(8, 146, 165, 0.12) 100%) !important;
  box-shadow: 
    0 4px 20px rgba(8, 146, 165, 0.25) !important;
  transform: translateY(-2px) !important;
  animation: accessGlowPulse 2s ease-in-out infinite;
}

/* Ta bort animation under klick */
.access-choice label:active {
  animation: none !important;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.2) !important;
  transform: translateY(0px) !important;
}

.access-choice svg {
  width: 24px;
  height: 24px;
  color: var(--color-text);
  transition: all 0.3s ease;
}

.access-choice label:hover svg {
  color: var(--color-primary);
  transform: scale(1.1);
}

.access-choice input[type="radio"]:checked + label svg,
.access-choice:has(input[type="radio"]:checked) label svg,
.access-choice input[type="radio"]:checked ~ label svg,
.access-choice.access-choice-selected label svg,
.multi-step-form .access-choice input[type="radio"]:checked + label svg,
.multi-step-form .access-choice:has(input[type="radio"]:checked) label svg,
.multi-step-form .access-choice.access-choice-selected label svg {
  color: var(--color-primary) !important;
  transform: scale(1.15);
}

.access-choice span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.access-choice input[type="radio"]:checked + label span,
.access-choice:has(input[type="radio"]:checked) label span,
.access-choice input[type="radio"]:checked ~ label span,
.access-choice.access-choice-selected label span,
.multi-step-form .access-choice input[type="radio"]:checked + label span,
.multi-step-form .access-choice:has(input[type="radio"]:checked) label span,
.multi-step-form .access-choice.access-choice-selected label span {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* Glow animation för access-choice-knappar */
@keyframes accessGlowPulse {
  0%, 100% {
    box-shadow: 
      0 4px 20px rgba(8, 146, 165, 0.25);
  }
  50% {
    box-shadow: 
      0 4px 25px rgba(8, 146, 165, 0.35);
  }
}

/* Elevator & Stairs Sections */
.elevator-size-section,
.stairs-floor-section {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background: var(--color-background-light);
  border-radius: 5px;
}

.elevator-size-section small {
  color: var(--color-text-light);
  font-size: 0.6875rem;
  line-height: 1.3;
  display: block;
  margin-top: 5px;
}

/* Heavy Card (Tunga/Ömtåliga föremål) */
.heavy-card {
  border: 1px solid var(--color-border-dark);
  border-radius: 8px;
  background: var(--color-background);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  margin-bottom: var(--spacing-md);
}

.heavy-card.active {
  border: 2px solid var(--color-primary);
  background: rgba(8, 146, 165, 0.05);
}

.heavy-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: var(--color-text);
}

.heavy-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
  padding: 0 16px;
}

.heavy-card.active .heavy-body {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  padding: 8px 16px 16px 16px;
}

.heavy-body textarea {
  width: 100%;
  border: 1px solid var(--color-border-dark);
  border-radius: 6px;
  padding: 10px;
  font-size: 0.8125rem;
  background: var(--color-background);
  resize: none;
  min-height: 90px;
  box-sizing: border-box;
  font-family: var(--font-family);
}

/* Storage Options */
.storage-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 15px 0;
}

.storage-option {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.storage-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  z-index: -1;
}

/* Säkerställ att storage-option är klickbar */
.storage-option {
  cursor: pointer;
}

.storage-option label {
  border: 1px solid var(--color-border-dark);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  background: var(--color-background);
  min-height: 110px;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.storage-option label:hover {
  border-color: var(--color-primary);
  background: rgba(8, 146, 165, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
}

.storage-option input[type="radio"]:checked + label,
.storage-option-selected label,
.storage-option input[type="radio"]:checked ~ label {
  border: 2px solid var(--color-primary) !important;
  background: rgba(8, 146, 165, 0.05) !important;
}

.storage-option svg {
  width: 28px;
  height: 28px;
  color: var(--color-text);
}

.storage-option input[type="radio"]:checked + label svg,
.storage-option-selected label svg,
.storage-option input[type="radio"]:checked ~ label svg {
  color: var(--color-primary) !important;
}

.storage-option .storage-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.storage-option .storage-desc {
  font-size: 0.6875rem;
  color: var(--color-text-light);
}

/* Checkboxes & Radio Buttons */
.multi-step-form .wpcf7-form-control-wrap .wpcf7-list-item label {
  gap: 0.5rem;
}

.multi-step-form .wpcf7-list-item-label::after {
  display: block;
  margin-bottom: 15px;
}

.multi-step-form .wpcf7-form-control-wrap .wpcf7-list-item-label {
  padding-left: 0;
}

.multi-step-form .wpcf7-form-control-wrap .wpcf7-list-item-label,
.multi-step-form .wpcf7-checkbox .wpcf7-list-item-label {
  font-size: 0.75rem;
}

.multi-step-form .wpcf7-acceptance span {
  font-weight: 400 !important;
}

.multi-step-form span[data-name="promo1"] .wpcf7-list-item-label::after,
.multi-step-form span[data-name="promo2"] .wpcf7-list-item-label::after,
.multi-step-form span[data-name="terms_and_conditions"] .wpcf7-list-item-label::after {
  margin-bottom: 0;
}

.multi-step-form span[data-name="promo1"] label,
.multi-step-form span[data-name="promo2"] label,
.multi-step-form span[data-name="terms_and_conditions"] label {
  gap: 10px;
}

/* Buttons */
.multi-step-form .d-flex {
  display: flex;
}

/* Navigationsknappar i formulärsteg (steg 2+) - Ny struktur med ffl-step-nav */
.multi-step-form .ffl-step-nav,
.wpcf7-form .multi-step-form .ffl-step-nav,
.wpcf7 .multi-step-form .ffl-step-nav,
.elementor-widget .multi-step-form .ffl-step-nav,
.elementor-container .multi-step-form .ffl-step-nav {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important; /* Tillbaka till vänster, Nästa steg till höger */
  align-items: center !important;
  gap: 1.5rem !important; /* Lite luft mellan knapparna */
  margin-top: var(--spacing-md) !important;
  width: 100% !important;
  flex-wrap: nowrap !important; /* Tvinga på samma rad */
  box-sizing: border-box !important;
}

/* Se till att knapparna i ffl-step-nav inte tvingas bli 100% breda */
.multi-step-form .ffl-step-nav button,
.multi-step-form .ffl-step-nav .prev-step,
.multi-step-form .ffl-step-nav .next-step,
.multi-step-form .ffl-step-nav .action-button,
.multi-step-form .ffl-step-nav .wpcf7-submit {
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Knapp-container - Förstärkt specificitet för Contact Form 7 och Elementor */
/* Steg 2-5: Tillbaka till vänster, Nästa steg till höger */
.multi-step-form .form-step[data-step="1"] .justify-end,
.multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
.multi-step-form .form-step[data-step="2"] .justify-end,
.multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
.multi-step-form .form-step[data-step="3"] .justify-end,
.multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
.multi-step-form .form-step[data-step="4"] .justify-end,
.multi-step-form .form-step[data-step="4"] .d-flex.justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="1"] .justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="2"] .justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="3"] .justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="4"] .justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="4"] .d-flex.justify-end,
.wpcf7 .multi-step-form .form-step[data-step="1"] .justify-end,
.wpcf7 .multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
.wpcf7 .multi-step-form .form-step[data-step="2"] .justify-end,
.wpcf7 .multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
.wpcf7 .multi-step-form .form-step[data-step="3"] .justify-end,
.wpcf7 .multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
.wpcf7 .multi-step-form .form-step[data-step="4"] .justify-end,
.wpcf7 .multi-step-form .form-step[data-step="4"] .d-flex.justify-end,
.elementor-widget .multi-step-form .form-step[data-step="1"] .justify-end,
.elementor-widget .multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
.elementor-widget .multi-step-form .form-step[data-step="2"] .justify-end,
.elementor-widget .multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
.elementor-widget .multi-step-form .form-step[data-step="3"] .justify-end,
.elementor-widget .multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
.elementor-widget .multi-step-form .form-step[data-step="4"] .justify-end,
.elementor-widget .multi-step-form .form-step[data-step="4"] .d-flex.justify-end,
.elementor-container .multi-step-form .form-step[data-step="1"] .justify-end,
.elementor-container .multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
.elementor-container .multi-step-form .form-step[data-step="2"] .justify-end,
.elementor-container .multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
.elementor-container .multi-step-form .form-step[data-step="3"] .justify-end,
.elementor-container .multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
.elementor-container .multi-step-form .form-step[data-step="4"] .justify-end,
.elementor-container .multi-step-form .form-step[data-step="4"] .d-flex.justify-end {
  justify-content: space-between !important; /* Tillbaka till vänster, Nästa steg till höger */
  align-items: center !important;
  gap: var(--spacing-md) !important;
  margin-top: var(--spacing-md) !important;
  display: flex !important; /* Flex för att få space-between att fungera */
  width: 100% !important; /* Full bredd för space-between */
  flex-wrap: nowrap !important; /* Ingen wrap - tvinga på samma rad */
  flex-direction: row !important; /* Säkerställ att knapparna är på samma rad */
  flex-flow: row nowrap !important; /* Tvinga horisontell layout */
  box-sizing: border-box !important;
}

/* Desktop: Säkerställ horisontell layout för knapparna (överskrider mobil-regler) */
@media (min-width: 768px) {
  /* Generell regel för alla steg med båda knapparna (steg 1-4) */
  .multi-step-form .form-step[data-step="1"] .justify-end,
  .multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
  .multi-step-form .form-step[data-step="2"] .justify-end,
  .multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
  .multi-step-form .form-step[data-step="3"] .justify-end,
  .multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
  .multi-step-form .form-step[data-step="4"] .justify-end,
  .multi-step-form .form-step[data-step="4"] .d-flex.justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="1"] .justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="1"] .d-flex.justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="2"] .justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="2"] .d-flex.justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="3"] .justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="3"] .d-flex.justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="4"] .justify-end,
  .wpcf7-form .multi-step-form .form-step[data-step="4"] .d-flex.justify-end {
    flex-direction: row !important; /* Horisontell layout på desktop */
    justify-content: space-between !important; /* Tillbaka vänster, Gå vidare höger */
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  
  /* Säkerställ att knapparna inte tar full bredd på desktop */
  .multi-step-form .form-step[data-step="1"] .justify-end button,
  .multi-step-form .form-step[data-step="1"] .d-flex.justify-end button,
  .multi-step-form .form-step[data-step="2"] .justify-end button,
  .multi-step-form .form-step[data-step="2"] .d-flex.justify-end button,
  .multi-step-form .form-step[data-step="3"] .justify-end button,
  .multi-step-form .form-step[data-step="3"] .d-flex.justify-end button,
  .multi-step-form .form-step[data-step="4"] .justify-end button,
  .multi-step-form .form-step[data-step="4"] .d-flex.justify-end button {
    width: auto !important; /* Auto-bredd på desktop, inte 100% */
    max-width: none !important;
  }
  
  /* Generell regel: Varje element i steg 1-4 som innehåller både Tillbaka- och Nästa-knapp */
  .multi-step-form .form-step[data-step="1"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="2"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="3"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="4"] *:has(button.prev-step):has(button.next-step) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
  }
  
  /* Fallback: Varje element som innehåller 2+ knappar i steg 1-4 */
  .multi-step-form .form-step[data-step="1"] p:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="1"] div:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="2"] p:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="2"] div:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="3"] p:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="3"] div:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="4"] p:has(button:nth-child(2)),
  .multi-step-form .form-step[data-step="4"] div:has(button:nth-child(2)) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
  }
  
  /* Direkt regel för <p>-element i steg 1-4 som innehåller både prev-step och next-step knappar */
  .multi-step-form .form-step[data-step="1"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="2"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="3"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="4"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="1"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="2"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="3"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="4"] p:has(button.prev-step):has(button.next-step),
  .wpcf7 .multi-step-form .form-step[data-step="1"] p:has(button.prev-step):has(button.next-step),
  .wpcf7 .multi-step-form .form-step[data-step="2"] p:has(button.prev-step):has(button.next-step),
  .wpcf7 .multi-step-form .form-step[data-step="3"] p:has(button.prev-step):has(button.next-step),
  .wpcf7 .multi-step-form .form-step[data-step="4"] p:has(button.prev-step):has(button.next-step) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Fallback: Matcha <p> med 2 knappar - mer aggressiv regel */
  /* Matcha alla <p>-element i steg 1-4 som innehåller minst 2 button-element */
  /* Notera: Flex-styling hanteras av :has() selector ovan */
  
  /* Mer specifik: Matcha <p> som innehåller båda knapparna direkt */
  .multi-step-form .form-step[data-step="1"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="2"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="3"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="4"] p:has(button.prev-step):has(button.next-step) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ytterliggare fallback: Om :has() inte fungerar, matcha sista <p> i varje steg (vanligtvis knapp-containern) */
  .multi-step-form .form-step[data-step="1"] > p:last-of-type,
  .multi-step-form .form-step[data-step="2"] > p:last-of-type,
  .multi-step-form .form-step[data-step="3"] > p:last-of-type,
  .multi-step-form .form-step[data-step="4"] > p:last-of-type {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Säkerställ att "Tillbaka"-knappen är längst till vänster */
  .multi-step-form .form-step[data-step="1"] button.prev-step,
  .multi-step-form .form-step[data-step="2"] button.prev-step,
  .multi-step-form .form-step[data-step="3"] button.prev-step,
  .multi-step-form .form-step[data-step="4"] button.prev-step,
  .ffl-button-container-fixed button.prev-step {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 1 !important;
    position: relative !important;
    left: 0 !important;
  }
  
  /* Säkerställ att containern börjar längst till vänster */
  .multi-step-form .form-step .ffl-button-container-fixed {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    left: 0 !important;
  }
  
  /* Säkerställ att "Nästa steg"-knappen är längst till höger */
  .multi-step-form .form-step[data-step="1"] button.next-step,
  .multi-step-form .form-step[data-step="2"] button.next-step,
  .multi-step-form .form-step[data-step="3"] button.next-step,
  .multi-step-form .form-step[data-step="4"] button.next-step {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 2 !important;
  }
  
  /* Säkerställ att containern har ingen padding som hindrar knapparna */
  .multi-step-form .form-step[data-step="1"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="2"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="3"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="4"] *:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="1"] p:has(button:nth-of-type(2)),
  .multi-step-form .form-step[data-step="2"] p:has(button:nth-of-type(2)),
  .multi-step-form .form-step[data-step="3"] p:has(button:nth-of-type(2)),
  .multi-step-form .form-step[data-step="4"] p:has(button:nth-of-type(2)) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Säkerställ att knapparna inte tar full bredd i dessa generella containrar */
  .multi-step-form .form-step[data-step="1"] *:has(button.prev-step):has(button.next-step) button,
  .multi-step-form .form-step[data-step="2"] *:has(button.prev-step):has(button.next-step) button,
  .multi-step-form .form-step[data-step="3"] *:has(button.prev-step):has(button.next-step) button,
  .multi-step-form .form-step[data-step="4"] *:has(button.prev-step):has(button.next-step) button,
  .multi-step-form .form-step[data-step="1"] p:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="1"] div:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="2"] p:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="2"] div:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="3"] p:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="3"] div:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="4"] p:has(button:nth-child(2)) button,
  .multi-step-form .form-step[data-step="4"] div:has(button:nth-child(2)) button {
    width: auto !important;
    max-width: none !important;
  }
}

/* KRITISK FIX: Direkt regel för <p>-element i steg 1-4 som sätter justify-content */
/* Detta matchar ALLA <p>-element i steg 1-4 och sätter space-between */
@media (min-width: 768px) {
  /* Matcha <p>-element som innehåller båda knapparna - högsta specificitet */
  .multi-step-form .form-step[data-step="1"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="2"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="3"] p:has(button.prev-step):has(button.next-step),
  .multi-step-form .form-step[data-step="4"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="1"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="2"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="3"] p:has(button.prev-step):has(button.next-step),
  .wpcf7-form .multi-step-form .form-step[data-step="4"] p:has(button.prev-step):has(button.next-step) {
    justify-content: space-between !important;
  }
}

/* JavaScript-lagd klass för knapp-container (sätts av JavaScript) */
.ffl-button-container-fixed {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: var(--spacing-md) !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* Säkerställ att containern tar full bredd även om den är i en wrapper */
.multi-step-form .form-step .ffl-button-container-fixed,
.wpcf7-form .ffl-button-container-fixed,
.multi-step-form .ffl-button-container-fixed {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

/* Säkerställ att parent-element inte begränsar bredden */
.multi-step-form .form-step p.ffl-button-container-fixed,
.wpcf7-form p.ffl-button-container-fixed {
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
}

/* Säkerställ att alla parents till containern tar full bredd */
.multi-step-form .form-step:has(.ffl-button-container-fixed),
.wpcf7-form:has(.ffl-button-container-fixed) {
  width: 100% !important;
}

@media (min-width: 768px) {
  .ffl-button-container-fixed {
    flex-direction: row !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  .ffl-button-container-fixed {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Ytterligare fallback för Contact Form 7: Matcha <p>-element som innehåller båda knapparna */
/* Detta fungerar även om elementet saknar klasser */
@media (min-width: 768px) {
  /* Matcha <p>-element i steg 1-4 som innehåller 2 knappar */
  .multi-step-form .form-step[data-step="1"] p:has(button:nth-of-type(2)),
  .multi-step-form .form-step[data-step="2"] p:has(button:nth-of-type(2)),
  .multi-step-form .form-step[data-step="3"] p:has(button:nth-of-type(2)),
  .multi-step-form .form-step[data-step="4"] p:has(button:nth-of-type(2)) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
  }
  
  .multi-step-form .form-step[data-step="1"] p:has(button:nth-of-type(2)) button,
  .multi-step-form .form-step[data-step="2"] p:has(button:nth-of-type(2)) button,
  .multi-step-form .form-step[data-step="3"] p:has(button:nth-of-type(2)) button,
  .multi-step-form .form-step[data-step="4"] p:has(button:nth-of-type(2)) button {
    width: auto !important;
    max-width: none !important;
  }
}

/* Wrapper för checkbox och knapp på samma rad (skapas av JavaScript) */
.multi-step-form .flexible-checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--spacing-md) !important;
  flex-wrap: wrap !important;
  margin-top: 0.5rem !important; /* Minskat från var(--spacing-sm) för mindre gap */
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* Checkbox-containern i wrapper */
.multi-step-form .flexible-checkbox-row .wpcf7-form-control-wrap:has(#flexible_date) {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* Knapp-containern i wrapper */
.multi-step-form .flexible-checkbox-row .d-flex.justify-end {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-left: auto !important; /* Push knappen till höger */
  flex-shrink: 0 !important;
}

/* Fallback: Om JavaScript inte har kört ännu, gör båda elementen inline-flex */
.multi-step-form .form-step[data-step="0"] .wpcf7-form-control-wrap:has(#flexible_date) {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  margin-right: var(--spacing-md) !important;
  vertical-align: middle !important;
  width: auto !important;
  max-width: none !important;
}

/* Första steget (där det bara finns "Gå vidare"-knappen) - behåll till höger */
/* Steg 1: Bara "Gå vidare"-knappen till höger */
.multi-step-form .form-step[data-step="0"] .d-flex.justify-end,
.multi-step-form .form-step[data-step="0"] .justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="0"] .d-flex.justify-end,
.wpcf7-form .multi-step-form .form-step[data-step="0"] .justify-end,
.wpcf7 .multi-step-form .form-step[data-step="0"] .d-flex.justify-end,
.wpcf7 .multi-step-form .form-step[data-step="0"] .justify-end,
.elementor-widget .multi-step-form .form-step[data-step="0"] .d-flex.justify-end,
.elementor-widget .multi-step-form .form-step[data-step="0"] .justify-end,
.elementor-container .multi-step-form .form-step[data-step="0"] .d-flex.justify-end,
.elementor-container .multi-step-form .form-step[data-step="0"] .justify-end {
  justify-content: flex-end !important; /* Bara en knapp, så placeras till höger */
  display: flex !important;
  align-items: center !important;
  margin-top: var(--spacing-sm) !important;
  width: 100% !important;
  flex-wrap: nowrap !important; /* Tvinga på samma rad */
  flex-direction: row !important; /* Horisontell layout */
  box-sizing: border-box !important;
}

/* Ta bort margin/padding som kan skapa radbrytningar */
.multi-step-form .form-step[data-step="0"] .wpcf7-form-control-wrap:has(#flexible_date) + br,
.multi-step-form .form-step[data-step="0"] .wpcf7-form-control-wrap:has(#flexible_date) ~ br {
  display: none !important;
}

/* Knapp-styling - Förstärkt specificitet för Elementor */
.multi-step-form button,
.elementor-widget .multi-step-form button,
.elementor-container .multi-step-form button,
.multi-step-form .action-button,
/* Nästa steg-knapp - Förstärkt specificitet */
.multi-step-form .next-step,
.multi-step-form .next-step-with-icon,
.elementor-widget .multi-step-form .next-step,
.elementor-widget .multi-step-form .next-step-with-icon,
.elementor-container .multi-step-form .next-step,
.elementor-container .multi-step-form .next-step-with-icon,
.multi-step-form button.next-step,
.multi-step-form .d-flex.justify-end .next-step,
.multi-step-form .justify-end .next-step,
.multi-step-form .form-step .next-step,
.multi-step-form .form-step button.next-step {
  padding: 12px 32px !important;
  border-radius: var(--border-radius-pill) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  font-family: var(--font-family) !important;
  min-height: 48px !important; /* Matcha checkbox-knappens höjd */
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: 1.5 !important;
  flex-shrink: 0 !important; /* Förhindra att knappen krymper */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important; /* Ingen margin - space-between hanterar placeringen */
  order: 2 !important; /* Placera Nästa steg till höger */
  float: none !important; /* Ta bort float om det finns */
  clear: none !important; /* Ta bort clear om det finns */
}

.multi-step-form button.next-step-with-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.multi-step-form button:hover {
  transform: scale(0.97);
  transition: transform 0.2s ease-in-out;
}

/* Tillbaka-knapp - Förstärkt specificitet */
.multi-step-form .prev-step,
.elementor-widget .multi-step-form .prev-step,
.elementor-container .multi-step-form .prev-step,
.multi-step-form button.prev-step,
.multi-step-form .d-flex.justify-end .prev-step,
.multi-step-form .justify-end .prev-step,
.multi-step-form .form-step .prev-step,
.multi-step-form .form-step button.prev-step {
  box-shadow: none !important;
  color: var(--color-text-light) !important;
  background: var(--color-background) !important;
  border: 2px solid var(--color-border-light) !important;
  padding: 12px 32px !important;
  border-radius: var(--border-radius-pill) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: var(--font-family) !important;
  min-height: 48px !important; /* Matcha andra knappar */
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important; /* Förhindra att knappen krymper */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important; /* Ingen margin - space-between hanterar placeringen */
  margin-left: 0 !important; /* Säkerställ att knappen är längst till vänster */
  order: 1 !important; /* Placera Tillbaka till vänster */
  float: none !important; /* Ta bort float om det finns */
  clear: none !important; /* Ta bort clear om det finns */
}

.multi-step-form .prev-step:hover {
  background: var(--color-background-light);
  border-color: var(--color-border-dark);
}

.multi-step-form .action-button {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.15);
}

.multi-step-form .action-button:hover {
  background-color: var(--color-primary-hover) !important;
  box-shadow: 0 6px 16px rgba(8, 146, 165, 0.25);
  transform: translateY(-1px);
}

/* Glow Animation */
.glow {
  overflow: hidden;
  transform: scale(1);
  animation: pulse2 1.75s 2;
}

.glow:hover {
  transform: scale(0.98);
}

.glow:after {
  animation: shine 7s infinite forwards;
  animation-delay: 0.75s;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), hsla(0, 0%, 100%, 0) 100%, #fff);
  bottom: -50%;
  content: "";
  left: -50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: -50%;
  top: -50%;
  transform: rotate(60deg) translate(-5em, 8.5em);
}

@keyframes shine {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20%, to { opacity: 0; transform: rotate(60deg) translate(1em, -9em); }
}

@keyframes pulse2 {
  0% { transform: scale(0.95); }
  70% { transform: scale(1); }
  100% { transform: scale(0.95); }
}

/* Hidden Elements */
.visually-hidden {
  position: absolute !important;
  left: -9999px !important;
}

.access-section-hidden {
  display: none;
}

.storage-none-hidden {
  position: absolute;
  left: -9999px;
}

/* Step Header with Icon */
.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
  margin-bottom: var(--spacing-md);
}

.step-header svg {
  width: 32px;
  height: 32px;
  color: var(--color-text);
  flex-shrink: 0;
}

/* Flexible Date - Specifik styling för "Jag är flexibel"-checkboxen */
#flexible_date + label {
  margin-bottom: 0;
}

/* Säkerställ att checkmarken är centrerad i checkbox-boxen för flexible_date */
.multi-step-form .wpcf7-form-control-wrap:has(#flexible_date) label::after {
  left: 0 !important;
  transform: translate(calc(12px + 10px), -50%) !important; /* padding-left (12px) + halva checkbox-bredden (10px) = mitten av boxen */
}

/* Förbättrad centrering av checkbox-boxen och text för flexible_date */
.multi-step-form .wpcf7-form-control-wrap:has(#flexible_date) label {
  justify-content: flex-start !important; /* Start från vänster för bättre kontroll */
  align-items: center !important; /* Vertikal centrering */
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .access-choices {
    flex-direction: row;
    gap: 6px;
  }

  .access-choice {
    flex: 1 1 30%;
  }

  .access-choice label {
    padding: 12px 4px;
    min-height: 70px;
  }

  .access-choice svg {
    width: 20px;
    height: 20px;
  }

  .access-choice span {
    font-size: 0.6875rem;
  }

  .service-choice-wrapper label {
    width: 100%;
    margin-bottom: 10px;
  }

  .storage-options {
    flex-direction: column;
  }

  .storage-option {
    flex: 1 1 100%;
  }

  .multi-step-form .form-row {
    flex-direction: column;
  }

  .multi-step-form .justify-end {
    flex-direction: column;
  }

  .multi-step-form button {
    width: 100%;
  }
}

/* ========================================
   FÖRETAGSFLYTT VAD INGÅR WIDGET
   Card Stack Carousel (Desktop) + Horizontal Scroll (Mobil)
   ======================================== */

.ffl-foretagsflytt-vad-ingar {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
}

.ffl-foretagsflytt-vad-ingar-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.ffl-foretagsflytt-vad-ingar h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #0892A5 !important;
  margin-bottom: 1rem;
  text-align: center;
}

.ffl-foretagsflytt-vad-ingar-intro {
  font-size: 1.125rem;
  color: #4B5563;
  margin-bottom: 3rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-foretagsflytt-vad-ingar-intro a {
  color: #0892A5;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ffl-foretagsflytt-vad-ingar-intro a:hover {
  color: #067c91;
}

/* Carousel Container */
.ffl-foretagsflytt-vad-ingar-carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Desktop: Stack Carousel */
.ffl-foretagsflytt-vad-ingar-carousel {
  position: relative;
  width: 100%;
  height: 450px;
  display: block;
}

.ffl-foretagsflytt-vad-ingar-card {
  position: absolute;
  width: 30%;
  background: white;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.ffl-foretagsflytt-vad-ingar-card.active {
  left: 50%;
  transform: translateX(-50%) scale(1);
  z-index: 3;
  opacity: 1;
  border-color: #0892A5;
  box-shadow: 0 8px 24px rgba(8, 146, 165, 0.15);
}

.ffl-foretagsflytt-vad-ingar-card.prev {
  left: 10%;
  transform: translateX(-50%) scale(0.9);
  z-index: 2;
  opacity: 0.7;
}

.ffl-foretagsflytt-vad-ingar-card.next {
  left: 90%;
  transform: translateX(-50%) scale(0.9);
  z-index: 2;
  opacity: 0.7;
}

.ffl-foretagsflytt-vad-ingar-card.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Card Header (teal banner) */
.ffl-foretagsflytt-vad-ingar-card-header {
  position: relative;
  margin: -1.5rem 1rem 0;
  min-height: 120px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.3);
  border-radius: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.ffl-foretagsflytt-vad-ingar-card-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

/* Card Content */
.ffl-foretagsflytt-vad-ingar-card-content {
  padding: 1.5rem 1rem;
  padding-top: 1.5rem;
  flex-grow: 1;
}

.ffl-foretagsflytt-vad-ingar-card-content p {
  color: #666;
  line-height: 1.6;
  font-size: 1rem;
  margin: 0;
}

.ffl-foretagsflytt-vad-ingar-card-content a {
  color: #0892A5;
  text-decoration: underline;
}

/* Dots Navigation */
.ffl-foretagsflytt-vad-ingar-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.ffl-foretagsflytt-vad-ingar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D1D5DB;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.ffl-foretagsflytt-vad-ingar-dot.active {
  background: #0892A5;
  width: 28px;
  border-radius: 5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .ffl-foretagsflytt-vad-ingar-card {
    width: 35%;
  }

  .ffl-foretagsflytt-vad-ingar-card.prev {
    left: 5%;
  }

  .ffl-foretagsflytt-vad-ingar-card.next {
    left: 95%;
  }
}

/* Mobil: Horisontell scrollbar-karusell med auto-scroll */
@media (max-width: 768px) {
  .ffl-foretagsflytt-vad-ingar-carousel-container {
    overflow: hidden;
    padding: 0;
  }

  .ffl-foretagsflytt-vad-ingar-carousel {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #0892A5 #E5E7EB;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 0;
    margin: 0;
    gap: 0;
  }

  .ffl-foretagsflytt-vad-ingar-carousel::-webkit-scrollbar {
    height: 8px;
  }

  .ffl-foretagsflytt-vad-ingar-carousel::-webkit-scrollbar-track {
    background: #E5E7EB;
    border-radius: 4px;
  }

  .ffl-foretagsflytt-vad-ingar-carousel::-webkit-scrollbar-thumb {
    background: #0892A5;
    border-radius: 4px;
  }

  .ffl-foretagsflytt-vad-ingar-card {
    position: relative !important;
    width: calc(100% - 3rem) !important;
    min-width: calc(100% - 3rem) !important;
    max-width: calc(100% - 3rem) !important;
    margin-right: 1rem !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .ffl-foretagsflytt-vad-ingar-card:first-child {
    margin-left: 1.5rem !important;
  }

  .ffl-foretagsflytt-vad-ingar-card:last-child {
    margin-right: 1.5rem !important;
  }

  .ffl-foretagsflytt-vad-ingar-card.active,
  .ffl-foretagsflytt-vad-ingar-card.prev,
  .ffl-foretagsflytt-vad-ingar-card.next,
  .ffl-foretagsflytt-vad-ingar-card.hidden {
    /* Ta bort alla stack-klasser på mobil - alla kort är synliga */
    position: relative;
    left: auto;
    transform: none;
    z-index: auto;
    opacity: 1;
  }

  .ffl-foretagsflytt-vad-ingar-card-header {
    min-height: 100px;
    padding: 1rem;
    margin: -1.5rem 1rem 0;
  }

  .ffl-foretagsflytt-vad-ingar-card-header h3 {
    font-size: 1.125rem;
  }

  .ffl-foretagsflytt-vad-ingar-card-content {
    padding: 1.5rem 1rem;
    padding-top: 1.5rem;
  }
}

/* ===========================
   FLYTT & STÄD PAKET WIDGET
   =========================== */

.ffl-flytt-och-stad-paket {
  padding: 4rem 0;
  background: var(--color-background);
}

.ffl-flytt-och-stad-paket-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.ffl-flytt-och-stad-paket-header {
  text-align: center;
  margin-bottom: 2rem;
}

.ffl-flytt-och-stad-paket-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.ffl-flytt-och-stad-paket-intro {
  font-size: 1.125rem;
  color: var(--color-text-light);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

.ffl-flytt-och-stad-paket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ffl-flytt-och-stad-paket-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ffl-flytt-och-stad-paket-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  border: 2px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ffl-flytt-och-stad-paket-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ffl-flytt-och-stad-paket-card.popular {
  border-color: var(--color-primary);
  border-width: 3px;
}

.ffl-flytt-och-stad-paket-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}

.ffl-flytt-och-stad-paket-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
  margin-top: 0;
}

.ffl-flytt-och-stad-paket-description {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.ffl-flytt-och-stad-paket-description p {
  margin-bottom: 1rem;
}

.ffl-flytt-och-stad-paket-description p:last-child {
  margin-bottom: 0;
}

.ffl-flytt-och-stad-paket-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.ffl-flytt-och-stad-paket-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

.ffl-flytt-och-stad-paket-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.ffl-flytt-och-stad-paket-additional {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Länkar i paket-widgeten - primärfärg */
.ffl-flytt-och-stad-paket-description a,
.ffl-flytt-och-stad-paket-additional a {
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-decoration-color: rgba(8, 146, 165, 0.3);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.ffl-flytt-och-stad-paket-description a:hover,
.ffl-flytt-och-stad-paket-additional a:hover {
  color: var(--color-primary-hover) !important;
  text-decoration-color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .ffl-flytt-och-stad-paket {
    padding: 3rem 0;
  }

  .ffl-flytt-och-stad-paket-content {
    padding: 0 1.5rem;
  }

  .ffl-flytt-och-stad-paket-header h2 {
    font-size: 1.75rem;
  }

  .ffl-flytt-och-stad-paket-intro {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .ffl-flytt-och-stad-paket-card {
    padding: 1.5rem;
  }

  .ffl-flytt-och-stad-paket-card h3 {
    font-size: 1.25rem;
  }
}

/* ===========================
   HERO 3D REVEAL - STARTSIDA
   =========================== */

/* Scroll-container för sticky-effekt */
.ffl-hero-3d-scroll-container {
  position: relative;
  height: 200vh; /* 2x viewport height för scroll-utrymme */
}

/* Hero-sektion (sticky) */
.ffl-hero-3d-reveal {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Hero-bakgrundsbild (visas från start) */
.ffl-hero-3d-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: scale(1);
  pointer-events: none;
}

/* Ny bakgrund (visas när man scrollar) */
.ffl-hero-3d-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.05) 10px,
      rgba(255, 255, 255, 0.05) 20px
    ),
    linear-gradient(135deg, #0893a6 0%, #0ca4a5 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* När bakgrunden ska visas */
.ffl-hero-3d-reveal.ffl-hero-3d-show-form-background::before {
  opacity: 1;
}

.ffl-hero-3d-reveal.ffl-hero-3d-show-form-background .ffl-hero-3d-image {
  opacity: 0;
  transform: scale(1.1);
}

/* Hero-innehåll (text + USP:er) - synligt från start */
.ffl-hero-3d-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  color: white;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0) translateZ(0) rotateX(0deg);
  transform-style: preserve-3d;
}

.ffl-hero-3d-content {
  max-width: 900px;
  margin: 0 auto;
}

.ffl-hero-3d-content h1,
.ffl-hero-3d-h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.ffl-hero-3d-content .ffl-hero-3d-lead,
.ffl-hero-3d-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.ffl-hero-3d-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.ffl-hero-3d-cta-secondary {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ffl-hero-3d-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ffl-hero-3d-microtrust {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.ffl-hero-3d-microtrust-wrapper {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  animation: ffl-hero-3d-microtrust-scroll 20s linear infinite;
  white-space: nowrap;
}

@keyframes ffl-hero-3d-microtrust-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ffl-hero-3d-microtrust span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ffl-hero-3d-microtrust span::before {
  content: '✓';
  color: #10B981;
  font-weight: bold;
}

/* Formulär-container (dold från början, kommer fram vid scroll) */
.ffl-hero-3d-form-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transform: scale(0.9) translateY(30px) translateZ(-200px) rotateX(25deg);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  transform-style: preserve-3d;
}

.ffl-hero-3d-form-wrapper.ffl-hero-3d-visible {
  opacity: 1;
  pointer-events: all;
}

.ffl-hero-3d-form-container {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ffl-hero-3d-form-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0893a6;
  margin-bottom: 1.5rem;
  text-align: center;
}

  /* Contact Form 7 och flyttformulär styling hanteras av befintlig CSS */

.ffl-hero-3d-form-form .wpcf7 {
  margin: 0;
}

/* Det nya flyttformuläret (.ff-container) - justera för hero-3d-containern */
.ffl-hero-3d-form-form .ff-container {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* Säkerställ att formuläret inte har dubbel padding */
.ffl-hero-3d-form-container .ff-container {
  padding: 0;
}

/* Mobil-styling (max-width: 768px) */
@media (max-width: 768px) {
  /* Minska perspective för mobil (bättre prestanda) */
  .ffl-hero-3d-reveal {
    perspective: 800px;
  }
  
  /* Justera hero-innehåll för mobil */
  .ffl-hero-3d-content {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .ffl-hero-3d-content h1,
  .ffl-hero-3d-h1 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }
  
  .ffl-hero-3d-content .ffl-hero-3d-lead,
  .ffl-hero-3d-lead {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .ffl-hero-3d-microtrust {
    font-size: 0.8rem;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  
  .ffl-hero-3d-cta-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }
  
  /* Justera formulär för mobil */
  .ffl-hero-3d-form-container {
    padding: 1.5rem;
    width: 95%;
    max-width: 100%;
  }
  
  .ffl-hero-3d-form-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  /* Minska 3D-effekter för mobil (mildare rotation) */
  .ffl-hero-3d-content-wrapper {
    transform: translateY(0) translateZ(0) rotateX(0deg);
  }
  
  .ffl-hero-3d-form-wrapper {
    transform: scale(0.9) translateY(30px) translateZ(-100px) rotateX(15deg);
  }
}
  
/* ===========================
   OMRÅDEN HUR FUNGERAR WIDGET
   =========================== */

/* ===========================
   OMRÅDEN HUR FUNGERAR WIDGET
   =========================== */

.ffl-omraden-hur-fungerar {
  --primary: #0893a6;
  --primary-rgb: 8, 147, 166;
  --primary-dark: #067080;
  --dark: #0f1c1d;
  --text: #374151;
  background: linear-gradient(180deg, #f8fdfd 0%, #ffffff 50%, #f0f9f9 100%);
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.ffl-omraden-hur-fungerar::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ffl-omraden-hur-fungerar::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.ffl-omraden-hur-fungerar-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ffl-omraden-hur-fungerar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 960px) {
  .ffl-omraden-hur-fungerar-layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
  }
}

/* ===== LEFT CONTENT ===== */
.ffl-omraden-hur-fungerar-content {
  padding-top: 20px;
}

.ffl-omraden-hur-fungerar-content h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}

.ffl-omraden-hur-fungerar-snippet {
  font-size: 18px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 20px;
}

.ffl-omraden-hur-fungerar-description {
  font-size: 16px;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 36px;
}

/* CTA Card */
.ffl-omraden-hur-fungerar-cta-card {
  background: white;
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 12px 24px rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  position: relative;
  overflow: hidden;
}

.ffl-omraden-hur-fungerar-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.ffl-omraden-hur-fungerar-cta-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.8;
  margin: 0;
}

.ffl-omraden-hur-fungerar-cta-card a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--primary-rgb), 0.15) 60%);
  transition: all 0.2s ease;
}

.ffl-omraden-hur-fungerar-cta-card a:hover {
  background: linear-gradient(180deg, transparent 40%, rgba(var(--primary-rgb), 0.25) 40%);
}

/* ===== RIGHT: FACTORS ===== */
.ffl-omraden-hur-fungerar-factors-stack {
  position: relative;
}

.ffl-omraden-hur-fungerar-factors-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.ffl-omraden-hur-fungerar-factors-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
}

.ffl-omraden-hur-fungerar-factors-icon svg {
  width: 26px;
  height: 26px;
  color: white;
}

.ffl-omraden-hur-fungerar-factors-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9ca3af;
}

.ffl-omraden-hur-fungerar-factors-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
}

/* Factors Table */
.ffl-omraden-hur-fungerar-factors-table {
  width: 100%;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}

.ffl-omraden-hur-fungerar-factors-table tr {
  border: none;
  border-bottom: none;
}

.ffl-omraden-hur-fungerar-factors-table td {
  padding: 18px 20px;
  vertical-align: top;
  border: none;
}

.ffl-omraden-hur-fungerar-col-num {
  width: 52px;
  text-align: center;
  vertical-align: middle;
}

.ffl-omraden-hur-fungerar-factor-num {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f8fdfd 0%, #e8f7f7 100%);
  border: 2px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.ffl-omraden-hur-fungerar-col-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.ffl-omraden-hur-fungerar-col-content p {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .ffl-omraden-hur-fungerar {
    padding: 64px 16px;
  }
  
  .ffl-omraden-hur-fungerar-content h2 {
    font-size: 28px;
  }
  
  .ffl-omraden-hur-fungerar-snippet {
    font-size: 17px;
    padding-left: 20px;
  }
  
  .ffl-omraden-hur-fungerar-description {
    font-size: 15px;
  }
  
  .ffl-omraden-hur-fungerar-cta-card {
    padding: 24px;
  }
  
  .ffl-omraden-hur-fungerar-factors-header {
    gap: 12px;
  }
  
  .ffl-omraden-hur-fungerar-factors-icon {
    width: 46px;
    height: 46px;
  }
  
  .ffl-omraden-hur-fungerar-factors-icon svg {
    width: 22px;
    height: 22px;
  }
  
  .ffl-omraden-hur-fungerar-factors-title {
    font-size: 18px;
  }
}

/* ===========================
   OMRÅDEN VAD PÅVERKAR PRISET WIDGET
   =========================== */

.ffl-omraden-vad-paverkar-priset {
  background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%);
  padding: 5rem 0;
  width: 100%;
}

.ffl-omraden-vad-paverkar-priset-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.ffl-omraden-vad-paverkar-priset-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.ffl-omraden-vad-paverkar-priset h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #0892A5 !important;
  margin-bottom: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ffl-omraden-vad-paverkar-priset-lead {
  font-size: 1.125rem;
  color: #4B5563;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.ffl-omraden-vad-paverkar-priset-sub {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.6;
}

/* Factors Grid */
.ffl-omraden-vad-paverkar-priset-factors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 4rem;
  justify-content: center;
}

.ffl-omraden-vad-paverkar-priset-factor-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #E5E7EB;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  flex: 0 1 calc(25% - 15px);
  min-width: 260px;
  max-width: 300px;
}

@media (max-width: 1200px) {
  .ffl-omraden-vad-paverkar-priset-factor-card {
    flex: 0 1 calc(33.333% - 14px);
  }
}

@media (max-width: 900px) {
  .ffl-omraden-vad-paverkar-priset-factor-card {
    flex: 0 1 calc(50% - 10px);
  }
}

@media (max-width: 600px) {
  .ffl-omraden-vad-paverkar-priset-factor-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.ffl-omraden-vad-paverkar-priset-factor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0892A5, #0CA4A5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ffl-omraden-vad-paverkar-priset-factor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(8, 146, 165, 0.15);
  border-color: #0892A5;
}

.ffl-omraden-vad-paverkar-priset-factor-card:hover::before {
  opacity: 1;
}

.ffl-omraden-vad-paverkar-priset-factor-icon {
  width: 48px;
  height: 48px;
  background: #E6F7F9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.ffl-omraden-vad-paverkar-priset-factor-card:hover .ffl-omraden-vad-paverkar-priset-factor-icon {
  background: #0892A5;
}

.ffl-omraden-vad-paverkar-priset-factor-icon svg {
  width: 24px;
  height: 24px;
  stroke: #0892A5;
  transition: stroke 0.3s ease;
}

.ffl-omraden-vad-paverkar-priset-factor-card:hover .ffl-omraden-vad-paverkar-priset-factor-icon svg {
  stroke: #FFFFFF;
}

.ffl-omraden-vad-paverkar-priset-factor-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0892A5;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.ffl-omraden-vad-paverkar-priset-factor-desc {
  font-size: 0.9rem;
  color: #4B5563;
  line-height: 1.5;
}

/* Table Section */
.ffl-omraden-vad-paverkar-priset-table-section {
  margin-bottom: 4rem;
}

.ffl-omraden-vad-paverkar-priset-table-header {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0892A5;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ffl-omraden-vad-paverkar-priset-table-container {
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08);
  border: 1px solid #E5E7EB;
}

.ffl-omraden-vad-paverkar-priset-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ffl-omraden-vad-paverkar-priset-table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

.ffl-omraden-vad-paverkar-priset-table-responsive thead {
  background: linear-gradient(135deg, #0892A5 0%, #067c91 100%);
}

.ffl-omraden-vad-paverkar-priset-table-responsive th {
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  padding: 1.125rem 1.5rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ffl-omraden-vad-paverkar-priset-table-responsive td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #F3F4F6;
  font-size: 0.95rem;
  color: #1F2933;
}

.ffl-omraden-vad-paverkar-priset-table-responsive tr:last-child td {
  border-bottom: none;
}

.ffl-omraden-vad-paverkar-priset-table-responsive tr:hover {
  background: #E6F7F9;
}

.ffl-omraden-vad-paverkar-priset-factor-name {
  font-weight: 600;
  color: #1F2933;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ffl-omraden-vad-paverkar-priset-mini-icon {
  width: 32px;
  height: 32px;
  background: #E6F7F9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ffl-omraden-vad-paverkar-priset-mini-icon svg {
  width: 16px;
  height: 16px;
  stroke: #0892A5;
}

/* Impact Badges */
.ffl-omraden-vad-paverkar-priset-impact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ffl-omraden-vad-paverkar-priset-impact-high {
  background: #FEF2F2;
  color: #EF4444;
}

.ffl-omraden-vad-paverkar-priset-impact-medium {
  background: #FFFBEB;
  color: #F59E0B;
}

.ffl-omraden-vad-paverkar-priset-impact-medium-high {
  background: linear-gradient(90deg, #FFFBEB, #FEF2F2);
  color: #D97706;
}

/* Pricing Cards */
.ffl-omraden-vad-paverkar-priset-pricing-section {
  margin-bottom: 4rem;
}

.ffl-omraden-vad-paverkar-priset-pricing-header {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0892A5;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ffl-omraden-vad-paverkar-priset-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.ffl-omraden-vad-paverkar-priset-price-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 2rem;
  border: 2px solid #E5E7EB;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.ffl-omraden-vad-paverkar-priset-price-card:hover {
  border-color: #0892A5;
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(8, 146, 165, 0.2);
}

.ffl-omraden-vad-paverkar-priset-price-card.ffl-omraden-vad-paverkar-priset-featured {
  border-color: #0892A5;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6F7F9 100%);
}

.ffl-omraden-vad-paverkar-priset-price-card.ffl-omraden-vad-paverkar-priset-featured::before {
  content: 'Vanligast';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  color: #FFFFFF;
  padding: 0.375rem 1.25rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ffl-omraden-vad-paverkar-priset-price-icon {
  width: 64px;
  height: 64px;
  background: #E6F7F9;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.ffl-omraden-vad-paverkar-priset-price-card.ffl-omraden-vad-paverkar-priset-featured .ffl-omraden-vad-paverkar-priset-price-icon {
  background: #0892A5;
}

.ffl-omraden-vad-paverkar-priset-price-icon svg {
  width: 32px;
  height: 32px;
  stroke: #0892A5;
}

.ffl-omraden-vad-paverkar-priset-price-card.ffl-omraden-vad-paverkar-priset-featured .ffl-omraden-vad-paverkar-priset-price-icon svg {
  stroke: #FFFFFF;
}

.ffl-omraden-vad-paverkar-priset-price-type {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0892A5;
  margin-bottom: 0.5rem;
}

.ffl-omraden-vad-paverkar-priset-price-desc {
  font-size: 0.9rem;
  color: #4B5563;
  margin-bottom: 1.25rem;
}

.ffl-omraden-vad-paverkar-priset-price-range {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0892A5;
}

.ffl-omraden-vad-paverkar-priset-price-range span {
  font-size: 1rem;
  font-weight: 500;
  color: #9CA3AF;
}

/* CTA Section */
.ffl-omraden-vad-paverkar-priset-cta-section {
  background: linear-gradient(135deg, #1A2B32 0%, #2D4A54 100%);
  border-radius: 24px;
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ffl-omraden-vad-paverkar-priset-cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(8, 146, 165, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.ffl-omraden-vad-paverkar-priset-cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(8, 146, 165, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.ffl-omraden-vad-paverkar-priset-cta-content {
  position: relative;
  z-index: 1;
}

.ffl-omraden-vad-paverkar-priset-cta-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.ffl-omraden-vad-paverkar-priset-cta-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.ffl-omraden-vad-paverkar-priset-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.ffl-omraden-vad-paverkar-priset-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ffl-omraden-vad-paverkar-priset-cta-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ffl-omraden-vad-paverkar-priset-cta-link-primary {
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px -4px rgba(8, 146, 165, 0.4);
}

.ffl-omraden-vad-paverkar-priset-cta-link-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(8, 146, 165, 0.5);
  color: #FFFFFF;
  text-decoration: none;
}

.ffl-omraden-vad-paverkar-priset-cta-link-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ffl-omraden-vad-paverkar-priset-cta-link-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .ffl-omraden-vad-paverkar-priset {
    padding: 4rem 0;
  }
  
  .ffl-omraden-vad-paverkar-priset-content {
    padding: 0 1.5rem;
  }
  
  .ffl-omraden-vad-paverkar-priset-header {
    margin-bottom: 3rem;
  }
  
  .ffl-omraden-vad-paverkar-priset-factor-card {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .ffl-omraden-vad-paverkar-priset-pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .ffl-omraden-vad-paverkar-priset-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .ffl-omraden-vad-paverkar-priset-table-responsive table {
    min-width: 600px;
  }
  
  .ffl-omraden-vad-paverkar-priset-table-responsive th,
  .ffl-omraden-vad-paverkar-priset-table-responsive td {
    padding: 0.875rem 1rem;
  }
  
  .ffl-omraden-vad-paverkar-priset-cta-section {
    padding: 2rem 1.5rem;
  }
  
  .ffl-omraden-vad-paverkar-priset-cta-links {
    flex-direction: column;
  }
  
  .ffl-omraden-vad-paverkar-priset-cta-link {
    justify-content: center;
  }
}

/* ===========================
   OMRÅDEN EXEMPEL WIDGET
   =========================== */

.ffl-omraden-exempel {
  background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%);
  padding: 5rem 0;
  width: 100%;
}

.ffl-omraden-exempel-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.ffl-omraden-exempel-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.ffl-omraden-exempel h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #0892A5 !important;
  margin-bottom: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ffl-omraden-exempel-lead {
  font-size: 1.125rem;
  color: #4B5563;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.ffl-omraden-exempel-sub {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.6;
}

/* Examples Grid */
.ffl-omraden-exempel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

@media (max-width: 900px) {
  .ffl-omraden-exempel-grid {
    grid-template-columns: 1fr;
  }
}

.ffl-omraden-exempel-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid #E5E7EB;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.ffl-omraden-exempel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0892A5, #0CA4A5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.ffl-omraden-exempel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(8, 146, 165, 0.15);
  border-color: #0892A5;
}

.ffl-omraden-exempel-card:hover::before {
  transform: scaleX(1);
}

/* Card Header */
.ffl-omraden-exempel-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ffl-omraden-exempel-card-icon {
  width: 56px;
  height: 56px;
  background: #E6F7F9;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.ffl-omraden-exempel-card:hover .ffl-omraden-exempel-card-icon {
  background: #0892A5;
}

.ffl-omraden-exempel-card-icon svg {
  width: 28px;
  height: 28px;
  stroke: #0892A5;
  transition: stroke 0.3s ease;
}

.ffl-omraden-exempel-card:hover .ffl-omraden-exempel-card-icon svg {
  stroke: #FFFFFF;
}

.ffl-omraden-exempel-card-title-wrapper {
  flex: 1;
}

.ffl-omraden-exempel-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0892A5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.ffl-omraden-exempel-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0892A5;
  line-height: 1.3;
  margin-bottom: 0;
}

/* Card Content */
.ffl-omraden-exempel-card-intro {
  font-size: 0.95rem;
  color: #4B5563;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.ffl-omraden-exempel-card-list {
  list-style: none;
  margin-bottom: 1.25rem;
  padding: 0;
}

.ffl-omraden-exempel-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0;
  font-size: 0.9rem;
  color: #374151;
  border-bottom: 1px solid #F3F4F6;
}

.ffl-omraden-exempel-card-list li:last-child {
  border-bottom: none;
}

.ffl-omraden-exempel-list-icon {
  width: 20px;
  height: 20px;
  background: #E6F7F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ffl-omraden-exempel-list-icon svg {
  width: 12px;
  height: 12px;
  stroke: #0892A5;
  stroke-width: 3;
}

/* Result Box */
.ffl-omraden-exempel-result-box {
  background: #ECFDF5;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.ffl-omraden-exempel-result-icon {
  width: 24px;
  height: 24px;
  background: #10B981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ffl-omraden-exempel-result-icon svg {
  width: 14px;
  height: 14px;
  stroke: #FFFFFF;
  stroke-width: 3;
}

.ffl-omraden-exempel-result-content {
  flex: 1;
}

.ffl-omraden-exempel-result-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #10B981;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.125rem;
}

.ffl-omraden-exempel-result-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  line-height: 1.4;
}

/* CTA Section */
.ffl-omraden-exempel-cta-section {
  background: linear-gradient(135deg, #1A2B32 0%, #2D4A54 100%);
  border-radius: 24px;
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ffl-omraden-exempel-cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(8, 146, 165, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.ffl-omraden-exempel-cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(8, 146, 165, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.ffl-omraden-exempel-cta-content {
  position: relative;
  z-index: 1;
}

.ffl-omraden-exempel-cta-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.ffl-omraden-exempel-cta-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.ffl-omraden-exempel-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.ffl-omraden-exempel-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ffl-omraden-exempel-cta-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ffl-omraden-exempel-cta-link-primary {
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px -4px rgba(8, 146, 165, 0.4);
}

.ffl-omraden-exempel-cta-link-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(8, 146, 165, 0.5);
  color: #FFFFFF;
  text-decoration: none;
}

.ffl-omraden-exempel-cta-link-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ffl-omraden-exempel-cta-link-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
  .ffl-omraden-exempel {
    padding: 4rem 0;
  }
  
  .ffl-omraden-exempel-content {
    padding: 0 1.5rem;
  }
  
  .ffl-omraden-exempel-header {
    margin-bottom: 3rem;
  }
  
  .ffl-omraden-exempel-card {
    padding: 1.5rem;
  }
  
  .ffl-omraden-exempel-card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .ffl-omraden-exempel-card-title-wrapper {
    text-align: center;
  }
  
  .ffl-omraden-exempel-card-intro {
    text-align: center;
  }
  
  .ffl-omraden-exempel-cta-section {
    padding: 2rem 1.5rem;
  }
  
  .ffl-omraden-exempel-cta-links {
    flex-direction: column;
  }
  
  .ffl-omraden-exempel-cta-link {
    justify-content: center;
  }
}
  
/* ========================================
   Område Full Widget Styles
   ======================================== */
/* Varför anlita Section */
.ffl-omrade-full-section {
    padding: 5rem 0;
    background: var(--color-background-light);
}

.ffl-omrade-full-section--light {
    background: var(--color-background-light);
}

.ffl-omrade-full-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ffl-omrade-full-varfor-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.ffl-omrade-full-varfor-text {
    max-width: 540px;
}

.ffl-omrade-full-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ffl-omrade-full-section-label::before {
    content: '';
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

.ffl-omrade-full-section-label span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ffl-omrade-full-section h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.25;
}

.ffl-omrade-full-lead-text {
    font-size: 1.1rem;
    color: #4b5563;
    margin-bottom: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.ffl-omrade-full-sub-text {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 32px;
    line-height: 1.7;
}

.ffl-omrade-full-cta-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.7;
}

.ffl-omrade-full-cta-text a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid #e6f7f9;
    transition: border-color 0.2s ease;
}

.ffl-omrade-full-cta-text a:hover {
    border-color: var(--color-primary);
}

/* Benefits Card */
.ffl-omrade-full-benefits-card {
    background: var(--color-background);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.ffl-omrade-full-benefits-header {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f4f6;
}

.ffl-omrade-full-benefits-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.ffl-omrade-full-benefits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.ffl-omrade-full-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ffl-omrade-full-benefit-check {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.ffl-omrade-full-benefit-check svg {
    width: 14px;
    height: 14px;
    stroke: white;
    stroke-width: 3;
}

.ffl-omrade-full-benefit-content {
    flex: 1;
}

.ffl-omrade-full-benefit-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2b32;
    margin-bottom: 4px;
}

.ffl-omrade-full-benefit-desc {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .ffl-service-hero__content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }

    .ffl-service-hero__text h1 {
        font-size: 2rem;
    }

    .ffl-service-hero__form {
        margin-top: 0;
    }

    .ffl-omrade-full-section {
        padding: 3rem 0;
    }

    .ffl-omrade-full-section-inner {
        padding: 0 1.5rem;
    }

    .ffl-omrade-full-varfor-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ffl-omrade-full-varfor-text {
        max-width: 100%;
        text-align: center;
    }

    .ffl-omrade-full-section-label {
        justify-content: center;
    }

    .ffl-omrade-full-cta-text {
        text-align: center;
    }

    .ffl-omrade-full-benefits-card {
        padding: 28px;
    }

    .ffl-omrade-full-benefits-header {
        text-align: center;
    }
}

/* Hur fungerar Section - Bento Grid */
.ffl-omrade-full-hur-fungerar {
    padding: 5rem 0;
    background: var(--color-background-light);
}

.ffl-omrade-full-hur-fungerar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ffl-omrade-full-hur-fungerar-header {
    margin-bottom: 3rem;
    max-width: 800px;
}

.ffl-omrade-full-hur-fungerar-header h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.ffl-omrade-full-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 3rem;
    width: calc(100vw - 4rem);
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.ffl-omrade-full-bento-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ffl-omrade-full-bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.03) 10px,
            rgba(255, 255, 255, 0.03) 20px
        ),
        linear-gradient(135deg, rgba(8, 146, 165, 0.95) 0%, rgba(12, 164, 165, 0.95) 100%);
    z-index: 1;
}

.ffl-omrade-full-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.12);
}

.ffl-omrade-full-card-header {
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.ffl-omrade-full-card-number {
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
    z-index: 1;
}

.ffl-omrade-full-card-title-wrapper {
    position: relative;
    z-index: 2;
}

.ffl-omrade-full-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ffl-omrade-full-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    text-align: left;
}

.ffl-omrade-full-card-desc {
    font-size: 1rem;
    color: white;
    margin-bottom: 24px;
    line-height: 1.7;
    position: relative;
    z-index: 2;
    text-align: left;
}

.ffl-omrade-full-card-checks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.ffl-omrade-full-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: white;
    line-height: 1.5;
}

.ffl-omrade-full-check-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ffl-omrade-full-check-circle svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 3;
}

.ffl-omrade-full-result-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.ffl-omrade-full-result-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.ffl-omrade-full-cta-section {
    background: #2b3645;
    border-radius: 24px;
    padding: 40px 2rem;
    text-align: center;
    /* Match exact visual width of bento-grid - adjusted for gap */
    width: calc(100vw - 6.5rem);
    max-width: calc(1600px - 2.5rem);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.ffl-omrade-full-cta-section-text {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto;
}

.ffl-omrade-full-cta-section-text a {
    color: #0aa8be;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(10, 168, 190, 0.3);
    transition: border-color 0.2s ease;
}

.ffl-omrade-full-cta-section-text a:hover {
    border-color: #0aa8be;
}

/* Vad påverkar priset Section */
.ffl-omrade-full-pris {
    background: var(--color-background);
    padding: 5rem 0;
}

.ffl-omrade-full-pris-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ffl-omrade-full-pris-header {
    margin-bottom: 3rem;
    max-width: 800px;
}

.ffl-omrade-full-pris-header h2 {
    color: var(--color-primary);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

.ffl-omrade-full-pris-lead-text {
    font-size: 1.1rem;
    color: #4b5563;
    margin-bottom: 1rem;
    line-height: 1.7;
}

.ffl-omrade-full-pris-sub-text {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.7;
}

/* Table Section */
.ffl-omrade-full-table-section {
    background: var(--color-background);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.ffl-omrade-full-table-section h3 {
    color: var(--color-primary);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 28px;
}

/* Table */
.ffl-omrade-full-price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
}

.ffl-omrade-full-price-table thead th {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 16px 20px;
    text-align: left;
    border: none;
    border-right: none;
    border-left: none;
}

.ffl-omrade-full-price-table thead th:first-child {
    border-radius: 12px 0 0 0;
}

.ffl-omrade-full-price-table thead th:last-child {
    border-radius: 0 12px 0 0;
}

.ffl-omrade-full-price-table tbody tr {
    transition: background 0.2s ease;
}

.ffl-omrade-full-price-table tbody tr:hover {
    background: #f3f4f6;
}

.ffl-omrade-full-price-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-right: none;
    border-left: none;
    font-size: 0.95rem;
    vertical-align: middle;
}

.ffl-omrade-full-price-table tbody tr:last-child td {
    border-bottom: none;
}

.ffl-omrade-full-price-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}

.ffl-omrade-full-price-table tbody tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}

/* Factor cell with icon */
.ffl-omrade-full-factor-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #1a2b32;
}

.ffl-omrade-full-factor-icon {
    width: 36px;
    height: 36px;
    background: #e6f7f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ffl-omrade-full-factor-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
    stroke-width: 2;
}

/* Impact badges */
.ffl-omrade-full-impact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ffl-omrade-full-impact-badge.high {
    background: #fee2e2;
    color: #b91c1c;
}

.ffl-omrade-full-impact-badge.medium {
    background: #fef3c7;
    color: #b45309;
}

.ffl-omrade-full-impact-badge.medium-high {
    background: #ffedd5;
    color: #c2410c;
}

.ffl-omrade-full-impact-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ffl-omrade-full-impact-badge.high .ffl-omrade-full-impact-dot {
    background: #ef4444;
}

.ffl-omrade-full-impact-badge.medium .ffl-omrade-full-impact-dot {
    background: #f59e0b;
}

.ffl-omrade-full-impact-badge.medium-high .ffl-omrade-full-impact-dot {
    background: #f97316;
}

.ffl-omrade-full-explanation-cell {
    color: #4b5563;
    line-height: 1.5;
}

/* Table wrapper for mobile scroll */
.ffl-omrade-full-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* CTA Section for pris */
.ffl-omrade-full-pris-cta-section {
    background: #2b3645;
    border-radius: 24px;
    padding: 40px;
    text-align: center;
}

.ffl-omrade-full-pris-cta-text {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto;
}

.ffl-omrade-full-pris-cta-text a {
    color: #0aa8be;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(10, 168, 190, 0.3);
    transition: border-color 0.2s ease;
}

.ffl-omrade-full-pris-cta-text a:hover {
    border-color: #0aa8be;
}

/* Responsive för Pris */
@media (max-width: 768px) {
    .ffl-omrade-full-pris {
        padding: 3rem 0;
    }

    .ffl-omrade-full-table-section {
        padding: 24px 0;
        border-radius: 20px;
        overflow: hidden;
    }

    .ffl-omrade-full-table-section h3 {
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .ffl-omrade-full-price-table {
        min-width: 600px;
    }

    .ffl-omrade-full-price-table thead th {
        padding: 14px 16px;
        font-size: 0.85rem;
    }

    .ffl-omrade-full-price-table tbody td {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    .ffl-omrade-full-factor-cell {
        gap: 10px;
    }

    .ffl-omrade-full-factor-icon {
        width: 32px;
        height: 32px;
    }

    .ffl-omrade-full-factor-icon svg {
        width: 18px;
        height: 18px;
    }

    .ffl-omrade-full-pris-cta-section {
        padding: 28px 24px;
    }

    .ffl-omrade-full-pris-cta-text {
        font-size: 0.9rem;
    }
}

/* Vilka typer av flyttar Section */
.ffl-omrade-full-typer {
    background: var(--color-background-light);
    padding: 5rem 0;
}

.ffl-omrade-full-typer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ffl-omrade-full-typer-header {
    margin-bottom: 3rem;
    max-width: 800px;
}

.ffl-omrade-full-typer-header h2 {
    color: var(--color-primary);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

.ffl-omrade-full-typer-intro {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.7;
}

/* Service Cards Grid */
.ffl-omrade-full-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 3rem;
}

.ffl-omrade-full-service-card {
    background: var(--color-background);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 10px 20px -5px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.ffl-omrade-full-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 12px -2px rgba(0, 0, 0, 0.12),
        0 4px 6px -1px rgba(0, 0, 0, 0.08),
        0 20px 30px -5px rgba(8, 147, 166, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Icon Wrapper */
.ffl-omrade-full-card-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f7f9;
    margin-bottom: 24px;
    transition: background 0.3s ease;
}

.ffl-omrade-full-service-card:hover .ffl-omrade-full-card-icon-wrapper {
    background: var(--color-primary);
}

.ffl-omrade-full-card-icon-wrapper svg {
    width: 40px;
    height: 40px;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    transition: stroke 0.3s ease;
}

.ffl-omrade-full-service-card:hover .ffl-omrade-full-card-icon-wrapper svg {
    stroke: white;
}

.ffl-omrade-full-service-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.ffl-omrade-full-service-desc {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.65;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Link button */
.ffl-omrade-full-service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.ffl-omrade-full-service-link:hover {
    gap: 12px;
}

.ffl-omrade-full-service-link svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    transition: transform 0.2s ease;
}

.ffl-omrade-full-service-link:hover svg {
    transform: translateX(2px);
}

/* Animated SVG Icons */
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.ffl-omrade-full-heart-pulse {
    animation: heartBeat 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes cogSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ffl-omrade-full-cog-spin {
    animation: cogSpin 8s linear infinite;
    transform-origin: center;
}

@keyframes liftUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.ffl-omrade-full-lift-arrow {
    animation: liftUp 1.5s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.ffl-omrade-full-sparkle-1 {
    animation: sparkle 1.5s ease-in-out infinite;
}

.ffl-omrade-full-sparkle-2 {
    animation: sparkle 1.5s ease-in-out infinite 0.3s;
}

.ffl-omrade-full-sparkle-3 {
    animation: sparkle 1.5s ease-in-out infinite 0.6s;
}

/* Responsive för Typer */
@media (max-width: 900px) {
    .ffl-omrade-full-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ffl-omrade-full-typer {
        padding: 3rem 0;
    }

    /* Karusell i mobilvy */
    .ffl-omrade-full-service-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 16px;
        padding: 0 20px 24px 20px; /* Lägg till padding-bottom för extra plats */
        margin-bottom: 0;
    }

    .ffl-omrade-full-service-grid::-webkit-scrollbar {
        display: none;
    }

    .ffl-omrade-full-service-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        padding: 20px;
        min-width: 0; /* Förhindra att korten blir klippta */
    }

    .ffl-omrade-full-service-card:hover {
        transform: none;
        box-shadow: 
            0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06),
            0 10px 20px -5px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(0, 0, 0, 0.05);
    }

    .ffl-omrade-full-card-icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    .ffl-omrade-full-card-icon-wrapper svg {
        width: 32px;
        height: 32px;
    }

    .ffl-omrade-full-service-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
        line-height: 1.25;
    }

    .ffl-omrade-full-service-desc {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .ffl-omrade-full-service-link {
        font-size: 0.85rem;
    }
}

/* Animations */
@keyframes smokeFloat {
    0% { transform: translateY(0) translateX(0); opacity: 0.6; }
    50% { transform: translateY(-6px) translateX(2px); opacity: 0.3; }
    100% { transform: translateY(-12px) translateX(-1px); opacity: 0; }
}

@keyframes sunPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes windowGlow {
    0%, 100% { fill: #fef3c7; }
    50% { fill: #fcd34d; }
}

@keyframes truckDrive {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes roadMove {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -16; }
}

@keyframes weightBalance {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

.ffl-omrade-full-smoke {
    animation: smokeFloat 2.5s ease-out infinite;
}

.ffl-omrade-full-smoke:nth-child(2) { animation-delay: 0.8s; }
.ffl-omrade-full-smoke:nth-child(3) { animation-delay: 1.6s; }

.ffl-omrade-full-sun-glow {
    animation: sunPulse 3s ease-in-out infinite;
}

.ffl-omrade-full-window-glow {
    animation: windowGlow 2.5s ease-in-out infinite;
}

.ffl-omrade-full-window-glow:nth-child(2) { animation-delay: 0.8s; }
.ffl-omrade-full-window-glow:nth-child(3) { animation-delay: 1.6s; }

.ffl-omrade-full-moving-truck {
    animation: truckDrive 1.5s ease-in-out infinite;
}

.ffl-omrade-full-road-dash {
    stroke-dasharray: 6 4;
    animation: roadMove 0.8s linear infinite;
}

.ffl-omrade-full-balance-weight {
    animation: weightBalance 2.5s ease-in-out infinite;
    transform-origin: center top;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ffl-omrade-full-bento-card {
    animation: fadeInUp 0.6s ease forwards;
}

.ffl-omrade-full-bento-card:nth-child(1) { animation-delay: 0.1s; }
.ffl-omrade-full-bento-card:nth-child(2) { animation-delay: 0.2s; }
.ffl-omrade-full-bento-card:nth-child(3) { animation-delay: 0.3s; }
.ffl-omrade-full-bento-card:nth-child(4) { animation-delay: 0.4s; }

.ffl-omrade-full-service-card {
    animation: fadeInUp 0.6s ease forwards;
}

.ffl-omrade-full-service-card:nth-child(1) { animation-delay: 0.1s; }
.ffl-omrade-full-service-card:nth-child(2) { animation-delay: 0.2s; }
.ffl-omrade-full-service-card:nth-child(3) { animation-delay: 0.3s; }
.ffl-omrade-full-service-card:nth-child(4) { animation-delay: 0.4s; }

/* FAQ Section */
.ffl-omrade-full-faq {
    padding: 4rem 0;
    background: linear-gradient(135deg, #F9F9F9 0%, white 100%);
    position: relative;
}

.ffl-omrade-full-faq-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.ffl-omrade-full-faq-header {
    margin-bottom: 3rem;
    text-align: center;
}

.ffl-omrade-full-faq-header h2 {
    color: var(--color-primary);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* FAQ Accordion */
.ffl-omrade-full-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ffl-omrade-full-faq-item {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #E5E7EB;
    transition: box-shadow 0.3s ease;
}

.ffl-omrade-full-faq-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ffl-omrade-full-faq-question {
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    font-size: 1.125rem;
    font-weight: 600;
    user-select: none;
    position: relative;
}

.ffl-omrade-full-faq-question:hover {
    background: linear-gradient(135deg, #067c91 0%, #0a8d8e 100%);
}

.ffl-omrade-full-faq-question::after {
    content: '▼';
    font-size: 1rem;
    color: white;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.ffl-omrade-full-faq-item.active .ffl-omrade-full-faq-question::after {
    transform: rotate(180deg);
}

.ffl-omrade-full-faq-answer {
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    color: #1F2933;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.ffl-omrade-full-faq-item.active .ffl-omrade-full-faq-answer {
    max-height: 500px;
    padding: 1.75rem 2rem;
}

.ffl-omrade-full-faq-answer p {
    margin-bottom: 1rem;
}

.ffl-omrade-full-faq-answer p:last-child {
    margin-bottom: 0;
}

/* Responsive för FAQ */
@media (max-width: 768px) {
    .ffl-omrade-full-faq {
        padding: 3rem 0;
    }

    .ffl-omrade-full-faq-question {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
    }

    .ffl-omrade-full-faq-item.active .ffl-omrade-full-faq-answer {
        padding: 1.25rem 1.5rem;
    }
}

/* Responsive för Hur fungerar */
@media (max-width: 900px) {
    .ffl-omrade-full-bento-grid {
        grid-template-columns: 1fr;
        width: 100%;
        left: 0;
        transform: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .ffl-omrade-full-hur-fungerar {
        padding: 3rem 0;
    }

    .ffl-omrade-full-hur-fungerar-inner {
        padding: 0 1.5rem;
    }

    .ffl-omrade-full-bento-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 16px;
        padding: 0 1.5rem;
        margin-bottom: 2rem;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .ffl-omrade-full-bento-grid::-webkit-scrollbar {
        display: none;
    }

    .ffl-omrade-full-bento-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        padding: 20px;
        min-height: auto; /* Tillåt kortare höjd */
    }

    .ffl-omrade-full-card-header {
        margin-bottom: 16px; /* Minska från 24px */
    }

    .ffl-omrade-full-card-title {
        text-align: left;
        font-size: 1.1rem; /* Minska från 1.25rem */
        line-height: 1.25; /* Tätare radavstånd */
        margin-bottom: 0;
    }

    .ffl-omrade-full-card-label {
        font-size: 0.7rem; /* Minska från 0.75rem */
        margin-bottom: 4px; /* Minska från 6px */
    }

    .ffl-omrade-full-card-desc {
        text-align: left;
        font-size: 0.9rem; /* Minska från 1rem */
        line-height: 1.5; /* Minska från 1.7 */
        margin-bottom: 16px; /* Minska från 24px */
    }

    .ffl-omrade-full-card-number {
        font-size: 2rem; /* Minska från 2.5rem */
        top: 16px; /* Minska från 24px */
        right: 20px; /* Minska från 28px */
    }

    .ffl-omrade-full-card-checks {
        gap: 10px; /* Minska från 14px */
        margin-bottom: 16px; /* Minska från 28px */
    }

    .ffl-omrade-full-check-item {
        font-size: 0.85rem; /* Minska från 0.9rem */
        line-height: 1.4; /* Minska från 1.5 */
        gap: 10px; /* Minska från 12px */
    }

    .ffl-omrade-full-check-circle {
        width: 20px; /* Minska från 22px */
        height: 20px;
    }

    .ffl-omrade-full-check-circle svg {
        width: 11px; /* Minska från 12px */
        height: 11px;
    }

    .ffl-omrade-full-result-box {
        padding: 12px 16px; /* Minska från 16px 20px */
        border-radius: 10px; /* Minska från 12px */
        margin-top: auto;
    }

    .ffl-omrade-full-result-text {
        font-size: 0.85rem; /* Minska från 0.9rem */
        line-height: 1.3; /* Minska från 1.4 */
    }

    .ffl-omrade-full-cta-section {
        padding: 24px 20px;
        width: 100%;
        left: 0;
        transform: none;
        margin-left: 0;
        margin-right: 0;
    }

    .ffl-omrade-full-cta-section-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* ===========================
   HOME HERO SCROLL WIDGET
   =========================== */

.ffl-hero-scroll-container {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.ffl-hero-scroll-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.5rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (min-width: 768px) {
    .ffl-hero-scroll-wrapper {
        min-height: 80rem;
        padding: 5rem;
    }
}

@media (max-width: 768px) {
    .ffl-hero-scroll-wrapper {
        background-attachment: scroll;
        min-height: 100vh;
        height: auto;
    }
}

.ffl-hero-scroll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.ffl-hero-scroll-content {
    padding: 2.5rem 0;
    width: 100%;
    position: relative;
    perspective: 1000px;
    z-index: 2;
}

@media (min-width: 768px) {
    .ffl-hero-scroll-content {
        padding: 10rem 0;
    }
}

.ffl-hero-scroll-header {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth easing för bättre scroll-känsla */
    will-change: transform; /* Optimera prestanda */
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.ffl-hero-scroll-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ffl-hero-scroll-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.98);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .ffl-hero-scroll-title {
        font-size: 1.75rem;
    }
    
    .ffl-hero-scroll-subtitle {
        font-size: 1rem;
    }
}

.ffl-hero-scroll-form-container {
    max-width: 600px;
    margin: 0 auto;
    margin-top: -1.5rem;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth easing för bättre scroll-känsla */
    will-change: transform; /* Optimera prestanda */
    transform-style: preserve-3d;
    z-index: 3;
}

@media (min-width: 768px) {
    .ffl-hero-scroll-form-container {
        margin-top: -2rem;
    }
}

.ffl-hero-scroll-form {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Ta bort styling från plugin:ets wrapper-element - vi tar INTE bort elementen */
.ffl-hero-scroll-form-container .ff-wrapper {
    padding: 0 !important;
    background-color: transparent !important;
    min-height: auto !important;
    height: auto !important;
}

.ffl-hero-scroll-form-container .ff-container {
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Ta bort ALL styling från plugin:ets React root när den är i hero-scroll-container */
.ffl-hero-scroll-container #flyttfixarn-root,
.ffl-hero-scroll-form-container #flyttfixarn-root,
.ffl-hero-scroll-form #flyttfixarn-root {
    padding: 0 !important;
    background-color: transparent !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
}

.ffl-hero-scroll-form *,
.ffl-hero-scroll-form *::before,
.ffl-hero-scroll-form *::after {
    box-sizing: border-box;
}

.ffl-hero-scroll-button-wrapper {
    max-width: 600px;
    margin: 1.5rem auto 0;
    text-align: center;
    position: relative;
    z-index: 3;
}

.ffl-hero-scroll-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #ffffff;
    padding: 16px 36px;
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 20px rgba(8, 146, 165, 0.45);
    min-width: 200px;
    position: relative;
    z-index: 3;
    pointer-events: auto;
    touch-action: manipulation;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.ffl-hero-scroll-button:hover {
    background: linear-gradient(135deg, #067c91 0%, #0a8d8e 100%);
    box-shadow: 0 8px 25px rgba(8, 146, 165, 0.6);
    transform: translateY(-3px);
}

.ffl-hero-scroll-button:active {
    transform: translateY(-1px);
}

/* ===========================
   HERO SOMERSTONE - START
   Ny hero-sektion baserad på Somerstone-design
   =========================== */

/* Hero Section */
.ffl-hero-somerstone-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 10; /* Lägre än header (z-index: 1000) så att header ligger ovanpå */
}

/* Dölj hero-sektionen när man scrollat förbi den (200vh) */
body.scrolled-past-hero .ffl-hero-somerstone-section,
html.scrolled-past-hero .ffl-hero-somerstone-section {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Background Image */
.ffl-hero-somerstone-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden; /* Säkerställ att bilden inte kan sticka ut utanför containern */
}

.ffl-hero-somerstone-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block; /* Ta bort eventuellt whitespace under bilden */
}

/* Dark Overlay */
.ffl-hero-somerstone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0; /* Säkerställ att overlay når hela vägen ner */
    width: 100%;
    height: 100%; /* Använd 100% för att matcha exakt samma höjd som background-containern (som också är 100%) */
    z-index: 2;
}

/* Content Container */
.ffl-hero-somerstone-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 80px 4rem 4rem 4rem; /* Minskad padding-top och lagt till padding-bottom */
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 6rem;
    align-items: center;
}

@media (max-width: 1024px) {
    .ffl-hero-somerstone-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 2rem;
    }
    
    .ffl-hero-somerstone-left {
        padding-left: 0;
        text-align: center;
    }
    
    .ffl-hero-somerstone-right {
        padding-right: 0;
    }
}

/* Left Side - Main Content */
.ffl-hero-somerstone-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 2rem;
}

.ffl-hero-somerstone-logo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: #fff;
}

.ffl-hero-somerstone-heading {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    color: #fff;
}

.ffl-hero-somerstone-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 2rem;
    max-width: 600px;
    color: #fff;
}

.ffl-hero-somerstone-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: fit-content;
    border-radius: 999px;
}

.ffl-hero-somerstone-cta:hover {
    background: #fff;
    color: #1F2937;
    transform: translateY(-2px);
}

.ffl-hero-somerstone-cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.ffl-hero-somerstone-cta:hover .ffl-hero-somerstone-cta-arrow {
    transform: translateY(4px);
}

/* Right Side - Form Card */
.ffl-hero-somerstone-right {
    position: relative;
    padding-right: 2rem;
    z-index: 2; /* Lägre än hero-content (z-index: 3) */
}

.ffl-hero-somerstone-form-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2; /* Lägre än hero-content (z-index: 3) */
    isolation: isolate; /* Skapa ny stacking context */
    contain: layout style; /* Förhindra att formuläret påverkar andra sektioner */
}

.ffl-hero-somerstone-form {
    padding: 0;
    position: relative;
    z-index: 1; /* Lägre än form-card (z-index: 2) */
}

/* Ta bort styling från plugin:ets wrapper-element när de är i somerstone-widget */
.ffl-hero-somerstone-form-card .ff-wrapper {
    padding: 0 !important;
    background-color: transparent !important;
    min-height: auto !important;
    height: auto !important;
}

.ffl-hero-somerstone-form-card .ff-container {
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.ffl-hero-somerstone-form-card #flyttfixarn-root,
.ffl-hero-somerstone-form #flyttfixarn-root {
    padding: 0 !important;
    background-color: transparent !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: relative;
    z-index: 1; /* Lägre än form-card (z-index: 2) */
}

/* ===========================
   FLYTTFIXARN FORMULÄR - Progress Steps (Plugin)
   Minska progress-steg på mobil för fler än 4 steg
   =========================== */

/* Target:ar progress-stegen i flyttfixarn-plugin formuläret */
/* Progress-stegen genereras av React med inline styles, så vi måste använda !important */

@media (max-width: 480px) {
    /* Target:ar progress-step cirklar (cirkulära element med width/height) */
    #flyttfixarn-root div[style*="borderRadius: '50%'"],
    #flyttfixarn-root div[style*="border-radius: 50%"],
    #flyttfixarn-root div[style*="borderRadius:'50%'"],
    #flyttfixarn-root div[style*="border-radius:50%"] {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }
    
    /* Target:ar progress-step container (flex container med gap) */
    #flyttfixarn-root div[style*="display: flex"][style*="gap"],
    #flyttfixarn-root div[style*="display:flex"][style*="gap"] {
        gap: 3px !important;
        flex-wrap: nowrap !important;
    }
    
    /* Target:ar progress-line (smala horisontella linjer) */
    #flyttfixarn-root div[style*="width: '16px'"],
    #flyttfixarn-root div[style*="width:'16px'"],
    #flyttfixarn-root div[style*="width: 16px"],
    #flyttfixarn-root div[style*="width:16px"],
    #flyttfixarn-root div[style*="width: '24px'"],
    #flyttfixarn-root div[style*="width:'24px'"],
    #flyttfixarn-root div[style*="width: 24px"],
    #flyttfixarn-root div[style*="width:24px"] {
        width: 8px !important;
    }
    
    /* Justera checkmark SVG-storlek för completed steps */
    #flyttfixarn-root svg[viewBox="0 0 24 24"] {
        width: 10px !important;
        height: 10px !important;
    }
}

/* Scroll Progress Indicator - Höger sida */
.ffl-hero-somerstone-progress {
    position: fixed;
    right: 0.5rem;
    top: 12rem;
    width: 4px;
    height: calc(100vh - 24rem);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    z-index: 15;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.ffl-hero-somerstone-progress-hidden {
    opacity: 0;
}

.ffl-hero-somerstone-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 2px;
    transition: height 0.1s ease-out;
}

/* Scroll Indicator - Bottom center */
.ffl-hero-somerstone-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
    animation: ffl-hero-somerstone-bounce 2s infinite;
}

.ffl-hero-somerstone-scroll-indicator-line {
    width: 2px;
    height: 30px;
    background: #fff;
    border-radius: 2px;
}

.ffl-hero-somerstone-scroll-indicator-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

@keyframes ffl-hero-somerstone-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ffl-hero-somerstone-section {
        min-height: 100vh;
        padding: 2rem 0;
    }
    
    .ffl-hero-somerstone-content {
        padding: 2rem 1.5rem;
        gap: 2.5rem;
        align-items: flex-start;
    }

    .ffl-hero-somerstone-left {
        padding-left: 0;
        text-align: center;
        gap: 1.5rem;
    }
    
    .ffl-hero-somerstone-logo {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .ffl-hero-somerstone-heading {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .ffl-hero-somerstone-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        max-width: 100%;
    }
    
    .ffl-hero-somerstone-cta {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        width: 100%;
        justify-content: center;
    }

    .ffl-hero-somerstone-right {
        padding-right: 0;
        width: 100%;
    }

    .ffl-hero-somerstone-form-card {
        padding: 1.5rem;
        max-width: 100%;
    }
    
    .ffl-hero-somerstone-progress {
        display: none;
    }
    
    .ffl-hero-somerstone-scroll-indicator {
        bottom: 1rem;
    }
}

/* ============================
   Somerstone Hero – state-klasser
   ============================ */

/* Hero när den ska vara helt "avstängd" efter en viss scroll */
.ffl-hero-somerstone-section.ffl-hero-somerstone-section--hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;      /* så den slutar ligga fixed över sidan */
  top: -100vh;             /* flytta ut den ovanför viewporten */
}

/* Standard: nästa sektion har offset för att glida över hero */
.ffl-hero-next-section {
  position: relative;
  z-index: 20;
  margin-top: 100vh;
}

/* När heron är avstängd: ta bort luftfickan */
.ffl-hero-next-section.ffl-hero-next-section--no-offset {
  margin-top: 0;
  transition: margin-top 0.25s ease-out;
}

/* Sektioner efter hero-somerstone ska scrolla över hero-sektionen */
/* Hero-sektionen är position: fixed, så nästa sektion behöver:
   1. margin-top: 100vh (för att börja efter hero i document flow)
   2. position: relative
   3. z-index: 20 (för att ligga ovanför hero som har z-index: 10)
   4. opacity: 1 !important (förhindra fade-in animationer)
   5. animation: none !important (förhindra alla animationer)
   6. transition: none !important (förhindra transitions som kan orsaka fade-in)
*/

/* VIKTIGT: Undanta omdömme-sektionen (.ffl-testimonials-sticky) från fade-in-förhindring */
/* Den behöver sina transitions och animations för att fungera korrekt */

/* Specifikt för .elementor-section efter hero */
/* UNDANTA omdömme-sektionen som behöver sina animationer */
.ffl-hero-somerstone-section ~ .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
.ffl-hero-somerstone-section ~ section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]) {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 100vh !important; /* Börja direkt efter hero-sektionen (100vh) */
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
    /* Säkerställ att bakgrunden är synlig även när sektionen scrollar över hero */
    background-color: var(--color-background-light) !important;
    background: var(--color-background-light) !important;
}

/* Nästa sektion direkt efter hero i samma parent */
/* UNDANTA omdömme-sektionen som behöver sina animationer */
main .ffl-hero-somerstone-section + .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
main .ffl-hero-somerstone-section + section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
.elementor-container .ffl-hero-somerstone-section + .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]) {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 100vh !important; /* Börja direkt efter hero-sektionen (100vh) */
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
    /* Säkerställ att bakgrunden är synlig även när sektionen scrollar över hero */
    background-color: var(--color-background-light) !important;
    background: var(--color-background-light) !important;
}

/* Om hero-sektionen är inuti en .elementor-section, targeta nästa .elementor-section */
/* UNDANTA omdömme-sektionen som behöver sina animationer */
.elementor-section:has(.ffl-hero-somerstone-section) + .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]) {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 100vh !important; /* Börja direkt efter hero-sektionen (100vh) */
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
    /* Säkerställ att bakgrunden är synlig även när sektionen scrollar över hero */
    background-color: var(--color-background-light) !important;
    background: var(--color-background-light) !important;
}

/* Förhindra fade-in på process-sektioner och andra widgets efter hero */
/* UNDANTA omdömme-sektionen som behöver sina animationer */
/* VIKTIGT: Dessa sektioner behöver också z-index: 20 för att ligga ovanpå hero */
.ffl-hero-somerstone-section ~ .ffl-process-alternating-diagonal-step:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
.ffl-hero-somerstone-section ~ .ffl-process:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
.ffl-hero-somerstone-section ~ .ffl-process-alternating-diagonal:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
.elementor-section:has(.ffl-hero-somerstone-section) ~ .ffl-process-alternating-diagonal-step:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
.elementor-section:has(.ffl-hero-somerstone-section) ~ .ffl-process:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
.elementor-section:has(.ffl-hero-somerstone-section) ~ .ffl-process-alternating-diagonal:not(.ffl-testimonials-sticky):not([class*="testimonials"]) {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 100vh !important; /* Börja direkt efter hero-sektionen (100vh) */
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
    /* Säkerställ att bakgrunden är synlig även när sektionen scrollar över hero */
    background-color: var(--color-background-light) !important;
    background: var(--color-background-light) !important;
}

/* Undanta omdömme-sektionen från fade-in-förhindring */
.ffl-hero-somerstone-section ~ .ffl-testimonials-sticky,
.ffl-hero-somerstone-section ~ [class*="testimonials"],
.ffl-hero-somerstone-section ~ [class*="omdomen"],
.elementor-section:has(.ffl-hero-somerstone-section) ~ .ffl-testimonials-sticky,
.elementor-section:has(.ffl-hero-somerstone-section) ~ [class*="testimonials"],
.elementor-section:has(.ffl-hero-somerstone-section) ~ [class*="omdomen"] {
    /* Tillåt transitions och animations för omdömme-sektionen */
    opacity: unset !important;
    animation: unset !important;
    transition: unset !important;
    visibility: unset !important;
}

/* Förhindra Elementor scroll animations på nästa sektion */
.elementor-section:has(.ffl-hero-somerstone-section) + .elementor-section.elementor-invisible,
.ffl-hero-somerstone-section ~ .elementor-section.elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
}

/* Förhindra alla fade-in klasser på nästa sektion */
.elementor-section:has(.ffl-hero-somerstone-section) + .elementor-section.fadeIn,
.elementor-section:has(.ffl-hero-somerstone-section) + .elementor-section.fade-in,
.elementor-section:has(.ffl-hero-somerstone-section) + .elementor-section[class*="fade"],
.ffl-hero-somerstone-section ~ .elementor-section.fadeIn,
.ffl-hero-somerstone-section ~ .elementor-section.fade-in,
.ffl-hero-somerstone-section ~ .elementor-section[class*="fade"] {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

/* Smooth scroll offset för sticky header */
.ffl-hero-somerstone-section {
    scroll-margin-top: 80px;
}

#tjanster-sektion {
    scroll-margin-top: 80px;
}

/* ===========================
   HERO SOMERSTONE - END
   =========================== */

/* ===========================
   HERO SOMERSTONE - Mobil Override
   Gör heron till en bildbakgrund i mobil utan att ändra layout
   =========================== */
@media (max-width: 768px) {
    /* Gör heron till en bildbakgrund i mobil utan att ändra layout */
    .ffl-hero-somerstone-section {
        background-image: url("https://flyttfirmailandskrona.se/wp-content/uploads/2025/11/flyttfirma-landskrona.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Göm img-elementet i mobil så vi inte får dubbel bild */
    .ffl-hero-somerstone-background img {
        display: none;
    }
}

/* ===========================
   HERO SOMERSTONE – stäng av scroll-over i mobil
   =========================== */
@media (max-width: 768px) {
  /* Gör heron "vanlig" i mobil (inte fixed) */
  .ffl-hero-somerstone-section {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: 100vh;
    z-index: auto;
  }

  /* Neutralisera hidden-state i mobil */
  .ffl-hero-somerstone-section.ffl-hero-somerstone-section--hidden {
    top: 0; /* ingen -100vh-animation i mobil */
  }

  /* Neutralisera .ffl-hero-next-section i mobil */
  .ffl-hero-next-section {
    margin-top: 0 !important;
    position: static !important;
    z-index: auto !important;
    transform: none !important;
  }

  /* Sektionerna efter heron – ingen overlap i mobil */
  .ffl-hero-somerstone-section
    ~ .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
  .ffl-hero-somerstone-section
    ~ section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
  main .ffl-hero-somerstone-section
    + .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
  main .ffl-hero-somerstone-section
    + section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
  .elementor-section:has(.ffl-hero-somerstone-section)
    + .elementor-section:not(.ffl-testimonials-sticky):not([class*="testimonials"]):not([class*="omdomen"]),
  .ffl-hero-somerstone-section
    ~ .ffl-process-alternating-diagonal-step:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
  .ffl-hero-somerstone-section
    ~ .ffl-process:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
  .ffl-hero-somerstone-section
    ~ .ffl-process-alternating-diagonal:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
  .elementor-section:has(.ffl-hero-somerstone-section)
    ~ .ffl-process-alternating-diagonal-step:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
  .elementor-section:has(.ffl-hero-somerstone-section)
    ~ .ffl-process:not(.ffl-testimonials-sticky):not([class*="testimonials"]),
  .elementor-section:has(.ffl-hero-somerstone-section)
    ~ .ffl-process-alternating-diagonal:not(.ffl-testimonials-sticky):not([class*="testimonials"]) {
    margin-top: 0 !important;
    position: static !important;
    z-index: auto !important;
    transform: none !important;
  }
}

/* ============================================
   FOOTER SEO WIDGET STYLES
   ============================================ */

.ffl-footer-seo {
  background: linear-gradient(180deg, #0892A5 0%, #0CA4A5 50%, #0892A5 100%);
  position: relative;
  overflow: hidden;
}

/* Gradient fade overlay */
.ffl-footer-seo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(8, 146, 165, 0.95) 0%, rgba(8, 146, 165, 0.98) 50%, rgba(8, 146, 165, 1) 100%);
  z-index: 0;
}

/* Hero pattern overlay */
.ffl-footer-seo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  z-index: 0;
  pointer-events: none;
}

/* Floating geometric shapes */
.ffl-footer-seo__geometric-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
}

.ffl-footer-seo__shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.ffl-footer-seo__shape1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: 10%;
  animation: ffl-footer-seo-float 20s ease-in-out infinite;
}

.ffl-footer-seo__shape2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: 5%;
  animation: ffl-footer-seo-float 15s ease-in-out infinite reverse;
}

.ffl-footer-seo__shape3 {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  animation: ffl-footer-seo-float 18s ease-in-out infinite;
}

@keyframes ffl-footer-seo-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.ffl-footer-seo__main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 40px 40px;
  position: relative;
  z-index: 1;
}

/* Hero intro section */
.ffl-footer-seo__hero {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.ffl-footer-seo__hero h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  margin-bottom: 20px;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  animation: ffl-footer-seo-fadeInScale 0.8s ease-out;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

@keyframes ffl-footer-seo-fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ffl-footer-seo__hero p {
  font-size: clamp(16px, 2.5vw, 20px);
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  animation: ffl-footer-seo-fadeInUp 0.8s ease-out 0.2s both;
}

@keyframes ffl-footer-seo-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Trust badges - Scrolling banner */
.ffl-footer-seo__trust-badges-wrapper {
  margin-top: 32px;
  overflow: hidden;
  position: relative;
  width: 100%;
  white-space: nowrap;
}

.ffl-footer-seo__trust-badges {
  display: inline-flex;
  gap: 24px;
  animation: ffl-footer-seo-scrollBanner 30s linear infinite;
  will-change: transform;
}

.ffl-footer-seo__trust-badges:hover {
  animation-play-state: paused;
}

@keyframes ffl-footer-seo-scrollBanner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ffl-footer-seo__trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.ffl-footer-seo__trust-badge-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-footer-seo__trust-badge-icon svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}

/* Grid layout */
.ffl-footer-seo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-bottom: 80px;
}

.ffl-footer-seo__card {
  background: #ffffff;
  padding: 40px;
  border-radius: 24px;
  border: 2px solid #f1f5f9;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: ffl-footer-seo-fadeInUp 0.8s ease-out both;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.ffl-footer-seo__card:nth-child(1) { animation-delay: 0.1s; }
.ffl-footer-seo__card:nth-child(2) { animation-delay: 0.2s; }
.ffl-footer-seo__card:nth-child(3) { animation-delay: 0.3s; }

.ffl-footer-seo__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0892A5, #0CA4A5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ffl-footer-seo__card:hover {
  transform: translateY(-12px);
  border-color: #0892A5;
  box-shadow: 0 24px 64px rgba(8, 146, 165, 0.2);
}

.ffl-footer-seo__card:hover::before {
  transform: scaleX(1);
}

.ffl-footer-seo__card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ffl-footer-seo__icon-wrapper {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 20px rgba(8, 146, 165, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.ffl-footer-seo__icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.ffl-footer-seo__card:hover .ffl-footer-seo__icon-wrapper {
  transform: rotate(5deg) scale(1.1);
  box-shadow: 0 12px 28px rgba(8, 146, 165, 0.35);
}

.ffl-footer-seo__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ffl-footer-seo__card li {
  margin-bottom: 16px;
}

.ffl-footer-seo__card a {
  color: #475569;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 4px 0;
}

.ffl-footer-seo__card a::before {
  content: '→';
  opacity: 0;
  transform: translateX(-12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #0892A5;
  font-weight: 700;
  font-size: 18px;
}

.ffl-footer-seo__card a:hover {
  color: #0892A5;
  padding-left: 8px;
  transform: translateX(4px);
}

.ffl-footer-seo__card a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Contact items */
.ffl-footer-seo__contact-grid {
  display: grid;
  gap: 16px;
}

.ffl-footer-seo__contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ffl-footer-seo__contact-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(6px);
  border-color: rgba(255, 255, 255, 0.35);
}

.ffl-footer-seo__contact-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(8, 146, 165, 0.3);
  transition: transform 0.3s ease;
}

.ffl-footer-seo__contact-icon svg {
  width: 20px;
  height: 20px;
}

.ffl-footer-seo__contact-item:hover .ffl-footer-seo__contact-icon {
  transform: scale(1.1) rotate(5deg);
}

.ffl-footer-seo__contact-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.ffl-footer-seo__contact-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.ffl-footer-seo__phone-link {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

/* CTA Section */
.ffl-footer-seo__cta {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 60px 50px;
  border-radius: 32px;
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(8, 146, 165, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.ffl-footer-seo__cta-content {
  position: relative;
  z-index: 1;
}

.ffl-footer-seo__cta h2 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
}

.ffl-footer-seo__cta p {
  font-size: clamp(16px, 2.5vw, 20px);
  color: #475569;
  margin-bottom: 32px;
}

.ffl-footer-seo__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0892A5 0%, #0CA4A5 100%);
  color: #ffffff;
  padding: 20px 48px;
  border-radius: 60px;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(8, 146, 165, 0.3);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.ffl-footer-seo__cta-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.ffl-footer-seo__cta-button:hover::before {
  width: 400px;
  height: 400px;
}

.ffl-footer-seo__cta-button:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 40px rgba(8, 146, 165, 0.4);
  background: linear-gradient(135deg, #067c91 0%, #0a8d8e 100%);
}

.ffl-footer-seo__cta-button span {
  position: relative;
  z-index: 1;
}

.ffl-footer-seo__cta-arrow {
  font-size: 24px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.ffl-footer-seo__cta-button:hover .ffl-footer-seo__cta-arrow {
  transform: translateX(8px);
}

/* Mini footer */
.ffl-footer-seo__mini {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  padding: 40px 40px 30px;
  text-align: center;
}

.ffl-footer-seo__company-info {
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ffl-footer-seo__footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ffl-footer-seo__footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding: 4px 0;
}

.ffl-footer-seo__footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ffffff;
  transition: width 0.3s ease;
}

.ffl-footer-seo__footer-links a:hover {
  color: #ffffff;
}

.ffl-footer-seo__footer-links a:hover::after {
  width: 100%;
}

.ffl-footer-seo__divider {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}

.ffl-footer-seo__copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
}

/* Form Modal Styles */
.ffl-footer-seo-modal {
  display: none !important;
  visibility: hidden !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ffl-footer-seo-modal.ffl-footer-seo-modal--active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto !important;
}

/* Explicit hidden state för att säkerställa att modalen är helt dold */
.ffl-footer-seo-modal--hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

.ffl-footer-seo-modal__content {
  background: #ffffff;
  border-radius: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.ffl-footer-seo-modal.ffl-footer-seo-modal--active .ffl-footer-seo-modal__content {
  transform: scale(1);
}

.ffl-footer-seo-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #64748b;
  transition: all 0.2s ease;
  z-index: 1;
}

.ffl-footer-seo-modal__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ffl-footer-seo-modal__body {
  padding: 40px;
}

/* Formulär-container - säkerställ synlighet */
#ffl-footer-kompakt-form-container,
#ffl-footer-seo-form-container {
  display: block;
  width: 100%;
  min-height: 200px;
}

#ffl-footer-kompakt-form-container > *,
#ffl-footer-seo-form-container > * {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Matcha hero-formulär styling i modal */
#ffl-footer-kompakt-form-container #flyttfixarn-root,
#ffl-footer-seo-form-container #flyttfixarn-root {
  background: #ffffff !important;
  padding: 32px !important;
  border-radius: 20px !important;
  min-height: 400px;
  max-height: fit-content;
  height: auto !important;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 8px 32px rgba(8, 146, 165, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: none !important;
}

/* Ta bort padding från första barn-elementet */
#ffl-footer-kompakt-form-container #flyttfixarn-root > *:first-child,
#ffl-footer-seo-form-container #flyttfixarn-root > *:first-child {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: auto !important;
  height: auto !important;
}

/* Ta bort dubbel bakgrund från React-appens huvudcontainer */
#ffl-footer-kompakt-form-container #flyttfixarn-root > *:first-child > div:first-child,
#ffl-footer-seo-form-container #flyttfixarn-root > *:first-child > div:first-child {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .ffl-footer-seo__main {
    padding: 60px 24px 30px;
  }
  
  .ffl-footer-seo__hero {
    margin-bottom: 60px;
  }
  
  .ffl-footer-seo__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 60px;
  }
  
  .ffl-footer-seo__card {
    padding: 32px;
  }
  
  .ffl-footer-seo__cta {
    padding: 40px 28px;
    border-radius: 24px;
    margin-bottom: 40px;
  }
  
  .ffl-footer-seo__cta-button {
    padding: 18px 36px;
    font-size: 16px;
  }
  
  .ffl-footer-seo__mini {
    padding: 30px 24px 24px;
  }
  
  .ffl-footer-seo__footer-links {
    flex-direction: column;
    gap: 12px;
  }
  
  .ffl-footer-seo__divider {
    display: none;
  }
  
  .ffl-footer-seo__trust-badges-wrapper {
    margin-top: 24px;
  }
  
  .ffl-footer-seo__trust-badges {
    gap: 16px;
    animation: ffl-footer-seo-scrollBannerMobile 25s linear infinite;
  }
  
  @keyframes ffl-footer-seo-scrollBannerMobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .ffl-footer-seo__trust-badge {
    font-size: 11px;
    padding: 8px 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .ffl-footer-seo__trust-badge-icon {
    flex-shrink: 0;
  }
  
  .ffl-footer-seo-modal__content {
    max-width: 100%;
    border-radius: 20px;
  }
  
  .ffl-footer-seo-modal__body {
    padding: 24px;
  }
  
  .ffl-footer-seo-modal__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}

/* ============================================ */
/* KOMPAKT FOOTER (Variant 6) */
/* ============================================ */
.ffl-footer-kompakt {
  background: linear-gradient(180deg, #0892A5 0%, #0CA4A5 50%, #0892A5 100%);
  position: relative;
  overflow: hidden;
  padding: 35px 40px 25px;
  color: white;
}

/* Hero pattern overlay */
.ffl-footer-kompakt::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  z-index: 0;
  pointer-events: none;
}

/* Floating geometric shapes - Dolda */
.ffl-footer-kompakt__geometric-bg {
  display: none;
}

.ffl-footer-kompakt__content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Kompakt Hero-sektion */
.ffl-footer-kompakt__hero {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.ffl-footer-kompakt__hero h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  animation: ffl-footer-kompakt-fadeInScale 0.8s ease-out;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

@keyframes ffl-footer-kompakt-fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ffl-footer-kompakt__hero p {
  font-size: clamp(13px, 1.6vw, 15px);
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto 16px;
  line-height: 1.5;
  animation: ffl-footer-kompakt-fadeInUp 0.8s ease-out 0.2s both;
}

@keyframes ffl-footer-kompakt-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Trust badges - kompakt */
.ffl-footer-kompakt__trust-badges-wrapper {
  margin-top: 24px;
  overflow: hidden;
  position: relative;
  width: 100%;
  white-space: nowrap;
}

.ffl-footer-kompakt__trust-badges {
  display: inline-flex;
  gap: 24px;
  animation: ffl-footer-kompakt-scrollBanner 30s linear infinite;
  will-change: transform;
}

.ffl-footer-kompakt__trust-badges:hover {
  animation-play-state: paused;
}

@keyframes ffl-footer-kompakt-scrollBanner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ffl-footer-kompakt__trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.ffl-footer-kompakt__trust-badge-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-footer-kompakt__trust-badge-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

/* Grid med 3 kort */
.ffl-footer-kompakt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.ffl-footer-kompakt__card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: ffl-footer-kompakt-fadeInUp 0.8s ease-out both;
}

.ffl-footer-kompakt__card:nth-child(1) { 
  animation-delay: 0.1s; 
}

.ffl-footer-kompakt__card:nth-child(2) { 
  animation-delay: 0.2s; 
}

.ffl-footer-kompakt__card:nth-child(3) { 
  animation-delay: 0.3s; 
}

.ffl-footer-kompakt__card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(8, 146, 165, 0.15);
}

.ffl-footer-kompakt__card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ffl-footer-kompakt__card-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ffl-footer-kompakt__card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ffl-footer-kompakt__card:hover .ffl-footer-kompakt__card-icon {
  transform: scale(1.2) rotate(5deg);
}

.ffl-footer-kompakt__card:hover .ffl-footer-kompakt__card-icon svg {
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
}

.ffl-footer-kompakt__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ffl-footer-kompakt__card li {
  margin-bottom: 8px;
}

.ffl-footer-kompakt__card a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  position: relative;
  padding-left: 0;
}

.ffl-footer-kompakt__card a::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.ffl-footer-kompakt__card a:hover {
  color: white;
  padding-left: 20px;
  transform: translateX(4px);
}

.ffl-footer-kompakt__card a:hover::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* Områden lista - 2 kolumner */
.ffl-footer-kompakt__omraden-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ffl-footer-kompakt__omraden-list li {
  margin-bottom: 8px;
}

.ffl-footer-kompakt__omraden-list a {
  position: relative;
}

.ffl-footer-kompakt__omraden-list a::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.ffl-footer-kompakt__omraden-list a:hover {
  padding-left: 20px;
}

.ffl-footer-kompakt__omraden-list a:hover::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* Kontakt grid */
.ffl-footer-kompakt__contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ffl-footer-kompakt__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ffl-footer-kompakt__contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ffl-footer-kompakt__contact-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.ffl-footer-kompakt__contact-link,
.ffl-footer-kompakt__phone-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.ffl-footer-kompakt__contact-link:hover,
.ffl-footer-kompakt__phone-link:hover {
  color: white;
}

.ffl-footer-kompakt__phone-link {
  font-weight: 600;
}

/* Kompakt CTA-sektion */
.ffl-footer-kompakt__cta {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ffl-footer-kompakt__cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.ffl-footer-kompakt__cta h2 {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  margin-bottom: 10px;
  color: white;
  line-height: 1.2;
}

.ffl-footer-kompakt__cta p {
  font-size: clamp(13px, 1.6vw, 15px);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  line-height: 1.5;
}

.ffl-footer-kompakt__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: white;
  color: #0892A5;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ffl-footer-kompakt__cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.ffl-footer-kompakt__cta-arrow {
  font-size: 18px;
  transition: transform 0.3s;
}

.ffl-footer-kompakt__cta-button:hover .ffl-footer-kompakt__cta-arrow {
  transform: translateX(4px);
}

/* Mini Footer */
.ffl-footer-kompakt__mini {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
  text-align: center;
}

.ffl-footer-kompakt__company-info {
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}

.ffl-footer-kompakt__footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ffl-footer-kompakt__footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.ffl-footer-kompakt__footer-links a:hover {
  color: white;
}

.ffl-footer-kompakt__divider {
  color: rgba(255, 255, 255, 0.5);
}

.ffl-footer-kompakt__copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* Responsive */
@media (max-width: 768px) {
  .ffl-footer-kompakt {
    padding: 30px 24px 20px;
  }

  .ffl-footer-kompakt__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ffl-footer-kompakt__hero {
    margin-bottom: 32px;
  }

  .ffl-footer-kompakt__hero h2 {
    font-size: 22px;
  }

  .ffl-footer-kompakt__hero p {
    font-size: 14px;
  }

  .ffl-footer-kompakt__trust-badges {
    animation: ffl-footer-kompakt-scrollBannerMobile 20s linear infinite;
  }

  @keyframes ffl-footer-kompakt-scrollBannerMobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .ffl-footer-kompakt__trust-badge {
    font-size: 12px;
    padding: 6px 12px;
  }

  .ffl-footer-kompakt__contact-grid {
    grid-template-columns: 1fr;
  }

  .ffl-footer-kompakt__omraden-list {
    grid-template-columns: 1fr;
  }

  .ffl-footer-kompakt__cta {
    padding: 24px 20px;
  }

  .ffl-footer-kompakt__cta h2 {
    font-size: 20px;
  }

  .ffl-footer-kompakt__cta p {
    font-size: 14px;
  }
}

/* ========================================
   OM OSS FULL WIDGET - All Sections
   ======================================== */

/* Hero Section */
.ffl-om-oss-full-hero {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 120px 80px 100px;
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
}

.ffl-om-oss-full-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(8, 147, 166, 0.08) 0%, transparent 70%);
  z-index: -1;
}

.ffl-om-oss-full-hero-content {
  max-width: 580px;
}

.ffl-om-oss-full-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 28px;
  animation: fadeInUp 0.8s ease-out;
}

.ffl-om-oss-full-hero-badge svg {
  width: 18px;
  height: 18px;
}

.ffl-om-oss-full-hero h1 {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 28px;
  line-height: 1.2;
  animation: fadeInUp 0.8s ease-out 0.1s backwards;
  letter-spacing: -0.02em;
}

.ffl-om-oss-full-hero h1 span {
  color: var(--color-primary);
}

.ffl-om-oss-full-hero-text {
  font-size: 1.2rem;
  color: var(--color-text-light);
  margin-bottom: 40px;
  line-height: 1.7;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.ffl-om-oss-full-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  color: white;
  padding: 20px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(8, 147, 166, 0.3);
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out 0.3s backwards;
  position: relative;
  overflow: hidden;
}

.ffl-om-oss-full-hero-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.ffl-om-oss-full-hero-cta:hover::before {
  left: 100%;
}

.ffl-om-oss-full-hero-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(8, 147, 166, 0.4);
}

.ffl-om-oss-full-hero-cta svg {
  width: 20px;
  height: 20px;
}

.ffl-om-oss-full-hero-image-area {
  position: relative;
  animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

.ffl-om-oss-full-hero-image-main {
  width: 100%;
  height: 520px;
  min-height: 520px;
  background: linear-gradient(145deg, #e8f4f6 0%, #d0eaef 100%);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 2px dashed rgba(8, 147, 166, 0.12);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(8, 147, 166, 0.15);
  transition: all 0.3s ease;
}

.ffl-om-oss-full-hero-image-main.has-image {
  display: block;
  padding: 0;
  border: none;
}

.ffl-om-oss-full-hero-image-main:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 80px rgba(8, 147, 166, 0.2);
}

.ffl-om-oss-full-hero-image-main img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
  z-index: 1;
  display: block;
}

.ffl-om-oss-full-image-placeholder-icon {
  width: 80px;
  height: 80px;
  background: var(--color-background);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
  position: relative;
  z-index: 2;
}

.ffl-om-oss-full-image-placeholder-icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.ffl-om-oss-full-image-placeholder-text {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1rem;
  position: relative;
  z-index: 2;
}

.ffl-om-oss-full-image-placeholder-hint {
  font-size: 0.85rem;
  color: var(--color-text-light);
  position: relative;
  z-index: 2;
}

.ffl-om-oss-full-hero-float-badge {
  position: absolute;
  background: var(--color-background);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 40px rgba(8, 147, 166, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: float 3s ease-in-out infinite;
  z-index: 10;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(8, 147, 166, 0.08);
}

.ffl-om-oss-full-hero-float-badge:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 50px rgba(8, 147, 166, 0.18);
}

.ffl-om-oss-full-hero-float-badge.reviews {
  bottom: 60px;
  left: -40px;
}

.ffl-om-oss-full-hero-float-badge.experience {
  top: 60px;
  right: -40px;
  animation-delay: 1.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.ffl-om-oss-full-float-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-om-oss-full-float-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.ffl-om-oss-full-float-icon.gold {
  background: linear-gradient(135deg, #d4a853, #f0d68a);
}

.ffl-om-oss-full-float-content strong {
  display: block;
  font-size: 1.15rem;
  color: var(--color-text);
}

.ffl-om-oss-full-float-content span {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* Stats Bar Section */
.ffl-om-oss-full-stats {
  background: var(--color-text);
  padding: 0;
}

.ffl-om-oss-full-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px;
  margin: 0 auto;
}

.ffl-om-oss-full-stat-item {
  padding: 48px 32px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

.ffl-om-oss-full-stat-item:last-child {
  border-right: none;
}

.ffl-om-oss-full-stat-item:hover {
  background: rgba(8, 147, 166, 0.2);
}

.ffl-om-oss-full-stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 8px;
}

.ffl-om-oss-full-stat-label {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

/* About Section */
.ffl-om-oss-full-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.ffl-om-oss-full-about-image {
  background: linear-gradient(145deg, #e8f4f6 0%, #d0eaef 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  padding: 60px;
  overflow: hidden;
}

.ffl-om-oss-full-about-image::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  border: 2px dashed rgba(8, 147, 166, 0.12);
  border-radius: 24px;
  z-index: 2;
  pointer-events: none;
}

.ffl-om-oss-full-about-image.has-image::before {
  display: none;
}

.ffl-om-oss-full-about-image.has-image {
  padding: 0;
}

.ffl-om-oss-full-about-image img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.ffl-om-oss-full-team-avatars {
  display: flex;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.ffl-om-oss-full-team-avatar {
  width: 72px;
  height: 72px;
  background: var(--color-background);
  border-radius: 50%;
  border: 4px solid var(--color-background);
  margin-left: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
}

.ffl-om-oss-full-team-avatar:first-child {
  margin-left: 0;
}

.ffl-om-oss-full-team-avatar svg {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
}

.ffl-om-oss-full-about-content {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-background);
  position: relative;
}

.ffl-om-oss-full-about-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 60px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  border-radius: 0 4px 4px 0;
}

.ffl-om-oss-full-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.ffl-om-oss-full-section-label svg {
  width: 20px;
  height: 20px;
}

.ffl-om-oss-full-about h2 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ffl-om-oss-full-section-text {
  color: var(--color-text-light);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.ffl-om-oss-full-about-content .ffl-om-oss-full-section-text:last-of-type {
  margin-bottom: 40px;
  font-weight: 600;
  color: var(--color-text);
}

.ffl-om-oss-full-value-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ffl-om-oss-full-value-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(8, 147, 166, 0.08);
  border-radius: 14px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ffl-om-oss-full-value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.3s ease;
  z-index: 0;
}

.ffl-om-oss-full-value-item:hover {
  background: rgba(8, 147, 166, 0.12);
  border-color: rgba(8, 147, 166, 0.2);
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(8, 147, 166, 0.15);
}

.ffl-om-oss-full-value-item:hover::before {
  width: 4px;
}

.ffl-om-oss-full-value-item:hover .ffl-om-oss-full-value-check {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(8, 147, 166, 0.3);
}

.ffl-om-oss-full-value-check {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(8, 147, 166, 0.2);
}

.ffl-om-oss-full-value-check svg {
  width: 16px;
  height: 16px;
  color: white;
}

.ffl-om-oss-full-value-text {
  font-weight: 500;
  color: var(--color-text);
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}

/* Testimonials Section */
.ffl-om-oss-full-testimonials {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
}

.ffl-om-oss-full-testimonials::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.ffl-om-oss-full-testimonials::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}

.ffl-om-oss-full-testimonials-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.ffl-om-oss-full-testimonials-header .ffl-om-oss-full-section-label {
  color: rgba(255,255,255,0.8);
}

.ffl-om-oss-full-testimonials-header h2 {
  color: white;
  font-size: 2.5rem;
}

.ffl-om-oss-full-testimonials-header p {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto;
}

.ffl-om-oss-full-testimonials-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  text-decoration: none;
  margin-top: 16px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-testimonials-link:hover {
  color: white;
  gap: 16px;
}

.ffl-om-oss-full-testimonials-link svg {
  width: 20px;
  height: 20px;
}

.ffl-om-oss-full-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ffl-om-oss-full-testimonial-card {
  background: var(--color-background);
  border-radius: 24px;
  padding: 36px;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}

.ffl-om-oss-full-testimonial-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ffl-om-oss-full-testimonial-stars {
  display: flex;
  gap: 4px;
}

.ffl-om-oss-full-testimonial-stars svg {
  width: 22px;
  height: 22px;
  color: #d4a853;
  fill: #d4a853;
}

.ffl-om-oss-full-google-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.ffl-om-oss-full-google-logo svg {
  width: 24px;
  height: 24px;
}

.ffl-om-oss-full-testimonial-text {
  color: var(--color-text-light);
  font-size: 1.05rem;
  margin-bottom: 28px;
  font-style: italic;
  line-height: 1.7;
}

.ffl-om-oss-full-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ffl-om-oss-full-author-avatar {
  width: 52px;
  height: 52px;
  background: rgba(8, 147, 166, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-om-oss-full-author-avatar svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}

.ffl-om-oss-full-author-info strong {
  display: block;
  color: var(--color-text);
  font-size: 1rem;
}

.ffl-om-oss-full-author-info span {
  color: var(--color-text-light);
  font-size: 0.85rem;
}

.ffl-om-oss-full-trust-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid rgba(255,255,255,0.15);
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-om-oss-full-trust-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.9;
  transition: all 0.3s ease;
  text-align: center;
}

.ffl-om-oss-full-trust-logo:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.ffl-om-oss-full-trust-logo-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-om-oss-full-trust-logo-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.ffl-om-oss-full-trust-logo span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  line-height: 1.3;
}

/* Process Section */
.ffl-om-oss-full-process {
  padding: 100px 80px;
  background: var(--color-background-light);
}

.ffl-om-oss-full-process-container {
  max-width: 1200px;
  margin: 0 auto;
}

.ffl-om-oss-full-process-header {
  text-align: center;
  margin-bottom: 60px;
}

.ffl-om-oss-full-process-header h2 {
  font-size: 2.3rem;
}

.ffl-om-oss-full-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.ffl-om-oss-full-process-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: rgba(8, 147, 166, 0.12);
  z-index: 0;
}

.ffl-om-oss-full-step {
  text-align: center;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.ffl-om-oss-full-step-number {
  width: 80px;
  height: 80px;
  background: var(--color-background);
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 auto 24px;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-step:hover .ffl-om-oss-full-step-number {
  background: var(--color-primary);
  color: white;
  transform: scale(1.1);
}

.ffl-om-oss-full-step h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.ffl-om-oss-full-step p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ffl-om-oss-full-service-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ffl-om-oss-full-service-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: var(--color-background);
  border-radius: 20px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
  transition: all 0.3s ease;
}

.ffl-om-oss-full-service-link:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(8, 147, 166, 0.15);
}

.ffl-om-oss-full-service-link:hover .ffl-om-oss-full-service-icon {
  background: rgba(255,255,255,0.2);
}

.ffl-om-oss-full-service-link:hover .ffl-om-oss-full-service-icon svg {
  color: white;
}

.ffl-om-oss-full-service-icon {
  width: 56px;
  height: 56px;
  background: rgba(8, 147, 166, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-service-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  transition: all 0.3s ease;
}

.ffl-om-oss-full-service-text {
  font-weight: 600;
  font-size: 1.05rem;
}

.ffl-om-oss-full-service-arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.ffl-om-oss-full-service-link:hover .ffl-om-oss-full-service-arrow {
  transform: translateX(4px);
}

.ffl-om-oss-full-extra-service-link {
  text-align: center;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(8, 147, 166, 0.12);
}

.ffl-om-oss-full-extra-service-link span {
  display: block;
  color: var(--color-text-light);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.ffl-om-oss-full-extra-service-link .ffl-om-oss-full-cta-link {
  justify-content: center;
  margin-top: 0;
  padding: 8px 0;
}

.ffl-om-oss-full-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: 32px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-cta-link:hover {
  gap: 16px;
}

.ffl-om-oss-full-cta-link svg {
  width: 20px;
  height: 20px;
}

/* Areas Section */
.ffl-om-oss-full-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 550px;
}

.ffl-om-oss-full-areas-content {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-background);
}

.ffl-om-oss-full-area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.ffl-om-oss-full-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--color-background-light);
  border: 2px solid rgba(8, 147, 166, 0.12);
  border-radius: 50px;
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.3s ease;
  text-decoration: none;
}

.ffl-om-oss-full-area-tag:hover {
  border-color: var(--color-primary);
  background: rgba(8, 147, 166, 0.08);
}

.ffl-om-oss-full-area-tag-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.ffl-om-oss-full-area-tag-link:hover svg {
  color: white;
}

.ffl-om-oss-full-area-tag svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.ffl-om-oss-full-area-extra-text {
  margin-top: 24px;
  margin-bottom: 0;
}

.ffl-om-oss-full-areas-map {
  background: linear-gradient(145deg, var(--color-text) 0%, #2a3b4c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  padding: 0;
  min-height: 450px;
  overflow: hidden;
}

.ffl-om-oss-full-areas-map.has-map {
  display: block;
}

.ffl-om-oss-full-areas-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  display: block;
}

.ffl-om-oss-full-areas-map .ffl-om-oss-full-image-placeholder-icon {
  background: rgba(255,255,255,0.1);
}

.ffl-om-oss-full-areas-map .ffl-om-oss-full-image-placeholder-icon svg {
  color: var(--color-accent);
}

.ffl-om-oss-full-areas-map .ffl-om-oss-full-image-placeholder-text {
  color: white;
}

.ffl-om-oss-full-areas-map .ffl-om-oss-full-image-placeholder-hint {
  color: rgba(255,255,255,0.6);
}

/* Contact Section */
.ffl-om-oss-full-contact {
  position: relative;
  padding: 120px 80px;
  background: linear-gradient(135deg, var(--color-background-light) 50%, var(--color-primary) 50%);
  min-height: 500px;
}

.ffl-om-oss-full-contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--color-background);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.15);
}

.ffl-om-oss-full-contact-content {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ffl-om-oss-full-contact-content h2 {
  font-size: 2rem;
}

.ffl-om-oss-full-contact-cta-link {
  margin-bottom: 24px;
}

.ffl-om-oss-full-contact-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.ffl-om-oss-full-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-contact-btn.primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 8px 30px rgba(8, 147, 166, 0.3);
}

.ffl-om-oss-full-contact-btn.primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(8, 147, 166, 0.4);
}

.ffl-om-oss-full-contact-btn.secondary {
  background: var(--color-background-light);
  color: var(--color-text);
  border: 2px solid rgba(8, 147, 166, 0.12);
}

.ffl-om-oss-full-contact-btn.secondary:hover {
  background: rgba(8, 147, 166, 0.08);
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

.ffl-om-oss-full-contact-btn svg {
  width: 22px;
  height: 22px;
}

.ffl-om-oss-full-contact-image {
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.ffl-om-oss-full-contact-image.has-image {
  display: block;
  padding: 0;
}

.ffl-om-oss-full-contact-image::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  z-index: 2;
  pointer-events: none;
}

.ffl-om-oss-full-contact-image img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
}

.ffl-om-oss-full-contact-image .ffl-om-oss-full-image-placeholder-icon {
  background: rgba(255,255,255,0.15);
  position: relative;
  z-index: 1;
}

.ffl-om-oss-full-contact-image .ffl-om-oss-full-image-placeholder-icon svg {
  color: white;
}

.ffl-om-oss-full-contact-image .ffl-om-oss-full-image-placeholder-text {
  color: white;
  position: relative;
  z-index: 1;
}

.ffl-om-oss-full-contact-image .ffl-om-oss-full-image-placeholder-hint {
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 1;
}

/* FAQ Section */
.ffl-om-oss-full-faq {
  padding: 100px 80px;
  background: var(--color-background-light);
}

.ffl-om-oss-full-faq-container {
  max-width: 1100px;
  margin: 0 auto;
}

.ffl-om-oss-full-faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.ffl-om-oss-full-faq-header .ffl-om-oss-full-section-label {
  justify-content: center;
}

.ffl-om-oss-full-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ffl-om-oss-full-faq-item {
  background: var(--color-background);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
  border: 1px solid rgba(8, 147, 166, 0.12);
  transition: all 0.3s ease;
}

.ffl-om-oss-full-faq-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 40px rgba(8, 147, 166, 0.12);
}

.ffl-om-oss-full-faq-item h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.4;
}

.ffl-om-oss-full-faq-item p {
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.7;
}

.ffl-om-oss-full-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: 16px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.ffl-om-oss-full-faq-link:hover {
  gap: 12px;
}

.ffl-om-oss-full-faq-link svg {
  width: 18px;
  height: 18px;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .ffl-om-oss-full-hero {
    padding: 100px 60px 80px;
    gap: 60px;
  }

  .ffl-om-oss-full-testimonials,
  .ffl-om-oss-full-process {
    padding: 80px 60px;
  }

  .ffl-om-oss-full-about-content,
  .ffl-om-oss-full-areas-content {
    padding: 60px;
  }

  .ffl-om-oss-full-contact {
    padding: 100px 60px;
  }

  .ffl-om-oss-full-faq {
    padding: 80px 60px;
  }

  .ffl-om-oss-full-faq-grid {
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .ffl-om-oss-full-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
    padding: 100px 40px 60px;
  }

  .ffl-om-oss-full-hero::before {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
  }

  .ffl-om-oss-full-hero-content {
    max-width: 100%;
  }

  .ffl-om-oss-full-hero-cta {
    margin: 0 auto;
  }

  .ffl-om-oss-full-hero-float-badge.reviews { 
    left: 20px; 
    bottom: 40px; 
    padding: 12px 16px;
  }
  .ffl-om-oss-full-hero-float-badge.experience { 
    right: 20px; 
    top: 40px; 
    padding: 12px 16px;
  }
  
  .ffl-om-oss-full-hero-image-main {
    box-shadow: 0 12px 40px rgba(8, 147, 166, 0.12);
  }

  .ffl-om-oss-full-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ffl-om-oss-full-stat-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .ffl-om-oss-full-stat-item:nth-child(2) {
    border-right: none;
  }

  .ffl-om-oss-full-about,
  .ffl-om-oss-full-areas {
    grid-template-columns: 1fr;
  }

  .ffl-om-oss-full-about-image,
  .ffl-om-oss-full-areas-map {
    min-height: 350px;
    order: -1;
  }

  .ffl-om-oss-full-testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .ffl-om-oss-full-testimonials-header {
    padding: 0 20px;
  }

  .ffl-om-oss-full-process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .ffl-om-oss-full-process-steps::before {
    display: none;
  }

  .ffl-om-oss-full-service-links {
    grid-template-columns: 1fr;
  }

  .ffl-om-oss-full-trust-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 20px;
    max-width: 100%;
  }

  .ffl-om-oss-full-contact {
    background: var(--color-background-light);
    padding: 80px 40px;
  }

  .ffl-om-oss-full-contact-container {
    grid-template-columns: 1fr;
  }

  .ffl-om-oss-full-contact-image {
    min-height: 280px;
    order: -1;
  }

  .ffl-om-oss-full-faq-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

  .ffl-om-oss-full-faq {
    padding: 80px 40px;
  }

  .ffl-om-oss-full-area-tags {
    justify-content: center;
  }

  .ffl-om-oss-full-areas-content {
    text-align: center;
  }

  .ffl-om-oss-full-areas-content .ffl-om-oss-full-section-label {
    justify-content: center;
  }

  .ffl-om-oss-full-areas-content .ffl-om-oss-full-cta-link {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ffl-om-oss-full-hero {
    padding: 90px 20px 50px;
    gap: 40px;
  }

  .ffl-om-oss-full-hero-badge {
    padding: 8px 16px;
    font-size: 0.8rem;
    margin-bottom: 20px;
  }

  .ffl-om-oss-full-hero-image-main {
    height: 320px;
    border-radius: 20px;
  }

  .ffl-om-oss-full-hero-float-badge {
    padding: 10px 14px;
    border-radius: 12px;
  }

  .ffl-om-oss-full-hero-float-badge.reviews { 
    left: 10px; 
    bottom: 20px; 
  }
  
  .ffl-om-oss-full-hero-float-badge.experience { 
    right: 10px; 
    top: 20px; 
  }

  .ffl-om-oss-full-float-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .ffl-om-oss-full-float-icon svg {
    width: 18px;
    height: 18px;
  }

  .ffl-om-oss-full-float-content strong {
    font-size: 0.95rem;
  }

  .ffl-om-oss-full-float-content span {
    font-size: 0.7rem;
  }

  .ffl-om-oss-full-hero h1 {
    font-size: 1.75rem;
    margin-bottom: 16px;
  }

  .ffl-om-oss-full-hero h2 {
    font-size: 1.5rem;
  }

  .ffl-om-oss-full-hero-text {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .ffl-om-oss-full-hero-cta {
    padding: 16px 24px;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
  }

  .ffl-om-oss-full-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ffl-om-oss-full-stat-item {
    padding: 24px 16px;
  }

  .ffl-om-oss-full-stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.1);
  }

  .ffl-om-oss-full-stat-item:nth-child(even) {
    border-right: none;
  }

  .ffl-om-oss-full-stat-item:nth-child(3),
  .ffl-om-oss-full-stat-item:nth-child(4) {
    border-bottom: none;
  }

  .ffl-om-oss-full-stat-number {
    font-size: 2rem;
  }

  .ffl-om-oss-full-stat-label {
    font-size: 0.8rem;
  }

  .ffl-om-oss-full-about-image {
    min-height: 280px;
    padding: 40px 20px;
  }

  .ffl-om-oss-full-about-image::before {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .ffl-om-oss-full-team-avatars {
    margin-bottom: 16px;
  }

  .ffl-om-oss-full-team-avatar {
    width: 56px;
    height: 56px;
    margin-left: -14px;
  }

  .ffl-om-oss-full-team-avatar svg {
    width: 28px;
    height: 28px;
  }

  .ffl-om-oss-full-about-content,
  .ffl-om-oss-full-areas-content,
  .ffl-om-oss-full-contact-content {
    padding: 40px 20px;
  }

  .ffl-om-oss-full-section-label {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .ffl-om-oss-full-section-text {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .ffl-om-oss-full-value-list {
    gap: 12px;
  }

  .ffl-om-oss-full-value-item {
    padding: 16px 18px;
    border-radius: 12px;
  }

  .ffl-om-oss-full-value-check {
    width: 28px;
    height: 28px;
  }

  .ffl-om-oss-full-value-check svg {
    width: 14px;
    height: 14px;
  }

  .ffl-om-oss-full-value-text {
    font-size: 0.95rem;
  }

  .ffl-om-oss-full-testimonials {
    padding: 60px 20px;
  }

  .ffl-om-oss-full-testimonials-header {
    margin-bottom: 40px;
    padding: 0;
  }

  .ffl-om-oss-full-testimonials-header h2 {
    font-size: 1.5rem;
  }

  .ffl-om-oss-full-testimonials-header p {
    font-size: 0.95rem;
  }

  .ffl-om-oss-full-testimonials-link {
    font-size: 0.9rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ffl-om-oss-full-testimonials-grid {
    gap: 20px;
    max-width: 100%;
  }

  .ffl-om-oss-full-testimonial-card {
    padding: 28px 24px;
    border-radius: 18px;
  }

  .ffl-om-oss-full-testimonial-stars svg {
    width: 18px;
    height: 18px;
  }

  .ffl-om-oss-full-testimonial-text {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .ffl-om-oss-full-author-avatar {
    width: 44px;
    height: 44px;
  }

  .ffl-om-oss-full-author-avatar svg {
    width: 22px;
    height: 22px;
  }

  .ffl-om-oss-full-author-info strong {
    font-size: 0.9rem;
  }

  .ffl-om-oss-full-author-info span {
    font-size: 0.8rem;
  }

  .ffl-om-oss-full-trust-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 32px 16px;
    margin-top: 40px;
    padding-top: 40px;
  }

  .ffl-om-oss-full-trust-logo {
    gap: 8px;
  }

  .ffl-om-oss-full-trust-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .ffl-om-oss-full-trust-logo-icon svg {
    width: 24px;
    height: 24px;
  }

  .ffl-om-oss-full-trust-logo span {
    font-size: 0.7rem;
  }

  .ffl-om-oss-full-process {
    padding: 60px 20px;
  }

  .ffl-om-oss-full-process-header {
    margin-bottom: 40px;
  }

  .ffl-om-oss-full-process-header h2 {
    font-size: 1.5rem;
  }

  .ffl-om-oss-full-process-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ffl-om-oss-full-step {
    padding: 0 10px;
  }

  .ffl-om-oss-full-step-number {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
    margin-bottom: 16px;
  }

  .ffl-om-oss-full-step h3 {
    font-size: 1.05rem;
  }

  .ffl-om-oss-full-step p {
    font-size: 0.9rem;
  }

  .ffl-om-oss-full-service-links {
    gap: 16px;
    margin-top: 40px;
  }

  .ffl-om-oss-full-service-link {
    padding: 20px;
    border-radius: 16px;
    flex-wrap: wrap;
  }

  .ffl-om-oss-full-service-icon {
    width: 48px;
    height: 48px;
  }

  .ffl-om-oss-full-service-icon svg {
    width: 24px;
    height: 24px;
  }

  .ffl-om-oss-full-service-text {
    font-size: 0.95rem;
    flex: 1;
    min-width: 150px;
  }

  .ffl-om-oss-full-service-arrow {
    display: none;
  }

  .ffl-om-oss-full-extra-service-link {
    margin-top: 24px;
    padding-top: 24px;
  }

  .ffl-om-oss-full-extra-service-link span {
    font-size: 0.9rem;
  }

  .ffl-om-oss-full-extra-service-link .ffl-om-oss-full-cta-link {
    font-size: 0.9rem;
    flex-wrap: wrap;
  }

  .ffl-om-oss-full-areas-map {
    min-height: 250px;
    padding: 40px 20px;
  }

  .ffl-om-oss-full-area-tags {
    gap: 10px;
  }

  .ffl-om-oss-full-area-tag {
    padding: 12px 16px;
    font-size: 0.9rem;
    border-radius: 40px;
  }

  .ffl-om-oss-full-area-tag svg {
    width: 16px;
    height: 16px;
  }

  .ffl-om-oss-full-area-extra-text {
    font-size: 0.95rem;
    margin-top: 20px;
  }

  .ffl-om-oss-full-cta-link {
    font-size: 0.95rem;
    margin-top: 24px;
    flex-wrap: wrap;
  }

  .ffl-om-oss-full-contact {
    padding: 50px 20px;
    background: var(--color-background-light);
  }

  .ffl-om-oss-full-contact-container {
    border-radius: 24px;
  }

  .ffl-om-oss-full-contact-image {
    min-height: 220px;
    border-radius: 24px 24px 0 0;
  }

  .ffl-om-oss-full-contact-content h2 {
    font-size: 1.5rem;
  }

  .ffl-om-oss-full-contact-cta-link {
    font-size: 0.9rem;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ffl-om-oss-full-contact-options {
    margin-top: 24px;
    gap: 12px;
  }

  .ffl-om-oss-full-contact-btn {
    padding: 16px 20px;
    font-size: 0.95rem;
    border-radius: 14px;
    width: 100%;
    justify-content: center;
  }

  .ffl-om-oss-full-contact-btn svg {
    width: 18px;
    height: 18px;
  }

  .ffl-om-oss-full-faq {
    padding: 60px 20px;
  }

  .ffl-om-oss-full-faq-header {
    margin-bottom: 40px;
  }

  .ffl-om-oss-full-faq-header h2 {
    font-size: 1.5rem;
  }

  .ffl-om-oss-full-faq-grid {
    gap: 16px;
    max-width: 100%;
  }

  .ffl-om-oss-full-faq-item {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .ffl-om-oss-full-faq-item:hover {
    transform: none;
  }

  .ffl-om-oss-full-faq-item h3 {
    font-size: 1.05rem;
    margin-bottom: 12px;
  }

  .ffl-om-oss-full-faq-item p {
    font-size: 0.95rem;
  }

  .ffl-om-oss-full-faq-link {
    font-size: 0.9rem;
    margin-top: 12px;
  }

  .ffl-om-oss-full-image-placeholder-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .ffl-om-oss-full-image-placeholder-icon svg {
    width: 30px;
    height: 30px;
  }

  .ffl-om-oss-full-image-placeholder-text {
    font-size: 0.9rem;
  }

  .ffl-om-oss-full-image-placeholder-hint {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .ffl-om-oss-full-hero {
    padding: 80px 16px 40px;
  }

  .ffl-om-oss-full-hero h1 {
    font-size: 1.5rem;
  }

  .ffl-om-oss-full-hero h2 {
    font-size: 1.35rem;
  }

  .ffl-om-oss-full-hero-image-main {
    height: 280px;
  }

  .ffl-om-oss-full-hero-float-badge {
    padding: 8px 12px;
  }

  .ffl-om-oss-full-float-icon {
    width: 32px;
    height: 32px;
  }

  .ffl-om-oss-full-float-content strong {
    font-size: 0.85rem;
  }

  .ffl-om-oss-full-stat-number {
    font-size: 1.75rem;
  }

  .ffl-om-oss-full-stat-label {
    font-size: 0.75rem;
  }

  .ffl-om-oss-full-about-content,
  .ffl-om-oss-full-areas-content,
  .ffl-om-oss-full-contact-content {
    padding: 32px 16px;
  }

  .ffl-om-oss-full-testimonials,
  .ffl-om-oss-full-process,
  .ffl-om-oss-full-faq {
    padding: 50px 16px;
  }

  .ffl-om-oss-full-testimonial-card {
    padding: 24px 20px;
  }

  .ffl-om-oss-full-trust-logos {
    gap: 8px;
    padding: 24px 12px;
  }

  .ffl-om-oss-full-trust-logo {
    gap: 6px;
  }
  
  .ffl-om-oss-full-trust-logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .ffl-om-oss-full-trust-logo-icon svg {
    width: 20px;
    height: 20px;
  }

  .ffl-om-oss-full-trust-logo span {
    font-size: 0.6rem;
  }

  .ffl-om-oss-full-area-tag {
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .ffl-om-oss-full-contact {
    padding: 40px 16px;
  }

  .ffl-om-oss-full-faq-item {
    padding: 20px 16px;
  }
}

/* ==========================================
   KONTAKTA OSS FULL WIDGET
   ========================================== */

/* Hero Section */
.ffl-kontakta-oss-full-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 120px 80px 100px;
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  min-height: 70vh;
}

.ffl-kontakta-oss-full-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(8, 147, 166, 0.08) 0%, transparent 70%);
  z-index: -1;
}

.ffl-kontakta-oss-full-hero-content {
  max-width: 580px;
}

.ffl-kontakta-oss-full-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0892A5;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 28px;
}

.ffl-kontakta-oss-full-hero-badge svg {
  width: 18px;
  height: 18px;
}

.ffl-kontakta-oss-full-hero h1 {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 600;
  color: #1F2933;
  margin-bottom: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ffl-kontakta-oss-full-hero h1 span {
  color: #0892A5;
}

.ffl-kontakta-oss-full-hero-text {
  font-size: 1.2rem;
  color: #666666;
  margin-bottom: 40px;
  line-height: 1.7;
}

.ffl-kontakta-oss-full-hero-visual {
  position: relative;
  height: 520px;
  background: linear-gradient(145deg, #e8f4f6 0%, #d0eaef 100%);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 2px dashed rgba(8, 147, 166, 0.12);
  box-shadow: 0 8px 30px rgba(8, 147, 166, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
}

.ffl-kontakta-oss-full-hero-visual.has-image {
  display: block;
  padding: 0;
  border: none;
}

.ffl-kontakta-oss-full-hero-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(8, 147, 166, 0.2);
}

.ffl-kontakta-oss-full-hero-visual img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
  z-index: 1;
  display: block;
}

.ffl-kontakta-oss-full-image-placeholder-icon {
  width: 80px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
  position: relative;
  z-index: 2;
}

.ffl-kontakta-oss-full-image-placeholder-icon svg {
  width: 40px;
  height: 40px;
  color: #0892A5;
}

.ffl-kontakta-oss-full-image-placeholder-text {
  font-weight: 600;
  color: #0892A5;
  font-size: 1rem;
  position: relative;
  z-index: 2;
}

.ffl-kontakta-oss-full-image-placeholder-hint {
  font-size: 0.85rem;
  color: #666666;
  position: relative;
  z-index: 2;
}

/* Section Styles */
.ffl-kontakta-oss-full-section {
  padding: 100px 80px;
  max-width: 1500px;
  margin: 0 auto;
}

.ffl-kontakta-oss-full-section-alt {
  background: #F9F9F9;
}

.ffl-kontakta-oss-full-section-content {
  max-width: 100%;
}

.ffl-kontakta-oss-full-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0892A5;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.ffl-kontakta-oss-full-section-label svg {
  width: 20px;
  height: 20px;
}

.ffl-kontakta-oss-full-section h2 {
  font-size: 2.2rem;
  font-weight: 600;
  color: #1F2933;
  margin-bottom: 32px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ffl-kontakta-oss-full-section-intro {
  color: #666666;
  font-size: 1.1rem;
  margin-bottom: 40px;
  line-height: 1.7;
}

/* Contact Methods */
.ffl-kontakta-oss-full-contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  align-items: start;
}

.ffl-kontakta-oss-full-contact-method {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Formulär-wrapper (utan container) */
.ffl-kontakta-oss-full-form-wrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.ffl-kontakta-oss-full-form-header {
  margin-bottom: 20px;
}

.ffl-kontakta-oss-full-form-header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0892A5, #0CA4A5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 2px 12px rgba(8, 147, 166, 0.08);
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-form-header-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.ffl-kontakta-oss-full-form-wrapper h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1F2933;
  margin-bottom: 12px;
}

.ffl-kontakta-oss-full-form-header-info {
  color: #666666;
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.ffl-kontakta-oss-full-contact-method-header {
  text-align: center;
  margin-bottom: 20px;
}

/* Ta bort hover-effekter för kontaktmetod-kort (ingen container längre) */

.ffl-kontakta-oss-full-contact-method-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0892A5, #0CA4A5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 2px 12px rgba(8, 147, 166, 0.08);
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-contact-method-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}


.ffl-kontakta-oss-full-contact-method-icon:hover {
  transform: scale(1.05);
}

.ffl-kontakta-oss-full-contact-method h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1F2933;
  margin-bottom: 12px;
}

.ffl-kontakta-oss-full-contact-method-info {
  color: #666666;
  font-size: 0.95rem;
  margin-bottom: 20px;
  min-height: 20px;
  line-height: 1.6;
}

.ffl-kontakta-oss-full-contact-method-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0892A5;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  padding: 12px 24px;
  border-radius: 50px;
  background: rgba(8, 147, 166, 0.08);
}

.ffl-kontakta-oss-full-contact-method-cta:hover {
  background: #0892A5;
  color: white;
  gap: 16px;
  transform: translateX(4px);
}

.ffl-kontakta-oss-full-contact-method-cta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-contact-method-cta:hover svg {
  transform: translateX(4px);
}

.ffl-kontakta-oss-full-contact-form {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}

/* Ta bort styling från plugin:ets wrapper-element i kontakta-oss-widget */
.ffl-kontakta-oss-full-contact-form .ff-wrapper,
.ffl-kontakta-oss-full-form-section .ff-wrapper {
  padding: 0 !important;
  background-color: transparent !important;
  min-height: auto !important;
  height: auto !important;
}

.ffl-kontakta-oss-full-contact-form .ff-container,
.ffl-kontakta-oss-full-form-section .ff-container {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ffl-kontakta-oss-full-contact-form #flyttfixarn-root,
.ffl-kontakta-oss-full-form-section #flyttfixarn-root {
  padding: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* Ta bort bakgrund från alla nested element inuti formuläret */
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root > *,
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root > * > *,
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root > * > * > *,
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root > * > * > * > * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ta bort bakgrund från alla div-element inuti formuläret */
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root div,
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root div div,
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root div div div {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ta bort min-height och height från nested element */
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root > *:first-child {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  min-height: auto !important;
  height: auto !important;
}

/* Ta bort dubbel bakgrund från React-appens huvudcontainer */
.ffl-kontakta-oss-full-contact-form #flyttfixarn-root > *:first-child > div:first-child {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: auto !important;
  height: auto !important;
}

.ffl-kontakta-oss-full-contact-form *,
.ffl-kontakta-oss-full-contact-form *::before,
.ffl-kontakta-oss-full-contact-form *::after,
.ffl-kontakta-oss-full-form-section *,
.ffl-kontakta-oss-full-form-section *::before,
.ffl-kontakta-oss-full-form-section *::after {
  box-sizing: border-box;
}

/* Opening Hours */
.ffl-kontakta-oss-full-opening-hours-card {
  background: #FFFFFF;
  border: 2px solid rgba(8, 147, 166, 0.12);
  border-radius: 24px;
  padding: 48px;
  margin-top: 32px;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
}

.ffl-kontakta-oss-full-hours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ffl-kontakta-oss-full-hours-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #F9F9F9;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.ffl-kontakta-oss-full-hours-item:hover {
  background: rgba(8, 147, 166, 0.05);
  transform: translateY(-2px);
}

.ffl-kontakta-oss-full-hours-day {
  font-weight: 600;
  color: #1F2933;
  font-size: 1.1rem;
}

.ffl-kontakta-oss-full-hours-time {
  color: #666666;
  font-size: 1rem;
}

/* Office Location */
.ffl-kontakta-oss-full-office-location-card {
  background: #FFFFFF;
  border: 2px solid rgba(8, 147, 166, 0.12);
  border-radius: 24px;
  padding: 48px;
  margin-top: 32px;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
}

.ffl-kontakta-oss-full-office-address {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(8, 147, 166, 0.08) 0%, rgba(12, 164, 165, 0.05) 100%);
  border-radius: 16px;
  margin-bottom: 32px;
  border: 2px solid rgba(8, 147, 166, 0.12);
}

.ffl-kontakta-oss-full-office-address-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0892A5, #0CA4A5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ffl-kontakta-oss-full-office-address-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.ffl-kontakta-oss-full-office-address span {
  font-size: 1.15rem;
  color: #1F2933;
  font-weight: 500;
}

.ffl-kontakta-oss-full-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0892A5;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 50px;
  background: rgba(8, 147, 166, 0.08);
  transition: all 0.3s ease;
}

.ffl-kontakta-oss-full-cta-link:hover {
  background: #0892A5;
  color: white;
  gap: 16px;
  transform: translateX(4px);
}

.ffl-kontakta-oss-full-cta-link svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-office-map {
  margin-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
  border: 2px solid rgba(8, 147, 166, 0.12);
}

.ffl-kontakta-oss-full-office-map iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  .ffl-kontakta-oss-full-office-map {
    margin-top: 24px;
    border-radius: 16px;
  }

  .ffl-kontakta-oss-full-office-map iframe {
    height: 300px;
  }
}

.ffl-kontakta-oss-full-cta-link:hover svg {
  transform: translateX(4px);
}

/* Service Cards */
.ffl-kontakta-oss-full-service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.ffl-kontakta-oss-full-service-card {
  background: #FFFFFF;
  border: 2px solid rgba(8, 147, 166, 0.12);
  border-radius: 24px;
  padding: 40px 32px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.ffl-kontakta-oss-full-service-card h3 {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1F2933;
  margin-bottom: 16px;
  line-height: 1.3;
  flex-grow: 0;
}

.ffl-kontakta-oss-full-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0892A5, #0CA4A5);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-service-card:hover {
  border-color: #0892A5;
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(8, 147, 166, 0.2);
}

.ffl-kontakta-oss-full-service-card:hover::before {
  transform: scaleX(1);
}

.ffl-kontakta-oss-full-service-card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0892A5, #0CA4A5);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-service-card:hover .ffl-kontakta-oss-full-service-card-icon {
  transform: scale(1.1) rotate(5deg);
}

.ffl-kontakta-oss-full-service-card-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.ffl-kontakta-oss-full-service-card-link-wrapper {
  margin-top: auto;
  padding-top: 8px;
  height: 48px;
  display: flex;
  align-items: center;
}

.ffl-kontakta-oss-full-service-card-long-text .ffl-kontakta-oss-full-service-card-link-wrapper {
  height: auto;
  min-height: 48px;
  align-items: flex-start;
}

.ffl-kontakta-oss-full-service-card a {
  color: #0892A5;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  line-height: 1.4;
  width: 100%;
}

.ffl-kontakta-oss-full-service-card-long-text a {
  align-items: flex-start;
}

.ffl-kontakta-oss-full-service-card a span {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.ffl-kontakta-oss-full-service-card-long-text a span {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ffl-kontakta-oss-full-service-card a svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-service-card-long-text a svg {
  margin-top: 0;
}

.ffl-kontakta-oss-full-service-card a:hover {
  gap: 16px;
}

.ffl-kontakta-oss-full-service-card a:hover svg {
  transform: translateX(4px);
}

/* FAQ */
.ffl-kontakta-oss-full-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.ffl-kontakta-oss-full-faq-item {
  background: #FFFFFF;
  border: 2px solid rgba(8, 147, 166, 0.12);
  border-radius: 20px;
  padding: 32px;
  transition: all 0.3s ease;
  position: relative;
}

.ffl-kontakta-oss-full-faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0892A5, #0CA4A5);
  border-radius: 0 4px 4px 0;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-faq-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1F2933;
  margin-bottom: 12px;
}

.ffl-kontakta-oss-full-faq-item p {
  color: #666666;
  line-height: 1.7;
  margin-bottom: 0;
}

.ffl-kontakta-oss-full-faq-item .ffl-kontakta-oss-full-cta-link {
  margin-top: 16px;
  font-size: 0.95rem;
  padding: 10px 20px;
}

/* Final Form Section */
.ffl-kontakta-oss-full-form-section {
  background: #FFFFFF;
  border: 2px solid rgba(8, 147, 166, 0.12);
  border-radius: 24px;
  padding: 60px;
  margin-top: 40px;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
}

.ffl-kontakta-oss-full-trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 2px solid rgba(8, 147, 166, 0.12);
}

.ffl-kontakta-oss-full-trust-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #F9F9F9;
  border-radius: 16px;
}

.ffl-kontakta-oss-full-trust-badge-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0892A5, #0CA4A5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(8, 147, 166, 0.08);
}

.ffl-kontakta-oss-full-trust-badge-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.ffl-kontakta-oss-full-trust-badge-text {
  font-weight: 500;
  color: #1F2933;
  font-size: 1rem;
}

.ffl-kontakta-oss-full-final-cta {
  background: linear-gradient(135deg, #0892A5 0%, #067c91 100%);
  border-radius: 24px;
  padding: 48px;
  text-align: center;
  margin-top: 48px;
  color: white;
  box-shadow: 0 8px 30px rgba(8, 147, 166, 0.15);
}

.ffl-kontakta-oss-full-final-cta p {
  font-size: 1.2rem;
  margin-bottom: 24px;
  font-weight: 500;
}

.ffl-kontakta-oss-full-final-cta a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: white;
  color: #0892A5;
  padding: 18px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ffl-kontakta-oss-full-final-cta a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  gap: 16px;
}

.ffl-kontakta-oss-full-final-cta a svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.ffl-kontakta-oss-full-final-cta a:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1200px) {
  .ffl-kontakta-oss-full-hero,
  .ffl-kontakta-oss-full-section {
    padding: 80px 60px;
  }
}

@media (max-width: 1024px) {
  .ffl-kontakta-oss-full-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 100px 40px 60px;
  }

  .ffl-kontakta-oss-full-hero-content {
    max-width: 100%;
  }

  .ffl-kontakta-oss-full-hero-visual {
    height: 400px;
  }

  .ffl-kontakta-oss-full-contact-methods {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ffl-kontakta-oss-full-contact-method {
    padding: 0;
  }

  .ffl-kontakta-oss-full-form-header-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }

  .ffl-kontakta-oss-full-form-header-icon svg {
    width: 20px;
    height: 20px;
  }

  .ffl-kontakta-oss-full-contact-method-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }

  .ffl-kontakta-oss-full-contact-method-icon svg {
    width: 20px;
    height: 20px;
  }

  .ffl-kontakta-oss-full-contact-method h3,
  .ffl-kontakta-oss-full-form-wrapper h3 {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  .ffl-kontakta-oss-full-contact-method-info,
  .ffl-kontakta-oss-full-form-header-info {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }

  .ffl-kontakta-oss-full-contact-method-header,
  .ffl-kontakta-oss-full-form-header {
    margin-bottom: 16px;
  }

  .ffl-kontakta-oss-full-contact-method-cta {
    padding: 10px 20px;
    font-size: 0.9rem;
    gap: 6px;
  }

  .ffl-kontakta-oss-full-contact-form {
    margin-top: 12px;
  }

  .ffl-kontakta-oss-full-service-cards {
    grid-template-columns: 1fr;
  }

  .ffl-kontakta-oss-full-hours-grid {
    grid-template-columns: 1fr;
  }

  .ffl-kontakta-oss-full-faq-grid {
    grid-template-columns: 1fr;
  }

  .ffl-kontakta-oss-full-trust-badges {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ffl-kontakta-oss-full-hero,
  .ffl-kontakta-oss-full-section {
    padding: 60px 20px;
  }

  .ffl-kontakta-oss-full-section h2 {
    font-size: 1.75rem;
  }

  .ffl-kontakta-oss-full-trust-badges {
    grid-template-columns: 1fr;
  }

  .ffl-kontakta-oss-full-form-section {
    padding: 40px 24px;
  }

  .ffl-kontakta-oss-full-service-card-link-wrapper {
    height: auto;
    min-height: auto;
  }

  .ffl-kontakta-oss-full-service-card a {
    align-items: flex-start;
  }

  .ffl-kontakta-oss-full-service-card a span {
    display: block;
    overflow: visible;
    white-space: normal;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .ffl-kontakta-oss-full-service-card-long-text a span {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .ffl-kontakta-oss-full-service-card a svg {
    margin-top: 2px;
  }
}

/* ===========================
   OMÅRDEN LISTA WIDGET
   Grid-layout med kort för områdessidor
   Full width design: 2 rader à 3 kort (desktop)
   =========================== */

.ffl-omraden-lista {
  padding: 4rem 1rem;
  background: var(--color-background);
}

.ffl-omraden-lista-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.ffl-omraden-lista-header {
  margin-bottom: 3rem;
  text-align: center;
}

.ffl-omraden-lista-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #0892A5 !important;
  margin-bottom: 1.5rem;
}

.ffl-omraden-lista-intro {
  font-size: 1.125rem;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}

.ffl-omraden-lista-intro p {
  margin-bottom: 1rem;
  color: var(--color-text);
}

.ffl-omraden-lista-intro p:last-child {
  margin-bottom: 0;
}

/* Full width grid: 3 kolumner på desktop, 2 på tablet, 1 på mobil */
.ffl-omraden-lista-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ffl-omraden-lista-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .ffl-omraden-lista-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Kort med gradient-header */
.ffl-omraden-lista-card {
  background: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ffl-omraden-lista-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 12px 32px rgba(8, 146, 165, 0.2);
  transform: translateY(-6px);
}

/* Gradient-header - fixerad höjd för konsistens */
.ffl-omraden-lista-card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 12px rgba(8, 146, 165, 0.2);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-omraden-lista-card-header h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: white !important;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}

/* Content-område - flexbox för balans */
.ffl-omraden-lista-card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 180px;
}

.ffl-omraden-lista-card-text {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  min-height: 60px;
}

.ffl-omraden-lista-card-text p {
  margin-bottom: 0;
  color: var(--color-text);
}

.ffl-omraden-lista-card-text p:last-child {
  margin-bottom: 0;
}

/* CTA-knapp med pil-symbol - positionerad längst ner, centrerad */
.ffl-omraden-lista-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 28px;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: center;
  box-shadow: 0 2px 8px rgba(8, 146, 165, 0.25);
  white-space: nowrap;
}

.ffl-omraden-lista-card-cta:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 16px rgba(8, 146, 165, 0.35);
  transform: translateY(-2px);
  color: white;
}

/* Pil-symbol via CSS (en enda pil) */
.ffl-omraden-lista-card-cta::after {
  content: '→';
  font-size: 1.125rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  display: inline-block;
}

.ffl-omraden-lista-card-cta:hover::after {
  transform: translateX(4px);
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-omraden-lista {
    padding: 3rem 1rem;
  }

  .ffl-omraden-lista-header {
    margin-bottom: 2rem;
  }

  .ffl-omraden-lista-grid {
    gap: 1.5rem;
  }

  .ffl-omraden-lista-card-header {
    padding: 1.5rem 1.5rem;
    min-height: 90px;
  }

  .ffl-omraden-lista-card-content {
    padding: 1.5rem;
    min-height: 160px;
  }

  .ffl-omraden-lista-card-text {
    min-height: 50px;
  }
}

/* ===========================
   POLICY PAGES - Integritetspolicy, Villkor, Cookies
   =========================== */

.ffl-policy-page {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  font-family: var(--font-family);
}

.ffl-policy-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--color-border-light);
}

.ffl-policy-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.ffl-policy-last-updated {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  margin: 0;
}

.ffl-policy-content {
  color: var(--color-text);
  line-height: 1.7;
  font-size: 1rem;
}

.ffl-policy-section {
  margin-bottom: 3rem;
}

.ffl-policy-section h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.ffl-policy-section h2:first-of-type {
  margin-top: 0;
}

.ffl-policy-section h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.ffl-policy-section p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.ffl-policy-section ul,
.ffl-policy-section ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.ffl-policy-section li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.ffl-policy-section a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.ffl-policy-section a:hover {
  color: var(--color-primary-hover);
}

.ffl-policy-section strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Tabell för ändamål/rättslig grund */
.ffl-policy-table-wrapper {
  overflow-x: auto;
  margin: 2rem 0;
}

.ffl-policy-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.ffl-policy-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.ffl-policy-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: white;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ffl-policy-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

.ffl-policy-table tbody tr:last-child td {
  border-bottom: none;
}

.ffl-policy-table tbody tr:nth-child(even) {
  background: var(--color-background-light);
}

.ffl-policy-table tbody tr:hover {
  background: rgba(8, 146, 165, 0.05);
}

/* Kontaktsektion highlight */
.ffl-policy-contact {
  background: var(--color-background-light);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
  margin: 1.5rem 0;
}

.ffl-policy-contact p {
  margin-bottom: 0.5rem;
}

.ffl-policy-contact p:last-child {
  margin-bottom: 0;
}

.ffl-policy-additional-text {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
}

/* Responsiv design */
@media (max-width: 768px) {
  .ffl-policy-page {
    padding: 2rem 1rem;
  }

  .ffl-policy-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }

  .ffl-policy-section {
    margin-bottom: 2.5rem;
  }

  .ffl-policy-section h2 {
    margin-top: 2rem;
    margin-bottom: 1.25rem;
  }

  .ffl-policy-section h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .ffl-policy-table-wrapper {
    margin: 1.5rem -1rem;
  }

  .ffl-policy-table {
    border-radius: 0;
  }

  .ffl-policy-table th,
  .ffl-policy-table td {
    padding: 0.75rem;
    font-size: 0.875rem;
  }

  .ffl-policy-table th {
    font-size: 0.8125rem;
  }

  .ffl-policy-contact {
    padding: 1.25rem;
  }
}