/* ═══════════════════════════════════════════════════════════ Prayer Times Display v5 Fullscreen TV display + mobile responsive Matches my-masjid.com light grey aesthetic exactly ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700;800;900&display=swap'); .ptd-wrapper *, .ptd-wrapper *::before, .ptd-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; } .ptd-wrapper { --accent: #3393a8; --accent-dark:#1e8890; --accent-dim: rgba(41,168,176,0.10); --bg-left: #e8eaed; --bg-right: #f0f2f5; --text: #2c3e50; --muted: #58626a; --border: #d5d8dc; --font: 'Inter', sans-serif; --font-ar: 'Cairo', sans-serif; } /* ── Body takeover when .ptd-active is on ────────────────────────── Hides ALL WordPress chrome: admin bar, headers, footers, navs, sidebars, page wrappers — leaving only the prayer times widget visible. ─────────────────────────────────────────────────────────────────────── */ body.ptd-active { overflow: hidden; margin: 0 !important; padding: 0 !important; background: #e8eaed !important; } /* Desktop: body scrolls when widget is fixed */ @media (min-width: 901px) { body.ptd-active { overflow: hidden !important; } } /* Mobile: body itself scrolls so user can reach all content */ @media (max-width: 900px) { body.ptd-active { overflow-y: auto !important; overflow-x: hidden !important; } } /* ── Hide every WordPress theme element ── */ body.ptd-active #wpadminbar, /* Admin bar */ body.ptd-active #adminmenuwrap, body.ptd-active #adminmenuback, /* Headers */ body.ptd-active header, body.ptd-active .site-header, body.ptd-active header.site-header, body.ptd-active #masthead, body.ptd-active .header-main, body.ptd-active .entry-header, body.ptd-active .page-header, body.ptd-active .post-header, /* Footers */ body.ptd-active footer, body.ptd-active .site-footer, body.ptd-active footer.site-footer, body.ptd-active #colophon, body.ptd-active .footer-widgets, body.ptd-active .footer-bottom, /* Navigation */ body.ptd-active nav, body.ptd-active .navigation, body.ptd-active .main-navigation, body.ptd-active nav.main-navigation, body.ptd-active .site-navigation, body.ptd-active .top-navigation, body.ptd-active .primary-menu, body.ptd-active .menu-primary, body.ptd-active .navbar, body.ptd-active .nav-bar, body.ptd-active .breadcrumbs, body.ptd-active .breadcrumb, /* Sidebars & widgets */ body.ptd-active #sidebar, body.ptd-active aside, body.ptd-active .widget-area, body.ptd-active .sidebar, body.ptd-active .secondary, body.ptd-active #secondary, /* Page title / entry meta */ body.ptd-active .entry-title, body.ptd-active .page-title, body.ptd-active .entry-meta, body.ptd-active .entry-footer, body.ptd-active .post-meta, body.ptd-active .byline, /* WP common wrappers that add padding */ body.ptd-active .site-title, body.ptd-active .site-description { display: none !important; } /* ── Nuke all padding/margin from wrapper elements ── */ body.ptd-active html, body.ptd-active body, body.ptd-active .site, body.ptd-active #page, body.ptd-active .site-content, body.ptd-active #content, body.ptd-active .content-area, body.ptd-active main, body.ptd-active .main-content, body.ptd-active #main, body.ptd-active article, body.ptd-active .hentry, body.ptd-active .entry-content, body.ptd-active .post-content, body.ptd-active .wp-block-group, body.ptd-active .wp-block-post-content, body.ptd-active .container, body.ptd-active .container-fluid, body.ptd-active .page-content, body.ptd-active .page-wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; background: transparent !important; float: none !important; } /* ── Full viewport wrapper ───────────────────────────────── */ .ptd-wrapper { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: flex; flex-direction: row; font-family: var(--font); background: var(--bg-left); color: var(--text); overflow: hidden; z-index: 99999; transition: background 1.2s ease, color 0.8s ease; } /* ══════════════════════════════════════════════════════════ LEFT — 42% ══════════════════════════════════════════════════════════ */ .ptd-left { flex: 0 0 45%; width: 45%; background: var(--bg-left); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(12px,2vh,36px) clamp(12px,2vw,36px); gap: clamp(6px,1vh,14px); border-right: 2px solid var(--border); position: relative; overflow: visible; } .ptd-masjid-info { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); width: 100%; padding-bottom: clamp(6px,1vh,14px); border-bottom: 1px solid var(--border); } .ptd-masjid-icon { font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: clamp(40px, 5vw, 72px); height: clamp(40px, 5vw, 72px); background: rgba(0,0,0,0.04); border-radius: 50%; } .ptd-night .ptd-masjid-icon { background: rgba(255,255,255,0.06); } .ptd-masjid-text { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: clamp(8px, 0.8vw, 14px); } .ptd-masjid-text strong { display: block; font-size: clamp(0.90rem, 1.6vw, 1.6rem); font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ptd-mosque-logo-img { width: clamp(40px, 5vw, 72px); height: clamp(40px, 5vw, 72px); object-fit: contain; border-radius: 8px; } .ptd-clock-wrap { /* Strict square: size is the smaller of available width or available height. Available height = 100vh minus masjid header (~70px), digital+date block (~110px), padding/gaps (~60px). We cap at 87% of the left panel width too. */ /* Left panel is 45% wide. Clock size = min of: - available height (100vh minus header/digital/date/padding ≈ 260px) - 90% of left panel width (45vw × 0.90) so clock never touches edges Cap at same pixel size as before so it doesn't grow on the new wider layout. */ --clock-size: min( calc(100vh - 260px), calc(45vw - 60px) ); width: var(--clock-size); height: var(--clock-size); flex-shrink: 0; flex-grow: 0; align-self: center; } .ptd-analog-clock { width:100%; height:100%; display:block; overflow:visible; } .ptd-digital-time { font-size: clamp(1.83rem,4.21vw,4.97rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; margin-top: 60px; } .ptd-ampm { font-size: 0.42em; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; margin-left: 0.18em; vertical-align: middle; } .ptd-colon { animation: ptd-blink 1s step-end infinite; } @keyframes ptd-blink { 50% { opacity: 0.2; } } .ptd-date-wrap { text-align: center; } .ptd-hijri { font-size: clamp(1.019rem,1.601vw,1.455rem); font-weight: 600; color: var(--muted); } .ptd-gregorian { font-size: clamp(0.946rem,1.310vw,1.310rem); color: var(--muted); } /* ══════════════════════════════════════════════════════════ RIGHT — 58% ══════════════════════════════════════════════════════════ */ .ptd-right { flex: 0 0 55%; width: 55%; background: var(--bg-right); display: flex; flex-direction: column; padding: clamp(14px,2.5vh,48px) clamp(14px,3vw,56px); gap: clamp(8px,1.8vh,24px); overflow: hidden; /* desktop only — mobile overrides this */ } .ptd-countdown { flex-shrink: 0; text-align: center; } .ptd-countdown-label { font-size: clamp(0.80rem,1.5vw,1.4rem); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: clamp(2px,0.3vh,6px); } .ptd-next-prayer-name { font-weight: 900; color: var(--text); } .ptd-countdown-time { font-size: clamp(4rem,10vw,12.5rem); font-weight: 900; color: var(--text); line-height: 0.88; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .ptd-ct-h { color: #b0b5bb; } .ptd-ct-hsuffix { font-size:0.418em; font-weight:500; color:#b0b5bb; letter-spacing:0; margin-left:5px; margin-right:5px; } .ptd-ct-m { color: #b0b5bb; } .ptd-ct-suffix { font-size:0.308em; font-weight:500; color:#b0b5bb; letter-spacing:0; margin-left:5px; } .ptd-table { width:100%; border-collapse:collapse; font-size: clamp(1.285rem,2.25vw,2.122rem); flex:1 1 0; min-height:0; color: #111; } .ptd-table thead tr { background: var(--bg-left); } .ptd-table thead th { padding: clamp(3px,0.7vh,9px) clamp(3px,0.7vw,10px); text-align:left; font-weight:500; color:var(--text); border-bottom:2px solid var(--border); white-space:nowrap; font-size:0.85em; } .ptd-table thead th:nth-child(n+3) { text-align:right; } .ptd-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; position:relative; } .ptd-table tbody tr:last-child { border-bottom:none; } .ptd-table tbody tr:hover { background: var(--accent-dim); } .ptd-table td { padding: clamp(4px,0.85vh,11px) clamp(3px,0.7vw,10px); vertical-align:middle; } /* Active row — solid accent fill, white text */ .ptd-row-active { background: var(--accent) !important; border-radius: 4px; } .ptd-row-active::after { display: none; } /* remove left bar — not needed with full fill */ .ptd-row-active .ptd-label, .ptd-row-active .ptd-ar-label { color: #ffffff !important; font-weight: 700; } .ptd-row-active .ptd-label::after { content:''; display:inline-block; width:clamp(6px,0.55vw,9px); height:clamp(6px,0.55vw,9px); border-radius:50%; background: rgba(255,255,255,0.80); margin-left:7px; vertical-align:middle; animation: ptd-pulse 1.6s ease-in-out infinite; } @keyframes ptd-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.8);opacity:0.3;} } .ptd-row-active .ptd-adhan, .ptd-row-active .ptd-iqamah, .ptd-row-active .ptd-tmrw { color: #ffffff !important; font-weight: 700; } /* ── Post-iqamah "Salah in progress" row ──────────────── */ .ptd-row-salah.ptd-row-active { background: #16a34a !important; animation: ptd-salah-row-pulse 1.8s ease-in-out infinite; } .ptd-row-salah.ptd-row-active::after { background: #16a34a; } .ptd-row-salah.ptd-row-active .ptd-label, .ptd-row-salah.ptd-row-active .ptd-ar-label { color: #ffffff !important; font-weight: 700; } .ptd-row-salah.ptd-row-active .ptd-label::after { background: #ffffff; } .ptd-row-salah.ptd-row-active .ptd-adhan, .ptd-row-salah.ptd-row-active .ptd-iqamah, .ptd-row-salah.ptd-row-active .ptd-tmrw { color: #ffffff !important; font-weight: 700; } @keyframes ptd-salah-row-pulse { 0%,100% { background: #16a34a !important; } 50% { background: #128f3e !important; } } /* ── Salah banner (replaces countdown for 5 mins post-iqamah) ── */ .ptd-salah-banner { flex-shrink: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(8px,1.5vh,24px) 0; animation: ptd-salah-fade 2.4s ease-in-out infinite; } @keyframes ptd-salah-fade { 0%,100% { opacity: 1; } 50% { opacity: 0.70; } } .ptd-salah-label { font-size: clamp(1.0rem,2.2vw,2.1rem); font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: clamp(4px,0.6vh,10px); } .ptd-salah-word { font-size: clamp(4.5rem,11vw,14rem); font-weight: 900; color: #16a34a; line-height: 0.88; letter-spacing: -0.03em; text-shadow: 0 0 40px rgba(22,163,74,0.35); } /* Adhan banner — teal accent, shown for 3 mins after adhan */ .ptd-adhan-label { color: var(--accent) !important; } .ptd-adhan-word { color: var(--accent) !important; text-shadow: 0 0 40px rgba(41,168,176,0.40) !important; } .ptd-night .ptd-adhan-label, .ptd-night .ptd-adhan-word { color: var(--accent) !important; text-shadow: 0 0 40px rgba(41,168,176,0.50) !important; } .ptd-night .ptd-row-salah.ptd-row-active { background: rgba(22,163,74,0.22) !important; } /* Tomorrow Fajr row — shown post-Isha night, distinct "next day" style */ .ptd-row-tomorrow { background: rgba(41,168,176,0.06) !important; } .ptd-row-tomorrow .ptd-label, .ptd-row-tomorrow .ptd-ar-label { color: var(--accent); font-weight: 700; } .ptd-row-tomorrow .ptd-adhan, .ptd-row-tomorrow .ptd-iqamah { color: var(--accent); font-weight: 700; } /* Hide the Tmrw. cell when row is tomorrow — replace with "Tmrw" label instead */ .ptd-row-tomorrow .ptd-tmrw { visibility: hidden; } /* "Tmrw ↑" badge inside the label cell */ .ptd-row-tomorrow .ptd-label::before { content: 'Tmrw'; display: inline-block; font-size: 0.58em; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--accent); border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: middle; text-transform: uppercase; opacity: 0.90; } /* Pulsing dot for tomorrow row */ .ptd-row-tomorrow .ptd-label::after { content: ''; display: inline-block; width: clamp(6px,0.55vw,9px); height: clamp(6px,0.55vw,9px); border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: middle; animation: ptd-pulse 2.2s ease-in-out infinite; } .ptd-label { font-weight:500; color:var(--text); white-space:nowrap; } .ptd-ar-label, .ptd-ar { font-family:var(--font-ar); font-size:0.88em; color:var(--muted); direction:rtl; } .ptd-adhan { font-weight:500; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .ptd-iqamah { color:var(--text); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .ptd-tmrw { color:var(--muted); font-size:0.88em; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } /* ══════════════════════════════════════════════════════════ CLOCK-ONLY LAYOUT [prayer_times_clock] Full viewport — no digital time, dial fills all space ══════════════════════════════════════════════════════════ */ .ptd-wrapper.ptd-clock-only { flex-direction: column; background: var(--bg-left); } .ptd-co-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: clamp(10px,1.5vh,28px) clamp(10px,1.5vw,28px); box-sizing: border-box; } /* Header: masjid name — centred */ .ptd-co-header { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.2vw, 20px); width: 100%; padding-bottom: clamp(6px,1vh,12px); border-bottom: 1px solid var(--border); flex-shrink: 0; } /* Clock fills all remaining space */ .ptd-co-clock-wrap { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(6px,1vh,16px) 0; } .ptd-co-clock-wrap .ptd-analog-clock { display: block; /* Square: constrained by whichever dimension is smaller */ width: min(100%, calc(100vh - 120px)); height: min(100%, calc(100vh - 120px)); max-width: min(90vw, calc(100vh - 120px)); max-height: min(90vw, calc(100vh - 120px)); aspect-ratio: 1 / 1; } /* Footer: date */ .ptd-co-footer { flex-shrink: 0; text-align: center; padding-top: clamp(4px,0.8vh,10px); } /* ══════════════════════════════════════════════════════════ DARK MODE — active after Maghrib until Fajr JS adds .ptd-night to .ptd-wrapper ══════════════════════════════════════════════════════════ */ .ptd-wrapper.ptd-night { --bg-left: #0a0d17; --bg-right: #080b14; --text: #c8d0dc; --muted: #55606c; --border: #1e2535; --accent-dim: rgba(41,168,176,0.20); background: #000000; } /* Smooth colour transitions on all themed children */ .ptd-left, .ptd-right, .ptd-masjid-text strong, .ptd-masjid-text span, .ptd-digital-time, .ptd-ampm, .ptd-hijri, .ptd-gregorian, .ptd-countdown-label, .ptd-next-prayer-name, .ptd-countdown-time, .ptd-ct-hsuffix, .ptd-ct-suffix, .ptd-table, .ptd-table thead tr, .ptd-table thead th, .ptd-table tbody tr, .ptd-label, .ptd-ar-label, .ptd-adhan, .ptd-iqamah, .ptd-tmrw { transition: background 1.2s ease, color 0.8s ease, border-color 1.0s ease; } .ptd-night .ptd-left { background: var(--bg-left) !important; border-right-color: var(--border); } .ptd-night .ptd-right { background: var(--bg-right) !important; } .ptd-night .ptd-masjid-info { border-bottom-color: var(--border); } .ptd-night .ptd-masjid-text strong { color: var(--text); } .ptd-night .ptd-masjid-text span { color: var(--muted); } .ptd-night .ptd-digital-time { color: var(--text); } .ptd-night .ptd-ampm { color: var(--muted); } .ptd-night .ptd-hijri, .ptd-night .ptd-gregorian { color: var(--muted); } .ptd-night .ptd-countdown-label { color: var(--accent); } .ptd-night .ptd-next-prayer-name { color: var(--text); } .ptd-night .ptd-countdown-time { color: #9aa5b4; } .ptd-night .ptd-ct-h { color: #9aa5b4; } .ptd-night .ptd-ct-hsuffix, .ptd-night .ptd-ct-suffix { color: #9aa5b4; } .ptd-night .ptd-table { color: var(--text); } .ptd-night .ptd-table thead tr { background: #0d1120; } .ptd-night .ptd-table thead th { color: #9aa5b4; border-bottom-color: var(--border); } .ptd-night .ptd-table tbody tr { border-bottom-color: var(--border); } .ptd-night .ptd-table tbody tr:hover { background: var(--accent-dim); } .ptd-night .ptd-label { color: #b8c4d0; font-weight: 400; } .ptd-night .ptd-ar-label, .ptd-night .ptd-ar { color: var(--muted); } .ptd-night .ptd-adhan, .ptd-night .ptd-iqamah { color: #b8c4d0; font-weight: 400; } .ptd-night .ptd-tmrw { color: var(--muted); } .ptd-night .ptd-row-active { background: var(--accent) !important; } .ptd-night .ptd-row-active .ptd-label, .ptd-night .ptd-row-active .ptd-ar-label { color: #ffffff !important; } .ptd-night .ptd-row-active .ptd-adhan, .ptd-night .ptd-row-active .ptd-iqamah, .ptd-night .ptd-row-active .ptd-tmrw { color: #ffffff !important; } /* Stars effect on left panel night sky */ .ptd-night .ptd-left::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 74% 11%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 45% 38%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 82% 65%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1px 1px at 10% 72%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 62% 85%, rgba(255,255,255,0.30) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 30% 55%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 91% 40%, rgba(255,255,255,0.45) 0%, transparent 100%); pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.5s ease; } .ptd-night .ptd-left::before { opacity: 1; } /* Night clock-only */ .ptd-night.ptd-clock-only { background: var(--bg-left); } .ptd-night .ptd-co-header { border-bottom-color: var(--border); } /* ══════════════════════════════════════════════════════════ RESPONSIVE — mobile: full page, scrollable ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Mobile: body scrolls, wrapper stacks vertically and grows to fit content. CRITICAL for Samsung/Android Chrome: wrapper must NOT clip overflow. Using position:fixed + overflow:hidden on Samsung WebView causes the second flex child (.ptd-right) to be clipped or hidden entirely. Fix: wrapper uses min-height:100vh so it fills screen but can grow taller, body handles scrolling, overflow is visible. */ .ptd-wrapper { position: relative !important; /* NOT fixed — body scroll handles it */ inset: auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; /* grow to fit both panels */ min-height: 100vh !important; min-height: 100dvh !important; flex-direction: column !important; flex-wrap: nowrap !important; overflow: visible !important; /* never clip children */ align-items: stretch !important; } /* Left panel: full width, natural height — never compresses */ .ptd-left { flex: 0 0 auto !important; flex-shrink: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; border-right: none; border-bottom: 2px solid var(--border); padding: 14px 12px 8px; gap: 10px; justify-content: flex-start; overflow: visible !important; display: flex !important; } .ptd-masjid-info { width: 100%; padding-bottom: 10px; } .ptd-masjid-icon { width: 44px; height: 44px; font-size: 1.5rem; } .ptd-mosque-logo-img { width: 44px; height: 44px; } .ptd-masjid-text strong { font-size: clamp(0.95rem, 3.8vw, 1.3rem); } /* Clock: 5% smaller than full width on mobile */ .ptd-clock-wrap { --clock-size: min(89vw, 89vw); width: var(--clock-size) !important; height: var(--clock-size) !important; align-self: center; margin: 0 auto; } /* Digital time block below clock */ .ptd-right-info { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 14px; border-bottom: 2px solid var(--border); } .ptd-digital-time { margin-top: 0; font-size: clamp(2.6rem, 11vw, 5rem); text-align: center; } .ptd-date-wrap { text-align: center; } .ptd-hijri { font-size: clamp(1.135rem, 4.364vw, 1.455rem); } .ptd-gregorian { font-size: clamp(1.048rem, 3.782vw, 1.310rem); } /* Right panel: fully unconstrained on mobile — Samsung fix. No height limits, no overflow clip, explicit width. */ .ptd-right { flex: 0 0 auto !important; flex-shrink: 0 !important; flex-grow: 1 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; /* block on mobile — avoids flex sizing bugs */ padding: clamp(14px, 4vw, 28px); padding-bottom: max(clamp(28px, 6vw, 48px), env(safe-area-inset-bottom, 24px)); } /* Re-apply flex children inside .ptd-right on mobile */ .ptd-right .ptd-countdown, .ptd-right .ptd-salah-banner, .ptd-right .ptd-table { display: block; width: 100%; } .ptd-right .ptd-table { margin-top: clamp(12px, 3vw, 22px); } .ptd-countdown { text-align: center; } .ptd-countdown-time { font-size: clamp(3.2rem, 13vw, 6.5rem); } .ptd-countdown-label { font-size: clamp(0.88rem, 3.2vw, 1.3rem); } /* Table: full-width readable, tomorrow column hidden */ .ptd-table { font-size: clamp(1.067rem, 3.872vw, 1.392rem); } .ptd-table td, .ptd-table th { padding: 9px 7px; } .ptd-table .ptd-tmrw, .ptd-table thead th:last-child { display: none !important; } } @media (max-width: 560px) { .ptd-clock-wrap { --clock-size: 95vw; width: var(--clock-size) !important; height: var(--clock-size) !important; } .ptd-digital-time { font-size: clamp(2.4rem, 10vw, 4.2rem); } .ptd-countdown-time { font-size: clamp(2.8rem, 12vw, 5rem); } .ptd-table { font-size: clamp(0.968rem, 3.63vw, 1.21rem); } .ptd-table td, .ptd-table th { padding: 7px 5px; } /* Hide Tomorrow column on mobile */ .ptd-table .ptd-tmrw, .ptd-table thead th:last-child { display: none !important; } } @media (max-width: 380px) { .ptd-table { font-size: 0.858rem; } } /* ── Mobile table layout — consistent at all sizes including 360px ── */ @media (max-width: 560px) { /* Use fixed table layout with % widths — scales cleanly on any screen */ .ptd-pwa .ptd-table, .ptd-pwa-full .ptd-table { table-layout: fixed; width: 100%; } /* Salah name — widest column, left-aligned */ .ptd-pwa .ptd-table .ptd-label, .ptd-pwa-full .ptd-table .ptd-label { width: 26%; text-align: left; padding-left: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; } /* Arabic column hidden */ .ptd-pwa .ptd-table .ptd-ar-label, .ptd-pwa-full .ptd-table .ptd-ar-label { display: none !important; } /* 3-column: Salah | Adhan | Iqamah | Tmrw */ .ptd-pwa .ptd-table .ptd-adhan, .ptd-pwa-full .ptd-table .ptd-adhan { width: 26%; text-align: right !important; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); } .ptd-pwa .ptd-table .ptd-iqamah, .ptd-pwa-full .ptd-table .ptd-iqamah { width: 26%; text-align: right !important; font-variant-numeric: tabular-nums; padding-right: 6px !important; color: var(--text); } .ptd-pwa .ptd-table thead th:nth-child(1), .ptd-pwa-full .ptd-table thead th:nth-child(1) { text-align: left; padding-left: 6px !important; color: var(--muted); } .ptd-pwa .ptd-table thead th:nth-child(2), .ptd-pwa-full .ptd-table thead th:nth-child(2) { text-align: right; color: var(--muted); } .ptd-pwa .ptd-table thead th:nth-child(3), .ptd-pwa-full .ptd-table thead th:nth-child(3) { text-align: right; color: var(--muted); } /* Row padding */ .ptd-pwa .ptd-table td, .ptd-pwa-full .ptd-table td { padding: 8px 2px; } } /* ── Very narrow phones (360px) ── */ @media (max-width: 370px) { /* Header: tighten up */ .ptd-pwa-logo-img { width: 36px !important; height: 36px !important; } .ptd-pwa-mosque-emoji { width: 36px !important; height: 36px !important; font-size: 1.6rem !important; } .ptd-pwa-mosque-name strong { font-size: 0.82rem; } .ptd-pwa-date { font-size: 0.72rem; } /* Table: fixed layout for precise column control */ .ptd-pwa-table-wrap .ptd-table { table-layout: fixed !important; font-size: 0.78rem !important; } .ptd-pwa-table-wrap .ptd-table td, .ptd-pwa-table-wrap .ptd-table th { padding: 6px 2px; } /* Salah name — left, takes remaining space */ .ptd-pwa-table-wrap .ptd-table .ptd-label { padding-left: 4px !important; } .ptd-pwa-table-wrap .ptd-table thead th:first-child { padding-left: 4px !important; } /* Arabic column hidden on narrow screens */ .ptd-pwa-table-wrap .ptd-table .ptd-ar-label { display: none !important; } /* Adhan — right-aligned with gap from iqamah */ .ptd-pwa-table-wrap .ptd-table .ptd-adhan { width: 52px !important; text-align: right !important; padding-right: 10px !important; } .ptd-pwa-table-wrap .ptd-table thead th:nth-child(3) { width: 52px; text-align: right !important; padding-right: 10px !important; } /* Iqamah — right-aligned */ .ptd-pwa-table-wrap .ptd-table .ptd-iqamah { width: 50px !important; text-align: right !important; padding-right: 4px !important; } .ptd-pwa-table-wrap .ptd-table thead th:nth-child(4) { width: 50px; text-align: right !important; padding-right: 4px !important; } /* Active row dot — hide to prevent overflow */ .ptd-label::after { display: none; } /* Provider text smaller */ .ptd-pwa-provider { font-size: 0.55rem; } } /* ── PWA no-scroll: fit entire layout in viewport without scrolling ── */ .ptd-wrapper.ptd-pwa { height: 100dvh; min-height: 0; box-sizing: border-box; overflow: hidden; position: relative; contain: layout style; /* prevent drawer from escaping widget bounds */ isolation: isolate; } /* Header/toggle/time block: fixed size, don't shrink */ .ptd-wrapper.ptd-pwa .ptd-pwa-header { flex-shrink: 0; } .ptd-wrapper.ptd-pwa .ptd-pwa-time-block { flex-shrink: 0; } .ptd-wrapper.ptd-pwa .ptd-pwa-toggle-bar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-top: 0.5px solid var(--border); background: var(--bg-left); } .ptd-pwa-toggle-label { font-size: clamp(0.62rem, 2.3vw, 0.72rem); color: var(--muted); white-space: nowrap; flex-shrink: 0; font-weight: 500; } /* Clock: fills available space proportionally */ .ptd-wrapper.ptd-pwa .ptd-pwa-clock-wrap { flex: 1 1 auto; min-height: 0; } .ptd-wrapper.ptd-pwa .ptd-pwa-clock-wrap canvas { /* Scale clock to fit: smaller of 88vw or 40% of viewport height */ width: min(88vw, 40vh, 360px) !important; height: min(88vw, 40vh, 360px) !important; } /* Table: takes remaining space, scrolls only if absolutely necessary */ .ptd-wrapper.ptd-pwa .ptd-pwa-table-wrap { flex: 0 1 auto; min-height: 0; overflow-y: auto; } /* Each flex child can shrink */ .ptd-wrapper.ptd-pwa > * { min-height: 0; } /* 4K / large displays */ @media (min-width: 1920px) { .ptd-clock-wrap { --clock-size: min(calc(100vh - 280px), calc(45vw - 80px)); width: var(--clock-size); height: var(--clock-size); } } /* ══════════════════════════════════════════════════════════ POWERED-BY LOGO — bottom-right corner ══════════════════════════════════════════════════════════ */ .ptd-powered-by { position: absolute; bottom: clamp(8px, 1.2vh, 18px); right: clamp(10px, 1.5vw, 22px); z-index: 10; opacity: 0.72; transition: opacity 0.25s ease; text-decoration: none; display: flex; align-items: center; line-height: 1; } .ptd-powered-by:hover { opacity: 1; } .ptd-powered-by-img { display: block; width: 200px; height: auto; max-width: min(200px, 35vw); max-height: min(120px, 14vh); object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22)); } /* Text name variant — sits as last item in right panel flex column */ .ptd-powered-by-text { font-size: clamp(0.75rem, 1.2vw, 0.98rem); font-weight: 600; color: var(--muted, #8a9bac); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.70; text-align: right; padding-top: clamp(4px, 0.6vh, 10px); border-top: 1px solid var(--border, rgba(0,0,0,0.08)); margin-top: auto; /* pushes to bottom of flex column */ text-decoration: none; } .ptd-powered-by-text:hover { opacity: 1; } .ptd-night .ptd-powered-by-text { color: #8a9bac; border-top-color: rgba(255,255,255,0.08); } /* Night mode: bump opacity */ .ptd-night .ptd-powered-by { opacity: 0.55; } .ptd-night .ptd-powered-by:hover { opacity: 0.90; } /* Mobile: slightly smaller logo */ @media (max-width: 900px) { .ptd-powered-by { bottom: clamp(6px, 1vh, 12px); right: clamp(8px, 2vw, 16px); } .ptd-powered-by-img { width: 100px; height: auto; /* maintain aspect ratio */ max-width: min(100px, 28vw); max-height: min(80px, 14vw); } } /* ══════════════════════════════════════════════════════════ SMOOTH RESIZE — clock scales in smoothly after resize JS adds .ptd-resizing briefly; canvas redraws each rAF ══════════════════════════════════════════════════════════ */ .ptd-clock-wrap { transition: width 0.30s cubic-bezier(0.25,0.46,0.45,0.94), height 0.30s cubic-bezier(0.25,0.46,0.45,0.94); } .ptd-resizing .ptd-clock-wrap { /* Tiny scale-down then back — gives a smooth "snap into new size" feel */ animation: ptd-resize-pulse 0.30s ease-out forwards; } @keyframes ptd-resize-pulse { 0% { transform: scale(0.96); opacity: 0.80; } 60% { transform: scale(1.01); opacity: 1.00; } 100% { transform: scale(1.00); opacity: 1.00; } } /* ══════════════════════════════════════════════════════════ MOBILE DIGITAL TIME — 20% smaller than desktop value ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Base mobile size was clamp(2.6rem, 11vw, 5rem) ×0.80 = clamp(2.08rem, 8.8vw, 4rem) */ .ptd-digital-time { font-size: clamp(2.08rem, 8.8vw, 4rem) !important; } } @media (max-width: 560px) { /* Base was clamp(2.4rem, 10vw, 4.2rem) ×0.80 = clamp(1.92rem, 8vw, 3.36rem) */ .ptd-digital-time { font-size: clamp(1.92rem, 8vw, 3.36rem) !important; } } /* ══════════════════════════════════════════════════════════ MOBILE — Hide countdown section ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .ptd-countdown { display: none !important; } } /* ══════════════════════════════════════════════════════════ MOBILE — Powered-by logo: leave absolute position on desktop, on mobile move it OUT of the wrapper flow and into a dedicated footer bar below the right panel. JS adds .ptd-powered-by inside .ptd-wrapper; on mobile we reposition it with CSS so it sits after the table. ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Make wrapper allow the powered-by to flow below right panel */ .ptd-wrapper { flex-wrap: wrap; } /* On mobile: powered-by is no longer absolute-positioned. Instead it renders as a flex-row footer across full width. */ .ptd-powered-by { /* Override the desktop absolute positioning */ position: relative !important; bottom: auto !important; right: auto !important; inset: auto !important; /* Full-width footer bar below ptd-right */ width: 100%; order: 99; /* push to very end */ flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: clamp(10px,2vh,18px) 0 clamp(12px,2.5vh,22px); border-top: 1px solid var(--border); background: var(--bg-right); opacity: 0.80; } .ptd-powered-by-img { max-height: clamp(24px, 5vw, 40px); max-width: clamp(90px, 30vw, 180px); } /* Night mode footer */ .ptd-night .ptd-powered-by { background: var(--bg-right); border-top-color: var(--border); } } /* ══════════════════════════════════════════════════════════ SAMSUNG / ANDROID CHROME EXPLICIT VISIBILITY FIXES These override any inherited display:none or visibility:hidden that Samsung's WebView may apply to overflowing flex children. ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Force table and all its children to be visible */ .ptd-right .ptd-table, .ptd-right .ptd-table thead, .ptd-right .ptd-table tbody, .ptd-right .ptd-table tr, .ptd-right .ptd-table th, .ptd-right .ptd-table td { display: revert; visibility: visible !important; opacity: 1 !important; } .ptd-right .ptd-table { display: table !important; } .ptd-right .ptd-table thead { display: table-header-group !important; } .ptd-right .ptd-table tbody { display: table-row-group !important; } .ptd-right .ptd-table tr { display: table-row !important; } .ptd-right .ptd-table th, .ptd-right .ptd-table td { display: table-cell !important; } /* Ensure .ptd-right itself is always rendered */ .ptd-right { visibility: visible !important; opacity: 1 !important; contain: none !important; /* disable CSS containment that clips */ transform: none !important; /* transforms create new stacking ctx */ will-change: auto !important; clip-path: none !important; -webkit-clip-path: none !important; } /* Body must scroll and be visible */ body.ptd-active { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; height: auto !important; min-height: 100vh !important; } } /* ══════════════════════════════════════════════════════════ MOBILE — Hide Tomorrow column Placed AFTER the Samsung fix block so these selectors win the specificity battle against the table-cell !important. Uses both class-based (.ptd-tmrw) and positional (:last-child) selectors for maximum compatibility. ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Tomorrow data cells */ .ptd-right .ptd-table td.ptd-tmrw, .ptd-table td.ptd-tmrw { display: none !important; } /* Tomorrow header cell — last in thead row */ .ptd-right .ptd-table thead th:last-child, .ptd-table thead th:last-child { display: none !important; } } @media (max-width: 560px) { .ptd-right .ptd-table td.ptd-tmrw, .ptd-table td.ptd-tmrw { display: none !important; } .ptd-right .ptd-table thead th:last-child, .ptd-table thead th:last-child { display: none !important; } } /* ══════════════════════════════════════════════════════════ Jumu'ah row — adhan-only, two times separated by | ══════════════════════════════════════════════════════════ */ .ptd-table .ptd-jumu-adhan { text-align: center; letter-spacing: 0.02em; } .ptd-table .ptd-jumu-adhan .ptd-jumu-sep { display: inline-block; margin: 0 0.45em; opacity: 0.45; font-weight: 300; } /* ══ Jumu'ah Friday Highlights ══════════════════════════════════════════ */ .ptd-row-jumu-friday { background: rgba(22,163,74,0.07) !important; position: relative; } .ptd-row-jumu-friday::after { content: "Friday"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.60em; font-weight: 700; letter-spacing: 0.06em; color: #16a34a; opacity: 0.80; text-transform: uppercase; } .ptd-row-jumu-friday .ptd-label, .ptd-row-jumu-friday .ptd-ar-label { color: #16a34a; font-weight: 700; } .ptd-row-jumu-friday .ptd-adhan { color: #16a34a; font-weight: 700; } .ptd-row-jumu-friday::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(3px,0.3vw,5px); background: #16a34a; border-radius: 0 2px 2px 0; } /* When Jumu'ah row is the active/next prayer — solid accent, white text */ .ptd-row-jumu-friday.ptd-row-active { background: var(--accent) !important; border-radius: 4px; } .ptd-row-jumu-friday.ptd-row-active::before { display: none; } .ptd-row-jumu-friday.ptd-row-active::after { color: rgba(255,255,255,0.75); } .ptd-row-jumu-friday.ptd-row-active .ptd-label, .ptd-row-jumu-friday.ptd-row-active .ptd-ar-label, .ptd-row-jumu-friday.ptd-row-active .ptd-adhan { color: #ffffff !important; } .ptd-night .ptd-row-jumu-friday { background: rgba(22,163,74,0.14) !important; } .ptd-night .ptd-row-jumu-friday .ptd-label, .ptd-night .ptd-row-jumu-friday .ptd-ar-label, .ptd-night .ptd-row-jumu-friday .ptd-adhan { color: #4ade80; } .ptd-night .ptd-row-jumu-friday::after { color: #4ade80; } .ptd-night .ptd-row-jumu-friday::before { background: #4ade80; } .ptd-night .ptd-row-jumu-friday.ptd-row-active { background: var(--accent) !important; } .ptd-night .ptd-row-jumu-friday.ptd-row-active .ptd-label, .ptd-night .ptd-row-jumu-friday.ptd-row-active .ptd-ar-label, .ptd-night .ptd-row-jumu-friday.ptd-row-active .ptd-adhan { color: #ffffff !important; } /* ══ Mosque header logo ══════════════════════════════════════════════════ */ .ptd-masjid-logo { display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ptd-mosque-logo-img { width: clamp(32px, 4vw, 52px); height: clamp(32px, 4vw, 52px); object-fit: contain; border-radius: 6px; } /* ══════════════════════════════════════════════════════════ PWA LAYOUT — [prayer_times_pwa] and [prayer_times_pwa_clock] Portrait-first. No body takeover. Lives within page flow. ══════════════════════════════════════════════════════════ */ .ptd-wrapper.ptd-pwa { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 520px; margin: 0 auto; background: var(--bg-left); border-radius: var(--border-radius-lg, 12px); overflow: hidden; font-family: var(--font); color: var(--text); padding: 16px 16px 8px; gap: 10px; box-sizing: border-box; } /* Header */ .ptd-pwa-header { display: flex; align-items: center; gap: 10px; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* Left side: logo + name */ .ptd-pwa-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } /* Provider text — sits in toggle bar at bottom */ .ptd-pwa-provider { font-size: clamp(0.58rem, 2.0vw, 0.70rem); font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .ptd-night .ptd-pwa-provider { color: #7a8a9a; } /* Toggle bar — bottom row: pill on left, provider on right */ .ptd-pwa-toggle-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: clamp(8px,1.5vh,14px) 8px clamp(6px,1vh,10px); flex-shrink: 0; gap: 6px; } .ptd-pwa-toggle-label { font-size: clamp(0.68rem, 2.6vw, 0.80rem); font-weight: 500; color: var(--muted); letter-spacing: 0.02em; flex-shrink: 0; } /* 3-segment pill toggle */ .ptd-view-pill { display: none; } /* legacy — replaced by ptd-view-nav */ /* ── Responsive view nav — icon + text buttons ── */ .ptd-view-nav { display: flex; align-items: stretch; flex: 1; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: var(--bg-right); } .ptd-view-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 6px 4px; border: none; background: none; cursor: pointer; color: var(--muted); border-right: 1px solid var(--border); transition: background 0.18s, color 0.18s; font-size: clamp(0.60rem, 2.4vw, 0.72rem); font-weight: 500; line-height: 1.1; white-space: nowrap; } .ptd-view-seg:last-child { border-right: none; } .ptd-view-seg svg { display: block; flex-shrink: 0; width: 15px; height: 15px; } .ptd-view-seg span { display: block; } .ptd-view-seg.active { background: var(--accent); color: #ffffff; } .ptd-view-seg:not(.active):hover { background: var(--bg-right); color: var(--text); } /* ── Fade transitions between views ─────────────────────────────────── */ .ptd-pwa-clock-wrap, .ptd-pwa-clock-only-panel, .ptd-pwa-with-table-only, .ptd-pwa-table-wrap { transition: opacity 0.3s ease; } .ptd-resizing .ptd-pwa-clock-wrap, .ptd-resizing .ptd-pwa-clock-only-panel, .ptd-resizing .ptd-pwa-with-table-only, .ptd-resizing .ptd-pwa-table-wrap { opacity: 0; } /* ── 3 view states controlled by data-ptd-view on wrapper ── */ /* Default (full): clock visible, with-table-only visible, clock-only hidden */ .ptd-pwa-clock-only-panel { display: none; } .ptd-pwa-with-table-only { display: flex; } /* VIEW: table — hide clock, show time-block prominently, show table */ .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-pwa-clock-wrap { display: none; } .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-pwa-clock-only-panel { display: none; } .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-pwa-with-table-only { display: flex; } .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-pwa-table-wrap { display: block; } .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-pwa-time-block { flex-direction: column; align-items: center; padding: clamp(12px,2vh,20px) 0 clamp(8px,1.5vh,14px); } .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-digital-time { font-size: clamp(2.8rem, 13vw, 4rem); } .ptd-wrapper.ptd-pwa[data-ptd-view="table"] .ptd-pwa-countdown { text-align: center; } /* VIEW: clock — hide table, show clock-only panel */ .ptd-wrapper.ptd-pwa[data-ptd-view="clock"] .ptd-pwa-clock-only-panel { display: block; } .ptd-wrapper.ptd-pwa[data-ptd-view="clock"] .ptd-pwa-with-table-only { display: none; } .ptd-wrapper.ptd-pwa[data-ptd-view="clock"] .ptd-pwa-table-wrap { display: none; } .ptd-wrapper.ptd-pwa[data-ptd-view="clock"] .ptd-pwa-clock-wrap { flex: 1; } .ptd-wrapper.ptd-pwa[data-ptd-view="clock"] > .ptd-salah-banner { display: none !important; } .ptd-pwa-table-hidden .ptd-pwa-with-table-only { display: none; } .ptd-pwa-table-hidden .ptd-pwa-table-wrap { display: none; } /* Clock fills more space when table hidden */ .ptd-pwa-table-hidden .ptd-pwa-clock-wrap { flex: 1; } /* In clock-only mode, hide the wrapper-level salah/adhan banner — co-salah-banner handles it */ .ptd-pwa-table-hidden > .ptd-salah-banner { display: none !important; } .ptd-pwa-mosque-emoji { font-size: 2rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); border-radius: 50%; flex-shrink: 0; } .ptd-pwa-logo-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; } .ptd-pwa-mosque-name { border-left: 3px solid var(--accent); padding-left: 10px; min-width: 0; } .ptd-pwa-mosque-name strong { display: block; font-size: clamp(0.82rem, 3.6vw, 1.0rem); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: normal; } .ptd-pwa-date { display: block; font-size: clamp(0.837rem, 3.348vw, 1.004rem); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Clock */ .ptd-pwa-clock-wrap { width: 100%; display: flex; align-items: center; justify-content: center; } .ptd-pwa-clock-wrap canvas { width: min(88vw, 380px); height: min(88vw, 380px); aspect-ratio: 1 / 1; display: block; } .ptd-pwa-clock-full canvas { width: min(92vw, 440px); height: min(92vw, 440px); aspect-ratio: 1 / 1; } /* Digital + countdown block */ .ptd-pwa-time-block { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--bg-right); border-radius: 10px; gap: 12px; } .ptd-pwa-time-centered { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 12px; } .ptd-pwa-time-block .ptd-digital-time { /* +15% bigger for clock mode */ font-size: clamp(2.07rem, 9.2vw, 2.76rem); font-weight: 700; color: var(--text); line-height: 1; } .ptd-pwa-time-block .ptd-hijri, .ptd-pwa-time-block .ptd-gregorian { /* +15% bigger for clock mode */ font-size: clamp(0.902rem, 3.782vw, 1.135rem); color: var(--muted); margin-top: 2px; } .ptd-pwa-countdown { text-align: right; flex-shrink: 0; } .ptd-pwa-countdown .ptd-countdown-label { /* +20% bigger */ font-size: clamp(0.900rem, 3.775vw, 1.104rem); color: var(--muted); font-weight: 600; letter-spacing: 0.01em; text-transform: none; } .ptd-pwa-countdown .ptd-countdown-label .ptd-next-prayer-name { color: var(--accent); font-weight: 800; } .ptd-pwa-countdown .ptd-countdown-time { font-size: clamp(1.694rem, 7.26vw, 2.178rem); font-weight: 700; color: var(--text); line-height: 1.1; } .ptd-pwa-countdown .ptd-ct-h, .ptd-pwa-countdown .ptd-ct-m, .ptd-pwa-countdown .ptd-ct-hsuffix, .ptd-pwa-countdown .ptd-ct-suffix { color: var(--text) !important; } /* Next prayer strip (pwa-clock only) */ .ptd-pwa-next-prayer { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; background: var(--bg-right); border-radius: 10px; } .ptd-pwa-next-prayer .ptd-countdown-label { /* +20% larger for clock mode readability */ font-size: clamp(0.936rem, 3.84vw, 1.104rem); color: var(--muted); font-weight: 600; } .ptd-pwa-next-prayer .ptd-countdown-label .ptd-next-prayer-name { color: var(--accent); font-weight: 800; } .ptd-pwa-next-prayer .ptd-countdown-time { /* +20% larger */ font-size: clamp(1.68rem, 7.2vw, 2.16rem); font-weight: 700; color: var(--text); } .ptd-pwa-next-prayer .ptd-ct-h, .ptd-pwa-next-prayer .ptd-ct-m, .ptd-pwa-next-prayer .ptd-ct-hsuffix, .ptd-pwa-next-prayer .ptd-ct-suffix { color: var(--text) !important; } /* Prayer table */ .ptd-pwa-table-wrap { width: 100%; overflow-x: hidden; } /* PWA table: fixed layout, no Arabic column, 4 columns only */ .ptd-pwa-table-wrap .ptd-table { table-layout: fixed; width: 100%; /* +15% larger, solid black text */ font-size: clamp(0.943rem, 3.91vw, 1.127rem); color: var(--text); } .ptd-pwa-table-wrap .ptd-table td, .ptd-pwa-table-wrap .ptd-table th { padding: 8px 4px; color: var(--text); } /* Salah name — auto width, takes remaining space */ .ptd-pwa-table-wrap .ptd-table .ptd-label { text-align: left; padding-left: 6px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; } .ptd-pwa-table-wrap .ptd-table thead th:first-child { text-align: left; padding-left: 6px !important; } /* Arabic column hidden in PWA table (removed from markup) */ .ptd-pwa-table-wrap .ptd-table .ptd-ar-label { display: none; } /* 3-column layout: Salah | Adhan | Iqamah | Tmrw */ /* Adhan — col 2 */ .ptd-pwa-table-wrap .ptd-table .ptd-adhan { width: 26%; text-align: right !important; padding-right: 10px !important; color: var(--text); font-weight: 500; } .ptd-pwa-table-wrap .ptd-table thead th:nth-child(2) { width: 26%; text-align: right !important; padding-right: 10px !important; color: var(--text); } /* Iqamah — col 3 */ .ptd-pwa-table-wrap .ptd-table .ptd-iqamah { width: 26%; text-align: right !important; padding-right: 6px !important; color: var(--text); } .ptd-pwa-table-wrap .ptd-table thead th:nth-child(3) { width: 26%; text-align: right !important; padding-right: 6px !important; color: var(--text); } /* Tomorrow — col 4, compact */ .ptd-pwa-table-wrap .ptd-table .ptd-tmrw { width: 18%; text-align: right !important; padding-right: 4px !important; font-size: 0.88em; color: var(--text); } .ptd-pwa-table-wrap .ptd-table thead th:nth-child(4) { width: 18%; text-align: right !important; padding-right: 4px !important; color: var(--text); } /* Night mode */ .ptd-wrapper.ptd-pwa.ptd-night { --bg-left: #0a0d17; --bg-right: #080b14; --text: #b8c4d0; --muted: #7a8a9a; --border: #1e2535; --accent-dim: rgba(41,168,176,0.20); } /* Night mode: override any remaining hardcoded colours in table */ .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-table-wrap .ptd-table, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-table-wrap .ptd-table td, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-table-wrap .ptd-table th { color: #b8c4d0 !important; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-table-wrap .ptd-table .ptd-adhan, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-table-wrap .ptd-table .ptd-iqamah { color: #b8c4d0 !important; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-table-wrap .ptd-table .ptd-label { color: #b8c4d0 !important; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-countdown-label { color: #7a8a9a; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-countdown-time, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-ct-h, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-ct-m { color: #b8c4d0 !important; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-countdown-time { color: #e8edf5; /* keep readable on dark background */ } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-ct-h, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-ct-m, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-ct-hsuffix, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-countdown .ptd-ct-suffix { color: #e8edf5 !important; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-next-prayer .ptd-countdown-time { color: #e8edf5; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-next-prayer .ptd-ct-h, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-next-prayer .ptd-ct-m, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-next-prayer .ptd-ct-hsuffix, .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-next-prayer .ptd-ct-suffix { color: #e8edf5 !important; } .ptd-wrapper.ptd-pwa.ptd-night .ptd-pwa-mosque-emoji { background: rgba(255,255,255,0.06); } /* ══ Clock-only Salah Banner (post-iqamah) ═══════════════════════════════ Replaces the date/hijri line below the clock during the 5-min salah window. Used by [prayer_times_clock] and [prayer_times_pwa_clock]. */ .ptd-co-salah-banner { text-align: center; animation: ptd-salah-pulse 1.8s ease-in-out infinite; } .ptd-co-salah-name { display: block; font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 800; color: #16a34a; letter-spacing: -0.01em; line-height: 1.1; } .ptd-co-salah-word { display: block; font-size: clamp(1.0rem, 2.6vw, 2.0rem); font-weight: 700; color: #16a34a; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; } @keyframes ptd-salah-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .ptd-night .ptd-co-salah-name, .ptd-night .ptd-co-salah-word { color: #4ade80; } /* ══ Slides Panel ════════════════════════════════════════════════════════ Absolutely fills .ptd-right when active. .ptd-right must be position:relative (already set). When slides show, .ptd-right gets .ptd-slides-active class which removes padding so the slide truly fills edge-to-edge. */ .ptd-right { position: relative; } /* When slides active — remove padding so slides fill edge to edge */ .ptd-right.ptd-slides-active { padding: 0 !important; gap: 0 !important; } /* Keep countdown visible above slides */ .ptd-right.ptd-slides-active .ptd-countdown { position: relative; z-index: 20; padding: clamp(14px,2.5vh,48px) clamp(14px,3vw,56px) 0; flex-shrink: 0; } .ptd-slides-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; overflow: hidden; } .ptd-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; /* Fade transition — overridden to slide via JS data-effect */ opacity: 0; transform: translateX(0); transition: opacity 0.7s ease, transform 0.7s ease; } .ptd-slide.ptd-slide-active { opacity: 1; transform: translateX(0); } .ptd-slide.ptd-slide-leaving { opacity: 0; } .ptd-slide.ptd-slide-enter-right { opacity: 0; transform: translateX(100%); } /* Slide-left effect classes — applied by JS when effect=slide */ .ptd-slides-effect-slide .ptd-slide.ptd-slide-leaving { transform: translateX(-100%); opacity: 1; } .ptd-slides-effect-slide .ptd-slide.ptd-slide-enter-right { transform: translateX(100%); opacity: 1; } .ptd-slides-effect-slide .ptd-slide.ptd-slide-active { transform: translateX(0); opacity: 1; } /* Image background */ .ptd-slide-img-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } /* Overlay for image+text readability */ .ptd-slide-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.42); } /* Text content */ .ptd-slide-content { position: relative; z-index: 2; text-align: center; padding: clamp(12px, 2.5vw, 36px); width: 100%; } .ptd-slide-content.pos-top { position: absolute; top: clamp(16px,3vh,40px); } .ptd-slide-content.pos-bottom { position: absolute; bottom: clamp(16px,3vh,40px); } .ptd-slide-headline { display: block; font-size: clamp(1.2rem, 3.5vw, 3.6rem); font-weight: 800; color: #ffffff; line-height: 1.1; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.5); margin-bottom: clamp(4px,0.8vh,14px); word-break: break-word; } .ptd-slide-subtext { display: block; font-size: clamp(0.78rem, 1.8vw, 1.6rem); font-weight: 500; color: rgba(255,255,255,0.90); line-height: 1.4; text-shadow: 0 1px 8px rgba(0,0,0,0.40); word-break: break-word; width: 100%; } /* Text-only slide */ .ptd-slide-type-text .ptd-slide-headline { color: #fff; } .ptd-slide-type-text .ptd-slide-subtext { color: rgba(255,255,255,0.85); } /* Progress bar at bottom of slide */ .ptd-slide-progress { position: absolute; bottom: 0; left: 0; height: 4px; background: rgba(255,255,255,0.75); width: 0%; z-index: 3; } /* Smooth table fade when slides take over */ .ptd-countdown, .ptd-table { transition: opacity 0.6s ease; } /* ══ DRAWER ══════════════════════════════════════════════════════════════ */ .ptd-drawer-trigger { margin-left: auto; width: 30px; height: 30px; background: var(--accent); border: none; border-radius: 7px; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .ptd-drawer-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .ptd-drawer-backdrop.open { opacity: 1; pointer-events: all; } .ptd-drawer { position: absolute; top: 0; right: -1px; width: min(78%, 280px); height: 100%; background: var(--bg-left); border-left: 0.5px solid var(--border); z-index: 50; display: flex; flex-direction: column; transform: translateX(101%); transition: transform 0.24s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } .ptd-drawer.open { transform: translateX(0); } .ptd-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 0.5px solid var(--border); flex-shrink: 0; } .ptd-drawer-title { font-size: clamp(0.82rem, 3.2vw, 0.90rem); font-weight: 700; color: var(--text); } .ptd-drawer-close { background: #e53935; border: none; border-radius: 14px; padding: 4px 11px; color: #fff; font-size: clamp(0.72rem, 2.8vw, 0.80rem); font-weight: 700; cursor: pointer; } /* View switcher */ .ptd-drawer-views { padding: 10px 12px 12px; border-bottom: 0.5px solid var(--border); background: var(--bg-right); flex-shrink: 0; } .ptd-drawer-sec-label { font-size: clamp(0.68rem, 2.6vw, 0.74rem); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .ptd-drawer-sec-label--sticky { position: sticky; top: 0; background: var(--bg-left); padding: 7px 13px 3px; margin-bottom: 0; border-bottom: 0.5px solid var(--border); z-index: 1; } .ptd-drawer-view-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .ptd-drawer-view-btn { background: #fff; border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 3px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: var(--muted); transition: border-color 0.15s, background 0.15s; } .ptd-drawer-view-btn span { font-size: clamp(0.60rem, 2.4vw, 0.68rem); font-weight: 600; line-height: 1.2; text-align: center; color: inherit; } .ptd-drawer-view-btn.active { border-color: var(--accent); background: rgba(51,147,168,0.08); color: var(--accent); } /* Scrollable items */ .ptd-drawer-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ptd-drawer-scroll::-webkit-scrollbar { width: 3px; } .ptd-drawer-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .ptd-drawer-item { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background 0.1s; } .ptd-drawer-item:active { background: var(--bg-right); } .ptd-drawer-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-right); border: 0.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .ptd-drawer-item-text { flex: 1; min-width: 0; } .ptd-drawer-item-label { font-size: clamp(0.80rem, 3.2vw, 0.90rem); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ptd-drawer-item-sub { font-size: clamp(0.68rem, 2.6vw, 0.74rem); color: var(--muted); margin-top: 1px; } .ptd-drawer-arrow { color: var(--border); font-size: 14px; flex-shrink: 0; } .ptd-drawer-badge { font-size: clamp(0.60rem, 2.2vw, 0.68rem); font-weight: 700; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; } .ptd-drawer-badge--red { background: #fcebeb; color: #a32d2d; } .ptd-drawer-badge--green { background: #eaf3de; color: #3b6d11; } .ptd-drawer-badge--blue { background: #e6f1fb; color: #185fa5; } .ptd-drawer-badge--amber { background: #faeeda; color: #ba7517; } .ptd-drawer-badge--gray { background: var(--bg-right); color: var(--muted); } /* Branding footer */ .ptd-drawer-brand { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-top: 0.5px solid var(--border); background: var(--bg-right); flex-shrink: 0; } .ptd-drawer-brand-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; flex-shrink: 0; } .ptd-drawer-brand-placeholder { width: 28px; height: 28px; border-radius: 6px; background: #1a1a2e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } .ptd-drawer-brand-name { font-size: clamp(0.78rem, 3.0vw, 0.86rem); font-weight: 700; color: var(--text); } .ptd-drawer-brand-url { font-size: clamp(0.66rem, 2.5vw, 0.72rem); color: var(--accent); text-decoration: none; } /* ── Rate limit nudge ── */ .ptd-rl-icon { font-size: 22px; margin-bottom: 6px; } .ptd-rl-msg { font-size: clamp(0.84rem,3.3vw,0.94rem); font-weight: 600; color: #633806; margin-bottom: 5px; } .ptd-rl-hint { font-size: clamp(0.76rem,3.0vw,0.84rem); color: #854f0b; } /* ── Header ── */ /* ── Sticky Category Tabs ── */ /* ── Messages ── */ /* ── Instruction cards — shown on empty state, hidden once chat starts ── */ /* Typewriter cursor */ /* Hide instructions once user has sent a message */ /* Dark mode */ /* ── Suggestion pills ── */ /* Nomatch message */ /* Dark mode */ /* ── Quick chips ── */ /* ── Input row ── */ /* ── Dark mode: result grid cards need lighter background to be visible ── */ .ptd-night #ptd-results-list { background: #0d1120; } /* ══ AI CHAT CARDS ════════════════════════════════════════════════════ */ /* Image thumb inside AI card */ /* Card content padding */ /* ══ CARD DETAIL PANEL ════════════════════════════════════════════════ */ /* ══ AI RESULTS PANEL (slide-up all results) ═════════════════════════ */ /* Reset button — white background, visible */ /* Hide TTS voice toggle */ /* Hero image */ .ptd-det-img { width: 100%; height: 220px; overflow: hidden; flex-shrink: 0; } .ptd-det-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Content padding wrapper — everything below image */ .ptd-det-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 14px 4px; } .ptd-det-title { font-size: clamp(1.05rem, 4.2vw, 1.2rem); font-weight: 600; color: var(--text); line-height: 1.35; margin: 0; } .ptd-det-verified { font-size: 10px; background: #e1f5ee; color: #085041; padding: 3px 8px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; font-weight: 600; margin-top: 3px; } /* Breadcrumb */ .ptd-det-breadcrumb { display: flex; align-items: center; gap: 5px; padding: 4px 14px 10px; font-size: clamp(0.72rem, 2.8vw, 0.80rem); color: var(--muted); } .ptd-det-bc-sep { color: var(--border); } .ptd-det-bc-cat { color: var(--accent); font-weight: 500; } /* Meta pills */ .ptd-det-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; } .ptd-det-pill { font-size: clamp(0.75rem, 3vw, 0.82rem); color: var(--muted); background: var(--bg-right); border: 0.5px solid var(--border); border-radius: 8px; padding: 4px 10px; } /* Contact box — like cambridgemuslim.app */ .ptd-det-contact-box { margin: 0 14px 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .ptd-det-contact-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: clamp(0.88rem, 3.6vw, 1.0rem); font-weight: 500; text-decoration: none; border-bottom: 0.5px solid var(--border); transition: background 0.15s; color: var(--text); } .ptd-det-contact-btn:last-child { border-bottom: none; } .ptd-det-contact-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .ptd-det-contact-btn:hover { background: var(--bg-right); } .ptd-det-phone svg { fill: #1d9e75; } .ptd-det-phone { color: #1d9e75; } .ptd-det-wa svg { fill: #25d366; } .ptd-det-wa { color: #128c7e; } .ptd-det-email svg { fill: #4285f4; } .ptd-det-web svg { fill: var(--accent); } /* Section title */ .ptd-det-section-title { font-size: clamp(0.72rem, 2.8vw, 0.80rem); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 14px 8px; } /* Description */ .ptd-det-desc { font-size: clamp(0.90rem, 3.6vw, 1.0rem); color: var(--text); line-height: 1.7; padding: 0 14px 14px; } /* HTML body content from WordPress */ .ptd-det-desc-html { padding: 0 14px 14px; } .ptd-det-desc-html p { margin: 0 0 10px; font-size: clamp(0.90rem,3.6vw,1.0rem); color: var(--text); line-height: 1.7; } .ptd-det-desc-html strong, .ptd-det-desc-html b { font-weight: 700; color: var(--text); } .ptd-det-desc-html ul, .ptd-det-desc-html ol { padding-left: 20px; margin: 6px 0 10px; } .ptd-det-desc-html li { font-size: clamp(0.88rem,3.5vw,0.98rem); color: var(--text); line-height: 1.6; margin-bottom: 4px; } .ptd-det-desc-html h1,.ptd-det-desc-html h2,.ptd-det-desc-html h3,.ptd-det-desc-html h4 { font-weight: 700; color: var(--text); margin: 12px 0 6px; font-size: clamp(0.95rem,3.8vw,1.05rem); } .ptd-det-desc-html a { color: var(--accent); text-decoration: underline; } .ptd-det-desc-html br + br { display: none; } /* collapse double line breaks */ /* Tags */ .ptd-det-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; } .ptd-det-tag { font-size: clamp(0.72rem, 2.8vw, 0.80rem); background: var(--bg-right); color: var(--muted); border: 0.5px solid var(--border); border-radius: 7px; padding: 3px 10px; } /* Footer link */ .ptd-det-footer-link { padding: 12px 14px; border-top: 0.5px solid var(--border); text-align: center; } .ptd-det-footer-link a { font-size: clamp(0.78rem, 3vw, 0.86rem); color: var(--accent); text-decoration: none; font-weight: 500; } /* Detail panel card slide feel */ /* Prev/next always show even if disabled — show as faded */ /* Card slide animation */ /* ── Show More Prompt ── */ /* Dark mode */ /* ══ AI PANEL REDESIGN — teal brand theme ═══════════════════════════ */ /* Hero header — brand teal #3393a8 */ /* Greeting bubble — darker teal #1d7a94 */ /* Category chips inside hero — same #1d7a94 background */ /* Voice zone */ @keyframes ptdArrowBounce { 0%,100%{ transform: translateY(0); opacity:.7; } 50%{ transform: translateY(5px); opacity:1; } } /* Big mic button */ @keyframes ptdRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2); opacity: 0; } } @keyframes ptdMicPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(51,147,168,.5); } 70%{ box-shadow: 0 0 0 12px rgba(51,147,168,0); } } /* Listening state — red */ @keyframes ptdMicPulseRed { 0%,100%{ box-shadow: 0 0 0 0 rgba(192,57,43,.5); } 70%{ box-shadow: 0 0 0 12px rgba(192,57,43,0); } } /* Wave bars */ @keyframes ptdWave { 0%,100%{ height:4px } 50%{ height:20px } } /* Transcript box */ @keyframes ptdFadeIn { from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } } /* Or browse divider */ /* Section labels */ /* Quick search pills */ /* Input bar — mic always gold, send arrow always gold */ /* Animated typing placeholder — cursor blink */ @keyframes ptdBlink { 0%,100%{ opacity:1 } 50%{ opacity:0 } } /* ── Language toggle buttons ── */ /* Tabs standalone at very top — above hero */ /* ── Drawer updates ─────────────────────────────────────────────────── */ /* Close button — bigger padding and text */ .ptd-drawer-close { padding: 9px 18px !important; font-size: clamp(0.85rem, 3.3vw, 0.95rem) !important; } /* Prayer view grid — 3 cols, bigger icons */ .ptd-drawer-view-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; } .ptd-drawer-view-grid--3 .ptd-drawer-view-btn { padding: 10px 4px 8px; } .ptd-drawer-view-grid--3 .ptd-drawer-view-btn span { font-size: clamp(0.72rem, 2.8vw, 0.80rem); } .ptd-drawer-view-btn--community { width: 100%; flex-direction: row !important; justify-content: center; gap: 10px; padding: 12px 16px !important; background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; border-radius: 10px; font-size: 1.1rem !important; margin-top: 2px; } .ptd-drawer-view-btn--community span { font-size: 1.1rem !important; font-weight: 700 !important; color: #fff !important; } .ptd-drawer-view-btn--community.active { background: var(--accent) !important; opacity: 0.85; } .ptd-drawer-view-btn--community svg { fill: #fff; } /* All menu items — 1.2rem text */ .ptd-drawer-item-label { font-size: 1.2rem !important; } /* ── AI panel full width fixes ───────────────────────────────────────── */ /* Remove any gap between tabs and hero */ /* Static idle zone — outside messages, never wiped by reset */ /* ── Voice zone text — all black ───────────────────────────────────── */ /* ── Results panel filter chips ─────────────────────────────────────── */ .ptd-filter-chip { background: var(--bg-left); border: 1.5px solid var(--border); border-radius: 16px; padding: 5px 12px; font-size: clamp(0.72rem, 2.8vw, 0.80rem); color: var(--text); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; font-weight: 500; } .ptd-filter-chip:active { transform: scale(0.97); } .ptd-filter-chip--active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } /* Language flag — has translated content indicator */ /* ── Language globe button ────────────────────────────────────────── */ /* ── Language sheet — slides up from bottom ──────────────────────── */ @keyframes ptdSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .ptd-lang-overlay { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 19; } .ptd-lang-overlay.open { display: block; } .ptd-lang-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 0 0 20px; z-index: 20; transform: translateY(100%); transition: transform .28s cubic-bezier(.32,0,.67,0); box-shadow: 0 -4px 24px rgba(0,0,0,0.15); } .ptd-lang-sheet.open { transform: translateY(0); animation: none; } .ptd-lang-sheet-handle { width: 36px; height: 4px; background: #ddd; border-radius: 2px; margin: 10px auto 12px; } .ptd-lang-sheet-title { font-size: clamp(0.80rem, 3.1vw, 0.90rem); font-weight: 700; color: #555; text-align: center; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; } .ptd-lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; } .ptd-lang-item { background: #f5f5f5; border: 2px solid #e8e8e8; border-radius: 12px; padding: 10px 4px 8px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; } .ptd-lang-item.active { border-color: #3393a8; background: #e8f5f9; } .ptd-lang-item:active { transform: scale(.97); } .ptd-lang-flag { font-size: 22px; line-height: 1; display: block; } .ptd-lang-name { font-size: clamp(0.70rem, 2.7vw, 0.78rem); font-weight: 600; color: #1a1a1a; } .ptd-lang-native{ font-size: clamp(0.64rem, 2.4vw, 0.72rem); color: #888; } .ptd-lang-translated::after { content: '✓'; position: absolute; top: 4px; right: 6px; font-size: 9px; color: #3393a8; font-weight: 700; }