/* =====================================================================
   Panoramika Carousel – STYLING + CONFIG (EDIT VARIABLES ONLY)
   ---------------------------------------------------------------------
   JS only creates DOM + behavior. All visual details are here.

   IMPORTANT:
   - If this CSS is not loaded, carousel will look "broken" (vertical blocks).
   - carousel.js auto-loads this file by default via cssUrl option.

   CONFIG VARIABLES (VISUAL):
   POSITION:
     --pano-carousel-top / --pano-carousel-left : position inside player
     --pano-carousel-z                         : stacking above overlays

   SIZE & BAR:
     --pano-carousel-width                     : total carousel bar width
     --pano-carousel-padding                   : padding inside bar
     --pano-carousel-gap                       : gap between thumbnails
     --pano-carousel-bg                        : bar background
     --pano-carousel-blur                      : blur amount (0 disables)
     --pano-carousel-radius                    : bar corner radius (0=square)

   THUMBS:
     --pano-thumb-width / --pano-thumb-height  : thumbnail size
     --pano-thumb-radius                       : 0 square, >0 rounded
     --pano-thumb-outline                      : normal outline
     --pano-thumb-outline-active               : active outline
     --pano-thumb-shadow                       : thumb shadow

   ARROWS:
     --pano-arrow-size                         : button size
     --pano-arrow-radius                       : 999px circle, 0 square
     --pano-arrow-bg / border / color          : arrow styling
     --pano-arrow-font-size                    : arrow icon size

   LABEL:
     --pano-label-font / --pano-label-bg       : label typography & background
   ===================================================================== */

:root{
  /* Position */
  --pano-carousel-top: 20px;
  --pano-carousel-left: 10px;
  --pano-carousel-z: 9999;

  /* Bar */
  --pano-carousel-width: 1040px;
  --pano-carousel-padding: 8px 10px;
  --pano-carousel-gap: 0x;
  --pano-carousel-bg: rgba(0,0,0,0.20);
  --pano-carousel-blur: 2px;
  --pano-carousel-radius: 0px;

  /* Thumbnails */
  --pano-thumb-width: 220px;
  --pano-thumb-height: 124px;
  --pano-thumb-radius: 0px;

  /* Active border */
  --pano-thumb-border-width: 3px;
  --pano-thumb-border-color: rgba(255,255,255,.95);

  --pano-thumb-shadow: 0 4px 14px rgba(0,0,0,.30);

  /* Arrows – REAL SIZE CONTROL */
  --pano-arrow-size: 72px;          /* button size */
  --pano-arrow-line: 6px;           /* arrow stroke thickness */
  --pano-arrow-length: 26px;        /* arrow length */
  --pano-arrow-bg: rgba(0,0,0,0.30);
  --pano-arrow-border: 3px solid rgba(255,255,255,.95);

  /* Label */
  --pano-label-font: 700 13px/1.2 Arial, sans-serif;
  --pano-label-color: #fff;
  --pano-label-bg: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

/* Player positioning context */
.video-js{ position: relative !important; }

/* ---------------------------------------------------------------- */

.pano-carousel{
  position:absolute;
  top:var(--pano-carousel-top);
  left:var(--pano-carousel-left);
  z-index:var(--pano-carousel-z);

  display:flex;
  align-items:center;
  gap:12px;

  width:var(--pano-carousel-width);
  max-width:calc(100% - (var(--pano-carousel-left) * 2));

  padding:var(--pano-carousel-padding);
  background:var(--pano-carousel-bg);
  border-radius:var(--pano-carousel-radius);

  backdrop-filter: blur(var(--pano-carousel-blur));
  -webkit-backdrop-filter: blur(var(--pano-carousel-blur));
}

/* ================= ARROWS ================= */

.pano-carousel__btn{
  width:var(--pano-arrow-size);
  height:var(--pano-arrow-size);
  border:var(--pano-arrow-border);
  background:var(--pano-arrow-bg);
  cursor:pointer;
  position:relative;
  padding:0;
}

.pano-carousel__btn:disabled{ opacity:.3; cursor:default; }

/* Remove font-based arrows */
.pano-carousel__btn::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:var(--pano-arrow-length);
  height:var(--pano-arrow-length);
  border-top:var(--pano-arrow-line) solid #fff;
  border-right:var(--pano-arrow-line) solid #fff;
}

/* Left arrow */
.pano-carousel__btn--prev::before{
  transform: rotate(-135deg);
}

/* Right arrow */
.pano-carousel__btn--next::before{
  transform: rotate(45deg);
}

/* ================= TRACK ================= */

.pano-carousel__viewport{ overflow:hidden; flex:1 1 auto; }

.pano-carousel__track{
  display:flex;
  gap:var(--pano-carousel-gap);
  transition:transform .22s ease;
}

/* ================= THUMB ================= */

.pano-carousel__item{
  width:var(--pano-thumb-width);
  height:var(--pano-thumb-height);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:#000;
  box-shadow:var(--pano-thumb-shadow);
  flex:0 0 auto;
}

.pano-carousel__item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pano-carousel__label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:5px 7px;
  font:var(--pano-label-font);
  color:var(--pano-label-color);
  background:var(--pano-label-bg);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;
}

/* Active border on top */
.pano-carousel__item.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  box-sizing:border-box;
  border:var(--pano-thumb-border-width) solid var(--pano-thumb-border-color);
}

/* Responsive */
@media (max-width:900px){
  :root{
    --pano-carousel-width: calc(100% - 24px);
    --pano-thumb-width: 170px;
    --pano-thumb-height: 96px;
    --pano-arrow-size: 58px;
    --pano-arrow-length: 22px;
    --pano-arrow-line: 5px;
  }
}
@media (max-width:520px){
  :root{
    --pano-thumb-width: 140px;
    --pano-thumb-height: 78px;
    --pano-arrow-size: 52px;
    --pano-arrow-length: 20px;
    --pano-arrow-line: 4px;
  }
}