/* ============================================================
   ShadowStore — Shared Design System (Dark Theme)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  /* backgrounds */
  --bg:          #0f0f12;
  --surface:     #1a1a1f;
  --surface-2:   #222228;
  /* text */
  --text:        #f0f0f5;
  --text-muted:  #8a8a9a;
  /* accent */
  --accent:      #e63946;
  --accent-dark: #c1121f;
  /* borders & nav */
  --border:      rgba(255,255,255,.08);
  --nav-bg:      #0d0d10;
  --nav-text:    #f0f0f5;
  /* radii */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   14px;
  /* shadows */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.4);
  --shadow:      0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.6);
  /* transition */
  --transition:  all .2s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ── Container ──────────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  height: 60px;
  backdrop-filter: blur(12px);
}

.navbar-brand {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--nav-text);
  letter-spacing: -.5px;
  white-space: nowrap;
}
.navbar-brand span { color: var(--accent); }
.navbar-spacer { flex: 1; }

.navbar-search {
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 0 12px;
  gap: 8px;
  border: 1px solid var(--border);
  transition: var(--transition);
  position: relative; /* anchor for dropdown */
}
.navbar-search:focus-within {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.navbar-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--nav-text);
  font-size: .875rem;
  padding: 9px 0;
}
.navbar-search input::placeholder { color: rgba(255,255,255,.3); }
.navbar-search svg { color: rgba(255,255,255,.4); flex-shrink: 0; }

