/* ========================================
   BAYANAID - BARANGAY MANGAHAN COMPLAINT SYSTEM
   File: style.css
   Description: Main stylesheet for community complaint system
   Author: BayanAid Development Team
   Version: 2.0
=========================================== */

/* ========================================
   LAHAT NG CONTENTS
===========================================
   1. CSS VARIABLES
   2. GLOBAL RESET & BODY
   3. NAVIGATION BAR
   4. HERO SECTION & BUTTONS
   5. FEATURES SECTION
   6. STATISTICS SECTION
   7. HOW IT WORKS SECTION
   8. FOOTER SECTION
   9. FORM STYLES
   10. ALERT MESSAGES
   11. COMPLAINT DETAILS CARD
   12. STATUS TIMELINE
   13. COMPLAINT INFO GRID
   14. STATUS BADGES
   15. LOADING ANIMATIONS
   16. BACK TO TOP BUTTON
   17. UTILITY CLASSES
   18. ANIMATIONS
   19. RESPONSIVE DESIGN (MOBILE)
   20. CONTACT PAGE STYLES
   20. PRINT STYLES
=========================================== */

/* ========================================
   1. CSS VARIABLES
=========================================== */
/* COMMENT: Dito nakalagay ang lahat ng kulay at effect na gamit sa buong website. Para madaling baguhin ang theme. */
:root {
    /* Color Palette */
    --primary-color: #2c3e50;      /* Dark blue-gray - main brand color */
    --secondary-color: #3498db;     /* Bright blue - accent color */
    --accent-color: #e74c3c;        /* Red - for warnings/errors */
    --success-color: #27ae60;        /* Green - for resolved/success */
    --warning-color: #f39c12;        /* Orange - for pending/warnings */
    --light-bg: #ecf0f1;             /* Light gray - background */
    --dark-text: #34495e;            /* Dark blue-gray - text color */
    --white: #ffffff;                 /* White */
    --gray-light: #ddd;               /* Light gray for borders */
    --gray-text: #666;                 /* Gray text */
    
    /* Effects */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.2);
    --shadow-blue: 0 10px 20px rgba(52, 152, 219, 0.3);
    --shadow-white: 0 10px 20px rgba(255, 255, 255, 0.3);
    
    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-circle: 50%;
}

/* ========================================
   2. GLOBAL RESET & BODY
=========================================== */
/* COMMENT: Inaalis ang default margin at padding ng browser para pantay ang itsura sa lahat ng device. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background-color: #f5f6fa;
}

/* ========================================
   3. NAVIGATION BAR
=========================================== */
/* COMMENT: Navigation bar - naka-sticky kaya laging nasa itaas kahit mag-scroll pababa. */
.navbar {
    background-color: var(--primary-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

/* Logo Styles */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: bold;
}

.logo i {
    color: var(--secondary-color);
    transition: var(--transition-base);
}

.logo:hover i {
    transform: rotate(360deg);
    color: var(--white);
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: var(--transition-base);
    transform: translateX(-50%);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 80%;
}

.nav-menu a:hover,
.nav-menu a.active {
    background-color: transparent;
    color: var(--secondary-color);
}

/* Hamburger Menu (Mobile) */
/* COMMENT: Ito ang menu icon na lalabas sa mobile phone. */
.hamburger {
    display: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.hamburger:hover {
    color: var(--secondary-color);
    transform: scale(1.1);
}

/* ========================================
   4. HERO SECTION & BUTTONS
=========================================== */
/* COMMENT: Ito ang malaking banner sa homepage. */
.hero {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: slideInDown 0.8s ease;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    animation: slideInUp 0.8s ease 0.2s both;
}

/* Hero Buttons Container */
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    animation: fadeIn 0.8s ease 0.4s both;
}

/* Base Button Styles - FIXED */
/* COMMENT: Pangkalahatang style para sa lahat ng buttons. */
.btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition-base);
    min-width: 0;
    width: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}


