/* The OneKart Luxe Theme — inspired by uploaded OBED portal styling */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Outfit:wght@300;400;500;600;700&display=swap');

:root{
  --ok-bg:#0a0807;
  --ok-bg2:#13100d;
  --ok-bg3:#1a1612;
  --ok-card:rgba(24,20,16,.86);
  --ok-card2:rgba(255,255,255,.035);
  --ok-ink:#f5ecdc;
  --ok-dim:#a89c87;
  --ok-muted:#7a6f5e;
  --ok-gold:#c9a45c;
  --ok-gold2:#e7c989;
  --ok-deep:#8a6a30;
  --ok-line:rgba(201,164,92,.18);
  --ok-line2:rgba(201,164,92,.38);
  --ok-red:#c47b7b;
  --ok-green:#7caf6f;
  --ok-display:'Cormorant Garamond',Georgia,serif;
  --ok-body:'Outfit',ui-sans-serif,system-ui,sans-serif;
}

html.onekart-luxe, .onekart-luxe body,
.admin-body, .customer-body{
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201,164,92,.08), transparent 62%),
    radial-gradient(circle at 8% 12%, rgba(231,201,137,.05), transparent 25%),
    linear-gradient(135deg,#070504 0%,#0a0807 48%,#100d0a 100%) !important;
  color:var(--ok-ink) !important;
  font-family:var(--ok-body) !important;
  font-weight:300;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity:.035;
  mix-blend-mode:overlay;
}

h1,h2,h3,.brand,.footer-brand,.dash-brand .name,.customer-side-brand .name{
  font-family:var(--ok-display) !important;
  letter-spacing:-.01em;
}
h1{font-weight:500 !important}
h2,h3{font-weight:500 !important}
a{color:inherit}

.eyebrow{
  font-family:var(--ok-body) !important;
  font-size:.68rem !important;
  letter-spacing:.36em !important;
  text-transform:uppercase !important;
  color:var(--ok-gold) !important;
  font-weight:600 !important;
}
.lead,.muted{color:var(--ok-dim) !important}
.gold{color:var(--ok-gold2)!important}

.site-header{
  background:rgba(10,8,7,.82) !important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ok-line) !important;
}
.brand,.footer-brand{
  color:var(--ok-gold) !important;
  text-transform:uppercase;
}
.brand small{color:var(--ok-dim)!important;letter-spacing:.22em}
.main-nav a{
  color:var(--ok-dim) !important;
  letter-spacing:.08em;
  transition:.25s ease;
}
.main-nav a:hover{color:var(--ok-gold2)!important}

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--ok-line);
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 20%, rgba(201,164,92,.13), transparent 32%),
    linear-gradient(180deg, rgba(201,164,92,.035), transparent 50%);
  pointer-events:none;
}
.hero h1{
  font-size:clamp(3rem,7vw,6.8rem) !important;
  line-height:.9 !important;
}
.hero h1 span{color:var(--ok-gold2)!important;font-style:italic}
.hero-media-card,.detail-product-image,.sample-showcase,.form-wrap,.card{
  background:linear-gradient(180deg, rgba(24,20,16,.92), rgba(13,11,9,.92)) !important;
  border:1px solid var(--ok-line) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.32) !important;
}
.card,.form-wrap{border-radius:24px !important}
.hero-media-card{border-radius:34px !important;overflow:hidden}
.category-card,.product-card,.admin-menu-card,.admin-kpi{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.category-card:hover,.product-card:hover,.admin-menu-card:hover{
  transform:translateY(-4px);
  border-color:var(--ok-line2)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.42)!important;
}

