/* static/styles.css
   Unified dark theme for VugriUkraine
   - Full-site dark palette
   - Responsive header + mobile drawer
   - Stable catalog/product card grid
   - Explicit product-page scope
   - Utilities and components (social, auth, forms)
   Replace existing file with this content to apply a global dark theme.
*/

/* =====================
   THEME VARIABLES / RESET
   ===================== */
:root{
  /* palette */
  --bg: #050505;                  /* page background */
  --surface: #0b0b0c;             /* main panels */
  --panel: rgba(255,255,255,0.02);/* subtle card surface */
  --glass: rgba(255,255,255,0.03);
  --muted: #9aa0a6;
  --muted-2: #9ea6ad;
  --white: #ffffff;
  --accent: #e75b2e;
  --accent-2: #ff7a4d;
  --accent-dark: #cc4a20;
  --success: #8fd19a;
  --danger: #d9534f;

  --header-height: 72px;
  --max-width: 1280px;
  --shadow-strong: 0 18px 60px rgba(0,0,0,0.72);
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.6);

  --radius-sm: 8px;
  --radius-md: 12px;
  --container-padding: 20px;
}

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

/* Links and headings */
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 { color: var(--white); margin: 0; }

/* Utility helpers */
.center { text-align: center; }
.text-muted { color: var(--muted); }
.hidden { display: none !important; }

/* =====================
   HEADER & NAV
   ===================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--container-padding);
  background: linear-gradient(180deg, #050505, #0b0b0b);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  z-index: 1400;
  height: var(--header-height);
}
.site-header .container-like {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.site-brand { display:flex; align-items:center; gap:12px; }
.site-brand img { height:42px; display:block; }
.site-brand .brand-title { color:var(--white); font-weight:900; letter-spacing:0.4px; }

/* desktop nav */
.site-nav { display:flex; gap:12px; align-items:center; }
.site-nav a { color:var(--muted); font-weight:700; padding:8px 10px; border-radius:10px; }
.site-nav a:hover, .site-nav a:focus { color:var(--white); background: rgba(255,255,255,0.02); outline: none; }

/* auth pill */
.auth-pill { display:inline-flex; align-items:center; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); }
.auth-pill__left { padding:8px 12px; color:var(--muted); background: transparent; font-weight:700; }
.auth-pill__right { padding:8px 12px; color:var(--white); background: linear-gradient(90deg,var(--accent),var(--accent-dark)); font-weight:800; }

/* mobile toggler */
.site-nav-toggle, .navbar-toggler {
  display:none;
  width:44px; height:44px; border-radius:10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  align-items:center; justify-content:center; cursor:pointer;
}

/* =====================
   MOBILE DRAWER
   ===================== */
/* Mobile drawer — ensure both .site-nav.open (our base.html) and .navbar-collapse.show (optional bootstrap) work */
@media (max-width: 820px) {
  /* keep .site-nav hidden by default on mobile */
  .site-nav { display: none; }

  /* show the mobile toggle button */
  .site-nav-toggle, .navbar-toggler { display: inline-flex; }

  /* If open class is added to site-nav (used by base.html inline script) — show it as a drawer */
  .site-nav.open {
    display: flex !important;
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--header-height) + 6px);
    bottom: 12px;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    background: linear-gradient(180deg, rgba(7,7,7,0.96), rgba(11,11,11,0.98));
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.72);
    max-height: 76vh;
    overflow: auto;
    z-index: 1600;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* fallback for bootstrap-style collapse (.navbar-collapse.show) if used elsewhere */
  .navbar-collapse {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--header-height) + 6px);
    background: linear-gradient(180deg, rgba(7,7,7,0.96), rgba(11,11,11,0.98));
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.72);
    max-height: 76vh;
    overflow:auto;
    z-index: 1600;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .navbar-collapse.show { transform: translateY(0); opacity: 1; visibility: visible; }

  /* nav links inside drawer */
  .site-nav.open a, .navbar-collapse .nav-link {
    display: block;
    padding: 12px 10px;
    color: var(--white) !important;
    font-weight: 700;
    border-radius: 8px;
  }
}

