/* إضافات أدوات المؤسس v2 — ثيم الزجاج الداكن + مكونات جديدة */

/* ── الحاسبة الديناميكية — بطاقتا الفاتورة العكسية ── */
.vat-input-xl {
  font-size: 1.7rem !important; font-weight: 800; text-align: center;
  padding: 1.1rem !important; letter-spacing: .05em;
}
.chips { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.2rem; position: relative; z-index: 1; }
.chip {
  border: 1.5px solid var(--glass-line); background: var(--glass); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: .4rem 1.15rem; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  will-change: transform;
}
.chip.active { border-color: var(--gold-500); background: rgba(212,175,55,.18); color: var(--gold-500); }
.chip input {
  width: 74px; background: transparent; border: none; color: inherit;
  font: inherit; text-align: center; direction: ltr;
}
.chip input:focus { outline: none; }
.chip.custom { display: inline-flex; align-items: center; gap: .3rem; }

.vat-dual { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.3rem; }
.mini-card {
  border-radius: 16px; padding: 1.5rem;
  background: var(--glass-hi);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .3s, transform .55s var(--ease-jelly);
}
.mini-card.show { opacity: 1; transform: translateY(0) scale(1); }
.mini-card h4 { font-size: .88rem; color: var(--muted); font-weight: 400; margin-bottom: .6rem; }
.mini-card .row { display: flex; justify-content: space-between; font-size: .93rem; padding: .25rem 0; }
.mini-card .total {
  font-size: 1.4rem; font-weight: 800; color: var(--gold-500);
  border-top: 2px solid rgba(212,175,55,.4); margin-top: .6rem; padding-top: .55rem;
}
.mini-card.accent { border-top: 3px solid var(--gold-500); }
.mini-card .total.green { color: var(--green); }
.mini-card .total.red { color: var(--red); }

/* بطاقات ثلاثية (المحلل / التعادل) */
.tri-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 1.3rem; }
.tri-cards .mini-card { text-align: center; }
.tri-cards .mini-card .total { border: none; margin-top: .3rem; padding-top: 0; font-size: 1.5rem; }

/* ── البطاقة المتوهجة ── */
.glow-card {
  margin-top: 1.3rem; border-radius: 16px; padding: 1.6rem; text-align: center;
  background: linear-gradient(145deg, rgba(74,222,128,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(74,222,128,.3);
  display: none;
}
.glow-card.show { display: block; animation: jellyIn .55s var(--ease-jelly), glowPulse 2.4s .6s infinite; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(74,222,128,.15); }
  50% { box-shadow: 0 0 38px rgba(74,222,128,.3); }
}
.glow-card .big { font-size: 1.75rem; font-weight: 800; color: var(--green); }
.glow-card.danger {
  background: linear-gradient(145deg, rgba(248,113,113,.12), rgba(255,255,255,.06));
  border-color: rgba(248,113,113,.4);
}
.glow-card.danger .big { color: var(--red); }
.glow-card.danger.show { animation: jellyIn .55s var(--ease-jelly), dangerPulse 2.4s .6s infinite; }
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(248,113,113,.18); }
  50% { box-shadow: 0 0 38px rgba(248,113,113,.35); }
}
.glow-card .lines { text-align: right; font-size: .92rem; margin-bottom: .8rem; }
.glow-card .lines div { display: flex; justify-content: space-between; padding: .25rem 0; border-bottom: 1px dashed rgba(255,255,255,.12); }

/* ── مكوّن Hijri Picker (زجاجي داكن) ── */
.hijri-picker .hp-row { display: flex; gap: .6rem; }
.hijri-picker select, .hijri-picker .hp-manual {
  flex: 1; padding: .75rem .6rem; border-radius: 12px;
  border: 1.5px solid var(--glass-line);
  background: rgba(255,255,255,.07); color: var(--ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: inherit; font-size: .95rem;
}
.hijri-picker select option { background: var(--navy-900); color: var(--ink); }
.hijri-picker .hp-toggle { margin-top: .7rem; font-size: .82rem; }
.hijri-picker .hp-feedback { margin-top: .7rem; font-size: .87rem; color: var(--green); min-height: 1.4em; }
.hijri-picker.hp-invalid select, .hijri-picker.hp-invalid .hp-manual { border-color: rgba(248,113,113,.6) !important; }
.hijri-picker.hp-invalid .hp-feedback { color: var(--red); }

/* ── Omni-Date Bridge ── */
.date-bridge { display: grid; gap: 1rem; align-items: stretch; }
.swap-row { display: flex; gap: .7rem; justify-content: center; margin: 1.2rem 0 .4rem; position: relative; z-index: 1; }
.swap-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-950); font-size: 1.35rem; border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(212,175,55,.4);
  will-change: transform; display: grid; place-items: center;
}
.swap-btn.flipped { transform: rotate(180deg); }
.clear-btn {
  border-radius: 999px; border: 1.5px solid var(--glass-line);
  background: var(--glass); color: var(--muted);
  padding: .5rem 1.3rem; font-family: inherit; font-size: .85rem; cursor: pointer;
}
.bridge-label {
  text-align: center; font-size: .9rem; color: var(--muted); margin-bottom: .8rem;
}
.bridge-label strong { color: var(--gold-500); }

/* ── صنارة التحويل ── */
.hook-card {
  border-radius: 20px; padding: 3rem 2.2rem; text-align: center; color: #fff;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 20px 50px rgba(0,0,0,.4);
}
.hook-card h2 { font-size: 1.5rem; margin-bottom: .7rem; }
.hook-card p { color: #b9c8dd; max-width: 540px; margin: 0 auto 1.8rem; font-size: .97rem; }
.hook-btn {
  display: inline-block; background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-950); font-weight: 800; font-size: 1.08rem; text-decoration: none;
  padding: 1rem 2.6rem; border-radius: 999px;
  animation: hookPulse 2s infinite;
  transition: transform .45s var(--ease-jelly);
}
.hook-btn:hover { transform: scale(1.07); }
@keyframes hookPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.5); }
  50% { box-shadow: 0 0 0 18px rgba(212,175,55,0); }
}