/* ===== Illegal Town — GTA RP Vibe (RTL) ===== */
:root{
  --bg:#05070b;
  --bg2:#0b0f1a;
  --panel:#0f1422;
  --ink:#e9f1ff;
  --muted:#a7b4c7;
  --primary:#00d1ff; /* neon cyan */
  --secondary:#ff00aa; /* neon magenta */
  --accent:#29ff9a; /* neon green */
  --line:#1b2740;
  --glass:rgba(255,255,255,.06);

  /* === Form controls (dark dropdown fix) === */
  --ctrl-bg:#0e1525;
  --ctrl-ink:#eaf1ff;
  --ctrl-muted:#b9c6da;
  --ctrl-border:#1b2740;
  --ctrl-hover:#16213a;
  --ctrl-focus-ring:0 0 0 2px rgba(0,209,255,.25);
  --select-bg:#0f1422;
  --select-ink:#eaf1ff;
  --select-border:#1b2740;
  --select-hover:#1b2740;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:system-ui,'Segoe UI','Noto Naskh Arabic','Tahoma',sans-serif;
  background:
    radial-gradient(1000px 600px at 80% -10%, #002b5555, transparent 60%),
    radial-gradient(900px 500px at 10% 20%, #55004455, transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* subtle scanlines */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 2px, transparent 4px);
  opacity:.4;
}
.container{max-width:1280px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(8,12,20,.55);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#0f1a2a,#0a1220);display:grid;place-items:center;font-weight:900}
.brand-title{font-weight:900;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted)}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none}
.nav-links a:hover{color:white;background:var(--glass)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:900;transition:.15s transform,.2s box-shadow}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#00111f; box-shadow:0 10px 28px #00e1ff22}
.btn-ghost{border:1px solid var(--line); background:transparent; color:var(--ink)}

/* Ticker */
.ticker{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b1424,#0d172b);position:relative}
.ticker .track{display:flex;gap:22px;padding:8px 0;animation:mar 28s linear infinite;white-space:nowrap}
.ticker .pill{padding:8px 12px;border-radius:999px;background:#0b1d33;border:1px solid #174c70;box-shadow:0 6px 16px #001a3a66}
@keyframes mar{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* HERO */
.hero{padding:70px 0 26px;position:relative}
h1.display{
  font-size:clamp(40px,7vw,90px); line-height:1.02; margin:0 0 8px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 10px 40px #001a3a66;
}
.hero .sub{font-size:clamp(18px,2.3vw,22px); color:var(--muted)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.grid{display:grid;gap:24px;grid-template-columns:1.2fr .8fr;align-items:center}

/* Slideshow (FIXED) */
.slideshow{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 20px 80px #0008;

  /* ✅ حافظ على نسبة 16:9 بدل ارتفاع ثابت */
  aspect-ratio:16/9;
  height:auto;
}
.slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slideshow .slide.active{opacity:1}
.slideshow img,
.slideshow video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#09111d;
}
.controls{position:absolute;inset:auto 0 10px 0;display:flex;justify-content:center;gap:10px}
.dot{width:10px;height:10px;border-radius:999px;background:#ffffff40;border:1px solid #ffffff66;cursor:pointer}
.dot.active{background:linear-gradient(90deg,var(--primary),var(--secondary)); border-color:transparent}

/* Status badge (compact, edge) */
.status-badge{
  position:fixed; bottom:20px; left:20px; z-index:40;
  background:linear-gradient(180deg,#0b1626,#0d1b2f);
  border:1px solid var(--line); border-radius:14px; padding:10px 12px;
  box-shadow:0 14px 40px #000c;
  display:grid; gap:6px; min-width:170px;
}
.status-badge .row{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.status-badge .val{color:#eaf5ff;font-weight:800}

/* Sections / Videos */
.section{padding:28px 0}
.section h2{margin:0 0 10px}
.video-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 80px #0008}
.vcard video,.vcard iframe{width:100%;aspect-ratio:16/9;background:#000}
.vcard .meta{padding:10px;color:var(--muted)}

/* Feature pills */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{padding:10px 12px;border-radius:999px;background:#111b2d;border:1px solid var(--line);color:#cde6ff}

/* Reveal */
.reveal{opacity:0;transform:translateY(12px);transition:all .6s ease}
.reveal.in{opacity:1;transform:none}

/* Footer */
.footer{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);text-align:center}

/* =========================
   Form Controls (Dark UI)
   ========================= */
input, textarea, select{
  background:var(--ctrl-bg);
  color:var(--ctrl-ink);
  border:1px solid var(--ctrl-border);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  transition:.18s ease border-color, .18s ease box-shadow, .18s ease background;
}
input::placeholder, textarea::placeholder{ color:var(--ctrl-muted) }

input:hover, textarea:hover, select:hover{ background:var(--ctrl-hover) }
input:focus, textarea:focus, select:focus{
  border-color:var(--primary);
  box-shadow:var(--ctrl-focus-ring);
}

/* Better number/date/time spinners on dark */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type=number]{ -moz-appearance:textfield }
input::-webkit-calendar-picker-indicator{ filter:invert(1) }

/* Native dropdown (the fix) */
select{
  background:var(--select-bg);
  color:var(--select-ink);
  border:1px solid var(--select-border);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-inline-end:34px; /* for arrow */
  position:relative;
}

/* custom arrow */
select{
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb0ca 50%),
    linear-gradient(135deg, #9fb0ca 50%, transparent 50%),
    linear-gradient(180deg, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    100% 0;
  background-size:6px 6px,6px 6px,2.6rem 100%;
  background-repeat:no-repeat;
}
select:focus{
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%),
    linear-gradient(180deg, transparent, transparent);
}

/* ensure dropdown list itself is dark & readable */
select option{
  background:var(--select-bg);
  color:var(--select-ink);
}
select option:hover,
select option:checked{
  background:var(--select-hover);
  color:#fff;
}
optgroup{
  color:var(--select-ink);
  background:var(--select-bg);
}

/* Windows old arrow */
select::-ms-expand{ display:none }

/* Checkbox / radio accent */
input[type=checkbox], input[type=radio]{ accent-color: var(--primary) }

/* Toasts or native menus on some UAs may inherit wrong fg/bg; enforce */
menu, .menu, .dropdown, .context-menu{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
}

/* Scrollbars (WebKit/Chromium) */
*::-webkit-scrollbar{ width:12px; height:12px }
*::-webkit-scrollbar-thumb{
  background:#253252; border:3px solid transparent; border-radius:999px; background-clip:padding-box;
}
*::-webkit-scrollbar-track{ background:transparent }

/* Utility focus ring for clickable items */
[tabindex], a, button, .btn{
  outline:none;
}
[tabindex]:focus, a:focus, button:focus, .btn:focus{
  box-shadow:var(--ctrl-focus-ring);
}

/* Responsive */
@media (max-width:1040px){
  .grid{grid-template-columns:1fr}
}
@media (max-width:780px){
  .nav-links{display:none}
  .video-grid{grid-template-columns:1fr}
  .status-badge{left:12px;bottom:12px}
}