@import url("./core/reset.css");
@import url("./core/variables.css");

/* Text */
@import url("./core/text/text.css");

/* Layout */
@import url("./core/layout/body.css");
@import url("./core/layout/header.css");
@import url("./core/layout/main.css");
@import url("./core/layout/footer.css");
@import url("./core/layout/page.css");

/* Input */
@import url("./core/forms/button.css");
@import url("./core/forms/checkbox.css");
@import url("./core/forms/input.css");
@import url("./core/forms/radio.css");
@import url("./core/forms/select.css");
@import url("./core/forms/switch.css");

/* Menu */
@import url("./core/menu/menu.css");
@import url("./core/menu/tab-bar.css");
@import url("./core/menu/side-bar.css");
@import url("./core/menu/header-menu.css");

/* Misc */
@import url("./core/misc/crt.css");
@import url("./core/misc/map.css");
@import url("./core/misc/code.css");

@import url("./core/toast.css");
@import url("./core/icon.css");
@import url("./core/drawer.css");
@import url("./core/utils.css");
@import url("./core/separator.css");
@import url("./core/pwa-install.css");


:root { view-transition-name: none; }    /* pas de transition globale */
header { view-transition-name: header; } /* si tu veux animer le header */
main   { view-transition-name: main; }   /* si tu veux animer le main */
footer { view-transition-name: footer; } /* si tu veux animer le footer */
.tab-bar { view-transition-name: tab-bar; }

.lzr {
  .lzr-drawer.intro-drawer {
    border: none;
    > .tile-header {
      background-color: transparent;
      .header-title {
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & .name-intro {
          font-size: 18px;
          font-family: 'rakesly-ultra-light';
          letter-spacing: 2px;
          color: white;
        }
    
        & .pro-intro {
          font-size: 22px;
          font-family: 'rakesly-extra-light';
          letter-spacing: 2px;
          color: var(--palette-1);
        }
    
        & .sub-intro {
          font-size: 12px;
          font-family: 'rakesly-ultra-light';
          letter-spacing: 2px;
          color: white;
        }
      }
      > .tile-caret {
        display: none;
        svg {
          path {
            fill: white;
          }
        }
      }
    }
    > .expandable-wrapper {
      > .expandable-inner {
        > .inner-body {
          & .main-intro {
            font-weight: 100;
            font-size: 14px;
            margin-bottom: 0;
            color: white;

            a {
              color: var(--palette-1);
              text-decoration: none;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
  
  .lzr-drawer.group-drawer {
    border: none;
    
    > .tile-header {
      --bg-url: url('../assets/medias/images/maquillages.webp');
      height: fit-content;
      align-items: center;
      background-image: var(--bg-url);
      background-position: center; 
      background-size: cover;
      height: 80px;
      position: relative;
      padding: 16px;

      .darkener {
        position: absolute;
        inset: 0;
        background-color: hsla(0, 0%, 0%, .7);
        z-index: 10;
      }

      .header-title {
        color: white;
        font-family: 'rakesly-extra-light';
        font-size: 30px;
        letter-spacing: 7px;
        text-transform: uppercase;
        line-height: normal;
        font-weight: 400;
        z-index: 20;
      }

      > .tile-caret {
        z-index: 20;
        svg {
          path {
            fill: white;
          }
        }
      }
      
      > input[type="checkbox"] {
        z-index: 30;
      }
    }
    > .expandable-wrapper {
      > .expandable-inner {
        > .inner-body {
          gap: 16px;
          padding: 16px;

          .text-separator {
            font-family: 'rakesly-extra-light';
            font-size: 20px;
            letter-spacing: 2px;
            width: 100%;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--color--fg-default);
          }
        }
      }
    }
  }

  .lzr-drawer.prestation-drawer {
    --bg-color: var(--color--bg-20);
    border-color:  var(--bg-color);
    box-shadow: var(--box-shadow--default);

    > .tile-header {
      background-color: var(--bg-color);
      justify-content: flex-end;
      align-items: center;
      min-height: 64px; max-height: 64px;
      padding: 16px;

      .header-title {
        display: inline;
        width: 100%;
        white-space: nowrap;
        overflow-y: hidden;
        text-overflow: ellipsis;
        font-family: 'rakesly-extra-light';
        letter-spacing: 1.5px;
        font-size: 18px;
        line-height: 22px;
        color: var(--palette-1);
      }
      .price {
        margin-left: auto;
        white-space: nowrap;
        color: white;
      }
      > .tile-caret {
        margin-left: 0;
        svg {
          path {
            fill: var(--palette-1);
          }
        }
      }
    }
    > .expandable-wrapper {
      > .expandable-inner {
        > .inner-body {
          border-top: 2px solid var(--palette-1);
          background-color: var(--bg-color);
          font-size: 14px;
          padding: 8px 16px;
          gap: 8px;

          .sub-presta-block {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;

            .title {
              color: var(--palette-1);
              font-weight: 400;
            }
          }

          i {
            color: var(--color--fg-35);
          }
        }
      }
    }
  }
}
.prestations-groups-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.presta-slider {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  height: 64px;
  overflow-x: scroll;
  overflow-y: hidden;
  /* background-color: magenta; */
  gap: 8px;

  .presta-picture-small {
    --img-url: 'attaches-2';
    height: 100%;
    aspect-ratio: 1/1;
    border: none;
    /* border: 1px solid gray; */
    background-color: black;
    background-image: var(--img-url);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

#picturesCarouselContainer {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100svw; width: 100svw; max-width: 100svw;
  min-height: 100svh; height: 100svh; max-height: 100svh;
  z-index: 500;

  display: flex;
  justify-content: center;
  align-items: center;

  &.hidden {
    display: none;
  }

  .pictures-carousel-bg {
    display: flex;
    min-width: 100%;
    min-height: 100%;
    background-color: hsla(0, 0%, 0%, .7);
  }

  .pictures-carousel-container {
    position: absolute;
    display: flex;
    max-width: 100%;
    max-height: 100%;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .carousel-arrows-container {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .arrow-button {
        width: 50%;
        height: 100%;
        border: none;
        display: flex;
        align-items: center;
        font-size: 64px;
        font-family: 'consolas';
        color: white;
        background-color: transparent;
        opacity: .5;

        &.left {
          justify-content: flex-start;
        }
        &.right {
          justify-content: flex-end;
        }

        &:active {
          background-color: hsl(0, 0%, 100%, .2);
        }
      }
    }
  }

}