/* сахгоу.рф — дизайн-система v4 */
/* ============================================ */
/* Brighter, more vibrant. Avito-inspired. */

/* --- Base --- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: #F0F4F8; }

/* --- Header --- */
header.sticky {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid #EBEEF2;
}

/* --- Transitions --- */
a, button { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease; }

/* --- Forms --- */
input, textarea, select {
  border: 1px solid #DFE4EA;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover, textarea:hover, select:hover { border-color: #C8D0DA; }
input:focus, textarea:focus, select:focus {
  border-color: #1B6B8A;
  box-shadow: 0 0 0 3px rgba(10,123,186,0.08);
}
input[type="file"] { border: 0; padding: 0; }
label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.375rem; color: #3A4A5C; }

/* --- Auth Modal --- */
.auth-modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 32, 0.35); align-items: center; justify-content: center; }
.auth-modal.open { display: flex; }
.auth-modal-content {
  background: #fff; border-radius: 12px; max-width: 26rem; width: 92%; padding: 2rem;
  position: relative; box-shadow: 0 20px 50px -10px rgba(0,0,0,0.2);
}
.auth-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid #EBEEF2; }
.auth-tab { flex: 1; padding: 0.625rem; text-align: center; font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; color: #7A8A9A; }
.auth-tab.active { border-bottom-color: #121E2B; color: #121E2B; }
.auth-close { position: absolute; top: 0.625rem; right: 0.625rem; cursor: pointer; font-size: 1.25rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #7A8A9A; }
.auth-close:hover { background: #F0F3F7; color: #121E2B; }

/* --- Flash --- */
.flash { padding: 0.625rem 0.875rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 500; }
.flash.error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.flash.success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }

/* --- Badge --- */
.badge { display: inline-flex; align-items: center; font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 4px; border: 1px solid #DFE4EA; color: #54677A; }

/* --- Buttons --- */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #DFE4EA;
  padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500;
  background: #fff; color: #121E2B; cursor: pointer; text-decoration: none;
}
.btn-outline:hover { background: #F7F9FB; border-color: #C8D0DA; }

.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 0;
  padding: 0.5rem 1.25rem; font-size: 0.8125rem; font-weight: 600;
  background: #1B6B8A; color: #F0F4F8 !important; cursor: pointer;
}
.cta-btn:hover { background: #175A73; }

/* --- Listing Card --- */
.listing-card {
  background: #fff;
  border: 1px solid #EBEEF2;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex; flex-direction: column;
  position: relative;
}
.listing-card:hover {
  box-shadow: 0 12px 32px -8px rgba(15, 23, 32, 0.12);
  border-color: #D5DCE5;
  transform: translateY(-2px);
}

/* Promoted listings — tariff-specific frames */
.listing-card.promo-top {
  border: 2px solid #F59E0B;
  box-shadow: 0 0 0 1px rgba(245,158,11,0.25), 0 4px 16px -4px rgba(245,158,11,0.12);
}
.listing-card.promo-top:hover {
  border-color: #D97706;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.3), 0 12px 32px -8px rgba(245,158,11,0.18);
}
.listing-card.promo-highlight {
  border: 2px solid #8B5CF6;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 4px 16px -4px rgba(139,92,246,0.12);
}
.listing-card.promo-highlight:hover {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.3), 0 12px 32px -8px rgba(139,92,246,0.18);
}
.listing-card.promo-urgent {
  border: 2px solid #EF4444;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.25), 0 4px 16px -4px rgba(239,68,68,0.12);
}
.listing-card.promo-urgent:hover {
  border-color: #DC2626;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.3), 0 12px 32px -8px rgba(239,68,68,0.18);
}

.listing-img { aspect-ratio: 16/10; background: #EEF2F6; overflow: hidden; position: relative; }
.listing-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.listing-card:hover .listing-img img { transform: scale(1.04); }

.listing-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.listing-price { font-family: Manrope, sans-serif; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: #121E2B; }
.listing-title { font-weight: 500; font-size: 0.8125rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #3A4A5C; }
.listing-meta { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: #7A8A9A; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid #F0F3F7; }

a[href^="/listing/"], a[href^="/catalog/"] { color: inherit; text-decoration: none; }

/* --- Quick Picks --- */
.qp-card {
  position: relative; border-radius: 12px; overflow: hidden;
  min-height: 200px; display: flex; align-items: flex-end;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qp-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -6px rgba(15, 23, 32, 0.18); }
.qp-overlay { position: absolute; inset: 0; pointer-events: none; }
.qp-content { position: relative; z-index: 10; padding: 1.25rem; color: #fff; }
.qp-count { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; font-weight: 500; }

.qp-zhilyo { background: linear-gradient(150deg, #B8CCD8 0%, #7BA0B4 50%, #4A85A0 100%); }
.qp-zhilyo .qp-overlay { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%); }
.qp-morskie { background: linear-gradient(150deg, #A8C0CE 0%, #6B92A8 50%, #3E7492 100%); }
.qp-morskie .qp-overlay { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%); }
.qp-dzhip { background: linear-gradient(150deg, #CFC4B4 0%, #A19078 50%, #7A6A50 100%); }
.qp-dzhip .qp-overlay { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%); }
.qp-rybalka { background: linear-gradient(150deg, #A4C4C0 0%, #5E948B 50%, #357068 100%); }
.qp-rybalka .qp-overlay { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%); }

/* --- Filter Pills --- */
.filter-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; gap: 0.25rem; padding: 0 0.75rem;
  border-radius: 9999px; font-size: 0.8125rem; font-weight: 500;
  transition: all 0.15s ease; text-decoration: none;
  color: #54677A; background: transparent; border: 1px solid transparent;
}
.filter-pill:hover { color: #121E2B; background: #EEF2F6; }
.filter-pill.active { background: #121E2B; color: #fff; }

/* --- Promo badges --- */
.promo-badge { font-weight: 600; font-size: 0.625rem; padding: 0.15rem 0.5rem; border-radius: 4px; color: #fff; letter-spacing: 0.03em; }

/* --- FAB --- */
.fab-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 90; display: flex; flex-direction: column; gap: 0.625rem; }
.fab-btn {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0;
  cursor: pointer; font-size: 1.375rem;
  box-shadow: 0 4px 12px rgba(15, 23, 32, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #fff; color: #121E2B;
}
.fab-btn:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(15, 23, 32, 0.18); }
.fab-badge {
  position: absolute; top: -3px; right: -3px;
  background: #DC2626; color: #fff; font-size: 0.625rem; font-weight: 700;
  min-width: 1.125rem; height: 1.125rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.fab-panel {
  position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 91;
  width: 21rem; max-height: 26rem; background: #fff;
  border-radius: 12px; box-shadow: 0 20px 50px -10px rgba(15, 23, 32, 0.2);
  display: none; flex-direction: column; overflow: hidden;
}
.fab-panel.open { display: flex; }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7A8A9A; }
tr.border-t { border-top: 1px solid #EBEEF2; }
tr:hover { background: #F7F9FB; }
.bg-secondary { background: #EEF2F6; }

/* --- Utilities --- */
.min-h-screen { min-height: 100vh; }
.bg-muted\/30 { background: rgba(238, 242, 246, 0.4); }
.text-muted-foreground { color: #7A8A9A; }
.text-accent { color: #1B6B8A; }

/* --- Гарантированные цвета (фоллбэк, если Tailwind CDN не сгенерировал кастомный accent) --- */
.bg-accent { background-color: #1B6B8A !important; }
.text-white { color: #FFFFFF !important; }
.text-foreground { color: #0A1A2A !important; }
.hover\:bg-accent\/90:hover { background-color: #0A86C7 !important; }
.bg-accent\/10 { background-color: rgba(10, 123, 186, 0.1) !important; }
.bg-accent\/30 { background-color: rgba(10, 123, 186, 0.3) !important; }

/* --- Form group --- */
.form-group { margin-bottom: 1rem; }

/* --- Auth footer --- */
.auth-footer { font-size: 0.8125rem; text-align: center; margin-top: 1.25rem; color: #7A8A9A; }
.auth-footer a { color: #1B6B8A; font-weight: 500; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }