/* components.css - Component styles and fixes */

/* Form controls & labels */
.form-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

.form-checkbox-label span {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: block !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.form-checkbox {
  flex-shrink: 0 !important;
}

/* Button & Action rows */
.hero-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-md) !important;
}

.hero-action-row .btn {
  white-space: normal !important;
  word-break: normal !important;
}

@media (max-width: 480px) {
  .hero-action-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-action-row .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Hero photo badges & tags */
.hero-photo-badge {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-sm) !important;
}

.hero-photo-badge .tag {
  white-space: normal !important;
  height: auto !important;
  min-height: 28px !important;
  word-break: normal !important;
}

/* Sterility media split layout fixes */
.sterility-media-split {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-xl) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

@media (min-width: 960px) {
  .sterility-media-split {
    grid-template-columns: 1fr 1fr !important;
  }
}

.sterility-media-split .sterility-media-content,
.sterility-media-split .sterility-media-figure {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
}

.sterility-media-split .sterility-media-content h3,
.sterility-media-split .sterility-media-content p {
  min-width: 0 !important;
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Contacts page container widths preventing sliced text */
.contacts-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-2xl) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 960px) {
  .contacts-layout {
    grid-template-columns: 1.15fr 0.85fr !important;
  }
}

.contacts-info-card,
.contacts-form-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

.contacts-block-val,
.contacts-directions-text,
.contacts-directions-title,
.master-credentials,
.master-cred-item {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.contacts-directions-box {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 480px) {
  .contacts-directions-box {
    padding: 1rem !important;
  }
  .contacts-info-card,
  .contacts-form-card {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

.master-cred-item span {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.scrolly-step-item,
.scrolly-spec-row,
.duotone-meta-row,
.duotone-meta-item {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Configurator section background / container styling per art director review */
.configurator-section {
  background: radial-gradient(circle at 50% 30%, rgba(111, 51, 55, 0.4) 0%, var(--surface) 100%) !important;
  padding-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) !important;
  padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.tool-card {
  box-shadow: 0 8px 32px rgba(18, 5, 7, 0.6) !important;
  border: 1px solid var(--line) !important;
}

/* Specific section isolation to prevent overlap between adjacent blocks */
.sterility-hero,
.pricing-section,
.journey-section,
.scrolly-section,
.duotone-caesura,
.configurator-section {
  display: flow-root !important;
  clear: both !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pricing-section .layout-shell,
.journey-section .layout-shell {
  display: flow-root !important;
  clear: both !important;
}

/* Fix covered table and text overlaps */
.spec-table-wrap {
  clear: both !important;
  overflow-x: auto !important;
}

.pricing-factors-panel {
  clear: both !important;
}

/* Master credentials and contacts block text formatting */
.contacts-directions-text,
.master-cred-item span,
.contacts-block-val {
  white-space: normal !important;
}