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

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/Poppins-Regular-81b668808851aed442ad8fd801dcc31066019a4d3c0cdb707188e302d17cad9c.woff2) format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: bold;
  font-weight: 800;
  src: url(/assets/Poppins-ExtraBold-1ad0297aa8fa8d9f7da569bc5951dccca5ff6fa136ec8b5171b52644918877d4.woff2) format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: bold;
  font-weight: 700;
  src: url(/assets/Poppins-Bold-9c736bb3f2df4775c220170d68acde83571ba1cf6c00539fb73f798b44670d09.woff2) format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/Poppins-SemiBold-d418642f8de03118386d919bdb06b3b982f43cb6893a0759e91f83c4c217bfb9.woff2) format('woff2');
}

@layer components {
  .public h1 {
    @apply text-4xl lg:text-[3.5rem] md:text-[5rem] font-title font-extrabold text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  .public h2 {
    @apply text-[2rem] md:text-[3rem] font-title font-bold text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0 relative after:content-['_'] after:inline-block after:h-[10px] after:w-[20px] after:bg-green-100 after:rounded-full after:absolute after:left-0 after:-bottom-2.5 before:content-['_'] before:inline-block before:h-[10px] before:w-[10px] before:bg-green-100 before:rounded-full before:absolute before:left-[25px] before:-bottom-2.5;
  }

  .public h3 {
    @apply text-[1.5rem] font-title font-bold text-green-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  .public h4 {
    @apply text-[1rem] font-title font-semibold text-pink-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  .public h5 {
    @apply text-[1rem] font-title font-semibold text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  .public h6 {
    @apply text-[1rem] font-semibold text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  h1, .h1 {
    @apply text-[2.5rem] font-title font-bold text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  h2, .h2 {
    @apply text-[2rem] font-title font-semibold text-dark-100 leading-normal mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  h3, .h3 {
    @apply text-[1rem] font-title font-semibold text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  h4, .h4 {
    @apply text-[1rem] font-medium text-dark-100 leading-tight mb-[1.875rem] mt-[3.75rem] first:mt-0;
  }

  .box {
    @apply p-[1.25rem] !rounded-2xl bg-whitish;
  }

  .border-box {
    @apply box border border-solid border-dark-100;
  }

  img {
    @apply border border-solid rounded-2xl border-dark-100;
  }

  .text {
    @apply text-[0.875rem] font-medium text-dark-100 leading-normal my-[1.875rem] first:mt-0 last:mb-0;
  }

  .text-s {
    @apply text-[0.75rem] text-dark-100 leading-normal my-[0.875rem] first:mt-0 last:mb-0;
  }

  .text-s a,
  .text a {
    @apply underline font-bold hover:text-green-100;
  }

  .pills {
    @apply inline-flex items-baseline rounded-full bg-green-20 px-[1.25rem] py-[0.3215rem] text-green-100;
  }

  /* ======= */
  /* Buttons */
  /* ======= */

  .button {
    @apply inline-block border border-solid rounded-full border-dark-100 py-[1rem] px-[1.875rem] mb-1 transition duration-300 ease-in-out cursor-pointer !no-underline !font-semibold;
  }

  .button.primary-button {
    @apply px-[4.8125rem];
  }

  .button.green-button {
    @apply bg-green-100 text-white hover:bg-white hover:text-dark-100;
  }

  .button.jasmine-button {
    @apply bg-jasmine-100 text-dark-100 hover:bg-dark-100 hover:text-white;
  }

  .button.dark-button {
    @apply bg-dark-100 text-white hover:bg-white hover:text-dark-100;
  }

  .button.white-button {
    @apply bg-white text-dark-100 hover:bg-dark-100 hover:text-white;
  }

  .button.ash-button {
    @apply bg-ash-100 text-white hover:bg-ash-20 hover:text-dark-100;
  }

  .button.pink-button {
    @apply bg-pink-100 text-white hover:bg-pink-20 hover:text-dark-100;
  }

  .button.wysiwyg-button {
    @apply rounded py-3 text-white bg-dark-100 hover:bg-green-100;
  }

  /* ====== */
  /* Tables */
  /* ====== */

  ul.table-like {
    @apply mt-[2.5rem] min-w-full divide-y divide-dark-100 border-separate border border-solid !rounded-2xl border-dark-100 bg-whitish;
  }

  ul.table-like li {
    @apply flex items-center justify-between hover:bg-clear-100 first:hover:bg-whitish first:!rounded-t-2xl last:!rounded-b-2xl;
  }

  ul.table-like li>div {
    @apply text m-0 grow text-center p-[1.5rem];
  }

  ul.table-like li>div a {
    @apply no-underline;
  }

  .arrow-right {
    @apply hover:bg-white before:z-10 before:content-[''] before:absolute before:top-[50%] before:right-[-1.5rem] before:border-t-[1.5rem] before:border-r-[0px] before:border-b-[1.5rem] before:border-l-[1.5rem] before:border-solid before:border-[transparent_transparent_transparent_#BCBEC8] before:translate-y-[-50%] after:z-10 after:content-[''] after:absolute after:top-[50%] after:right-[-1.5rem] after:border-t-[1.5rem] after:border-r-[0px] after:border-b-[1.5rem] after:border-l-[1.5rem] after:border-solid after:border-[transparent_transparent_transparent_#F9F9F3] after:translate-y-[-50%] after:translate-x-[-1px] hover:after:border-[transparent_transparent_transparent_white] last:before:hidden last:bg-white last:after:border-[transparent_transparent_transparent_white];
  }

  /* =============== */
  /* Message Preview */
  /* =============== */

  .message-preview {
    ul {
      li {
        @apply list-disc list-inside;
      }
    }

    ol {
      li {
        @apply list-decimal list-inside;
      }
    }

    blockquote,
    .blockquote {
      @apply px-3 py-0 my-1 border-l-ash-100 text-ash-100 border-l-4;
    }

    h1 {
      @apply text-[0.75rem] font-sans font-normal text-dark-100 leading-normal mb-0 mt-0 first:mt-0;
    }

    h2 {
      @apply text-[0.75rem] font-sans font-normal text-dark-100 leading-normal mb-0 mt-0 first:mt-0;
    }

    h3 {
      @apply text-[0.75rem] font-sans font-normal text-dark-100 leading-normal mb-0 mt-0 first:mt-0;
    }

    h4 {
      @apply text-[0.75rem] font-sans text-dark-100 leading-normal mb-0 mt-0 first:mt-0;
    }
  }

  /* ===== */
  /* Forms */
  /* ===== */
  form .check_box .field_with_errors {
    @apply inline;
  }

  form label,
  form .label {
    @apply text font-semibold block mb-2.5 last:mb-2.5;
  }

  form .text-field {
    @apply w-full text-sm leading-6 rounded-md border-0 pl-6 py-3 text-dark-100 placeholder:text-dark-50 ring-1 ring-dark-100 focus:ring-2 focus:ring-dark-100;
  }

  form .textarea-field {
    @apply block w-full min-h-[200px] rounded-md border-0 pl-6 py-3 ring-1 ring-dark-100 text-dark-100 placeholder:text-dark-50 focus:ring-2 focus:ring-dark-100 text-sm leading-6;
  }

  form .file-field {
    @apply w-full text-dark-100 text-sm bg-white ring-1 ring-dark-100 file:cursor-pointer cursor-pointer file:border-0 file:py-3.5 file:px-6 file:mr-4 file:bg-clear-100 file:text-dark-100 rounded-md file:rounded-l-md focus:ring-2 focus:ring-dark-100 file:ring-1 file:ring-dark-100;
  }

  form .datetime-field,
  form .date-field {
    @apply w-full rounded-md border-0 pl-6 py-3 text-dark-100 ring-1 ring-inset ring-dark-100 placeholder:text-gray-400 text-sm leading-6 focus:ring-2 focus:ring-dark-100;
  }

  form .checkbox-field {
    @apply h-6 w-6 rounded-md border border-dark-100 text-dark-100 active:ring-2 active:ring-dark-100 focus:ring-2 focus:ring-dark-100;
  }

  form .checkbox-toggle-switch-field {
    .switch {
      @apply relative inline-block w-[90px] h-[39px] border border-dark-100 rounded-[27px] p-px transition ease-in-out duration-500 shrink-0;
    }

    .switch input {
      @apply opacity-0 w-0 h-0;
    }

    .thumb {
      @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-transparent transition ease-in-out duration-500 before:absolute before:content-[""] before:h-[30px] before:w-[30px] before:left-[4px] before:bottom-[4px] before:bg-dark-50 before:transition before:ease-in-out before:duration-500 before:border before:border-dark-100;
    }

    .switch:has(> input:checked) {
      @apply border-dark-100;
    }
    input:checked+.thumb {
      @apply bg-green-100 before:bg-whitish;
    }

    input:checked+.thumb:before {
      @apply translate-x-[51px];
    }

    .thumb.round {
      @apply rounded-[27px];
    }

    .thumb.round:before {
      @apply rounded-[50%];
    }
  }

  form .select-field {
    @apply w-full border-0 pl-6 py-3 text-sm leading-6 rounded-md ring-1 ring-dark-100 text-dark-100 focus:ring-dark-100 focus:ring-2 bg-white;
  }

  form .multiple-select-field {
    @apply cursor-pointer;
  }

  form .multiple-select-field.open {
    @apply ring-2;
  }

  form .select-field-dropdown {
    @apply absolute z-10 mt-2 w-full bg-white border-0 rounded-md ring-1 ring-dark-100 text-dark-100 focus:ring-dark-100 shadow-lg;
  }

  form .select-field-dropdown-option {
    @apply px-4 py-2 hover:bg-ash-20 cursor-pointer first:rounded-t-md last:rounded-b-md;
  }

  form .select-field-dropdown-option.selected {
    @apply bg-green-20;
  }

  form .error-field {
    @apply ring-1 ring-inset ring-redish file:ring-1 file:ring-inset file:ring-redish file:rounded-l-md;
  }

  form .error-text {
    @apply mt-2 flex flex-col text-xs text-redish;
  }

  form .message-kind-label.selected {
    @apply ring-2 ring-dark-100;
  }

  /* Cookies */
  .cookie-bar-trigger {
    @apply fixed flex justify-end bottom-[15px] left-[15px] z-50;
  }

  .cookie-bar-trigger .button {
    @apply mb-0;
  }

  .cookie-bar-container {
    @apply fixed top-0 left-0 right-0 bottom-0 z-[100] w-full h-full;
  }

  .cookie-bar-background {
    @apply h-full opacity-70 bg-white;
  }

  .cookie-bar {
    @apply z-[100] sticky bottom-0 p-[1.875rem] text-[14px] lg:text-[16px] leading-[1.5] font-light bg-base text-dark-100 lg:bottom-[1.875rem] lg:left-[1.875rem] lg:w-[45vw] lg:border lg:rounded-2xl lg:border-dark-100;

    .title-container {
      @apply flex flex-col lg:flex-row lg:items-center justify-between;
    }

    .title {
      @apply mb-[0.625rem] lg:mb-[1.875rem];
    }
    .description {
      @apply text-[14px] lg:text-[16px] leading-[1.5] mb-[1.875rem];
    }
    .button {
      @apply px-[1.125rem] py-[19px] lg:py-2.5 text-[14px] leading-[1.4] text-center;
    }
    .switch {
      @apply relative inline-block w-[40px] h-[24px] border-2 border-dark-50 rounded-[24px] p-px transition ease-in-out duration-500 shrink-0;
    }

    .switch input {
      @apply opacity-0 w-0 h-0;
    }

    .slider {
      @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-transparent transition ease-in-out duration-500 before:absolute before:content-[""] before:h-[16px] before:w-[16px] before:left-[2px] before:bottom-[2px] before:bg-dark-50 before:transition before:ease-in-out before:duration-500;
    }

    .switch:has(> input:checked) {
      @apply border-dark-100;
    }
    input:checked+.slider {
      @apply bg-transparent before:bg-dark-100;
    }

    input:checked+.slider:before {
      @apply translate-x-[16px];
    }

    .slider.round {
      @apply rounded-[24px];
    }

    .slider.round:before {
      @apply rounded-[50%];
    }

    .label-title {
      @apply text-[14px] lg:text-[1rem] leading-[1.5];
    }
  }

  #uchat_chat_btn_widget {
    #uchat-widget-send-button {
      @apply !shadow-none right-[15px] left-[auto] !bottom-[-2px] border border-solid rounded-full border-dark-100 px-[1.125rem] py-2.5 !mb-[15px] cursor-pointer !no-underline !font-semibold bg-green-100 text-white;
    }
    .uchat-chat-box {
      @apply right-[15px] left-[auto];
    }
    .uchat-chat-bubble-close-btn img {
      @apply border-none;
    }
  }

  /* ====== */
  /* Legals */
  /* ====== */
  .legals {
    @apply mb-16;

    li {
      @apply list-disc ml-8;
    }
  }
}
/*
 * 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.
 *


 */