/* Project 1000 — Bansal Hospital · Creative Public Landing */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #ED1C24;
    --primary-dark: #C8101E;
    --primary-deeper: #9B0C16;
    --primary-light: #FFF1F2;
    --primary-soft: #FFE4E6;
    --text: #111111;
    --text-muted: #555B61;
    --text-soft: #8B9298;<?php
/**
 * Project 1000 - Public Landing Page
 */
require_once __DIR__ . '/includes/functions.php';
startSecureSession();

$completed = (int)getSetting('procedures_completed', '317');
$target = (int)getSetting('target_procedures', '1000');
$pct = $target > 0 ? min(100, round(($completed / $target) * 100, 1)) : 0;
$phone = getSetting('hospital_phone', '+91-XXXXXXXXXX');
$phoneTel = preg_replace('/[^0-9+]/', '', $phone);

$pageTitle = 'Project 1000 — 1000 Lives. One Mission.';
require_once __DIR__ . '/includes/header.php';
?>

<!-- Hero -->
<section class="hero">
    <div class="container">
        <div class="hero-grid">
            
            <!-- Left Content -->
            <div class="hero-content">
                <span class="hero-badge">Public Health Initiative</span>
                <h1>PROJECT 1000</h1>
                <p class="tagline">1000 Lives. One Mission.</p>
                <p class="subtag">Early Diagnosis Can Save a Life.</p>
                <p class="desc">
                    Project 1000 offers free diagnostic Upper GI Endoscopies
                    to eligible patients. Early detection of upper gastrointestinal diseases can
                    dramatically improve outcomes and save lives.
                </p>
                <div class="hero-ctas">
                    <a href="#book" class="btn btn-primary btn-lg">Check Eligibility &amp; Book</a>
                    <a href="tel:<?= e($phoneTel) ?>" class="btn btn-secondary btn-lg">Call Now</a>
                </div>
            </div>

            <!-- Right Image -->
            <div class="hero-image">
                <img src="assets/naman-bansal-project1000.png" alt="Upper GI Endoscopy - Project 1000" loading="lazy">
            </div>

        </div>
    </div>
</section>

<!-- Progress -->
<section class="progress-section">
    <div class="container">
        <div class="progress-card">
            <div class="progress-left">
                <div class="progress-numbers">
                    <span class="current"><?= e((string)$completed) ?></span>
                    <span class="sep">/</span>
                    <span class="target"><?= e((string)$target) ?></span>
                </div>
                <div class="progress-label">Procedures Completed</div>
            </div>
            <div class="progress-bar-wrap">
                <div class="progress-bar">
                    <div class="progress-bar-fill" style="width: <?= $pct ?>%"></div>
                </div>
                <div class="progress-pct"><?= $pct ?>% of target</div>
            </div>
        </div>
    </div>
</section>

<!-- Why Early Diagnosis -->
<section class="section" id="about">
    <div class="container">
        <div class="section-header">
            <span class="section-eyebrow">Why it matters</span>
            <h2 class="section-title">Why Early Diagnosis?</h2>
            <p class="section-subtitle">
                Gastrointestinal cancers and serious digestive conditions often develop silently.
                Timely screening can detect problems when they are most treatable.
            </p>
        </div>
        <div class="why-grid">
            <div class="why-card">
                <div class="icon">🔍</div>
                <h3>Detect Before Symptoms Worsen</h3>
                <p>Many upper GI conditions, including early-stage cancers, can be identified through endoscopy long before severe symptoms appear.</p>
            </div>
            <div class="why-card">
                <div class="icon">❤️</div>
                <h3>Better Treatment Outcomes</h3>
                <p>When disease is found early, treatment is often less invasive, more effective, and associated with significantly higher survival rates.</p>
            </div>
            <div class="why-card">
                <div class="icon">🛡️</div>
                <h3>Prevent Complications</h3>
                <p>Screening helps prevent progression of ulcers, polyps, and inflammatory conditions into more serious disease requiring major intervention.</p>
            </div>
        </div>
    </div>
</section>

