/**
 * AI Reputation Monitoring Tool - CSS Styles
 * Version 3.1 - Full responsive overhaul
 * All rules scoped under #airep-container to prevent plugin conflicts
 */

/* ========================================

   CONTAINER & GLOBAL
   ======================================== */

#airep-container {
  width: 50%;
  margin: 10px auto;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 17px;
  color: #222;
  line-height: 1.6;
  /* overflow-x intentionally NOT set here — any overflow:hidden on a
     positioned ancestor clips absolute children (the dropdown).
     Horizontal overflow is prevented by max-width:100% on children. */
  position: relative;
}

#airep-container * {
  box-sizing: border-box;
}

#airep-container h1,
#airep-container h2,
#airep-container h3,
#airep-container h4,
#airep-container h5,
#airep-container h6 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================
   SCREEN MANAGEMENT
   ======================================== */
#airep-container .ai-screen { display: none; }
#airep-container .ai-screen.active {
  display: block;
  animation: airepFadeIn 0.3s ease-in;
}
@keyframes airepFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#airep-container .ai-screen-content {
  background: #ffffff;
  border-radius: 5px;
  padding: 24px 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   HEADER IMAGE
   ======================================== */
#airep-container .header-bg {
  min-height: 175px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  background-image: url(https://breakoutinternetmarketing.com/wp-content/uploads/2026/02/AI-visibility-checker-report-header.png);
}

/* ========================================
   FORM HEADER
   ======================================== */
#airep-container .form-header {
  text-align: left;
  margin-top: 24px;
  margin-bottom: 20px;
}
#airep-container .form-header h2 {
  margin: 0 0 8px 0;
  font-size: 26px;
  color: #00538f;
}
#airep-container .form-header p {
  color: #222;
  margin: 0;
  font-size: 17px;
}

/* ========================================
   SCREEN 1 - SEARCH ROW (input + button on ONE line)
   ======================================== */
#airep-container .search-form {
  margin-bottom: 20px;
  position: relative; /* stacking context for the absolute dropdown */
}

#airep-container .input-instructions {
  text-align: left;
  color: #222222;
  margin-bottom: 10px;
  font-size: 17px;
}

/* Flex row: input wrapper grows, button stays fixed.
   align-items: flex-start so the button stays at the top of the
   row when the dropdown pushes the wrapper taller. */
#airep-container .search-input-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 90%;
}

/* Wrapper gives the input a positioning context so the dropdown
   is absolutely positioned relative to the input only — NOT the button */
#airep-container .search-input-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 100; /* ensures dropdown stacks above form-footer etc */
}

#airep-container #airep-business-search {
display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    padding: 15px;
    border: 2px solid #9eacc0;
    border-radius: 5px;
    font-size: 16px;    /* ≥16px stops iOS Safari auto-zoom (which itself causes viewport shift) */
    box-sizing: border-box;
    margin-bottom: 15px;
}

#airep-container #airep-business-search:focus {
  outline: none;
  border-color: #0e2e62;
}

/* Button lives inside the flex row */
#airep-container #airep-check-business {
  flex-shrink: 0;
  width: auto;
  min-width: 200px;
  padding: 14px 22px;
  margin: 0 !important;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: #51ac51;
  color: white;
  white-space: nowrap;
}
#airep-container #airep-check-business:hover:not(:disabled) { background-color: #377437; }
#airep-container #airep-check-business:disabled { background-color: #cccccc; cursor: not-allowed; }

#airep-container .airep-contact-link {
  color: #00538f;
  font-weight: 600;
  font-style: italic;
  text-decoration: underline;
  cursor: pointer;
}

/* ========================================
   SEARCH RESULTS — hidden placeholder (portal renders on <body>)
   ======================================== */
#airep-container #airep-search-results {
  display: none; /* always hidden — content shown via #airep-results-portal */
}

/* ========================================
   RESULTS PORTAL — floats on <body>, above everything
   Positioned by JS using getBoundingClientRect() so overflow:hidden
   on any ancestor cannot clip it.
   ======================================== */
#airep-results-portal {
  display: none;
  position: absolute;    /* JS sets top/left/width dynamically */
  z-index: 999999;
  background: #fff;
  border: 2px solid #9eacc0;
  border-top: none;
  border-radius: 0 0 5px 5px;
  max-height: 275px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  box-sizing: border-box;
}
#airep-results-portal .airep-search-result-item {
  padding: 12px 15px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  box-sizing: border-box;
}
#airep-results-portal .airep-search-result-item:hover  { background-color: #f5f5f5; }
#airep-results-portal .airep-search-result-item:last-child { border-bottom: none; }
#airep-results-portal .airep-business-name {
  font-weight: 600;
  color: #0e2e62;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
