@font-face {
  font-family: adelia;
  src: url('/static/common/css/fonts/adelia.ttf') format('truetype');
}

@font-face {
  font-family: kiteOne;
  src: url('/static/common/css/fonts/KiteOne-Regular.ttf') format('truetype');
}

:root {
  /* --: #99a799; */
  /* --: #d3e4cd; */
  /* --- MAIN colors --- */
  --text-color: #000000;
  /* old green lite #d3e4cd*/
  --color-green-light: #d3e4cd;
  /* old green dark */
  --color-green-dark: #99a799;
  /* old orange lite: #f2ddc1 new : #fcdbaf*/
  --color-orange-light: #f2ddc1; /*#fcdbaf*/

  --color-blue: #3ce8ff;

  /* new */
  --blue-cta: var(--color-blue);

  --color-dark: #181818;
  --color-light: #e6e6e6;

  /* UI colors */
  --valid: #60fd60;
  --disabled: #adaeb3;
  --warning: #ffa26c;
  --danger: #ff5555;

  /* specific colors */
  --blue: #45bbff;

  --common-br: 6px;
  /* --- fonts --- */
  --title-font: adelia;
  --main-font: kiteOne;

  font-size: clamp(12px, calc(8px + 0.5vmax), 22px);
  font-family: var(--main-font);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-green-light);
}

body:has(dialog[open]) {
  overflow: hidden;
}

h1 {
  font-size: 1.5rem;
  font-family: var(--title-font) !important;
  font-weight: 100 !important;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.15rem;
}

h1,
h2,
h3,
h4,
.h-like {
  font-family: var(--main-font);
  font-weight: 800;
}

.box {
  --background: var(--color-orange-light);
  --background-mix-color: transparent;
  --background-mix-ratio: 0%; /* 30%*/
  --br: var(--common-br);
  --shadow: var(--background);
  padding: 8px 15px;
  border-radius: var(--br);
  background: color-mix(in srgb, var(--background) calc(100% - var(--background-mix-ratio)), var(--background-mix-color) var(--background-mix-ratio));
  box-shadow: 0 0 3px 1px color-mix(in srgb, var(--shadow) 75%, #000 25%);
  backdrop-filter: blur(4px);

  /* &:is(.fancy) { */
  /* border-radius: 25% 25% 25% 25% / 25% 10% 25% 10%; */
  /* } */

  &:is(.box-action) {
    --background: var(--blue-cta);
  }

  &:is(.box-wrapper) {
    --background: var(--color-green-light);
    --background-mix-ratio: 30%;
  }
}

dialog {
  visibility: hidden;
  max-width: min(100vw, 1200px);
  max-height: 100vh;
  padding: 10px 20px;
  opacity: 0;
  transition:
    opacity 0.4s ease 0s,
    visibility 0s 0.4s;
  overflow: visible;

  &::backdrop {
    background: color-mix(in srgb, var(--color-orange-light) 60%, transparent 40%);
    backdrop-filter: blur(8px);
    transition: opacity ease 1s;
  }

  &:is([open]) {
    display: flex;
    visibility: visible;
    opacity: 1;
    transition:
      opacity 0.4s ease 0.05s,
      visibility 0s 0s;

    &::backdrop {
      opacity: 1;
    }
  }

  .close-dialog {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
  }

  .title {
    font-size: 1.8rem;
  }

  .content {
    line-height: 1.8;
    max-height: 75vh;
    overflow-y: auto;

    .image {
      max-width: 40%;
      float: left;
    }
  }

  .box {
    --background-mix-color: var(--background);
  }
}

.icon {
  width: 24px;
  height: 24px;
}

.field {
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--main-font);
}

label.search-field {
  padding: 5px 10px;
  background: var(--color-green-light);
  border: solid 1px var(--blue);
  border-radius: 1000px;

  .field {
    background: none !important;
  }
}

