/* ===========================
   Apple-Style Compact UI
   Ultra Prayer System
   =========================== */

:root{
  --bg: #0f1115;
  --glass: rgba(255,255,255,.08);
  --glass-strong: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.18);
  --text:#ffffff;
  --muted:rgba(255,255,255,.60);
  --muted2:rgba(255,255,255,.45);
  --accent:#0a84ff;
  --ok:#30d158;
  --warn:#ffd60a;
  --danger:#ff453a;
  --territory: #f5f5f733;
  --radius:12px;
  --radius-sm:8px;
}

/* ===== Root ===== */
.ups-shell{
  margin:0 auto;
  padding:10px;
  background: radial-gradient(1200px 800px at 30% -10%, rgba(0,217,245,.25), transparent),
              radial-gradient(1200px 800px at 90% 10%, rgba(0,245,160,.18), transparent),
              radial-gradient(1200px 800px at 50% 120%, rgba(255,215,0,.12), transparent),
              var(--bg);
  border-radius:22px;
  font-family: "BB Text";
  color:var(--text);
  line-height: 20px;
}

/* ===== Cards ===== */


.ups-card{
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px;
  margin-bottom:12px;
}

.ups-card.ups-calendar {
    padding:0;
}

.ups-export-title {
    font-family: "BB Text Semibold";
}

/* ===== Typography ===== */
.ups-k{
  font-size:10px;
  font-weight: ;
  letter-spacing:.03em;
  color:var(--muted2);
}
.ups-s{
  font-size:12px;
  color:var(--muted2);
}
.ups-v{
  font-size:18px;
  font-weight:600;
}
.ups-city{
  font-size:16px;
  font-family: "BB Text Semibold";
  line-height:1.1;
}

/* ===== Inputs ===== */
.ups-input{
  width:100%;
  padding:8px 10px !important;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  border:1px solid var(--border);
  color:var(--text);
  font-size:12px;
}
.ups-input::placeholder{color:var(--muted2);}
.ups-input:focus{outline:none;border-color:var(--accent);}

/* ===== Buttons ===== */

button.ups-btn{
  padding: 3px 8px;
  border-radius: 5px;
  font-family: "BB Text Semibold";
}

.ups-btn{
  border-radius: var(--radius-sm);
  font-size:12px;
  font-weight:600;
  background: var(--glass-strong);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
}

.ups-btn-primary, .ups-btn-secondary{
  padding: 0 6px;
  border:none;
}

.ups-btn-primary{
  background: linear-gradient(180deg,#0a84ff,#0060df);
}
.ups-btn-secondary{
    background: linear-gradient(180deg,#30d158,#1f9d55);
}

button.btn-territory {
    background: var(--territory);
}



/* ===== Layout Helpers ===== */
.ups-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ups-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ups-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
@media(max-width:360px){
  .ups-grid3{grid-template-columns:1fr;}
  .ups-row{grid-template-columns:1fr;}
}

/* ===== Top Header ===== */
.ups-top-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.ups-top-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* ===== Sehri / Iftar ===== */
.ups-today .ups-v{
  font-size:20px;
}
.ups-count{
  margin-top:6px;
  padding:8px;
  border-radius: var(--radius);
  background: var(--glass-strong);
}
.ups-count-main{
  font-size:12px;
  font-weight: ;
}
.ups-count-sub{
  font-size:10px;
  color:var(--muted2);
}

/* ===== Prayer Grid ===== */
.ups-prayers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:6px;
}
@media(max-width:360px){
  .ups-prayers{grid-template-columns:1fr;}
}
.ups-prayer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  font-size:12px;
}
.ups-prayer b{
    font-family: "BB Text Semibold";
    font-weight:600;
}
.ups-prayer span{font-family: "BB Text Semibold"; font-weight:600;}

