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

@layer base {
  :root {
    --primary-colors-primary: rgba(26,26,26, 1);
    --primary-colors-primay-60: rgba(26,26,26, 0.6);
    --primary-colors-primay-40: rgba(26,26,26, 0.4);
    --primary-colors-primay-05: rgba(26,26,26, 0.05);
    --primary-colors-black: rgba(1,20,4, 1);
    --primary-colors-secondary: rgba(46,103,215, 1);
    --primary-colors-secondary-60: rgba(46,103,215, 0.6);
    --primary-colors-secondary-40: rgba(46,103,215, 0.4);
    --primary-colors-secondary-05: rgba(46,103,215, 0.05);
    --primary-colors-white: rgba(255,255,255, 1);
    --primary-colors-white-80: rgba(255,255,255, 0.8);
    --secondary-colors-color1: rgba(252,234,89, 1);
    --secondary-colors-color1-60: rgba(252,234,89, 0.6);
    --secondary-colors-color1-40: rgba(252,234,89, 0.4);
    --secondary-colors-color1-20: rgba(252,234,89, 0.2);
    --secondary-colors-color2: rgba(4,201,47, 1);
    --secondary-colors-color2-60: rgba(4,201,47, 0.6);
    --secondary-colors-color2-40: rgba(4,201,47, 0.4);
    --secondary-colors-color2-20: rgba(4,201,47, 0.2);
    --secondary-colors-color3: rgba(255,208,226, 1);
    --secondary-colors-color3-60: rgba(255,208,226, 0.6);
    --secondary-colors-color3-40: rgba(255,208,226, 0.4);
    --secondary-colors-color3-20: rgba(255,208,226, 0.2);
    --secondary-colors-color4: rgba(167,203,245, 1);
    --secondary-colors-color4-60: rgba(167,203,245, 0.6);
    --secondary-colors-color4-40: rgba(167,203,245, 0.4);
    --secondary-colors-color4-20: rgba(167,203,245, 0.2);
    --neutral-colors-neutral-100: rgba(33,33,33, 1);
    --neutral-colors-neutral-80: rgba(33,33,33, 0.8);
    --neutral-colors-neutral-70: rgba(33,33,33, 0.7);
    --neutral-colors-neutral-60: rgba(33,33,33, 0.6);
    --neutral-colors-neutral-60: rgba(33,33,33, 0.3);
    --neutral-colors-neutral-60: rgba(33,33,33, 0.2);
    --neutral-colors-neutral-60: rgba(33,33,33, 0.1);
    --neutral-colors-neutral-60: rgba(33,33,33, 0.05);
    --danger: rgba(251,44,54, 1);
  }

  @font-face {
    font-family: 'Chillax-Extralight';
    src: url('./fonts/chillax/Chillax-Extralight.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Extralight.woff') format('woff'),
        url('./fonts/chillax/Chillax-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Light';
    src: url('./fonts/chillax/Chillax-Light.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Light.woff') format('woff'),
        url('./fonts/chillax/Chillax-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Regular';
    src: url('./fonts/chillax/Chillax-Regular.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Regular.woff') format('woff'),
        url('./fonts/chillax/Chillax-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Medium';
    src: url('./fonts/chillax/Chillax-Medium.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Medium.woff') format('woff'),
        url('./fonts/chillax/Chillax-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Semibold';
    src: url('./fonts/chillax/Chillax-Semibold.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Semibold.woff') format('woff'),
        url('./fonts/chillax/Chillax-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Bold';
    src: url('./fonts/chillax/Chillax-Bold.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Bold.woff') format('woff'),
        url('./fonts/chillax/Chillax-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  /**
  * This is a variable font
  * You can control variable axes as shown below:
  * font-variation-settings: wght 700.0;
  *
  * available axes:
  'wght' (range from 200.0 to 700.0
  */
  @font-face {
    font-family: 'Chillax-Variable';
    src: url('./fonts/chillax/Chillax-Variable.woff2') format('woff2'),
        url('./fonts/chillax/Chillax-Variable.woff') format('woff'),
        url('./fonts/chillax/Chillax-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--primary-colors-primary);
  }
}

.nl2br { display: block; }
.font-style-title { font-family: "Chillax-Semibold", sans-serif; }
.font-style-paragraph { font-family: "Inter", sans-serif; }
.hightlight-text { display: inline-block; background-color: var(--secondary-colors-color1); padding-left: 5px; padding-right: 5px; }
.rounded { border-radius: 1rem; }
.hero-banner-section { background-color: var(--secondary-colors-color4-40); margin-bottom: 4rem; }
.hero-banner-section.component-index-1 { top: 2rem; }
.call-to-action {
  font-family: "Inter", sans-serif;
  line-height: 140%;
  letter-spacing: -4%;
  font-weight: 600;
  background-color: var(--primary-colors-secondary);
  color: var(--primary-colors-white);
}
.call-to-action.font-normal { font-weight: 400; }
.call-to-action.font-size-xs { font-size: 0.75rem; }
.call-to-action.font-size-sm { font-size: .875rem; }
.call-to-action.font-size-md { font-size: 0.9rem; }
.call-to-action.font-size-lg { font-size: 1.125rem; }
.call-to-action.font-size-xl { font-size: 1.25rem; }
.call-to-action.font-size-2xl { font-size: 1.5rem; }
.call-to-action.font-size-3xl { font-size: 1.875rem; }
.call-to-action.font-size-4xl { font-size: 2.25rem; }
.call-to-action.no-button { color: var(--primary-colors-secondary); background-color: transparent; }
.logos-gallery-section { background-color: var(--primary-colors-primay-05); }
.cards-list-section.style_2 { background-color: var(--secondary-colors-color4-20); padding-top: 2.5rem; padding-bottom: 2.5rem;}
.cards-list-section.style_2.component-index-1 { margin-top: 0rem !important; }
.cards-list-section.style_2.component-index-1 .title { margin-top: 1rem !important; }
.card-list-section-item.style_1 { background-color: var(--secondary-colors-color3-60); }
.card-list-section-item.style_2 { background-color: var(--secondary-colors-color1-60); }
.card-list-section-item.style_3 { background-color: var(--secondary-colors-color4-60); }
.card-list-section-item.style_4 { background: linear-gradient(to top, var(--secondary-colors-color2-60), var(--secondary-colors-color2-40)); }
.card-list-section-item.style_5 { background: linear-gradient(to top, var(--secondary-colors-color4-60), var(--secondary-colors-color4-40)); }
.card-list-section-item.style_6 { background: linear-gradient(to top, var(--secondary-colors-color3-60), var(--secondary-colors-color3-40)); }
.card-list-section-item.style_7 { background: linear-gradient(to top, var(--secondary-colors-color1-60), var(--secondary-colors-color1-40)); }
.card-list-section-item.style_8 { background: var(--primary-colors-white); }
.card-list-section-item .icon,
.focused-content-section-item .icon,
.horizontal-bullet-list-section-item .icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-colors-white);
  text-align: center;
}
.horizontal-bullet-list-section-item .icon { background-color: var(--secondary-colors-color4-40); }
.cards-list-section.style_2 .card-list-section-item .icon { background-color: var(--secondary-colors-color1-60); }
.card-list-section-item .icon img,
.focused-content-section-item .icon img,
.horizontal-bullet-list-section-item .icon img {
  margin: 16px auto;
  width:24px;
  height:24px;
}
.focused-content-section .focused-content-section-item:last-child .content p:last-child { margin-bottom: 0!important }
p { margin-bottom: 2rem; }
.text-and-image-section.style_1 { background-color: var(--primary-colors-primay-05); }
.text-and-image-section.style_2 { background-color: var(--primary-colors-white); }
.focused-content-section { background-color: var(--secondary-colors-color4-40); }
.focused-content-section.style_1 { border-bottom-left-radius: 0rem; border-bottom-right-radius: 0rem; }
.footer { 
  border-top-left-radius: 0rem; border-top-right-radius: 0rem;
  background-color: var(--primary-colors-secondary); 
}
.contacts-main-menu-button { background-color: var(--primary-colors-black); }
.contacts-main-menu-button:hover { 
  background-color: var(--primary-colors-white); 
  border: solid 1px var(--primary-colors-black);
  color: var(--primary-colors-black);
  transition: 0.3 ease;
}
.footer-menu-item .title {
  color: var(--secondary-colors-color4);
  font-weight: normal;
}
.footer-menu-item .list,
.footer-logo-container,
.footer-text {
  color: var(--primary-colors-white-80);
  font-weight: normal;
  line-height: 1.7;
}
.footer-menu-item .list li:hover,
.footer-logo-container a:hover {
  color: var(--primary-colors-white);
}
div[role="menu"] {
  border: none;
  border-radius: 0.5rem;
}
div[role="menuitem"]:hover{
  background-color: var(--secondary-colors-color4-20);
  border-radius: 0.5rem;
}
.horizontal-bullet-list-section { background-color: var(--primary-colors-primay-05); }
.product-configuration-selector-configuration-item.starter-kit {
  border: solid 1px var(--primary-colors-primay-60);
}
.product-configuration-selector-configuration-item .icon,
.preset-content-module .icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--primary-colors-secondary);
  text-align: center;
}
.preset-content-module .icon { background-color: var(--secondary-colors-color2); }
.preset-content-module .icon.remove-icon { background-color: var(--danger); cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; }
.preset-content-module .icon.remove-icon > svg { margin-left: 6px; margin-top: 6px; }
.preset-content-module .has-remove:hover .remove-icon { visibility: visible; opacity: 1; }
.product-configuration-selector-configuration-item .icon img,
.preset-content-module .icon img {
  margin: 10px auto;
  width:10px;
  height:7px;
}
.product-configuration-selector-configuration-item.other-configurations .preset-selector {
  background-color: var(--secondary-colors-color4-20);
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.product-configuration-selector-configuration-item.other-configurations .preset-selector h5 { color: var(--primary-colors-secondary); }
.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset { 
  margin-top: 0rem !important; 
  color: var(--primary-colors-secondary) !important;
}
.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset:hover,
.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset:active,
.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset:focus { 
  color: var(--primary-colors-white) !important;
  background-color: var(--primary-colors-secondary);
  border-color: transparent;
}

.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset:hover .call-to-action-icon svg path,
.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset:active .call-to-action-icon svg path,
.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.customize-preset:focus .call-to-action-icon svg path { 
  stroke: var(--primary-colors-white) !important;
}

.product-configuration-selector-configuration-item.other-configurations .preset-selector a.call-to-action.configuration-preset { 
  display: block;
  margin-top: 0rem !important; 
  text-align: center;
  margin-bottom: 0.7rem !important;
  color: var(--primary-colors-secondary);
}
.product-configuration-selector-configuration-item.other-configurations .preset-content {
  background-color: var(--primary-colors-secondary);
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  color: var(--primary-colors-white);
}
.preset-content-line { height: 1px; background-color: var(--primary-colors-white); margin-top: 0.6rem; }
.preset-content-description p:last-child { margin-bottom: 0rem; }
.preset-content-module .description .title:hover { text-decoration: underline; cursor: pointer; }
.product-configuration-selector-configuration-item .call-to-action {
  background-color: var(--primary-colors-white);
  border: solid 1px var(--primary-colors-black);
  color: var(--primary-colors-black);
}
.product-configuration-selector-configuration-item.other-configurations .call-to-action { 
  border-color: var(--primary-colors-secondary);
}
.main-container-content { background-color: var(--primary-colors-white); }
.main-container-content-inner > *:first-child { margin-top: 2rem; }
.call-to-action-configuration-preset-hover.active,
.call-to-action-configuration-preset-hover:hover,
.call-to-action-configuration-preset-hover:active,
.call-to-action-configuration-preset-hover:focus {
  background-color: var(--primary-colors-secondary);
  color: var(--primary-colors-white);
}
.call-to-action-configuration-preset-hover.active .call-to-action-label,
.call-to-action-configuration-preset-hover:hover .call-to-action-label,
.call-to-action-configuration-preset-hover:active .call-to-action-label,
.call-to-action-configuration-preset-hover:focus .call-to-action-label {
  color: var(--primary-colors-white);
}
.modal-box { background-color: var(--primary-colors-white); }
.form-input {
  background-color: var(--primary-colors-primay-05);
  border-radius: 0.3rem;
}
.form-input:active, .form-input:focus { border: solid 1px var(--primary-colors-secondary) !important; }
.loader-fill { fill: var(--primary-colors-secondary); }
.preset-content-module .description.has-click-handler:hover { text-decoration: underline; cursor: pointer; }
.module-details-advantages ul, .module-details-requirements ul { list-style: disc !important; padding-left: 2rem; }
.modal-box-title { color: var(--primary-colors-secondary); }
.contacts-group-item-type-phone:hover, .contacts-group-item-type-email:hover { cursor: pointer; }
.contacts-group-item-type-phone:hover a, .contacts-group-item-type-email:hover a { text-decoration: underline; }
.contacts-group-item-type-social-link-button a {
  display: block;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-color: var(--primary-colors-secondary);
  padding-top: 5px;
}
.contacts-section.style_1 { background-color: var(--secondary-colors-color4-20); padding: 5rem; }
.contacts-section .card { background-color: var(--primary-colors-white); }
@media (max-width: 640px) { 
  .cards-list-section.style_2.component-index-1 {
    padding-bottom: 0rem !important;
  }
  .product-configuration-selector-configuration-item.other-configurations .preset-selector {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0rem;
  }
  .product-configuration-selector-configuration-item.other-configurations .preset-content {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }
}
.cards-list-section .content > * { max-width: 90%; margin-left: auto; margin-right: auto; }
.cookies-policy .text-and-image-section h1, .cookies-policy .text-and-image-section h2,
.cookies-policy .text-and-image-section h3, .cookies-policy .text-and-image-section h4,
.cookies-policy .text-and-image-section h5, .cookies-policy .text-and-image-section h6 { font-weight: 700; }
.cookies-policy .text-and-image-section ul { list-style-type: disc; margin-left: 2.5rem; }
.cookies-policy .text-and-image-section a { color: var(--primary-colors-secondary); }
.privacy-policy .text-and-image-section h1, .privacy-policy .text-and-image-section h2,
.privacy-policy .text-and-image-section h3, .privacy-policy .text-and-image-section h4,
.privacy-policy .text-and-image-section h5, .privacy-policy .text-and-image-section h6 { font-weight: 700; }
.privacy-policy .text-and-image-section ul { list-style-type: disc; margin-left: 2.5rem; }
.privacy-policy .text-and-image-section a { color: var(--primary-colors-secondary); }