<!-- Symptoms -->
<section class="section symptoms-section" id="symptoms">
    <div class="container">
        <div class="section-header">
            <span class="section-eyebrow">Watch for these</span>
            <h2 class="section-title">Symptoms &amp; Warning Signs</h2>
            <p class="section-subtitle">
                If you experience any of these symptoms, speak with a doctor. Project 1000 may be able to help with diagnostic evaluation.
            </p>
        </div>
        <div class="symptoms-grid">
            <div class="symptom-item">Persistent acidity</div>
            <div class="symptom-item">Difficulty swallowing</div>
            <div class="symptom-item">Unexplained weight loss</div>
            <div class="symptom-item">Blood in stool</div>
            <div class="symptom-item">Black stools</div>
            <div class="symptom-item">Vomiting blood</div>
            <div class="symptom-item">Persistent abdominal pain</div>
            <div class="symptom-item">Changes in bowel habits</div>
            <div class="symptom-item">Suspected ulcer</div>
            <div class="symptom-item">GI cancer risk factors</div>
        </div>
        <div class="symptoms-cta">
            <a href="#book" class="btn btn-accent btn-lg">Check Eligibility &amp; Book</a>
        </div>
    </div>
</section>
<!-- Procedure -->
<section class="section" id="procedures">
    <div class="container">
        <div class="section-header">
            <span class="section-eyebrow">The procedure</span>
            <h2 class="section-title">The Procedure</h2>
            <p class="section-subtitle">
                Project 1000 provides free diagnostic Upper GI Endoscopy performed by qualified medical professionals.
            </p>
        </div>
        <div class="procedure-single-card" style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: center;">
            <div class="procedure-image">
                <img src="https://plus.unsplash.com/premium_photo-1661729943390-5fac7b09ea48?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Upper GI Endoscopy Procedure" style="width: 100%; height: auto; border-radius: 10px; object-fit: cover;" loading="lazy">
            </div>
            <div class="procedure-content">
                <h3>Upper GI Endoscopy</h3>
                <p>
                    An upper GI endoscopy (also called UGI Endoscopy) is a procedure that allows a doctor to examine
                    the lining of your esophagus, stomach, and the first part of the small intestine (duodenum)
                    using a thin, flexible tube with a camera.
                </p>
                <p>
                    It helps diagnose causes of persistent acidity, difficulty swallowing, unexplained weight loss,
                    ulcers, inflammation, and can detect early signs of upper GI cancers.
                </p>
            </div>
        </div>
        <div class="text-center" style="margin-top:40px;">
            <a href="#book" class="btn btn-accent btn-lg">Book Your Free Upper GI Endoscopy</a>
        </div>
    </div>
</section>

<!-- Booking Form -->
<section class="booking-section" id="book">
    <div class="container">
        <div class="booking-card">
            <h2>Check Eligibility &amp; Book Your Appointment</h2>
            <p class="form-intro">Fill in your details below. Our team will review and confirm your appointment.</p>

            <?php $flash = getFlash(); if ($flash): ?>
            <div id="formAlert" class="form-alert <?= $flash['type'] === 'error' ? 'error' : 'success' ?>">
                <?= e($flash['message']) ?>
            </div>
            <?php else: ?>
            <div id="formAlert" class="form-alert hidden"></div>
            <?php endif; ?>

            <form id="bookingForm" action="submit_booking.php" method="POST" novalidate>
                <input type="hidden" name="csrf_token" value="<?= e(generateCsrfToken()) ?>">
                <input type="hidden" name="slot_id" id="slot_id" value="">
                <input type="hidden" name="procedure" value="Upper GI Endoscopy">

                <div class="form-section-title">1. Patient Information</div>

                <div class="form-group">
                    <label for="name">Full Name <span class="req">*</span></label>
                    <input type="text" id="name" name="name" class="form-control" required maxlength="150" autocomplete="name" placeholder="Enter full name">
                </div>

                <div class="form-row">
    <div class="form-group">
        <label for="age">Age <span class="req">*</span></label>
        <input type="number" id="age" name="age" class="form-control" required min="1" max="120" placeholder="Years" inputmode="numeric">
    </div>
    <div class="form-group">
        <label for="phone">Mobile Number <span class="req">*</span></label>
        <input type="tel" id="phone" name="phone" class="form-control" required maxlength="20" autocomplete="tel" placeholder="10-digit mobile" inputmode="tel">
    </div>
</div>

