/* Variables (copied from blog.css so Tools pages match the Blog even if blog.css is not loaded) */
:root{
  --bg: #f9fafb;
  --text: #0f172a;
  --muted: #475569;

  --card: rgba(255,255,255,.70);
  --card-border: rgba(15,23,42,.10);

  --accent: #38BDF8;
  --accent-2: rgba(56,189,248,.18);

  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --radius: 18px;
}

body.theme-dark{
  --bg: #020617;
  --text: #e5e7eb;
  --muted: #a3b3c7;

  --card: rgba(2,6,23,.62);
  --card-border: rgba(148,163,184,.14);

  --accent: #38BDF8;
  --accent-2: rgba(56,189,248,.18);

  --shadow: 0 14px 40px rgba(0,0,0,.38);
}

/* ==========================================================
   Tools UI (Zakat / Age / Date Converter) — Mawaqeeti
   Matches Blog look (blog.css variables + glass)
   Works with: body.theme-light / body.theme-dark
   File: public/css/tools.css
   ========================================================== */

.tools-page{
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 16px 44px;
  color: var(--text);
}

.tools-page a{ color: inherit; text-decoration: none; }
.tools-page a:hover{ text-decoration: none; }

.card-soft{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Hero (glass) ---------- */
.tools-hero{
  overflow: hidden;
  position: relative;
  padding: 18px 18px;
}

@media (min-width: 768px){
  .tools-hero{ padding: 22px 22px; }
}

.tools-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, var(--accent-2), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(15,23,42,.06), transparent 55%);
  pointer-events: none;
}

body.theme-dark .tools-hero::before{
  background:
    radial-gradient(circle at 10% 20%, rgba(56,189,248,.16), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(15,23,42,.55), transparent 55%);
}

.tools-hero > *{
  position: relative;
  z-index: 1;
}

.tools-hero h1{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

@media (min-width: 768px){
  .tools-hero h1{ font-size: 1.55rem; }
}

.tools-hero p{
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

/* ---------- Breadcrumb ---------- */
.tools-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

.tools-breadcrumb a{
  color: var(--muted);
}

.tools-breadcrumb .sep{
  opacity: .55;
}

/* ---------- Stats Bar ---------- */
.tools-stats{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px){
  .tools-stats{ grid-template-columns: repeat(3, 1fr); }
}

.tools-stat{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.55);
}

body.theme-dark .tools-stat{
  background: rgba(2,6,23,.40);
}

.tools-stat .k{
  font-size: .78rem;
  color: var(--muted);
}

.tools-stat .v{
  margin-top: 2px;
  font-weight: 900;
  color: var(--text);
}

/* ---------- Section spacing ---------- */
.tools-section{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Make Bootstrap cards look like blog cards inside tools pages */
.tools-page .card,
.tools-page .age-card,
.tools-page .date-card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Headings */
.tools-page h1, .tools-page h2, .tools-page h3, .tools-page h4{
  color: var(--text);
}

.tools-page p{ color: var(--muted); }

/* Inputs */
.tools-page .form-control,
.tools-page .form-select,
.tools-page select,
.tools-page input[type="text"],
.tools-page input[type="number"],
.tools-page input[type="date"]{
  width: 100%;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text);
  outline: none;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

body.theme-dark .tools-page .form-control,
body.theme-dark .tools-page .form-select,
body.theme-dark .tools-page select,
body.theme-dark .tools-page input[type="text"],
body.theme-dark .tools-page input[type="number"],
body.theme-dark .tools-page input[type="date"]{
  background: rgba(2,6,23,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.tools-page .form-label{
  color: var(--text);
  opacity: .92;
  font-weight: 800;
}

/* Buttons */
.tools-page .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(56,189,248,.35);
  background: rgba(56,189,248,.14);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.theme-dark .tools-page .btn{ background: rgba(56,189,248,.10); }

.tools-page .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(56,189,248,.12);
}

.tools-page .btn:active{
  transform: translateY(0);
  box-shadow: none;
}

.tools-page .btn.btn-sm{
  padding: 9px 12px;
  border-radius: 12px;
  font-size: .92rem;
}

.tools-page .btn.btn-outline-secondary,
.tools-page .btn.btn-dhikr-outline{
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.45);
}

body.theme-dark .tools-page .btn.btn-outline-secondary,
body.theme-dark .tools-page .btn.btn-dhikr-outline{
  background: rgba(2,6,23,.35);
}

/* Result boxes */
.tools-page .result-box,
.tools-page .age-result,
.tools-page #total_zakat_box{
  border-radius: 16px;
  border: 1px solid rgba(56,189,248,.28);
  background: rgba(56,189,248,.08);
  padding: 14px 14px;
  color: var(--text);
}

body.theme-dark .tools-page .result-box,
body.theme-dark .tools-page .age-result,
body.theme-dark .tools-page #total_zakat_box{
  background: rgba(56,189,248,.08);
}

/* Zakat tabs */
.tools-page .zakat-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tools-page .zakat-tab-button{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.5);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.theme-dark .tools-page .zakat-tab-button{
  background: rgba(2,6,23,.45);
}

.tools-page .zakat-tab-button.active{
  border-color: rgba(56,189,248,.45);
  background: rgba(56,189,248,.14);
  box-shadow: 0 14px 30px rgba(56,189,248,.10);
}

.tools-page .zakat-tab-pane{ display: none; }
.tools-page .zakat-tab-pane.active{ display: block; }

/* FAQ accordion */
.tools-page .faq-accordion{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tools-page .faq-item{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255,255,255,.5);
  overflow: hidden;
}

body.theme-dark .tools-page .faq-item{
  background: rgba(2,6,23,.45);
}

.tools-page .faq-item-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0.85rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 900;
  text-align: start;
  cursor: pointer;
}

.tools-page .faq-item-icon{
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.tools-page .faq-item-header.open .faq-item-icon{
  transform: rotate(90deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #0f172a;
}

.tools-page .faq-item-body{
  padding: 0 0.95rem 0.95rem;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.9;
  display: none;
}

.tools-page .faq-item-body.open{ display: block; }

/* Mobile improvements */
@media (max-width: 640px){
  .tools-page{ padding: 18px 12px 36px; }
  .tools-page .btn{ width: 100%; }
  .tools-page .zakat-tabs{ gap: 8px; }
  .tools-page .zakat-tab-button{ flex: 1 1 auto; }
}