/* t311 — azan elastic cards + qibla as open/close option */
#view-azan {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 140px !important;
}

#view-azan .next-card,
#view-azan #prayer-grid,
#view-azan #prayer-grid article,
#view-azan .times,
#view-azan .times article,
#view-azan .azan-actions,
#view-azan .azan-voice,
#view-azan .azan-voice-picker,
#view-azan .note,
#view-azan .azan-note,
#view-azan section,
#view-azan article,
#view-azan .card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#view-azan #prayer-grid,
#view-azan .times {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

#view-azan #prayer-grid article,
#view-azan .times article {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px 14px !important;
  width: 100% !important;
  padding: 16px 18px !important;
  white-space: normal !important;
}

#view-azan .next-card {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 16px 18px !important;
  white-space: normal !important;
}

/* Qibla is hidden until opened */
#qibla-card {
  display: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 12px 0 24px !important;
  padding: 16px 16px 20px !important;
}
#qibla-card.is-open {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
#qibla-card .qibla-stage {
  width: min(70vw, 280px) !important;
  height: min(70vw, 280px) !important;
  max-height: 48vh !important;
  margin: 8px auto !important;
  flex-shrink: 0 !important;
}

/* When qibla is open: hide prayer times so the compass is the page; close returns */
body.qibla-open #view-azan .next-card,
body.qibla-open #view-azan #prayer-grid,
body.qibla-open #view-azan .times,
body.qibla-open #view-azan .azan-actions,
body.qibla-open #view-azan .azan-voice,
body.qibla-open #view-azan .azan-voice-picker,
body.qibla-open #view-azan .note,
body.qibla-open #view-azan .azan-note,
body.qibla-open #qibla-toggle-bar {
  display: none !important;
}

.qibla-toggle-bar {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 8px 0 16px !important;
  height: auto !important;
  overflow: visible !important;
}
.qibla-open-btn,
.qibla-close {
  appearance: none;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(180deg, #1b4d36, #0c2418);
  color: #fff3b0;
  font: 600 15px/1.4 "Cairo", "Tajawal", sans-serif;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  min-height: 44px;
}
.qibla-close {
  align-self: center;
  margin-top: 10px;
  width: auto;
}
.qibla-head {
  height: auto !important;
  overflow: visible !important;
}