.btn{
  position:relative !important;
  border:1px solid var(--ok-gold) !important;
  background:linear-gradient(135deg, rgba(201,164,92,.16), rgba(231,201,137,.06)) !important;
  color:var(--ok-gold2) !important;
  border-radius:999px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  font-weight:600;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-100%);
  transition:transform .7s ease;
}
.btn:hover::before{transform:translateX(100%)}
.btn:hover{color:#0a0807!important;background:linear-gradient(135deg,var(--ok-gold2),var(--ok-gold))!important}
.btn-secondary{
  border-color:var(--ok-line2)!important;
  background:rgba(255,255,255,.035)!important;
  color:var(--ok-ink)!important;
}

input,select,textarea{
  background:rgba(255,255,255,.045)!important;
  border:1px solid var(--ok-line)!important;
  color:var(--ok-ink)!important;
  border-radius:16px!important;
}
label{color:var(--ok-dim)!important}
table{border-color:var(--ok-line)!important}
th{color:var(--ok-gold2)!important;background:rgba(201,164,92,.08)!important}
td{border-color:var(--ok-line)!important;color:var(--ok-ink)!important}

.admin-layout{
  display:grid!important;
  grid-template-columns:300px minmax(0,1fr)!important;
  min-height:100vh;
}
.admin-sidebar,.customer-sidebar{
  background:linear-gradient(180deg,rgba(19,16,13,.98),rgba(8,7,6,.98))!important;
  border-right:1px solid var(--ok-line)!important;
  padding:0!important;
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  overflow-y:auto!important;
}
.dash-brand,.customer-side-brand{
  padding:26px 28px 22px;
  border-bottom:1px solid var(--ok-line);
}
.dash-brand .name,.customer-side-brand .name{
  font-size:1.9rem;
  color:var(--ok-gold);
  letter-spacing:.12em;
  line-height:1;
}
.dash-brand small,.customer-side-brand small{
  display:block;
  color:var(--ok-muted);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.62rem;
  margin-top:6px;
}
.dash-user,.customer-side-user{
  display:flex;
  gap:14px;
  align-items:center;
  padding:22px 28px;
  border-bottom:1px solid var(--ok-line);
}
.dash-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--ok-gold2),var(--ok-deep));
  color:#090705;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ok-display);
  font-size:1.35rem;font-weight:700;
  flex:0 0 auto;
}
.dash-user-name{font-family:var(--ok-display);font-size:1.18rem;color:var(--ok-gold2);line-height:1}
.dash-user-meta{font-size:.76rem;color:var(--ok-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.dash-nav-section{
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ok-muted);
  padding:18px 24px 7px;
  font-weight:700;
}
.admin-sidebar nav,.customer-sidebar nav{display:block!important;padding:0 12px 24px}
.admin-sidebar nav a,.customer-sidebar nav a{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:100%!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  border:1px solid transparent!important;
  color:var(--ok-dim)!important;
  font-size:.88rem!important;
  margin:3px 0;
}
.admin-sidebar nav a:hover,.customer-sidebar nav a:hover,
.admin-sidebar nav a.active,.customer-sidebar nav a.active{
  color:var(--ok-gold2)!important;
  background:rgba(201,164,92,.08)!important;
  border-color:var(--ok-line)!important;
}

.admin-main,.customer-content{
  min-width:0;
  padding:0;
}
.admin-top,.customer-topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(10,8,7,.82)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ok-line)!important;
  padding:20px 28px!important;
}
.admin-top h1,.customer-topbar h1{font-size:2rem;color:var(--ok-ink)}

.customer-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
}
.customer-main{
  padding:32px 28px 70px!important;
  max-width:1500px!important;
  margin:0!important;
}
.customer-footer{border-top:1px solid var(--ok-line);background:rgba(10,8,7,.7)}
.customer-nav-toggle,.admin-sidebar-toggle,.customer-mobile-toggle{
  background:rgba(201,164,92,.1)!important;
  border:1px solid var(--ok-line2)!important;
  color:var(--ok-gold2)!important;
  border-radius:999px!important;
}
.customer-header{display:none!important}