/* File Complaint Button */
.btn-primary {
    background-color: var(--secondary-color);  /* Blue */
    color: var(--white);
    border: 2px solid var(--secondary-color);
}

.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);  /* Blue glow */
}

/* Track Complaint Button - gawing same sa primary */
.btn-secondary {
    background-color: var(--secondary-color);  /* Same blue */
    color: var(--white);
    border: 2px solid var(--secondary-color);
}

.btn-secondary:hover {
    background-color: #2980b9;  /* Same darker blue */
    border-color: #2980b9;
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);  /* Same blue glow */
}

/* Button Icons Animation */
.btn i {
    transition: var(--transition-base);
}

.btn:hover i {
    transform: translateX(5px) scale(1.1);
}

/* Button Loading State */
.btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn.loading i {
    animation: spin 1s linear infinite;
}
/* Para sa Clear Filters button lang sa complaints page */
.filters .btn-secondary {
    background-color: var(--secondary-color); /* Blue */
    color: var(--white);
    border: 2px solid var(--secondary-color);
}

.filters .btn-secondary:hover {
    background-color: #2980b9; /* Darker blue */
    border-color: #2980b9;
}

/* Filters layout on complaints page */
.filters {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

.filter-control {
    width: 100%;
    min-width: 0;
    padding: 0 1rem;
    height: 46px;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 1rem;
}

.filter-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    min-width: 0;
    width: auto;
    white-space: nowrap;
    height: 46px;
    padding: 0 1.5rem;
}

/* ========================================
   5. FEATURES SECTION
=========================================== */
/* COMMENT: Mga feature cards na nagpapakita ng benefits ng BayanAid. */
.features {
    padding: 4rem 2rem;
    background-color: var(--white);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--secondary-color);
    border-radius: var(--radius-sm);
}

.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    background-color: var(--light-bg);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to bottom, var(--secondary-color), transparent);
    opacity: 0.1;
    transition: var(--transition-base);
}

.feature-card:hover::before {
    height: 100%;
}

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

.feature-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    transition: var(--transition-base);
}

.feature-card:hover .feature-icon {
    transform: scale(1.2) rotate(360deg);
    color: var(--primary-color);
}

.feature-card h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    transition: var(--transition-base);
}

.feature-card:hover h3 {
    color: var(--secondary-color);
}

.feature-card p {
    color: var(--gray-text);
    transition: var(--transition-base);
}

/* ========================================
   6. STATISTICS SECTION
=========================================== */
/* COMMENT: Section na may mga numero - kabuuang reklamo, pending, resolved, at complainants. */
.stats {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: var(--white);
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M20 20 L80 20 L80 80 L20 80 Z" fill="none" stroke="white" stroke-width="2"/></svg>') repeat;
    animation: slide 20s linear infinite;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.stat-item {
    transition: var(--transition-base);
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.stat-item:hover {
    transform: scale(1.1) translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    transition: var(--transition-base);
}

.stat-item:hover .stat-icon {
    transform: rotate(360deg);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
    transition: var(--transition-base);
}

.stat-item:hover .stat-number {
    transform: scale(1.1);
    color: var(--warning-color);
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ========================================
   7. HOW IT WORKS SECTION
=========================================== */
/* COMMENT: Step-by-step guide kung paano gamitin ang system. */
.how-it-works {
    padding: 4rem 2rem;
    background-color: var(--white);
}

.steps {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.step {
    text-align: center;
    position: relative;
    transition: var(--transition-base);
}

.step:hover {
    transform: translateY(-5px);
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
    transition: var(--transition-base);
    position: relative;
    z-index: 2;
}

.step:hover .step-number {
    background-color: var(--primary-color);
    transform: rotate(360deg) scale(1.1);
    box-shadow: var(--shadow-blue);
}

.step h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    transition: var(--transition-base);
}

.step:hover h3 {
    color: var(--secondary-color);
}

.step p {
    color: var(--gray-text);
    transition: var(--transition-base);
}

/* Connector between steps */
/* COMMENT: Arrow na nagkokonekta sa bawat step. */
.step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 20px;
    right: -20px;
    font-size: 2rem;
    color: var(--secondary-color);
    z-index: 1;
}

/* ========================================
   8. FOOTER SECTION
=========================================== */
/* COMMENT: Footer sa baba ng page - may contact info, links, at social media. */
.footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 3rem 2rem 1rem;
    position: relative;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section {
    transition: var(--transition-base);
}

.footer-section:hover {
    transform: translateY(-5px);
}

.footer-section h3 {
    margin-bottom: 1rem;
    color: var(--secondary-color);
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--secondary-color);
    transition: var(--transition-base);
}

.footer-section:hover h3::after {
    width: 80px;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition-base);
    display: inline-block;
}

