/* KEEP YOUR EXISTING CSS ABOVE UNCHANGED */
/* Add/replace with this full file if easier */

:root {
    --primary: #d4af37;
    --primary-glow: rgba(212, 175, 55, 0.35);
    --bg: #030712;
    --bg-soft: #0b1220;
    --card-bg: rgba(15, 23, 42, 0.78);
    --card-border: rgba(212, 175, 55, 0.14);
    --text-main: #f9fafb;
    --text-dim: #9ca3af;
    --text-soft: #d1d5db;
    --nav-bg: rgba(3, 7, 18, 0.92);
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #38bdf8;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    --radius: 24px;
    --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, #172033 0%, #030712 72%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.nav-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.logo-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }

.site-logo {
    width: 60px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.15));
}

.brand-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.brand-text span { color: var(--primary); }

.nav-links { display: flex; align-items: center; gap: 12px; }

.nav-btn,
.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.16);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-main);
    font-weight: 700;
    font-size: 14px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.nav-btn:hover,
.btn:hover,
button.btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    background: rgba(212, 175, 55, 0.06);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

.nav-btn.primary,
.btn.primary,
button.btn.primary {
    background: var(--primary);
    color: #111827;
    border-color: transparent;
    box-shadow: 0 8px 24px var(--primary-glow);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px 20px 40px;
}

.hero { text-align: center; margin-bottom: 38px; }

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.08);
    color: var(--primary);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 20px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.panel {
    background: var(--card-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.form { display: flex; flex-direction: column; gap: 16px; }

.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
}

input, select, textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-main);
    padding: 14px 16px;
    font-size: 15px;
    outline: none;
    transition: all 0.25s ease;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.08);
}

.error-message {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fecaca;
    border-radius: 16px;
    padding: 14px 18px;
    font-weight: 600;
    margin-top: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.08);
}
.badge-lost { background: rgba(239,68,68,.12); color: #fca5a5; }
.badge-found { background: rgba(34,197,94,.12); color: #86efac; }
.badge-deceased { background: rgba(148,163,184,.16); color: #cbd5e1; }
.badge-reunited { background: rgba(34,197,94,.16); color: #86efac; border: 1px solid rgba(34,197,94,.35); }
.badge-verified{ background: rgba(56, 189, 248, 0.16); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.35); }

.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: rgba(3, 7, 18, 0.94);
    border-top: 1px solid rgba(212,175,55,.18);
    backdrop-filter: blur(12px);
    transition: transform .25s ease;
    transform: translateY(100%);
}

.bottom-nav-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    align-items: end;
}

.bottom-nav-item {
    min-height: 52px;
    padding: 4px 6px;
    border-radius: 12px;
    color: var(--text-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .2s ease;
    text-align: center;
}
.bottom-nav-item:hover, .bottom-nav-item.active {
    color: var(--text-main);
    background: rgba(255,255,255,0.03);
    border-color: rgba(212,175,55,.18);
}
.bottom-nav-item.primary {
    background: rgba(212,175,55,.12);
    border-color: rgba(212,175,55,.30);
    color: var(--primary);
}
.bottom-nav-item svg {
    width: 22px !important; height: 22px !important;
    min-width: 22px !important; min-height: 22px !important;
    max-width: 22px !important; max-height: 22px !important;
    display: block; flex-shrink: 0; stroke-width: 2;
}
.bottom-nav-item span { font-size: 11px; line-height: 1; white-space: nowrap; }

.mobile-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 340px);
    background: rgba(3, 7, 18, 0.98);
    border-left: 1px solid rgba(212,175,55,.16);
    z-index: 1300;
    transform: translateX(100%);
    transition: transform .25s ease;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(12px);
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-close {
    align-self: flex-end;
    width: 40px; height: 40px;
    border: 0; border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff; font-size: 28px;
    line-height: 1; cursor: pointer;
}

.footer {
    margin-top: 42px;
    border-top: 1px solid rgba(212,175,55,.14);
    background: rgba(3,7,18,.55);
}
.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.footer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-dim);
}

/* =========================
   SHARED LAYOUT RULES
   ========================= */

