/* BODY: pełna blokada scrolla (iOS/Android) */
body.wc360-modal-open{
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* modal overlay */
.wc360-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;

  /* ważne: modal nie może “przewijać” */
  overflow: hidden;
  overscroll-behavior: none;
}
.wc360-modal.is-open{ display:block; }

.wc360-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
}

/* dialog */
.wc360-modal__dialog{
  position: relative;
  width: min(96vw, 980px);
  max-height: 92vh;
  margin: 4vh auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;

  overscroll-behavior: none;
}

/* mobile: FULLSCREEN */
@media (max-width: 640px){
  .wc360-modal__dialog{
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }
}

/* header */
.wc360-modal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
}

.wc360-modal__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  letter-spacing: .2px;
}

.wc360-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0,0,0,.85);
  color: #fff;
}

.wc360-modal__close{
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.70);
  color:#fff;
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
}

/* content */
.wc360-modal__content{
  flex: 1;
  min-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 16px;

  overscroll-behavior: none;
}

/* Stage: brak scrolla, tylko gesty do 360 */
.wc360-modal__stage{
  width: 100%;
  max-width: min(92vw, 70vh);
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.03);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);

  touch-action: none;   /* KLUCZ: żadnego przewijania */
  user-select:none;
}

/* fallback aspect-ratio */
.wc360-modal__stage::before{ content:""; float:left; padding-top:100%; }
.wc360-modal__stage::after{ content:""; display:block; clear:both; }

@media (max-width: 640px){
  .wc360-modal__content{
    padding: 12px 12px;
  }
  .wc360-modal__stage{
    max-width: min(96vw, 58vh);
    border-radius: 14px;
  }
}

.wc360-modal__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* kontrolki */
.wc360-modal__controls{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);

  overscroll-behavior: none;
}

@media (max-width: 640px){
  .wc360-modal__controls{
    padding: 12px;
    gap: 10px;
  }
}

.wc360-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(0,0,0,.85);
  color:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

.wc360-btn svg{
  fill: currentColor;
}

.wc360-btn:disabled{
  opacity: .75;
  cursor: default;
}

.wc360-btn.is-stopped{
  background: rgba(0,0,0,.60);
}

.wc360-sliderwrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 8px;
}

.wc360-slider{
  width: 100%;
  accent-color: #111;
}

.wc360-frame{
  min-width: 84px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: rgba(0,0,0,.82);
}

.wc360-frame__sep{
  opacity: .55;
  padding: 0 3px;
}

.wc360-modal.wc360-dragging .wc360-modal__stage{
  box-shadow: 0 22px 55px rgba(0,0,0,.16);
}

/* Ikony baseline fix */
.wc360-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transform: translateY(1px);
}

.wc360-btn .wc360-ico svg{
  width: 22px !important;
  height: 22px !important;
  display: block;
}

.wc360-btn__text{
  display: inline-block;
  line-height: 1;
  transform: translateY(1px);
}

.wc360-sliderwrap .wc360-ico svg{
  width: 20px !important;
  height: 20px !important;
  display: block;
}


/* iOS: 100vh bywa większe niż realna wysokość (pasek adresu) */
@media (max-width: 640px){
  .wc360-modal__dialog{
    height: 100dvh;      /* zamiast 100vh */
    max-height: 100dvh;
  }

  /* Controls zawsze na dole i widoczne */
  .wc360-modal__controls{
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;

    /* safe area (iPhone z “home bar”) */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Content może się kurczyć */
  .wc360-modal__content{
    min-height: 0;
    flex: 1 1 auto;
  }

  /* Stage NIE może wymuszać za dużego kwadratu */
  .wc360-modal__stage{
    width: 100%;
    max-width: none;

    /* Klucz: ogranicz wysokość stage do tego, co zostaje nad controls */
    max-height: calc(100dvh - 140px - env(safe-area-inset-bottom));
    height: auto;
  }

  /* Żeby kwadrat trzymał proporcje i mieścił się w max-height */
  .wc360-modal__stage::before{
    padding-top: min(100%, 100%); /* zostawiamy, ale max-height ogranicza realny rozmiar */
  }
}

/* Dodatkowo: na wszelki wypadek, gdyby coś zasłaniało */
.wc360-modal__controls{
  background: rgba(255,255,255,.96);
}