#airep-results-portal .airep-business-address {
  font-size: 14px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
#airep-container .airep-search-result-item {
  padding: 12px 15px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: left !important;
  overflow: hidden;       /* BUG 2 FIX: clip content */
  box-sizing: border-box;
  /* Prevent iOS callout + tap highlight that triggers layout recalc */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
#airep-container .airep-search-result-item:hover { background-color: #f5f5f5; }
#airep-container .airep-search-result-item:last-child { border-bottom: none; }
#airep-container .airep-business-name {
  font-weight: 600; color: #0e2e62; margin-bottom: 3px; text-align: left !important;
  /* BUG 2 FIX: truncate long business names instead of overflowing layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#airep-container .airep-business-address {
  font-size: 14px; color: #222; text-align: left !important;
  /* BUG 2 FIX: truncate long addresses */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   FORM FOOTER (Screen 1)
   ======================================== */
#airep-container .form-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}
#airep-container .form-footer p {
    margin: 8px 0;
    color: #222;
    font-size: 17px;
}
#airep-container .trust-badge {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 14px; color: #222;
}

/* ========================================
   GENERAL BUTTONS
   ======================================== */
#airep-container .btn-primary {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 14px 24px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: #51ac51;
  color: white;
  text-align: center;
}
#airep-container .btn-primary:hover:not(:disabled) { background-color: #377437; }
#airep-container .btn-primary:disabled { background-color: #cccccc; cursor: not-allowed; }

#airep-container .btn-secondary {
  display: block;
  width: 100%;
  max-width: 280px;
  padding: 14px 24px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: #d94f43;
  color: #fff;
  text-align: center;
  margin: 0;
  float: none;
}
#airep-container .btn-secondary:hover { background-color: #b93b30; }

/* ========================================
   SCREEN 2 - BUSINESS SUMMARY BOX
   ======================================== */
#airep-container .business-summary { margin-bottom: 24px; }
#airep-container .business-summary h3 { color: #0e2e62; margin-top: 0; margin-bottom: 12px; }
#airep-container .summary-info {
  background-color: #fcfcfc;
  padding: 16px;
  border: 1px solid #00538f;
  border-radius: 5px;
  margin-bottom: 20px;
}
#airep-container .info-item { margin-bottom: 12px; }
#airep-container .info-item:last-child { margin-bottom: 0; }
#airep-container .info-item label {
  display: block; font-weight: 600; color: #0e2e62; margin-bottom: 3px; font-size: 13px;
}
#airep-container .info-item p { margin: 0; color: #444; font-size: 15px; }
#airep-container #airep-summary-website { overflow-wrap: anywhere; }

/* ========================================
   LEAD FORM — all inputs same size, full width
   ======================================== */
#airep-container .lead-capture h3 { color: #0e2e62; margin-bottom: 6px; }
#airep-container .lead-form { margin-top: 20px; width: 100%; }
#airep-container .form-group { margin-bottom: 18px; }
#airep-container .form-group label {
  display: block; font-weight: 600; margin-bottom: 6px; color: #0e2e62; font-size: 14px;
}

/* Unified input style for all three fields */
#airep-container #airep-lead-name,
#airep-container #airep-lead-email,
#airep-container #airep-lead-phone {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid #9eacc0;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  font-family: inherit;
  min-width: 0;
  max-width: 100%;
}
#airep-container #airep-lead-name:focus,
#airep-container #airep-lead-email:focus,
#airep-container #airep-lead-phone:focus {
  outline: none;
  border-color: #0e2e62;
}

#airep-container .required { color: #dc3545; }
#airep-container .privacy-note {
  text-align: center; font-size: 13px; color: #222; margin-top: 14px;
}

/* Navigation footer — "Search Different Business" */
#airep-container .navigation-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
}
#airep-container .search-again { margin-top: 0; padding-bottom: 0; }
#airep-container hr { margin-bottom: 10px; }

/* ========================================
   SCREEN 3 - REPORT HEADER (2-column)
   ======================================== */

#airep-container h1.rpt-heading {
    font-size: 3em;
    color: #00528f;
}

#airep-container .report-header-columns {
  display: grid;
  grid-template-columns: 4fr 2fr;  /* Business name panel wider than score */
  gap: 10px;
  margin-bottom: 20px;
  align-items: stretch;
}

