/*
Theme Name: 3D Clinix
Theme URI: https://solvemade.com/
Author: Solvemade
Author URI: https://solvemade.com/
Description: A fast, lightweight, custom-built WordPress theme for Dr. Agrawal's 3D Clinix — a multi-specialty skin, hair & dental clinic in Bikaner. Built from a bespoke design with editable Doctors, Treatments, Testimonials and Before/After Results, plus full Customizer control over every section, header and footer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clinix
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, responsive-layout

3D Clinix WordPress Theme, Copyright 2026 Solvemade
3D Clinix is distributed under the terms of the GNU GPL.
*/

/* =========================================================
   Table of Contents
   1.0  CSS Variables (Theme Colors, Typography, Layout)
   2.0  Base / Reset
   3.0  Buttons
   4.0  Navbar / Header
   5.0  Hero Section
   6.0  Trust Strip
   7.0  About Section
   8.0  Specialities Section
   9.0  Treatments Section
   10.0 Before / After Results Slider
   11.0 Doctors Section
   12.0 Why Choose Us Section
   13.0 Experience Banner
   14.0 Testimonials Section
   15.0 CTA Section
   16.0 Contact Section
   17.0 Instagram Section
   18.0 Footer
   19.0 Floating Action Buttons
   20.0 Appointment Modal
   21.0 Scroll Reveal / Utility Classes
   22.0 Responsive Media Queries
   23.0 WordPress Core / Accessibility Helpers
   ========================================================= */

        :root {
            /* Brand Colors */
            --clr-primary: #664D94;
            --clr-primary-hover: #523d77;
            --clr-light: #CFBDE2;
            --clr-vlight: #ECD7FF;
            --clr-white: #FFFFFF;
            --clr-black: #000000;
            --clr-text-main: #2D2D2D;
            --clr-text-light: #555555;
            --clr-bg-offwhite: #FAFAFA;
            
            /* Typography */
            --font-heading: 'Playfair Display', serif;
            --font-body: 'DM Sans', sans-serif;
            
            /* Layout & UI */
            --radius-md: 18px;
            --radius-lg: 28px;
            --shadow-subtle: 0 10px 40px rgba(0, 0, 0, 0.04);
            --shadow-hover: 0 15px 50px rgba(102, 77, 148, 0.1);
            --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        body {
            font-family: var(--font-body);
            color: var(--clr-text-main);
            background-color: var(--clr-bg-offwhite);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            color: var(--clr-black);
            line-height: 1.2;
            font-weight: 600;
        }

        p { margin-bottom: 1rem; color: var(--clr-text-light); }
        a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }
        
        /* Focus styles for accessibility */
        :focus-visible {
            outline: 2px solid var(--clr-primary);
            outline-offset: 4px;
        }

        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .section-padding { padding: 100px 0; }
        .text-center { text-align: center; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 500;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-family: var(--font-body);
        }

        .btn-primary {
            background-color: var(--clr-primary);
            color: var(--clr-white);
        }
        .btn-primary:hover {
            background-color: var(--clr-primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 77, 148, 0.2);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--clr-primary);
            border: 1px solid var(--clr-light);
        }
        .btn-outline:hover {
            border-color: var(--clr-primary);
            background-color: var(--clr-vlight);
        }
        
        .btn-white {
            background-color: var(--clr-white);
            color: var(--clr-primary);
        }
        .btn-white:hover {
            background-color: var(--clr-vlight);
            transform: translateY(-2px);
        }

        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: var(--clr-white);
            transition: var(--transition);
            border-bottom: 1px solid transparent;
        }
        .navbar.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--clr-vlight);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
            padding: 5px 0;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px;
            transition: var(--transition);
        }
        .navbar.scrolled .nav-container { height: 75px; }

        .logo { 
            font-family: var(--font-heading); 
            font-size: 1.3rem; 
            font-weight: 700; 
            color: var(--clr-primary); 
            display: flex; 
            align-items: center; 
            gap: 8px;
            text-transform: capitalize;
        }
        .logo span { color: var(--clr-black); }

        /* Custom Logo (Appearance → Customize → Site Identity) */
        .site-logo-wrap { display: flex; align-items: center; }
        .site-logo-wrap img,
        .custom-logo-link img {
            max-height: 56px;
            width: auto;
            display: block;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        .nav-link {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--clr-text-main);
            position: relative;
        }
        .nav-link::after {
            content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
            background-color: var(--clr-primary); transition: var(--transition);
        }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }
        .nav-link:hover, .nav-link.active { color: var(--clr-primary); }

        .mobile-toggle {
            display: none; background: none; border: none; cursor: pointer;
            width: 30px; height: 20px; position: relative; z-index: 1001;
        }
        .mobile-toggle span {
            display: block; width: 100%; height: 2px; background-color: var(--clr-black);
            position: absolute; left: 0; transition: var(--transition);
        }
        .mobile-toggle span:nth-child(1) { top: 0; }
        .mobile-toggle span:nth-child(2) { top: 9px; }
        .mobile-toggle span:nth-child(3) { bottom: 0; }
        .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 9px; }
        .mobile-toggle.active span:nth-child(2) { opacity: 0; }
        .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg); bottom: 9px; }

        .hero {
            padding: 180px 0 100px;
            background: linear-gradient(135deg, var(--clr-white) 0%, var(--clr-vlight) 100%);
            overflow: hidden;
        }
        .hero-grid {
            display: grid; 
            grid-template-columns: 1.1fr 0.9fr; 
            gap: 4rem; 
            align-items: center;
        }
        
        .hero-eyebrow {
            text-transform: uppercase; 
            letter-spacing: 2px; 
            font-size: 0.85rem;
            color: var(--clr-primary); 
            font-weight: 600; 
            margin-bottom: 1.5rem; 
            display: block;
        }
        .hero-title { 
            font-size: 4rem; 
            margin-bottom: 1.5rem; 
            line-height: 1.15;
        }
        .hero-desc { 
            font-size: 1.125rem; 
            max-width: 90%; 
            margin-bottom: 2.5rem; 
        }
        
        .hero-actions { 
            display: flex; 
            gap: 1rem; 
            align-items: center; 
            flex-wrap: wrap; 
            margin-bottom: 3rem;
        }
        
        .hero-trust { 
            display: flex; 
            gap: 2rem; 
            border-top: 1px solid var(--clr-light); 
            padding-top: 2rem; 
        }
        .trust-item { 
            font-size: 0.9rem; 
            font-weight: 500; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
        }
        .trust-item svg { 
            width: 20px; 
            height: 20px; 
            stroke: var(--clr-primary); 
        }

        .hero-image-wrapper { 
            position: relative; 
            z-index: 1; 
        }
        .hero-image-wrapper::before {
            content: ''; 
            position: absolute; 
            top: -20px; 
            right: -20px; 
            bottom: 20px; 
            left: 20px;
            background: var(--clr-vlight); 
            border-radius: var(--radius-lg); 
            z-index: -1;
        }
        .hero-img { 
            border-radius: var(--radius-lg); 
            box-shadow: var(--shadow-subtle); 
            width: 100%; 
            aspect-ratio: 4/5; 
            object-fit: cover;
        }
        
        .floating-card {
            position: absolute; 
            bottom: 30px; 
            left: -30px; 
            background: var(--clr-white);
            padding: 20px 24px; 
            border-radius: var(--radius-md); 
            box-shadow: var(--shadow-subtle);
            display: flex; 
            align-items: center; 
            gap: 15px; 
            z-index: 2; 
            border: 1px solid var(--clr-vlight);
        }
        .floating-icon {
            width: 45px; 
            height: 45px; 
            background: var(--clr-vlight); 
            border-radius: 50%;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--clr-primary);
        }

        .trust-strip {
            background-color: var(--clr-bg-offwhite); 
            padding: 60px 0; 
            border-bottom: 1px solid var(--clr-vlight);
        }
        .trust-strip-grid {
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 1.5rem; 
        }
        .strip-item { 
            background: var(--clr-white);
            border: 1px solid var(--clr-vlight);
            border-radius: var(--radius-md);
            padding: 28px 20px;
            text-align: center;
            transition: var(--transition);
            position: relative;
        }
        .strip-item:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
            border-color: var(--clr-light);
        }
        .strip-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 16px;
            background: var(--clr-vlight);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--clr-primary);
            transition: var(--transition);
        }
        .strip-item:hover .strip-icon {
            background: var(--clr-primary);
            color: var(--clr-white);
        }
        .strip-item h4 { 
            font-family: var(--font-heading); 
            font-size: 1.15rem; 
            margin-bottom: 6px; 
            color: var(--clr-black); 
        }
        .strip-item p { 
            font-size: 0.85rem; 
            margin: 0; 
            color: var(--clr-text-light);
        }

        .about-section { 
            background-color: var(--clr-white); 
            position: relative; 
        }
        .about-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 5rem; 
            align-items: center; 
        }
        .about-image { 
            border-radius: var(--radius-lg); 
            overflow: hidden; 
            position: relative; 
        }
        .about-image img { 
            width: 100%; 
            aspect-ratio: 1/1.1; 
            object-fit: cover; 
        }
        
        .section-label {
            font-size: 0.85rem; 
            text-transform: uppercase; 
            letter-spacing: 1.5px;
            color: var(--clr-primary); 
            font-weight: 600; 
            margin-bottom: 1rem; 
            display: block;
        }
        .about-content h2 { 
            font-size: 3rem; 
            margin-bottom: 1.5rem; 
        }
        .about-content p { 
            font-size: 1.1rem; 
            margin-bottom: 2rem; 
        }
        .about-deco {
            position: absolute; 
            top: -50px; 
            left: 0; 
            font-family: var(--font-heading);
            font-size: 15rem; 
            font-weight: 700; 
            color: var(--clr-vlight); 
            opacity: 0.4; 
            z-index: 0; 
            line-height: 1; 
            pointer-events: none;
        }
        .about-content-inner { 
            position: relative; 
            z-index: 2; 
        }

        .specialities { 
            background-color: var(--clr-bg-offwhite); 
        }
        .spec-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
            margin-top: 3rem; 
        }
        .spec-card {
            background: var(--clr-white); 
            border-radius: var(--radius-lg); 
            overflow: hidden;
            box-shadow: var(--shadow-subtle); 
            border: 1px solid var(--clr-vlight);
            transition: var(--transition); 
            display: flex; 
            flex-direction: column; 
            group;
        }
        .spec-card:hover { 
            transform: translateY(-10px); 
            box-shadow: var(--shadow-hover); 
            border-color: var(--clr-light); 
        }
        
        .spec-img-wrap { 
            overflow: hidden; 
            aspect-ratio: 4/3; 
        }
        .spec-img-wrap img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: var(--transition); 
        }
        .spec-card:hover .spec-img-wrap img { 
            transform: scale(1.05); 
        }
        
        .spec-content { 
            padding: 30px; 
            flex-grow: 1; 
            display: flex; 
            flex-direction: column; 
        }
        .spec-num { 
            font-family: var(--font-heading); 
            font-size: 2rem; 
            color: var(--clr-light); 
            margin-bottom: 10px; 
            line-height: 1; 
        }
        .spec-content h3 { 
            font-size: 1.75rem; 
            margin-bottom: 15px; 
        }
        .spec-content p { 
            font-size: 0.95rem; 
            flex-grow: 1; 
            margin-bottom: 20px;
        }
        .spec-link { 
            font-weight: 600; 
            color: var(--clr-primary); 
            display: inline-flex; 
            align-items: center; 
            gap: 8px;
        }
        .spec-link svg { 
            transition: transform 0.3s ease; 
        }
        .spec-card:hover .spec-link svg { 
            transform: translateX(5px); 
        }

        .treatments { 
            background-color: var(--clr-white); 
        }
        .treat-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-end; 
            margin-bottom: 3rem; 
            flex-wrap: wrap; 
            gap: 2rem;
        }
        .treat-filters { 
            display: flex; 
            gap: 10px; 
            flex-wrap: wrap; 
        }
        .filter-btn {
            background: var(--clr-bg-offwhite); 
            border: 1px solid var(--clr-vlight);
            padding: 8px 20px; 
            border-radius: 30px; 
            cursor: pointer; 
            transition: var(--transition); 
            font-family: var(--font-body);
        }
        .filter-btn.active, .filter-btn:hover { 
            background: var(--clr-primary); 
            color: var(--clr-white); 
            border-color: var(--clr-primary); 
        }
        
        .treat-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 1.5rem; 
        }
        .treat-card {
            background: var(--clr-bg-offwhite); 
            border-radius: var(--radius-md); 
            padding: 25px;
            transition: var(--transition); 
            border: 1px solid transparent;
        }
        /* Used by the [clinix_treatments] shortcode inside narrow Page
           content (e.g. the Skin/Hair/Dental landing pages) where a 4-up
           grid would be too cramped. */
        .treat-grid-compact {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 560px) {
            .treat-grid-compact {
                grid-template-columns: 1fr;
            }
        }
        .treat-card:hover { 
            background: var(--clr-white); 
            border-color: var(--clr-light); 
            box-shadow: var(--shadow-subtle); 
            transform: translateY(-5px); 
        }
        .treat-cat { 
            font-size: 0.75rem; 
            text-transform: uppercase; 
            color: var(--clr-primary); 
            font-weight: 600; 
            margin-bottom: 10px; 
            display: block; 
        }
        .treat-card h4 { 
            font-family: var(--font-body); 
            font-size: 1.25rem; 
            margin-bottom: 10px; 
        }
        .treat-card p { 
            font-size: 0.9rem; 
            margin-bottom: 15px; 
        }
        .treat-card a { 
            font-size: 0.9rem; 
            font-weight: 500; 
            color: var(--clr-primary); 
        }

        .doctors { 
            background-color: var(--clr-vlight); 
        }
        .doc-grid { 
            display: flex; 
            flex-wrap: wrap;
            justify-content: center;
            gap: 2.2rem; 
            margin-top: 3rem; 
            max-width: 1100px; 
            margin-inline: auto;
        }
        .doc-card {
            background: var(--clr-white); 
            border-radius: var(--radius-lg); 
            overflow: hidden;
            box-shadow: var(--shadow-subtle); 
            display: flex; 
            flex-direction: column;
            transition: var(--transition);
            flex: 1 1 320px;
            max-width: 380px;
        }
        .doc-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }
        .doc-img-wrap {
            position: relative;
            aspect-ratio: 4/3; 
            overflow: hidden;
            background: var(--clr-vlight);
        }
        .doc-img { 
            width: 100%; 
            height: 100%;
            object-fit: cover; 
            object-position: center 15%;
            transition: var(--transition);
        }
        .doc-card:hover .doc-img {
            transform: scale(1.05);
        }
        .doc-img-wrap.img-fallback::after {
            font-size: 2.5rem;
        }
        .doc-info { 
            padding: 20px 22px 24px; 
            display: flex; 
            flex-direction: column; 
            text-align: center;
            flex-grow: 1;
        }
        .doc-info h3 { 
            font-size: 1.3rem; 
            margin-bottom: 3px; 
        }
        .doc-spec { 
            display: inline-block;
            color: var(--clr-primary); 
            font-weight: 600; 
            margin: 0 auto 12px;
            font-size: 0.8rem;
            background: var(--clr-vlight);
            padding: 4px 14px;
            border-radius: 20px;
        }
        .doc-qual { 
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.78rem; 
            color: var(--clr-text-light); 
            background: var(--clr-bg-offwhite);
            border-radius: 8px;
            padding: 7px 12px;
            margin-bottom: 14px; 
            font-style: normal;
            line-height: 1.35;
            text-align: left;
        }
        .doc-qual svg {
            width: 15px;
            height: 15px;
            color: var(--clr-primary);
            flex-shrink: 0;
        }
        .doc-bio { 
            font-size: 0.88rem; 
            flex-grow: 1;
            margin-bottom: 16px;
        }
        .doc-info .doc-cta {
            color: var(--clr-primary);
            font-weight: 500;
            font-size: 0.92rem;
        }

        .why-us { 
            background: var(--clr-white); 
        }
        .why-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 4rem; 
            align-items: center; 
        }
        .benefits-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 2rem 2.5rem; 
            margin-top: 2.5rem; 
        }
        .benefit-item { 
            padding: 0; 
            border-bottom: 1px solid var(--clr-vlight);
            padding-bottom: 20px;
        }
        .benefit-item .icon {
            width: 46px; 
            height: 46px; 
            background: var(--clr-vlight); 
            border-radius: 50%;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            margin-bottom: 14px;
            color: var(--clr-primary);
        }
        .benefit-item h4 { 
            font-family: var(--font-body); 
            font-size: 1.1rem; 
            margin-bottom: 6px; 
        }
        .benefit-item p { 
            font-size: 0.9rem; 
        }

        .experience {
            position: relative; 
            padding: 80px 0;
            background-color: var(--clr-primary);
            background-image: url('https://images.pexels.com/photos/6503112/pexels-photo-6503112.jpeg?auto=compress&cs=tinysrgb&w=1920');
            background-size: cover; 
            background-position: center;
            overflow: hidden;
        }
        .experience::before {
            content: ''; 
            position: absolute; 
            inset: 0; 
            background: linear-gradient(135deg, rgba(64, 42, 102, 0.92) 0%, rgba(28, 16, 46, 0.9) 100%);
        }
        .experience::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 2px solid rgba(236, 215, 255, 0.15);
            top: -150px;
            right: -100px;
            pointer-events: none;
        }
        .exp-content { 
            position: relative; 
            z-index: 2; 
            color: var(--clr-white); 
            max-width: 640px; 
            text-align: center;
            margin: 0 auto;
        }
        .exp-eyebrow {
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--clr-vlight);
            margin-bottom: 1.2rem;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(236, 215, 255, 0.4);
        }
        .exp-content h2 { 
            color: var(--clr-white); 
            font-size: 2.2rem; 
            line-height: 1.25; 
            margin-bottom: 15px;
            text-shadow: 0 2px 20px rgba(0,0,0,0.25);
        }
        .exp-content p {
            color: rgba(255,255,255,0.85);
        }

        .testimonials { 
            background: var(--clr-bg-offwhite); 
            overflow-x: hidden; 
            padding-bottom: 120px;
        }
        .testi-slider { 
            display: flex; 
            padding: 10px 4px 24px;
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
            gap: 2rem; 
        }
        .testi-card {
            min-width: calc(33.333% - 1.34rem); 
            background: var(--clr-white); 
            border: 1px solid var(--clr-vlight);
            border-radius: var(--radius-lg); 
            padding: 36px 32px;
            box-shadow: var(--shadow-subtle);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }
        .testi-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
            border-color: var(--clr-light);
        }
        .quote-icon { 
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--clr-vlight);
            color: var(--clr-primary); 
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px; 
        }
        .quote-icon svg {
            width: 20px;
            height: 20px;
        }
        .testi-stars {
            display: flex;
            gap: 3px;
            color: var(--clr-primary);
            margin-bottom: 16px;
        }
        .testi-stars svg {
            width: 15px;
            height: 15px;
        }
        .testi-text { 
            font-size: 1.02rem; 
            font-style: italic; 
            margin-bottom: 24px; 
            color: var(--clr-black); 
            flex-grow: 1;
        }
        .testi-footer {
            display: flex;
            align-items: center;
            gap: 14px;
            padding-top: 20px;
            border-top: 1px solid var(--clr-vlight);
        }
        .testi-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--clr-vlight);
            color: var(--clr-primary);
            font-family: var(--font-heading);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .testi-author { 
            font-weight: 600; 
            color: var(--clr-black); 
            font-family: var(--font-body); 
            display: block;
        }
        .testi-service { 
            font-size: 0.8rem; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            color: var(--clr-primary); 
        }
        
        .slider-controls { 
            display: flex; 
            gap: 15px; 
            justify-content: center; 
            margin-top: 40px; 
        }
        .slide-btn {
            width: 45px; 
            height: 45px; 
            border-radius: 50%; 
            border: 1px solid var(--clr-light);
            background: var(--clr-white); 
            color: var(--clr-primary); 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: var(--transition);
            box-shadow: var(--shadow-subtle);
        }
        .slide-btn:hover { 
            background: var(--clr-primary); 
            color: var(--clr-white); 
            border-color: var(--clr-primary);
        }

        .cta-section { 
            background: var(--clr-primary); 
            position: relative; 
            overflow: hidden; 
            padding: 100px 0; 
        }
        .cta-circles { 
            position: absolute; 
            inset: 0; 
            overflow: hidden; 
            pointer-events: none; 
        }
        .circle { 
            position: absolute; 
            border-radius: 50%; 
            border: 2px solid rgba(236, 215, 255, 0.1); 
        }
        .c1 { 
            width: 300px; 
            height: 300px; 
            top: -100px; 
            right: -50px; 
        }
        .c2 { 
            width: 500px; 
            height: 500px; 
            bottom: -200px; 
            left: -100px; 
            border-color: rgba(207, 189, 226, 0.1); 
        }
        
        .cta-content { 
            position: relative; 
            z-index: 2; 
            text-align: center; 
            max-width: 700px; 
            margin: 0 auto; 
            color: var(--clr-white); 
        }
        .cta-content h2 { 
            color: var(--clr-white); 
            font-size: 3rem; 
            margin-bottom: 20px; 
        }
        .cta-content p { 
            color: var(--clr-vlight); 
            font-size: 1.1rem; 
            margin-bottom: 40px; 
        }
        .cta-buttons { 
            display: flex; 
            justify-content: center; 
            gap: 1rem; 
            flex-wrap: wrap;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed; 
            inset: 0; 
            background: rgba(0,0,0,0.6); 
            backdrop-filter: blur(5px);
            z-index: 2000; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            opacity: 0; 
            visibility: hidden; 
            transition: var(--transition); 
            padding: 20px;
        }
        .modal-overlay.active { 
            opacity: 1; 
            visibility: visible; 
        }
        .modal-box {
            background: var(--clr-white); 
            width: 100%; 
            max-width: 600px; 
            border-radius: var(--radius-lg);
            padding: 40px; 
            position: relative; 
            transform: translateY(30px); 
            transition: var(--transition);
            max-height: 90vh; 
            overflow-y: auto;
        }
        .modal-overlay.active .modal-box { 
            transform: translateY(0); 
        }
        .close-modal {
            position: absolute; 
            top: 20px; 
            right: 20px; 
            background: var(--clr-vlight); 
            border: none;
            width: 35px; 
            height: 35px; 
            border-radius: 50%; 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            color: var(--clr-primary); 
            transition: var(--transition);
        }
        .close-modal:hover { 
            background: var(--clr-light); 
        }
        
        .form-group { 
            margin-bottom: 20px; 
        }
        .form-group label { 
            display: block; 
            margin-bottom: 8px; 
            font-size: 0.9rem; 
            font-weight: 500; 
        }
        .form-control {
            width: 100%; 
            padding: 12px 15px; 
            border: 1px solid var(--clr-light); 
            border-radius: 8px;
            font-family: var(--font-body); 
            font-size: 1rem; 
            transition: var(--transition);
        }
        .form-control:focus { 
            outline: none; 
            border-color: var(--clr-primary); 
            box-shadow: 0 0 0 3px var(--clr-vlight); 
        }
        .form-row { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
        }
        
        .success-msg { 
            display: none; 
            text-align: center; 
            padding: 40px 0; 
        }
        .success-msg.active { 
            display: block; 
        }
        .success-icon { 
            width: 60px; 
            height: 60px; 
            background: #e0f8e9; 
            color: #25D366; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            margin: 0 auto 20px; 
            font-size: 24px; 
        }

        .contact { 
            background: var(--clr-white); 
        }
        .contact-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 4rem; 
        }
        .contact-info-card { 
            background: var(--clr-bg-offwhite); 
            padding: 40px; 
            border-radius: var(--radius-lg); 
            border: 1px solid var(--clr-vlight); 
        }
        .info-item { 
            display: flex; 
            gap: 15px; 
            margin-bottom: 25px; 
        }
        .info-icon { 
            color: var(--clr-primary); 
            margin-top: 3px; 
        }
        .info-text h5 { 
            font-family: var(--font-body); 
            font-size: 1rem; 
            margin-bottom: 5px; 
        }
        .info-text p { 
            margin: 0; 
            font-size: 0.95rem; 
        }
        
        .instagram { 
            background: var(--clr-bg-offwhite); 
            text-align: center; 
        }
        .insta-grid { 
            display: grid; 
            grid-template-columns: repeat(6, 1fr); 
            gap: 15px; 
            margin-top: 3rem; 
        }
        .insta-item { 
            position: relative; 
            aspect-ratio: 1/1; 
            overflow: hidden; 
            border-radius: 12px; 
        }
        .insta-item img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: var(--transition); 
        }
        .insta-overlay {
            position: absolute; 
            inset: 0; 
            background: rgba(102, 77, 148, 0.8); 
            display: flex; 
            align-items: center; 
            justify-content: center;
            opacity: 0; 
            transition: var(--transition); 
            color: var(--clr-white); 
            font-weight: 500; 
            font-size: 0.9rem;
        }
        .insta-item:hover img { 
            transform: scale(1.1); 
        }
        .insta-item:hover .insta-overlay { 
            opacity: 1; 
        }

        footer { 
            background: #14101a; 
            color: rgba(255,255,255,0.65); 
            padding: 80px 0 30px; 
            font-size: 0.9rem; 
        }
        .footer-grid { 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr 1.5fr; 
            gap: 3rem; 
            margin-bottom: 60px; 
        }
        .footer-logo { 
            color: var(--clr-white); 
            font-family: var(--font-heading); 
            font-size: 1.4rem; 
            font-weight: 700;
            margin-bottom: 20px; 
            display: block; 
        }
        .footer-logo span { 
            color: var(--clr-light); 
        }
        .footer-logo-image img {
            max-height: 44px;
            width: auto;
            display: block;
        }
        footer .footer-col p {
            color: rgba(255,255,255,0.55);
            font-size: 0.9rem;
        }
        .footer-title { 
            color: var(--clr-vlight); 
            font-family: var(--font-heading); 
            font-size: 1.15rem; 
            margin-bottom: 25px; 
            position: relative;
            padding-bottom: 12px;
        }
        .footer-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 32px;
            height: 2px;
            background: var(--clr-primary);
        }
        .footer-links li { 
            margin-bottom: 12px; 
        }
        .footer-links a {
            color: rgba(255,255,255,0.6);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .footer-links a::before {
            content: '›';
            color: var(--clr-light);
            font-weight: 700;
            transition: var(--transition);
        }
        .footer-links a:hover { 
            color: var(--clr-white); 
            padding-left: 5px; 
        }
        .footer-contact-item {
            margin-bottom: 16px;
            line-height: 1.5;
        }
        .footer-contact-item strong {
            color: rgba(255,255,255,0.9);
        }
        .footer-bottom { 
            border-top: 1px solid rgba(255,255,255,0.1); 
            padding-top: 30px; 
            text-align: center; 
        }
        .footer-bottom p {
            color: rgba(255,255,255,0.45);
            font-size: 0.85rem;
            margin: 0;
        }

        .fab-container { 
            position: fixed; 
            bottom: 28px; 
            right: 28px; 
            display: flex; 
            flex-direction: column; 
            gap: 14px; 
            z-index: 999; 
        }
        .fab {
            width: 58px; 
            height: 58px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.16); 
            transition: var(--transition); 
            color: var(--clr-white);
            flex-shrink: 0;
            position: relative;
        }
        .fab svg {
            width: 26px;
            height: 26px;
            flex-shrink: 0;
        }
        .fab::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2px solid currentColor;
            opacity: 0;
            transform: scale(1);
        }
        .fab-wa {
            background: linear-gradient(145deg, #2be370, #1fb855);
        }
        .fab-wa::before {
            color: #25D366;
            animation: fabPulse 2.6s ease-out infinite;
        }
        .fab-wa:hover { 
            transform: translateY(-4px) scale(1.05); 
            box-shadow: 0 14px 28px rgba(37,211,102,0.35);
        }
        .fab-call {
            background: linear-gradient(145deg, var(--clr-primary), var(--clr-primary-hover));
            display: none;
        }
        .fab-call:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 14px 28px rgba(102,77,148,0.35);
        }
        @keyframes fabPulse {
            0% { opacity: 0.55; transform: scale(1); }
            80% { opacity: 0; transform: scale(1.45); }
            100% { opacity: 0; transform: scale(1.45); }
        }
        .fab-tooltip {
            position: absolute;
            right: calc(100% + 14px);
            top: 50%;
            transform: translateY(-50%) translateX(6px);
            background: var(--clr-black);
            color: var(--clr-white);
            padding: 7px 14px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: var(--transition);
        }
        .fab-tooltip::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid transparent;
            border-left-color: var(--clr-black);
        }
        .fab:hover .fab-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(0);
        }

        /* ===== Before / After Results Slider ===== */
        .results-section {
            background-color: var(--clr-bg-offwhite);
        }
        .results-header {
            max-width: 680px;
            margin: 0 auto 2.5rem;
            text-align: center;
        }
        .results-header p {
            font-size: 1.05rem;
        }
        .ba-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 2.5rem;
        }
        .ba-tab-btn {
            background: var(--clr-white);
            border: 1px solid var(--clr-light);
            padding: 10px 26px;
            border-radius: 30px;
            cursor: pointer;
            transition: var(--transition);
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--clr-text-main);
        }
        .ba-tab-btn.active,
        .ba-tab-btn:hover {
            background: var(--clr-primary);
            color: var(--clr-white);
            border-color: var(--clr-primary);
        }
        .ba-panel {
            display: none;
            max-width: 780px;
            margin: 0 auto;
        }
        .ba-panel.active {
            display: block;
        }
        .ba-compare {
            position: relative;
        }
        .ba-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-hover);
            background: var(--clr-vlight);
            touch-action: pan-y;
        }
        .ba-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-user-select: none;
            user-select: none;
            pointer-events: none;
        }
        .ba-img-before {
            clip-path: inset(0 50% 0 0);
        }
        .ba-tag {
            position: absolute;
            top: 16px;
            padding: 6px 16px;
            border-radius: 30px;
            background: rgba(0, 0, 0, 0.55);
            color: var(--clr-white);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            pointer-events: none;
        }
        .ba-tag-before { left: 16px; }
        .ba-tag-after { right: 16px; }
        .ba-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 3px;
            background: var(--clr-white);
            transform: translateX(-50%);
            pointer-events: none;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
        }
        .ba-divider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--clr-white);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--clr-primary);
            box-shadow: var(--shadow-hover);
        }
        .ba-divider-handle svg {
            width: 20px;
            height: 20px;
        }
        .ba-range {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: ew-resize;
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
        }
        .ba-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 46px;
            height: 46px;
        }
        .ba-range::-moz-range-thumb {
            width: 46px;
            height: 46px;
            border: none;
            background: transparent;
        }
        .ba-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 14px;
            font-size: 0.85rem;
            color: var(--clr-text-light);
        }
        .ba-note {
            text-align: center;
            font-size: 0.8rem;
            color: var(--clr-text-light);
            opacity: 0.75;
            margin-top: 2rem;
            margin-bottom: 0;
        }
        .ba-cta-wrap {
            text-align: center;
            margin-top: 2.5rem;
        }
        @media (max-width: 480px) {
            .ba-tab-btn {
                padding: 8px 18px;
                font-size: 0.85rem;
            }
            .ba-frame {
                aspect-ratio: 3 / 4;
            }
        }

        /* Scroll Reveal Utility Classes */
        .reveal { 
            opacity: 0; 
            transform: translateY(40px); 
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
        }
        .reveal.active { 
            opacity: 1; 
            transform: translateY(0); 
        }
        .reveal-delay-1 { 
            transition-delay: 0.1s; 
        }
        .reveal-delay-2 { 
            transition-delay: 0.2s; 
        }
        .reveal-delay-3 { 
            transition-delay: 0.3s; 
        }

        /* Image Placeholder Fallback */
        .img-fallback { 
            background-color: var(--clr-vlight); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            position: relative; 
        }
        .img-fallback::after {
            content: '+'; 
            font-size: 3rem; 
            color: var(--clr-primary); 
            opacity: 0.3; 
            font-family: monospace;
        }

        @media (max-width: 1200px) {
            .hero-title { 
                font-size: 3.2rem; 
            }
            .spec-grid, .treat-grid { 
                gap: 1.5rem; 
            }
        }

        @media (max-width: 992px) {
            .hero-grid, .about-grid, .why-grid { 
                grid-template-columns: 1fr; 
                gap: 3rem; 
            }
            .hero { 
                padding: 130px 0 60px; 
                text-align: center; 
            }
            .hero-actions { 
                justify-content: center; 
            }
            .hero-trust { 
                justify-content: center; 
            }
            .trust-strip-grid { 
                grid-template-columns: repeat(2, 1fr); 
            }
            .spec-grid { 
                grid-template-columns: repeat(2, 1fr); 
            }
            .treat-grid { 
                grid-template-columns: repeat(2, 1fr); 
            }
            .doc-grid {
                max-width: 700px;
            }
            .footer-grid { 
                grid-template-columns: 1fr 1fr; 
            }
            .testi-card { 
                min-width: calc(50% - 1rem); 
            }
            .floating-card {
                left: 15px;
                bottom: 15px;
                padding: 14px 18px;
                gap: 10px;
            }
            .about-deco {
                font-size: 9rem;
                top: -30px;
            }
        }

        @media (max-width: 768px) {
            .nav-container, .navbar.scrolled .nav-container {
                height: 68px;
            }
            .nav-links {
                position: fixed; 
                top: 68px; 
                left: 0; 
                width: 100%; 
                max-height: calc(100vh - 68px);
                overflow-y: auto;
                background: var(--clr-white);
                flex-direction: column; 
                align-items: stretch;
                padding: 10px 0 28px; 
                gap: 0; 
                box-shadow: 0 20px 40px rgba(0,0,0,0.12);
                transform: translateY(-16px); 
                opacity: 0; 
                visibility: hidden;
                transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, visibility 0s linear 0.35s; 
                border-top: 1px solid var(--clr-vlight);
                z-index: 999;
            }
            .nav-links.active { 
                transform: translateY(0); 
                opacity: 1; 
                visibility: visible;
                transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, visibility 0s linear 0s;
            }
            .nav-links .nav-link {
                display: block;
                width: 100%;
                text-align: center;
                padding: 16px 24px;
                opacity: 0;
                transform: translateY(10px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
            .nav-links.active .nav-link {
                opacity: 1;
                transform: translateY(0);
            }
            .nav-links.active .nav-link:nth-child(1) { transition-delay: 0.08s; }
            .nav-links.active .nav-link:nth-child(2) { transition-delay: 0.13s; }
            .nav-links.active .nav-link:nth-child(3) { transition-delay: 0.18s; }
            .nav-links.active .nav-link:nth-child(4) { transition-delay: 0.23s; }
            .nav-links.active .nav-link:nth-child(5) { transition-delay: 0.28s; }
            .nav-links.active .nav-link:nth-child(6) { transition-delay: 0.33s; }
            .nav-link::after {
                display: none;
            }
            .nav-overlay {
                position: fixed;
                inset: 0;
                top: 68px;
                background: rgba(20, 12, 32, 0.45);
                z-index: 998;
                opacity: 0;
                visibility: hidden;
                transition: var(--transition);
            }
            .nav-overlay.active {
                opacity: 1;
                visibility: visible;
            }
            .mobile-toggle { 
                display: block; 
            }
            .header-cta { 
                display: none; 
            }
            
            .hero-title { 
                font-size: 2.5rem; 
            }
            .about-content h2, .cta-content h2 { 
                font-size: 2.2rem; 
            }
            .exp-content h2 {
                font-size: 1.7rem;
            }
            .fab-call {
                display: flex;
            }
            .fab-container {
                bottom: 20px;
                right: 20px;
                gap: 12px;
            }
            .fab-tooltip {
                display: none;
            }
            .spec-grid, .treat-grid { 
                grid-template-columns: 1fr; 
            }
            .doc-grid {
                max-width: 420px;
            }
            .insta-grid { 
                grid-template-columns: repeat(3, 1fr); 
            }
            .contact-grid { 
                grid-template-columns: 1fr; 
            }
            .form-row { 
                grid-template-columns: 1fr; 
            }
            .testi-card { 
                min-width: 100%; 
            }
            .benefits-grid {
                grid-template-columns: 1fr;
            }
            .treat-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .modal-box {
                padding: 28px 22px;
            }
            .about-deco {
                font-size: 6.5rem;
                top: -20px;
            }
            .hero-image-wrapper::before {
                top: -12px;
                right: -12px;
                bottom: 12px;
                left: 12px;
            }
        }

        @media (max-width: 480px) {
            .hero-title { 
                font-size: 2.2rem; 
            }
            .trust-strip-grid { 
                grid-template-columns: 1fr; 
                gap: 1.5rem; 
            }
            .footer-grid { 
                grid-template-columns: 1fr; 
                gap: 2rem; 
            }
            .insta-grid { 
                grid-template-columns: repeat(2, 1fr); 
            }
            .fab-container { 
                bottom: 16px; 
                right: 16px; 
                gap: 10px;
            }
            .fab {
                width: 48px;
                height: 48px;
            }
            .fab svg {
                width: 22px;
                height: 22px;
            }
            .section-padding { 
                padding: 70px 0; 
            }
            .logo {
                font-size: 1.1rem;
            }
            .hero-desc {
                font-size: 1rem;
                max-width: 100%;
            }
            .hero-actions {
                flex-direction: column;
                width: 100%;
            }
            .btn {
                width: 100%;
            }
            .exp-content h2 {
                font-size: 1.5rem;
            }
            .experience {
                padding: 60px 0;
            }
            .floating-card {
                left: 10px;
                bottom: 10px;
                padding: 12px 14px;
            }
            .floating-card h4 {
                font-size: 0.85rem !important;
            }
            .floating-icon {
                width: 36px;
                height: 36px;
            }
            .modal-box {
                padding: 24px 18px;
            }
        }

/* =========================================================
   23.0 WordPress Core / Accessibility Helpers
   ========================================================= */

/* Skip link (accessibility) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--clr-primary);
    color: var(--clr-white);
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* Screen-reader text (required for Accessibility-Ready themes) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--clr-white);
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    clip: auto !important;
    clip-path: none;
    color: var(--clr-primary);
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    height: auto;
    left: 6px;
    line-height: normal;
    padding: 12px 16px;
    text-decoration: none;
    top: 6px;
    width: auto;
    z-index: 100000;
}

/* Default WP alignment / caption classes so content typed into the editor
   (Doctor bio, Treatment description, etc.) always looks right */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--clr-text-light); text-align: center; }
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* Keep the fixed navbar clear of the WP admin bar when logged in */
.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .navbar { top: 46px; }
}

