/* ──────────────────────────────────────────────────────────────────────────
 * recommendations.css — styles for _recommendation_row.html
 * Loaded once via base_main.html so we don't duplicate it per row.
 * ────────────────────────────────────────────────────────────────────────── */

.recommendation-scroll-wrapper { position: relative; }
.rec-track::-webkit-scrollbar  { display: none; }
.rec-track                     { scrollbar-width: none; -ms-overflow-style: none; }

.rec-scroll-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
}
.rec-scroll-fade-start {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}
.rec-scroll-fade-end {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}
[dir="rtl"] .rec-scroll-fade-start {
    left: auto; right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}
[dir="rtl"] .rec-scroll-fade-end {
    right: auto; left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

.rec-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    cursor: pointer;
    transition: box-shadow .2s, opacity .2s;
    padding: 0;
    color: #212529;
    font-size: 0.8rem;
}
.rec-arrow:hover    { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.rec-arrow:disabled { opacity: 0.35; cursor: default; }

/* Inset over the track rather than floating outside it — the wrapper has
   no side padding of its own to give a negative offset room to breathe,
   so a -18px position rendered the arrow half (or fully) off-screen at
   the edges of a full-width row. */
.rec-arrow-start { left: 8px; }
.rec-arrow-end   { right: 8px; }
[dir="rtl"] .rec-arrow-start { left: auto; right: 8px; }
[dir="rtl"] .rec-arrow-end   { right: auto; left: 8px; }

.rec-card:hover .rec-card-img { transform: scale(1.04); }
.rec-card-img                 { transition: transform 0.3s ease; }

@media (max-width: 576px) {
    .rec-card { width: 160px !important; }
    .rec-card .rec-card-image-box { height: 200px !important; }
    .rec-arrow { display: none; }
}