/*
 * Public and installer-portal stylesheet, served as one file
 * (AssetPipeline::CssImportInliner inlines these imports).
 *
 * The order reproduces the cascade the site had when layouts linked every
 * file with `stylesheet_link_tag :app` alongside application.css/main.css:
 * a file's effective position was its last occurrence. Keep it when editing:
 *   1. admin.css, modal styles, then components not listed in main.css;
 *   2. base, layout and component files in main.css order;
 *   3. every pages/ file, alphabetically.
 * Add a new stylesheet to the matching section; a test fails if a file
 * under app/assets/stylesheets is not reachable from here.
 */

/* admin.css */
/* ==========================================================================
   Admin Styles - Using BEM Methodology
   ========================================================================== */

/* ==========================================================================
   Base Styles
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #417C94FF;
  --color-primary-dark: #2563eb;
  --color-secondary: #64748b;
  --color-secondary-dark: #475569;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #06b6d4;
  
  /* Neutrals */
  --color-dark: #1e293b;
  --color-gray-dark: #334155;
  --color-gray: #64748b;
  --color-gray-light: #cbd5e1;
  --color-gray-lighter: #e2e8f0;
  --color-gray-lightest: #f1f5f9;
  --color-white: #ffffff;
  --color-background: #f8fafc;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Admin Layout Block
   ========================================================================== */

.admin-layout {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-gray-dark);
  min-height: 100vh;
}

/* ==========================================================================
   Admin Wrapper Block
   ========================================================================== */

.admin-wrapper {
  display: flex;
  min-height: 100vh;
}

/* Login page layout */
.admin-wrapper--login {
  justify-content: center;
  align-items: center;
  background-color: var(--color-gray-lightest);
}

.admin-wrapper--login .admin-main {
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Admin Login Block */
.admin-login {
  width: 100%;
  max-width: 420px;
  padding: var(--spacing-xl);
}

.login-container {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-xl);
  box-shadow: var(--shadow-lg);
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.login-header h1 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
}

.login-header p {
  margin: 0;
  color: var(--color-gray);
  font-size: 0.875rem;
}

.login-form {
  margin-bottom: var(--spacing-md);
}

.login-footer {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-lighter);
  color: var(--color-gray);
  font-size: 0.8125rem;
}

.login-footer p {
  margin: 0;
}

.btn-full {
  width: 100%;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.alert-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
}

/* ==========================================================================
   Admin Sidebar Block
   ========================================================================== */

.admin-sidebar {
  width: 250px;
  background-color: var(--color-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar__header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar__header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-sidebar__badge {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: var(--spacing-sm);
}

.admin-sidebar__footer {
  margin-top: auto;
  padding: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
}

.admin-sidebar__footer p {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--color-gray-light);
}

.admin-sidebar__footer strong {
  color: var(--color-white);
}

/* ==========================================================================
   Sidebar Navigation Block
   ========================================================================== */

.sidebar-nav {
  flex: 1;
  padding: var(--spacing-md) 0;
}

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

.nav-list__item {
  margin: 0;
}

.nav-list__divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: var(--spacing-md) var(--spacing-lg);
}

.nav-list__link {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--color-gray-light);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.nav-list__link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.nav-list__link--active {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--color-white);
}

.nav-list__link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-primary);
}

.nav-list__icon {
  margin-right: var(--spacing-sm);
  font-size: 1.25rem;
}

.nav-list__text {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-list__badge {
  background-color: var(--color-warning);
  color: var(--color-dark);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================================================
   Admin Main Block
   ========================================================================== */

.admin-main {
  flex: 1;
  margin-left: 250px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.admin-content {
  flex: 1;
  padding: var(--spacing-xl);
}

/* ==========================================================================
   Page Header Block
   ========================================================================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.page-header__content h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
}

.page-header__subtitle {
  margin: var(--spacing-xs) 0 0;
  color: var(--color-gray);
  font-size: 0.875rem;
}

.page-header__actions {
  display: flex;
  gap: var(--spacing-sm);
}

.header-stats {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

/* ==========================================================================
   Dashboard Block
   ========================================================================== */

.dashboard__header {
  margin-bottom: var(--spacing-xl);
}

.dashboard__header h1 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
}

.dashboard__header p {
  margin: 0;
  color: var(--color-gray);
}

/* ==========================================================================
   Stats Grid Block
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card__icon {
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-lightest);
  border-radius: var(--radius-lg);
}

.stat-card__content {
  flex: 1;
}

.stat-card__number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1;
}

.stat-card__label {
  font-size: 0.875rem;
  color: var(--color-gray);
  margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Quick Actions Block
   ========================================================================== */

.quick-actions {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-xl);
}

.quick-actions h2 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
}

.quick-actions__buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* ==========================================================================
   Activity Section Block
   ========================================================================== */

.activity-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-lg);
}

.activity-column {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.activity-column h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
}

.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-lighter);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.activity-item:hover {
  background-color: var(--color-gray-lightest);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item__content {
  flex: 1;
}

.activity-item__title {
  font-weight: 600;
  color: var(--color-dark);
  font-size: 0.875rem;
}

.activity-item__meta {
  font-size: 0.75rem;
  color: var(--color-gray);
  margin-top: var(--spacing-xs);
}

.activity-item__status,
.activity-item__rating {
  margin-left: var(--spacing-md);
}

.activity-item__rating {
  font-size: 1.25rem;
  font-weight: bold;
}

.activity-item__rating .star {
  color: var(--color-warning);
}

/* ==========================================================================
   Button Component
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: var(--spacing-sm);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: var(--color-secondary-dark);
}

.btn--warning {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.btn--warning:hover {
  background-color: #d97706;
}

.btn--sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.75rem;
}

.btn--lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
}

.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-gray-lighter);
  color: var(--color-gray);
}

.btn--outline:hover {
  background-color: var(--color-gray-lightest);
  border-color: var(--color-gray-light);
  color: var(--color-dark);
}

/* ==========================================================================
   Badge Component
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge--success {
  background-color: #d1fae5;
  color: #065f46;
}

.badge--warning {
  background-color: #fef3c7;
  color: #92400e;
}

.badge--danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge--info {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge--secondary {
  background-color: var(--color-gray-lighter);
  color: var(--color-gray-dark);
}

.badge--lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
}

/* ==========================================================================
   Stat Badge Component
   ========================================================================== */

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-gray-lightest);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.stat-badge strong {
  font-weight: 700;
  color: var(--color-dark);
}

.stat-badge--success {
  background-color: #d1fae5;
  color: #065f46;
}

.stat-badge--warning {
  background-color: #fef3c7;
  color: #92400e;
}

/* ==========================================================================
   Alert Component
   ========================================================================== */

.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
  position: relative;
}

.alert--success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.alert--warning {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.alert--danger {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.alert--dismissible {
  padding-right: var(--spacing-2xl);
}

.alert__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.alert__close:hover {
  opacity: 1;
}

/* ==========================================================================
   Flash Messages Block
   ========================================================================== */

.flash-messages {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 1000;
  max-width: 400px;
}

.flash-messages .alert {
  margin-bottom: var(--spacing-sm);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==========================================================================
   Form Components
   ========================================================================== */

.form-group {
  margin-bottom: var(--spacing-lg);
}

/* Compact form groups in filter sections */
.filter-section .form-group {
  margin-bottom: 0.75rem;
}

/* Make form labels more compact too */
.filter-section .form-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Make text inputs in filter section compact too */
.filter-section .form-input {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  height: 1.75rem;
  line-height: 1;
  width: auto;
  min-width: 150px;
  max-width: 250px;
}

/* Override filter section grid to be more compact */
.filter-section__form {
  gap: 0.75rem !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Make filter section header more compact */
.filter-section__header {
  margin-bottom: 1rem !important;
}

/* Make filter actions inline */
.filter-section__actions {
  display: flex !important;
  gap: 0.5rem !important;
  grid-column: unset !important;
  margin-top: 0 !important;
}

/* Add space between filters and table */
.filter-section + .table-container {
  margin-top: 2rem !important;
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-gray-dark);
  font-size: 0.875rem;
}

.form-label--required::after {
  content: ' *';
  color: var(--color-danger);
}

.form-input,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--color-white);
}

/* Make select dropdowns more compact */
.form-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  height: 1.75rem;
  line-height: 1;
  min-height: auto;
}

/* Make filter selects much smaller width */
.filter-section .form-select {
  width: auto;
  min-width: 120px;
  max-width: 180px;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   Table Component
   ========================================================================== */

.table-container {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background-color: var(--color-gray-lightest);
}

.data-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--color-gray-dark);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.data-table td {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-gray-lighter);
}

.data-table tbody tr:hover {
  background-color: var(--color-gray-lightest);
}

.data-table .text-center {
  text-align: center;
}

.data-table .text-muted {
  color: var(--color-gray);
}

/* ==========================================================================
   Empty State Component
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--color-gray);
}

.empty-state p {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1rem;
}

/* ==========================================================================
   No Data Component
   ========================================================================== */

.no-data {
  text-align: center;
  color: var(--color-gray);
  font-style: italic;
  padding: var(--spacing-xl);
}

/* ==========================================================================
   Inline Editable Component
   ========================================================================== */

.inline-editable {
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  user-select: none;
}

.inline-editable::after {
  content: "✏️";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 0.8em;
}