/* Prose styling for regular Page/Post content (About page, the
   Skin/Hair/Dental landing pages, blog posts) rendered via
   the_content() inside page.php / single.php. */
.page-content h2 {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.page-content h3 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.page-content ul:not(.treat-grid):not(.treat-grid-compact) {
    margin: 0 0 1.5rem;
    padding: 0;
}
.page-content ul:not(.treat-grid):not(.treat-grid-compact) li {
    position: relative;
    list-style: none;
    padding-left: 32px;
    margin-bottom: 0.7rem;
    color: var(--clr-text-light);
}
.page-content ul:not(.treat-grid):not(.treat-grid-compact) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--clr-vlight);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664D94' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
.page-content img {
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
}
.page-content blockquote {
    border-left: 3px solid var(--clr-primary);
    padding-left: 1.2rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--clr-text-main);
}
.page-content .btn { margin-top: 0.5rem; }

/* [clinix_treatments] shortcode icon badge */
.treat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--clr-vlight);
    color: var(--clr-primary);
    margin-bottom: 14px;
}
.treat-card-icon svg { width: 22px; height: 22px; }

/* Centered icon badge for Page intros (Skin/Hair/Dental landing pages) */
.page-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--clr-vlight);
    color: var(--clr-primary);
    margin: 0 auto 1.5rem;
}
.page-icon-badge svg { width: 30px; height: 30px; }

