/* ===== Smart Products Slider — Frontend v1.7 ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Inter:wght@400;600;700;900&display=swap');

/* =====================================================
   CSS VARIABLES
   All sizing is driven by variables so media queries
   only need to update 2–3 values per breakpoint.
===================================================== */
.sps-wrapper {
    --sps-accent:      #6366f1;
    --sps-accent2:     #8b5cf6;
    --sps-radius:      18px;
    --sps-nav-size:    46px;
    --sps-nav-offset:  56px;
    --sps-card-pad:    18px;
    --sps-title-size:  15px;
    --sps-btn-pad:     13px 10px;
    --sps-btn-size:    13px;

    position: relative;
    padding: 0 var(--sps-nav-offset) 54px;
    box-sizing: border-box;
}

/* ── Fonts ── */
.sps-rtl { font-family: 'Cairo', sans-serif; }
.sps-ltr { font-family: 'Inter',  sans-serif; }

/* =====================================================
   TRACK
===================================================== */
.sps-track-outer {
    overflow: hidden;
    border-radius: var(--sps-radius);
}
.sps-track {
    display: flex;
    direction: ltr;   /* MUST stay ltr so translateX works predictably */
    will-change: transform;
}

/* =====================================================
   SLIDES — responsive column count
   Desktop  ≥1024px : 3 cards
   Tablet   ≥640px  : 2 cards
   Mobile   <640px  : 1 card
===================================================== */
.sps-slide {
    min-width: 100%;
    padding: 6px;
    box-sizing: border-box;
}
@media (min-width: 640px)  { .sps-slide { min-width: 50%;     } }
@media (min-width: 1024px) { .sps-slide { min-width: 33.333%; } }

/* =====================================================
   CARD
===================================================== */
.sps-card {
    background: #fff;
    border-radius: var(--sps-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.05);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94),
                box-shadow  .4s cubic-bezier(.25,.46,.45,.94);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sps-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(0,0,0,.13);
}

/* ── Badge ── */
.sps-badge {
    position: absolute;
    top: 12px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 10;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    text-transform: uppercase;
    white-space: nowrap;
}
.sps-rtl .sps-badge { right: 12px; }
.sps-ltr .sps-badge { left:  12px; }

/* ── Image ── */
.sps-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
    flex-shrink: 0;
}
.sps-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}
.sps-card:hover .sps-img-wrap img { transform: scale(1.06); }
.sps-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.2) 0%, transparent 45%);
    opacity: 0;
    transition: opacity .4s;
}
.sps-card:hover .sps-img-overlay { opacity: 1; }

/* =====================================================
   CARD BODY
   KEY RULE: direction + align-items control everything.
   - RTL (Arabic)  → direction:rtl, align-items:flex-end
     Every child naturally sits on the RIGHT.
   - LTR (English) → direction:ltr, align-items:flex-start
     Every child naturally sits on the LEFT.
   This works on ALL screen sizes because it's set on
   the element itself, not via a media query.
===================================================== */
.sps-card-body {
    padding: var(--sps-card-pad);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* ── RTL default (Arabic) ── */
    direction:    rtl;
    text-align:   right;
    align-items:  flex-end;
}

/* ── LTR override (English) ── */
.sps-ltr .sps-card-body {
    direction:    ltr;
    text-align:   left;
    align-items:  flex-start;
}

