/**
 * CIVIC DRAWER STYLES (ISOLATED)
 * Extracted from civic-voice.css for proper isolation
 *
 * This file contains ONLY civic wizard/drawer specific styles
 * Avoids conflicts with global main.html styles
 */

/* ==========================================
   CIVIC WIZARD DRAWER STYLES (RIGHT-SLIDE)
   ========================================== */
.civic-wizard-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.civic-wizard-modal.open {
  opacity: 1;
  visibility: visible;
}

/* Drawer slides from RIGHT (standard pattern) */
.civic-wizard-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0; /* Force anchor to viewport bottom - overrides body padding */
  width: 100%;
  max-width: 480px;
  height: 100vh; /* Full viewport height */
  height: 100dvh; /* Dynamic viewport height for mobile */
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  /* overflow: hidden removed - conflicts with flex:1 child (.civic-wizard-body handles scroll) */
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10001;
  margin: 0;
  padding: 0;
}

.civic-wizard-modal.open .civic-wizard-content {
  transform: translateX(0);
}

/* Mobile: Same right-slide pattern (consistent behavior) */
@media (max-width: 600px) {
  .civic-wizard-content {
    max-width: 100%;
    width: 100%;
  }
}

/* === FIXED CLOSE BUTTON === */
.civic-wizard-close {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #DCDCDC;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-in-out;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10003;
  font-size: 24px;
  color: #696969;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}

/* Desktop hover states (not on touch devices) */
@media (hover: hover) and (pointer: fine) {
  .civic-wizard-close:hover {
    background: #D3D3D3;
  }
}

/* === FIXED HELP BUTTON === */
.civic-wizard-help {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #DCDCDC;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-in-out;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10003;
  font-size: 20px;
  color: #696969;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {
  .civic-wizard-help:hover {
    background: #D3D3D3;
  }
}

/* Mascot Image and Tagline Section */
.civic-wizard-intro {
  padding: 0 20px 4.8px; /* Top padding removed (0px), bottom reduced by half (9.6px → 4.8px) */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* Above wallpaper */
  z-index: 1;
}

.civic-wizard-mascot {
  width: 100%;
  max-width: 437.5px; /* Increased by 25% (350px → 437.5px) */
  height: 131.25px; /* Increased by 25% (105px → 131.25px) */
  margin: 0 auto 6px; /* Reduced by half (12px → 6px) */
  object-fit: contain;
  display: block;
}

.civic-wizard-tagline-line1 {
  font-size: 22px; /* Line 1 - reduced by 1px (23px → 22px) */
  font-weight: 800;
  color: darkslategrey; /* Matches incident drawer */
  margin: 0 0 6px; /* Added 6px bottom margin for spacing between lines */
  text-align: center;
  letter-spacing: -0.5px;
  padding: 0 16px;
  max-width: 400px;
  line-height: 1;
}

.civic-wizard-tagline-line2 {
  font-size: 18px; /* Line 2 - reduced by 1px from original 19px */
  font-weight: 800;
  color: darkslategrey; /* Matches incident drawer */
  margin: 0 0 24px; /* Changed to 24px gap before first container */
  text-align: center;
  letter-spacing: -0.5px;
  padding: 0 16px;
  max-width: 400px;
  line-height: 1;
  white-space: nowrap; /* Prevent line wrapping */
}

/* Progress Indicator */
.wizard-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: all 0.3s ease;
}

.progress-dot.active {
  background: #667eea;
  width: 24px;
  border-radius: 8px; /* ACT 1: 8px radius for small elements */
}

/* Wizard Body */
.civic-wizard-body {
  padding: 24px;
  overflow-y: auto;
  /* flex: 1 removed - use margin-top: auto on footer instead (more reliable) */
  min-height: 300px;
  background: transparent; /* Allow wallpaper to show through */
  position: relative; /* For wallpaper positioning */
}

