/* IRAQIFARER TOOLS BOX - dark mobile UI */
:root{
  --bg:#0b1220;
  --panel:#0f1a2c;
  --card:#121f33;
  --muted:rgba(233,244,255,.62);
  --text:rgba(255,255,255,.92);
  --line:rgba(255,255,255,.10);
  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --accent:#38bdf8;
}

.theme-light{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --card:#ffffff;
  --muted:rgba(0,0,0,.55);
  --text:rgba(0,0,0,.86);
  --line:rgba(0,0,0,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}

/* 1. Force Zain on EVERYTHING */
* {
  font-family: 'Zain', sans-serif !important;
}

/* 2. Base Body Settings */
body {
  margin: 0;
  font-family: 'Zain', sans-serif !important;
  font-weight: 400; /* Regular weight */
  font-style: normal;
  
  /* Keep your background */
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 30% 0%, rgb(18, 116, 133), transparent 60%),
    radial-gradient(800px 600px at 100% 10%, rgb(56, 191, 248), transparent 55%),
    var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
}

a{color:inherit}
.app-shell{
  max-width:720px;
  margin:0 auto;
  min-height:100%;
  padding-bottom:120px; /* 👈 creates space above footer */
}

/* 1. Force the Header to be ABOVE the map (Z-Index Fix) */
.topbar {
  z-index: 9999 !important; /* Leaflet uses 1000, so we go higher */
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px;
  background: linear-gradient(to bottom, rgba(10,16,28,.92), rgba(10,16,28,.72));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
  font-weight: 600;
}

/* 2. Fix the Map container to ensure it stays inside the card */
#map {
  /* This prevents the map from "leaking" out of rounded corners */
  z-index: 1; 
  position: relative;
  overflow: hidden;
  isolation: isolate; /* Creates a new stacking context */
}

.topbar-left{display:flex; align-items:center; gap:10px;}
.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px var(--accent-12);
}

.brand-title{font-weight:900; letter-spacing:.12em; font-size:12px; color:var(--muted)}
.brand-sub{font-weight:900; letter-spacing:.16em; font-size:11px; opacity:.7}
.top-link{text-decoration:none}
.chip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px}
.chip-dot{width:8px;height:8px;border-radius:999px;background:rgba(34,197,94,.95);box-shadow:0 0 0 5px rgba(34,197,94,.12)}
.page{padding:14px 14px 20px 14px;}

.back-btn{
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  text-decoration:none;
  font-size: 18px;
}
.page-title-wrap{display:flex;flex-direction:column;gap:2px}
.page-title{font-weight:900;font-size:16px;letter-spacing:.01em}
.page-subtitle{font-size:12px;color:var(--muted);letter-spacing:.14em}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow: var(--shadow);
}
.panel{padding:25px;}
.pad{padding:18px;}
.hr{height:1px;background:var(--line); margin:12px 0;}
.sub{color:var(--muted); bottom: 10px;font-weight:900; letter-spacing:.14em; font-size:12px; text-transform:uppercase}
.h1{font-size:34px; font-weight:900; margin:0;}
.p{color:var(--muted); line-height:1.5}
.small{font-size:12px;color:var(--muted)}
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background:var(--accent);
  border:1px solid var(--line);
  font-size:12px;
  color:#ffffff;          /* ← FIX: force black text */
  font-weight:500;     /* optional: improves readability */
}

.field{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.label{font-size:12px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; font-weight:800}
.input{
  width:100%;
  padding:14px 16px;   /* ← FIX */
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,18,32,.35);
  color:var(--text);
  outline:none;
}

.input:focus{
  border-color: var(--accent-55);
  box-shadow:0 0 0 6px var(--accent-10);
}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.split3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px;}
@media (max-width:520px){
  .split{grid-template-columns:1fr}
  .split3{grid-template-columns:1fr 1fr 1fr}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:14px 70px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  font-weight:500;
}
.btn:hover{filter:brightness(1.05)}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-25));
  border-color: var(--accent-35);
}

.btn.danger{
  background: linear-gradient(135deg, rgba(239,68,68,.25), rgba(255,255,255,.03));
  border-color: rgba(239,68,68,.35);
  color:#fecaca;
}
.btn.ok{
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(255,255,255,.03));
  border-color: rgba(34,197,94,.35);
  color:#bbf7d0;
}
.btn.full{width:100%}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.row > *{flex:1}
.row .btn{flex:1}

.notice{
  padding:12px 12px;border-radius:18px;
  background: rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.14);
  color:var(--muted);
}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:14px;border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight:900; font-size:12px; letter-spacing:.12em;
}

