// !!! COMPONENTS  !!!

// 1. header // footer // main

$public-nav-max: 1024px;

.nav-desktop-only {
  @media (max-width: $public-nav-max) {
    display: none !important;
  }
}

.nav-mobile-only {
  display: none !important;

  @media (max-width: $public-nav-max) {
    display: flex !important;
  }
}

.nav-hamburger-only {
  display: none !important;

  @media (max-width: $public-nav-max) {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.gradient-background {
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 115, 12, 0) 0%, rgba(0, 153, 255, 0.3) 55%, rgba(112, 0, 255, 0.3) 100%);
}

.home-container-new {
  width: 100%;
  max-width: 100%;
}

.layer {
  max-width: 100%;
  height: auto;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px;
  height: 100%;
  width: 100%;

  @include media-breakpoint-down(md) {
    padding: 0 8px;
    gap: 4px;
  }

  .buttons {
    @include media-breakpoint-down(md) {
      margin-top: 0 !important;
      flex-shrink: 0;
    }
  }
}

.logo-wrap {
  display: flex;
  flex-shrink: 0;

  img {
    width: 140px;
    height: auto;
  }

  @include media-breakpoint-down(sm) {
    img {
      width: 100px;
    }
  }
}

.navbar {
  z-index: 7;
  font-family: "Poppins", sans-serif;
  height: 90px;
  padding: 6px 20px;
  background-color: var(--white-color);
  //border-bottom: 0.5px solid var(--navbar-border-color);

  @include media-breakpoint-down(md) {
    padding: 6px 0 6px 8px;
  }

  img {
    vertical-align: baseline;
  }

  .button-gradient {
    margin-left: 10px;
  }

  .link-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    //width: 210px;
    margin-left: auto;
    margin-right: 10px;

    a {
      font-size: 15px;
    }
  }

  .navbar-lock-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    line-height: 0;
  }

  .nav-link {
    color: var(--text-color) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    margin: 0 12px;
    white-space: nowrap;

    &.display-flex-center {
      gap: 6px;
    }

    &:hover {
      color: var(--text-color-hover) !important;
    }

    .img-lock {
      margin-left: 0;
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
  }

  .nav-link-dark {
    color: #FFFFFF !important;
  }

  .open-menu {
    color: var(--dark-blue-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;

    @media (max-width: $public-nav-max) {
      margin: 0 4px 0 8px !important;
      padding: 4px;
      min-width: 44px;
      min-height: 44px;
    }

    img {
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }

  }

  .navbar-lang-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    margin-right: 4px;

    .navbar-lang-link {
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      margin: 0 5px;
      min-width: auto;
      opacity: 0.7;

      &.active {
        opacity: 1;
        text-decoration: underline;
        text-underline-offset: 4px;
      }

      &:hover {
        opacity: 1;
      }
    }
  }
}

