@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

:root{
  --gold:#d4af37;
  --obsidian:#0b0d0f;
  --panel:rgba(10,12,14,.66);
  --panel2:rgba(10,12,14,.42);
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --border:rgba(212,175,55,.35);
  --shadow: 0 18px 48px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--obsidian);
  color:var(--text);
  overflow:hidden;
}

body.rtl{direction:rtl; font-family:Tajawal, Montserrat, system-ui, sans-serif;}
body.rtl .location-title{font-family:Amiri, Tajawal, serif;}
body.rtl .search input{direction:rtl; text-align:right;}
body.rtl .search{flex-direction:row-reverse;}
body:not(.rtl) .search input{direction:ltr; text-align:left;}
body:not(.rtl) .search{flex-direction:row;}

.clock-wrapper {
  color: rgba(30,41,59,1);
  font-family: 'Orbitron', sans-serif;
  background: transparent;
}

.main-time {
  display: flex;
  align-items: baseline;
  font-size: 28px;
  font-weight: 500;
  text-shadow: 0 0 15px rgb(182 234 183 / 50%);
  flex-wrap: nowrap;
  flex-direction: row-reverse;
}

/* The Blinking Colon Animation */
.blink {
  animation: flicker 1s steps(2) infinite;
  padding: 0 5px;
}

@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

.meta-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
}

#seconds {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9; /* Slightly dimmer to emphasize main time */
}

#ampm {
  font-size: 18px;
  line-height: 1.2;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  padding:10px 14px;
  background:#000;
  color:#fff;
  z-index:9999;
  border-radius:10px;
}
.skip-link:focus{left:12px; top:12px; outline:2px solid var(--gold);}

#map{
  position:fixed; 
  inset:0; 
  z-index:1;
  filter: saturate(1.1) contrast(1.05);
  opacity: 1;
}

.ui{
  position:fixed;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:clamp(12px, 3vw, 22px);
  gap:clamp(10px, 2vw, 18px);
  pointer-events:none; /* map stays interactive */
}

.top-controls{
  width:min(980px, 100%);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
}

.search{
  display:flex;
  align-items:center;
  gap:0;
  width:min(520px, 100%);
  padding:3px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.search input{
  flex:1;
  height:44px;
  padding:0 14px;
  background:transparent;
  color:var(--text);
  border:0;
  outline:none;
  font-size:14px;
}
.search input::placeholder{color:rgba(255,255,255,.55);}
.search-btn{
  width:46px;
  height:44px;
  border:0;
  background:transparent;
  color:var(--gold);
  font-size:18px;
  cursor:pointer;
}

.pill{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  letter-spacing:.2px;
}
.pill:hover{border-color:rgba(212,175,55,.65)}
.pill:focus{outline:2px solid rgba(212,175,55,.7); outline-offset:2px;}
.pill.ghost{background:var(--panel2)}

select.pill{
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 32px;
  cursor:pointer;
}

select.pill option{
  background:var(--obsidian);
  color:var(--text);
}


.clock-card{
  padding:18px 16px 14px;
  max-width: 400px;
  margin: 0 auto;
}

.location{
  text-align:center;
  margin-bottom:12px;
  min-height:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.location-title{
  color:rgba(30,41,59,1);
  font-weight:800;
  font-size:clamp(16px, 3.2vw, 20px);
}
.location-sub{
  margin-top:4px;
  color:#777;
  font-size:12px;
}

.clock-wrap{display:flex; justify-content:center;}
.clock{
  width:clamp(180px, 52vw, 280px);
  height:clamp(180px, 52vw, 280px);
  border-radius:50%;
  position:relative;
/*  border:4px solid rgba(30,41,59,1);*/
}

.hand{
  position:absolute;
  left:50%;
  bottom:50%;
  transform-origin:bottom center;
  border-radius:10px;
}
.hour{width:6px; height:25%; background:rgba(30,41,59,1); margin-left:-3px; z-index:3;}
.minute{width:4px; height:36%; background:var(--gold); margin-left:-2px; z-index:4;}
.second{width:2px; height:44%; background:#ff4d4d; margin-left:-1px; z-index:5;}
.center-cap{
  position:absolute;
  width:10px; height:10px;
  background:var(--gold);
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:10;
}

/* simple hour markings */
.clock::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;

  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(0, 27, 65, 0.35) 0deg 2deg,   /* pip width */
      transparent 2deg 30deg           /* gap (30° per hour) */
    );

  /* keep pips near the edge */
  mask: radial-gradient(
    circle,
    transparent 0 58%,
    #000 60%
  );

  opacity: 0.9;
}


.readouts{
  margin-top:14px; 
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
}

.date-footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9;
  pointer-events:auto;
  background:var(--panel);
  border-top:1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
}

.date-footer .dates{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:12px 20px;
  margin:0;
}

.date-footer .hijri{
  color:var(--text);
  font-size:14px;
  font-weight:500;
}

.date-footer .greg{
  color:var(--muted);
  font-size:13px;
}

.bottom-actions{
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  pointer-events:auto;
}

.actions-pill{
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  gap:0;
  justify-content:center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

.action-btn{
  height:100%;
  padding:0 12px;
  background:transparent;
  color:var(--text);
  border:0;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.2px;
  font-size:18px;
  transition:color 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.action-btn i{
  font-size:18px;
  line-height:1;
}

.action-btn:hover{color:var(--gold)}
.action-btn:focus{outline:2px solid rgba(212,175,55,.7); outline-offset:2px;}

.action-divider{
  width:1px;
  height:24px;
  background:var(--border);
  margin:0 8px;
}

/* Make Leaflet UI match the overlay */
.leaflet-container{background:#f0f0f0;}
.leaflet-control-attribution{display:none;}

/* Touch optimization */
.search input, .pill, .action-btn, .search-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Better touch targets */
.search-btn, .action-btn {
  min-width: 44px;
  min-height: 44px;
}

@media (hover: none) and (pointer: coarse) {
  .pill:hover, .action-btn:hover {
    color: var(--text);
  }
  
  .pill:active, .action-btn:active {
    color: var(--gold);
    transform: scale(0.98);
  }
}

/* Mobile-specific styles */
@media (max-width: 480px) {
  .ui{
    padding:clamp(8px, 2vw, 16px);
    gap:clamp(8px, 1.5vw, 14px);
  }
  
  .top-controls{
    width:100%;
    gap:8px;
  }
  
  .search{
    width:100%;
  }
  
  .search input{
    height:40px;
    font-size:16px; /* Prevents zoom on iOS */
  }
  
  .search-btn{
    width:40px;
    height:40px;
    font-size:16px;
  }
  
  .pill{
    height:36px;
    font-size:13px;
  }
  
  .clock-card{
    padding:14px 12px 12px;
    margin: 0 8px;
  }
  
  .clock{
    width:clamp(140px, 45vw, 220px);
    height:clamp(140px, 45vw, 220px);
  }
  
  .action-btn{
    font-size:16px;
    padding:0 10px;
  }
  
  .action-btn i{
    font-size:16px;
  }
  
}

@media (max-height: 680px){
  .clock-card{padding:14px 14px 12px;}
  .bottom-actions{
    bottom:76px;
  }
}