/* ============================================================
   ask-fatwa.css
   ============================================================ */

:root {
  --bg: #f5f0e8;
  --gold: #b08d57;
  --gold-light: #d4af37;
  --brown: #5c4033;
  --green: #0f5132;
  --green-light: #198754;
  --amber: #92400e;
  --amber-light: #d97706;
  --text: #1a1209;
  --text-muted: #6b5c4e;
  --card-bg: #fffdf7;
  --border: rgba(176,141,87,0.2);
  --shadow: 0 4px 28px rgba(92,64,51,0.10);
}
[data-theme="dark"] {
  --bg: #0f1115;
  --gold: #d4af37;
  --gold-light: #f0c94d;
  --brown: #c8a96b;
  --green: #1f7a53;
  --green-light: #2aab72;
  --text: #f1f1f1;
  --text-muted: #a89880;
  --card-bg: #1a1d24;
  --border: rgba(212,175,55,0.15);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .4s, color .4s;
  overflow-x:hidden;
}
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }

/* TOPBAR */
.topbar {
  background:#3e1d0ec2;
  padding:9px 28px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,.85);
}
.topbar-breadcrumb { display:flex; align-items:center; gap:8px; }
.topbar-breadcrumb a { color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s; }
.topbar-breadcrumb a:hover { color:#fde68a; }
.sep { opacity:.4; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.tb-btn {
  background:rgba(255,255,255,.15); border:none; color:#fff;
  padding:5px 14px; border-radius:20px;
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; transition:background .2s; display:flex; align-items:center; gap:5px;
}
.tb-btn:hover { background:rgba(255,255,255,.25); }

/* HERO */
.ask-hero {
  position:relative;
  background:linear-gradient(160deg,#1a0f05 0%,#3a1f0a 40%,#0f1a12 100%);
  padding:52px 40px 44px;
  overflow:hidden;
  text-align:center;
}
.hero-pattern {
  position:absolute; inset:0; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='40,5 75,25 75,55 40,75 5,55 5,25' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='white' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='3' fill='white'/%3E%3C/svg%3E");
  background-size:80px 80px;
}
.hero-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.ask-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.35);
  color:#fbbf24; padding:5px 16px; border-radius:20px;
  font-size:12px; font-weight:700; margin-bottom:18px; letter-spacing:.5px;
}
.ask-badge .badge-dot {
  width:7px; height:7px; background:#fbbf24; border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
.ask-hero h1 {
  font-family:'Aref Ruqaa',serif;
  font-size:clamp(22px,3.5vw,40px);
  color:#fff; line-height:1.5; margin-bottom:12px;
}
.ask-hero p {
  color:rgba(255,255,255,.65); font-size:14px; line-height:1.8; margin-bottom:24px;
}
.hero-notes { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.hero-note {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:7px 16px;
  font-size:12px; color:rgba(255,255,255,.75);
}
.hn-icon { font-size:15px; }

/* LAYOUT */
.ask-layout {
  display:grid;
  grid-template-columns:1fr 290px;
  gap:28px;
  max-width:1100px;
  margin:0 auto;
  padding:32px 20px 60px;
  align-items:start;
}

/* ALERT */
.alert {
  padding:14px 20px; border-radius:12px;
  font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
}
.alert-error {
  background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.25);
  color:#dc2626;
}
[data-theme="dark"] .alert-error { color:#f87171; background:rgba(220,38,38,.12); }

/* FORM CARD */
.form-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  padding:32px 36px;
}
.form-head {
  display:flex; align-items:center; gap:16px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
.fh-icon {
  width:52px; height:52px; min-width:52px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--amber),var(--amber-light));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:0 4px 16px rgba(146,64,14,.25);
}
.fh-title { font-size:18px; font-weight:700; color:var(--text); margin-bottom:4px; }
.fh-sub { font-size:12px; color:var(--text-muted); }
.req-star { color:#dc2626; margin-right:2px; }

/* FORM ELEMENTS */
.form-row.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.form-label {
  font-size:13px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.form-hint { font-size:11px; font-weight:400; color:var(--text-muted); }
.char-count { margin-right:auto; font-size:11px; font-weight:400; color:var(--text-muted); }

.form-input {
  width:100%; padding:11px 16px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo',sans-serif; font-size:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-input:focus {
  border-color:var(--amber-light);
  box-shadow:0 0 0 3px rgba(217,119,6,.1);
}
.form-input::placeholder { color:var(--text-muted); }
.form-select { cursor:pointer; }
.form-textarea { min-height:180px; resize:vertical; line-height:1.8; }
.field-tip {
  font-size:12px; color:var(--text-muted);
  padding:8px 12px;
  background:rgba(176,141,87,.05);
  border-radius:8px;
  border-right:3px solid var(--amber-light);
}

/* TERMS */
.terms-row {
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:24px;
  padding:14px 16px;
  background:rgba(176,141,87,.04);
  border:1px solid var(--border);
  border-radius:12px;
}
.terms-chk { width:17px; height:17px; cursor:pointer; margin-top:2px; accent-color:var(--amber-light); flex-shrink:0; }
.terms-label { font-size:13px; color:var(--text-muted); line-height:1.6; cursor:pointer; }
.terms-link { color:var(--amber-light); text-decoration:none; }
.terms-link:hover { text-decoration:underline; }

/* SUBMIT */
.submit-btn {
  width:100%; padding:14px 24px;
  border-radius:14px; border:none;
  background:linear-gradient(135deg,var(--amber),var(--amber-light));
  color:#fff;
  font-family:'Cairo',sans-serif; font-size:16px; font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .25s;
  box-shadow:0 4px 20px rgba(217,119,6,.35);
}
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(217,119,6,.45); }
.submit-btn:active { transform:translateY(0); }
.sb-icon { font-size:18px; }
.sb-arrow { margin-right:auto; font-size:18px; transition:transform .2s; }
.submit-btn:hover .sb-arrow { transform:translateX(-4px); }

/* SIDEBAR */
.ask-sidebar { display:flex; flex-direction:column; gap:18px; position:sticky; top:20px; }
.sidebar-widget {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow);
}
.widget-head {
  padding:12px 18px;
  background:linear-gradient(135deg,var(--amber),#b45309);
  color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
[data-theme="dark"] .widget-head {
  background:linear-gradient(135deg,#2a1a06,#3d2508);
  color:var(--gold-light);
}
.guides-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.guide-item { display:flex; gap:10px; align-items:flex-start; }
.gi-num {
  width:26px; height:26px; min-width:26px; border-radius:8px;
  background:linear-gradient(135deg,var(--amber),var(--amber-light));
  color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:'Reem Kufi',sans-serif; flex-shrink:0; margin-top:1px;
}
.gi-text { font-size:12.5px; color:var(--text-muted); line-height:1.6; }

.stats-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.stat-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:rgba(176,141,87,.04);
  border:1px solid var(--border);
  border-radius:10px;
}
.stat-icon { font-size:22px; }
.stat-num { font-family:'Reem Kufi',sans-serif; font-size:16px; color:var(--gold); font-weight:700; }
.stat-label { font-size:11px; color:var(--text-muted); }

.search-widget-body {
  padding:16px; display:flex; flex-direction:column; gap:12px; text-align:center;
}
.search-widget-body p { font-size:13px; color:var(--text-muted); }
.search-fatwa-btn {
  display:block; padding:10px 16px; border-radius:10px;
  background:transparent; border:1.5px solid var(--amber-light);
  color:var(--amber-light);
  font-family:'Cairo',sans-serif; font-size:13px; font-weight:700;
  text-decoration:none; transition:all .2s;
}
.search-fatwa-btn:hover { background:rgba(217,119,6,.1); transform:translateX(-3px); }

/* SUCCESS MODAL */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:24px;
  padding:40px 36px;
  max-width:500px; width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  text-align:center;
  animation:slideUp .35s cubic-bezier(.25,.46,.45,.94);
  max-height:90vh; overflow-y:auto;
}
@keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-icon { font-size:56px; margin-bottom:16px; animation:popIn .4s .1s both cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
.modal-title {
  font-family:'Aref Ruqaa',serif;
  font-size:clamp(20px,3vw,28px);
  color:var(--text); margin-bottom:12px; line-height:1.4;
}
.modal-msg { font-size:14px; color:var(--text-muted); line-height:1.8; margin-bottom:28px; }

.modal-ticket {
  background:linear-gradient(135deg,rgba(15,81,50,.08),rgba(217,119,6,.06));
  border:1.5px solid var(--border);
  border-radius:16px; padding:20px 24px; margin-bottom:24px;
}
.ticket-label {
  font-size:11px; font-weight:700; color:var(--text-muted);
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px;
}
.ticket-num {
  font-family:'Reem Kufi',sans-serif;
  font-size:clamp(28px,5vw,42px);
  color:var(--amber-light); font-weight:700;
  letter-spacing:3px; margin-bottom:8px;
}
.ticket-hint { font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.copy-ticket-btn {
  padding:8px 20px; border-radius:10px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:'Cairo',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
}
.copy-ticket-btn:hover { border-color:var(--amber-light); color:var(--amber-light); }

.modal-steps { display:flex; flex-direction:column; gap:8px; margin-bottom:28px; text-align:right; }
.ms-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(15,81,50,.06); border:1px solid rgba(15,81,50,.15);
  border-radius:10px; font-size:13px; color:var(--text);
}
[data-theme="dark"] .ms-item { background:rgba(31,122,83,.08); border-color:rgba(42,171,114,.15); }
.ms-item.ms-pending { background:rgba(176,141,87,.04); border-color:var(--border); color:var(--text-muted); }
.ms-icon { font-size:16px; }
.ms-done { margin-right:auto; color:var(--green-light); font-weight:700; }
.ms-wait { margin-right:auto; font-size:13px; }

.modal-actions { display:flex; gap:12px; }
.modal-btn {
  flex:1; padding:12px 16px; border-radius:12px;
  font-family:'Cairo',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:all .2s; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:6px; border:none;
}
.modal-btn-home {
  background:linear-gradient(135deg,var(--amber),var(--amber-light));
  color:#fff; box-shadow:0 4px 16px rgba(217,119,6,.3);
}
.modal-btn-home:hover { transform:translateY(-2px); }
.modal-btn-close { background:var(--bg); color:var(--text); border:1.5px solid var(--border); }
.modal-btn-close:hover { border-color:var(--amber-light); color:var(--amber-light); }

/* TOAST */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px);
  background:#1a1209; color:#fff; padding:12px 24px; border-radius:30px;
  font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;
  z-index:99999; transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,.35);
}
[data-theme="dark"] .toast { background:#2a2010; }
.toast.show { transform:translateX(-50%) translateY(0); }

/* RESPONSIVE */
@media (max-width:900px) {
  .ask-layout { grid-template-columns:1fr; }
  .ask-sidebar { position:static; }
}
@media (max-width:600px) {
  .ask-hero { padding:32px 18px 28px; }
  .form-card { padding:20px 18px; }
  .form-row.two-col { grid-template-columns:1fr; }
  .hero-notes { flex-direction:column; gap:10px; }
  .modal-box { padding:28px 20px; }
  .modal-actions { flex-direction:column; }
}