@import "tailwindcss";

/* Preline UI */
@source "../../../node_modules/preline/dist/*.js";
@import "../../../node_modules/preline/variants.css";

/* Plugins */
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@import "../../../node_modules/simple-notify/dist/simple-notify.css";
@import "../../../node_modules/choices.js/public/assets/styles/choices.css";
@import "../../../node_modules/rhino-editor/exports/styles/trix.css";

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-Light-d97bb0f87683730c716aa916da8ceac16b74820ab794e3357d25971072bd03e5.ttf) format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-Regular-aa1f584bccb2f782a21e2e19dead7c473a8e4d1a99ae4d905e8668837126ddc8.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-Medium-de1246dc86f7f505d57a2e3fe82d8f0fe4c54805ae48d444060e7c8f40269151.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-SemiBold-ca7ba822861088d78f5379b7809b06379e6be87d688c06f931628ba31feec3f9.ttf) format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-Bold-df72bf9dfcf980290b0cb06b18cd6145e873934efa430ee2c8b38a1c71160b01.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-ExtraBold-3284d9397df9e2c600e5a7850586699a738e86df5dae67f1f0c079d01e9ab8de.ttf) format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url(/assets/Albert_Sans/static/AlbertSans-Black-d094df08ed97410cb1e2dafa7d3f28b81f0883d4a05a76258943f3a6c7394515.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

@theme {
  --color-primary: #50a79e;
  --color-brand-green: #98f9ea;
  --color-brand-soft-green: #c4f4e6;
  --color-brand-dark-green: #50a79e;
  --color-brand-purple: #b6bff0;
  --color-brand-light-purple: #cccbfb;
  --color-brand-dark-purple: #909be1;
  --color-brand-grey: #f3f5f9;
  --color-brand-dark-grey: #cbd3de;
  --color-brand-blue: #c2e8ee;
  --color-brand-blue-dark: #6586B3;
  --color-brand-dark-bg: #100c12;
  --color-brand-dark-bg-highlight: #29262c;
  --color-brand-sidebar-hover: #3b3b39;
  --color-brand-light-grey: #e6e9ec;
  --color-brand-glacier: #d4eff3;
  --color-brand-glacier-dark: #37958d;
  --color-brand-marine-soft: #e6ebff;
  --color-brand-marine: #2c47af;
  --color-brand-light-green-soft: #dffabb;
  --color-brand-light-green: #5ea17d;
  --color-brand-pink-soft: #ffe4ff;
  --color-brand-pink: #91548c;
  --color-brand-orange: #f78262;
  --color-brand-mint: #d0f5eb;
  --font-sans: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --shadow-card: 0px 4px 25px 0px #E4E9F5;
  --shadow-green-card: 0px 4px 38.1px 0px rgba(55, 149, 141, 0.3);
  --shadow-purple-card: 7px 7px 50.2px -16px rgba(182, 191, 240, 1);

  --breakpoint-front-navbar: 1440px;
}

/* Adds pointer cursor to buttons */
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

/* Style pour l'input avec label long - s'agrandit quand focus ou avec valeur */
#pack_unit_of_account_management_fee:focus,
#pack_unit_of_account_management_fee.has-value {
  padding-top: 2rem;
}

/* Defaults hover styles on all devices */
@custom-variant hover (&:hover);

.editor__hero-banner-container {
  width: 100%;
  padding: 3rem 0 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & h3 {
    font-size: 3rem;
    text-align: center;
    max-width: 600px;
  }

  & .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;

    & .button {
      padding: 0.5rem 2rem;
      font-size: 1.5rem;
      background-color: #156f5f;
      color: white;
      border-radius: 5px;
      text-decoration: none;
      border-radius: 999px;
      &:hover {
        background-color: #0e4d3b;
      }
    }

    & .button_outline {
      padding: 0.5rem 2rem;
      font-size: 1.5rem;
      background-color: transparent;
      border: 2px solid #156f5f;
      border-radius: 5px;
      text-decoration: none;
      border-radius: 999px;
      color: #156f5f;
      &:hover {
        border-color: #0e4d3b;
        color: #0e4d3b;
      }
    }
  }
}

/* Simple Image */
.simple-image {
  padding: 20px 0;

  & input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    outline: none;
    font-size: 14px;
  }

  & img {
    max-width: 100%;
    margin: 15px auto;
  }
}

