/**
 * Visharada.com - Indian Ethnic Theme
 * Color Palette from Logo:
 * - Gold: #F4A125
 * - Orange: #E65100
 * - Red: #B71C1C
 * - Dark: #212121
 * - Additional: Deep Maroon #8B0000, Saffron #FF9933, Cream #FFF8DC
 */

:root {
  /* Primary Colors from Logo */
  --visharada-gold: #F4A125;
  --visharada-orange: #E65100;
  --visharada-red: #B71C1C;
  --visharada-dark: #212121;
  
  /* Secondary Colors */
  --visharada-maroon: #8B0000;
  --visharada-saffron: #FF9933;
  --visharada-cream: #FFF8DC;
  --visharada-light-gold: #FFD700;
  --visharada-deep-orange: #FF6F00;
  
  /* Gradients */
  --visharada-gradient-primary: linear-gradient(135deg, #F4A125 0%, #E65100 50%, #B71C1C 100%);
  --visharada-gradient-subtle: linear-gradient(to right, #FFF8DC 0%, #F4A125 100%);
  --visharada-gradient-dark: linear-gradient(180deg, #1a1625 0%, #2d1b4e 50%, #3E2723 100%);
  --visharada-gradient-dark-hero: linear-gradient(135deg, #1a1625 0%, #2d1b4e 60%, #3E2723 100%);
  
  /* Shadows */
  --visharada-shadow-sm: 0 2px 8px rgba(244, 161, 37, 0.15);
  --visharada-shadow-md: 0 4px 16px rgba(244, 161, 37, 0.25);
  --visharada-shadow-lg: 0 8px 32px rgba(244, 161, 37, 0.35);
  --visharada-shadow-glow: 0 0 20px rgba(244, 161, 37, 0.4);
  
  /* Border Radius */
  --visharada-radius-sm: 8px;
  --visharada-radius-md: 12px;
  --visharada-radius-lg: 16px;
  
  /* Spacing */
  --visharada-space-xs: 0.25rem;
  --visharada-space-sm: 0.5rem;
  --visharada-space-md: 1rem;
  --visharada-space-lg: 1.5rem;
  --visharada-space-xl: 2rem;
}

/* Body Background with Subtle Pattern */
body {
  background: linear-gradient(135deg, #FFF8DC 0%, #FFFFFF 100%);
  background-attachment: fixed;
  font-family: 'Georgia', 'Crimson Text', serif;
  color: #212121;
}

/* Indian Pattern Background (Rangoli/Mandala inspired) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  z-index: -1;
  background-image: 
    radial-gradient(circle at 25% 25%, var(--visharada-gold) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, var(--visharada-orange) 2px, transparent 2px);
  background-size: 50px 50px;
}

/* Decorative Border Pattern (Paisley/Floral inspired) */
.visharada-border-top {
  border-top: 3px solid;
  border-image: linear-gradient(to right, 
    var(--visharada-gold) 0%, 
    var(--visharada-orange) 50%, 
    var(--visharada-red) 100%
  ) 1;
  position: relative;
}

.visharada-border-top::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 6px;
  background: var(--visharada-gradient-primary);
  border-radius: 3px;
}

/* Decorative Corners (Temple-inspired) */
.visharada-corner-accent::before,
.visharada-corner-accent::after {
  content: '◆';
  position: absolute;
  color: var(--visharada-gold);
  font-size: 12px;
  opacity: 0.6;
}

.visharada-corner-accent::before {
  top: 8px;
  left: 8px;
}

.visharada-corner-accent::after {
  bottom: 8px;
  right: 8px;
}

/* Card Styles with Ethnic Touch */
.visharada-card {
  background: white;
  border-radius: var(--visharada-radius-md);
  box-shadow: var(--visharada-shadow-md);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, 
    var(--visharada-gold), 
    var(--visharada-orange)
  ) 1;
  position: relative;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.visharada-card:hover {
  box-shadow: var(--visharada-shadow-lg);
  transform: translateY(-2px);
}

/* Button Styles - Primary */
.visharada-btn-primary {
  background: var(--visharada-gradient-primary);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: var(--visharada-radius-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: var(--visharada-shadow-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.visharada-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.5s ease;
}

.visharada-btn-primary:hover::before {
  left: 100%;
}

.visharada-btn-primary:hover {
  box-shadow: var(--visharada-shadow-glow);
  transform: translateY(-2px);
}

/* Button Styles - Secondary */
.visharada-btn-secondary {
  background: white;
  color: var(--visharada-orange);
  border: 2px solid var(--visharada-gold);
  padding: 12px 32px;
  border-radius: var(--visharada-radius-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.visharada-btn-secondary:hover {
  background: var(--visharada-gold);
  color: white;
  border-color: var(--visharada-orange);
  box-shadow: var(--visharada-shadow-md);
}

/* Headings with Decorative Underline */
.visharada-heading {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  margin-bottom: 32px;
  color: var(--visharada-dark);
  font-weight: 700;
}

.visharada-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--visharada-gradient-primary);
  border-radius: 2px;
}

.visharada-heading::before {
  content: '❖';
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  color: var(--visharada-gold);
  font-size: 16px;
  background: white;
  padding: 0 8px;
  z-index: 1;
}

/* Navigation Bar - Ethnic Style */
.visharada-navbar {
  background: var(--visharada-gradient-dark);
  border-bottom: 3px solid var(--visharada-gold);
  box-shadow: var(--visharada-shadow-lg);
  position: relative;
}

.visharada-navbar::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, 
    transparent 0%, 
    var(--visharada-gold) 50%, 
    transparent 100%
  );
}

/* Hero Section with Overlay */
.visharada-hero {
  background: var(--visharada-gradient-dark-hero);
  position: relative;
  padding: 80px 20px;
  text-align: center;
  overflow: hidden;
}

.visharada-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(244, 161, 37, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(230, 101, 0, 0.1) 0%, transparent 50%);
  animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.visharada-hero h1 {
  color: var(--visharada-gold);
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.visharada-hero p {
  color: var(--visharada-cream);
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Course Card - Ethnic Style */
.visharada-course-card {
  background: white;
  border-radius: var(--visharada-radius-lg);
  overflow: hidden;
  box-shadow: var(--visharada-shadow-md);
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.visharada-course-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--visharada-gradient-primary);
}

.visharada-course-card:hover {
  box-shadow: var(--visharada-shadow-lg);
  transform: translateY(-4px);
  border-color: var(--visharada-gold);
}

/* Badge Styles */
.visharada-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.visharada-badge-gold {
  background: linear-gradient(135deg, var(--visharada-gold), var(--visharada-light-gold));
  color: var(--visharada-dark);
  box-shadow: var(--visharada-shadow-sm);
}

.visharada-badge-orange {
  background: linear-gradient(135deg, var(--visharada-orange), var(--visharada-saffron));
  color: white;
  box-shadow: var(--visharada-shadow-sm);
}

/* Divider with Decorative Element */
.visharada-divider {
  position: relative;
  text-align: center;
  margin: 32px 0;
  height: 2px;
  background: linear-gradient(to right, 
    transparent 0%, 
    var(--visharada-gold) 50%, 
    transparent 100%
  );
}

.visharada-divider::before {
  content: '❋';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: var(--visharada-gold);
  padding: 0 16px;
  font-size: 20px;
}

/* Form Inputs - Ethnic Style */
.visharada-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #E0E0E0;
  border-radius: var(--visharada-radius-sm);
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
}

.visharada-input:focus {
  outline: none;
  border-color: var(--visharada-gold);
  box-shadow: 0 0 0 3px rgba(244, 161, 37, 0.1);
}

/* Alert/Notification Styles */
.visharada-alert {
  padding: 16px 20px;
  border-radius: var(--visharada-radius-md);
  border-left: 4px solid var(--visharada-gold);
  background: linear-gradient(to right, 
    rgba(244, 161, 37, 0.1) 0%, 
    transparent 100%
  );
  box-shadow: var(--visharada-shadow-sm);
}

/* Table Styles - Ethnic Touch */
.visharada-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: var(--visharada-radius-md);
  overflow: hidden;
  box-shadow: var(--visharada-shadow-md);
}

.visharada-table thead {
  background: var(--visharada-gradient-primary);
  color: white;
}

.visharada-table th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
}

.visharada-table td {
  padding: 16px;
  border-bottom: 1px solid #F0F0F0;
}

.visharada-table tbody tr:hover {
  background: rgba(244, 161, 37, 0.05);
}

/* Modal Styles */
.visharada-modal {
  background: white;
  border-radius: var(--visharada-radius-lg);
  box-shadow: var(--visharada-shadow-lg);
  border: 3px solid var(--visharada-gold);
  position: relative;
  overflow: hidden;
}

.visharada-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--visharada-gradient-primary);
}