/* Wallpaper Pattern Background - Behind content */
.civic-wizard-body::before {
  content: '';
  position: fixed; /* Fixed to viewport - doesn't scroll away */
  inset: 0;
  background-image: url('/assets/patterns/hero-wallpaper.svg');
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.wizard-step {
  display: none;
  animation: stepFadeIn 0.3s ease;
  position: relative; /* Above wallpaper */
  z-index: 1;
}

.wizard-step.active {
  display: block;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Step 1: Full modal, traditional page switching */
.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
}

/* Progressive reveal: Steps 2-6 stack vertically */
.wizard-step-progressive {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: 32px;
  padding-bottom: 0;
  border-bottom: none;
  position: relative; /* Above wallpaper */
  z-index: 1;
}

.wizard-step-progressive:last-child {
  border-bottom: none;
}

.wizard-step-progressive.wizard-step-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.wizard-step-header {
  font-size: 16px; /* Reduced by 2px: 18px → 16px */
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
  padding: 6px 8px; /* Reduced by half: 12px → 6px, 16px → 8px */
  background: #FFFFFF;
  border: 1.5px solid darkslategrey;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Success banner */
.success-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.success-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.success-text h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #166534;
}

.success-text p {
  margin: 0;
  font-size: 14px;
  color: #15803d;
}

/* Informational Banner (Top of Step 1) */
.civic-info-banner {
  background: #f8f9fa; /* Same grey as issue categories */
  border-top: 1.5px solid #D3D3D3;
  border-right: 1.5px solid #D3D3D3;
  border-bottom: 1.5px solid #000000; /* Black highlight border */
  border-left: 1.5px solid #000000; /* Black highlight border */
  border-radius: 8px 20px 8px 8px; /* ACT 1: 8px radius (keeping 20px special corner) */
  padding: 12px 16px; /* Top/bottom 12px, left/right 16px */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 90%; /* Reduced by 10% */
  margin-left: auto;
  margin-right: auto;
}

.civic-info-icon {
  display: none; /* Icon removed */
}

.civic-info-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: #696969; /* Dark grey text */
  margin: 0;
  line-height: 1.5;
}

/* Step 1: Issue Categories */
.issue-category {
  background: #f8f9fa;
  border-top: 1.5px solid #D3D3D3;
  border-right: 1.5px solid #D3D3D3;
  border-bottom: 2px solid #FF8C00;
  border-left: 2px solid #FF8C00;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.issue-category:hover {
  background: #f1f3f5;
  border-color: #cbd5e0;
  transform: translateX(4px);
}

.issue-category.selected {
  background: #eef2ff;
  border-color: #667eea;
}

.issue-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.issue-info {
  flex: 1;
}

.issue-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.issue-examples {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.3;
}

/* Step 3: Sub-category picker (reuses .issue-category styling) */
.sub-category-container {
  /* Sub-categories will use same .issue-category class as Step 1 */
}

/* Step 4: Authority picker */
.authority-picker-container {
  /* Will use same .issue-category class */
}

.authority-picker-header {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

/* Step 5: Description */
.issue-description-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.issue-description-input:focus {
  outline: none;
  border-color: #667eea;
}

.char-counter {
  font-size: 12px;
  color: #9ca3af;
  margin: 4px 0 8px 0;
  text-align: right;
  display: block;
}

.char-counter span {
  display: inline;
}

/* Photo Upload Section */
.photo-upload-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.photo-upload-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.photo-upload-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px 0;
}

.photo-upload-area {
  display: flex;
  justify-content: center;
}

.photo-upload-btn {
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
}

.photo-upload-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.photo-upload-btn i {
  font-size: 18px;
}

.photo-preview-area {
  margin-top: 16px;
}

.photo-preview-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

.photo-remove-btn {
  width: 100%;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  color: #dc2626;
}

.photo-remove-btn:hover {
  background: #fecaca;
  border-color: #fca5a5;
}

/* Step 2: Location Input */
.location-input-group {
  margin-bottom: 16px; /* Match spacing between header and input */
}

.location-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.postcode-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px; /* Reduced by 2px: 16px → 14px */
  transition: border-color 0.2s ease;
}

