/* ============================================
   PKC Weather & Namaz Widgets
   ============================================ */

/* ==================
   WEATHER SECTION
   ================== */
#pkc-weather-section {
  background: linear-gradient(160deg, #0a0f14 0%, #0d1520 50%, #0a1a10 100%);
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
  font-family: 'Hind Siliguri', sans-serif;
}
#pkc-weather-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(26,107,60,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(244,196,48,.05) 0%, transparent 60%);
  pointer-events: none;
}
.pkw-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
/* Header row */
.pkw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.pkw-header-left {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.pkw-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.pkw-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(244,196,48,.12);
  color: #f4c430;
  border: 1px solid rgba(244,196,48,.25);
  border-radius: 50px;
  padding: .18rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}
.pkw-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pkw-header-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.pkw-status-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: .3rem .9rem;
  font-size: .78rem;
  color: rgba(255,255,255,.8);
  font-family: 'Manrope', sans-serif;
}
.pkw-status-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pkc-pulse 2s infinite;
  flex-shrink: 0;
}
.pkw-temp-pill {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  border-radius: 50px;
  padding: .3rem .9rem;
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  font-weight: 700;
}
.pkw-time-pill {
  background: rgba(26,107,60,.2);
  border: 1px solid rgba(26,107,60,.4);
  color: #4ade80;
  border-radius: 50px;
  padding: .3rem .9rem;
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}
/* Cards grid */
.pkw-cards {
  display: flex;
  gap: .9rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,196,48,.3) transparent;
}
.pkw-card {
  min-width: 175px;
  flex: 1;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
  cursor: default;
}
.pkw-card:hover {
  border-color: rgba(244,196,48,.3);
  background: rgba(255,255,255,.09);
  transform: translateY(-3px);
}
.pkw-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-color, rgba(244,196,48,.6));
  border-radius: 14px 14px 0 0;
}
.pkw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pkw-card-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  font-family: 'Hind Siliguri', sans-serif;
}
.pkw-card-title .ci { font-size: 1rem; }
.pkw-tag {
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 50px;
  font-family: 'Manrope', sans-serif;
}
.pkw-tag-now   { background: rgba(234,179,8,.2);  color: #fbbf24; border: 1px solid rgba(234,179,8,.3); }
.pkw-tag-good  { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.pkw-tag-mid   { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.pkw-tag-info  { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.pkw-tag-low   { background: rgba(6,182,212,.15); color: #22d3ee; border: 1px solid rgba(6,182,212,.3); }
.pkw-tag-more  { background: rgba(244,196,48,.15); color: #f4c430; border: 1px solid rgba(244,196,48,.3); }
.pkw-main-val {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  line-height: 1.1;
}
.pkw-sub-val {
  font-size: .7rem;
  color: rgba(255,255,255,.48);
  line-height: 1.5;
  font-family: 'Hind Siliguri', sans-serif;
}
.pkw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .2rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.pkw-footer-lbl {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-family: 'Hind Siliguri', sans-serif;
}
.pkw-footer-val {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}
.pkw-footer-link {
  font-size: .65rem;
  color: rgba(244,196,48,.7);
  font-family: 'Hind Siliguri', sans-serif;
  cursor: pointer;
}
.pkw-footer-link:hover { color: #f4c430; }

/* Individual card colors */
.pkw-card-temp   { --card-color: rgba(234,179,8,.7); }
.pkw-card-sky    { --card-color: rgba(59,130,246,.6); }
.pkw-card-wind   { --card-color: rgba(34,197,94,.6); }
.pkw-card-hum    { --card-color: rgba(6,182,212,.6); }
.pkw-card-rain   { --card-color: rgba(139,92,246,.6); }
.pkw-card-sun    { --card-color: rgba(244,196,48,.8); }

/* Loading state */
.pkw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: rgba(255,255,255,.4);
  font-family: 'Hind Siliguri', sans-serif;
  font-size: .9rem;
  gap: .75rem;
}
.pkw-spin {
  width: 24px; height: 24px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: #f4c430;
  border-radius: 50%;
  animation: pkc-spin .8s linear infinite;
}
@keyframes pkc-spin { to { transform: rotate(360deg); } }

/* ==================
   NAMAZ SECTION
   ================== */
#pkc-namaz-section {
  background: linear-gradient(160deg, #051008 0%, #0a1a0e 40%, #0d2012 100%);
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
  font-family: 'Hind Siliguri', sans-serif;
}
#pkc-namaz-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(244,196,48,.06) 0%, transparent 70%);
  pointer-events: none;
}
.pkn-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
/* Namaz Header */
.pkn-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pkn-header-left {}
.pkn-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .3rem;
}
.pkn-source-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(244,196,48,.1);
  color: rgba(244,196,48,.8);
  border: 1px solid rgba(244,196,48,.2);
  border-radius: 50px;
  padding: .15rem .65rem;
  font-size: .65rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
}
.pkn-date-row {
  margin-top: .35rem;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.pkn-date-row span { display: flex; align-items: center; gap: .25rem; }
.pkn-header-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.pkn-current-pill {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(26,107,60,.2);
  border: 1px solid rgba(26,107,60,.4);
  border-radius: 50px;
  padding: .35rem .9rem;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: .82rem;
  color: #fff;
}
.pkn-next-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.3);
  border-radius: 50px;
  padding: .35rem .9rem;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,.85);
}
.pkn-next-time {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: #f4c430;
  font-size: .88rem;
}
.pkn-alarm-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  padding: .35rem .9rem;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: all .2s;
}
.pkn-alarm-btn:hover { background: rgba(244,196,48,.12); color: #f4c430; border-color: rgba(244,196,48,.3); }

/* Namaz cards */
.pkn-cards {
  display: flex;
  gap: .9rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: .3rem;
  margin-bottom: 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,196,48,.3) transparent;
}
.pkn-card {
  min-width: 165px;
  flex: 1;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
  cursor: default;
}
/* Default namaz card */
.pkn-card-default {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
}
.pkn-card-default:hover {
  border-color: rgba(244,196,48,.25);
  background: rgba(255,255,255,.09);
  transform: translateY(-3px);
}
/* Active/current namaz card */
.pkn-card-active {
  background: linear-gradient(135deg, rgba(26,107,60,.35) 0%, rgba(26,107,60,.2) 100%);
  border: 1px solid rgba(26,107,60,.5);
  box-shadow: 0 0 30px rgba(26,107,60,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Jumu'a card */
.pkn-card-jumua {
  background: linear-gradient(135deg, rgba(139,92,246,.2) 0%, rgba(109,40,217,.15) 100%);
  border: 1px solid rgba(139,92,246,.35);
}
.pkn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pkn-name {
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: 'Hind Siliguri', sans-serif;
}
.pkn-name .ni { font-size: 1rem; }
.pkn-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 50px;
  font-family: 'Manrope', sans-serif;
}
.pkn-b-now  { background: rgba(34,197,94,.2); color: #4ade80; border: 1px solid rgba(34,197,94,.35); }
.pkn-b-next { background: rgba(234,179,8,.2); color: #fbbf24; border: 1px solid rgba(234,179,8,.35); }
.pkn-b-done { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.12); }
.pkn-b-fri  { background: rgba(139,92,246,.2); color: #a78bfa; border: 1px solid rgba(139,92,246,.35); }
.pkn-time-range {
  font-family: 'Manrope', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #f4c430;
  letter-spacing: .02em;
  line-height: 1.1;
}
.pkn-time-range small {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  margin-left: .25rem;
}
.pkn-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: .1rem;
}
.pkn-iqama {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  font-family: 'Hind Siliguri', sans-serif;
}
.pkn-iqama strong {
  color: rgba(255,255,255,.75);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
}
.pkn-detail-link {
  font-size: .65rem;
  color: rgba(244,196,48,.65);
  cursor: pointer;
  font-family: 'Hind Siliguri', sans-serif;
}
.pkn-detail-link:hover { color: #f4c430; }
/* Active card glow line */
.pkn-card-active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1a6b3c, #4ade80, #1a6b3c);
}

/* Bottom info bar */
.pkn-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: .75rem 1.25rem;
}
.pkn-bottom-items {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pkn-bottom-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: .78rem;
  color: rgba(255,255,255,.65);
}
.pkn-bottom-item .icon { font-size: .85rem; opacity: .8; }
.pkn-bottom-time {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: #f4c430;
  font-size: .88rem;
}
.pkn-bottom-note {
  font-family: 'Hind Siliguri', sans-serif;
  font-size: .68rem;
  color: rgba(255,255,255,.35);
  text-align: right;
}

/* Responsive */
@media(max-width:768px){
  .pkw-cards, .pkn-cards { flex-wrap: wrap; overflow-x: visible; }
  .pkw-card, .pkn-card { min-width: calc(50% - .45rem); }
  .pkw-header, .pkn-header { flex-direction: column; }
  .pkw-header-right, .pkn-header-right { flex-direction: column; align-items: flex-start; }
  #pkc-weather-section, #pkc-namaz-section { padding: 1.5rem 0 2rem; }
}
@media(max-width:480px){
  .pkw-card, .pkn-card { min-width: 100%; }
}