/* ========================================
   ORANGE THEME - Preview Mode
   Aktiveras via ?theme=orange
   ======================================== */

html[data-theme="orange"] {
  /* Varm mörk orange palett */
  --brand: #FF7A00;
  --accent: #FF3D00;
  --accent1: #FF7A45;  /* Orange primär för hover */
  --accent2: #FF3D00;  /* Orange sekundär för active */
  --text: #f2f2f2;     /* Premium ljus text */
  --glow: rgba(255,122,0,.18);
  --ring: 0 0 0 3px rgba(255,122,0,.35);
}

/* ========== Abstrakt bakgrund ========== */
html[data-theme="orange"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(40rem 30rem at 12% 18%, rgba(255,122,0,.06), transparent 60%),
    radial-gradient(50rem 40rem at 88% 76%, rgba(255,61,0,.05), transparent 70%);
  background-attachment: fixed;
  background-size: cover;
}

/* ========== Gradientrubriker ========== */
html[data-theme="orange"] h1,
html[data-theme="orange"] h2,
html[data-theme="orange"] h3 {
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== Hero H1 - Premium vit/grå gradient ========== */
html[data-theme="orange"] .hero h1 {
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 25%, #e8eef7 50%, #c4cbd9 75%, #a6b3c6 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* ========== Knappar ========== */
html[data-theme="orange"] .btn {
  background: linear-gradient(135deg, rgba(255,122,0,.75) 0%, rgba(255,61,0,.75) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 12px 40px rgba(0,0,0,.35);
}

html[data-theme="orange"] .btn:hover {
  background: linear-gradient(135deg, rgba(255,122,0,.85) 0%, rgba(255,61,0,.85) 100%);
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(255,100,0,.2);
}

html[data-theme="orange"] .btn-outline {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--ink);
  box-shadow: none;
}

html[data-theme="orange"] .btn-outline:hover {
  background: rgba(255,122,0,.08);
  box-shadow: 0 0 8px rgba(255,100,0,.2);
}

/* ========== Badges & Chips ========== */
html[data-theme="orange"] .badge {
  background: rgba(255,122,0,.12);
  color: var(--brand);
}

html[data-theme="orange"] .chip {
  background: linear-gradient(135deg, #FFB36A 0%, #FF7A00 40%, #FF3D00 100%);
  color: #1A1E25;
  box-shadow: 0 6px 20px rgba(255,100,0,.3);
}

/* ========== Kort & Sektioner ========== */
html[data-theme="orange"] .card {
  box-shadow: 
    0 0 0 1px rgba(255,122,0,.08) inset,
    0 10px 40px -20px rgba(255,122,0,.25);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,61,0,.05), transparent 60%),
    linear-gradient(180deg, rgba(18,26,38,.9), rgba(18,26,38,.82));
}

html[data-theme="orange"] .price-card {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,61,0,.03), transparent 60%),
    linear-gradient(180deg, rgba(18,26,38,.88), rgba(18,26,38,.82));
}

html[data-theme="orange"] .price-card::before {
  background: linear-gradient(135deg, rgba(255,122,0,.15), rgba(255,122,0,0) 45%, rgba(255,61,0,.12));
  filter: blur(12px);
}

html[data-theme="orange"] .price-card.highlight::before {
  opacity: .45;
}

/* ========== Hero & Sections ========== */
html[data-theme="orange"] .hero {
  background:
    radial-gradient(800px 300px at 8% 5%, rgba(255,122,0,.18), transparent 60%),
    radial-gradient(800px 300px at 92% -10%, rgba(255,61,0,.12), transparent 60%);
}

html[data-theme="orange"] .section.alt {
  background:
    radial-gradient(600px 240px at 8% 0%, rgba(255,122,0,.18), transparent 60%),
    radial-gradient(600px 240px at 92% 0%, rgba(255,61,0,.12), transparent 60%);
}

html[data-theme="orange"] .tldr {
  border: 1px dashed var(--brand);
  background: rgba(255,122,0,.06);
}

/* ========== Lists & Detaljer ========== */
html[data-theme="orange"] .list li::before {
  border: 1px solid var(--brand);
  background: radial-gradient(circle at 50% 50%, var(--brand) 40%, transparent 41%);
}

html[data-theme="orange"] .faq details[open] summary {
  color: var(--brand);
}