/* Blue business panel */
#airep-container .report-gbp {
  background: linear-gradient(135deg, #00538f 0%, #003d6e 100%);
  color: white;
  padding: 28px 30px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#airep-container .report-gbp h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: white;
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
}
#airep-container .report-gbp #airep-report-business-address {
  font-size: 16px; line-height: 1.5; margin: 0; opacity: 0.9;
}

/* Score card */
#airep-container .score-card {
  background: linear-gradient(135deg, #d95145, #b71c1c);
  color: white;
  padding: 16px 0px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
#airep-container .score-letter {
  font-size: 80px; font-weight: 700; line-height: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
#airep-container .score-divider {
  width: 2px; height: 70px; background-color: rgba(255,255,255,0.35); flex-shrink: 0;
}
#airep-container .score-numeric {
  display: flex; flex-direction: column; align-items: center;
}
#airep-container .score-value { font-size: 60px; font-weight: 700; line-height: 1; }
#airep-container .score-label { font-size: 13px; opacity: 0.9; margin-top: 4px; text-align: center; }

/* ========================================
   REPORT SECTIONS
   ======================================== */
#airep-container .report-section {
  background-color: #f9f9f9;
  padding: 20px 24px;
  border-radius: 5px;
  margin-bottom: 16px;
  border-left: 4px solid #00538f;
}
#airep-container .section-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
#airep-container .section-header h3 { margin: 0; color: #0e2e62; font-size: 18px; }

/* ========================================
   CRITERIA PASS/FAIL ROWS
   ======================================== */
#airep-container .criteria-list { margin-top: 8px; }
#airep-container .criterion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 8px;
  background-color: #ffffff;
  border-radius: 5px;
  border-left: 4px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  cursor: pointer;
}
#airep-container .criterion-item:last-child { margin-bottom: 0; }
#airep-container .criterion-label {
  font-weight: 600; color: #0e2e62; font-size: 15px; flex: 1; padding-right: 12px;
}
#airep-container .criterion-status {
  padding: 5px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  min-width: 80px;
  text-align: center;
  flex-shrink: 0;
}
#airep-container .status-pass { background-color: #4caf50; color: white; }
#airep-container .status-fail { background-color: #f44336; color: white; }
#airep-container .status-skip { background-color: #ff9800; color: white; }

#airep-container .criterion-details {
  background: #f0f6fc;
  border-radius: 0 0 5px 5px;
  border-left: 4px solid #9eacc0;
  margin-top: -8px;
  margin-bottom: 8px;
}

/* ========================================
   PLATFORM CARDS
   ======================================== */
#airep-container .platform-results { margin: 0; }
#airep-container .platform-results h3 { color: #0e2e62; margin-bottom: 16px; font-size: 18px; }
#airep-container .platform-cards {
  display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
}
#airep-container .platform-card {
  background: white; border: 2px solid #e9ecef; border-radius: 8px; overflow: hidden;
}
#airep-container .platform-card.chatgpt { border-color: #10a37f; }
#airep-container .platform-card.gemini  { border-color: #4285f4; }
#airep-container .platform-header {
  padding: 16px 20px; display: flex; align-items: center; gap: 14px; background: #f8f9fa;
}
#airep-container .platform-card.chatgpt .platform-header { background: #f0fdf9; }
#airep-container .platform-card.gemini  .platform-header { background: #f0f7ff; }
#airep-container .platform-logo {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 22px; flex-shrink: 0;
}
#airep-container .platform-card.chatgpt .platform-logo { background: #10a37f; color: white; }
#airep-container .platform-card.gemini  .platform-logo { background: #4285f4; color: white; }
#airep-container .platform-info { flex: 1; min-width: 0; }
#airep-container .platform-info h4 { margin: 0 0 3px 0; font-size: 18px; color: #0e2e62; }
#airep-container .platform-subtitle { margin: 0; font-size: 13px; color: #222; }
#airep-container .platform-score { text-align: center; flex-shrink: 0; }
#airep-container .pass-rate { display: block; font-size: 28px; font-weight: 700; color: #0e2e62; line-height: 1; }
#airep-container .pass-label { display: block; font-size: 11px; color: #222; margin-top: 3px; }
#airep-container .platform-response { padding: 16px 20px; }
#airep-container .platform-response h5 {
  margin: 0 0 10px 0; font-size: 12px; color: #222; text-transform: uppercase; letter-spacing: 0.5px;
}
#airep-container .response-text {
  font-size: 14px; line-height: 1.6; color: #333; background: #f8f9fa;
  padding: 14px; border-radius: 6px; border-left: 4px solid #00538f;
  max-height: 300px; overflow-y: auto;
}