/* Only uppercase for actual postcode input value (not placeholder) */
#postcodeInput {
  text-transform: uppercase;
}

/* Normal case for placeholder text */
#postcodeInput::placeholder {
  text-transform: none;
}

.postcode-input:focus {
  outline: none;
  border-color: #667eea;
}

.postcode-input.error {
  border-color: #ef4444;
}

.location-help {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  line-height: 1.4;
}

.location-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: #dc2626;
  display: none;
}

.location-error.show {
  display: block;
}

/* Location button - matches incident drawer styling */
.btn-location {
  background: #5F9EA0;
  color: #FFFFFF;
  border: none;
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  transition: all 200ms ease;
  margin-top: 0; /* Remove extra margin, spacing controlled by location-input-group */
}

@media (hover: hover) and (pointer: fine) {
  .btn-location:hover {
    background: #4A8385;
    transform: translateY(-1px);
  }
}

.btn-location:active {
  transform: translateY(0);
}

.btn-location:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
  transform: none;
}

/* Step 3: Guidance & Link */
.guidance-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  margin-bottom: 20px;
}

.guidance-council {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.guidance-issue {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

.guidance-info {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.info-section {
  margin-bottom: 16px;
}

.info-section:last-child {
  margin-bottom: 0;
}

.info-title {
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  padding: 6px 0;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-list li:before {
  content: "✓";
  color: #48bb78;
  font-weight: 700;
  flex-shrink: 0;
}

.tip-box {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
}

.tip-label {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tip-text {
  font-size: 13px;
  color: #78350f;
  margin: 0;
  line-height: 1.4;
}

.fallback-message {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.fallback-message p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #1e40af;
  line-height: 1.5;
}

.fallback-message p:last-child {
  margin-bottom: 0;
}

/* Wizard Footer - Flows with content */
/* SPECIFICITY FIX: Scoped with #civicWizardModal to win against global body padding */
#civicWizardModal .civic-wizard-footer {
  padding: 16px 24px 16px 24px; /* Top padding reduced from 24px to 16px to match bottom */
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto; /* Auto-margin flexbox trick - pushes footer to bottom */
  position: relative; /* Above wallpaper */
  z-index: 1;
}

.wizard-btn {
  padding: 10px 20px;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-btn-back {
  background: #f8f9fa;
  color: #333;
}

.wizard-btn-back:hover {
  background: #e9ecef;
}

.wizard-btn-next {
  background: #5F9EA0;
  color: white;
  margin-left: auto;
}

.wizard-btn-next:hover {
  background: #4A8385;
}

.wizard-btn-next:disabled {
  background: #cbd5e0;
  cursor: not-allowed;
}

.wizard-btn-submit {
  background: #5F9EA0; /* Teal - matches location and Done buttons */
  color: white;
  width: 100%;
  justify-content: center;
}

.wizard-btn-submit:hover {
  background: #4A8385;
}

.wizard-btn-primary {
  background: #5F9EA0; /* Teal - matches location button */
  color: white;
  justify-content: center;
}

.wizard-btn-primary:hover {
  background: #4A8385;
}

.wizard-btn-secondary {
  background: #FF8C00; /* Dark Orange - matches civic feature highlight */
  color: white;
  border: none;
  justify-content: center;
}

.wizard-btn-secondary:hover {
  background: #E07B00; /* Darker orange on hover */
  color: white;
}

/* Responsive - Mobile adjustments */
@media (max-width: 480px) {
  .civic-wizard-content {
    max-height: none; /* Remove constraint - let it fill 100vh */
  }

  .civic-wizard-header {
    padding: 20px 20px 14px;
  }

  .civic-wizard-body {
    padding: 20px;
  }

  .issue-category {
    padding: 14px;
  }

  .issue-name {
    font-size: 15px;
  }

  .issue-examples {
    font-size: 12px;
  }
}

/* DESKTOP OPTIMIZATION (≥1024px) - Mobile-first responsive design */
/* === DESKTOP STYLING - MATCH INCIDENT DRAWER === */
@media (min-width: 768px) {
  /* Remove dark overlay on desktop - drawer sits alongside content */
  .civic-wizard-modal {
    background: transparent;
    pointer-events: auto; /* Enable clicks for click-outside-to-close */
  }

  /* Drawer content has pointer events */
  .civic-wizard-content {
    pointer-events: auto;
  }

  /* Drawer panel styling - match incident drawer positioning */
  .civic-wizard-content {
    width: 450px;
    height: 100vh;
    left: calc(50% + 250px); /* Position after side panel menu */
    transform: translateX(-50%);
    box-shadow: 0 0 90px rgba(0, 0, 0, 0.3);
    border-left: 2px solid #F28C28; /* Orange border to match civic theme */
    border-top-left-radius: 20px; /* Rounded top-left corner */
  }

  /* When open, keep same positioning */
  .civic-wizard-modal.open .civic-wizard-content {
    transform: translateX(-50%);
  }

  /* Close and Help buttons - match incident drawer */
  .civic-wizard-modal .civic-wizard-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
    top: 24px !important;
    left: 24px !important;
  }

  .civic-wizard-modal .civic-wizard-help {
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    top: 24px !important;
    right: 24px !important;
  }

  /* Help Modal - reduced by 25% then increased by 10% (0.9 * 1.1 = 0.99x) */
  #civic-help-modal.help-modal {
    padding: 19.8px; /* +10%: 18 → 19.8 */
  }

  #civic-help-modal .help-modal-content {
    border-radius: 11.55px; /* +10%: 10.5 → 11.55 */
    max-width: 316.8px; /* +10%: 288 → 316.8 */
    padding: 31.35px; /* +10%: 28.5 → 31.35 */
    box-shadow: -4px 4px 0px 0px #5F9EA0, 0 20px 60px rgba(0, 0, 0, 0.3); /* Cadet blue border */
  }

  #civic-help-modal .help-modal-title {
    font-size: 19.8px; /* +10%: 18 → 19.8 */
    margin: 0 0 19.8px 0; /* +10%: 18 → 19.8 */
    color: darkslategrey;
  }

  #civic-help-modal .help-modal-body p {
    font-size: 14.85px; /* +10%: 13.5 → 14.85 */
    line-height: 1.54; /* +10%: 1.4 → 1.54 */
    margin: 0 0 15.4px 0; /* +10%: 14 → 15.4 */
  }

  /* Disable ALL body.drawer-open effects on desktop - drawer sits alongside content */
  body.drawer-open {
    padding-bottom: inherit !important;
    overflow: inherit !important;
  }

  /* Keep content area visible on desktop */
  body.drawer-open .content-area {
    display: flex !important;
  }

  /* Keep header in normal position, not fixed */
  body.drawer-open header {
    display: none !important; /* Keep it hidden as originally designed */
    position: static !important;
  }

  /* Keep logo and menu button visible */
  body.drawer-open #main-logo,
  body.drawer-open #main-menu-button {
    display: block !important;
  }

  /* Keep footer visible */
  body.drawer-open .wb-footer-nav {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  /* Constrain modal width for better desktop UX */
  .civic-wizard-content {
    max-width: 600px; /* Wider than mobile 480px, but constrained for readability */
  }

  /* Increase body padding for breathing room */
  .civic-wizard-body {
    padding: 32px; /* Increased from 24px */
  }

  /* Two-column grid for Step 1 issue categories - faster scanning */
  .wizard-step[data-step="1"].active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Banner spans both columns on desktop */
  .wizard-step[data-step="1"] .civic-info-banner {
    grid-column: 1 / -1; /* Span all columns */
  }

  /* Mascot reduced by 25% on desktop */
  .civic-wizard-mascot {
    max-width: 375px; /* Reduced by 25% (500px → 375px) */
    height: 112.5px; /* Reduced by 25% (150px → 112.5px) */
  }

  /* Intro section top padding reduced by half */
  .civic-wizard-intro {
    padding-top: -2.4px; /* Reduced by half from bottom padding (4.8px / 2) */
  }

  /* Banner slightly wider on desktop */
  .civic-info-banner {
    width: 92%; /* Slightly wider than mobile 90% */
  }

  /* Footer padding reduced by 25% in height for desktop */
  #civicWizardModal .civic-wizard-footer {
    padding: 15px 32px 15px 32px; /* Height reduced by 25% (20px → 15px) */
  }

  /* Use My Location button - scale down by 25% on desktop */
  .btn-location {
    padding: 12px 12px !important; /* Height: 12px, width: 12px */
    font-size: 12.5px !important; /* Increased by 2px: 10.5px → 12.5px */
    border-radius: 9px !important; /* 75% of 12px */
    gap: 4.5px !important; /* 75% of 6px */
    min-height: auto !important; /* Override incident drawer .btn min-height */
  }
}

