@tailwind base;
@tailwind components;
@tailwind utilities;

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/

:root {
  --primary:  #f28a2a;
  --primary2: #ffb26a;
  --secondary: #2e2e2d;
  --secondary2: #595956;
  --tertiary: #aad2ed;
  --tertiary2: #d7ecf9;
  --shadow-primary: 0 10px 22px rgba(242, 138, 42, .26);
  --shadow-secondary: 0 10px 22px rgba(45, 13, 41, .26);
  --shadow-tertiary: 0 10px 22px rgba(170, 210, 237, .26);
}

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

@layer utilities {
  .bg-splatter {
    background-image: var(--splatter);
    background-repeat: repeat;
    background-size: 1125px 750px;
  }
}

body {
  @apply antialiased text-lg;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* p {
    @apply mb-4;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.main-bg{
  background: #AAD2ED;
  background: linear-gradient(180deg,rgba(170, 210, 237, 1) 0%, rgba(198, 182, 161, 1) 80%, rgba(242, 138, 42, 1) 100%);
}

h1 {
  @apply uppercase;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
  @apply mb-0;
}

/* TEXT INPUT STYLES */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  @apply bg-white border border-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-orange-400/30 w-full;
}

/* TEXT INPUT LABELS */
label {
  @apply text-base mb-1; 
}

.gold-bg {
  @apply bg-[#A17B4E];
}

.spec-block {
  @apply pb-6;
}
.specs-header {
  @apply text-xl font-bold text-white leading-10 pb-4;
}

.transparent-menu {
  @apply bg-transparent text-tertiary_text;
}

.white-menu {
  @apply bg-tertiary_extralight bg-opacity-35 shadow;
}

.transparent-menu .language-button {
  @apply text-tertiary_text bg-transparent;
}

.transparent-menu button.language-button.active {
  @apply !text-black !bg-white;
}

.white-menu .language-button {
  @apply text-black bg-transparent;
}

.white-menu button.language-button.active {
  @apply !text-white  !bg-tertiary;
}

.main-padding {
  @apply p-8 md:p-12 lg:p-16;
}

.footer-header {
  @apply text-base font-extrabold text-left;
}

.footer-text {
  @apply text-lg font-normal text-left leading-10;
}

.footer-nav {
  @apply text-xl leading-none;
}

.spec-text {
  @apply text-lg !leading-normal;
}

.body-text {
  @apply text-lg !leading-normal;
}

.form-icon {
  background-repeat: no-repeat;
  background-position: calc(100% - 10px);
  background-size: 1.4rem;
}

.triangle {
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.streamer {
  font-family: "Ubuntu", sans-serif;
  @apply text-[#6e6e6e] text-xl uppercase font-semibold;
}

.block-title {
  @apply text-2xl leading-8 md:text-3xl md:leading-10 lg:text-4xl lg:leading-10 xl:text-5xl xl:leading-10 font-bold;
}

.sub-title {
  @apply text-2xl md:text-2xl lg:text-3xl xl:text-4xl leading-tight font-bold;
}

.small-text {
  font-family: "Ubuntu", sans-serif;
  @apply text-base min-[1950px]:text-lg leading-loose;
}

.small-text-tight {
  font-family: "Ubuntu", sans-serif;
  @apply text-base min-[1950px]:text-lg leading-normal;
}


.intro-glow{
  background:
    radial-gradient(900px 260px at 50% 0%,
      rgba(242,138,42,0.18),
      transparent 70%
    ),
    #fff;
}

.main-title {
  @apply text-2xl md:text-4xl lg:text-5xl xl:text-5xl font-bold text-tertiary_text !leading-tight;
}
.eyebrow {
  @apply border border-[#31333B] border-opacity-20 rounded-full h-fit w-fit px-3 py-1 text-sm min-[1950px]:text-base font-medium mb-2 lg:mb-4;
}
.shazzoo-gradient {
  @apply bg-gradient-to-l from-[#ED7522] to-[#D45D0B];
}
.cloudsphere-gradient-purple {
  @apply bg-gradient-to-r from-[#FF2F80] to-[#8322DE];
}

.cloudsphere-gradient-blue {
  @apply bg-gradient-to-b from-[#1D91F3];
}

.cloudsphere-bg-gray {
  @apply bg-[#F8F4FC];
}

blockquote {
  @apply relative pl-4 before:-ml-4 before:content-[''] before:w-1 before:h-full before:absolute before:bg-black before:rounded-full;
}

.content-padding-top-1 {
  @apply pt-1;
}

.content-padding-top-2 {
  @apply pt-2;
}

.content-padding-top-3 {
  @apply pt-3;
}

.content-padding-top-4 {
  @apply pt-4;
}

.content-padding-top-6 {
  @apply pt-6;
}

.content-padding-top-8 {
  @apply pt-8;
}

.content-padding-top-10 {
  @apply pt-10;
}

.content-padding-top-12 {
  @apply pt-12;
}

.content-padding-top-16 {
  @apply pt-16;
}

.content-padding-top-32 {
  @apply pt-32;
}

.content-padding-top-64 {
  @apply pt-64;
}

.content-padding-bottom-1 {
  @apply pb-1;
}

.content-padding-bottom-2 {
  @apply pb-2;
}

.content-padding-bottom-3 {
  @apply pb-3;
}

.content-padding-bottom-4 {
  @apply pb-4;
}

.content-padding-bottom-6 {
  @apply pb-6;
}

.content-padding-bottom-8 {
  @apply pb-8;
}

.content-padding-bottom-10 {
  @apply pb-10;
}

.content-padding-bottom-12 {
  @apply pb-12;
}

.content-padding-bottom-16 {
  @apply pb-16;
}

.content-padding-bottom-32 {
  @apply pb-32;
}

.content-padding-bottom-64 {
  @apply pb-64;
}

.content-floating-top-0 {
  @apply mt-0;
}

.content-floating-top-1 {
  @apply -mt-1;
}

.content-floating-top-2 {
  @apply -mt-2;
}

.content-floating-top-3 {
  @apply -mt-3;
}

.content-floating-top-4 {
  @apply -mt-4;
}

.content-floating-top-6 {
  @apply -mt-6;
}

.content-floating-top-8 {
  @apply -mt-8;
}

.content-floating-top-10 {
  @apply -mt-10;
}

.content-floating-top-12 {
  @apply -mt-12;
}

.content-floating-top-16 {
  @apply -mt-16;
}

.content-floating-top-32 {
  @apply -mt-32;
}

.content-floating-top-64 {
  @apply -mt-64;
}

.content-floating-bottom-0 {
  @apply -mb-0;
}

.content-floating-bottom-1 {
  @apply -mb-1;
}

.content-floating-bottom-2 {
  @apply -mb-2;
}

.content-floating-bottom-3 {
  @apply -mb-3;
}

.content-floating-bottom-4 {
  @apply -mb-4;
}

.content-floating-bottom-6 {
  @apply -mb-6;
}

.content-floating-bottom-8 {
  @apply -mb-8;
}

.content-floating-bottom-10 {
  @apply -mb-10;
}

.content-floating-bottom-12 {
  @apply -mb-12;
}

.content-floating-bottom-16 {
  @apply -mb-16;
}

.content-floating-bottom-32 {
  @apply -mb-32;
}

.content-floating-bottom-64 {
  @apply -mb-64;
}

.primary-bg
{
  @apply bg-[linear-gradient(135deg,var(--primary),var(--primary2))]
}

.light-box-outer {
  /* GIVE A DIVIDER BETWEEN THE CONTENT BLOCKS (Y) */
  @apply rounded-3xl relative divide-y divide-black/20;

  /* subtiele border voor crispness */
  border: 1px solid rgba(255,255,255,0.55); 
}

.light-box-inner {
  background: linear-gradient(180deg,#ffffffcc,#ffffffaa,#ffffff88);
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
}

.light-blue-box-inner {
  @apply bg-gradient-to-b from-[#bfe3f699] via-[#aad2ed77] to-[#8CBED755];
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
}

.light-box {
  @apply rounded-3xl relative;
  background: linear-gradient(180deg,#ffffff66,#ffffff44,#ffffff22);
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */

  /* subtiele border voor crispness */
  border: 1px solid rgba(255,255,255,0.55);
}

.light-box::before, .light-box-outer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  }

.light-blue-box {
  @apply bg-white shadow-[0_10px_22px_rgba(170,210,237,0.26)] rounded-3xl;
}

.primary-box {
  @apply bg-[linear-gradient(135deg,var(--primary),var(--primary2))] shadow-[0_10px_22px_rgba(242,138,42,0.26)] rounded-3xl px-8 py-5;
}

.tertiary-box {
  @apply text-tertiary_text bg-[linear-gradient(135deg,var(--tertiary),var(--tertiary2))] shadow-[0_10px_22px_rgba(170,210,237,0.52)] rounded-3xl px-8 py-5;
}

.primary-button {
  @apply text-white bg-[linear-gradient(135deg,var(--primary),var(--primary2))] shadow-[0_10px_22px_rgba(242,138,42,0.26)] inline-flex items-center gap-1 rounded-full h-12 px-8 text-base;
}

.primary-button:disabled {
  @apply bg-[#ffc900] h-[50px] align-middle px-8 rounded-md text-[#191919] font-bold text-lg opacity-50 cursor-not-allowed;
}

/* SAME AS PRIMARY BUTTON BUT DIFFERENT COLORS AND GRADIENT*/
.secondary-button {
  @apply text-white bg-[linear-gradient(135deg,var(--secondary),var(--secondary2))] shadow-[0_10px_22px_rgba(45,13,41,0.26)] inline-flex items-center gap-1 rounded-full h-12 px-8 text-base;
}

.secondary-button:disabled {
  @apply bg-[#1D91F3] h-[50px] align-middle px-8 rounded-md text-white font-bold text-lg opacity-50 cursor-not-allowed;
}

.secondary-button-small {
  @apply bg-[#1D91F3] h-[40px] align-middle px-6 rounded-md text-white font-bold text-sm;
}

.secondary-button-small:disabled {
  @apply bg-[#1D91F3] h-[40px] align-middle px-6 rounded-md text-white font-bold text-sm opacity-50 cursor-not-allowed;
}

.primary-button-small {
  @apply bg-[#ffc900] h-[40px] align-middle px-6 rounded-md text-[#191919] font-bold text-sm;
}

.primary-button-small:disabled {
  @apply bg-[#ffc900] h-[40px] align-middle px-6 rounded-md text-[#191919] font-bold text-sm opacity-50 cursor-not-allowed;
}

.contact-field {
  @apply border-0 mt-1 focus:bg-blue-100 focus:ring-blue-300 focus:ring-1 block w-full shadow bg-gray-100 rounded-md px-4 py-2 text-lg;
}

.blog-article h2 {
  @apply text-2xl font-bold pb-2 pt-4;
}

h2 {
  @apply text-2xl leading-loose font-bold pb-2 pt-4;
}

.transition-delay-0 {
  @apply delay-0;
}

.transition-delay-1 {
  @apply delay-200;
}

.transition-delay-2 {
  @apply delay-500;
}

.transition-delay-3 {
  @apply delay-700;
}

.transition-delay-4 {
  @apply delay-1000;
}

.transition-delay-5 {
  @apply delay-1000;
}

.transition-delay-6 {
  @apply delay-1000;
}

.transition-delay-7 {
  @apply delay-1000;
}

.transition-delay-8 {
  @apply delay-1000;
}

.transition-delay-9 {
  @apply delay-1000;
}

.transition-delay-10 {
  @apply delay-1000;
}

ul li {
  @apply list-disc ml-[18px];
}

.swiper-button-next,
.swiper-button-prev {
  position: relative !important;
  left: unset !important;
  right: unset !important;
  top: unset !important;
  bottom: unset !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "" !important;
}

.swiper-pagination-bullet-active {
  background-color: #2d0a29 !important;
}

.swiper-scrollbar {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}
.swiper-scrollbar.swiper-scrollbar-horizontal {
  @apply !z-0;
}
#cookies-policy.cookies {
  bottom: 0;
  font-size: 16px;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
  position: fixed;
  right: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  z-index: 9999;
}

#cookies-policy.cookies--closing {
  opacity: 0;
  transform: translateY(10px);
}

#cookies-policy.cookies--show .cookies__btn--customize {
  border-bottom: 1px solid #e7e8e9;
  border-top: none;
}

#cookies-policy.cookies--show .cookies__btn svg {
  transform: rotate(180deg);
}

#cookies-policy.cookies--no-js .cookies__expandable:target,
#cookies-policy.cookies--no-js .cookies__section .cookies__expandable {
  height: auto;
  opacity: 1;
  transition: height 0.3s ease-out, opacity 0.3s ease-out;
  visibility: visible;
}

#cookies-policy.cookies--no-js .cookies__details {
  display: none;
}

#cookies-policy.cookies--no-js .cookies__sections {
  max-height: -moz-fit-content;
  max-height: fit-content;
}

#cookies-policy.cookies--no-js svg {
  display: none;
}

#cookies-policy .cookies__expandable {
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.3s ease-out, opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
  visibility: hidden;
}

#cookies-policy .cookies__expandable--open {
  height: auto;
  opacity: 1;
  transition: height 0.3s ease-out, opacity 0.3s ease-out;
  visibility: visible;
}

#cookies-policy .cookies__alert {
  background: #fff;
  border: 1px solid #e7e8e9;
  border-radius: 8px;
  box-shadow: 0 12px 12px -8px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.04);
  margin: 4%;
  max-height: 90%;
  max-width: 90%;
  width: 22em;
}

#cookies-policy .cookies__container {
  display: block;
  height: auto;
  opacity: 1;
  overflow: hidden;
  transition: height 0.3s ease-out, opacity 0.3s ease-out,
    visibility 0s linear 0.1s;
  visibility: visible;
}

#cookies-policy .cookies__container--hide {
  height: 0;
  opacity: 0;
  transition: height 0.3s ease-out, opacity 0.3s ease-out,
    visibility 0s linear 0.3s;
  visibility: hidden;
}

#cookies-policy .cookies__wrapper {
  padding: 1em 1.5em;
}

#cookies-policy .cookies__title {
  color: #2c2e30;
  font-weight: 700;
  line-height: 1.4em;
  margin-bottom: 0.8em;
}

#cookies-policy .cookies__intro {
  color: #2c2e30;
  font-size: 0.875em;
  font-weight: 450;
  line-height: 1.4em;
}

