.hdoc-embed{width:100%;max-width:600px;margin:30px auto;border-radius:24px;overflow:hidden;box-shadow:0 12px 48px #001c1640;background:#083e32}.hdoc-embed iframe{display:block;width:100%;height:980px;border:0}.hdoc-card{max-width:600px;margin:30px auto;padding:38px 26px;color:#fff;background:#0a4d3a;background-size:cover;background-position:center;border-radius:24px;box-shadow:0 12px 48px #001c1640;text-align:center;font-family:system-ui,sans-serif}.hdoc-card h3{color:#fff!important;font:600 28px/1.4 system-ui,sans-serif!important;margin:0 0 28px!important}.hdoc-clock-box{display:inline-block;background:#136036cc;border-radius:16px;padding:16px 24px}.hdoc-clock{font:600 48px/1.2 system-ui;font-variant-numeric:tabular-nums;direction:ltr}.hdoc-today,.hdoc-hijri{font-size:17px;margin-top:6px}.hdoc-next{background:#001b18bd;padding:10px;border-radius:10px;margin:0 auto 20px;font-size:18px}.hdoc-row{display:grid;grid-template-columns:1fr 1fr 55px;align-items:center;padding:10px 15px;text-align:start;font-size:24px;border-radius:10px;gap:12px}.hdoc-row strong{font-size:35px;direction:ltr}.hdoc-row small{font-size:16px;direction:ltr}.hdoc-row.is-next{background:#158345ad}.hdoc-bottom{display:flex;justify-content:space-around;margin-top:20px;gap:20px;font-size:19px}.hdoc-bottom strong{display:block;font-size:30px;direction:ltr}.hdoc-stale{padding:30px 10px}@media(max-width:600px){.hdoc-embed iframe{height:100%}.hdoc-card{padding:26px 16px}.hdoc-row{font-size:20px}.hdoc-row strong{font-size:30px}.hdoc-clock{font-size:42px}}

/* Responsive landscape for desktops/iPads, portrait for phones. */
.hdoc-embed{position:relative;max-width:1100px;aspect-ratio:16/9;border-radius:16px}
.hdoc-embed iframe{position:absolute;inset:0;display:block;height:100%;width:100%;aspect-ratio:auto;margin:0;padding:0}
@media(min-width:768px){
.hdoc-card{position:relative;max-width:1100px;min-height:480px;padding:28px 30px 44px;border-radius:16px}
.hdoc-card h3{margin-bottom:18px!important;padding-inline:12px}
.hdoc-clock-box{background:transparent;padding:4px 145px 10px}
.hdoc-clock{font-size:64px}
.hdoc-next{max-width:340px;font-size:16px;margin-bottom:22px}
.hdoc-times{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:950px;margin:15px auto 0}
.hdoc-row{grid-template-columns:1fr;text-align:center;gap:6px;padding:12px 8px;background:#001b18a6;font-size:22px}
.hdoc-row strong{font-size:34px}.hdoc-row small{min-height:24px;font-size:17px}
.hdoc-row.is-next{background:#158345bd}
.hdoc-bottom{position:absolute;top:108px;inset-inline:32px;margin:0;justify-content:space-between;pointer-events:none;font-size:20px}
.hdoc-bottom>div{max-width:160px}.hdoc-bottom strong{font-size:32px}
}
@media(min-width:768px) and (max-width:900px){
.hdoc-card{padding-inline:20px}.hdoc-card h3{font-size:24px!important}.hdoc-clock{font-size:48px}.hdoc-clock-box{padding-inline:125px}.hdoc-bottom{inset-inline:20px;font-size:16px}.hdoc-bottom>div{max-width:120px}.hdoc-bottom strong{font-size:27px}.hdoc-times{gap:10px}.hdoc-row{font-size:18px}.hdoc-row strong{font-size:28px}
}
@media(max-width:767px){
.hdoc-embed{max-width:600px;aspect-ratio:9/16;border-radius:24px}
.hdoc-embed iframe{height:100%;aspect-ratio:auto}
.hdoc-card{max-width:600px}.hdoc-bottom{position:static}
}