/* ══════════════════════════════════════════════════════════════════════
   TOT Umrah Module — Tales of Faith
   Bright, minimalistic Islamic theme. Everything is scoped under
   #tab-umrah / .umr-* so it never leaks into the core portal styles.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --umr-cream:#FBF7EF; --umr-cream2:#F5EDDE; --umr-paper:#FFFFFF;
  --umr-brown:#402416; --umr-ink:#33241A;   --umr-gold:#C69342;
  --umr-goldd:#9E6E22;  --umr-goldl:#E6CE97; --umr-teal:#063330;
  --umr-teal2:#0C4A44;  --umr-line:#ECDCBB;  --umr-mute:#7A6A58;
  --umr-green:#0F5A50;
}

/* Sidebar nav item we inject */
#nav-umrah .nav-icon{ filter:none; }
#nav-umrah.nav-item.active{ background:linear-gradient(90deg,rgba(198,147,66,.16),transparent); }

/* Tab shell */
#tab-umrah{ font-family:'Poppins',system-ui,sans-serif; color:var(--umr-ink); }
#tab-umrah *{ box-sizing:border-box; }
.umr-wrap{ max-width:1180px; margin:0 auto; }
.umr-serif{ font-family:'Playfair Display','Georgia',serif; }
.umr-amiri{ font-family:'Amiri','Georgia',serif; }

/* subtle girih backdrop */
#tab-umrah{
  background-image:
    radial-gradient(circle at 20% 15%, rgba(198,147,66,.05), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(6,51,48,.04), transparent 45%);
}

/* ── Umrah top banner ─────────────────────────────────────────────── */
.umr-hero{
  position:relative; overflow:hidden; border-radius:18px; margin-bottom:20px;
  background:linear-gradient(135deg,var(--umr-teal) 0%,#0a3f39 55%,var(--umr-teal2) 100%);
  color:#fff; padding:26px 28px;
  box-shadow:0 16px 40px rgba(6,51,48,.22);
}
.umr-hero:before{
  content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(198,147,66,.35),transparent 70%);
}
.umr-hero .umr-hero-star{ position:absolute; right:24px; bottom:-30px; width:180px; height:180px; opacity:.13; }
.umr-hero h1{ font-size:26px; font-weight:800; margin:0 0 4px; letter-spacing:.5px; }
.umr-hero .umr-bism{ font-size:20px; color:var(--umr-goldl); margin-bottom:6px; direction:rtl; }
.umr-hero p{ margin:0; font-size:12.5px; color:#cfe0d8; letter-spacing:2px; text-transform:uppercase; }

/* ── KPI cards ────────────────────────────────────────────────────── */
.umr-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.umr-kpi{
  background:var(--umr-paper); border:1px solid var(--umr-line); border-radius:14px; padding:16px 18px;
  box-shadow:0 6px 16px rgba(64,36,22,.05); position:relative; overflow:hidden;
}
.umr-kpi .umr-kpi-ic{ position:absolute; right:-8px; top:-8px; width:56px; height:56px; opacity:.10; }
.umr-kpi .k{ font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--umr-mute); font-weight:600; }
.umr-kpi .v{ font-family:'Playfair Display',serif; font-size:26px; font-weight:800; color:var(--umr-brown); margin-top:4px; }
.umr-kpi .s{ font-size:11px; color:var(--umr-teal); margin-top:2px; }

/* ── Section chrome ───────────────────────────────────────────────── */
.umr-sec{ display:flex; align-items:center; gap:12px; margin:26px 0 14px; }
.umr-sec h2{ font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--umr-teal);
  letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; margin:0; }
.umr-sec .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--umr-gold),transparent); }
.umr-star{ flex:0 0 auto; }

/* ── Tabs strip ───────────────────────────────────────────────────── */
.umr-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; border-bottom:2px solid var(--umr-line); }
.umr-tab{
  border:none; background:transparent; padding:11px 18px; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--umr-mute); border-bottom:3px solid transparent; margin-bottom:-2px; border-radius:8px 8px 0 0;
  display:flex; align-items:center; gap:8px; transition:.15s;
}
.umr-tab:hover{ color:var(--umr-brown); background:var(--umr-cream2); }
.umr-tab.active{ color:var(--umr-teal); border-bottom-color:var(--umr-gold); background:linear-gradient(180deg,var(--umr-cream2),transparent); }
.umr-tab .umr-tab-ic{ width:16px; height:16px; }
.umr-panel{ display:none; }
.umr-panel.active{ display:block; animation:umrFade .2s ease; }
@keyframes umrFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ── Toolbar (list header + NEW button) ───────────────────────────── */
.umr-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.umr-toolbar .umr-search{ flex:1; min-width:180px; max-width:320px; padding:9px 14px; border:1px solid var(--umr-line);
  border-radius:10px; font-size:13px; background:var(--umr-paper); }
