/**
 * VSR home repair CSS — spacing / tiles / contact / coco
 * Loaded AFTER vsr-global-overrides.css
 * Version: 1.6.0
 */

.contact-section .wrap,
.contact-section .wrap--narrow {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
.contact-form,
.wpforms-container,
.wpforms-form {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

section { padding: 72px 0 !important; }
.hero { padding: 110px 0 72px !important; }
.closing { padding: 80px 0 !important; }
.contact-section { padding: 64px 0 48px !important; }
.coco-section { padding: 64px 0 !important; overflow: hidden !important; }
.section-header { margin-bottom: 36px !important; }
.section-header h2 { margin: 12px 0 16px !important; }

.category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 20px !important;
  width: 100% !important;
}
.category-tabs br { display: none !important; }
.category-tab {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border, rgba(255,255,255,0.06)) !important;
  background: var(--surface, #121215) !important;
  color: var(--muted, #888890) !important;
  text-decoration: none !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  min-width: 0 !important;
}
.category-tab.active {
  color: var(--accent, #06b6d4) !important;
  border-color: var(--accent, #06b6d4) !important;
  background: var(--accent-soft, rgba(6,182,212,0.10)) !important;
}

.app-list {
  display: grid !important;
  gap: 12px !important;
  align-items: start !important;
  grid-auto-rows: auto !important;
  margin-bottom: 40px !important;
}
.app-list--pair {
  grid-template-columns: repeat(2, minmax(260px, 360px)) !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}
.app-list--quad { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 1200px) {
  .app-list--quad { grid-template-columns: repeat(4, 1fr) !important; }
}
.app-list > :not(.app-tile) { display: none !important; }

.app-tile {
  background: var(--surface, #121215) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
}
.app-tile-link {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
}
.app-tile .icon-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  min-width: 0 !important;
}
.app-tile .app-name {
  font-weight: 620 !important;
  font-size: 16px !important;
  color: var(--ink-soft, #c8c8d0) !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}
.app-tile p {
  color: var(--ink-soft, #a0a0a8) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.app-tile .tile-cta {
  margin-top: 14px !important;
  padding-top: 0 !important;
  color: var(--accent, #06b6d4) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.tile-cta:not(.app-tile .tile-cta),
.apps-section > a,
.apps-section > p,
.category-tabs + a,
.category-tabs + p,
.app-list + a,
.app-list + p {
  display: none !important;
}

#contact-cta a.btn,
#contact-cta a.btn-accent { text-decoration: none !important; }
#contact-cta p:has(a.btn) ~ p:has(a.btn),
#contact-cta div:has(> a.btn) ~ div:has(> a.btn),
#contact-cta a.btn ~ a.btn,
#contact-cta a.btn-accent ~ a.btn-accent { display: none !important; }
#contact-cta[data-cta-fixed="1"] a.btn:not([data-keep="1"]),
#contact-cta[data-cta-fixed="1"] a.btn-accent:not([data-keep="1"]) { display: none !important; }

.coco-section .wrap--narrow {
  max-width: 780px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}
.coco-chat {
  max-width: 620px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.coco-msg { min-width: 0 !important; }
.coco-bubble {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.coco-suggestion {
  white-space: normal !important;
  max-width: 100% !important;
  text-align: left !important;
}
.coco-input-row { align-items: center !important; box-sizing: border-box !important; }
.coco-input { min-width: 0 !important; }

@media (max-width: 700px) {
  section { padding: 56px 0 !important; }
  .hero { padding: 80px 0 56px !important; }
  .category-tabs { flex-direction: column !important; }
  .category-tab { width: 100% !important; flex: 1 1 auto !important; white-space: normal !important; }
  .app-list--pair,
  .app-list--quad { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .coco-section .wrap--narrow { padding: 0 16px !important; }
  .coco-messages { padding: 16px !important; }
  .coco-input-row { padding: 12px !important; }
  .contact-section .wrap,
  .contact-section .wrap--narrow { padding-left: 16px !important; padding-right: 16px !important; }
}