/* ==========================================================================
   Tasabeih UI Kit (Dark + Gold + Green) — Theme-agnostic, Namespaced
   Namespace: .tasabeih
   ========================================================================== */

/* 1) Base variables (يمكن override من لوحة الإعدادات عبر helpers.php) */
.tasabeih{
  /* fallback palette if options not set */
  --tb-primary: var(--tb-primary, #0b1220); /* deep navy */
  --tb-accent:  var(--tb-accent,  #d4af37); /* gold */
  --tb-green:   var(--tb-green,   #22c55e); /* green */
  --tb-bg:      var(--tb-bg,      #070a10); /* page background */
  --tb-surface: var(--tb-surface, #0b1220); /* cards */
  --tb-surface2:var(--tb-surface2,#0f1a2e); /* elevated */
  --tb-text:    var(--tb-text,    #e8edf7); /* main text */
  --tb-muted:   var(--tb-muted,   rgba(232,237,247,.68));
  --tb-border:  var(--tb-border,  rgba(212,175,55,.18));
  --tb-border2: var(--tb-border2, rgba(34,197,94,.12));
  --tb-shadow:  0 10px 28px rgba(0,0,0,.32);

  --tb-radius:  var(--tb-radius, 18px);
  --tb-font-base: var(--tb-font-base, 16px);

  font-size: var(--tb-font-base);
  color: var(--tb-text);
  direction: rtl;

  /* make it visually independent from theme background */
  background: transparent;
}

/* 2) Typography */
.tasabeih .tb-title{
  margin: 0;
  font-size: 1.15em;
  letter-spacing: .2px;
}
.tasabeih .tb-item-title{
  margin: 0;
  font-size: 1.02em;
}
.tasabeih .tb-text{
  margin: 10px 0;
  line-height: 2.05;
  color: var(--tb-text);
}
.tasabeih .tb-muted{ color: var(--tb-muted); }
.tasabeih .tb-small{ font-size: .86em; }

/* 3) Layout helpers */
.tasabeih .tb-row{ display:flex; align-items:center; }
.tasabeih .tb-between{ justify-content:space-between; }
.tasabeih .tb-gap{ gap: 10px; }
.tasabeih .tb-wrap{ flex-wrap: wrap; }
.tasabeih .tb-pad{ padding: 14px; }
.tasabeih .tb-divider{
  height:1px;
  background: rgba(212,175,55,.12);
  margin: 14px 0;
}

/* 4) Cards */
.tasabeih .tb-card{
  background: linear-gradient(180deg, var(--tb-surface) 0%, rgba(11,18,32,.88) 100%);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  margin: 12px 0;
  position: relative;
  overflow: hidden;
}

/* subtle gold edge */
.tasabeih .tb-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: radial-gradient(900px 220px at 20% 0%, rgba(212,175,55,.14), transparent 60%),
              radial-gradient(900px 220px at 80% 0%, rgba(34,197,94,.10), transparent 58%);
  opacity: .9;
}

/* 5) Inputs */
.tasabeih .tb-input{
  width: 100%;
  padding: 11px 12px;
  border-radius: calc(var(--tb-radius) - 6px);
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(7,10,16,.55);
  color: var(--tb-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tasabeih .tb-input::placeholder{ color: rgba(232,237,247,.45); }

.tasabeih .tb-input:focus{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

.tasabeih .tb-input-sm{
  width: 92px;
  padding: 9px 10px;
}

/* 6) Buttons */
.tasabeih .tb-btn{
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(7,10,16,.35);
  color: var(--tb-text);
  border-radius: calc(var(--tb-radius) - 6px);
  padding: 9px 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select: none;
}

.tasabeih .tb-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.35);
  background: rgba(15,26,46,.55);
}

.tasabeih .tb-btn:active{
  transform: translateY(0);
}

.tasabeih .tb-btn-primary{
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(212,175,55,.70));
  color: #0b1220;
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 10px 18px rgba(212,175,55,.10);
  font-weight: 700;
}

.tasabeih .tb-btn-primary:hover{
  box-shadow: 0 12px 22px rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.7);
}

.tasabeih .tb-btn-ghost{
  background: transparent;
}

/* Green secondary action */
.tasabeih .tb-btn-green{
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(34,197,94,.70));
  color: #071010;
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 10px 18px rgba(34,197,94,.10);
  font-weight: 700;
}

/* 7) Links */
.tasabeih .tb-link{
  text-decoration: none;
  color: rgba(212,175,55,.95);
  font-size: .92em;
  border-bottom: 1px dashed rgba(212,175,55,.35);
  padding-bottom: 1px;
}
.tasabeih .tb-link:hover{
  color: rgba(34,197,94,.95);
  border-bottom-color: rgba(34,197,94,.45);
}

/* 8) Favorites icon */
.tasabeih .tb-fav{
  border: 0;
  background: transparent;
  font-size: 1.2em;
  cursor: pointer;
  color: rgba(212,175,55,.85);
  transition: transform .12s ease, color .12s ease;
}
.tasabeih .tb-fav:hover{
  transform: scale(1.05);
  color: rgba(34,197,94,.95);
}

/* 9) Lists */
.tasabeih .tb-list{
  display: grid;
  gap: 10px;
}
@media (min-width: 720px){
  .tasabeih .tb-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 10) Items */
.tasabeih .tb-item{
  border: 1px solid rgba(212,175,55,.18);
}
.tasabeih .tb-item .tb-muted{
  color: rgba(232,237,247,.58);
}

/* 11) Counter panel */
.tasabeih .tb-counter{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(212,175,55,.22);
}
.tasabeih .tb-counter strong{ color: rgba(34,197,94,.95); }

/* 12) Inline label */
.tasabeih .tb-inline{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: .92em;
}

/* 13) Prayer table */
.tasabeih .tb-prayer-list > div{
  padding: 10px 0;
  border-bottom: 1px solid rgba(212,175,55,.10);
}

/* 14) PDF viewer wrap */
.tasabeih .tb-pdf-wrap{
  position: relative;
  overflow: auto;
  text-align: center;
  background: linear-gradient(180deg, rgba(7,10,16,.65), rgba(11,18,32,.65));
  border: 1px solid rgba(212,175,55,.18);
}
.tasabeih .tb-pdf-canvas{
  width: 100%;
  height: auto;
  border-radius: calc(var(--tb-radius) - 6px);
}

/* 15) Nice spacing reset for paragraphs inside cards */
.tasabeih p{ margin: 0; }
.tasabeih .tb-card p + p{ margin-top: 8px; }