/* ==========================================================================
   திண்டிவனம் நீர்நிலைகள் புணரமைப்பு குழு
   Gingee Kannika Charitable Trust
   Mobile-first stylesheet
   Fonts: Poppins (Latin / UI) + Noto Sans Tamil (Tamil script)
   ========================================================================== */

:root{
    --primary-100:#1F3A5F;
    --primary-200:#4d648d;
    --primary-300:#acc2ef;
    --accent-100:#3D5A80;
    --accent-200:#cee8ff;
    --text-100:#FFFFFF;
    --text-200:#e0e0e0;
    --bg-100:#0F1C2E;
    --bg-200:#1f2b3e;
    --bg-300:#374357;
    --whatsapp-green:#25D366;
    --radius:14px;
    --shadow: 0 8px 24px rgba(0,0,0,0.35);
}

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

html{ scroll-behavior:smooth; }

body{
    font-family:'Poppins','Noto Sans Tamil',sans-serif;
    background:var(--bg-100);
    color:var(--text-100);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-tap-highlight-color: transparent;
}

.tamil, [lang="ta"]{
    font-family:'Noto Sans Tamil','Poppins',sans-serif;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font-family:inherit; }

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

/* ---------- Header / Nav ---------- */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--primary-100);
    box-shadow:var(--shadow);
}
.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 18px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
}
.brand-logo{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--accent-100);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:var(--text-100);
    font-size:1.1rem;
    flex-shrink:0;
}
.brand-text h1{
    font-size:0.95rem;
    font-family:'Noto Sans Tamil',sans-serif;
    color:var(--text-100);
    line-height:1.2;
}
.brand-text span{
    font-size:0.68rem;
    color:var(--primary-300);
    display:block;
}
.nav-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
}
.nav-toggle span{
    width:26px;
    height:3px;
    background:var(--text-100);
    border-radius:2px;
    transition:0.3s;
}
.nav-links{
    position:fixed;
    top:0;
    right:-100%;
    width:78%;
    max-width:320px;
    height:100vh;
    background:var(--bg-200);
    padding:90px 24px 24px;
    transition:right 0.35s ease;
    box-shadow:-6px 0 20px rgba(0,0,0,0.4);
    z-index:999;
}
.nav-links.active{ right:0; }
.nav-links li{ margin-bottom:22px; }
.nav-links a{
    font-size:1.05rem;
    color:var(--text-200);
    font-weight:500;
}
.nav-links a:hover{ color:var(--accent-200); }
.nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:998;
}
.nav-overlay.active{ display:block; }

@media(min-width:900px){
    .nav-toggle{ display:none; }
    .nav-links{
        position:static;
        height:auto;
        width:auto;
        background:none;
        box-shadow:none;
        padding:0;
        display:flex;
        flex-direction:row;
        gap:28px;
    }
    .nav-links li{ margin-bottom:0; }
    .brand-text h1{ font-size:1.1rem; }
}

/* ---------- Hero ---------- */
.hero{
    background:
        linear-gradient(180deg, rgba(15,28,46,0.55), rgba(15,28,46,0.95)),
        radial-gradient(circle at 30% 20%, var(--primary-200) 0%, transparent 55%);
    background-color:var(--bg-100);
    padding:56px 0 48px;
    text-align:center;
}
.hero-badge{
    display:inline-block;
    background:var(--accent-100);
    color:var(--accent-200);
    font-size:0.72rem;
    letter-spacing:0.5px;
    padding:6px 14px;
    border-radius:30px;
    margin-bottom:18px;
    font-weight:600;
}
.hero h2{
    font-family:'Noto Sans Tamil',sans-serif;
    font-size:1.7rem;
    line-height:1.35;
    color:var(--text-100);
    margin-bottom:14px;
}
.hero p.trust-name{
    color:var(--primary-300);
    font-size:0.95rem;
    margin-bottom:22px;
}
.hero-desc{
    color:var(--text-200);
    font-size:0.95rem;
    max-width:560px;
    margin:0 auto 28px;
}
.hero-actions{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
}
@media(min-width:600px){
    .hero-actions{ flex-direction:row; justify-content:center; }
    .hero h2{ font-size:2.3rem; }
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 28px;
    border-radius:30px;
    font-weight:600;
    font-size:0.95rem;
    border:none;
    cursor:pointer;
    width:100%;
    max-width:320px;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}
@media(min-width:600px){ .btn{ width:auto; } }
.btn:active{ transform:scale(0.97); }
.btn-primary{
    background:var(--accent-100);
    color:var(--text-100);
    box-shadow:0 6px 18px rgba(61,90,128,0.5);
}
.btn-primary:hover{ background:var(--primary-200); }
.btn-outline{
    background:transparent;
    color:var(--accent-200);
    border:2px solid var(--primary-300);
}
.btn-outline:hover{ background:var(--bg-300); }
.btn-whatsapp{
    background:var(--whatsapp-green);
    color:var(--text-100);
    box-shadow:0 6px 18px rgba(37,211,102,0.4);
}
.btn-whatsapp:hover{ filter:brightness(1.05); }
.btn-block{ width:100%; max-width:none; }

/* Floating WhatsApp button */
.whatsapp-float{
    position:fixed;
    bottom:20px;
    right:18px;
    z-index:900;
    background:var(--whatsapp-green);
    color:#fff;
    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.4);
    font-size:1.6rem;
}

/* ---------- Sections ---------- */
section{ padding:48px 0; }
.section-alt{ background:var(--bg-200); }
.section-title{
    text-align:center;
    margin-bottom:32px;
}
.section-title h3{
    font-family:'Noto Sans Tamil',sans-serif;
    font-size:1.4rem;
    color:var(--text-100);
    margin-bottom:8px;
}
.section-title p{
    color:var(--text-200);
    font-size:0.9rem;
}

