/* ═══════════════════════════════════════════════════════
   YUMEDOL — CUSTOMIZE PAGE  v1.0.2
   Game-style character creation UI
═══════════════════════════════════════════════════════ */

/* ── Only apply on customize page ── */
body.page-template-page-customize {
  background: #07010f;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────
   OUTER LAYOUT  (nav already handled by main.css)
───────────────────────────────────────────────────── */
.cz-wrap {
  display: flex;
  min-height: 100vh;
  padding-top: var(--nav-h, 70px);
  position: relative;
}

/* ─────────────────────────────────────────────────────
   STAR CANVAS (fixed background)
───────────────────────────────────────────────────── */
#cz-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────
   LEFT PANEL — Character preview + Summary
───────────────────────────────────────────────────── */
.cz-left {
  position: sticky;
  top: var(--nav-h, 70px);
  height: calc(100vh - var(--nav-h, 70px));
  width: 38%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px 24px;
  z-index: 1;
  gap: 20px;
}

/* Character preview */
.cz-preview {
  flex: 1;
  min-height: 0;            /* let it shrink so the card never overlaps the summary */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: visible;
}

/* Acrylic preview card (reused shop .bigcard). Its height follows the available
   space, so as the summary grows and the preview shrinks, the card scales down
   instead of overlapping. Width derives from the 2:3 aspect ratio. */
.cz-preview .ys-shop {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.cz-preview .stage { height: 100%; max-height: 100%; justify-content: center; }
.cz-preview .ys-shop .bigcard.portrait {
  width: auto;
  height: min(440px, calc(100% - 16px));
  aspect-ratio: 2 / 3;
  max-width: 100%;
}

/* Summary card */
.cz-summary {
  width: 100%;
  background: rgba(20,10,40,.75);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(200,150,255,.25);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.cz-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(200,150,255,.2);
  padding-bottom: 12px;
}

.cz-summary-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--yd-lavender, #c4a8f0);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cz-total {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
}

.cz-total span { color: var(--yd-pink, #e879b5); }

.cz-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 130px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}

.cz-lines::-webkit-scrollbar { width: 3px; }
.cz-lines::-webkit-scrollbar-thumb { background: rgba(200,150,255,.4); border-radius: 2px; }

.cz-line {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255,255,255,.75);
}

.cz-line-extra { color: var(--yd-pink, #e879b5); font-weight: 600; }

/* Submit button */
.cz-btn-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .3s;
  box-shadow: 0 4px 20px rgba(180,80,255,.35);
}

.cz-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(180,80,255,.55);
}

/* ─────────────────────────────────────────────────────
   RIGHT PANEL — Options
───────────────────────────────────────────────────── */
.cz-right {
  flex: 1;
  overflow-y: auto;
  padding: 48px 52px 100px 40px;
  z-index: 1;
}

.cz-page-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  background: linear-gradient(135deg, #fff 20%, #c4a8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}

.cz-page-desc {
  font-size: .95rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 48px;
}

/* ─────────────────────────────────────────────────────
   OPTION SECTIONS
───────────────────────────────────────────────────── */
.cz-section {
  margin-bottom: 48px;
}

.cz-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(200,150,255,.2);
}

.cz-section-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 6px rgba(200,150,255,.7));
}

/* ─────────────────────────────────────────────────────
   OPTION CARD GRID (Material, Skeleton, etc.)
───────────────────────────────────────────────────── */
.cz-grid {
  display: grid;
  gap: 14px;
}
.cz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cz-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cz-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Individual option card */
.cz-card {
  position: relative;
  cursor: pointer;
  border: 2px solid rgba(200,150,255,.18);
  border-radius: 14px;
  padding: 18px 14px 14px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  user-select: none;
}

.cz-card:hover {
  border-color: rgba(200,150,255,.55);
  background: rgba(200,150,255,.08);
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(180,100,255,.2);
}

.cz-card.selected {
  border-color: #db2777;
  background: rgba(219,39,119,.12);
  box-shadow: 0 0 0 1px #db2777, 0 6px 24px rgba(219,39,119,.35);
  transform: translateY(-3px);
}

/* Selected glow ring animation */
.cz-card.selected::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  z-index: -1;
  opacity: .6;
  animation: czPulse 2s ease-in-out infinite;
}

@keyframes czPulse {
  0%,100% { opacity: .4; }
  50%      { opacity: .8; }
}

.cz-card-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(200,150,255,.5));
}

