/* 
 * Qatar Prayer - Main Stylesheet
 * Bilingual Support (English / Arabic)
 */

:root {
    --maroon: #8A1538;
    --white: #FFFFFF;
    --black: #111111;
    --gray: #333333;
    --light-gray: #F5F5F5;
    --border-gray: rgba(138, 21, 56, 0.1);
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--light-gray);
    color: var(--black);
    line-height: 1.6;
}

/* Arabic Font Support */
body[dir="rtl"] {
    font-family: 'Amiri', serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Star Animation */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes twinkle-delayed {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 5% 8%, white, transparent),
        radial-gradient(1.5px 1.5px at 12% 15%, white, transparent),
        radial-gradient(2px 2px at 20% 6%, white, transparent),
        radial-gradient(1px 1px at 8% 20%, white, transparent),
        radial-gradient(2px 2px at 18% 25%, white, transparent),
        radial-gradient(1.5px 1.5px at 10% 12%, white, transparent),
        radial-gradient(1px 1px at 28% 18%, white, transparent),
        radial-gradient(2px 2px at 15% 5%, white, transparent),
        radial-gradient(1.5px 1.5px at 32% 12%, white, transparent),
        radial-gradient(1px 1px at 6% 28%, white, transparent),
        radial-gradient(2px 2px at 24% 32%, white, transparent),
        radial-gradient(1.5px 1.5px at 35% 24%, white, transparent),
        radial-gradient(2px 2px at 45% 10%, white, transparent),
        radial-gradient(1px 1px at 50% 22%, white, transparent),
        radial-gradient(1.5px 1.5px at 55% 8%, white, transparent),
        radial-gradient(2px 2px at 42% 30%, white, transparent),
        radial-gradient(1px 1px at 48% 35%, white, transparent),
        radial-gradient(1.5px 1.5px at 58% 28%, white, transparent),
        radial-gradient(2px 2px at 65% 12%, white, transparent),
        radial-gradient(1px 1px at 70% 18%, white, transparent),
        radial-gradient(1.5px 1.5px at 75% 25%, white, transparent),
        radial-gradient(2px 2px at 82% 8%, white, transparent),
        radial-gradient(1px 1px at 88% 15%, white, transparent),
        radial-gradient(1.5px 1.5px at 92% 22%, white, transparent),
        radial-gradient(2px 2px at 78% 32%, white, transparent),
        radial-gradient(1px 1px at 85% 28%, white, transparent),
        radial-gradient(1.5px 1.5px at 95% 35%, white, transparent);
    background-size: 100% 100%;
    background-position: 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%);
    animation: twinkle 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1.5px 1.5px at 9% 10%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 16% 18%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 14% 28%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 30% 9%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 22% 16%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 7% 34%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 38% 14%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 44% 24%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 52% 11%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 60% 19%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 68% 26%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 73% 14%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 80% 22%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 86% 10%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 90% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 94% 18%, rgba(255,255,255,0.8), transparent);
    background-size: 100% 100%;
    background-position: 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%);
    animation: twinkle-delayed 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #8A1538 0%, #6B1029 100%);
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 700"><defs><filter id="glow"><feGaussianBlur stdDeviation="2" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g opacity="0.25" fill="%23000000" filter="url(%23glow)"><rect x="100" y="450" width="1200" height="200" rx="5"/><rect x="120" y="420" width="50" height="30"/><rect x="190" y="420" width="50" height="30"/><rect x="260" y="420" width="50" height="30"/><rect x="330" y="420" width="50" height="30"/><rect x="400" y="420" width="50" height="30"/><rect x="470" y="420" width="50" height="30"/><rect x="540" y="420" width="50" height="30"/><rect x="610" y="420" width="50" height="30"/><rect x="680" y="420" width="50" height="30"/><rect x="750" y="420" width="50" height="30"/><rect x="820" y="420" width="50" height="30"/><rect x="890" y="420" width="50" height="30"/><rect x="960" y="420" width="50" height="30"/><rect x="1030" y="420" width="50" height="30"/><rect x="1100" y="420" width="50" height="30"/><rect x="1170" y="420" width="50" height="30"/><rect x="1240" y="420" width="50" height="30"/><circle cx="145" cy="415" r="12" opacity="0.8"/><circle cx="215" cy="415" r="12" opacity="0.8"/><circle cx="285" cy="415" r="12" opacity="0.8"/><circle cx="355" cy="415" r="12" opacity="0.8"/><circle cx="425" cy="415" r="12" opacity="0.8"/><circle cx="495" cy="415" r="12" opacity="0.8"/><circle cx="565" cy="415" r="12" opacity="0.8"/><circle cx="635" cy="415" r="12" opacity="0.8"/><circle cx="705" cy="415" r="12" opacity="0.8"/><circle cx="775" cy="415" r="12" opacity="0.8"/><circle cx="845" cy="415" r="12" opacity="0.8"/><circle cx="915" cy="415" r="12" opacity="0.8"/><circle cx="985" cy="415" r="12" opacity="0.8"/><circle cx="1055" cy="415" r="12" opacity="0.8"/><circle cx="1125" cy="415" r="12" opacity="0.8"/><circle cx="1195" cy="415" r="12" opacity="0.8"/><circle cx="1265" cy="415" r="12" opacity="0.8"/><path d="M130 550 Q145 520 160 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M200 550 Q215 520 230 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M270 550 Q285 520 300 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M340 550 Q355 520 370 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M410 550 Q425 520 440 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M480 550 Q495 520 510 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M550 550 Q565 520 580 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M620 550 Q635 520 650 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M690 550 Q705 520 720 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M760 550 Q775 520 790 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M830 550 Q845 520 860 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M900 550 Q915 520 930 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M970 550 Q985 520 1000 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M1040 550 Q1055 520 1070 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M1110 550 Q1125 520 1140 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M1180 550 Q1195 520 1210 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><path d="M1250 550 Q1265 520 1280 550" fill="none" stroke="%23000000" stroke-width="4" opacity="0.9"/><rect x="580" y="480" width="120" height="170" rx="10"/><path d="M590 540 Q640 510 690 540" fill="none" stroke="%23000000" stroke-width="5" opacity="0.9"/><rect x="1150" y="170" width="80" height="480"/><rect x="1140" y="160" width="100" height="25"/><circle cx="1190" cy="150" r="25" opacity="0.85"/><path d="M1180 125 L1190 90 L1200 125" opacity="0.9"/><ellipse cx="1190" cy="80" rx="12" ry="22" opacity="0.9"/><rect x="1165" y="240" width="50" height="40" rx="8" opacity="0.7"/><rect x="1165" y="300" width="50" height="40" rx="8" opacity="0.7"/><rect x="1165" y="360" width="50" height="40" rx="8" opacity="0.7"/><rect x="1165" y="420" width="50" height="40" rx="8" opacity="0.7"/><rect x="1165" y="480" width="50" height="40" rx="8" opacity="0.7"/><ellipse cx="145" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="215" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="285" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="355" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="425" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="495" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="565" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="635" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="705" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="775" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="845" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="915" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="985" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="1055" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="1125" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="1195" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/><ellipse cx="1265" cy="465" rx="15" ry="8" fill="%23ffcc66" opacity="0.4"/></g></svg>'),
        linear-gradient(135deg, #8A1538 0%, #6B1029 100%);
    background-size: calc(100% - 20px) calc(100% - 20px), cover;
    background-position: 10px calc(100% - 10px), center;
    background-repeat: no-repeat, no-repeat;
    color: var(--white);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Language Toggle */
.language-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body[dir="rtl"] .language-toggle {
    right: auto;
    left: 20px;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Mute Button */
.mute-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mute-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.mute-btn svg {
    width: 24px;
    height: 24px;
}

/* Wake Lock Indicator */
.wake-lock-indicator {
    background: rgba(255, 215, 0, 0.2);
    color: var(--white);
    padding: 8px 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.5);
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: pulse-glow 2s ease-in-out infinite;
}

.wake-lock-indicator svg {
    width: 24px;
    height: 24px;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
        background: rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        background: rgba(255, 215, 0, 0.3);
    }
}