<div class="form-group">
    <label>Gender <span class="req">*</span></label>
    <div class="radio-cards radio-cards-horizontal">
        <label class="radio-card">
            <input type="radio" name="gender" value="Male" required>
            <span class="radio-card-inner">
                <span class="radio-card-icon">♂</span>
                <span>Male</span>
            </span>
        </label>
        <label class="radio-card">
            <input type="radio" name="gender" value="Female">
            <span class="radio-card-inner">
                <span class="radio-card-icon">♀</span>
                <span>Female</span>
            </span>
        </label>
        <label class="radio-card">
            <input type="radio" name="gender" value="Other">
            <span class="radio-card-inner">
                <span class="radio-card-icon">◇</span>
                <span>Other</span>
            </span>
        </label>
    </div>
</div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="email">Email Address <span class="opt">(Optional)</span></label>
                        <input type="email" id="email" name="email" class="form-control" maxlength="150" autocomplete="email" placeholder="name@example.com">
                    </div>
                    <div class="form-group">
                        <label for="city">City / Area <span class="req">*</span></label>
                        <input type="text" id="city" name="city" class="form-control" required maxlength="100" placeholder="e.g. Bhopal">
                    </div>
                </div>

                <div class="form-section-title">2. Medical Information</div>

                <div class="form-group">
                    <label for="symptoms">Symptoms / Concerns</label>
                    <textarea id="symptoms" name="symptoms" class="form-control" placeholder="Briefly describe your symptoms or reason for seeking the procedure"></textarea>
                </div>

                <div class="form-group">
                    <label>Procedure</label>
                    <div class="form-control" style="background:var(--primary-light);font-weight:600;color:var(--primary);border-color:var(--primary-soft);">Upper GI Endoscopy</div>
                </div>

                
             

                <div class="form-section-title">3. Select Appointment</div>

                <div class="form-group">
                    <label for="appointment_date">Select Date <span class="req">*</span></label>
                    <input type="date" id="appointment_date" name="appointment_date" class="form-control" required>
                </div>

                <div class="form-group">
                    <label>Select Available Time Slot <span class="req">*</span></label>
                    <div id="slotsContainer" class="slots-container">
                        <div class="slots-message">Please select a date to view available slots</div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-accent btn-lg btn-block">Submit Appointment Request</button>
                </div>
            </form>
        </div>
    </div>
</section>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
    --bg: #F5F6F7;
    --bg-alt: #FAFAFA;
    --white: #FFFFFF;
    --border: #E5E7EB;
    --border-soft: #F0F1F3;
    --success: #059669;
    --danger: #DC2626;
    --warning: #D97706;
    --footer-bg: #1A1A1A;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow: 0 4px 24px rgba(17, 17, 17, 0.06);
    --shadow-md: 0 8px 32px rgba(17, 17, 17, 0.08);
    --shadow-lg: 0 16px 48px rgba(237, 28, 36, 0.12);
    --shadow-red: 0 8px 28px rgba(237, 28, 36, 0.25);
    --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 72px;
}

@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }

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

/* ─── Header ─── */
.site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}
/* Logo */
.logo {
    display: inline-block;
    text-decoration: none;
    line-height: 0; /* removes extra space below the image */
}

.logo img {
    height: 70px;          /* Adjust this value as needed */
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.logo:hover img {
    opacity: 0.85;
}

/* Mobile */
@media (max-width: 768px) {
    .logo img {
        height: 42px;
        max-width: 160px;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 36px;
        max-width: 140px;
    }
}

.main-nav {
    display: none;
    gap: 8px;
    align-items: center;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.main-nav a:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.main-nav .nav-cta {
    background: var(--primary);
    color: white !important;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    margin-left: 8px;
    box-shadow: var(--shadow-red);
}

.main-nav .nav-cta:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.35);
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
}

.nav-toggle:hover { background: var(--bg); }

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: 0.3s var(--ease);
}

@media (min-width: 768px) {
    .main-nav { display: flex; }
    .nav-toggle { display: none; }
}

.main-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    padding: 16px 22px 24px;
    border-bottom: 1px solid var(--border);
    gap: 4px;
    box-shadow: var(--shadow-md);
}

.main-nav.open a {
    padding: 12px 14px;
}

.main-nav.open .nav-cta {
    margin: 8px 0 0;
    text-align: center;
}

