/*----------------------------------------------------------------------------*/
/* Global styles */

@variant dark (&:where(.dark, .dark *));

@custom-variant supports-relative-colors {
  @supports (color: hsl(from white h s l)) {
    @slot;
  }
}


@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200);
  }

  button {
    cursor: pointer;
  }
}

@property --bg-grid-alpha {
  syntax: '*';
  inherits: false;
  initial-value: 100%;
}

@property --angle {
  inherits: true;
  initial-value: 0deg;
  syntax: '<angle>';
}

@keyframes rotate-angle {
  to {
    --angle: 360deg;
  }
}  

@layer utilities {

  /* Gray scale */
  :root,
  html.has-grayscale-Gray {
    --color-gray-50: oklch(0.985 0.002 247.839);
    --color-gray-100: oklch(0.967 0.003 264.542);
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-gray-300: oklch(0.872 0.01 258.338);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.551 0.027 264.364);
    --color-gray-600: oklch(0.446 0.03 256.802);
    --color-gray-700: oklch(0.373 0.034 259.733);
    --color-gray-800: oklch(0.278 0.033 256.848);
    --color-gray-900: oklch(0.21 0.034 264.665);
    --color-gray-950: oklch(0.13 0.028 261.692);
  }  

  html.has-grayscale-Slate {
    --color-gray-50: oklch(0.984 0.003 247.858);
    --color-gray-100: oklch(0.968 0.007 247.896);
    --color-gray-200: oklch(0.929 0.013 255.508);
    --color-gray-300: oklch(0.869 0.022 252.894);
    --color-gray-400: oklch(0.704 0.04 256.788);
    --color-gray-500: oklch(0.554 0.046 257.417);
    --color-gray-600: oklch(0.446 0.043 257.281);
    --color-gray-700: oklch(0.372 0.044 257.287);
    --color-gray-800: oklch(0.279 0.041 260.031);
    --color-gray-900: oklch(0.208 0.042 265.755);
    --color-gray-950: oklch(0.129 0.042 264.695);
  }

  html.has-grayscale-Zinc {
    --color-gray-50: oklch(0.985 0 0);
    --color-gray-100: oklch(0.967 0.001 286.375);
    --color-gray-200: oklch(0.92 0.004 286.32);
    --color-gray-300: oklch(0.871 0.006 286.286);
    --color-gray-400: oklch(0.705 0.015 286.067);
    --color-gray-500: oklch(0.552 0.016 285.938);
    --color-gray-600: oklch(0.442 0.017 285.786);
    --color-gray-700: oklch(0.37 0.013 285.805);
    --color-gray-800: oklch(0.274 0.006 286.033);
    --color-gray-900: oklch(0.21 0.006 285.885);
    --color-gray-950: oklch(0.141 0.005 285.823);
  }

  html.has-grayscale-Stone {
    --color-gray-50: oklch(0.985 0.001 106.423);
    --color-gray-100: oklch(0.97 0.001 106.424);
    --color-gray-200: oklch(0.923 0.003 48.717);
    --color-gray-300: oklch(0.869 0.005 56.366);
    --color-gray-400: oklch(0.709 0.01 56.259);
    --color-gray-500: oklch(0.553 0.013 58.071);
    --color-gray-600: oklch(0.444 0.011 73.639);
    --color-gray-700: oklch(0.374 0.01 67.558);
    --color-gray-800: oklch(0.268 0.007 34.298);
    --color-gray-900: oklch(0.216 0.006 56.043);
    --color-gray-950: oklch(0.147 0.004 49.25);
  }

  html.has-grayscale-Neutral {
    --color-gray-50: oklch(0.985 0 0);
    --color-gray-100: oklch(0.97 0 0);
    --color-gray-200: oklch(0.922 0 0);
    --color-gray-300: oklch(0.87 0 0);
    --color-gray-400: oklch(0.708 0 0);
    --color-gray-500: oklch(0.556 0 0);
    --color-gray-600: oklch(0.439 0 0);
    --color-gray-700: oklch(0.371 0 0);
    --color-gray-800: oklch(0.269 0 0);
    --color-gray-900: oklch(0.205 0 0);
    --color-gray-950: oklch(0.145 0 0);
  }
}   

