/* ══════════════════════════════════════════════════════════════════
   TezAl.shop — 2026 Responsive & Listing Hardening
   Additive override sheet — MUST load LAST (after style.css/app.css).
   Məqsəd: heç bir ölçüdə horizontal scroll olmasın, şəkillər responsiv,
   mətnlər daşmasın, kartlar bərabər hündürlükdə, qiymət daha böyük.
   Breakpoints: 320 / 375 / 390 / 414 / 768 / 1024 / 1440
   ══════════════════════════════════════════════════════════════════ */

/* ── Global: heç bir breakpoint-də horizontal scroll ── */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* ══════════ LISTING DETAL — güclü mobil qoruma ══════════ */
.ld-wrap { width: 100%; box-sizing: border-box; }
.ld-wrap img, .ld-desc-card img, .ld-desc-card iframe,
.ld-desc-card video, .ld-desc-card table { max-width: 100% !important; }
.ld-desc-card, .ld-desc-card *, .ld-desc-text {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ld-desc-card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ld-desc-card pre { white-space: pre-wrap; word-break: break-word; }
/* Xüsusiyyətlər gridi çox dar ekranda 1 sütun */
.ld-meta-card { max-width: 100%; }
/* flex/grid uşaqları overflow yerinə kiçilsin */
.ld-grid, .ld-wrap, .listings-grid, .lcu-body, .tz-gallery,
.ld-title, .ld-desc-card { min-width: 0; }

/* ── Uzun mətn / link / söz ekranı daşmasın ── */
.ld-title, .ld-desc-card, .lcu-title, .ld-desc-card * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ══════════ ELAN KARTLARI: bərabər hündürlük + böyük qiymət ══════════ */
.listings-grid { align-items: stretch; }
.lc-unified { height: 100%; display: flex; flex-direction: column; }
.lcu-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.lcu-title {
    -webkit-line-clamp: 2;      /* başlıq maksimum 2 sətir */
    min-height: 2.8em;
}
.lcu-price {
    font-size: 17px;            /* qiymət daha diqqət çəkən */
    font-weight: 900;
    letter-spacing: -.01em;
    margin-top: auto;          /* qiyməti kartın altına sabitlə */
}

/* ══════════ LISTING DETAL QALEREYASI: tam responsiv ══════════ */
.tz-gallery-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg-secondary);
}
.tz-gallery-main img#mainImage {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tz-gallery-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.tz-gallery-thumb { scroll-snap-align: start; flex: 0 0 auto; }
.tz-gallery-thumb img { object-fit: cover; }

/* Köhnə qalereya (.ld-*) da təhlükəsiz olsun */
.ld-main-img img, .ld-thumb img { object-fit: cover; }

/* ══════════ ƏLAQƏ DÜYMƏLƏRİ: tam en, sığsın ══════════ */
.btn-block { width: 100%; max-width: 100%; }

/* ═══════════════════════ BREAKPOINTS ═══════════════════════ */
@media (max-width: 1440px) { .ld-wrap { max-width: 1180px; } }

@media (max-width: 1024px) {
    .listings-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
    .listings-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .tz-gallery-main { aspect-ratio: 1 / 1; }
    .lcu-price { font-size: 16px; }
    .ld-grid { grid-template-columns: 1fr !important; }
    .ld-wrap { padding-left: 12px; padding-right: 12px; }
    .ld-title { font-size: 20px; line-height: 1.3; }
    .ld-specs-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 414px) {
    .listings-grid { gap: 10px; }
    .lcu-title { font-size: 12.5px; }
}

@media (max-width: 390px) {
    .listings-grid { gap: 9px; }
}

@media (max-width: 375px) {
    .lcu-price { font-size: 15px; }
    .lcu-body { padding: 9px 10px 11px; }
}

@media (max-width: 320px) {
    .listings-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .lcu-body { padding: 8px 9px 10px; }
    .lcu-title { font-size: 12px; min-height: 2.6em; }
    .lcu-price { font-size: 14.5px; }
}

/* ══════════════════════════════════════════════════════════════════
   2026 UI POLISH — additive, təhlükəsiz (yalnız gözəlləşdirmə)
   ══════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

/* Yumşaq keçidlər (dark mode toggle, hover) */
a, button, .btn, .lc-unified, .hdr-icon-btn, .hdr-cta,
input, select, textarea {
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}

