/* Ibom-Oil Responsive Fixes - applied after the main stylesheet/inline page CSS */
:root { --mobile-pad: 16px; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
.container { width: min(1150px, calc(100% - 32px)); max-width: 1150px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }

/* Shared navigation */
header .navbar, .navbar, .nav { min-height: 64px; height: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 0; }
.logo, .brand { min-width: 0; }
.logo div, .brand { white-space: nowrap; }
.nav-links, .nav-btns, .nav-actions, .menu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nav-links a, .nav-btns a, .nav-actions a, .menu a { white-space: nowrap; }

/* Buttons/forms */
.btn, button, input, select, textarea { max-width: 100%; }
.btn { min-height: 42px; text-align: center; }
form .btn, form button { margin-top: 4px; }
.form, .card, .panel, .kpi { min-width: 0; }

/* Grids */
.grid { display: grid; gap: 16px; }
.products, .products-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpis, .referral-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.two-col, .hero-grid, .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tables */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 760px; }
td form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
td form input { min-width: 120px; margin: 0; }

/* Dashboard/admin shell */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.main { min-width: 0; padding: 20px; }
.sidebar { overflow-y: auto; }

/* Footer/floating actions */
.float, .float-wrap { z-index: 80; }
.float-wrap { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.float-btn { box-shadow: 0 10px 28px rgba(0,0,0,.35); }

@media (max-width: 1100px) {
  .container { width: min(100% - 28px, 1000px); }
  .two-col, .about-grid { grid-template-columns: 1fr; }
  .products, .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  header .navbar, .navbar, .nav { gap: 10px; }
  .nav-links, .nav-btns, .nav-actions, .menu { width: 100%; justify-content: center; gap: 8px; }
  .nav-links a, .nav-btns a, .nav-actions a, .menu a { padding: 9px 10px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--mobile-pad); scrollbar-width: thin; }
  .sidebar a { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; }
  .main { padding: 18px var(--mobile-pad); }
  .row { grid-template-columns: 1fr; }
  .referral-link { flex-direction: column; align-items: stretch; }
  .referral-link label { width: 100%; }
}