/* ===== Hijri & Ramadan ===== */
.ups-hijri-main{
  font-size:14px;
  font-family: "BB Text Semibold";
  font-weight: ;
}
.ups-ramadan-day{
  font-size:12px;
  font-family: "BB Text Semibold";
  font-weight: ;
}
.ups-ramadan-progress{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.ups-ramadan-bar{
  height:100%;
  background: linear-gradient(90deg,#ffd60a,#ff9f0a);
}

/* ===== Calendar ===== */
.ups-cal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px;
}

.ups-cal-title{
  font-size:14px;
  font-family: "BB Text Semibold";
  font-weight:600;
}
.ups-cal-btn{
  padding:6px 8px;
  border-radius:8px;
  font-size:12px;
  background:var(--glass-strong);
  border:1px solid var(--border);
  color:var(--text);
}

.ups-cal-list {
    overflow: auto;
    height: 340px;
    padding: 0 12px 12px;
}

.ups-cal-list > .ups-day:not(:last-child) {
    margin-bottom: 6px;
}


.ups-day{
  display:grid;
  grid-template-columns: 88px 1fr auto;
  gap:6px;
  padding:6px 8px;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
}
.ups-day.today{outline:2px solid #00dd22;}
.ups-day-num{font-size:14px;font-weight:normal;}
.ups-day-mon{font-size:12px;color:var(--muted2);}
.ups-day-times{font-size:12px;line-height:1.4;}
.ups-day-fast{font-size:12px;color:var(--muted);}

.ups-day.ramadan{background: linear-gradient(90deg, #00662288, #00508088);}

/* ===== Alerts ===== */
.ups-alert-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

@media(max-width:360px){
  .ups-alert-grid{grid-template-columns:1fr;}
}
.ups-alert-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  font-size:12px;
  font-weight:600;
}

/* ===== Qibla ===== */
.ups-qibla-main{
  display:flex;
  flex-direction: column;
  justify-content:space-between;
}


.ups-qibla-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.ups-qibla-deg{
  font-size:22px;
  font-weight:600;
}



/* =========================
   Ultra Real Compass
   ========================= */

.ups-compass{
  position:relative;
  width: 220px;
  height: 220px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 55%, rgba(0,0,0,.45) 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.45),
    0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Tick marks using conic gradient */
.ups-compass-ticks{
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,.9) 0deg 1deg,
      transparent 1deg 5deg,
      rgba(255,255,255,.5) 5deg 6deg,
      transparent 6deg 10deg
    );
  mask:
    radial-gradient(circle, transparent 60%, black 61%);
}

/* Degree numbers */
.ups-compass-degrees{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,.7);
}
.ups-compass-degrees span{
  position:absolute;
  transform-origin:center center;
}

/* Cardinal points */
.ups-compass-cardinal{
  position:absolute;
  font-size:12px;
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

 


/* Qibla arrow */
.ups-compass-arrow{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:42px solid #ff453a;
  transform-origin:50% 70%;
  transform:translate(-50%,-70%);
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,.55));
}

/* Center pivot */
.ups-compass::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(255,255,255,.8);
}





@media only screen and (max-width: 767px) {
    .ups-compass {
        width: calc(100vw - 96px);
        height: calc(100vw - 96px);
    }
}





.ups-compass-arrow{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:50% 60%;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:28px solid var(--danger);
  transform: translate(-50%,-60%);
}

/* ===== Print ===== */
@media print{
  .ups-shell{background:#fff;color:#000;}
  .ups-card{background:#fff;border:1px solid #ccc;}
}











/* =========================
   REAL ROTATING COMPASS
   ========================= */

.ups-compass{
  position:relative;
  width:220px;
  height:220px;
  border-radius:50%;
  background: radial-gradient(circle at center,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.05) 55%,
      rgba(0,0,0,.55) 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 0 25px rgba(0,0,0,.6),
    0 15px 40px rgba(0,0,0,.45);
  overflow:hidden;
}

/* RESPONSIVE SIZE */
@media only screen and (max-width:767px){
  .ups-compass{
    width:calc(100vw - 80px);
    height:calc(100vw - 80px);
  }
}

/* ROTATING DIAL */
.ups-compass-dial{
  position:absolute;
  inset:0;
  border-radius:50%;
  transition: transform .4s ease-out;
}

.ups-compass-dial{
  transform-origin: 50% 50%;
  will-change: transform;
}


/* 72 tick marks (every 5 degrees) */
.ups-compass-ticks{
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      rgba(255,255,255,.8) 0deg 1deg,
      transparent 1deg 5deg
    );
  -webkit-mask:
    radial-gradient(circle, transparent 70%, black 71%);
  mask:
    radial-gradient(circle, transparent 70%, black 71%);
}


/* Degree numbers auto positioning */
.ups-compass-degrees{
  position:absolute;
  inset:0;
  font-size:clamp(10px,1.8vw,12px);
  font-weight:600;
  color:rgba(255,255,255,.75);
}

.ups-compass-degrees span{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:0 -42%;
}

/* Cardinals */
.ups-compass-cardinal{
  position:absolute;
  font-weight:700;
  font-size:clamp(12px,2.2vw,16px);
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
 

/* FIXED NEEDLE (Watch Second Hand Style) */
.ups-compass-arrow{
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:48%;
  background: linear-gradient(to top, #ff453a, #ff0000);
  transform:translate(-50%,-100%);
  border-radius:2px;
  box-shadow:0 0 10px rgba(255,0,0,.6);
}

/* Center pivot */
.ups-compass::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(255,255,255,.8);
}

.ups-compass-dial{
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform;
}

.ups-qibla-target {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
}

.ups-qibla-target svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}





.ups-compass-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 42%;
  background: #e11d48;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  z-index: 6;
}