/* Düymələrə "basılma" hissi (ripple əvəzi, yüngül) */
.btn:active, .auth-btn:active, .hdr-cta:active, .mob-cta-btn:active { transform: translateY(1px) scale(.99); }

/* Kartlara premium yumşaq kölgə */
.lc-unified { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.lc-unified:hover { box-shadow: 0 12px 30px rgba(0,0,0,.15); }

/* Accessibility — görünən klaviatura focus-u */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid #E60023;
    outline-offset: 2px;
    border-radius: 4px;
}

/* İstifadəçi az hərəkət istəyirsə — animasiyaları söndür */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   2026 PREMIUM VISUAL REFRESH — GÖRÜNƏN dəyişiklik (kartlar, düymələr)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Elan kartları: premium ── */
.lc-unified {
    border-radius: 18px !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    transition: transform .28s cubic-bezier(.2,.85,.25,1), box-shadow .28s !important;
}
.lc-unified:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 22px 46px rgba(0,0,0,.20) !important;
}
[data-theme="light"] .lc-unified { background: #fff; border-color: rgba(0,0,0,.07); }
.lcu-img { border-radius: 18px 18px 0 0; }
.lc-unified:hover .lcu-img img { transform: scale(1.06); }

/* Qiymət — böyük və diqqətçəkən */
.lcu-price {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: #E60023 !important;
    letter-spacing: -.02em;
}
.lcu-title { font-weight: 700 !important; line-height: 1.35; }

/* VIP / Premium kartlar aydın seçilsin — üst rəngli zolaq + parıltı */
.lc-unified.lcu-premium { border-color: rgba(139,92,246,.5) !important; box-shadow: 0 4px 22px rgba(139,92,246,.16); }
.lc-unified.lcu-vip     { border-color: rgba(251,191,36,.55) !important; box-shadow: 0 4px 22px rgba(251,191,36,.16); }
.lc-unified.lcu-premium::after,
.lc-unified.lcu-vip::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
}
.lc-unified.lcu-premium::after { background: linear-gradient(90deg,#8b5cf6,#7c3aed); }
.lc-unified.lcu-vip::after     { background: linear-gradient(90deg,#fbbf24,#f59e0b); }

/* Badge-lər daha yumşaq/premium */
.lcu-badge { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.2); backdrop-filter: blur(4px); }

/* ── Düymələr: premium, yumşaq künclər, gradient ── */
.btn-primary, .hdr-cta, .auth-btn, .mob-cta-btn {
    border-radius: 13px !important;
}
.hdr-cta {
    background: linear-gradient(135deg,#E60023,#D5001D) !important;
    box-shadow: 0 4px 16px rgba(230,0,35,.42) !important;
}
.hdr-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(230,0,35,.55) !important; }
.btn-primary { box-shadow: 0 4px 14px rgba(230,0,35,.28); }

/* ── Axtarış paneli: yumşaq, modern ── */
.hdr-search form { border-radius: 13px !important; }

/* ── Kateqoriya/bölmə başlıqları: daha aydın ── */
.section-title, .ld-section-title, .home-section-title { letter-spacing: -.01em; }

/* ── Grid boşluqları bir az daha havadar ── */
.listings-grid { gap: 18px; }
@media (max-width:768px){ .listings-grid { gap: 12px; } }

/* ═══════════════════════════════════════════════════════════════════
   ui-ux-pro-max DESIGN SYSTEM — Marketplace (TezAl 2026)
   Palitra: isti krem fon + narıncı primary + mavi trust accent
   Fontlar: başlıqlar Rubik
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --tz-primary:   #D5001D;
    --tz-secondary: #E60023;
    --tz-accent:    #2563eb;   /* trust / CTA mavi */
    --tz-bg-warm:   #fff7ed;
    --tz-fg:        #0f172a;
    --tz-border-warm:#fceae1;
    --tz-radius:    16px;
    --tz-shadow-sm: 0 2px 10px rgba(15,23,42,.05);
    --tz-shadow-md: 0 10px 30px rgba(15,23,42,.09);
}

/* Fon — TƏMİZ AĞ (istifadəçi istəyi, qızılı/krem ləğv edildi) */
[data-theme="light"] body { background: #ffffff !important; }

/* Kartlar ağ fonda incə haşiyə ilə seçilsin (Rubik ləğv edildi — nazik/təmiz font) */
[data-theme="light"] .lc-unified { background: #fff !important; border-color: #eceef1 !important; }
[data-theme="light"] .cat-item { border-color: #eceef1 !important; }