.cz-card-label {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.cz-card-sublabel {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 5px;
}

.cz-card-price {
  font-size: .82rem;
  font-weight: 700;
  color: var(--yd-pink, #e879b5);
}

.cz-card-free { color: #34d399; }

/* Badge (Recommended / Premium) */
.cz-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 3px 10px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

/* Silhouette icons for Figure Style */
.cz-silhouette {
  width: 56px;
  height: 70px;
  margin: 0 auto 10px;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: linear-gradient(160deg, rgba(200,150,255,.35), rgba(200,150,255,.12));
  border: 1px solid rgba(200,150,255,.3);
  position: relative;
  overflow: hidden;
}
.cz-silhouette::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 10%;
  width: 80%;
  height: 40%;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.cz-silhouette-sm { width: 46px; height: 58px; }
.cz-silhouette-lg { width: 66px; height: 82px; border-radius: 50% 50% 48% 48% / 65% 65% 35% 35%; }

/* ─────────────────────────────────────────────────────
   COLOR SWATCHES (Skin, Eyes, Nails, etc.)
───────────────────────────────────────────────────── */
.cz-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cz-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cz-swatch {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(200,150,255,.25);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
}

.cz-color:hover .cz-swatch {
  transform: scale(1.15);
  border-color: rgba(200,150,255,.7);
  box-shadow: 0 6px 20px rgba(180,100,255,.4);
}

.cz-color.selected .cz-swatch {
  border-color: #db2777;
  border-width: 4px;
  transform: scale(1.2);
  box-shadow: 0 0 16px rgba(219,39,119,.6);
}

.cz-color-label {
  font-size: .75rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  text-align: center;
}

.cz-gem {
  box-shadow: 0 4px 16px rgba(0,0,0,.4),
              inset 0 2px 8px rgba(255,255,255,.3),
              inset 0 -2px 6px rgba(0,0,0,.2);
}

/* ─────────────────────────────────────────────────────
   PREMIUM FEATURE TOGGLE CARDS
───────────────────────────────────────────────────── */
.cz-premium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.cz-addon {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(200,150,255,.18);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.cz-addon:hover {
  border-color: rgba(200,150,255,.45);
  background: rgba(200,150,255,.07);
}

.cz-addon.active {
  border-color: #db2777;
  background: rgba(219,39,119,.1);
  box-shadow: 0 0 0 1px #db2777, 0 4px 20px rgba(219,39,119,.25);
}

.cz-addon-icon {
  font-size: 2rem;
  min-width: 40px;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(200,150,255,.5));
}

.cz-addon-info { flex: 1; min-width: 0; }

.cz-addon-name {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cz-addon-desc {
  font-size: .74rem;
  color: rgba(255,255,255,.5);
}

.cz-addon-price {
  font-size: .88rem;
  font-weight: 700;
  color: var(--yd-pink, #e879b5);
  white-space: nowrap;
  margin-right: 10px;
}

.cz-addon-price.free { color: #34d399; }

/* Toggle switch */
.cz-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.cz-toggle input { display: none; }

.cz-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(120,120,120,.4);
  border-radius: 24px;
  transition: background .3s;
}

.cz-toggle-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s;
}

.cz-toggle input:checked ~ .cz-toggle-track {
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.cz-toggle input:checked ~ .cz-toggle-thumb {
  transform: translateX(20px);
}

/* ─────────────────────────────────────────────────────
   LANGUAGE BUTTONS — match homepage style
───────────────────────────────────────────────────── */
.cz-wrap .navbar-lang {
  display: flex;
  gap: 6px;
}

/* ─────────────────────────────────────────────────────
   SECTION SEPARATOR
───────────────────────────────────────────────────── */
.cz-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,150,255,.3), transparent);
  margin: 56px 0 48px;
}

/* ─────────────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────────────── */
/* ── Desktop: counteract html zoom:1.5 so layout calc is correct ── */
@media (min-width: 1025px) {
  body.page-template-page-customize {
    zoom: calc(1 / 1.5); /* = ~0.667, cancels html zoom:1.5 */
  }
}

@media (max-width: 1024px) {
  .cz-wrap { flex-direction: column; }
  .cz-left {
    position: relative;
    top: 0;
    width: 100%;
    min-width: unset;
    height: auto;
    padding: 28px 20px;
  }
  /* Stacked column has no fixed height → give the card a definite size */
  .cz-preview .ys-shop,
  .cz-preview .stage { height: auto; }
  .cz-preview .ys-shop .bigcard.portrait { height: 360px; width: auto; }
  .cz-right { padding: 28px 20px 80px; }
  .cz-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cz-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cz-premium-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cz-grid-2 { grid-template-columns: 1fr; }
  .cz-grid-3 { grid-template-columns: 1fr; }
  .cz-addon { flex-wrap: wrap; }
}