.umr-btn{
  border:none; cursor:pointer; font-weight:600; font-size:13px; border-radius:10px; padding:10px 18px;
  display:inline-flex; align-items:center; gap:8px; transition:.15s; font-family:inherit;
}
.umr-btn-primary{ background:linear-gradient(135deg,var(--umr-gold),var(--umr-goldd)); color:#fff;
  box-shadow:0 6px 16px rgba(158,110,34,.28); }
.umr-btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.umr-btn-teal{ background:var(--umr-teal); color:var(--umr-goldl); }
.umr-btn-ghost{ background:var(--umr-paper); color:var(--umr-brown); border:1px solid var(--umr-line); }
.umr-btn-ghost:hover{ background:var(--umr-cream2); }
.umr-btn-sm{ padding:6px 12px; font-size:12px; border-radius:8px; }
.umr-btn-danger{ background:#fff; color:#B0412A; border:1px solid #EBC9BE; }

/* ── Cards / tables ───────────────────────────────────────────────── */
.umr-card{ background:var(--umr-paper); border:1px solid var(--umr-line); border-radius:14px;
  box-shadow:0 6px 18px rgba(64,36,22,.05); }
.umr-pad{ padding:18px 20px; }
.umr-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; overflow:hidden;
  border:1px solid var(--umr-line); border-radius:14px; background:var(--umr-paper); }
.umr-table thead th{ background:var(--umr-teal); color:var(--umr-goldl); text-align:left; padding:11px 14px;
  font-size:10.5px; letter-spacing:1px; text-transform:uppercase; font-weight:600; }
