/* ===========================================
   PAGE: Category page (e.g. ophthalmology.html)
   Scoped to .category-page to avoid bleed
   =========================================== */

/* Services list hook (layout comes from shared .services-grid) */
.category-page .category-services-grid {}

/* Cities covered */
.category-page .category-cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.category-page .city-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.category-page .city-tag i { color: var(--color-teal); font-size: var(--text-xs); }

.category-page .city-tag:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

.category-page .city-tag:hover i { color: var(--color-white); }

/* =============================================
   HERO TEXT ELEMENTS — category page prefixes
   oh- / ph- / vh- / or-
   All on dark hero bg → light text
   NEW selectors only, zero overwrites
   ============================================= */

/* Kicker label */
.category-page .oh-kicker,
.category-page .ph-kicker,
.category-page .vh-kicker,
.category-page .or-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-light);
  background: rgba(20,184,166,0.14);
  border: 1px solid rgba(20,184,166,0.32);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.category-page .oh-kicker i,
.category-page .ph-kicker i,
.category-page .vh-kicker i,
.category-page .or-kicker i { color: var(--color-teal-light); }

/* H1 highlight span */
.category-page .oh-highlight,
.category-page .ph-highlight,
.category-page .vh-highlight,
.category-page .or-highlight {
  color: var(--color-teal-light);
}

/* Hero badges */
.category-page .oh-badge,
.category-page .ph-badge,
.category-page .vh-badge,
.category-page .or-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 5px 14px;
  backdrop-filter: blur(8px);
}
.category-page .oh-badge i,
.category-page .ph-badge i,
.category-page .vh-badge i,
.category-page .or-badge i { color: var(--color-teal-light); font-size: 0.78rem; }

/* Form card header (oh-form-header / ph- / vh- / or-) */
.category-page .hero .oh-form-header,
.category-page .hero .ph-form-header,
.category-page .hero .vh-form-header,
.category-page .hero .or-form-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.category-page .hero .oh-form-header h3,
.category-page .hero .ph-form-header h3,
.category-page .hero .vh-form-header h3,
.category-page .hero .or-form-header h3 {
  color: #ffffff;
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 5px;
}
.category-page .hero .oh-form-header p,
.category-page .hero .ph-form-header p,
.category-page .hero .vh-form-header p,
.category-page .hero .or-form-header p {
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  margin: 0;
}

/* Form labels inside hero-form-card on category pages */
.category-page .hero .oh-form-body .form-group label,
.category-page .hero .ph-form-body .form-group label,
.category-page .hero .vh-form-body .form-group label,
.category-page .hero .or-form-body .form-group label {
  color: rgba(255,255,255,0.82);
}

/* Form note */
.category-page .oh-form-note,
.category-page .ph-form-note,
.category-page .vh-form-note,
.category-page .or-form-note {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.58);
}
.category-page .oh-form-note i,
.category-page .ph-form-note i,
.category-page .vh-form-note i,
.category-page .or-form-note i { color: var(--color-teal-light); }

/* Commitment grid for category pages */
.category-page .values-section .values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.category-page .values-section .value-card {
  height: 100%;
}

@media (max-width: 1024px) {
  .category-page .values-section .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .category-page .values-section .values-grid {
    grid-template-columns: 1fr;
  }
}

/* Hide WA float on mobile — sticky CTA bar already has WhatsApp */
@media (max-width: 768px) {
  .category-page .wa-float-btn { display: none !important; }
}