/* ===== Kıble pusulası (главная) — отдельный файл /app/css/compass.css, подключается только на главной ===== */

.qf { margin-bottom: 35px; }
.qf-lead { max-width: 780px; }
.qf-grid { display: flex; gap: 30px; align-items: flex-start; margin-bottom: 25px; }
.qf-col-tool { flex: 0 0 420px; max-width: 100%; }
.qf-col-info { flex: 1; min-width: 0; }
.qf-compass { max-width: 380px; margin: 0 auto 10px; }
.qf-svg { display: block; width: 100%; height: auto; }
.qf-ring { fill: none; stroke: #c9ced3; stroke-width: 3; transition: stroke .2s; }
.qf-face, .qf-face-static { fill: #fff; stroke: #e1e5e8; stroke-width: 1; }
.qf-face-static { display: none; }
.qf-ticks line { stroke: #7b848c; stroke-width: 1.2; }
.qf-letter { font: 700 16px 'Open Sans', sans-serif; fill: #262626; text-anchor: middle; dominant-baseline: central; }
.qf-letter-n { fill: #d32f2f; }
.qf-qline { stroke: #06ad7b; stroke-width: 2; stroke-dasharray: 4 3; }
.qf-kaaba-box { fill: #1d1d1d; }
.qf-kaaba-band { fill: #d9a520; }
.qf-arrow-shape { fill: #06ad7b; }
.qf-hub { fill: #262626; }
.qf-pointer { fill: #f19935; }
#qf-arrow { display: none; }
.qf[data-mode="arrow"] #qf-arrow { display: inline; }
.qf[data-mode="arrow"] #qf-dial { display: none; }
.qf[data-mode="arrow"] .qf-face-static { display: inline; }
.qf-nolocation #qf-kaaba, .qf-nolocation #qf-arrow { opacity: .25; }
.qf-aligned .qf-ring { stroke: #06ad7b; stroke-width: 6; }
.qf-aligned .qf-arrow-shape { fill: #049066; }

.qf-status { text-align: center; min-height: 1.6em; margin: 0 0 12px; font-weight: 700; }
.qf-aligned .qf-status { color: #049066; }
.qf-warn { background: #fff4e0; border: 1px solid #f19935; padding: 8px 12px; margin-bottom: 12px; font-size: 15px; }
.qf-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.qf-btn { font: inherit; font-size: 16px; min-height: 46px; padding: 10px 18px; border: 1px solid #cfd5da; background: #f4f5f7; color: #262626; border-radius: 5px; cursor: pointer; }
.qf-btn:hover { background: #eceef1; }
.qf-btn-primary { background: #06ad7b; border-color: #06ad7b; color: #fff; font-weight: 700; }
.qf-btn-primary:hover { background: #049066; }
.qf-link { font: inherit; background: none; border: 0; padding: 0; color: #06ad7b; text-decoration: underline; cursor: pointer; }
.qf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.qf-card { background: #fff; border: 1px solid #e1e5e8; padding: 14px 18px; margin-bottom: 12px; }
.qf-card h3 { margin: 0 0 4px; font-size: 16px; text-transform: uppercase; color: #5f5f5f; letter-spacing: .03em; }
.qf-val { font-size: 26px; font-weight: 700; margin: 0; word-break: break-word; }
.qf-sub { font-size: 15px; color: #5f5f5f; margin: 4px 0 0; }
.qf-map-h { margin: 10px 0 12px; font-size: 24px; }
#qf-map { height: 380px; border: 1px solid #e1e5e8; z-index: 0; }
.qf-map-hint { font-size: 14px; color: #5f5f5f; margin-top: 8px; }
.qf-text { max-width: 860px; margin-top: 30px; }
.qf-text h2 { font-size: 24px; margin: 28px 0 10px; }
.qf-text li { margin-bottom: 6px; }
.qf-share { margin: 25px 0 10px; }
.qf-share h3 { margin-bottom: 8px; }

.qf-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 15px; }
.qf-modal[hidden] { display: none; }
.qf-modal-box { background: #fff; max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; padding: 22px 24px; border-radius: 6px; font-size: 17px; }
.qf-modal-box h3 { margin: 0 0 12px; font-size: 22px; }
.qf-modal-box h4 { margin: 14px 0 6px; font-size: 17px; }
.qf-modal-box ol { margin: 0 0 8px; padding-left: 22px; }
.qf-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.qf-modal-open { overflow: hidden; }
.qf-field { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.qf-field-col { flex-direction: column; align-items: stretch; gap: 4px; }
.qf-field input[type="number"], .qf-field select { font: inherit; font-size: 16px; padding: 8px; }
.qf-note { font-size: 14px; color: #5f5f5f; }
.qf-eight { display: block; width: 160px; margin: 6px auto 12px; }
.qf-eight path { fill: none; stroke: #06ad7b; stroke-width: 3; stroke-dasharray: 14 8; animation: qf-dash 1.6s linear infinite; }
@keyframes qf-dash { to { stroke-dashoffset: -44; } }

@media (max-width: 900px) {
  .qf-grid { flex-direction: column; gap: 15px; }
  .qf-col-tool { flex: none; width: 100%; }
  .qf-col-info { width: 100%; }
  #qf-map { height: 300px; }
  }

/* City pages */
.qf-btn[hidden] { display: none; }
.qf-outro { max-width: 860px; margin-top: 20px; }
.qf-city .similar { margin-top: 25px; }

/* City search inside the "permission needed" window */
.qf-citybox { margin: 14px 0 8px; padding: 12px; background: #f4f5f7; border-radius: 6px; }
.qf-citybox h4 { margin: 0 0 4px; }
.qf-citybox .qf-note { margin: 0 0 8px; }
.qf-city-input { width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid #cfd5da; border-radius: 5px; }
.qf-city-list { background: #fff; border: 1px solid #e1e5e8; border-top: 0; text-align: left; max-height: 40vh; overflow: auto; }
.qf-city-list:empty { display: none; }
.qf-city-list p { margin: 0; padding: 0; }
.qf-city-list p a { display: block; padding: 11px 12px; text-decoration: none; color: #262626; border-top: 1px solid #f0f2f4; }
.qf-city-list p:first-child a { border-top: 0; }
.qf-city-list p a:hover { background: #f4f5f7; }
.qf-city-list small { color: #6b7278; margin-left: 6px; font-size: 13px; }

.qf-modal-box:focus { outline: none; }