/*
  FIX: Override weebro-ui-styles.css body padding
  Removes the 80px body padding (added for fixed footer nav)
  ONLY when the civic wizard is open.
  Without this, the drawer has an 80px gap at the bottom.
*/
body.drawer-open {
  padding-bottom: 0 !important;
}

/* ==========================================
   STEP 6: ECOSYSTEM-FIRST GUIDANCE PAGE
   ========================================== */

/* Success celebration (Step 6) */
/* Remove top padding from wizard body when on Step 6 */
.civic-wizard-body.step-6-active {
  padding-top: 0;
}

/* Remove all margins from Step 6 wrapper when it's the only visible step */
.wizard-step-progressive[data-step="6"].wizard-step-visible {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}

/* Remove spacing from guidanceContent container */
#guidanceContent {
  margin: 0;
  padding: 0;
}

.success-celebration-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  margin-top: -16px; /* Pull up to position mascot higher */
  padding: 0; /* No padding - start webm at top */
}

.success-celebration-video {
  width: 100%;
  max-width: 90px; /* 50% reduction: 180px → 90px */
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
}

.success-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* 12px line break between messages */
}

.success-message-primary {
  font-size: 20px; /* 18px + 2px = 20px */
  font-weight: 600;
  color: darkslategrey;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.success-message-secondary {
  font-size: 16px; /* 20px - 4px = 16px (4px smaller than primary) */
  font-weight: 500;
  color: darkslategrey;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  max-width: 90%; /* Prevent text from touching edges */
}

/* Authority Info Section (Step 6) */
.civic-authority-info-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.civic-info-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px 0;
}