.page-hero { text-align: center; margin-bottom: 26px; }
.page-title {
    margin: 0;
    font-size: clamp(30px, 4.5vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.page-title span { color: var(--primary); }
.page-intro {
    max-width: 860px;
    margin: 14px auto 0;
    color: var(--text-dim);
    font-size: 16px;
}
.section { margin-bottom: 24px; }
.section-title {
    margin: 0 0 8px;
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.section-title span { color: var(--primary); }
.section-subtitle { margin: 0 0 16px; color: var(--text-dim); }

.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
}
.feature-card h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-soft);
}

/* New Component Styles */
.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}
.cta-band h2 { margin: 0 0 8px; font-size: 24px; }
.cta-band .brand-accent { color: var(--primary); }
.cta-band p { margin: 0; color: var(--text-dim); }

.info-card {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 16px;
}
.info-card h3 { margin: 0 0 10px; color: var(--text-main); }
.info-card p { margin: 0; color: var(--text-dim); font-size: 14px;}


/* =========================
   ADMIN FIXED SECTION RULES
   ========================= */

.admin-page .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 36px 18px 110px;
}

/* users table desktop */
.admin-page #users .pigeon-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: table !important;
}
.admin-page #users .pigeon-table th,
.admin-page #users .pigeon-table td {
    padding: 10px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}
.admin-page #users .pigeon-table th {
    color: var(--text-soft);
    background: rgba(255,255,255,.03);
    font-weight: 700;
    text-transform: uppercase;
}
.admin-page #users > .panel > .result-card-list {
    display: none !important;
}

.admin-page .user-pigeons.is-hidden {
    display: none !important;
}

/* Pigeons Under Each User: desktop table visible */
.admin-page .pigeons-user-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
}
.admin-page .pigeons-user-table th,
.admin-page .pigeons-user-table td {
    padding: 10px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}
.admin-page .pigeons-user-table th {
    color: var(--text-soft);
    background: rgba(255,255,255,.03);
    font-weight: 700;
    text-transform: uppercase;
}
.admin-page .pigeons-user-cards {
    display: none;
}

/* action buttons */
.admin-page .actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.admin-page .actions .btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 9px;
}
.admin-page .search-bar { min-height: 42px; }

/* card styles */
.admin-page .result-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 14px;
}
.admin-page .result-card h4 { margin: 0 0 10px; }
.admin-page .result-meta { display: grid; gap: 8px; }

