/* ==========================================================================
   1. ROOT & THEME VARIABLES (Copied from your provided theme)
========================================================================== */
:root {
  --bg-primary: #1c1c1c;
  --bg-secondary: #2a2a2a;
  --bg-tertiary: #222; /* Used for recommendations and less prominent areas */
  --text-primary: #e0e0e0;
  --text-secondary: #ccc;
  --text-heading: #fff;
  --border-primary: #444;
  --border-secondary: #383838; /* Used for finer lines */
  --accent-primary: #e44d26;
  --accent-primary-hover: #f55a35;
  --accent-primary-transparent: rgba(228, 77, 38, 0.3);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-strong-color: rgba(0, 0, 0, 0.4);
  --card-border-light-trans: rgba(
    255,
    255,
    255,
    0.1
  ); /* For lighter borders on dark cards */
  --card-bg-trans: rgba(42, 42, 42, 0.7); /* Example of a translucent card */
  --element-bg-hover: #3a3a3a;
  --transition-speed: 0.3s;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --error-color: #c0392b;
  --info-color: #3498db;
  --button-text-color: #ffffff;
}

body.light-mode {
  --bg-primary: #f4f4f4;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e9ecef; /* Light tertiary for light mode recommendations */
  --text-primary: #333333;
  --text-secondary: #555555;
  --text-heading: #111111;
  --border-primary: #cccccc;
  --border-secondary: #dddddd;
  --accent-primary-transparent: rgba(228, 77, 38, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-strong-color: rgba(0, 0, 0, 0.15);
  --card-border-light-trans: rgba(0, 0, 0, 0.1);
  --card-bg-trans: rgba(255, 255, 255, 0.8);
  --element-bg-hover: #e8e8e8;
  --success-color: #218838;
  --warning-color: #e0a800;
  --error-color: #c82333;
  --info-color: #3498db;
  --button-text-color: #ffffff;
}

/* ==========================================================================
   2. BASE & LAYOUT STYLES
========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 16px;
  transition: background-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
  min-height: 100vh;
}

.main-container {
  max-width: 1000px;
  margin: 20px auto;
  background-color: var(--bg-secondary);
  padding: 30px 40px;
  border-radius: 12px;
  border: 1px solid var(--border-primary);
  box-shadow: 0 8px 25px var(--shadow-strong-color);
}

header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-secondary);
  position: relative;
}

/* ==========================================================================
   3. INPUT AREA & BUTTONS
========================================================================== */
.input-area {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  align-items: center;
}

.input-group {
  flex-grow: 1;
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.1em;
}

#urlInput {
  width: 100%;
  padding: 15px 15px 15px 45px; /* Space for icon */
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  font-size: 1.1em;
  transition: border-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}
#urlInput:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-transparent);
}

.cta-button {
  padding: 15px 25px;
  background-color: var(--accent-primary);
  color: var(--button-text-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
  transition: background-color var(--transition-speed) ease,
    transform var(--transition-speed) ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cta-button:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-2px);
}
.cta-button:active {
  transform: translateY(0px);
}

/* ==========================================================================
   4. LOADING & ERROR MESSAGES
========================================================================== */
.loading-indicator {
  text-align: center;
  margin: 40px 0;
  color: var(--text-secondary);
}

.spinner {
  border: 5px solid var(--border-secondary);
  border-top: 5px solid var(--accent-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.error-message {
  background-color: var(--accent-primary-transparent);
  color: var(
    --accent-primary
  ); /* More prominent in dark, might need light mode adjustment */
  border: 1px solid var(--accent-primary);
  padding: 15px 20px;
  border-radius: 8px;
  margin: 20px 0;
  text-align: center;
  font-weight: 500;
}
body.light-mode .error-message {
  color: var(
    --error-color
  ); /* Using explicit error color for better contrast in light mode */
  background-color: rgba(192, 57, 43, 0.1);
  border-color: var(--error-color);
}

/* ==========================================================================
   5. RESULTS AREA & TABS
========================================================================== */
.results-container {
  margin-top: 30px;
}
.results-header {
  margin-bottom: 20px;
}
.results-header h2 {
  color: var(--text-heading);
  font-size: 1em;
}
#auditedUrlDisplay {
  color: var(--accent-primary);
  font-weight: 600;
  word-break: break-all;
}

.tabs-nav-container {
  overflow-x: auto; /* For responsive tabs on small screens */
  white-space: nowrap; /* Keep tabs in one line */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
/* Hide scrollbar for browsers that support it */
.tabs-nav-container::-webkit-scrollbar {
  display: none;
}
.tabs-nav-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tabs-nav {
  display: flex; /* Can revert to inline-block for scrolling */
  gap: 5px;
}

.tab-button {
  background: transparent;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.05em;
  font-weight: 500;
  transition: all var(--transition-speed) ease;
  border-bottom: 3px solid transparent;
  position: relative;
  top: 2px; /* To align with container border */
  display: inline-flex; /* Changed for potential icon alignment */
  align-items: center;
  gap: 8px;
}
.tab-button:hover {
  color: var(--text-primary);
  background-color: var(--element-bg-hover);
}
.tab-button.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: 700;
}

.tab-content-panel {
  display: none;
  animation: fadeIn var(--transition-speed) ease;
}
.tab-content-panel.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   6. RESULT ITEMS STYLING (within tabs)
========================================================================== */
.result-category {
  margin-bottom: 25px;
  /* Not giving it a distinct background, it will inherit tab panel background */
}
/* We'll apply border/background to tab-content-panel if needed or keep it flat */
/* .tab-content-panel { background-color: var(--bg-tertiary); padding: 20px; border-radius: 8px; } */

.result-category h4 {
  /* New for GEO/AEO specific subheadings */
  color: var(--text-heading);
  font-size: 1.3em;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-secondary);
}