/* ========================================
   REPORT ACTIONS
   ======================================== */
#airep-container .report-actions p {
  font-size: 17px;
  color: #222;
}

#airep-container .report-actions {
  display: grid; gap: 16px; justify-content: center; margin: 30px 0; flex-wrap: wrap;
}
#airep-container .report-actions .btn-primary,
#airep-container .report-actions .btn-secondary {
  max-width: 240px; width: auto; min-width: 180px;
}

/* ========================================
   CONTACT CTA
   ======================================== */
#airep-container .contact-cta {
  background: linear-gradient(135deg, #00538f 0%, #003d6e 100%);
  color: white; padding: 36px 40px; border-radius: 8px; text-align: center; margin: 20px 0;
}
#airep-container .cta-content h3 { font-size: 24px; margin: 0 0 10px 0; color: white; }
#airep-container .cta-content p { font-size: 15px; margin: 0 0 20px 0; opacity: 0.9; }
#airep-container .btn-cta {
  display: inline-block; background-color: #51ac51; color: white;
  padding: 14px 28px; border-radius: 20px; font-size: 16px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer; transition: background-color 0.2s;
}
#airep-container .btn-cta:hover { background-color: #377437; color: white; text-decoration: none; }

/* ========================================
   GRADE COLOURS
   ======================================== */
#airep-container .score-card.grade-a { background: linear-gradient(135deg, #4caf50, #388e3c) !important; }
#airep-container .score-card.grade-b { background: linear-gradient(135deg, #8bc34a, #689f38) !important; }
#airep-container .score-card.grade-c { background: linear-gradient(135deg, #ffc107, #f57f17) !important; }
#airep-container .score-card.grade-d { background: linear-gradient(135deg, #ff9800, #e65100) !important; }
#airep-container .score-card.grade-e { background: linear-gradient(135deg, #f44336, #c62828) !important; }
#airep-container .score-card.grade-f { background: linear-gradient(135deg, #d95145, #b71c1c) !important; }

/* ========================================
   LOADING SPINNER — GBP Audit standard style
   Dark full-screen overlay; spinner + text + logo float directly
   on the backdrop (no white card), matching the GBP Audit plugin.
   ======================================== */
#airep-loading-spinner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.75) !important;
  display: none;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 999999 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  transform: none !important;
  filter: none !important;
}

/* When jQuery .show() sets display:block — force flex */
#airep-loading-spinner[style*="display: block"],
#airep-loading-spinner[style*="display:block"],
#airep-loading-spinner[style*="display:flex"],
#airep-loading-spinner[style*="display: flex"] {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* No white card — spinner sits directly on the dark backdrop */
#airep-loading-spinner .spinner-container {
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-align: center;
  max-width: 320px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * BULLETPROOF SPINNER — matches GBP Audit exactly.
 * Keyframe named 'airepSpin' (unique) to avoid collisions.
 */
#airep-loading-spinner .spinner {
  display: block !important;
  border: 5px solid rgba(255, 255, 255, 0.25) !important;
  border-top-color: #00538f !important;
  border-right-color: #51ac51 !important;
  border-bottom-color: #f5d532 !important;
  border-left-color: #C50000 !important;
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px auto !important;
  flex-shrink: 0 !important;
  -webkit-animation: airepSpin 0.85s linear infinite !important;
  animation: airepSpin 0.85s linear infinite !important;
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
  will-change: transform !important;
  isolation: isolate !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

@-webkit-keyframes airepSpin {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes airepSpin {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* "Loading..." heading — white text on dark backdrop */
#airep-loading-spinner h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  text-shadow: none;
}

/* Sub-detail text */
#airep-loading-spinner p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin: 0 0 20px 0;
}

/* Logo image below the text — matches GBP Audit's img in #loading-spinner */
#airep-loading-spinner .airep-loader-logo {
  display: block;
  max-width: 400px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  opacity: 0.92;
}

/* Progress steps are hidden in the new GBP-style overlay;
   kept in HTML for JS step-tracking but not displayed */
#airep-loading-spinner .progress-steps { display: none; }

/* ========================================
   MODAL
   ======================================== */
