/* =====================================================
   TASBEEH — THEME AWARE (LIGHT / DIM / DARK)
===================================================== */

/* =============================
   BASE TOKENS (SHARED)
============================= */
:root{
  --gold:#bfa742;

  --radius-lg:1.4rem;
  --radius-md:.9rem;
  --radius-sm:.6rem;
  
  --font-quran: "Amiri Quran", serif;
  --font-en: Poppins,system-ui,-apple-system;
}

/* =============================
   THEME VARIABLES
============================= */

/* LIGHT */
body.light{
  --bg: #fdfdfd;
  --card: #ffffff;
  --card-2: #f3f4f6;

  --text:#111827;
  --muted:#6b7280;

  --border:rgba(0,0,0,.08);
  --gold-soft:rgba(191,167,66,.18);
}

/* DIM */
body.dim{
  --bg:#111827;
  --card:#1f2937;
  --card-2:#273449;

  --text:#e5e7eb;
  --muted:#9ca3af;

  --border:rgba(255,255,255,.08);
  --gold-soft:rgba(250,204,21,.18);
}

/* DARK */
body.dark{
  --bg:#010824;
  --card:#020617;
  --card-2:#02091f;

  --text:#e5e7eb;
  --muted:#9ca3af;

  --border:rgba(255,255,255,.06);
  --gold-soft:rgba(250,204,21,.16);
}

/* =============================
   BASE
============================= */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  transition:background .3s,color .3s;
}

button,input{
  font-family:inherit;
  outline:none;
}

/* =============================
   APP WRAP
============================= */
.tasbeeh-app{
  width:100%;
  max-width:420px;
  min-height:100vh;
  padding:1.1rem 1.1rem 2.2rem;
  display:flex;
  flex-direction:column;
}

/* =============================
   HEADER
============================= */

.tasbeeh-header{
  position:relative;
}

.tasbeeh-header .click{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.tasbeeh-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.2rem;
}

.tasbeeh-header h1{
  font-size:1.15rem;
  font-weight:600;
}

.zahra-switch{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--muted);
  padding:.4rem .9rem;
  border-radius:999px;
  font-size:.72rem;
  cursor:pointer;
  transition:.25s ease;
  
  font-family: var(--font-en);
}


.click_heading{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--gold);
  padding:.4rem .9rem;
  border-radius:999px;
  font-size:.72rem;
  cursor:pointer;
  transition:.25s ease;
  font: var(--font-quran);
}
.click{
  background:var(--card);
  border:1px solid var(--border);
  font-family: var(--font-en);
  color:var(--muted);
  padding:.4rem .9rem;
  border-radius:999px;
  font-size:.72rem;
  cursor:pointer;
  transition:.25s ease;
  text-align: center;
}

.zahra-switch.active{
  background:var(--gold-soft);
  color:var(--gold);
  border-color:var(--gold);
}

/* =============================
   ZAHRA PANEL
============================= */
.zahra-panel{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem .9rem;
  margin-bottom:1.1rem;
  opacity:.55;
  transition:.3s ease;
}

.zahra-panel.active{
  opacity:1;
}

.zahra-title{
  text-align:center;
  font-family: var(--font-en);
  font-size:.8rem;
  color:var(--gold);
  margin-bottom:.8rem;
}

.zahra-step{
  text-align:center;
  padding:.55rem 0;
  border-radius:.75rem;
}

.zahra-step + .zahra-step{
  margin-top:.35rem;
}

.zahra-step.active{
  background:var(--gold-soft);
}

.zahra-step .ar{
  font-size:1.25rem;
  font-weight:600;
  
  font-family: var(--font-quran);
}

.zahra-step .en{
  font-size:.72rem;
  color:var(--muted);
  
  font-family: var(--font-en);
}

/* =============================
   COUNTER
============================= */
.counter-section{
  text-align:center;
  margin-top:.8rem;
}