.result-item {
  padding: 12px 0; /* More vertical padding, no horizontal, parent handles it */
  border-bottom: 1px solid var(--border-secondary);
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align items to the top if content wraps */
  gap: 15px;
}
.result-item:last-child {
  border-bottom: none;
}

.result-item strong {
  color: var(--text-primary);
  font-weight: 600;
  flex-basis: 35%; /* Give more space if needed */
  min-width: 150px; /* Ensure labels don't get too squeezed */
}

.result-value {
  flex-grow: 1;
  text-align: right;
  color: var(--text-secondary);
  word-break: break-all; /* Handle long URLs */
}
.result-value ul {
  list-style-type: none;
  padding-left: 0;
  text-align: right; /* Ensure list items also align right */
}
.result-value ul li {
  margin-bottom: 3px;
}

.result-value a {
  color: var(--accent-primary);
  text-decoration: none;
}
.result-value a:hover {
  text-decoration: underline;
  color: var(--accent-primary-hover);
}

.status-pass {
  color: var(--success-color) !important;
  font-weight: bold;
}
.status-fail {
  color: var(--error-color) !important;
  font-weight: bold;
}
.status-warn {
  color: var(--warning-color) !important;
  font-weight: bold;
}
.status-info {
  color: var(--info-color) !important;
  font-weight: bold;
}

.recommendation {
  font-size: 0.9em;
  color: var(--text-secondary);
  padding: 10px 15px; /* More distinct padding */
  margin-top: 5px; /* Spacing from result item */
  margin-bottom: 10px; /* Space before next result-item */
  background-color: var(--bg-tertiary);
  border-left: 3px solid var(--accent-primary); /* Accent bar for emphasis */
  border-radius: 0 4px 4px 0;
}

.gemini-button {
  background-color: var(--accent-primary);
  color: var(--button-text-color);
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color var(--transition-speed) ease;
}

.gemini-button:hover {
  background-color: var(--accent-primary-hover);
}

.gemini-steps {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--bg-primary);
  border-radius: 4px;
}

/* ==========================================================================
   7. FOOTER
========================================================================== */
footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px 0;
  border-top: 1px solid var(--border-primary);
  font-size: 0.95em;
  color: var(--text-secondary);
}

/* ==========================================================================
   8. RESPONSIVENESS (Basic Example)
========================================================================== */
@media (max-width: 768px) {
  .main-container {
    padding: 20px 25px;
    margin: 20px 10px; /* Reduced margin for smaller screens */
  }
  header h1 {
    font-size: 1.8em;
  }
  header p {
    font-size: 1em;
  }
  .input-area {
    flex-direction: column;
    gap: 15px;
  }
  #urlInput,
  .cta-button {
    width: 100%;
    font-size: 1em;
  }
  .cta-button {
    justify-content: center; /* Center icon and text */
  }
  .tab-button {
    padding: 10px 15px;
    font-size: 0.95em;
  }
  .result-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .result-value {
    text-align: left;
    width: 100%;
  }
  .result-value ul {
    text-align: left;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
    /* padding: 10px; */ /* Removed this */
  }
  .main-container {
    margin: 10px; /* Added this */
    padding: 15px;
  }
  header h1 {
    font-size: 1.6em;
  }
  .theme-toggle-btn {
    font-size: 1em;
    width: 35px;
    height: 35px;
    top: -5px; /* Adjust positioning slightly */
    right: -5px;
  }
}

/* ==========================================================================
   NEW HERO SECTION STYLES
========================================================================== */
.hero-section {
  background-color: var(--bg-tertiary); /* Slightly different background */
  border-radius: 8px;
  padding: 30px 35px;
  margin-bottom: 40px;
  text-align: center;
  border: 1px solid var(--border-secondary);
  box-shadow: 0 4px 15px var(--shadow-color);
}