/* ── Autocomplete dropdown ──────────────────────────── */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-2, #1e1e1e);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  display: none;
}
.search-dropdown.open { display: block; }
.search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--text, #eee);
  cursor: pointer;
  transition: background .12s;
}
.search-suggestion:hover,
.search-suggestion.active {
  background: rgba(255,255,255,.07);
}
.search-suggestion-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--surface, #111);
}
.search-suggestion-name {
  flex: 1;
  font-size: .85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestion-meta {
  font-size: .75rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
}
.search-suggestion-price {
  font-weight: 700;
  color: var(--accent, #e63946);
  font-size: .85rem;
  white-space: nowrap;
}
.search-no-results {
  padding: 14px 16px;
  font-size: .85rem;
  color: var(--text-muted, #888);
  text-align: center;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-icon-btn {
  background: none;
  border: none;
  color: var(--nav-text);
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
  text-decoration: none;
  font-size: 1.1rem;
}
.nav-icon-btn:hover { background: rgba(255,255,255,.08); }

.nav-dropdown { position: relative; display: inline-block; }
/* Invisible bridge that fills the gap between button and dropdown,
   so hover never breaks when mouse moves between them */
.nav-dropdown::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}
.nav-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  min-width: 190px;
  overflow: hidden;
  border: 1px solid var(--border);
  z-index: 1000;
  animation: dropdownFade .15s ease;
}
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* JS click on all devices + CSS hover fallback for desktop */
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown-content.open { display: block; }
/* ── Mobile navbar ──────────────────────────────────────────── */
@media (max-width: 600px) {
  /* .navbar kept its desktop padding (0 28px) and gap (16px) here before —
     on a ~360-390px phone that alone eats 56px+ of width that the search
     box and action buttons then had to fight over, which is what caused
     them to visually collide (search text rendering under the Sign In
     button). Shrinking padding/gap first gives everything else room. */
  .navbar {
    padding: 0 12px;
    gap: 8px;
  }
  .navbar-brand {
    font-size: 1.05rem;
  }
  /* Shrink search so action buttons are always visible. overflow:hidden
     is the actual safety net — without it, once the box is squeezed
     below its content's natural width, the icon/input can bleed out
     past the box edge instead of just clipping. */
  .navbar-search {
    flex: 1;
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
  }
  .navbar-search input {
    min-width: 0;
    font-size: .8rem;
  }
  /* Keep action buttons visible */
  .navbar-actions {
    flex-shrink: 0;
    gap: 4px;
  }
  /* Dropdown aligns right side of screen */
  .nav-dropdown-content {
    right: -8px;
    min-width: 170px;
  }
  /* Hide the "Sign In" text button on small screens — Register alone
     is enough, and there isn't room for both next to search + language. */
  .nav-login-btn { display: none; }
  /* Register is the only auth button left on mobile — shrink its padding
     so it doesn't dominate the row width. */
  .navbar-actions .btn-primary.btn-sm {
    padding: 8px 12px;
    font-size: .8rem;
  }
}

@media (max-width: 360px) {
  /* Very narrow phones (older/smaller devices, or a WebView that reports
     a tighter viewport than usual, e.g. some in-app browsers): drop the
     language switcher too, it's reachable from the account/profile pages. */
  .lang-dropdown { display: none; }
}
.nav-dropdown-content a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  color: var(--text);
  font-size: .875rem;
  transition: var(--transition);
}
.nav-dropdown-content a:hover { background: var(--surface-2); color: var(--accent); }
.nav-dropdown-content a.logout-link { color: #e63946; }
.nav-dropdown-content a.logout-link:hover { background: rgba(230,57,70,.1); color: #e63946; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  border: 1.5px solid transparent;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(230,57,70,.35);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
}

.btn-dark {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.btn-dark:hover { background: rgba(255,255,255,.1); }

.btn-danger {
  background: rgba(230,57,70,.12);
  color: var(--accent);
  border-color: rgba(230,57,70,.2);
}
.btn-danger:hover { background: var(--accent); color: #fff; }

.btn-sm  { padding: 6px 13px; font-size: .78rem; }
.btn-lg  { padding: 13px 28px; font-size: 1rem; }
.btn-full { width: 100%; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-group label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.form-control {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  transition: var(--transition);
  outline: none;
  width: 100%;
}
.form-control:focus {
  border-color: rgba(230,57,70,.45);
  box-shadow: 0 0 0 3px rgba(230,57,70,.1);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control option { background: #1a1a1e; }
textarea.form-control { resize: vertical; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-success { background: rgba(34,197,94,.12);  color: #4ade80; }
.badge-warning { background: rgba(234,179,8,.12);  color: #facc15; }
.badge-info    { background: rgba(59,130,246,.12); color: #60a5fa; }
.badge-danger  { background: rgba(230,57,70,.12);  color: var(--accent); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert-error   { background: rgba(230,57,70,.12); color: #f87171; border-color: rgba(230,57,70,.2); }
.alert-success { background: rgba(34,197,94,.1);  color: #4ade80; border-color: rgba(34,197,94,.2); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 32px 0 16px;
  list-style: none;
}
.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: var(--transition);
  text-decoration: none;
}
.pagination li a:hover { border-color: var(--accent); color: var(--accent); }
.pagination li.active a { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination li.disabled a { opacity: .35; pointer-events: none; }

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
}
.page-header p { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.empty-state .icon { font-size: 3rem; margin-bottom: 14px; }
.empty-state h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-muted);
  padding: 16px 0 0;
}
.breadcrumb a { color: var(--text-muted); transition: var(--transition); }
.breadcrumb a:hover { color: var(--accent); }

/* ── Star rating (reviews) ───────────────────────────────────── */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.star-rating input { display: none; }
.star-rating label {
  font-size: 1.6rem;
  color: var(--border);
  cursor: pointer;
  transition: color .15s;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #facc15; }

/* ── Admin pagination ────────────────────────────────────────── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0 4px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid var(--border);
  transition: var(--transition);
  text-decoration: none;
}
.page-btn:hover:not(.disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-btn.disabled { opacity: .4; pointer-events: none; }
.page-info { font-size: .85rem; color: var(--text-muted); min-width: 60px; text-align: center; }

/* ── Language switcher ───────────────────────────────────── */
/* Text code (EN/UK/RU/DE) instead of emoji flags — flags render broken on
   some OS/browser combos (e.g. boxed letters on Windows Chrome). One
   compact dropdown button (reuses .nav-dropdown/.nav-icon-btn pattern)
   so it never crowds the search bar on narrow screens. */
.lang-dropdown { margin-right: 2px; }
.lang-trigger {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.nav-dropdown-content a.active {
  color: var(--accent);
  font-weight: 600;
}