/* ============================================================
   KOBBTAN — SIGNATURE LAYER v3 : "TERMINAL NOIR"
   A sharper, harder identity than the soft VIP-gold look before:
   deeper black, CRT scanlines, a terminal-style prefix on every
   headline, angular cut-corner panels instead of soft rounded
   cards, and an occasional glitch flicker on the main title.
   Loaded last in <head> — equal-specificity rules here win over
   each page's own inline <style>, so this reskins every page
   from one file. Per-carrier icon/name colors stay untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700;800&display=swap');

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  position: relative;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #000 !important;
}

/* ---- Signature #1: the live gold thread across the very top of every page ---- */
html::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 99999;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, #ffb347, #ffe8b0, #ff8c00, transparent 70%);
  background-size: 200% 100%;
  box-shadow: 0 0 18px 2px rgba(255,180,60,.65);
  animation: kb-thread 5s linear infinite;
}
@keyframes kb-thread {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Signature #2: CRT scanlines + ambient glow wash behind every page ---- */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse 60% 40% at 12% -6%, rgba(255,150,40,.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 108% 8%, rgba(80,220,160,.10), transparent 62%),
    radial-gradient(ellipse 55% 45% at 50% 112%, rgba(255,210,90,.12), transparent 65%);
  background-size: 100% 100%, 140% 140%, 140% 140%, 140% 140%;
  mix-blend-mode: screen;
  opacity: .6;
  animation: kb-aurora 16s ease-in-out infinite alternate;
}
@keyframes kb-aurora {
  0%   { background-position: 0 0, 0% 0%, 100% 0%, 50% 100%; }
  100% { background-position: 0 0, 8% 10%, 90% 12%, 55% 88%; }
}

/* ---- Site emblem watermark — the KOBBTAN crown/logo, faint, behind every page ---- */
.wrap { position: relative; }
.wrap::before {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: min(640px, 92vw);
  height: min(640px, 92vw);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background-image: url('/images/kobbtan-bg.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .16;
  mix-blend-mode: screen;
  filter: saturate(1.15);
}

/* ---- Film grain ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Selection + scrollbar ---- */
::selection { background: rgba(255,200,90,.32); color: #fff; }
::-moz-selection { background: rgba(255,200,90,.32); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,200,90,.45), rgba(255,140,0,.3)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,200,90,.65); }
html { scrollbar-width: thin; scrollbar-color: rgba(255,180,60,.45) transparent; }

/* ---- Accessible keyboard focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
.abtn:focus-visible, .inp:focus-visible, .net-item:focus-visible,
.sidebar-link:focus-visible, .tg-btn:focus-visible, .menu-toggle:focus-visible {
  outline: 2px solid rgba(120,255,180,.9);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { padding-top: 34px; padding-bottom: 92px; }

/* ---- Terminal-style eyebrow prefix on every headline (the signature move) ---- */
.page-hero h1::before,
.sec-title h3::before {
  content: 'root@kobbtan:~$';
  display: block;
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(120,255,180,.65);
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(120,255,180,.4);
}
.sec-title h3::before { margin-bottom: 3px; }

/* ---- Bigger, harder headline type with real glow + rare glitch flicker ---- */
.page-hero h1 {
  font-size: 1.75rem;
  letter-spacing: .2px;
  text-shadow: 0 0 30px rgba(255,190,90,.3);
  animation: kb-glitch 9s ease-in-out infinite;
}
@keyframes kb-glitch {
  0%, 96%, 100% { text-shadow: 0 0 30px rgba(255,190,90,.3); transform: translate(0,0); }
  97% { text-shadow: -2px 0 rgba(255,60,90,.8), 2px 0 rgba(80,255,180,.7); transform: translate(-1px,0); }
  98% { text-shadow: 2px 0 rgba(255,60,90,.8), -2px 0 rgba(80,255,180,.7); transform: translate(1px,0); }
  99% { text-shadow: 0 0 30px rgba(255,190,90,.3); transform: translate(0,0); }
}
.page-hero .hero-ico { filter: drop-shadow(0 0 18px rgba(255,190,90,.4)); }
.hero { padding-top: 36px; }
.logo-main { filter: drop-shadow(0 4px 26px rgba(255,180,50,.4)); }

/* ---- Angular "access panel" cut corners on hero + stats — sharper, less soft-lounge ---- */
.page-hero, .stats-card {
  border-radius: 6px;
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.fcard, .bal-section {
  border-radius: 14px;
}
.bucket-item, .net-icon { border-radius: 10px; }

/* ---- Animate the existing top hairline on cards into a live scan-sweep ---- */
.fcard::before,
.page-hero::after,
.bal-section::before {
  height: 2px;
  background-size: 220% 100%;
  animation: kb-shimmer 3.2s linear infinite;
  box-shadow: 0 0 10px 0 rgba(255,190,90,.35);
}
@keyframes kb-shimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: -140% 0; }
}

.fcard, .page-hero, .bal-section, .stats-card {
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.9);
}

/* ---- Buttons: console-style — sharp corners, power-surge glow, hard snap ---- */
.abtn {
  min-height: 52px;
  border-radius: 8px;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: .88rem;
  animation: kb-btn-glow 2.6s ease-in-out infinite;
}
@keyframes kb-btn-glow {
  0%, 100% { filter: brightness(1) saturate(1); box-shadow: 0 4px 22px rgba(0,0,0,.35); }
  50%      { filter: brightness(1.12) saturate(1.2); box-shadow: 0 4px 26px rgba(255,190,90,.25); }
}
.abtn:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px -12px rgba(0,0,0,.75), 0 0 24px rgba(120,255,180,.2);
}
.abtn:not(:disabled):active { transform: translateY(0) scale(.96); }
.abtn:disabled { animation: none; }

/* ---- Inputs: recessed terminal fields ---- */
.inp {
  border-radius: 8px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  font-family: 'JetBrains Mono', inherit;
}
.inp:focus { transform: translateY(-1px); }

.res.ok, .res.err, .res.success, .res.fail {
  animation: kb-pop .35s cubic-bezier(.2,.9,.35,1.05) both;
  border-radius: 8px;
}
@keyframes kb-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.net-item { border-radius: 14px; }
.net-item:hover { filter: brightness(1.05); }
.tg-btn { border-radius: 10px; min-height: 52px; }
.tg-btn:hover { filter: brightness(1.1); }

.sidebar.open { box-shadow: -24px 0 70px -10px rgba(0,0,0,.85); }
.sidebar-link, .tg-btn, .net-item .net-inner { min-height: 48px; }

/* ============================================================
   LEFTOVER OFFER/SERVICE PAGES that still use the old .hero /
   .svc / .stxt / .fcard naming (vf-500.html, or-500.html, etc.)
   The 4 main hub pages (vodafone/orange/etisalat/we) now use
   their own dedicated hub.css template instead.
   ============================================================ */

/* Seasonal decoration no longer relevant — remove clutter everywhere */
.lanterns, .ramadan-bar { display: none !important; }

/* Readability: these were set far too transparent to read comfortably */
.stxt p { color: rgba(225,222,245,.62) !important; }
.nbox { color: rgba(255,210,110,.68) !important; }

/* Offer / menu rows: real lift and shadow so they read as tappable cards, not flat lines */
.svc {
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
  transition: transform .2s cubic-bezier(.2,1,.3,1), box-shadow .2s, filter .2s;
}
.svc:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 22px 50px -22px rgba(0,0,0,.8); }

@media (prefers-reduced-motion: reduce) {
  html::before, html::after, .page-hero h1, .abtn { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
