/* Qibla Finder — AlMaqam Premium v1.2.0 */
.qf-wrapper,
.qf-wrapper *{
  box-sizing:border-box!important;
}

.qf-wrapper{
  --qf-cream:#f4eedf;
  --qf-cream-2:#fbf7ec;
  --qf-green:#064333;
  --qf-green-2:#082d25;
  --qf-green-3:#0d5a45;
  --qf-gold:#d4aa4f;
  --qf-gold-2:#f0d37a;
  --qf-muted:#6c756f;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  color:var(--qf-green)!important;
  isolation:isolate!important;
}

.qf-page-shell{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,var(--qf-cream-2) 0%,var(--qf-cream) 58%,#efe5d1 100%)!important;
  padding:72px 24px!important;
  border-radius:0!important;
}

.qf-page-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 12% 15%,rgba(212,170,79,.18),transparent 30%),
    radial-gradient(circle at 88% 28%,rgba(6,67,51,.12),transparent 34%),
    linear-gradient(90deg,rgba(6,67,51,.04) 1px,transparent 1px),
    linear-gradient(180deg,rgba(6,67,51,.04) 1px,transparent 1px)!important;
  background-size:auto,auto,56px 56px,56px 56px!important;
  opacity:.9!important;
  pointer-events:none!important;
}

.qf-layout{
  position:relative!important;
  z-index:1!important;
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 440px!important;
  gap:54px!important;
  align-items:center!important;
}

.qf-copy-panel{
  padding:18px 0!important;
}

.qf-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid rgba(6,67,51,.14)!important;
  border-radius:999px!important;
  padding:9px 14px!important;
  background:rgba(255,255,255,.55)!important;
  color:rgba(6,67,51,.78)!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  margin:0 0 22px!important;
}

.qf-main-heading{
  margin:0!important;
  padding:0!important;
  color:var(--qf-green)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(46px,6vw,86px)!important;
  font-weight:500!important;
  line-height:.95!important;
  letter-spacing:-.06em!important;
}

.qf-main-copy{
  max-width:560px!important;
  margin:22px 0 0!important;
  padding:0!important;
  color:rgba(6,67,51,.72)!important;
  font-size:18px!important;
  line-height:1.7!important;
  font-weight:500!important;
}

.qf-feature-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  margin:32px 0 0!important;
  max-width:560px!important;
}

.qf-feature-item{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(6,67,51,.10)!important;
  box-shadow:0 16px 40px rgba(6,67,51,.06)!important;
}

.qf-feature-item span{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:rgba(212,170,79,.16)!important;
  color:#9a7221!important;
  font-size:12px!important;
  font-weight:900!important;
}

.qf-feature-item strong{
  color:var(--qf-green)!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:800!important;
}

.qf-trust-card{
  margin:28px 0 0!important;
  max-width:560px!important;
  padding:20px 22px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(6,67,51,.94),rgba(8,45,37,.96))!important;
  border:1px solid rgba(212,170,79,.22)!important;
  box-shadow:0 24px 60px rgba(6,67,51,.18)!important;
}

.qf-trust-card span{
  display:block!important;
  color:var(--qf-gold-2)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  margin:0 0 8px!important;
}

.qf-trust-card strong{
  display:block!important;
  color:#fff!important;
  font-size:17px!important;
  line-height:1.55!important;
  font-weight:700!important;
}

.qf-widget-panel{
  width:100%!important;
}

.qf-card{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  position:relative!important;
  overflow:hidden!important;
  display:block!important;
  background:linear-gradient(145deg,#084634 0%,#062d24 100%)!important;
  border-radius:34px!important;
  padding:28px!important;
  box-shadow:0 34px 90px rgba(6,67,51,.35)!important;
  border:1px solid rgba(212,170,79,.22)!important;
  color:#fff!important;
}

.qf-card:before{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  border-radius:33px!important;
  border:1px solid rgba(255,255,255,.06)!important;
  pointer-events:none!important;
}

.qf-card>*{
  position:relative!important;
  z-index:1!important;
}

.qf-glow{
  position:absolute!important;
  border-radius:50%!important;
  pointer-events:none!important;
  z-index:0!important;
  filter:blur(2px)!important;
}

.qf-glow-one{
  width:290px!important;
  height:290px!important;
  top:-120px!important;
  right:-90px!important;
  background:radial-gradient(circle,rgba(212,170,79,.18),transparent 70%)!important;
}

.qf-glow-two{
  width:230px!important;
  height:230px!important;
  bottom:-90px!important;
  left:-80px!important;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)!important;
}