@media (max-width: 768px) {
  .container { width: calc(100% - 24px); }
  h1, .hero h1 { font-size: clamp(1.75rem, 8vw, 2.15rem) !important; line-height: 1.12; }
  h2, .section-title { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; }
  .section, section, .hero { padding: 38px 0; }
  .products, .products-grid, .brand-gallery-grid, .kpis, .referral-stats { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .card, .panel, .terms-card { padding: 16px; border-radius: 16px; }
  .hero-actions, .card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn, .card-actions .btn, .form .btn, .card > .btn { width: 100%; }
  .product-img, .product-image-wrap { height: auto; min-height: 190px; }
  .chart-container { height: 250px !important; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 10px; }
  .terms-page { padding: 42px 0 28px; }
  .terms-scroll { max-height: none; padding-right: 0; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 20px); }
  header .navbar, .navbar, .nav { justify-content: center; text-align: center; }
  .logo, .brand { justify-content: center; }
  .nav-links, .nav-btns, .nav-actions, .menu { flex-direction: column; align-items: stretch; }
  .nav-links a, .nav-btns a, .nav-actions a, .menu a, .nav-btns .btn, .nav-actions .btn { width: 100%; }
  .main { padding: 14px 10px; }
  .sidebar { padding-left: 10px; padding-right: 10px; }
  table { font-size: .92rem; }
  th, td { padding: 10px; }
  td form { flex-direction: column; align-items: stretch; }
  td form input, td form .btn, td form button { width: 100%; }
  .btn { width: 100%; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab-btn { flex: 0 0 auto; width: auto; }
  .float-wrap, .float { right: 10px; bottom: 10px; }
  .fab, .float-btn { width: 46px; height: 46px; }
}


/* ===== Final deployment responsiveness patch ===== */
.mobile-btn{display:none;background:transparent;border:0;color:var(--gold);font-size:24px;cursor:pointer;margin-left:auto;}
.mobile-menu{display:none;background:#000;border-top:1px solid var(--border);padding:12px 0;}
.mobile-menu a{display:block;width:calc(100% - 28px);margin:8px auto;padding:12px 14px;background:#111;border:1px solid var(--border);border-radius:12px;color:var(--gold);font-weight:800;}
.mobile-menu.show{display:block;}
.password-wrap{position:relative;}
.password-wrap input{padding-right:48px;}
.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--gold);cursor:pointer;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;}
.notice{background:#15120a;border:1px solid #4a3a12;color:#f5d67a;padding:12px;border-radius:12px;margin:12px 0;line-height:1.6;}
.msg.success,.success{background:#10351f;color:#bfffd6;}
.msg.error,.error{background:#351010;color:#ffd1d1;}

@media(max-width:900px){
  .nav-links,.nav-btns,.nav-actions,.menu{display:none!important;}
  .mobile-btn{display:block;}
  header .navbar,.navbar,.nav{justify-content:space-between;text-align:left;}
  .layout{grid-template-columns:1fr!important;}
  .sidebar{position:static!important;height:auto!important;border-right:0!important;border-bottom:1px solid var(--border)!important;display:flex;gap:8px;overflow-x:auto;white-space:nowrap;}
  .main{padding:16px!important;}
}
@media(max-width:700px){
  .container{width:calc(100% - 22px)!important;padding-left:0!important;padding-right:0!important;}
  .row,.form-grid,.two-col,.hero-grid,.about-grid,.grid,.kpis,.referral-stats{grid-template-columns:1fr!important;}
  .products,.products-grid,.brand-gallery-grid{grid-template-columns:1fr!important;}
  .card,.panel,.form{border-radius:16px!important;padding:16px!important;}
  .form{margin:18px auto!important;width:100%!important;}
  .btn,button[type=submit],form button{width:100%;}
  input,select,textarea{font-size:16px;}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  table{min-width:760px;}
  td form{flex-direction:column;align-items:stretch;}
  td form input,td form select,td form button{width:100%;}
  .chart-container{height:240px!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:420px){
  h1,.hero h1{font-size:1.75rem!important;line-height:1.15!important;}
  h2,.section-title{font-size:1.45rem!important;}
  .product-img,.product-image-wrap{min-height:190px!important;}
  .chart-container{height:220px!important;}
}


/* ===== IbomOilFile style migration responsive hardening ===== */
@media(max-width:1024px){
  .auth-wrapper{grid-template-columns:1fr!important;gap:1.5rem!important;}
  .auth-brand,.auth-card{padding:1rem!important;}
  .products,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .hero-grid,.two-col,.about-grid{grid-template-columns:1fr!important;}
}
@media(max-width:768px){
  body{font-size:.95rem;}
  .section,.hero,section{padding:38px 0!important;}
  .products,.products-grid,.brand-gallery-grid,.kpis,.stats-grid,.referral-stats{grid-template-columns:1fr!important;}
  .form.card{width:100%!important;max-width:100%!important;}
  .auth-brand{order:2!important;}
  .auth-card{order:1!important;}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  table{min-width:760px;}
}
@media(max-width:480px){
  .container{width:calc(100% - 20px)!important;}
  .card,.panel,.form.card{padding:14px!important;}
  input,select,textarea{font-size:16px!important;}
}

/* ================= UNIVERSAL HAMBURGER / SIDEBAR FIX ================= */
.ibom-nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  z-index:998;
}
.ibom-nav-overlay.show{display:block!important;}
.mobile-menu.show{display:block!important;}
.mobile-btn,.admin-menu-btn,.menu-btn{cursor:pointer;}

@media (max-width: 980px){
  /* position handled per page; do not reset topbar/navbar here */
  .mobile-btn{display:inline-flex!important;align-items:center;justify-content:center;}
  .nav-links,.nav-btns,.nav-actions,.menu{display:none!important;}

  .layout{display:block!important;}
  .layout .sidebar,
  aside.sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:min(290px,84vw)!important;
    height:100vh!important;
    transform:translateX(-105%)!important;
    transition:transform .25s ease!important;
    z-index:1200!important;
    background:#000!important;
    border-right:1px solid var(--border,#222)!important;
    overflow-y:auto!important;
    display:block!important;
    padding:16px 12px!important;
  }
  .layout .sidebar.open,
  aside.sidebar.open{transform:translateX(0)!important;}
  .layout .main,
  main.main{margin-left:0!important;width:100%!important;padding-left:14px!important;padding-right:14px!important;}

  .dashboard-shell{display:block!important;}
  .dashboard-sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:min(290px,84vw)!important;
    height:100vh!important;
    transform:translateX(-105%)!important;
    transition:transform .25s ease!important;
    z-index:1200!important;
    background:#000!important;
    border-right:1px solid var(--border,#222)!important;
    overflow-y:auto!important;
    display:block!important;
    padding:16px 12px!important;
  }
  .dashboard-sidebar.open{transform:translateX(0)!important;}
  .dashboard-sidebar a,
  .sidebar a{display:flex!important;width:100%!important;white-space:normal!important;margin-bottom:8px!important;border-radius:12px!important;}
}

@media (min-width:981px){
  .ibom-nav-overlay{display:none!important;}
}

/* Android app placeholder: same size as WhatsApp/Phone floating icons */
.float-wrap .android-float-btn{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  padding:0!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
  text-decoration:none!important;
}
.mobile-menu a.mobile-android-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  padding:0!important;
  margin:10px auto!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:22px!important;
  text-align:center!important;
}