#cookies-policy .cookies__intro p {
  margin-top: 1em;
}

#cookies-policy .cookies__intro p:first-child {
  margin-top: 0;
}

#cookies-policy .cookies__intro a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease-out;
}

#cookies-policy .cookies__intro a:focus,
#cookies-policy .cookies__intro a:hover {
  color: #7959ef;
}

#cookies-policy .cookies__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: space-between;
  margin-top: 1em;
}

#cookies-policy .cookies__btn--customize {
  align-items: center;
  border-top: 1px solid #e7e8e9;
  color: #2c2e30;
  display: flex;
  font-size: 0.875em;
  font-weight: 600;
  justify-content: space-between;
  line-height: 1em;
  padding: 1.125em 24px;
  position: relative;
  text-decoration: none;
}

#cookies-policy .cookies__btn svg {
  transition: transform 0.2s ease-out;
}

#cookies-policy .cookies__sections {
  max-height: 450px;
  overflow-y: scroll;
}

#cookies-policy .cookies__section {
  padding: 0 1.5em;
}

#cookies-policy .cookies__section + .cookies__section {
  border-top: 1px solid #eee;
}

#cookies-policy .cookies__box,
#cookies-policy .cookies__category {
  display: block;
  overflow: hidden;
  position: relative;
}

