/* ════════════════════════════════════════════════════════════
   verkaf.lu — Shared Polish (Design + Mobile)
   Include on every page AFTER dark.css / page styles.
════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* Sanfte Säiten-Animatioun */
body { animation: vkfFadeIn .32s ease both; }
@keyframes vkfFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Markéierung a Fokus a Gold */
::selection { background: rgba(201,162,39,.28); }
:focus-visible {
  outline: 2px solid var(--gold, #C9A227);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Knäppercher: klengen Dréck-Effekt + kee Doppel-Tap-Zoom */
button { touch-action: manipulation; }
button:active { transform: scale(.98); }
.qb-backdrop:active, .ob-dismiss:active { transform: none; }

/* Fein Scrollbaren */
* { scrollbar-width: thin; scrollbar-color: var(--line, #E8E8E8) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line, #E8E8E8); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

img { max-width: 100%; }

/* Kaarten-Biller liicht zoomen beim Hover */
.card-img { transition: transform .25s ease; }
.card:hover .card-img { transform: scale(1.03); }
.card.sold:hover .card-img { transform: none; }

/* Sprooch-Switch: Basis-Styling (och fir Säiten ouni eegen CSS dofir) */
.lang-switch { display: flex; gap: 4px; font-size: 11px; font-weight: 600; color: var(--slate-light, #5A7184); align-items: center; }
.lang-switch span { cursor: pointer; padding: 2px 5px; border-radius: 4px; transition: color .12s, background .12s; }
.lang-switch span:hover { color: var(--ink, #1A1A1A); }
.lang-switch span.active { color: var(--ink, #1A1A1A); background: rgba(201,162,39,.22); }

/* Manner Beweegung wann de System et wëllt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 14px !important;
  }
  /* Sichfeld kritt eng eege Zeil — grouss a gutt tippbar */
  .topbar-search { order: 10; flex-basis: 100%; min-width: 0; }
  .topbar-search input { font-size: 16px; }  /* verhënnert iOS-Auto-Zoom */
  .btn-post { margin-left: auto; }
  .logo { font-size: 21px; }
  /* Nëmme Symboler, keng Labelen — méi Plaz */
  .nav-icon-label, .nav-login-label, .nav-avatar-label { display: none; }
  .nav-icon-btn, .nav-login-wrap { min-width: 40px; padding: 8px 6px; }
  .grid { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .hero-search { padding: 26px 16px 24px; }
  .hero-search h1 { font-size: 22px; }
  .big-search { flex-wrap: wrap; border-radius: 12px; }
  .big-search input { flex-basis: 100%; font-size: 16px; }
  .big-search select { flex: 1; border-left: none; border-top: 1px solid var(--line, #E8E8E8); padding: 12px 14px; }
  .big-search button { padding: 12px 22px; border-top: 1px solid var(--line, #E8E8E8); }
  .section-head { padding: 0 14px; flex-wrap: wrap; gap: 8px; }
  .footer-cols { gap: 28px; flex-wrap: wrap; }
  .ad-banner { display: none; }  /* Werbeplazhalter op klengen Ecranen ausblenden */
}

/* Ganz kleng Ecranen */
@media (max-width: 380px) {
  .cat-tile { flex: 1 0 64px; padding: 10px 6px; }
}

/* ── Mobil: Topbar-Sich verstoppen — d'Sich lieft am Bottom-Sheet ── */
@media (max-width: 700px) {
  .topbar-search { display: none !important; }
}

/* ── Mobil: Kee Safari-Auto-Zoom méi ──
   iOS zoomt eran wann en Input < 16px Schrëft huet — a bleift gezoomt.
   Dofir kréien ALL Input-Felder um Handy 16px. */
@media (max-width: 700px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}