/* Sidebar Styles */
.visharada-sidebar {
  background: white;
  border-right: 3px solid var(--visharada-gold);
  box-shadow: var(--visharada-shadow-md);
}

.visharada-sidebar-item {
  padding: 12px 20px;
  color: var(--visharada-dark);
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.visharada-sidebar-item:hover {
  background: rgba(244, 161, 37, 0.1);
  border-left-color: var(--visharada-gold);
  color: var(--visharada-orange);
}

.visharada-sidebar-item.active {
  background: linear-gradient(to right, 
    rgba(244, 161, 37, 0.15) 0%, 
    transparent 100%
  );
  border-left-color: var(--visharada-orange);
  color: var(--visharada-orange);
  font-weight: 600;
}

/* Loading Spinner - Ethnic */
.visharada-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(244, 161, 37, 0.2);
  border-top-color: var(--visharada-gold);
  border-radius: 50%;
  animation: visharadaSpin 1s linear infinite;
}

@keyframes visharadaSpin {
  to { transform: rotate(360deg); }
}

/* Footer Styles */
.visharada-footer {
  background: var(--visharada-gradient-dark);
  color: var(--visharada-cream);
  border-top: 3px solid var(--visharada-gold);
  position: relative;
}

.visharada-footer::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, 
    transparent 0%, 
    var(--visharada-gold) 50%, 
    transparent 100%
  );
}

