/* ═══════ PrayerTimesInfo — Unified Header Widget (matches index.html) ═══════ */

/* Container */
.pti-header-widget{text-align:center;margin-bottom:0.2rem;padding:0.2rem 0.2rem 0.15rem;}

/* Page title row */
.pti-hw-title{font-size:clamp(1rem,4vw,1.8rem);font-weight:900;letter-spacing:0.05em;
  background:linear-gradient(135deg,#FFD700 0%,#FF6B35 25%,#4ECDC4 50%,#45B7D1 75%,#96CEB4 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:ptiGlow 3s ease-in-out infinite alternate;line-height:1.2;margin-bottom:0.1rem;}
@keyframes ptiGlow{0%{filter:drop-shadow(0 0 8px rgba(255,215,0,0.3))}100%{filter:drop-shadow(0 0 16px rgba(255,215,0,0.5))}}

/* Bismillah badge */
.pti-hw-bismillah{display:inline-flex;align-items:center;gap:0.1rem;
  background:rgba(255,255,255,0.08);padding:0.1rem 0.3rem;border-radius:9999px;
  font-weight:700;font-size:clamp(0.5rem,1.3vw,0.7rem);
  border:1px solid rgba(255,255,255,0.15);backdrop-filter:blur(8px);
  box-shadow:0 0 40px hsl(210 100% 50%/0.1);margin:0 auto 0.15rem;color:rgba(255,255,255,0.85);}
.light-theme .pti-hw-bismillah{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:rgba(0,0,0,0.7);}

/* Controls row: language + clock + theme */
.pti-hw-controls{display:flex;align-items:center;justify-content:center;gap:0.3rem;flex-wrap:wrap;margin-bottom:0.1rem;}

/* Language button */
.pti-hw-lang-wrap{position:relative;z-index:51;}
.pti-hw-lang-btn{display:flex;align-items:center;gap:0.2rem;padding:0.25rem 0.5rem;border-radius:9999px;
  border:1.5px solid hsl(210 100% 60%/0.6);
  background:linear-gradient(135deg,hsl(210 100% 50%/0.25),hsl(260 100% 50%/0.15));
  box-shadow:0 0 12px hsl(210 100% 50%/0.2),inset 0 0 8px hsl(210 100% 60%/0.1);
  animation:ptiLangPulse 3s ease-in-out infinite;
  color:#fff;font-size:0.65rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.3s;}
@media(min-width:640px){.pti-hw-lang-btn{padding:0.4rem 0.85rem;font-size:0.75rem;gap:0.3rem;}}
.pti-hw-lang-btn:hover{box-shadow:0 0 20px hsl(210 100% 50%/0.4);transform:scale(1.05);}
@keyframes ptiLangPulse{0%,100%{box-shadow:0 0 12px hsl(210 100% 50%/0.2);}50%{box-shadow:0 0 20px hsl(210 100% 50%/0.35);}}

/* Language menu */
.pti-hw-lang-menu{display:none;position:absolute;left:0;top:100%;margin-top:0.2rem;z-index:50;
  background:rgba(10,10,20,0.97);border:1px solid rgba(255,255,255,0.15);border-radius:0.4rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);min-width:140px;overflow:hidden;
  backdrop-filter:blur(16px);max-height:55vh;overflow-y:auto;}
@media(min-width:640px){.pti-hw-lang-menu{min-width:170px;}}
.pti-hw-lang-menu.open{display:block;}
.pti-hw-lang-opt{width:100%;display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.5rem;
  font-size:0.6rem;color:#fff;background:none;border:none;cursor:pointer;transition:all 0.2s;
  font-family:inherit;text-align:left;}
@media(min-width:640px){.pti-hw-lang-opt{font-size:0.7rem;padding:0.4rem 0.6rem;}}
.pti-hw-lang-opt:hover{background:rgba(255,255,255,0.1);}
.pti-hw-lang-opt.active{background:rgba(100,150,255,0.2);font-weight:700;}
.pti-hw-lang-overlay{display:none;position:fixed;inset:0;z-index:40;}
.pti-hw-lang-overlay.open{display:block;}

/* Clock */
.pti-hw-clock{display:inline-flex;align-items:center;gap:0.2rem;border-radius:0.3rem;padding:0.2rem 0.4rem;
  border:1px solid hsl(40 100% 50%/0.4);backdrop-filter:blur(12px);
  background:linear-gradient(135deg,hsl(30 80% 10%/0.8),hsl(220 30% 8%/0.9));
  box-shadow:0 0 10px hsl(40 100% 50%/0.15);}
@media(min-width:640px){.pti-hw-clock{padding:0.25rem 0.55rem;gap:0.25rem;}}
.pti-hw-time{font-family:monospace;font-size:clamp(0.7rem,2vw,1.05rem);font-weight:900;letter-spacing:0.08em;
  background:linear-gradient(135deg,#FFD700,#FFA500,#FF8C00,#FFD700);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 6px hsl(40 100% 50%/0.4));}
.pti-hw-mosque{font-size:0.65rem;opacity:0.7;animation:ptiMosquePulse 2s cubic-bezier(0.4,0,0.6,1) infinite;}
@keyframes ptiMosquePulse{0%,100%{opacity:0.7}50%{opacity:0.3}}

/* Theme button */
.pti-hw-theme-btn{display:flex;align-items:center;gap:0.15rem;padding:0.2rem 0.4rem;border-radius:0.4rem;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  color:#fff;font-size:0.5rem;font-weight:600;cursor:pointer;transition:all 0.3s;
  backdrop-filter:blur(8px);font-family:inherit;}
@media(min-width:640px){.pti-hw-theme-btn{padding:0.3rem 0.6rem;font-size:0.6rem;gap:0.25rem;}}
.pti-hw-theme-btn:hover{background:rgba(255,255,255,0.15);}

/* Date badge row */
.pti-hw-date-row{display:flex;align-items:center;justify-content:center;gap:0.35rem;flex-wrap:wrap;margin-top:0.15rem;}
.pti-hw-date-badge{display:inline-flex;align-items:center;gap:0.15rem;background:hsl(210 100% 50%/0.9);color:#fff;
  padding:0.12rem 0.3rem;border-radius:0.2rem;font-weight:600;font-size:clamp(0.4rem,1vw,0.55rem);
  border:1px solid rgba(255,255,255,0.2);}
.pti-hw-hijri{font-size:clamp(0.38rem,0.9vw,0.5rem);color:rgba(255,215,0,0.7);font-weight:600;}
.pti-hw-live{color:hsl(40 100% 50%);opacity:0.7;font-size:0.42rem;font-weight:500;}

/* Light theme overrides */
.light-theme .pti-hw-clock{background:linear-gradient(135deg,hsl(40 40% 92%/0.8),hsl(40 30% 88%/0.9));border-color:hsl(40 60% 50%/0.3);}
.light-theme .pti-hw-theme-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:rgba(0,0,0,0.7);}
.light-theme .pti-hw-lang-btn{border-color:hsl(210 80% 50%/0.4);background:linear-gradient(135deg,hsl(210 80% 50%/0.12),hsl(260 80% 50%/0.08));color:hsl(210 60% 30%);}
.light-theme .pti-hw-lang-menu{background:rgba(255,255,255,0.97);border-color:rgba(0,0,0,0.1);}
.light-theme .pti-hw-lang-opt{color:rgba(0,0,0,0.7);}
.light-theme .pti-hw-lang-opt:hover{background:rgba(0,0,0,0.05);}
.light-theme .pti-hw-lang-opt.active{background:rgba(100,150,255,0.12);}
.light-theme .pti-hw-hijri{color:rgba(180,130,0,0.6);}
.light-theme .pti-hw-live{color:hsl(210 100% 45%);}

/* RTL */
[dir="rtl"] .pti-hw-lang-menu{left:auto;right:0;}
[dir="rtl"] .pti-hw-lang-opt{text-align:right;flex-direction:row-reverse;}