/* ─── Hero ─── */
.hero {
    background: linear-gradient(145deg, #ED1C24 0%, #C8101E 45%, #8B0A12 100%);
    color: white;
    padding: 60px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(255,255,255,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(0,0,0,0.15) 0%, transparent 50%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.hero-content .hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px;
}

.hero-content .tagline {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.95;
}

.hero-content .subtag {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0.85;
}

.hero-content .desc {
    font-size: 1.05rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 32px;
    max-width: 520px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-image img {
    width: 100%;
    border-radius: 16px;
   
    object-fit: cover;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-content .desc {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 50px 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s, border-color 0.2s;
    font-family: inherit;
    line-height: 1.2;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
    background: white;
    color: var(--primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.btn-primary:hover {
    background: #fff8f8;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255,255,255,0.45);
}

.btn-secondary:hover {
    border-color: white;
    background: rgba(255,255,255,0.1);
}

.btn-accent {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-red);
}

.btn-accent:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(237, 28, 36, 0.35);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.02rem;
}

.btn-block { width: 100%; }

/* ─── Progress ─── */
.progress-section {
    margin-top: -110px;
    position: relative;
    z-index: 10;
    padding-bottom: 8px;
}

.progress-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--border-soft);
}

.progress-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-numbers {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.progress-numbers .current {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -1.5px;
}

.progress-numbers .sep {
    font-size: 1.6rem;
    color: var(--text-soft);
    font-weight: 300;
}

.progress-numbers .target {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-weight: 600;
}

.progress-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.progress-bar-wrap {
    flex: 1;
    min-width: 180px;
    max-width: 340px;
}

.progress-bar {
    height: 12px;
    background: var(--primary-soft);
    border-radius: 100px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #FF5A60 100%);
    border-radius: 100px;
    transition: width 0.8s var(--ease);
    position: relative;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-pct {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 8px;
    text-align: right;
}

/* ─── Sections ─── */
.section {
    padding: 80px 0;
}

.section-title {
    font-size: clamp(1.55rem, 3.2vw, 2.05rem);
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 0;
    max-width: 540px;
    line-height: 1.65;
}

.section-header {
    text-align: center;
    margin-bottom: 52px;
}

.section-header .section-subtitle {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

/* ─── Why cards ─── */
.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.why-card {
    background: white;
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-soft);
    transition: transform 0.3s var(--ease), box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #FF6B70);
    opacity: 0;
    transition: opacity 0.3s;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.why-card:hover::before { opacity: 1; }

.why-card .icon {
    width: 52px;
    height: 52px;
    background: var(--primary-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.why-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.2px;
}

.why-card p {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

/* ─── Symptoms ─── */
.symptoms-section {
    background: white;
    position: relative;
}

.symptoms-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.symptoms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .symptoms-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .symptoms-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}

.symptom-item {
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px 14px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    transition: all 0.25s var(--ease);
    line-height: 1.4;
}

.symptom-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(237, 28, 36, 0.1);
}

.symptoms-cta {
    text-align: center;
    margin-top: 40px;
}

/* ─── Procedure ─── */
.procedure-single-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-soft);
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
}

.procedure-single-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), #FF6B70);
    border-radius: 0 4px 4px 0;
}

.procedure-single-card h3 {
    font-size: 1.25rem;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.procedure-single-card p {
    color: var(--text-muted);
    margin-bottom: 14px;
    font-size: 1rem;
    line-height: 1.7;
}

.procedure-single-card p:last-child { margin-bottom: 0; }
* ─── Booking ─── */
.booking-section {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--primary-light) 0%, transparent 60%),
        var(--bg);
    padding: 80px 0 90px;
}

.booking-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 28px;
    max-width: 1200px;
    margin: 100px auto;
    border: 1px solid var(--border-soft);
}

@media (min-width: 640px) {
    .booking-card { padding: 48px 52px; }
}

.booking-card h2 {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: -0.4px;
}

.booking-card .form-intro {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 36px;
    font-size: 0.98rem;
}

.form-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary);
    margin: 32px 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.form-section-title:first-of-type { margin-top: 0; }

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 7px;
    color: var(--text);
}

.form-group label .req {
    color: var(--primary);
}

.form-group label .opt {
    color: var(--text-soft);
    font-weight: 400;
    font-size: 0.82rem;
}

.form-control {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.98rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-alt);
    color: var(--text);
}