#cookies-policy .cookies__category input {
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 105%;
  top: 0;
}

#cookies-policy .cookies__box {
  cursor: pointer;
  line-height: 1.4em;
  padding: 1em 3em 1em 0;
}

#cookies-policy .cookies__box:after,
#cookies-policy .cookies__box:before {
  border-radius: 1.4em;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
}

#cookies-policy .cookies__box:after {
  background: #e7e8e9;
  height: 1.4em;
  margin-top: -0.7em;
  right: 0;
  transition: background 0.2s ease-out, opacity 0.2s ease-out;
  width: 2.5em;
  z-index: 0;
}

#cookies-policy .cookies__box:before {
  background: #fff;
  height: 1em;
  margin-top: -0.5em;
  right: 0.75em;
  transform: translateX(-0.55em);
  transition: transform 0.2s ease-out;
  width: 1em;
  z-index: 1;
}

#cookies-policy .cookies__category input:checked + .cookies__box:after {
  @apply bg-secondary opacity-100;
}

#cookies-policy .cookies__category input:disabled + .cookies__box:after {
  @apply opacity-60;
}

#cookies-policy .cookies__category input:checked + .cookies__box:before {
  transform: translateX(0.55em);
}

#cookies-policy .cookies__label {
  color: #2c2e30;
  font-size: 0.875em;
  font-weight: 600;
}

