/* BRAND DESIGN SYSTEM VARIABLES */
:root {
    --primary-blue: #0b5394;
    --light-blue: #3d85c6;
    --dark-blue: #073763;
    --sewage-accent: #e67e22;
    --bg-light: #f4f7f9;
}

body {
    background-color: var(--bg-light);
    color: #2c3e50;
    padding-bottom: 75px; /* Creates room for sticky mobile bar */
}

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

/* Custom Component Colors */
.bg-primary-blue { background-color: var(--primary-blue) !important; }
.bg-dark-blue { background-color: var(--dark-blue) !important; }
.text-primary-blue { color: var(--primary-blue) !important; }
.text-sewage { color: var(--sewage-accent) !important; }
.border-water { border-top: 5px solid var(--light-blue) !important; }
.border-sewage { border-top: 5px solid var(--sewage-accent) !important; }

/* Custom Hero Layout Overlay */
.hero-section {
    position: relative;
    background: url('https://images.unsplash.com/photo-1542013936693-8848e5742383?q=80&w=1974&auto=format&fit=crop') no-repeat center center/cover;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(7, 55, 99, 0.95) 0%, rgba(11, 83, 148, 0.85) 100%);
}

/* Arabic Text Pill Badge */
.arabic-badge {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 3px 12px;
    border-radius: 4px;
    display: inline-block;
}

/* PERSISTENT MOBILE SCREEN FOOTER CALL BUTTONS */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    background-color: white;
    box-shadow: 0 -3px 15px rgba(0,0,0,0.15);
    display: flex;
    z-index: 9999;
}
.sticky-btn {
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    text-decoration: none;
    color: white !important;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.sticky-water { background-color: var(--primary-blue); }
.sticky-whatsapp { background-color: #25d366; }
.sticky-sewage { background-color: #34495e; }

/* PURE CSS GALLERY FILTERS ENGINE */
input[name="gallery-filter"] { display: none; }
#filter-all:checked ~ .filter-controls label[for="filter-all"] { background-color: var(--primary-blue) !important; color: white !important; }
#filter-water:checked ~ .filter-controls label[for="filter-water"] { background-color: var(--light-blue) !important; color: white !important; }
#filter-sewage:checked ~ .filter-controls label[for="filter-sewage"] { background-color: var(--sewage-accent) !important; color: white !important; }
#filter-water:checked ~ .gallery-container .cat-sewage { display: none !important; }
#filter-sewage:checked ~ .gallery-container .cat-water { display: none !important; }