@import url('/css/ticket-details.css');

/* Theme Variables */
:root {
  /* Base Colors */
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --secondary: #f59e0b;
  --secondary-dark: #d97706;
  --secondary-light: #fbbf24;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;

  /* Light Theme Colors */
  --light-bg: #f8f9fa;
  --light-bg-alt: #ffffff;
  --light-text: #111827;
  --light-text-muted: #4b5563;
  --light-border: #e5e7eb;
  --light-card: rgba(255, 255, 255, 0.9);
  --light-card-hover: rgba(255, 255, 255, 1);

  /* Dark Theme Colors */
  --dark-bg: #121212;
  --dark-bg-alt: #1e1e1e;
  --dark-text: #f9fafb;
  --dark-text-muted: #d1d5db;
  --dark-border: #2d3748;
  --dark-card: rgba(30, 30, 30, 0.85);
  --dark-card-hover: rgba(30, 30, 30, 0.95);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
  --gradient-secondary: linear-gradient(135deg, #f59e0b, #d97706);
  --gradient-success: linear-gradient(135deg, #10b981, #059669);
  --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
  --gradient-purple-pink: linear-gradient(135deg, #8b5cf6, #ec4899);
  --gradient-blue-teal: linear-gradient(135deg, #3b82f6, #06b6d4);
  --gradient-orange-red: linear-gradient(135deg, #f59e0b, #ef4444);
  --gradient-green-blue: linear-gradient(135deg, #10b981, #3b82f6);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Z-index */
  --z-negative: -1;
  --z-elevate: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-overlay: 800;
}

/* Default to dark theme */
:root {
  --bg: var(--dark-bg);
  --bg-alt: var(--dark-bg-alt);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --border: var(--dark-border);
  --card: var(--dark-card);
  --card-hover: var(--dark-card-hover);
}





/* Dropdown styles for better readability */
.dropdown-menu {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  min-width: 12rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-md);
}

.dropdown-item {
  color: var(--text) !important;
  padding: 0.6rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text) !important;
  transform: translateX(5px);
}

.dropdown-item.active {
  background-color: var(--primary);
  color: white !important;
}

.dropdown-divider {
  border-top: 1px solid var(--border);
  margin: 0.5rem 0;
}

.light-theme .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-theme .dropdown-item {
  color: var(--light-text) !important;
}

.light-theme .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--light-text) !important;
}

.light-theme .dropdown-item.active {
  background-color: var(--primary);
  color: white !important;
}

.light-theme .dropdown-divider {
  border-top: 1px solid #e9ecef;
}

/* Navbar dropdown specific styles */
.navbar-nav .dropdown-menu {
  margin-top: 0.5rem;
  border-radius: var(--radius-md);
  animation: fadeInDown 0.3s ease;
}

.navbar-nav .dropdown-toggle::after {
  margin-left: 0.4rem;
  vertical-align: 0.15em;
}

.navbar-nav .dropdown-item i {
  width: 1.2rem;
  text-align: center;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base Styles */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
}

main {
  flex: 1;
  position: relative;
  z-index: var(--z-elevate);
}

/* Global text readability improvements */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 1rem;
}

p {
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Ensure all text is readable */
.text-white {
  color: #ffffff !important;
}

image.png .text-black {
  color: #000000 !important;
}

/* Improve contrast for all elements */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme h6 {
  color: #212529;
}

.light-theme p {
  color: #495057;
}

/* Ensure filter heading is always white */
.card-title.text-white,
h5.card-title.text-white,
.filter-heading {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Glassmorphism Styles */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Glass Card Styles for Admin */
.glass-card-dark {
  background: rgba(30, 30, 30, 0.95) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card-dark .card-header {
  background: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 1.25rem 1.5rem;
  color: #ffffff !important;
}

.glass-card-dark .card-body {
  background: transparent !important;
  padding: 1.5rem;
  color: #ffffff !important;
}

.glass-card-dark .card-footer {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 1.25rem 1.5rem;
  color: #ffffff !important;
}

.glass-card-dark .card-title {
  color: #ffffff !important;
  margin-bottom: 0;
  font-weight: 600;
}

.glass-card-dark .table {
  margin-bottom: 0;
  background: transparent !important;
}

.glass-card-dark .table td,
.glass-card-dark .table th {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

.glass-card-dark .table thead th {
  background: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.glass-card-dark .table tbody tr {
  background: transparent !important;
}

.glass-card-dark .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Fix form controls in glass cards */
.glass-card-dark .form-control,
.glass-card-dark .form-select {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.glass-card-dark .form-control:focus,
.glass-card-dark .form-select:focus {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

.glass-card-dark .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.glass-card-dark .form-label {
  color: #ffffff !important;
  font-weight: 500;
}

.glass-card-dark .input-group-text {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Navbar Styles */
.navbar {
  transition: all var(--transition-normal);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.navbar-brand {
  font-weight: 700;
  position: relative;
  z-index: var(--z-elevate);
  color: #ffffff !important;
  /* Ensure brand name is always readable */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.navbar-dark {
  background: var(--dark-bg-alt);
}

.navbar-glass {
  background: rgba(18, 18, 18, 0.9);
  /* Increased opacity for better contrast */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* Added shadow for better visibility */
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.95);
  /* Increased opacity for better readability */
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* Added text shadow for better contrast */
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #ffffff;
  /* Full white on hover for maximum contrast */
  background-color: rgba(255, 255, 255, 0.05);
  /* Very subtle background on hover */
  border-radius: var(--radius-md);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  /* Full white for active links */
  font-weight: 600;
  /* Slightly bolder for active links */
  background-color: rgba(255, 255, 255, 0.1);
  /* Subtle background instead of underline */
  border-radius: var(--radius-md);
}

/* Dropdown toggle active state */
.navbar-dark .navbar-nav .dropdown-toggle.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.light-theme .navbar-dark .navbar-nav .dropdown-toggle.active {
  color: var(--primary-dark);
  background-color: rgba(0, 0, 0, 0.05);
}

.navbar-toggler {
  border: none;
  padding: 0.5rem;
  transition: all var(--transition-normal);
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Internet Speed Display */
.internet-speed-display {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  min-width: auto;
  width: auto;
  height: auto;
  margin: 0 0.5rem;
  text-decoration: none !important;
  display: inline-flex;
}

.internet-speed-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.internet-speed-display i {
  color: var(--success);
  margin-right: 0.35rem;
  transition: transform 0.3s ease;
}

.internet-speed-display:hover i {
  transform: rotate(30deg);
}

.light-theme .internet-speed-display {
  background: rgba(0, 0, 0, 0.05);
  color: var(--light-text);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-theme .internet-speed-display::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

/* Speed indicator colors */
.speed-slow {
  background: rgba(239, 68, 68, 0.15);
}

.speed-slow i {
  color: var(--danger);
}

.speed-medium {
  background: rgba(245, 158, 11, 0.15);
}

.speed-medium i {
  color: var(--warning);
}

.speed-fast {
  background: rgba(16, 185, 129, 0.15);
}

.speed-fast i {
  color: var(--success);
}

.speed-very-fast {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.speed-very-fast i {
  color: var(--success);
}

.speed-ultra-fast {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(236, 72, 153, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

.speed-ultra-fast i {
  color: #8b5cf6;
  /* Purple color for ultra-fast */
}

.light-theme .speed-slow {
  background: rgba(239, 68, 68, 0.1);
}

.light-theme .speed-medium {
  background: rgba(245, 158, 11, 0.1);
}

.light-theme .speed-fast {
  background: rgba(16, 185, 129, 0.1);
}

.light-theme .speed-very-fast {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.light-theme .speed-ultra-fast {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Speed bar animations for different speed levels */
.speed-slow .speed-bar:nth-child(1) {
  height: 6px;
  background-color: var(--danger);
}

.speed-medium .speed-bar:nth-child(1),
.speed-medium .speed-bar:nth-child(2) {
  height: 8px;
  background-color: var(--warning);
}

.speed-fast .speed-bar:nth-child(1),
.speed-fast .speed-bar:nth-child(2),
.speed-fast .speed-bar:nth-child(3) {
  height: 10px;
  background-color: var(--success);
}

.speed-very-fast .speed-bar,
.speed-ultra-fast .speed-bar {
  height: 12px;
  background-color: var(--success);
}

.speed-ultra-fast .speed-bar {
  background-color: #8b5cf6;
  /* Purple for ultra-fast */
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

/* Login Timer Display */
.login-timer-display {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  min-width: auto;
  width: auto;
  height: auto;
  margin: 0 0.5rem;
  text-decoration: none !important;
  display: inline-flex;
}

.login-timer-display i {
  color: var(--info);
  margin-right: 0.35rem;
}

.login-timer-display:hover i {
  animation: spin 2s linear infinite;
}

.light-theme .login-timer-display {
  background: rgba(0, 0, 0, 0.05);
  color: var(--light-text);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Auth Button Styles */
.auth-btn {
  min-width: 100px;
  font-weight: 500;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}

.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.light-theme .btn-outline-light {
  background: rgba(0, 0, 0, 0.05);
  color: var(--dark-bg);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.light-theme .btn-outline-light:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--dark-bg);
}

/* Auth buttons container for mobile */
.auth-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
}

/* Make sure auth buttons stay in a row on mobile */
@media (max-width: 991.98px) {
  .auth-buttons-container {
    justify-content: center;
    padding: 0.5rem 0;
  }

  .auth-buttons-container .nav-item {
    margin: 0 0.25rem;
  }

  .auth-buttons-container .auth-btn {
    min-width: auto;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Speed indicator bars */
.speed-indicator {
  display: inline-flex;
  align-items: center;
  height: 12px;
  gap: 2px;
  margin-left: 4px;
}

.speed-bar {
  width: 3px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
  transition: all 0.3s ease;
  display: inline-block;
}

/* Fix for speed display in navbar */
.navbar-nav .nav-item .internet-speed-display {
  margin: 0 0.5rem;
  min-width: 100px;
  justify-content: center;
}

.navbar-nav .nav-item .login-timer-display {
  margin: 0 0.5rem;
  min-width: 100px;
  justify-content: center;
}

/* Mobile menu improvements */
@media (max-width: 991.98px) {

  .navbar-nav .nav-item .internet-speed-display,
  .navbar-nav .nav-item .login-timer-display {
    margin: 0.5rem auto;
    width: 150px;
    justify-content: center;
  }

  .navbar-collapse {
    padding: 1rem 0;
  }

  .navbar-nav {
    align-items: center;
  }
}

/* Light theme navbar improvements */
.light-theme .navbar-brand {
  color: var(--primary-dark) !important;
  text-shadow: none;
}

.light-theme .navbar-glass {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.light-theme .navbar-dark .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
}

.light-theme .navbar-dark .navbar-nav .nav-link:hover {
  color: var(--primary-dark);
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-md);
}

.light-theme .navbar-dark .navbar-nav .nav-link.active {
  color: var(--primary-dark);
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
}

/* Main Slider Section */
.main-slider-section {
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.carousel-item {
  height: 72vh;
  min-height: 480px;
  background-color: #000;
}

/* Full-image mode for admin-managed hero slides */
.main-slider-section #mainCarousel .carousel-item.hero-image-slide {
  height: 72vh;
  min-height: 480px;
  background-color: transparent;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .carousel-bg {
  height: 72vh !important;
  min-height: 480px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .carousel-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  max-height: none;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Responsive carousel height for tablets and mobile devices */
@media (max-width: 1024px) {
  .main-slider-section #mainCarousel .carousel-item.hero-image-slide {
    height: 65vh;
    min-height: 420px;
  }

  .main-slider-section #mainCarousel .carousel-item.hero-image-slide .carousel-bg {
    height: 65vh !important;
    min-height: 420px !important;
  }
}

@media (max-width: 768px) {
  .main-slider-section #mainCarousel .carousel-item.hero-image-slide {
    height: 55vh;
    min-height: 340px;
  }

  .main-slider-section #mainCarousel .carousel-item.hero-image-slide .carousel-bg {
    height: 55vh !important;
    min-height: 340px !important;
  }
}

@media (max-width: 576px) {
  .main-slider-section #mainCarousel .carousel-item.hero-image-slide {
    height: 45vh;
    min-height: 280px;
  }

  .main-slider-section #mainCarousel .carousel-item.hero-image-slide .carousel-bg {
    height: 45vh !important;
    min-height: 280px !important;
  }
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg circle {
  fill: rgba(255, 255, 255, 0.18);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg-top {
  top: -6%;
  left: 0;
  height: 42%;
  animation: heroFloatX 18s ease-in-out infinite alternate;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg-mid {
  top: 12%;
  left: 0;
  height: 62%;
  animation: heroPulse 10s ease-in-out infinite;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide .hero-svg-bottom {
  bottom: -8%;
  left: 0;
  height: 44%;
  animation: heroFloatX 22s ease-in-out infinite alternate-reverse;
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-1 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-1 .hero-svg circle {
  fill: rgba(168, 85, 247, 0.28);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-2 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-2 .hero-svg circle {
  fill: rgba(244, 63, 94, 0.24);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-3 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-3 .hero-svg circle {
  fill: rgba(251, 191, 36, 0.24);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-4 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-4 .hero-svg circle {
  fill: rgba(34, 211, 238, 0.24);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-5 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-5 .hero-svg circle {
  fill: rgba(236, 72, 153, 0.24);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-6 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-6 .hero-svg circle {
  fill: rgba(139, 92, 246, 0.24);
}

.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-7 .hero-svg path,
.main-slider-section #mainCarousel .carousel-item.hero-image-slide.hero-svg-theme-7 .hero-svg circle {
  fill: rgba(34, 197, 94, 0.24);
}

@keyframes heroFloatX {
  0% {
    transform: translateX(-1.5%) translateY(0);
  }

  100% {
    transform: translateX(1.5%) translateY(0);
  }
}

@keyframes heroPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.03);
    opacity: 0.48;
  }
}

.carousel-bg {
  width: 100%;
  position: relative;
}

/* Slide background gradients */
.carousel-item:nth-child(1) .carousel-bg {
  background: linear-gradient(135deg, #121212 0%, #2d3748 100%);
}

.carousel-item:nth-child(2) .carousel-bg {
  background: linear-gradient(135deg, #4a1d96 0%, #6366f1 100%);
}

.carousel-item:nth-child(3) .carousel-bg {
  background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%);
}

.carousel-item:nth-child(4) .carousel-bg {
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
}

/* Carousel patterns */
.carousel-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: 1;
}

.pattern-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.8) 2px, transparent 2px);
  background-size: 30px 30px;
}

.pattern-waves {
  background: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0, 50 10 T 100 10' stroke='white' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  animation: moveWaves 20s linear infinite;
}

.pattern-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 20px 20px;
}

.pattern-circles {
  background-image: radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.5) 2%, transparent 25%);
  background-size: 50px 50px;
}

@keyframes moveWaves {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100px 0;
  }
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
}

.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  text-align: left;
  padding: 0;
}

.carousel-indicators {
  z-index: 3;
}

.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.carousel-indicators .active {
  background-color: var(--primary);
  transform: scale(1.2);
}

.carousel-control-prev,
.carousel-control-next {
  z-index: 3;
  width: 5%;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.carousel-item h1,
.carousel-item h2 {
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-item p {
  font-size: 1.25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-item .btn {
  transition: all var(--transition-normal);
  transform: translateY(0);
}

.carousel-item .btn:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.gradient-text-purple {
  background: var(--gradient-purple-pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Animation delay classes */
.animate__delay-1s {
  animation-delay: 0.3s;
}

.animate__delay-2s {
  animation-delay: 0.6s;
}

/* Premium Features Section */
.premium-features-section {
  background-color: var(--dark-bg-alt);
  position: relative;
  overflow: hidden;
}

.premium-features-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/pattern-dots.svg');
  opacity: 0.05;
  z-index: 0;
}

.feature-card {
  background: rgba(30, 30, 30, 0.6);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-normal);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: all var(--transition-normal);
}

.feature-card:hover .feature-icon-wrapper {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.15);
}

.feature-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
}

.feature-text {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Trending Section */
.trending-section {
  background-color: var(--dark-bg);
  position: relative;
}

.trending-main-card {
  position: relative;
  height: 100%;
  transition: all var(--transition-normal);
}

.trending-main-card:hover {
  transform: translateY(-5px);
}

.trending-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.trending-image img,
.trending-placeholder {
  transition: transform var(--transition-normal);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trending-placeholder {
  position: relative;
  overflow: hidden;
}

.trending-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.3;
}

.trending-main-card:hover .trending-image .trending-placeholder,
.trending-card:hover .trending-image .trending-placeholder {
  transform: scale(1.05);
}

.bg-gradient-purple {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.trending-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
  display: flex;
  align-items: flex-end;
  transition: all var(--transition-normal);
}

.trending-main-card:hover .trending-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3) 100%);
}

.trending-content {
  width: 100%;
}

.trending-title {
  font-weight: 700;
  color: white;
  font-size: 1.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.trending-text {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.trending-card {
  background: rgba(30, 30, 30, 0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.trending-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.trending-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.trending-info {
  background: rgba(30, 30, 30, 0.9);
}

.trending-info h5 {
  font-weight: 600;
  color: var(--text);
}

/* Responsive adjustments for slider */
@media (max-width: 992px) {
  .carousel-item {
    height: 70vh;
  }

  .carousel-item h1 {
    font-size: 2.5rem;
  }

  .carousel-item h2 {
    font-size: 2rem;
  }

  .carousel-item p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .carousel-item {
    height: 60vh;
  }

  .carousel-item .row {
    justify-content: center !important;
  }

  .carousel-item .col-lg-6 {
    text-align: center !important;
  }

  .carousel-item .d-flex {
    justify-content: center !important;
  }
}

/* Card Styles */
.card {
  border: none;
  border-radius: var(--radius-lg);
  background-color: rgba(30, 30, 30, 0.95);
  /* Darker background for better contrast */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  overflow: hidden;
  border: 1px solid var(--border);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  background-color: rgba(40, 40, 40, 0.98);
  /* Even darker on hover for better contrast */
}

.card-img-top {
  height: 200px;
  object-fit: cover;
  transition: all var(--transition-normal);
}

.card:hover .card-img-top {
  transform: scale(1.05);
}

.card-body {
  padding: 1.5rem;
  color: var(--text);
}

/* Ensure card text is always readable */
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6 {
  color: #ffffff !important;
}

.card-title {
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  color: #ffffff !important;
  /* Ensure title is white for maximum contrast */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  /* Add text shadow for better readability */
}

.card-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.card:hover .card-title::after {
  width: 60px;
}

/* Concert card specific styles */
.card-concert {
  background-color: rgba(25, 25, 25, 0.95);
  /* Darker background for concert cards */
}

.card-concert .card-img-top {
  height: 180px;
}

.card-concert .card-title {
  font-size: 1.25rem;
  color: #ffffff !important;
  /* Force white color */
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  /* Add text shadow for better readability */
}

.card-concert .card-text {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
}

.card-concert .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.card-concert .bi {
  color: var(--primary-light);
  margin-right: 0.5rem;
}

.card-artist .card-img-top {
  height: 250px;
  filter: grayscale(20%);
  transition: all var(--transition-normal);
}

.card-artist:hover .card-img-top {
  filter: grayscale(0%);
}

.card-footer {
  background-color: rgba(0, 0, 0, 0.2);
  /* Darker footer for better contrast */
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

/* Light theme card improvements */
.light-theme .card {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-theme .card:hover {
  background-color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.light-theme .card-title {
  color: #212529;
  text-shadow: none;
}

.light-theme .card-concert {
  background-color: rgba(250, 250, 250, 0.95);
}

.light-theme .card-concert .card-title {
  color: #212529;
}

.light-theme .card-concert .card-text {
  color: #495057;
}

.light-theme .card-concert .text-muted {
  color: #6c757d !important;
}

.light-theme .card-concert .bi {
  color: var(--primary-dark);
}

.light-theme .card-footer {
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Button Styles */
.btn {
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: none;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 991.98px) {
  .btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
  }
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

@media (max-width: 991.98px) {
  .btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
  }
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  z-index: -1;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn-primary {
  background: var(--gradient-primary);
  border: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--gradient-primary);
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
  transform: translateY(-3px);
}

.btn-secondary {
  background: var(--gradient-secondary);
  border: none;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--gradient-secondary);
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
  transform: translateY(-3px);
}

.btn-success {
  background: var(--gradient-success);
  border: none;
}

.btn-success:hover,
.btn-success:focus {
  background: var(--gradient-success);
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
  transform: translateY(-3px);
}

.btn-danger {
  background: var(--gradient-danger);
  border: none;
}

.btn-danger:hover,
.btn-danger:focus {
  background: var(--gradient-danger);
  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
  transform: translateY(-3px);
}

.btn-outline-primary {
  color: var(--primary-light);
  /* Lighter color for better visibility */
  border: 2px solid var(--primary);
  background: rgba(0, 0, 0, 0.2);
  /* Slight background for better contrast */
  font-weight: 500;
  /* Slightly bolder text */
}

.btn-outline-primary:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
  transform: translateY(-3px);
}

.btn-outline-secondary {
  color: #ffffff;
  /* White text for better visibility */
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.2);
  /* Slight background for better contrast */
  font-weight: 500;
  /* Slightly bolder text */
}

.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
  color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.btn-outline-light {
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.2);
  /* Slight background for better contrast */
  font-weight: 500;
  /* Slightly bolder text */
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: white;
  color: white;
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

/* Light theme button improvements */
.light-theme .btn-outline-primary {
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--primary);
}

.light-theme .btn-outline-secondary {
  color: #212529;
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.2);
}

.light-theme .btn-outline-light {
  color: #212529;
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.btn-glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: white;
}

.btn-glass-dark:hover {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.btn-gradient-purple {
  background: var(--gradient-purple-pink);
  color: white;
}

.btn-gradient-purple:hover {
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
  transform: translateY(-3px);
}

.btn-gradient-blue {
  background: var(--gradient-blue-teal);
  color: white;
}

.btn-gradient-blue:hover {
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
  transform: translateY(-3px);
}

.btn-gradient-orange {
  background: var(--gradient-orange-red);
  color: white;
}

.btn-gradient-orange:hover {
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
  transform: translateY(-3px);
}

.btn-gradient-green {
  background: var(--gradient-green-blue);
  color: white;
}

.btn-gradient-green:hover {
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
  transform: translateY(-3px);
}

/* Form Styles */
.form-control,
.form-select {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background-color: var(--bg-alt);
  color: var(--text);
  transition: all var(--transition-normal);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
  background-color: var(--bg-alt);
  color: var(--text);
}

/* Dropdown text color fix */
.form-select {
  color: white;
  background-color: #2b2b2b;
}

.form-select option {
  color: white;
  background-color: #2b2b2b;
}

.form-select:focus option {
  color: white;
  background-color: #333;
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.input-group-text {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.form-label {
  color: var(--text);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-text {
  color: var(--text-muted);
}

.form-check-label {
  color: var(--text);
}

.form-check-input {
  background-color: var(--bg-alt);
  border-color: var(--border);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Light theme form controls */
.light-theme .form-control,
.light-theme .form-select {
  background-color: #ffffff;
  color: var(--light-text);
  border-color: #ced4da;
}

.light-theme .form-control:focus,
.light-theme .form-select:focus {
  background-color: #ffffff;
  color: var(--light-text);
  border-color: var(--primary);
}

.light-theme .form-control::placeholder {
  color: #6c757d;
  opacity: 0.8;
}

.light-theme .input-group-text {
  background-color: #f8f9fa;
  color: #495057;
  border-color: #ced4da;
}

.light-theme .form-check-input {
  background-color: #ffffff;
  border-color: #ced4da;
}

/* Badge Styles */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}

/* Footer Styles */
footer {
  background: linear-gradient(to right, var(--dark-bg), var(--dark-bg-alt));
  color: white;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 70%);
  z-index: 0;
}

footer .container {
  position: relative;
  z-index: 1;
}

footer h5,
footer h6 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

footer h5::after,
footer h6::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

footer a {
  transition: all var(--transition-normal);
  position: relative;
}

footer a:hover {
  color: white !important;
  transform: translateX(5px);
}

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

footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  transition: all var(--transition-normal);
  margin-right: 0.5rem;
}

footer .social-icons a:hover {
  background: var(--gradient-primary);
  transform: translateY(-5px);
}

/* Admin Dashboard Styles */
.admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--text);
}

/* Ensure all text in admin pages is readable */
.admin-layout h1,
.admin-layout h2,
.admin-layout h3,
.admin-layout h4,
.admin-layout h5,
.admin-layout h6,
.admin-layout p,
.admin-layout span,
.admin-layout div,
.admin-layout td,
.admin-layout th,
.admin-layout a {
  color: var(--text);
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 1010;
  background-color: var(--bg-alt);
  color: var(--text);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.admin-main {
  display: flex;
  flex: 1;
  width: 100%;
  overflow-x: hidden;
}

.admin-sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  overflow-y: auto;
  background-color: var(--dark-bg-alt);
  border-right: 1px solid var(--border);
  /* Base sidebar is hidden on mobile by default */
  transform: translateX(-100%);
  visibility: hidden;
}

/* Show sidebar on desktop by default */
@media (min-width: 992px) {
  .admin-sidebar {
    transform: translateX(0);
    visibility: visible;
  }
}

.admin-sidebar.show {
  transform: translateX(0) !important;
  visibility: visible !important;
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991.98px) {
  .admin-sidebar {
    width: 230px;
  }
}

.admin-sidebar.collapsed {
  transform: translateX(-100%);
  visibility: hidden;
}

.admin-content {
  flex: 1;
  margin-left: 250px;
  width: auto;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  max-width: 100%;
  margin-top: 0;
  background-color: var(--bg);
  color: var(--text);
  min-width: 0;
}

@media (max-width: 991.98px) {
  .admin-content {
    margin-left: 0;
    width: 100%;
    padding: 1rem;
  }

  /* Improve glass cards on mobile */
  .glass-card-dark {
    margin-bottom: 1rem;
    border-radius: 8px;
  }

  .glass-card-dark .card-header {
    padding: 1rem;
  }

  .glass-card-dark .card-body {
    padding: 1rem;
  }

  /* Better table responsiveness */
  .table-responsive {
    border-radius: 8px;
    overflow-x: auto;
  }

  .table {
    font-size: 0.875rem;
  }

  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn {
    margin-bottom: 0.25rem;
    border-radius: 6px !important;
  }
}

@media (max-width: 768px) {
  .admin-content {
    padding: 0.75rem;
  }

  .glass-card-dark .card-header {
    padding: 0.75rem;
  }

  .glass-card-dark .card-body {
    padding: 0.75rem;
  }

  /* Stack form elements on mobile */
  .row.g-3>.col-md-2,
  .row.g-3>.col-md-4 {
    margin-bottom: 0.75rem;
  }

  .d-flex.align-items-center.gap-2 {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .d-flex.align-items-center.gap-2 .btn {
    width: 100%;
  }
}

.admin-content.expanded {
  margin-left: 0;
  width: auto;
}

.admin-sidebar .nav-link {
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
  color: var(--dark-text);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
}

.admin-sidebar .nav-link i {
  font-size: 0.9rem;
}

@media (max-width: 991.98px) {
  .admin-sidebar .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }

  .admin-sidebar .nav-link i {
    font-size: 0.85rem;
  }
}

.admin-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.admin-sidebar .nav-link.active {
  background-color: var(--primary);
  color: white;
}

.sidebar-heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}

.stat-card {
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease;
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  background-color: var(--card-hover);
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 1.5rem;
}

.light-theme .admin-sidebar {
  background-color: var(--light-bg-alt);
}

.light-theme .admin-sidebar .nav-link {
  color: var(--light-text);
}

.light-theme .admin-sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--primary);
}

.light-theme .admin-sidebar .nav-link.active {
  background-color: var(--primary);
  color: white;
}

.light-theme .sidebar-heading {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #6c757d;
}

.light-theme .stat-card {
  background-color: white;
  border: 1px solid var(--light-border);
}

.light-theme .card {
  background-color: white;
  border: 1px solid var(--light-border);
}

.light-theme .card-header {
  background-color: white;
  border-bottom: 1px solid var(--light-border);
}

.light-theme .card-footer {
  background-color: white;
  border-top: 1px solid var(--light-border);
}

.table {
  color: var(--text);
  font-size: 0.9rem;
}

.table-bordered-dark {
  border-color: var(--border);
}

.table-bordered-dark th,
.table-bordered-dark td {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Improve table readability in dark mode */
.admin-layout .table {
  color: #ffffff !important;
  background: transparent !important;
}

/* Force white text for ALL table elements in admin layout */
.admin-layout .table,
.admin-layout .table *,
.admin-layout .table td,
.admin-layout .table th,
.admin-layout .table tr,
.admin-layout .table tbody,
.admin-layout .table thead,
.admin-layout .table tbody tr,
.admin-layout .table tbody td,
.admin-layout .table thead tr,
.admin-layout .table thead th {
  color: #ffffff !important;
}

/* Override any Bootstrap table classes that might set dark text */
.admin-layout .table-striped tbody tr:nth-of-type(odd) td,
.admin-layout .table-striped tbody tr:nth-of-type(even) td,
.admin-layout .table-hover tbody tr:hover td,
.admin-layout .table-dark td,
.admin-layout .table-dark th {
  color: #ffffff !important;
}

.admin-layout .table thead {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.admin-layout .table thead th {
  color: #ffffff !important;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.admin-layout .table tbody td {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.admin-layout .table tbody tr {
  background: transparent !important;
}

.admin-layout .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Fix table light header in dark mode */
.admin-layout .table-light,
.admin-layout .table thead.table-light th,
.admin-layout .table thead th {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Ensure all table cells have proper text color */
.admin-layout .table td,
.admin-layout .table th {
  color: #ffffff !important;
  background: transparent !important;
}

/* Make sure all table text is visible */
.admin-layout .table .text-white {
  color: #ffffff !important;
}

/* Fix specific table elements */
.admin-layout .table .fw-medium,
.admin-layout .table .fw-bold {
  color: #ffffff !important;
}

.admin-layout .table a {
  color: #6366f1 !important;
}

.admin-layout .table a:hover {
  color: #8b5cf6 !important;
}


/* Fix page management table specifically - override previous black text rules */
.admin-layout .glass-card-dark .table tbody tr td,
.admin-layout .glass-card-dark .table tbody tr td *,
.admin-layout .glass-card-dark .table tbody tr td h6,
.admin-layout .glass-card-dark .table tbody tr td div,
.admin-layout .glass-card-dark .table tbody tr td span:not(.badge) {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Override text-white class in glass card tables */
.admin-layout .glass-card-dark .table .text-white,
.admin-layout .glass-card-dark .table h6.text-white,
.admin-layout .glass-card-dark .table td.text-white {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Force all glass card table text to be white */
.admin-layout .glass-card-dark .table tbody td,
.admin-layout .glass-card-dark .table tbody td *,
.admin-layout .glass-card-dark .table tbody td span,
.admin-layout .glass-card-dark .table tbody td div,
.admin-layout .glass-card-dark .table tbody tr,
.admin-layout .glass-card-dark .table tbody tr *,
.admin-layout .glass-card-dark .table tbody tr span,
.admin-layout .glass-card-dark .table tbody tr div {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 500 !important;
}

/* Ensure all text in glass card tables is white */
.admin-layout .glass-card-dark .table,
.admin-layout .glass-card-dark .table td,
.admin-layout .glass-card-dark .table th,
.admin-layout .glass-card-dark .table tr,
.admin-layout .glass-card-dark .table h6,
.admin-layout .glass-card-dark .table div,
.admin-layout .glass-card-dark .table span:not(.badge) {
  color: #ffffff !important;
}

/* Override any text-muted classes in glass card tables */
.admin-layout .glass-card-dark .table .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Override: Force white text for ALL admin tables - remove black text rules */
.admin-layout .table tbody tr td,
.admin-layout .table tbody tr td *,
.admin-layout .table tbody tr td h6,
.admin-layout .table tbody tr td div,
.admin-layout .table tbody tr td span:not(.badge) {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Specific fixes for admin pages with table issues */
.admin-layout .table tbody tr td,
.admin-layout .table tbody tr th,
.admin-layout .table thead tr td,
.admin-layout .table thead tr th {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Fix for DataTables and other table plugins */
.admin-layout .dataTables_wrapper .table tbody tr td,
.admin-layout .dataTables_wrapper .table thead tr th {
  color: #ffffff !important;
}

/* Specific page fixes for the admin pages shown in screenshots */
/* Daily Concerts Management */
body:has([href*="daily-concerts"]) .admin-layout .table tbody tr td,
body:has([href*="daily-concerts"]) .admin-layout .table thead tr th {
  color: #ffffff !important;
}

/* Team Requirement Roles */
body:has([href*="team-requirement/roles"]) .admin-layout .table tbody tr td,
body:has([href*="team-requirement/roles"]) .admin-layout .table thead tr th {
  color: #ffffff !important;
}

/* Team Booking Requests */
body:has([href*="team-requirement/requests"]) .admin-layout .table tbody tr td,
body:has([href*="team-requirement/requests"]) .admin-layout .table thead tr th {
  color: #ffffff !important;
}

/* Featured Artists Management */
body:has([href*="featured-artists"]) .admin-layout .table tbody tr td,
body:has([href*="featured-artists"]) .admin-layout .table thead tr th {
  color: #ffffff !important;
}

/* Role Slots Management */
body:has([href*="role-slots"]) .admin-layout .table tbody tr td,
body:has([href*="role-slots"]) .admin-layout .table thead tr th {
  color: #ffffff !important;
}

/* Artist Booking Requests */
body:has([href*="artist/booking-requests"]) .admin-layout .table tbody tr td,
body:has([href*="artist/booking-requests"]) .admin-layout .table thead tr th {
  color: #ffffff !important;
}

/* Universal table text fix for all admin pages - highest specificity */
.admin-layout .card .table tbody tr td,
.admin-layout .card .table tbody tr td *:not(.badge):not(.btn),
.admin-layout .card .table thead tr th,
.admin-layout .card .table thead tr th *:not(.badge):not(.btn),
.admin-layout .glass-card .table tbody tr td,
.admin-layout .glass-card .table tbody tr td *:not(.badge):not(.btn),
.admin-layout .glass-card .table thead tr th,
.admin-layout .glass-card .table thead tr th *:not(.badge):not(.btn),
.admin-layout .glass-card-dark .table tbody tr td,
.admin-layout .glass-card-dark .table tbody tr td *:not(.badge):not(.btn),
.admin-layout .glass-card-dark .table thead tr th,
.admin-layout .glass-card-dark .table thead tr th *:not(.badge):not(.btn) {
  color: #ffffff !important;
}

/* Ensure badges and buttons maintain their original colors */
.admin-layout .table .badge {
  color: inherit !important;
}

.admin-layout .table .btn {
  color: inherit !important;
}

/* Artist Dashboard Table Readability Fix */
/* Override admin-layout styles for artist dashboard tables */
body:has([href*="/artists/dashboard"]) .admin-layout .table,
body:has([href*="/artists/manage-content"]) .admin-layout .table,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table {
  color: #212529 !important;
  background-color: #ffffff !important;
}

/* Artist dashboard table headers */
body:has([href*="/artists/dashboard"]) .admin-layout .table thead th,
body:has([href*="/artists/manage-content"]) .admin-layout .table thead th,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table thead th,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table thead th {
  color: #212529 !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  font-weight: 600 !important;
}

/* Artist dashboard table body cells */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr td,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr td,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr td,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr td {
  color: #212529 !important;
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
}

/* Artist dashboard table text elements */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr td *,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr td *,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr td *,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr td * {
  color: #212529 !important;
}

/* Artist dashboard table specific elements */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr td h6,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr td h6,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr td h6,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr td h6 {
  color: #212529 !important;
  font-weight: 600 !important;
}

/* Artist dashboard table small text */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr td small,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr td small,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr td small,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr td small {
  color: #6c757d !important;
}

/* Artist dashboard table hover effects */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr:hover,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr:hover,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr:hover,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr:hover {
  background-color: #f8f9fa !important;
}

/* Artist dashboard table hover text */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr:hover td,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr:hover td,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr:hover td,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr:hover td {
  color: #212529 !important;
}

/* Artist dashboard table links */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr td a,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr td a,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr td a,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr td a {
  color: #0d6efd !important;
}

/* Artist dashboard table buttons */
body:has([href*="/artists/dashboard"]) .admin-layout .table tbody tr td .btn-light,
body:has([href*="/artists/manage-content"]) .admin-layout .table tbody tr td .btn-light,
body:has([href*="/artists/manage-concerts"]) .admin-layout .table tbody tr td .btn-light,
body:has([href*="/artists/manage-tickets"]) .admin-layout .table tbody tr td .btn-light {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

/* Alternative approach: Target artist dashboard by body class or specific containers */
.artist-dashboard .admin-layout .table,
.artist-content .admin-layout .table {
  color: #212529 !important;
  background-color: #ffffff !important;
}

.artist-dashboard .admin-layout .table thead th,
.artist-content .admin-layout .table thead th {
  color: #212529 !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  font-weight: 600 !important;
}

.artist-dashboard .admin-layout .table tbody tr td,
.artist-content .admin-layout .table tbody tr td {
  color: #212529 !important;
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
}

.artist-dashboard .admin-layout .table tbody tr td *,
.artist-content .admin-layout .table tbody tr td * {
  color: #212529 !important;
}

.artist-dashboard .admin-layout .table tbody tr td h6,
.artist-content .admin-layout .table tbody tr td h6 {
  color: #212529 !important;
  font-weight: 600 !important;
}

.artist-dashboard .admin-layout .table tbody tr td small,
.artist-content .admin-layout .table tbody tr td small {
  color: #6c757d !important;
}

.artist-dashboard .admin-layout .table tbody tr:hover,
.artist-content .admin-layout .table tbody tr:hover {
  background-color: #f8f9fa !important;
}

.artist-dashboard .admin-layout .table tbody tr:hover td,
.artist-content .admin-layout .table tbody tr:hover td {
  color: #212529 !important;
}

/* Ensure badges maintain their colors */
.artist-dashboard .admin-layout .table .badge,
.artist-content .admin-layout .table .badge,
body:has([href*="/artists/"]) .admin-layout .table .badge {
  color: #ffffff !important;
}

/* Ensure dropdown buttons work properly */
.artist-dashboard .admin-layout .table .dropdown-toggle,
.artist-content .admin-layout .table .dropdown-toggle,
body:has([href*="/artists/"]) .admin-layout .table .dropdown-toggle {
  color: #212529 !important;
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

.admin-layout .card {
  background-color: var(--dark-bg-alt);
  border: 1px solid var(--border);
}

.admin-layout .modal-content {
  background-color: var(--dark-bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
}

.admin-layout .modal-header,
.admin-layout .modal-footer {
  border-color: var(--border);
}

.admin-layout .modal-title,
.admin-layout .modal-body p,
.admin-layout .modal-body label,
.admin-layout .modal-body div {
  color: var(--text) !important;
}

.admin-layout .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Ensure all text in admin pages is readable */
.admin-layout .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.admin-layout .small.text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.admin-layout .text-white-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.admin-layout .fw-medium,
.admin-layout .fw-bold,
.admin-layout .fw-semibold {
  color: var(--text) !important;
}

/* Fix card headers and titles */
.admin-layout .card-header,
.admin-layout .card-title {
  color: var(--text) !important;
}

/* Ensure card headers and titles are always readable in light theme */
.light-theme .card-header h5,
.light-theme .card-title,
.light-theme h5.card-title,
/* Default for cards that aren't explicitly in dark containers */
.card:not(.glass-card-dark):not(.border-gradient) .card-header h5,
.card:not(.glass-card-dark):not(.border-gradient) .card-title,
.card:not(.glass-card-dark):not(.border-gradient) h5.card-title {
  color: #000000 !important;
}

/* Ensure card headers and titles in dark cards are white */
.glass-card-dark .card-title,
.glass-card-dark h5.card-title,
.glass-card-dark .card-header h5,
.border-gradient .card-title,
.border-gradient h5.card-title,
.related-content-card .card-title,
.related-content-card h5.card-title {
  color: white !important;
}

/* Fix stat cards */
.admin-layout .stat-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-layout .stat-card h3,
.admin-layout .stat-card h4,
.admin-layout .stat-card h5,
.admin-layout .stat-card h6 {
  color: var(--text) !important;
}

.admin-layout .card-title,
.admin-layout .card-header,
.admin-layout .card-body,
.admin-layout .card-footer {
  color: var(--text);
}

.admin-layout .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.admin-layout .form-control,
.admin-layout .form-select {
  background-color: #2b2b2b;
  border-color: var(--border);
  color: white;
}

.admin-layout .form-control:focus,
.admin-layout .form-select:focus {
  background-color: #333;
  color: white;
  border-color: var(--primary);
}

.admin-layout .form-select option {
  color: white;
  background-color: #2b2b2b;
}

.admin-layout .form-select:focus option {
  color: white;
  background-color: #333;
}

.admin-layout .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.admin-layout .form-label {
  color: var(--text);
}

.admin-layout .input-group-text {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border);
  color: var(--text);
}

@media (max-width: 991.98px) {
  .table {
    font-size: 0.8rem;
  }
}

.table-light {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--dark-text);
}

.table-hover tbody tr:hover {
  background-color: transparent !important;
  color: #000000 !important;
}

/* Improve table header contrast */
.table thead th {
  font-weight: 600;
  color: #000 !important;
}

/* Ensure table headers are always dark text regardless of theme */
.table-light th,
thead.table-light th,
.table thead th {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Improve table cell contrast */
.table td {
  color: #000000 !important;
}

/* Light theme table styles */
.light-theme .table {
  color: var(--light-text);
}

.light-theme .table-light {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--light-text);
}

.light-theme .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--light-text);
}

.light-theme .table thead th {
  color: #212529;
  font-weight: 600;
}

.light-theme .table td {
  color: #212529;
}

/* Artist Profile Styles */
.artist-banner {
  height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.artist-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}

.artist-profile-img {
  width: 150px;
  height: 150px;
  border: 5px solid white;
  border-radius: 50%;
  object-fit: cover;
  margin-top: -75px;
  position: relative;
  z-index: 2;
}

.verified-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Concert Card Styles */
.concert-date {
  width: 60px;
  height: 60px;
  background-color: var(--primary);
  color: white;
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Concert date and venue text info (not the box) */
.concert-date-info,
.concert-venue-info {
  display: flex;
  align-items: center;
}

.concert-date .day {
  font-size: 1.5rem;
  line-height: 1;
}

.concert-date .month {
  font-size: 0.875rem;
  text-transform: uppercase;
}

/* Ticket Styles */
.ticket-card {
  background-color: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ticket-header {
  background-color: var(--primary);
  color: white;
  padding: 1.5rem;
}

.ticket-body {
  padding: 1.5rem;
}

.ticket-footer {
  background-color: #f8f9fa;
  padding: 1rem 1.5rem;
  border-top: 1px dashed #dee2e6;
}

.ticket-number {
  font-family: monospace;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

/* Ticket details page improvements */
.ticket-information h4,
.ticket-details h4,
.attendee-details h4,
.artist-information h4 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ticket-information p,
.ticket-details p,
.attendee-details p,
.artist-information p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.75rem;
}

.ticket-information .fw-medium,
.ticket-details .fw-medium,
.attendee-details .fw-medium,
.artist-information .fw-medium {
  color: #ffffff;
  font-weight: 500;
}

.light-theme .ticket-information h4,
.light-theme .ticket-details h4,
.light-theme .attendee-details h4,
.light-theme .artist-information h4 {
  color: #212529;
  text-shadow: none;
}

.light-theme .ticket-information p,
.light-theme .ticket-details p,
.light-theme .attendee-details p,
.light-theme .artist-information p {
  color: #495057;
}

.light-theme .ticket-information .fw-medium,
.light-theme .ticket-details .fw-medium,
.light-theme .attendee-details .fw-medium,
.light-theme .artist-information .fw-medium {
  color: #212529;
}

/* Download button improvements */
.btn-download {
  background: var(--gradient-primary);
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-download:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  color: white;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
  .admin-sidebar {
    width: 280px;
    height: 100vh;
    transform: translateX(-280px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    top: 0;
    z-index: 1050;
  }

  .admin-sidebar.show {
    transform: translateX(0);
  }

  .admin-content {
    margin-left: 0;
    width: 100%;
    margin-top: 0;
  }

  .admin-toggle,
  .mobile-toggle {
    display: block !important;
  }

  /* Ensure sidebar is visible when shown */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }
}

/* Mobile Sidebar Toggle */
.admin-toggle,
.mobile-toggle {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Artist mobile toggle on the left side - HIDDEN COMPLETELY */
#artistToggle {
  display: none !important;
  /* Hide completely */
}

/* Sidebar Toggle Button */
#sidebarToggle {
  display: flex !important;
  /* Always show the header toggle button */
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  font-size: 0.9rem;
}

@media (max-width: 767.98px) {
  #sidebarToggle {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}

#sidebarToggle:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}

/* Attendee Form Styles */
.attendee-form {
  background-color: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  transition: all var(--transition-normal);
}

.attendee-form h6 {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 1rem;
}

.attendee-form .form-label {
  color: var(--text);
  font-weight: 500;
}

.attendee-form .form-control {
  background-color: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

.attendee-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

/* Payment Form Styles */
.razorpay-payment-button {
  background-color: var(--primary) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.razorpay-payment-button:hover {
  background-color: var(--primary-dark) !important;
}

/* Content Card Styles */
.content-card .content-thumbnail {
  height: 180px;
  object-fit: cover;
}

.content-type-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

/* Related Content Card Styles */
.related-content-card {
  transition: transform 0.3s ease;
  background-color: rgba(30, 30, 30, 0.95);
  /* Darker background for better contrast */
}

.related-content-card:hover {
  transform: translateY(-5px);
}

.related-content-card .card-body {
  background-color: rgba(30, 30, 30, 0.95);
}

.related-content-card .card-title {
  color: #ffffff !important;
}

/* Ensure all text in related content cards is white */
.related-content-card h5,
.related-content-card p,
.related-content-card span,
.related-content-card .badge,
.related-content-card small {
  color: #ffffff !important;
}

/* Animation Styles */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Text Colors and Readability Improvements */
.text-muted {
  color: var(--text-muted) !important;
}

/* Ensure text readability in all contexts */
.text-dark {
  color: #212529 !important;
}

.text-light {
  color: #f8f9fa !important;
}

/* Improve contrast for links */
a {
  color: var(--primary-light);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.light-theme a {
  color: var(--primary-dark);
}

.light-theme a:hover {
  color: var(--primary);
}

/* Improve alert readability */
.alert {
  border: none;
  border-radius: var(--radius-md);
}

.alert-primary {
  background-color: rgba(99, 102, 241, 0.15);
  color: var(--primary-light);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* Force black text for alert-info messages */
.alert-info {
  background-color: #cff4fc !important;
  color: #000000 !important;
  border: 1px solid #b6effb !important;
}

.alert-info h4,
.alert-info p,
.alert-info * {
  color: #000000 !important;
}

.light-theme .alert-primary {
  background-color: rgba(99, 102, 241, 0.1);
  color: var(--primary-dark);
}

.light-theme .alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.light-theme .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.light-theme .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.light-theme .alert-info {
  background-color: #cff4fc !important;
  color: #000000 !important;
  border: 1px solid #b6effb !important;
}

.light-theme .alert-info h4,
.light-theme .alert-info p,
.light-theme .alert-info * {
  color: #000000 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-fadeIn {
  animation: fadeIn 1s ease;
}

.animate-fadeInUp {
  animation: fadeInUp 1s ease;
}

.animate-fadeInDown {
  animation: fadeInDown 1s ease;
}

.animate-fadeInLeft {
  animation: fadeInLeft 1s ease;
}

.animate-fadeInRight {
  animation: fadeInRight 1s ease;
}

.animate-pulse {
  animation: pulse 2s ease infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-spin {
  animation: spin 10s linear infinite;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-600 {
  animation-delay: 0.6s;
}

.delay-700 {
  animation-delay: 0.7s;
}

.delay-800 {
  animation-delay: 0.8s;
}

.delay-900 {
  animation-delay: 0.9s;
}

.delay-1000 {
  animation-delay: 1s;
}

.animate-fill-both {
  animation-fill-mode: both;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Fix for Bootstrap modals */
.modal-backdrop {
  z-index: 1040;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal {
  z-index: 1050;
}

.modal-dialog {
  margin: 1.75rem auto;
}

/* Modal styling for better readability */
.modal-content {
  background-color: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
}

.modal-header {
  border-bottom: 1px solid var(--border);
}

.modal-footer {
  border-top: 1px solid var(--border);
}

.light-theme .modal-content {
  background-color: var(--light-bg-alt);
  color: var(--light-text);
  border: 1px solid var(--light-border);
}

.light-theme .modal-header {
  border-bottom: 1px solid var(--light-border);
}

.light-theme .modal-footer {
  border-top: 1px solid var(--light-border);
}



/* Glassmorphism Card Styles */
.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-normal);
  color: var(--dark-text);
}

.glass-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.25);
}

.light-theme .glass-card {
  color: var(--light-text);
}

/* Dark Glass Card */
.glass-card-dark {
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  color: var(--dark-text);
}

.glass-card-dark:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  background: rgba(30, 30, 30, 0.95);
}

.glass-card-dark .card-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border);
  color: var(--dark-text);
}

.glass-card-dark .card-body {
  color: var(--dark-text);
}

.glass-card-dark .card-footer {
  background-color: rgba(0, 0, 0, 0.1);
  border-top: 1px solid var(--border);
  color: var(--dark-text);
}

.glass-card-dark .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.light-theme .glass-card-dark {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--light-border);
  color: var(--light-text);
}

.light-theme .glass-card-dark:hover {
  background: rgba(255, 255, 255, 1);
}

.light-theme .glass-card-dark .card-header {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--light-border);
  color: var(--light-text);
}

.light-theme .glass-card-dark .card-body {
  color: var(--light-text);
}

/* Animation for notification appearing from top */
@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation for notification disappearing to top */
@keyframes slideOutToTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Website Update Banner Styling */
.website-update-banner {
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
  background-size: 400% 400%;
  /* For gradient animation */
  animation: gradientShift 8s ease infinite;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  /* Added border radius */
  color: white !important;
  max-width: 800px;
  /* Increased width further to prevent collapse */
  width: fit-content;
  /* Fit to content */
  margin: 10px auto 0 auto;
  /* Add top gap and center */
  padding: 0.5rem 0;
  /* Reduced height */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* Initial state for animation */
  transform: translateY(-100%);
  opacity: 0;
  font-size: 0.9rem;
  /* Base font size for all text */
}

/* Responsive sizing for smaller screens */
@media (max-width: 768px) {
  .website-update-banner {
    max-width: 95vw;
    /* Nearly full width on small screens */
    padding: 0.3rem 0;
    /* More reduced height */
    margin: 8px auto 0 auto;
    /* Slightly reduced top margin */
    border-radius: 10px;
    /* Slightly smaller border radius */
    font-size: 0.85rem;
    /* Smaller base font size on small screens */
  }

  .website-update-banner #updateTitle {
    font-size: 0.8rem;
    /* More smaller font on small screens */
  }

  .website-update-banner strong:first-of-type {
    font-size: 0.8rem;
    /* More smaller font on small screens */
    margin-right: 0.4rem;
    /* Adjust spacing on small screens */
  }
}

@media (max-width: 576px) {
  .website-update-banner {
    max-width: 98vw;
    /* Even more width on very small screens */
    padding: 0.2rem 0;
    /* Further reduced height */
    margin: 6px auto 0 auto;
    /* Further reduced top margin */
    border-radius: 8px;
    /* Smaller border radius */
    font-size: 0.75rem;
    /* Even smaller base font size on very small screens */
  }

  .website-update-banner #updateTitle {
    font-size: 0.75rem;
    /* Even smaller font on very small screens */
    max-width: 180px;
    /* Limit title width on small screens */
  }

  .website-update-banner strong:first-of-type {
    font-size: 0.75rem;
    /* Even smaller font on very small screens */
    margin-right: 0.25rem;
    /* Further adjust spacing */
  }

  .website-update-banner .btn {
    padding: 0.1rem 0.3rem;
    /* Smaller buttons on very small screens */
    font-size: 0.7rem;
    /* Smaller button text */
  }
}

@media (max-width: 480px) {
  .website-update-banner {
    max-width: 99vw;
    /* Full width on smallest screens */
    padding: 0.15rem 0;
    /* Minimum height */
    margin: 5px auto 0 auto;
    /* Minimum top margin */
    border-radius: 6px;
    /* Smaller border radius */
    font-size: 0.7rem;
    /* Smallest base font size on very small screens */
  }

  .website-update-banner #updateTitle {
    font-size: 0.7rem;
    /* Smallest font on very small screens */
    max-width: 150px;
    /* Limit title width on smallest screens */
  }

  .website-update-banner strong:first-of-type {
    font-size: 0.7rem;
    /* Smallest font on very small screens */
    margin-right: 0.2rem;
    /* Minimum spacing */
  }

  .website-update-banner .btn {
    padding: 0.08rem 0.25rem;
    /* Smallest buttons */
    font-size: 0.65rem;
    /* Smallest button text */
  }
}

/* Show animation when banner is visible */
.website-update-banner:not(.d-none) {
  animation: slideInFromTop 0.5s ease forwards, gradientShift 8s ease infinite;
}

/* Close animation */
.website-update-banner.closing {
  animation: slideOutToTop 0.5s ease forwards !important;
}

.website-update-banner .container {
  max-width: 100%;
  display: flex;
  justify-content: center;
}

.website-update-banner .d-flex.justify-content-between {
  width: 100%;
  padding: 0 1rem;
}

.website-update-banner .d-flex.align-items-center:first-child {
  flex-grow: 1;
  margin-right: 1rem;
  /* Add space between content and buttons */
}

.website-update-banner .d-flex.align-items-center:last-child {
  flex-shrink: 0;
}

.website-update-banner .alert-link,
.website-update-banner .btn {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.website-update-banner .btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white !important;
  transition: all 0.3s ease;
  padding: 0.25rem 0.75rem;
  /* Smaller button */
}

.website-update-banner .btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}

.website-update-banner * {
  color: white !important;
}

.website-update-banner #updateTitle {
  font-weight: 700;
  /* Make title bolder */
  font-size: 1rem;
  /* Match the size of 'New Update' text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.website-update-banner strong:first-of-type {
  margin-right: 0.5rem;
  /* More space after the colon */
}

.website-update-banner strong:last-of-type {
  margin-left: 0.5rem;
  /* More space before the title */
}

.website-update-banner .btn-close {
  filter: invert(1) !important;
  /* Make close button white */
}

.light-theme .glass-card-dark .card-footer {
  background-color: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--light-border);
  color: var(--light-text);
}

.light-theme .glass-card-dark .text-muted {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Gradient Text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.gradient-text-purple {
  background: var(--gradient-purple-pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.gradient-text-blue {
  background: var(--gradient-blue-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.gradient-text-orange {
  background: var(--gradient-orange-red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-purple {
  background: var(--gradient-purple-pink);
}

.bg-gradient-blue {
  background: var(--gradient-blue-teal);
}

.bg-gradient-orange {
  background: var(--gradient-orange-red);
}

/* Gradient Borders */
.border-gradient {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 4px;
  background: var(--gradient-primary);
}

.border-gradient-content {
  background: var(--bg);
  border-radius: calc(var(--radius-lg) - 4px);
  height: 100%;
  width: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

/* Custom scrollbar for tables */
.table-responsive::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

/* Media Player Styles */
.modal-dialog.modal-lg {
  max-width: 90%;
}

@media (min-width: 992px) {
  .modal-dialog.modal-lg {
    max-width: 800px;
  }
}

/* Audio Player Styles */
.audio-player {
  width: 100%;
  padding: 10px 0;
}

.waveform {
  height: 60px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.waveform-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(99, 102, 241, 0.3);
  width: 0%;
  transition: width 0.1s linear;
}

.waveform-bars {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 0 5px;
  justify-content: space-between;
}

.waveform-bar {
  width: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 1px;
  border-radius: 1px;
}

/* PDF Viewer Styles */
.pdf-container {
  height: 70vh;
  max-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #333;
  border-radius: 4px;
}

.canvas-container {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #555;
  padding: 10px;
}

#pdfCanvas {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background-color: white;
  margin: 0 auto;
  display: block;
}

.pdf-controls {
  height: 50px;
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 10;
  background-color: #222;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#pdfLoading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

/* Lyrics Viewer Styles */
.lyrics-content {
  max-height: 70vh;
  overflow-y: auto;
  white-space: pre-line;
  font-size: 1.1rem;
  line-height: 1.8;
  user-select: none;
}

/* Mini Player Styles */
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(33, 37, 41, 0.95);
  color: white;
  z-index: 1050;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.mini-player.d-none {
  transform: translateY(100%);
}

.mini-player-content {
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.mini-player-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
}

.mini-player-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-player-info {
  flex-grow: 1;
  overflow: hidden;
  margin-right: 10px;
}

.mini-player-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-player-artist {
  font-size: 0.8rem;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-player-controls {
  display: flex;
  align-items: center;
}

.mini-player-progress {
  height: 3px;
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
}

.mini-player-progress-bar {
  height: 100%;
  background-color: var(--primary);
  width: 0%;
  transition: width 0.1s linear;
}

/* Video Player Styles */
#videoPlayer {
  max-height: 70vh;
  background-color: #000;
}

/* Filter Toggle Styles */
.filter-toggle-btn {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  position: relative;
}

.filter-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px);
}

.filter-toggle-btn i {
  transition: transform 0.3s ease;
}

/* Add a subtle pulse animation to indicate interactivity */
.filter-toggle-btn {
  animation: subtle-pulse 3s infinite;
}

@keyframes subtle-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
  }
}

.filter-toggle-btn:hover {
  animation: none;
}

/* Filter Collapse Animation */
.collapse {
  transition: height 0.35s ease;
}

/* Mobile Filter Improvements */
@media (max-width: 767.98px) {
  .filter-section {
    padding: 1rem 0 !important;
  }

  .card-header h5 {
    font-size: 1rem;
  }

  .filter-toggle-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .filter-toggle-btn .d-none.d-md-inline {
    display: none !important;
  }
}

/* Filter Card Enhancements */
.filter-card {
  border-radius: 12px;
  overflow: hidden;
}

.filter-card .card-header {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, var(--bs-primary) 0%, #4f46e5 100%);
}

.filter-card .card-body {
  background-color: #f8f9fa;
  border-radius: 0 0 12px 12px;
}

/* Featured Merchandise Styles */
.product-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.product-image {
  transition: transform 0.3s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.price-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Green gradient for merchandise */
.gradient-text-green {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-green {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
}

.btn-gradient-green {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.btn-gradient-green:hover {
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
}

.bg-gradient-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Product card responsive improvements */
@media (max-width: 768px) {
  .product-card .card-body {
    padding: 1rem;
  }

  .product-card .card-title {
    font-size: 1rem;
  }

  .price-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .rating {
    margin-top: 0.5rem;
  }
}

/* Additional Home Page Content Styles */

/* Statistics Section */
.gradient-text-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Newsletter Section */
.btn-gradient-orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.btn-gradient-orange:hover {
  background: linear-gradient(135deg, #ea580c, #dc2626);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);
}

/* Quick Links Cards */
.quick-link-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.quick-link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.quick-link-card:hover .display-4 {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Activity Feed Styles */
.activity-item {
  transition: all 0.3s ease;
}

.activity-item:hover {
  transform: translateX(5px);
}

/* Newsletter Form Styles */
#newsletterForm .form-control {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

#newsletterForm .form-control:focus {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: #f97316;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25);
}

#newsletterForm .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Statistics Cards Animation */
.glass-card-dark {
  transition: all 0.3s ease;
}

.glass-card-dark:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Testimonial Cards */
.testimonial-card {
  position: relative;
  overflow: hidden;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.1);
  font-family: serif;
}

/* Responsive improvements for new sections */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
  }

  .quick-link-card {
    margin-bottom: 1rem;
  }

  #newsletterForm .col-md-6,
  #newsletterForm .col-md-auto {
    margin-bottom: 1rem;
  }

  .glass-card-dark {
    padding: 1.5rem !important;
  }
}

/* Gradient backgrounds for sections */
.bg-gradient-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.bg-gradient-orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* Animation for statistics numbers */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-card-dark h3 {
  animation: countUp 0.6s ease-out;
}

/* Dark Theme Filter Styling */
.glass-card-dark .card-body .form-label {
  color: #ffffff !important;
  font-weight: 500;
}

.glass-card-dark .card-body .form-control,
.glass-card-dark .card-body .form-select {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.glass-card-dark .card-body .form-control:focus,
.glass-card-dark .card-body .form-select:focus {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

.glass-card-dark .card-body .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.glass-card-dark .card-body .input-group-text {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Filter Section Background */
section[style*="background-color: var(--bg)"] {
  background-color: var(--bg) !important;
  transition: background-color 0.3s ease;
}

/* ===== BOOKING REQUEST DETAILS PAGE TEXT COLOR FIX ===== */
/* Specific fix for booking request details page and similar admin detail pages */
body:has([href*="booking-requests/"]) .admin-layout,
body:has([href*="booking-requests/"]) .admin-layout *:not(.alert):not(.badge):not(.btn):not(.dropdown-menu),
body:has([href*="booking-request/"]) .admin-layout,
body:has([href*="booking-request/"]) .admin-layout *:not(.alert):not(.badge):not(.btn):not(.dropdown-menu) {
  color: #ffffff !important;
}

/* Target the specific table-like form layout in booking details */
.admin-layout .card .row,
.admin-layout .card .row *:not(.alert):not(.badge):not(.btn),
.admin-layout .card .col-md-6,
.admin-layout .card .col-md-6 *:not(.alert):not(.badge):not(.btn),
.admin-layout .card .col-md-8,
.admin-layout .card .col-md-8 *:not(.alert):not(.badge):not(.btn),
.admin-layout .card .col-md-4,
.admin-layout .card .col-md-4 *:not(.alert):not(.badge):not(.btn) {
  color: #ffffff !important;
}

/* Force white text for form-like data display sections */
.admin-layout .card-body .row .col-md-6 div,
.admin-layout .card-body .row .col-md-8 div,
.admin-layout .card-body .row .col-md-4 div,
.admin-layout .card-body h3,
.admin-layout .card-body h4,
.admin-layout .card-body h5,
.admin-layout .card-body p,
.admin-layout .card-body span:not(.badge),
.admin-layout .card-body strong,
.admin-layout .card-body em {
  color: #ffffff !important;
}

/* Override any Bootstrap or custom classes that might set dark text */
.admin-layout .text-dark,
.admin-layout .text-black,
.admin-layout .text-muted,
.admin-layout .text-secondary {
  color: #ffffff !important;
}

/* Ensure readonly inputs and form elements are visible */
.admin-layout input[readonly],
.admin-layout textarea[readonly],
.admin-layout .form-control[readonly],
.admin-layout .readonly-field {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Nuclear option for admin detail pages - force all text to white */
.admin-layout .card-body *:not(.alert):not(.badge):not(.btn):not(.dropdown-menu):not(.modal) {
  color: #ffffff !important;
}

/* ===== ROBUST FIX FOR BOOKING REQUEST DETAILS PAGE ===== */
/* This targets the specific page with inline styles that override CSS */

/* Target the specific booking details page by URL pattern */
body[data-page*="booking-details"] *,
body[data-page*="booking-request"] *,
body:has([href*="booking-requests/"]) *,
body:has([href*="booking-request/"]) * {
  color: #ffffff !important;
}

/* Override inline styles on table cells specifically */
.admin-layout table td[style*="color: #000000"],
.admin-layout table td[style*="color:#000000"],
.admin-layout table td[style*="color: black"],
.admin-layout table td[style*="color:black"] {
  color: #ffffff !important;
}

/* Force white text on all table elements in admin booking pages */
.admin-layout .table td,
.admin-layout .table th,
.admin-layout .table td *,
.admin-layout .table th * {
  color: #ffffff !important;
}

/* Override any div with inline black color styles */
.admin-layout div[style*="color: #000000"],
.admin-layout div[style*="color:#000000"],
.admin-layout div[style*="color: black"],
.admin-layout div[style*="color:black"] {
  color: #ffffff !important;
}

/* Specific targeting for the booking details template structure */
.admin-layout .container-fluid .card .card-body,
.admin-layout .container-fluid .card .card-body *:not(.badge):not(.btn):not(.alert) {
  color: #ffffff !important;
}

/* Override Bootstrap table classes that might interfere */
.admin-layout .table-bordered td,
.admin-layout .table-bordered th,
.admin-layout .table-striped td,
.admin-layout .table-striped th {
  color: #ffffff !important;
}

/* Preserve only specific elements that should keep their colors */
.admin-layout .badge,
.admin-layout .btn,
.admin-layout .alert,
.admin-layout .dropdown-menu * {
  color: inherit !important;
}

/* ===== ULTIMATE OVERRIDE FOR INLINE STYLES ===== */
/* This uses the highest possible CSS specificity to override inline styles */

/* Target all elements in admin layout with maximum specificity */
html body .admin-layout .container-fluid .card .card-body table.table td,
html body .admin-layout .container-fluid .card .card-body table.table th,
html body .admin-layout .container-fluid .card .card-body table td,
html body .admin-layout .container-fluid .card .card-body table th,
html body .admin-layout .container-fluid .card .card-body div,
html body .admin-layout .container-fluid .card .card-body p,
html body .admin-layout .container-fluid .card .card-body span:not(.badge),
html body .admin-layout .container-fluid .card .card-body strong,
html body .admin-layout .container-fluid .card .card-body h1,
html body .admin-layout .container-fluid .card .card-body h2,
html body .admin-layout .container-fluid .card .card-body h3,
html body .admin-layout .container-fluid .card .card-body h4,
html body .admin-layout .container-fluid .card .card-body h5,
html body .admin-layout .container-fluid .card .card-body h6 {
  color: #ffffff !important;
}

/* Additional override with even higher specificity */
html body div.admin-layout div.container-fluid div.card div.card-body table.table-bordered td,
html body div.admin-layout div.container-fluid div.card div.card-body table.table-bordered th {
  color: #ffffff !important;
}

/* Payment Warning Modal Styles */
.payment-warning-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.payment-warning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.payment-warning-container {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #f59e0b;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  width: 90%;
  animation: slideInUp 0.4s ease;
}

.payment-warning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f59e0b;
}

.payment-warning-header h4 {
  color: #fbbf24;
  margin: 0;
  font-size: 1.25rem;
}

.payment-warning-header .btn-close {
  opacity: 0.8;
}

.payment-warning-header .btn-close:hover {
  opacity: 1;
}

.payment-warning-body {
  padding: 24px;
}

.warning-message {
  color: #e5e7eb;
}

.warning-message p {
  margin: 0 0 16px 0;
  color: #f3f4f6;
  font-weight: 600;
}

.warning-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.warning-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 50%;
  color: #f59e0b;
  font-size: 1.2rem;
}

.warning-item:nth-child(4) .warning-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.warning-text {
  flex: 1;
  color: #d1d5db;
  font-size: 0.95rem;
  padding-top: 2px;
}

.warning-text strong {
  color: #fbbf24;
  display: block;
  margin-bottom: 2px;
}

.warning-item:nth-child(4) .warning-text strong {
  color: #60a5fa;
}

.payment-warning-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #f59e0b;
  justify-content: flex-end;
}

.payment-warning-footer .btn {
  border-radius: 6px;
  font-weight: 600;
  padding: 8px 20px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.payment-warning-footer .btn-outline-secondary {
  color: #d1d5db;
  border-color: #6b7280;
}

.payment-warning-footer .btn-outline-secondary:hover {
  background-color: rgba(107, 114, 128, 0.1);
  border-color: #9ca3af;
  color: #f3f4f6;
}

.payment-warning-footer .btn-warning {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #000;
}

.payment-warning-footer .btn-warning:hover {
  background-color: #d97706;
  border-color: #d97706;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
}

@media (max-width: 576px) {
  .payment-warning-container {
    max-width: 95%;
  }

  .payment-warning-header h4 {
    font-size: 1rem;
  }

  .payment-warning-footer {
    flex-direction: column;
  }

  .payment-warning-footer .btn {
    width: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checkbox Error Styling */
.form-check-input.is-invalid {
  border-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.1);
  box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.25);
}

.form-check-input.is-invalid:checked {
  background-color: #dc2626;
  border-color: #dc2626;
}

#checkboxError {
  display: block;
  color: #dc2626;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

/* Network Status Notification */
.network-status-notification {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  z-index: 10000;
  min-width: 320px;
  max-width: 500px;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  pointer-events: none;
}

.network-status-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  animation: slideInDown 0.4s ease;
}

.network-status-notification.offline {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
  border: 2px solid rgba(239, 68, 68, 0.8);
}

.network-status-notification.online {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
  border: 2px solid rgba(16, 185, 129, 0.8);
}

.network-status-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.network-status-content i {
  font-size: 1.5rem;
  animation: pulse 2s ease-in-out infinite;
}

.network-status-notification.online i {
  animation: checkBounce 0.6s ease;
}

.network-status-text {
  font-size: 0.95rem;
  font-weight: 500;
  flex: 1;
}

/* Offline full-screen overlay */
.offline-screen {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(135deg, #0f172a 0%, #111827 50%, #0b1224 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.offline-screen.show {
  opacity: 1;
  pointer-events: auto;
}

.offline-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 26px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

.offline-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: linear-gradient(120deg, #22d3ee, #a855f7, #f97316);
  background-size: 200% 200%;
  color: #0b1020;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 12px;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.35);
  animation: brandGlow 6s ease infinite;
}

.offline-radar {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offline-radar .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, 0.35);
  animation: offlinePulse 2.4s ease-out infinite;
}

.offline-radar .ring.ring-2 {
  animation-delay: 0.6s;
}

.offline-radar i {
  font-size: 48px;
  color: #f87171;
  animation: offlineBounce 1.2s ease-in-out infinite;
}

.offline-card h2 {
  color: #ffffff;
  font-size: 22px;
  margin: 4px 0 8px;
  font-weight: 700;
}

.offline-text {
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
}

body.offline-lock {
  overflow: hidden;
}

@keyframes brandGlow {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.35);
  }

  50% {
    background-position: 100% 50%;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.35);
  }

  100% {
    background-position: 0% 50%;
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.35);
  }
}

@keyframes offlinePulse {
  0% {
    transform: scale(0.75);
    opacity: 0.45;
  }

  70% {
    transform: scale(1.15);
    opacity: 0;
  }

  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

@keyframes offlineBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes slideInDown {
  from {
    transform: translateX(-50%) translateY(-150%);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes checkBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .network-status-notification {
    min-width: 90%;
    max-width: 95%;
    padding: 12px 16px;
    top: 60px;
  }

  .network-status-content {
    gap: 10px;
  }

  .network-status-content i {
    font-size: 1.3rem;
  }

  .network-status-text {
    font-size: 0.9rem;
  }
}

/* Payment Instructions Card Redesigned */
.payment-instruction-card {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.instruction-header {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #ffffff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.instruction-header i {
  font-size: 1.2rem;
}

.instruction-header h5 {
  color: #ffffff;
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.instruction-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.instruction-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.instruction-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(5px);
}

.instruction-item.info-item {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.item-icon {
  font-size: 1.1rem;
  min-width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-text {
  color: #f3f4f6;
  font-size: 0.88rem;
  line-height: 1.3;
}

.item-text strong {
  color: #fbbf24;
  font-weight: 600;
}

.instruction-item.info-item .item-text strong {
  color: #60a5fa;
}

/* Payment Agreement Section */
.payment-agreement-section {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  padding: 20px;
  border-radius: 12px;
  border: 2px solid rgba(99, 102, 241, 0.3);
}

.agreement-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(30, 30, 30, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.agreement-checkbox {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #6366f1;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.5);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.agreement-checkbox:hover {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.agreement-checkbox:checked {
  background-color: #6366f1;
  border-color: #6366f1;
}

.agreement-label {
  color: #f3f4f6;
  font-size: 0.95rem;
  line-height: 1.6;
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  user-select: none;
}

.agreement-error {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 6px;
  color: #fca5a5;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
  .payment-instruction-card {
    margin-top: 0;
  }

  .instruction-content {
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  .payment-instruction-card {
    margin-bottom: 16px;
    border-radius: 10px;
  }

  .instruction-header {
    padding: 14px 16px;
  }

  .instruction-header h5 {
    font-size: 1rem;
  }

  .instruction-content {
    padding: 16px;
    gap: 12px;
    max-height: none;
  }

  .instruction-item {
    padding: 10px;
    gap: 12px;
  }

  .item-icon {
    font-size: 1.2rem;
  }

  .item-text {
    font-size: 0.9rem;
  }

  .agreement-box {
    padding: 14px;
    gap: 12px;
  }

  .agreement-checkbox {
    width: 18px;
    height: 18px;
  }

  .agreement-label {
    font-size: 0.9rem;
  }

  .payment-agreement-section {
    padding: 16px;
  }

  .row.g-3.mb-4 {
    gap: 1rem !important;
  }
}

@media (max-width: 480px) {
  .instruction-header {
    gap: 10px;
    padding: 12px 14px;
  }

  .instruction-header h5 {
    font-size: 0.95rem;
  }

  .instruction-content {
    padding: 12px;
    gap: 10px;
  }

  .instruction-item {
    padding: 8px;
    gap: 10px;
  }

  .item-icon {
    font-size: 1.1rem;
    min-width: 28px;
  }

  .item-text {
    font-size: 0.85rem;
  }

  .agreement-box {
    padding: 12px;
    gap: 10px;
    flex-direction: column;
  }

  .agreement-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 0;
  }

  .agreement-label {
    font-size: 0.85rem;
  }

  .payment-agreement-section {
    padding: 12px;
  }
}