.umr-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--umr-line); color:#463726; vertical-align:middle; }
.umr-table tbody tr:nth-child(even){ background:#FBF6EC; }
.umr-table tbody tr:hover{ background:var(--umr-cream2); }
.umr-table tbody tr:last-child td{ border-bottom:none; }
.umr-serialcell{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--umr-teal); font-size:14px; letter-spacing:.3px; }
.umr-chip{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; }
.umr-chip-active{ background:var(--umr-cream2); color:var(--umr-goldd); }
.umr-chip-open{ background:#EAF3F1; color:var(--umr-teal); }
.umr-chip-confirmed{ background:#E7F3E9; color:#1D7A3E; }
.umr-chip-paid{ background:#E7F3E9; color:#1D7A3E; }
.umr-chip-unpaid{ background:#FBEAE6; color:#B0412A; }
.umr-chip-vouchered{ background:var(--umr-teal); color:var(--umr-goldl); }
.umr-empty{ text-align:center; color:var(--umr-mute); padding:40px 20px; font-size:13px; }
.umr-empty .umr-empty-ic{ width:54px; height:54px; opacity:.4; margin:0 auto 10px; display:block; }

/* ── Data Library ─────────────────────────────────────────────────── */
.umr-catgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:20px; }
.umr-cat{
  border:1.5px solid var(--umr-line); border-radius:14px; padding:14px 15px; cursor:pointer; background:var(--umr-paper);
  transition:.15s; position:relative;
}
.umr-cat:hover{ border-color:var(--umr-gold); transform:translateY(-2px); box-shadow:0 8px 20px rgba(64,36,22,.08); }
.umr-cat.active{ border-color:var(--umr-gold); background:linear-gradient(160deg,var(--umr-cream2),var(--umr-paper)); }
.umr-cat .umr-cat-nm{ font-family:'Playfair Display',serif; font-weight:700; color:var(--umr-brown); font-size:14px; margin-bottom:3px; }
.umr-cat .umr-cat-dsc{ font-size:11px; color:var(--umr-mute); line-height:1.4; }
.umr-cat .umr-cat-ct{ position:absolute; top:12px; right:14px; font-size:12px; font-weight:700; color:var(--umr-gold); }

.umr-hotelgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.umr-hotelcard{ background:var(--umr-paper); border:1px solid var(--umr-line); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(64,36,22,.05); display:flex; flex-direction:column; }
.umr-hotelcard .umr-hphoto{ width:100%; height:150px; object-fit:cover; background:var(--umr-cream2); display:block; }
.umr-hotelcard .umr-hbody{ padding:13px 15px; flex:1; display:flex; flex-direction:column; }
.umr-hotelcard .umr-hcity{ font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--umr-gold); font-weight:700; }
.umr-hotelcard .umr-hn{ font-family:'Playfair Display',serif; font-weight:700; color:var(--umr-brown); font-size:15px; margin:2px 0 4px; }
.umr-hotelcard .umr-hstars{ color:var(--umr-gold); font-size:12px; letter-spacing:1px; }
.umr-hotelcard .umr-hmeta{ font-size:11px; color:var(--umr-mute); margin-top:6px; line-height:1.5; }
.umr-hotelcard .umr-hact{ display:flex; gap:8px; margin-top:12px; }

/* ── Modal ────────────────────────────────────────────────────────── */
.umr-modal-bg{ position:fixed; inset:0; background:rgba(30,18,8,.55); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; z-index:99999; padding:34px 16px; overflow-y:auto; }
.umr-modal-bg.open{ display:flex; }
.umr-modal{ background:var(--umr-cream); border-radius:18px; width:100%; max-width:620px; overflow:hidden;
  box-shadow:0 30px 80px rgba(20,12,4,.4); animation:umrPop .2s ease; }
.umr-modal.umr-modal-wide{ max-width:960px; }
@keyframes umrPop{ from{opacity:0; transform:scale(.97) translateY(6px);} to{opacity:1; transform:none;} }
.umr-modal-head{ background:linear-gradient(135deg,var(--umr-teal),var(--umr-teal2)); color:#fff; padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; }
.umr-modal-head h3{ margin:0; font-family:'Playfair Display',serif; font-size:17px; font-weight:700; }
.umr-modal-head .umr-x{ cursor:pointer; background:rgba(255,255,255,.14); border:none; color:#fff; width:30px; height:30px;
  border-radius:8px; font-size:18px; line-height:1; }
.umr-modal-body{ padding:20px 22px; max-height:70vh; overflow-y:auto; }
.umr-modal-foot{ padding:14px 22px; border-top:1px solid var(--umr-line); display:flex; justify-content:flex-end; gap:10px;
  background:var(--umr-paper); }

/* forms */
.umr-field{ margin-bottom:14px; }
.umr-field label{ display:block; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--umr-mute); margin-bottom:5px; }
.umr-field input, .umr-field select, .umr-field textarea{
  width:100%; padding:9px 12px; border:1px solid var(--umr-line); border-radius:9px; font-size:13px;
  font-family:inherit; background:var(--umr-paper); color:var(--umr-ink);
}
.umr-field input:focus, .umr-field select:focus, .umr-field textarea:focus{
  outline:none; border-color:var(--umr-gold); box-shadow:0 0 0 3px rgba(198,147,66,.15); }
.umr-field textarea{ min-height:78px; resize:vertical; }
.umr-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.umr-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.umr-imgdrop{ border:2px dashed var(--umr-line); border-radius:12px; padding:16px; text-align:center; cursor:pointer;
  font-size:12px; color:var(--umr-mute); background:var(--umr-paper); }
.umr-imgdrop:hover{ border-color:var(--umr-gold); }
.umr-imgprev{ max-width:100%; max-height:170px; border-radius:10px; margin-top:10px; display:none; }
.umr-hint{ font-size:11px; color:var(--umr-mute); margin-top:4px; }

/* graphs */
.umr-graphgrid{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
@media(max-width:820px){ .umr-graphgrid{ grid-template-columns:1fr; } .umr-row,.umr-row3{ grid-template-columns:1fr; } }

/* toast */
.umr-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--umr-teal); color:#fff; padding:12px 22px; border-radius:12px; font-size:13px; font-weight:600;
  box-shadow:0 12px 30px rgba(6,51,48,.35); z-index:100000; transition:.25s; pointer-events:none; }
.umr-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.umr-toast.err{ background:#B0412A; }