/* —— Additions for Dua card & Quran reader —— */
.dua-card .arabic{font-size:1.3rem; line-height:1.6; direction:rtl; text-align:right}
.dua-card .translit{margin-top:6px; color:#d9eee6}
.dua-card .trans{margin-top:2px; color:var(--muted)}
.ayah{padding:12px;border-bottom:1px dashed var(--border)}
.ayah .a-ar{direction:rtl;text-align:right;font-size:1.3rem; line-height:1.7}
.ayah .a-tr{margin-top:6px;color:#d7efe6}
.ayah .a-es{margin-top:6px;color:var(--muted)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
select,input[type="search"]{flex:1 1 220px}
/* ===== Auth (Login / Register) ===== */
.auth-body{
  /* Fondo con patrón islámico suave */
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(14,164,114,.10), transparent 60%),
    radial-gradient(700px 400px at 120% 0%, rgba(212,175,55,.06), transparent 55%),
    url('assets/img/pattern-islamic.svg'),
    var(--bg);
  background-size: auto, auto, 400px, auto;
  background-attachment: fixed;
}

.auth-container{
  width:min(1100px, 100% - 24px);
  margin:32px auto;
}

.auth-card{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:16px;
  overflow:hidden;
  padding:0; /* ya tiene padding interno por bloques */
}

.auth-side{
  padding:24px;
  background: linear-gradient(180deg, rgba(14,164,114,.12), rgba(14,164,114,.06));
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:center; gap:16px;
}
.auth-brand h1{ margin:0 }
.auth-brand .crescent{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:14px; background:#0f2a23; border:1px solid var(--border);
  font-size:28px; box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.auth-benefits{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.auth-benefits li{ color:#cfe8df }

.auth-form{
  padding:26px;
  display:grid; gap:12px;
  background: var(--panel);
}
.auth-form h2{ margin:0 0 4px }

.fgroup{ display:grid; gap:6px }
.fgroup span{ font-weight:600 }
.pwd-wrap{ position:relative }
.pwd-wrap input{ padding-right:44px }
.pwd-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:#0f2a23; border:1px solid var(--border); color:var(--text);
  padding:6px 8px; border-radius:10px; cursor:pointer;
}

.auth-row{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none }
.check input{ position:absolute; opacity:0; pointer-events:none }
.check i{
  width:18px; height:18px; border:1px solid var(--border); border-radius:4px;
  background:#0f2a23; display:inline-block;
}
.check input:checked + i{ background:linear-gradient(180deg,var(--brand),var(--brand-600)); border-color:transparent }

.auth-submit{ width:100%; margin-top:6px }

/* Medidor contraseña */
.pwd-meter{
  margin-top:6px; height:8px; border-radius:999px; background:#0e2a23; overflow:hidden; border:1px solid var(--border);
}
.pwd-meter span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand-600)); transition:width .18s ease }

@media (max-width:920px){
  .auth-card{ grid-template-columns: 1fr }
  .auth-side{ order:2 }
  .auth-form{ order:1 }
}