/* =====================
   GLOBAL CONTAINERS / PANELS
   ===================== */
.container, main { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); }
.card, .panel, .product-card, .card-mini {
  background: var(--panel);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

/* =====================
   BUTTONS
   ===================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 10px; font-weight:800;
  cursor:pointer; text-decoration:none; border:none;
}
.btn-primary { background: linear-gradient(90deg,var(--accent),var(--accent-dark)); color:#fff; }
.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--white); }

/* =====================
   HERO / BANNER
   ===================== */
.hero {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  color: var(--white);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.6));
  z-index:1;
  pointer-events:none;
}
.hero-inner {
  position:relative; z-index:2;
  max-width: var(--max-width); margin: 0 auto; padding: 64px 24px;
  display:flex; gap: 40px; align-items:center;
}
.hero-left { flex:1; color:var(--white); }
.hero-left h1 { font-size:48px; margin:0 0 8px; line-height:1.05; }
.hero-left p { color:var(--muted); font-size:18px; margin:0 0 18px; }
.hero-right { width:420px; }

/* small helpful hint strip */
.hint-strip { margin-top:12px; color:var(--muted); font-size:14px; }

/* =====================
   CATALOG GRID / PRODUCT CARDS
   ===================== */
.products-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:22px;
  margin: 0;
  padding: 0;
}
.products-grid .product-card {
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.03));
  padding:18px;
  border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  min-height: 420px;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.products-grid .product-card img {
  width:100%; height:220px; object-fit:cover; border-radius:10px; display:block;
}
.products-grid .product-card .card-body {
  padding-top:12px; flex:1 1 auto; min-height:0; overflow:hidden; padding-bottom:12px;
}
.products-grid .product-card h3 { margin:0 0 8px; color:var(--white); font-size:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.products-grid .product-card .product-meta { margin:0 0 8px; color:var(--muted); font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.products-grid .product-card .price { margin:6px 0 0; color:var(--white); font-size:15px; font-weight:700; }

/* actions pinned bottom (flex) */
.products-grid .product-card .product-actions {
  margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.products-grid .product-card .product-actions .btn { flex:1 1 auto; padding:10px 12px; }

/* hover */
.products-grid .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }

/* legacy absolute overrides */
.products-grid .product-card .product-actions[style*="position:absolute"],
.products-grid .product-card .btn-group[style*="position:absolute"] { position: static !important; }

/* =====================
   SINGLE PRODUCT PAGE
   ===================== */
.product-page .product-img-wrap { max-width:560px; height:420px; overflow:hidden; border-radius:12px; background:#0b0b0b; }
.product-page .product-img { width:100%; height:100%; object-fit:cover; display:block; }
.product-page .price { font-size:28px; font-weight:900; color:var(--white); margin:18px 0; }
.product-page .controls-row { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }

/* Messages / chat/ favorites ui */
.badge { display:inline-block; padding:6px 8px; border-radius:8px; font-weight:800; font-size:13px; }
.badge.hit { background: var(--success); color: #05220b; }

/* =====================
   HITS TRACK / HORIZONTAL CAROUSEL
   ===================== */
.hits-section { max-width: var(--max-width); margin:44px auto; padding:0 24px; color:var(--muted); }
.hits-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.hits-title { font-weight:900; font-size:20px; color:var(--white); }

.hits-track { display:flex; gap:18px; overflow-x:auto; padding:12px 6px; scroll-behavior:smooth; }
.hits-track::-webkit-scrollbar { height:8px; }
.hits-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius:6px; }

.card-mini { min-width:200px; background: var(--panel); border-radius:10px; padding:10px; color:var(--white); position:relative; text-align:center; }
.card-mini img { width:100%; height:140px; object-fit:cover; border-radius:8px; display:block; }
.card-mini .name { font-weight:800; margin-top:10px; min-height:40px; }
.card-mini .price { margin-top:6px; color:var(--muted); }

/* hit badge */
.badge-hit { position:absolute; left:10px; top:10px; background:var(--success); color:#07200b; font-weight:900; padding:6px 8px; border-radius:6px; font-size:12px; }

/* =====================
   BLOG / SOCIAL CARDS
   ===================== */
.social-grid { max-width: 760px; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin:12px 0 24px; padding:0; }
.social-card { display:flex; align-items:center; justify-content:space-between; gap:12px; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.03); padding:12px; border-radius:12px; box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
.social-left { display:flex; gap:12px; align-items:center; min-width:0; }
.social-icon { width:44px; height:44px; border-radius:8px; background: rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--white); flex: 0 0 44px; font-size:18px; }
.social-name { color: var(--white); font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.social-handle { color: var(--muted); font-size:13px; margin-top:2px; }

/* =====================
   AUTH PANEL / FORMS
   ===================== */
.auth-panel {
  max-width: 720px; margin: 40px auto; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.45));
  border: 1px solid rgba(255,255,255,0.03); padding: 28px; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); color: #e6eef0;
}
.auth-panel h1 { margin: 0 0 14px; color: #fff; font-size:30px; font-weight:800; }
.form-row label { color: var(--muted); font-weight: 700; font-size:13px; }
.input, input[type="password"], input[type="email"], input[type="text"], textarea {
  background: #0b0e0f; border:1px solid rgba(255,255,255,0.04); color:#fff; padding:10px 12px; border-radius:8px; outline:none; width:100%;
}
.input:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 6px 18px rgba(231,91,46,0.06); }

/* password rules / helper */
.field-help { color: var(--muted); font-size:13px; margin-top:6px; }

/* =====================
   MISC / UTILITIES
   ===================== */
.site-footer { background: #0b0b0b; padding:36px 24px; color:var(--muted); text-align:center; margin-top:40px; }
.site-footer a { color: var(--accent); text-decoration:none; }

.result-card { display:grid; gap:12px; padding:16px; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.03); }

/* out of stock visuals */
.product-card.out-of-stock { opacity: 0.55; filter: grayscale(0.45); background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.02); }
.out-of-stock-badge { background: var(--danger); color: #fff; padding:6px 10px; border-radius:8px; font-weight:700; }

/* disabled add-to-cart */
.btn-add[disabled], .btn-add.disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.2); background: #444 !important; color: #bbb !important; border-color: rgba(255,255,255,0.02) !important; }

