/* Masjid al-Noor branding layer — loads AFTER style.css (no CSS variables: old iOS safe).
   Matches the analogue Salah Clock: gold ring logo, serif name + gold Arabic, gold accents. */

/* brand bar (style.css hides #pageHeader, so this must win) */
#pageHeader{
  display:-webkit-box !important;display:-webkit-flex !important;display:flex !important;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;
  width:100%;padding:8px 4px 10px;
  border-bottom:1px solid rgba(212,175,90,.6);
}
#noorLogo{
  display:block;width:54px;height:54px;min-width:54px;margin-right:12px;
  border-radius:50%;background:#fff;border:3px solid #d4af5a;padding:3px;
  -webkit-box-shadow:0 4px 12px rgba(0,0,0,.18);box-shadow:0 4px 12px rgba(0,0,0,.18);
  -o-object-fit:cover;object-fit:cover;-o-object-position:50% 0;object-position:50% 0;
}
#brandText{line-height:1.05;}
#pageTitle{
  font-family:"Roboto Slab",Georgia,"Times New Roman",serif;
  font-size:1.7rem;font-weight:700;letter-spacing:.2px;color:#eef3fb;
}
#brandAr{
  margin-top:2px;text-align:right;direction:rtl;
  font-family:"Amiri","Scheherazade New",Georgia,serif;font-size:1.3rem;color:#f3d98b;
}

