/* ==========================================================================
   Healty Front — public website layer (ui-ux-pro-max design system)
   Pattern: Hero + Services + How it works + Testimonials + Booking CTA
   ========================================================================== */
:root {
    --hl-primary: #0E7490;
    --hl-primary-hover: #155E75;
    --hl-primary-rgb: 14, 116, 144;
    --hl-cyan: #0891B2;
    --hl-accent: #059669;
    --hl-bg: #F7FBFC;
    --hl-tint: #E6F6FA;
    --hl-fg: #0F2A37;
    --hl-fg-muted: #475569;
    --hl-border: #DCEAF0;
    --hl-radius: 14px;
    --hl-radius-lg: 20px;
    --hl-shadow: 0 1px 3px rgba(15, 42, 55, .06), 0 10px 24px -8px rgba(15, 42, 55, .12);
    --hl-shadow-lg: 0 18px 40px -12px rgba(15, 42, 55, .22);
    --hl-ease: cubic-bezier(.2, .7, .2, 1);
    --hl-font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --hl-grad: linear-gradient(120deg, #0891B2 0%, #0E7490 100%);
}

body {
    font-family: var(--hl-font) !important;
    color: var(--hl-fg);
    background: var(--hl-bg);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--hl-font) !important; color: var(--hl-fg); font-weight: 700; letter-spacing: -.015em; }
p, .text-gray-100, .text-gray-200 { color: var(--hl-fg-muted); }
a { transition: color .15s var(--hl-ease); }
:focus-visible { outline: 3px solid rgba(8, 145, 178, .4) !important; outline-offset: 2px; }

/* Header: sticky glass bar */
header.header, .header {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--hl-border);
}
header .navbar .navbar-nav .nav-item .nav-link {
    color: var(--hl-fg) !important;
    font-weight: 600;
    padding: .6rem .9rem !important;
    border-radius: 10px;
}
header .navbar .navbar-nav .nav-item .nav-link.active,
header .navbar .navbar-nav .nav-item .nav-link:hover {
    -webkit-text-fill-color: currentColor !important;
    background: var(--hl-tint) !important;
    color: var(--hl-primary) !important;
}

/* Gradient/text tokens replaced with accessible teal */
.text-primary, .breadcrumb .breadcrumb-item.active, .breadcrumb .breadcrumb-item a,
.language-padding.active, .language-padding:hover {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    color: var(--hl-primary) !important;
}
.bg-primary { background: var(--hl-grad) !important; }
.border-top-primary { border-top-color: var(--hl-cyan) !important; }
.about-section ul li:before { color: var(--hl-accent) !important; }