/* small helpers */
.pill { display:inline-block; padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.03); color:var(--white); font-weight:700; }

/* =====================
   ACCESSIBILITY / FOCUS
   ===================== */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(231,91,46,0.12); outline-offset:2px; }

/* =====================
   RESPONSIVE BREAKPOINTS
   ===================== */
@media (max-width: 980px) {
  .hero-inner { flex-direction: column; padding: 36px 18px; }
  .hero-left h1 { font-size:36px; }
  .hero-right { width:100%; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:16px; }
}

@media (max-width: 768px) {
  .site-header { padding: 10px 14px; }
  .site-brand img { height:40px; }
  .hero-inner { padding: 30px 14px; }
  .hero-left h1 { font-size:28px; }
}

@media (max-width: 480px) {
  .hero-left h1 { font-size:22px; }
  .site-nav { display:none; }
  .products-grid .product-card img { height:160px; }
  .product-card { padding:14px; min-height:auto; }
}

.product-card.out-of-stock {
  opacity: 0.55;
  filter: grayscale(0.45);
}

.out-of-stock-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #d9534f;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
}

.stock-badge { padding:6px 10px; border-radius:8px; font-weight:700; color:#fff; }
.stock-yes { background: #1db954; }
.stock-no { background: #d9534f; }

.btn-add[disabled], .btn-add.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
  background: #444 !important;
  color: #bbb !important;
}
.toggle-stock-btn { padding:8px 12px; border-radius:8px; background:#111; color:var(--accent); border:1px solid rgba(255,255,255,0.04); cursor:pointer; }

/* End of stylesheet */