.ups-qibla-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ups-compass {
  position: relative;
  z-index: 1;
}

.ups-qibla-target {
  position: absolute;
 
  z-index: 5;
  pointer-events: none;
}

.ups-compass-arrow {
  z-index: 6;
}

.ups-qibla-right button {
  z-index: 10;
}



.ups-qibla-locked {
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
  transform-origin: 50% 50%;
}



.ups-compass{
  position:relative;
  width:220px;
  height:220px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at center,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.05) 55%,
    rgba(0,0,0,.55) 100%);
}

.ups-compass-dial{
  position:absolute;
  inset:0;
  border-radius:50%;
  will-change: transform;
}

.ups-compass-ticks{
  position:absolute;
  inset:6%;
  border-radius:50%;
  background: repeating-conic-gradient(
    rgba(255,255,255,.8) 0deg 1deg,
    transparent 1deg 5deg
  );
  mask: radial-gradient(circle, transparent 70%, black 71%);
}

.ups-compass-degrees{ position:absolute; inset:0; pointer-events:none; }
.ups-compass-degrees span{
  position:absolute;
  transform: translate(-50%, -50%);
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.75);
}

.ups-compass-cardinal{
  position:absolute;
  font-weight:700;
  font-size:14px;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
 
/* fixed needle */
.ups-compass-arrow{
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:42%;
  background:#e11d48;
  transform: translate(-50%, -100%);
  z-index: 6;
}

.ups-qibla-target{
  position:absolute;
  top:6px;
  left:50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events:none;
}

.ups-compass::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
}









.ups-compass-degrees{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ups-compass-degrees span{
  position:absolute;
  transform: translate(-50%, -50%);
  transform-origin: center;
}









.ups-compass{
  position:relative;
  width:220px;
  height:220px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at center,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.05) 55%,
    rgba(0,0,0,.55) 100%);
}

.ups-compass-dial{
  position:absolute;
  inset:0;
  border-radius:50%;
  will-change: transform;
}

.ups-compass-ticks{
  position:absolute;
  inset:6%;
  border-radius:50%;
  background: repeating-conic-gradient(
    rgba(255,255,255,.8) 0deg 1deg,
    transparent 1deg 5deg
  );
  mask: radial-gradient(circle, transparent 70%, black 71%);
}

.ups-compass-degrees{ position:absolute; inset:0; pointer-events:none; }
.ups-compass-degrees span{
  position:absolute;
  transform: translate(-50%, -50%);
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.75);
}

.ups-compass-cardinal{
  position:absolute;
  font-weight:700;
  font-size:14px;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
 

/* fixed needle */
.ups-compass-arrow{
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:42%;
  background:#e11d48;
  transform: translate(-50%, -100%);
  z-index: 6;
}

.ups-qibla-target{
  position:absolute;
  top:6px;
  left:50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events:none;
  margin-bottom: 0;
}


.ups-qibla{
  margin-bottom: 0;
}

.ups-compass::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.ups-day-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.ups-ramadan-badge {
    padding: 1px 4px;
    border-radius: 4px;
    background: #fff2;
    margin-left: 5px;
}