/* Main Card */
.main-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 1600px;
    margin: 0 auto 50px;
    overflow: hidden;
}

/* Time Display Row */
.time-display-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    margin-bottom: 5px;
}

.time-column {
    padding: 35px 40px;
    text-align: center;
    position: relative;
}

.time-column:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.location-name {
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0.95;
}

.current-time {
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 4px;
}

.time-period {
    font-size: 0.65em;
    font-weight: 400;
}

/* Date Row Container (1x2 Grid) */
.date-row-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    background: rgba(0, 0, 0, 0.1);
}

.date-cell {
    padding: 20px 25px;
    text-align: center;
    font-size: 1.3rem;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.date-cell:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Next Prayer Heading */
.next-prayer-heading {
    margin: 70px 0 50px;
    text-align: center;
}

.next-prayer-heading h2 {
    font-size: 3.5rem;
    font-weight: 400;
    text-transform: capitalize;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Prayer Display Row */
.prayer-display-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.prayer-column {
    padding: 80px 40px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.prayer-column:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.prayer-name {
    font-size: 5.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 5px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.prayer-time {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1;
    text-transform: uppercase;
    opacity: 0.95;
}
/* Iqamah Notice Styles */
.iqamah-notice-content {
    padding: 40px;
    text-align: center;
}

.iqamah-heading {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.iqamah-countdown-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.iqamah-timer {
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 8px;
    font-family: 'Roboto', monospace;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color: #FFD700;
}

.iqamah-minutes {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: 1px;
}

/* Prayer in Progress Special Styling */
#iqamahNotice.prayer-in-progress {
    background: white !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

#iqamahNotice.prayer-in-progress .iqamah-heading {
    background: linear-gradient(135deg, #8A1538 0%, #6B1029 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
}

#iqamahNotice.prayer-in-progress .iqamah-timer {
    color: #8A1538;
    text-shadow: 0 2px 10px rgba(138, 21, 56, 0.2);
}

#iqamahNotice.prayer-in-progress .iqamah-minutes {
    display: none;
}

.countdown-label {
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.95;
    line-height: 1;
}

.countdown-timer {
    font-size: 5.5rem;
    font-weight: 700;
    letter-spacing: 10px;
    font-family: 'Roboto', monospace;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

/* Date Display */
.date-display {
    margin-bottom: 40px;
    font-size: 1.1rem;
    opacity: 0.9;
}

.gregorian-date,
.hijri-date {
    margin: 8px 0;
}

.date-label {
    font-weight: 500;
    margin-right: 8px;
}

body[dir="rtl"] .date-label {
    margin-right: 0;
    margin-left: 8px;
}

/* Next Prayer */
.next-prayer {
    margin: 40px 0;
}

.next-prayer h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 15px;
    opacity: 0.9;
}

.prayer-name {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

body[dir="rtl"] .prayer-name {
    text-transform: none;
}

.prayer-time {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 8px;
}

/* Countdown */
.countdown {
    margin: 40px 0;
}

.countdown-label {
    font-size: 2.5rem;
    font-weight: 700 !important;
    margin-bottom: 30px;
    opacity: 0.95;
    font-weight: 400;
    text-transform: uppercase;
}

.countdown-timer {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 8px;
    font-family: 'Roboto', monospace;
}

/* Iqamah Notice */
.iqamah-notice {
    background: rgba(255, 255, 255, 0.15);
    padding: 20px 40px;
    border-radius: 10px;
    margin-top: 30px;
    backdrop-filter: blur(10px);
}

.iqamah-text {
    font-size: 1.5rem;
    font-weight: 500;
}

/* Prayer Times Section */
.prayer-times {
    background: linear-gradient(180deg, #f8f4f0 0%, #e8e0d8 100%);
    padding: 60px 20px;
}

.prayer-times h3 {
    text-align: center;
    font-size: 2rem;
    color: var(--maroon);
    margin-bottom: 40px;
}

.prayer-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.prayer-card {
    background: linear-gradient(135deg, rgba(138, 21, 56, 0.85) 0%, rgba(107, 16, 41, 0.9) 100%);
    border-radius: 50% 50% 8px 8px / 25% 25% 8px 8px;
    padding: 40px 18px 15px;
    position: relative;
    text-align: center;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.prayer-card::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    border-radius: 2px;
}

.prayer-card::before {
    content: '☪';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    opacity: 0.5;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.prayer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.prayer-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.prayer-card-name {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.prayer-card-time {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.prayer-card-mosque {
    margin-top: auto;
    padding-top: 10px;
    position: relative;
}

.prayer-card-mosque svg {
    width: 80px;
    height: 30px;
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.8);
}

.iqamah-delay {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.times-table {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    overflow: hidden;
}

.time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-gray);
    transition: background 0.3s ease;
}

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

.time-row:hover {
    background: rgba(138, 21, 56, 0.05);
}

.prayer-label {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--gray);
}

.time-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--maroon);
    font-family: 'Courier New', monospace;
}

.footer-note {
    text-align: center;
    margin-top: 30px;
    font-size: 0.95rem;
    color: var(--gray);
    font-weight: 500;
}

/* Footer */
.footer {
    background: var(--maroon);
    color: var(--white);
    padding: 30px 20px;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

.visitor-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    opacity: 0.85;
}

.visitor-count svg {
    opacity: 0.7;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-card {
        margin-top: 50px;
    }
    
    .time-display-row,
    .prayer-display-row {
        grid-template-columns: 1fr;
    }
    
    .time-column:first-child::after,
    .prayer-column:first-child::after {
        display: none;
    }
    
    .time-column:first-child,
    .prayer-column:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .date-row-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .date-cell:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .date-cell::after,
    .date-cell::before {
        display: none;
    }
    
    .current-time {
        font-size: 3.5rem;
    }
    
    .location-name {
        font-size: 2rem;
    }
    
    .date-cell {
        font-size: 1.2rem;
        padding: 25px 20px;
    }
    
    .prayer-name {
        font-size: 3.0rem;
    }
    
    /* Prayer Cards - 2 columns on mobile */
    .prayer-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .prayer-time {
        font-size: 3rem;
    }
    
    .countdown-timer {
        font-size: 3.5rem;
        letter-spacing: 6px;
    }
    
    .countdown-label {
        font-size: 2.0rem;
    }
    
    .next-prayer-heading h2 {
        font-size: 2.5rem;
    }
    
    .time-column,
    .prayer-column {
        padding: 40px 30px;
        min-height: 200px;
    }
    
    .time-row {
        padding: 15px 20px;
    }
    
    .prayer-label {
        font-size: 1.1rem;
    }
    
    .time-value {
        font-size: 1.2rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .current-time {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }
    
    .location-name {
        font-size: 1.5rem;
    }
    
    .date-cell {
        font-size: 1rem;
        padding: 20px 15px;
    }
    
    .prayer-name {
        font-size: 2.8rem;
        letter-spacing: 3px;
    }
    
    .prayer-time {
        font-size: 2.2rem;
    }
    
    .countdown-label {
        font-size: 1.4rem;
        letter-spacing: 2px;
    }
    
    .countdown-timer {
        font-size: 2.8rem;
        letter-spacing: 5px;
    }
    
    .next-prayer-heading h2 {
        font-size: 2rem;
    }
    
    .time-column,
    .prayer-column {
        padding: 40px 20px;
    }
    
    .main-card {
        margin-bottom: 40px;
        border-radius: 10px;
    }
}