/* =========================================================
   ClickHubTech Modern Upgrade Layer
   Additive only: preserves the existing visual system while
   improving consistency, accessibility, responsive behavior,
   product discovery and dashboard polish.
   ========================================================= */
:root {
  --cht-primary: #2563eb;
  --cht-primary-dark: #1d4ed8;
  --cht-bg: #f1f5f9;
  --cht-surface: #ffffff;
  --cht-text: #1e293b;
  --cht-muted: #64748b;
  --cht-border: #e2e8f0;
  --cht-success: #16a34a;
  --cht-warning: #d97706;
  --cht-danger: #dc2626;
  --cht-radius: 14px;
  --cht-shadow: 0 10px 30px rgba(15,23,42,.08);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }
body:focus-within { outline: none; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 2px; }

/* Keep every area of the platform footer-safe. */
.site-main { min-height: calc(100vh - 180px); }
body.vendor-admin { min-height: 100vh; display: flex; flex-direction: column; }
.vendor-layout { flex: 1 0 auto; min-height: 0; }
.vendor-main { min-height: 100%; }
.vendor-content { min-height: calc(100vh - 140px); }
.vendor-footer { flex-shrink: 0; }
body.client-portal { min-height: 100vh; display: flex; flex-direction: column; }
.cp-shell { flex: 1 0 auto; min-height: 0; }
.cp-footer { flex-shrink: 0; }
body.admin-page, body.admin-layout-page { min-height: 100vh; }

/* Shared product discovery bar */
.site-search {
  display: flex;
  align-items: center;
  width: min(360px, 30vw);
  min-width: 220px;
  height: 42px;
  border: 1px solid var(--cht-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.site-search:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(37,99,235,.08); }
.site-search-icon { padding-left: 12px; color: #94a3b8; font-size: 16px; }
.site-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 10px; color: var(--cht-text); font: inherit; font-size: 13px; background: transparent; }
.site-search button { height: 100%; border: 0; padding: 0 14px; background: var(--cht-primary); color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.site-search button:hover { background: var(--cht-primary-dark); }

/* Modern product cards without changing the established palette. */
.product-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,23,42,.10); }
.product-card .product-img-wrap img { transition: transform .22s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.025); }
.stock-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; }
.stock-status.in { color: var(--cht-success); }
.stock-status.low { color: var(--cht-warning); }
.stock-status.out { color: var(--cht-danger); }

/* Vendor public storefront */
.vendor-shop-hero { min-height: 260px; display:flex; align-items:flex-end; background-size:cover; background-position:center; color:#fff; }
.vendor-shop-hero .container { width:100%; padding-bottom:34px; }
.vendor-shop-identity { display:flex; align-items:center; gap:18px; margin-top:24px; }
.vendor-shop-identity > img { width:76px; height:76px; object-fit:cover; border-radius:18px; background:#fff; border:3px solid rgba(255,255,255,.9); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.vendor-shop-identity h1 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.04em; }
.vendor-shop-identity p { margin:6px 0 0; max-width:760px; color:rgba(255,255,255,.88); }
.vendor-trust-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.vendor-trust-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); font-size:11px; font-weight:800; }
.vendor-shop-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
.vendor-shop-summary .form-card { margin:0; }