.table{width:100%; border-collapse:collapse; font-size:13px;}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--line); text-align:left;}
.table th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:900;}

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:6px; justify-content:center;
  padding:7px 12px;
  background: linear-gradient(to top, rgba(10,16,28,.92), rgba(10,16,28,.70));
  border-top:1px solid var(--line);
  backdrop-filter: blur(5px);
}
.bottom-nav .nav-item{
  width:min(100px, 33%);
  display:flex; flex-direction:column; gap:4px;
  align-items:center; justify-content:center;
  padding:10px 0;
  border-radius:18px;
  text-decoration:none;
  color:var(--muted);
}
.nav-ico {
  display: inline-flex;       /* Allows perfect vertical centering */
  align-items: center;        /* Centers the icon vertically */
  justify-content: center;
  vertical-align: middle;     /* Aligns the whole span with the text line */
  margin-right: 8px;          /* Adds space between the icon and the text */
}

.nav-ico img {
  width: 22px;                /* Set consistent size */
  height: 22px;
  display: block;             /* Removes the invisible gap below images */
  object-fit: contain;        /* Ensures the icon doesn't stretch */
}
/* 1. The Container (Starts as a circle/square) */
.hover-reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Initial Shape & Color */
  border-radius: 10px; /* Pill Shape */
  cursor: pointer;
  width: fit-content;
  
  /* Smooth Animation for the container shape */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}

/* 2. The Icon settings */
.hover-reveal .nav-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* Remove margin initially */
}

.hover-reveal .nav-ico img {
  width: 24px;
  height: 24px;
  display: block;
}

/* 3. The Text (Hidden by default) */
.hover-reveal .text {
  max-width: 0;        /* Width is zero = Hidden */
  opacity: 0;          /* Invisible */
  overflow: hidden;    /* Cut off any overflow */
  white-space: nowrap; /* Prevent text wrapping */
  font-weight: 700;
  font-size: 16px;
  
  /* Smooth slide animation */
  transition: all 0.4s ease;
  margin-left: 0;
}

/* --- HOVER STATE (The Expansion) --- */
.hover-reveal:hover {
  padding-right: 20px; /* Add space on the right for the text */
}

.hover-reveal:hover .text {
  max-width: 200px;    /* Allow width to expand */
  opacity: 1;          /* Fade in */
  margin-left: 10px;   /* Add gap between icon and text */
}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:92px; z-index:200;
  background: rgba(0,0,0,.78);
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  max-width: calc(100% - 24px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* --------------------- NEW ----------------*/
.menuWrap{ position:relative; }

/* the 3-dots circle button (same look as your screenshot) */
.kebab{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;
}
.kebab:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.14);
}
.kebab:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(56,189,248,.25), inset 0 1px 0 rgba(255,255,255,.08);
}

/* dropdown menu (glass, rounded, subtle) */
.menuDrop{
  position:absolute;
  top:52px;
  right:0;
  width:170px;
  padding:8px;
  border-radius:18px;
  background:rgba(17, 25, 40, .78);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  display:none;
  z-index:999;
}
.menuDrop.open{ display:block; }

/* menu items */
.menuLink{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  background:transparent;
  border:0;
  cursor:pointer;
}
.menuLink:hover{
  background:rgba(255,255,255,.06);
}

/* danger delete */
.menuLink.danger{
  color:#fb7185;
}
.menuLink.danger:hover{
  background:rgba(239,68,68,.12);
}

/* =========================
   SUCCESS / DELETED PAGE
========================= */
.success-card {
  grid-column: span 12;
  text-align: center;
  padding: 42px 26px;
  background: linear-gradient(
    160deg,
    rgba(56, 189, 248, 0.10),
    rgba(59, 130, 246, 0.06)
  );
  border: 1px solid rgba(56,189,248,.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: fadeInScale .35s ease;
}

.success-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px auto;
  border-radius: 26px;
  background: rgba(56,189,248,.18);
  border: 1px solid rgba(56,189,248,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #38bdf8;
}

.success-title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 6px;
}

.success-subtitle {
  color: var(--muted);
  font-size: 14px;
}

.success-divider {
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
}

.success-redirect {
  font-size: 13px;
  color: var(--muted);
}

/* subtle entrance */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* === FAB ADD BUTTON (SVG HOVER OUTLINE) === */
.fab-add {
  /* 1. Fix the Positioning */
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  bottom: -120px !important;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  
  /* 2. FORCE CIRCLE SHAPE (The Fix) */
  padding: 0 !important;  /* Kills the .btn padding causing the oval shape */
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;    /* Ensures it stays a perfect square/circle */
  
  /* 3. Centering the + Icon */
  display: flex !important;
  align-items: center;
  justify-content: center;
  
  /* 4. Visuals */
  font-size: 32px;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-25)) !important;
  color: #000 !important; /* Black Icon */
  border: none !important;
}

.fab-add.visible {
  bottom: 100px !important;
}