@media (max-width: 1100px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .nav-links { display: none; }

    .container { padding: 34px 16px 88px; }

    .site-logo { width: 46px; height: 46px; }
    .brand-text { font-size: .95rem; }

    .panel { padding: 22px; border-radius: 22px; }

    .bottom-nav { transform: translateY(0); }
    .bottom-nav-item svg {
        width: 20px !important; height: 20px !important;
        min-width: 20px !important; min-height: 20px !important;
        max-width: 20px !important; max-height: 20px !important;
    }
    .bottom-nav-item span { font-size: 10px; }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    
    .cta-band {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .cta-band .actions {
        justify-content: center;
        width: 100%;
    }

    .admin-page .container { padding: 22px 12px 105px; }
    .admin-page .panel { padding: 14px; border-radius: 14px; }

    /* users section mobile */
    .admin-page #users .pigeon-table { display: none !important; }
    .admin-page #users > .panel > .result-card-list {
        display: grid !important;
        gap: 10px;
    }

    /* pigeons-under-user mobile */
    .admin-page .pigeons-user-table { display: none !important; }
    .admin-page .pigeons-user-cards {
        display: grid !important;
        gap: 10px;
    }

    .admin-page .result-card {
        background: rgba(255,255,255,.02);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 12px;
        padding: 12px;
    }
    .admin-page .result-card h4 {
        margin: 0 0 8px;
        font-size: 15px;
    }
    .admin-page .result-meta { gap: 6px; }

    .admin-page .admin-user-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .admin-page .admin-user-actions .btn,
    .admin-page .admin-user-actions button.btn {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .bottom-nav,
    .mobile-menu {
        display: none !important;
    }
}
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();
include 'config.php';

$search_results = [];
$error = '';
$search_query = '';
$logo_url = $site_logo ?? "https://solar.wp-assist.co.za/wp-content/uploads/2026/05/Untitled-design-2-scaled.png";

function whatsapp_link_from_contact($contact, $ring, $location, $category) {
    $raw = trim((string)$contact);
    if ($raw === '') return '';

    $digits = preg_replace('/\D+/', '', $raw);
    if ($digits === '') return '';

    // SA normalize: 0XXXXXXXXX -> 27XXXXXXXXX
    if (strlen($digits) === 10 && strpos($digits, '0') === 0) {
        $digits = '27' . substr($digits, 1);
    }

    if (strlen($digits) < 9 || strlen($digits) > 15) return '';

    $msg = "Hi, I'm contacting you from Lost Pigeon Registry about ring: {$ring}. "
         . "Location: {$location}. Status: " . ucfirst($category) . ".";
    $msg = rawurlencode($msg);

    return "https://wa.me/{$digits}?text={$msg}";
}

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $search_number  = trim($_POST['search_number'] ?? '');
    $search_letters = trim($_POST['search_letters'] ?? '');
    $search_year    = trim($_POST['search_year'] ?? '');

    $search_query = trim($search_letters . ' ' . $search_number . ' ' . $search_year);

    if ($search_number === '' && $search_letters === '' && $search_year === '') {
        $error = "Please enter at least one search field.";
    } else {
        $number_clean  = preg_replace('/[^0-9]/', '', $search_number);
        $letters_clean = strtoupper(preg_replace('/[^A-Z]/i', '', $search_letters));
        $year_clean    = preg_replace('/[^0-9]/', '', $search_year);

        // normalize year handling
        if (strlen($year_clean) === 2) {
            $year2 = $year_clean;
            $year4_or_like = '%' . $year_clean; // matches 2025 etc
        } elseif (strlen($year_clean) === 4) {
            $year2 = substr($year_clean, -2);
            $year4_or_like = $year_clean;
        } else {
            $year2 = $year_clean;
            $year4_or_like = $year_clean;
        }

        $query = "
            SELECT
                p.pigeon_ring, p.ring_letters, p.ring_number, p.ring_year,
                p.location, p.contact, p.category, p.notes, p.date_posted,
                p.photo1, p.photo2, p.photo3,
                COALESCE(u.is_verified, 0) AS is_verified
            FROM tbl_pigeonring p
            LEFT JOIN users u ON u.id = p.user_id
            WHERE
                ( ? = '' OR REPLACE(REPLACE(REPLACE(UPPER(COALESCE(p.ring_letters, '')), ' ', ''), '-', ''), '/', '') LIKE CONCAT('%', ?, '%') )
            AND ( ? = '' OR REPLACE(REPLACE(REPLACE(COALESCE(p.ring_number, ''), ' ', ''), '-', ''), '/', '') LIKE CONCAT('%', ?, '%') )
            AND (
                    ? = ''
                    OR COALESCE(p.ring_year, '') = ?
                    OR RIGHT(COALESCE(p.ring_year, ''), 2) = ?
                    OR COALESCE(p.pigeon_ring, '') LIKE CONCAT('%', ?, '%')
                )
            ORDER BY p.id DESC
        ";

        $stmt = $conn->prepare($query);

        if (!$stmt) {
            $error = "Search preparation failed: " . htmlspecialchars($conn->error);
        } else {
            $stmt->bind_param(
                "ssssssss",
                $letters_clean, $letters_clean,
                $number_clean, $number_clean,
                $year_clean, $year4_or_like, $year2, $year2
            );

            if ($stmt->execute()) {
                $stmt->bind_result(
                    $pigeon_ring, $ring_letters, $ring_number, $ring_year,
                    $location, $contact, $category, $notes, $date_posted,
                    $photo1, $photo2, $photo3, $is_verified
                );

                while ($stmt->fetch()) {
                    $display_ring = $pigeon_ring;

                    if (
                        (empty($display_ring) || trim((string)$display_ring) === '') &&
                        (!empty($ring_letters) || !empty($ring_number) || !empty($ring_year))
                    ) {
                        $year_display = !empty($ring_year) ? substr((string)$ring_year, -2) : '';
                        $display_ring = trim((string)$ring_letters . ' ' . (string)$ring_number . ' ' . $year_display);
                    }

                    $cat = !empty($category) ? strtolower((string)$category) : 'lost';
                    if (!in_array($cat, ['lost', 'found', 'deceased', 'reunited'], true)) {
                        $cat = 'lost';
                    }

                    $search_results[] = [
                        'pigeon_ring'  => $display_ring,
                        'ring_letters' => $ring_letters,
                        'ring_number'  => $ring_number,
                        'ring_year'    => $ring_year,
                        'location'     => $location,
                        'contact'      => $contact,
                        'category'     => $cat,
                        'notes'        => $notes,
                        'date_posted'  => $date_posted,
                        'photo1'       => $photo1,
                        'photo2'       => $photo2,
                        'photo3'       => $photo3,
                        'is_verified'  => ((int)$is_verified === 1),
                        'whatsapp_url' => whatsapp_link_from_contact($contact, (string)$display_ring, (string)$location, $cat)
                    ];
                }

                if (empty($search_results)) {
                    $error = 'No results found for your search.';
                }
            } else {
                $error = "Search execution failed: " . htmlspecialchars($stmt->error);
            }

            $stmt->close();
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lost Pigeon Registry | South Africa</title>
    <meta name="description" content="Search, report, and reconnect lost racing pigeons across South Africa.">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <style>
        /* === MISSING POPUP OVERLAY CSS ADDED HERE === */
        .image-popup {
            position: fixed;
            inset: 0;
            background: rgba(3, 7, 18, 0.95);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .image-popup.active {
            opacity: 1;
            visibility: visible;
        }

        .image-popup-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 30;
            transition: background 0.2s ease;
        }

        .image-popup-nav:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .image-popup-prev {
            left: 20px;
        }

        .image-popup-next {
            right: 20px;
        }

        .image-popup-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            background: rgba(0, 0, 0, 0.5);
            padding: 4px 12px;
            border-radius: 999px;
            z-index: 30;
        }
        /* ============================================ */

        .image-popup-img {
            transition: transform 0.08s ease;
            transform-origin: center center;
            max-width: 92vw;
            max-height: 82vh;
            cursor: zoom-in;
            touch-action: none;
        }

        .image-popup-content{
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .image-popup-close{
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 30;
            width: 40px;
            height: 40px;
            border: 0;
            border-radius: 999px;
            background: rgba(0,0,0,.65);
            color: #fff;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-popup-close:hover{
            background: rgba(0,0,0,.85);
        }

        .bottom-nav-item svg {
            width: 22px;
            height: 22px;
            min-width: 22px;
            min-height: 22px;
            display: block;
            margin: 0 auto 4px;
        }

        .bottom-nav-item span {
            font-size: 11px;
            line-height: 1;
            display: block;
        }

        .search-three-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
        }

        /* === THUMBNAIL SIZING FIXES === */
        .pigeon-photo-grid {
            display: flex;
            gap: 12px;
            margin: 16px 0;
            flex-wrap: wrap;
        }

        .pigeon-photo-btn {
            background: none;
            border: 2px solid rgba(255,255,255,0.05);
            padding: 0;
            border-radius: 12px;
            overflow: hidden;
            cursor: zoom-in;
            height: 100px;
            flex: 1 1 calc(33.333% - 12px);
            max-width: 120px;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }

        .pigeon-photo-btn:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .pigeon-photo-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        /* ============================== */

        @media (max-width:768px){
            .search-three-grid{
                grid-template-columns:1fr;
            }
        }
    </style>
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <a href="index.php" class="logo-wrap">
            <img src="<?php echo htmlspecialchars($logo_url); ?>" alt="Lost Pigeon Registry Logo" class="site-logo">
            <span class="brand-text">Lost Pigeon <span>Registry</span></span>
        </a>
        <div class="nav-links">
            <a href="about.php" class="nav-btn">About</a>
            <a href="services.php" class="nav-btn">Services</a>
            <a href="contact.php" class="nav-btn">Contact</a>
            <a href="login.php" class="nav-btn primary">Login</a>
        </div>
    </nav>
</header>

<div class="mobile-menu" id="mobile-menu">
    <button class="mobile-menu-close" id="mobile-menu-close">&times;</button>
    <a href="index.php" class="nav-btn primary">Home</a>
    <a href="about.php" class="nav-btn">About</a>
    <a href="services.php" class="nav-btn">Services</a>
    <a href="contact.php" class="nav-btn">Contact</a>
    <a href="login.php" class="nav-btn">Login</a>
</div>

<nav class="bottom-nav" id="bottom-nav">
    <div class="bottom-nav-container">
        <a href="index.php" class="bottom-nav-item active">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5.5a1 1 0 0 1-1-1v-5h-3v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-10.5z"></path>
            </svg>
            <span>Home</span>
        </a>

        <a href="#search" class="bottom-nav-item">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <circle cx="11" cy="11" r="7"></circle>
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35"></path>
            </svg>
            <span>Search</span>
        </a>

        <a href="login.php" class="bottom-nav-item primary">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
            </svg>
            <span>Login</span>
        </a>

        <a href="contact.php" class="bottom-nav-item">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l9 6 9-6"></path>
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8"></path>
            </svg>
            <span>Contact</span>
        </a>

        <div class="bottom-nav-item" id="more-btn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
            <span>More</span>
        </div>
    </div>
</nav>

<div class="container">
    <section class="hero">
        <div class="status-indicator"><span class="pulse-dot"></span> South Africa’s Online Lost Pigeon Search Hub</div>
        <h1>Find a Lost Pigeon <span>Faster</span></h1>
        <p>Search ring numbers, report lost or found pigeons, and help reconnect birds with their rightful owners across South Africa.</p>
    </section>

    <section id="search" class="panel" style="max-width:1040px;margin:0 auto 30px;">
        <form action="index.php" method="POST" class="form">
            <div class="search-three-grid">
                <div class="input-group">
                    <label for="search_number">Ring Number</label>
                    <input
                        type="text"
                        id="search_number"
                        name="search_number"
                        placeholder="e.g. 12345"
                        value="<?php echo htmlspecialchars($_POST['search_number'] ?? ''); ?>"
                    >
                </div>

                <div class="input-group">
                    <label for="search_letters">Ring Letters</label>
                    <input
                        type="text"
                        id="search_letters"
                        name="search_letters"
                        placeholder="e.g. FB"
                        value="<?php echo htmlspecialchars($_POST['search_letters'] ?? ''); ?>"
                    >
                </div>

                <div class="input-group">
                    <label for="search_year">Ring Year</label>
                    <input
                        type="text"
                        id="search_year"
                        name="search_year"
                        placeholder="e.g. 25 or 2025"
                        value="<?php echo htmlspecialchars($_POST['search_year'] ?? ''); ?>"
                    >
                </div>
            </div>

            <button type="submit" class="btn primary">Search Now</button>
        </form>

        <?php if ($error): ?>
            <div class="error-message"><?php echo $error; ?></div>
        <?php endif; ?>

        <?php if (!empty($search_results)): ?>
            <div class="search-results-wrap" style="margin-top:28px;">
                <div class="search-results-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;">
                    <?php foreach ($search_results as $pigeon): ?>
                        <div class="panel search-result-card">
                            <div class="search-result-header" style="display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;">
                                <h3 style="margin:0;"><?php echo htmlspecialchars((string)$pigeon['pigeon_ring']); ?></h3>
                                <div style="display:flex;gap:8px;flex-wrap:wrap;">
                                    <?php if (!empty($pigeon['is_verified'])): ?>
                                        <span class="badge badge-verified">Verified Owner</span>
                                    <?php endif; ?>
                                    <span class="badge badge-<?php echo htmlspecialchars((string)$pigeon['category']); ?>">
                                        <?php echo htmlspecialchars(ucfirst((string)$pigeon['category'])); ?>
                                    </span>
                                </div>
                            </div>

                            <?php $photos = array_values(array_filter([$pigeon['photo1'] ?? '', $pigeon['photo2'] ?? '', $pigeon['photo3'] ?? ''])); ?>
                            <?php if (!empty($photos)): ?>
                                <div class="pigeon-photo-grid">
                                    <?php foreach ($photos as $i => $photo): ?>
                                        <button type="button" class="pigeon-photo-btn"
                                            data-gallery='<?php echo htmlspecialchars(json_encode($photos), ENT_QUOTES, 'UTF-8'); ?>'
                                            data-index="<?php echo (int)$i; ?>"
                                            aria-label="Open pigeon photo">
                                            <img src="<?php echo htmlspecialchars((string)$photo); ?>" alt="Pigeon photo" class="pigeon-photo-thumb">
                                        </button>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>

                            <div class="search-result-body">
                                <div><strong>Date Posted:</strong> <?php echo !empty($pigeon['date_posted']) ? htmlspecialchars(date("d M Y", strtotime((string)$pigeon['date_posted']))) : 'N/A'; ?></div>
                                <div><strong>Location:</strong> <?php echo htmlspecialchars((string)$pigeon['location']); ?></div>
                                <div><strong>Contact:</strong> <?php echo htmlspecialchars((string)$pigeon['contact']); ?></div>
                                <div><strong>Notes:</strong> <?php echo !empty(trim((string)$pigeon['notes'])) ? nl2br(htmlspecialchars((string)$pigeon['notes'])) : 'No notes added.'; ?></div>
                            </div>

                            <div class="result-actions" style="margin-top:10px;">
                                <?php if (!empty($pigeon['whatsapp_url']) && !in_array($pigeon['category'], ['deceased', 'reunited'], true)): ?>
                                    <a href="<?php echo htmlspecialchars((string)$pigeon['whatsapp_url']); ?>" target="_blank" rel="noopener" class="btn whatsapp-btn">
                                        <?php echo ($pigeon['category'] === 'lost') ? 'Contact Owner' : 'WhatsApp Contact'; ?>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>
    </section>
</div>

<div class="image-popup" id="image-popup" aria-hidden="true">
    <div class="image-popup-content">
        <button type="button" class="image-popup-close" id="image-popup-close" aria-label="Close">&times;</button>
        <button type="button" class="image-popup-nav image-popup-prev" id="image-popup-prev" aria-label="Previous">&#8249;</button>
        <img src="" alt="Pigeon full image" class="image-popup-img" id="image-popup-img">
        <button type="button" class="image-popup-nav image-popup-next" id="image-popup-next" aria-label="Next">&#8250;</button>
        <div class="image-popup-counter" id="image-popup-counter">1 / 1</div>
    </div>
</div>

<script>
const popup = document.getElementById('image-popup');
const popupImg = document.getElementById('image-popup-img');
const popupClose = document.getElementById('image-popup-close');
const popupPrev = document.getElementById('image-popup-prev');
const popupNext = document.getElementById('image-popup-next');
const popupCounter = document.getElementById('image-popup-counter');

let currentGallery = [];
let currentIndex = 0;

let zoomScale = 1;
let panX = 0, panY = 0;
let isDragging = false, dragStartX = 0, dragStartY = 0;
let pinchStartDist = 0, pinchStartScale = 1;

function applyZoomTransform() {
    if (!popupImg) return;
    popupImg.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomScale})`;
    popupImg.style.cursor = zoomScale > 1 ? (isDragging ? 'grabbing' : 'grab') : 'zoom-in';
}
function resetZoom() { zoomScale = 1; panX = 0; panY = 0; applyZoomTransform(); }
function zoomAt(clientX, clientY, delta) {
    const rect = popupImg.getBoundingClientRect();
    const oldScale = zoomScale;
    zoomScale = Math.max(1, Math.min(4, zoomScale + delta));
    if (zoomScale === 1) { panX = 0; panY = 0; applyZoomTransform(); return; }
    const cx = clientX - (rect.left + rect.width / 2);
    const cy = clientY - (rect.top + rect.height / 2);
    const ratio = zoomScale / oldScale;
    panX = (panX - cx) * ratio + cx;
    panY = (panY - cy) * ratio + cy;
    applyZoomTransform();
}
function updatePopupImage() {
    if (!currentGallery.length) return;
    popupImg.src = currentGallery[currentIndex];
    popupCounter.textContent = (currentIndex + 1) + ' / ' + currentGallery.length;
    const showNav = currentGallery.length > 1;
    popupPrev.style.display = showNav ? 'flex' : 'none';
    popupNext.style.display = showNav ? 'flex' : 'none';
    resetZoom();
}
function openImagePopup(gallery, index) {
    currentGallery = Array.isArray(gallery) ? gallery : [];
    currentIndex = Number.isInteger(index) ? index : 0;
    if (!currentGallery.length) return;
    updatePopupImage();
    popup.classList.add('active');
    popup.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
}
function closeImagePopup() {
    popup.classList.remove('active');
    popup.setAttribute('aria-hidden', 'true');
    popupImg.src = '';
    popupCounter.textContent = '1 / 1';
    document.body.style.overflow = '';
    currentGallery = [];
    currentIndex = 0;
    resetZoom();
}
function prevImage() { if (!currentGallery.length) return; currentIndex = (currentIndex - 1 + currentGallery.length) % currentGallery.length; updatePopupImage(); }
function nextImage() { if (!currentGallery.length) return; currentIndex = (currentIndex + 1) % currentGallery.length; updatePopupImage(); }

document.querySelectorAll('.pigeon-photo-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        let gallery = [];
        try { gallery = JSON.parse(btn.getAttribute('data-gallery') || '[]'); } catch (e) { gallery = []; }
        const index = parseInt(btn.getAttribute('data-index') || '0', 10);
        openImagePopup(gallery, index);
    });
});

popupImg?.addEventListener('wheel', (e) => { e.preventDefault(); zoomAt(e.clientX, e.clientY, e.deltaY < 0 ? 0.2 : -0.2); }, { passive: false });
popupImg?.addEventListener('dblclick', (e) => { if (zoomScale > 1) resetZoom(); else zoomAt(e.clientX, e.clientY, 1.2); });
popupImg?.addEventListener('mousedown', (e) => { if (zoomScale <= 1) return; isDragging = true; dragStartX = e.clientX - panX; dragStartY = e.clientY - panY; applyZoomTransform(); });
window.addEventListener('mousemove', (e) => { if (!isDragging) return; panX = e.clientX - dragStartX; panY = e.clientY - dragStartY; applyZoomTransform(); });
window.addEventListener('mouseup', () => { isDragging = false; applyZoomTransform(); });

popupImg?.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        pinchStartDist = Math.hypot(dx, dy);
        pinchStartScale = zoomScale;
    }
}, { passive: true });

popupImg?.addEventListener('touchmove', (e) => {
    if (e.touches.length === 2) {
        e.preventDefault();
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        const dist = Math.hypot(dx, dy);
        const factor = dist / (pinchStartDist || dist);
        zoomScale = Math.max(1, Math.min(4, pinchStartScale * factor));
        if (zoomScale === 1) { panX = 0; panY = 0; }
        applyZoomTransform();
    }
}, { passive: false });

popupClose?.addEventListener('click', closeImagePopup);
popupPrev?.addEventListener('click', prevImage);
popupNext?.addEventListener('click', nextImage);
popup?.addEventListener('click', (e) => { if (e.target === popup) closeImagePopup(); });

document.addEventListener('keydown', (e) => {
    if (!popup.classList.contains('active')) return;
    if (e.key === 'Escape') closeImagePopup();
    if (e.key === 'ArrowLeft') prevImage();
    if (e.key === 'ArrowRight') nextImage();
});

// MOBILE MENU LOGIC
const mobileMenu = document.getElementById('mobile-menu');
const moreBtn = document.getElementById('more-btn');
const closeBtn = document.getElementById('mobile-menu-close');
const bottomNav = document.getElementById('bottom-nav');

if (moreBtn && mobileMenu) {
    moreBtn.addEventListener('click', () => mobileMenu.classList.add('active'));
}
if (closeBtn && mobileMenu) {
    closeBtn.addEventListener('click', () => mobileMenu.classList.remove('active'));
}
document.querySelectorAll('.mobile-menu .nav-btn').forEach(link => {
    link.addEventListener('click', () => {
        if (mobileMenu) mobileMenu.classList.remove('active');
    });
});

let lastScroll = 0;
window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    if (window.innerWidth <= 768 && bottomNav) {
        bottomNav.style.transform = (currentScroll > lastScroll && currentScroll > 100)
            ? 'translateY(100%)'
            : 'translateY(0)';
        lastScroll = currentScroll;
    }
});
</script>
</body>
</html>