.inline-editable:hover {
  opacity: 0.9;
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.inline-editable:hover::after {
  opacity: 0.7;
}

.inline-editable:active {
  transform: scale(0.95);
}

/* ==========================================================================
   Status Badges Container
   ========================================================================== */

.status-badges {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .admin-sidebar {
    width: 100%;
    position: static;
    height: auto;
  }
  
  .admin-main {
    margin-left: 0;
  }
  
  .admin-wrapper {
    flex-direction: column;
  }
  
  .admin-content {
    padding: var(--spacing-md);
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .activity-section {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  
  .quick-actions__buttons {
    flex-direction: column;
  }
  
  .quick-actions__buttons .btn {
    width: 100%;
  }
}

/* Import additional admin page styles */
@import "pages/admin_company_data_review.css";
@import "pages/admin_verification_reviews.css";

/* Admin Company Show specific */
.admin-company-show .badge-lg.inline-editable {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-company-show .badge-lg.inline-editable::after {
  position: static;
  opacity: 0.5;
  margin-left: 0.25rem;
}

/* Flash message positioning for inline edits */
.flash-messages {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  max-width: 400px;
}

.flash-messages .alert {
  margin-bottom: 0.5rem;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* components/modal.css */
/* Inquiry modal and its form states. */
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Above the sticky site header (z-index 9999), which otherwise covers the modal title. */
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scrolling when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Modal Container */
.modal {
  background: white;
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-overlay.active .modal {
  transform: scale(1);
}

/* Modal Header */
.modal-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.modal-close:hover {
  background: var(--color-background-light);
  color: var(--color-text);
}

/* Modal Body */
.modal-body {
  padding: 2rem;
}

.modal-body .inquiry-form {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  margin-top: 0;
}

/* Modal Footer */
.modal-footer {
  padding: 1rem 2rem 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.modal-footer .btn {
  min-width: 100px;
}

/* Form Styles within Modal */
.modal-body .form-group {
  margin-bottom: 1.5rem;
}

.modal-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.modal-body .form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
  gap: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modal {
    width: 95%;
    max-height: 95vh;
    margin: 1rem;
  }
  
  .modal-header {
    padding: 1.5rem 1.5rem 1rem;
  }
  
  .modal-body {
    padding: 1.5rem;
  }
  
  .modal-footer {
    padding: 1rem 1.5rem 1.5rem;
  }
  
  .modal-body .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .modal-body .form-actions {
    flex-direction: column;
  }
  
  .modal-body .form-actions .btn {
    width: 100%;
  }
}

/* Animation for form submission */
.modal-body .form-loading {
  opacity: 0.6;
  pointer-events: none;
}

.modal-body .form-loading .btn {
  position: relative;
}

.modal-body .form-loading .btn:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Accessibility */
.modal-overlay[aria-hidden="true"] {
  pointer-events: none;
}

.modal-overlay[aria-hidden="false"] {
  pointer-events: auto;
}

/* Focus styles */
.modal-close:focus,
.modal .form-input:focus,
.modal .form-select:focus,
.modal .form-textarea:focus,
.modal .btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Modal specific form styling */
.modal .form-select {
  height: 44px;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

/* Error states */
.modal-body .form-group.error .form-input,
.modal-body .form-group.error .form-select,
.modal-body .form-group.error .form-textarea {
  border-color: #dc3545;
}

.modal-body .form-group.error .form-label {
  color: #dc3545;
}

.modal-body .error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
} 
/* components/company_show.css */
/* Company Show Page Styles */

.company-show {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  vertical-align: middle;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1rem;
}

.company-header .company-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

@media (max-width: 768px) {
  .company-header .company-header-content {
    flex-direction: column;
    align-items: stretch;
  }
}

.company-header .company-header-main {
  display: flex;
  gap: 1.5rem;
  flex: 1;
}

@media (max-width: 768px) {
  .company-header .company-header-main {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

.company-header .company-title-section {
  flex: 1;
}

.company-header .company-title-section .company-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.company-header .company-title-section .company-legal-name {
  margin-bottom: 1rem;
}

.company-header .company-title-section .legal-name-link {
  font-size: 1rem;
  font-weight: 400;
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.company-header .company-title-section .legal-name-link:hover {
  color: #3b82f6;
  text-decoration: underline;
}

.company-header .company-title-section .legal-name-link .fa-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .company-header .company-title-section .company-name {
    font-size: 2rem;
  }
}

.company-header .company-title-section .company-rating-overview .star-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.company-header .company-title-section .company-rating-overview .rating-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
}

.company-header .company-title-section .company-rating-overview .review-count {
  color: #6c757d;
  font-size: 0.95rem;
}

.company-header .company-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .company-header .company-actions {
    align-items: stretch;
    flex-direction: row;
  }
}

.company-details .company-info-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

@media (max-width: 992px) {
  .company-details .company-info-grid {
    grid-template-columns: 1fr;
  }
}

.company-details .info-section {
  background: white;
  border-radius: 8px;
  padding: 1rem;
}

.company-details .info-section h2,
.company-details .info-section h3,
.company-details .info-section h4 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 600;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.company-details .info-section h4 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.company-details .contact-details .contact-item {
  display: flex;
  margin-bottom: 0.75rem;
  align-items: flex-start;
}

.company-details .contact-details .contact-item .contact-label {
  min-width: 80px;
  font-weight: 500;
  color: #6c757d;
  margin-right: 1rem;
}

.company-details .contact-details .contact-item .contact-value {
  color: #2c3e50;
  word-break: break-word;
}

.company-details .contact-details .contact-item a.contact-value {
  color: var(--color-primary);
  text-decoration: none;
}

.company-details .contact-details .contact-item a.contact-value--url {
  white-space: nowrap;
}

.company-details .contact-details .contact-item a.contact-value:hover {
  text-decoration: underline;
}

.company-details .company-description {
  line-height: 1.6;
  color: #495057;
}

/* Services section - Modern CSS */
.company-details .services-content .services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.company-details .services-content .service-tag {
  display: inline-block;
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  color: #2e7d32;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #c8e6c9;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.company-details .services-content .service-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #c8e6c9 0%, #e8f5e8 100%);
}

.company-details .services-content .service-types h4 {
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.5rem;
  color: #2c3e50;
  font-weight: 600;
}

.company-details .services-content .service-types-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.company-details .services-content .service-type-tag {
  display: inline-block;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  color: #ef6c00;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #ffcc02;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.company-details .services-content .service-type-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #ffe0b2 0%, #ffcc02 100%);
}

.company-details .company-map {
  height: 300px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.company-details .map-links {
  margin-top: 1rem;
  text-align: center;
}

.company-details .map-placeholder {
  text-align: center;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

/* Sidebar specific styles */
.company-sidebar .info-section {
  margin-bottom: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .company-show {
    padding: 0.5rem;
  }

  .company-header {
    padding: 1rem;
    margin-bottom: 0.5rem;
  }

  .company-header .company-title-section .company-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .company-header .company-header-main .company-logo--large {
    width: 144px;
    height: 96px;
  }

  .company-header .company-header-main {
    gap: 1rem;
  }

  .company-details .info-section {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .company-details .info-section h2,
  .company-details .info-section h3,
  .company-details .info-section h4 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.375rem;
  }

  .social-links {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .company-details .social-links .social-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Service tags */
  .company-details .services-content .service-tag,
  .company-details .services-content .service-type-tag {
    padding: 0.375rem 0.75rem;
    font-size: 0.813rem;
  }

  /* Service areas */
  .company-details .service-areas .area-tag {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  /* Contact details */
  .company-details .contact-details .contact-item {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .company-details .contact-details .contact-item .contact-label {
    min-width: auto;
    margin-right: 0;
  }

  /* Review platform links */
  .company-details .review-platform-links .review-platform-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Button adjustments */
  .company-actions .btn-large {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }

  /* Ensure header stays within bounds */
  .company-header {
    display: block;
  }

  .company-header .company-header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .company-actions {
    width: 100%;
    align-items: stretch;
    margin-top: 1rem;
  }

  .company-actions .btn {
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .company-show {
    padding: 0;
  }

  .company-header {
    padding: 0.75rem;
    border-radius: 8px;
  }

  .company-header .company-title-section .company-name {
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
    line-height: 1.3;
    word-wrap: break-word;
  }

  .company-header .company-title-section {
    text-align: center;
    width: 100%;
  }

  .company-header .company-title-section .company-rating-overview {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 0.625rem 1rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin: 0.5rem auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    max-width: fit-content;
  }

  .company-header .company-title-section .company-rating-overview .star-rating {
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
  }

  .company-header .company-title-section .company-rating-overview .stars {
    display: inline-flex;
    gap: 1px;
    font-size: 0.875rem;
  }

  .company-header .company-title-section .company-rating-overview .star {
    color: #fbbf24;
  }

  .company-header .company-title-section .company-rating-overview .rating-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #374151;
    margin-left: 0.25rem;
  }

  .company-header .company-title-section .company-rating-overview .review-count {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 0.25rem;
  }

  .company-header .company-header-main .company-logo--large {
    width: 108px;
    height: 72px;
  }

  .company-header .company-rating-overview .rating-value {
    font-size: 1rem;
  }

  .company-header .company-rating-overview .review-count {
    font-size: 0.813rem;
  }

  /* Better rating section styling on mobile */
  .company-header .company-title-section .company-rating-overview {
    background: linear-gradient(135deg, #fafbfc 0%, #f4f5f7 100%);
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-top: 0.5rem;
    display: inline-block;
  }

  .company-header .company-title-section .company-rating-overview .star-rating {
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    justify-content: center;
  }

  .company-header .company-title-section .company-rating-overview .review-count {
    text-align: center;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
  }

  .company-details .info-section {
    padding: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .company-details .info-section h2,
  .company-details .info-section h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  /* Ensure social links don't overflow */
  .social-links {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .company-details .social-links .social-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.375rem;
  }

  .company-details .social-links .social-link .fa-icon {
    font-size: 0.875rem;
  }

  /* Service and area tags */
  .company-details .services-content .services-list,
  .company-details .services-content .service-types-list,
  .company-details .service-areas {
    gap: 0.375rem;
  }

  .company-details .services-content .service-tag,
  .company-details .services-content .service-type-tag {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .company-details .service-areas .area-tag {
    padding: 0.1875rem 0.375rem;
    font-size: 0.6875rem;
    border-radius: 12px;
  }

  /* Company description */
  .company-details .company-description {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* Contact details further reduction */
  .company-details .contact-details .contact-item {
    font-size: 0.875rem;
  }

  /* Review platform links */
  .company-details .review-platform-links .review-platform-link {
    padding: 0.375rem 0.5rem;
    font-size: 0.813rem;
    gap: 0.5rem;
  }

  .company-details .review-platform-links .review-platform-link .platform-icon {
    font-size: 1rem;
  }

  /* Map section */
  .company-details .company-map {
    height: 200px;
    margin-bottom: 1rem;
  }
  
  .company-details .map-links {
    margin-top: 1.5rem;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .company-details .map-links .btn {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    max-width: 250px;
  }

  /* Fix header layout on very small screens */
  .company-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .company-header .company-header-content {
    width: 100%;
  }

  .company-actions {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .company-actions .btn-large {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.813rem;
  }
}

/* Social Media Links */
.company-details .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.company-details .social-links .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  border: 1px solid;
}

.company-details .social-links .social-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-details .social-links .social-link.facebook {
  color: #1877f2;
  border-color: #1877f2;
  background: rgba(24, 119, 242, 0.1);
}

.company-details .social-links .social-link.facebook:hover {
  background: #1877f2;
  color: white;
}

.company-details .social-links .social-link.twitter {
  color: #1da1f2;
  border-color: #1da1f2;
  background: rgba(29, 161, 242, 0.1);
}

.company-details .social-links .social-link.twitter:hover {
  background: #1da1f2;
  color: white;
}

.company-details .social-links .social-link.linkedin {
  color: #0077b5;
  border-color: #0077b5;
  background: rgba(0, 119, 181, 0.1);
}

.company-details .social-links .social-link.linkedin:hover {
  background: #0077b5;
  color: white;
}

.company-details .social-links .social-link.instagram {
  color: #e4405f;
  border-color: #e4405f;
  background: rgba(228, 64, 95, 0.1);
}

.company-details .social-links .social-link.instagram:hover {
  background: #e4405f;
  color: white;
}

/* Review Platform Links */
.company-details .review-platform-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.company-details .review-platform-links .review-platform-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #e9ecef;
  background: #f8f9fa;
  transition: all 0.2s;
}

.company-details .review-platform-links .review-platform-link.external:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: white;
}

.company-details .review-platform-links .review-platform-link .platform-icon {
  font-size: 1.25rem;
  min-width: 24px;
  text-align: center;
}

.company-details .review-platform-links .review-platform-link .platform-name {
  font-weight: 500;
  color: #2c3e50;
}

/* Service Areas */
.company-details .service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.company-details .service-areas .area-tag {
  background: #e3f2fd;
  color: #075985;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Company Logo Styles */
.company-logo {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Light blue background for PNG logos to handle transparency */
.company-logo--png {
  background: #f0f8ff; /* Alice blue - very light blue */
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}

.company-logo--medium {
  width: 60px;
  height: 60px;
}

.company-logo--large {
  width: 120px;
  height: 120px;
  border-radius: 12px;
}

.company-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Special handling for SVG logos */
.company-logo img.company-logo--svg {
  width: 90%;
  height: 90%;
  max-width: 100%;
  max-height: 100%;
}

/* Fallback logo container */
.company-logo:has(.company-logo--fallback-img) {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  border-color: #4CAF50;
}

.company-logo--fallback-img {
  filter: brightness(1.1);
  padding: 10px;
  width: 80%;
  height: 80%;
}

/* Company header specific logo adjustments — landscape slot matching the
   company cards' logo aspect (not a square); wide brand logos letterbox via
   the .company-logo img object-fit: contain rule. */
.company-header-main .company-logo--large {
  width: 180px;
  height: 120px;
  margin-right: 1.5rem;
}

/* Company card specific logo adjustments */
.company-card__logo {
  margin-right: 1rem;
}

/* Claim Company CTA */
.claim-company-cta {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.claim-company-cta h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  margin: 0 0 0.5rem;
}

.claim-company-text {
  font-size: 0.875rem;
  color: #15803d;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.btn-full-width {
  width: 100%;
  justify-content: center;
}

/* Existing company show styles */

/* Last updated freshness signal at the foot of the profile */
.company-last-updated {
  margin: var(--spacing-lg) auto 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.company-last-updated time {
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Similar companies block */
.similar-companies {
  margin-top: var(--spacing-xl);
}

.similar-companies__heading {
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.similar-companies__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.similar-companies__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  height: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.similar-companies__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.similar-companies__logo {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.similar-companies__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.similar-companies__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.similar-companies__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* FAQ block — native <details> accordion, no JS */
.company-faq {
  margin-top: var(--spacing-xl);
}

.company-faq__heading {
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.company-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.company-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 0 var(--spacing-md);
}

.company-faq__question {
  cursor: pointer;
  padding: var(--spacing-md) 0;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Hide the default marker (the ::after chevron replaces it) across browsers. */
.company-faq__question::-webkit-details-marker {
  display: none;
}

.company-faq__question::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.company-faq__item[open] .company-faq__question::after {
  content: "\2212"; /* minus sign */
}

.company-faq__answer {
  padding: 0 0 var(--spacing-md);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Pros & Cons — two-column lists, stack on mobile */
.company-pros-cons__columns {
  display: grid;
  /* auto-fit collapses the empty track when there are no cons, so a lone Pros
     column spans the full width instead of sitting in a half-empty 2-col grid. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
}

@media (max-width: 600px) {
  .company-pros-cons__columns {
    grid-template-columns: 1fr;
  }
}

.company-pros-cons__column {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  background: var(--color-surface);
}

.company-pros-cons__column--pros {
  border-left: 4px solid var(--color-success);
}

.company-pros-cons__column--cons {
  border-left: 4px solid var(--color-text-muted);
}

.company-pros-cons__label {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.company-pros-cons__list {
  margin: 0;
  padding-left: 1.25rem;
}

.company-pros-cons__item {
  margin-bottom: 0.375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
 

/* components/dialog.css */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Above the sticky site header (z-index 9999), which otherwise covers the modal title. */
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Prevent body scrolling when modal is open */
  body.modal-open {
    overflow: hidden;
  }
  
  /* Modal Container */
  .modal {
    background: white;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  
  .modal-overlay.active .modal {
    transform: scale(1);
  }
  
  /* Modal Header */
  .modal-header {
    padding: 1rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
  }

  .modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
  }

  .modal-close:hover {
    background: var(--color-background-light);
    color: var(--color-text);
  }

  /* Modal Body */
  .modal-body {
    padding: 1rem 1.5rem 0.5rem;
  }

  .modal-body .inquiry-form {
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    margin-top: 0;
  }

  /* Modal Footer */
  .modal-footer {
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  
  .modal-footer .btn {
    min-width: 100px;
  }
  
  /* Form Styles within Modal - Compact layout */
  .modal-body .form-group {
    margin-bottom: 0.75rem;
  }

  .modal-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .modal-body .form-row .form-group {
    margin-bottom: 0;
  }

  .modal-body .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-bottom: 0.5rem;
    gap: 0.75rem;
  }

  .modal-body .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }

  .modal-body .form-input,
  .modal-body .form-textarea {
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
  }

  .modal-body .form-select {
    padding: 0 0.875rem;
    font-size: 0.9375rem;
    height: 42px;
    line-height: 42px;
  }

  .modal-body .form-textarea {
    min-height: 60px;
  }

  .modal-body .form-hint {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
    padding-left: 0;
    border-left: none;
    color: var(--color-text-muted);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .modal {
      width: 95%;
      max-height: 95vh;
      margin: 1rem;
    }
    
    .modal-header {
      padding: 1.5rem 1.5rem 1rem;
    }
    
    .modal-body {
      padding: 1.5rem;
    }
    
    .modal-footer {
      padding: 1rem 1.5rem 1.5rem;
    }
    
    .modal-body .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
    
    .modal-body .form-actions {
      flex-direction: column;
    }
    
    .modal-body .form-actions .btn {
      width: 100%;
    }
  }
  
  /* Animation for form submission */
  .modal-body .form-loading {
    opacity: 0.6;
    pointer-events: none;
  }
  
  .modal-body .form-loading .btn {
    position: relative;
  }
  
  .modal-body .form-loading .btn:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Accessibility */
  .modal-overlay[aria-hidden="true"] {
    pointer-events: none;
  }
  
  .modal-overlay[aria-hidden="false"] {
    pointer-events: auto;
  }
  
  /* Focus styles */
  .modal-close:focus,
  .modal .form-input:focus,
  .modal .form-select:focus,
  .modal .form-textarea:focus,
  .modal .btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  
  /* Error states */
  .modal-body .form-group.error .form-input,
  .modal-body .form-group.error .form-select,
  .modal-body .form-group.error .form-textarea {
    border-color: #dc3545;
  }
  
  .modal-body .form-group.error .form-label {
    color: #dc3545;
  }
  
  .modal-body .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
  
/* components/reviews.css */
/* Multi-Platform Reviews Styling */
.reviews-section {
  --review-border: var(--color-border);
  --review-background: var(--color-surface);
  --review-text: var(--color-text);
  --review-meta: var(--color-text-secondary);
  --platform-checkatrade: #00a8e6;
  --platform-trustpilot: #00b67a;
  --platform-which: #d21c1c;
}

.reviews-section__heading {
  margin: 0 0 1.5rem 0;
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Review Summary */
.review-summary {
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 2rem;
}

.review-topic-summary {
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin: 2rem 0;
}

.review-topic-summary__title {
  margin: 0 0 0.75rem 0;
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}

.review-topic-summary__text {
  margin: 0;
  color: var(--review-text);
  font-size: 1rem;
  line-height: 1.6;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.overall-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.overall-rating .rating-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
}

.review-count {
  text-align: center;
}

.review-count .count {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.review-count .label {
  font-size: 0.875rem;
  color: var(--review-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.platform-breakdown {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.platform-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius-sm);
  min-width: 120px;
}

.platform-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.platform-count {
  font-size: 0.875rem;
  color: var(--review-meta);
}

/* Platform Tabs */
.platform-tabs {
  margin-bottom: 2rem;
}

.tabs-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--review-border);
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tab-button {
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 500;
  color: var(--review-meta);
}

.tab-button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.tab-button.active {
  background: var(--color-primary);
  color: white;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Platform Header */
.platform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);

  background: var(--color-surface-subtle);
  border-radius: var(--border-radius);
}

.platform-header h3 {
  margin: 0 0 0.5rem 0;
  color: var(--color-text);
}

.platform-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Platform Rating Info - Rating and Count on Same Line */
.platform-rating-info {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.platform-rating-info .rating-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-rating-info .rating-label {
  font-size: 0.875rem;
  color: var(--review-meta);
}

.platform-rating-info .review-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-rating-info .review-count .count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.platform-rating-info .review-count .label {
  font-size: 0.875rem;
  color: var(--review-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.view-profile-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
}

.view-profile-link:hover {
  background: var(--color-primary);
  color: white;
}

/* Individual Reviews */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.individual-review {
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.individual-review:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.verified-badge {
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 50%;
  font-weight: 700;
}

.review-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.platform-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.platform-checkatrade {
  background: var(--platform-checkatrade);
  color: white;
}

.platform-trustpilot {
  background: var(--platform-trustpilot);
  color: white;
}

.platform-which {
  background: var(--platform-which);
  color: white;
}

.review-date {
  font-size: 0.875rem;
  color: var(--review-meta);
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rating-value {
  font-weight: 600;
  color: var(--color-primary);
}

/* Review Content */
.review-content {
  margin-bottom: 1rem;
}

.review-text {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--review-text);
}

.platform-details {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.platform-details span {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-surface-subtle);
  border-radius: var(--border-radius-sm);
  color: var(--review-meta);
}

.job-type {
  background: var(--platform-checkatrade) !important;
  color: white !important;
}

.verified-purchase {
  background: var(--platform-trustpilot) !important;
  color: white !important;
}

.would-recommend {
  background: var(--platform-which) !important;
  color: white !important;
}

.helpful-votes {
  background: var(--color-success) !important;
  color: white !important;
}

/* Business Response */
.business-response {
  background: var(--color-surface-subtle);
  border-left: 3px solid var(--color-primary);
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.response-header strong {
  color: var(--color-primary);
}

.response-date {
  font-size: 0.875rem;
  color: var(--review-meta);
}

.response-content {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Review Footer */
.review-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--review-border);
}

.view-original {
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
}

.view-original:hover {
  text-decoration: underline;
}

/* Review Statistics */
.review-stats {
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-top: 2rem;
}

.review-stats h4 {
  margin-bottom: 1rem;
  color: var(--color-text);
}

.rating-distribution {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sentiment-label {
  min-width: 80px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.bar-container {
  flex: 1;
  height: 8px;
  background: var(--color-surface-subtle);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.percentage {
  min-width: 40px;
  text-align: right;
  font-size: 0.875rem;
  color: var(--review-meta);
}

/* No Reviews State */
.no-reviews {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius);
}

.no-reviews-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.no-reviews h3 {
  margin-bottom: 1rem;
  color: var(--color-text);
}

.platforms-list {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.platform-badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius-sm);
  background: var(--color-surface-subtle);
  color: var(--review-meta);
  font-weight: 500;
}

.refresh-note {
  color: var(--review-meta);
  font-size: 0.875rem;
}

/* Load More */
.load-more {
  text-align: center;
  margin-top: 1.5rem;
}

/* Review Meta */
.review-meta {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--review-border);
}

.last-updated {
  color: var(--review-meta);
  font-size: 0.875rem;
}

/* Platform Summary Cards - Beautiful Glow Up */
.platform-summaries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.platform-summary-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

/* Shiny hover effect */
.platform-summary-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  transition: left 0.5s ease;
  pointer-events: none;
}

.platform-summary-card:hover::after {
  left: 100%;
}

.platform-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.05);
}

/* Platform-specific gradient overlays and branding */
.platform-summary-card[data-platform="checkatrade"]::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 168, 230, 0.08) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.platform-summary-card[data-platform="checkatrade"] .platform-header h3 {
  color: #00a8e6;
}



.platform-summary-card[data-platform="trustpilot"]::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 182, 122, 0.08) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.platform-summary-card[data-platform="trustpilot"] .platform-header h3 {
  color: #00b67a;
}



.platform-summary-card:hover::before {
  opacity: 1.5;
}

/* Enhanced Platform Header */
.platform-summary-card .platform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.platform-summary-card .platform-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* Enhanced Platform Link */
.platform-summary-card .platform-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.05);
}

.platform-summary-card .platform-link:hover {
  background: rgba(59, 130, 246, 0.1);
  transform: translateX(2px);
}

.platform-summary-card .external-icon {
  transition: transform 0.2s ease;
}

.platform-summary-card .platform-link:hover .external-icon {
  transform: translate(2px, -2px);
}

/* Enhanced Platform Stats */
.platform-summary-card .platform-stats {
  margin-bottom: 1.5rem;
}

.platform-summary-card .platform-rating-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Left column - Rating */
.platform-summary-card .rating-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.platform-summary-card .star-rating {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2));
}

.platform-summary-card .rating-text {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  font-size: 1.5rem;
  color: var(--color-text);
  font-weight: 600;
}

.platform-summary-card .rating-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.platform-summary-card .rating-divider {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--review-meta);
}

.platform-summary-card .rating-max {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--review-meta);
}

/* Right column - Review Count */
.platform-summary-card .review-count-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  position: relative;
}

.platform-summary-card .review-count-column::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.3s ease;
}

.platform-summary-card:hover .review-count-column::before {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 0.7);
}

.platform-summary-card .review-count-column .count {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.platform-summary-card .review-count-column .label {
  font-size: 1rem;
  color: var(--review-meta);
  font-weight: 500;
  text-transform: lowercase;
  position: relative;
  z-index: 1;
}

/* Platform-specific review count colors */
.platform-summary-card[data-platform="checkatrade"] .review-count-column .count {
  color: #00a8e6;
}

.platform-summary-card[data-platform="trustpilot"] .review-count-column .count {
  color: #00b67a;
}

/* Old review count styles for backward compatibility */
.platform-summary-card .review-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.platform-summary-card .review-count .count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.platform-summary-card .review-count .label {
  font-size: 0.75rem;
  color: var(--review-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* AI Summary Section */
.platform-summary-card .ai-summary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.02) 100%);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.platform-summary-card .ai-summary h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-summary-card .ai-summary h4::before {
  content: '✨';
  font-size: 1rem;
}

.platform-summary-card .summary-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--review-text);
  margin: 0;
}

.platform-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.platform-card {
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.platform-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.platform-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.platform-info h5 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.platform-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-stats {
  text-align: right;
}

.stat {
  margin-bottom: 0.25rem;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--review-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-date {
  font-size: 0.75rem;
  color: var(--review-meta);
}

.platform-link {
  margin: 1rem 0;
}

.view-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.view-platform-link:hover {
  background: var(--color-primary);
  color: white;
}

.external-icon {
  font-size: 0.875rem;
}

/* Platform Recent Reviews */
.platform-recent-reviews {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--review-border);
}

.platform-recent-reviews h6 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.mini-review {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--color-surface-subtle);
  border-radius: var(--border-radius-sm);
}

.mini-review:last-child {
  margin-bottom: 0;
}

.mini-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.reviewer-name {
  font-weight: 500;
  font-size: 0.875rem;
}

.mini-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--review-meta);
}

.mini-review-content {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--review-text);
  margin: 0 0 0.5rem 0;
  font-style: italic;
}

.mini-review-date {
  font-size: 0.75rem;
  color: var(--review-meta);
}

/* Individual Reviews Section */
.individual-reviews-section {
  margin-top: 2rem;
}

.individual-reviews-section h4 {
  margin-bottom: 1.5rem;
  color: var(--color-text);
  font-size: 1.25rem;
}

/* Recent Reviews Section */
.recent-reviews-section {
  margin-top: 3rem;
}

.recent-reviews-section h2 {
  margin-bottom: 0.5rem;
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.recent-reviews-section .section-description {
  font-size: 1rem;
  color: var(--review-meta);
  margin-bottom: 2rem;
}

/* Platform Filter */
.platform-filter {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.filter-btn {
  background: var(--color-surface);
  border: 1px solid var(--review-border);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--review-meta);
}

.filter-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Individual Reviews List */
.individual-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Recent Reviews List */
.recent-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* See-more block. Do NOT remove the #see-more-wrapper id from this element:
   it is the turbo_stream.replace target that swaps in the next page's button
   (see reviews.turbo_stream.erb); without it appends silently stop working. */
.see-more {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Exhausted stream responses replace the wrapper with an empty div; drop the
   margin so no phantom gap trails the last review. */
.see-more:empty {
  margin-top: 0;
}

.see-more__form {
  margin: 0;
}

.see-more__button {
  min-width: 10rem;
}

/* Turbo disables the submitter while the append request is in flight; dim it
   so the click visibly registered (inflight feedback without custom JS). */
.see-more__button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.recent-review-item {
  background: var(--review-background);
  border: 1px solid var(--review-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.recent-review-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Updated Review Header */
.recent-review-item .review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.recent-review-item .reviewer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recent-review-item .work-description {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  font-style: italic;
}

.recent-review-item .reviewer-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}

.recent-review-item .review-date {
  font-size: 0.875rem;
  color: var(--review-meta);
}

/* Review Rating Section */
.recent-review-item .review-rating-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.recent-review-item .review-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recent-review-item .rating-value {
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
}

/* Platform Badge Update */
.recent-review-item .platform-badge {
  font-size: 0.75rem;
  padding: 0;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Review Content */
.recent-review-item .review-content {
  margin-bottom: 0;
}

.recent-review-item .review-content p {
  line-height: 1.6;
  color: var(--review-text);
  margin: 0;
  font-style: italic;
}



/* Star rating sizes */
.star-rating--tiny {
  font-size: 0.75rem;
}

.star-rating--small {
  font-size: 0.875rem;
}

.star-rating--medium {
  font-size: 1rem;
}

.star-rating--large {
  font-size: 1.5rem;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}

.star {
  display: inline-block;
  transition: color 0.2s ease;
  color: #d1d5db; /* Default gray for empty stars */
}

.star--full {
  color: #f59e0b !important; /* Bright gold */
}

.star--half {
  color: #f59e0b !important; /* Bright gold */
  opacity: 0.5;
}

.star--empty {
  color: #d1d5db !important; /* Light gray */
}

/* Animation for rating value on load */
@keyframes ratingPulse {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.platform-summary-card .rating-text {
  animation: ratingPulse 0.6s ease-out;
}

.platform-summary-card .review-count-column .count {
  animation: ratingPulse 0.6s ease-out 0.2s;
  animation-fill-mode: both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .platform-summaries {
    grid-template-columns: 1fr;
  }

  .platform-summary-card {
    padding: 1.5rem;
  }

  .platform-summary-card .platform-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .platform-summary-card .platform-rating-info {
    gap: 2rem;
    padding: 1rem 1.5rem;
  }

  .platform-summary-card .star-rating {
    font-size: 1.25rem;
  }

  .platform-summary-card .rating-text {
    font-size: 1.25rem;
  }

  .platform-summary-card .rating-value {
    font-size: 1.25rem;
  }

  .platform-summary-card .rating-divider,
  .platform-summary-card .rating-max {
    font-size: 1rem;
  }

  .platform-summary-card .review-count-column::before {
    width: 60px;
    height: 60px;
  }

  .platform-summary-card .review-count-column .count {
    font-size: 2rem;
  }

  .platform-summary-card .review-count-column .label {
    font-size: 0.875rem;
  }

  .summary-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .platform-breakdown {
    justify-content: center;
  }

  .tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .platform-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .platform-rating-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .review-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .review-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .rating-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .sentiment-label,
  .percentage {
    min-width: auto;
    text-align: left;
  }

  .platforms-list {
    flex-direction: column;
    align-items: center;
  }

  .platform-cards {
    grid-template-columns: 1fr;
  }

  .platform-stats {
    text-align: left;
    display: flex;
    gap: 2rem;
  }

  .platform-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mini-review-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  /* Recent Reviews Responsive */
  .reviews-section__heading {
    font-size: 1.5rem;
  }

  .review-topic-summary {
    padding: 1.25rem;
  }

  .recent-reviews-section h2 {
    font-size: 1.5rem;
  }

  .recent-review-item {
    padding: 1rem;
  }

  .recent-review-item .review-header {
    flex-direction: column;
    gap: 1rem;
  }

  .recent-review-item .review-rating-section {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .recent-review-item .work-description,
  .recent-review-item .reviewer-name {
    font-size: 0.9rem;
  }

  .recent-review-item .star-rating {
    font-size: 0.875rem;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .reviews-section {
    padding: 0 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .reviews-section > * {
    width: 100%;
    max-width: 400px;
  }

  .reviews-section__heading {
    font-size: 1.375rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .reviews-section h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .review-topic-summary {
    padding: 1rem;
    margin: 1.25rem 0;
  }

  .platform-summaries {
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .platform-summary-card {
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: #ffffff;
    border: none;
    box-shadow: none !important;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Remove gradient effects on mobile */
  .platform-summary-card::before,
  .platform-summary-card::after {
    display: none !important;
  }
  
  /* Remove hover effects on mobile */
  .platform-summary-card:hover {
    transform: none;
    box-shadow: none !important;
  }

  .platform-summary-card .platform-header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .platform-summary-card .platform-header h3 {
    font-size: 1.125rem;
    margin: 0;
    text-align: center;
    color: #1f2937;
    font-weight: 600;
  }

  .platform-summary-card[data-platform="checkatrade"] .platform-header h3 {
    color: #0ea5e9;
  }

  .platform-summary-card[data-platform="trustpilot"] .platform-header h3 {
    color: #00b67a;
  }

  .platform-summary-card .platform-link {
    font-size: 0.813rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    color: #4b5563;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .platform-summary-card .platform-link:hover {
    background: #f3f4f6;
  }

  .platform-summary-card .external-icon {
    font-size: 0.75rem;
    margin-left: 0.125rem;
  }

  .platform-summary-card .platform-rating-info {
    gap: 1rem;
    padding: 1rem 0;
    margin: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .platform-summary-card .rating-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0;
  }

  .platform-summary-card .star-rating {
    font-size: 1rem;
    display: flex;
    gap: 1px;
  }

  .platform-summary-card .rating-text {
    font-size: 1.125rem;
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
  }

  .platform-summary-card .rating-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
  }

  .platform-summary-card .rating-divider,
  .platform-summary-card .rating-max {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 400;
  }

  .platform-summary-card .review-count-column {
    text-align: center;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
  }

  .platform-summary-card .review-count-column::before {
    display: none;
  }

  .platform-summary-card .review-count-column .count {
    font-size: 1.75rem;
    font-weight: 700;
    display: block;
    line-height: 1;
    color: #0ea5e9;
    margin-bottom: 0.125rem;
  }

  .platform-summary-card[data-platform="trustpilot"] .review-count-column .count {
    color: #00b67a;
  }

  .platform-summary-card .review-count-column .label {
    font-size: 0.813rem;
    color: #6b7280;
    display: block;
    font-weight: 500;
  }

  .platform-summary-card .ai-summary {
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: #f0fdf4;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
  }

  .platform-summary-card .ai-summary h4 {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #059669;
    font-weight: 600;
  }

  .platform-summary-card .ai-summary h4::before {
    content: "✨ ";
  }

  .platform-summary-card .summary-text {
    font-size: 0.813rem;
    line-height: 1.4;
    color: #047857;
  }

  /* Recent reviews */
  .recent-reviews-section {
    margin-top: 1.5rem;
  }

  .recent-reviews-section h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .recent-reviews-section .section-description {
    font-size: 0.813rem;
    margin-bottom: 0.75rem;
  }

  .recent-reviews-list {
    gap: 0.75rem;
  }

  .recent-review-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 8px;
  }

  .recent-review-item .review-header {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .recent-review-item .reviewer-info {
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .recent-review-item .work-description,
  .recent-review-item .reviewer-name {
    font-size: 0.813rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recent-review-item .review-date {
    font-size: 0.75rem;
  }

  .recent-review-item .review-rating-section {
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .recent-review-item .star-rating {
    font-size: 0.75rem;
  }

  .recent-review-item .rating-value {
    font-size: 0.813rem;
  }

  .recent-review-item .platform-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    white-space: nowrap;
    max-width: fit-content;
  }

  .recent-review-item .review-content {
    margin-top: 0.5rem;
  }

  .recent-review-item .review-content p {
    font-size: 0.813rem;
    line-height: 1.4;
  }

  .recent-review-item .review-content .work-type {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.375rem;
    font-style: italic;
  }

  .recent-review-item .review-content .work-type strong {
    font-weight: 600;
    font-style: normal;
    color: #4b5563;
  }

  /* Overall summary */
  .overall-summary {
    padding: 0.75rem;
    margin: 1rem 0;
  }

  .overall-summary h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .overall-summary .ai-summary-text {
    font-size: 0.813rem;
    line-height: 1.4;
  }

  /* No reviews state */
  .no-reviews-content {
    padding: 1.5rem 0.75rem;
  }

  .no-reviews-content h3 {
    font-size: 1.125rem;
  }

  .no-reviews-content p {
    font-size: 0.875rem;
  }

  .platforms-list {
    gap: 0.375rem;
    margin: 0.75rem 0;
  }

  .platforms-list .platform-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}


/* base/variables.css */
/* CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #0369a1;
  --color-primary-light: #60a5fa;
  --color-primary-dark: #075985;
  --color-secondary: #047857;
  --color-secondary-light: #34d399;
  --color-digest-image-background: #003f2e;
  --color-accent: #f59e0b;
  --color-text: #1f2937;
  --color-text-light: #4b5563;
  --color-text-secondary: #4b5563; /* Added for compatibility */
  --color-text-muted: #4b5563; /* Added for compatibility */
  --color-text-white: #ffffff;
  --color-background: #ffffff;
  --color-background-light: #f9fafb;
  --color-background-dark: #f3f4f6;
  --color-logo-background-dark: #17212b;
  --color-surface: #ffffff; /* Added for cards and surfaces */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-error: #dc2626;
  --color-success: #047857;
  --color-warning: #f59e0b;
  --color-info: #3b82f6; /* Added for info sections */
  --color-info-light: #dbeafe; /* Added for info backgrounds */
  --color-danger: #ef4444;
  --color-danger-light: #fef2f2;
  --color-success-bg: #f0fdf4;
  --color-warning-bg: #fef3c7;
  --color-warning-dark: #92400e;
  --color-gold: #FFD700;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  
  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 999px;
  
  /* Border radius aliases for compatibility */
  --border-radius: 0.375rem; /* Alias for --radius-md */
  --border-radius-sm: 0.25rem; /* Alias for --radius-sm */
  --border-radius-md: 0.375rem; /* Alias for --radius-md */
  --border-radius-lg: 0.5rem; /* Alias for --radius-lg */
  --border-radius-xl: 0.75rem; /* Alias for --radius-xl */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Container */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);

  /* Control heights — one baseline scale so buttons/inputs align in a row.
     Medium is the default and already meets the 44px touch-target minimum. */
  --control-height-sm: 40px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  /* Minimum interactive target on touch devices (WCAG 2.5.5 / Apple HIG). */
  --touch-target-min: 44px;
  /* WCAG 2.2 SC 2.5.8 (AA) minimum pointer target for dense text links. */
  --target-size-min: 24px;

  /* CTA banner gradient — dark enough for white text to clear WCAG AA. */
  --gradient-cta: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  
  /* Component-specific colors */
  --company-card-border: #e5e7eb;
  --company-card-shadow: rgba(0, 0, 0, 0.1);

  /* Service badge colors (green theme) */
  --color-badge-success-bg-start: #e8f5e9;
  --color-badge-success-bg-end: #f1f8e9;
  --color-badge-success-text: #2e7d32;
  --color-badge-success-border: #c8e6c9;
}

/* base/reset.css */
/* Reset styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  box-sizing: border-box;
  font-size: 16px;
  scroll-behavior: smooth;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
} 
/* base/typography.css */
/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Text utilities - BEM style */
.text--center { text-align: center; }
.text--left { text-align: left; }
.text--right { text-align: right; }

.text--bold { font-weight: 700; }
.text--semibold { font-weight: 600; }
.text--medium { font-weight: 500; }

.text--sm { font-size: var(--font-size-sm); }
.text--lg { font-size: var(--font-size-lg); }
.text--xl { font-size: var(--font-size-xl); }

.text--primary { color: var(--color-primary); }
.text--secondary { color: var(--color-secondary); }
.text--muted { color: var(--color-text-light); }

/* Legacy utility classes for backwards compatibility */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-light); } 
/* base/utilities.css */
/* Utility classes */

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Background utilities - BEM style */
.bg--light { background-color: var(--color-background-light); }
.bg--white { background-color: var(--color-background); }

/* Border utilities - BEM style */
.border { border: 1px solid var(--color-border); }
.border--light { border: 1px solid var(--color-border-light); }

/* Border radius utilities - BEM style */
.rounded { border-radius: var(--radius-md); }
.rounded--lg { border-radius: var(--radius-lg); }

/* Shadow utilities - BEM style */
.shadow { box-shadow: var(--shadow-md); }
.shadow--lg { box-shadow: var(--shadow-lg); }

/* Margin utilities - BEM style */
.mb-0 { margin-bottom: 0; }
.mb--sm { margin-bottom: var(--spacing-sm); }
.mb--md { margin-bottom: var(--spacing-md); }
.mb--lg { margin-bottom: var(--spacing-lg); }
.mb--xl { margin-bottom: var(--spacing-xl); }

.mt--sm { margin-top: var(--spacing-sm); }
.mt--md { margin-top: var(--spacing-md); }
.mt--lg { margin-top: var(--spacing-lg); }

/* Padding utilities - BEM style */
.p--sm { padding: var(--spacing-sm); }
.p--md { padding: var(--spacing-md); }
.p--lg { padding: var(--spacing-lg); }

.px--md { 
  padding-left: var(--spacing-md); 
  padding-right: var(--spacing-md); 
}

.py--md { 
  padding-top: var(--spacing-md); 
  padding-bottom: var(--spacing-md); 
}

/* Grid utilities - BEM style */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Flexbox utilities - BEM style */
.flex { display: flex; }
.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }

.items--center { align-items: center; }
.items--start { align-items: flex-start; }

.justify--center { justify-content: center; }
.justify--between { justify-content: space-between; }
.justify--start { justify-content: flex-start; }

.gap--sm { gap: var(--spacing-sm); }
.gap--md { gap: var(--spacing-md); }
.gap--lg { gap: var(--spacing-lg); }

/* Legacy utility classes for backwards compatibility */
.bg-light { background-color: var(--color-background-light); }
.bg-white { background-color: var(--color-background); }

.border-light { border: 1px solid var(--color-border-light); }

.rounded-lg { border-radius: var(--radius-lg); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); } 
/* layout/header.css */
/* Header Layout - BEM naming */

.header {
  background-color: #417C94FF;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;  /* Non-sticky by default (desktop) */
  z-index: 9999;      /* High z-index to stay above map and all other elements */
}

/* Mobile: Make header sticky */
@media (max-width: 768px) {
  .header {
    position: sticky;
    top: 0;
  }
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  gap: var(--spacing-lg);
}

/* Logo component */
.logo {
  /* must shrink: a fixed 350px logo + flex-shrink:0 overflows the header
     on 360px phones (~328px available inside the container) */
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo:hover {
  text-decoration: none;
}

.logo-image {
  width: 350px;
  height: auto;
  object-fit: contain;
  max-width: 100%;
}

/* Header search component */
.header__search {
  flex-shrink: 0;
}

.search-form {
  display: flex;
  gap: var(--spacing-sm);
}

.search-form--header {
  flex-direction: column;
  gap: var(--spacing-sm);
}

.search__input {
  min-width: 200px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.search__button {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search__button:hover {
  background-color: var(--color-primary-dark);
}

/* Legacy classes for backwards compatibility */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  gap: var(--spacing-lg);
}

.header-search {
  flex-shrink: 0;
}

.search-input {
  min-width: 200px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.search-button {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-button:hover {
  background-color: var(--color-primary-dark);
} 
/* layout/navigation.css */
/* Navigation Layout - BEM naming */

.nav {
  position: relative;
}

.nav__toggle {
  display: none;
}

.nav__toggle-label {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 24px;
  height: 24px;
  justify-content: space-around;
  position: relative;
  flex-shrink: 0;
}

.nav__toggle-label span,
.nav__toggle-label span::before,
.nav__toggle-label span::after {
  display: block;
  height: 2px;
  width: 100%;
  background-color: white;
  transition: all 0.3s ease;
  position: relative;
}

.nav__toggle-label span::before,
.nav__toggle-label span::after {
  content: '';
  position: absolute;
}

.nav__toggle-label span::before {
  top: -8px;
}

.nav__toggle-label span::after {
  top: 8px;
}

/* Hamburger animation */
.nav__toggle:checked ~ .nav__toggle-label span {
  background-color: transparent;
}

.nav__toggle:checked ~ .nav__toggle-label span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav__toggle:checked ~ .nav__toggle-label span::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-lg);
}

.nav__link {
  color: white;
  font-weight: 500;
  padding: var(--spacing-sm) 0;
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--color-primary-light);
  text-decoration: none;
}

/* Legacy classes for backwards compatibility */
.nav-main {
  position: relative;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 24px;
  height: 24px;
  justify-content: space-around;
  position: relative;
  flex-shrink: 0;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  height: 2px;
  width: 100%;
  background-color: white;
  transition: all 0.3s ease;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  top: -8px;
}

.nav-toggle-label span::after {
  top: 8px;
}

/* Hamburger animation for legacy classes */
.nav-toggle:checked ~ .nav-toggle-label span {
  background-color: transparent;
}

.nav-toggle:checked ~ .nav-toggle-label span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle:checked ~ .nav-toggle-label span::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-lg);
}

.nav-menu li {
  margin-left: var(--spacing-sm);
}

.nav-menu a {
  color: white;
  font-weight: 500;
  padding: var(--spacing-sm) 0;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  text-decoration: underline;
}

/* Desktop Dropdown Styles */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  background: none;
  border: none;
  color: white;
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  padding: var(--spacing-sm) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}

.nav-dropdown__trigger:hover {
  text-decoration: underline;
}

.nav-dropdown__arrow {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown__arrow,
.nav-dropdown:focus-within .nav-dropdown__arrow {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--spacing-sm) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__menu li {
  margin: 0;
}

.nav-dropdown__menu a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  font-weight: 400;
  transition: background-color 0.2s ease;
}

.nav-dropdown__menu a:hover {
  background-color: var(--color-background-light);
  text-decoration: none;
}

.nav-dropdown__divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--spacing-xs) 0;
}

/* Right-aligned dropdown for items near the right edge */
.nav-dropdown:last-child .nav-dropdown__menu {
  left: auto;
  right: 0;
}

/* Mobile navigation styles */
@media (max-width: 768px) {
  .nav-toggle-label {
    display: flex;
  }

  /* Anchor the menu panel to the header (full width), not the nav element */
  .nav-main {
    position: static;
  }

  /* Full-width slide-down panel — single column, large touch targets */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
    /* Padding must collapse with the panel — max-height: 0 alone leaves a
       visible padding strip bleeding over the page content. */
    padding: 0 var(--spacing-md);
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease, visibility 0.25s;
  }

  .nav-toggle:checked ~ .nav-menu {
    max-height: 100vh;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-lg);
    overflow-y: auto;
    visibility: visible;
  }

  .nav-menu li {
    display: block;
    width: 100%;
    margin: 0;
  }

  .nav-menu > li {
    border-bottom: 1px solid var(--color-border-light);
  }

  .nav-menu > li:last-child {
    border-bottom: none;
  }

  .nav-menu a {
    color: var(--color-text) !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.875rem var(--spacing-sm);
    font-size: 1.0625rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  .nav-menu a:hover,
  .nav-menu a:active {
    background-color: var(--color-background-light);
    color: var(--color-primary) !important;
    text-decoration: none;
  }

  /* Dropdown sections render as headed groups, stacked vertically */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown__trigger {
    color: var(--color-text-light);
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem var(--spacing-sm) var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: default;
  }

  .nav-dropdown__arrow {
    display: none;
  }

  .nav-dropdown__menu {
    position: static;
    display: block;
    opacity: 1;
    /* inherit, NOT visible: an explicit visible would override the closed
       panel's visibility:hidden and leave menus painted/tabbable off-canvas */
    visibility: inherit;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
    margin: 0 0 var(--spacing-sm);
    padding: 0;
    min-width: 0;
    width: 100%;
  }

  .nav-dropdown__menu li {
    display: block;
    width: 100%;
  }

  .nav-dropdown__menu a {
    padding: 0.75rem var(--spacing-md);
    font-size: 1rem;
  }

  .nav-dropdown__divider {
    border-top: 1px solid var(--color-border-light);
    margin: var(--spacing-xs) var(--spacing-sm);
  }
}

/* layout/main.css */
/* Main Content Layout - BEM naming */

.main {
  min-height: calc(100vh - 340px);
}

.main__content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Page header component */
.page-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-header__title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.page-header__lead {
  font-size: 1.2rem;
  color: var(--color-text-light);
}

/* Links inside lead text need a non-colour cue (WCAG link-in-text-block). */
.page-header__lead-link {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .page-header {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
  }
  
  .page-header__title {
    font-size: 2rem;
    margin-bottom: 0.25rem;
  }
  
  .page-header__lead {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 640px) {
  .page-header {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
  }
  
  .page-header__title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
  }
  
  .page-header__lead {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }
}

/* layout/footer.css */
/* Footer Layout - BEM naming */

.footer {
  background-color: var(--color-background-dark);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-2xl) 0 var(--spacing-md);
}

.footer__content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}



.footer__section-title {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

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

.footer__list-item {
  margin-bottom: var(--spacing-sm);
}

.footer__link {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.footer__link:hover {
  color: var(--color-primary);
}

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  text-align: center;
}

.footer__bottom-text {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Legacy classes for backwards compatibility */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-section h3 {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: var(--spacing-sm);
}

.footer-section ul a {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.footer-section ul a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  text-align: center;
}

.footer-bottom p {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin: 0;
}

.footer-bottom .footer-bottom__legal {
  margin-top: var(--spacing-sm);
}

.footer-bottom__link {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.footer-bottom__link:hover {
  color: var(--color-primary);
}

.footer-bottom__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Mobile: footer links must be real touch targets (>=44px) with breathing
   room between them — stacked text links were ~20px tall, sub-target. */
@media (max-width: 768px) {
  .footer__link,
  .footer-section ul a,
  .footer-bottom__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min);
  }

  .footer__list-item,
  .footer-section ul li {
    margin-bottom: var(--spacing-xs);
  }
}

/* components/buttons.css */
/* Button Component - BEM naming.
   One height scale (min-height tokens) so buttons in a row share a baseline,
   and every variant meets the 44px touch target on mobile. Size modifiers
   change height + horizontal padding only; never the vertical rhythm. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-md);
  padding: 0 var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

/* Button variants */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-white);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-white);
}

.btn--secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-white);
  opacity: 0.9;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.btn--warning {
  background-color: var(--color-warning);
  color: var(--color-text-white);
}

.btn--warning:hover {
  background-color: #d97706;
}

/* Button sizes — height tokens, horizontal padding scales with them */
.btn--small {
  min-height: var(--control-height-sm);
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

.btn--large {
  min-height: var(--control-height-lg);
  padding: 0 var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.btn--full {
  width: 100%;
  text-align: center;
}

/* Touch devices: even the small variant must clear the 44px target. */
@media (max-width: 768px) {
  .btn--small {
    min-height: var(--touch-target-min);
  }
}

/* Legacy classes for backwards compatibility — kept in lockstep with the
   BEM variants above so old markup renders identically. */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-white);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-white);
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-white);
  opacity: 0.9;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-text-white);
}

.btn-warning:hover {
  background-color: #d97706;
}

.btn-small {
  min-height: var(--control-height-sm);
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

.btn-large {
  min-height: var(--control-height-lg);
  padding: 0 var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.btn-full {
  width: 100%;
  text-align: center;
}

.btn-block {
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .btn-small {
    min-height: var(--touch-target-min);
  }
}

/* components/forms.css */
/* Form Components - BEM naming */

.form {
  
}

.form__group {
  margin-bottom: 1.5rem;
}

.form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

/* Search form variants */
.search-form {
  display: flex;
  gap: var(--spacing-sm);
}

.search-form--column {
  flex-direction: column;
  gap: var(--spacing-md);
}

.search-bar {
  display: flex;
  gap: var(--spacing-md);
}

.search-bar--column {
  flex-direction: column;
}

/* Filter components */
.search-filter-section {
  background: var(--color-background-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

/* Mobile optimization for search filter section */
@media (max-width: 768px) {
  .search-filter-section {
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .search-filter-section {
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
  }
}

.search-error-message {
  color: #b91c1c;
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.search-info-notice {
  color: #0d6efd;
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.filter-options {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.filter-options--column {
  flex-direction: column;
  gap: var(--spacing-md);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-select {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Legacy classes for backwards compatibility */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
  height: 44px;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

/* Inquiry Form Specific Styles */
.inquiry-form {
  background: var(--color-background-light);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-top: 1rem;
}

.inquiry-form-container {
  max-width: 100%;
}

/* Calculation Note in Inquiry Form */
.inquiry-form__calculation-note {
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  background-color: #e8f5e9;
  border-left: 3px solid var(--color-success, #22c55e);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: #2e7d32;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* Assistant-selected calculation attached to an editable enquiry draft. */
.inquiry-attachment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background-light);
}

.inquiry-attachment[hidden] {
  display: none;
}

.inquiry-attachment__text {
  flex: 1 1 16rem;
  margin: 0;
}

/* Review actions are withdrawn once an enquiry is saved. */
.form-actions[hidden],
.modal-body .form-actions[hidden] {
  display: none;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

/* Responsive design for inquiry form */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .inquiry-form {
    padding: 1.5rem;
  }
  
  .form-actions {
    justify-content: stretch;
  }
  
  .form-actions .btn {
    width: 100%;
  }
}

/* Form Validation States */
.form-group.field_with_errors {
  position: relative;
}

.form-group.field_with_errors .form-label {
  color: var(--color-danger);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger);
  background-color: var(--color-danger-light);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.error-message {
  display: block;
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* Base errors (general form errors) */
.form-group:first-child .error-message:only-child {
  background-color: var(--color-danger-light);
  border: 1px solid var(--color-danger);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

/* Success State for Inquiry Form */
.inquiry-success {
  text-align: center;
  padding: 3rem 2rem;
}

.inquiry-success .success-icon {
  color: var(--color-success);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inquiry-success .success-icon svg {
  display: block;
}

.inquiry-success h3 {
  color: var(--color-text-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.inquiry-success p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.inquiry-success .btn {
  margin-top: 1rem;
}

/* Disable submit button while submitting */
.btn:disabled,
.btn[disabled],
.btn[data-disable-with]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ensure buttons with data-disable-with are not styled as disabled when they're not */
.btn[data-disable-with]:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

/* components/cards.css */
/* Card Components - BEM naming */

.card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card__header {
  display: flex;
  gap: var(--spacing-md);
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.card__body {
  padding: 1.5rem;
  flex: 1;
}

.card__footer {
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Company Card - specific variant */
.company-card {
  background: white;
  border: 1px solid var(--company-card-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--company-card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.company-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px var(--company-card-shadow);
}

.company-card__header {
  display: flex;
  gap: var(--spacing-md);
  padding: 1.5rem;
  border-bottom: 1px solid var(--company-card-border);
}

.company-card__body {
  padding: 1.5rem;
  flex: 1;
}

.company-card__footer {
  padding: 1.5rem;
  border-top: 1px solid var(--company-card-border);
}

/* Company Logo Component */
.company-logo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Light blue background for PNG logos to handle transparency */
.company-logo--png {
  background: #f0f8ff; /* Alice blue - very light blue */
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}

.company-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.company-logo--placeholder {
  background: var(--color-primary);
  color: white;
}

.company-logo--large {
  width: 120px;
  height: 120px;
  border-radius: 12px;
}

.logo-initial {
  font-size: 2rem;
  font-weight: bold;
}

.logo-initial--large {
  font-size: 3rem;
  font-weight: bold;
}

/* Company Info Component */
.company-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.company-name {
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}

.company-name a {
  color: var(--color-text);
  text-decoration: none;
}

.company-name a:hover {
  color: var(--color-primary);
}

.company-description {
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  line-height: 1.6;
}

.company-description--placeholder {
  color: var(--color-text-light);
  font-style: italic;
}

.company-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.company-location,
.company-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.company-location svg,
.company-phone svg {
  color: var(--color-primary);
}

/* Company rating section */
.company-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.rating-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  white-space: nowrap;
}

/* Stat Card Component */
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card__icon {
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
}

.stat-card__content {
  flex: 1;
}

.stat-card__number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

/* Legacy classes for backwards compatibility */
.company-card-header {
  display: flex;
  gap: var(--spacing-md);
  padding: 1.5rem;
  border-bottom: 1px solid var(--company-card-border);
}

.company-card-body {
  padding: 1.5rem;
  flex: 1;
}

.company-card-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--company-card-border);
}

.company-logo.placeholder {
  background: var(--color-primary);
  color: white;
}

.company-description.placeholder {
  color: var(--color-text-light);
  font-style: italic;
}

/* Responsive styles for company cards */
@media (max-width: 768px) {
  .company-card {
    max-width: 100%;
    overflow: hidden;
  }

  .company-card__header,
  .company-card-header {
    padding: 1rem;
    flex-wrap: wrap;
  }

  .company-card__body,
  .company-card-body {
    padding: 1rem;
  }

  .company-card__footer,
  .company-card-footer {
    padding: 1rem;
  }

  .company-logo,
  .company-card__logo {
    width: 60px;
    height: 60px;
  }

  .company-name {
    font-size: 1.125rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .company-name a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .company-rating {
    margin-top: 0.375rem;
  }

  .rating-text {
    font-size: 0.75rem;
  }

  .company-description {
    font-size: 0.875rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .company-location,
  .company-phone {
    font-size: 0.813rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .company-card {
    box-shadow: 0 1px 2px var(--company-card-shadow);
  }

  .company-card__header,
  .company-card-header {
    padding: 0.75rem;
    gap: var(--spacing-sm);
  }

  .company-card__body,
  .company-card-body {
    padding: 0.75rem;
  }

  .company-card__footer,
  .company-card-footer {
    padding: 0.75rem;
  }

  .company-logo,
  .company-card__logo {
    width: 50px;
    height: 50px;
  }

  .company-name {
    font-size: 1rem;
  }

  .company-details {
    gap: 0.375rem;
  }

  /* Ensure button doesn't overflow */
  .company-card__footer .btn,
  .company-card-footer .btn {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
}

/* components/badges.css */
/* Badge Component - BEM naming */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge--success {
  background-color: #d1fae5;
  color: #065f46;
}

.badge--pending {
  background-color: #fef3c7;
  color: #92400e;
}

.badge--completed {
  background-color: #d1fae5;
  color: #065f46;
}

.badge--failed {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge--running {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge--warning {
  background-color: #fef3c7;
  color: #92400e;
}

.badge--error {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge--info {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge--neutral {
  background-color: var(--color-background-dark);
  color: var(--color-text);
}

/* Sentiment badges */
.sentiment-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sentiment-positive {
  background-color: #d4edda;
  color: #155724;
}

.sentiment-neutral {
  background-color: #fff3cd;
  color: #856404;
}

.sentiment-negative {
  background-color: #f8d7da;
  color: #721c24;
}

/* Area tags */
.area-tag {
  background-color: var(--color-background-dark);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* Legacy classes for backwards compatibility */
.badge-success {
  background-color: #d1fae5;
  color: #065f46;
}

.badge-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.badge-completed {
  background-color: #d1fae5;
  color: #065f46;
}

.badge-failed {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-running {
  background-color: #dbeafe;
  color: #1e40af;
} 
/* components/alerts.css */
/* Alert Component - BEM naming */

.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  border: 1px solid transparent;
}

.alert--success {
  background-color: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.alert--error {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.alert--warning {
  background-color: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.alert--info {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.alert__title {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.alert__message {
  margin: 0;
}

.alert__icon {
  margin-right: var(--spacing-sm);
}

/* Alert with icon */
.alert--with-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

/* Legacy classes for backwards compatibility */
.alert-success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.alert-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* Flash Messages */
.flash-message {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.flash-notice {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.flash-alert {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
} 
/* components/stars.css */
/* Star Rating Component - BEM naming */

.stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1;
}

.stars--small {
  font-size: 12px;
}

.stars--medium {
  font-size: 16px;
}

.stars--large {
  font-size: 24px;
}

.star {
  line-height: 1;
  color: #ddd;
  transition: color 0.2s ease;
}

.star--filled {
  color: #ffc107;
}

.star--half {
  background: linear-gradient(90deg, #ffc107 50%, #ddd 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Star rating with value display */
.star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}

.rating-text {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.review-count {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: 1;
}

/* Company rating overview - all elements aligned on one line */
.company-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.company-rating-overview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-rating-overview .star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-rating-overview .review-count {
  line-height: 1;
}

/* Legacy classes for backwards compatibility */
.star.filled {
  color: #ffc107;
} 
/* components/progress.css */
/* Progress Component - BEM naming */

.progress {
  width: 100%;
  height: 8px;
  background-color: var(--color-background-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background-color: #ffc107;
  transition: width 0.3s ease;
}

.progress__fill--primary {
  background-color: var(--color-primary);
}

.progress__fill--secondary {
  background-color: var(--color-secondary);
}

.progress__fill--success {
  background-color: var(--color-success);
}

/* Score bars for metrics */
.score-bar {
  flex: 1;
  height: 6px;
  background-color: var(--color-background-dark);
  border-radius: 3px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  background-color: #27ae60;
  transition: width 0.3s ease;
}

/* Rating distribution bars */
.progress-bar {
  flex: 1;
  height: 8px;
  background-color: var(--color-background-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #ffc107;
  transition: width 0.3s ease;
}

/* Progress with label */
.progress-with-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.progress-label {
  width: 30px;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.progress-count {
  width: 30px;
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Dynamic width classes - for inline styles replacement */
.width-0 { width: 0%; }
.width-5 { width: 5%; }
.width-10 { width: 10%; }
.width-15 { width: 15%; }
.width-20 { width: 20%; }
.width-25 { width: 25%; }
.width-30 { width: 30%; }
.width-35 { width: 35%; }
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-50 { width: 50%; }
.width-55 { width: 55%; }
.width-60 { width: 60%; }
.width-65 { width: 65%; }
.width-70 { width: 70%; }
.width-75 { width: 75%; }
.width-80 { width: 80%; }
.width-85 { width: 85%; }
.width-90 { width: 90%; }
.width-95 { width: 95%; }
.width-100 { width: 100%; } 
/* components/icons.css */
/* Icon Component - BEM naming */

.icon {
  display: inline-block;
  vertical-align: middle;
}

.icon--location {
  color: var(--color-primary);
}

.icon--phone {
  color: var(--color-primary);
}

/* Inline Font Awesome glyph (FontAwesomeIconHelper#fa_icon), boxed like the
   icon font it replaced: 1em tall, viewBox width, Font Awesome's baseline. */
.fa-icon {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

/* SVG sprite utility */
.svg-sprite {
  display: none;
}

/* Hidden utility class */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
} 
/* components/pagination.css */
/* Pagination Component - BEM naming */

.pagination-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-border);
}

/* Main pagination navigation */
.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__item {
  display: flex;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--spacing-sm) var(--spacing-sm);
  color: var(--color-text);
  text-decoration: none;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pagination__link:hover {
  color: var(--color-primary);
  background-color: var(--color-background-light);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.pagination__link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Active state */
.pagination__item--active .pagination__link {
  color: var(--color-text-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  cursor: default;
}

.pagination__item--active .pagination__link:hover {
  color: var(--color-text-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: none;
}

/* Disabled state */
.pagination__item--disabled .pagination__link {
  color: var(--color-text-light);
  background-color: var(--color-background-light);
  border-color: var(--color-border-light);
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination__item--disabled .pagination__link:hover {
  color: var(--color-text-light);
  background-color: var(--color-background-light);
  border-color: var(--color-border-light);
  transform: none;
  box-shadow: none;
}

/* Ellipsis styling */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* Previous/Next button styling */
.pagination__prev,
.pagination__next {
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 600;
}

/* Pagination info section */
.pagination-info {
  text-align: center;
}

.pagination-summary {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin: 0;
  font-style: normal;
}

/* Bootstrap compatibility classes */
.pagy-bootstrap-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagy-bootstrap-nav .pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-item {
  display: flex;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--spacing-sm) var(--spacing-sm);
  color: var(--color-text);
  text-decoration: none;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.page-link:hover {
  color: var(--color-primary);
  background-color: var(--color-background-light);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.page-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Active page */
.page-item.active .page-link {
  color: var(--color-text-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  cursor: default;
}

.page-item.active .page-link:hover {
  color: var(--color-text-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: none;
}

/* Disabled page */
.page-item.disabled .page-link {
  color: var(--color-text-secondary);
  background-color: var(--color-background-light);
  border-color: var(--color-border-light);
  cursor: not-allowed;
}

.page-item.disabled .page-link:hover {
  color: var(--color-text-secondary);
  background-color: var(--color-background-light);
  border-color: var(--color-border-light);
  transform: none;
  box-shadow: none;
}

/* Previous/Next specific styling */
.page-item.prev .page-link,
.page-item.next .page-link {
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 600;
}

/* Responsive design */
@media (max-width: 768px) {
  .pagination-wrapper {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
  }
  
  .pagination {
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pagination__link,
  .page-link {
    min-width: 2rem;
    height: 2rem;
    padding: var(--spacing-xs) var(--spacing-xs);
    font-size: var(--font-size-xs);
  }
  
  .pagination__prev,
  .pagination__next,
  .page-item.prev .page-link,
  .page-item.next .page-link {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .pagination-summary {
    font-size: var(--font-size-xs);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .pagination {
    gap: 1px;
  }
  
  .pagination__link,
  .page-link {
    min-width: 1.75rem;
    height: 1.75rem;
  }
  
  /* Hide middle page numbers on very small screens */
  .pagination .page-item:not(.active):not(.prev):not(.next):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
    display: none;
  }
}

/* Touch devices: pagination links must clear the 44px target (desktop
   keeps the tighter 2.5rem/40px height). */
@media (max-width: 768px) {
  .pagination__link,
  .pagination__page,
  .pagination a {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
}

/* components/accreditations.css */
/* Accreditations Section */
.accreditations-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e5e5;
}

.accreditations-section h2,
.accreditations-section h3 {
  font-size: 20px;
  color: #1a1a1a;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}

/* Accreditations Grid */
.accreditations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 20px;
}

/* Badge Styles */
.accreditation-badge {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.accreditation-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #d0d0d0;
}

.badge-icon {
  width: 200px;
  height: 120px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.badge-logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Ensure proper display of PNG logos */
.badge-icon img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100px;
}

.certification-mark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.badge-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0;
}

/* Individual Badge Hover Effects */
.mcs-badge:hover {
  border-color: #006BA6;
  background-color: #f8fafb;
}

.recc-badge:hover {
  border-color: #00A651;
  background-color: #f8fafb;
}

.trustmark-badge:hover {
  border-color: #E30613;
  background-color: #f8fafb;
}

.other-badge:hover {
  border-color: #666;
  background-color: #f8fafb;
}

/* Accreditations Note */
.accreditations-note {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}

.accreditations-note p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .accreditations-section {
    padding: 20px 16px;
  }
  
  .accreditations-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }
  
  .accreditation-badge {
    padding: 16px 12px;
  }
  
  .badge-icon {
    width: 150px;
    height: 75px;
    margin-bottom: 8px;
  }
  
  .badge-icon img {
    max-height: 60px;
  }
  
  .certification-mark {
    font-size: 18px;
  }
  
  .badge-name {
    font-size: 12px;
  }
}

/* Quality Indicators */
.accreditation-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: rotate(45deg);
  transition: all 0.6s;
  opacity: 0;
}

.accreditation-badge:hover::before {
  top: -100%;
  right: -100%;
  opacity: 1;
}
/* components/calculator-wizard.css */
/* Calculator Wizard - Shared BEM Structure */

.calculator-wizard {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Header */
.calculator-wizard__header {
  text-align: center;
  margin-bottom: 2rem;
}

.calculator-wizard__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.calculator-wizard__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

.calculator-wizard__header-actions {
  margin-top: 1rem;
}

/* Step Navigation */
.calculator-wizard__steps-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.calculator-wizard__step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.5rem;
  transition: opacity 0.2s;
}

.calculator-wizard__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.calculator-wizard__step-indicator--active .calculator-wizard__step-number {
  background-color: var(--color-primary);
  color: white;
}

.calculator-wizard__step-indicator--completed .calculator-wizard__step-number {
  background-color: var(--color-success);
  color: white;
}

/* Completed indicators render as buttons for backward navigation */
.calculator-wizard__step-indicator-form {
  display: contents;
}

button.calculator-wizard__step-indicator {
  cursor: pointer;
  font: inherit;
  min-height: var(--touch-target-min);
}

button.calculator-wizard__step-indicator:hover .calculator-wizard__step-number,
button.calculator-wizard__step-indicator:focus-visible .calculator-wizard__step-number {
  background-color: var(--color-primary);
}

.calculator-wizard__step-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.calculator-wizard__step-indicator--active .calculator-wizard__step-label {
  color: var(--color-primary);
}

/* Steps */
.calculator-wizard__step {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.calculator-wizard__step-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
}

/* Form Elements */
.calculator-wizard__form {
  width: 100%;
}

.calculator-wizard__form-group {
  margin-bottom: 1.5rem;
}

.calculator-wizard__form-group--hidden {
  display: none;
}

.calculator-wizard__form-group--error .calculator-wizard__input,
.calculator-wizard__form-group--error .calculator-wizard__select {
  border-color: var(--color-error);
}

.calculator-wizard__form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.calculator-wizard__label {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.calculator-wizard__input,
.calculator-wizard__select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.calculator-wizard__input:focus,
.calculator-wizard__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.calculator-wizard__hint {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.calculator-wizard__error {
  display: block;
  font-size: 0.875rem;
  color: var(--color-error);
  margin-top: 0.25rem;
}

/* Navigation */
.calculator-wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.calculator-wizard__back-form {
  display: inline-flex;
}

/* Results Section */
.calculator-wizard__results {
  margin-bottom: 2rem;
}

.calculator-wizard__result-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.calculator-wizard__result-actions .btn,
.calculator-wizard__result-actions form {
  min-width: 180px;
}

.calculator-wizard__result-actions form .btn {
  width: 100%;
}

/* Error Container */
.calculator-wizard__step--error {
  text-align: center;
}

.calculator-wizard__error-container {
  padding: 2rem;
}

.calculator-wizard__error-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: 1rem;
}

.calculator-wizard__error-message {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.calculator-wizard__error-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Results Step */
.calculator-wizard__step--results {
  text-align: left;
}

/* Result Cards */
.calculator-wizard__result-card {
  background: var(--color-surface, #f8fafc);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.calculator-wizard__result-card--highlight {
  background: linear-gradient(135deg, var(--color-primary-light, #dcfce7) 0%, var(--color-surface, #f8fafc) 100%);
  border: 2px solid var(--color-primary, #22c55e);
}

.calculator-wizard__result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calculator-wizard__result-value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.calculator-wizard__result-currency {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.calculator-wizard__big-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

.calculator-wizard__result-unit {
  font-size: 1rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.calculator-wizard__result-detail {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}

.calculator-wizard__result-detail--positive {
  color: var(--color-success, #16a34a);
  font-weight: 500;
}

.calculator-wizard__result-detail--negative {
  color: var(--color-warning, #ea580c);
  font-weight: 500;
}

/* Charts Section */
.calculator-wizard__charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.calculator-wizard__chart {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 250px;
}

/* Section Titles */
.calculator-wizard__section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

/* Grants Section */
.calculator-wizard__grants {
  margin: 2rem 0;
}

.calculator-wizard__grant-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--color-primary, #22c55e);
}

.calculator-wizard__grant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calculator-wizard__grant-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.calculator-wizard__grant-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary, #22c55e);
}

.calculator-wizard__grant-desc {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.calculator-wizard__grant-requirements {
  margin: 1rem 0;
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
}

.calculator-wizard__grant-requirements li {
  margin-bottom: 0.5rem;
}

.calculator-wizard__grant-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary, #22c55e);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.calculator-wizard__grant-link:hover {
  text-decoration: underline;
}

/* FAQs Section */
.calculator-wizard__faqs {
  margin: 2rem 0;
}

.calculator-wizard__faq {
  background: white;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.calculator-wizard__faq-summary {
  padding: 1rem 1.25rem;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calculator-wizard__faq-summary::-webkit-details-marker {
  display: none;
}

.calculator-wizard__faq-summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}

.calculator-wizard__faq[open] .calculator-wizard__faq-summary::after {
  content: "−";
}

.calculator-wizard__faq-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.calculator-wizard__faq-content p {
  margin-bottom: 0.75rem;
}

.calculator-wizard__faq-content ul {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}

.calculator-wizard__faq-content li {
  margin-bottom: 0.5rem;
}

/* CTA Section */
.calculator-wizard__cta {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--color-primary-light, #dcfce7) 0%, var(--color-surface, #f8fafc) 100%);
  border-radius: 12px;
  margin: 2rem 0;
}

.calculator-wizard__cta-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.calculator-wizard__cta-text {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

/* Radio Cards (Heat Pump Type Selection) */
.calculator-wizard__radio-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.calculator-wizard__radio-card {
  position: relative;
  display: block;
  background: white;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.calculator-wizard__radio-card:hover {
  border-color: var(--color-primary-light, #86efac);
}

.calculator-wizard__radio-card--selected {
  border-color: var(--color-primary, #22c55e);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.calculator-wizard__radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calculator-wizard__radio-card-content {
  text-align: center;
}

.calculator-wizard__radio-card-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.calculator-wizard__radio-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.calculator-wizard__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary, #22c55e);
  background: var(--color-primary-light, #dcfce7);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Checkbox Group */
.calculator-wizard__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calculator-wizard__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.calculator-wizard__checkbox input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary, #22c55e);
}

.calculator-wizard__checkbox-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-text-primary);
}

.calculator-wizard__checkbox-text .calculator-wizard__hint {
  margin-top: 0;
}

/* Step Description */
.calculator-wizard__step-description {
  color: var(--color-text-light);
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-base);
}

/* Responsive */
@media (max-width: 640px) {
  .calculator-wizard {
    padding: 1rem 0.75rem;
  }

  .calculator-wizard__title {
    font-size: 1.5rem;
  }

  .calculator-wizard__subtitle {
    font-size: 1rem;
  }

  .calculator-wizard__step {
    padding: 1.25rem 1rem;
  }

  .calculator-wizard__step-title {
    font-size: 1.25rem;
  }

  .calculator-wizard__form-row {
    grid-template-columns: 1fr;
  }

  /* Step indicators: smaller circles but KEEP the labels — numbers alone
     give no orientation */
  .calculator-wizard__steps-nav {
    padding: 0;
    gap: 0.25rem;
  }

  .calculator-wizard__step-indicator {
    padding: 0.25rem;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
  }

  .calculator-wizard__step-number {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9375rem;
  }

  .calculator-wizard__step-label {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* Comfortable thumb targets for every wizard button */
  .calculator-wizard .btn {
    min-height: 48px;
    font-size: 1.0625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .calculator-wizard__input,
  .calculator-wizard__select {
    min-height: 48px;
    font-size: 1rem;
  }

  /* Result cards: trim the desktop-sized padding so values get room */
  .calculator-wizard .result-card {
    padding: var(--spacing-lg) var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .calculator-wizard .result-item {
    padding: var(--spacing-md);
  }

  .calculator-wizard__nav {
    flex-direction: column-reverse;
  }

  .calculator-wizard__nav > *,
  .calculator-wizard__back-form {
    width: 100%;
  }

  .calculator-wizard__nav .btn {
    width: 100%;
  }

  .calculator-wizard__result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .calculator-wizard__result-actions .btn,
  .calculator-wizard__result-actions form {
    width: 100%;
    min-width: auto;
  }

  .calculator-wizard__result-actions .btn {
    justify-content: center;
  }

  .calculator-wizard__error-actions {
    flex-direction: column;
  }

  /* Charts responsive */
  .calculator-wizard__charts {
    grid-template-columns: 1fr;
  }

  .calculator-wizard__chart {
    min-height: 200px;
  }

  /* Radio cards responsive */
  .calculator-wizard__radio-cards {
    grid-template-columns: 1fr;
  }

  /* Result cards responsive */
  .calculator-wizard__big-number {
    font-size: 2rem;
  }

  /* CTA responsive */
  .calculator-wizard__cta {
    padding: 1.5rem;
  }

  .calculator-wizard__cta-title {
    font-size: 1.25rem;
  }

  /* Grant header responsive */
  .calculator-wizard__grant-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Methodology disclaimer under calculator results */
.results-methodology {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Share-calculation box (saved + shared pages) */
.share-calculation {
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.share-calculation__label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.share-calculation__row {
  display: flex;
  gap: var(--spacing-sm);
}

.share-calculation__input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  background: var(--color-surface);
}

.share-calculation__copy {
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Can't find your address" fallback disclosure (step 1 address-first flow) */
.calculator-wizard__fallback {
  margin-bottom: 1.5rem;
}

.calculator-wizard__fallback-summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  padding: 0.25rem 0;
}

.calculator-wizard__fallback-summary:hover {
  text-decoration: underline;
}

.calculator-wizard__fallback[open] .calculator-wizard__fallback-summary {
  margin-bottom: var(--spacing-sm);
}

/* components/results-gate.css */
/* Results gate — sign-in prompt shown to guests on the calculator results step */

.results-gate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
}

.results-gate__locked-title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xl);
  color: var(--color-text);
}

.results-gate__preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  max-width: 100%;
}

.results-gate__preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.results-gate__preview-label {
  min-width: 0;
}

.results-gate__preview-value {
  flex-shrink: 0;
}

.results-gate__preview-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.results-gate__preview-value {
  font-weight: 700;
  color: var(--color-text);
  filter: blur(6px);
  user-select: none;
}

.results-gate__list {
  margin: 0;
  padding-left: var(--spacing-lg);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.results-gate__list li {
  margin-bottom: var(--spacing-xs);
}

.results-gate__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.results-gate__cta-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.results-gate__cta-text {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.results-gate__cta--confirmation {
  border-color: var(--color-success);
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.results-gate__cta-note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.results-gate__google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.results-gate__google-btn:hover {
  background: var(--color-background-dark);
}

.results-gate__google-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.results-gate__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.results-gate__divider::before,
.results-gate__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.results-gate__email-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.results-gate__email-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
}

.results-gate__email-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.results-gate__email-submit {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.results-gate__email-submit:hover {
  opacity: 0.9;
}

/* Recommended installers shown with full results */

.results-installers__hint {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.results-installers__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.results-installers__card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-background-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.results-installers__logo {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}

.results-installers__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.results-installers__logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-text-white);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.results-installers__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.results-installers__name {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.results-installers__name:hover {
  color: var(--color-primary);
}

.results-installers__rating {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.results-installers__cta {
  flex-shrink: 0;
}

.results-installers__see-all {
  display: inline-block;
  margin-top: var(--spacing-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.results-installers__see-all:hover {
  text-decoration: underline;
}

.results-installers__fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* "Get quotes from the 5 top-rated installers" — one confirmation, many enquiries. */
.installer-quote-cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-info-light);
  border-radius: var(--radius-md);
}

.installer-quote-cta__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.installer-quote-cta__button {
  align-self: flex-start;
  min-height: var(--touch-target-min);
  white-space: normal;
  text-align: center;
}

@media (max-width: 768px) {
  .results-gate {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }

  .results-gate__google-btn,
  .results-gate__email-submit,
  .results-gate__email-input {
    min-height: 48px;
    font-size: 1rem;
  }

  .results-installers__card {
    flex-wrap: wrap;
  }

  .results-installers__cta {
    width: 100%;
  }

  .installer-quote-cta__button {
    align-self: stretch;
  }
}

/* components/battery-recommendation.css */
/* Battery size comparison shown with solar calculator results - BEM */

.battery-recommendation__note {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.battery-recommendation__row--recommended td {
  background: var(--color-success-bg);
  font-weight: 600;
}

.battery-recommendation__tag {
  display: inline-block;
  margin-left: var(--spacing-xs);
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.battery-recommendation__tag--chosen {
  background: var(--color-primary);
}

.battery-recommendation__verdict {
  margin: var(--spacing-lg) 0;
}

.battery-recommendation__verdict p {
  margin: 0 0 var(--spacing-sm);
}

.battery-recommendation__subtitle {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.battery-recommendation__models {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm);
  padding: 0;
  list-style: none;
}

.battery-recommendation__model {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-background-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.battery-recommendation__model-name {
  font-weight: 600;
  color: var(--color-text);
}

.battery-recommendation__model-specs {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.battery-recommendation__cta {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

/* Service label on the installer shortlist */
.results-installers__service {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.results-installers__service--battery {
  color: var(--color-success);
  font-weight: 600;
}

/* Five columns must fit the results card: wrap headings, tighten cells */
.table.battery-recommendation__table th {
  white-space: normal;
  letter-spacing: normal;
  text-transform: none;
  padding: var(--spacing-sm);
}

.table.battery-recommendation__table td {
  padding: var(--spacing-sm);
  vertical-align: top;
}

.table.battery-recommendation__table .battery-recommendation__tag {
  display: block;
  width: fit-content;
  margin: var(--spacing-xs) 0 0;
  padding: 0.125rem var(--spacing-sm);
  line-height: 1.4;
}

/* components/seo-content.css */
/* =================================================================
   SEO CONTENT COMPONENT - BEM
   Reusable supporting content section for calculator and tool pages
   ================================================================= */

.seo-content {
  margin-top: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.seo-content__container {
  max-width: 800px;
  margin: 0 auto;
}

.seo-content__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-800, #1f2937);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.seo-content__text {
  margin-bottom: 2rem;
}

.seo-content__text p {
  color: var(--color-gray-600, #4b5563);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.seo-content__text p:last-child {
  margin-bottom: 0;
}

/* Feature cards grid */
.seo-content__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.seo-content__card {
  background: var(--bg-card-alt, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 1.25rem;
}

.seo-content__card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-800, #1f2937);
  margin-bottom: 0.5rem;
}

.seo-content__card p {
  font-size: 0.9375rem;
  color: var(--color-gray-500, #6b7280);
  line-height: 1.6;
  margin: 0;
}

/* CTA links section */
.seo-content__cta-links {
  margin-bottom: 2.5rem;
  padding: 1.25rem;
  background: var(--bg-primary-light, #f0f9ff);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary, #0ea5e9);
}

.seo-content__cta-links p {
  color: var(--color-gray-700, #374151);
  line-height: 1.6;
  margin: 0;
}

.seo-content__cta-links a {
  color: var(--color-primary-dark, #0284c7);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seo-content__cta-links a:hover {
  color: var(--color-primary-darker, #0369a1);
}

/* FAQ within seo-content reuses the existing .faq BEM component from guides */
.seo-content .faq {
  margin-bottom: 0;
}

.seo-content .faq__question {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-gray-800, #1f2937);
  margin-bottom: 0.5rem;
}

.seo-content .faq__answer {
  font-size: 0.9375rem;
  color: var(--color-gray-500, #6b7280);
  line-height: 1.7;
}

/* Data table */
.seo-content__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}

.seo-content__table th,
.seo-content__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.seo-content__table th {
  background: var(--bg-card-alt, #f9fafb);
  font-weight: 600;
  color: var(--color-gray-700, #374151);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.seo-content__table td {
  color: var(--color-gray-600, #4b5563);
}

.seo-content__table tbody tr:hover {
  background: var(--bg-card-alt, #f9fafb);
}

/* Nearby locations grid */
.seo-content__nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.seo-content__nearby-link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--bg-card-alt, #f9fafb);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 6px;
  color: var(--color-primary-dark, #0284c7);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.seo-content__nearby-link:hover {
  background: var(--bg-primary-light, #f0f9ff);
  border-color: var(--color-primary, #0ea5e9);
}

/* Responsive */
@media (max-width: 768px) {
  .seo-content__grid {
    grid-template-columns: 1fr;
  }

  .seo-content__title {
    font-size: 1.25rem;
  }

  .seo-content__table {
    font-size: 0.8125rem;
  }

  .seo-content__table th,
  .seo-content__table td {
    padding: 0.5rem 0.625rem;
  }
}


/* The cost table is wider than a phone. A display:block table with
   width:100% just crushes its columns and never scrolls — so the table
   lives in a scroll WRAPPER, and on mobile keeps a min-width that forces
   it past the viewport, producing a real horizontal scroll with an edge
   fade (same pattern as the guide .table-wrapper). */
.seo-content__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .seo-content__table-wrapper {
    position: relative;
  }

  .seo-content__table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to left, rgb(15 23 42 / 0.12), transparent);
    pointer-events: none;
  }

  .seo-content__table {
    min-width: 34rem;
  }
}

/* Component showcase (non-production /__components) — give each section and
   its inline component variants breathing room so the visual baselines read
   cleanly and adjacent tap targets are separated. */
.showcase__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.showcase__label {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

/* components/tables.css */
/* Canonical data tables (.table, .table-wrapper). Extracted from the
   guide pages — used by guides, locations, and the calculators. */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--spacing-lg) 0 var(--spacing-xl) 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

@media (max-width: 768px) {
.table-wrapper {
    position: relative;
  }
.table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to left, rgb(15 23 42 / 0.14), transparent);
    pointer-events: none;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }
.table-wrapper::before {
    content: "Swipe to see more →";
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: right;
  }
.table {
    font-size: var(--font-size-sm);
  }
.table th,
  .table td {
    padding: var(--spacing-sm) var(--spacing-sm);
  }
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  font-size: 0.95rem;
}

.table--comparison thead {
  background: var(--color-secondary);
  color: white;
}

.table--cost thead {
  background: linear-gradient(135deg, #3b82f6, var(--color-primary));
  color: white;
}

.table th {
  padding: 1.25rem var(--spacing-md);
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.table tr {
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color var(--transition-fast);
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table tbody tr:nth-child(even) {
  background-color: var(--bg-card-alt);
}

.table td {
  padding: 1.25rem var(--spacing-md);
  color: var(--color-gray-600);
}

.table td:first-child {
  font-weight: 600;
  color: var(--color-gray-900);
}

.table--cost td strong {
  color: var(--color-primary-darker);
  font-size: 1.1rem;
}

@media (max-width: 768px) {
.table {
    font-size: 0.75rem;
  }
.table th,
  .table td {
    padding: 0.75rem var(--spacing-sm);
  }
.table th {
    font-size: 0.7rem;
  }
}

/* Quote checklists contain prose rather than short numeric values. Allow row
   headings to wrap so the answer column remains readable on narrow screens. */
.table--quote-comparison th {
  white-space: normal;
}

.table--quote-comparison th:first-child {
  width: 30%;
}

/* components/cta.css */
/* Canonical call-to-action banner (.cta). */

.cta {
  background: var(--gradient-cta);
  color: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-3xl) var(--spacing-2xl);
  text-align: center;
  margin-top: var(--spacing-3xl);
  /* children must shrink with the box — 64/48px padding on a 360px phone
     left grids ~200px and they blew 600px out of the container */
  min-width: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(3, 105, 161, 0.2);
}

.cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 50%;
  height: 200%;
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(45deg);
}

.cta h2 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-lg);
  font-weight: 700;
  color: white;
}

.cta > p {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-2xl);
  opacity: 0.95;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.cta .final-recommendations {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  backdrop-filter: blur(10px);
  margin: var(--spacing-xl) auto;
  max-width: 900px;
}

.cta .final-recommendations__intro {
  color: white;
  font-size: 1.375rem;
  font-weight: 600;
  opacity: 1;
}

.cta .final-recommendations__item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: none;
}

.cta .final-recommendations__item:last-child {
  margin-bottom: 0;
}

.cta .final-recommendations__icon {
  background: white;
  color: var(--color-secondary);
}

.cta .final-recommendations__content {
  color: white;
}

.cta .final-recommendations__content strong {
  color: white;
  font-size: 1.125rem;
}

.cta .final-recommendations__content .icon-link {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta .final-recommendations__content .icon-link:hover {
  background: white;
}

.cta .final-recommendations__content .icon-link__svg {
  fill: white;
}

.cta .final-recommendations__content .icon-link:hover .icon-link__svg {
  fill: var(--color-primary-dark);
}

@media (max-width: 768px) {
.cta {
    padding: var(--spacing-lg) var(--spacing-md);
    margin-top: var(--spacing-lg);
  }
.cta h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
  }
.cta > p {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
  }
.cta .final-recommendations {
    padding: var(--spacing-md);
  }
.cta .final-recommendations__intro {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }
.cta .final-recommendations__item {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
.cta .final-recommendations__content {
    gap: var(--spacing-xs);
  }
.cta .final-recommendations__content strong {
    font-size: 0.9rem;
    line-height: 1.3;
  }
}

.cta .btn {
  font-size: 1.125rem;
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta .btn--primary {
  background: white;
  color: var(--color-primary-dark);
}

.cta .btn--primary:hover {
  background: #f3f4f6;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cta .btn--large {
  padding: 1rem 2.5rem;
}

@media (max-width: 768px) {
.cta .btn {
    font-size: 1rem;
    padding: var(--spacing-md) var(--spacing-xl);
  }
}

@media (max-width: 480px) {
.cta {
    padding: var(--spacing-md) var(--spacing-sm);
  }
.cta h2 {
    font-size: 1.25rem;
  }
.cta .final-recommendations {
    padding: var(--spacing-sm);
  }
.cta .final-recommendations__item {
    padding: var(--spacing-xs);
  }
}

@media (max-width: 768px) {
.cta {
    padding: var(--spacing-xl) var(--spacing-md);
  }
.cta * {
    min-width: 0;
    max-width: 100%;
  }
.cta ul,
  .cta ol {
    padding-left: var(--spacing-lg);
    text-align: left;
  }
}

/* CTA button group: consistent gap on both axes so buttons never touch
   when they wrap (mis-tap risk + the two fills visually fused). */
.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: center;
}

@media (max-width: 480px) {
  .cta__buttons {
    flex-direction: column;
  }

  .cta__buttons .btn {
    width: 100%;
  }
}

/* components/faq.css */
/* Canonical FAQ block (.faq). */

.faq {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.faq__item {
  background: var(--bg-card-alt);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  overflow: visible;
}

.faq__question {
  color: var(--color-gray-800);
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.faq__answer {
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}

.faq__item:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
.faq {
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
  }
.faq__item {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }
.faq__question {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    font-weight: 600;
  }
.faq__answer {
    font-size: 0.8rem;
    line-height: 1.4;
  }
.faq__answer p {
    margin-bottom: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
.faq__question {
    font-size: 0.85rem;
  }
.faq__answer {
    font-size: 0.75rem;
  }
}

/* components/toc.css */
/* Canonical table-of-contents block (.toc). */

.toc {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
}

.toc__title {
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-800);
  font-size: 1.5rem;
  font-weight: 600;
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-sm);
  counter-reset: toc-counter;
}

.toc__item {
  counter-increment: toc-counter;
}

.toc__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-gray-600);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  background: var(--bg-card-alt);
}

.toc__link::before {
  content: counter(toc-counter) ".";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.toc__link:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
  border-color: var(--color-gray-200);
  transform: translateX(4px);
}

@media (max-width: 768px) {
.toc {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
.toc__title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-sm);
  }
.toc__list {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
.toc__item {
    margin-bottom: var(--spacing-xs);
  }
.toc__link {
    font-size: 0.9rem;
    padding: var(--spacing-sm);
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
.toc {
    padding: var(--spacing-sm);
  }
.toc__title {
    font-size: 1rem;
  }
.toc__link {
    font-size: 0.85rem;
    padding: var(--spacing-xs);
  }
}

@media print {
.toc {
    page-break-after: always;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* components/breadcrumb.css */
/* Canonical breadcrumb (.breadcrumb). */

.breadcrumb {
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--color-gray-900);
}

.breadcrumb__link {
  color: var(--color-primary-darker);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb__link:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

.breadcrumb__separator {
  margin: 0 var(--spacing-sm);
  color: var(--color-gray-500);
}

.breadcrumb__current {
  color: var(--color-gray-900);
  font-weight: 600;
}

/* base/responsive.css */
/* Responsive Styles */

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  .main,
  .main__content {
    overflow-x: hidden;
  }
}

/* Mobile responsive - up to 768px */
@media (max-width: 768px) {
  /* Typography - Make headers smaller on mobile */
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.125rem;
  }

  h5 {
    font-size: 1rem;
  }

  h6 {
    font-size: 0.875rem;
  }

  /* Page headers */
  .page-header__title {
    font-size: 2rem;
  }

  .page-header__lead {
    font-size: 1rem;
  }

  /* Header */
  .header-content {
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .logo-image {
    width: 300px;
    max-width: 80%;
  }

  .header-search {
    order: 3;
    width: 100%;
    margin-top: var(--spacing-md);
  }

  .search-form {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .search-input {
    min-width: auto;
    width: 100%;
  }

  /* Grid utilities */
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  /* Container */
  .container {
    padding: 0 var(--spacing-sm);
  }

  /* Companies */
  .companies-grid {
    grid-template-columns: 1fr;
  }
  
  .search-bar {
    flex-direction: column;
  }
  
  .filter-options {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .company-header__main {
    flex-direction: column;
    text-align: center;
  }
  
  .company-map {
    height: 300px;
  }

  .company-info-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* Admin */
  .admin-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }
  
  .admin-nav__brand {
    margin-right: 0;
    text-align: center;
  }
  
  .admin-nav__menu {
    justify-content: center;
  }
  
  .admin-nav__user {
    justify-content: center;
  }
  
  .admin-main {
    padding: var(--spacing-md);
  }
  
  .admin-login__container {
    padding: var(--spacing-md);
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .btn {
    width: 100%;
  }
  
  .activity-section {
    grid-template-columns: 1fr;
  }

  /* Search bar - column layout on mobile */
  .search-bar--column {
    flex-direction: column;
  }

  .filter-options--column {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .company-header-main {
    flex-direction: column;
    text-align: center;
  }
}

/* Small mobile responsive - up to 640px */
@media (max-width: 640px) {
  /* Typography - Even smaller headers on small mobile */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.375rem;
  }

  .page-header__title {
    font-size: 1.75rem;
  }

  .page-header__lead {
    font-size: 0.9rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .header-content {
    padding: var(--spacing-sm) 0;
  }

  .logo-image {
    width: 260px;
    max-width: 75%;
  }
}

/* Tablet responsive - 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .companies-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
} 
/* components/company_logo_background.css */
/* Keep transparent logos legible without modifying the source asset. */
.company-logo-bg--light,
.company-logo-bg--dark {
  box-sizing: border-box;
  padding: var(--spacing-md);
}

.company-logo-bg--light {
  background-color: var(--color-background);
}

.company-logo-bg--dark {
  background-color: var(--color-logo-background-dark);
}

/* components/_quote.css */
/* Quote check and bids journey (BEM, design tokens only).
   Mobile first: every block stacks at 390px; wider layouts are additive. */

.quote-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl);
  /* Break only words that cannot fit a whole line (long URLs, model codes);
     ordinary words wrap at spaces and are never split. */
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--color-text);
}

.quote-page__header {
  margin-bottom: var(--spacing-lg);
}

.quote-page__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}

.quote-page__lede {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

.quote-page__section {
  margin-top: var(--spacing-xl);
}

.quote-page__section-title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xl);
}

.quote-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.quote-page__text {
  margin: 0 0 var(--spacing-md);
}

.quote-page__muted {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.quote-page__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

.quote-page :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.quote-page .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* Legacy compatibility for the company access confirmation and dashboard. */
.quote-page__form {
  margin: var(--spacing-lg) 0;
}

.quote-page__button {
  max-width: 100%;
  white-space: normal;
}

/* Step indicator */
.quote-steps {
  margin-bottom: var(--spacing-lg);
}

.quote-steps__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quote-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  border-top: 4px solid var(--color-border);
  font-size: var(--font-size-xs);
  text-align: center;
  color: var(--color-text-light);
}

.quote-steps__item--done {
  border-top-color: var(--color-secondary);
}

.quote-steps__item--current {
  border-top-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 700;
}

.quote-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  border-radius: var(--radius-full);
  background: var(--color-background-dark);
  color: var(--color-text);
  font-weight: 700;
}

.quote-steps__item--done .quote-steps__number {
  background: var(--color-secondary);
  color: var(--color-text-white);
}

.quote-steps__item--current .quote-steps__number {
  background: var(--color-primary);
  color: var(--color-text-white);
}

/* Start page */
.quote-hero {
  padding: var(--spacing-xl) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background-light);
}

.quote-hero__eyebrow {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.quote-hero__title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-3xl);
  line-height: 1.15;
}

.quote-hero__lede {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--font-size-lg);
}

.quote-hero__benefits {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  list-style: none;
}

.quote-hero__benefit {
  position: relative;
  padding-left: var(--spacing-xl);
}

.quote-hero__benefit::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-secondary);
}

.quote-hero__form {
  margin: 0;
}

.quote-hero__action {
  width: 100%;
}

.quote-hero__privacy {
  margin: var(--spacing-md) 0 0;
  font-weight: 600;
}

.quote-hero__note {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Cards */
.quote-card {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.quote-card--accent {
  border-left: 4px solid var(--color-primary);
}

.quote-card--success {
  border-left: 4px solid var(--color-secondary);
}

.quote-card__title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xl);
}

.quote-card__subtitle {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.quote-card__price {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

.quote-card__list {
  margin: 0;
  padding-left: var(--spacing-lg);
}

/* Summary rows */
.quote-summary {
  margin: 0;
}

.quote-summary__row {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.quote-summary__row:last-child {
  border-bottom: none;
}

.quote-summary__term {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
}

.quote-summary__value {
  margin: 0;
  white-space: pre-line;
}

.quote-summary__source {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

/* Disclosure panels */
.quote-panel {
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.quote-panel__summary {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.quote-panel__body {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

/* Form fields */
.quote-fieldset {
  min-width: 0;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  border: none;
}

.quote-fieldset__legend {
  margin-bottom: var(--spacing-sm);
  padding: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.quote-field {
  margin-bottom: var(--spacing-md);
}

.quote-field__label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
}

.quote-field__hint {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.quote-field__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--control-height-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-text-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-base);
  box-sizing: border-box;
}

.quote-field__input--file {
  padding: var(--spacing-md);
  border-style: dashed;
  background: var(--color-background-light);
  cursor: pointer;
}

.quote-field__grid {
  display: grid;
  gap: 0 var(--spacing-md);
}

.quote-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.quote-check__input {
  flex: none;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  margin: 0;
  accent-color: var(--color-primary);
}

.quote-check__label {
  font-weight: 500;
}

/* Uploaded file row */
.quote-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
}

/* Status chip */
.quote-status {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  background: var(--color-background-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.quote-status--replied {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.quote-status--waiting {
  background: var(--color-info-light);
  color: var(--color-primary-dark);
}

.quote-status--ended {
  background: var(--color-background-dark);
  color: var(--color-text-light);
}

/* Installer choice cards */
.quote-installers {
  display: grid;
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  border: none;
  min-width: 0;
}

.quote-installer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}

.quote-installer:hover {
  border-color: var(--color-primary-light);
}

.quote-installer:has(.quote-installer__checkbox:checked) {
  border-color: var(--color-primary);
  background: var(--color-info-light);
}

.quote-installer:has(.quote-installer__checkbox:focus-visible) {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.quote-installer__checkbox {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  margin: 0;
  accent-color: var(--color-primary);
}

.quote-installer__body {
  display: grid;
  grid-template-columns: var(--spacing-2xl) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-md);
}

.quote-installer__logo .company-logo {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
}

.quote-installer__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quote-installer__name {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.quote-installer__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.quote-installer__meta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.quote-counter {
  margin: 0 0 var(--spacing-md);
  font-weight: 700;
}

/* Reply comparison */
.quote-compare {
  display: grid;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.quote-offer {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.quote-offer--original {
  background: var(--color-background-light);
}

.quote-offer--best {
  border: 2px solid var(--color-secondary);
}

.quote-offer__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.quote-offer__name {
  margin: 0;
  font-size: var(--font-size-lg);
}

.quote-offer__price {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.quote-offer__difference {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-success);
}

.quote-offer__badge {
  display: inline-flex;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.quote-offer__note {
  margin: 0 0 var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-dark);
  font-size: var(--font-size-sm);
}

.quote-offer__actions {
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.quote-waiting {
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  list-style: none;
}

.quote-waiting__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

/* Manage this project */
.quote-manage {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.quote-manage__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.quote-manage__text {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.quote-manage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
}

.quote-manage__form {
  margin: 0;
}

.quote-manage__action {
  min-height: var(--touch-target-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.quote-manage__action--danger {
  color: var(--color-error);
}

@media (min-width: 769px) {
  .quote-page {
    padding-top: var(--spacing-xl);
  }

  .quote-hero {
    padding: var(--spacing-2xl);
  }

  .quote-hero__title {
    font-size: var(--font-size-4xl);
  }

  .quote-hero__action {
    width: auto;
  }

  .quote-steps__item {
    flex-direction: row;
    justify-content: center;
    font-size: var(--font-size-sm);
  }

  .quote-summary__row {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr);
    gap: var(--spacing-md);
  }

  .quote-field__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-installers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-compare {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  /* Comparison cards are narrow: keep each label above its value. */
  .quote-offer .quote-summary__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xs);
  }
}


/* pages/about.css */
/* About page */
.about-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-3xl);
}

.about-hero {
  max-width: 820px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.about-hero h1 {
  margin: 0 0 var(--spacing-md);
  color: var(--color-primary);
  font-size: 2.5rem;
}

.about-hero p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.65;
}

.about-founder {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.about-founder__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.about-founder__content h2,
.about-section h2,
.about-values > h2 {
  margin: 0 0 var(--spacing-md);
  color: var(--color-primary);
}

.about-founder__content p,
.about-section p,
.about-value p {
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.about-founder__content p {
  margin: 0 0 var(--spacing-md);
}

.about-founder__link {
  color: var(--color-primary);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.about-founder__link:focus-visible,
.about-page .cta a:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
}

.about-section {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.about-section p {
  margin: 0 0 var(--spacing-md);
}

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

.about-verification {
  border-left: 5px solid var(--color-secondary);
}

.about-values {
  margin-bottom: var(--spacing-xl);
}

.about-values > h2 {
  text-align: center;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.about-value {
  min-width: 0;
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.about-value h3 {
  margin: 0 0 var(--spacing-sm);
  color: var(--color-primary);
  font-size: var(--font-size-xl);
}

.about-value p {
  margin: 0;
}

.about-page .cta {
  margin-top: var(--spacing-2xl);
}

@media (max-width: 768px) {
  .about-page {
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-xl);
  }

  .about-hero {
    margin-bottom: var(--spacing-xl);
  }

  .about-hero h1 {
    font-size: 2rem;
  }

  .about-founder {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
  }

  .about-values__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .about-founder {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .about-founder__portrait {
    width: 144px;
    margin: 0 auto;
  }

  .about-section,
  .about-value {
    padding: var(--spacing-md);
  }
}

/* pages/admin.css */
/* Admin Page Styles - BEM naming */

/* Admin body layout */
.admin-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8fafc;
  color: #334155;
}

/* Login styles - layout handled by admin.css via .admin-wrapper--login */

/* Login container and header styles are in admin.css */

/* Navigation */
.admin-nav {
  background: #1e293b;
  color: white;
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.admin-nav__brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  margin-right: 2rem;
}

.admin-nav__menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  flex: 1;
}

.admin-nav__link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 0.5rem var(--spacing-md);
  border-radius: var(--radius-md);
  transition: all 0.2s;
  font-size: var(--font-size-sm);
}

.admin-nav__link:hover {
  color: white;
  background-color: #334155;
}

.admin-nav__link--logout {
  color: #fca5a5 !important;
}

.admin-nav__link--logout:hover {
  color: white !important;
  background-color: #dc2626 !important;
}

.admin-nav__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.admin-nav__user-email {
  font-size: var(--font-size-sm);
  color: #cbd5e1;
}

/* Main content override removed — margin handled in admin.css */

/* Dashboard */
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard__header {
  margin-bottom: 2rem;
}

.dashboard__title {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
}

.dashboard__subtitle {
  margin: 0;
  color: #64748b;
}

/* Statistics grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Quick actions */
.quick-actions {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}

.quick-actions__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Activity section */
.activity-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.activity-column {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.activity-column__title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--radius-lg);
  border-left: 3px solid #e2e8f0;
}

.activity-item__content {
  flex: 1;
}

.activity-item__title {
  font-weight: 600;
  color: #1e293b;
  font-size: var(--font-size-sm);
}

.activity-item__meta {
  font-size: var(--font-size-xs);
  color: #64748b;
  margin-top: 0.25rem;
}

.activity-item__status {
  margin-left: var(--spacing-md);
}

.no-data {
  text-align: center;
  color: #64748b;
  font-style: italic;
  padding: 2rem;
}

/* Login header styles are in admin.css */

.nav-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  margin-right: 2rem;
}

.nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  flex: 1;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 0.5rem var(--spacing-md);
  border-radius: var(--radius-md);
  transition: all 0.2s;
  font-size: var(--font-size-sm);
}

.nav-link:hover {
  color: white;
  background-color: #334155;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.user-email {
  font-size: var(--font-size-sm);
  color: #cbd5e1;
}

.logout-link {
  color: #fca5a5 !important;
}

.logout-link:hover {
  color: white !important;
  background-color: #dc2626 !important;
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
}

.dashboard-header p {
  margin: 0;
  color: #64748b;
}

.quick-actions h2 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

.activity-column h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  color: #1e293b;
  font-size: var(--font-size-sm);
}

.activity-meta {
  font-size: var(--font-size-xs);
  color: #64748b;
  margin-top: 0.25rem;
}

.activity-status {
  margin-left: var(--spacing-md);
}

.stat-icon {
  font-size: 2rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: var(--radius-lg);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: #64748b;
  margin-top: 0.25rem;
} 
/* pages/admin_company_data_review.css */
/* ==========================================================================
   Admin Company Data Review Page - BEM Methodology
   ========================================================================== */

/* ==========================================================================
   Filter Section Block
   ========================================================================== */

.filter-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-xl);
}

.filter-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.filter-section__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
}

.filter-section__toggle {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.filter-section__toggle:hover {
  background-color: var(--color-gray-lightest);
}

.filter-section__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  align-items: end;
}

.filter-section__actions {
  display: flex;
  gap: var(--spacing-sm);
  grid-column: span 2;
}

/* ==========================================================================
   Company Table Block
   ========================================================================== */

.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.company-table__header {
  background-color: var(--color-gray-lightest);
}

.company-table__cell {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-lighter);
}

.company-table__cell--header {
  font-weight: 600;
  color: var(--color-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 0.75rem;
  white-space: nowrap;
}

.company-table__cell--center {
  text-align: center;
}



.company-table__row:hover {
  background-color: var(--color-gray-lightest);
}

.company-table__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.company-table__link:hover {
  text-decoration: underline;
}

.company-table__email,
.company-table__phone {
  font-size: 0.8125rem;
  color: var(--color-gray);
}

/* ==========================================================================
   Company Show Page Block
   ========================================================================== */

.company-show {
  max-width: 1200px;
  margin: 0 auto;
}

.company-show__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--spacing-xl);
}

.company-show__title-section h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
}

.company-show__meta {
  margin-top: var(--spacing-sm);
  color: var(--color-gray);
  font-size: 0.875rem;
}

.company-show__actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* ==========================================================================
   Info Grid Block
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   Info Card Block
   ========================================================================== */

.info-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.info-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-lighter);
}

.info-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
}

.info-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.info-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-gray-lightest);
}

.info-card__row:last-child {
  border-bottom: none;
}

.info-card__label {
  font-weight: 500;
  color: var(--color-gray);
  font-size: 0.875rem;
}

.info-card__value {
  text-align: right;
  font-weight: 500;
  color: var(--color-dark);
}

.info-card__value--link {
  color: var(--color-primary);
  text-decoration: none;
}

.info-card__value--link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Review Stats Block
   ========================================================================== */

.review-stats {
  margin-bottom: var(--spacing-lg);
}

.review-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.review-stat {
  background: var(--color-gray-lightest);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  text-align: center;
}

.review-stat__platform {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray);
  margin-bottom: var(--spacing-xs);
}

.review-stat__rating {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--spacing-xs);
}

.review-stat__count {
  font-size: 0.875rem;
  color: var(--color-gray);
}

/* ==========================================================================
   Data Issues Block
   ========================================================================== */

.data-issues {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-xl);
}

.data-issues__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.data-issues__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
}

.data-issues__count {
  background: var(--color-danger);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

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

.data-issue {
  display: flex;
  align-items: start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-gray-lighter);
}

.data-issue:last-child {
  border-bottom: none;
}

.data-issue__icon {
  color: var(--color-warning);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.data-issue__content {
  flex: 1;
}

.data-issue__message {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--color-dark);
  font-size: 0.875rem;
}

.data-issue__details {
  font-size: 0.75rem;
  color: var(--color-gray);
}

.data-issue__label {
  font-weight: 500;
}

/* ==========================================================================
   Review Table Block
   ========================================================================== */

.review-table {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.review-table__content {
  overflow-x: auto;
}

.review-table table {
  width: 100%;
  border-collapse: collapse;
}

.review-table th {
  background-color: var(--color-gray-lightest);
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--color-gray-dark);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.review-table td {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-gray-lighter);
}

.review-table tbody tr:hover {
  background-color: var(--color-gray-lightest);
}

.review-table__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
}

.review-table__author {
  font-weight: 500;
  color: var(--color-dark);
}

.review-table__date {
  font-size: 0.75rem;
  color: var(--color-gray);
}

.review-table__text {
  max-width: 400px;
  line-height: 1.5;
  color: var(--color-gray-dark);
  font-size: 0.875rem;
}

.review-table__platform {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-gray-lightest);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* ==========================================================================
   Pagination Component
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xl);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  color: var(--color-gray-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.pagination__link:hover {
  background-color: var(--color-gray-lightest);
  border-color: var(--color-gray-light);
}

.pagination__link--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pagination__link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__info {
  margin: 0 var(--spacing-md);
  color: var(--color-gray);
  font-size: 0.875rem;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
  .filter-section__form {
    grid-template-columns: 1fr;
  }
  
  .filter-section__actions {
    grid-column: span 1;
  }
  
  .company-show__header {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .review-stats__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .company-table {
    font-size: 0.75rem;
  }
  
  .company-table__cell {
    padding: var(--spacing-sm);
  }
  
  .company-table__cell--actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }
} 
/* pages/admin_managed_administration.css */
/* Managed Administration */

.admin-command-confirmation,
.admin-operational-controls,
.admin-audit-exports {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.admin-command-confirmation__title,
.admin-operational-controls__title,
.admin-audit-exports__title {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.admin-command-confirmation__section {
  margin-top: var(--spacing-xl);
}

.admin-command-confirmation__section-title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.admin-command-confirmation__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-lighter);
}

.admin-operational-controls__section-title {
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.admin-operational-controls__rollout-list {
  margin: 0;
  padding-left: var(--spacing-lg);
  color: var(--color-gray-dark);
  line-height: 1.6;
}

.admin-operational-controls__status-unavailable {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-warning-light, #fff3cd);
  color: var(--color-warning-dark, #856404);
}

.admin-audit-exports__form {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: flex-end;
  margin: var(--spacing-lg) 0 var(--spacing-xl) 0;
}

.admin-audit-exports__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-audit-exports__failure-code {
  display: inline-block;
  margin-left: var(--spacing-xs);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-danger-light, #fdecea);
  color: var(--color-danger, #b3261e);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
}

/* pages/admin_verification_reviews.css */
/* ==========================================================================
   Admin Verification Reviews - BEM Methodology
   ========================================================================== */

/* ==========================================================================
   Verification Reviews Block (Index Page)
   ========================================================================== */

.verification-reviews__header {
  margin-bottom: 2rem;
}

.verification-reviews__header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.75rem;
}

.verification-reviews__header p {
  color: var(--color-gray);
  margin: 0;
}

.verification-reviews__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.verification-reviews__filters {
  margin-bottom: 1.5rem;
}

.verification-reviews__section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-gray-lighter);
}

.verification-reviews__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.verification-reviews__badge {
  background: var(--color-warning);
  color: var(--color-white);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-weight: 600;
}

.verification-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.verification-reviews__empty {
  text-align: center;
  padding: 2rem;
  color: var(--color-gray);
}

.verification-reviews__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-lighter);
}

/* ==========================================================================
   Stat Card Block (Index Page)
   ========================================================================== */

.verification-reviews .stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-lg);
}

.verification-reviews .stat-card__icon {
  font-size: 1.5rem;
}

.verification-reviews .stat-card__number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.verification-reviews .stat-card__label {
  font-size: 0.75rem;
  color: var(--color-gray);
  text-transform: uppercase;
}

/* ==========================================================================
   Filter Form Block (Index Page)
   ========================================================================== */

.filter-form__row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-form__field {
  flex: 1;
  min-width: 200px;
}

.filter-form__input,
.filter-form__select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.filter-form__input:focus,
.filter-form__select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.filter-form__actions {
  display: flex;
  gap: 0.5rem;
}

/* ==========================================================================
   Verification Card Block (Index Page)
   ========================================================================== */

.verification-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--color-background);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.verification-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.verification-card__company {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.verification-card__name {
  font-weight: 600;
}

.verification-card__website {
  font-size: 0.75rem;
  color: var(--color-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.verification-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
}

.verification-card__changes {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-warning);
}

.verification-card__changes--none {
  color: var(--color-gray);
}

.verification-card__date {
  font-size: 0.75rem;
  color: var(--color-gray);
}

.verification-card__date--never {
  color: var(--color-danger);
}

.verification-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.verification-card__rating {
  font-size: 0.875rem;
}

.verification-card__status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.verification-card__status--pending {
  background: #fef3cd;
  color: #856404;
}

/* ==========================================================================
   Pagination Info (Index Page)
   ========================================================================== */

.pagination-info {
  font-size: 0.875rem;
  color: var(--color-gray);
}

/* ==========================================================================
   Verification Review Block (Show Page)
   ========================================================================== */

.verification-review__header {
  margin-bottom: 2rem;
}

.verification-review__nav {
  margin-bottom: 1rem;
}

.verification-review__back {
  color: var(--color-gray);
  text-decoration: none;
  font-size: 0.875rem;
}

.verification-review__back:hover {
  color: var(--color-primary);
}

.verification-review__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.verification-review__header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.75rem;
}

.verification-review__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-gray);
}

.verification-review__website {
  color: var(--color-primary);
}

.verification-review__section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-gray-lighter);
  margin-bottom: 1.5rem;
}

.verification-review__section h2 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.verification-review__section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.verification-review__section-header h2 {
  margin: 0;
}

.verification-review__badge {
  background: var(--color-warning);
  color: var(--color-white);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-weight: 600;
}

.verification-review__bulk-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-lighter);
}

.verification-review__empty {
  text-align: center;
  padding: 2rem;
  color: var(--color-gray);
}

.verification-review__empty p {
  margin-bottom: 1rem;
}

.verification-review__section--history {
  background: var(--color-background);
}

/* ==========================================================================
   Pending Changes Block (Show Page)
   ========================================================================== */

.pending-changes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ==========================================================================
   Change Card Block (Show Page)
   ========================================================================== */

.change-card {
  background: var(--color-background);
  border: 1px solid var(--color-gray-lighter);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

.change-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.change-card__field {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.change-card__status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.change-card__status--disagreement {
  background: #fef3cd;
  color: #856404;
}

.change-card__status--agreement {
  background: #d4edda;
  color: #155724;
}

.change-card__status--single {
  background: #e2e3e5;
  color: #383d41;
}

.change-card__comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.change-card__column {
  padding: 0.75rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.change-card__column--current {
  background: #f8f9fa;
}

.change-card__column--grok {
  background: #e8f4f8;
  border: 1px solid #b8daff;
}

.change-card__column--gemini {
  background: #f0e8f8;
  border: 1px solid #d4b8ff;
}

.change-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-gray);
}

.change-card__value {
  font-size: 0.875rem;
  word-break: break-all;
  min-height: 1.5rem;
}

.change-card__value--highlight {
  font-weight: 500;
}

.change-card__action {
  margin-top: auto;
}

.change-card__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-lighter);
}

/* ==========================================================================
   History Table Block (Show Page)
   ========================================================================== */

.history-table {
  overflow-x: auto;
}

.verification-review .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.verification-review .data-table th,
.verification-review .data-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-lighter);
}

.verification-review .data-table th {
  font-weight: 600;
  color: var(--color-gray);
  background: var(--color-white);
}

.verification-review .data-table__value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Resolution Badge Block (Show Page)
   ========================================================================== */

.resolution-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.resolution-badge--grok {
  background: #cce5ff;
  color: #004085;
}

.resolution-badge--gemini {
  background: #e2d4f0;
  color: #5a3d7a;
}

.resolution-badge--kept {
  background: #e2e3e5;
  color: #383d41;
}

.resolution-badge--auto {
  background: #d4edda;
  color: #155724;
}

/* ==========================================================================
   Company Data Block (Show Page)
   ========================================================================== */

.company-data {
  display: grid;
  gap: 0.75rem;
}

.company-data__row {
  display: flex;
  gap: 1rem;
}

.company-data__label {
  font-weight: 600;
  min-width: 100px;
  color: var(--color-gray);
}

.company-data__value {
  flex: 1;
  word-break: break-all;
}

.company-data__actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-lighter);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .change-card__comparison {
    grid-template-columns: 1fr;
  }

  .verification-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .verification-card__details {
    text-align: left;
  }

  .verification-card__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .verification-reviews__stats {
    grid-template-columns: 1fr 1fr;
  }

  .filter-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-form__field {
    min-width: unset;
  }

  .verification-review__bulk-actions {
    flex-wrap: wrap;
  }
}

/* pages/areas.css */
/* Areas Page Styles */

.areas-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.areas-page__empty {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.region-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.region-section:last-child {
  border-bottom: none;
}

.region-section__header {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.region-section__districts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.district-link {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: white;
  transition: border-color 0.2s ease;
}

.district-link:hover {
  border-color: #4CAF50;
}

.district-link__name {
  font-weight: 600;
  color: #333;
}

.district-link__code {
  color: #666;
  font-size: 0.9rem;
}

.district-link__count {
  color: #888;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .region-section__districts {
    grid-template-columns: 1fr;
  }

  .areas-page {
    padding: 1rem;
  }
}

/* pages/battery_without_solar.css */
/* =================================================================
   HOME BATTERY STORAGE WITHOUT SOLAR GUIDE
   Short-answer box, next-step aside and comparison tables that fit
   the column on desktop and stack into cards on narrow screens.
   ================================================================= */

.battery-only-verdict {
  margin: 0 0 var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--color-success-bg);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-xl);
}

.battery-only-verdict__title {
  margin: 0 0 var(--spacing-sm);
  color: var(--color-gray-900);
  font-size: var(--font-size-xl);
}

.battery-only-verdict__lead,
.battery-only-verdict__text {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.battery-only-verdict__text {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

.battery-only-verdict__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
}

.battery-only-verdict__figure {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}

.battery-only-verdict__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.battery-only-verdict__value {
  margin: 0;
  color: var(--color-gray-900);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.battery-only-next {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-background-light);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
}

.battery-only-next__text {
  margin: 0 0 var(--spacing-sm);
}

.battery-only-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin: 0;
}

/* Comparison tables: let headings wrap so all columns fit the guide
   column instead of forcing a horizontal scroll. */
.battery-only-table__table th {
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
}

.battery-only-table__table caption {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .battery-only-table::before,
  .battery-only-table::after {
    display: none;
  }

  .battery-only-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .battery-only-table__table,
  .battery-only-table__table tbody,
  .battery-only-table__table tr,
  .battery-only-table__table th,
  .battery-only-table__table td {
    display: block;
    width: 100%;
  }

  .battery-only-table__table caption {
    display: block;
    width: 100%;
  }

  .battery-only-table__table tr {
    padding: var(--spacing-sm) 0;
  }

  .battery-only-table__table tbody th {
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
  }

  .battery-only-table__table td {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) 1fr;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }

  .battery-only-table__table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .battery-only-table__table td:first-child {
    font-weight: normal;
    color: var(--color-gray-600);
  }
}

/* pages/companies.css */
/* Companies Page Styles - BEM naming */

.companies-index {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Mobile padding adjustments */
@media (max-width: 768px) {
  .companies-index {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .companies-index {
    padding: 0 var(--spacing-xs);
  }
}


/* Search error styling */
.search-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.search-error__title {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.search-error__message {
  margin: 4px 0;
  line-height: 1.4;
}

/* Enhanced Search and Filter Section */
.search-filter-section {
  margin-bottom: var(--spacing-l);
  width: 100%;
}

/* Mobile optimizations for search filter section */
@media (max-width: 768px) {
  .search-filter-section {
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-sm);
  }
}

@media (max-width: 640px) {
  .search-filter-section {
    margin-bottom: var(--spacing-sm);
    margin-top: 0;
  }
}

/* Loading state */
.search-form.loading {
  position: relative;
}

.search-form.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius-lg);
}

.search-form.loading::before {
  content: 'Searching...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  z-index: 11;
  box-shadow: var(--shadow-md);
}

.search-container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border: none;
  width: 100%;
}

/* Search Bar */
.search-bar {
  padding: 0;
  background: transparent;
  display: flex;
  gap: var(--spacing-sm);
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}

.search-input-group {
  display: flex;
  gap: var(--spacing-sm);
  flex: 1 1 auto;
  width: 100%;
  align-items: stretch;
  min-width: 0;
}

/* Autocomplete container */
.autocomplete-container {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
}

/* Autocomplete results dropdown */
.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-background);
  border: 2px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete-results.hidden {
  display: none;
}

.autocomplete-results.visible {
  display: block;
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.2s ease;
  font-size: var(--font-size-base);
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

/* Adjust input styling when autocomplete is active */
.autocomplete-container .search-input {
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.autocomplete-results.visible + .search-input,
.autocomplete-container:has(.autocomplete-results.visible) .search-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--color-primary);
}

.search-input {
  padding: 14px 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-background);
  transition: all 0.3s ease;
  outline: none;
}

.search-input:hover {
  border-color: var(--color-primary-light);
}

.search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-input.error {
  border-color: #dc3545;
  background-color: #fff5f5;
}

.search-input.error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.search-input--text {
  flex: 2;
  min-width: 280px;
}

.search-input--postcode {
  flex: 1 1 300px;
  min-width: 0;
  width: 100%;
}

.search-input--services {
  flex: 0 1 350px;
  min-width: 250px;
  padding: 14px 20px;
  padding-right: 40px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background-color: var(--color-background);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.search-input--services:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-background-light);
}

.search-input--services:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-input--services:disabled {
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
  cursor: not-allowed;
  opacity: 0.6;
  border-color: var(--color-border-light);
}

.search-input--services:disabled:hover {
  border-color: var(--color-border-light);
  background-color: var(--color-background-dark);
}

/* Enhanced Search Button */
.btn-search {
  padding: 14px 28px;
  font-size: var(--font-size-base);
  font-weight: 600;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-search:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.25);
}

.btn-search:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Filter Bar */
.filter-bar {
  padding: var(--spacing-lg) 0;
  background: transparent;
  border-top: none;
  margin-top: var(--spacing-lg);
}

.filter-options {
  display: flex;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 160px;
  position: relative;
}

.filter-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.filter-select {
  width: 100%;
  padding: 10px 16px;
  padding-right: 40px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background-color: var(--color-background);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  position: relative;
  z-index: 1;
}

.filter-select:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-background-light);
}

.filter-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  z-index: 2;
}

/* Companies grid layout */
.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
  margin-top: var(--spacing-2xl);
}

/* Mobile responsive for companies grid */
@media (max-width: 480px) {
  .companies-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: var(--spacing-lg);
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  .companies-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: var(--spacing-xl);
  }
}

.companies-grid__item {
  /* Individual grid item styles if needed */
}

/* ============================================
   Companies List - Google-style Search Results
   Clean, scannable results with clear hierarchy
   ============================================ */

.companies-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 720px;
  margin: var(--spacing-xl) auto 0;
  padding: 0 var(--spacing-md);
}

/* Card container with stretched link - grid layout */
.company-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-areas:
    "logo header"
    "snippet snippet"
    "meta meta"
    "services services";
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.company-list-item:hover {
  border-color: var(--color-primary-light, #a8d5a8);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.08);
}

.company-list-item:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Stretched link overlay - covers entire card */
.company-list-item__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.company-list-item__link:focus {
  outline: none;
}

/* Logo - grid area */
.company-list-item__logo {
  grid-area: logo;
  width: 140px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
}

.company-list-item__logo .company-logo {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
}

.company-list-item__logo .company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Header - name and rating beside logo */
.company-list-item__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
  align-self: center;
}

/* Company name */
.company-list-item__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

/* Rating row - below name */
.company-list-item__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.company-list-item__rating .rating-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Snippet - full width below header */
.company-list-item__snippet {
  grid-area: snippet;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-light);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta info row (location, phone) */
.company-list-item__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.company-list-item__meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Phone link - clickable independently, above stretched link */
.company-list-item__phone {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  min-height: 24px;
}

.company-list-item__phone:hover {
  text-decoration: underline;
}

/* Services badges */
.company-list-item__services {
  grid-area: services;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-badge-success-bg-start) 0%, var(--color-badge-success-bg-end) 100%);
  color: var(--color-badge-success-text);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--color-badge-success-border);
  white-space: nowrap;
}

.service-badge--muted {
  background: var(--color-background-light);
  color: var(--color-text-light);
  border-color: var(--color-border);
}

/* ============================================
   Mobile Responsive - Tablet
   ============================================ */
@media (max-width: 768px) {
  .companies-list {
    gap: var(--spacing-md);
    padding: 0 var(--spacing-sm);
    margin-top: var(--spacing-lg);
  }

  .company-list-item {
    grid-template-columns: 116px 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-md);
  }

  .company-list-item__logo {
    width: 116px;
    height: 80px;
  }

  .company-list-item__logo .company-logo {
    width: 100%;
    height: 100%;
  }

  .company-list-item__name {
    font-size: 1rem;
  }

  .company-list-item__snippet {
    -webkit-line-clamp: 3;
  }

  .company-list-item__meta {
    gap: var(--spacing-sm);
  }
}

/* ============================================
   Mobile Responsive - Small screens
   ============================================ */
@media (max-width: 480px) {
  .companies-list {
    gap: var(--spacing-sm);
    padding: 0;
  }

  .company-list-item {
    grid-template-columns: 88px 1fr;
    gap: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .company-list-item__logo {
    width: 88px;
    height: 64px;
  }

  .company-list-item__logo .company-logo {
    width: 100%;
    height: 100%;
  }

  .company-list-item__name {
    font-size: 0.9375rem;
  }

  .company-list-item__snippet {
    font-size: 0.8125rem;
  }

  .company-list-item__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .company-list-item__services {
    gap: 4px;
  }

  .service-badge {
    padding: 3px 8px;
    font-size: 0.6875rem;
  }
}

/* Company show page */
.company-show {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.company-header__content {
  flex: 1;
}

.company-header__main {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.company-title-section {
  flex: 1;
}

.company-actions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Company info grid */
.company-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.info-section__title {
  margin: 0 0 15px 0;
  font-size: 1.4rem;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 5px;
}

/* Contact details */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-item {
  display: flex;
  gap: 10px;
}

.contact-label {
  font-weight: 600;
  min-width: 80px;
  color: var(--color-text-light);
}

.contact-value {
  color: var(--color-text);
  text-decoration: none;
}

.contact-value:hover {
  color: var(--color-primary);
}

/* Service areas */
.service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Map styles */
.company-map {
  height: 400px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--company-card-border);
  position: relative;
}

/* Map loading and error states */
.company-map .leaflet-container {
  height: 100%;
  width: 100%;
  border-radius: 8px;
}

.company-map .leaflet-control-container {
  z-index: 1000;
}

.company-map .leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.company-map .leaflet-popup-content {
  margin: 12px 16px;
  line-height: 1.4;
}

.company-map .leaflet-popup-content strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Map loading state */
.company-map .loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--color-background-light);
  border-radius: 8px;
  color: var(--color-text-light);
  font-size: 1rem;
}

/* Map error state */
.company-map .error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--color-background-light);
  border-radius: 8px;
  color: var(--color-text-light);
  text-align: center;
  padding: 20px;
  border: 1px solid var(--color-border-light);
}

.company-map .error-state a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.company-map .error-state a:hover {
  text-decoration: underline;
}

/* Ensure Leaflet controls are properly styled */
.company-map .leaflet-control-zoom {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-map .leaflet-control-zoom a {
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.company-map .leaflet-control-zoom a:hover {
  background-color: var(--color-background-light);
  color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .company-map {
    height: 300px;
  }
}

/* No results */
.no-results {
  text-align: center;
  padding: 3rem 2rem;
  color: #666;
}

.no-results h3 {
  margin-bottom: 1rem;
  color: #333;
}

.no-results p {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Trust Stats Section */
.trust-stats {
  margin: var(--spacing-lg) 0 var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.trust-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  max-width: 900px;
  margin: 0 auto;
}

.trust-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-stats__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.trust-stats__number {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.trust-stats__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-light);
  margin-top: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Trust Stats Responsive */
@media (max-width: 768px) {
  .trust-stats {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) 0;
  }

  .trust-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .trust-stats__item {
    padding: var(--spacing-md);
  }

  .trust-stats__number {
    font-size: var(--font-size-2xl);
  }

  .trust-stats__label {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .trust-stats {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs) 0;
  }

  .trust-stats__grid {
    gap: var(--spacing-sm);
  }

  .trust-stats__item {
    padding: var(--spacing-sm);
  }

  .trust-stats__number {
    font-size: var(--font-size-xl);
  }
}

/* Welcome section */
.welcome-section {
  text-align: center;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Mobile optimizations for welcome section */
@media (max-width: 768px) {
  .welcome-section {
    padding: 1rem;
    margin-top: 0;
  }
  
  .welcome-section .benefits-section {
    margin: 1rem 0;
  }
  
  .welcome-section .benefits-section h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .welcome-section .benefits-list {
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .welcome-section {
    padding: 0.5rem;
    margin-top: 0;
  }
  
  .welcome-section .benefits-section {
    margin: 0.5rem 0;
  }
  
  .welcome-section .benefits-section h4 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }
}

.welcome-text {
  font-size: 1.125rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.welcome-section .benefits-section {
  margin: 0.5rem 0 2rem;
}

.welcome-section .benefits-section h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.welcome-section .benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: left;
  max-width: 600px;
  margin: 0 auto;
}

.welcome-section .benefit-item {
  display: flex;
  justify-content: left;
  gap: 1rem;
  font-size: 1.125rem;
  color: var(--color-text);
  font-weight: 500;
  text-align: left;
  align-items: center;
}

.welcome-section .benefit-item .icon {
  color: var(--color-success);
  flex-shrink: 0;
}

/* Benefits section within no-results (for search results) */
.no-results .benefits-section {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.no-results .benefits-section h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.no-results .benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
}

.no-results .benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
}

.no-results .benefit-item .icon {
  color: var(--color-success);
  flex-shrink: 0;
}

/* Icon styles */
.icon {
  display: inline-block;
  vertical-align: middle;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .filter-options {
    gap: var(--spacing-lg);
  }

  .filter-item {
    min-width: 140px;
  }
}

@media (max-width: 900px) {
  .filter-options {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .filter-item {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .search-container {
    border-radius: 0;
  }

  .search-bar {
    padding: 0;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .search-input-group {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
  }

  .search-input--text,
  .search-input--postcode,
  .search-input--services {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.75rem var(--spacing-md);
  }

  .autocomplete-container {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  .autocomplete-results {
    max-height: 12.5rem;
  }

  .btn-search {
    width: 100%;
    padding: 0.875rem;
    font-size: var(--font-size-base);
    margin-top: var(--spacing-xs);
  }
}

/* Small mobile - tighter spacing */
@media (max-width: 480px) {
  .search-bar {
    gap: var(--spacing-xs);
  }

  .search-input-group {
    gap: var(--spacing-xs);
  }

  .search-input--text,
  .search-input--postcode,
  .search-input--services {
    padding: 0.625rem var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .btn-search {
    padding: 0.75rem;
    font-size: var(--font-size-sm);
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  /* Companies grid already defined above with proper mobile styles */

  .company-header__main {
    flex-direction: column;
    text-align: center;
  }
  
  .company-map {
    height: 300px;
  }

  .company-info-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* Welcome section mobile adjustments */


  /* Benefits section mobile adjustments (for search results) */
  .no-results .benefits-section {
    margin: 1.5rem 0;
    padding: 1.5rem 1rem;
  }

  .no-results .benefits-section h4 {
    font-size: 1.125rem;
  }

  .no-results .benefits-list {
    gap: 0.75rem;
  }

  .no-results .benefit-item {
    font-size: 0.9rem;
  }


}

/* Legacy classes for backwards compatibility */
.company-header-main {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.company-header-content {
  flex: 1;
}

.info-section h2,
.info-section h3 {
  margin: 0 0 15px 0;
  font-size: 1.4rem;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 5px;
}

.search-error h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.search-error p {
  margin: 4px 0;
  line-height: 1.4;
}

/* Legacy search input classes - redirect to new ones */
.search-input:not(.search-input--text):not(.search-input--postcode) {
  flex: 1;
  min-width: 200px;
}

.postcode-input {
  max-width: 300px;
}

/* Legacy filter classes */
.filter-item label:not(.filter-label) {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
}

/* Additional BEM classes that might be used elsewhere */
.search-bar__input {
  padding: 14px 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-background);
  transition: all 0.3s ease;
  outline: none;
}

.search-bar__input--postcode {
  max-width: 300px;
}

.filter-item__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.filter-item__select {
  padding: 10px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background-color: var(--color-background);
}

/* Calculator CTA */
.calculator-cta {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: var(--spacing-8);
  border-radius: var(--border-radius-lg);
  text-align: center;
  margin: var(--spacing-8) 0;
  box-shadow: var(--shadow-md);
}

.calculator-cta h3 {
  color: white;
  font-size: 1.75rem;
  margin-bottom: var(--spacing-3);
}

.calculator-cta p {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-6);
  opacity: 0.95;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.calculator-cta .btn {
  background: white;
  color: var(--color-primary);
  font-weight: 600;
  padding: var(--spacing-3) var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.calculator-cta .btn:hover {
  background: var(--color-gray-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* pages/company_portal.css */
/* Company Portal Styles - BEM Methodology */

/* ==========================================
   Company Dashboard
   ========================================== */

.company-dashboard {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.company-dashboard__header {
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.company-dashboard__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

.company-dashboard__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin: 0;
}

/* Alert Banner */
.company-dashboard__alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.company-dashboard__alert--warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
}

.company-dashboard__alert-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Stats Cards */
.company-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
}

.company-dashboard__stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  text-align: center;
}

.company-dashboard__stat-card--highlight {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.company-dashboard__stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.company-dashboard__stat-card--highlight .company-dashboard__stat-value {
  color: white;
}

.company-dashboard__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.company-dashboard__stat-card--highlight .company-dashboard__stat-label {
  color: rgba(255, 255, 255, 0.9);
}

/* Dashboard Sections */
.company-dashboard__section--activity {
  margin-bottom: var(--spacing-xl);
}

.company-dashboard__activity-stats {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.company-dashboard__activity-stats dd {
  margin: var(--spacing-sm) 0 0;
}

.company-dashboard__sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--spacing-xl);
}

.company-dashboard__section {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.company-dashboard__section--sidebar {
  height: fit-content;
}

.company-dashboard__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.company-dashboard__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.company-dashboard__section-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.company-dashboard__section-link:hover {
  text-decoration: underline;
}

/* Inquiry List */
.company-dashboard__inquiry-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.company-dashboard__inquiry-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--color-background-light);
  transition: all 0.2s ease;
}

.company-dashboard__inquiry-item:hover {
  background: var(--color-background-dark);
}

.company-dashboard__inquiry-item--unread {
  background: var(--color-info-light);
  border-left: 3px solid var(--color-primary);
}

.company-dashboard__inquiry-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.company-dashboard__inquiry-service {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: 0.125rem;
}

.company-dashboard__inquiry-email {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xs);
}

.company-dashboard__inquiry-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-dashboard__inquiry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  margin-left: var(--spacing-md);
}

.company-dashboard__inquiry-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.company-dashboard__inquiry-badge {
  font-size: var(--font-size-xs);
  padding: 0.125rem 0.5rem;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
}

/* Empty State */
.company-dashboard__empty {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-light);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
}

/* Quick Actions */
.company-dashboard__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.company-dashboard__action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
}

.company-dashboard__action-btn:hover {
  background: var(--color-primary);
  color: white;
}

.company-dashboard__action-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================
   Company Profile View
   ========================================== */

.company-profile {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.company-profile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.company-profile__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.company-profile__edit-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.company-profile__edit-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Alert Banner */
.company-profile__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.company-profile__alert--warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
}

.company-profile__alert-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.company-profile__alert-details {
  font-size: var(--font-size-sm);
  margin: var(--spacing-xs) 0 0 0;
  opacity: 0.8;
}

/* Profile Content */
.company-profile__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.company-profile__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.company-profile__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

/* Details List */
.company-profile__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: 0;
}

.company-profile__detail-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--spacing-md);
  align-items: start;
}

.company-profile__detail-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
}

.company-profile__detail-value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
}

.company-profile__detail-value p {
  margin: 0;
}

.company-profile__detail-value a {
  color: var(--color-primary);
  text-decoration: none;
}

.company-profile__detail-value a:hover {
  text-decoration: underline;
}

.company-profile__detail-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Badges */
.company-profile__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-md);
}

.company-profile__badge--success {
  background: #d1fae5;
  color: #065f46;
}

.company-profile__badge--warning {
  background: #fef3c7;
  color: #92400e;
}

.company-profile__badge--neutral {
  background: var(--color-background-dark);
  color: var(--color-text-light);
}

.company-profile__public-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.company-profile__public-link:hover {
  text-decoration: underline;
}

/* ==========================================
   Company Profile Edit
   ========================================== */

.company-profile-edit {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.company-profile-edit__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.company-profile-edit__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.company-profile-edit__cancel-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-background-dark);
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.company-profile-edit__cancel-btn:hover {
  background: var(--color-border);
}

/* Notice Banner */
.company-profile-edit__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-info-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.company-profile-edit__notice-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.company-profile-edit__notice p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* Errors */
.company-profile-edit__errors {
  padding: var(--spacing-lg);
  background: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  color: #991b1b;
}

.company-profile-edit__errors h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.company-profile-edit__errors ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.company-profile-edit__errors li {
  font-size: var(--font-size-sm);
}

/* Form */
.company-profile-edit__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.company-profile-edit__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.company-profile-edit__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

/* Fields */
.company-profile-edit__field {
  margin-bottom: var(--spacing-lg);
}

.company-profile-edit__field:last-child {
  margin-bottom: 0;
}

.company-profile-edit__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.company-profile-edit__input,
.company-profile-edit__textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.company-profile-edit__input:focus,
.company-profile-edit__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.company-profile-edit__input::placeholder,
.company-profile-edit__textarea::placeholder {
  color: var(--color-text-muted);
}

.company-profile-edit__textarea {
  resize: vertical;
  min-height: 120px;
}

.company-profile-edit__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--spacing-xs) 0 0 0;
}

/* Actions */
.company-profile-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
}

.company-profile-edit__submit {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.company-profile-edit__submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.company-profile-edit__cancel {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-background-dark);
  color: var(--color-text);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.company-profile-edit__cancel:hover {
  background: var(--color-border);
}

/* ==========================================
   Company Inquiries List
   ========================================== */

.inquiries-page {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.inquiries-page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.inquiries-page__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* Filters */
.inquiries-page__filters {
  display: flex;
  gap: var(--spacing-sm);
}

.inquiries-page__filter {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-background-light);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.inquiries-page__filter:hover {
  background: var(--color-background-dark);
  color: var(--color-text);
}

.inquiries-page__filter--active {
  background: var(--color-primary);
  color: white;
}

.inquiries-page__filter--active:hover {
  background: var(--color-primary-dark);
  color: white;
}

/* Inquiry List */
.inquiries-page__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Inquiry Card */
.inquiry-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}

.inquiry-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.inquiry-card--unread {
  background: var(--color-info-light);
  border-color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
}

.inquiry-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.inquiry-card__service {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.inquiry-card__status {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  text-transform: capitalize;
}

.inquiry-card__status--pending {
  background: #fef3c7;
  color: #92400e;
}

.inquiry-card__status--responded {
  background: #d1fae5;
  color: #065f46;
}

.inquiry-card__status--closed {
  background: var(--color-background-dark);
  color: var(--color-text-light);
}

.inquiry-card__body {
  margin-bottom: var(--spacing-md);
}

.inquiry-card__customer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.inquiry-card__email {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.inquiry-card__location {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.inquiry-card__preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.inquiry-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.inquiry-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.inquiry-card__messages {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.inquiry-card__unread-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-md);
  margin-left: auto;
}

/* Empty State */
.inquiries-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  background: var(--color-background-light);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-border);
}

.inquiries-page__empty-icon {
  width: 64px;
  height: 64px;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.inquiries-page__empty-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

.inquiries-page__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0;
  max-width: 400px;
}

/* ==========================================
   Company Inquiry Detail (Extensions)
   ========================================== */

.inquiry-detail__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-xl);
}

.inquiry-detail__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inquiry-detail__info-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inquiry-detail__info-value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
  .company-dashboard {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .company-dashboard__title {
    font-size: var(--font-size-xl);
  }

  .company-dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-dashboard__sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-dashboard__section--sidebar {
    order: -1;
  }

  .company-profile {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .company-profile__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .company-profile__title {
    font-size: var(--font-size-xl);
  }

  .company-profile__detail-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .company-profile-edit {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .company-profile-edit__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .company-profile-edit__title {
    font-size: var(--font-size-xl);
  }

  .company-profile-edit__section {
    padding: var(--spacing-md);
  }

  .company-profile-edit__actions {
    flex-direction: column;
  }

  .company-profile-edit__submit,
  .company-profile-edit__cancel {
    width: 100%;
    text-align: center;
  }

  .inquiries-page {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .inquiries-page__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .inquiries-page__title {
    font-size: var(--font-size-xl);
  }

  .inquiries-page__filters {
    width: 100%;
    overflow-x: auto;
  }

  .inquiry-card {
    padding: var(--spacing-md);
  }

  .inquiry-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .inquiry-card__unread-badge {
    margin-left: 0;
  }

  .inquiry-detail__info {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .company-dashboard__stats {
    grid-template-columns: 1fr 1fr;
  }

  .company-dashboard__stat-card {
    padding: var(--spacing-md);
  }

  .company-dashboard__stat-value {
    font-size: var(--font-size-2xl);
  }

  .company-dashboard__inquiry-item {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .company-dashboard__inquiry-meta {
    flex-direction: row;
    align-items: center;
    margin-left: 0;
  }

  .inquiry-detail__info {
    grid-template-columns: 1fr;
  }
}

/* pages/contact.css */
/* Contact Page Styles */
.contact-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
}

.contact-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.contact-header h1 {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.contact-header p {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 760px;
  margin: 0 auto;
}

.contact-header__link {
  display: inline-block;
  margin-top: var(--spacing-md);
}

.contact-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-xl);
}

.contact-homeowners__header {
  margin-bottom: var(--spacing-lg);
}

.contact-founder {
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.contact-founder__portrait {
  display: block;
  width: 96px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-md);
}

.contact-founder__content h2,
.contact-homeowners__header h2,
.contact-routes h2 {
  margin: 0 0 var(--spacing-sm);
  color: var(--color-primary);
}

.contact-founder__content h2,
.contact-routes h2 {
  font-size: var(--font-size-xl);
}

.contact-founder__content p,
.contact-homeowners__header p,
.contact-route__description {
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.contact-founder__content p,
.contact-homeowners__header p {
  margin: 0 0 var(--spacing-md);
}

.contact-founder__link,
.contact-header__link,
.contact-route__link {
  color: var(--color-primary);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.contact-founder__link:focus-visible,
.contact-header__link:focus-visible,
.contact-route__link:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
}

.contact-routes {
  margin-top: var(--spacing-xl);
}

.contact-route {
  padding: var(--spacing-md) 0;
}

.contact-route + .contact-route {
  border-top: 1px solid var(--color-border);
}

.contact-route__title {
  margin: 0 0 var(--spacing-sm);
  color: var(--color-primary);
  font-size: var(--font-size-base);
}

.contact-route__description {
  margin: 0 0 var(--spacing-sm);
}

.contact-form-container {
  background: var(--color-background);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  scroll-margin-top: var(--spacing-xl);
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.4;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  height: 3rem;
  background-color: var(--color-bg);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem rgba(37, 99, 235, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 8rem;
  height: auto;
  padding: 0.75rem 1rem;
  font-family: inherit;
  line-height: 1.5;
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.5rem;
  appearance: none;
  height: 3rem;
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
  text-align-last: start;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.form-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.btn-large {
  padding: 0.875rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Turnstile Widget Styling */
.cf-turnstile {
  margin: var(--spacing-lg) 0;
  display: flex;
  justify-content: center;
}

/* Contact Info Section */
.contact-info {
  text-align: center;
}

.contact-info h2 {
  font-size: 1.875rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.contact-info-item {
  background: var(--color-background);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-info-item h3 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  font-size: 1.125rem;
}

.contact-info-item p {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.contact-info-item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

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

/* Alert Styles */
.alert {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  line-height: 1.4;
}

.alert-danger {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.alert-success {
  background-color: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Ensure submit button doesn't appear disabled when it's not */
.contact-form .btn-primary:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

.contact-form .btn-primary[data-disable-with]:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

/* Only show disabled state when actually disabled */
.contact-form .btn-primary:disabled,
.contact-form .btn-primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success Message Styling */
.success-message {
  background-color: #d1fae5;
  border: 1px solid #10b981;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 0.125rem 0.25rem rgba(16, 185, 129, 0.1);
}

.success-icon {
  color: #10b981;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.success-content h3 {
  color: #065f46;
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.success-content p {
  color: #047857;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Hide form fields after success (optional) */
.contact-form.success .form-group:not(.success-message) {
  opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-page {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .contact-header h1 {
    font-size: 2rem;
  }
  
  .contact-form-container {
    padding: var(--spacing-lg);
  }

  .contact-content {
    grid-template-columns: 1fr;
  }
  
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .contact-header h1 {
    font-size: 1.75rem;
  }
  
  .contact-header p {
    font-size: 1rem;
  }

  .contact-info h2 {
    font-size: 1.5rem;
  }
}

/* pages/contractor.css */
/* Contractor Portal Styles - BEM naming */

/* ==========================================================================
   Landing Page
   ========================================================================== */

.contractor-landing {
  padding: var(--spacing-xl) 0;
}

.contractor-landing__header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.contractor-landing__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--spacing-md);
}

.contractor-landing__subtitle {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contractor-landing__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.contractor-option {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
}

.contractor-option__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background: #e8f5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contractor-option__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md);
}

.contractor-option__description {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-lg);
  line-height: 1.6;
}

/* Claim Search */
.claim-search {
  text-align: left;
  margin-top: var(--spacing-lg);
}

.claim-search__results {
  margin-top: var(--spacing-md);
}

.claim-search__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
}

.claim-search__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.claim-search__item:last-child {
  border-bottom: none;
}

.claim-search__company {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.claim-search__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.claim-search__logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.claim-search__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.claim-search__name {
  font-weight: 600;
}

.claim-search__location {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.claim-search__empty {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--color-text-muted);
}

/* Claim Modal */
.claim-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.claim-modal[hidden] {
  display: none;
}

.claim-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.claim-modal__content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.claim-modal__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--spacing-sm);
}

.claim-modal__close:hover {
  color: var(--color-text);
}

.claim-modal__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md);
  padding-right: var(--spacing-xl);
}

.claim-modal__description {
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-lg);
  line-height: 1.6;
}

.claim-modal__form .form-actions {
  justify-content: center;
  gap: var(--spacing-md);
}

/* Benefits Section */
.contractor-landing__benefits {
  background: var(--color-background-light, #f9fafb);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
}

.contractor-landing__benefits h2 {
  text-align: center;
  font-size: 1.75rem;
  margin: 0 0 var(--spacing-xl);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
}

.benefit {
  text-align: center;
}

.benefit__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md);
  background: var(--color-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.benefit h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--spacing-sm);
}

.benefit p {
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   Submission Form
   ========================================================================== */

.company-submission {
  padding: var(--spacing-xl) 0;
  max-width: 800px;
  margin: 0 auto;
}

.company-submission__header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.company-submission__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
}

.company-submission__subtitle {
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

.company-submission__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.company-submission__section {
  border: none;
  padding: 0;
  margin: 0 0 var(--spacing-xl);
}

.company-submission__section:last-of-type {
  margin-bottom: 0;
}

.company-submission__section legend {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* Form Row Variants */
.form-group--half {
  flex: 1;
}

.form-group--third {
  flex: 1;
}

.form-row {
  display: flex;
  gap: var(--spacing-lg);
}

@media (max-width: 640px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* Form Hint Text */
.form-hint {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* Form Checkboxes */
.form-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.form-checkbox__label {
  font-size: 0.9375rem;
}

/* Form Errors */
.form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.form-errors__title {
  font-size: 1rem;
  font-weight: 600;
  color: #991b1b;
  margin: 0 0 var(--spacing-sm);
}

.form-errors__list {
  margin: 0;
  padding-left: var(--spacing-lg);
  color: #991b1b;
}

.form-errors__list li {
  margin-bottom: var(--spacing-xs);
}

/* Form File Input */
.form-input--file {
  padding: var(--spacing-sm);
}

/* ==========================================================================
   Submission Confirmation
   ========================================================================== */

.submission-confirmation {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.submission-confirmation__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background: #d1fae5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
}

.submission-confirmation__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 var(--spacing-lg);
}

.submission-confirmation__details {
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.submission-confirmation__message {
  font-size: 1.125rem;
  margin: 0 0 var(--spacing-lg);
}

.submission-confirmation__status {
  margin-bottom: var(--spacing-lg);
}

.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge--pending {
  background: #fef3cd;
  color: #856404;
}

.status-badge--approved {
  background: #d4edda;
  color: #155724;
}

.status-badge--rejected {
  background: #f8d7da;
  color: #721c24;
}

.submission-confirmation__summary h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md);
}

.submission-confirmation__steps {
  margin: 0;
  padding-left: var(--spacing-lg);
  line-height: 1.8;
}

.submission-confirmation__info {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

.submission-confirmation__info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md);
}

.info-list {
  margin: 0;
}

.info-list__item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.info-list__item:last-child {
  border-bottom: none;
}

.info-list__item dt {
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 120px;
}

.info-list__item dd {
  margin: 0;
}

.submission-confirmation__actions {
  margin-top: var(--spacing-xl);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .contractor-landing__title {
    font-size: 2rem;
  }

  .contractor-landing__subtitle {
    font-size: 1rem;
  }

  .contractor-option {
    padding: var(--spacing-lg);
  }

  .company-submission__form {
    padding: var(--spacing-lg);
  }

  .claim-modal__content {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .contractor-landing__title {
    font-size: 1.75rem;
  }

  .contractor-landing__options {
    gap: var(--spacing-lg);
  }

  .form-checkboxes {
    grid-template-columns: 1fr;
  }
}

/* pages/dashboard.css */
/* User Dashboard Styles - BEM Methodology */

.user-dashboard {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

/* Header */
.user-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.user-dashboard__header-content {
  flex: 1;
}

.user-dashboard__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

.user-dashboard__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin: 0;
}

.user-dashboard__header-actions {
  flex-shrink: 0;
}

.user-dashboard__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-secondary) 0%, #047857 100%);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.user-dashboard__cta-btn:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Grid Layout */
.user-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--spacing-2xl);
}

.user-dashboard__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.user-dashboard__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Sections */
.user-dashboard__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.user-dashboard__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.user-dashboard__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-dashboard__section-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.user-dashboard__section-link:hover {
  text-decoration: underline;
}

.user-dashboard__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: var(--color-secondary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-md);
}

/* Empty State */
.user-dashboard__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border);
}

.user-dashboard__empty--compact {
  padding: var(--spacing-xl);
  background: transparent;
  border: none;
}

.user-dashboard__empty--compact p {
  margin: 0;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.user-dashboard__empty-icon {
  width: 64px;
  height: 64px;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.user-dashboard__empty-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

.user-dashboard__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 0 var(--spacing-lg) 0;
}

.user-dashboard__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.user-dashboard__empty-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Calculation Cards */
.user-dashboard__calculations {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.calculation-card {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: box-shadow 0.2s ease;
}

.calculation-card:hover {
  box-shadow: var(--shadow-md);
}

.calculation-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.calculation-card__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.calculation-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.calculation-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: white;
  border-radius: var(--radius-md);
}

.calculation-card__stat {
  text-align: center;
}

.calculation-card__stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.calculation-card__stat-value {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.calculation-card__actions {
  display: flex;
  gap: var(--spacing-sm);
}

.calculation-card__action {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.calculation-card__action--view {
  background: var(--color-primary);
  color: white;
}

.calculation-card__action--view:hover {
  background: var(--color-primary-dark);
}

.calculation-card__action--edit {
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.calculation-card__action--edit:hover {
  background: var(--color-background-dark);
}

.calculation-card__action--delete {
  background: transparent;
  color: var(--color-danger);
}

.calculation-card__action--delete:hover {
  background: var(--color-danger-light);
}

/* Inquiries */
.user-dashboard__inquiries {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dashboard-inquiry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dashboard-inquiry:hover {
  background: white;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.dashboard-inquiry--unread {
  background: var(--color-info-light);
  border-color: var(--color-primary);
}

.dashboard-inquiry__company {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.dashboard-inquiry__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: white;
}

.dashboard-inquiry__logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.dashboard-inquiry__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dashboard-inquiry__company-name {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.dashboard-inquiry__service {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.dashboard-inquiry__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: right;
}

.dashboard-inquiry__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.dashboard-inquiry__unread {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: white;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* Top Companies */
.user-dashboard__top-companies {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.top-company-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.top-company-card:hover {
  background: var(--color-background-light);
}

.top-company-card__logo {
  flex-shrink: 0;
}

.top-company-card__logo-img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: white;
  border: 1px solid var(--color-border);
}

.top-company-card__logo-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.top-company-card__info {
  flex: 1;
  min-width: 0;
}

.top-company-card__name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-company-card__rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.125rem;
}

.top-company-card__stars {
  display: flex;
  font-size: var(--font-size-xs);
}

.top-company-card__star {
  color: var(--color-border);
}

.top-company-card__star--filled {
  color: var(--color-accent);
}

.top-company-card__reviews {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.user-dashboard__see-all-link {
  display: block;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.user-dashboard__see-all-link:hover {
  text-decoration: underline;
}

/* Quick Links */
.user-dashboard__quick-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.user-dashboard__quick-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.user-dashboard__quick-link:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
}

.user-dashboard__quick-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .user-dashboard__grid {
    grid-template-columns: 1fr;
  }

  .user-dashboard__sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .user-dashboard {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .user-dashboard__header {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .user-dashboard__header-actions {
    width: 100%;
  }

  .user-dashboard__cta-btn {
    width: 100%;
    justify-content: center;
  }

  .user-dashboard__title {
    font-size: var(--font-size-xl);
  }

  .calculation-card__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .calculation-card__actions {
    flex-wrap: wrap;
  }

  .dashboard-inquiry {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .dashboard-inquiry__meta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .user-dashboard__section {
    padding: var(--spacing-md);
  }

  .user-dashboard__empty {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .user-dashboard__empty-icon {
    width: 48px;
    height: 48px;
  }

  .calculation-card__stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }
}

/* pages/energy_comparison.css */
/* Energy tariff comparison - BEM */

.energy-compare {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
}

.energy-compare__header {
  margin-bottom: var(--spacing-xl);
}

.energy-compare__title {
  margin: 0 0 var(--spacing-sm);
}

.energy-compare__lead {
  color: var(--color-text-light);
  font-size: 1.05rem;
}

.energy-compare__note {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.energy-compare__form {
  display: grid;
  gap: var(--spacing-lg);
}

.energy-compare__inputs {
  display: grid;
  gap: var(--spacing-lg);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.energy-compare__entry-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.energy-compare__entry-card,
.energy-compare__bill-review {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-background);
}

.energy-compare__entry-card h2 { margin-top: 0; }
.energy-compare__entry-card .energy-compare__input { width: 100%; box-sizing: border-box; }
.energy-compare__consent { display: block; margin: var(--spacing-md) 0; }
.energy-compare__bill-review dt { font-weight: 600; }
.energy-compare__bill-review dd { margin: 0 0 var(--spacing-sm); }
.energy-compare__privacy { margin: 0 0 var(--spacing-md); color: var(--color-text); }

.energy-compare__review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.energy-compare__ev-included { margin-top: var(--spacing-sm); }

.energy-compare__gate { margin: 0 0 var(--spacing-xl); }

.energy-compare__teaser {
  margin: 0 0 var(--spacing-md);
  padding-left: var(--spacing-lg);
  display: grid;
  gap: var(--spacing-sm);
}

.energy-compare__gate-note { margin: 0; color: var(--color-text-light); font-size: var(--font-size-sm); }

.energy-compare__next-steps {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-background);
}

.energy-compare__next-steps h2 { margin-top: 0; }

.energy-compare__next-list {
  margin: 0;
  padding-left: var(--spacing-lg);
  display: grid;
  gap: var(--spacing-sm);
}

@media (max-width: 640px) {
  .energy-compare__entry-options { grid-template-columns: 1fr; }
  .energy-compare__group { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-md); }
}

.energy-compare__errors {
  padding: var(--spacing-md);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: var(--color-error);
}

/* Links in running text must not rely on colour alone. */
.energy-compare p a,
.energy-quote__source a {
  text-decoration: underline;
}

.energy-compare__group {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.5rem);
}

.energy-compare__legend {
  padding: 0 var(--spacing-xs);
  font-weight: 600;
}

.energy-compare__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.energy-compare__field--inline {
  flex-direction: row;
  align-items: center;
}

.energy-compare__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.energy-compare__input {
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

/* Keep the label visible below the fixed header on charger-page handoffs. */
#energy_comparison_ev_miles {
  scroll-margin-top: 10rem;
}

.energy-compare__checkbox {
  width: 1.1rem;
  height: 1.1rem;
}

.energy-compare__submit {
  justify-self: start;
}

.energy-compare__heading {
  margin: var(--spacing-xl) 0 var(--spacing-md);
}

.energy-compare__list {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.energy-compare__more {
  margin-top: var(--spacing-xl);
}

.energy-compare__coverage {
  margin: var(--spacing-xl) 0;
  color: var(--color-text-light);
}

.energy-quote {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-background);
}

.energy-quote--unavailable {
  background: var(--color-background-light);
}

.energy-quote__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}

.energy-quote__rank {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-weight: 700;
}

.energy-quote__name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 12rem;
}

.energy-quote__supplier {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.energy-quote__tariff {
  font-weight: 700;
}

.energy-quote__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.energy-quote__tag {
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-full);
  background: var(--color-background-light);
  font-size: var(--font-size-xs);
}

.energy-quote__cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.energy-quote__annual {
  font-size: 1.4rem;
  font-weight: 700;
}

.energy-quote__monthly {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.energy-quote__details {
  display: grid;
  gap: var(--spacing-xs) var(--spacing-lg);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: var(--spacing-md) 0 0;
}

.energy-quote__details dt {
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

.energy-quote__details dd {
  margin: 0;
}

.energy-quote__source,
.energy-quote__reason {
  margin: var(--spacing-sm) 0 0;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.energy-compare__current {
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 4px solid var(--color-primary);
  background: var(--color-background-light);
}

.energy-quote__saving {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.energy-quote__saving--more {
  color: var(--color-text-light);
  font-weight: 400;
}

.energy-compare__field--wide {
  grid-column: 1 / -1;
}

.energy-compare__hint {
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

.energy-quote__offers {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.energy-quote__offer-list {
  display: grid;
  gap: var(--spacing-xs);
  margin: var(--spacing-xs) 0 0;
  padding: 0;
  list-style: none;
}

.energy-quote__offer {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
}

.energy-quote__offer-title {
  font-weight: 600;
}

.energy-quote__offer-conditions {
  flex-basis: 100%;
  color: var(--color-text-light);
}

@media (max-width: 640px) {
  .energy-quote__cost {
    align-items: flex-start;
    width: 100%;
  }
}

/* pages/energy_digest.css */
.energy-digest {
  --digest-ink: var(--color-text);
  --digest-muted: var(--color-text-light);
  --digest-accent: var(--color-secondary);
  --digest-paper: var(--color-background-light);
  max-width: 980px;
  margin: 0 auto;
  color: var(--digest-ink);
}

.energy-digest__masthead,
.energy-digest__article-header {
  max-width: 760px;
  padding: 4rem 0 2rem;
}

.energy-digest__masthead h1,
.energy-digest__article-header h1 {
  margin: 0.35rem 0 1rem;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.energy-digest__masthead > p:last-child,
.energy-digest__standfirst {
  color: var(--digest-muted);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.energy-digest__eyebrow {
  margin: 0;
  color: var(--digest-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.energy-digest__editions {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 4rem;
}

.energy-digest__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.energy-digest__card-copy {
  padding: 2rem;
}

.energy-digest__card time,
.energy-digest__byline {
  color: var(--digest-muted);
  font-size: 0.9rem;
}

.energy-digest__card h2 {
  margin: 0.6rem 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.energy-digest__card h2 a {
  color: inherit;
  text-decoration: none;
}

.energy-digest__card h2 a:hover,
.energy-digest__read-link:hover {
  color: var(--digest-accent);
}

.energy-digest__card-image {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: var(--color-digest-image-background);
  object-fit: contain;
}

.energy-digest__read-link {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--digest-accent);
  font-weight: 700;
}

.energy-digest--article {
  max-width: 820px;
  padding: 2rem 0 4rem;
}

.energy-digest__article-header {
  padding-top: 2rem;
}

.energy-digest__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.energy-digest__hero {
  margin: 1rem 0 2.5rem;
}

.energy-digest__hero img {
  display: block;
  width: 100%;
  max-height: 520px;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.energy-digest__body {
  max-width: 720px;
  font-size: 1.08rem;
  line-height: 1.8;
}

.energy-digest__body h2,
.energy-digest__body h3 {
  margin: 2.2rem 0 0.8rem;
  color: var(--digest-ink);
  line-height: 1.2;
}

.energy-digest__body a,
.energy-digest__sources a {
  color: var(--digest-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.energy-digest__body blockquote {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--digest-accent);
  background: var(--digest-paper);
}

.energy-digest__sources {
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--digest-paper);
}

.energy-digest__sources h2 {
  margin-top: 0;
}

.energy-digest__sources li + li {
  margin-top: 0.8rem;
}

.energy-digest__sources span {
  display: block;
  color: var(--digest-muted);
  font-size: 0.88rem;
}

.energy-digest__article-footer {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.energy-digest__recent > h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.energy-digest__recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.energy-digest__recent-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.energy-digest__recent-image-link {
  display: block;
  aspect-ratio: 7 / 6;
  background: var(--color-digest-image-background);
}

.energy-digest__recent-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.energy-digest__recent-copy {
  padding: 1rem;
}

.energy-digest__recent-copy time {
  color: var(--digest-muted);
  font-size: 0.82rem;
}

.energy-digest__recent-copy h3 {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  line-height: 1.35;
}

.energy-digest__recent-copy h3 a {
  color: inherit;
  text-decoration: none;
}

.energy-digest__recent-copy h3 a:hover {
  color: var(--digest-accent);
}

.energy-digest__all-link {
  margin-top: 1.5rem;
}

.energy-digest__empty {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--digest-paper);
}

@media (max-width: 720px) {
  .energy-digest__masthead {
    padding-top: 2.5rem;
  }

  .energy-digest__article-header {
    padding-top: 1rem;
    padding-bottom: 0;
  }

  .energy-digest__article-header h1 {
    margin-bottom: 0.75rem;
  }

  .energy-digest__byline {
    margin-top: 1rem;
  }

  .energy-digest__card {
    grid-template-columns: 1fr;
  }

  .energy-digest__card-image {
    grid-row: 1;
    min-height: 210px;
  }

  .energy-digest__card-copy {
    padding: 1.5rem;
  }

  .energy-digest__hero {
    margin: 0.5rem 0 1.25rem;
  }

  .energy-digest__sources {
    padding: 1.25rem;
  }

  .energy-digest__recent-grid {
    grid-template-columns: 1fr;
  }

  .energy-digest__recent-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .energy-digest__recent-image-link {
    aspect-ratio: auto;
    min-height: 104px;
  }
}

/* pages/ev_charger_packages.css */
/* EV charger package comparison table on /ev-charger-installation-cost.
   Desktop: a wrapping data table. Narrow screens: each package becomes a
   stacked card with labelled values, so no column hides behind a swipe. */

.ev-packages__table-wrapper {
  margin: var(--spacing-lg) 0 var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  overflow-x: auto;
}

.ev-packages__table-wrapper:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.ev-packages__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.ev-packages__caption {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}

.ev-packages__table thead th {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-secondary);
  color: var(--color-text-white);
  text-align: left;
  font-weight: 600;
  vertical-align: bottom;
}

.ev-packages__row {
  border-top: 1px solid var(--color-border);
}

.ev-packages__row:nth-child(even) {
  background: var(--color-background-light);
}

.ev-packages__cell {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-light);
  text-align: left;
  vertical-align: top;
}

.ev-packages__cell--package {
  font-weight: 600;
  color: var(--color-text);
}

.ev-packages__cell--price {
  font-weight: 600;
  color: var(--color-text);
}

.ev-packages__seller,
.ev-packages__source {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 768px) {
  .ev-packages__table-wrapper {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .ev-packages__table,
  .ev-packages__table tbody,
  .ev-packages__row,
  .ev-packages__cell,
  .ev-packages__caption {
    display: block;
    width: 100%;
  }

  .ev-packages__caption {
    padding: 0 0 var(--spacing-sm);
  }

  .ev-packages__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ev-packages__row {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .ev-packages__row:nth-child(even) {
    background: var(--color-surface);
  }

  .ev-packages__cell {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
  }

  .ev-packages__cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text);
  }
}

/* Inline links in the EV handoff asides (directory, profile, tariff results)
   must not rely on colour alone (WCAG 1.4.1). */
.ev-charging-links__link,
.ev-package-journey__link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* pages/green_new_build_guide.css */
/* =================================================================
   GREEN NEW-BUILD DEVELOPMENT CATALOGUE
   ================================================================= */
.green-new-build-guide__intro {
  border-top: 4px solid var(--color-secondary);
}

.green-methodology {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.green-methodology__item {
  padding: var(--spacing-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.green-methodology__item h3,
.green-baseline-note h3,
.green-development-map__alternative h3 {
  margin-top: 0;
  color: var(--color-gray-800);
}

.green-methodology__item p,
.green-baseline-note p,
.green-development-map__header p,
.green-development-catalogue__header p,
.green-watchlist__header p {
  margin-bottom: 0;
}

.green-baseline-note {
  padding: var(--spacing-lg);
  background: var(--bg-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.green-baseline-note p + p {
  margin-top: var(--spacing-md);
}

.green-refresh-note {
  margin: var(--spacing-lg) 0 0;
  color: var(--color-gray-600);
}

.green-development-map,
.green-development-card {
  scroll-margin-top: calc(var(--spacing-3xl) + var(--spacing-xl));
}

.green-development-map__header,
.green-development-catalogue__header,
.green-watchlist__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.6fr);
  align-items: end;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.green-development-map__header .section__title,
.green-development-catalogue__header .section__title,
.green-watchlist__header .section__title {
  margin-bottom: 0;
}

.green-development-map__eyebrow,
.green-development-catalogue__eyebrow,
.green-watchlist__eyebrow {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-secondary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.green-development-map__canvas {
  min-height: 500px;
  overflow: hidden;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
}

.green-development-map__canvas > p {
  display: grid;
  min-height: 500px;
  place-items: center;
  margin: 0;
  color: var(--color-gray-600);
}

.green-development-map__canvas.leaflet-container {
  z-index: 0;
  font-family: inherit;
}

.green-development-map__canvas .leaflet-popup-content {
  line-height: 1.5;
}

.green-development-map__canvas .leaflet-popup-content a {
  color: var(--color-primary-darker);
  font-weight: 700;
}

.green-development-map__alternative {
  margin-top: var(--spacing-lg);
}

.green-development-map__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: 0;
  margin: 0;
  list-style: none;
}

.green-development-map__links li {
  min-width: 0;
  margin: 0;
}

.green-development-map__links a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-primary-darker);
  background: var(--bg-primary-light);
  border-radius: var(--radius-md);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.green-development-map__links a:hover,
.green-development-map__links a:focus-visible {
  background: var(--bg-primary-lighter);
  text-decoration: underline;
}

.green-development-catalogue__grid {
  display: grid;
  gap: var(--spacing-xl);
}

.green-development-card {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.25fr);
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.green-development-card__media {
  position: relative;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  background: var(--color-gray-100);
}

.green-development-card__image,
.green-development-card__image-fallback {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  object-fit: cover;
}

.green-development-card__image-fallback {
  display: grid;
  place-items: center;
  padding: var(--spacing-lg);
  color: var(--color-gray-600);
  background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
  text-align: center;
}

.green-development-card__credit {
  position: absolute;
  right: var(--spacing-sm);
  bottom: var(--spacing-sm);
  max-width: calc(100% - var(--spacing-md));
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-text-white);
  background: var(--color-logo-background-dark);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.green-development-card__credit a {
  color: var(--color-text-white);
  text-decoration: underline;
}

.green-development-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

.green-development-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.green-development-card__developer {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-secondary-dark);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.green-development-card__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: var(--font-size-2xl);
  line-height: 1.25;
}

.green-development-card__status {
  flex: 0 0 auto;
  max-width: 12rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-secondary-dark);
  background: var(--color-success-bg);
  border: 1px solid var(--color-secondary-light);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.green-development-card__qualification {
  padding: var(--spacing-md);
  background: var(--color-gray-50);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
}

.green-development-card__qualification h4 {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-gray-800);
}

.green-development-card__qualification p {
  margin: 0 0 var(--spacing-sm);
}

.green-development-card__evidence-link {
  color: var(--color-primary-darker);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.green-development-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.green-development-card__features li {
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-gray-700);
  background: var(--color-background);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.green-development-card__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.green-development-card__price-row {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-primary-light);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
}

.green-development-card__price-label,
.green-development-card__price-value,
.green-development-card__price-note {
  display: block;
}

.green-development-card__price-label {
  margin-bottom: var(--spacing-xs);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.green-development-card__price-value {
  color: var(--color-gray-900);
  font-size: var(--font-size-lg);
  overflow-wrap: anywhere;
}

.green-development-card__price-note {
  margin-top: var(--spacing-xs);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
}

.green-development-card__price-source {
  align-self: flex-start;
  color: var(--color-primary-darker);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.green-development-card__checked {
  margin: calc(-1 * var(--spacing-sm)) 0 0;
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
}

.green-development-card__sales-link {
  align-self: flex-start;
  margin-top: auto;
}

.green-watchlist {
  background: var(--color-gray-50);
}

.green-watchlist__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.green-watchlist__item {
  padding: var(--spacing-lg);
  background: var(--color-background);
  border: 1px dashed var(--color-gray-400);
  border-radius: var(--radius-lg);
}

.green-watchlist__item h3 {
  margin-top: 0;
  color: var(--color-gray-800);
}

.green-buyer-checklist {
  padding-left: 1.4rem;
}

.green-buyer-checklist li {
  padding-left: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

@media (max-width: 860px) {
  .green-methodology,
  .green-development-map__header,
  .green-development-catalogue__header,
  .green-watchlist__header,
  .green-development-card {
    grid-template-columns: 1fr;
  }

  .green-development-map__header,
  .green-development-catalogue__header,
  .green-watchlist__header {
    align-items: start;
    gap: var(--spacing-md);
  }

  .green-development-card__image,
  .green-development-card__image-fallback {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .green-development-map__canvas,
  .green-development-map__canvas > p {
    min-height: 360px;
  }

  .green-development-map__links,
  .green-watchlist__grid,
  .green-development-card__prices {
    grid-template-columns: 1fr;
  }

  .green-development-card__body {
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .green-development-card__heading {
    flex-direction: column;
  }

  .green-development-card__title {
    font-size: var(--font-size-xl);
  }

  .green-development-card__status {
    max-width: none;
    text-align: left;
  }

  .green-development-card__sales-link {
    width: 100%;
    text-align: center;
  }
}

/* pages/guides_refactored.css */
/* Guide-page styles. Generic blocks (tables, cta, faq, toc, breadcrumb)
   live in components/ — this file holds guide-specific layout plus
   guide-scoped deltas (.guide .card etc.) over the canonical components. */

/* =================================================================
   GUIDE PAGES - REFACTORED WITH BEM
   ================================================================= */

/* =================================================================
   CSS VARIABLES
   ================================================================= */
:root {
  /* Colors */
  --color-primary: #0369a1;
  --color-primary-dark: #075985;
  --color-primary-darker: #075985;
  --color-secondary: #047857;
  --color-secondary-dark: #065f46;
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-dark: #92400e;
  
  /* Neutrals */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #6b7280;
  --color-gray-500: #4b5563;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* Background colors */
  --bg-body: #f8fafb;
  --bg-card: #ffffff;
  --bg-card-alt: #f9fafb;
  --bg-card-highlight: #f8fafc;
  --bg-primary-light: #f0f9ff;
  --bg-primary-lighter: #e0f2fe;
  --bg-warning-light: #fffbeb;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* =================================================================
   BASE LAYOUT
   ================================================================= */
.guide {
  min-height: 100vh;
  padding-bottom: var(--spacing-2xl);
}

.guide__prose-link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.guide__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* =================================================================
   HEADER COMPONENT
   ================================================================= */
.guide__header {
  margin-bottom: var(--spacing-2xl);
  position: relative;
  overflow: hidden;
}

/* Header Modifiers */
.guide__header--hero {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: white;
}

.guide__header--simple {
  background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--bg-primary-lighter) 100%);
  border: 1px solid #7dd3fc;
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl) var(--spacing-xl);
  margin-top: var(--spacing-xl);
  text-align: center;
}

/* Header Elements */
.guide__header__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.guide__header__title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.guide__header--hero .guide__header__title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.guide__header--simple .guide__header__title {
  color: var(--color-gray-900);
}

.guide__header__subtitle {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: var(--spacing-lg);
  opacity: 0.95;
}

.guide__header--simple .guide__header__subtitle {
  color: var(--color-gray-600);
  opacity: 1;
}

.guide__header__meta {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  font-size: 0.875rem;
  margin-top: var(--spacing-md);
}

.guide__header--simple .guide__header__meta {
  color: var(--color-primary-darker);
}

/* Header Background Pattern */
.guide__header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(45deg);
}

/* =================================================================
   BREADCRUMB COMPONENT
   ================================================================= */










/* =================================================================
   GUIDE NAVIGATION COMPONENT
   ================================================================= */
.guide__header__navigation {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) 0;
  border-top: 1px solid #e2e8f0;
}

.guide__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.guide__nav__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.guide__nav__links {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.guide__nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--bg-card-alt);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  color: var(--color-primary-darker);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.guide__nav__link:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.guide__nav__link--current {
  background: var(--color-primary-darker);
  color: white;
  border-color: var(--color-primary-darker);
}

.guide__nav__link--current:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* =================================================================
   SECTION COMPONENT
   ================================================================= */
.section {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
}

.section__title {
  font-size: 2rem;
  margin-bottom: var(--spacing-xl);
  color: var(--color-gray-800);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-gray-200);
}

.section__subtitle {
  font-size: 1.5rem;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-700);
}

.section__intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-xl);
}

/* =================================================================
   RELATED GUIDES (shared/_related_guides)
   Each link is a block-level target of at least --target-size-min with
   vertical spacing, so stacked links meet WCAG 2.2 target size on phones.
   ================================================================= */
.related-guides__list {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.related-guides__item + .related-guides__item {
  margin-top: var(--spacing-xs);
}

.related-guides__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size-min);
  min-width: var(--target-size-min);
  padding-block: var(--spacing-xs);
}

/* =================================================================
   CARD COMPONENT
   ================================================================= */
.guide .card {
  /* canonical card surface (radius-lg + border + shadow-sm); the
     .card--* modifiers below add a sanctioned colored left-accent. */
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Card Modifiers */
.guide .card--primary {
  border-color: var(--color-primary);
  border-left-width: 4px;
}

.guide .card--success {
  border-color: var(--color-secondary);
  border-left-width: 4px;
}

.guide .card--danger {
  border-color: var(--color-danger);
  border-left-width: 4px;
}

.guide .card--warning {
  background: var(--bg-warning-light);
  border-color: var(--color-warning);
  border-left-width: 4px;
  margin-top: var(--spacing-md);
}

.guide .card--highlighted {
  background: var(--bg-card-highlight);
  border: 2px solid #e2e8f0;
  border-left-width: 4px;
  border-left-color: var(--color-primary);
}

.guide .card--cost {
  background: linear-gradient(135deg, var(--bg-primary-light) 0%, var(--bg-primary-lighter) 100%);
  border: 1px solid #bae6fd;
  position: relative;
  overflow: hidden;
}

.guide .card--cost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

/* Card Elements */
.card__title {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-800);
  font-weight: 600;
}

.guide .card--primary .card__title {
  color: var(--color-primary-darker);
}

.guide .card--success .card__title {
  color: var(--color-secondary-dark);
}

.guide .card--danger .card__title {
  color: var(--color-danger-dark);
}

.guide .card--warning .card__title {
  color: var(--color-warning-dark);
}

.card__content {
  color: var(--color-gray-600);
  line-height: 1.6;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__content p {
  margin: 0;
}

.card__content p + p {
  margin-top: var(--spacing-md);
}

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

.card__content li {
  padding: var(--spacing-sm) 0;
  position: relative;
  padding-left: var(--spacing-lg);
}

.card__content li::before {
  position: absolute;
  left: 0;
  font-weight: bold;
}

.guide .card--success .card__content li::before {
  content: '✓';
  color: var(--color-secondary);
}

.guide .card--danger .card__content li::before {
  content: '✕';
  color: var(--color-danger);
}

.guide .card--primary .card__content li::before {
  content: '▸';
  color: var(--color-primary);
}

.card__action {
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.card__action .button {
  width: 100%;
  text-align: center;
}

/* Hub page card styles */
.guide .card--link {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.guide .card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__link-wrapper {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.card__list li {
  padding: var(--spacing-xs) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  color: var(--color-gray-500);
}

.card__list li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

.card__cta {
  display: inline-block;
  margin-top: var(--spacing-md);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.card__cta::after {
  content: ' >';
}

.guide .card--feature {
  background: white;
  border: 2px solid var(--color-gray-200);
  padding: var(--spacing-xl);
  position: relative;
  transition: all var(--transition-normal);
}

.guide .card--feature:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.card__badge {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.guide .card--stat {
  text-align: center;
  background: white;
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}

.card__stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.card__stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-sm);
}

.card__stat-detail {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin: 0;
}

.guide .card--compact {
  padding: var(--spacing-md);
  text-align: center;
}

.guide .card--compact .card__title {
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
}

.guide .card--compact .card__content {
  font-size: 0.875rem;
}

.guide .card--highlight {
  background: var(--bg-primary-light);
  border: 1px solid var(--color-primary);
  padding: var(--spacing-xl);
}

.specs-list {
  flex: 1;
}

/* =================================================================
   GRID LAYOUTS
   ================================================================= */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--1-cols {
  grid-template-columns: 1fr;
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* =================================================================
   TABLE OF CONTENTS
   ================================================================= */














/* =================================================================
   RATING COMPONENT
   ================================================================= */
.rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.rating__score {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.125rem;
}

.rating__label {
  background: var(--color-primary-darker);
  color: white;
  padding: 0.375rem var(--spacing-md);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* =================================================================
   PROS AND CONS COMPONENT
   ================================================================= */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

/* Mobile responsive: Stack pros and cons vertically */
@media (max-width: 768px) {
  .pros-cons {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

.pros-cons__pros,
.pros-cons__cons {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}

.pros-cons__pros {
  border-top: 3px solid var(--color-secondary);
}

.pros-cons__cons {
  border-top: 3px solid var(--color-danger);
}

.pros-cons__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.pros-cons__pros .pros-cons__title {
  color: var(--color-secondary-dark);
}

.pros-cons__pros .pros-cons__title::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
}

.pros-cons__cons .pros-cons__title {
  color: var(--color-danger-dark);
}

.pros-cons__cons .pros-cons__title::before {
  content: '✕';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-danger);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
}

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

.pros-cons__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  line-height: 1.5;
}

.pros-cons__item:last-child {
  border-bottom: none;
}

.pros-cons__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
}

.pros-cons__pros .pros-cons__icon {
  color: var(--color-secondary);
  background: var(--bg-primary-lighter);
  border-radius: 50%;
}

.pros-cons__cons .pros-cons__icon {
  color: var(--color-danger);
  background: var(--bg-danger-lighter);
  border-radius: 50%;
}

.pros-cons__text {
  flex: 1;
}

/* =================================================================
   TABLE COMPONENT
   ================================================================= */


/* Most data tables are wider than a phone: make the hidden columns
   discoverable instead of silently amputated */






















/* =================================================================
   BUTTON COMPONENT
   ================================================================= */
.guide .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.guide .btn--primary {
  background: var(--color-primary);
  color: white;
}

.guide .btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3);
}

.guide .btn--secondary {
  background: transparent;
  color: white;
  border-color: white;
}

.guide .btn--secondary:hover {
  background: white;
  color: var(--color-primary);
}

.guide .btn--large {
  min-height: 3.5rem;
  padding: var(--spacing-sm) 2.5rem;
  font-size: 1.1rem;
}

/* =================================================================
   ICON LINK COMPONENT
   ================================================================= */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  background: var(--bg-primary-lighter);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-primary-darker);
  transition: all var(--transition-normal);
}

.icon-link:hover {
  background: var(--color-primary-darker);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-link__svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Product review specific icon link */
.icon-link--product {
  padding: var(--spacing-sm);
  border-radius: 6px;
  margin-left: var(--spacing-md);
  flex-shrink: 0;
}

.icon-link--product .icon-link__svg {
  width: 20px;
  height: 20px;
}

/* =================================================================
   STEP COMPONENT
   ================================================================= */
.steps {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.step {
  background: var(--bg-card-alt);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  position: relative;
  padding-left: 5rem;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step__number {
  position: absolute;
  left: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.step__title {
  color: var(--color-gray-800);
  font-size: 1.125rem;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.step__content {
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* =================================================================
   RECOMMENDATIONS COMPONENT
   ================================================================= */
.recommendations {
   padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}


.recommendations__intro {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-darker);
  margin-bottom: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.recommendations__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-md);
  position: relative;
  z-index: 1;
}

/* =================================================================
   FAQ COMPONENT
   ================================================================= */










/* =================================================================
   STEPS LIST (installation process / ordered steps)
   ================================================================= */
.steps-list {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
}

.steps-list li {
  position: relative;
  counter-increment: step-counter;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 2.5rem;
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-100);
}

.steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: var(--spacing-md);
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.steps-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.steps-list li strong {
  display: block;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-xs);
}

.steps-list li p {
  color: var(--color-gray-500);
  margin: var(--spacing-xs) 0 0;
  line-height: 1.6;
}

/* =================================================================
   CTA COMPONENT
   ================================================================= */




.cta__content {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-2xl);
}





.cta__content p {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-xl);
  opacity: 0.9;
  color: white;
}

.cta__content .section__subtitle {
  color: white;
  font-size: 1.75rem;
  margin-bottom: var(--spacing-md);
}

.cta__buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA-specific final recommendations styling */






















@media (max-width: 768px) {
  /* CTA Mobile Improvements - More Compact */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .cta__content {
    margin-top: var(--spacing-md);
  }
  
  .cta__content .section__subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
  }
}

/* CTA Button Styling */










/* =================================================================
   COST FACTORS COMPONENT
   ================================================================= */
.cost-factors {
  margin-bottom: var(--spacing-2xl);
}
/* =================================================================
   INSTALLATION PROCESS COMPONENT
   ================================================================= */
.installation-process {
  margin-bottom: var(--spacing-3xl);
}

.installation-process__title {
  font-size: 1.5rem;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-xl);
  font-weight: 600;
}

.installation-process__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.installation-process__step {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-gray-200);
  position: relative;
  transition: all var(--transition-normal);
}

.installation-process__step:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.installation-process__step-number {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.installation-process__step-title {
  font-size: 1.125rem;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.installation-process__step-description {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
}

.installation-process__step-duration {
  margin-top: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--color-primary);
  margin-bottom: 0;
}

.installation-process__step-duration strong {
  color: var(--color-primary-dark);
}

/* Connection lines between steps */
@media (min-width: 768px) {
  .installation-process__steps {
    position: relative;
  }
  

  
  .installation-process__step {
    z-index: 1;
  }
}

@media (max-width: 768px) {
  /* Installation Process Mobile Improvements */
  .installation-process {
    margin-bottom: var(--spacing-lg);
  }
  
  .installation-process__title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
  }
  
  .installation-process__steps {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  .installation-process__step {
    padding: var(--spacing-md);
  }
  
  .installation-process__step-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .installation-process__step-title {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
  }
  
  .installation-process__step-description {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* =================================================================
   INSTALLATION REQUIREMENTS COMPONENT
   ================================================================= */
.installation-requirements {
  margin-bottom: var(--spacing-2xl);
}

.installation-requirements__category {
  font-size: 1.125rem;
  color: var(--color-gray-800);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}


/* =================================================================
   INSTALLER CHECKLIST COMPONENT
   ================================================================= */
.installer-checklist {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
}

.installer-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.installer-checklist__item:last-child {
  border-bottom: none;
}

.installer-checklist__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.installer-checklist__text {
  flex: 1;
}

@media (max-width: 768px) {
  .installation-requirements__category {
    font-size: 1rem;
    margin-top: var(--spacing-lg);
  }
  
  .installation-requirements__item,
  .installer-checklist__item {
    padding: var(--spacing-sm) 0;
  }
  
  .installation-requirements__icon {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
  }
  
  .installer-checklist__icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }
}

/* =================================================================
   ROI EXAMPLES COMPONENT
   ================================================================= */
.roi-examples {
  margin-bottom: var(--spacing-2xl);
}

.roi-examples__title {
  font-size: 1.125rem;
  color: var(--color-gray-800);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.roi-examples__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-xl) 0;
}

.roi-examples__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.roi-examples__item:last-child {
  border-bottom: none;
}

.roi-examples__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.roi-examples__text {
  flex: 1;
}

.roi-examples__text strong {
  color: var(--color-gray-800);
}

/* =================================================================
   OPTIMIZATION TIPS COMPONENT
   ================================================================= */
.optimization-tips {
  margin-bottom: var(--spacing-2xl);
}

.optimization-tips__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0 0 0;
}

.optimization-tips__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.optimization-tips__item:last-child {
  border-bottom: none;
}

.optimization-tips__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.optimization-tips__text {
  flex: 1;
}

.optimization-tips__text strong {
  color: var(--color-gray-800);
}

@media (max-width: 768px) {
  .roi-examples__title {
    font-size: 1rem;
    margin-top: var(--spacing-lg);
  }
  
  .roi-examples__item,
  .optimization-tips__item {
    padding: var(--spacing-sm) 0;
  }
  
  .roi-examples__icon,
  .optimization-tips__icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }
}

/* =================================================================
   FEATURES LIST COMPONENT
   ================================================================= */
.features__title {
  font-size: 1.125rem;
  margin-top: var(--spacing-lg);
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.features__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
}

.features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.features__item:last-child {
  border-bottom: none;
}

.features__icon {
  color: var(--color-secondary);
  flex-shrink: 0;
  font-weight: bold;
}

.features__text {
  flex: 1;
  color: var(--color-gray-600);
  line-height: 1.5;
}

.features__text strong {
  color: var(--color-gray-800);
}

/* =================================================================
   COMPARISON NOTES COMPONENT
   ================================================================= */
.comparison-notes__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.comparison-notes__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.comparison-notes__item:last-child {
  border-bottom: none;
}

.comparison-notes__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.comparison-notes__text {
  flex: 1;
  color: var(--color-gray-600);
  line-height: 1.5;
}

.comparison-notes__text strong {
  color: var(--color-gray-800);
}

/* =================================================================
   CRITERIA LIST COMPONENT
   ================================================================= */
.criteria__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.criteria__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  color: var(--color-gray-600);
  line-height: 1.5;
}

.criteria__icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.criteria__text {
  flex: 1;
}

/* =================================================================
   FINANCING OPTIONS COMPONENT
   ================================================================= */
.financing-options__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.financing-options__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.financing-options__item:last-child {
  border-bottom: none;
}

.financing-options__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.financing-options__text {
  flex: 1;
  color: var(--color-gray-600);
  line-height: 1.5;
}

.financing-options__text strong {
  color: var(--color-gray-800);
}

/* =================================================================
   PAYBACK PERIODS COMPONENT
   ================================================================= */


/* =================================================================
   HERO HEADER STATS
   ================================================================= */
.guide__header__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.guide__header__stat {
  text-align: center;
}

.guide__header__stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.guide__header--hero .guide__header__stat-number {
  color: white;
}

.guide__header__stat-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.guide__header__description {
  font-size: 1.125rem;
  margin-top: var(--spacing-lg);
  line-height: 1.6;
  opacity: 0.95;
}

/* =================================================================
   GRANT APPLICATION COMPONENT
   ================================================================= */
.grant-application__step {
  padding: var(--spacing-lg);
  background: var(--bg-muted);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--color-primary);
}

.grant-application__step-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.grant-application__step-description {
  color: var(--color-gray-600);
  margin: 0;
}

/* =================================================================
   ELIGIBILITY CRITERIA COMPONENT
   ================================================================= */
.eligibility-criteria {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--bg-muted);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--color-info);
}

.eligibility-criteria__title {
  margin-bottom: var(--spacing-md);
  color: var(--color-info);
}

.eligibility-criteria__list {
  list-style: none;
  padding: 0;
}

.eligibility-criteria .criteria__item {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-xl);
  position: relative;
}

/* =================================================================
   RUNNING COSTS COMPONENT
   ================================================================= */
.running-costs__item {
  padding: var(--spacing-lg);
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius);
  text-align: center;
}

.running-costs__item--old {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

.running-costs__item--new {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.2);
}

.running-costs__title {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
}

.running-costs__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.running-costs__efficiency {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

/* =================================================================
   COST BREAKDOWN COMPONENT
   ================================================================= */
.cost-breakdown__title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.cost-breakdown .cost-total,
.cost-breakdown .cost-net {
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 2px solid var(--color-gray-300);
  font-size: 1.125rem;
  font-weight: 700;
}

.cost-breakdown .cost-total {
  color: var(--color-gray-700);
}

.cost-breakdown .cost-net {
  color: var(--color-primary);
}

/* =================================================================
   ADDITIONAL COSTS COMPONENT
   ================================================================= */
.additional-costs__item {
  padding: var(--spacing-lg);
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius);
}

.additional-costs__title {
  font-size: 1.125rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

/* =================================================================
   INSTALLATION REQUIREMENTS COMPONENT
   ================================================================= */
.installation-requirements__subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.installation-requirements__subtitle:first-child {
  margin-top: 0;
}

/* =================================================================
   INSTALLER QUALIFICATIONS COMPONENT
   ================================================================= */
.installer-qualifications__title,
.installer-questions__title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

/* =================================================================
   FINAL RECOMMENDATIONS COMPONENT
   ================================================================= */
.final-recommendations {
  margin-top: var(--spacing-lg);
}

.final-recommendations__intro {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-700);
}

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

.final-recommendations__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.final-recommendations__item:last-child {
  border-bottom: none;
}

.final-recommendations__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.final-recommendations__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.final-recommendations__content strong {
  color: var(--color-gray-800);
}

.final-recommendations__content .icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background: var(--bg-card-alt);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.final-recommendations__content .icon-link:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

.final-recommendations__content .icon-link__svg {
  width: 16px;
  height: 16px;
  fill: var(--color-primary);
}

.final-recommendations__content .icon-link:hover .icon-link__svg {
  fill: white;
}

@media (max-width: 768px) {
  .final-recommendations__intro {
    font-size: 1rem;
  }
  
  /* Center icon vertically relative to the text on mobile */
  .final-recommendations__item {
    align-items: center;
  }

  .final-recommendations__icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    line-height: 1; /* ensure glyph is centered inside the circle */
  }
  
  .final-recommendations__content {
    display: block; /* stack content; no columns on mobile */
  }

  .final-recommendations__content strong {
    display: block; /* header on its own line */
    margin-bottom: 2px;
  }
}

/* =================================================================
   UTILITIES
   ================================================================= */
.u-text-center {
  text-align: center;
}

.u-mb-0 {
  margin-bottom: 0;
}

.u-mb-sm {
  margin-bottom: var(--spacing-sm);
}

.u-mb-md {
  margin-bottom: var(--spacing-md);
}

.u-mb-lg {
  margin-bottom: var(--spacing-lg);
}

.u-mb-xl {
  margin-bottom: var(--spacing-xl);
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */
@media (max-width: 1024px) {
  .header__title {
    font-size: 2.5rem;
  }
  
  .header__subtitle {
    font-size: 1.125rem;
  }
  
  .section {
    padding: var(--spacing-xl);
  }
}

@media (max-width: 768px) {
  /* Guide Header Mobile Improvements */
  .guide__header__title {
    font-size: 1.75rem !important;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
  }
  
  .guide__header__subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
  }
  
  .guide__header--simple {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .guide__header__meta {
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    margin-top: var(--spacing-sm);
  }
  
  /* Typography Mobile Optimizations */
  .header__title {
    font-size: 1.75rem;
  }
  
  .section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  
  .section__title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
  }
  
  .section__subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }
  
  /* Guide navigation mobile */
  .guide__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .guide__nav__links {
    width: 100%;
    justify-content: flex-start;
  }
  
  .guide__nav__link {
    flex: 1;
    text-align: center;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-xs);
    font-size: 0.875rem;
    white-space: normal;
    line-height: 1.3;
  }
  
  /* Grid layouts */
  .grid--2-cols,
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Table of Contents Mobile Improvements */
  
  
  
  
  
  
  
  
  
  
  /* Cards Mobile Improvements - Reduce Padding */
  .guide .card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .guide .card--stat {
    padding-top: var(--spacing-lg);
  }
  
  .card__title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .card__content {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  .card__content ul {
    margin-bottom: var(--spacing-sm);
  }
  
  .card__content li {
    margin-bottom: var(--spacing-xs);
  }
  
  /* Tables */
  
  
  
  
  
  
  /* Steps Mobile Improvements */
  .step {
    padding: var(--spacing-md);
    padding-top: var(--spacing-2xl);
    min-height: auto;
    margin-bottom: var(--spacing-md);
  }
  
  .step__number {
    left: 50%;
    top: var(--spacing-sm);
    transform: translateX(-50%);
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
  
  .step__title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .step__content {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  /* Recommendations Mobile Improvements */
  .recommendations {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  
  .recommendations__intro {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
  }
  
  .recommendations__item {
    padding: var(--spacing-sm);
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
  }
  
  .recommendations__item::before {
    left: var(--spacing-sm);
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }
  
  .recommendations__item strong {
    font-size: 0.9rem;
    line-height: 1.3;
  }
  
  .recommendations__item p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
  }
  
  /* Icon Links */
  .icon-link {
    padding: 0.25rem;
  }
  
  .icon-link__svg {
    width: 14px;
    height: 14px;
  }
  
  .icon-link--product {
    padding: 0.375rem;
    margin-left: var(--spacing-sm);
  }
  
  .icon-link--product .icon-link__svg {
    width: 18px;
    height: 18px;
  }
  
  /* FAQ Mobile Improvements */
  
  
  
  
  
  
  
  
  
  
  /* Additional Mobile Compactness Improvements */
  
  /* Reduce container padding */
  .guide__container {
    padding: 0 var(--spacing-md);
  }
  
  /* Make all text content more compact */
  p, li {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
  }
  
  /* Compact list styling */
  ul, ol {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
  }
  
  li {
    margin-bottom: var(--spacing-xs);
  }
  
  /* Compact headings */
  h3 {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
  }
  
  h4 {
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
  }
  
  h5, h6 {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
  }
  
  /* Compact alert/notice boxes */
  .guide .alert, .guide .notice, .guide .warning {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
  }
  
  /* Compact button styling */
  .guide .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
  
  /* Compact form elements */
  input, textarea, select {
    padding: var(--spacing-sm);
    font-size: 0.875rem;
  }
  
  /* Compact quote blocks */
  blockquote {
    padding: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    font-size: 0.875rem;
  }
  
  /* Reduce margins between sections */
  .section + .section {
    margin-top: var(--spacing-md);
  }
}

/* =================================================================
   VERY SMALL SCREENS (480px and below)
   ================================================================= */
@media (max-width: 480px) {
  /* Ultra-compact design for very small screens */
  .guide__header__title {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }
  
  .guide__header__subtitle {
    font-size: 0.9rem;
  }
  
  .guide__header--simple {
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .guide__container {
    padding: 0 var(--spacing-sm);
  }
  
  .section {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .section__title {
    font-size: 1.125rem;
  }
  
  .guide .card {
    padding: var(--spacing-sm);
  }

  .guide .card--stat {
    padding-top: var(--spacing-lg);
  }
  
  .card__title {
    font-size: 0.9rem;
  }
  
  .card__content {
    font-size: 0.8rem;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .recommendations {
    padding: var(--spacing-sm);
  }
  
  .installation-process__step {
    padding: var(--spacing-sm);
  }
  
  .installation-process__step-number {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }
  
  /* Ultra-compact text */
  p, li {
    font-size: 0.8rem;
  }
  
  h3 {
    font-size: 1rem;
  }
  
  h4 {
    font-size: 0.9rem;
  }
  
  .guide .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
  }
  
  
  
  
}

/* =================================================================
   PRINT STYLES
   ================================================================= */
@media print {
  .header,
  .cta,
  .btn {
    display: none;
  }
  
  
  
  .section {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
    margin-bottom: var(--spacing-xl);
  }
}

/* CTA blocks on a phone: padding scaled down, content wraps, nothing clips */

/* ── SEG tariff guide ────────────────────────────────────────────────────
   Summary cards, eligibility tags and the comparison tables. Wide screens get
   a sticky header row; narrow screens stack each tariff into a card so the
   "Who can get it" tag is visible without sideways scrolling. */

.guide .seg-summary {
  margin-bottom: var(--spacing-lg);
}

.guide .seg-summary__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
}

.guide .seg-summary--install:hover {
  border-color: var(--color-gray-200);
  box-shadow: none;
}

.seg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.seg-legend__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.seg-table__heading {
  margin-top: var(--spacing-xl);
  scroll-margin-top: var(--spacing-3xl);
}

.seg-table__access {
  display: inline-block;
  padding: 0.125rem var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.seg-table__access--any {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.seg-table__access--import {
  background: var(--color-info-light);
  color: var(--color-primary-dark);
}

.seg-table__access--install {
  background: var(--color-warning-bg);
  color: var(--color-warning-dark);
}

.seg-table__access--check {
  background: var(--color-background-dark);
  color: var(--color-text);
}

.seg-table th,
.seg-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  vertical-align: middle;
}

.seg-table .seg-table__supplier {
  font-size: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  color: var(--color-gray-900);
}

.seg-table .seg-table__rate {
  font-weight: 700;
  color: var(--color-primary-darker);
}

.seg-table__eligibility {
  min-width: 17rem;
}

.seg-table__details {
  display: inline-block;
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.seg-table__details[open] {
  display: block;
  margin-left: 0;
}

.seg-table__summary {
  cursor: pointer;
  color: var(--color-primary);
  padding: var(--spacing-xs) 0;
}

.seg-table__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.seg-table__terms {
  display: block;
  padding-top: var(--spacing-xs);
  color: var(--color-text-light);
}

@media (min-width: 961px) {
  /* overflow: clip keeps the rounded corners without creating a scroll
     container, so the header row can stick to the viewport. */
  .table-wrapper--stack {
    overflow-x: clip;
  }

  .seg-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-primary);
  }
}

@media (max-width: 960px) {
  .table-wrapper--stack {
    overflow: visible;
    box-shadow: none;
    border-radius: 0;
  }

  .table-wrapper--stack::before,
  .table-wrapper--stack::after {
    content: none;
  }

  .seg-table,
  .seg-table tbody {
    display: block;
  }

  .seg-table {
    background: transparent;
    font-size: var(--font-size-sm);
  }

  .seg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Each tariff becomes a compact card: supplier and tariff on the left, the
     rate on the right, then eligibility, then term and source. */
  .seg-table tbody tr,
  .seg-table tbody tr:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "supplier rate"
      "tariff rate"
      "eligibility eligibility"
      "term source";
    column-gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
  }

  .seg-table tbody tr:last-child {
    border-bottom: 1px solid var(--color-border);
  }

  .seg-table th,
  .seg-table td {
    display: block;
    padding: 0;
  }

  .seg-table .seg-table__supplier {
    grid-area: supplier;
    font-size: var(--font-size-base);
  }

  .seg-table .seg-table__tariff {
    grid-area: tariff;
    font-weight: 400;
    color: var(--color-gray-600);
  }

  .seg-table .seg-table__rate {
    grid-area: rate;
    align-self: center;
    justify-self: end;
    max-width: 8rem;
    font-size: var(--font-size-lg);
    text-align: right;
  }

  .seg-table .seg-table__eligibility {
    grid-area: eligibility;
    min-width: 0;
    padding-top: var(--spacing-xs);
  }

  .seg-table .seg-table__term {
    grid-area: term;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  .seg-table .seg-table__source {
    grid-area: source;
    align-self: center;
    font-size: var(--font-size-xs);
    text-align: right;
  }

  /* Keep the small source link at least 24px tall (WCAG 2.2 target size). */
  .seg-table__source .guide__prose-link {
    display: inline-block;
    min-height: 1.5rem;
    padding-top: var(--spacing-xs);
  }
}

/* pages/heat_pump_calculator.css */
/* Heat Pump Calculator - BEM Structure */

.heat-pump-calculator {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Header */
.heat-pump-calculator__header {
  text-align: center;
  margin-bottom: 2rem;
}

.heat-pump-calculator__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.heat-pump-calculator__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

/* Step Navigation */
.heat-pump-calculator__steps-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.heat-pump-calculator__step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.heat-pump-calculator__step-indicator:hover {
  opacity: 0.8;
}

.heat-pump-calculator__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.heat-pump-calculator__step-indicator--active .heat-pump-calculator__step-number {
  background-color: var(--color-primary);
  color: white;
}

.heat-pump-calculator__step-indicator--completed .heat-pump-calculator__step-number {
  background-color: var(--color-success);
  color: white;
}

.heat-pump-calculator__step-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.heat-pump-calculator__step-indicator--active .heat-pump-calculator__step-label {
  color: var(--color-primary);
}

/* Steps */
.heat-pump-calculator__step {
  display: none;
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.heat-pump-calculator__step--active {
  display: block;
}

.heat-pump-calculator__step-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
}

/* Form Elements */
.heat-pump-calculator__form-group {
  margin-bottom: 1.5rem;
}

.heat-pump-calculator__form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.heat-pump-calculator__label {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.heat-pump-calculator__input,
.heat-pump-calculator__select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.heat-pump-calculator__input:focus,
.heat-pump-calculator__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.heat-pump-calculator__input--error {
  border-color: var(--color-error);
}

.heat-pump-calculator__hint {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* Radio Cards */
.heat-pump-calculator__radio-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.heat-pump-calculator__radio-card {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.heat-pump-calculator__radio-card:hover {
  border-color: var(--color-primary-light);
}

.heat-pump-calculator__radio-card:has(input:checked) {
  border-color: var(--color-primary);
  background-color: rgba(34, 197, 94, 0.05);
}

.heat-pump-calculator__radio-card input[type="radio"] {
  margin-right: 1rem;
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
}

.heat-pump-calculator__radio-card-content {
  flex: 1;
}

.heat-pump-calculator__radio-card-title {
  display: block;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.heat-pump-calculator__radio-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.heat-pump-calculator__tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-background-secondary);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Checkboxes */
.heat-pump-calculator__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.heat-pump-calculator__checkbox {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.heat-pump-calculator__checkbox input[type="checkbox"] {
  margin-right: 0.75rem;
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
}

.heat-pump-calculator__checkbox-text {
  flex: 1;
}

/* Actions */
.heat-pump-calculator__actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.heat-pump-calculator__btn {
  padding: 0.875rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.heat-pump-calculator__btn:hover {
  transform: translateY(-1px);
}

.heat-pump-calculator__btn:active {
  transform: translateY(0);
}

.heat-pump-calculator__btn--primary {
  background-color: var(--color-primary);
  color: white;
}

.heat-pump-calculator__btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.heat-pump-calculator__btn--secondary {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.heat-pump-calculator__btn--secondary:hover {
  background-color: var(--color-border);
}

.heat-pump-calculator__btn--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Results Grid */
.heat-pump-calculator__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.heat-pump-calculator__result-card {
  background: var(--color-background-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.heat-pump-calculator__result-card--highlight {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
}

.heat-pump-calculator__result-card--highlight .heat-pump-calculator__result-title,
.heat-pump-calculator__result-card--highlight .heat-pump-calculator__result-detail {
  color: rgba(255, 255, 255, 0.9);
}

.heat-pump-calculator__result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.heat-pump-calculator__result-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.heat-pump-calculator__big-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.heat-pump-calculator__result-currency {
  font-size: 1.5rem;
  font-weight: 600;
}

.heat-pump-calculator__result-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.heat-pump-calculator__result-card--highlight .heat-pump-calculator__result-unit {
  color: rgba(255, 255, 255, 0.8);
}

.heat-pump-calculator__result-detail {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.heat-pump-calculator__result-detail--savings {
  color: var(--color-success);
  font-weight: 500;
}

.heat-pump-calculator__result-card--highlight .heat-pump-calculator__result-detail--savings {
  color: rgba(255, 255, 255, 0.95);
}

/* Charts */
.heat-pump-calculator__charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.heat-pump-calculator__chart {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 250px;
}

.heat-pump-calculator__chart canvas {
  max-height: 250px;
}

/* Section Titles */
.heat-pump-calculator__section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

/* Grants Section */
.heat-pump-calculator__grants {
  margin-bottom: 2rem;
}

.heat-pump-calculator__grant-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  padding: 1.5rem;
}

.heat-pump-calculator__grant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.heat-pump-calculator__grant-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.heat-pump-calculator__grant-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.heat-pump-calculator__grant-desc {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

.heat-pump-calculator__grant-requirements {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.heat-pump-calculator__grant-requirements li {
  margin-bottom: 0.25rem;
}

.heat-pump-calculator__grant-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.heat-pump-calculator__grant-link:hover {
  text-decoration: underline;
}

/* Concerns Section */
.heat-pump-calculator__concerns {
  margin-bottom: 2rem;
}

.heat-pump-calculator__concern {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.heat-pump-calculator__concern-summary {
  padding: 1rem 1.25rem;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.heat-pump-calculator__concern-summary::-webkit-details-marker {
  display: none;
}

.heat-pump-calculator__concern-summary::before {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}

.heat-pump-calculator__concern[open] .heat-pump-calculator__concern-summary::before {
  content: '-';
}

.heat-pump-calculator__concern-content {
  padding: 0 1.25rem 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.heat-pump-calculator__concern-content p {
  margin-bottom: 0.75rem;
}

.heat-pump-calculator__concern-content ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.heat-pump-calculator__concern-content li {
  margin-bottom: 0.25rem;
}

/* CTA Section */
.heat-pump-calculator__cta {
  text-align: center;
  padding: 2rem;
  background: var(--color-background-secondary);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.heat-pump-calculator__cta-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.heat-pump-calculator__cta-text {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 640px) {
  .heat-pump-calculator {
    padding: 1rem;
  }

  .heat-pump-calculator__title {
    font-size: 1.5rem;
  }

  .heat-pump-calculator__step {
    padding: 1.25rem;
  }

  .heat-pump-calculator__form-row {
    grid-template-columns: 1fr;
  }

  .heat-pump-calculator__steps-nav {
    padding: 0;
  }

  .heat-pump-calculator__step-label {
    display: none;
  }

  .heat-pump-calculator__results {
    grid-template-columns: 1fr;
  }

  .heat-pump-calculator__charts {
    grid-template-columns: 1fr;
  }

  .heat-pump-calculator__big-number {
    font-size: 2rem;
  }

  .heat-pump-calculator__grant-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .heat-pump-calculator__actions {
    flex-direction: column-reverse;
  }

  .heat-pump-calculator__btn {
    width: 100%;
  }
}

/* Error Message */
.heat-pump-calculator__error,
.calculator-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #991b1b;
}

.heat-pump-calculator__error strong,
.calculator-error strong {
  color: #7f1d1d;
}

/* pages/heat_pump_guide.css */
/* =================================================================
   AIR SOURCE HEAT PUMP BUYER'S GUIDE
   ================================================================= */
.heat-pump-guide p,
.heat-pump-guide li,
.heat-pump-guide dd,
.heat-pump-guide figcaption {
  font-size: 1rem;
  line-height: 1.65;
}

.heat-pump-guide__hero {
  overflow: hidden;
  margin: 0 0 var(--spacing-2xl);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.heat-pump-guide__hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.heat-pump-guide__inline-figure figcaption {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  font-size: 0.82rem;
}

.heat-pump-guide__intro {
  border-top: 4px solid var(--color-secondary);
}

.heat-pump-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.heat-pump-facts__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg);
  background: linear-gradient(145deg, var(--bg-primary-light), var(--color-surface));
  border: 1px solid var(--color-info-light);
  border-radius: var(--radius-lg);
}

.heat-pump-facts__value {
  color: var(--color-primary-dark);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.15;
}

.heat-pump-facts__label {
  min-height: 3.2rem;
  color: var(--color-gray-700);
  font-weight: 600;
}

.heat-pump-facts__item a {
  align-self: flex-start;
  margin-top: auto;
}

.heat-pump-guide__corrections {
  padding: var(--spacing-xl);
  color: var(--color-secondary);
  background: var(--color-success-bg);
  border: 1px solid var(--color-secondary-light);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

.heat-pump-guide__corrections h2 {
  margin: 0 0 var(--spacing-md);
  color: var(--color-secondary);
  font-size: 1.35rem;
}

.heat-pump-guide__corrections ul,
.heat-pump-cost-grid__item ul,
.heat-pump-grant-grid ul,
.heat-pump-guide__planning-list {
  margin: 0;
  padding-left: 1.25rem;
}

.heat-pump-guide__corrections li + li,
.heat-pump-cost-grid__item li + li,
.heat-pump-grant-grid li + li,
.heat-pump-guide__planning-list li + li {
  margin-top: var(--spacing-sm);
}

.heat-pump-guide__section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr);
  align-items: end;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.heat-pump-guide__section-heading .section__title {
  margin-bottom: 0;
}

.heat-pump-guide__section-heading > p {
  margin: 0;
  color: var(--color-gray-600);
}

.heat-pump-guide__eyebrow,
.heat-pump-model-card__fit {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-secondary-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heat-pump-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xl);
}

.heat-pump-model-card {
  display: flex;
  min-width: 0;
  scroll-margin-top: 5rem;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.heat-pump-model-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.heat-pump-model-card__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 1.45rem;
  line-height: 1.25;
}

.heat-pump-model-card__checked {
  flex: 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--color-secondary-dark);
  background: var(--color-success-bg);
  border: 1px solid var(--color-secondary-light);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.heat-pump-model-card > p {
  margin: 0;
  color: var(--color-gray-600);
}

.heat-pump-model-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin: 0;
}

.heat-pump-model-card__specs > div {
  min-width: 0;
  padding: var(--spacing-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.heat-pump-model-card__specs dt {
  margin-bottom: var(--spacing-xs);
  color: var(--color-gray-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.heat-pump-model-card__specs dd {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 0.9rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.heat-pump-model-card__caveat {
  padding: var(--spacing-md);
  color: var(--color-warning-dark);
  background: var(--bg-warning-light);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.55;
}

.heat-pump-model-card__link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--color-primary-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.heat-pump-guide__comparison {
  margin-top: var(--spacing-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-md);
}

.heat-pump-guide__comparison:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
}

.heat-pump-packages,
#installed-prices {
  scroll-margin-top: 5rem;
}

.heat-pump-cost-answer {
  margin: 0 0 var(--spacing-2xl);
  padding: var(--spacing-xl);
  background: linear-gradient(145deg, var(--bg-primary-light), var(--color-surface));
  border: 1px solid var(--color-info-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.heat-pump-cost-answer__title {
  margin: 0 0 var(--spacing-md);
  color: var(--color-gray-900);
  font-size: 1.35rem;
}

.heat-pump-cost-answer__lead {
  margin: 0 0 var(--spacing-sm);
  color: var(--color-gray-900);
}

.heat-pump-cost-answer__lead strong {
  color: var(--color-primary-dark);
}

.heat-pump-cost-answer__source {
  margin: 0 0 var(--spacing-lg);
  color: var(--color-gray-600);
  font-size: 0.9rem;
}

.heat-pump-cost-answer__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}

.heat-pump-cost-answer__action .heat-pump-gate-note {
  flex: 1 1 18rem;
  margin: 0;
}

.heat-pump-gate-note {
  color: var(--color-gray-700);
  font-size: 0.95rem;
}

.heat-pump-guide__cta .heat-pump-gate-note {
  color: inherit;
  font-size: inherit;
}

.heat-pump-packages__start {
  margin-bottom: var(--spacing-xl);
}

.heat-pump-package-table {
  min-width: 740px;
}

.heat-pump-package-table__offer {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--color-warning-dark);
  font-weight: 600;
}

.heat-pump-price-table th {
  white-space: normal;
}

.heat-pump-package-table th {
  white-space: normal;
}

.heat-pump-package-table tbody th,
.heat-pump-price-table tbody th {
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
}

.heat-pump-package-table th,
.heat-pump-package-table td {
  vertical-align: top;
}

.heat-pump-guide__comparison-table {
  min-width: 920px;
  table-layout: fixed;
}

.heat-pump-guide__comparison caption {
  padding: var(--spacing-lg);
  color: var(--color-gray-900);
  background: linear-gradient(135deg, var(--bg-primary-light), var(--bg-primary-lighter));
  border-bottom: 1px solid var(--color-info-light);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

.heat-pump-guide__comparison-table thead th {
  vertical-align: middle;
  line-height: 1.35;
  white-space: normal;
}

.heat-pump-guide__comparison-table th:nth-child(1) { width: 22%; }
.heat-pump-guide__comparison-table th:nth-child(2) { width: 17%; }
.heat-pump-guide__comparison-table th:nth-child(3) { width: 25%; }
.heat-pump-guide__comparison-table th:nth-child(4) { width: 36%; }

.heat-pump-guide__comparison-table tbody th {
  padding: 1.25rem var(--spacing-md);
  color: var(--color-gray-900);
  background: var(--bg-primary-light);
  border-right: 1px solid var(--color-info-light);
  font-size: 0.92rem;
  letter-spacing: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-align: left;
  text-transform: none;
  vertical-align: top;
  white-space: normal;
}

.heat-pump-guide__comparison-table tbody tr:nth-child(even) th,
.heat-pump-guide__comparison-table tbody tr:hover th,
.heat-pump-guide__comparison-table tbody tr:focus-within th {
  background: var(--bg-primary-lighter);
}

.heat-pump-guide__comparison-table tbody td {
  vertical-align: top;
  line-height: 1.55;
}

.heat-pump-guide__comparison-table tbody td:nth-child(2) {
  color: var(--color-gray-900);
  font-weight: 650;
}

.heat-pump-guide__refresh-note {
  margin: var(--spacing-md) 0 0;
  color: var(--color-gray-600);
  font-size: 0.9rem;
}

.heat-pump-cost-grid,
.heat-pump-grant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.heat-pump-cost-grid__item,
.heat-pump-grant-grid > div {
  padding: var(--spacing-xl);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.heat-pump-cost-grid__item--warning {
  background: var(--bg-warning-light);
  border-color: var(--color-warning);
}

.heat-pump-cost-grid__item h3,
.heat-pump-grant-grid h3,
.heat-pump-guide__note h3,
.heat-pump-guide__quote-box h3 {
  margin-top: 0;
  color: var(--color-gray-900);
}

.heat-pump-guide__formula {
  display: grid;
  grid-template-columns: 1.1fr auto 1.4fr auto 1fr auto 1.2fr;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  color: var(--color-gray-800);
  background: var(--bg-primary-light);
  border: 1px solid var(--color-info-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

.heat-pump-guide__formula > span:nth-child(even) {
  color: var(--color-primary-dark);
  font-size: 1.3rem;
  font-weight: 800;
}

.heat-pump-guide__media-layout,
.heat-pump-installation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
  align-items: start;
  gap: var(--spacing-2xl);
}

.heat-pump-guide__media-copy .section__title {
  margin-bottom: var(--spacing-lg);
}

.heat-pump-checklist {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0;
  padding-left: 1.3rem;
}

.heat-pump-guide__inline-figure {
  overflow: hidden;
  margin: 0;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.heat-pump-guide__inline-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.heat-pump-guide__note,
.heat-pump-guide__quote-box {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--bg-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.heat-pump-guide__note p,
.heat-pump-guide__quote-box p {
  margin-bottom: 0;
}

.heat-pump-installation-steps {
  display: grid;
  gap: var(--spacing-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.heat-pump-installation-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-md);
}

.heat-pump-installation-steps li > span {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  color: white;
  background: var(--color-primary-dark);
  border-radius: 50%;
  font-weight: 800;
}

.heat-pump-installation-steps p {
  margin: var(--spacing-xs) 0 0;
  color: var(--color-gray-600);
}

.heat-pump-guide__inline-figure--installation img {
  min-height: 31rem;
}

.heat-pump-grant-grid {
  margin-top: var(--spacing-xl);
  margin-bottom: 0;
}

.heat-pump-grant-grid p:last-child {
  margin-bottom: 0;
}

.heat-pump-planning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.heat-pump-planning-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.heat-pump-planning-grid__item strong {
  color: var(--color-primary-dark);
  font-size: 1.8rem;
  line-height: 1.1;
}

.heat-pump-planning-grid__item span {
  color: var(--color-gray-700);
  line-height: 1.55;
}

.heat-pump-guide__planning-list {
  margin-bottom: var(--spacing-xl);
}

.heat-pump-related-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.heat-pump-related-guides__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  color: var(--color-gray-800);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.heat-pump-related-guides__card:hover,
.heat-pump-related-guides__card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.heat-pump-related-guides__card > span:first-child {
  color: var(--color-secondary-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.heat-pump-related-guides__card strong {
  color: var(--color-gray-900);
  font-size: 1.05rem;
}

.heat-pump-related-guides__card > span:last-child {
  margin-top: auto;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.heat-pump-guide__cta {
  margin-bottom: var(--spacing-2xl);
}

@media (max-width: 900px) {
  .heat-pump-model-grid,
  .heat-pump-guide__media-layout,
  .heat-pump-installation-grid {
    grid-template-columns: 1fr;
  }

  .heat-pump-guide__section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--spacing-md);
  }

  .heat-pump-guide__inline-figure--installation img {
    min-height: 0;
  }

  .heat-pump-guide__formula {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .heat-pump-guide__formula > span:nth-child(even) {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .heat-pump-facts,
  .heat-pump-cost-grid,
  .heat-pump-grant-grid,
  .heat-pump-planning-grid,
  .heat-pump-related-guides {
    grid-template-columns: 1fr;
  }

  .heat-pump-facts__label {
    min-height: 0;
  }

  .heat-pump-model-card {
    padding: var(--spacing-lg);
  }

  .heat-pump-model-card__heading {
    flex-direction: column;
  }

  .heat-pump-model-card__specs {
    grid-template-columns: 1fr;
  }

  .heat-pump-guide__comparison-table {
    min-width: 840px;
    font-size: 0.85rem;
  }

  .heat-pump-cost-answer {
    padding: var(--spacing-lg);
  }

  /* Stack the installation-route rows so every column is readable without
     sideways scrolling; the price table already fits in three columns. */
  .heat-pump-packages__table-wrapper::before,
  .heat-pump-packages__table-wrapper::after,
  .heat-pump-price-table-wrapper::before,
  .heat-pump-price-table-wrapper::after {
    content: none;
  }

  .heat-pump-package-table {
    min-width: 0;
  }

  .heat-pump-package-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .heat-pump-package-table tbody,
  .heat-pump-package-table tr,
  .heat-pump-package-table th,
  .heat-pump-package-table td {
    display: block;
    width: 100%;
  }

  .heat-pump-package-table tbody th {
    padding-bottom: 0;
  }

  .heat-pump-package-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-gray-900);
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  .heat-pump-guide p,
  .heat-pump-guide li,
  .heat-pump-guide dd {
    font-size: 0.94rem;
  }

  .heat-pump-guide__hero {
    margin-right: calc(var(--spacing-sm) * -1);
    margin-left: calc(var(--spacing-sm) * -1);
    border-radius: var(--radius-md);
  }

  .heat-pump-guide__hero-image {
    aspect-ratio: 4 / 3;
  }

  .heat-pump-guide__corrections,
  .heat-pump-cost-grid__item,
  .heat-pump-grant-grid > div,
  .heat-pump-guide__note,
  .heat-pump-guide__quote-box,
  .heat-pump-planning-grid__item {
    padding: var(--spacing-md);
  }

  .heat-pump-facts__value {
    font-size: 1.4rem;
  }

  .heat-pump-model-card__title {
    font-size: 1.25rem;
  }
}

@media print {
  .heat-pump-model-card,
  .heat-pump-guide__inline-figure,
  .heat-pump-guide__hero {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* pages/inquiries.css */
/* User Inquiries Styles - BEM Methodology */

/* ==========================================
   Inquiries List Page
   ========================================== */

.user-inquiries {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.user-inquiries__header {
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.user-inquiries__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

.user-inquiries__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin: 0;
}

/* Inquiry List */
.user-inquiries__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Inquiry Card */
.user-inquiry-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}

.user-inquiry-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.user-inquiry-card--unread {
  background: var(--color-info-light);
  border-color: var(--color-primary);
}

.user-inquiry-card__company {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.user-inquiry-card__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  object-fit: contain;
  background: white;
  border: 1px solid var(--color-border);
}

.user-inquiry-card__logo-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.user-inquiry-card__company-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.user-inquiry-card__company-name {
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.user-inquiry-card__service {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.user-inquiry-card__preview {
  margin-bottom: var(--spacing-md);
}

.user-inquiry-card__preview p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.user-inquiry-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.user-inquiry-card__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.user-inquiry-card__status {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-md);
  text-transform: capitalize;
}

.user-inquiry-card__status--pending {
  background: #fef3c7;
  color: #92400e;
}

.user-inquiry-card__status--responded {
  background: #d1fae5;
  color: #065f46;
}

.user-inquiry-card__status--closed {
  background: var(--color-background-dark);
  color: var(--color-text-light);
}

.user-inquiry-card__messages {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.user-inquiry-card__unread-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-md);
  margin-left: auto;
}

/* Empty State */
.user-inquiries__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  background: var(--color-background-light);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-border);
}

.user-inquiries__empty-icon {
  width: 64px;
  height: 64px;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.user-inquiries__empty-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

.user-inquiries__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 0 var(--spacing-lg) 0;
  max-width: 400px;
}

.user-inquiries__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.user-inquiries__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ==========================================
   Inquiry Detail Page
   ========================================== */

.inquiry-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.inquiry-detail__header {
  margin-bottom: var(--spacing-xl);
}

.inquiry-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-light);
  text-decoration: none;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
  transition: color 0.2s ease;
}

.inquiry-detail__back:hover {
  color: var(--color-primary);
}

.inquiry-detail__back-icon {
  width: 16px;
  height: 16px;
}

.inquiry-detail__title-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.inquiry-detail__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.inquiry-detail__status {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  text-transform: capitalize;
}

.inquiry-detail__status--pending {
  background: #fef3c7;
  color: #92400e;
}

.inquiry-detail__status--responded {
  background: #d1fae5;
  color: #065f46;
}

.inquiry-detail__status--closed {
  background: var(--color-background-dark);
  color: var(--color-text-light);
}

/* Company Info */
.inquiry-detail__company-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-xl);
}

.inquiry-detail__company-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  object-fit: contain;
  background: white;
  border: 1px solid var(--color-border);
}

.inquiry-detail__company-details {
  flex: 1;
}

.inquiry-detail__company-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.25rem 0;
}

.inquiry-detail__service {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 0 var(--spacing-sm) 0;
}

.inquiry-detail__company-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.inquiry-detail__company-link:hover {
  text-decoration: underline;
}

/* Section Titles */
.inquiry-detail__section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-md) 0;
}

/* Original Inquiry */
.inquiry-detail__original {
  margin-bottom: var(--spacing-xl);
}

/* Messages */
.inquiry-detail__conversation {
  margin-bottom: var(--spacing-xl);
}

.inquiry-detail__messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.inquiry-detail__no-messages {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-light);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  margin: 0;
}

/* Message Bubbles */
.inquiry-detail__message {
  max-width: 80%;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-xl);
}

.inquiry-detail__message--customer {
  background: var(--color-primary);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: var(--radius-sm);
}

.inquiry-detail__message--company {
  background: var(--color-background-light);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

.inquiry-detail__message-content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.inquiry-detail__message-content p {
  margin: 0;
}

.inquiry-detail__message-content p + p {
  margin-top: var(--spacing-sm);
}

.inquiry-detail__message-meta {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-sm);
  opacity: 0.8;
}

.inquiry-detail__message--customer .inquiry-detail__message-meta {
  color: rgba(255, 255, 255, 0.8);
}

.inquiry-detail__message--company .inquiry-detail__message-meta {
  color: var(--color-text-muted);
}

/* Conversation Message (shared partial) */
.conversation-message {
  max-width: 80%;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-xl);
}

.conversation-message--customer {
  background: var(--color-primary);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: var(--radius-sm);
}

.conversation-message--company {
  background: var(--color-background-light);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

.conversation-message__sender {
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.conversation-message--customer .conversation-message__sender {
  color: rgba(255, 255, 255, 0.9);
}

.conversation-message--company .conversation-message__sender {
  color: var(--color-secondary);
}

.conversation-message__content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.conversation-message__content p {
  margin: 0;
}

.conversation-message__meta {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-sm);
}

.conversation-message--customer .conversation-message__meta {
  color: rgba(255, 255, 255, 0.7);
}

.conversation-message--company .conversation-message__meta {
  color: var(--color-text-muted);
}

/* Reply Form */
.inquiry-detail__reply-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.reply-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.reply-form__field {
  width: 100%;
}

.reply-form__textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--font-size-sm);
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s ease;
}

.reply-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.reply-form__actions {
  display: flex;
  justify-content: flex-end;
}

.reply-form__submit {
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--color-secondary);
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reply-form__submit:hover {
  background: #047857;
  transform: translateY(-1px);
}

.reply-form__submit:disabled {
  background: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
  .user-inquiries {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .user-inquiries__title {
    font-size: var(--font-size-xl);
  }

  .user-inquiry-card {
    padding: var(--spacing-md);
  }

  .user-inquiry-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .user-inquiry-card__unread-badge {
    margin-left: 0;
  }

  .inquiry-detail {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .inquiry-detail__title {
    font-size: var(--font-size-lg);
  }

  .inquiry-detail__company-info {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .inquiry-detail__message {
    max-width: 90%;
  }

  .conversation-message {
    max-width: 90%;
  }

  .inquiry-detail__reply-form {
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .user-inquiries__empty {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .user-inquiries__empty-icon {
    width: 48px;
    height: 48px;
  }

  .inquiry-detail__title-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* ==========================================
   Agent-prepared enquiry review (modal and standalone)
   ========================================== */

.inquiry-review__title {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--spacing-sm);
  color: var(--color-text);
}

.inquiry-review__status {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-light);
}

.inquiry-review__status:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.inquiry-review__status-link {
  margin: 0 0 var(--spacing-md);
}

.inquiry-review__details {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-border-light);
}

.inquiry-review__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: var(--spacing-sm);
}

.inquiry-review__row--wide {
  grid-template-columns: 1fr;
}

.inquiry-review__term {
  font-weight: 600;
  color: var(--color-text);
}

.inquiry-review__value {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.inquiry-review__status,
.inquiry-review__message p {
  font-size: var(--font-size-base);
}

.inquiry-review__message p {
  margin: 0 0 var(--spacing-xs);
}

.inquiry-review__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.inquiry-review__link-button {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.inquiry-review__link-button:hover,
.inquiry-review__link-button:focus-visible {
  color: var(--color-primary-dark);
}

@media (max-width: 480px) {
  .inquiry-review__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .inquiry-review__actions .btn {
    width: 100%;
  }
}

/* ==========================================
   Sent enquiry summary (success frame and receipt page)
   ========================================== */

.inquiry-sent__title {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text);
}

.inquiry-sent__text,
.inquiry-sent__reference {
  margin: 0 0 var(--spacing-md);
  line-height: 1.6;
}

.inquiry-sent__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  padding: 0;
  list-style: none;
}

.inquiry-receipt {
  max-width: 44rem;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}

.inquiry-receipt__card {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
}

.inquiry-receipt__title {
  margin: 0 0 var(--spacing-md);
}

/* Pending agent approval notice on the installer profile */
.company-show__pending-enquiry {
  margin: var(--spacing-md) auto;
  max-width: var(--container-max-width);
}

.inquiry-success .inquiry-sent__links {
  align-items: center;
}

/* pages/installer_directory.css */
/* Installers A-Z index (/installers-a-z) */

.installer-directory {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
}

.installer-directory__letter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  margin: var(--spacing-lg) 0;
  padding: 0;
}

.installer-directory__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.installer-directory__letter:hover,
.installer-directory__letter:focus-visible {
  border-color: var(--color-primary);
}

.installer-directory__letter--current {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-white);
}

.installer-directory__letter--empty {
  color: var(--color-text-light);
  background: var(--color-background-light);
}

.installer-directory__companies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-sm) var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.installer-directory__company {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.installer-directory__name {
  display: inline-block;
  min-height: 1.5rem;
  color: var(--color-primary-dark);
  font-weight: 600;
}

.installer-directory__area {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.installer-directory__services {
  flex-basis: 100%;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* pages/installer_quotes.css */
/* Multi-installer quote request (/installer-quotes) */
.installer-quotes {
  max-width: 48rem;
  padding-block: var(--spacing-xl);
}

.installer-quotes__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

.installer-quotes__lead {
  margin: 0 0 var(--spacing-lg);
  color: var(--color-text-light);
}

.installer-quotes__error {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-danger-light);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.installer-quotes__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.installer-quotes__companies {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

.installer-quotes__legend {
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-text);
}

.installer-quotes__company {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.installer-quotes__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
}

.installer-quotes__company-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--color-text);
}

.installer-quotes__company-rating {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.installer-quotes__attachment {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.installer-quotes__attachment-summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.installer-quotes__attachment-text {
  margin: var(--spacing-sm) 0 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.installer-quotes__consent {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.installer-quotes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.installer-quotes__sent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  list-style: none;
}

.installer-quotes__sent-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-xs) var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-success-bg);
  border-radius: var(--radius-sm);
}

.installer-quotes__sent-name {
  font-weight: 600;
  color: var(--color-text);
}

.installer-quotes__sent-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.installer-quotes__reference,
.installer-quotes__link {
  color: var(--color-primary);
}

.installer-quotes__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-left: var(--spacing-lg);
}

@media (max-width: 768px) {
  .installer-quotes__actions .btn {
    width: 100%;
  }
}

.installer-quotes__form > .form-group,
.installer-quotes__form > .form-row {
  margin-bottom: 0;
}

/* pages/locations.css */
/* Solar installer geo hub and location pages */
.geo-hub,
.geo-location {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.geo-hub__header,
.geo-location__header {
  margin-bottom: var(--spacing-lg);
}

.geo-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--spacing-lg);
}

.geo-hub__london {
  display: grid;
  grid-template-columns: minmax(12rem, 0.35fr) 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.geo-hub__london-header {
  align-self: start;
}

.geo-hub__london-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm) var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.geo-hub__borough-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary-dark);
}

.geo-hub__london,
.geo-hub__card,
.geo-location__local-content,
.geo-location__next-steps,
.geo-location__sources,
.geo-location__empty,
.geo-location__footer-grid > div {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
}

.geo-hub__title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.geo-hub__installer-count {
  margin: var(--spacing-xs) 0 0;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.geo-hub__borough-link .geo-hub__installer-count {
  margin: 0;
}

.geo-hub__title a,
.geo-hub__borough-link,
.geo-location__footer-grid a {
  color: var(--color-primary-dark);
}

.geo-location__footer-grid ul,
.geo-location__sources ul,
.geo-location__next-steps ol {
  margin: var(--spacing-md) 0 0;
  padding-left: var(--spacing-lg);
}

.geo-location__footer-grid li,
.geo-location__sources li,
.geo-location__next-steps li {
  margin-bottom: var(--spacing-sm);
}

.geo-location__next-steps a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.search-filter-section--geo {
  --search-control-height: 3.5rem;
  margin: 0 0 var(--spacing-xl);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background-light);
}

/* Labels belong above the fields, not inside the button's height. */
.search-filter-section--geo .search-input,
.search-filter-section--geo .btn-search {
  height: var(--search-control-height);
}

.search-filter-section--geo .btn-search {
  align-self: flex-end;
}

.search-filter-section--geo .search-input-group {
  align-items: end;
}

.search-field-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.search-service-field {
  min-width: 12rem;
}

.geo-location__results,
.geo-location__local-content,
.geo-location__next-steps,
.geo-location__sources,
.geo-location__figure,
.geo-location__faq,
.geo-location__footer-grid {
  margin-top: var(--spacing-2xl);
}

.geo-location__section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.geo-location__section-heading h2,
.geo-location__section-heading p,
.geo-location__local-content h2,
.geo-location__next-steps h2,
.geo-location__sources h2,
.geo-location__footer-grid h2 {
  margin-top: 0;
}

.geo-location__section-heading p {
  color: var(--color-text-light);
  white-space: nowrap;
}

.geo-location__empty {
  text-align: center;
}

.geo-location__empty .btn {
  margin-top: var(--spacing-md);
}

.geo-location__figure {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background-light);
}

.geo-location__image {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
}

.geo-location__image-credit {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.geo-location__faq .faq__answer {
  margin-left: 0;
}

.geo-location__footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

@media (max-width: 768px) {
  .search-filter-section--geo {
    --search-control-height: 3rem;
  }

  .geo-hub,
  .geo-location {
    padding-top: var(--spacing-lg);
  }

  .search-filter-section--geo .search-input-group,
  .geo-location__section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .search-service-field,
  .geo-location__footer-grid {
    width: 100%;
  }

  .geo-hub__london,
  .geo-hub__london-list {
    grid-template-columns: 1fr;
  }

  .geo-hub__london {
    gap: var(--spacing-md);
  }

  .geo-location__footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .search-filter-section--geo {
    --search-control-height: 2.75rem;
  }
}

/* pages/login.css */
/* Login Page Styles - BEM Methodology */

.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: white;
}

.login__header {
  max-width: 28rem;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.login__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 2rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.login__logo:hover {
  transform: scale(1.1);
}

.login__title {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  font-weight: 800;
  color: #111827;
}

.login__subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.5;
}

.login__container {
  max-width: 28rem;
  margin: 1rem auto 0;
  width: 100%;
}

.login__card {
  background: white;
  padding: 1.5rem 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
}

/* Alert Messages */
.login__alert {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  padding: 1rem;
}

.login__alert--success {
  background-color: #f0fdf4;
}

.login__alert--error {
  background-color: #fef2f2;
}

.login__alert-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.login__alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.login__alert-icon--success {
  color: #10b981;
}

.login__alert-icon--error {
  color: #ef4444;
}

.login__alert-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.login__alert-text--success {
  color: #065f46;
}

.login__alert-text--error {
  color: #991b1b;
}

/* Google Sign In Button - Form wrapper */
.login__google-btn {
  width: 100%;
}

.login__google-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  background: white;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}

.login__google-btn button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.login__google-btn button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
}

.login__google-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Divider */
.login__divider {
  margin: 1.25rem 0;
  position: relative;
}

.login__divider-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.login__divider-border {
  width: 100%;
  border-top: 1px solid #e5e7eb;
}

.login__divider-text-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 0.875rem;
}

.login__divider-text {
  padding: 0 1rem;
  background: white;
  color: #6b7280;
  font-weight: 500;
}

/* Email Form */
.login__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login__form-group {
  display: flex;
  flex-direction: column;
}

.login__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.login__input {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-size: 1rem;
  color: #111827;
  background: white;
  transition: all 0.2s ease;
}

.login__input::placeholder {
  color: #9ca3af;
}

.login__input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #10b981;
}

.login__submit {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1.5rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

.login__submit:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.login__submit:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #10b981;
}

/* Info Section */
.login__info {
  margin-top: 1rem;
  text-align: center;
}

.login__info-text {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

.login__info-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.login__info-icon {
  width: 1rem;
  height: 1rem;
  color: #059669;
  flex-shrink: 0;
}

.login__info-note {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Contractor CTA Section */
.login__contractor-cta {
  margin-top: 1.5rem;
}

.login__contractor-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.login__contractor-title {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  margin: 0 0 0.5rem;
}

.login__contractor-text {
  font-size: 0.875rem;
  color: #15803d;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.login__contractor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #059669;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login__contractor-link:hover {
  color: #047857;
  text-decoration: underline;
}

.login__contractor-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.login__contractor-link:hover .login__contractor-arrow {
  transform: translateX(0.25rem);
}

/* Responsive Design */
@media (min-width: 640px) {
  .login {
    padding: 2rem 1.5rem;
  }

  .login__card {
    padding: 2rem 2.5rem;
    border-radius: 1rem;
  }

  .login__divider {
    margin: 1.5rem 0;
  }
}

/* pages/privacy.css */
/* Privacy Policy */
.privacy-policy {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl);
}

.privacy-policy__header {
  margin-bottom: var(--spacing-lg);
}

.privacy-policy__updated {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: var(--spacing-sm) 0 0;
}

.privacy-policy__contents,
.privacy-policy__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.privacy-policy__contents h2,
.privacy-policy__section h2 {
  color: var(--color-primary-dark);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
}

.privacy-policy__contents ul,
.privacy-policy__section ul {
  padding-left: var(--spacing-lg);
}

.privacy-policy__contents li,
.privacy-policy__section li {
  line-height: 1.65;
  margin-bottom: var(--spacing-sm);
}

.privacy-policy__contents a,
.privacy-policy__section a,
.form-privacy-notice a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.privacy-policy__contents a:hover,
.privacy-policy__section a:hover,
.form-privacy-notice a:hover {
  color: var(--color-primary);
}

.privacy-policy__contents a:focus-visible,
.privacy-policy__section a:focus-visible,
.form-privacy-notice a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.privacy-policy__section p,
.privacy-policy__section address,
.privacy-policy__purposes dd {
  color: var(--color-text);
  line-height: 1.7;
}

.privacy-policy__section address {
  font-style: normal;
  font-weight: 600;
}

.privacy-policy__right-to-object {
  background: var(--color-info-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.privacy-policy__purposes {
  display: grid;
  gap: var(--spacing-md);
}

.privacy-policy__purposes > div {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-md);
}

.privacy-policy__purposes dt {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.privacy-policy__purposes dd {
  margin: 0;
}

.form-privacy-notice {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0 0 var(--spacing-md);
}

@media (max-width: 640px) {
  .privacy-policy {
    padding: var(--spacing-md) 0 var(--spacing-xl);
  }

  .privacy-policy__contents,
  .privacy-policy__section {
    padding: var(--spacing-md);
  }

  .privacy-policy__contents h2,
  .privacy-policy__section h2 {
    font-size: var(--font-size-xl);
  }
}

/* pages/reviews.css */
/* Reviews Page Styles - BEM naming */

/* Reviews section */
.reviews-section {
  background-color: var(--color-background-light);
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.reviews-section__title {
  margin: 0 0 20px 0;
  font-size: 1.3rem;
  color: var(--color-text);
}

.reviews-section__subtitle {
  margin: 20px 0 15px 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

.reviews-section__sub-subtitle {
  margin: 15px 0 10px 0;
  font-size: 1rem;
  color: var(--color-text);
}

/* Review summary */
.review-summary {
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.review-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.overall-rating {
  text-align: left;
}

.rating-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.rating-numbers {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.rating-numbers__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.rating-scale {
  font-size: 1.2rem;
  color: var(--color-text-light);
}

.rating-subtitle {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.source-count {
  margin-left: 5px;
}

/* Recommendation score */
.recommendation-score {
  text-align: center;
  padding: 10px;
  background-color: var(--color-background-light);
  border-radius: 6px;
}

.recommendation-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #27ae60;
}

.recommendation-label {
  font-size: 0.8rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Rating distribution */
.rating-distribution {
  margin-bottom: 20px;
}

.distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.distribution-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.star-label {
  width: 30px;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.count-label {
  width: 30px;
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Sentiment analysis */
.sentiment-summary {
  margin-bottom: 20px;
}

.sentiment-indicator {
  margin-bottom: 10px;
}

.sentiment-breakdown {
  display: flex;
  gap: 15px;
  font-size: var(--font-size-sm);
}

.sentiment-item {
  display: flex;
  gap: 5px;
}

.sentiment-percentage {
  font-weight: 600;
}

/* Service quality */
.service-quality {
  margin-bottom: 20px;
}

.quality-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quality-metric {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-name {
  width: 120px;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.metric-score {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 35px;
}

/* Review sources */
.review-sources {
  margin-bottom: 20px;
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.source-item {
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.source-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.source-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.source-name {
  font-weight: 600;
  color: var(--color-text);
}

.source-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.source-stats {
  display: flex;
  gap: 15px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.source-summary {
  margin: 8px 0;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.4;
}

.source-link {
  margin-top: 8px;
}

.external-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.external-link:hover {
  text-decoration: underline;
}

/* Legacy classes for backwards compatibility */
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rating-numbers .rating-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
}

.reviews-section h3 {
  margin: 0 0 20px 0;
  font-size: 1.3rem;
  color: var(--color-text);
}

.reviews-section h4 {
  margin: 20px 0 15px 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

/* "Overall Customer Feedback" and "No Reviews Available" were re-leveled
   h4 -> h3 for heading-outline correctness (no skipped levels). Keep them at
   the prior h4 sub-heading size: placed AFTER the generic ".reviews-section h3"
   above, this same-specificity rule wins on desktop via source order, while the
   higher-specificity "@media (max-width:480px) .no-reviews-content h3" override
   still governs the small-screen size — so sizes are unchanged at both widths. */
.overall-summary h3,
.no-reviews h3 {
  margin: 20px 0 15px 0;
  font-size: 1.1rem;
}

.reviews-section h5 {
  margin: 15px 0 10px 0;
  font-size: 1rem;
  color: var(--color-text);
} 
/* pages/roof_visualizer.css */
/* Roof Visualizer - BEM */

.roof-visualizer {
  margin-bottom: var(--spacing-lg);
}

/* Address Autocomplete (Google Places web component) */
.address-autocomplete {
  margin-top: var(--spacing-xs);
}

.address-autocomplete gmp-place-autocomplete {
  display: block;
  width: 100%;
  /* The widget follows color-scheme and rendered with a dark input on the
     light page — pin it to the light theme to match our form fields. */
  color-scheme: light;
  --gmp-mat-color-surface: var(--color-surface);
  --gmp-mat-color-on-surface: var(--color-text);
}

/* Map Wrapper */
.roof-visualizer__map-wrapper {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Map */
.roof-visualizer__map {
  width: 100%;
  height: 400px;
  border-radius: 0;
  overflow: hidden;
  border: none;
  position: relative;
  background: var(--color-background-dark);
}

.roof-visualizer__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--spacing-md);
  color: var(--color-text-light);
}

.roof-visualizer__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: roof-visualizer-spin 0.8s linear infinite;
}

@keyframes roof-visualizer-spin {
  to { transform: rotate(360deg); }
}

.roof-visualizer__map-instruction {
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-text-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  pointer-events: none;
}

/* Satellite Detection Badge */
.roof-visualizer__detection {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary);
}

.roof-visualizer__detection-header {
  margin-bottom: var(--spacing-md);
}

.roof-visualizer__detection-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-success-bg);
  color: var(--color-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Results panel */
.roof-visualizer__panel {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.roof-visualizer__panel--hidden {
  display: none;
}

.roof-visualizer__panel--loading {
  opacity: 0.6;
  pointer-events: none;
}

.roof-visualizer__panel-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-md) 0;
}

.roof-visualizer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.roof-visualizer__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--color-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.roof-visualizer__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roof-visualizer__stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* Roof Details Section */
.roof-visualizer__details-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.roof-visualizer__details-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-xs) 0;
}

.roof-visualizer__details-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 0 var(--spacing-lg) 0;
}

/* Roof segments */
.roof-visualizer__segments {
  margin-top: var(--spacing-lg);
}

.roof-visualizer__segments-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--color-text);
}

.roof-visualizer__segments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.roof-visualizer__segment {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.roof-visualizer__segment--best {
  border-color: var(--color-secondary);
  background: var(--color-success-bg);
}

.roof-visualizer__segment-direction {
  font-weight: 600;
  color: var(--color-text);
}

.roof-visualizer__segment-detail {
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

/* Error panel */
.roof-visualizer__error {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  color: var(--color-warning-dark);
}

.roof-visualizer__error p {
  margin: 0 0 var(--spacing-sm) 0;
}

.roof-visualizer__error p:last-child {
  margin-bottom: 0;
}

.roof-visualizer__error-hint {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.roof-visualizer__notice {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-info-light);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}

.roof-visualizer__notice p {
  margin: 0 0 var(--spacing-sm) 0;
}

.roof-visualizer__notice p:last-child {
  margin-bottom: 0;
}

.roof-visualizer__notice-hint {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* Unavailable state */
.roof-visualizer__unavailable {
  padding: var(--spacing-xl);
  text-align: center;
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
}

/* Panel count label on map */
.roof-visualizer__panel-count-label {
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-gold);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.roof-visualizer__btn--hidden {
  display: none;
}

/* Navigation actions */
.roof-visualizer__nav-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* Draw-your-own-roof */
.roof-visualizer__draw-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.roof-visualizer__draw-btn {
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-surface);
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.roof-visualizer__draw-btn:hover {
  background: var(--color-success-bg);
}

.roof-visualizer__draw-btn--active {
  background: var(--color-secondary);
  color: var(--color-text-white);
}

.roof-visualizer__draw-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.roof-visualizer__draw-toolbar {
  margin-top: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

.roof-visualizer__draw-toolbar--hidden {
  display: none;
}

.roof-visualizer__draw-instruction {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.roof-visualizer__draw-area {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

.roof-visualizer__draw-warning {
  margin: 0 0 var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-warning-dark);
  font-size: var(--font-size-sm);
}

.roof-visualizer__draw-warning--hidden {
  display: none;
}

.roof-visualizer__draw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.roof-visualizer__draw-action {
  min-height: 44px;
}

.roof-visualizer__draw-exit {
  display: inline-block;
  padding: var(--spacing-xs) 0;
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}

.roof-visualizer__draw-exit:hover {
  color: var(--color-text);
}

.roof-visualizer__draw-cta {
  margin-bottom: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .roof-visualizer__map {
    height: 300px;
  }

  .roof-visualizer__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .roof-visualizer__nav-actions {
    flex-direction: column;
    width: 100%;
  }

  .roof-visualizer__nav-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .roof-visualizer__map {
    height: 250px;
  }

  .roof-visualizer__stats {
    grid-template-columns: 1fr;
  }

  .roof-visualizer__draw-actions {
    flex-direction: column;
  }

  .roof-visualizer__draw-action {
    width: 100%;
  }
}

/* pages/saved_calculation.css */
/* Saved Calculation Page - BEM Methodology */

.saved-calculation {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

/* Header */
.saved-calculation__header {
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.saved-calculation__breadcrumb {
  margin-bottom: var(--spacing-lg);
}

.saved-calculation__breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.saved-calculation__breadcrumb-link:hover {
  color: var(--color-primary);
}

.saved-calculation__breadcrumb-icon {
  font-size: var(--font-size-lg);
}

.saved-calculation__header-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.saved-calculation__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.saved-calculation__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.saved-calculation__header-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Content */
.saved-calculation__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

/* Sections */
.saved-calculation__results,
.saved-calculation__parameters,
.saved-calculation__companies {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

.saved-calculation__section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-lg) 0;
}

/* Stats Grid */
.saved-calculation__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.saved-calculation__stat {
  background: var(--color-background-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
}

.saved-calculation__stat--primary {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
}

.saved-calculation__stat--success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
}

.saved-calculation__stat--info {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  border: 1px solid #a5b4fc;
}

.saved-calculation__stat--accent {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
}

.saved-calculation__stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.saved-calculation__stat-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

/* Details Grid */
.saved-calculation__details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.saved-calculation__detail {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.saved-calculation__detail-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saved-calculation__detail-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* Parameters Grid */
.saved-calculation__params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.saved-calculation__param {
  background: var(--color-background-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.saved-calculation__param-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.saved-calculation__param-value {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
}

/* Companies */
.saved-calculation__companies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.saved-calculation__company-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.saved-calculation__company-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.saved-calculation__company-logo {
  margin-bottom: var(--spacing-md);
}

.saved-calculation__company-logo-img {
  /* Logo slot: fixed height, flexible width so wide brand logos render at their
     natural aspect instead of being shrunk into a square. */
  height: 64px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  object-fit: contain;
  background: white;
  border: 1px solid var(--color-border);
}

.saved-calculation__company-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.saved-calculation__company-info {
  flex: 1;
  margin-bottom: var(--spacing-md);
}

.saved-calculation__company-name {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: var(--spacing-xs);
}

.saved-calculation__company-name:hover {
  color: var(--color-primary);
}

.saved-calculation__company-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.saved-calculation__company-stars {
  display: flex;
  font-size: var(--font-size-sm);
}

.saved-calculation__company-star {
  color: var(--color-border);
}

.saved-calculation__company-star--filled {
  color: var(--color-accent);
}

.saved-calculation__company-reviews {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.saved-calculation__company-actions {
  width: 100%;
}

.saved-calculation__companies-hint {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.saved-calculation__companies-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.saved-calculation__see-all-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.saved-calculation__see-all-link:hover {
  text-decoration: underline;
}

/* CTA Section */
.saved-calculation__cta {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #047857 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  color: white;
}

.saved-calculation__cta-content {
  margin-bottom: var(--spacing-lg);
}

.saved-calculation__cta-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-sm) 0;
  color: white;
}

.saved-calculation__cta-text {
  font-size: var(--font-size-base);
  margin: 0;
  opacity: 0.9;
}

.saved-calculation__cta .btn--primary {
  background: white;
  color: var(--color-secondary);
  font-weight: 600;
}

.saved-calculation__cta .btn--primary:hover {
  background: var(--color-background-light);
}

/* Footer Actions */
.saved-calculation__footer-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

/* Responsive */
@media (max-width: 1024px) {
  .saved-calculation__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .saved-calculation__details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .saved-calculation__params-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .saved-calculation__companies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .saved-calculation {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .saved-calculation__header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .saved-calculation__title {
    font-size: var(--font-size-xl);
  }

  .saved-calculation__header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .saved-calculation__header-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .saved-calculation__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .saved-calculation__details-grid {
    grid-template-columns: 1fr;
  }

  .saved-calculation__params-grid {
    grid-template-columns: 1fr 1fr;
  }

  .saved-calculation__companies-grid {
    grid-template-columns: 1fr;
  }

  .saved-calculation__footer-actions {
    flex-direction: column;
  }

  .saved-calculation__footer-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .saved-calculation__stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .saved-calculation__stat {
    padding: var(--spacing-md);
  }

  .saved-calculation__stat-value {
    font-size: var(--font-size-xl);
  }

  .saved-calculation__params-grid {
    grid-template-columns: 1fr;
  }

  .saved-calculation__results,
  .saved-calculation__parameters,
  .saved-calculation__companies {
    padding: var(--spacing-md);
  }

  .saved-calculation__cta {
    padding: var(--spacing-xl) var(--spacing-md);
  }
}

/* pages/solar_calculator.css */
/* Solar Calculator Styles */

/* Field Validation Styles */
.form-control.invalid {
  border: 1px solid #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-control.invalid:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.form-group.has-error .form-control {
  border-color: #dc2626;
}

.form-group.has-error label {
  color: #dc2626;
}

.field-error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* Autocomplete Styles for Solar Calculator */
.autocomplete-container {
  position: relative;
  width: 100%;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.autocomplete-results.hidden {
  display: none;
}

.autocomplete-results.visible {
  display: block;
}

.autocomplete-item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.autocomplete-item.selected {
  background-color: var(--color-primary);
  color: white;
}

/* Ensure autocomplete input has proper border radius when dropdown is open */
.autocomplete-container .form-control:focus {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.autocomplete-container:has(.autocomplete-results.visible) .form-control {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Main Container */
.solar-calculator-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl);
  padding-top: var(--spacing-3xl); /* Add more top padding */
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
}

/* Header Section */
.calculator-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.calculator-header h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calculator-subtitle {
  font-size: var(--font-size-lg);
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.calculator-header-actions {
  margin-top: var(--spacing-xl);
  display: flex;
  justify-content: center;
}

.btn-header-guide {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-xl);
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.btn-header-guide:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  color: var(--color-text-white);
  text-decoration: none;
}

/* Main Content */
.calculator-content {
  background: var(--color-background);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
}

/* Single Column Layout */
.calculator-form {
  width: 100%;
  margin-bottom: var(--spacing-3xl);
}

.calculator-results {
  width: 100%;
}

/* Calculator Sections */
.calculator-section {
  margin-bottom: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
}

.calculator-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.calculator-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

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

.calculator-section h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-text);
  margin-bottom: var(--spacing-xl);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.calculator-section h2::before {
  content: counter(section-counter);
  counter-increment: section-counter;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.calculator-content {
  counter-reset: section-counter;
}

/* Form Rows - Compact Layout */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-row:last-child {
  margin-bottom: 0;
}

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
  transition: color 0.2s ease;
}

.form-control {
  width: 100%;
  height: 48px;
  padding: var(--spacing-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.3s ease;
  background: var(--color-background);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Better text centering for select elements */
.calculator-form select.form-control {
  padding-left: var(--spacing-md);
  padding-top: 10px;
  padding-bottom: 14px;
  line-height: 1.4;
}

/* Ensure consistent styling for different input types */
input.form-control,
select.form-control,
textarea.form-control {
  height: 48px;
  min-height: 48px;
}

/* Custom dropdown arrow for select elements */
.calculator-form select.form-control {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 16px;
  background-color: var(--color-background);
  padding-right: calc(var(--spacing-md) + 24px);
  cursor: pointer;
}

.calculator-form select.form-control:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-color: #fefefe;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  background: #fefefe;
}

.form-control:hover:not(:focus) {
  border-color: var(--color-primary-light);
}

/* Remove number input spinners for consistency */
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].form-control {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Focus and accessibility improvements */
.form-control:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-hint {
  display: block;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.5;
  padding-left: var(--spacing-sm);
  border-left: 3px solid var(--color-border-light);
}

/* Special styling for custom size group */
#custom-size-group {
  margin-top: var(--spacing-md);
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-warning);
  animation: fadeIn 0.3s ease;
}

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

/* Calculator Actions */
.calculator-actions {
  text-align: center;
  margin: var(--spacing-3xl) 0;
  padding: var(--spacing-2xl);
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-light);
}

/* Button text visibility */
.button-text-mobile {
  display: none;
}

.button-text-desktop {
  display: inline;
}

.btn-large {
  padding: var(--spacing-xl) var(--spacing-3xl);
  font-size: var(--font-size-lg);
  font-weight: 600;
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-white);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-large:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

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

/* Results Section */
.results-container {
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-3xl);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  animation: slideUp 0.5s ease-out;
  scroll-margin-top: var(--spacing-xl);
}

@media (max-width: 768px) {
  .results-container {
    scroll-margin-top: var(--spacing-md);
  }
}

/* Results Placeholder */
.results-placeholder {
  padding: var(--spacing-3xl);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-2xl);
  border: 2px dashed var(--color-warning);
  text-align: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-2xl);
}

.placeholder-content {
  max-width: 500px;
}

.placeholder-content h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  font-weight: 600;
}

.placeholder-content p {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-2xl);
  line-height: 1.6;
}

.placeholder-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  text-align: left;
}

.feature-item {
  background: rgba(255, 255, 255, 0.6);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.feature-item strong {
  display: block;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.feature-item p {
  color: var(--color-text-light);
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

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

.results-container h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Result Cards */
.result-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Remove background and border from recommendations card */
.result-card:has(#recommendations-list) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Fallback for browsers that don't support :has() */
.result-card.recommendations-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Removed blue border from result cards
.result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
*/

.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.result-card h3 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-bottom: var(--spacing-xl);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.result-card h3::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
}

.result-item {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid var(--color-border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.result-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.result-item:hover::before {
  opacity: 1;
}

.result-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.result-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

.result-note {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}

/* Monthly Chart */
.chart-container {
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-background);
}

#monthly-generation-chart {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Recommendations */
.recommendations {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-md);
}

.recommendations li {
  position: relative;
  padding: var(--spacing-lg);
  padding-left: var(--spacing-3xl);
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-success);
  color: var(--color-text);
  line-height: 1.6;
  font-size: var(--font-size-base);
  transition: all 0.3s ease;
}

.recommendations li:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.recommendations li::before {
  content: "✓";
  position: absolute;
  left: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-success);
  font-weight: 700;
  font-size: var(--font-size-lg);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: var(--font-size-sm);
}

/* Result Actions */
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.result-actions .btn {
  position: relative;
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius-xl);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: none;
  letter-spacing: 0.025em;
  min-width: 200px;
  min-height: 52px;
  border: 2px solid transparent;
  text-align: center;
  overflow: hidden;
}

.result-actions .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.result-actions .btn:hover::before {
  left: 100%;
}

.result-actions .btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.result-actions .btn:active {
  transform: translateY(-1px) scale(1.01);
  transition: all 0.1s;
}

/* Enhanced button variants for result actions */
.result-actions .btn-secondary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-color: #10b981;
}

.result-actions .btn-secondary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  border-color: #059669;
}

.result-actions .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-color: #3b82f6;
}

.result-actions .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border-color: #2563eb;
}

.result-actions .btn-outline {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #3b82f6;
  border-color: #3b82f6;
  position: relative;
}

.result-actions .btn-outline:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-color: #3b82f6;
}

/* Button icon and text styling */
.result-actions .btn-icon {
  display: inline-block;
  margin-right: var(--spacing-sm);
  font-size: 1.1em;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.result-actions .btn-text {
  display: inline-block;
  vertical-align: middle;
}

/* Responsive adjustments for result actions */
@media (max-width: 768px) {
  .result-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
  }
  
  .result-actions .btn {
    min-width: 100%;
    min-height: 48px;
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  .result-actions .btn-icon {
    margin-right: var(--spacing-xs);
    font-size: 1em;
  }
}

/* Loading State */
.calculating {
  position: relative;
  pointer-events: none;
}

.calculating::after {
  content: "Calculating your solar potential...";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-white);
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-radius: var(--radius-xl);
  font-weight: 600;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-lg);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Responsive Design */
@media (max-width: 968px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .calculator-results {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .results-placeholder {
    min-height: 300px;
  }

  .placeholder-content {
    max-width: 100%;
  }

  .placeholder-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .solar-calculator-container {
    padding: var(--spacing-md);
    padding-top: var(--spacing-2xl); /* Maintain good top spacing on mobile */
    min-height: auto;
  }

  .calculator-content {
    padding: var(--spacing-md);
  }

  .calculator-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }

  .calculator-header {
    padding: var(--spacing-lg) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-lg); /* Add top margin to push header down from top */
  }

  .calculator-header h1 {
    font-size: var(--font-size-2xl);
  }

  .calculator-subtitle {
    font-size: var(--font-size-sm);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  /* Reduce form group spacing on mobile */
  .form-group {
    margin-bottom: var(--spacing-md);
  }

  /* Make form controls slightly smaller on mobile */
  .form-control {
    height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }

  input.form-control,
  select.form-control,
  textarea.form-control {
    height: 44px;
    min-height: 44px;
  }

  /* Compact form hints */
  .form-hint {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-xs);
  }

  /* Reduce section headings */
  .calculator-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
  }

  .calculator-section h2::before {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs);
  }

  /* Compact calculator actions */
  .calculator-actions {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
  }

  /* Make button single line and compact */
  .btn-large {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    white-space: nowrap;
  }

  /* Show mobile button text on small screens */
  .button-text-mobile {
    display: inline;
  }

  .button-text-desktop {
    display: none;
  }

  /* Results section optimization */
  .results-container {
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
  }

  .results-container h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }

  .result-card {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  .result-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
  }

  .result-card h3::before {
    width: 6px;
    height: 6px;
  }

  .result-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .result-item {
    padding: var(--spacing-sm);
  }

  .result-value {
    font-size: var(--font-size-lg);
  }

  .result-label {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
  }

  /* Compact results placeholder */
  .results-placeholder {
    padding: var(--spacing-lg);
    min-height: 200px;
  }

  .placeholder-content h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
  }

  .placeholder-content p {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
  }

  .placeholder-features {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .feature-item {
    padding: var(--spacing-sm);
  }

  .feature-item strong {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
  }

  .feature-item p {
    font-size: var(--font-size-xs);
  }

  .result-actions {
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-md);
  }

  .result-actions .btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .chart-container {
    height: 180px;
    margin: var(--spacing-sm) 0;
  }

  .recommendations {
    gap: var(--spacing-xs);
  }

  .recommendations li {
    padding: var(--spacing-sm);
    padding-left: calc(var(--spacing-xl) + var(--spacing-xs)); /* Ensure icon has enough space */
  }

  .recommendations li::before {
    left: var(--spacing-sm);
    width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
  }

  /* Header guide button */
  .btn-header-guide {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .solar-calculator-container {
    padding: var(--spacing-sm);
    padding-top: var(--spacing-xl); /* Slightly less but still good top spacing */
  }

  .calculator-header {
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-md); /* Add top margin for small screens too */
  }

  .calculator-header h1 {
    font-size: var(--font-size-xl);
  }

  .calculator-content {
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
  }

  .calculator-section {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
  }

  /* Even more compact on very small screens */
  .form-control {
    height: 40px;
    font-size: var(--font-size-sm);
  }

  input.form-control,
  select.form-control,
  textarea.form-control {
    height: 40px;
    min-height: 40px;
  }

  .result-item {
    padding: var(--spacing-sm);
  }

  .result-value {
    font-size: var(--font-size-base);
  }

  .recommendations li {
    padding: var(--spacing-sm);
    padding-left: calc(var(--spacing-xl) + var(--spacing-sm)); /* Extra space for icon */
  }

  /* Hide header actions on very small screens to save space */
  .calculator-header-actions {
    display: none;
  }

  /* Further reduce result spacing on very small screens */
  .results-container {
    padding: var(--spacing-sm);
  }

  .result-card {
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
  }

  .result-item {
    padding: var(--spacing-xs);
  }

  .result-value {
    font-size: var(--font-size-base);
  }
  
  /* Extra small screen adjustments for result actions */
  .result-actions {
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
  }
  
  .result-actions .btn {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}



.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .solar-calculator-container {
    box-shadow: none;
    background: white;
  }

  .calculator-header {
    background: white;
    color: var(--color-text);
    box-shadow: none;
  }

  .result-card {
    break-inside: avoid;
  }

  .calculator-actions,
  .result-actions {
    display: none;
  }
}

/* Top Companies Section */
.top-companies-card {
  margin-top: 2rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafb 100%);
  border: 2px solid #10b981;
  border-radius: 12px;
}

.top-companies-card h3 {
  font-size: 1.25rem;
  color: #065f46;
  margin-bottom: 1.25rem;
}

.companies-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.company-item {
  background: white;
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid #d1fae5;
  transition: all 0.2s ease;
}

.company-item:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.company-header h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.company-header h4 a {
  color: #065f46;
  text-decoration: none;
  transition: color 0.2s;
}

.company-header h4 a:hover {
  color: #10b981;
  text-decoration: underline;
}

.company-rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.company-rating .stars {
  color: #fbbf24;
  font-size: 1rem;
}

.company-rating .rating-value {
  font-weight: 600;
  color: #1f2937;
}

.company-rating .review-count {
  color: #6b7280;
}

.company-actions {
  display: flex;
  gap: 0.5rem;
}

.company-actions .btn-sm {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

.companies-action {
  text-align: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #d1fae5;
}

.companies-action .btn-outline {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  color: #065f46;
  border-color: #10b981;
  border-width: 2px;
}

.companies-action .btn-outline:hover {
  background: #10b981;
  color: white;
}

/* Save button styles */
#save-calculation-button {
  background: #6366f1;
  border-color: #6366f1;
}

#save-calculation-button:hover {
  background: #4f46e5;
  border-color: #4f46e5;
}

#save-calculation-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Save Error Message */
.save-error-message {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
  border-radius: var(--radius-md, 6px);
  color: #b91c1c;
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .companies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .companies-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}