/* ===== Geo Herb — Demo Instagram Reels ===== */

.reel-screen{
  padding:0 !important;
  display:block !important;
  overflow:hidden;
  position:relative;
  background:linear-gradient(160deg,#16261b,#24422c) !important;
  color:#fff;
}
.reel-screen.screen2{background:linear-gradient(160deg,#2b2313,#5a4a22) !important}
.reel-screen.screen3{background:linear-gradient(160deg,#122a22,#1c4a3a) !important}
.reel-screen.screen4{background:linear-gradient(160deg,#241a10,#54371c) !important}
.reel-screen:before{content:none !important}

/* animated "video" layer */
.reel-vid{position:absolute;inset:0;overflow:hidden}

/* dark gradient so text/icons stay legible */
.reel-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.75) 100%);pointer-events:none;z-index:2}

.reel-badge{position:absolute;top:12px;left:12px;z-index:3;background:rgba(255,255,255,.16);backdrop-filter:blur(3px);color:#fff;font-size:9px;letter-spacing:1px;font-weight:700;padding:4px 8px;border-radius:20px}

/* right-side action rail, Instagram-style */
.reel-actions{position:absolute;right:8px;bottom:76px;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center}
.reel-act{background:none;border:0;color:#fff;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));transition:transform .2s ease}
.reel-act small{font-size:9px;font-weight:600;opacity:.9}
.reel-act:hover{transform:scale(1.15)}
.reel-act.like.liked{color:#ff4d6d}
.reel-act.like.liked{animation:gh-likePop .35s ease}
@keyframes gh-likePop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

/* center play/pause toggle */
.reel-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;padding-left:3px;z-index:3;cursor:pointer;opacity:0;transition:opacity .25s ease}
.reel:hover .reel-toggle,.reel-screen.gh-paused .reel-toggle{opacity:1}
.reel-screen.gh-paused .reel-vid *{animation-play-state:paused !important}
.reel-screen.gh-paused .reel-bar i{animation-play-state:paused !important}

/* bottom info */
.reel-footer{position:absolute;left:12px;right:44px;bottom:16px;z-index:3;text-align:left}
.reel-user{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.reel-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#8fc48a,#e3c67e);display:flex;align-items:center;justify-content:center;font-size:13px}
.reel-user b{font-size:12px}
.reel-follow{margin-left:auto;background:transparent;border:1px solid #fff;color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;cursor:pointer;transition:background .2s ease,color .2s ease}
.reel-follow.following{background:#fff;color:#16261b}
.reel-footer strong{display:block;font-size:13px;font-weight:700;line-height:1.3;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.reel-footer small{opacity:.8;font-size:10px}

/* progress bar like a real reel */
.reel-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:3}
.reel-bar i{display:block;height:100%;width:0%;background:#fff;animation:gh-reelProgress 9s linear infinite}
.reel-screen.screen2 .reel-bar i{animation-duration:8s}
.reel-screen.screen3 .reel-bar i{animation-duration:10s}
.reel-screen.screen4 .reel-bar i{animation-duration:7s}
@keyframes gh-reelProgress{from{width:0%}to{width:100%}}

/* double-tap heart burst */
.gh-heart-burst{position:absolute;z-index:5;font-size:52px;color:#ff4d6d;pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:gh-heartBurst .8s ease forwards;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
@keyframes gh-heartBurst{0%{transform:translate(-50%,-50%) scale(0);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.05);opacity:0}}

/* ---- vid-leaves: leaves drifting inside the frame ---- */
.vid-leaves{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 60%)}
.vid-leaves .p{position:absolute;bottom:-20px;font-size:22px;opacity:0;animation:gh-leafDrift 6s ease-in infinite}
.vid-leaves .p1{left:12%;animation-delay:.2s}
.vid-leaves .p2{left:35%;animation-delay:1.4s;font-size:18px}
.vid-leaves .p3{left:58%;animation-delay:.6s;font-size:26px}
.vid-leaves .p4{left:76%;animation-delay:2.2s;font-size:16px}
.vid-leaves .p5{left:90%;animation-delay:1s;font-size:20px}
@keyframes gh-leafDrift{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}10%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-340px) translateX(18px) rotate(200deg);opacity:0}}

/* ---- vid-powder: powder falling + swirling from a spoon ---- */
.vid-powder{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.1),transparent 65%)}
.vid-powder .scoop{position:absolute;top:16%;left:50%;transform:translateX(-50%);font-size:30px;animation:gh-scoopTilt 3s ease-in-out infinite}
@keyframes gh-scoopTilt{0%,100%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) rotate(10deg)}}
.vid-powder .d{position:absolute;top:26%;left:50%;width:6px;height:6px;border-radius:50%;background:#e8d49a;opacity:0;animation:gh-powderFall 2.4s ease-in infinite}
.vid-powder .d1{animation-delay:0s;left:47%}
.vid-powder .d2{animation-delay:.3s;left:51%}
.vid-powder .d3{animation-delay:.6s;left:49%}
.vid-powder .d4{animation-delay:.9s;left:53%}
.vid-powder .d5{animation-delay:1.2s;left:46%}
.vid-powder .d6{animation-delay:1.5s;left:52%}
@keyframes gh-powderFall{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:.9}100%{transform:translateY(200px) scale(.4);opacity:0}}

/* ---- vid-carousel: sliding product icons ---- */
.vid-carousel{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.09),transparent 65%)}
.carousel-row{display:flex;gap:22px;font-size:34px;animation:gh-carouselSlide 6s linear infinite}
@keyframes gh-carouselSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- vid-oil: ripple rings + falling drop ---- */
.vid-oil{background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.08),transparent 65%)}
.vid-oil .drop{position:absolute;top:14%;left:50%;transform:translateX(-50%);font-size:26px;animation:gh-dropFall 3s ease-in infinite}
@keyframes gh-dropFall{0%{top:14%;opacity:1}70%{top:52%;opacity:1}85%{opacity:0}100%{top:52%;opacity:0}}
.vid-oil .ring{position:absolute;top:55%;left:50%;width:14px;height:14px;border:2px solid rgba(255,255,255,.55);border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:gh-ripple 3s ease-out infinite}
.vid-oil .r1{animation-delay:0s}
.vid-oil .r2{animation-delay:1s}
.vid-oil .r3{animation-delay:2s}
@keyframes gh-ripple{0%{width:14px;height:14px;opacity:0}10%{opacity:.7}100%{width:200px;height:200px;opacity:0}}