/* ── Title ── */
.sps-title {
    font-size:   var(--sps-title-size);
    font-weight: 700;
    color:       #1a1a2e;
    margin:      0;
    line-height: 1.5;
    width:       100%;   /* full width so text wraps, not just shrinks */
    display:          -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* =====================================================
   STARS
   width:100% + flex-direction controls alignment.
   RTL: row-reverse → number left of stars visually
   LTR: row         → number right of stars
===================================================== */
.sps-rating {
    display:         flex;
    align-items:     center;
    gap:             6px;
    width:           100%;
    flex-direction:  row-reverse;   /* RTL default */
    justify-content: flex-end;
}
.sps-ltr .sps-rating {
    flex-direction:  row;           /* LTR: normal order */
    justify-content: flex-start;
}

.sps-stars       { display: flex; gap: 2px; direction: ltr; }
.sps-stars .star { font-size: 16px; line-height: 1; }
.sps-stars .star.full  { color: #f59e0b; }
.sps-stars .star.half  { color: #f59e0b; opacity: .55; }
.sps-stars .star.empty { color: #d1d5db; }
.sps-rating-num  { font-size: 13px; color: #6b7280; font-weight: 700; }

/* =====================================================
   META ROW — price + sales
   Same pattern: row-reverse for RTL, row for LTR.
===================================================== */
.sps-meta {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             8px;
    width:           100%;
    padding-bottom:  12px;
    border-bottom:   1px solid #f3f4f6;
    margin-top:      auto;
    flex-direction:  row-reverse;   /* RTL default */
    justify-content: flex-end;
}
.sps-ltr .sps-meta {
    flex-direction:  row;
    justify-content: flex-start;
}

.sps-price {
    font-size:   16px;
    font-weight: 900;
    color:       #059669;
    background:  #ecfdf5;
    padding:     5px 12px;
    border-radius: 8px;
}
.sps-sales {
    font-size:  12px;
    color:      #6b7280;
    background: #f9fafb;
    padding:    5px 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* =====================================================
   ACTION BUTTONS
===================================================== */
.sps-actions {
    display: flex;
    gap:     8px;
    width:   100%;
}
.sps-btn-visit,
.sps-btn-copy {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         var(--sps-btn-pad);
    border-radius:   12px;
    font-size:       var(--sps-btn-size);
    font-weight:     800;
    letter-spacing:  .2px;
    cursor:          pointer;
    transition:      all .22s;
    text-decoration: none;
    border:          none;
    white-space:     nowrap;
}
.sps-rtl .sps-btn-visit,
.sps-rtl .sps-btn-copy { font-family: 'Cairo', sans-serif; }
.sps-ltr .sps-btn-visit,
.sps-ltr .sps-btn-copy { font-family: 'Inter',  sans-serif; }

/* Visit — purple gradient */
.sps-btn-visit {
    background: linear-gradient(135deg, var(--sps-accent), var(--sps-accent2));
    color:      #fff;
    box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.sps-btn-visit:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 22px rgba(99,102,241,.45);
    color:      #fff;
    text-decoration: none;
}
/* Copy — dark border */
.sps-btn-copy {
    background: #fff;
    color:      #1a1a2e;
    border:     2px solid #1a1a2e;
}
.sps-btn-copy:hover {
    background: #1a1a2e;
    color:      #fff;
    transform:  translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.sps-btn-copy.copied {
    background:   #059669;
    color:        #fff;
    border-color: #059669;
    box-shadow:   0 4px 14px rgba(5,150,105,.35);
}

/* =====================================================
   NAVIGATION ARROWS
   Sit in the padding gutter (--sps-nav-offset wide).
   Centered: (offset - nav-size) / 2 from edge.
===================================================== */
.sps-nav {
    position:      absolute;
    top:           22%;
    transform:     translateY(-50%);
    width:         var(--sps-nav-size);
    height:        var(--sps-nav-size);
    border-radius: 50%;
    border:        none;
    cursor:        pointer;
    z-index:       20;
    background:    #fff;
    box-shadow:
        0 1px 3px  rgba(0,0,0,.08),
        0 4px 14px rgba(0,0,0,.12),
        0 8px 24px rgba(0,0,0,.06);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition: background .18s, box-shadow .18s, transform .18s;
}
.sps-nav svg {
    width:        20px;
    height:       20px;
    stroke:       #374151;
    stroke-width: 2.2;
    transition:   stroke .18s;
    display:      block;
    flex-shrink:  0;
}
.sps-nav:hover {
    background: var(--sps-accent);
    box-shadow: 0 6px 24px rgba(99,102,241,.45);
    transform:  translateY(-50%) scale(1.08);
}
.sps-nav:hover svg  { stroke: #fff; }
.sps-nav:active     { transform: translateY(-50%) scale(.94); }
.sps-nav:focus-visible { outline: 3px solid var(--sps-accent); outline-offset: 3px; }

/* Arrow sits at (nav-offset - nav-size) / 2 from the wrapper edge */
.sps-arrow-left  { left:  calc((var(--sps-nav-offset) - var(--sps-nav-size)) / 2); }
.sps-arrow-right { right: calc((var(--sps-nav-offset) - var(--sps-nav-size)) / 2); }

/* Hide when only 1 product */
.sps-wrapper[data-total="1"] .sps-nav { display: none; }

/* =====================================================
   PROGRESS BAR
===================================================== */
.sps-progress {
    position:  absolute;
    bottom:    44px;
    left:      50%;
    transform: translateX(-50%);
    width:     80px;
    height:    3px;
    background:    rgba(0,0,0,.08);
    border-radius: 4px;
    overflow:  hidden;
    display:   none;
}
.sps-progress.active { display: block; }
.sps-progress-fill {
    height:        100%;
    width:         0%;
    background:    var(--sps-accent);
    border-radius: 4px;
}

/* =====================================================
   DOTS
===================================================== */
.sps-dots {
    display:         flex;
    justify-content: center;
    gap:             7px;
    position:        absolute;
    bottom:          16px;
    left:  0;
    right: 0;
    direction: ltr;  /* always L→R visually */
}
.sps-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    border:        none;
    background:    #d1d5db;
    cursor:        pointer;
    padding:       0;
    transition:    all .3s;
}
.sps-dot.active             { background: var(--sps-accent); width: 22px; border-radius: 4px; }
.sps-dot:hover:not(.active) { background: #9ca3af; }

/* =====================================================
   TOAST
===================================================== */
.sps-toast {
    position:   fixed;
    bottom:     28px;
    left:       50%;
    transform:  translateX(-50%) translateY(80px);
    background: #1a1a2e;
    color:      #fff;
    padding:    11px 22px;
    border-radius: 12px;
    font-size:  13px;
    z-index:    99999;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    font-family: 'Cairo', sans-serif;
}
.sps-toast.show { transform: translateX(-50%) translateY(0); }

/* =====================================================
   RESPONSIVE BREAKPOINTS
   IMPORTANT: Only sizes/spacing change here.
   RTL/LTR direction is NEVER touched in media queries —
   it's set on the element and inherited correctly on all
   screen sizes without any override needed.
===================================================== */

/* ── Large tablet: 768px–1023px ── */
@media (max-width: 1023px) {
    .sps-wrapper {
        --sps-nav-size:   42px;
        --sps-nav-offset: 52px;
        --sps-card-pad:   16px;
        --sps-title-size: 15px;
    }
}

/* ── Small tablet / large phone: 640px–767px ── */
@media (max-width: 767px) {
    .sps-wrapper {
        --sps-nav-size:   40px;
        --sps-nav-offset: 50px;
        --sps-card-pad:   15px;
        --sps-btn-pad:    12px 8px;
        --sps-btn-size:   12px;
    }
    .sps-title { -webkit-line-clamp: 3; }  /* allow 3 lines on narrower cards */
    .sps-price { font-size: 15px; }
}

/* ── Mobile: <640px — 1 card full width ── */
@media (max-width: 639px) {
    .sps-wrapper {
        --sps-nav-size:   38px;
        --sps-nav-offset: 48px;
        --sps-card-pad:   16px;
        --sps-btn-pad:    12px 10px;
        --sps-btn-size:   13px;
    }
    .sps-nav svg { width: 16px; height: 16px; }

    /* On mobile, 1 card is full width so the body has generous space */
    .sps-title     { font-size: 16px; }
    .sps-price     { font-size: 17px; }
    .sps-stars .star { font-size: 18px; }
    .sps-rating-num  { font-size: 14px; }
}

/* ── Very small phones: <380px ── */
@media (max-width: 379px) {
    .sps-wrapper {
        --sps-nav-size:   34px;
        --sps-nav-offset: 42px;
    }
    /* Stack buttons vertically on tiny screens */
    .sps-actions      { flex-direction: column; }
    .sps-btn-visit,
    .sps-btn-copy     { width: 100%; }
}