.form-control:hover {
    border-color: #d0d4d9;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3.5px rgba(237, 28, 36, 0.12);
}

textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 560px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 560px) {
    .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.radio-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.radio-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.94rem;
    transition: all 0.2s;
    background: var(--bg-alt);
    flex: 1;
    min-width: 140px;
}

.radio-card:hover {
    border-color: #d0d4d9;
}

.radio-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

.radio-card input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

/* Slots */
.slots-container { margin-top: 6px; }

.slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 480px) {
    .slots-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
    .slots-grid { grid-template-columns: repeat(5, 1fr); }
}

.slot-btn {
    padding: 13px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-family: inherit;
    color: var(--text);
}

.slot-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.slot-btn.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.3);
}

.slot-btn:disabled,
.slot-btn.booked {
    background: #F1F2F4;
    color: #A0A5AB;
    cursor: not-allowed;
    text-decoration: line-through;
    border-color: transparent;
}

.slots-message {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    border: 1.5px dashed var(--border);
}

.slots-message.full {
    color: var(--danger);
    background: #FEF2F2;
    border-style: solid;
    border-color: #FECACA;
}

/* Form alerts */
.form-alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-weight: 500;
    font-size: 0.94rem;
}

.form-alert.error {
    background: #FEF2F2;
    color: var(--danger);
    border: 1px solid #FECACA;
}

.form-alert.success {
    background: #ECFDF5;
    color: var(--success);
    border: 1px solid #A7F3D0;
}

.form-actions {
    margin-top: 32px;
    text-align: center;
}

.form-actions .btn {
    width: 100%;
    max-width: 380px;
}

/* ─── Confirmation ─── */
.confirm-section { padding: 70px 0 90px; }

.confirm-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 540px;
    margin: 0 auto;
    padding: 48px 36px;
    text-align: center;
    border: 1px solid var(--border-soft);
}

.confirm-icon {
    width: 76px;
    height: 76px;
    background: linear-gradient(145deg, #D1FAE5, #A7F3D0);
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    margin: 0 auto 22px;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2);
}

.confirm-card h1 {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.4px;
}

.confirm-card .appt-id {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 28px;
}

.confirm-details {
    text-align: left;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
    margin-bottom: 24px;
}

.confirm-details .row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
}

.confirm-details .row:last-child { border-bottom: none; }

.confirm-details .label {
    color: var(--text-muted);
    font-weight: 500;
}

.confirm-details .value {
    font-weight: 600;
    text-align: right;
}

.confirm-message {
    color: var(--text-muted);
    margin-bottom: 28px;
    font-size: 0.96rem;
}

.confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-Pending { background: #FEF3C7; color: #92400E; }
.status-Confirmed { background: #DBEAFE; color: #1E40AF; }
.status-Completed { background: #D1FAE5; color: #065F46; }
.status-Cancelled { background: #FEE2E2; color: #991B1B; }
.status-No\ Show { background: #F3E8FF; color: #6B21A8; }



/* ─── Footer ─── */
.site-footer {
    background: var(--footer-bg);
    color: #9CA3AF;
    padding: 56px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px;
}

@media (min-width: 640px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
}

.footer-brand .logo-mark {
    display: inline-block;
    margin-bottom: 12px;
}

.footer-brand strong {
    display: block;
    color: white;
    font-size: 1.12rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 280px;
}

.footer-links h4,
.footer-contact h4 {
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

.footer-links a {
    display: block;
    color: #9CA3AF;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover { color: white; }

.footer-contact p {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.footer-bottom {
    border-top: 1px solid #2A2A2A;
    padding-top: 22px;
    text-align: center;
    font-size: 0.82rem;
    color: #6B7280;
}

/* ─── Mobile sticky ─── */
.mobile-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: white;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.08);
}

.sticky-btn {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.2s;
}

.sticky-btn.primary {
    background: var(--primary);
    color: white;
}

.sticky-btn.primary:hover { background: var(--primary-dark); }

.sticky-btn.secondary {
    background: white;
    color: var(--primary);
}

.sticky-btn.secondary:hover { background: var(--primary-light); }

@media (min-width: 768px) {
    .mobile-sticky-bar { display: none; }
}

/* ─── Utilities ─── */
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.hidden { display: none !important; }