/* ============================================================
   ZamZam — Mobile responsive overrides
   Loaded LAST so overrides win.
   Breakpoints:
     - phone:       <= 600px
     - small phone: <= 380px
     - landscape:   <= 500px height
   Desktop stays as-is.
   ============================================================ */

/* === TABLET (≤900px) === */
@media (max-width: 900px) {
  body .container {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* === PHONE (≤600px) === */
@media (max-width: 600px) {

  /* Header — compact */
  header {
    padding: 12px 0 14px !important;
    gap: 8px !important;
  }
  .header-logo, header h1 {
    font-size: 18px !important;
  }
  .header-actions {
    gap: 6px !important;
  }
  .icon-btn {
    width: 32px !important;
    height: 32px !important;
  }

  /* Date header / Hijri */
  .date-header {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
  .hijri-date {
    font-size: 11px !important;
  }

  /* Location chip */
  .location-chip {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .location-chip-icon {
    font-size: 12px !important;
  }
  .location-chip-text {
    font-size: 11px !important;
  }

  /* Cards (prayer cards, generic) */
  .card {
    padding: 14px 12px !important;
    margin-bottom: 10px !important;
  }
  .card-title {
    font-size: 14px !important;
  }

  /* Stat cards (2-col → 2-col stays good on phone) */
  .stat-card {
    padding: 14px 10px !important;
  }

  /* Countdown overlay (prayer countdown big screen) */
  .countdown-prayer-name {
    font-size: 28px !important;
    letter-spacing: 0.12em !important;
  }
  .countdown-prayer-time {
    font-size: 16px !important;
  }
  .countdown-boxes {
    gap: 8px !important;
  }
  .countdown-box {
    padding: 14px 10px !important;
    min-width: 60px !important;
  }
  .countdown-content {
    padding: 20px 16px !important;
  }
  .countdown-close {
    top: 12px !important;
    right: 12px !important;
  }

  /* Date picker modal */
  .date-picker-modal {
    width: calc(100% - 24px) !important;
    max-width: 380px !important;
    padding: 16px 14px !important;
  }
  .date-picker-title {
    font-size: 14px !important;
  }
  .date-picker-wheels {
    gap: 8px !important;
  }
  .date-picker-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  /* Location modal */
  .location-modal {
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    max-height: 80vh !important;
  }
  .location-modal-header {
    padding: 14px 16px !important;
  }
  .location-modal-title {
    font-size: 14px !important;
  }
  .location-modal-body {
    padding: 12px !important;
  }
  .location-modal-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  /* Istighfar / Salawat counters */
  .istighfar-total {
    font-size: 28px !important;
  }
  .istighfar-btn, .istighfar-add {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Islamic event badge */
  .islamic-event-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Heatmap — 7-col stays but cells smaller */
  /* (existing 7-col grid in styles.css line 489 already responsive) */

  /* Bottom nav — taller, comfortable thumb reach */
  .bottom-nav {
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .nav-item {
    font-size: 9px !important;
  }
  .nav-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Prayer time list / today timeline */
  .prayer-row, .prayer-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .prayer-time {
    font-size: 14px !important;
  }
  .prayer-name {
    font-size: 12px !important;
  }

  /* Section headings */
  .section-label, h2 {
    font-size: 11px !important;
    margin: 14px 0 8px !important;
  }
  h1 {
    font-size: 22px !important;
  }
}

/* === SMALL PHONE (≤380px) === */
@media (max-width: 380px) {
  body .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .countdown-prayer-name {
    font-size: 22px !important;
  }
  .countdown-box {
    min-width: 52px !important;
    padding: 10px 6px !important;
  }
  .istighfar-total {
    font-size: 24px !important;
  }
  .nav-item {
    font-size: 8.5px !important;
  }
}

/* === LANDSCAPE PHONE === */
@media (max-height: 500px) and (orientation: landscape) {
  header {
    padding: 8px 0 !important;
  }
  .countdown-content {
    padding: 16px 14px !important;
  }
  .bottom-nav {
    padding: 4px 0 !important;
  }
}

/* iOS input zoom fix */
@media (max-width: 600px) {
  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}