@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');

/* ===============================
   ZÁKLADNÉ PREMENNÉ
================================ */
:root {
  --grad-start: #00c6ff;
  --grad-end:   #0072ff;

  --bg: #f8f9fa;
  --tc: #343a40;
  --card-bg: #fff;
  --secondary: #6c757d;
}

/* ===============================
   GLOBAL
================================ */
body, .card, .navbar, footer, .category-card {
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--tc);
  overflow-y: scroll;
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

/* ===============================
   NAVBAR
================================ */
.navbar {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end)) !important;
  min-height: 50px;
  padding: .25rem 1rem;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: #fff !important;
}
.navbar .nav-link:hover {
  color: #e2e2e2 !important;
}
.navbar-toggler { border:none; }
.navbar-toggler:focus { box-shadow:none; }
.navbar-toggler-icon { filter: invert(1); }

/* ===============================
   BUTTONS
================================ */
.btn-primary {
  background: #fff;
  color: var(--grad-start);
  border: 1px solid var(--grad-start);
  border-radius: 2rem;
  transition: .2s;
}
.btn-primary:hover {
  background: var(--grad-end);
  color: #fff;
  border-color: var(--grad-end);
}

/* ===============================
   CARDS
================================ */
.card {
  border: none;
  border-radius: 1rem;
  background: var(--card-bg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: .3s;
  overflow: hidden;
  position: relative;
}
.card:hover { transform: translateY(-5px); }
.card-img-top { width: 100%; height: 180px; object-fit: cover; }
.card-title { color: var(--grad-start); font-weight: 600; }
.card-footer { background: var(--bg); border-top: none; display: flex; justify-content: space-between; align-items: center; }
.price { color: var(--grad-end); font-weight: 700; }

/* ===============================
   FOOTER
================================ */
footer {
  background: var(--card-bg);
  padding: 2rem 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
  text-align: center;
  margin-top: 3rem;
}
.footer-text { color: var(--secondary); font-size: .9rem; margin: 0; }

/* ===============================
   HERO SECTION
================================ */
.hero-section { 
  padding: 4rem 0;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #fff;
}
.hero-section h1, .hero-section p { color: #fff; }
@media (max-width: 576px) {
  .hero-section { padding: 3rem 0; }
}

/* ===============================
   CATEGORY SCROLL / BOX
================================ */
.category-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.category-scroll::-webkit-scrollbar { display: none; }
.category-card {
  min-width: 120px;
  border-radius: 1rem;
  background: #fff;
  transition: transform .2s ease, background .3s ease, box-shadow .3s ease;
}
.category-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.category-card:hover h6,
.category-card:hover i {
  color: #fff !important;
}
.category-card i { display: block; }

.category-box {
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.category-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.category-box h5 {
  font-weight: 600;
  color: var(--grad-start);
  margin-bottom: .5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.category-box h5 i { font-size: 1.2rem; }
.category-box ul { list-style: none; padding-left: 0; margin: 0; }
.category-box ul li { margin-bottom: .35rem; }
.category-box ul li a {
  color: var(--grad-start);
  text-decoration: none;
  font-size: .95rem;
}
.category-box ul li a:hover {
  color: var(--grad-end);
  text-decoration: underline;
}

/* ===============================
   BROWSE PAGE (sidebar, pills)
================================ */
.sticky-sidebar{ position: sticky; top: 80px; }

/* ▼ SUBKATEGÓRIE – nový hover + aktívny stav */
.sub-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.55rem .7rem;
  border-radius:.6rem;
  text-decoration:none;
  color:#1f2937;
  transition:background .2s ease, box-shadow .2s ease, color .2s ease;
}
.sub-link:hover{
  background:#eef5ff;
  color:#0d6efd;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.sub-link.active{
  background:#dbeafe;
  color:#0d6efd;
  font-weight:600;
}
/* badge/počet napravo (funguje či je to .badge alebo posledný span) */
.sub-link .badge{
  background:#f2f6ff;
  color:#3b5bdb;
  border-radius:999px;
  padding:.2rem .5rem;
  font-weight:600;
}
.sub-link > span:last-child.text-muted{
  background:#f2f6ff;
  color:#3b5bdb !important;
  border-radius:999px;
  padding:.2rem .5rem;
  font-size:.75rem;
}

.brand-pill{
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  background:#f6f7fb; margin:.125rem .25rem; font-size:.9rem;
  transition:transform .1s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  border:1px solid #e5e7eb;
}
.brand-pill:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.06); background:#f8fbff; }
.brand-pill.active{ background:#e7f0ff; border-color:#bfd6ff; font-weight:600; }

.listing-card img{ object-fit: cover; height: 100%; width: 100%; background: #eef1f5; }

/* ===============================
   DARK MODE
================================ */
body.dark {
  --bg: #181a1b;
  --tc: #f1f1f1;
  --card-bg: #242526;
}
body.dark .card-title { color: #aeb8ff; }
body.dark .navbar {
  background: linear-gradient(90deg, #006f84, #005b78) !important;
}
body.dark .category-card { background: #2e2f34; }
body.dark footer { background: var(--card-bg); }
body.dark .category-card h6,
body.dark .category-card i { color: #f1f1f1; }
body.dark .hero-section {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end)) !important;
}

/* ===============================
   DARK MODE TOGGLE
================================ */
#darkToggle {
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.3s ease;
  border-radius: 50%;
  padding: 0.35rem 0.55rem;
  font-size: 1.1rem;
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
}
#darkToggle:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  cursor: pointer;
}
#darkToggle.icon-animate { transform: scale(1.3); opacity: 0.7; }
body.dark #darkToggle { background-color: rgba(0, 0, 0, 0.25); }
body.dark #darkToggle:hover { box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }

/* --- FORCE NAVBAR COLORS --- */
.navbar {
  background: linear-gradient(90deg, #00c6ff, #0072ff) !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: #fff !important;
}
/* ===== Sidebar: podkategórie (ľavý panel) ===== */
.sub-link{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .7rem .55rem .9rem;   /* trochu viac vľavo kvôli lište */
  border-radius: .6rem;
  text-decoration: none;
  color: #1f2937;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}

/* tenká animovaná lišta naľavo */
.sub-link::before{
  content:"";
  position:absolute; left:.35rem; top:50%;
  width:4px; height:60%;
  background: linear-gradient(180deg, #00c6ff, #0072ff);
  border-radius: 4px;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .18s ease;
}

/* hover/focus/active stavy */
.sub-link:hover,
.sub-link:focus-visible{
  background:#eef5ff;
  color:#0d6efd;
}
.sub-link:hover::before,
.sub-link:focus-visible::before,
.sub-link.active::before{
  transform: translateY(-50%) scaleY(1);
}

.sub-link.active{
  background:#dbeafe;
  color:#0d6efd;
  font-weight:600;
}

/* badge (počet vpravo) – nech vyzerá ako chip */
.sub-link .badge,
.sub-link > span:last-child.text-muted{
  background:#f2f6ff;
  color:#3b5bdb !important;
  border-radius:999px;
  padding:.18rem .5rem;
  font-size:.75rem;
  font-weight:600;
}

/* jemný "press" efekt pri kliknutí */
.sub-link:active{ transform: translateY(1px); }

/* dark mode doladenie */
body.dark .sub-link{ color:#e5e7eb; }
body.dark .sub-link:hover,
body.dark .sub-link:focus-visible{ background:#1f2a37; color:#8ab4ff; }
body.dark .sub-link.active{ background:#1b2633; color:#8ab4ff; }
body.dark .sub-link .badge,
body.dark .sub-link > span:last-child.text-muted{
  background:#223143; color:#9dbbff !important;
}
/* PredajTo – browse */
:root{ --brand1:#00c6ff; --brand2:#0072ff; }
.btn-brand{background:linear-gradient(90deg,var(--brand1),var(--brand2));border:none;color:#fff}
.btn-brand:hover{filter:brightness(.95);color:#fff}
.pagination .page-item.active .page-link{
  background:linear-gradient(90deg,var(--brand1),var(--brand2)); border:none;
}
.listing-row a{color:#0b3b78}
/* Feedback sekcia */
.feedback-section .card { border: 1px solid rgba(0,0,0,.06); }
.feedback-section h2 i { margin-right: .35rem; color: var(--primary-start); }
/* ===== PredajTo - Create Listing vizuál ===== */
:root{
  /* fallback, keď chýbajú brand premenné */
  --primary-start: var(--primary-start, #5c6ac4);
  --primary-end:   var(--primary-end,   #6e7ff3);
  --focus-ring: rgba(110,127,243,.28);
}

/* pozadie */
body.create-bg{
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(255,255,255,.20), transparent),
    linear-gradient(135deg, var(--primary-start), var(--primary-end));
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* karta/formulár */
.cl-card{
  width: min(980px, 100%);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  padding: clamp(18px, 2.8vw, 36px);
}

/* polia */
.cl-card .inp, .cl-card .sel, .cl-card textarea, 
.cl-card input[type="text"], .cl-card input[type="number"], 
.cl-card select, .cl-card textarea{
  width: 100%;
  background: #f7f9fc;
  border: 1.5px solid #e6edf5;
  border-radius: 14px;
  padding: 14px;
  font-size: 15px;
  transition: border .15s ease, box-shadow .15s ease, background .2s ease;
}

.cl-card .inp:focus, .cl-card .sel:focus, .cl-card textarea:focus,
.cl-card input:focus, .cl-card select:focus{
  border-color: var(--primary-end);
  box-shadow: 0 0 0 6px var(--focus-ring);
  background: #fff;
}

/* tlačidlá */
.btn-brand{
  background: linear-gradient(180deg, var(--primary-start), var(--primary-end));
  color: #fff !important;
  border: 0;
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(110,127,243,.22);
}
.btn-brand:hover{ filter: brightness(1.05); }
.btn-ghost{
  background: transparent;
  color: #2a3441;
  border: 0;
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
}

/* galéria náhľadov (pre hl.obrazok.js) */
.image-wrapper{ position:relative; width:120px; height:120px; margin:6px; border:2px solid transparent; border-radius:12px; overflow:hidden; cursor:pointer; display:inline-block }
.image-wrapper.selected-main{ border-color: var(--primary-start) }
.preview-img{ width:100%; height:100%; object-fit:cover }
.remove-btn{ position:absolute; top:4px; right:4px; background:#d33; color:#fff; border:none; border-radius:50%; width:22px; height:22px; cursor:pointer }
.main-label{ position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:2px 6px; border-radius:4px }

/* ---- jednotný card dizajn pre formuláre (login, register, create/edit listing…) ---- */
.cl-card {
    width: min(980px, 100%);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    padding: 32px;
    margin: 120px auto 40px; /* centrovanie a posun pod navbar */
}

/* grid layout vo formulároch */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media(max-width: 820px) {
    .grid { grid-template-columns: 1fr; }
}

label {
    font-size: 14px;
    color: #627083;
    margin: 6px 0;
}

/* polia */
.inp,
.sel,
textarea {
    width: 100%;
    background: #f7f9fc;
    border: 1.5px solid #e6edf5;
    border-radius: 14px;
    padding: 14px;
    transition: .15s;
}
.inp:focus,
.sel:focus,
textarea:focus {
    border-color: var(--primary-end);
    box-shadow: 0 0 0 6px rgba(110,127,243,.28);
    background: #fff;
}

/* tlačidlá */
.btn-brand {
    display:inline-block;
    background: linear-gradient(180deg, var(--primary-start,#5c6ac4), var(--primary-end,#6e7ff3));
    color:#fff !important;
    border:0;
    border-radius:14px;
    padding:12px 20px;
    font-weight:700;
    line-height:1.2;
    cursor:pointer;
    box-shadow:0 10px 18px rgba(110,127,243,.22);
    transition: filter 0.2s ease, transform 0.1s ease;
}
.btn-brand:hover { filter:brightness(1.05); transform:translateY(-2px); }

.btn-ghost {
    display:inline-block;
    background:transparent;
    color:var(--text-color,#2a3441);
    border:1.5px solid var(--primary-end,#6e7ff3);
    border-radius:14px;
    padding:12px 20px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover {
    background:var(--primary-end,#6e7ff3);
    color:#fff;
}

/* obrázky vo formulároch */
.image-wrapper {
    position:relative;
    width:120px;
    height:120px;
    margin:6px;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    display:inline-block;
}
.image-wrapper.selected-main { border:2px solid var(--primary-start,#5c6ac4) }
.preview-img { width:100%; height:100%; object-fit:cover }
.remove-btn {
    position:absolute; top:4px; right:4px;
    background:#d33; color:#fff;
    border:none; border-radius:50%;
    width:22px; height:22px; cursor:pointer;
}
.main-label {
    position:absolute; bottom:4px; left:4px;
    background:rgba(0,0,0,.6); color:#fff;
    font-size:12px; padding:2px 6px; border-radius:4px;
}

small.muted { color:#7f8aa1 }