/* Aurify A/B Slider — Improved Responsive Styles */

.aurify-ab-slider{
  --aurify-accent:#ff3f7f;
  --aurify-track:rgba(255,255,255,0.18);
  --aurify-border:rgba(255,255,255,0.22);
  --aurify-border-w:1px;
  --aurify-radius:16px;
  --aurify-main-h:40px;
  --aurify-vol-h:18px;

  /* ✨ RESPONSIVE WIDTH - fluid with better breakpoints */
  --aurify-w: min(720px, 100%);
  --aurify-padding: clamp(12px, 3vw, 24px);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  width: var(--aurify-w);
  padding: 0 var(--aurify-padding);
  box-sizing: border-box;
}

/* ==============================
   RESPONSIVE BREAKPOINTS
   ============================== */

/* Mobile-first adjustments */
@media (max-width: 640px) {
  .aurify-ab-btn {
    width: 38px;
    height: 38px;
  }
  
  .aurify-ab-top {
    gap: 8px;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .aurify-ab-btn {
    width: 34px;
    height: 34px;
  }
}

/* Larger screens */
@media (min-width: 1024px) {
  .aurify-ab-slider {
    --aurify-w: 800px;
  }
}

/* ==============================
   TOP ROW (HORIZONTAL)
   ============================== */

.aurify-ab-top{
  display:flex;
  gap:12px;
  align-items:center;
  width: 100%;
}

.aurify-ab-btn{
  width:42px;height:42px;
  border-radius:999px;
  border:var(--aurify-border-w) solid var(--aurify-border);
  background:rgb(229 96 140 / 65%);
  display:grid;place-items:center;
  cursor:pointer;
  flex: 0 0 auto;
  transition: background 0.2s ease;
}
.aurify-ab-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.aurify-ab-btn:hover{ background:rgba(255,255,255,0.10); }

.aurify-ab-ic{
  width:0;height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid #fff;
  margin-left:2px;
}
.aurify-ab-btn[data-state="playing"] .aurify-ab-ic{
  width:12px;height:12px;
  border:none;margin:0;
  position:relative;
}
.aurify-ab-btn[data-state="playing"] .aurify-ab-ic::before,
.aurify-ab-btn[data-state="playing"] .aurify-ab-ic::after{
  content:"";
  position:absolute;top:0;bottom:0;
  width:4px;border-radius:2px;
  background:#fff;
}
.aurify-ab-btn[data-state="playing"] .aurify-ab-ic::before{ left:0; }
.aurify-ab-btn[data-state="playing"] .aurify-ab-ic::after{ right:0; }

.aurify-ab-main{
  position:relative;
  flex:1;
  width: 100%;
  height:calc(var(--aurify-main-h) + 18px);
  padding-top:4px;
  min-width: 0;
}

.aurify-ab-track{
  position:absolute;
  left:0; right:0;
  top:4px;
  height:var(--aurify-main-h);
  border-radius:var(--aurify-radius);
  background: var(--aurify-track);
  border:var(--aurify-border-w) solid var(--aurify-border);
  overflow:hidden;
  pointer-events:none;
}

.aurify-ab-progress{
  height:100%;
  width:100%;
  transform-origin:0 50%;
  transform:scaleX(var(--aurify-complete,0.5));
  background: linear-gradient(90deg,
    color-mix(in lch, var(--aurify-accent), #000 20%),
    color-mix(in lch, var(--aurify-accent), #fff 5%)
  );
  opacity:0.45;
}

/* ==============================
   MAIN ICON (sparkles)
   ============================== */

.aurify-ab-mainicon{
  position:absolute;
  left:clamp(12px, 3%, 20px);
  top:50%;
  translate:0 -50%;
  height:18px;
  width:18px;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#fff;
  z-index:2;
  opacity: calc(0.25 + (var(--aurify-complete, 0.5) * 0.75));
}
.aurify-ab-mainicon svg{
  width:100%;
  height:100%;
  display:block;
  fill: currentColor;
}

/* Smaller icon on mobile */
@media (max-width: 640px) {
  .aurify-ab-mainicon {
    height: 14px;
    width: 14px;
  }
}

.aurify-ab-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  background:transparent;
  margin:0;
}
.aurify-ab-range--main{
  position:absolute;
  left:0; right:0;
  top:4px;
  height:var(--aurify-main-h);
  opacity:0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 20;
  touch-action: none;
}
.aurify-ab-range:focus-visible{ outline: none; }

.aurify-ab-thumb{
  position:absolute;
  top:4px;
  left:calc(var(--aurify-complete,0.5) * 100%);
  translate:-50% 0;
  height:var(--aurify-main-h);
  width:46px;
  border-radius: calc(var(--aurify-radius) - 2px);
  border:var(--aurify-border-w) solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.30);
  pointer-events:none;
}
.aurify-ab-thumb::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:14px;height:14px;
  border-radius:999px;
  translate:-50% -50%;
  background: #fff;
  opacity:0.95;
}