/* Columns Editor */
.ce-editorjsColumns_col {
  flex: 50%;
}

.ce-editorjsColumns_wrapper {
  display: flex;
  width: 100%;
  gap: 10px;
  margin-bottom: 10px;
  flex-direction: row;

  .ce-toolbar__actions {
    z-index: 0;
  }

  .ce-toolbar {
    z-index: 4;
  }

  .ce-popover {
    z-index: 4000;
  }
}

@media (max-width: 800px) {
  .ce-editorjsColumns_wrapper {
    flex-direction: column;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

/* Carrousel Editor */
.carrousel-header {
  @apply flex items-center justify-between mb-5;

  .carrousel-title {
    @apply text-2xl font-bold;
  }

  .carrousel-navigation {
    @apply flex items-center gap-2;

    .nav-button {
      @apply flex items-center justify-center w-10 h-10 rounded-full bg-[#f0f0f0] text-[#333] cursor-pointer hover:bg-[#e0e0e0] transition-all duration-300;
    }

    & .carrousel-prev {
      background: url(/assets/left_chevron-8673f684cad8dec9034a0cf3b56f0775eb93ccf6f30a3e6fdfa7ffe488b39ccc.svg) no-repeat center center;
    }

    & .carrousel-next {
      background: url(/assets/right_chevron-e799e9aa0939cf6d98490172d0816749f5d47dbca3033ebd99d5f19f768412f8.svg) no-repeat center center;
    }
  }
}

.carrousel-container {
  @apply w-full flex flex-col overflow-hidden p-5 rounded-lg;

  .carrousel-header {
    .carrousel-title  {
      @apply text-2xl font-bold mb-2.5;
    }
  }

  .carrousel-content {
    @apply flex;
    transition: transform 0.3s ease-in-out;

    .carrousel-item {
      @apply relative max-w-[350px] h-[250px] flex-1 flex flex-col gap-8 items-start bg-[#f0f0f0] m-2.5 p-8 rounded-lg;

      .delete-button {
        @apply absolute top-2 right-2  rounded-full text-red-500 cursor-pointer hover:text-red-700 transition-all duration-300;
      }

      svg {
        width: 24px;
        height: 24px;
      }

      input {
        @apply w-full p-2.5 border border-[#E4E4E4] rounded-lg outline-none text-base;
      }

      p {
        @apply m-0 text-base text-[#333];
      }
    }

    .carrousel-add {
      @apply w-[50px] h-[250px] flex flex-col justify-center items-center text-2xl text-primary hover:text-primary bg-primary m-2.5 p-8 rounded-lg hover:bg-primary transition-all duration-300 cursor-pointer;
    }
  }
}

/* Portraits Editor */

.portraits-container {
  @apply relative flex items-center justify-center gap-6 mx-auto w-full;

  .portraits-item {
    @apply relative rounded-lg h-[400px] max-w-[300px] flex flex-col justify-end items-center pb-6 text-brand-grey;
    background: center center no-repeat;
    background-size: cover;

    .portraits-remove {
      @apply absolute top-2 right-2 py-1 px-2 rounded-full text-red-500 cursor-pointer hover:text-red-700 transition-all duration-300 bg-white hover:bg-brand-grey;
    }

    h3 {
      @apply text-2xl font-bold mb-2;
    }

    input {
      @apply placeholder:text-brand-grey;
    }
  }

  .portraits-add {
    @apply w-[150px] h-[400px] flex flex-col justify-center items-center text-2xl text-primary hover:text-primary bg-primary m-2.5 p-8 rounded-lg hover:bg-primary transition-all duration-300 cursor-pointer;
  }
}

/* Portraits Editor */

.portraits-container {
  @apply relative flex items-center justify-center gap-6 mx-auto w-full;

  .portraits-item {
    @apply relative rounded-lg h-[400px] max-w-[300px] flex flex-col justify-end items-center pb-6 text-brand-grey;
    background: center center no-repeat;
    background-size: cover;

    .portraits-remove {
      @apply absolute top-2 right-2 py-1 px-2 rounded-full text-red-500 cursor-pointer hover:text-red-700 transition-all duration-300 bg-white hover:bg-brand-grey;
    }

    h3 {
      @apply text-2xl font-bold mb-2;
    }

    input {
      @apply placeholder:text-brand-grey;
    }
  }

  .portraits-add {
    @apply w-[150px] h-[400px] flex flex-col justify-center items-center text-2xl text-primary hover:text-primary bg-primary m-2.5 p-8 rounded-lg hover:bg-primary transition-all duration-300 cursor-pointer;
  }
}

/* End Editor JS */

nav.pagy.nav {
  @apply flex items-center -space-x-px;
  a {
    @apply flex justify-center items-center border border-brand-grey font-medium hover:text-primary text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-none dark:border-neutral-700 dark:text-white py-2.5 px-3.5 text-[#252F3A] min-h-[43px] min-w-[45px] dark:hover:bg-white/10 dark:focus:bg-white/10;
    &.current {
      @apply bg-primary text-white border-primary dark:bg-neutral-600 dark:focus:bg-neutral-500;
    }
    &[aria-disabled] {
      @apply pointer-events-none;
    }
    &[aria-disabled]:not(.current) * {
      @apply opacity-50;
    }
  }
}

.btn-check {
  @apply mx-auto w-fit py-2 px-3 flex justify-center items-center gap-x-2 text-sm font-medium transition rounded-xl border border-black/50 bg-black/50 text-white hover:bg-transparent hover:text-black/50 disabled:opacity-50 disabled:pointer-events-none min-w-[130px];
}

.choices {
  position: initial !important;
  &[data-type*="select-one"] {
    .choices__inner {
      @apply pb-[15px];
    }
    &::after {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93bi1pY29uIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==");
      @apply size-6 right-[14px] border-0 -mt-[10px];
    }
  }
  .choices__inner {
    min-height: 50px !important;
    @apply bg-transparent px-[21px] py-[15px] block w-full border-[#C4CED9] rounded-lg font-normal disabled:opacity-50 disabled:pointer-events-none placeholder:text-brand-grey focus:ring-black;
  }
  .choices__list.choices__list--dropdown {
    @apply border-black rounded-lg;
    .choices__input {
      @apply border-b-0;
    }
    .choices__list .choices__item {
      @apply hover:bg-transparent hover:text-[#7493B9];
    }
    .choices__list .choices__item.is-selected, .choices__list .choices__item.is-highlighted {
      @apply bg-transparent text-[#7493B9];
    }
  }
  &.is-focused {
    .choices__inner {
      @apply border-black;
    }
  }
}
.field_with_errors .choices .choices__inner {
  @apply border-red-500;
}
.choices[data-type="select-multiple"] {
  .choices__inner {
    .choices__list--multiple .choices__item {
      @apply bg-primary;
    }
    .choices__input[type="search"] {
      @apply m-0 ring-0 bg-transparent p-0;
    }
  }
}

.choices .choices__list.choices__list--dropdown .choices__input {
  @apply border-b-0 ring-black;
}

.sn-notifications-container {
  --sn-notifications-padding: 2.5rem !important;
  --sn-notifications-gap: 1rem !important;
  --sn-notify-radius: 20px;
  --sn-notify-padding: 18px;
  --sn-notify-icon-size: 56px;
  --sn-notify-close-icon-size: 27px;
  --sn-notify-border-size: 0px;
  --sn-notify-border-color: transparent;
  --sn-notify-close-icon-color: #000;
  --sn-notify-title-color: #000;
  --sn-notify-text-color: #000;

  .custom-notify {
    .sn-notify-icon {
      @apply bg-brand-pink-soft text-black;
    }
  }

  .custom-success {
    .sn-notify-icon {
      @apply bg-brand-soft-green text-black;
    }
  }

  .sn-notify {
    width: auto;
    box-shadow: none;
    @apply max-w-lg bg-brand-grey border border-brand-grey rounded-xl z-40 flex items-center justify-between p-5;

    .sn-notify-icon {
      margin-right: 0;
      order: 1;
      @apply flex items-center justify-center size-12 rounded-2xl;
    }
    .sn-notify-content {
      order: 2;
      @apply ms-6 w-full;

      .sn-notify-title {
        --sn-notify-title-color: #000 !important;
        padding-right: 0;
        @apply text-base font-normal;
      }
    }
    .sn-notify-close {
      position: initial;
      order: 3;
      @apply ms-6 size-6;
    }
  }
}

.sort_link {
  @apply flex gap-x-2.5 items-center;
}

input[type="radio"]:checked + span.pack-card {
  .pack-cta {
    @apply bg-brand-mint;
    & > svg {
      @apply inline;
    }
    & > span:nth-of-type(1) {
      @apply hidden;
    }
    & > span:nth-of-type(2) {
      @apply inline;
    }
  }
}

input[type="radio"] + span.pack-card {
  .pack-cta {
    & > svg {
      @apply hidden;
    }
    & > span:nth-of-type(1) {
      @apply inline;
    }
    & > span:nth-of-type(2) {
      @apply hidden;
    }
  }
}

:has(input[name="simulation[answer]"]:checked) #answer_description {
  @apply flex;
}

#hs-application-sidebar li > div:has(~ :not(.hidden)) .caret {
  @apply rotate-0;
}

rhino-editor,
.trix-content {
  --rhino-text-color: inherit;
  --rhino-button-active-border-color: var(--color-brand-dark-green);
  --rhino-button-active-background-color: var(--color-brand-soft-green);
}

.rhino-editor::part(toolbar__base) {
  flex-wrap: wrap;
}

.rhino-editor::part(toolbar__button--code),
.rhino-editor::part(toolbar__button--code-block),
.rhino-editor::part(toolbar__button--heading) {
  display: none;
}

.rhino-toolbar-select {
  border: 1px solid var(--rhino-border-color);
  border-radius: var(--rhino-border-radius);
  color: light-dark(var(--rhino-button-text-color), var(--rhino-button-dark-text-color));
  font-size: inherit;
  line-height: 16px;
  padding-bottom: 0.4em;
  padding-left: 0.4em;
  padding-top: 0.4em;
}

.rhino-toolbar-button:is(:focus, :hover):not([aria-disabled="true"], :disabled) {
  outline: transparent;
  border-color: var(--rhino-button-active-border-color);
}

.rhino-toolbar-button[part~="toolbar__button--active"],
.rhino-toolbar-button[part~="toolbar__button--active"]:is(:hover, :focus-within) {
  background-color: var(--rhino-button-active-background-color);
}

role-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 0.75em;
  --background: CanvasText;
  color: Canvas;
  --border-color: CanvasText;
}

role-tooltip::part(popover) {
  padding: 0.4em 0.6em;
}

.ProseMirror .column-block {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 24px;
  padding: 8px 0;
}

.ProseMirror .column {
  overflow: auto;
  border: 1px gray dashed;
  border-radius: 8px;
  padding: 8px;
  margin: -8px;
}

.codex-editor .ce-block .ce-block__content {
  @apply max-w-none;
}

.codex-editor .ce-toolbar .ce-toolbar__content {
  @apply max-w-none;
}

.codex-editor .ce-block .ce-block__content h1.ce-header {
  @apply font-normal text-black text-7xl tracking-tight mb-12 p-0;
}

.codex-editor .ce-block .ce-block__content h2.ce-header {
  @apply font-normal text-black text-5xl tracking-tight mb-8 p-0;
}

.codex-editor .ce-block .ce-block__content h3.ce-header {
  @apply font-normal text-black text-3xl tracking-tight mb-6 p-0;
}

.codex-editor .ce-block .ce-block__content h4.ce-header {
  @apply font-normal text-black text-2xl tracking-tight mb-4 p-0;
}

.codex-editor .ce-block .ce-block__content h5.ce-header {
  @apply font-medium text-black text-xl tracking-tight mb-2 p-0;
}

.codex-editor .ce-block .ce-block__content h6.ce-header {
  @apply font-medium text-black text-lg tracking-tight mb-1 p-0;
}

.codex-editor .ce-block .ce-block__content p.ce-paragraph {
  @apply font-normal text-base text-black mb-4;
}

.codex-editor .ce-block a {
  @apply no-underline;
}

.vertical-comparison-table tbody td:not(:first-child), .vertical-comparison-table thead th:not(:first-child) {
  @apply relative;
}

.vertical-comparison-table thead th:not(:first-child) {
  @apply rounded-t-3xl;
}

.vertical-comparison-table tbody td:not(:first-child):hover::after, .vertical-comparison-table thead th:not(:first-child):hover::after {
  @apply bg-[#DBECF7]/30 absolute top-[-5000px] left-0 h-[10000px] w-full;
  content: '\00a0';
}