.hero-content h2 {
  color: var(--text-heading);
  font-size: 1.8em; /* Adjust as needed */
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.hero-content .ai-highlight {
  color: var(--accent-primary);
  font-weight: 700; /* Make AI Search stand out */
}

.hero-subtitle {
  color: var(--text-secondary);
  font-size: 1.1em; /* Adjust as needed */
  max-width: 600px; /* Prevent it from being too wide */
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 25px 20px;
    margin-bottom: 30px;
  }
  .hero-content h2 {
    font-size: 1.5em;
  }
  .hero-subtitle {
    font-size: 1em;
  }
}

/* ==========================================================================
   9. TABS SCROLL ARROWS
========================================================================== */
.tabs-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--border-primary);
  margin-bottom: 25px;
}

.scroll-arrow {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed) ease;
  z-index: 10;
  flex-shrink: 0; /* Prevent arrows from shrinking */
}
.scroll-arrow:hover {
  background-color: var(--element-bg-hover);
  color: var(--accent-primary);
}
.scroll-arrow.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scroll-arrow-left {
  margin-right: 5px;
}

.scroll-arrow-right {
  margin-left: 5px;
}

.tabs-nav-container {
  flex-grow: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.tabs-nav-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.faq-title {
  text-align: center;
  color: var(--text-heading);
  font-size: 1.8em;
  margin-bottom: 30px;
}
.faq-title .fa-question-circle {
  color: var(--accent-primary);
  margin-right: 10px;
}

.faq-accordion {
  max-width: 800px; /* Or make it full width if preferred */
  margin: 0 auto;
}

.faq-item {
  background-color: var(--bg-tertiary);
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
  overflow: hidden; /* Important for smooth animation */
}

.faq-question {
  background-color: transparent; /* Inherits from faq-item */
  color: var(--text-primary);
  cursor: pointer;
  padding: 18px 20px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.1em;
  font-weight: 600;
  transition: background-color var(--transition-speed) ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover,
.faq-question:focus {
  background-color: var(--element-bg-hover);
  color: var(--text-heading);
}

.faq-question .faq-icon {
  font-size: 0.9em;
  transition: transform var(--transition-speed) ease;
  color: var(--text-secondary);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}
.faq-question[aria-expanded="true"] {
  /* Optional: change color of active question */
  /* background-color: var(--accent-primary-transparent); */
  color: var(--accent-primary);
}

.faq-answer {
  max-height: 0; /* Start collapsed */
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    /* Smoother easing */ padding 0.3s ease-out;
  background-color: var(
    --bg-primary
  ); /* Slightly different from question for depth */
  border-top: 1px solid var(--border-secondary);
}

.faq-answer p {
  padding: 20px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.breadcrumbs-container {
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
  padding: 12px 0;
}

.breadcrumbs {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  font-size: 0.95em;
  color: var(--text-secondary);
}

.breadcrumbs a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.breadcrumbs a:hover {
  color: var(--accent-primary-hover);
}

.breadcrumbs .separator {
  margin: 0 10px;
  color: var(--border-primary);
}

.faq-answer[aria-hidden="false"] {
  /* JS will set this to false when expanded */
  /* max-height will be set by JS based on scrollHeight */
  /* padding set via JS for smoother transition if desired, or direct CSS */
}

@media (max-width: 768px) {
  .faq-title {
    font-size: 1.5em;
  }
  .faq-question {
    padding: 15px;
    font-size: 1em;
  }
  .faq-answer p {
    padding: 15px;
  }
}

/* ==========================================================================
   Changelog & Roadmap Styles
========================================================================== */

.changelog-section,
.roadmap-section {
  margin-bottom: 50px;
}

h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
  color: var(--text-heading);
}

/* Timeline for Changelog */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  height: 100%;
  width: 4px;
  background: var(--border-primary);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 40px;
}

.timeline-dot {
  position: absolute;
  left: -5px;
  top: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 4px solid var(--bg-secondary);
}

.timeline-content {
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
}

.timeline-content .version-badge {
  background-color: var(--accent-primary);
  color: var(--button-text-color);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9em;
  font-weight: bold;
  display: inline-block;
  margin-right: 10px;
}

.timeline-content .release-date {
  color: var(--text-secondary);
  font-size: 0.9em;
}

.timeline-content h3 {
  margin-top: 10px;
  color: var(--text-heading);
}

.timeline-content ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.timeline-content li {
  margin-bottom: 5px;
}

.change-type {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  margin-right: 8px;
}

.change-type.new {
  background-color: var(--success-color);
  color: #fff;
}
.change-type.improved {
  background-color: var(--info-color);
  color: #fff;
}
.change-type.fixed {
  background-color: var(--warning-color);
  color: #fff;
}

/* Roadmap Grid */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.roadmap-card {
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border-secondary);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roadmap-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px var(--shadow-color);
}

.roadmap-card .card-header {
  margin-bottom: 15px;
}

.roadmap-card .status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}

.status.in-progress {
  background-color: var(--info-color);
}
.status.planned {
  background-color: var(--accent-primary);
}
.status.considering {
  background-color: var(--text-secondary);
}

.roadmap-card h3 {
  color: var(--text-heading);
}

.roadmap-card .card-body p {
  color: var(--text-secondary);
}