/* ============================================================
   DRO Related Products Showcase – Carousel CSS v1.2.0
   2DA Informatique | https://2dainformatique.com
   ============================================================ */

:root {
  --dro-accent:       #3b82f6;
  --dro-accent-dark:  #1d4ed8;
  --dro-bg:           #060b2d;
  --dro-card-bg:      #0d1340;
  --dro-card-border:  rgba(59, 130, 246, .18);
  --dro-text:         #e2e8f0;
  --dro-text-muted:   #94a3b8;
  --dro-badge-new:    #10b981;
  --dro-badge-promo:  #ef4444;
  --dro-badge-bs:     #f59e0b;
  --dro-star:         #f59e0b;
  --dro-wa:           #25d366;
  --dro-radius-card:  20px;
  --dro-radius-btn:   10px;
  --dro-shadow:       0 4px 24px rgba(59, 130, 246, .12);
  --dro-shadow-hover: 0 10px 44px rgba(59, 130, 246, .32);
  --dro-tr:           .3s cubic-bezier(.4, 0, .2, 1);
  --dro-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Section ──────────────────────────────────────────────── */
.dro-rp-section {
  background:  var(--dro-bg);
  padding:     52px 0 60px;
  margin:      48px 0 0;
  font-family: var(--dro-font);
  position:    relative;
  overflow:    hidden;
}

/* Lueur d'ambiance */
.dro-rp-section::before {
  content:    '';
  position:   absolute;
  top: -140px; left: 50%;
  transform:  translateX(-50%);
  width:  800px; height: 380px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,.16) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* ── Header ───────────────────────────────────────────────── */
.dro-rp-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 32px 28px;
  position:        relative;
  z-index:         1;
}

.dro-rp-header__left  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.dro-rp-header__badge {
  background:     linear-gradient(135deg, var(--dro-accent), var(--dro-accent-dark));
  color:          #fff;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .8px;
  padding:        4px 12px;
  border-radius:  20px;
  text-transform: uppercase;
  white-space:    nowrap;
}

.dro-rp-title {
  color:       var(--dro-text) !important;
  font-size:   clamp(18px, 3vw, 24px) !important;
  font-weight: 700 !important;
  margin:      0 !important;
  line-height: 1.2 !important;
}

/* Boutons nav header */
.dro-rp-header__nav { display: flex; gap: 8px; flex-shrink: 0; }

.dro-rp-nav-btn {
  width:  42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(59,130,246,.3);
  background: rgba(13,19,64,.85);
  color:  var(--dro-accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--dro-tr);
  outline: none;
  overflow: hidden;
  position: relative;
}

.dro-rp-nav-btn::after {
  content:    '';
  position:   absolute; inset: 0;
  border-radius: 50%;
  background: var(--dro-accent);
  transform:  scale(0);
  transition: transform .26s ease;
}

.dro-rp-nav-btn svg         { position: relative; z-index: 1; transition: color var(--dro-tr); }
.dro-rp-nav-btn:hover::after{ transform: scale(1); }
.dro-rp-nav-btn:hover svg   { color: #fff; }
.dro-rp-nav-btn:focus-visible{ outline: 2px solid var(--dro-accent); outline-offset: 3px; }
.dro-rp-nav-btn:disabled    { opacity: .3; cursor: not-allowed; }

/* ── Zone carousel ────────────────────────────────────────── */
.dro-rp-carousel-wrap {
  position: relative;
  padding:  0 60px;        /* espace pour les flèches latérales */
  z-index:  1;
}

/* Viewport = fenêtre du carousel (overflow hidden) */
.dro-rp-viewport {
  overflow:      hidden;
  border-radius: 4px;
  cursor:        grab;
  user-select:   none;
}

.dro-rp-viewport.is-dragging { cursor: grabbing; }

/* Track = le rail qui se déplace */
.dro-rp-track {
  display:    flex;
  flex-wrap:  nowrap;
  /* La transition est gérée inline par JS (track.style.transition) */
  will-change: transform;
}

/* ── Flèches latérales ────────────────────────────────────── */
.dro-rp-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  width:  44px; height: 44px;
  border-radius:   50%;
  border:          1.5px solid rgba(59,130,246,.35);
  background:      rgba(6,11,45,.9);
  backdrop-filter: blur(10px);
  color:           #fff;
  cursor:          pointer;
  display:         flex; align-items: center; justify-content: center;
  transition:      var(--dro-tr);
  outline:         none;
  box-shadow:      0 4px 20px rgba(0,0,0,.45);
}

.dro-rp-arrow:hover {
  background:   var(--dro-accent);
  border-color: var(--dro-accent);
  transform:    translateY(-50%) scale(1.1);
  box-shadow:   0 6px 26px rgba(59,130,246,.5);
}

.dro-rp-arrow:disabled  { opacity: .2; cursor: not-allowed; transform: translateY(-50%); }
.dro-rp-arrow--prev     { left: 8px; }
.dro-rp-arrow--next     { right: 8px; }