.navigation-menu {
  display: none;
  min-width: 320px;
  height: auto;
  position: absolute;
  font-family: "Poppins", sans-serif;
  z-index: 1000;
  right: -2px;
  top: -2px;
  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running navigation-menu-appear;
  transition: transform 1s ease;

  &.d-flex {
    @media (max-width: $public-nav-max) {
      position: fixed;
      inset: 0;
      right: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      min-width: 0;
      min-height: 100vh;
      max-width: none;
      z-index: 10050;
      align-items: stretch;
      justify-content: stretch;
    }
  }


  .dropdown-menu-container {
    width: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;


    //padding-bottom: 40px;
    //width: 100%;
    //height: 100%;

    font-family: 'Poppins', sans-serif;
    line-height: 28px;
    font-size: 15px;
    font-weight: 300;

    border: none;
    background-color: #F4F4F4;

    opacity: 1;
    transition: transform 0.5s ease;

    li {
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: end;

      img {
        border: 1px solid var(--border-color);
        border-radius: 50%;
        width: var(--avatar-sm-size);
        height: var(--avatar-sm-size);
      }

      a {
        font-size: 15px;
        min-width: 200px;
        text-decoration: none;
      }

      &:not(:first-child):hover {
        .drop-items,
        svg,
        {
          color: var(--gray-color) !important;
        }
      }
    }

    .gray-hover:hover {
      color: gray !important;
    }

    li:first-child {
      align-items: center;
    }

    .drop-items {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 200px;
      color: var(--text-color);
    }

    .dropdown-link {
      height: 76px;
      width: 120px;
    }

    .icon-wrap {
      min-width: 80px !important;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 2px;
    }

    .icon-wrap-lock {
      img {
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        border: none;
      }
    }

    .no-hover:hover {
      color: var(--text-color) !important;

      * {
        color: var(--text-color) !important;
      }
    }

  }


  .dropdown-menu-mobile {
    background: #F4F4F4;
    text-align: center;
    color: var(--text-color);
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0 24px 40px;
    overflow-y: auto;

    @media (max-width: $public-nav-max) {
      position: fixed;
      inset: 0;
      left: 0;
      right: 0;
      width: 100vw;
      max-width: 100vw;
    }

    @media (min-width: ($public-nav-max + 1)) {
      display: none !important;
    }

    .close-dropdown {
      padding-top: 16px !important;
    }

    .mobile-menu-item {
      margin: 0;

      .link {
        color: var(--text-color);
        font-weight: 500;
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 0.5px;
        display: inline-block;
        padding: 10px 0;

        &:hover {
          color: var(--text-color-hover) !important;
        }
      }
    }

    .mobile-menu-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-top: 28px;

      .button {
        margin-top: 0;
        padding: 10px 28px;
        font-size: 16px;
        min-width: 200px;
        width: auto;
      }
    }

    .mobile-lang-switcher {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 28px 0 0;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      list-style: none;

      a,
      .mobile-lang-link {
        min-width: auto !important;
        width: auto;
        padding: 4px 10px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
        color: var(--text-color);
        text-decoration: none;
        opacity: 0.7;

        &.active {
          opacity: 1;
          text-decoration: underline;
          text-underline-offset: 3px;
        }

        &:hover {
          opacity: 1;
          color: var(--text-color-hover) !important;
        }
      }
    }

  }

}

main {
  position: relative;
  background: #FFFBF9;
  min-height: 88vh;
  overflow: hidden;

  @include media-breakpoint-down(lg) {
    min-height: 70vh;
  }
}

