/* styles-mobile.css - @media (max-width: 480px) */

.row-1, .row-2, .row-3 {
    height: auto !important;
    width: 100%;    
}

/* ==========================================================
   CLOCK STYLES
   ========================================================== */

.clock {
    height: 10vh;
    font-size: 11vh  !important;
    line-height: 10.4vh;
}

.tick {
    line-height: 9vh;
}

.hours .first, .hours .second,
.minutes .first, .minutes .second,
.seconds .first, .seconds .second {
    position: relative;
    width: 1ch;
    height: 10vh;
    overflow: hidden;
}

.number {
    position: absolute;
    width: 100%;
    text-align: center;
    height: 10vh;
}
.number.new {
    transform: translateY(10vh);
}
/* ==========================================================
   CLOCK STYLES END
   ========================================================== */



/* CRITICAL FIX: Mobile table container */
.table-container-wrapper {
    min-height: 300px !important;
    height: auto !important;
    position: relative !important;
}

/* CRITICAL FIX: Hide inactive tables on mobile too */
.table-container {
    position: absolute !important; /* Keep absolute for mobile too */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 1;
}

/* Show only active table */
.table-container.active {
    opacity: 1 !important;
    z-index: 2;
}

.english-table,
.arabic-table {
    height: 100% !important; /* Fill container */
    min-height: 200px !important;
    max-height: none !important; /* Remove max-height restriction */
}

/* --------------------------------------------- */
.english-table tr .friday-cell,
    .english-table .friday-cell.prayer-name {
        font-size: 1.0rem !important;
    }
    
    .arabic-table tr .friday-cell,
    .arabic-table .friday-cell.prayer-name {
        font-size: 1.2rem !important;
    }

.friday-cell .prayer-name {
    font-size: 0.9rem !important; /* Smaller for mobile */
    white-space: normal !important; /* Allow wrapping if needed */
    line-height: 1.1 !important;
}

/* --------------------------------------------- */
.date-name-wrapper {
    flex-direction: row;
}

.left-info {
    font-size: 1rem;
}

.logo-img {
    height: clamp(75px, 10vw, 85px);
    width: clamp(75px, 10vw, 85px);
}

/* Left Section */
.gregorian-date {
    font-size: clamp(1.2rem, 2.6vw, 1.5rem) !important;
}

.hijri-date {
    font-size: clamp(1.4rem, 2.5vw, 2.0rem) !important;
}

.hijri-keyword {
    font-size: clamp(0.8rem, 1.5vw, 1.0rem) !important;
}

/* Adjust font sizes for mobile prayer table */
.english-table td:nth-child(1),
.arabic-table td:nth-child(3) {
    font-size: clamp(2.0rem, 1.8vw, 2.4rem) !important;
}

.english-table td:nth-child(2),
.english-table td:nth-child(3),
.arabic-table td:nth-child(1),
.arabic-table td:nth-child(2) {
    font-size: clamp(2.2rem, 2.0vw, 2.6rem) !important;
}

/* Reduce padding for mobile */
.english-table th, .english-table td,
.arabic-table th, .arabic-table td {
    padding: 0.05rem 0.1rem !important;
}

/* Ensure proper row spacing on mobile */
.english-table tbody tr,
.arabic-table tbody tr {
    height: auto !important;
    min-height: 35px !important;
}