/* Vaktija Stylesheet (cleaned & annotated) */
:root{
  --bg:#0b0f13; --card:#0e171a; --text:#e6f1ef; --muted:#9ec4be; --accent:#19a493; --ok:#2aa84a; --warn:#c98b18;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b0f13,#0b1616);color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:900px;margin:0 auto;padding:16px}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#0b3d3a;position:sticky;top:0;z-index:10}
.app-header h1{margin:0;font-size:20px}
.status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.select{appearance:none;background:var(--card);color:var(--text);border:1px solid #203033;border-radius:14px;padding:8px 12px}
.input{appearance:none;background:var(--card);color:var(--text);border:1px solid #203033;border-radius:12px;padding:8px 12px}
.input.large{font-size:16px;padding:12px 14px}
.btn{border:1px solid #20413f;background:var(--accent);color:#052c29;padding:8px 12px;border-radius:12px;cursor:pointer;font-weight:600}
.btn-outline{background:transparent;color:var(--text);border-color:#2f3f42}
.btn-small{padding:6px 10px;font-size:14px;border-radius:10px}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:transparent;color:var(--text);border-color:#2f3f42}
.badge{padding:4px 8px;border-radius:999px;background:#213638;border:1px solid #335c5f;color:var(--muted);font-size:12px}
.current-loc{background:#123c38;border:1px solid #2a6e66;color:#e9fffb;padding:8px 12px;border-radius:999px;font-weight:800;letter-spacing:.2px}
.app-footer{opacity:.7;text-align:center;padding:24px}

.now-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid #1d2a2d;border-radius:16px;padding:16px;margin:16px 0}
.today{color:var(--muted);font-size:14px}
.next{font-size:18px;font-weight:700}
.countdown{font-variant-numeric:tabular-nums;font-size:32px;font-weight:800}

.times-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;min-height:180px}
.time-card{background:var(--card);border:1px solid #1d2a2d;border-radius:16px;padding:14px;position:relative}
.time-card h3{margin:0 0 6px 0;font-size:14px;font-weight:600;color:var(--muted)}
.time{font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}
.chip{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid #2b3e41}
.chip.upcoming{background:#11302d;color:#9be3d8}
.chip.now{background:#2e1a12;color:#ffd8b0;border-color:#7d4b15}
.chip.current{background:#143022;color:#a9f0c7;border-color:#2b5f47}
.chip.past{background:#1a2326;color:#b9c5c8;border-color:#2b3e41;opacity:.8}

.time-card.past{opacity:.6}
.time-card.now{outline:2px solid var(--warn);}
.time-card.current{outline:2px solid var(--ok);}

/* Loading overlay */
.loader{position:fixed;inset:0;background:rgba(5,10,12,.7);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:9990}
.loader.show{display:flex}
.loader-box{background:#0e171a;border:1px solid #1d2a2d;border-radius:16px;padding:18px 20px;min-width:260px;text-align:center}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #2a3b3e;border-top-color:var(--accent);animation:spin 1s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{color:var(--muted);font-size:14px}

/* Skeletons */
.skel{position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* iOS toggle */
.switch{display:inline-flex;align-items:center;gap:10px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:relative;width:46px;height:28px;background:#2b3b3e;border-radius:999px;transition:.2s;border:1px solid #3a4a4d;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.switch .slider::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.switch input:checked + .slider{background:linear-gradient(180deg,#38d39f,#19a493)}
.switch input:checked + .slider::after{transform:translateX(18px)}
.switch-label{font-size:14px;color:var(--muted)}

/* Modal + Accordion */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:9995}
.modal.show{display:flex}
.modal-box{background:#0e171a;border:1px solid #1d2a2d;border-radius:16px;max-width:1150px;width:94%;max-height:82vh;overflow:auto;padding:16px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.modal-actions{display:flex;gap:8px}
.loc-list{display:flex;flex-direction:column;gap:12px}
.country{border:1px solid #1d2a2d;border-radius:14px;background:#0f1b1d}
.country summary{list-style:none;cursor:pointer;padding:12px 14px;border-radius:14px;display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.country summary:hover{background:#122427}
.country[open] summary{background:#132c2a}
.flag{font-size:20px}
.grid-cities{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 12px 12px}
.city-btn{display:inline-block;text-align:center;background:#152427;border:1px solid #264449;border-radius:16px;padding:8px 12px;cursor:pointer;color:#eaf8f6;font-weight:700;letter-spacing:.2px}
.city-btn:hover,.city-btn:focus{border-color:#3b6a71;outline:none}


/* === State styles for prayer cards === */
.time-card{ transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease; }
.time-card .chip{ transition: background .25s ease, color .25s ease; }

/* Aktuell gerade JETZT (kleines Zeitfenster um Start) */
.time-card.now{
  border: 2px solid var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 25%, transparent);
}

/* Laufend (zwischen Start und nächstem Namaz), außer Izlazak */
.time-card.current{
  border: 2px solid var(--accent);
}

/* Bereits vorbei */
.time-card.past{
  border: 1px solid var(--muted);
  opacity: .4;
}

/* Demnächst */
.time-card.upcoming{
  border: 1px solid var(--text);
}