/* Buttons */
.btn {
    min-height: 48px;
    border-radius: 12px !important;
    font-weight: 700;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    transition: background-color .2s var(--hl-ease), box-shadow .2s var(--hl-ease), transform .15s var(--hl-ease), color .2s;
}
.btn-primary {
    background: var(--hl-primary) !important;
    border: 1px solid var(--hl-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(var(--hl-primary-rgb), .7);
}
.btn-primary:hover {
    background: var(--hl-primary-hover) !important;
    border-color: var(--hl-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-outline-primary, .btn-light {
    background: #fff !important;
    border: 1.5px solid var(--hl-primary) !important;
    color: var(--hl-primary) !important;
}
.btn-outline-primary:hover, .btn-light:hover { background: var(--hl-tint) !important; color: var(--hl-primary-hover) !important; }

/* Hero */
.hero-section {
    position: relative;
    background:
        radial-gradient(900px 480px at 85% 10%, rgba(34, 211, 238, .20), transparent 60%),
        radial-gradient(700px 420px at 0% 100%, rgba(5, 150, 105, .12), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, var(--hl-bg) 100%) !important;
    overflow: hidden;
}
.hero-section h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; }
.hero-section img { border-radius: var(--hl-radius-lg); }

/* Section headings */
.home-page section h2, section .section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* Cards: services, doctors, how-it-works, testimonials */
.card, .services-section .card, .how-work-section .card, .our-doctors-block, .testimonial-section .card,
.team-member, .feature-container, .contact-icon-box {
    border: 1px solid var(--hl-border) !important;
    border-radius: var(--hl-radius-lg) !important;
    background: #fff;
    box-shadow: var(--hl-shadow) !important;
    transition: transform .25s var(--hl-ease), box-shadow .25s var(--hl-ease);
}
.services-section .card:hover, .how-work-section .card:hover, .our-doctors-block:hover, .team-member:hover {
    transform: translateY(-4px);
    box-shadow: var(--hl-shadow-lg) !important;
}
.home-page .how-work-section .card .card-number {
    background: linear-gradient(#22D3EE, #0E7490) !important;
    -webkit-background-clip: text !important;
}
.home-page .services-section .slick-next, .home-page .services-section .slick-prev {
    background: var(--hl-primary) !important;
    width: 44px; height: 44px;
    box-shadow: var(--hl-shadow) !important;
}
.testimonial-section .slick-dots li.slick-active button { background: var(--hl-primary) !important; }
.testimonial-section .slick-dots li button { min-width: 8px; }

/* Appointment CTA band */
.appointmnet-section__inner-block {
    border-radius: 24px !important;
    box-shadow: var(--hl-shadow-lg);
    overflow: hidden;
}
.appointmnet-section__inner-block h2, .appointmnet-section__inner-block p { color: #fff !important; }

/* Forms (booking, contact) */
.form-control, .form-select {
    min-height: 48px;
    border-radius: 12px !important;
    border: 1px solid var(--hl-border) !important;
    color: var(--hl-fg) !important;
    background-color: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--hl-cyan) !important; box-shadow: 0 0 0 4px rgba(8, 145, 178, .2) !important; }
.form-label { font-weight: 600; color: var(--hl-fg); }
.book-appointment-page .book-appointment-form, .contact-page .contact-section .main-box {
    border-radius: var(--hl-radius-lg) !important;
    box-shadow: var(--hl-shadow) !important;
    border: 1px solid var(--hl-border);
}
.front-slot-data .time-slot { border-radius: 10px !important; min-height: 44px; }
.front-slot-data .time-slot.activeSlot, .front-slot-data .time-slot:hover {
    background: var(--hl-primary) !important; color: #fff !important; border-color: var(--hl-primary) !important;
}
.datepicker table tr td.active.active, .table-condensed tbody tr .today.active { background: var(--hl-primary) !important; }
.qrcode-option.active { background: var(--hl-primary) !important; }

/* FAQ accordion */
.accordion-item { border: 1px solid var(--hl-border) !important; border-radius: var(--hl-radius) !important; margin-bottom: .75rem; overflow: hidden; }
.accordion-button:not(.collapsed) { background: var(--hl-tint) !important; color: var(--hl-primary-hover) !important; box-shadow: none !important; }

/* Footer */
footer { background: #0B2530 !important; color: #C9DCE3; }
footer h1, footer h2, footer h3, footer h4, footer h5 { color: #fff !important; }
footer a, footer p, footer span { color: #C9DCE3 !important; }
footer a:hover { color: #67E8F9 !important; }

@media (max-width: 991.98px) {
    header .navbar-collapse { background: #fff; border-radius: var(--hl-radius); box-shadow: var(--hl-shadow-lg); padding: .5rem; margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Hero v2 */
.hero-section.p-t-100 { padding-top: 48px !important; }
.hero-section .container.p-t-100 { padding-top: 24px !important; }
.hero-section .hero-eyebrow {
    display: inline-block;
    background: var(--hl-tint) !important;
    border: 1px solid #BDE6F0;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .95rem;
    margin-bottom: 1.25rem;
}
.hero-section .hero-trust li { color: var(--hl-fg-muted); font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.hero-section .hero-trust i { color: var(--hl-accent); font-size: 1.1rem; }
.hero-section .object-image-cover { filter: none; }
.hero-section .hero-trust { margin-top: 1.75rem !important; }