/* ==========================================================================
   dark-emerald-rtl.css — Front-End only visual layer (v1.0)
   - Visual-only: no logic, no IDs/names/routes changed.
   - Loaded LAST via render_header_scripts() + admin/header.php so it wins
     the cascade over pp-theme / style.min / user-panel / seoclevers-theme.
   - Palette: bg #111214 / #151617 / #191A1E · card #1D1E23 / #202126
     accent #22D66B / hover #31E57B · text #F8FAF9 / #A5AAA7
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --bg-main:#111214;
  --bg-secondary:#191A1E;
  --bg-card:#1D1E23;
  --bg-card-2:#202126;
  --bg-input:#151617;
  --accent:#22D66B;
  --accent-hover:#31E57B;
  --accent-ink:#062814;
  --text-main:#F8FAF9;
  --text-muted:#A5AAA7;
  --border-color:rgba(255,255,255,.07);
  --shadow-green:0 0 30px rgba(34,214,107,.12);
  --glow-soft:rgba(34,214,107,.12);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --danger:#EF5A5A;
  --warn:#F5B942;
  --ok:#22D66B;
  /* remap legacy systems to emerald (visual only) */
  --color-6:#22D66B; --color-7:#31E57B; --color-8:rgba(34,214,107,.12);
  --primary:#22D66B; --primary-hover:#31E57B; --primary-glow:rgba(34,214,107,.38);
  --primary-rgb:34,214,107;
  --admin-yellow:#22D66B; --admin-yellow-hover:#31E57B; --admin-primary:#22D66B;
  --admin-primary-hover:#31E57B;
  --ui-accent:#22D66B; --ui-accent-2:#31E57B; --ui-glow:0 12px 30px rgba(34,214,107,.28);
  --dp-accent:#22D66B; --dp-accent-2:#31E57B; --dp-accent-soft:rgba(34,214,107,.12);
}

/* ---- base ---- */
html{scroll-behavior:smooth}
body,body.dark,body.guest,body.user-panel-body{
  background-color:var(--bg-main)!important;
  color:var(--text-muted)!important;
  font-family:'Cairo','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif!important;
  letter-spacing:0!important;
}
body h1,body h2,body h3,body h4,body h5,body h6,
.card-title,.section-title,.page-title,.nk-section-title{color:var(--text-main)!important}
body p,body li{line-height:1.9}
::selection{background:var(--accent);color:#062814}
a{transition:color .18s ease}
a:hover{color:var(--accent)!important}
/* soft emerald ambient glow (decorative, pointer-events none) */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 85% -5%,rgba(34,214,107,.13),transparent 70%),
    radial-gradient(700px 420px at 8% 4%,rgba(34,214,107,.08),transparent 72%),
    radial-gradient(900px 600px at 50% 110%,rgba(34,214,107,.06),transparent 70%);
}
body.guest::before,body:not(.user-panel-body):not(.guest)::before{display:none!important}

/* ---- surfaces: cards / panels ---- */
.card,.stat-card,.profit-card,.blog-card,.auth-card,.error-card,.metric-card,
.widget,.panel,.box,.hfs-content,.step-card,.country-item,.service-item,
.pkg-card,.login-pm,.product-article,.faq-item,.ticket-category-tile,
.user-stat-card,.announcement-card{
  background:var(--bg-card)!important;
  background-color:var(--bg-card)!important;
  border:1px solid var(--border-color)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:var(--text-muted)!important;
}
.card-header,.card-footer,.panel-heading,.panel-footer{
  background:var(--bg-secondary)!important;
  border-color:var(--border-color)!important;
  color:var(--text-main)!important;
}
.blog-card:hover,.service-item:hover,.pkg-card:hover,.country-item:hover,
.login-pm:hover,.ticket-category-tile:hover{
  transform:translateY(-3px);border-color:rgba(34,214,107,.45)!important;
  box-shadow:var(--shadow-green),0 18px 44px rgba(0,0,0,.45)!important;
}

