/**
 * DailyCalendar.in Styles
 * DrikPanchang-inspired Traditional Hindu Calendar Theme
 */

:root {
    --primary-color: #8B0000;
    --primary-dark: #5C0000;
    --primary-light: #C62828;
    --secondary-color: #D84315;
    --accent-color: #D4AF37;
    --accent-light: #F5D76E;
    --saffron: #FF6B00;
    --bg-color: #FFF8F0;
    --card-bg: #FFFFFF;
    --text-color: #333333;
    --text-light: #666666;
    --border-color: #E8DDD4;
    --success-color: #2E7D32;
    --warning-color: #E65100;
    --danger-color: #B71C1C;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* ========================
   TOP BAR (Logo + Language)
   ======================== */
.dp-top-bar {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 0.5rem 0;
    border-bottom: 3px solid var(--accent-color);
}

.dp-top-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 50px;
    width: auto;
}

.dp-top-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-selector { position: relative; }

.lang-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(212,175,55,0.5);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    min-width: 140px;
    display: none;
    z-index: 1001;
    border-top: 3px solid var(--accent-color);
}

.lang-dropdown.active { display: block; }

.lang-option {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.lang-option:last-child { border-bottom: none; }

.lang-option:hover, .lang-option.active {
    background: var(--primary-color);
    color: white;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* ========================
   MAIN NAVIGATION BAR
   ======================== */
.dp-main-nav {
    background: linear-gradient(180deg, #4A0000, #3A0000);
    border-bottom: 2px solid var(--accent-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.dp-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dp-nav-item {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.dp-nav-item:hover, .dp-nav-item.active {
    background: rgba(212,175,55,0.15);
    color: var(--accent-light);
    border-bottom-color: var(--accent-color);
}

.dp-nav-item i {
    font-size: 0.8rem;
    color: var(--accent-color);
}

.dp-caret {
    font-size: 0.65rem !important;
    color: rgba(255,255,255,0.5) !important;
    margin-left: 0.15rem;
}

.dp-nav-dropdown {
    position: relative;
}

.dp-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(180deg, #FFFFFF, #FFFAF0);
    min-width: 200px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    display: none;
    z-index: 1001;
    border-top: 3px solid var(--accent-color);
}

.dp-nav-dropdown:hover .dp-dropdown-menu {
    display: block;
}

.dp-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.dp-dropdown-menu a:last-child { border-bottom: none; }

.dp-dropdown-menu a:hover {
    background: var(--primary-color);
    color: white;
    border-left: 3px solid var(--accent-color);
}

.dp-dropdown-menu a:hover i { color: var(--accent-color); }

.dp-dropdown-menu a i {
    color: var(--primary-color);
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
}

/* ========================
   MAIN CONTENT AREA
   ======================== */
.main-content {
    min-height: calc(100vh - 200px);
}

.dp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ========================
   HOMEPAGE HERO SECTION
   ======================== */
.dp-header-section {
    background: linear-gradient(135deg, #D84315 0%, #BF360C 50%, #8B0000 100%);
    color: white;
    padding: 1.5rem 0;
    position: relative;
}

.dp-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--accent-color) 0px, var(--accent-color) 10px, transparent 10px, transparent 15px);
}

.dp-header-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--accent-color) 0px, var(--accent-color) 10px, transparent 10px, transparent 15px);
}

.dp-header-minimal .dp-date-display {
    display: block;
    text-align: center;
}

.dp-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.dp-date-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.dp-hero-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: white;
}

.dp-hero-meta {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0 0 1rem 0;
}

.dp-date-card-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.dp-tithi-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.15);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dp-hindu-date-info {
    flex: 1;
    min-width: 0;
}

