/* =========================================================
   Ibom-Oil Dynamic Professional Standard
   Applies a consistent premium black/gold visual system across
   public, auth, customer, product-manager and admin pages.
   ========================================================= */
:root{
  --ios-bg:#020617;
  --ios-bg-2:#07111f;
  --ios-card:rgba(15,23,42,.86);
  --ios-card-2:rgba(2,6,23,.82);
  --ios-gold:#f4b41a;
  --ios-gold-2:#f8d978;
  --ios-text:#f8fafc;
  --ios-muted:#a7b0c0;
  --ios-border:rgba(148,163,184,.24);
  --ios-green:#22c55e;
  --ios-red:#ef4444;
  --ios-blue:#38bdf8;
  --ios-shadow:0 22px 60px rgba(0,0,0,.45);
  --ios-radius:22px;
}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(244,180,26,.13),transparent 28%),
    radial-gradient(circle at 95% 5%,rgba(56,189,248,.10),transparent 30%),
    linear-gradient(135deg,#020617,#07111f 45%,#020617)!important;
  color:var(--ios-text)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 80%);
  z-index:-1;
}
.container{width:min(1180px,calc(100% - 32px));max-width:1180px;}
header,.header,.topbar{
  background:linear-gradient(180deg,rgba(2,6,23,.96),rgba(2,6,23,.86))!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(244,180,26,.16)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.22);
}
.navbar,.nav{min-height:72px;}
.logo,.brand{
  letter-spacing:.01em;
}
.logo img,.brand img,.top-logo img{
  border:2px solid rgba(244,180,26,.45)!important;
  box-shadow:0 0 0 4px rgba(244,180,26,.07),0 12px 30px rgba(0,0,0,.32)!important;
}
.nav-links a,.nav-btns a,.nav-actions a,.menu a{
  border-radius:999px;
  transition:.22s ease;
}
.nav-links a:hover,.nav-btns a:hover,.nav-actions a:hover,.menu a:hover{
  background:rgba(244,180,26,.08)!important;
  color:var(--ios-gold)!important;
}
.btn,.btn-primary,.btn.gold,.btn-gold,button[type="submit"]{
  border-radius:999px!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}