/* Stats */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
@media(min-width:700px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{
    background:var(--bg-300);
    border-radius:var(--radius);
    padding:22px 12px;
    text-align:center;
}
.stat-card .num{
    font-size:1.6rem;
    font-weight:700;
    color:var(--accent-200);
}
.stat-card .label{
    font-size:0.78rem;
    color:var(--text-200);
    margin-top:4px;
}

/* Cards / Activities */
.cards-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}
@media(min-width:700px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .cards-grid{ grid-template-columns:repeat(3,1fr); } }
.card{
    background:var(--bg-300);
    border-radius:var(--radius);
    padding:24px 20px;
    box-shadow:var(--shadow);
}
.card .icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:var(--primary-100);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    margin-bottom:14px;
}
.card h4{
    font-family:'Noto Sans Tamil',sans-serif;
    font-size:1.05rem;
    margin-bottom:8px;
    color:var(--text-100);
}
.card p{
    font-size:0.88rem;
    color:var(--text-200);
}

/* About */
.about-block p{
    color:var(--text-200);
    font-size:0.92rem;
    margin-bottom:14px;
}
.about-block strong{ color:var(--accent-200); }

/* ---------- Forms ---------- */
.form-card{
    background:var(--bg-300);
    border-radius:var(--radius);
    padding:26px 20px;
    box-shadow:var(--shadow);
    max-width:520px;
    margin:0 auto;
}
.form-group{ margin-bottom:18px; }
.form-group label{
    display:block;
    font-size:0.85rem;
    color:var(--text-200);
    margin-bottom:6px;
    font-weight:500;
}
.form-group input,
.form-group textarea{
    width:100%;
    padding:13px 14px;
    border-radius:10px;
    border:1.5px solid var(--primary-200);
    background:var(--bg-100);
    color:var(--text-100);
    font-size:0.92rem;
    outline:none;
    transition:border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--accent-200);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
    color:var(--text-200);
    opacity:0.6;
}
.form-note{
    font-size:0.78rem;
    color:var(--text-200);
    margin-top:16px;
    text-align:center;
}

/* Selfie / Camera */
.camera-box{
    background:var(--bg-100);
    border:2px dashed var(--primary-200);
    border-radius:var(--radius);
    padding:16px;
    text-align:center;
    margin-bottom:18px;
}
#video, #canvas, #selfie-preview{
    width:100%;
    max-width:320px;
    border-radius:12px;
    margin:0 auto 12px;
    background:#000;
}
.camera-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.camera-actions .btn{
    max-width:none;
    flex:1 1 130px;
    padding:12px 16px;
    font-size:0.85rem;
}

/* ---------- Footer ---------- */
.site-footer{
    background:var(--primary-100);
    padding:36px 0 24px;
    text-align:center;
}
.site-footer p{
    color:var(--primary-300);
    font-size:0.82rem;
    margin-bottom:6px;
}
.footer-links{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-bottom:18px;
    flex-wrap:wrap;
}
.footer-links a{
    color:var(--text-200);
    font-size:0.85rem;
}
.footer-links a:hover{ color:var(--accent-200); }

/* ---------- Login Page ---------- */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:radial-gradient(circle at 50% 0%, var(--primary-200), var(--bg-100) 60%);
}
.login-card{
    background:var(--bg-300);
    border-radius:var(--radius);
    padding:32px 24px;
    width:100%;
    max-width:380px;
    box-shadow:var(--shadow);
    text-align:center;
}
.login-card .brand-logo{ margin:0 auto 16px; width:56px; height:56px; font-size:1.4rem; }
.login-card h2{
    font-family:'Noto Sans Tamil',sans-serif;
    font-size:1.15rem;
    margin-bottom:6px;
}
.login-card p.sub{
    font-size:0.82rem;
    color:var(--text-200);
    margin-bottom:24px;
}
.error-msg{
    background:rgba(255,80,80,0.15);
    border:1px solid #ff5c5c;
    color:#ffb3b3;
    padding:10px 14px;
    border-radius:8px;
    font-size:0.82rem;
    margin-bottom:16px;
}

/* ---------- Dashboard ---------- */
.dash-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    background:var(--primary-100);
}
.dash-header h2{ font-size:1rem; font-family:'Noto Sans Tamil',sans-serif; }
.logout-link{
    font-size:0.82rem;
    background:var(--bg-300);
    padding:8px 14px;
    border-radius:20px;
}
.table-wrap{
    overflow-x:auto;
    background:var(--bg-300);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
table{
    width:100%;
    border-collapse:collapse;
    min-width:560px;
}
th, td{
    padding:12px 14px;
    text-align:left;
    font-size:0.85rem;
    border-bottom:1px solid var(--bg-100);
    color:var(--text-200);
}
th{
    background:var(--primary-100);
    color:var(--text-100);
    white-space:nowrap;
}
td img{
    width:44px; height:44px; border-radius:50%; object-fit:cover;
}

/* ---------- Thank You Page ---------- */
.thankyou-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:32px;
}
.thankyou-card{ max-width:480px; }
.check-circle{
    width:84px; height:84px;
    border-radius:50%;
    background:var(--accent-100);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px;
    font-size:2.4rem;
    box-shadow:0 0 0 8px rgba(61,90,128,0.25);
}
.thankyou-card h1{
    font-family:'Noto Sans Tamil',sans-serif;
    font-size:1.5rem;
    margin-bottom:12px;
}
.thankyou-card p{
    color:var(--text-200);
    font-size:0.95rem;
    margin-bottom:28px;
}

/* Utility */
.text-center{ text-align:center; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.hidden{ display:none !important; }