/* ===================================
   UTILITY CLASSES
   Purpose: Replace inline styles with reusable utility classes
   =================================== */

/* === Background Utilities === */
.bg-white {
  background: white;
}

.bg-surface {
  background: var(--color-surface);
}

.bg-light-gray {
  background: #f8f9fa;
}

/* === Padding Utilities === */
.p-0 { padding: 0; }
.p-section { padding: 4rem 2rem; }
.p-section-top { padding-top: 2rem; }
.p-section-bottom { padding-bottom: 3rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-sm { padding-top: 1rem; padding-bottom: 1rem; }
.py-md { padding-top: 2rem; padding-bottom: 2rem; }
.py-lg { padding-top: 3rem; padding-bottom: 3rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-sm { padding-left: 1rem; padding-right: 1rem; }
.px-md { padding-left: 2rem; padding-right: 2rem; }

/* === Margin Utilities === */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-xl { margin-bottom: 2rem; }
.mb-2xl { margin-bottom: 2.5rem; }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: 2px; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* === Text Utilities === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-dark { color: #111827; }
.text-gray-600 { color: #6b7280; }
.text-gray-700 { color: #374151; }
.text-white { color: white; }
.text-error { color: red; }

/* === Font Utilities === */
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }

.font-size-sm { font-size: 1rem; }
.font-size-md { font-size: 1.25rem; }
.font-size-lg { font-size: 1.5rem; }
.font-size-xl { font-size: 2rem; }
.font-size-2xl { font-size: 2.5rem; }

/* === Display Utilities === */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

/* === Flexbox Utilities === */
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-start { align-items: start; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: between; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }

/* === Sizing Utilities === */
.w-full { width: 100%; }
.w-20 { width: 20px; }

.h-20 { height: 20px; }
.h-750 { height: 750px; }

.max-w-800 { max-width: 800px; }
.max-w-1200 { max-width: 1200px; }

/* === Border Utilities === */
.border-none { border: none; }
.border-radius-md { border-radius: 8px; }

/* === List Utilities === */
.list-none { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.list-item-pricing {
  padding: 0.5rem 0;
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

/* === Icon Utilities === */
.icon-sm {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-checkmark {
  color: #22c55e;
  margin-top: 2px;
}

/* === Box Shadow Utilities === */
.shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* === Position Utilities === */
.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* === Specific Component Utilities === */

/* Pricing Card Pricing Display */
.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pricing-amount-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #22c55e;
}

.pricing-amount-period {
  color: #6b7280;
}

.pricing-monthly {
  color: #6b7280;
}

.pricing-monthly-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

/* Hero Section Content */
.hero-content-wrapper {
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.hero-message {
  font-size: 1.5rem;
  font-weight: 600;
  color: #22c55e;
  margin: 0;
}

/* Estimatic Iframe Embed */
.estimatic-iframe {
  width: 100%;
  height: 750px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Feature Container with Max Width */
.feature-container-centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.feature-container-wide {
  max-width: 1200px;
}

/* Action Button Group */
.action-button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}