.aurify-ab-labels{
  display:flex;
  justify-content:space-between;
  font-size:clamp(10px, 2.5vw, 12px);
  opacity:0.75;
  margin-top: calc(var(--aurify-main-h) + 10px);
  padding:0 6px;
  pointer-events:none;
  position:relative;
  z-index: 5;
  width: 100%;
}

.aurify-ab-row{ 
  margin-top:12px; 
  width: 100%; 
}

.aurify-ab-seek{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  width: 100%;
}

.aurify-ab-time{
  font-variant-numeric: tabular-nums;
  font-size:clamp(10px, 2.5vw, 12px);
  opacity:0.75;
  display:flex;
  gap:10px;
}

.aurify-ab-range--seek{
  height:18px;
  opacity:1;
  cursor:pointer;
  --seek-fill: 0%;
  width: 100%;
}

/* Chrome / Safari / Edge */
.aurify-ab-range--seek::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  border:var(--aurify-border-w) solid var(--aurify-border);
  background:
    linear-gradient(
      90deg,
      var(--aurify-accent) 0 var(--seek-fill),
      var(--aurify-track) var(--seek-fill) 100%
    );
}
.aurify-ab-range--seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;height:14px;border-radius:999px;
  background: var(--aurify-accent);
  margin-top:-5px;
}

/* Firefox */
.aurify-ab-range--seek::-moz-range-track{
  height:6px;
  border-radius:999px;
  border:var(--aurify-border-w) solid var(--aurify-border);
  background:
    linear-gradient(
      90deg,
      var(--aurify-accent) 0 var(--seek-fill),
      var(--aurify-track) var(--seek-fill) 100%
    );
}
.aurify-ab-range--seek::-moz-range-thumb{
  width:14px;height:14px;border-radius:999px;
  border:none;
  background: var(--aurify-accent);
}

/* ==============================
   VOLUME + BEAT (HORIZONTAL)
   ============================== */

.aurify-ab-volwrap{ position:relative; height: var(--aurify-vol-h); width: 100%; }
.aurify-ab-track--vol{
  top:0;height:var(--aurify-vol-h);
  border-radius:999px;
  box-shadow:none;
  width: 100%;
}
.aurify-ab-progress--vol{ opacity:0.35; }
.aurify-ab-range--vol{
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
  width: 100%;
}

.aurify-ab-beatwrap{ position: relative; height: var(--aurify-vol-h); width: 100%; }
.aurify-ab-track--beat{
  position: absolute; inset: 0; z-index: 1;
  top:0; height:var(--aurify-vol-h);
  border-radius:999px;
  box-shadow:none;
  pointer-events:none;
  width: 100%;
}
.aurify-ab-progress--beat{ opacity:0.35; }
.aurify-ab-range--beat{
  position:absolute; inset:0;
  z-index:3;
  opacity:0;
  pointer-events:auto;
  cursor:pointer;
  width: 100%;
}

/* ==============================
   WARN
   ============================== */

.aurify-ab-warn{
  margin-top:10px;
  font-size:clamp(11px, 2.5vw, 13px);
  opacity:0.85;
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:12px;
}

/* === REMOVE ALL VISIBLE THUMBS === */
.aurify-ab-thumb,
.aurify-ab-thumb::after,
.aurify-ab-thumb--vol,
.aurify-ab-thumb--vol::after {
  display: none !important;
}

/* Editor friendliness */
.wp-block-aurify-ab-vocal-slider{ max-width: 100%; }

/* ==============================
   VOICE ICON
   ============================== */