@media (max-width:800px){
  .reel-actions{right:6px;bottom:64px;gap:10px}
  .reel-act{font-size:16px}
  .reel-footer{left:10px;right:38px;bottom:12px}
}

@media (prefers-reduced-motion: reduce){
  .vid-leaves .p,.vid-powder .scoop,.vid-powder .d,.carousel-row,.vid-oil .drop,.vid-oil .ring,.reel-bar i{animation:none !important}
}
.dynamic-reel{background:#111;border-radius:18px;overflow:hidden;position:relative;flex:0 0 300px}
.dynamic-reel .reel-screen{height:400px;background:#111;overflow:hidden}
.dynamic-reel iframe,.dynamic-reel video{width:100%;height:100%;display:block;border:0;object-fit:cover;background:#111}
.dynamic-reel-title{padding:10px 12px;background:#fff;color:#214832;font-weight:800;font-size:13px}
.reels-empty{padding:28px;border:1px dashed #cbd8c8;border-radius:18px;background:#f7faf5;display:flex;flex-direction:column;gap:6px;color:#4e6255}
@media(max-width:600px){.dynamic-reel{flex-basis:250px}.dynamic-reel .reel-screen{height:350px}}

/* Geo Herb mobile slider height fix */
@media (max-width: 767px) {
  .hero-slider,
  .hero-slider .slide,
  .hero-slider .swiper-slide,
  .hero-slider .carousel-item,
  .hero-slider .slider-item,
  .home-slider,
  .home-slider .slide,
  .home-slider .swiper-slide,
  .slider,
  .main-slider,
  .banner-slider {
    min-height: 650px !important;
    height: 650px !important;
  }

  .hero-slider img,
  .hero-slider .slide img,
  .hero-slider .swiper-slide img,
  .hero-slider .carousel-item img,
  .hero-slider .slider-item img,
  .home-slider img,
  .home-slider .slide img,
  .home-slider .swiper-slide img,
  .slider img,
  .main-slider img,
  .banner-slider img {
    width: 100% !important;
    height: 650px !important;
    min-height: 650px !important;
    object-fit: cover !important;
  }
}


/* Reel card = video ka 3:4 ratio, taaki demo videos ke kinaare na katein.
   Admin se upload kiye vertical videos centre se fit (cover) honge. */
.dynamic-reel{flex:0 0 280px!important}
.dynamic-reel .reel-screen{height:auto!important;aspect-ratio:3 / 4}
@media(max-width:600px){.dynamic-reel{flex-basis:230px!important}}