@theme {
    --breakpoint-xs: 26.25rem; /* 420px */
    --breakpoint-2xl: 85.375rem; /* 1366px */
    --breakpoint-3xl: 90rem; /* 1440px */
    --breakpoint-4xl: 96rem; /* 1536px */
    --breakpoint-6xl: 120rem; /* 1920px */

    --text-xs: 0.8125rem;
    --text-xs--line-height: 1.125rem; 
    --text-2xs: 0.75rem;
    --text-2xs--line-height: 1rem; 
    --text-3xs: 0.6875rem;
    --text-3xs--line-height: 1rem; 

    --tracking-xs: 0.012em;
    --leading-tighter: 1.1;

    --inset-shadow-md: inset 0 4px 12px 0 rgb(0 0 0 / 0.05); 

    --drop-shadow-primary: 0 8px 8px hsl(var(--c-primary-hsl) / .8);
    --drop-shadow-primary-sm: 0 6px 12px hsl(var(--c-primary-hsl) / .2); 

    --spacing-outer: 1.25rem;
    --spacing-outer-xl: 2.5rem;

    --color-background: var(--color-gray-50);
    --color-background-dark: var(--color-gray-950);    
}
  
@theme inline {
    --radius-inherit: inherit;
    --color-accent: rgb(var(--ghost-accent-color-rgb));
    --color-accent-contrast: var(--color-contrast, #fff);
    
    --color-primary-50: hsl(var(--c-primary-hsl-50));
    --color-primary: hsl(var(--c-primary-hsl));
    --color-primary-950: hsl(var(--c-primary-hsl-950));
    --color-primary-contrast: var(--color-contrast, #fff);

    --shadow-pretty: 0 0 0 1px hsl(214 80% 27% / 8%), 
                    0 1px 1px -0.5px hsl(220 24% 22% / 4%), 
                    0 3px 3px -1.5px hsl(221 25% 22% / 4%), 
                    0 6px 6px -3px hsl(221 25% 22% / 4%), 
                    0 12px 12px -6px hsl(214 80% 27% / 4%), 
                    0 24px 24px -12px hsl(214 80% 27% / 4%);

    --shadow-pretty-sm: 0 0 0 1px hsl(214 80% 27% / 8%), 
                      0 1px 1px -0.5px hsl(220 24% 22% / 4%), 
                      0 3px 3px -1.5px hsl(221 25% 22% / 4%), 
                      0 6px 6px -3px hsl(221 25% 22% / 4%);

    --shadow-pretty-xs: 0 0 0 1px hsl(214 80% 27% / 8%),
                      0 1px 1px -0.5px hsl(220 24% 22% / 4%);
    

    --shadow-primary: 0 4px 4px -2px hsl(var(--c-primary-hsl)/.1),
                    0 8px 8px -4px hsl(var(--c-primary-hsl)/.1),
                    0 16px 16px -8px hsl(var(--c-primary-hsl)/.15),
                    0 32px 32px -16px hsl(var(--c-primary-hsl)/.2);

    --shadow-custom: 2px 20px 10px -2px hsl(var(--c-primary-hsl)/.1),
                    0 30px 30px -4px hsl(var(--c-primary-hsl)/.1),
                    0 30px 30px -8px hsl(var(--c-primary-hsl)/.15),
                    0 48px 48px -16px hsl(var(--c-primary-hsl)/.2);

    --animate-slide-up: slide-up var(--animation-duration, 0ms) ease-out;
    @keyframes slide-up {
      0% { opacity: 0; transform: translateY(40px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    --animate-slide-down: slide-down var(--animation-duration, 0ms) ease-out;
    @keyframes slide-down {
      0% { opacity: 0; transform: translateY(-40px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    --animate-fade: fade var(--animation-duration, 0ms) ease-out;
    @keyframes fade {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }    

    --animate-shine: shine 400ms ease-in;
    @keyframes shine {
      0% {
        transform: translateX(-100%) scale(2) rotate(20deg);
        opacity: 0.25;
      }
      30% {
        opacity: 0.25;
      }
      100% {
        transform: translateX(100%) scale(2) rotate(20deg);
        opacity: 0;
      }          
    }    

    --animate-rotate-angle: rotate-angle 2s infinite linear;    
}

@utility animation-state-paused {
  animation-play-state: paused;
}

@utility animation-state-running {
  animation-play-state: running;
}

@utility animation-state-inherit {
  animation-play-state: inherit;
}

@utility mask-to-t {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to top, var(--tw-mask-stops));
}

@utility mask-to-tr {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to top right, var(--tw-mask-stops));
}

@utility mask-to-r {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to right, var(--tw-mask-stops));
}

@utility mask-to-br {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to bottom right, var(--tw-mask-stops));
}

@utility mask-to-b {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to bottom, var(--tw-mask-stops));
}

@utility mask-to-bl {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to bottom left, var(--tw-mask-stops));
}

@utility mask-to-l {
  --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
  --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
  --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);    
  mask-image: linear-gradient(to left, var(--tw-mask-stops));
}

@utility mask-radial {
  --tw-mask-radial-x-size: ;
  --tw-mask-radial-y-size: ;
  --tw-mask-radial-size: ;
  --tw-mask-radial-shape: ellipse;
  mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) var(--tw-mask-radial-x-size) var(--tw-mask-radial-y-size), #fff, rgb(0 0 0 / var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position));
}