/* SVG circle overlay */
.hover-fab svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hover-fab circle{
  fill: none;
  stroke: rgba(157, 235, 255, 0.85);
  stroke-width: 2;
  stroke-dasharray: 165, 0;
  transition: all .35s linear;
}

/* Hover animation */
.hover-fab:hover circle{
  stroke-width: 4;
  stroke-dasharray: 22, 140;
  stroke-dashoffset: 40;
  transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Optional glow on hover */
.hover-fab:hover{
  box-shadow:
    0 0 0 6px rgba(56,189,248,.18),
    0 20px 40px rgba(0,0,0,.55);
}

.fab-add svg {
  width: 28px;
  height: 28px;
  display: block;
  stroke: currentColor; /* Inherits black from .fab-add */
}

/* Accent picker */
.accentPick{
  display:flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
}

.accentPick input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.accentPick .dot{
  width:34px;
  height:34px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative;
}

/* Selected ring (matches your UI vibe) */
.accentPick input:checked + .dot{
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 0 0 6px rgba(56,189,248,.14),
    0 10px 30px rgba(0,0,0,.35);
}

.accentPick input:checked + .dot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
}

/* ===== Action buttons row (Saved / Settings) ===== */
.actions-row{
  display: flex;
  flex-wrap: wrap;       /* Allows the Title to break to its own line */
  justify-content: center; /* Centers everything */
  align-items: center;
  gap: 12px;             /* Space between buttons */
  padding: 10px 0;
}

.actions-row .btn{
  flex: 1;
  height: 56px;                /* same visual height */
  padding: 0 18px;             /* remove vertical padding chaos */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  font-weight: 900;
  line-height: 1;
}

/* icon inside button */
.actions-row .btn span,
.actions-row .btn i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* 2. The Title Styling */
.actions-row h1 {
  width: 100%;           /* Forces title to take full width of the top row */
  text-align: center;    /* Centers the text */
  margin: 0 0 16px 0;    /* Adds space below the title */
  font-size: 18px;
  font-weight: 800;
  color: #fff;           /* White text */
  border: none;          /* Removes any default borders */
}

/* chips row */
.row.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center; /* center them */
  align-items:center;
}

/* your global .row > * {flex:1} makes buttons stretch — override it here */
.row.chips > *{
  flex:0 0 auto;
}

/* chip look */
.btn.chip{
  padding:7px 10px;
  font-size:12px;
  font-weight:800;
  border-radius:16px;
  width:auto;
  white-space:nowrap;
}

#vc_export {
  white-space: nowrap !important; /* Forces text to stay on one line */
  min-width: 140px;               /* Ensures the button is wide enough */
}

/* --- FIXED CARD DESIGN --- */
.item-card {
  background: rgba(30, 41, 59, 0.7); /* Darker, cleaner background */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

/* Header: Icon + Text */
.card-header {
  display: flex;
  align-items: flex-start; /* Aligns to top */
  gap: 12px;
  margin-bottom: 16px; /* Space between header and footer */
}

.icon-box {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0; /* Prevents icon from squashing */
}

.meta-content {
  flex: 1;
  display: flex;
  flex-direction: column; /* Stacks Title on top of details */
  gap: 4px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allows wrapping on small screens */
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.badge-sm {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

/* Footer: Money + Button */
.card-footer {
  display: flex;
  align-items: flex-end; /* Aligns bottom of button with bottom of text */
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.data-group .label-small {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
  font-weight: 600;
}

.data-group .value-large {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

/* FIXED BUTTON STYLE */
/* --- 1. The Compact Export Button --- */
.btn-compact {
  /* The Gradient */
  background: linear-gradient(135deg, var(--accent), var(--accent-25)) !important;
  color: #000 !important; /* Black text for contrast */
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px !important;
  border: none !important;
  min-width: 80px;
  box-shadow: none !important;
  transition: opacity 0.2s;
}

.btn-compact:hover {
  opacity: 0.9;
}

/* 3. Button Base Style */
.btn-social {
  width: 50px;
  height: 50px;
  border-radius: 14px;   /* Squircle shape */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s;
}

/* 4. FIX THE GIANT ICONS */
.btn-social img {
  width: 24px !important;  /* Force small size */
  height: 24px !important;
  display: block;
  object-fit: contain;
  filter: invert(1);       /* Make icons white */
}

/* 5. Hover Animation */
.btn-social:hover {
  transform: translateY(-3px);
  border-color: transparent;
}

/* 6. Brand Colors on Hover */
.btn-social.insta:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.4);
}

.btn-social.yt:hover {
  background: #FF0000;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}

.btn-social.tiktok:hover {
  background: #000000;
  box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55;
}

.btn-social.linkedin:hover {
  background: #0077B5;
  box-shadow: 0 4px 15px rgba(0, 119, 181, 0.4);
}