/* gold accents */
.nextCircle,.jamatCircle{border:4px solid #d4af5a;}
.clockCard{border-color:rgba(212,175,90,.8);}
.prayerCard{border-color:rgba(212,175,90,.55);}
#dateChip .dateH{color:#8a6a22;opacity:1;}

/* small screens */
@media (max-width:560px){
  #noorLogo{width:44px;height:44px;min-width:44px;margin-right:9px;}
  #pageTitle{font-size:1.25rem;}
  #brandAr{font-size:1rem;}
  .nextCircle,.jamatCircle{border-width:3px;}
}

/* blue background (same navy/royal blue as the analogue clock) — same blue all day */
body,body.period-fajr,body.period-maghrib,body.period-isha,body.period-pre-fajr{
  background-color:#0b1f45;
  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='%23d4af5a' stroke-width='1.2' opacity='0.13'/></svg>"),
    -webkit-radial-gradient(40% 18%,#2c52b8 0%,#1e3a8a 30%,#0b1f45 70%,#06142a 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='%23d4af5a' stroke-width='1.2' opacity='0.13'/></svg>"),
    radial-gradient(ellipse at 40% 18%,#2c52b8 0%,#1e3a8a 30%,#0b1f45 70%,#06142a 100%);
}

/* Noor logo in place of the mosque emoji */
.pTimes .ico img{
  display:block;width:1em;height:1em;min-width:1em;-webkit-flex:none;-ms-flex:none;flex:none;border-radius:50%;background:#fff;
  border:2px solid #d4af5a;-webkit-box-sizing:border-box;box-sizing:border-box;padding:1px;
  -o-object-fit:cover;object-fit:cover;-o-object-position:50% 0;object-position:50% 0;
}

/* ===== 24-hour dial card (replaces the big clock card; the old #clock/#dateChip stay as a fallback) ===== */
.clockCard.has-dial{
  padding:0;overflow:hidden;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  background:#06142a;
  background:-webkit-linear-gradient(top,#0b1f45,#06142a);
  background:linear-gradient(180deg,#0b1f45,#06142a);
  border:2px solid rgba(212,175,90,.8);
}
.clockCard.has-dial #clock,.clockCard.has-dial #dateChip{display:none;}
.dialWrap{position:relative;}
.dialWrap svg{display:block;width:100%;height:100%;font-family:"Poppins",system-ui,-apple-system,sans-serif;}

/* ===== sunrise / sunset chips — same look as the analogue clock (navy glass, gold edge, drawn sun icon) ===== */
#topBar{
  width:auto;max-width:100%;margin:2px auto 0;gap:0;
  -webkit-align-self:center;align-self:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  background:rgba(6,20,42,.62);border:1px solid rgba(212,175,90,.6);border-radius:999px;
  -webkit-box-shadow:0 8px 20px rgba(0,0,0,.28);box-shadow:0 8px 20px rgba(0,0,0,.28);
}
#topBar .chip{
  -webkit-box-flex:0;-webkit-flex:0 1 auto;flex:0 1 auto;
  background:none;background-image:none;border:0;border-radius:0;
  -webkit-box-shadow:none;box-shadow:none;text-shadow:none;
  color:#eef3fb;font-weight:500;padding:12px 38px;
}
#topBar .chip + .chip{border-left:1px solid rgba(212,175,90,.45);}
#sunriseChip .chip-tom{display:none;}  /* "tomorrow" shows once, at the end of the pill */
.chip .chip-icon{color:#f5b94a;text-shadow:none;}
.chip .chip-icon svg{display:block;width:1.3em;height:1.3em;}
.chip .chip-label{color:#a9b8d6;font-weight:500;opacity:1;text-shadow:none;}
.chip .chip-time{color:#fff;font-weight:600;text-shadow:none;}
.chip .chip-tom{font-style:normal;font-weight:500;font-size:.85em;color:#f3d98b;text-shadow:none;}

/* ===== view-switch button: top-right, in line with the header (overrides its inline bottom-right position) ===== */
#viewSwitch{
  top:14px !important;bottom:auto !important;right:16px !important;left:auto !important;
  width:46px !important;height:46px !important;font-size:22px !important;opacity:.6 !important;
  background:rgba(6,20,42,.7) !important;border:1px solid rgba(212,175,90,.7);
}

/* ===== header + chips scale up on big screens / TVs ===== */
@media (min-width:1200px){
  #noorLogo{width:66px;height:66px;min-width:66px;margin-right:16px;}
  #pageTitle{font-size:2.2rem;}
  #brandAr{font-size:1.7rem;}
  #viewSwitch{width:54px !important;height:54px !important;font-size:26px !important;}
}
@media (min-width:1700px){
  #noorLogo{width:84px;height:84px;min-width:84px;margin-right:20px;}
  #pageTitle{font-size:2.9rem;}
  #brandAr{font-size:2.1rem;}
}
@media (max-width:560px){
  #topBar{width:100%;}
  #topBar .chip{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:10px 6px;gap:5px;}
  .chip .chip-icon svg{width:1.1em;height:1.1em;}
  .chip .chip-tom{font-size:.72em;}
  #viewSwitch{top:8px !important;right:10px !important;width:38px !important;height:38px !important;font-size:18px !important;}
}

/* ===== view-switch circle: in the header, just right of the title ===== */
#pageHeader #viewSwitch{
  position:static !important;
  display:-webkit-box !important;display:-webkit-flex !important;display:flex !important;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  -webkit-flex-shrink:0;flex-shrink:0;margin-left:18px;
  width:46px !important;height:46px !important;border-radius:50%;
  font-size:22px !important;text-decoration:none;color:#fff;opacity:.8 !important;
  background:rgba(6,20,42,.7) !important;border:1px solid rgba(212,175,90,.7);
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:1200px){#pageHeader #viewSwitch{width:56px !important;height:56px !important;font-size:26px !important;margin-left:22px;}}
@media (min-width:1700px){#pageHeader #viewSwitch{width:68px !important;height:68px !important;font-size:32px !important;margin-left:26px;}}
@media (max-width:560px){#pageHeader #viewSwitch{width:44px !important;height:44px !important;font-size:19px !important;margin-left:8px;}}

/* ===== chip-tom badge: one centred "TOMORROW" tag on the top edge of the sunrise/sunset pill ===== */
#topBar{position:relative;}
#sunriseChip .chip-tom{display:none;}
#sunsetChip .chip-tom{
  position:absolute;top:-11px;left:50%;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  padding:2px 14px;border-radius:999px;background:#0b1f45;border:1px solid rgba(212,175,90,.75);
  color:#f3d98b;font-size:.78rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  line-height:1.3;white-space:nowrap;
}

/* ===== live logo wrapper: carries the gap that used to sit on the logo image ===== */
.logoWrap{position:relative;display:block;flex:none;margin-right:12px;border-radius:50%;-webkit-tap-highlight-color:transparent;}
#noorLogo{margin-right:0 !important;}
@media (min-width:1200px){.logoWrap{margin-right:16px;}}
@media (min-width:1700px){.logoWrap{margin-right:20px;}}
@media (max-width:560px){.logoWrap{margin-right:9px;}}

/* ===== phones: the five big cards become slim one-line rows (like sitetime) ===== */
.nh-rowhead{display:none;}
@media (max-width:520px), (max-height:500px) and (orientation:landscape){
  .nh-rowhead{
    display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
    padding:2px 13px 0;margin-top:4px;color:#c3cee0;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  }
  .nh-rowhead span{display:block;}
  .nh-rowhead .h0{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;}
  .nh-rowhead .h1,.nh-rowhead .h2{width:84px;text-align:right;-webkit-flex:none;flex:none;}
  #prayerRow{-webkit-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;gap:5px;margin-top:2px;}
  .prayerCard{
    -webkit-box-flex:0;-webkit-flex:none;flex:none;width:100%;box-sizing:border-box;
    min-height:48px;padding:6px 13px;gap:8px;border-radius:12px;text-align:left;
    -webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
    background:rgba(6,20,42,.62);border:1px solid rgba(212,175,90,.38);
    -webkit-box-shadow:none;box-shadow:none;
  }
  .prayerCard .pName-wrap{
    -webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;width:auto;min-width:0;
    -webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;
    -webkit-box-align:baseline;-webkit-align-items:baseline;align-items:baseline;-webkit-column-gap:8px;column-gap:8px;
  }
  .prayerCard .pName{font-size:15px;font-weight:800;letter-spacing:.04em;color:#eef3fb;}
  .prayerCard .pArabic{font-size:15px;margin:0;color:#f3d98b;opacity:1;}
  .prayerCard .tomorrow-badge{margin:0;font-size:10px !important;font-weight:700;color:#ffb4a8 !important;}   /* (the app sets this label's size and colour directly) */
  .nh-madhab{display:inline;margin:0;font-size:11px;color:#f3d98b;}
  .prayerCard .pTimes{-webkit-box-flex:0;-webkit-flex:none;flex:none;margin:0;}
  .pTimes .times{-webkit-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;gap:0;margin:0;}
  .pTimes .trow{-webkit-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-flex:none;flex:none;width:84px;gap:0;text-align:right;}
  .pTimes .ico{display:none;}
  .pTimes .val{font-size:18px;font-weight:700;color:#fff;line-height:1.15;font-variant-numeric:tabular-nums;}   /* two Jumu'ah times wrap onto two lines */
  .pTimes .val.jama{color:#f3d98b;}
  /* traffic light, tighter for a slim row (same green / red / pulse meaning) */
  .prayerCard.active{
    background:rgba(10,92,84,.42);
    -webkit-box-shadow:0 0 0 2px rgba(16,168,129,.95),0 0 18px 3px rgba(16,168,129,.55);
    box-shadow:0 0 0 2px rgba(16,168,129,.95),0 0 18px 3px rgba(16,168,129,.55);
  }
  .prayerCard.ending-soon{
    background:rgba(192,57,43,.32);
    -webkit-box-shadow:0 0 0 2px rgba(231,76,60,.98),0 0 18px 3px rgba(231,76,60,.6);
    box-shadow:0 0 0 2px rgba(231,76,60,.98),0 0 18px 3px rgba(231,76,60,.6);
  }
  .prayerCard.jamaat-imminent::before{top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:15px;border-color:rgba(243,217,139,.9);}
  .prayerCard.jamaat-imminent::after{top:-9px;right:-9px;bottom:-9px;left:-9px;border-radius:19px;border-color:rgba(243,217,139,.45);}
}