@accent-color: #ed145b;
@accent-color-200: #ffb1cc;
@accent-color-600: #b20e44;
@accent-color-700: #77092d;
@accent-color-800: #3c0517;
@dark-color-950: #1b1b1b;
@dark-color-900: #2c2b28;
@dark-color-800: #403d39;
@dark-color-700: #524e49;
@dark-color-600: #64605b;
@dark-color-500: #948f89;
@dark-color-975: #1c1b19;
@outseta-dark: #171717;

.bg-outseta-dark {
  background-color: @outseta-dark;
}
.bg-youtube {
  background-color: #ff0000;
}
.bg-facebook {
  background-color: #1877f2;
}
.bg-instagram {
  background-color: #C13584;
}
.color-accent, .text-accent {
  color: @accent-color;
}
.color-accent-200, .text-accent-200 {
  color: @accent-color-200;
}
.border-accent {
  border-color: @accent-color;
}
.bg-accent {
  background-color: @accent-color;
}
.bg-accent-600 {
  background-color: @accent-color-600;
}
.bg-accent-700 {
  background-color: @accent-color-700;
}
.bg-accent-800 {
  background-color: @accent-color-800;
}

.bg-dark-950 {
  background-color: @dark-color-950;
}
.bg-dark-900 {
  background-color: @dark-color-900;
}
.bg-dark-800 {
  background-color: @dark-color-800;
}
.bg-dark-700 {
  background-color: @dark-color-700;
}
.bg-dark-975 {
  background-color: @dark-color-975;
}
.border-dark-800 {
  border-color: @dark-color-800;
}
.border-dark-700 {
  border-color: @dark-color-700;
}
.border-dark-900 {
  border-color: @dark-color-900;
}
.border-dark-950 {
  border-color: @dark-color-950;
}

.text-dark-700 {
  color: @dark-color-700;
}
.text-dark-600 {
  color: @dark-color-600;
}
.text-dark-500 {
  color: @dark-color-500;
}
.text-dark-800 {
  color: @dark-color-800;
}
.text-dark-900 {
  color: @dark-color-900;
}
.text-dark-950 {
  color: @dark-color-950;
}

.font-size-title {
  font-size: 2.5rem;
  font-weight: 600;
}
.font-size-heading {
  font-size: 1.5rem;
  font-weight: 600;
}

.viui{
  .navbar{
    .bg-dark-950;
  }
  &.desktop{
    .navbar{
      .bg-dark-900;
    }
  }
  .navbar .right a {
    font-size: 1.5rem;
    width: auto;
    padding: 0px 0.5rem;
  }
  .navbar{
      &::after{
          display: none !important;
      }
      height: 72px;
      .navbar-inner{
        height: 100%;
      }
  }
  .dashboard-vl-branding-svg{
    z-index: 9999;
    width: 64px;
    top: -60px;
    left: 8px;
    position: absolute;
    pointer-events: none;
  }
  .page-content {
    .bg-dark-950;
    padding-top: 8px;
  }
  &.desktop{
    .page-content {
      .bg-dark-950;
      padding: 1rem;
    }
  }
  .list ul {
    .bg-dark-950;
  }
  .media-card {
    aspect-ratio: 1 / 1;
    border: 1px solid #524e49;
  }
  .media-card.folder {
    /*aspect-ratio: 16 / 6;*/
  }  
  /* Fixed Bottom Toolbar Styles */
  .bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c2b28; /* bg-dark-900 */
    padding-top: 0.75rem; /* pt-3 */
    padding-bottom: 0.75rem; /* pb-3 */
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #403d39; /* border-t border-dark-800 */
  }
  
  .bottom-toolbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #a0aec0; /* text-gray-400 */
    font-size: 0.75rem; /* 0.75rem text-xs */
    padding: 0.25rem; /* px-1 */
  }
  
  .bottom-toolbar a i {
    font-size: 1.25rem; /* text-2xl */
    margin-bottom: 0.25rem; /* mb-1 */
  }
  
  .bottom-toolbar a.active {
    color: @accent-color; /* color-accent */
  }
  
  .bottom-toolbar a.plus {
    background-color: @accent-color; /* color-accent */
    color: white;
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -2rem; /* mt-[-2rem] */
    border: 4px solid @dark-color-900;
  }
  
  .bottom-toolbar a.plus i {
    font-size: 2rem; /* text-3xl */
    margin-bottom: 0;
  }
  
  /* Tutorial Styles */
  .tutorial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on larger screens (sm and up) */
    gap: 1rem; /* space-y-4 */
  }
  @media (min-width: 640px) {
    .tutorial-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns on larger screens (sm and up) */
    }
  }
  
  .tutorial-item {
    /* flex items-center bg-dark-800 rounded-xl p-4 */
    border-radius: 0.25rem;
    overflow: hidden;
  }
  .tutorial-thumbnail {
    width: 100%; /* Make image fill container */
    height: auto;
    aspect-ratio: 16/9;
    background-color: #2c2b28;
  }
  
  .tutorial-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the whole area, can crop */
  }
  
  /* Imported Fonts Styles */
  .imported-fonts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
    margin-bottom: 1rem;
  }
  .imported-fonts-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    background-color: #403d39;
  }
  .imported-fonts-item span {
    color: #fff;
    font-size: 0.875rem;
  }
  .imported-fonts-item button {
    color: #fff;
    cursor: pointer;
  }
  
  /* No Fonts Message */
  .no-fonts-message {
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: #403d39;
    color: #a0aec0;
    margin-top: 1rem;
    font-size: 0.875rem;
  }
}


#account.page-content {
  .o--App--profileWidget {
    border-width: 0px;
  }
}

.web-app-pricing {
  /* Add padding top to the container of the highlighted card to prevent badge cutoff */
  .highlighted-card-container {
    /*padding-top: 0.75rem;*/ /* Adjust as needed, corresponds to mt-3 */
    position: relative;
  }
    /* Position badge within the padded container */
  .highlighted-card-badge {
    position: absolute;
    top: -12px; /* Align to the top of the padded container */
    right: 1rem; /* Adjust as needed, corresponds to mr-4 */
  }

  /* Basic styling for the toggle switch */
  .toggle-checkbox:checked + .toggle-label {
    background-color: #ed125a; /* Accent color when checked */
  }
  .toggle-checkbox:checked + .toggle-label::after {
    transform: translateX(100%);
    border-color: white;
  }
  .toggle-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    width: 16px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
  }
}