.footer-section a:hover {
    color: var(--secondary-color);
    transform: translateX(10px);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    font-size: 1.5rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-circle);
    transition: var(--transition-base);
}

.social-links a:hover {
    background: var(--secondary-color);
    transform: translateY(-5px) rotate(360deg);
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    transition: var(--transition-base);
}

.footer-bottom:hover {
    border-top-color: var(--secondary-color);
}

/* ========================================
   9. FORM STYLES
=========================================== */
/* COMMENT: Style para sa mga form tulad ng complaint submission. */
.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.track-container {
    display: grid;
    gap: 1.5rem;
}

.track-search {
    background: var(--white);
    padding: 1.875rem;
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
}

.search-box {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.track-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    display: block;
    padding: 12px 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.track-button {
    padding: 12px 30px;
    white-space: nowrap;
    min-width: auto;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeIn 0.5s ease;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.form-container {
    background-color: var(--white);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    animation: slideInUp 0.5s ease;
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--light-bg);
    animation: fadeIn 0.5s ease;
}

.form-section h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section h3 i {
    color: var(--secondary-color);
    transition: var(--transition-base);
}

.form-section:hover h3 i {
    transform: rotate(360deg);
}

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

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--primary-color);
    transition: var(--transition-base);
}

.form-group:hover label {
    color: var(--secondary-color);
    transform: translateX(5px);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: var(--transition-base);
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
    transform: scale(1.02);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--secondary-color);
    box-shadow: var(--shadow-sm);
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Form Validation Styles */
.form-group.error input {
    border-color: var(--accent-color);
}

.form-group.error label {
    color: var(--accent-color);
}

.error-message {
    color: var(--accent-color);
    font-size: 0.85rem;
    margin-top: 0.3rem;
    animation: shake 0.3s ease;
}

/* ========================================
   10. ALERT MESSAGES
=========================================== */
/* COMMENT: Style para sa success at error messages. */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    animation: slideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    animation: pulse 2s infinite;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-success::before {
    background-color: var(--success-color);
}

.complaint-success-banner {
    position: fixed;
    top: 5.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 1200px);
    margin: 0;
    z-index: 1500;
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.18), var(--shadow-md);
    background: linear-gradient(90deg, #d4edda 0%, #e8f8ee 50%, #d4edda 100%);
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: var(--radius-sm);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    overflow: hidden;
    animation: complaintBannerGlow 2.2s ease-in-out infinite;
}

.complaint-success-banner--attention {
    animation-duration: 1.8s;
}

.complaint-success-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: complaintBannerSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.complaint-success-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--success-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.35);
    animation: complaintIconPulse 2.2s ease-in-out infinite;
}

.complaint-success-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.4;
}

.complaint-success-text span {
    font-size: 0.95rem;
    color: #2d5a35;
}

@keyframes complaintBannerGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.14), var(--shadow-md);
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(39, 174, 96, 0.08), 0 10px 30px rgba(39, 174, 96, 0.18);
        transform: translateX(-50%) scale(1.01);
    }
}

