/* StreamWave IPTV - White-First Design System */

:root {
  /* Color Palette */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  
  --text-primary: #0f172a;    /* Slate 900 */
  --text-secondary: #475569;  /* Slate 600 */
  --text-muted: #64748b;      /* Slate 500 */
  
  --border-light: #e2e8f0;    /* Slate 200 */
  --border-subtle: #cbd5e1;   /* Slate 300 */
  
  /* Restrained Professional Blue Accent */
  --accent-blue: #2563eb;     /* Blue 600 */
  --accent-blue-hover: #1d4ed8; /* Blue 700 */
  --accent-blue-light: #eff6ff; /* Blue 50 */
  --accent-blue-border: #bfdbfe; /* Blue 200 */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
}

/* Base Reset & Typography */
html {
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Accordion transition for FAQ */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-content {
  max-height: 600px;
  transition: max-height 0.35s ease-in-out;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Card Hover States */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-blue-border);
  box-shadow: var(--shadow-md);
}

/* Pricing Card Featured Ribbon */
.featured-plan-border {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 1px var(--accent-blue), var(--shadow-lg);
}

/* Device Selector Buttons */
.device-select-btn {
  transition: all 0.2s ease-in-out;
  color: var(--text-secondary);
  cursor: pointer;
}

.device-select-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.device-select-btn.active {
  background-color: var(--accent-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}