/* ======================================================
   Al-Hidaayah Foundation Prayer Times - Dark Green to Light Green Fade
   ====================================================== */
/* Body + background: single fade that goes to light green at page bottom */
html, body {
    min-height: 100%;
    height: auto;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    color: #ffffff; /* Default white text */

    /* Dark green to light green gradient */
    background-color: #1b5e20; /* Dark Green base */

    /* Layer order: fade → main BG → patterns */
    background-image:
        linear-gradient(to bottom, rgba(56, 142, 60, 1) 0%, rgba(139, 195, 74, 1) 100%), /* Dark Green to Light Green */
        url('ahf-bg-mobile.png'),
        radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 100% 100%, cover, 40px 40px, 80px 80px;
    background-position: center top, center center, 0 0, 20px 20px;
    background-blend-mode: normal, screen, normal, normal;
    background-attachment: scroll, scroll, scroll, scroll;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 6px;
}

h1, h2, h3, p, th, td {
    color: #ffffff !important; /* White text for readability */
}

/* Header Banner */
.header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
    flex-wrap: wrap;

    background: #0b3d1e; /* DARKER than #1b5e20 */
    border-radius: 10px;

    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    padding: 6px 12px;
    justify-content: center;
}

.header img {
    height: 80px;
    max-width: 100%;
    border-radius: 8px;
}

.header-text h1 {
    font-size: 1rem;
    margin: 0;
    color: #ffffff; /* White text for title */
}

.header-text p {
    margin: 3px 0 0 0;
    font-size: 0.50rem;
    color: #bbb; /* Light gray text */
}

/* Clock & Hijri Date */
.time-section {
    text-align: center;
    margin-bottom: 10px;
}

.time-section div {
    margin: 3px 0;
}

#clock {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff; /* White clock text */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

#Date, #HijriDate {
    font-size: 1.3rem;
    color: #ffffff; /* White date text */
}

/* Countdown Banner */
.countdown-banner {
    background: linear-gradient(90deg, #0b3d1e, #1b5e20); /* Green gradient */
    color: #ffffff; /* White text */
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    padding: 12px;
    margin: 0 auto 8px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    max-width: 900px;
    letter-spacing: 0.3px;
}

/* Centered Title */
.salah-table-section h2 {
    text-align: center;
    font-size: 1.6rem;
    color: #4caf50; /* Light Green */
    margin: 10px 0 5px 0;
}

/* Salah Table Section */
.salah-table-section {
    overflow-x: visible;
}

/* Salah Table */
.salah-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #003300; /* Dark Green */
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(79, 195, 255, 0.3);
    overflow: hidden;
}

.salah-table th, .salah-table td {
    padding: 8px 15px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 1rem;
}

/* Table Header */
.salah-table th {
    background: #388e3c; /* Medium Green */
    color: #ffffff; /* White text for header */
    font-weight: 900;
}

/* Uniform Row Height */
.salah-table tbody tr {
    height: 50px;
}

/* Zebra striping */
.salah-table tbody tr:nth-child(even) {
    background: #1b5e20; /* Dark Green for zebra striping */
}

/* Next Salah Row Highlight */
.salah-table tbody tr.next1-salah {
    background: #1b5e20; /* Dark Green for Next Salah row */
    font-weight: 600;
    color: #ffffff; /* White text */
    outline: 2px solid #4caf50; /* Green outline for highlight */
}

/* Salah Name */
.salah-name {
    font-weight: 900;
    color: #4caf50; /* Light Green for Salah name */
    font-size: 1.2rem !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(56, 142, 60, 0.4);
}

/* Begin & End Times */
.begin-time {
    color: #808187;
    font-weight: 500;
    font-size: 0.95rem;
}

.end-time {
    color: #808187;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Jamaat Column Bold */
.salah-table td:nth-child(3) {
    font-weight: 700;
    color: #c6f0ff; /* Light Blue */
    font-size: 1.4rem;
    text-align: center;
}

.salah-table th:nth-child(3) {
    text-align: center;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 5px;
    font-size: 0.75rem;
    color: #bbb; /* Light Gray */
}

/* Responsive */
@media (max-width:600px) {
    .header img { height:40px; }
    .header-text h1 { font-size:1.3rem; }
    .header-text p { font-size:0.9rem; }
    #clock { font-size:3.2rem; }
    #Date, #HijriDate { font-size:0.9rem; }
    .countdown-banner { font-size:0.95rem; padding:10px; }
    .salah-table th, .salah-table td { padding:4px 6px; font-size:1.2rem; }
    .salah-name { font-size:1.3rem !important; }
}

/* Header Banner Inline */
.header-banner-inline {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #0b3d1e; /* Medium Green */
    padding: 8px 8px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.35);
    max-width: 900px;
    margin: 0 auto;
}

.banner-logo {
    height: 30px;
    width: auto;
    flex-shrink: 0;
}

.banner-text {
    display: flex;
    flex-direction: column;
}

.banner-text h1 {
    font-size: 1.4rem;
    margin: 0;
    color: #ffffff; /* White text */
}

.banner-text p {
    font-size: 0.85rem;
    margin: 2px 0 0 0;
    color: #c6c6c6; /* Light Gray */
}

@media (max-width:900px) {
    .banner-logo { height: 45px; }
    .banner-text h1 {
        font-size: 1.3rem;
        font-weight: 990;
        text-align: center;
    }
    .banner-text p {
        font-size: 0.61rem;
        text-align: center;
    }
}