/* ===== GLOBAL ===== */
body {
    font-family: 'Poppins', sans-serif; /* Cleaner, modern font */
    margin: 0;
    background: #FAF7F2; /* Use this specific soft cream color for the whole page */
    color: #2B2B2B;
}

/* ===== HEADER ===== */

.main-header{
text-align:center;
padding:60px 40px;
color:white;
position:relative;

background:
linear-gradient(rgba(58,46,90,0.75), rgba(58,46,90,0.75)),
url("../images/background.jpg");

background-size:cover;
background-position:center;
}

.main-header h1{
font-size:48px;
letter-spacing:2px;
margin-bottom:10px;
font-weight:700;
text-shadow:0 4px 10px rgba(0,0,0,0.6);
}

/*Subtitle*/

.main-header p{
font-size:18px;
max-width:700px;
margin:auto;
opacity:0.9;
line-height:1.6;
}

.header-divider{
width:120px;
height:3px;
background:#D4AF37;
margin:15px auto 20px;
border-radius:2px;
}

/* ===== NAVBAR ===== */

.navbar{
display:flex;
justify-content:center;
gap:30px;
align-items:center;
padding:15px 20px;

background:#2b0f1f;

position:sticky;
top:0;
z-index:1000;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
 
backdrop-filter: blur(6px);

border-bottom:1px solid rgba(255,255,255,0.08);
}


.navbar a{
text-decoration:none;
font-weight:500;
color:white;
font-size:16px;
position: relative;
padding: 8px 14px;
transition: all 0.3s ease;
}

.navbar a:hover{
color:#734978;
background:rgba(255,255,255,0.05);
border-radius:6px;
}

.navbar a:after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:#734978;
transition:0.3s;
}

.navbar a:hover:after{
width:100%;
}

.navbar a:hover{
    color:#73457b;
}

.dark-mode .navbar{
    background: #111;
}

.dark-mode .navbar a{
    color: #eee;
}

.navbar{
border-bottom:1px solid rgba(255,255,255,0.1);
}

/* ===== UPDATED HERO SECTION ===== */
.hero {
    height: auto; /* Changed from 75vh since there is no image */
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FAF7F2; /* Matches the body exactly */
}

.hero-content {
    max-width: 800px;
    text-align: center;
}

.hero h2 {
    color: #3A2E5A; /* Dark purple/indigo from your header */
    font-size: 48px;
    margin-bottom: 10px;
    text-transform: none; /* More elegant than all-caps */
}

.hero p {
    color: #555;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/*FOOTER*/
.footer {
    background: #FAF7F2; /* Matches the body */
    padding: 40px 20px;
    text-align: center;
    color: #3A2E5A;
}

.footer-line {
    width: 50px;
    height: 2px;
    background: #D4AF37; /* Your gold color */
    margin: 0 auto 20px;
}

.footer p {
    margin: 5px 0;
}

/* Modern Button Shine Effect */
.explore-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.explore-btn:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    transition: 0.5s;
    pointer-events: none;
}

.explore-btn:hover:after {
    left: 120%;
}

/* Glassmorphism for the Navigation Bar */
.navbar {
    background: rgba(43, 15, 31, 0.9) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--primary-gold);
}

/* ===== BUTTONS ===== */

.explore-btn{
background:#D4AF37;
color:#2B2B2B;
padding:14px 30px;
border-radius:30px;
text-decoration:none;
font-weight:bold;
font-size:16px;
transition:0.3s;
}

.explore-btn:hover{
background:#c19a2e;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.4);
}

/* ===== FEATURES ===== */

.features{
text-align:center;
padding:40px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}

.feature-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

/* ===== PREMIUM HERITAGE DASHBOARD THEME ===== */
:root { 
    --gold: #D4AF37; 
    --purple: #2D2447; /* Deeper, more royal purple */
    --purple-light: #4A3B75;
    --accent-red: #A33A3A;
    --bg-soft: #F4F7FE; 
    --glass: rgba(255, 255, 255, 0.9);
}

* { box-sizing: border-box; }

body { 
    margin: 0; 
    background-color: var(--bg-soft); 
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; 
    color: #333;
}

.dashboard-container { display: flex; }