@keyframes complaintBannerSweep {
    0% {
        left: -40%;
    }
    45% {
        left: 110%;
    }
    100% {
        left: 110%;
    }
}

@keyframes complaintIconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.3);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 10px rgba(39, 174, 96, 0.08);
    }
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-danger::before {
    background-color: var(--accent-color);
}

.alert i {
    font-size: 1.3rem;
    animation: bounce 1s infinite;
}

.alert:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ========================================
   11. COMPLAINT DETAILS CARD
=========================================== */
/* COMMENT: Card na nagpapakita ng buong detalye ng complaint sa track.php. */
.complaint-details-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    animation: fadeIn 0.5s ease;
    transition: var(--transition-base);
}

.complaint-details-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.complaint-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.complaint-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.complaint-header h2 {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reference-badge {
    background: rgba(255,255,255,0.2);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    transition: var(--transition-base);
    cursor: pointer;
}

.reference-badge:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,0.3);
    box-shadow: var(--shadow-white);
}

/* ========================================
   12. STATUS TIMELINE
=========================================== */
/* COMMENT: Timeline na nagpapakita kung saang stage na ang complaint (Pending, In Progress, Resolved, Closed). */
.status-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 2rem;
    background-color: var(--light-bg);
    position: relative;
}

.status-item {
    text-align: center;
    position: relative;
    animation: fadeInUp 0.5s ease;
    animation-fill-mode: both;
    transition: var(--transition-base);
}

.status-item:hover {
    transform: translateY(-5px);
}

.status-item:nth-child(1) { animation-delay: 0.1s; }
.status-item:nth-child(2) { animation-delay: 0.2s; }
.status-item:nth-child(3) { animation-delay: 0.3s; }
.status-item:nth-child(4) { animation-delay: 0.4s; }

.status-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-color), var(--success-color));
    z-index: 1;
    animation: dash 1s linear forwards;
}

@keyframes dash {
    from { width: 0; }
    to { width: 100%; }
}

.status-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-circle);
    background-color: var(--white);
    border: 3px solid var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
    z-index: 2;
    transition: var(--transition-base);
}

.status-item:hover .status-icon {
    transform: scale(1.2);
}

.status-item.active .status-icon {
    background-color: var(--secondary-color);
    border-color: var(--white);
    color: var(--white);
    animation: pulse-glow 2s infinite;
}