.progress-label{
  font-size:.82rem;
  color:var(--muted);
  margin-bottom:.8rem;
}

/* =============================
   TASBEEH BUTTON
============================= */
.tasbeeh-button{
  width:285px;
  height:285px;
  border-radius:50%;
  
  font-family: var(--font-en);
  border:none;
  background:
    radial-gradient(
      circle at top,
      var(--card) 55%,
      color-mix(in srgb, var(--gold) 18%, transparent)
    );
  box-shadow:
    0 22px 50px rgba(0,0,0,.18);
  display:flex;
  justify-content:center;
  align-items:center;
  margin:auto;
  cursor:pointer;
  transition:transform .08s ease;
}

.tasbeeh-button:active{
  transform:scale(.96);
}

#countValue{
  font-size:4.4rem;
  font-weight:600;
  color:var(--gold);
}

/* =============================
   PROGRESS BAR
============================= */
.progress-bar{
  width:100%;
  height:7px;
  background:rgba(0,0,0,.08);
  border-radius:999px;
  margin-top:1.1rem;
  overflow:hidden;
}

body.dim .progress-bar,
body.dark .progress-bar{
  background:rgba(255,255,255,.08);
}

.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--gold),#e7d38b);
  transition:.25s ease;
}

/* =============================
   PRESETS
============================= */
.presets-section{
  margin-top:1.4rem;
}

.presets{
  display:flex;
  gap:.5rem;
}

.preset-btn{
  flex:1;
  padding:.48rem 0;
  border-radius:.75rem;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted);
  font-size:.78rem;
  cursor:pointer;
  
  font-family: var(--font-en);
}

.preset-btn.active{
  border-color:var(--gold);
  color:var(--gold);
  background:var(--gold-soft);
}

/* =============================
   CUSTOM TARGET
============================= */
.custom-target{
  margin-top:.65rem;
  display:flex;
  gap:.45rem;
}

.custom-target input{
  flex:1;
  padding:.48rem;
  border-radius:.7rem;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:.78rem;
  
  font-family: var(--font-en);
}

.custom-target button{
  padding:.48rem .85rem;
  border:none;
  border-radius:.7rem;
  background:var(--gold);
  color:#fff;
  font-size:.75rem;
  cursor:pointer;
  
  font-family: var(--font-en);
}

/* =============================
   ACTIONS
============================= */
.actions{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:1.3rem;
}

.reset-btn,
.history-toggle{
  padding:.45rem 1.1rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted);
  font-size:.72rem;
  
  font-family: var(--font-en);
}

/* =============================
   HISTORY
============================= */
.history-panel{
  margin-top:1.1rem;
  border-top:1px solid var(--border);
  padding-top:.8rem;
  
  font-family: var(--font-en);
}

.history-panel ul{
  list-style:none;
  padding:0;
  margin:0;
}

.history-panel li{
  padding:.35rem 0;
  border-bottom:1px dashed var(--border);
  font-size:.78rem;
  color:var(--muted);
  
  font-family: var(--font-en);
}

.hidden{
  display:none;
}




/* =====================================================
   RESPONSIVE OVERRIDES (SAFE — NO DESIGN CHANGES)
===================================================== */

/* Small phones */
@media (max-width:360px){
  .tasbeeh-button{
    width:240px;
    height:240px;
  }
  #countValue{
    font-size:3.6rem;
  }
}

/* Tablets (iPad) */
@media (min-width:600px){
  .tasbeeh-app{
    max-width:520px;
  }
  .tasbeeh-button{
    width:320px;
    height:320px;
  }
  #countValue{
    font-size:5rem;
  }
}

/* Desktop */
@media (min-width:1024px){
  body{
    align-items:center;
  }
  .tasbeeh-app{
    max-width:620px;
    min-height:auto;
  }
  .tasbeeh-button{
    width:360px;
    height:360px;
  }
  #countValue{
    font-size:5.8rem;
  }
}