/* ALHUDA.AE — ad image slider, hover zoom, lightbox, card hover slideshow (v2.2) */

/* ---------- product slider ---------- */
.slider{position:relative;border-radius:var(--radius);overflow:hidden;background:#eef0f8;box-shadow:var(--shadow);margin-bottom:14px;user-select:none;}
.slider-viewport{overflow:hidden;aspect-ratio:1/1;}
.slider-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.8,.3,1);will-change:transform;}
.slide{flex:0 0 100%;height:100%;overflow:hidden;cursor:zoom-in;position:relative;}
.slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease-out;transform-origin:50% 50%;will-change:transform;}
.slide.zooming{cursor:zoom-in;}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.88);color:var(--navy);font-size:16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:0;transition:.25s;z-index:3;display:flex;align-items:center;justify-content:center;}
.slider:hover .slider-btn,.slider:focus-within .slider-btn{opacity:1;}
.slider-btn:hover{background:var(--primary);color:#fff;}
.slider-prev{left:12px;} .slider-next{right:12px;}
.slider-count{position:absolute;top:12px;left:12px;background:rgba(19,26,58,.72);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;z-index:3;}
.slider-expand{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);cursor:pointer;z-index:3;box-shadow:0 3px 10px rgba(0,0,0,.2);}
.slider-expand:hover{background:var(--primary);color:#fff;}
.slider-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:3;}
.slider-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.65);cursor:pointer;padding:0;transition:.25s;}
.slider-dots button.active{background:var(--primary);width:24px;border-radius:6px;}
.slider-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);background:rgba(19,26,58,.7);color:#fff;font-size:11.5px;padding:4px 12px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;z-index:3;white-space:nowrap;}
.slider:hover .slider-hint{opacity:1;}
@media (hover:none){.slider-btn{opacity:1;width:36px;height:36px;} .slider-hint{display:none;}}
#adThumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
#adThumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;opacity:.65;transition:.2s;flex:0 0 auto;}
#adThumbs img:hover{opacity:1;transform:translateY(-2px);}
#adThumbs img.active{border-color:var(--primary);opacity:1;}

/* ---------- lightbox ---------- */
body.lb-open{overflow:hidden;}
.lb{position:fixed;inset:0;background:rgba(8,10,24,.96);z-index:2000;display:flex;align-items:center;justify-content:center;animation:lbIn .2s ease;}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;z-index:3;color:#fff;}
.lb-tools{display:flex;gap:8px;}
.lb button{border:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);transition:.2s;}
.lb button:hover{background:var(--primary);}
.lb-tools button{width:42px;height:42px;border-radius:50%;font-size:16px;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;font-size:20px;z-index:3;}
.lb-prev{left:16px;} .lb-next{right:16px;}
.lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in;}
.lb-stage.zoomed{cursor:grab;} .lb-stage.dragging{cursor:grabbing;}
.lb-img{max-width:92vw;max-height:84vh;object-fit:contain;transform-origin:50% 50%;will-change:transform;user-select:none;-webkit-user-drag:none;}
.lb-img.animate{transition:transform .22s ease-out;}
.lb-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#b9bdd8;font-size:12.5px;background:rgba(255,255,255,.08);padding:6px 14px;border-radius:20px;z-index:3;white-space:nowrap;}
@media (max-width:600px){.lb-nav{width:40px;height:40px;} .lb-hint{font-size:11px;white-space:normal;text-align:center;width:90%;}}

/* ---------- listing-card hover slideshow ---------- */
.thumb-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;opacity:0;transition:.2s;pointer-events:none;}
.thumb:hover .thumb-dots{opacity:1;}
.thumb-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.4);}
.thumb-dots span.on{background:#fff;transform:scale(1.25);}
.card .thumb img.swap{animation:swapFade .35s ease;}
@keyframes swapFade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.slider-track{transition:none;}.slide img,.lb-img.animate{transition:none;}}

/* ---------- photo uploader status (v2.3) ---------- */
.ph-status{font-size:13px;margin-top:8px;color:var(--muted);min-height:18px;}
.ph-status.err{color:var(--danger);font-weight:600;}
.photo-slot .ph-size{position:absolute;bottom:4px;right:4px;background:rgba(19,26,58,.7);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;}
.photo-slot.filled .cover-badge{bottom:0;}