/* Aqaratk — mobile reels viewer styles. Extracted from includes/reels.php
   so the homepage does not re-send ~5 KB of CSS on every visit. */
/* Mobile only. Both the trigger and the overlay stay out of the way entirely on
   anything wider than a phone - this view is a phone interaction, and on a
   desktop the existing card grid is strictly better. */
.reels-open{display:none}
.reels{display:none}

@media (max-width:767px){
  .reels-open{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
    margin-top:14px;padding:12px 16px;border:1px solid var(--line,#E3E8EF);
    background:#fff;color:var(--navy,#0B1B33);border-radius:12px;
    font-family:inherit;font-size:14px;font-weight:700;cursor:pointer
  }
  .reels-open:active{background:var(--surface-2,#F3F6FA)}
  /* Author `display` beats the UA stylesheet's [hidden], so it has to be restated
     here. The script removes the attribute once it has confirmed a phone - which
     means if the script never runs, no dead button is left on screen. */
  .reels-open[hidden]{display:none}

  .reels{
    position:fixed;inset:0;z-index:2000;background:#000;
    display:none;flex-direction:column
  }
  .reels.is-open{display:flex}
  .reels[hidden]{display:none}

  .reels-track{
    flex:1;overflow-y:auto;overflow-x:hidden;
    scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior:contain
  }
  .reels-track::-webkit-scrollbar{display:none}

  .reel{
    position:relative;width:100%;
    height:100vh;height:100dvh;      /* dvh so the browser chrome cannot clip it */
    scroll-snap-align:start;scroll-snap-stop:always;
    overflow:hidden;background:#111
  }

  /* horizontal gallery inside each panel */
  .reel-shots{
    position:absolute;inset:0;display:flex;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain
  }
  .reel-shots::-webkit-scrollbar{display:none}
  .reel-shot{
    flex:0 0 100%;width:100%;height:100%;object-fit:cover;
    scroll-snap-align:center;user-select:none;-webkit-user-drag:none
  }

  .reel-dots{
    position:absolute;top:64px;left:0;right:0;z-index:3;
    display:flex;justify-content:center;gap:5px;pointer-events:none
  }
  .reel-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);transition:.2s}
  .reel-dots i.on{background:#fff;width:16px;border-radius:3px}

  /* Scrim only over the lower half: the photo is the point, so it is not dimmed
     any more than the text legibility requires. */
  .reel-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 28%,
               rgba(0,0,0,0) 58%,rgba(0,0,0,.35) 100%)
  }

  .reel-badges{position:absolute;top:64px;inset-inline-start:16px;z-index:3;display:flex;gap:6px}
  .reel-badge{
    font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;
    backdrop-filter:blur(6px)
  }
  .reel-badge.gold{background:rgba(183,146,42,.92);color:#1a1400}
  .reel-badge.navy{background:rgba(11,27,51,.75);color:#fff}

  .reel-body{
    position:absolute;inset-inline:0;bottom:0;z-index:3;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom));color:#fff
  }
  .reel-price{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
  .reel-title{
    font-size:15px;font-weight:600;margin:6px 0 0;line-height:1.4;color:rgba(255,255,255,.94);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
  }
  .reel-loc{
    display:flex;align-items:center;gap:5px;margin-top:7px;
    font-size:13px;color:rgba(255,255,255,.78)
  }
  .reel-specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .reel-specs span{
    font-size:12px;padding:5px 11px;border-radius:999px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)
  }
  .reel-specs b{font-weight:800}
  .reel-monthly{margin-top:10px;font-size:13px;color:rgba(255,255,255,.85)}
  .reel-monthly b{color:#fff}

  .reel-cta{display:flex;gap:9px;margin-top:16px}
  .reel-btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:46px;border-radius:12px;font-size:14px;font-weight:700;
    text-decoration:none;transition:.15s
  }
  .reel-btn.primary{flex:1;background:#B7922A;color:#1a1400}
  .reel-btn.primary:active{background:#a0801f}
  .reel-btn.ghost{
    width:52px;background:rgba(255,255,255,.16);color:#fff;
    border:1px solid rgba(255,255,255,.22)
  }

  .reels-top{
    position:absolute;top:0;inset-inline:0;z-index:5;
    display:flex;align-items:center;justify-content:space-between;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
    background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
  }
  .reels-count{
    color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
    background:rgba(0,0,0,.35);padding:5px 11px;border-radius:999px
  }
  .reels-x{
    width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(0,0,0,.42);color:#fff;font-size:24px;line-height:1;
    display:flex;align-items:center;justify-content:center
  }

  .reel-end{display:flex;align-items:center;justify-content:center;background:#0B1B33}
  .reel-end-in{text-align:center;padding:28px;color:#fff}
  .reel-end-in h3{font-size:20px;font-weight:800;margin:0 0 8px}
  .reel-end-in p{font-size:14px;color:rgba(255,255,255,.7);margin:0 0 20px}
  .reel-end-in .reel-btn{padding-inline:26px}

  .reels-hint{
    position:absolute;bottom:calc(96px + env(safe-area-inset-bottom));inset-inline:0;z-index:4;
    display:flex;justify-content:center;pointer-events:none;
    transition:opacity .4s
  }
  .reels-hint span{
    font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);
    padding:6px 14px;border-radius:999px;animation:reelBob 1.7s ease-in-out infinite
  }
  .reels-hint.gone{opacity:0}
  @keyframes reelBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

  /* Respect the OS "reduce motion" setting: the bobbing hint and the smooth
     scrolling are exactly the kind of thing that triggers motion sickness. */
  @media (prefers-reduced-motion:reduce){
    .reels-hint span{animation:none}
    .reels-track{scroll-behavior:auto}
  }
}