button,
a.button {
  --background: var(--color-orange-light);
  --border: var(--blue);
  --shadow: var(--blue);

  --background-mix-color: #fff;
  --background-mix-ratio: 10%;
  --border-mix-color: #000;
  --border-mix-ratio: 10%;

  position: relative;
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--main-font);
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-color);

  background: color-mix(in srgb, var(--background) calc(100% - var(--background-mix-ratio)), var(--background-mix-color) var(--background-mix-ratio));
  border: solid 1px color-mix(in srgb, var(--border) calc(100% - var(--border-mix-ratio)), var(--border-mix-color) var(--border-mix-ratio));
  box-shadow: 0px 0px 6px 1px transparent;
  transition: ease 0.2s;

  &:is(.valid) {
    --background: var(--valid);
    --border: var(--valid);
    --shadow: var(--valid);
  }

  &:is(.warning) {
    --background: var(--warning);
    --border: var(--warning);
    --shadow: var(--warning);
  }

  &:is(.danger) {
    --background: var(--danger);
    --border: var(--danger);
    --shadow: var(--danger);
  }

  &:is(.wait) {
    --button-text-color: rgba(0, 0, 0, 0);
    --background: var(--disabled);
    pointer-events: none;
    color: transparent !important;

    &::after,
    &::before {
      content: '';
      position: absolute;
      display: block;
      width: 30px;
      aspect-ratio: 1 / 1;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      border-radius: 50%;
      box-shadow:
        0px 0px 5px 0px var(--color-green-light),
        inset 0px 0px 5px 0px var(--color-green-light);
      animation: pulse-button 2s ease-out infinite;
      opacity: 0;
    }

    &::after {
      animation-delay: 1s;
    }
  }

  &:is(.disabled) {
    --background: var(--disabled);
    --border: var(--disabled);
    pointer-events: none;
  }

  &:is(.button-icon) {
    padding: 8px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;

    .icon {
      width: 30px;
      height: 30px;
    }
  }
}

@media (hover: hover) {
  :is(button, a.button):hover {
    box-shadow: 0px 0px 6px 1px var(--shadow);
  }
}

@keyframes pulse-button {
  from {
    opacity: 1;
    transform: scale(0.5);
  }

  to {
    opacity: 0;
    transform: scale(2);
  }
}

.icon {
  --color: var(--text-color);
  fill: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 100%;
    height: 100%;
    fill: inherit;
  }
}

.large-column {
  max-width: 100%;
  flex: 2 1 400px;
}

.small-column {
  max-width: 100%;
  flex: 1 1 300px;
}

#alert-box-container {
  --margin-y: 15px;
  --alert-color: none;
  --alert-background-color: var(--color-green-light);
  position: fixed;
  bottom: 15px;
  right: calc(-1 * var(--margin-y));
  translate: 100%;
  max-width: calc(100vw - var(--margin-y) * 2);
  z-index: 5000;

  .alert-box {
    max-width: 100%;
    border: solid 1px var(--alert-color);
    background: var(--alert-background-color);
    box-shadow: 0px 0px 5px 2px var(--alert-color);
    border-radius: 6px;
    translate: 0;
    transition: translate 0.2s ease;

    .icon {
      --color: var(--alert);
    }

    &:is(.success) {
      --alert-color: var(--valid);
    }

    &:is(.error) {
      --alert-color: var(--danger);
    }

    &:is(.open) {
      translate: calc(-100% - var(--margin-y) * 2);
    }
  }
}

footer {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  background: var(--color-orange-light);
  padding: 15px 10px;
  box-shadow: 0px 2px 6px var(--color-dark);
}

.yt-player-wrapper {
  position: relative;
  width: min(100%, 600px);
  min-width: max-content;
  aspect-ratio: 16 / 9;

  .yt-consent-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    flex-direction: column;
    line-height: initial;
    font-size: 0.8rem;
    padding: 5px;
    gap: 10px;
    border-radius: 10px;

    width: 100%;
    height: 100%;
    border: solid 1px var(--danger);
  }

  iframe.yt-player {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

body:is(.yt-consent-true) .yt-consent-wrapper {
  display: none;
}

.dropzone {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative !important;
  padding: 18px 8px;
  background: var(--color-green-light);
  border-radius: 4px;
  cursor: pointer;

  .dropzone-text {
    width: max-content;
    font-size: 0.8rem;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .dropzone-remove {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    opacity: 0;
    background: color-mix(in srgb, var(--danger) 30%, transparent);
    border: solid 1px var(--danger);
    transition: opacity 0.2s ease;
  }

  input[type='file'] {
    display: none;
  }

  &:is(.has-file) {
    .dropzone-remove {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &:is(.has-file):hover {
    .dropzone-remove {
      opacity: 1;
    }

    .dropzone-text {
      opacity: 0;
    }
  }
}