/* Responsive Design */
@media (max-width: 768px) {
  .visharada-hero h1 {
    font-size: 2rem;
  }
  
  .visharada-hero p {
    font-size: 1rem;
  }
  
  .visharada-card {
    padding: 1rem;
  }
  
  /* Header - Make it stack vertically on mobile */
  header .flex {
    flex-direction: column;
  }
  
  header .w-\[15\%\] {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 2px solid #E5E7EB;
  }
  
  header .w-\[85\%\] {
    width: 100% !important;
  }
  
  /* Navigation - Improve mobile menu */
  .visharada-navbar {
    padding: 0.75rem 1rem;
  }
  
  nav .space-x-6 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  nav a {
    font-size: 0.875rem;
  }
  
  /* Breadcrumbs - Reduce font size on mobile */
  nav.flex.items-center.space-x-2 {
    flex-wrap: wrap;
    font-size: 0.75rem;
  }
  
  /* Back button - Full width on mobile */
  .visharada-back-button {
    width: 100%;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  /* Course cards - Stack vertically */
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  /* Tables - Make scrollable */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Modal - Full screen on mobile */
  .fixed.inset-0 > div {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
  }
  
  /* Forms - Full width inputs */
  input, select, textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Buttons - Larger touch targets */
  button, .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  
  /* Sidebar - Off-canvas on mobile */
  .flex.h-screen > div:first-child {
    position: fixed;
    left: -100%;
    transition: left 0.3s ease;
    z-index: 1000;
  }
  
  .flex.h-screen > div:first-child.open {
    left: 0;
  }
  
  /* Logo - Reduce size on mobile */
  img[alt="Visharada"] {
    max-height: 48px !important;
  }
  
  /* Text sizes - Reduce for mobile */
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  /* Padding adjustments */
  .p-8 {
    padding: 1rem !important;
  }
  
  .px-6, .py-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Container widths */
  .max-w-7xl, .max-w-4xl, .max-w-2xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Course detail - Stack layout */
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  /* Hide desktop-only elements */
  .hidden.md\:block {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .block.md\:hidden {
    display: block !important;
  }
  
  /* Fix overflowing content */
  * {
    max-width: 100vw;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  pre, code {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Tablet specific (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .p-8 {
    padding: 1.5rem !important;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  header .w-\[15\%\] {
    width: 20% !important;
  }
  
  header .w-\[85\%\] {
    width: 80% !important;
  }
}

/* Extra small devices (320px - 480px) */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  
  .visharada-hero {
    padding: 40px 15px;
  }
  
  .visharada-btn-primary,
  .visharada-btn-secondary {
    padding: 10px 20px;
    font-size: 0.875rem;
  }
  
  .visharada-card {
    padding: 0.75rem;
  }
  
  /* Stack header rows vertically */
  header .flex.flex-col > div {
    padding: 0.5rem 1rem;
  }
  
  /* Reduce logo size further */
  img[alt="Visharada"] {
    max-height: 40px !important;
  }
  
  /* Make text even smaller */
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.1rem !important;
  }
  
  /* Reduce all padding */
  .p-6, .p-4 {
    padding: 0.75rem !important;
  }
  
  /* Stack buttons vertically */
  .flex.space-x-4 {
    flex-direction: column !important;
    gap: 0.5rem;
  }
  
  .flex.space-x-4 > * {
    width: 100%;
  }
}

/* Utility Classes */
.visharada-text-gold { color: var(--visharada-gold); }
.visharada-text-orange { color: var(--visharada-orange); }
.visharada-text-red { color: var(--visharada-red); }
.visharada-bg-cream { background-color: var(--visharada-cream); }
.visharada-bg-gradient { background: var(--visharada-gradient-primary); }

/* Back Button */
.visharada-back-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: white;
  border: 2px solid var(--visharada-gold);
  border-radius: var(--visharada-radius-sm);
  color: var(--visharada-dark);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--visharada-shadow-sm);
}

.visharada-back-button:hover {
  background: var(--visharada-gold);
  color: white;
  box-shadow: var(--visharada-shadow-md);
  transform: translateX(-2px);
}

.visharada-back-button i {
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.visharada-back-button:hover i {
  transform: translateX(-4px);
}

/* Animation for Page Load */
@keyframes visharadaFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.visharada-fade-in {
  animation: visharadaFadeIn 0.6s ease-out;
}

/* Course Page Tabs */
.tab-btn {
  position: relative;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  color: #2563EB;
  background-color: #F3F4F6;
}

.tab-btn.active,
.tab-btn.border-b-4 {
  color: #2563EB;
  border-bottom: 4px solid #2563EB;
}

/* Course Header Responsive */
@media (max-width: 768px) {
  .visharada-card-gradient {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Enrollment Button */
#enrollBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}