/* HVH Healthcare — companion styles for the Elementor-native section pages.
   Elementor's own widget markup + native controls (typography, color,
   spacing set per-widget in the editor) do most of the work; these rules
   only cover layout/decoration that isn't a native Elementor control
   (rounded corners, shadows, card backgrounds, badge pills, etc.), applied
   via each element's Advanced > CSS Classes field so they stay editable —
   remove a class in Elementor and the plain Elementor styling still works. */

/* ---------- boxed content over full-bleed backgrounds ----------
   Elementor's "Full Width" section layout (used everywhere so background
   colors bleed edge-to-edge, matching the original design) has no built-in
   max-width for its content — by default it stretches 100% of the
   viewport. This class (auto-applied to every section — see
   inc/elementor-templates/*.json / the `section()` builder) centers that
   inner content at the same 1280px used throughout the original design
   (Tailwind's max-w-7xl), while the section's own background stays full
   width. This is what makes the layout "boxed" instead of edge-to-edge. */
.hvh-container > .elementor-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- generic helpers ---------- */
.hvh-center .elementor-heading-title,
.hvh-lead-center { text-align: center; }
.hvh-section-header { max-width: 720px; margin: 0 auto; }
.hvh-strong .elementor-widget-container p { font-weight: 600; }
.hvh-uppercase-label .elementor-heading-title { text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- buttons ---------- */
.hvh-btn-outline .elementor-button {
	border: 1px solid rgba(255,255,255,0.35);
	background: transparent !important;
}
.hvh-btn-outline .elementor-button:hover { border-color: #14b8a6; color: #5eead4 !important; }

.hvh-btn-outline-light .elementor-button {
	border: 1px solid #e5e7eb;
	background: transparent !important;
}
.hvh-btn-outline-light .elementor-button:hover { border-color: #14b8a6; }

.hvh-btn-center { text-align: center; }
.hvh-btn-center .elementor-button-wrapper { display: inline-block; }

.hvh-book-doctor-btn .elementor-button { box-shadow: 0 10px 25px -8px rgba(13,148,136,0.45); }

/* ---------- hero ---------- */
.hvh-hero-section { position: relative; }
.hvh-hero-column { max-width: 760px; }
.hvh-eyebrow-pill .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(201,168,76,0.1);
	border: 1px solid rgba(201,168,76,0.3);
	border-radius: 999px;
	padding: 6px 16px !important;
}
.hvh-hero-title .elementor-heading-title { line-height: 1.1; }
.hvh-hero-lead { max-width: 640px; }
.hvh-hero-badge .elementor-icon-box-wrapper {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 999px;
	padding: 8px 16px;
}
.hvh-hero-stats-bar { border-top: 1px solid rgba(255,255,255,0.1); }

/* ---------- cards (services / treatments / why-us / process / doctor mini-stats) ---------- */
.hvh-grid-col { display: flex; }
.hvh-card {
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: 1rem;
	padding: 12px 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	width: 100%;
}
.hvh-card:hover { box-shadow: 0 20px 40px -12px rgba(13,60,60,0.12); transform: translateY(-3px); }
.hvh-card-dark {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
}
.hvh-card-dark:hover { background: rgba(255,255,255,0.08); }
/* Belt-and-suspenders: guarantee the icon itself is never invisible on the
   dark "Why Choose Us" cards, regardless of Elementor's own default icon
   color/specificity for this widget. */
.hvh-card-dark .elementor-icon-box-icon,
.hvh-card-dark .elementor-icon-box-icon i {
	color: #5eead4 !important;
}
.hvh-card-dark .elementor-icon-box-icon {
	background-color: #0f766e !important;
}

.hvh-step-card { text-align: center; }
.hvh-step-card .elementor-icon-box-icon { margin-left: auto; margin-right: auto; }

.hvh-mini-stat .elementor-icon-box-wrapper { align-items: center; }

/* ---------- about ---------- */
.hvh-about-section { align-items: center; }
.hvh-rounded-photo img {
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(13,31,53,0.25);
	width: 100%;
	height: 480px;
	object-fit: cover;
}

/* ---------- doctor consultation ---------- */
.hvh-doctor-card {
	background: #0d2240;
	border-radius: 1rem;
	padding: 32px 24px;
	text-align: center;
}
.hvh-doctor-card .elementor-heading-title,
.hvh-doctor-card p { color: #fff; }
.hvh-doctor-photo img {
	width: 128px;
	height: 128px;
	border-radius: 999px;
	object-fit: cover;
	border: 4px solid #c9a84c;
	margin: 0 auto;
	box-shadow: 0 15px 30px -8px rgba(0,0,0,0.4);
}
.hvh-doctor-facts,
.hvh-doctor-contact { text-align: left; }
.hvh-doctor-facts .elementor-icon-list-text,
.hvh-doctor-contact .elementor-icon-list-text,
.hvh-doctor-facts .elementor-icon-list-icon i,
.hvh-doctor-contact .elementor-icon-list-icon i { color: #d1d5db; }
.hvh-doctor-bio-card {
	background: #fff;
	border-radius: 1rem;
	padding: 32px;
	border: 1px solid #f1f5f9;
}
.hvh-tag-list .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; }
.hvh-tag-list .elementor-icon-list-item {
	background: #f0fdfa;
	border-radius: 999px;
	padding: 6px 14px;
	width: auto;
}
.hvh-tag-list .elementor-icon-list-text { color: #0f766e; font-size: 12px; font-weight: 500; }
.hvh-tag-list .elementor-icon-list-icon i { color: #0d9488; font-size: 11px; }

/* ---------- testimonials ---------- */
.hvh-testimonial-card {
	background: linear-gradient(to bottom, #f9fafb, #fff);
	border: 1px solid #f1f5f9;
	border-radius: 1rem;
	padding: 28px;
	height: 100%;
}
.hvh-testimonial-card .elementor-testimonial-text { font-style: italic; }

/* ---------- contact ---------- */
.hvh-contact-info-card {
	background: #0d2240;
	border-radius: 1rem;
	padding: 32px;
	height: 100%;
}
.hvh-contact-info-list .elementor-icon-list-icon i { color: #5eead4; }
.hvh-contact-form-col { background: transparent; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
	.hvh-doctor-card, .hvh-doctor-bio-card, .hvh-contact-info-card { padding: 24px 20px; }
	.hvh-hero-title .elementor-heading-title { font-size: 2.25rem !important; }
}