/* == Zakat Calculator – UI Refresh == */
:root {
  --zakat-font-size: 16px;
  --zakat-font-color: #111;
  --zakat-bg: #f7fcf5;
  --zakat-border: #d1e7dd;
  --zakat-radius: 10px;
  --zakat-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  --zakat-primary: #002866;
  --zakat-primary-600: #173b82;
  --zakat-success: #0f5132;
  --zakat-muted: #6b7280;
  --zakat-cart-btn-bg: #0073aa;
  --zakat-cart-btn-hover: #005177;
  --zakat-font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.zakat-card{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  background:var(--zakat-bg);
  border:1px solid var(--zakat-border);
  border-radius:var(--zakat-radius);
  box-shadow:var(--zakat-shadow);
  padding:20px 22px;
  font-size:var(--zakat-font-size);
  color:var(--zakat-font-color);
  font-family:var(--zakat-font-family);
}

.zakat-card h3{margin:0 0 12px;font-weight:700}

.zc-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  align-items:center;
  margin-bottom:8px;
}

.zc-grid span:first-child{font-weight:600}
.zc-grid span:last-child{color:var(--zakat-muted)}

.zc-sep{height:1px;background:#e5e7eb;margin:14px 0}

.zc-field{margin:12px 0}
.zc-field label{display:block;font-weight:600;margin-bottom:6px}

.zc-field input,
.zc-field select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--zakat-border);
  border-radius:8px;
  box-sizing:border-box;
  background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.zc-field input:focus,
.zc-field select:focus{
  outline:none;
  border-color:var(--zakat-primary);
  box-shadow:0 0 0 3px rgba(0,40,102,.12);
}

.zc-actions{margin-top:10px}

.zc-btn{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  font-weight:700;
  background:var(--zakat-primary);
  color:#fff;
  transition:background .2s ease,opacity .2s ease;
}
.zc-btn:hover{background:var(--zakat-primary-600)}
.zc-btn[disabled]{opacity:.7;cursor:not-allowed}

#zakat-result{
  margin-top:14px;
  padding:12px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  text-align:center;
  font-weight:700;
  margin-top:18px;
}
#zakat-result.success{
  background:#f0fff4;
  border-color:#c6f6d5;
  color:var(--zakat-success);
}
#zakat-result.error{
  background:#fff5f5;
  border-color:#fed7d7;
  color:#b91c1c;
}

/* === زر إضافة الزكاة للسلة (تعريف واحد فقط) === */
#add-zakat-to-cart{
  display:none;
  margin-top:10px;
  background:var(--zakat-cart-btn-bg);
}
#add-zakat-to-cart:hover{background:var(--zakat-cart-btn-hover)}


/* == Tabs UI == */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.zc-tabs{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--zakat-border);
  margin:6px 0 14px;
}
.zc-tab{
  appearance:none;
  background:transparent;
  border:0;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  border-bottom:3px solid transparent;
  border-radius:6px 6px 0 0;
  transition:border-color .2s ease, background-color .2s ease;
}
.zc-tab.is-active{
  border-bottom-color:var(--zakat-primary);
  background:#fff;
}
.zc-tab:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,40,102,.12);
}
/* إخفاء آمن للوحة عند وجود خاصية hidden (تعزيز التوافق) */
.zc-tabpanel[hidden]{
  display: none !important;
}

/* حلقة تركيز واضحة عند التنقّل بالكيبورد داخل اللوحة */
.zc-tabpanel:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,40,102,.12);
  border-radius: 8px;
}


@media (max-width: 768px) {
  .zc-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
  }

  .zc-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* اختياري: تحسين المظهر عند وجود الكثير من التبويبات */
  .zc-tabs::-webkit-scrollbar {
    height: 6px;
  }

  .zc-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }

  .zc-tabs::-webkit-scrollbar-track {
    background: transparent;
  }
}