.civic-contact-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.civic-contact-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.civic-contact-detail {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.civic-contact-detail:last-child {
  margin-bottom: 0;
}

.civic-contact-detail i {
  color: #9ca3af;
  width: 16px;
  text-align: center;
}

.civic-contact-detail a {
  color: #667eea;
  text-decoration: none;
  transition: color 0.2s ease;
}

.civic-contact-detail a:hover {
  color: #5568d3;
  text-decoration: underline;
}

.civic-note {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 400;
  font-style: italic;
}

/* Authority Section (Simplified) */
.civic-authority-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.civic-authority-intro {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.civic-authority-note {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  margin: 0 0 20px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.civic-contact-list {
  margin-top: 16px;
}

.civic-contact-org {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.civic-contact-item {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.civic-contact-item:last-child {
  margin-bottom: 0;
}

.civic-contact-item strong {
  color: #1f2937;
  font-weight: 600;
  min-width: 80px;
  display: inline-block;
}

.civic-contact-item a {
  color: #667eea;
  text-decoration: none;
}

.civic-contact-item a:hover {
  text-decoration: underline;
}

.civic-detail-note {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

/* Share button inside authority section */
.civic-share-btn {
  width: 100%;
  background: #4682B4; /* Steel Blue - matches groups feature */
  border: none;
  border-radius: 12px; /* ACT 1: 12px radius for primary buttons */
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin-top: 16px;
}

.civic-share-btn:hover {
  background: #3A7A8F; /* Darker steel blue */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(70, 130, 180, 0.3);
}

.civic-share-btn:active {
  transform: translateY(0);
}

.civic-share-btn i {
  font-size: 14px;
}

.civic-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.civic-contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.civic-contact-item {
  font-size: 14px;
  color: #4b5563;
  margin: 0;
  line-height: 1.5;
}

.civic-contact-item strong {
  color: #1f2937;
  font-weight: 600;
}

.civic-contact-item a {
  color: #667eea;
  text-decoration: none;
  transition: color 0.2s ease;
}

.civic-contact-item a:hover {
  color: #5568d3;
  text-decoration: underline;
}

.civic-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #667eea;
  color: white !important;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease;
  margin-top: 8px;
}

.civic-link-btn:hover {
  background: #5568d3;
  text-decoration: none !important;
}

.civic-requirements-note {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 14px;
  margin: 16px 0;
}

.civic-note-title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.civic-note-title i {
  font-size: 14px;
}

.civic-note-text {
  font-size: 13px;
  color: #78350f;
  margin: 0;
  line-height: 1.5;
}


/* Section: Take Further Action (Ecosystem) */
.civic-ecosystem-section {
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  animation: civicSlideIn 0.4s ease-out;
}

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

.civic-ecosystem-section .civic-section-title {
  margin-top: 16px;
}

.civic-ecosystem-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.civic-ecosystem-btn {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px; /* ACT 1: 12px radius */
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.civic-ecosystem-btn:hover {
  background: #f9fafb;
  border-color: #cbd5e0;
  transform: translateX(4px);
}

.civic-ecosystem-btn i {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.civic-ecosystem-btn span {
  flex: 1;
  text-align: left;
}

/* Specific button colors */
.civic-btn-petition {
  border-color: #fbbf24;
}

.civic-btn-petition:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

.civic-btn-petition i {
  color: #f59e0b;
}

.civic-btn-councillor {
  border-color: #a78bfa;
}

.civic-btn-councillor:hover {
  background: #ede9fe;
  border-color: #8b5cf6;
}

.civic-btn-councillor i {
  color: #8b5cf6;
}

.civic-btn-forum {
  border-color: #60a5fa;
}

.civic-btn-forum:hover {
  background: #dbeafe;
  border-color: #3b82f6;
}

.civic-btn-forum i {
  color: #3b82f6;
}

.civic-btn-group {
  border-color: #34d399;
}

.civic-btn-group:hover {
  background: #d1fae5;
  border-color: #10b981;
}

.civic-btn-group i {
  color: #10b981;
}

.civic-btn-zone {
  border-color: #f87171;
}

.civic-btn-zone:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

.civic-btn-zone i {
  color: #ef4444;
}

.civic-btn-done {
  border-color: #4ade80;
  background: #f0fdf4;
}

.civic-btn-done:hover {
  background: #dcfce7;
  border-color: #22c55e;
}

.civic-btn-done i {
  color: #22c55e;
}

/* ==========================================
   AUTHORITY PICKER STYLES
   ========================================== */

.authority-search-box {
  margin: 16px 0;
  padding: 0 4px;
}

.authority-list {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 12px;
}

.authority-option {
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.authority-option:hover {
  transform: translateX(4px);
  background: #f8f9fa;
}

.authority-option.selected {
  background: #e3f2fd;
  border-color: #2196F3;
}

.authority-type {
  font-size: 0.85em;
  color: #666;
  font-weight: normal;
}

/* ==========================================
   CUSTOM ISSUE STYLES
   ========================================== */

.custom-input-wrapper {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.custom-input-instructions {
  font-size: 16px;
  color: #444;
  margin-bottom: 16px;
  line-height: 1.5;
}


.issue-category-custom {
  border: 2px dashed #9ca3af;
  background: #f9fafb;
}

.issue-category-custom:hover {
  border-color: #6366f1;
  background: #eef2ff;
}

.civic-actions-list {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
}

.civic-actions-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.6;
}

.civic-actions-list li:last-child {
  border-bottom: none;
}