#cookies-policy .cookies__info {
  color: #2c2e30;
  font-size: 0.875em;
  font-weight: 450;
  line-height: 1.4em;
}

#cookies-policy .cookies__details {
  @apply text-secondary;
  display: block;
  font-size: 0.875em;
  margin: 0.625em 0 0.9em;
  transition: color 0.2s ease-out;
}

#cookies-policy .cookies__details:focus,
#cookies-policy .cookies__details:hover {
  @apply text-secondary;
}

#cookies-policy .cookies__definitions {
  @apply text-gray-500 text-sm leading-none pt-3.5;
}

#cookies-policy .cookies__cookie + .cookies__cookie {
  @apply mt-4;
}

#cookies-policy .cookies__name {
  @apply text-gray-500 inline font-semibold leading-6;
}

#cookies-policy .cookies__duration {
  @apply text-gray-500 inline text-right;
}

#cookies-policy .cookies__description {
  @apply text-gray-500 block leading-tight pt-1 text-left w-full;
}

#cookies-policy .cookies__save {
  @apply border-t border-gray-200 flex justify-end mt-2 py-6 px-4;
}

#cookies-policy .cookiesBtn {
  @apply w-full;
}

#cookies-policy .cookiesBtn__link {
  @apply bg-secondary border border-secondary rounded-sm text-white cursor-pointer block font-semibold text-lg leading-4 m-0 overflow-hidden px-3 py-2 text-center no-underline text-ellipsis whitespace-nowrap w-full;
  transition: opacity 0.2s ease-out;
}

#cookies-policy .cookiesBtn__link:focus,
#cookies-policy .cookiesBtn__link:hover {
  @apply opacity-80;
}

.form-span-1 {
  @apply col-span-12 md:col-span-1;
}
.form-span-2 {
  @apply col-span-12 md:col-span-2;
}
.form-span-3 {
  @apply col-span-12 md:col-span-3;
}
.form-span-4 {
  @apply col-span-12 md:col-span-4;
}
.form-span-5 {
  @apply col-span-12 md:col-span-5;
}
.form-span-6 {
  @apply col-span-12 md:col-span-6;
}
.form-span-7 {
  @apply col-span-12 md:col-span-7;
}
.form-span-8 {
  @apply col-span-12 md:col-span-8;
}
.form-span-9 {
  @apply col-span-12 md:col-span-9;
}
.form-span-10 {
  @apply col-span-12 md:col-span-10;
}
.form-span-11 {
  @apply col-span-12 md:col-span-11;
}
.form-span-12 {
  @apply col-span-12 md:col-span-12;
}