/* ═══════════════════════════════════════════
   Islamic Prayer Times — Frontend Styles v5
   Fixes: responsive, mobile-first, no overflow
═══════════════════════════════════════════ */

/* ── Widget ───────────────────────────────── */
.ipt-widget {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    border-radius: 14px;
    padding: 20px;
    color: white;
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.ipt-widget h3 {
    margin: 0 0 14px;
    font-size: 18px;
    text-align: center;
}
.ipt-widget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
    font-size: 15px;
}
.ipt-widget-row:last-child { border-bottom: none; }
.ipt-widget-row .prayer-name { font-weight: 600; opacity: .9; }
.ipt-widget-row .prayer-time { font-weight: 800; font-size: 16px; }
.ipt-widget-row.current {
    background: rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0;
}

/* ── Timetable ────────────────────────────── */
.ipt-timetable {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    font-family: 'Segoe UI', Arial, sans-serif;
    /* Responsive: full width */
    max-width: 100%;
    width: 100%;
}
.ipt-timetable table {
    width: 100%;
    border-collapse: collapse;
    /* FIX: prevents column squishing on mobile */
    min-width: 500px;
}
.ipt-timetable th {
    background: linear-gradient(135deg, #047857, #059669);
    color: white;
    padding: 13px 14px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}
.ipt-timetable th:first-child { text-align: left; }
.ipt-timetable td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    font-size: 14px;
    color: #1f2937;
}
.ipt-timetable td:first-child { text-align: left; min-width: 85px; }
.ipt-timetable tbody tr:hover { background: #ecfdf5; }
.ipt-timetable tbody tr:last-child td { border-bottom: none; }

/* ── Mobile: scrollable table wrapper ─────── */
@media (max-width: 640px) {
    /* The timetable.php template wraps in .ipt-tt-scroll which handles this */
    .ipt-timetable th { font-size: 11px; padding: 10px 8px; }
    .ipt-timetable td { font-size: 12px; padding: 9px 8px; }
    .ipt-widget { padding: 14px; }
    .ipt-widget-row { font-size: 13px; }
    .ipt-widget-row .prayer-time { font-size: 14px; }
}

/* ── Screen display shortcode on pages ────── */
/* When using [prayer_display] on a normal page with header/footer,
   the screen should fit in the page flow, not overlap */
#iptMain {
    min-height: 500px;
}

@media (max-width: 768px) {
    #iptMain {
        /* On mobile, allow scroll instead of forcing 100vh */
        height: auto !important;
        min-height: 100vh;
    }
    .ipt-top {
        /* Stack columns on mobile */
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }
    .ipt-left {
        flex-direction: row !important;
        max-height: 80px;
    }
    .ml-logo { max-height: 60px !important; }
    .ml-qr   { display: none; } /* Hide QR on mobile shortcode */
    .ipt-bar {
        height: auto !important;
        flex-wrap: wrap;
        gap: 5px !important;
    }
    .bc {
        min-width: calc(33% - 5px);
        flex: none !important;
    }
}