.background-gradient {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 400px;
  opacity: 0.3;
  background: linear-gradient(180deg, rgba(212, 90, 0, 0.00) 0%, #D45A00 100%);
}

.left-circle {
  left: -200px;
  bottom: -300px;

  @include media-breakpoint-down(md) {
    display: none;
  }
}

.right-circle {
  right: -200px;
  bottom: -300px;

  @include media-breakpoint-down(md) {
    display: none;
  }
}

.back-circle {
  position: absolute;
  width: 404px;
  height: 491.084px;
  flex-shrink: 0;

  @include media-breakpoint-down(md) {
    display: none;
  }
  border-radius: 491.084px;
  opacity: 0.5;
  background: var(--Home-2P, #D589DD);
  filter: blur(98.75556182861328px);
}

.z-index-10 {
  position: relative;
  z-index: 10;
}

.base-shadow {
  -webkit-box-shadow: 0 4px 11px -4px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0 4px 11px -4px rgba(66, 68, 90, 1);
  box-shadow: 0 4px 11px -4px rgba(66, 68, 90, 1);
}

.footer {
  position: relative;
  z-index: 100;

  * {
    color: #8d96a0;
  }

  ul {
    flex-wrap: wrap;
    gap: 15px;

    li {

    }

    a, i {
      &:hover {
        color: #4493f8;
      }
    }

  }

  .pb-md-8 {
    @include media-breakpoint-down(lg) {
      padding-bottom: 60px !important;
    }

  }

  .link-wrap {
    width: 300px;
  }

  .lang-wrap {
    width: 130px;
  }
}
.accordion-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;

  @include media-breakpoint-down(md) {
    font-size: 16px;
  }
}
// Cookie Banner Styles
.modern-cookie-banner {
  max-width: 800px;
  position: fixed;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 9999;
  width: 90%;
  animation: slideUp 0.3s ease-out;

  // Container with border
  .cookie-banner-container {
      background: white;
      border-radius: 16px;
      border: 1px solid #000;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
      overflow: hidden;
  }

  // Content wrapper
  .cookie-banner-content {
      padding: 30px;
  }

  // Intro text
  .ch-cookie-consent__intro {
      color: #333;
      font-size: 16px;
      line-height: 1.6;
      margin: 0 0 25px 0;
      text-align: start;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

      // Link in intro
      .cookie-link {
          color: #6b46c1;
          text-decoration: underline;

          &:hover {
              color: #553a9a;
          }
      }
  }

  // Button groups
  .ch-cookie-consent__btn-group {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;

      // Button styles
      .btn {
          padding: 12px 32px;
          border: none;
          border-radius: 25px;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          min-width: 140px;

          // Reject button
          &-reject {
              background: white;
              color: #333;
              border: 1.5px solid #ddd;

              &:hover {
                  background: #f5f5f5;
                  border-color: #bbb;
              }
          }

          // Customize button
          &-customize {
              background: white;
              color: #333;
              border: 1.5px solid #ddd;

              &:hover {
                  background: #f5f5f5;
                  border-color: #bbb;
              }
          }

          // Accept button
          &-accept {
              background: #0f172a;
              color: white;
              border: 1.5px solid #0f172a;

              &:hover {
                  background: #1e293b;
                  border-color: #1e293b;
              }
          }

          // Save preferences button
          &-save {
              background: #0f172a;
              color: white;
              border: 1.5px solid #0f172a;

              &:hover {
                  background: #1e293b;
                  border-color: #1e293b;
              }
          }
      }
  }

  // Cookie categories section
  #cookie-categories {
      margin: 30px 0;
      border-top: 1px solid #e5e5e5;
      padding-top: 20px;

      // Individual category
      .cookie-category {
          padding: 20px 0;
          border-bottom: 1px solid #e5e5e5;

          &:last-child {
              border-bottom: none;
          }

          // Category header
          .category-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;

              h4 {
                  margin: 0;
                  font-size: 18px;
                  color: #333;
                  font-weight: 600;
              }
          }

          // Category description
          .category-description {
              color: #666;
              font-size: 14px;
              line-height: 1.5;
              margin: 8px 0;
          }

          // Category details (retention info)
          .category-details {
              color: #999;
              font-size: 13px;
              font-style: italic;
              margin: 5px 0 0 0;
          }
      }
  }

  // Toggle switch component
  .toggle-switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 26px;

      input {
          opacity: 0;
          width: 0;
          height: 0;

          // Checked state
          &:checked {
              + .toggle-slider {
                  background-color: #3b82f6;

                  &:before {
                      transform: translateX(22px);
                  }
              }
          }
      }

      // Slider track
      .toggle-slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #cbd5e1;
          transition: 0.3s;
          border-radius: 34px;

          // Slider thumb
          &:before {
              position: absolute;
              content: "";
              height: 20px;
              width: 20px;
              left: 3px;
              bottom: 3px;
              background-color: white;
              transition: 0.3s;
              border-radius: 50%;
          }
      }
  }

  // Policy links section
  .policy-links {
      text-align: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #e5e5e5;

      .policy-link {
          color: #666;
          font-size: 14px;
          margin: 0 15px;
          text-decoration: none;

          &:hover {
              color: #6b46c1;
              text-decoration: underline;
          }
      }
  }

  // Responsive styles
  @media (max-width: 768px) {
      width: 95%;
      bottom: 10px;

      .cookie-banner-content {
          padding: 20px;
      }

      .ch-cookie-consent__btn-group {
          flex-direction: column;
          align-items: center;

          .btn {
              width: 100%;
              max-width: 250px;
          }
      }

      .ch-cookie-consent__intro {
          font-size: 14px;
      }
  }

  @media (max-width: 480px) {
      #cookie-categories {
          .cookie-category {
              .category-header {
                  h4 {
                      font-size: 16px;
                  }
              }

              .category-description {
                  font-size: 13px;
              }

              .category-details {
                  font-size: 12px;
              }
          }
      }
  }
}

// Animation keyframes
@keyframes slideUp {
  from {
      opacity: 0;
      transform: translateX(-50%) translateY(50px);
  }
  to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
  }
}