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


@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

@layer components {
  .btn-primary {
    @apply text-white bg-brand hover:bg-brand-darkened rounded-full transition px-5 md:px-10 py-2.5 inline-flex items-center
  }
  .btn-secondary {
    @apply bg-primary rounded-lg hover:bg-secondary transition px-5 py-2.5 text-center inline-block;
  }
  .btn-danger {
    @apply bg-scarlet hover:bg-red-800 text-white rounded-full transition px-5 py-2.5 md:px-10 text-center inline-block;
  }
  .tab-active {
    @apply bg-brand text-white;
  }
  .tab-inactive {
    @apply border-transparent hover:text-gray-600 hover:border-gray-300;
  }
  .navbar-position {
    @apply px-6 py-6 lg:py-16;
  }
  .mobile-nav-item {
    @apply block text-3xl font-bold mb-8;
  }
  .content-section {
    @apply max-w-screen-xl mx-auto px-6 py-8 lg:py-16 relative;
  }
  .full-height-layout {
    @apply h-full flex justify-between flex-col lg:ml-32 pt-5 lg:pt-0
  }
  .pend-title {
    @apply text-3xl font-bold text-neutral-900 mb-4 md:text-4xl lg:text-5xl xl:text-6xl leading-8;
  }
  .pend-subtitle {
    @apply text-brand font-bold text-xl mb-3;
  }
  #faqs ul { @apply list-disc list-outside ms-8; }
  #faqs ol { @apply list-decimal list-outside ms-8; }
}

@layer utilities {
  .gradient-mask-x {
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1.0) 5%, rgba(0, 0, 0, 1.0) 95%, transparent 100%);
  }
  .gradient-mask-x-spacer {
    @apply -ml-4 pl-4 -mr-4 pr-4 md:-mr-16 md:pr-16 md:-ml-16 md:pl-16
  }
  @media (min-width: 1023px) {
    .gradient-mask-x {
      mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1.0) 2%, rgba(0, 0, 0, 1.0) 98%, transparent 100%);
    }
  }
}

h1 em, h2 em {
  font-style: normal; 
  box-shadow: inset 0 -0.6em 0 0 #27EAA2;
  padding-left: 0.1em;
  padding-right: 0.1em;
  display: inline-block;
  height: 1em;
}

