@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");

@import "tailwindcss";

/*
  This block is for Tailwind's engine to GENERATE utility classes
  like bg-primary, text-dark, shadow-signUp, etc.
*/
@theme {
  --color-white: #FFFFFF;
  --color-black: #263238;
  --color-dark: #263238;
  --color-primary: #F8BF2A;
  --color-yellow: #FBB040;
  --color-body: #263238;
  --color-gray: #B6B6B6;
  --color-light: #D9D9D9;

  --shadow-signUp: 0px 5px 10px rgba(4, 10, 34, 0.2);
  --shadow-one: 0px 2px 3px rgba(7, 7, 77, 0.05);
  --shadow-sticky: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

@layer base {
  :root {
    /*
      This block is for YOU to USE variables at runtime.
      The .dark rule and body rule need these to exist here.
    */
    --color-white: #FFFFFF;
    --color-black: #263238;
    --color-dark: #263238;
    --color-primary: #F8BF2A;
    --color-yellow: #FBB040;
    --color-body: #263238;
    --color-gray: #B6B6B6;
    --color-light: #D9D9D9;

    --shadow-signUp: 0px 5px 10px rgba(4, 10, 34, 0.2);
    --shadow-one: 0px 2px 3px rgba(7, 7, 77, 0.05);
    --shadow-sticky: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);

    /* Default theme variables for easier light/dark mode switching */
    --background: var(--color-white);
    --foreground: var(--color-black);
    --foreground-muted: var(--color-body);
  }

  .dark {
    --background: var(--color-black);
    --foreground: var(--color-white);
    --foreground-muted: var(--color-body);
  }

  /*
   Apply the base background, text color, and font family to the body.
  */
  body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    @apply text-sm;
  }

  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@layer components {
  /* Your custom component styles remain here */
  input[type="checkbox"]:checked ~ label span svg {
    @apply inline-flex;
  }

  .sticky .header-logo {
    @apply py-5 lg:py-2;
  }

  .sticky .menu-scroll.active {
    @apply opacity-70;
  }

  input#togglePlan:checked ~ .dot {
    @apply translate-x-full;
  }

  input#checkboxLabel:checked ~ .box span {
    @apply opacity-100;
  }

   /* New Container Classes */
  .container-xl {
    @apply mx-auto max-w-screen-xl px-4;
  }

  .container-lg {
    @apply mx-auto max-w-screen-lg px-4;
  }

  .bg-radial-kombiniran {
    background-image: 
      /* Gradient 2 (iz centra, 20% prosojnost) - ta bo na vrhu */
      radial-gradient(circle 300px at 100px -50px, rgba(246, 186, 25, 0.46) 0%, rgba(255, 255, 255, 0) 100%),
      /* Gradient 1 (iz spodnjega levega kota, 49% prosojnost) - ta bo spodaj */
      radial-gradient(circle 150px at bottom left, rgba(246, 186, 25, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    }
    .bg-radial-kombiniran2 {
    background-image: 
      /* Gradient 2 (iz centra, 20% prosojnost) - ta bo na vrhu */
      radial-gradient(circle 900px at 50% -400px, rgba(246, 186, 25, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
      /* Gradient 1 (iz spodnjega levega kota, 49% prosojnost) - ta bo spodaj */
      radial-gradient(circle 600px at 25% 110%, rgba(246, 186, 25, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
    }
}

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