/* ========== Forms ========== */
html[data-theme="orange"] .input:focus,
html[data-theme="orange"] .textarea:focus {
  box-shadow: var(--ring);
  border-color: var(--brand);
}

html[data-theme="orange"] a:focus-visible,
html[data-theme="orange"] button:focus-visible {
  outline-color: var(--brand);
}

/* ========================================
   NAVIGATION - DESKTOP & MOBILE
   Premium orange-glow-effekter
   ======================================== */

/* Logo */
html[data-theme="orange"] .logo {
  color: var(--text);
  transition: color 0.2s, text-shadow 0.3s;
  cursor: pointer;
}

html[data-theme="orange"] .logo:hover,
html[data-theme="orange"] .logo:focus-visible {
  color: var(--accent1);
  text-shadow: 0 0 12px rgba(255,122,0,.7);
  opacity: 1 !important;
}

/* Desktop Navigation Links */
html[data-theme="orange"] .nav-links a {
  color: var(--text);
  transition: color 0.2s, text-shadow 0.3s;
  cursor: pointer;
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
}

html[data-theme="orange"] .nav-links a:hover,
html[data-theme="orange"] .nav-links a:focus-visible {
  color: var(--accent1);
  text-shadow: 0 0 8px rgba(255,122,0,.6);
  opacity: 1 !important;
  filter: brightness(1.15);
}

/* Active state för desktop nav */
html[data-theme="orange"] .nav-links a.active,
html[data-theme="orange"] .nav-links a[aria-current="page"] {
  color: var(--accent2);
  text-shadow: 0 0 12px rgba(255,61,0,.7);
  border-bottom: 2px solid var(--accent2);
  padding-bottom: 6px;
}

/* Focus-visible för tillgänglighet */
html[data-theme="orange"] .nav-links a:focus-visible {
  outline: 2px solid var(--accent1);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ========== Generator-specifikt ========== */
html[data-theme="orange"] .gen-tab.active {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
}

html[data-theme="orange"] .gen-tab:hover:not(.active) {
  background: rgba(255,122,0,.08);
}

/* ========================================
   MOBILE NAVIGATION
   Premium glaseffekt & gradient-kant
   ======================================== */

@media (max-width: 760px) {
  /* Mobilmeny med glaseffekt */
  html[data-theme="orange"] .nav-links {
    background: linear-gradient(
      180deg,
      rgba(18,26,38,.95) 0%,
      rgba(18,26,38,.92) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid transparent;
    background-image: 
      linear-gradient(rgba(18,26,38,.95), rgba(18,26,38,.92)),
      linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 
      0 8px 32px rgba(0,0,0,.4),
      0 0 0 1px rgba(255,122,0,.15) inset,
      0 0 20px rgba(255,122,0,.2);
  }
  
  /* Mobilmeny länkar */
  html[data-theme="orange"] .nav-links a {
    color: var(--text);
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    cursor: pointer;
  }
  
  /* Mobilmeny hover/focus */
  html[data-theme="orange"] .nav-links a:hover,
  html[data-theme="orange"] .nav-links a:focus-visible {
    color: var(--accent1);
    text-shadow: 0 0 12px rgba(255,122,0,.8);
    background: rgba(255,122,0,.15) !important;
    opacity: 1 !important;
    transform: translateX(4px);
  }
  
  /* Mobilmeny active state */
  html[data-theme="orange"] .nav-links a.active,
  html[data-theme="orange"] .nav-links a[aria-current="page"] {
    color: var(--accent2);
    text-shadow: 0 0 16px rgba(255,61,0,.9);
    background: rgba(255,61,0,.2);
    border-bottom: none;
    border-left: 3px solid var(--accent2);
    padding-bottom: 10px;
    padding-left: 9px;
  }
  
  /* Mobilmeny toggle button */
  html[data-theme="orange"] .nav-toggle {
    border-color: var(--accent1);
    color: var(--text);
    transition: all 0.3s ease;
  }
  
  html[data-theme="orange"] .nav-toggle:hover,
  html[data-theme="orange"] .nav-toggle:focus-visible {
    border-color: var(--accent1);
    color: var(--accent1);
    text-shadow: 0 0 8px rgba(255,122,0,.6);
    box-shadow: 0 0 12px rgba(255,122,0,.3);
  }
  
  html[data-theme="orange"] .nav-toggle:focus-visible {
    outline: 2px solid var(--accent1);
    outline-offset: 2px;
  }
}