/* ── Carte ────────────────────────────────────────────────── */
.dro-rp-card {
  flex-shrink: 0;
  /* width réglée en JS via card.style.width */
  padding:     0 10px;
  box-sizing:  border-box;
}

/* Wrapper interne avec l'effet hover */
.dro-rp-card__inner {
  background:     var(--dro-card-bg);
  border:         1.5px solid var(--dro-card-border);
  border-radius:  var(--dro-radius-card);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  height:         100%;
  box-shadow:     var(--dro-shadow);
  transition:     transform var(--dro-tr), box-shadow var(--dro-tr), border-color var(--dro-tr);
  animation:      droFadeUp .42s ease both;
}

.dro-rp-card__inner:hover {
  transform:    translateY(-7px);
  box-shadow:   var(--dro-shadow-hover);
  border-color: var(--dro-accent);
}

/* Stagger d'apparition */
.dro-rp-card:nth-child(1) .dro-rp-card__inner { animation-delay: .04s; }
.dro-rp-card:nth-child(2) .dro-rp-card__inner { animation-delay: .09s; }
.dro-rp-card:nth-child(3) .dro-rp-card__inner { animation-delay: .14s; }
.dro-rp-card:nth-child(4) .dro-rp-card__inner { animation-delay: .19s; }
.dro-rp-card:nth-child(5) .dro-rp-card__inner { animation-delay: .24s; }
.dro-rp-card:nth-child(6) .dro-rp-card__inner { animation-delay: .29s; }
.dro-rp-card:nth-child(7) .dro-rp-card__inner { animation-delay: .34s; }
.dro-rp-card:nth-child(8) .dro-rp-card__inner { animation-delay: .39s; }

/* ── Image ────────────────────────────────────────────────── */
.dro-rp-card__img-wrap {
  position:     relative;
  display:      block;
  overflow:     hidden;
  background:   #080f2a;
  aspect-ratio: 1 / 1;
}

.dro-rp-card__img {
  width:100%; height:100%;
  object-fit: cover;
  display:    block;
  transition: transform .55s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}

.dro-rp-card__inner:hover .dro-rp-card__img { transform: scale(1.1); }

/* ── Badges ───────────────────────────────────────────────── */
.dro-rp-card__badges {
  position:       absolute;
  top:10px; left:10px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  z-index:        2;
}