.status-item.completed .status-icon {
    background-color: var(--success-color);
    border-color: var(--white);
    color: var(--white);
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

.status-content h4 {
    margin-bottom: 0.3rem;
    color: var(--primary-color);
    transition: var(--transition-base);
}

.status-item:hover h4 {
    color: var(--secondary-color);
}

.status-content p {
    font-size: 0.9rem;
    color: var(--gray-text);
}

/* ========================================
   13. COMPLAINT INFO GRID
=========================================== */
/* COMMENT: Grid layout para sa mga detalye ng complaint. */
.complaint-info {
    padding: 2rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.info-item {
    transition: var(--transition-base);
    animation: fadeInScale 0.5s ease;
    animation-fill-mode: both;
}

.info-item:nth-child(1) { animation-delay: 0.1s; }
.info-item:nth-child(2) { animation-delay: 0.2s; }
.info-item:nth-child(3) { animation-delay: 0.3s; }
.info-item:nth-child(4) { animation-delay: 0.4s; }
.info-item:nth-child(5) { animation-delay: 0.5s; }
.info-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInScale {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.info-item:hover {
    transform: translateX(10px);
}

.info-item.full-width {
    grid-column: span 2;
}

.info-item label {
    display: block;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.3rem;
    transition: var(--transition-base);
}

.info-item:hover label {
    color: var(--secondary-color);
    transform: translateX(5px);
}

.info-item p {
    background-color: var(--light-bg);
    padding: 0.8rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    border-left: 3px solid transparent;
}

.info-item:hover p {
    background-color: #e8f0fe;
    border-left-color: var(--secondary-color);
    box-shadow: var(--shadow-sm);
}

/* ========================================
   14. STATUS BADGES
=========================================== */
/* COMMENT: Mga badge na may iba't ibang kulay depende sa status ng complaint. */
.status-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge:hover {
    transform: scale(1.1) translateY(-2px);
    filter: brightness(1.1);
    box-shadow: var(--shadow-sm);
}

.status-pending {
    background-color: var(--warning-color);
    color: var(--white);
}

.status-in-progress {
    background-color: var(--secondary-color);
    color: var(--white);
}

.status-resolved {
    background-color: var(--success-color);
    color: var(--white);
}

.status-closed {
    background-color: #95a5a6;
    color: var(--white);
}

/* ========================================
   15. LOADING ANIMATIONS
=========================================== */
/* COMMENT: Mga animation habang naglo-load ang content. */
.loading-spinner {
    text-align: center;
    padding: 3rem;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid var(--light-bg);
    border-top: 5px solid var(--secondary-color);
    border-radius: var(--radius-circle);
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.spinner-pulse {
    width: 60px;
    height: 60px;
    background: var(--secondary-color);
    border-radius: var(--radius-circle);
    margin: 0 auto 1rem;
    animation: pulse-scale 1.5s ease-in-out infinite;
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0.2; }
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.loading-dots span {
    width: 12px;
    height: 12px;
    background: var(--secondary-color);
    border-radius: var(--radius-circle);
    animation: dots 1.4s infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dots {
    0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
    30% { transform: scale(1.5); opacity: 1; }
}

/* ========================================
   16. BACK TO TOP BUTTON
=========================================== */
/* COMMENT: Button na nagbabalik sa itaas ng page pag cinlick. */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--secondary-color);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 1000;
    border: none;
    box-shadow: var(--shadow-md);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.back-to-top:hover {
    transform: scale(1.1) rotate(360deg);
    background: var(--primary-color);
    box-shadow: var(--shadow-lg);
}

.back-to-top i {
    transition: var(--transition-base);
}

.back-to-top:hover i {
    transform: translateY(-5px);
}

/* ========================================
   17. UTILITY CLASSES
=========================================== */
/* COMMENT: Mga reusable classes para sa spacing at alignment. */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.p-5 { padding: 3rem; }

.hidden { display: none; }
.visible { display: block; }
.flex { display: flex; }
.grid { display: grid; }

/* ========================================
   18. ANIMATIONS
=========================================== */
/* COMMENT: Lahat ng animation na ginamit sa buong website. */
@keyframes slideInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    from { box-shadow: 0 0 5px -5px var(--secondary-color); }
    to { box-shadow: 0 0 20px 5px var(--secondary-color); }
}

@keyframes slide {
    from { background-position: 0 0; }
    to { background-position: 100px 100px; }
}

select, .form-select {
    display: inline-block !important;
    width: auto !important;
    min-width: 160px !important;
    height: auto !important;
    padding: 8px 12px !important;
    font-size: 1rem !important;
    background-color: var(--white) !important;
    border: 1px solid var(--gray-light) !important;
    border-radius: var(--radius-sm) !important;
}

input[type="text"], .form-control {
    padding: 10px 16px !important;
    font-size: 1rem !important;
    border-radius: var(--radius-sm) !important;
    border: 2px solid var(--gray-light) !important;
    width: 100% !important;
}

/* ========================================
   19. RESPONSIVE DESIGN (MOBILE)
=========================================== */
/* COMMENT: Para sa mobile at tablet - nag-aadjust ang design depende sa screen size. */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    /* Navigation */
    .nav-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0 1rem;
    }

    .nav-menu {
        display: flex;
        position: static;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    
    .nav-menu li {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .nav-menu a {
        display: block;
        padding: 0.8rem;
        text-align: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    
    .nav-menu a::after {
        display: none;
    }
    
    .hamburger {
        display: none;
    }
    
    /* Hero Section */
    .hero {
        padding: 4rem 1rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
    }
    
    /* Features */
    .features {
        padding: 3rem 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .features-grid {
        gap: 1rem;
    }
    
    .feature-card {
        padding: 1.5rem;
    }
    
    /* Statistics */
    .stats {
        padding: 3rem 1rem;
    }
    
    .stats-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-item {
        padding: 1.5rem;
    }
    
    /* How It Works */
    .how-it-works {
        padding: 3rem 1rem;
    }
    
    .steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .step:not(:last-child)::after {
        content: '↓';
        top: auto;
        bottom: -20px;
        right: 50%;
        transform: translateX(50%);
    }
    
    /* Forms */
    .form-container {
        padding: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }

    .filter-form {
        grid-template-columns: 1fr;
    }

    .filter-actions {
        flex-direction: column;
    }

    .filter-btn {
        width: 100%;
    }
    
    /* Timeline */
    .status-timeline {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .status-item {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 1rem;
    }
    
    .status-item:not(:last-child)::after {
        display: none;
    }
    
    .status-icon {
        margin: 0;
    }
    
    /* Info Grid */
    .info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-item.full-width {
        grid-column: span 1;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 1rem 1rem;
    }

    .track-search {
        padding: 1.25rem;
    }

    .search-box {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
    }

    .track-input {
        width: 100%;
    }

    .track-button {
        width: 100%;
    }

    /* Responsive adjustments for contact page */
    .contact-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        gap: 1.5rem;
    }
    .contact-card {
        padding: 1.5rem;
    }
    .contact-card-title {
        font-size: 1.3rem;
    }
    .contact-info-item {
        margin-bottom: 1rem;
    }
    .map-placeholder {
        height: 300px; /* Adjust map height */
    }
}

@media (max-width: 480px) {
    .contact-card {
        padding: 1rem;
    }
    .contact-card-title {
        font-size: 1.1rem;
    }
    .contact-info-item h3 {
        font-size: 1rem;
    }
    .contact-info-item p {
        font-size: 0.9rem;
    }
    .social-links-contact {
        flex-direction: column; /* Stack social buttons */
        gap: 0.8rem;
    }
    .btn-social {
        width: 100%;
        justify-content: center;
    }
    .map-placeholder {
        height: 200px;
        font-size: 0.9rem;
    }
    .map-placeholder i {
        font-size: 2rem !important; /* Override inline style */
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Back to Top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .nav-menu li {
        flex-basis: 100%;
    }

    .hero h1 {
        font-size: 1.8rem;
    }
    
    .btn {
        padding: 0.7rem 1.5rem;
        min-width: 0;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }

    .track-search {
        padding: 1rem;
    }

    .track-input,
    .track-button {
        width: 100%;
    }

    .filter-actions {
        gap: 0.5rem;
    }

    .filter-btn {
        width: 100%;
    }
    
    .complaint-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .reference-badge {
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
    }
}

@media print {
    /* Hide unnecessary elements */
    .navbar,
    .hero-buttons,
    .footer,
    .back-to-top,
    .btn,
    .form-actions,
    .hamburger,
    .social-links {
        display: none !important;
    }
    
    /* Print-friendly styles */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    .container {
        max-width: 100%;
        margin: 0;
        padding: 0.5in;
    }
    
    .complaint-details-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .status-timeline {
        background: white;
        border: 1px solid #ccc;
    }
    
    .status-icon {
        background: #f0f0f0 !important;
        color: black !important;
        border: 1px solid #999;
    }
    
    .status-item.active .status-icon,
    .status-item.completed .status-icon {
        background: #f0f0f0 !important;
        color: black !important;
    }
    
    .info-item p {
        background: white;
        border: 1px solid #ccc;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
    
    /* Page breaks */
    .page-break {
        page-break-before: always;
    }
}

/* ========================================
   END OF STYLESHEET
=========================================== */