/* Sidebar: Deep Gradient with Glass Effect */
.sidebar {
    width: 260px;
    height: 100vh;
    background: linear-gradient(180deg, var(--purple) 0%, #1A152E 100%);
    color: white;
    padding: 40px 20px;
    position: fixed;
    left: 0;
    top: 0;
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    z-index: 1000;
}

.sidebar-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 20px;
}

.nav-link { 
    color: rgba(255,255,255,0.6); 
    text-decoration: none; 
    padding: 14px 18px; 
    border-radius: 12px; 
    margin-bottom: 8px; 
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover, .nav-link.active { 
    background: rgba(255,255,255,0.1); 
    color: var(--gold);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* Main Content: Spacing & Background */
.main-content { 
    flex: 1; 
    margin-left: 260px; 
    padding: 40px 50px; 
    min-height: 100vh;
    background: radial-gradient(circle at top right, #ffffff, var(--bg-soft));
}

.dash-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--purple);
    margin: 0;
    letter-spacing: -1px;
}

/* Quick Action Cards: Floating Style */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.action-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    background: var(--purple);
    color: white;
}

/* Stats Grid: Dynamic Colors */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.stat-card {
    background: white;
    padding: 25px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.02);
}

.stat-card small {
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.stat-card p {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 10px 0;
    color: var(--purple);
}

/* Visual Section Split */
.visual-section {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 30px;
    margin-bottom: 40px;
}

.chart-container, .info-side-card {
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Table: Clean & Modern */
.section-wrapper {
    background: white;
    padding: 35px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
th { text-align: left; padding: 15px; color: #aaa; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
td { padding: 20px 15px; background: #fff; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; }
tr td:first-child { border-left: 1px solid #f8f8f8; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
tr td:last-child { border-right: 1px solid #f8f8f8; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

.status-chip {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.chip-north { background: #EBF2FF; color: #3E7BFA; }
.chip-south { background: #FFF0F0; color: #FA3E3E; }
.chip-east { background: #EFFFF6; color: #00C48C; }
.chip-west { background: #FFF9EB; color: #FFA800; }

.view-link {
    color: var(--purple);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    background: #f0f0f0;
    padding: 8px 16px;
    border-radius: 8px;
    transition: 0.2s;
}

.view-link:hover {
    background: var(--gold);
    color: white;
}

/* Scroll Animation */
@keyframes reveal {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-card, .section-wrapper, .chart-container, .info-side-card {
    animation: reveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
/* ===== MAP ===== */

#map{
height:75vh;
width:100%;
margin-top:20px;
border-radius:0;
box-shadow:none;
}

.map-container{
width:100%;
max-width:1400px;
margin:auto;
}

#map {
    height: 500px !important;
    width: 100%;
    background: #eee; /* Helps see if the container is there */
    z-index: 1;
}
/* ===== SEARCH ===== */

.search-box{
text-align:center;
margin:20px;
}

.search-box input{
padding:10px;
width:250px;
border-radius:5px;
border:1px solid #ccc;
}

.search-box button{
padding:10px 15px;
background:#D4AF37;
color:#2B2B2B;
border:none;
border-radius:5px;
cursor:pointer;
}

/* ===== FILTER ===== */

.filter-box{
text-align:center;
margin:15px;
}

.filter-box select{
padding:10px;
border-radius:5px;
}

/* ===== DISCOVER BUTTON ===== */

.discover-box{
text-align:center;
margin:15px;
}

.discover-box button{
padding:12px 20px;
background:#D4AF37;
color:#2B2B2B;
border:none;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

/* ===== SPARKLE EFFECT ===== */

.sparkle{
position:absolute;
width:8px;
height:8px;
background:radial-gradient(circle,#fff,#D4AF37);
border-radius:50%;
pointer-events:none;
animation:sparkleAnim 0.6s linear;
}

@keyframes sparkleAnim{

0%{
transform:scale(1);
opacity:1;
}

100%{
transform:scale(4);
opacity:0;
}

}

/* ===== SCROLL ANIMATION ===== */

.gallery-card,
.feature-card,
.timeline-card{
opacity:0;
transform:translateY(40px);
}

.show{
opacity:1;
transform:translateY(0);
transition:0.8s ease;
}

/* ===== MAP POPUP ANIMATION ===== */

.leaflet-popup-content{
animation:popupAnim 0.5s ease;
}

@keyframes popupAnim{

0%{
transform:scale(0.7);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}

.leaflet-popup-content-wrapper{
border-radius:12px;
padding:8px;
}

.leaflet-popup-tip{
background:white;
}

/* ===== FLOATING BUTTON EFFECT ===== */

button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out){
animation:buttonFloat 3s ease-in-out infinite;
}

@keyframes buttonFloat{

0%{transform:translateY(0);}
50%{transform:translateY(-4px);}
100%{transform:translateY(0);}

}

/* General Dark Mode - applies to the page background */
.dark-mode {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* TARGETED FIX: Keep the header the same */
.dark-mode .main-header {
    /* Re-stating your original header styles ensures they aren't overwritten */
    background: linear-gradient(rgba(58,46,90,0.75), rgba(58,46,90,0.75)),
                url("../images/background.jpg") !important;
    background-size: cover;
    background-position: center;
    color: white !important; /* Keep the text white */
}

/* Ensure the title and subtitle in the header stay white */
.dark-mode .main-header h1, 
.dark-mode .main-header p {
    color: white !important;
}

/* Make sure Hero and Footer match the dark background */
.dark-mode .hero, 
.dark-mode .footer,
.dark-mode section {
    background-color: #1a1a1a !important;
    color: #eeeeee !important;
}

/* Optional: Make your gold divider pop more in the dark */
.dark-mode .header-divider {
    background: #FFD700; /* A slightly brighter gold for dark mode */
}
.dark-mode {
    background-color: #0f0b1e !important; /* Deep Midnight Purple */
}

/* ================= THE ULTIMATE TIMELINE FIX ================= */
#timeline {
    position: relative;
    max-width: 1200px;
    margin: 50px auto;
    padding: 40px 0;
    overflow: hidden; /* Prevents horizontal scroll glitches */
}

/* Central Gold Line */
#timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: #D4AF37;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 60px;
    box-sizing: border-box; /* IMPORTANT: Keeps padding inside the 50% width */
    clear: both;
}

/* LEFT SIDE */
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

/* RIGHT SIDE */
.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

/* The Content Box */
.timeline-content {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-top: 5px solid #3a2e5a; /* Purple Top Border */
    transition: 0.3s;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}

/* IMAGE FIX: Force pictures to show */
.timeline-content img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin: 15px 0;
    display: block; /* Ensures it doesn't collapse */
    background: #eee; /* Light grey if image fails */
}

/* Central Dot on the line */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border: 4px solid #D4AF37;
    border-radius: 50%;
    top: 30px;
    z-index: 2;
}

.timeline-item:nth-child(odd)::after { right: -14px; }
.timeline-item:nth-child(even)::after { left: -14px; }
/* ===== TEMPLE MAP MARKER ===== */

/* This creates the glowing effect */
.pulse-marker {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}



/* ===== MAP POPUP CARD ===== */

.leaflet-popup-content-wrapper{
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.25);
}

.leaflet-popup-content h3{
color:#3A2E5A;
margin-bottom:8px;
}

.leaflet-popup-content img{
    width:220px;
    height:auto;
border-radius:8px;
}

/* ===== DARK MODE ===== */

.dark-mode{
background:#1C1A24;
color:white;
}

.dark-mode .main-header{
background:#2A2733;
}

.dark-mode .navbar{
background:#8C6B1F;
}

.dark-mode .feature-card,
.dark-mode .stat-card,
.dark-mode .gallery-card,
.dark-mode .timeline-content{
background:#2A2733;
color:white;
}

.dark-mode .explore-btn,
.dark-mode .search-box button,
.dark-mode .discover-box button{
background:#D4AF37;
color:#2B2B2B;
}

/* === ui improvement ===*/

.search-box,
.discover-box,
.filter-box{
margin-bottom:15px;
}

.popup-img{
width:220px;
height:140px;
object-fit:cover;
border-radius:8px;
}


/* Update Global Colors for a more 'Sacred' feel */
:root {
  --primary-gold: #D4AF37;
  --sacred-purple: #3A2E5A;
  --soft-cream: #FAF7F2;
  --glass-white: rgba(255, 255, 255, 0.15);
  --deep-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

/* Glassmorphism for Navbar and Cards */
.navbar {
  -webkit-backdrop-filter: blur(12px) saturate(180%); /* Enhanced blur */
  backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(43, 15, 31, 0.85); /* Slightly transparent */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card, .gallery-card, .stat-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.2); /* Soft gold border */
  border-radius: 16px; /* Smoother corners */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--deep-shadow);
  border-color: var(--primary-gold);
}

/* Card styling for info sections */
.info-card {
    background: #ffffff;
    padding: 25px;
    margin: 20px 0;
    border-radius: 15px;
    border-left: 6px solid #D4AF37; /* Gold left border */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: left;
    transition: transform 0.3s ease;
}

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

.info-card h3 {
    color: #3A2E5A;
    margin-top: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.info-card p {
    line-height: 1.8;
    color: #4a4a4a;
    font-size: 16px;
}

/* Flex row for quick information */
.quick-stats {
    display: flex;
    justify-content: space-between;
    background: rgba(212, 175, 55, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.stat {
    font-size: 15px;
    color: #3A2E5A;
}


.summary-bar {
    background: rgba(255, 255, 255, 0.1); /* Subtle white overlay */
    border-left: 5px solid #ff9900; /* Use your primary theme color */
    padding: 15px;
    margin-top: 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Make sure it looks good in Dark Mode too */
.dark-mode .summary-bar {
    background: rgba(0, 0, 0, 0.3);
    color: #f1f1f1;
}

/*explore map*/
.search-suggestions {
    margin-top: 15px;
    text-align: center;
}

.suggestion-tag {
    display: inline-block;
    background: #f0ece2;
    color: #3a2e5a;
    padding: 6px 15px;
    margin: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid #d4af37;
    transition: all 0.3s ease;
}

.suggestion-tag:hover {
    background: #d4af37;
    color: white;
    transform: translateY(-2px);
}


/*sidebar list*/
.sidebar-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.sidebar-item {
    padding: 10px;
    background: #fdfaf5;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.sidebar-item:hover {
    border-color: #D4AF37;
    background: #fff;
    transform: translateX(5px);
}

/*hidden gems section*/
.gems-grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px;
    scrollbar-width: thin;
}

.gem-card {
    min-width: 200px;
    background: white;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    text-align: center;
}

.gem-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.gems-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Automatically fits more cards */
    gap: 20px;
    padding: 20px;
    justify-content: center;
}
/* Premium Dark Mode Styling */
.dark-mode .sidebar-item strong, 
.dark-mode .gem-card h4 {
    color: #D4AF37 !important; /* Soft Golden for Main Titles */
    transition: color 0.3s ease;
}

.dark-mode .sidebar-item small, 
.dark-mode .gem-card p {
    color: #E0E0E0 !important; /* Light Gray for Subtitles/States */
}

/* Enhancing the Card Appearance in Dark Mode */
.dark-mode .sidebar-item, 
.dark-mode .gem-card {
    background-color: #1E1E1E !important; /* Deep charcoal background */
    border: 1px solid #3A2E5A !important; /* Subtle purple border to match header */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Hover effect for a "Glow" feel */
.dark-mode .sidebar-item:hover, 
.dark-mode .gem-card:hover {
    border-color: #D4AF37 !important;
    background-color: #252525 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/*gallery-card*/
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 40px;
}

.gallery-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    border-top: 5px solid #D4AF37; /* Golden top border */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s transform ease;
}

.gallery-card:hover {
    transform: translateY(-10px);
}

.gallery-card h3 {
    color: #3a2e5a;
    margin-bottom: 15px;
}

.gallery-card ul {
    list-style: none; /* Removes boring bullets */
    padding: 0;
}

.gallery-card li {
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
}

.gallery-card li::before {
    content: "🕉️ "; /* Adds a spiritual icon before each stop */
}

/* Dark Mode fixes */
.dark-mode .gallery-card {
    background: #1e1e1e;
    color: white;
}

.dark-mode .gallery-card h3 {
    color: #D4AF37;
}

.dark-mode .gallery-card li {
    color: #ccc;
    border-bottom-color: #333;
}


/* Container for the side-by-side or stacked look */
.routes-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px;
}

.gallery-card {
    border-left: 6px solid #D4AF37; /* The Soft Gold accent */
    background: #fff;
    transition: all 0.3s ease;
    cursor: default;
}

.gallery-card:hover {
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
    transform: scale(1.02);
}

/* Dark Mode card style */
.dark-mode .gallery-card {
    background: #1e1e1e;
    border-color: #D4AF37;
    color: #eee;
}

.dark-mode .gallery-card h3 {
    color: #D4AF37; /* Consistent gold titles */
}

/* ===== FAVORITES PREMIUM GALLERY STYLE ===== */

/* 1. Filter Chips Styling */
#filterContainer::-webkit-scrollbar { display: none; } /* Hide scrollbar for clean look */

#filterContainer .action-card {
    background: white;
    color: var(--purple);
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid rgba(0,0,0,0.05);
    white-space: nowrap;
    border-radius: 10px;
    padding: 10px 20px;
    transition: 0.3s;
}

#filterContainer .action-card:hover {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
}

/* 2. Favorites Grid & Cards */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding-bottom: 50px;
}

.fav-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.02);
}

.fav-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(45, 36, 71, 0.1);
}

/* 3. Image Handling */
.fav-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* Keeps all images the same height automatically */
    object-fit: cover;
    transition: 0.5s;
}

.fav-card:hover .fav-image {
    transform: scale(1.05);
}

/* 4. Content & Info */
.fav-info {
    padding: 20px;
    flex-grow: 1;
}

.fav-info h3 {
    margin: 0;
    color: var(--purple);
    font-size: 1.1rem;
    font-weight: 800;
}

.fav-info p {
    margin: 5px 0 0 0;
    color: #888;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 5. Buttons/Actions */
.fav-actions {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
}

.btn-view {
    flex: 2;
    background: var(--purple);
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: 0.3s;
}

.btn-view:hover {
    background: var(--gold);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-remove {
    flex: 1;
    background: #FFF0F0;
    color: #FA3E3E;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}

.btn-remove:hover {
    background: #FA3E3E;
    color: white;
}

/* 6. Status Chips for Favorites (Optional) */
.fav-deity-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--purple);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}




/* ===== RESPONSIVE DESIGN (MOBILE FRIENDLY) ===== */

/* Tablets and Small Laptops */
@media (max-width: 1024px) {
    .sidebar {
        width: 80px; /* Shrink sidebar to icons only */
        padding: 20px 10px;
    }
    
    .sidebar-logo {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    .nav-link span {
        font-size: 1.5rem; /* Make icons bigger */
    }

    .nav-link {
        justify-content: center;
        padding: 15px 5px;
    }

    /* Hide text labels in sidebar to save space */
    .nav-link:not(span) {
        font-size: 0; 
    }

    .main-content {
        margin-left: 80px; /* Adjust margin for smaller sidebar */
        padding: 20px;
    }
}

/* Mobile Phones */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column; /* Stack sidebar on top if needed, or hide it */
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative; /* Sidebar moves to top of page */
        padding: 15px;
    }

    .sidebar-logo {
        margin-bottom: 15px;
        border-bottom: none;
    }

    .sidebar nav {
        display: flex;
        justify-content: space-around;
    }

    .main-content {
        margin-left: 0; /* No margin because sidebar is now on top */
        padding: 15px;
    }

    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .header-actions {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .header-actions .action-card {
        flex: 1; /* Buttons take equal width on mobile */
    }

    /* Stack Stats Grid 1 by 1 */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    /* Stack Favorites Grid 1 by 1 */
    .favorites-grid {
        grid-template-columns: 1fr !important;
    }

    .fav-card {
        max-width: 100%;
    }

    /* Make text smaller on mobile so it doesn't break */
    .dash-header h1 {
        font-size: 1.6rem;
    }

    .stat-card p {
        font-size: 1.5rem;
    }
}

/* About Page Specific Responsiveness */
@media (max-width: 768px) {
    .visual-section {
        grid-template-columns: 1fr; /* Stack developers and tech stack */
    }
    
    .action-grid {
        grid-template-columns: 1fr 1fr; /* 2 buttons per row on small phones */
    }
}


/* Precise Problem-Solution Styling */
.problem-box, .solution-box {
    padding: 20px;
    border-radius: 16px;
    background: #fafafa;
    height: 100%;
}

@media (max-width: 768px) {
    .visual-section {
        grid-template-columns: 1fr !important; /* Forces vertical stack on mobile */
        gap: 20px !important;
    }
}