@utility mask-radial-x-size-* {
  --tw-mask-radial-x-size: --value(percentage, [percentage]);
}

@utility mask-radial-y-size-* {
  --tw-mask-radial-y-size: --value(percentage, [percentage]);
}

@utility mask-radial-to-b {
  mask-image: radial-gradient(100% 90% at 50% 0%, #fff, rgb(0 0 0 / 0));
}

@utility mask-radial-to-t {
  mask-image: radial-gradient(40% 90% at 50% 100%, #fff, rgb(0 0 0 / 0));
}

@utility mask-none {
  mask-image: none;
}

@utility mask-size-* {
  mask-size: calc(--value(number) * var(--spacing));
}

@utility mask-content {
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@utility mask-position-from-* {
  --tw-mask-from-position: --value(percentage, [percentage]);  
}

@utility mask-position-to-* {
  --tw-mask-to-position: --value(percentage, [percentage]);  
}

@utility mask-opacity-to-* {
  --tw-mask-to-opacity: --value(percentage, [percentage]);  
}

@utility bg-grid-* {
  --bg-grid-alpha: calc(--modifier(integer) * 1%);
  --bg-grid-size: 60px;
  background: linear-gradient(to right, --alpha(--value(--color-*, [color]) / var(--bg-grid-alpha)) 1px, transparent 1px),
              linear-gradient(to bottom, --alpha(--value(--color-*, [color]) / var(--bg-grid-alpha)) 1px, transparent 1px);   
  background-size: var(--bg-grid-size) var(--bg-grid-size);    
}

@utility bg-grid-size-* {
  --bg-grid-size: calc(--value(number) * var(--spacing));
}

@utility scrollbar-width-none {
  scrollbar-width: none;
}

@utility scrollbar-width-thin {
  scrollbar-width: thin;
}

@utility outer {
  @layer components {
    padding-inline: var(--spacing-outer);
  }
}

@utility outer-xl {
  @layer components {
    padding-inline: var(--spacing-outer-xl);
  }
}

@utility inner {
  @layer components {
      width: 100%;
      max-width: var(--breakpoint-4xl);
      margin-inline: auto;
  }
}

@utility drop-shadow-white-sm {
  filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.2));
}

@utility bg-conic-white-sm {
  background: conic-gradient(from calc(280deg + var(--angle)) at 50% 50%, transparent 0deg, rgba(255,255,255, 0.4) 20%, transparent 22%);
}

@layer base {
    :root {
      --tw-mask-from-position: ;
      --tw-mask-to-position: ;
      --tw-mask-to-opacity: 0;
      --tw-mask-from: rgba(0,0,0, 1) var(--tw-mask-from-position);
      --tw-mask-to: rgba(0,0,0, var(--tw-mask-to-opacity,0)) var(--tw-mask-to-position);
      --tw-mask-stops: var(--tw-mask-from), var(--tw-mask-to);      
    }

    /* Font family */
    html {
        font-family: var(--gh-font-body, var(--font-body, ui-sans-serif)), var(--font-sans);
    }

    html.has-serif-body {
        font-family: var(--gh-font-body, var(--font-body, ui-serif)), var(--font-serif);
    }
    
    h1, h2, h3, h4, h5, h6,
    .has-headings-font {
        font-family: var(--gh-font-heading, var(--font-headings, ui-sans-serif)), var(--font-sans);
    }
    
    html.has-serif-headings h1,
    html.has-serif-headings h2,
    html.has-serif-headings h3,
    html.has-serif-headings h4,
    html.has-serif-headings h5,
    html.has-serif-headings h6,
    html.has-serif-headings .has-headings-font {
        font-family: var(--gh-font-heading, var(--font-headings, ui-serif)), var(--font-serif);
    }


    html { color-scheme: light ;}
    html iframe {
		color-scheme: normal;
	} 
    /* Color scheme */
    .dark {
		color-scheme: dark;
	}    

    .dark iframe {
		color-scheme: normal;
	} 
}

/* lazysizes */

.lazyload {
    filter: blur(10px);
}

.lazyloading {
    filter: blur(10px);
}

.kg-image-card img.lazyload,
.kg-gallery-image img.lazyload,
.kg-product-card .kg-product-card-image.lazyload,
.kg-image-card img.lazyloading,
.kg-gallery-image img.lazyloading,
.kg-product-card .kg-product-card-image.lazyloading {
    /* Hide overflow caused by blur effect */
    clip-path: inset(0 round 0.25rem);
}

.kg-image-card.kg-width-full img.lazyload,
.kg-image-card.kg-width-full img.lazyloading {
    /* Hide overflow caused by blur effect */
    clip-path: inset(0);    
}

html.no-img-blur .lazyload,
html.no-img-blur .lazyloading {
    filter: none !important;
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    filter: blur(0);
    transition: all 400ms ease-in-out;
}

.kg-image-card img.lazyloaded,
.kg-gallery-image img.lazyloaded,
.kg-product-card .kg-product-card-image.lazyloaded {
    /* Hide overflow caused by blur effect */
    clip-path: inset(0);
}

.form-redirect * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.form-redirect {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
}

.form-redirect .insurance-comparison {
    background: linear-gradient(135deg, #e8f1ff 0%, #d4e5ff 100%);
    padding: 40px 20px 0 20px;
    min-height: auto;
    overflow: visible;
}

.form-redirect .container {
    max-width: 1200px;
    margin: 0 auto;
}

.form-redirect .content-wrapper {
    display: flex;
    gap: 60px;
    align-items: flex-end;
}

.form-redirect .left-content {
    flex: 1;
    padding-bottom: 40px;
}

.form-redirect .main-title {
    color: #0066ff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2;
    display: block;
}

.form-redirect .features {
    margin-bottom: 40px;
}

.form-redirect .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.form-redirect .icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.form-redirect .feature-item p {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

.form-redirect .feature-item strong {
    font-weight: 600;
}

.form-redirect .form-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.form-redirect .dropdown-wrapper {
    position: relative;
    flex: 1;
    max-width: 350px;
}

.form-redirect .dropdown-label {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 16px 20px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    user-select: none;
}

.form-redirect .dropdown-label:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-redirect .car-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.form-redirect .label-text {
    flex: 1;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.form-redirect .arrow {
    color: #666;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.form-redirect .arrow.rotate {
    transform: rotate(180deg);
}

.form-redirect .dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.form-redirect .dropdown-content.open {
    max-height: 200px;
    opacity: 1;
    visibility: visible;
}

.form-redirect .dropdown-item {
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #333;
}

.form-redirect .dropdown-item:hover {
    background: #f5f5f5;
}

.form-redirect .dropdown-item.selected {
    background: #e3f2fd;
    color: #0066ff;
    font-weight: 600;
}

.form-redirect .cta-button {
    background: #0066ff;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.form-redirect .cta-button:hover {
    background: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.4);
}

.form-redirect .right-content {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}

.form-redirect .banner-img {
    max-width: 430px;
    height: 21em; !important
    display: block;
    margin-bottom: 0;
}

.form-redirect .rating-card {
    background: white;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    z-index: 5;
}

.form-redirect .rating-score {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.form-redirect .stars {
    margin-bottom: 8px;
}

.form-redirect .star {
    font-size: 1.5rem;
    color: #ddd;
    margin: 0 2px;
}

.form-redirect .star.filled {
    color: #ffd700;
}

.form-redirect .rating-text {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.form-redirect .verified-logo {
    max-width: 100px;
    height: auto;
}

.form-redirect .car-illustration {
    position: absolute;
    top: -30px;
    right: -40px;
    width: 200px;
    height: 150px;
    pointer-events: none;
}

.form-redirect .car {
    position: absolute;
    font-size: 3rem;
    opacity: 0.7;
    animation: form-redirect-float 3s ease-in-out infinite;
}

.form-redirect .car-1 {
    top: 0;
    right: 0;
    animation-delay: 0s;
}

.form-redirect .car-2 {
    top: 40px;
    right: 60px;
    font-size: 2.5rem;
    animation-delay: 0.5s;
}

.form-redirect .car-3 {
    top: 80px;
    right: 20px;
    font-size: 2rem;
    animation-delay: 1s;
}

.form-banner {
    width: 100%;
    border: none;
    min-height: 500px;
    height: auto;
    overflow: visible;
}


@keyframes form-redirect-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 968px) {
    .form-redirect .insurance-comparison {
        padding: 30px 15px 0 15px;
    }

    .form-redirect .content-wrapper {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .form-redirect .left-content {
        padding-bottom: 30px;
    }

    .form-redirect .main-title {
        font-size: 1.75rem;
    }

    .form-redirect .form-section {
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-bottom: 40px;
    }

    .form-redirect .dropdown-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .form-redirect .dropdown-label {
        padding: 14px 16px;
    }

    .form-redirect .cta-button {
        width: 100%;
        padding: 14px 24px;
    }

    .form-redirect .right-content {
        align-items: center;
        justify-content: center;
    }

    .form-redirect .banner-img {
        max-width: 250px;
    }

    .form-redirect .features {
        margin-bottom: 30px;
    }

    .form-redirect .feature-item p {
        font-size: 0.95rem;
    }

    .form-redirect .car-illustration {
        position: relative;
        top: 0;
        right: 0;
        margin: 0 auto;
    }
}