#airep-contact-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: flex;
  justify-content: center; align-items: center; z-index: 999999;
}
#airep-contact-modal .modal-content {
  background: white; padding: 30px; border-radius: 8px;
  max-width: 420px; width: 90%; position: relative;
}
#airep-contact-modal .modal-content h3 { color: #0e2e62; margin-top: 0; }
#airep-contact-modal .modal-close {
  position: absolute; top: 15px; right: 15px;
  cursor: pointer; font-size: 24px; color: #999; line-height: 1;
}
#airep-contact-modal .modal-close:hover { color: #333; }
#airep-contact-modal .form-group { margin-bottom: 15px; }
#airep-contact-modal .form-group input,
#airep-contact-modal .form-group textarea {
  width: 100%; padding: 12px; border: 2px solid #9eacc0; border-radius: 5px;
  font-size: 16px; box-sizing: border-box; font-family: inherit;
}

/* ============================================================
   PDF EXPORT STYLES  — Atomic Flow  (mirrors GBP Audit exactly)
   ============================================================ */

/* ── PART 1: HEADER BLOCK (img + h1 + score columns) ─────────
   Captured at 800px wide → compact text that fits the full
   PDF page width without looking blown-up.                    */
.airep-pdf-export-mode img,
.airep-pdf-export-mode h1.rpt-heading,
.airep-pdf-export-mode .report-header-columns {
  background: #ffffff !important;
  width: 800px !important;
  padding: 20px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* ── PART 2: BODY SECTIONS ────────────────────────────────────
   Narrower at 600px → stretches to fill the PDF content area,
   making text ~33% larger and much more readable in print.    */
.airep-pdf-export-mode .report-section {
  background: #ffffff !important;
  width: 600px !important;
  padding: 15px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* ── PART 3: Typography boost inside body sections ────────────*/
.airep-pdf-export-mode .report-section h3,
.airep-pdf-export-mode .report-section h4 {
  font-size: 24px !important;
  margin-top: 10px !important;
}

.airep-pdf-export-mode .report-section p,
.airep-pdf-export-mode .report-section li,
.airep-pdf-export-mode .criterion-label,
.airep-pdf-export-mode .platform-card h4,
.airep-pdf-export-mode .platform-card p,
.airep-pdf-export-mode .response-text {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* ── PART 4: Criterion item fixes ─────────────────────────────*/
.airep-pdf-export-mode .criterion-item {
  margin-bottom: 5px !important;
  padding: 15px !important;
  border: 1px solid #eee !important;
}

.airep-pdf-export-mode .criterion-status {
  font-size: 15px !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

/* ── PART 5: Score card — colour locking ──────────────────────
   The dynamic grade background-color is set as an inline style
   by JS before capture; these rules ensure it prints correctly.*/
.airep-pdf-export-mode #airep-score-card {
  background-image: none !important;
  color: white !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* ── PART 6: Report GBP / dark header columns ─────────────────*/
.airep-pdf-export-mode .report-gbp {
  background-image: none !important;
  background-color: #00538f !important;
  color: white !important;
}

/* ── PART 7: Force status badge colours ───────────────────────*/
.airep-pdf-export-mode .status-pass {
  background-color: #4caf50 !important;
  color: white !important;
}
.airep-pdf-export-mode .status-fail {
  background-color: #f44336 !important;
  color: white !important;
}
.airep-pdf-export-mode .status-skip {
  background-color: #ff9800 !important;
  color: white !important;
}

/* ── PART 8: Platform cards ───────────────────────────────────*/
.airep-pdf-export-mode .platform-card {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  margin-bottom: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── PART 9: Hide elements that must NOT appear in the PDF ────*/
.airep-pdf-export-mode .report-actions,
.airep-pdf-export-mode .criterion-details {
  display: none !important;
}

/* ── PART 10: AI Response Cards (Mobile-Optimized) ────────────*/
.airep-pdf-export-mode .ai-response-card-pdf {
  background: #f8f9fa !important;
  border: 2px solid #00538f !important;
  border-radius: 8px !important;
  margin-bottom: 15px !important;
  padding: 25px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  page-break-inside: auto !important;
}

.airep-pdf-export-mode .ai-response-card-pdf h4 {
  margin: 0 0 18px 0 !important;
  padding: 0 0 12px 0 !important;
  font-size: 24px !important;
  color: #00538f !important;
  font-family: 'Roboto', Arial, sans-serif !important;
  border-bottom: 1px solid #ddd !important;
}

.airep-pdf-export-mode .response-text-pdf {
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #222 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.airep-pdf-export-mode .section-header h3 {
  font-size: 28px !important;
  color: #00538f !important;
  margin: 10px 0 !important;
  padding: 15px 0 !important;
  border-top: 2px solid #00538f !important;
}


/* ========================================
   RESPONSIVE — TABLET (≤ 768px)
   ======================================== */
@media (max-width: 768px) {
  /*
   * BUG 2 FIX — MOBILE VIEWPORT SHIFT
   * When a result is tapped, the browser writes a long string into the
   * <input>, triggering a reflow. Without overflow containment the layout
   * widens past the viewport and the browser scrolls left to compensate.
   *
   * Fix layers (all required — any one alone is insufficient):
   *  1. html/body overflow-x:hidden  — blocks the page from scrolling left
   *  2. #airep-container overflow-x:hidden  — contains child overflow
   *  3. .search-input-row overflow:hidden   — contains flex-child overflow
   *  4. input font-size:16px   — prevents iOS Safari auto-zoom on focus
   *  5. .airep-business-name/address white-space:nowrap + text-overflow:ellipsis
   *     — long text clips instead of stretching the dropdown box
   */
  html, body {
    overflow-x: hidden; /* safe on html/body — does NOT create a clipping stacking context */
    max-width: 100%;
  }

  #airep-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* overflow-x NOT set — would clip the absolute dropdown */
  }

  #airep-container .ai-screen-content { padding: 16px; }
  #airep-container .header-bg { min-height: 120px; }

  /* Search row: stack vertically on mobile */
  #airep-container .search-input-row {
    flex-direction: column;
    align-items: stretch;  /* children fill full width */
    gap: 10px;
    width: 100%;
  }

  /* Wrapper fills full width in column layout */
  #airep-container .search-input-wrapper {
    width: 100%;
    flex: none;  /* override flex:1 — not needed in column layout */
  }

  /* Input: fill column, no zoom trigger */
  #airep-container #airep-business-search {
    width: 100%;
    max-width: 100%;
    font-size: 16px;   /* MUST stay ≥16px — iOS zooms on smaller inputs */
    box-sizing: border-box;
  }

  /* Portal on mobile: use position:fixed so soft keyboard viewport shift
     doesn't push it off-screen. Width/top/left still set by JS. */
  #airep-results-portal {
    position: fixed !important;
    max-height: 260px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #airep-results-portal::-webkit-scrollbar { width: 6px; }
  #airep-results-portal::-webkit-scrollbar-track { background: #f1f1f1; }
  #airep-results-portal::-webkit-scrollbar-thumb { background: #9eacc0; border-radius: 4px; }

  #airep-container #airep-check-business { width: 100%; max-width: 100%; min-width: unset; border-radius: 5px; }

  /* Navigation footer: centre back button */
  #airep-container .navigation-footer { justify-content: center; }
  #airep-container .btn-secondary { max-width: 100%; width: 100%; }

  /* Screen 3 header: stack */
  #airep-container .report-header-columns { grid-template-columns: 1fr; }
  #airep-container .report-gbp { text-align: center; padding: 20px; }
  #airep-container .report-gbp h2 { font-size: 20px; }

  #airep-container .score-card { gap: 12px; padding: 20px; }
  #airep-container .score-letter { font-size: 54px; }
  #airep-container .score-value  { font-size: 38px; }
  #airep-container .score-divider { height: 55px; }

  /* Platform cards: stack */
  #airep-container .platform-cards { grid-template-columns: 1fr; }

  /* Report actions: stack */
  #airep-container .report-actions { flex-direction: column; align-items: center; }
  #airep-container .report-actions .btn-primary,
  #airep-container .report-actions .btn-secondary { max-width: 100%; width: 100%; }

  #airep-container .contact-cta { padding: 24px 16px; }

  /* Criterion rows: stack */
  #airep-container .criterion-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  #airep-container .criterion-status { align-self: flex-end; }
}

/* ========================================
   RESPONSIVE — MOBILE (≤ 480px)
   ======================================== */
@media (max-width: 480px) {
  #airep-container .form-header h2  { font-size: 20px; }
  #airep-container .report-gbp h2  { font-size: 18px; }
  #airep-container .score-letter   { font-size: 46px; }
  #airep-container .score-value    { font-size: 32px; }
  #airep-container .contact-cta    { padding: 20px 12px; }
  #airep-container .cta-content h3 { font-size: 20px; }
}