/* ---- buttons ---- */
.btn-primary,.btn.btn-primary,.header-btn:not(.h-btn-blue),
button.btn-primary,.addBalanceBtn.active,.nav-custom-pills li button.active{
  background:var(--accent)!important;background-color:var(--accent)!important;
  border:1px solid var(--accent)!important;color:#062814!important;font-weight:800!important;
  border-radius:12px!important;box-shadow:0 10px 26px rgba(34,214,107,.28)!important;
}
.btn-primary:hover,.btn.btn-primary:hover,.header-btn:not(.h-btn-blue):hover{
  background:var(--accent-hover)!important;background-color:var(--accent-hover)!important;
  border-color:var(--accent-hover)!important;color:#062814!important;
  box-shadow:0 12px 30px rgba(34,214,107,.36)!important;
}
.btn-light,.btn.btn-light,.btn-outline,.btn.btn-outline,.header-btn.h-btn-blue{
  background:rgba(255,255,255,.05)!important;border:1px solid var(--border-color)!important;
  color:var(--text-main)!important;border-radius:12px!important;font-weight:700!important;
}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent)!important;outline-offset:2px;
}

/* ---- header / hero ---- */
.header,.site-header,.navbar,header.header,.guest .header-wrapper,
.user-topbar,.admin-topbar{
  background:rgba(17,18,20,.88)!important;background-color:rgba(17,18,20,.88)!important;
  border-bottom:1px solid var(--border-color)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
.nk-section-title span,.section-title_title span{color:var(--accent)!important}
.label-home,.section-title__badge .label{
  background:rgba(34,214,107,.12)!important;border:1px solid rgba(34,214,107,.35)!important;
  color:var(--accent)!important;border-radius:999px!important;
}
.label-home .label-icon,.label-home i{color:var(--accent)!important}
.homeHeader{background:
  radial-gradient(700px 380px at 80% 0%,rgba(34,214,107,.14),transparent 70%),
  radial-gradient(600px 360px at 12% 8%,rgba(34,214,107,.07),transparent 70%)!important}
.home-rates-item,.home-rates-text{
  background:rgba(34,214,107,.08)!important;border:1px solid rgba(34,214,107,.25)!important;
  border-radius:999px!important;color:var(--text-main)!important;
}
#ppProgress i{background:linear-gradient(90deg,var(--accent),var(--accent-hover))!important}
.step-box-item h3{color:var(--text-main)!important}
.hfs-count{color:var(--text-main)!important}
.hfs-title,.step-box-item p{color:var(--text-muted)!important}

/* ---- forms ---- */
input.form-control,select.form-control,select.form-select,textarea.form-control,
.form-control,.form-select{
  background-color:var(--bg-input)!important;color:var(--text-main)!important;
  border:1px solid var(--border-color)!important;border-radius:12px!important;
}
input.form-control::placeholder,textarea.form-control::placeholder{color:#7d8380!important}
input.form-control:focus,select.form-control:focus,textarea.form-control:focus,
.form-control:focus,.form-select:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(34,214,107,.16)!important;
  background-color:#131416!important;color:var(--text-main)!important;
}
.form-label,label{color:var(--text-main)!important}
.alert{border-radius:14px!important;border:1px solid var(--border-color)!important}
.alert-success{background:rgba(34,214,107,.1)!important;color:#7BF0A8!important}
.alert-danger{background:rgba(239,90,90,.1)!important;color:#FF9B9B!important}
.alert-warning{background:rgba(245,185,66,.1)!important;color:#FFD88A!important}

/* ---- tables + status (visual only) ---- */
.table{color:var(--text-muted)!important;background:var(--bg-card)!important}
.table thead th{background:var(--bg-secondary)!important;color:var(--text-main)!important}
.table td,.table th{border-color:var(--border-color)!important}
.table tbody tr:hover td{background:rgba(34,214,107,.05)!important}
.table-responsive,.table-wrapper{overflow-x:auto}
.badge,.status-badge{border-radius:999px!important;font-weight:700!important}
.badge-pending,.status-pending{background:rgba(245,185,66,.14)!important;color:#FFD88A!important}
.badge-processing,.status-processing{background:rgba(96,165,250,.14)!important;color:#9CC4FF!important}
.badge-completed,.status-completed{background:rgba(34,214,107,.14)!important;color:#5FEC94!important}
.badge-partial,.status-partial{background:rgba(245,158,11,.14)!important;color:#FBBF24!important}
.badge-canceled,.status-canceled,.badge-failed{background:rgba(239,90,90,.13)!important;color:#FF9B9B!important}



/* ================= LANDING high-specificity (body#outside beats pp-vivid/glass) === */
body#outside,html body#outside,body#outside.dark,html body#outside.dark{
  background-color:#111214!important;
  color:#A5AAA7!important;
  font-family:'Cairo','Tajawal',system-ui,sans-serif!important;
}
body#outside::before{
  background:
    radial-gradient(880px 680px at 8% 2%,rgba(34,214,107,.20),transparent 60%),
    radial-gradient(760px 620px at 94% 12%,rgba(34,214,107,.12),transparent 60%),
    radial-gradient(820px 700px at 84% 78%,rgba(34,214,107,.10),transparent 60%),
    linear-gradient(180deg,#111214 0%,#151617 50%,#111214 100%)!important;
  opacity:1!important;
}
body#outside::after{
  background-image:
    linear-gradient(rgba(34,214,107,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,214,107,.14) 1px,transparent 1px)!important;
  opacity:.10!important;
}
body#outside .homeHeader{
  background:
    radial-gradient(700px 380px at 80% 0%,rgba(34,214,107,.16),transparent 70%),
    radial-gradient(600px 360px at 12% 8%,rgba(34,214,107,.08),transparent 70%)!important;
}
body#outside .homeBg{opacity:.28!important}
body#outside .homeBg img{opacity:.28!important}
body#outside .header,body#outside .main-header{
  background:rgba(17,18,20,.90)!important;background-color:rgba(17,18,20,.90)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
body#outside .header-btn:not(.h-btn-blue),body#outside .btn.btn-primary,body#outside .btn-primary{
  background:#22D66B!important;background-color:#22D66B!important;
  border-color:#22D66B!important;color:#062814!important;
  box-shadow:0 10px 26px rgba(34,214,107,.30)!important;
}
body#outside .header-btn:not(.h-btn-blue):hover,body#outside .btn.btn-primary:hover{
  background:#31E57B!important;background-color:#31E57B!important;border-color:#31E57B!important;
}
body#outside .nk-section-title span,body#outside .section-title_title span{color:#22D66B!important}
body#outside .card,body#outside .step-card,body#outside .hfs-content,
body#outside .country-item,body#outside .login-pm,body#outside .product-article{
  background:#1D1E23!important;background-color:#1D1E23!important;
  border:1px solid rgba(255,255,255,.07)!important;border-radius:16px!important;
}
body#outside .box-icon,body#outside .home-rates-icon{
  background:rgba(34,214,107,.12)!important;color:#22D66B!important;
  border:1px solid rgba(34,214,107,.30)!important;
}
body#outside .form-control{background-color:#151617!important;color:#F8FAF9!important;border-color:rgba(255,255,255,.07)!important}

body#outside .pp-orb{opacity:.45!important;filter:blur(64px) saturate(140%)!important}
body#outside .pp-orb-1{background:radial-gradient(circle at 30% 30%,rgba(34,214,107,.90),rgba(34,214,107,0) 70%)!important}
body#outside .pp-orb-2{background:radial-gradient(circle at 60% 40%,rgba(49,229,123,.70),rgba(49,229,123,0) 70%)!important}
body#outside .pp-orb-3{background:radial-gradient(circle at 50% 50%,rgba(34,214,107,.55),rgba(34,214,107,0) 70%)!important}
body#outside .pp-orb-4{background:radial-gradient(circle at 50% 50%,rgba(16,185,129,.55),rgba(16,185,129,0) 70%)!important}