/* =========================================
   QRNova — Polished horizontal scrollers
   Applies to: .frame-options / .shape-row / .logo-row
   ========================================= */

.ui-scrollwrap {
  position: relative;
  width: 100%;
}

/* Default: keep your existing spacing unless scrollable */
.ui-scrollwrap .frame-options,
.ui-scrollwrap .shape-row,
.ui-scrollwrap .logo-row {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  /* Hide native scrollbars */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui-scrollwrap .frame-options::-webkit-scrollbar,
.ui-scrollwrap .shape-row::-webkit-scrollbar,
.ui-scrollwrap .logo-row::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Only when we detect it can scroll, we add the "pro" treatment */
.ui-scrollwrap.ui-scrollwrap--scrollable .frame-options,
.ui-scrollwrap.ui-scrollwrap--scrollable .shape-row,
.ui-scrollwrap.ui-scrollwrap--scrollable .logo-row {
  scroll-snap-type: x proximity;

  /* Make room for overlay buttons + progress bar */
  padding-left: 44px !important;
  padding-right: 44px !important;
  padding-bottom: 18px !important;

  /* Edge fade */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0px,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0px,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}

/* Snap alignment for items */
.ui-scrollwrap .frame-option,
.ui-scrollwrap .shape-option,
.ui-scrollwrap .logo-option {
  scroll-snap-align: start;
}

/* Glass scroll buttons */
.ui-scrollbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  color: rgba(229, 231, 235, 0.95);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;

  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease,
    opacity 0.16s ease;
  z-index: 5;
}

.ui-scrollbtn:hover {
  transform: translateY(-50%) scale(1.06);
  background: rgba(15, 23, 42, 0.72);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(96, 165, 250, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.ui-scrollbtn:active {
  transform: translateY(-50%) scale(0.98);
}

.ui-scrollbtn:disabled {
  opacity: 0.25;
  cursor: default;
  box-shadow: none;
}

.ui-scrollbtn-left {
  left: 6px;
}
.ui-scrollbtn-right {
  right: 6px;
}

.ui-scrollbtn svg {
  width: 18px;
  height: 18px;
}

/* Glowing scroll progress track */
.ui-scrolltrack {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 6px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  z-index: 4;
}

.ui-scrollthumb {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.32);
  transform: translateX(0px);
  transition: transform 0.08s linear, width 0.08s linear;
}

/* If not scrollable, hide the extra UI */
.ui-scrollwrap:not(.ui-scrollwrap--scrollable) .ui-scrollbtn,
.ui-scrollwrap:not(.ui-scrollwrap--scrollable) .ui-scrolltrack {
  display: none;
}

/* Small extra polish on frame cards (optional, safe) */
.frame-option:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(96, 165, 250, 0.22) inset;
}
.shape-thumb {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.shape-option:hover .shape-thumb {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(96, 165, 250, 0.18) inset;
}

/* Fix: ensure active tab text NEVER disappears */
.design-tab.active {
  color: #111827 !important;
}