.aurify-ab-volicon{
  position:absolute;
  left:clamp(12px, 3%, 20px);
  top:50%;
  translate:0 -50%;
  height:14px;
  width:14px;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#fff;
  opacity: calc(0.25 + (var(--aurify-vol, 0.9) * 0.75));
  z-index:2;
}
.aurify-ab-volicon svg{
  width:100%;
  height:100%;
  fill:currentColor;
}

.aurify-ab-volwrap { position: relative; }
.aurify-ab-track--vol { position: absolute; inset: 0; z-index: 1; pointer-events:none; }
.aurify-ab-range--vol { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: auto; }

/* Beat icon */
.aurify-ab-beaticon{
  position:absolute;
  left:clamp(12px, 3%, 20px);
  top:50%;
  translate:0 -50%;
  height:14px;
  width:14px;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#fff;
  opacity: calc(0.25 + (var(--aurify-beat, 0.9) * 0.75));
  z-index:2;
}
.aurify-ab-beaticon svg{
  width:100%;
  height:100%;
  fill: currentColor;
}

/* Hide seek time display */
.aurify-ab-time { display: none !important; }

/* Remove click outline / black border on play button */
.aurify-ab-btn {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.aurify-ab-btn:focus,
.aurify-ab-btn:active {
  outline: none;
  box-shadow: none;
}

/* Prevent horizontal carousel swipe, allow vertical page scroll */
.aurify-ab-slider .aurify-ab-range--main,
.aurify-ab-slider .aurify-ab-range--seek,
.aurify-ab-slider .aurify-ab-range--vol,
.aurify-ab-slider .aurify-ab-range--beat {
  touch-action: pan-y;
}

/* ==============================
   VERTICAL LAYOUT - RESPONSIVE
   ============================== */

.aurify-ab-slider.is-vertical{
  /* Responsive column sizing */
  --aurify-vw: clamp(56px, 15vw, 66px);
  --aurify-vh: 214px;
  width: min(var(--aurify-w), 100%);
}

/* Adjust for very small screens */
@media (max-width: 380px) {
  .aurify-ab-slider.is-vertical {
    --aurify-vw: 50px;
    --aurify-vh: 160px;
  }
}

.aurify-ab-slider.is-vertical .aurify-ab-vertical-sliders{
  display: grid;
  grid-template-columns: repeat(3, var(--aurify-vw));
  gap: clamp(12px, 4vw, 22px);
  justify-content: center;
  align-items: end;
  margin-bottom: 14px;
  width: 100%;
}

/* Make the three slider blocks visually consistent */
.aurify-ab-slider.is-vertical :is(.aurify-ab-main, .aurify-ab-volwrap, .aurify-ab-beatwrap){
  width: var(--aurify-vw);
  height: var(--aurify-vh);
}

/* MAIN vertical */
.aurify-ab-slider.is-vertical .aurify-ab-main{
  position: relative;
  flex: 0 0 auto;
  height: var(--aurify-vh);
  padding-top: 0;
  width: var(--aurify-vw);
}

.aurify-ab-slider.is-vertical .aurify-ab-main .aurify-ab-track{
  inset: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: var(--aurify-radius);
  background: var(--aurify-track) !important;
  pointer-events:none;
}

.aurify-ab-slider.is-vertical .aurify-ab-main .aurify-ab-progress{
  transform-origin: 50% 100%;
  transform: scaleY(var(--aurify-complete, 0.5));
  background: linear-gradient(
    0deg,
    color-mix(in lch, var(--aurify-accent), #000 20%),
    color-mix(in lch, var(--aurify-accent), #fff 5%)
  );
  opacity: 0.45;
}

/* main input on top */
.aurify-ab-slider.is-vertical .aurify-ab-range--main{
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  cursor: pointer;
  z-index: 30;
  pointer-events:auto;
  touch-action:none;
}

/* labels must NOT block pointer */
.aurify-ab-slider.is-vertical .aurify-ab-labels{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin-top: 0;
  font-size: clamp(10px, 2.5vw, 12px);
  opacity: 0.75;
  text-align: center;
  gap: 56px;
  pointer-events: none;
  z-index: 10;
  width: 100%;
  align-items: center;
  justify-items: center;
  justify-content: space-evenly;
  align-content: space-around;
  padding: 0;
}
.aurify-ab-slider.is-vertical .aurify-ab-labels span{ display:block; }

/* break the 18px bar constraint in vertical mode */
.aurify-ab-slider.is-vertical .aurify-ab-volwrap{ height: var(--aurify-vh); }
.aurify-ab-slider.is-vertical .aurify-ab-beatwrap{ height: var(--aurify-vh); }

/* VOL + BEAT vertical bars (no rotation) */
.aurify-ab-slider.is-vertical .aurify-ab-volume,
.aurify-ab-slider.is-vertical .aurify-ab-beat{
  margin-top: 0;
  position: relative;
  pointer-events: none;
  width: var(--aurify-vw);
}

.aurify-ab-slider.is-vertical .aurify-ab-track--vol,
.aurify-ab-slider.is-vertical .aurify-ab-track--beat{
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: var(--aurify-vol-h) !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  border-radius: var(--aurify-radius) !important;
  background: color-mix(in lch, #fff, transparent 88%) !important;
  border: var(--aurify-border-w) solid var(--aurify-border) !important;
  overflow: hidden !important;
  pointer-events:none !important;
}

.aurify-ab-slider.is-vertical .aurify-ab-progress--vol{
  height: 100% !important;
  width: 100% !important;
  transform-origin: 50% 100% !important;
  transform: scaleY(var(--aurify-vol, 0.9)) !important;
}
.aurify-ab-slider.is-vertical .aurify-ab-progress--beat{
  height: 100% !important;
  width: 100% !important;
  transform-origin: 50% 100% !important;
  transform: scaleY(var(--aurify-beat, 0.9)) !important;
}

/* Inputs are the ONLY clickable layers */
.aurify-ab-slider.is-vertical .aurify-ab-range--vol,
.aurify-ab-slider.is-vertical .aurify-ab-range--beat{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  -webkit-appearance: slider-vertical !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 30 !important;
  touch-action:none;
}

/* Icons upright near bottom */
.aurify-ab-slider.is-vertical .aurify-ab-volicon,
.aurify-ab-slider.is-vertical .aurify-ab-beaticon{
  left: 50% !important;
  top: 84% !important;
  translate: -50% -50% !important;
  transform: none !important;
  z-index: 20 !important;
  pointer-events:none !important;
}

/* Main icon should match vol/beat icon placement in vertical layout */
.aurify-ab-slider.is-vertical .aurify-ab-mainicon{
  left: 50% !important;
  top: 84% !important;
  translate: -50% -50% !important;
}

/* controls row */
.aurify-ab-slider.is-vertical .aurify-ab-controls{
  display: flex;
  gap: clamp(8px, 2vw, 12px);
  align-items: center;
  width: 100%;
}
.aurify-ab-slider.is-vertical .aurify-ab-seek{
  margin-top: 0;
  flex: 1;
  width: 100%;
}
.aurify-ab-slider.is-vertical .aurify-ab-btn{
  flex: 0 0 auto;
}

/* ==============================
   VERTICAL: make VOL + BEAT same width as MAIN
   ============================== */

.aurify-ab-slider.is-vertical .aurify-ab-track--vol,
.aurify-ab-slider.is-vertical .aurify-ab-track--beat{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
}

.aurify-ab-slider.is-vertical .aurify-ab-progress--vol,
.aurify-ab-slider.is-vertical .aurify-ab-progress--beat{
  width: 100% !important;
  height: 100% !important;
}

.aurify-ab-slider.is-vertical .aurify-ab-volicon,
.aurify-ab-slider.is-vertical .aurify-ab-beaticon{
  left: 50% !important;
  translate: -50% -50% !important;
}

/* ==============================
   LABELS (shared)
   ============================== */

.aurify-ab-label{
  margin-top: 6px;
  font-size: clamp(10px, 2.5vw, 12px);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* tighter spacing for horizontal rows (Vocals / Beat) */
.aurify-ab-row .aurify-ab-label{
  margin-top: 4px;
}

/* ==============================
   LABELS — VERTICAL MODE
   ============================== */

.aurify-ab-slider.is-vertical .aurify-ab-col,
.aurify-ab-slider.is-vertical .aurify-ab-volume,
.aurify-ab-slider.is-vertical .aurify-ab-beat{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aurify-ab-slider.is-vertical .aurify-ab-label{
  margin-top: clamp(6px, 2vw, 10px);
  font-size: clamp(9px, 2.2vw, 12px);
  opacity: .65;
}

.aurify-ab-slider.is-vertical .aurify-ab-label{
  flex: 0 0 auto;
}