.dro-rp-badge {
  font-size:10px; font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
  display:inline-block;
  line-height:1.4;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

.dro-rp-badge--new   { background: var(--dro-badge-new); }
.dro-rp-badge--promo { background: linear-gradient(135deg, var(--dro-badge-promo), #dc2626); }
.dro-rp-badge--bs    { background: linear-gradient(135deg, var(--dro-badge-bs), #d97706); }

/* ── Body carte ───────────────────────────────────────────── */
.dro-rp-card__body {
  padding:14px 14px 16px;
  display:flex; flex-direction:column;
  flex:1; gap:7px;
}

.dro-rp-card__name {
  color:           var(--dro-text) !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  line-height:     1.4 !important;
  text-decoration: none !important;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
  transition:      color var(--dro-tr);
}

.dro-rp-card__name:hover { color: var(--dro-accent) !important; }

/* Étoiles */
.dro-rp-stars { display:flex; align-items:center; gap:2px; }
.dro-rp-star  { width:13px; height:13px; fill:transparent; stroke:var(--dro-star); stroke-width:2; flex-shrink:0; }
.dro-rp-star--full,.dro-rp-star--half { fill:var(--dro-star); stroke:var(--dro-star); }
.dro-rp-stars__count { font-size:11px; color:var(--dro-text-muted); margin-left:3px; }

/* Prix */
.dro-rp-price { font-size:15px; font-weight:700; line-height:1.2; }
.dro-rp-price .woocommerce-Price-amount { color:#fff !important; }
.dro-rp-price ins { text-decoration:none; }
.dro-rp-price del { color:var(--dro-text-muted) !important; font-size:12px; font-weight:400; opacity:1; }

/* Meta */
.dro-rp-card__meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dro-rp-stock  { font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; letter-spacing:.3px; }
.dro-rp-stock--in  { background:rgba(16,185,129,.15); color:#34d399; }
.dro-rp-stock--low { background:rgba(245,158,11,.15);  color:#fbbf24; }
.dro-rp-stock--out { background:rgba(239,68,68,.12);   color:#f87171; }
.dro-rp-sold  { font-size:10px; color:var(--dro-text-muted); display:flex; align-items:center; gap:3px; }

/* ── Boutons d'action ─────────────────────────────────────── */
.dro-rp-card__actions { display:flex; gap:8px; margin-top:auto; padding-top:4px; }

.dro-rp-atc {
  flex:1;
  background: linear-gradient(135deg, var(--dro-accent), var(--dro-accent-dark));
  color:      #fff !important;
  border:     none;
  border-radius: var(--dro-radius-btn);
  padding:    10px 10px;
  font-size:  12px; font-weight:600;
  cursor:     pointer;
  display:    flex; align-items:center; justify-content:center; gap:6px;
  transition: var(--dro-tr);
  text-decoration: none !important;
  white-space: nowrap;
  outline:    none;
  line-height: 1;
}

.dro-rp-atc:hover,
.dro-rp-atc:focus-visible { filter:brightness(1.18); transform:translateY(-2px); box-shadow:0 5px 18px rgba(59,130,246,.45); }
.dro-rp-atc.dro-rp-atc--success { background:linear-gradient(135deg,#10b981,#059669); }
.dro-rp-atc.dro-rp-atc--loading { opacity:.7; pointer-events:none; }

@keyframes droSpin { to { transform:rotate(360deg); } }

.dro-rp-wa {
  width:38px; height:38px;
  border-radius:   var(--dro-radius-btn);
  background:      rgba(37,211,102,.13);
  color:           var(--dro-wa) !important;
  border:          1.5px solid rgba(37,211,102,.3);
  display:         flex; align-items:center; justify-content:center;
  text-decoration: none !important;
  transition:      var(--dro-tr);
  flex-shrink:     0;
}

.dro-rp-wa:hover { background:var(--dro-wa); color:#fff !important; border-color:var(--dro-wa); transform:translateY(-2px); }

/* ── Barre de progression ─────────────────────────────────── */
.dro-rp-progress {
  height:     3px;
  background: rgba(59,130,246,.1);
  margin:     20px 32px 0;
  border-radius: 3px;
  overflow:   hidden;
  position:   relative; z-index:1;
}

.dro-rp-progress__bar {
  height:     100%;
  background: linear-gradient(90deg, var(--dro-accent), #60a5fa);
  border-radius: 3px;
  width:      0%;
  transition: width .48s cubic-bezier(.4,0,.2,1);
}

/* ── Dots ─────────────────────────────────────────────────── */
.dro-rp-dots {
  display:         flex;
  justify-content: center;
  gap:             6px;
  margin-top:      16px;
  position:        relative; z-index:1;
}

.dro-rp-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(148,163,184,.28);
  border:none; cursor:pointer; padding:0;
  transition:var(--dro-tr); outline:none;
}

.dro-rp-dot.is-active           { background:var(--dro-accent); width:24px; border-radius:4px; }
.dro-rp-dot:hover:not(.is-active){ background:rgba(148,163,184,.55); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes droFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── Toast ────────────────────────────────────────────────── */
.dro-rp-toast {
  position:      fixed; bottom:24px; right:24px;
  background:    linear-gradient(135deg,#0d1340,#1e3a8a);
  color:         #e2e8f0;
  border:        1px solid var(--dro-accent);
  border-radius: 14px;
  padding:       14px 20px;
  font-size:     14px; font-weight:500;
  z-index:       999999;
  box-shadow:    0 8px 36px rgba(0,0,0,.45);
  display:       flex; align-items:center; gap:10px;
  transform:     translateY(90px); opacity:0;
  transition:    transform .38s cubic-bezier(.4,0,.2,1), opacity .38s;
  max-width:     340px;
  font-family:   var(--dro-font);
}

.dro-rp-toast.is-visible  { transform:translateY(0); opacity:1; }
.dro-rp-toast__icon       { font-size:18px; }
.dro-rp-toast__link       { color:var(--dro-accent)!important; font-weight:600; margin-left:4px; text-decoration:none; }
.dro-rp-toast__link:hover { text-decoration:underline; }

/* ── RTL ──────────────────────────────────────────────────── */
[dir="rtl"] .dro-rp-card__badges { left:auto; right:10px; }
[dir="rtl"] .dro-rp-header__nav  { flex-direction:row-reverse; }
[dir="rtl"] .dro-rp-arrow--prev  { left:auto; right:8px; }
[dir="rtl"] .dro-rp-arrow--next  { right:auto; left:8px; }
[dir="rtl"] .dro-rp-toast        { right:auto; left:24px; }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1100px){ .dro-rp-carousel-wrap{padding:0 50px;} }
@media(max-width:768px) { .dro-rp-carousel-wrap{padding:0 42px;} .dro-rp-header{padding:0 16px 22px;} }
@media(max-width:540px) {
  .dro-rp-section          { padding:36px 0 44px; }
  .dro-rp-header           { padding:0 12px 18px; }
  .dro-rp-carousel-wrap    { padding:0 36px; }
  .dro-rp-arrow            { width:34px; height:34px; }
  .dro-rp-arrow--prev      { left:4px; }
  .dro-rp-arrow--next      { right:4px; }
  .dro-rp-header__nav      { display:none; }
  .dro-rp-progress         { margin:14px 16px 0; }
  .dro-rp-toast            { bottom:16px; right:12px; left:12px; max-width:unset; }
}