/* Noor Adhan Companion — iOS 9+ compatible (no CSS variables, webkit prefixes) */
*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:"Poppins",system-ui,-apple-system,sans-serif;
  color:#0f172a;
  background-color:#d7e6de;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%23085041' stroke-width='1.2' opacity='0.07'/></svg>"),
    -webkit-radial-gradient(40% 20%,#ffffff 0%,#d7e6de 100%);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%23085041' stroke-width='1.2' opacity='0.07'/></svg>"),
    radial-gradient(ellipse at 40% 20%,#ffffff 0%,#d7e6de 100%);
  -webkit-transition:background-color 25s ease;transition:background-color 25s ease;
  height:100vh;overflow-y:auto;padding:12px;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
  gap:10px;
}

/* Time-of-day period tints */
body.period-fajr{
  background-color:#e8d4b0;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%238b5e2a' stroke-width='1.2' opacity='0.08'/></svg>"),
    -webkit-radial-gradient(40% 20%,#fdf5e8 0%,#e8d4b0 100%);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%238b5e2a' stroke-width='1.2' opacity='0.08'/></svg>"),
    radial-gradient(ellipse at 40% 20%,#fdf5e8 0%,#e8d4b0 100%);
}
body.period-maghrib{
  background-color:#e8ccaa;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%23803010' stroke-width='1.2' opacity='0.08'/></svg>"),
    -webkit-radial-gradient(40% 20%,#fdf0e0 0%,#e8ccaa 100%);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%23803010' stroke-width='1.2' opacity='0.08'/></svg>"),
    radial-gradient(ellipse at 40% 20%,#fdf0e0 0%,#e8ccaa 100%);
}
body.period-isha,body.period-pre-fajr{
  background-color:#c8cce8;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%23303080' stroke-width='1.2' opacity='0.07'/></svg>"),
    -webkit-radial-gradient(40% 20%,#eeeef8 0%,#c8cce8 100%);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><polygon points='30,3 33,24 54,24 37,37 43,57 30,45 17,57 23,37 6,24 27,24' fill='none' stroke='%23303080' stroke-width='1.2' opacity='0.07'/></svg>"),
    radial-gradient(ellipse at 40% 20%,#eeeef8 0%,#c8cce8 100%);
}

#pageHeader{display:none !important;}

/* Chips */
#topBar{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;gap:14px;margin-top:2px;}
.chip{
  -webkit-box-flex:1;-webkit-flex:1;flex:1;text-align:center;
  padding:14px 16px;border-radius:999px;font-weight:900;font-size:1.65rem;color:#fff;
  background:#f39c12;
  background:-webkit-linear-gradient(left,#f39c12,#f1c40f);
  background:linear-gradient(90deg,#f39c12,#f1c40f);
  -webkit-box-shadow:0 12px 26px rgba(0,0,0,.22);box-shadow:0 12px 26px rgba(0,0,0,.22);
  text-shadow:0 2px 8px rgba(0,0,0,.28);line-height:1.05;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  gap:10px;
}
.chip .chip-icon{font-size:1.8rem;line-height:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;align-items:center;}
.chip .chip-time{font-size:1.65rem;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.28);}
.chip .chip-label{font-size:1.05rem;font-weight:600;opacity:.9;}

/* Clock Row */
.clockRow{
  width:100%;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-flex-direction:row;flex-direction:row;
  gap:16px;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
}

/* Circles */
.nextCircle,.jamatCircle{
  width:230px;height:230px;min-width:230px;border-radius:50%;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  color:#fff;font-weight:900;
  background:#0a5c54;
  background:-webkit-radial-gradient(top,#0a5c54,#0e7a68);
  background:radial-gradient(circle at top,#0a5c54,#0e7a68);
  -webkit-box-shadow:0 18px 38px rgba(0,0,0,.30);box-shadow:0 18px 38px rgba(0,0,0,.30);
  border:3px solid rgba(255,255,255,.30);
}
.nextCircle .label,.jamatCircle .label{font-size:1.08rem;opacity:.95;letter-spacing:.8px;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.25);}
#nextBeginCountdown,#nextJamaatCountdown{font-size:1.62rem;line-height:1.1;text-align:center;white-space:pre-line;text-shadow:0 3px 12px rgba(0,0,0,.28);}

/* Clock Card */
.clockCard{
  -webkit-box-flex:1;-webkit-flex:1;flex:1;
  background:rgba(255,255,255,.93);border:2px solid rgba(10,92,84,.18);border-radius:24px;
  -webkit-box-shadow:0 14px 30px rgba(0,0,0,.16);box-shadow:0 14px 30px rgba(0,0,0,.16);
  padding:8px 10px 10px;text-align:center;
}
#clock{font-size:132px;font-weight:900;color:#042f2a;letter-spacing:-2px;line-height:1;margin-top:2px;text-shadow:0 4px 18px rgba(0,0,0,.16);}
#clock .colon{-webkit-animation:blink 1s infinite;animation:blink 1s infinite}
@-webkit-keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

#dateChip{text-align:center;line-height:1.05;}
#dateChip .dateG{font-size:1.55rem;font-weight:900;}
#dateChip .dateH{margin-top:4px;font-size:1.25rem;font-weight:900;opacity:.95;}

/* Prayer Row */
#prayerRow{
  width:100%;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-flex-direction:row;flex-direction:row;
  gap:14px;margin-bottom:2px;
}
.prayerCard{
  -webkit-box-flex:1;-webkit-flex:1;flex:1;
  background:rgba(255,255,255,.93);border:2px solid rgba(10,92,84,.18);border-radius:22px;
  -webkit-box-shadow:0 14px 30px rgba(0,0,0,.16);box-shadow:0 14px 30px rgba(0,0,0,.16);
  padding:18px 12px;text-align:center;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-flex-direction:column;flex-direction:column;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  min-height:165px;position:relative;overflow:visible;
}
.prayerCard .pName{font-size:1.42rem;font-weight:900;color:#063b35;letter-spacing:.6px;}
.prayerCard .pArabic{font-size:1.25rem;color:#0a5c54;opacity:.75;margin-top:2px;font-family:"Amiri","Scheherazade New",Georgia,serif;direction:rtl;letter-spacing:0;}
.prayerCard .pTimes{margin-top:10px;font-size:1.55rem;font-weight:900;line-height:1.15;color:#0f172a;}
.tomorrow-badge{margin-top:6px;font-size:1.15rem;font-weight:900;color:#c0392b;}

.pTimes .times{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:10px;margin-top:10px;}
.pTimes .trow{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center;gap:10px;}
.pTimes .ico{width:46px;font-size:1.75em;line-height:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;}
.pTimes .val{font-weight:900;font-size:1.42em;}
.pTimes .val.jama{color:#0a5c54;}

/* Active glow */
.prayerCard.active{
  -webkit-box-shadow:0 14px 30px rgba(0,0,0,.16),0 0 0 6px rgba(16,168,129,.22),0 0 36px 16px rgba(16,168,129,.75),0 0 92px 26px rgba(10,92,84,.46);
  box-shadow:0 14px 30px rgba(0,0,0,.16),0 0 0 6px rgba(16,168,129,.22),0 0 36px 16px rgba(16,168,129,.75),0 0 92px 26px rgba(10,92,84,.46);
  -webkit-animation:haloGreen 2.4s ease-in-out infinite;animation:haloGreen 2.4s ease-in-out infinite;
}
.prayerCard.ending-soon{
  -webkit-box-shadow:0 14px 30px rgba(0,0,0,.16),0 0 0 6px rgba(231,76,60,.20),0 0 36px 16px rgba(231,76,60,.72),0 0 92px 26px rgba(192,57,43,.44);
  box-shadow:0 14px 30px rgba(0,0,0,.16),0 0 0 6px rgba(231,76,60,.20),0 0 36px 16px rgba(231,76,60,.72),0 0 92px 26px rgba(192,57,43,.44);
  -webkit-animation:haloRed 2.4s ease-in-out infinite;animation:haloRed 2.4s ease-in-out infinite;
}
@-webkit-keyframes haloGreen{0%{-webkit-filter:saturate(1)}50%{-webkit-filter:saturate(1.25)}100%{-webkit-filter:saturate(1)}}
@keyframes haloGreen{0%{filter:saturate(1)}50%{filter:saturate(1.25)}100%{filter:saturate(1)}}
@-webkit-keyframes haloRed{0%{-webkit-filter:saturate(1)}50%{-webkit-filter:saturate(1.25)}100%{-webkit-filter:saturate(1)}}
@keyframes haloRed{0%{filter:saturate(1)}50%{filter:saturate(1.25)}100%{filter:saturate(1)}}

/* Jamāʿah imminent — pulse rings */
.prayerCard.jamaat-imminent::before,
.prayerCard.jamaat-imminent::after{
  content:'';
  position:absolute;
  top:-10px;right:-10px;bottom:-10px;left:-10px;
  border-radius:30px;
  border:3px solid rgba(10,92,84,.55);
  -webkit-animation:jamaat-pulse 1.6s ease-out infinite;
  animation:jamaat-pulse 1.6s ease-out infinite;
}
.prayerCard.jamaat-imminent::after{
  top:-20px;right:-20px;bottom:-20px;left:-20px;
  border-radius:38px;
  border-width:2px;
  border-color:rgba(10,92,84,.25);
  -webkit-animation-delay:.55s;
  animation-delay:.55s;
}
@-webkit-keyframes jamaat-pulse{
  0%{-webkit-transform:scale(.97);opacity:.8}
  100%{-webkit-transform:scale(1.04);opacity:0}
}
@keyframes jamaat-pulse{
  0%{transform:scale(.97);opacity:.8}
  100%{transform:scale(1.04);opacity:0}
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* --- iPad Safari portrait (768px) --- */
@media (max-width:768px) and (min-width:521px){
  body{overflow-y:auto;height:auto;min-height:100vh;padding:10px;gap:8px;}

  /* Chips */
  .chip{padding:10px 14px;font-size:1.1rem;}
  .chip .chip-time{font-size:1.1rem;}
  .chip .chip-label{font-size:.82rem;}
  .chip .chip-icon{font-size:1.3rem;}

  /* Clock row */
  .clockRow{gap:10px;}
  .nextCircle,.jamatCircle{width:140px;height:140px;min-width:140px;}
  .nextCircle .label,.jamatCircle .label{font-size:.82rem;margin-bottom:6px;}
  #nextBeginCountdown,#nextJamaatCountdown{font-size:1.15rem;}
  #clock{font-size:80px;}
  #dateChip .dateG{font-size:1.1rem;}
  #dateChip .dateH{font-size:.9rem;}

  /* Prayer cards — 2 across, 3 rows (last row: Isha centred) */
  #prayerRow{-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:12px;}
  .prayerCard{
    min-width:calc(50% - 6px);
    -webkit-flex:0 0 calc(50% - 6px);
    flex:0 0 calc(50% - 6px);
    min-height:140px;
    padding:12px 10px;
  }
  .prayerCard .pName{font-size:1.1rem;}
  .prayerCard .pArabic{font-size:1rem;}
  .pTimes .val{font-size:1.2em;}
  .pTimes .ico{width:32px;font-size:1.4em;}
  .pTimes .times{gap:6px;}
}

/* --- iPad Safari landscape (1024px with Safari chrome) --- */
@media (min-width:769px) and (max-width:1024px){
  body{padding:10px;gap:8px;}
  .nextCircle,.jamatCircle{width:160px;height:160px;min-width:160px;}
  .nextCircle .label,.jamatCircle .label{font-size:.88rem;}
  #nextBeginCountdown,#nextJamaatCountdown{font-size:1.2rem;}
  #clock{font-size:96px;}
  #dateChip .dateG{font-size:1.25rem;}
  #dateChip .dateH{font-size:1rem;}
  .chip{padding:10px 14px;font-size:1.2rem;}
  .chip .chip-time{font-size:1.2rem;}
  .chip .chip-label{font-size:.88rem;}
  .prayerCard{min-height:145px;padding:14px 10px;}
  .prayerCard .pName{font-size:1.15rem;}
  .prayerCard .pArabic{font-size:1rem;}
  .pTimes .val{font-size:1.25em;}
  .pTimes .ico{width:34px;font-size:1.5em;}
}

/* --- Tablet landscape (≤1024px) --- */
@media (max-width:1024px){
  .nextCircle,.jamatCircle{width:190px;height:190px;min-width:190px;}
  #clock{font-size:110px;}
}

/* --- Tablet portrait (≤820px) --- */
@media (max-width:820px){
  body{overflow-y:auto;height:auto;min-height:100vh;padding:10px;}
  #prayerRow{-webkit-flex-wrap:wrap;flex-wrap:wrap;}
  .prayerCard{min-width:calc(50% - 7px);-webkit-flex:0 0 calc(50% - 7px);flex:0 0 calc(50% - 7px);}
  .nextCircle,.jamatCircle{width:150px;height:150px;min-width:150px;}
  .nextCircle .label,.jamatCircle .label{font-size:.9rem;}
  #nextBeginCountdown,#nextJamaatCountdown{font-size:1.35rem;}
  #clock{font-size:92px;}
  .chip{font-size:1.2rem;}
  .chip .chip-time{font-size:1.2rem;}
  .chip .chip-label{font-size:.9rem;}
}

/* --- Phone landscape (≤700px, landscape) --- */
@media (max-width:700px) and (orientation:landscape){
  body{padding:6px;gap:6px;}
  .chip{padding:8px 12px;font-size:.95rem;}
  .chip .chip-time{font-size:.95rem;}
  .chip .chip-label{font-size:.75rem;}
  .chip .chip-icon{font-size:1.2rem;}
  .clockRow{gap:10px;}
  .nextCircle,.jamatCircle{width:100px;height:100px;min-width:100px;}
  .nextCircle .label,.jamatCircle .label{font-size:.72rem;margin-bottom:4px;}
  #nextBeginCountdown,#nextJamaatCountdown{font-size:.95rem;}
  #clock{font-size:60px;}
  #dateChip .dateG{font-size:1.05rem;}
  #dateChip .dateH{font-size:.9rem;}
  .prayerCard{min-height:auto;padding:8px 10px;}
  .prayerCard .pName{font-size:1rem;}
  .prayerCard .pArabic{font-size:.9rem;}
  .pTimes .val{font-size:1.05em;}
  .pTimes .ico{width:28px;font-size:1.2em;}
  .pTimes .times{gap:4px;}
}

/* --- Phone portrait (≤520px) --- */
@media (max-width:520px){

  body{
    overflow-y:auto;
    height:auto;
    min-height:100vh;
    padding:10px 10px 20px;
    gap:8px;
    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
  }

  /* Chips */
  #topBar{gap:8px;}
  .chip{
    padding:10px 12px;
    -webkit-box-shadow:0 6px 14px rgba(0,0,0,.18);
    box-shadow:0 6px 14px rgba(0,0,0,.18);
  }
  .chip .chip-icon{font-size:1.3rem;}
  .chip .chip-time{font-size:1.05rem;}
  .chip .chip-label{font-size:.78rem;}

  /* Clock row — reorder: clock first, then circles side-by-side below */
  .clockRow{
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:8px;
  }
  .clockCard{
    -webkit-order:-1;
    order:-1;
    -webkit-box-flex:0;
    -webkit-flex:0 0 100%;
    flex:0 0 100%;
    width:100%;
    border-radius:18px;
    padding:6px 10px 8px;
  }
  #clock{font-size:76px;letter-spacing:-1px;}
  #dateChip .dateG{font-size:1.15rem;}
  #dateChip .dateH{font-size:.95rem;}

  /* Circles become rounded-rect pills, side by side */
  .nextCircle,.jamatCircle{
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex:1;
    min-width:0;
    width:auto;
    height:90px;
    border-radius:16px;
    -webkit-box-shadow:0 8px 20px rgba(0,0,0,.22);
    box-shadow:0 8px 20px rgba(0,0,0,.22);
  }
  .nextCircle .label,.jamatCircle .label{
    font-size:.72rem;
    letter-spacing:.5px;
    margin-bottom:4px;
  }
  #nextBeginCountdown,#nextJamaatCountdown{
    font-size:.98rem;
    line-height:1.2;
  }

  /* Prayer row — full-width horizontal cards */
  #prayerRow{
    -webkit-flex-direction:column;
    flex-direction:column;
    gap:8px;
  }
  .prayerCard{
    -webkit-box-flex:0;
    -webkit-flex:none;
    flex:none;
    width:100%;
    min-height:auto;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-box-align:center;
    -webkit-align-items:center;
    align-items:center;
    padding:11px 14px;
    gap:10px;
    border-radius:14px;
    -webkit-box-shadow:0 4px 14px rgba(0,0,0,.11);
    box-shadow:0 4px 14px rgba(0,0,0,.11);
  }
  /* Name+Arabic column */
  .prayerCard .pName-wrap{
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:start;
    -webkit-align-items:flex-start;
    align-items:flex-start;
    -webkit-box-flex:0;
    -webkit-flex-shrink:0;
    flex-shrink:0;
    width:86px;
  }
  .prayerCard .pName{font-size:1.05rem;letter-spacing:.3px;}
  .prayerCard .pArabic{font-size:1.05rem;margin-top:0;}
  /* Times column */
  .prayerCard .pTimes{
    margin-top:0;
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex:1;
  }
  .pTimes .times{
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-box-pack:end;
    -webkit-justify-content:flex-end;
    justify-content:flex-end;
    -webkit-box-align:center;
    -webkit-align-items:center;
    align-items:center;
    gap:14px;
    margin-top:0;
  }
  .pTimes .trow{
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:center;
    align-items:center;
    gap:3px;
  }
  .pTimes .ico{width:auto;font-size:1.25em;line-height:1;}
  .pTimes .val{font-size:1.15em;}
  .tomorrow-badge{font-size:.8rem;margin-top:2px;}

  /* Pulse rings — tighter fit on mobile cards */
  .prayerCard.jamaat-imminent::before{
    top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:18px;
  }
  .prayerCard.jamaat-imminent::after{
    top:-11px;right:-11px;bottom:-11px;left:-11px;border-radius:24px;
  }
}