.qf-header{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 22px!important;
  padding:0!important;
  border:none!important;
  background:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

.qf-icon-wrap{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:16px!important;
  background:rgba(212,170,79,.14)!important;
  border:1px solid rgba(212,170,79,.33)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:var(--qf-gold)!important;
}

.qf-icon-wrap svg{
  width:25px!important;
  height:25px!important;
  display:block!important;
}

.qf-title{
  font-size:21px!important;
  font-weight:900!important;
  color:#fff!important;
  letter-spacing:-.03em!important;
  line-height:1.15!important;
  margin:0 0 4px!important;
  padding:0!important;
}

.qf-subtitle{
  font-size:12px!important;
  color:rgba(255,255,255,.62)!important;
  margin:0!important;
  padding:0!important;
  font-weight:500!important;
  line-height:1.35!important;
}

.qf-compass-wrap{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:8px 0 20px!important;
  padding:0!important;
  min-height:0!important;
}

.qf-compass-shell{
  position:relative!important;
  width:236px!important;
  height:236px!important;
  flex:0 0 236px!important;
}

.qf-compass-dial{
  position:absolute!important;
  inset:0!important;
  border-radius:50%!important;
  border:2px solid rgba(212,170,79,.35)!important;
  background:radial-gradient(circle at center,rgba(16,91,68,.9),rgba(7,46,37,.98))!important;
  box-shadow:0 0 0 8px rgba(212,170,79,.055),inset 0 0 28px rgba(0,0,0,.34),0 18px 42px rgba(0,0,0,.18)!important;
  transition:transform .1s linear!important;
}

.qf-cardinal{
  position:absolute!important;
  font-size:12px!important;
  font-weight:900!important;
  color:var(--qf-gold)!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}

.qf-n{top:10px!important;left:50%!important;transform:translateX(-50%)!important}
.qf-s{bottom:10px!important;left:50%!important;transform:translateX(-50%)!important}
.qf-e{right:10px!important;top:50%!important;transform:translateY(-50%)!important}
.qf-w{left:10px!important;top:50%!important;transform:translateY(-50%)!important}
.qf-ticks{position:absolute!important;inset:0!important}
.qf-tick{position:absolute!important;top:50%!important;left:50%!important;width:1px!important;height:7px!important;background:rgba(255,255,255,.18)!important;transform-origin:bottom center!important;margin-left:-.5px!important;margin-top:-118px!important}
.qf-tick-major{height:13px!important;background:rgba(212,170,79,.46)!important;width:2px!important;margin-left:-1px!important}

.qf-north-needle{
  position:absolute!important;
  top:5px!important;
  left:50%!important;
  width:26px!important;
  height:26px!important;
  transform:translateX(-50%)!important;
  transform-origin:bottom center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#ff7474!important;
  font-size:10px!important;
  font-weight:900!important;
}

.qf-qibla-arrow{
  position:absolute!important;
  bottom:50%!important;
  left:50%!important;
  width:38px!important;
  margin-left:-19px!important;
  transform-origin:bottom center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
  opacity:0!important;
  transition:opacity .4s ease!important;
  padding-bottom:10px!important;
}

.qf-qibla-arrow.is-visible{opacity:1!important}
.qf-qibla-arrow svg{width:23px!important;height:86px!important;filter:drop-shadow(0 0 8px rgba(212,170,79,.58))!important}
.qf-qibla-arrow strong{font-size:8px!important;font-weight:900!important;color:var(--qf-gold)!important;text-transform:uppercase!important;letter-spacing:.1em!important}

.qf-center-dot{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:11px!important;
  height:11px!important;
  border-radius:50%!important;
  background:var(--qf-gold)!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 0 14px rgba(212,170,79,.75)!important;
}

.qf-status-text{
  font-size:12px!important;
  color:rgba(255,255,255,.64)!important;
  text-align:center!important;
  margin:0 0 15px!important;
  line-height:1.55!important;
  display:block!important;
}
.qf-status-text.success{color:#5af08c!important}
.qf-status-text.error{color:#ff8585!important}

.qf-actions{
  display:flex!important;
  gap:10px!important;
  margin:0 0 12px!important;
  padding:0!important;
}

.qf-btn{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:999px!important;
  padding:14px 18px!important;
  font-size:13px!important;
  font-weight:900!important;
  border:none!important;
  cursor:pointer!important;
  transition:transform .2s ease,background .2s ease,opacity .2s ease!important;
  font-family:inherit!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

.qf-btn-primary{
  background:linear-gradient(135deg,var(--qf-gold-2),var(--qf-gold))!important;
  color:#062d24!important;
  flex:1!important;
  box-shadow:0 10px 26px rgba(212,170,79,.30)!important;
}
.qf-btn-primary:hover{transform:translateY(-1px)!important;filter:brightness(1.03)!important}
.qf-btn-primary.is-loading{opacity:.7!important}
.qf-btn-primary svg{width:16px!important;height:16px!important}
.qf-btn-secondary{background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.20)!important}
.qf-btn-secondary:hover{background:rgba(255,255,255,.16)!important;transform:translateY(-1px)!important}

.qf-help{
  display:flex!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin:0 0 16px!important;
}
.qf-help span{font-size:10px!important;color:rgba(255,255,255,.58)!important;background:rgba(255,255,255,.075)!important;border-radius:999px!important;padding:5px 10px!important;line-height:1.1!important}

.qf-live-panel,
.qf-prayer-panel{
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:18px!important;
  padding:17px 18px!important;
  margin:0 0 13px!important;
  display:none!important;
}
.qf-live-panel.is-visible,
.qf-prayer-panel.is-visible{display:block!important}
.qf-live-main{margin:0 0 13px!important}
.qf-live-label{font-size:9px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.14em!important;color:var(--qf-gold)!important;display:block!important;margin:0 0 4px!important}
.qf-live-main strong{font-size:16px!important;font-weight:900!important;color:#fff!important;line-height:1.3!important}
.qf-wrapper.qf-aligned .qf-live-main strong{color:#5af08c!important}
.qf-info-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.qf-info-grid div span{display:block!important;font-size:9px!important;color:rgba(255,255,255,.58)!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin:0 0 3px!important}
.qf-info-grid div strong{font-size:13px!important;font-weight:900!important;color:#fff!important;line-height:1.3!important}

.qf-prayer-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:0 0 12px!important;padding:0!important;border:none!important;background:none!important;height:auto!important}
.qf-prayer-title{font-size:12px!important;font-weight:900!important;color:var(--qf-gold)!important}
.qf-prayer-location{font-size:10px!important;color:rgba(255,255,255,.56)!important;text-align:right!important}
.qf-prayer-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
.qf-prayer-item{background:rgba(255,255,255,.065)!important;border-radius:12px!important;padding:10px 8px!important;text-align:center!important;border:1px solid transparent!important}
.qf-prayer-item.qf-next-prayer{background:rgba(212,170,79,.15)!important;border-color:rgba(212,170,79,.42)!important}
.qf-prayer-name{display:block!important;font-size:9px!important;font-weight:800!important;color:rgba(255,255,255,.58)!important;text-transform:uppercase!important;letter-spacing:.07em!important;margin:0 0 4px!important}
.qf-prayer-time{display:block!important;font-size:13px!important;font-weight:900!important;color:#fff!important}
.qf-next-prayer .qf-prayer-time{color:var(--qf-gold)!important}
.qf-prayer-note{font-size:10px!important;color:rgba(255,255,255,.52)!important;margin:9px 0 0!important;text-align:center!important;line-height:1.45!important}

.qf-cta-band{
  background:linear-gradient(135deg,rgba(212,170,79,.14),rgba(212,170,79,.05))!important;
  border:1px solid rgba(212,170,79,.26)!important;
  border-radius:18px!important;
  padding:15px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
}
.qf-cta-text strong{display:block!important;font-size:12px!important;font-weight:900!important;color:#fff!important;margin:0 0 3px!important;line-height:1.25!important}
.qf-cta-text span{display:block!important;font-size:10px!important;color:rgba(255,255,255,.58)!important;line-height:1.35!important}
.qf-cta-btn{background:#25d366!important;color:#07351c!important;font-size:11px!important;font-weight:900!important;padding:10px 14px!important;border-radius:999px!important;white-space:nowrap!important;text-decoration:none!important;flex-shrink:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
.qf-cta-btn:hover{color:#07351c!important;filter:brightness(1.03)!important;text-decoration:none!important}

@media(max-width:980px){
  .qf-page-shell{padding:54px 18px!important}
  .qf-layout{grid-template-columns:1fr!important;gap:32px!important;width:min(680px,100%)!important}
  .qf-copy-panel{text-align:center!important;padding:0!important}
  .qf-main-copy,.qf-feature-list,.qf-trust-card{margin-left:auto!important;margin-right:auto!important}
  .qf-feature-item{text-align:left!important}
}

@media(max-width:520px){
  .qf-page-shell{padding:34px 14px!important}
  .qf-main-heading{font-size:46px!important}
  .qf-main-copy{font-size:15px!important;line-height:1.65!important}
  .qf-card{border-radius:26px!important;padding:20px 15px!important}
  .qf-card:before{border-radius:25px!important}
  .qf-header{margin-bottom:18px!important}
  .qf-compass-shell{width:196px!important;height:196px!important;flex-basis:196px!important}
  .qf-tick{margin-top:-98px!important}
  .qf-actions{flex-direction:column!important}
  .qf-btn{width:100%!important}
  .qf-info-grid{grid-template-columns:1fr!important}
  .qf-prayer-grid{grid-template-columns:repeat(2,1fr)!important}
  .qf-cta-band{flex-direction:column!important;text-align:center!important}
  .qf-cta-btn{width:100%!important}
}