/* gradient backgrounds */
.web-gradient-background {
  background: linear-gradient(140.83deg, #EDF3F9 4.98%, rgba(255, 255, 255, 0) 97.01%);
}
.app-gradient-background {
  background: linear-gradient(134.22deg, #EDF3F9 5.23%, rgba(255, 255, 255, 0) 99.25%);
}
.gradient-background {
  background:  linear-gradient(146.37deg, #27EAA2 36.05%, rgba(255, 255, 255, 0) 112.68%);
}

.field_with_errors:has(label) { display: inline }
.field_with_errors label, .field_with_errors input { color: red }
.field_with_errors input { border: 1px solid red }

.twint { background: black }
.twint_wix { background: black }
.twint_fail { background: #000 }
.creditcards { background: white }
.powerpay { background: white }
.powerpay_zero { background: white }
.postfinance { background: #FCD206 }

/* we dynamically add the class to the body depending on the context */
.distraction_free #reduced-content {
  @apply flex justify-center text-center;
}
.distraction_free #reduced-content img {
  @apply mx-auto bg-black rounded-xl shadow-lg mb-10 p-2;
}
.distraction_free  .full-height-layout { @apply ml-auto }

/* this class is set by a js function */
.spinner-border {
  @apply inline-block w-4 h-4 border-4 rounded-full border-t-transparent animate-spin;
}

/* this class is coming directly from Rails */
.translation_missing {
  @apply underline decoration-red-500;
}

/* color swatch special things */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

/* this is a special class that is used in the markdown editor */
#advantages blockquote {
  @apply mt-4 text-gray-400 text-sm;
}

/* adding special link treatment for faq answers */
#faqs a { @apply text-brand underline;}

.text-content-section {
  ul { @apply list-disc list-outside ps-6 space-y-4; }
  ol { @apply list-decimal list-outside ps-12 mt-2 space-y-3; } 
  ul, ol { @apply mt-4 mb-4; }
  li { @apply mb-2; }
}
.blob-hero::before {
  content: "";
  position: absolute;
  width: 1500px;
  height: 620px;
  left: 50%;
  top: -100px;
  background: linear-gradient(170.79deg, #27EAA2 31.22%, rgba(237, 243, 249, 0) 85%);
  border-radius: 360px;
  transform: rotate(-4.28deg);
  z-index:-100;
}

.blob-hero::after {
  content: "";
  position: absolute;
  width: 780px;
  height: 550px;
  left: 53%;
  top: -100px;  
  background: linear-gradient(127deg, rgba(255, 255, 255, 0.7) 5.81%, rgba(255, 255, 255, 0) 43.77%);  
  border-radius: 360px;
  transform: rotate(-10deg);
  z-index:-100;
  animation: blobGradient 30s ease infinite;
}

@media (max-width: 1023px) {
  .blob-hero::before {
    left:-100px;
    top: -150px;
  }
  .blob-hero::after {
    left:-40px;
    top: -150px;
    animation: none;
  }
}

@keyframes blobGradient { 
    0%{transform: rotate(-10deg) translateX(0px)}
    50%{transform: rotate(-10deg) translateX(40px)}
    100%{transform: rotate(-10deg) translateX(0px)}
}

.blob-purple-left::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 120%;
  top: 0;
  left: -65%;
  background: linear-gradient(302.52deg, #6D51DC 24.44%, rgba(79, 59, 156, 0) 75.31%);
  border-radius: 374px;
  transform: rotate(-4.28deg);
  z-index:-100;
}

.blob-purple-left::after{
  content: "";
  position: absolute;
  width: 90%;
  height: 100%;
  top: 0;
  left: -60%;
  background: linear-gradient(316.19deg, rgba(255, 255, 255, 0.3) 16.47%, rgba(255, 255, 255, 0) 36.66%);
  border-radius: 374px;
  transform: rotate(-4.28deg);
  z-index:-100;
}

@media (max-width: 1023px) {
  .blob-purple-left::before {
    height: 50%;
    width:120%;
    top: -2%;
    left: -50%;
  }
  .blob-purple-left::after {
    height: 39%;
    width:109%;
    top: -2%;
    left: -50%;
  }
}

.blob-purple-drawer::before {
  content: "";
  position: absolute;
  width: 1600px;
  height: 150%;
  right: -5%;
  top: -10%;
  background: linear-gradient(302.52deg, #694ed4 33.19%, rgba(79, 59, 156, 0) 75.31%);
  border-radius: 500px;
  transform: rotate(-4deg);
  z-index:-1;
}

.blob-purple-drawer::after {
  content: "";
  position: absolute;
  width: 1210px; 
  height: 800px;
  right: 10%;
  top: 0;
  background:  linear-gradient(316.19deg, rgba(255, 255, 255, 0.3) 10%, rgba(255, 255, 255, 0) 35%);
  border-radius: 440px;
  transform: rotate(-4deg);
  z-index:2;
}

.blob-purple-layout::before {
  content: "";
  position: absolute;
  width: 200vh;
  height: 150vh;
  right: 20%;
  top: -10%;
  background: linear-gradient(302.52deg, rgba(79, 59, 156, 0) 25.63%, rgb(105, 78, 212) 52.52%);
  border-radius: 609px;
  transform: rotate(-4deg);
  z-index:-1;
}

.blob-purple-layout::after {
  content: "";
  position: absolute;
  width: 300vh; 
  height: 200vh;
  right: 0;
  bottom: 5%;
  background: linear-gradient(316.19deg, rgba(255, 255, 255, 0.3) 16.47%, rgba(255, 255, 255, 0) 36.66%);
  border-radius: 840px;
  transform: rotate(-4deg);
  z-index:-2;
}

.blob-hero-landing::before {
  content: "";
  position: absolute;
  width: 1460px;
  height: 750px;
  left: 45%;
  top: -95.85px;
  background-image: url(/assets/landing_pages/landing-mood-774c30c788c0a3bac9dc3b68d6589c5123c9add3be5ed6346daa0d37093da3db.jpg);
  background-size: cover;
  border-radius: 374px;
  transform: rotate(-4.28deg);
  z-index:-100;
}

@media (max-width: 1023px) {
  .blob-hero-landing::before {
    left: auto;
    right: 0;
  }
  .blob-hero-landing::after {
    content: "";
    position: absolute;
    width: 1460px;
    height: 750px;
    right: 0%;
    top: -95.85px;
    background-image: linear-gradient(-50deg, #fff 9.71%, rgba(245, 245, 245, 0.33) 86.92%);
    border-radius: 374px;
    transform: rotate(-4.28deg);
    z-index:-100;
  }
}

.blob-onboarding-layout::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 150%;
  left: 25%;
  top: -200px;
  background-color: #EDF3F9;
  border-radius: 50%;
  transform: rotate(-4.28deg);
  z-index: -2;
}

.blob-onboarding-layout::after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 150%;
  left: 33%;
  top: -110px;
  background: linear-gradient(-33deg, #FFFFFF 18.49%, rgba(255, 255, 255, 0) 82.28%);
  border-radius: 50%;
  transform: rotate(14deg);
  z-index: -1;
}

.blob-green-center::before{
  content: "";
  position: absolute;
  width: 85%;
  height: 70%;
  left: 50%;
  transform: translateX(-50%) rotate(-4.28deg);
  background: linear-gradient(132.91deg, #27EAA2 9.71%, rgba(245, 245, 245, 0.33) 86.92%);
  border-radius: 374px;
  z-index:-100;
}

.blob-green-center::after{
  content: "";
  position: absolute;
  width: 75%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%) translateY(17%) rotate(-4.46deg);
  background: linear-gradient(316.19deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255,0) 60%);
  border-radius: 374px;
  z-index:-100;
}

@media (max-width: 1023px) {
  .blob-green-center::before {
    transform: rotate(-12deg);
    right: -250px;
    left: auto;
    background: linear-gradient(180deg, #27EAA2 1.71%, rgba(245, 245, 245, 0.33) 32.92%);
    top: 17rem;
    width: 1500px;
    height:1200px;
    border-radius: 360px;
  }
  .blob-green-center::after {
   display: none;
  }
}

.blob-circle::before{
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  background: linear-gradient(180deg, #EDF3F9 0%, rgba(237, 243, 249, 0) 100%);
  border-radius: 374px;
  z-index:-100;
}

.blob-grey::before{
  content: "";
  position: absolute;
  width: 130%;
  height: 95%;
  right:0;
  bottom: -10%;
  transform: rotate(-4.28deg);
  background: linear-gradient(308.87deg, #EDF3F9 22.94%, rgba(237, 243, 249, 0) 69%);
  border-radius: 374px;
  z-index:-100;
}

.blob-grey::after{
  content: "";
  position: absolute;
  width: 130%;
  height: 85%;
  bottom: -14%;
  right: 7%;
  transform: rotate(-4.46deg);
  background: linear-gradient(301deg, rgba(255, 255, 255, 0.6) 15.81%, rgba(255, 255, 255, 0) 43.77%);
  border-radius: 374px;
  z-index:-100;
}

.blob-card::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 300%;
  right:16%;
  bottom: -20%;
  transform: rotate(-4.28deg);
  background: linear-gradient(316.19deg, rgba(255, 255, 255, 0.3) 16.47%, rgba(255, 255, 255, 0) 36.66%);
  border-radius: 374px;
}

.blob-hero-2::before {
  content: "";
  position: absolute;
  width: 1730px;
  height: 710px;
  left: 40%;
  top: -400px;
  background-color: #EDF3F9;
  border-radius: 374px;
  transform: rotate(-4.28deg);
  z-index:-100;
}



.blob-installation::before {
  content: "";
  position: absolute;
  width: 230%;
  height: 110%;
  left:-200px;
  bottom: -10%;
  transform: rotate(-5deg);
  background: linear-gradient(0deg, #EDF3F9 22.94%, rgba(237, 243, 249, 0) 69%);
  border-radius: 374px;
  z-index:-100;
}
.blob-installation::after {
  content: "";
  position: absolute;
  width: 230%;
  height: 110%;
  left:-127px;
  bottom: -11%;
  transform: rotate(-4deg);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 15.81%, rgba(255, 255, 255, 0) 43.77%);
  border-radius: 374px;
  z-index:-99;
}




#target-circle .layer-1 {
  position: absolute;
  width: 80%;
  height: 80%;
  background: linear-gradient(195deg, #EDF3F9 0%, rgba(237, 243, 249, 0) 100%);
  border-radius: 242.881px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#target-circle .layer-2 {
  position: absolute;
  width: 60%;
  height: 60%;
  background: linear-gradient(345deg, rgba(237, 243, 249, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: 242.881px;  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#target-circle .layer-3 {
  position: absolute;
  width: 40%;
  height: 40%;
  background: linear-gradient(165deg, #EDF3F9 0%, #FFFFFF 100%);
  opacity: 0.6;
  border-radius: 242.881px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */