/**
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 */
/* Quran CMS - qibla finder */
.qb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; padding-bottom: 3rem; }
.qb-main { padding: 1.3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.qb-place { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qb-place > span:first-child { display: inline-flex; align-items: center; gap: .35rem; }
.qb-compass { position: relative; width: min(340px, 82vw); aspect-ratio: 1; }
.qb-dial { width: 100%; height: 100%; transition: transform .15s linear; }
.qb-dial svg { width: 100%; height: 100%; display: block; }
.qb-ring { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.qb-inner { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
.qb-tick { stroke: var(--muted); stroke-width: 1.2; }
.qb-tick.long { stroke: var(--ink); stroke-width: 2.2; }
.qb-n { fill: #c0392b; font-weight: 800; font-size: 22px; text-anchor: middle; }
.qb-l { fill: var(--ink-2); font-weight: 700; font-size: 18px; text-anchor: middle; }
.qb-needle line { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.qb-kaaba { fill: #111; stroke: var(--gold); stroke-width: 2; }
.qb-kaaba-band { fill: var(--gold-2); }
.qb-hub { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.qb-top-mark { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid var(--brand); }
.qb-readout { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.qb-readout div { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; padding: .7rem 1.2rem; min-width: 140px; }
.qb-readout strong { display: block; font-size: 1.6rem; color: var(--brand); }
.qb-readout span { font-size: .85rem; color: var(--muted); }
.qb-hint { margin: 0; font-weight: 600; color: var(--ink-2); }
#qibla-app.is-facing .qb-ring { fill: #e3f4ee; stroke: var(--brand); stroke-width: 4; }
#qibla-app.is-facing .qb-hint { color: var(--brand); }
.qb-side { display: grid; gap: 1rem; }
.qb-map { padding: 0; overflow: hidden; }
#qb-map { height: 360px; width: 100%; }
.qb-side h3 { margin-top: 0; }
@media (max-width: 860px) { .qb-wrap { grid-template-columns: 1fr; } }