/* Banana.az — ortaq komponentlər (kartlar, nişanlar, bölmə başlıqları, düymələr).
   Tokenlər: banana-tokens.css. Bütün səhifələr layout vasitəsilə bu faylı yükləyir. */

/* ─── Bölmə başlığı ─── */
.bn-sec { display: flex; flex-direction: column; gap: 20px; }
.bn-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bn-sec-title { font: 800 var(--bn-h2-desktop)/1.15 var(--bn-font-display); letter-spacing: -0.5px; color: var(--bn-ink); margin: 0; display: flex; align-items: center; gap: 14px; }
.bn-sec-more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--bn-ink); white-space: nowrap; }
.bn-sec-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.bn-sec-actions { display: flex; align-items: center; gap: 16px; }

/* ─── Düymələr (tokens.css-dəki .bn-btn-ə əlavə) ─── */
.bn-btn { text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.bn-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.bn-btn--md { height: 44px; padding: 0 18px; font-size: 14px; }
.bn-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.bn-btn--dark:hover { background: var(--bn-navy-deep); }
.bn-btn--outline:hover { background: var(--bn-soft); }
.bn-btn--ghost { background: var(--bn-soft); color: var(--bn-ink); }
.bn-btn--block { width: 100%; }
.bn-btn:disabled { background: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }

/* ─── Nişanlar ─── */
.bn-badge {
    height: 24px; padding: 0 9px; border-radius: var(--bn-r-pill);
    font: 700 12px var(--bn-font-body); letter-spacing: .2px;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.bn-badge--vip { background: var(--bn-yellow); color: var(--bn-navy); }
.bn-badge--premium { background: var(--bn-navy); color: var(--bn-yellow); font-size: 11px; letter-spacing: .3px; }
.bn-badge--new { background: var(--bn-green-tint); color: var(--bn-green-text); font-size: 11px; letter-spacing: .3px; }
.bn-badge--urgent { background: var(--bn-red); color: #FFFFFF; font-size: 11px; }
.bn-badge--sale { background: var(--bn-red); color: #FFFFFF; font-weight: 900; }
.bn-badge--verified { background: #FFFFFF; color: var(--bn-green-text); height: 22px; padding: 0 8px; font-size: 11px; }
.bn-badge--verified .bn-ic { color: var(--bn-green); }
/* Nümunə (demo) məzmun */
.bn-badge--demo { background: var(--bn-navy); color: var(--bn-yellow); height: 22px; padding: 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.bn-pcard-buy.bn-pcard-buy--demo { background: var(--bn-soft, #F3F4F6); color: var(--bn-text-2, #6B7280); cursor: default; pointer-events: none; box-shadow: none; }

/* ─── Ürək düyməsi (data-product-fav / data-listing-fav) ─── */
.bn-fav {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 40px; height: 40px; border-radius: 999px;
    background: #FFFFFF; color: var(--bn-navy);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(27,31,59,.10);
}
.bn-fav:hover { color: var(--bn-red); }
.bn-fav.active { color: var(--bn-red); }
.bn-fav.active svg { fill: currentColor; }

/* ─── Şəkil yeri ─── */
.bn-media { position: relative; overflow: hidden; background: var(--bn-surface); display: flex; align-items: center; justify-content: center; color: var(--bn-navy); }
.bn-media img { width: 100%; height: 100%; object-fit: cover; }
.bn-media-ph { color: var(--bn-navy); opacity: .9; }
.bn-media .bn-media-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }

/* ─── Qiymət ─── */
.bn-price { font: 900 var(--bn-price)/1.15 var(--bn-font-display); color: var(--bn-ink); }
.bn-price--sale { color: var(--bn-red); }
.bn-price--free { color: var(--bn-green-text); }
.bn-price-old { font-size: 13px; color: var(--bn-text-2); text-decoration: line-through; }
.bn-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--bn-text-2); min-width: 0; }
.bn-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Elan kartı ─── */
.bn-lcard {
    position: relative;
    background: var(--bn-card); border-radius: var(--bn-r-card);
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(27,31,59,.04), 0 8px 24px rgba(27,31,59,.05);
    color: var(--bn-ink); min-width: 0;
    transition: transform .15s, box-shadow .15s;
}
.bn-lcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(27,31,59,.05), 0 14px 32px rgba(27,31,59,.10); }
.bn-lcard--vip { border: 2px solid var(--bn-yellow); box-shadow: none; }
.bn-lcard--premium { border-top: 5px solid var(--bn-navy); }
.bn-pcard--mini .bn-pcard-price .bn-price { font-size: 18px; }
.bn-lcard .bn-media { aspect-ratio: 4 / 3; }
.bn-lcard--vip .bn-media { background: var(--bn-yellow-tint); }
.bn-lcard-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.bn-lcard .bn-price { font-size: 19px; }
.bn-lcard-title { font-size: 14px; font-weight: 500; line-height: 1.35; height: 38px; color: var(--bn-ink); }
.bn-lcard-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ─── Məhsul kartı ─── */
.bn-pcard {
    position: relative;
    background: var(--bn-card); border-radius: var(--bn-r-card);
    padding: 12px; display: flex; flex-direction: column; gap: 8px;
    box-shadow: var(--bn-shadow-card); color: var(--bn-ink); min-width: 0;
    transition: transform .15s, box-shadow .15s;
}
.bn-pcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(27,31,59,.05), 0 14px 32px rgba(27,31,59,.10); }
.bn-pcard .bn-media { aspect-ratio: 1 / 1; border-radius: var(--bn-r-img); }
.bn-pcard .bn-media img { object-fit: contain; background: #FFFFFF; }
.bn-pcard .bn-media .bn-media-badges { top: 8px; left: 8px; }
.bn-pcard-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bn-pcard .bn-installment { align-self: flex-start; }
.bn-pcard-title { font-size: 14px; font-weight: 500; line-height: 1.35; height: 38px; color: var(--bn-ink); }
.bn-pcard-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.bn-pcard-foot .bn-rating { align-self: flex-start; }
.bn-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--bn-text-2); }
.bn-rating .bn-ic { color: var(--bn-yellow-dark); }
.bn-rating b { color: var(--bn-ink); font-weight: 700; }
.bn-pcard-buy {
    position: relative; z-index: 2;
    height: 44px; border-radius: var(--bn-r-btn); margin-top: 2px;
    background: var(--bn-yellow); color: var(--bn-navy);
    font: 700 14px var(--bn-font-body);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bn-pcard-buy:hover { background: var(--bn-yellow-dark); }
.bn-pcard-buy-ic { display: none; }
.bn-pcard-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.bn-pcard-store { font-size: 12px; color: var(--bn-text-2); display: flex; align-items: center; gap: 4px; min-width: 0; }

/* Kataloq variantı: ürək + müqayisə üst-üstə, mağaza adı, reytinq/taksit yoxdur */
.bn-pcard-acts { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.bn-pcard-acts .bn-fav { position: static; }
.bn-cmp.active { background: var(--bn-navy); color: var(--bn-yellow); }
.bn-pcard-store { position: relative; z-index: 2; }
.bn-pcard-store:hover span { text-decoration: underline; }
.bn-pcard--catalog .bn-rating, .bn-pcard--sale .bn-rating,
.bn-pcard-price--foot { display: none; }
.bn-pcard--catalog .bn-pcard-title { margin-top: 0; }

/* ─── Mağaza kartı ─── */
.bn-scard {
    position: relative;
    background: var(--bn-card); border-radius: var(--bn-r-card);
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--bn-shadow-card); color: var(--bn-ink); min-width: 0;
}
.bn-scard-banner { position: relative; height: 84px; background: var(--bn-navy) center / cover no-repeat; }
.bn-scard-banner .bn-badge--verified { position: absolute; top: 10px; right: 10px; }
.bn-scard-body { padding: 0 14px 16px; margin-top: -34px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bn-scard-logo {
    width: 68px; height: 68px; border-radius: 999px;
    background: var(--bn-yellow); border: 4px solid var(--bn-card);
    color: var(--bn-navy); font: 900 20px var(--bn-font-display);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bn-scard-logo img { width: 100%; height: 100%; object-fit: cover; }
.bn-scard-name { font-size: 15px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-scard-meta { font-size: 12px; color: var(--bn-text-2); display: flex; align-items: center; gap: 4px; }
.bn-scard-meta b { color: var(--bn-ink); }
.bn-scard-cta {
    margin-top: 4px; height: 38px; padding: 0 16px;
    border: 1.5px solid var(--bn-ink); border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--bn-ink);
    display: inline-flex; align-items: center;
}
.bn-scard:hover .bn-scard-cta { background: var(--bn-ink); color: var(--bn-card); }
.bn-scard-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ─── Boş vəziyyət ─── */
.bn-empty {
    grid-column: 1 / -1;
    background: var(--bn-card); border-radius: var(--bn-r-card);
    padding: 40px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    box-shadow: var(--bn-shadow-card);
}
.bn-empty-ic { width: 72px; height: 72px; border-radius: 999px; background: var(--bn-yellow-tint); color: var(--bn-navy); display: flex; align-items: center; justify-content: center; }
.bn-empty h3 { font: 800 20px var(--bn-font-display); color: var(--bn-ink); }
.bn-empty p { font-size: 14px; color: var(--bn-text-2); }

/* ─── Mobil ─── */
@media (max-width: 768px) {
    .bn-sec { gap: 12px; }
    .bn-sec-title { font-size: var(--bn-h2-mobile); gap: 6px; }
    .bn-sec-more { font-size: 14px; gap: 2px; }
    .bn-lcard, .bn-pcard { border-radius: 18px; }
    .bn-lcard-body { padding: 10px 12px 12px; gap: 4px; }
    .bn-lcard .bn-price { font-size: 16px; }
    .bn-lcard-title, .bn-pcard-title { font-size: 13px; line-height: 1.3; height: 34px; }
    .bn-lcard .bn-meta { font-size: 11px; }
    .bn-lcard .bn-meta .bn-ic { display: none; }
    .bn-pcard { padding: 10px; gap: 6px; }
    .bn-pcard .bn-media { border-radius: 12px; }
    .bn-pcard .bn-price { font-size: 17px; }
    .bn-pcard .bn-price-old { font-size: 11px; }
    .bn-pcard .bn-installment { font-size: 11px; padding: 3px 6px; border-radius: 6px; }
    .bn-fav { top: 0; right: 0; width: 44px; height: 44px; background: transparent; box-shadow: none; }
    .bn-media .bn-media-badges { top: 8px; left: 8px; }
    .bn-badge { height: 22px; padding: 0 8px; font-size: 11px; }
    .bn-pcard-buy { width: 40px; height: 40px; margin: 0; flex-shrink: 0; }
    .bn-pcard-buy-lbl { display: none; }
    .bn-pcard-foot { flex-direction: row; align-items: center; justify-content: space-between; }
    .bn-pcard-foot .bn-rating { align-self: center; font-size: 11px; }
    .bn-pcard-buy.sb-added { width: auto; padding: 0 10px; font-size: 12px; }
    .bn-pcard-acts { top: 4px; right: 4px; }
    .bn-pcard-acts .bn-fav { width: 40px; height: 40px; background: #FFFFFF; box-shadow: 0 2px 8px rgba(27,31,59,.10); }
    .bn-pcard--catalog > .bn-pcard-price { display: none; }
    .bn-pcard--catalog .bn-pcard-price--foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
    .bn-pcard--catalog .bn-pcard-buy { width: 44px; height: 44px; }
    .bn-pcard--sale .bn-pcard-buy { width: 100%; height: 44px; }
    .bn-pcard--sale .bn-pcard-buy-lbl { display: inline; }
    .bn-pcard--sale .bn-fav { top: 6px; right: 6px; width: 40px; height: 40px; background: #FFFFFF; box-shadow: 0 2px 8px rgba(27,31,59,.10); }
}