@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import 'tailwindcss';
@import 'swiper/css/bundle';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --breakpoint-xs: 30rem;
    --color-sl-base: #251e2b;
    --color-sl-primary: #5b188f;
    --color-sl-secondary: #c096f6;
    --color-sl-tertiary: #32283a;
    --color-sl-quaternary: #5b118f;
    --color-sl-quinary: #42394a;
    --color-sl-text: #fbfbfb;
    --color-sl-senary: #f1a85f;
    --color-sl-septenary: #170a21;
    --text-shadow-xl: 0px 0px 50px rgba(0, 0, 0, 0.6);
    --text-shadow-custom: text-shadow: var(--text-shadow-xl);
}

html {
    font-size: 16px;
    font-family: var(--font-sans);
    scroll-behavior: smooth;
}

[x-cloak] {
  display: none !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.customScrollbar::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }
  .customScrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-sl-base);
    border-radius: 0.5rem;
    border: 0.1rem solid var(--color-sl-base);
  }
  .customScrollbar::-webkit-scrollbar-track {
    /* background: #1f1f1f; */
    border-radius: 0.5rem;
  }
  .customScrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-sl-base);
    border-radius: 0.5rem;
    border: 0.1rem solid var(--color-sl-base);
  }
  .customScrollbar::-webkit-scrollbar-thumb:active {
    background-color: var(--color-sl-base);
    border-radius: 0.5rem;
    border: 0.1rem solid var(--color-sl-base);
  }


  .swiper-pagination-bullet-active {
    background-color: var(--color-sl-senary) !important;
  }

  .ring-custom-highlight {
    box-shadow: 0 0 0 2px rgba(192, 150, 246, 0.7);
    border-radius: 0.375rem; /* sama seperti rounded-md */
}

.card-glow {
    border: 1px solid var(--color-sl-quinary);
    box-shadow: 0 0 10px rgba(192, 150, 246, 0.15);
    transition: box-shadow 0.3s ease;
}
.card-glow:hover {
    box-shadow: 0 0 20px rgba(192, 150, 246, 0.35);
}

.theme-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-sl-primary) var(--color-sl-tertiary);
}

.theme-scrollbar::-webkit-scrollbar {
  width: 0.6rem;
  background: var(--color-sl-tertiary);
  border-radius: 0.5rem;
}

.theme-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--color-sl-primary), var(--color-sl-secondary));
  border-radius: 0.5rem;
  border: 2px solid var(--color-sl-tertiary);
  box-shadow: 0 2px 8px rgba(91, 24, 143, 0.15);
}

.theme-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--color-sl-secondary), var(--color-sl-primary));
}

.theme-scrollbar::-webkit-scrollbar-track {
  background: var(--color-sl-tertiary);
  border-radius: 0.5rem;
}