:root {
  --bs-nav-pills-link-active-bg: #dee2e6;
  --bs-nav-pills-link-active-color: #22222F;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 8px;
  --color-base-100: #FFFFFF;
  --color-base-200: #EFEFF4;
  --color-base-300: #E2E4E8;
  --bs-tertiary-bg: var(--color-base-200);

  --bs-body-color: #000000;

  --bs-secondary: #0b0809;
  --bs-secondary-rgb: 11, 8, 9;
  --bs-dark: #0b0809;

  --bs-primary: #3F5EFB;
  --bs-primary-rgb: 63, 94, 251;
  --bs-info: #3F5EFB;
  --bs-info-rgb: 0, 122, 255;

  --bs-success: #31D158;
  --bs-success-rgb: 49, 209, 88;

  --bs-warning: #fbbf24;
  --bs-warning-rgb: 251, 191, 36;

  --bs-danger: #E53935;
  --bs-danger-rgb: 229, 57, 53;

  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");
  --bs-form-valid-border-color: var(--bs-success);
  --bs-form-valid-color: var(--bs-success);
}

.dropdown-menu {
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
  padding: 0.5rem !important;
  min-width: 220px !important;
  margin-top: 0.5rem !important;
}

.dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 200px;
}

.btn-light {
  --bs-btn-bg: var(--color-base-200);
  --bs-btn-border-color: var(--color-base-200);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
}

.bg-base-200 {
  background-color: var(--color-base-200);
}

.bg-base-100 {
  background-color: var(--color-base-100);
}

.bg-base-300 {
  background-color: var(--color-base-300);
}

.toast {
  z-index: 1060;
}

.blue-gradient {
  background: linear-gradient(45deg, #0088CC, #2AABEE, #00aced);
  background-size: 400% 100%;
  animation: gradient 10s ease infinite;
}

.instagram-gradient {
  background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.red-purple-gradient {
  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
  background-size: 400% 100%;
  animation: gradient 10s ease infinite;
}

.description-text.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lg-video-cont {
  width: auto;
  height: 100% !important;
  position: relative;
}

.lg-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-video-object {
  width: auto;
  height: 100%;
}

.clickable {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.clickable:active {
  transform: scale(0.98);
}

.btn:active {
  transform: scale(0.98);
}

.btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.horizontal-scroll {
  overflow-x: auto;
  /*scroll-snap-type: x mandatory;*/
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll div {
  scroll-snap-align: start;
}

.styled-pills .nav-link {
  color: var(--bs-black);
  background-color: var(--color-base-200);
  font-weight: 500 !important;
}

.styled-pills .nav-link.active {
  color: #fff;
  background-color: var(--bs-body-color);
}

.htmx-indicator {
  display: none;
  opacity:0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
    opacity:1;
    display: block;
}
.htmx-request.htmx-indicator{
    opacity:1;
  display: block;
}

.hx-state-loading {
  display: none;
}
.htmx-request > .hx-state-loading {
  display: block;
}
.htmx-request > .hx-state-default {
  display: none;
}

.text-collapsible {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.text-collapsible.collapsed {
  max-height: 150px;
}

.lg-sub-html {
  padding: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.segmented-control {
  background-color: var(--bs-secondary-bg);
  padding: 4px;
  border-radius: 12px;
}
.segmented-control .nav-link {
  color: var(--bs-body-color);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.segmented-control .nav-link.active {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  font-weight: 600;
}

.pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  font-size: 11px;
  border-radius: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  vertical-align: middle;
}

.pro-badge--dark {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pro-badge--light {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.plan-card:has(input[type="radio"]:checked) {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.plan-card:not(:has(input[type="radio"]:checked)):hover {
    border-color: var(--bs-border-color-translucent);
    background-color: var(--bs-gray-100) !important;
}

.backdrop-blur {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}