.btn:hover,.btn-primary:hover,.btn.gold:hover,.btn-gold:hover,button[type="submit"]:hover{
  transform:translateY(-2px);
}
.btn.gold,.btn-primary,.btn-gold,button[type="submit"]{
  background:linear-gradient(135deg,var(--ios-gold),var(--ios-gold-2))!important;
  color:#111827!important;
  border:0!important;
  box-shadow:0 14px 34px rgba(244,180,26,.24)!important;
}
.btn.ghost,.btn-ghost{
  background:rgba(15,23,42,.72)!important;
  border:1px solid rgba(244,180,26,.35)!important;
  color:var(--ios-gold)!important;
}
.card,.panel,.form.card,.kpi,.table-card,.table-wrap,.terms-card,.about-card,.trading-chart,.brand-gallery-card,.market-card,.stat,.notice,.checkout-summary,.cart-summary{
  background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.86))!important;
  border:1px solid var(--ios-border)!important;
  border-radius:var(--ios-radius)!important;
  box-shadow:var(--ios-shadow)!important;
}
.card:hover,.panel:hover,.about-card:hover,.kpi:hover,.product-card:hover{
  border-color:rgba(244,180,26,.34)!important;
}
.section-title,h1,h2{
  color:var(--ios-gold)!important;
  letter-spacing:-.02em;
}
.lead,.muted,.section-sub,p.hint,small{
  color:var(--ios-muted)!important;
}
input,select,textarea{
  background:rgba(15,23,42,.92)!important;
  border:1px solid rgba(148,163,184,.30)!important;
  color:var(--ios-text)!important;
  border-radius:16px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(244,180,26,.82)!important;
  box-shadow:0 0 0 4px rgba(244,180,26,.14)!important;
  outline:none!important;
}
label{color:var(--ios-muted)!important;font-weight:700;}
.form.card{
  position:relative;
  overflow:hidden;
}
.form.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(circle at top left,rgba(244,180,26,.18),transparent 42%);
  opacity:.8;
}
.form.card>*{position:relative;z-index:1;}
.password-wrap{position:relative;}
.password-wrap input{padding-right:48px!important;}
.toggle-pass{
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:var(--ios-gold)!important;
  background:transparent!important;
  border:0!important;
  width:auto!important;
  padding:0!important;
  margin:0!important;
}
.msg,.error,.success,.ok,.err{
  border-radius:16px!important;
  padding:12px 14px!important;
  line-height:1.6;
}
.msg.success,.success,.ok{background:rgba(34,197,94,.12)!important;border:1px solid rgba(34,197,94,.28)!important;color:#bbf7d0!important;}
.msg.error,.error,.err{background:rgba(239,68,68,.12)!important;border:1px solid rgba(239,68,68,.28)!important;color:#fecaca!important;}
.notice{background:rgba(244,180,26,.08)!important;color:#fde68a!important;border-color:rgba(244,180,26,.28)!important;}
.layout{background:transparent!important;}
.sidebar{
  background:linear-gradient(180deg,rgba(2,6,23,.98),rgba(2,6,23,.92))!important;
  border-right:1px solid rgba(244,180,26,.12)!important;
}
.sidebar a{
  border:1px solid transparent;
  transition:.22s ease;
}
.sidebar a.active,.sidebar a:hover{
  background:rgba(244,180,26,.09)!important;
  border-color:rgba(244,180,26,.24)!important;
  color:#fff!important;
}
.main{min-width:0;}
.kpis,.stats-grid,.referral-stats{
  display:grid;
  gap:16px;
}
.kpi .value,.stat-value,.price{
  color:#fff!important;
  text-shadow:0 0 22px rgba(244,180,26,.16);
}
.table-wrap{overflow:hidden!important;}
.table-wrap table{border-collapse:collapse;}
th{
  background:rgba(2,6,23,.95)!important;
  color:var(--ios-gold)!important;
}
td,th{border-color:rgba(148,163,184,.14)!important;}
tr:hover{background:rgba(244,180,26,.045)!important;}
.badge,.pill{
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.badge.pending{background:var(--ios-gold)!important;color:#111827!important;}
.badge.approved,.badge.paid,.badge.delivered,.badge.active,.profit{background:var(--ios-green)!important;color:#052e16!important;}
.badge.rejected,.badge.cancelled,.badge.failed,.loss{background:var(--ios-red)!important;color:#fff!important;}
.badge.processing,.badge.shipped,.badge.ready,.neutral{background:var(--ios-blue)!important;color:#082f49!important;}
.mobile-menu{
  background:rgba(2,6,23,.98)!important;
  backdrop-filter:blur(16px);
}
.mobile-menu a{
  background:rgba(15,23,42,.9)!important;
  border-color:rgba(148,163,184,.22)!important;
}
.footer{
  background:rgba(2,6,23,.98)!important;
  border-top:1px solid rgba(244,180,26,.12)!important;
}
.footer a,.footer-links a{color:var(--ios-gold)!important;}
.float-btn,.fab{
  box-shadow:0 14px 34px rgba(244,180,26,.20)!important;
}
/* page polish */
.hero,.section,section{position:relative;}
.hero .btn,.section .btn{white-space:nowrap;}
.products,.products-grid{gap:22px!important;}
.product-img,.product-image{transition:transform .45s ease, filter .45s ease;}
.card:hover .product-img,.card:hover .product-image{transform:scale(1.045);filter:saturate(1.1);}
.product-image-wrap,.product-img{background:#000!important;}
.chart-container{min-height:260px;}
/* gentle reveal without breaking non-JS pages */
[data-ibom-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease;}
[data-ibom-reveal].show{opacity:1;transform:none;}
@media(max-width:1100px){
  .products,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .hero-grid,.two-col,.about-grid,.market-grid,.contact-grid{grid-template-columns:1fr!important;}
}
@media(max-width:900px){
  .nav-links,.nav-btns,.nav-actions,.menu{display:none!important;}
  .mobile-btn{display:block!important;}
  .layout{grid-template-columns:1fr!important;}
  .sidebar{position:static!important;height:auto!important;border-right:0!important;border-bottom:1px solid rgba(244,180,26,.14)!important;display:flex!important;gap:8px;overflow-x:auto;white-space:nowrap;}
  .sidebar a{flex:0 0 auto;}
  .main{margin-left:0!important;padding:18px!important;}
}
@media(max-width:760px){
  .container{width:calc(100% - 24px)!important;}
  .products,.products-grid,.brand-gallery-grid,.kpis,.stats-grid,.referral-stats,.grid,.form-grid{grid-template-columns:1fr!important;}
  .row{grid-template-columns:1fr!important;}
  .card,.panel,.form.card,.table-card{padding:16px!important;border-radius:18px!important;}
  .hero-actions,.card-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .hero-actions .btn,.card-actions .btn,.form.card .btn,form .btn{width:100%!important;}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  table{min-width:760px;}
  .chart-container{height:250px!important;}
  .float-wrap{right:10px!important;bottom:10px!important;}
  .float-btn,.fab{width:46px!important;height:46px!important;font-size:18px!important;}
}
@media(max-width:440px){
  h1,.hero h1{font-size:clamp(1.65rem,9vw,1.9rem)!important;line-height:1.12!important;}
  h2,.section-title{font-size:1.35rem!important;}
  .container{width:calc(100% - 20px)!important;}
  .form.card{padding:14px!important;}
  input,select,textarea{font-size:16px!important;}
}

.badge.awaiting_settlement,.badge.processing-payout{background:#f59e0b!important;color:#111!important;border:1px solid rgba(245,158,11,.45)!important;}
.badge.processing{background:#38bdf8!important;color:#082f49!important;}