.admin-kpi-grid,.admin-full-menu-grid{
  gap:18px!important;
}
.admin-kpi h2{color:var(--ok-gold2)!important;font-family:var(--ok-display)!important}
.kpi-icon{
  background:rgba(201,164,92,.12);
  border:1px solid var(--ok-line);
  border-radius:16px;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
.status-badge,.badge,.tag{
  border:1px solid var(--ok-line2)!important;
  background:rgba(201,164,92,.1)!important;
  color:var(--ok-gold2)!important;
  border-radius:999px!important;
}

.announcement-card{
  border-left:3px solid var(--ok-gold)!important;
}
.announcement-strip{
  display:grid;
  gap:12px;
  margin:18px 0;
}
.announcement-mini{
  border:1px solid var(--ok-line);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(201,164,92,.065);
}
.announcement-mini strong{color:var(--ok-gold2)}
.onboarding-card{margin:18px 0}
.dash-card-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px;
}
.progress-score{
  font-family:var(--ok-display);
  font-size:2.2rem;
  color:var(--ok-gold2);
}
.progress-track{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid var(--ok-line);
  margin-bottom:16px;
}
.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--ok-deep),var(--ok-gold2));border-radius:999px}
.onboarding-list{display:grid;gap:10px}
.onboarding-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--ok-line);
}
.onboarding-item span{color:var(--ok-gold2);font-weight:700}
.onboarding-item strong{display:block;color:var(--ok-ink)}
.onboarding-item small{display:block;color:var(--ok-dim)}
.onboarding-item.done{opacity:.78}

.login-page{
  background:
    radial-gradient(ellipse at 50% 10%, rgba(201,164,92,.12), transparent 45%),
    #070504!important;
}
.login-card{
  background:linear-gradient(180deg,rgba(24,20,16,.96),rgba(10,8,7,.96))!important;
  border:1px solid var(--ok-line2)!important;
  box-shadow:0 40px 100px rgba(0,0,0,.55)!important;
  border-radius:30px!important;
}
.login-card h1{color:var(--ok-gold2)!important;font-size:2.4rem}

@media(max-width:1024px){
  .admin-layout,.customer-shell{grid-template-columns:1fr!important}
  .admin-sidebar,.customer-sidebar{
    position:fixed!important;
    z-index:1000;
    width:310px!important;
    transform:translateX(-105%);
    transition:transform .3s ease;
    box-shadow:30px 0 80px rgba(0,0,0,.45);
  }
  body.admin-menu-open .admin-sidebar,
  body.customer-menu-open .customer-sidebar{transform:translateX(0)}
  .admin-main,.customer-content{width:100%}
  .customer-main{padding:24px 16px 70px!important}
  .admin-top,.customer-topbar{padding:16px!important}
  .hero h1{font-size:clamp(2.5rem,14vw,4.5rem)!important}
}


/* Admin menu toggle fix */
body.admin-full-page.admin-sidebar-hidden .admin-layout,
body.admin-sidebar-hidden .admin-layout{
  grid-template-columns:0 minmax(0,1fr) !important;
}

body.admin-full-page.admin-sidebar-hidden .admin-sidebar,
body.admin-sidebar-hidden .admin-sidebar{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border-right:0 !important;
  pointer-events:none !important;
}

@media(max-width:1024px){
  body.admin-sidebar-hidden .admin-layout,
  body.admin-full-page.admin-sidebar-hidden .admin-layout,
  body.admin-menu-open .admin-layout{
    grid-template-columns:1fr !important;
  }

  body.admin-sidebar-hidden .admin-sidebar{
    transform:translateX(-105%) !important;
  }

  body.admin-menu-open .admin-sidebar{
    transform:translateX(0) !important;
    width:310px !important;
    min-width:310px !important;
    max-width:86vw !important;
    opacity:1 !important;
    overflow-y:auto !important;
    padding:0 !important;
    border-right:1px solid var(--ok-line) !important;
    pointer-events:auto !important;
  }

  body.admin-menu-open::after{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:999;
  }

  body.admin-menu-open .admin-sidebar{
    z-index:1001;
  }

  .admin-sidebar-toggle{
    position:relative;
    z-index:1002;
  }
}