/* Product page enhancements */
.pd-trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:18px 0; }
.pd-trust-item { padding:11px; border:1px solid var(--cht-border); border-radius:12px; background:#f8fafc; font-size:11px; color:#475569; }
.pd-trust-item strong { display:block; color:#1e293b; font-size:12px; margin-bottom:2px; }
.pd-vendor-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; margin-top:16px; border:1px solid var(--cht-border); border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.04); }
.pd-vendor-main { display:flex; align-items:center; gap:10px; min-width:0; }
.pd-vendor-main img { width:44px; height:44px; border-radius:11px; object-fit:cover; background:#f8fafc; }
.pd-official-mark { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; flex:0 0 44px; background:linear-gradient(135deg,#2563eb,#0f172a); color:#fff; font-weight:900; font-size:13px; }
.official-products-section .section-head { align-items:center; }
.official-product-card { position:relative; }
.official-product-badge { position:absolute; z-index:2; top:10px; left:10px; padding:5px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; font-size:10px; font-weight:900; }
.official-store-intro { display:flex; gap:10px; align-items:center; margin-bottom:22px; padding:14px 16px; border:1px solid #bfdbfe; border-radius:14px; background:#eff6ff; color:#334155; }
.official-store-intro strong { color:#1d4ed8; }
.official-shop-hero { background:linear-gradient(135deg,#0f172a,#1d4ed8) !important; }
.official-store-logo { width:76px; height:76px; border-radius:18px; background:#fff; border:3px solid rgba(255,255,255,.9); box-shadow:0 12px 30px rgba(0,0,0,.18); display:grid; place-items:center; overflow:hidden; flex:0 0 76px; }
.official-store-logo img { width:100%; height:100%; object-fit:contain; padding:7px; }
.official-store-logo span { color:#1d4ed8; font-weight:900; font-size:22px; }
@media(max-width:600px){.official-store-intro{align-items:flex-start;flex-direction:column}.official-store-logo{width:64px;height:64px;flex-basis:64px}}

.pd-vendor-main strong { display:block; font-size:13px; color:#1e293b; }
.pd-vendor-main small { display:block; margin-top:2px; color:#64748b; }
.pd-verified { color:#166534; background:#dcfce7; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:800; white-space:nowrap; }

.recommendation-section { padding-top:0; }
.recommendation-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }

/* Search result improvements */
.search-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.search-result-count { color:#64748b; font-size:13px; }
.search-result-count strong { color:#1e293b; }

/* Dashboard intelligence */
.dashboard-insight-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:20px; margin-top:20px; }
.insight-card { background:#fff; border:1px solid var(--cht-border); border-radius:var(--cht-radius); box-shadow:var(--cht-shadow); padding:20px; }
.insight-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.insight-card-head h3 { margin:0; font-size:16px; color:#1e293b; }
.insight-card-head p { margin:4px 0 0; color:#64748b; font-size:11px; }
.sales-bars { height:190px; display:flex; align-items:flex-end; gap:10px; padding-top:10px; border-bottom:1px solid #e2e8f0; }
.sales-bar-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; height:100%; }
.sales-bar { width:min(34px,70%); min-height:4px; border-radius:7px 7px 0 0; background:linear-gradient(180deg,#60a5fa,#2563eb); }
.sales-bar-label { font-size:10px; color:#94a3b8; }
.sales-bar-value { font-size:9px; color:#475569; font-weight:700; white-space:nowrap; }
.alert-list { display:grid; gap:8px; }
.alert-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid #edf1f5; border-radius:11px; background:#f8fafc; }
.alert-item strong { font-size:12px; color:#334155; }
.alert-item span { font-size:10px; color:#64748b; }

/* Mobile first navigation / controls */
@media (max-width: 1100px) {
  .site-search { width: min(300px, 26vw); min-width:180px; }
  .recommendation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-insight-grid { grid-template-columns:1fr; }
}
@media (max-width: 800px) {
  .site-search { display:none; }
  .vendor-shop-summary, .pd-trust-row { grid-template-columns:1fr; }
  .recommendation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vendor-shop-identity { align-items:flex-start; }
  .vendor-shop-identity > img { width:64px; height:64px; }
}
@media (max-width: 520px) {
  .recommendation-grid { grid-template-columns:1fr 1fr; gap:11px; }
  .pd-vendor-card { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.cp-brand-logo, .vendor-brand-logo { width:40px; height:40px; object-fit:contain; border-radius:11px; background:#fff; border:1px solid rgba(148,163,184,.22); padding:3px; flex:0 0 40px; }
.vendor-brand-logo { border-radius:10px; }
.vendor-brand { align-items:center; }
/* Keep the vendor portal visually aligned with Admin without touching other areas. */
.vendor-brand-mark { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
.vendor-nav a.vendor-primary, .vendor-nav a.active { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
.publish-btn { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }


/* =========================================================
   Public top bar refinement.
   Desktop: brand plus primary nav form one left cluster, the
   search fills the flexible centre, account and cart controls
   align flush right with matched control heights.
   Sub-desktop: controls hug the right edge and the cart stays
   reachable, with the search moving to a full width row on
   the narrowest screens. The mobile drawer is untouched.
   ========================================================= */
.site-header .header-inner { position: relative; }

@media (min-width: 1101px) {
  .site-header .header-inner {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    column-gap: clamp(12px, 1.5vw, 24px);
    min-height: 78px;
  }
  .site-header .brand { margin-right: 4px; }
  .site-header .main-nav {
    flex: none;
    justify-content: flex-start;
    gap: 4px;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .site-header .main-nav a { padding: 9px 15px; font-size: 14px; }
  .site-header .site-search {
    width: 100%;
    min-width: 180px;
    max-width: 620px;
    height: 44px;
    justify-self: center;
  }
  .site-header .site-search button { font-size: 12.5px; padding-inline: 18px; }
  .site-header .header-actions { justify-self: end; gap: 12px; }
  .site-header .seller-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding-inline: 15px;
    border-radius: 10px;
    background: var(--primary-50);
    font-size: 13px;
    transition: background .18s ease;
  }
  .site-header .seller-link:hover { background: #dbe4ff; }
  .site-header .guest-link { height: 40px; }
  .site-header .cart-btn { width: 46px; height: 46px; }
}

/* Sub-desktop: pin the action cluster to the right and keep the
   cart reachable (the mobile drawer still lists every link). */
.site-header .header-actions { margin-left: auto; gap: 12px; }
.site-header .header-actions .cart-btn { display: grid; }

@media (max-width: 800px) {
  .site-header .header-inner { flex-wrap: wrap; row-gap: 10px; padding-bottom: 12px; }
  .site-header .site-search {
    display: flex;
    order: 9;
    width: 100%;
    min-width: 180px;
    max-width: none;
    height: 42px;
  }
}