.dp-hindu-date-info .dp-tithi-line {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.dp-hindu-date-info .dp-samvat-line {
    font-size: 0.8rem;
    opacity: 0.85;
    line-height: 1.3;
}

.dp-festivals-today {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.dp-festival-badge {
    display: inline-block;
    background: rgba(212,175,55,0.25);
    border: 1px solid rgba(212,175,55,0.5);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}

.dp-festival-badge:hover {
    background: rgba(212,175,55,0.4);
}

.dp-gregorian-card {
    text-align: center;
    background: rgba(255,255,255,0.1);
    border: 2px solid var(--accent-color);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    flex-shrink: 0;
    min-width: 90px;
}

.dp-gregorian-card .dp-day-num {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.dp-gregorian-card .dp-month-year {
    font-size: 0.8rem;
    opacity: 0.9;
    display: block;
}

.dp-gregorian-card .dp-weekday {
    font-size: 0.8rem;
    opacity: 0.9;
    display: block;
    font-weight: 600;
}

.dp-location-bar {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.dp-hero-search-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.dp-hero-city-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: white;
    padding: 0.4rem;
    font-size: 0.9rem;
    outline: none;
    -webkit-appearance: none;
}

.dp-hero-city-input::placeholder { color: rgba(255,255,255,0.6); }

.dp-date-picker-mini input[type="date"] {
    min-height: 44px;
    font-size: 0.9rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(212,175,55,0.4);
    background: rgba(255,255,255,0.15);
    color: white;
    -webkit-appearance: none;
}

.dp-hero-city-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: none;
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dp-hero-city-results.active { display: block; }

.dp-timeline-section {
    background: #fff;
    padding: 1rem 0;
}

.dp-timeline-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

.dp-timeline-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dp-tl-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dp-tl-label {
    width: 110px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
    line-height: 1.2;
}

.dp-tl-label.bad { color: #c0392b; }
.dp-tl-label.good { color: #27ae60; }

.dp-tl-track {
    flex: 1;
    height: 20px;
    background: #e8e8e8;
    border-radius: 4px;
    position: relative;
    min-width: 0;
}

.dp-tl-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
}

.dp-tl-bar.bad { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.dp-tl-bar.good { background: linear-gradient(90deg, #27ae60, #2ecc71); }

.dp-tl-time {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: #555;
    white-space: nowrap;
    pointer-events: none;
}

.dp-tl-scale {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0 0 0;
    margin-left: calc(110px + 0.75rem);
    font-size: 0.7rem;
    color: #888;
}

.city-result {
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text-color);
    font-size: 0.9rem;
}

.city-result:hover { background: #FFF3E0; }
.city-result i { color: var(--primary-color); }
.city-name { font-weight: 500; }
.city-detail { font-size: 0.75rem; color: var(--text-light); display: block; }

.dp-date-picker-mini input {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 6px;
    background: rgba(255,255,255,0.9);
    font-size: 0.9rem;
}


/* ========================
   PAGE HEADER (for subpages)
   ======================== */
.page-header {
    background: linear-gradient(135deg, #D84315 0%, #BF360C 50%, #8B0000 100%);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--accent-color) 0px, var(--accent-color) 10px, transparent 10px, transparent 15px);
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--accent-color) 0px, var(--accent-color) 10px, transparent 10px, transparent 15px);
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-icon {
    font-size: 2rem;
    background: rgba(255,255,255,0.15);
    border: 2px solid var(--accent-color);
    padding: 0.75rem;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-icon i { color: var(--accent-color); }

.page-header h1 {
    font-size: 1.6rem;
    margin: 0;
}

.page-subtitle {
    opacity: 0.9;
    margin: 0;
    font-size: 0.9rem;
}

.page-location {
    text-align: right;
    opacity: 0.9;
}

/* ========================
   PANCHANG DATA TABLE
   ======================== */
.dp-section-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #FFFFFF;
    padding: 0.75rem 1rem;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid var(--accent-color);
}

.dp-section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
}

.dp-section-header h2 i {
    color: var(--accent-color);
}

.dp-section-body {
    border: 1px solid rgba(139,0,0,0.15);
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.dp-panchang-list {
    background: var(--card-bg);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.dp-panchang-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.dp-panchang-row:nth-child(odd) {
    background: rgba(255, 248, 225, 0.4);
}

.dp-panchang-row:last-child { border-bottom: none; }

.dp-panchang-row.location {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.dp-panchang-row.next-item {
    background: rgba(255, 248, 225, 0.6);
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent-color);
    font-size: 0.85rem;
}

.dp-panchang-row.next-item .dp-label {
    color: var(--text-light);
    font-style: italic;
}

.dp-label { color: var(--text-light); font-weight: 500; }
.dp-value { font-weight: 500; text-align: right; }
.dp-value em { font-size: 0.8rem; color: var(--text-light); }

/* Three Column Layout */
.dp-three-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.dp-column { min-width: 0; }

/* ========================
   HIGHLIGHT CARDS
   ======================== */
.dp-highlights-section { padding: 1rem 0; }

.dp-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.dp-highlight-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFAF0 100%);
    border: 1px solid rgba(212,175,55,0.3);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(139,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.dp-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--saffron), var(--accent-color));
}

.dp-highlight-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.dp-highlight-title {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dp-highlight-value { display: block; font-size: 0.9rem; }
.dp-highlight-value small { font-size: 0.8rem; color: var(--text-light); }
.dp-highlight-value .good { color: var(--success-color); font-weight: 600; }
.dp-highlight-value .avoid { color: var(--danger-color); font-weight: 600; }

/* ========================
   CATEGORIES / EXPLORE
   ======================== */
.dp-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}

.dp-category-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFAF0 100%);
    border: 1px solid rgba(212,175,55,0.3);
    padding: 1.25rem 0.75rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.dp-category-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--saffron), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s;
}

.dp-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(139,0,0,0.15);
    border-color: var(--accent-color);
}

.dp-category-card:hover::before { opacity: 1; }

.dp-category-card i {
    font-size: 1.8rem;
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.4rem;
}

.dp-category-name {
    font-size: 0.85rem;
    font-weight: 500;
}

/* ========================
   DATE NAVIGATION
   ======================== */
.date-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
    margin: 1rem auto;
    max-width: 1200px;
}