/* FAQ items on Page content */
.faq-item {
    background: var(--clr-bg-offwhite);
    border: 1px solid var(--clr-vlight);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    margin-bottom: 1rem;
}
.faq-item h3 { margin-top: 0 !important; margin-bottom: 8px !important; font-size: 1.1rem !important; }
.faq-item p { margin-bottom: 0; }

/* Colorful closing CTA banner used on Page content */
.page-cta-banner {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-hover, #523d77));
    border-radius: var(--radius-lg);
    padding: 45px 30px;
    text-align: center;
    margin-top: 3rem;
    color: var(--clr-white);
}
.page-cta-banner h2 { color: var(--clr-white) !important; margin-top: 0 !important; }
.page-cta-banner p { color: rgba(255,255,255,0.85); max-width: 480px; margin-left: auto; margin-right: auto; }
.page-cta-banner .btn-white { margin-top: 0.5rem; }

/* Gravity/placeholder state for Doctor, Treatment and Testimonial images
   that don't have a photo uploaded yet — keeps the layout looking
   intentional instead of showing a broken image icon */
.clinix-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-vlight);
    color: var(--clr-primary);
    width: 100%;
    height: 100%;
}
.clinix-img-placeholder svg { width: 34%; height: 34%; opacity: 0.5; }

/* Simple star rating used on Testimonial cards pulled from admin */
.testi-stars svg.is-empty { opacity: 0.25; }