.date-nav-btn {
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.date-nav-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.date-display { text-align: center; }

.date-weekday {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
}

.date-full {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

/* ========================
   INFO BANNERS
   ======================== */
.info-banner {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    border: 1px solid rgba(255,152,0,0.3);
    border-left: 4px solid var(--saffron);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0.75rem auto;
    max-width: 1200px;
    font-size: 0.9rem;
}

/* ========================
   CURRENT HIGHLIGHT
   ======================== */
.current-highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 1.25rem;
    border-radius: 8px;
    text-align: center;
    margin: 1rem auto;
    max-width: 1200px;
    border: 2px solid var(--accent-color);
}

.current-label {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.current-value {
    font-size: 1.3rem;
    font-weight: 700;
}

.current-desc {
    margin-top: 0.3rem;
    opacity: 0.9;
    font-size: 0.85rem;
}

/* ========================
   CHOGHADIYA / HORA TABLES
   ======================== */
.choghadiya-legend {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
}

.legend-item {
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.quality-best { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.quality-good { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.quality-neutral { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.quality-bad { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.choghadiya-container, .hora-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 1rem;
}

.choghadiya-section, .hora-section {
    background: var(--card-bg);
    border: 1px solid rgba(139,0,0,0.15);
    border-radius: 6px;
    overflow: hidden;
}

.section-title {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
}

.section-title i { color: var(--accent-color); }

.choghadiya-table, .hora-table {
    padding: 0.25rem;
}

.table-header {
    display: grid;
    grid-template-columns: 50px 1fr 80px 80px 100px;
    padding: 0.6rem 0.75rem;
    background: rgba(139,0,0,0.08);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--primary-color);
    border-bottom: 1px solid rgba(139,0,0,0.15);
    margin-bottom: 0.25rem;
}

.hora-table .table-header {
    grid-template-columns: 60px 1fr 100px 100px;
}

.table-row {
    display: grid;
    grid-template-columns: 50px 1fr 80px 80px 100px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 1px;
    font-size: 0.85rem;
    transition: background 0.2s;
    border-bottom: 1px solid #f5f5f5;
}

.table-row:nth-child(odd) { background: rgba(255,248,225,0.4); }
.table-row:nth-child(even) { background: white; }

.hora-table .table-row {
    grid-template-columns: 60px 1fr 100px 100px;
}

.table-row:hover { background: rgba(255,153,51,0.1); }

.table-row.current-row {
    border: 2px solid var(--accent-color);
    background: rgba(255,248,225,0.8) !important;
    font-weight: 600;
}

/* ========================
   RELATED LINKS / INFO CARDS
   ======================== */
.related-links-card, .info-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFAF0 100%);
    border: 1px solid rgba(212,175,55,0.3);
    padding: 1.25rem;
    border-radius: 6px;
    margin: 1rem auto;
    max-width: 1200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.related-links-card h3, .info-card h3 {
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.related-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.related-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.related-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.related-link:hover i { color: white; }
.related-link i { color: var(--primary-color); }

.info-card.seo-intro {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-left: 4px solid var(--primary-color);
}

.info-card h2 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(139,0,0,0.15);
}

.info-card h2 i { margin-right: 0.5rem; color: var(--accent-color); }

.info-card ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.info-card li { margin-bottom: 0.4rem; font-size: 0.9rem; }

/* ========================
   PLANET COLORS
   ======================== */
.planet-surya, .planet-sun { background: #fff3e0; }
.planet-chandra, .planet-moon { background: #e3f2fd; }
.planet-mangal, .planet-mars { background: #ffebee; }
.planet-budh, .planet-mercury { background: #e8f5e9; }
.planet-guru, .planet-jupiter { background: #fff8e1; }
.planet-shukra, .planet-venus { background: #fce4ec; }
.planet-shani, .planet-saturn { background: #eceff1; }

/* ========================
   FOOTER
   ======================== */
.main-footer {
    background: linear-gradient(135deg, #2D0D0D, #1A0505);
    color: white;
    padding: 2.5rem 0 1rem;
    margin-top: 2rem;
    border-top: 3px solid var(--accent-color);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3, .footer-section h4 {
    color: var(--accent-color);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.footer-section p {
    opacity: 0.8;
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-section ul { list-style: none; }
.footer-section li { margin-bottom: 0.4rem; }

.footer-section a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.footer-section a:hover { color: var(--accent-color); }

.footer-bottom {
    border-top: 1px solid rgba(212,175,55,0.2);
    padding-top: 1rem;
    text-align: center;
    opacity: 0.6;
    font-size: 0.8rem;
}

/* ========================
   BUTTONS
   ======================== */
.btn {
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: 1px solid var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #A00000, var(--primary-color));
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--text-light);
    color: white;
}

/* ========================
   ERROR PAGE
   ======================== */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.error-content {
    text-align: center;
    max-width: 500px;
}

.error-icon {
    font-size: 3rem;
    color: var(--warning-color);
    margin-bottom: 1rem;
}

.error-content h1 {
    font-size: 4rem;
    color: var(--primary-color);
    margin: 0;
}

.error-content h2 { margin-bottom: 1rem; }

.error-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.error-suggestions {
    margin-top: 1.5rem;
    text-align: left;
}

.error-suggestions ul {
    list-style: none;
    margin-top: 0.5rem;
}

.error-suggestions li { margin-bottom: 0.4rem; }

.error-suggestions a {
    color: var(--primary-color);
    text-decoration: none;
}

/* ========================
   FILTER BAR
   ======================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
}

.year-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.current-year {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.filter-btn {
    padding: 0.4rem 0.75rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.month-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.month-tab {
    padding: 0.35rem 0.6rem;
    border-radius: 3px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.month-tab:hover, .month-tab.active {
    background: var(--primary-color);
    color: white;
}

/* ========================
   FESTIVAL CARDS
   ======================== */
.festivals-grid {
    display: grid;
    gap: 0.75rem;
}

.month-header {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary-color);
}

.month-header h2 {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.festival-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(145deg, #FFFFFF 0%, #FFFAF0 100%);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 6px;
    transition: all 0.2s;
}

.festival-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(139,0,0,0.1);
}

.festival-date {
    min-width: 55px;
    text-align: center;
    padding: 0.4rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: 1px solid var(--accent-color);
    color: white;
    border-radius: 6px;
}

.date-day {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
}

.date-weekday {
    display: block;
    font-size: 0.7rem;
    opacity: 0.9;
}

.festival-info { flex: 1; }

.festival-name {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: var(--text-color);
}

.festival-type {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: rgba(139,0,0,0.08);
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--primary-color);
}

.festival-desc {
    margin-top: 0.3rem;
    color: var(--text-light);
    font-size: 0.8rem;
}

.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 768px) {
    .dp-main-nav {
        position: relative;
    }
    
    .dp-nav-inner {
        display: none;
        flex-direction: column;
        align-items: stretch;
    }
    
    .dp-nav-inner.mobile-active {
        display: flex;
    }
    
    .dp-nav-item {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .dp-dropdown-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        background: rgba(0,0,0,0.2);
    }
    
    .dp-dropdown-menu a {
        color: white;
        border-bottom-color: rgba(255,255,255,0.1);
        padding-left: 2rem;
    }
    
    .dp-dropdown-menu a:hover {
        background: rgba(212,175,55,0.2);
    }
    
    .dp-nav-dropdown:hover .dp-dropdown-menu {
        display: none;
    }
    
    .dp-nav-dropdown.open .dp-dropdown-menu {
        display: block;
    }
    
    .mobile-menu-btn { display: block; }
    
    .dp-header-inner { padding: 0 0.75rem; }
    
    .dp-date-card-wrapper {
        gap: 0.6rem;
    }
    
    .dp-tithi-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .dp-hindu-date-info .dp-tithi-line { font-size: 0.85rem; }
    .dp-hindu-date-info .dp-samvat-line { font-size: 0.72rem; }
    
    .dp-gregorian-card {
        padding: 0.4rem 0.6rem;
        min-width: 70px;
    }
    
    .dp-gregorian-card .dp-day-num { font-size: 1.5rem; }
    .dp-gregorian-card .dp-month-year { font-size: 0.7rem; }
    .dp-gregorian-card .dp-weekday { font-size: 0.7rem; }
    
    .dp-hero-title { font-size: 1.05rem; margin: 0 0 0.3rem 0; }
    
    .dp-location-bar {
        gap: 0.5rem;
    }
    
    .dp-hero-search-wrapper {
        padding: 0.4rem 0.5rem;
    }
    
    .dp-hero-city-input { font-size: 0.82rem; padding: 0.3rem; }
    
    .dp-date-picker-mini input[type="date"] { min-height: 40px; font-size: 0.82rem; padding: 0.3rem 0.4rem; }
    
    .dp-festival-badge { font-size: 0.65rem; padding: 0.12rem 0.4rem; }
    
    .dp-tl-label { width: 80px; font-size: 0.7rem; }
    .dp-tl-row { gap: 0.4rem; }
    .dp-tl-track { height: 18px; }
    .dp-tl-time { font-size: 0.6rem; right: 3px; }
    .dp-tl-scale { margin-left: calc(80px + 0.4rem); font-size: 0.6rem; }
    .dp-timeline-wrap { padding: 0 0.75rem; }
    
    .page-header { flex-direction: column; text-align: center; }
    .page-location { text-align: center; }
    
    .choghadiya-container, .hora-container {
        grid-template-columns: 1fr;
    }
    
    .table-header, .table-row {
        grid-template-columns: 40px 1fr 60px 60px;
        font-size: 0.8rem;
    }
    
    .table-header span:last-child,
    .table-row span:last-child { display: none; }
    
    .festival-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dp-container { padding: 0.75rem 0.5rem; }
    .page-header { padding: 0.75rem; }
    .page-header h1 { font-size: 1.1rem; }
    
    .dp-header-section { padding: 0.75rem 0; }
    .dp-header-inner { padding: 0 0.5rem; }
    
    .dp-date-card-wrapper { gap: 0.5rem; }
    
    .dp-tithi-icon { width: 36px; height: 36px; font-size: 1rem; border-width: 1.5px; }
    
    .dp-hindu-date-info .dp-tithi-line { font-size: 0.8rem; }
    .dp-hindu-date-info .dp-samvat-line { font-size: 0.68rem; }
    
    .dp-gregorian-card {
        padding: 0.35rem 0.5rem;
        min-width: 60px;
        border-width: 1.5px;
    }
    .dp-gregorian-card .dp-day-num { font-size: 1.3rem; }
    .dp-gregorian-card .dp-month-year { font-size: 0.65rem; }
    .dp-gregorian-card .dp-weekday { font-size: 0.65rem; }
    
    .dp-hero-title { font-size: 0.95rem; }
    
    .dp-tl-label { width: 70px; font-size: 0.65rem; }
    .dp-tl-track { height: 16px; }
    .dp-tl-time { font-size: 0.55rem; right: 2px; }
    .dp-tl-scale { margin-left: calc(70px + 0.4rem); font-size: 0.55rem; }
}