/* ================================================================
   WC Virtual Try-On – tryon.css
   Diseño premium, elegante, oscuro
================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --wcvt-accent:   #c9a84c;
  --wcvt-accent2:  #e8c97a;
  --wcvt-bg:       rgba(6, 6, 10, 0.97);
  --wcvt-surface:  #0f0f18;
  --wcvt-border:   rgba(201, 168, 76, 0.25);
  --wcvt-text:     #e8e0d0;
  --wcvt-radius:   16px;
  --wcvt-shadow:   0 32px 80px rgba(0,0,0,0.8);
}

/* ── Botón "Probarme" ──────────────────────────────────────── */
#wcvt-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  margin-top:      14px;
  padding:         14px 28px;
  background:      linear-gradient(135deg, #1a1408 0%, #2c2210 100%);
  color:           var(--wcvt-accent2);
  border:          1.5px solid var(--wcvt-accent);
  border-radius:   10px;
  font-size:       15px;
  font-weight:     600;
  letter-spacing:  0.04em;
  cursor:          pointer;
  transition:      transform .2s, box-shadow .2s, background .2s;
  box-shadow:      0 4px 20px rgba(201,168,76,0.15);
  font-family:     inherit;
}

#wcvt-btn:hover {
  background:  linear-gradient(135deg, #2c2210 0%, #3d3015 100%);
  box-shadow:  0 6px 30px rgba(201,168,76,0.35);
  transform:   translateY(-2px);
}

#wcvt-btn:active {
  transform: translateY(0);
}

/* Pulso inicial para llamar la atención */
@keyframes wcvt-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(201,168,76,0.15); }
  50%       { box-shadow: 0 4px 32px rgba(201,168,76,0.5); }
}
.wcvt-pulse {
  animation: wcvt-pulse 2.4s ease-in-out 3;
}

/* ── Modal overlay ─────────────────────────────────────────── */
#wcvt-modal {
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         12px;
  animation:       wcvt-fadein .25s ease;
}

@keyframes wcvt-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal inner ───────────────────────────────────────────── */
#wcvt-modal-inner {
  position:       relative;
  background:     var(--wcvt-surface);
  border:         1px solid var(--wcvt-border);
  border-radius:  var(--wcvt-radius);
  box-shadow:     var(--wcvt-shadow);
  padding:        20px 20px 16px;
  width:          min(860px, 100%);
  max-height:     98vh;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  animation:      wcvt-slidein .3s cubic-bezier(.22,.68,0,1.2);
}

@keyframes wcvt-slidein {
  from { transform: scale(.92) translateY(24px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* Línea decorativa superior */
#wcvt-modal-inner::before {
  content:       '';
  position:      absolute;
  top:           0; left: 24px; right: 24px;
  height:        2px;
  background:    linear-gradient(90deg, transparent, var(--wcvt-accent), transparent);
  border-radius: 2px;
}

/* ── Botón cerrar ──────────────────────────────────────────── */
#wcvt-close {
  position:      absolute;
  top:           12px;
  right:         14px;
  background:    transparent;
  border:        1px solid var(--wcvt-border);
  color:         var(--wcvt-text);
  font-size:     22px;
  line-height:   1;
  width:         36px;
  height:        36px;
  border-radius: 50%;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .15s, color .15s;
  z-index:       2;
}
#wcvt-close:hover {
  background: rgba(201,168,76,0.15);
  color:      var(--wcvt-accent2);
}

/* ── Status ────────────────────────────────────────────────── */
#wcvt-status {
  color:          var(--wcvt-accent);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height:     18px;
  text-align:     center;
  width:          100%;
}

/* ── Contenedor de vídeo + canvas ──────────────────────────── */
#wcvt-video-wrap {
  position:      relative;
  width:         100%;
  max-width:     760px;
  border-radius: 12px;
  overflow:      hidden;
  border:        1px solid var(--wcvt-border);
  background:    #000;
  /* 4:3 en móvil se ve mucho mejor para selfie – más alto, cara más grande */
  aspect-ratio:  4 / 3;
}

#wcvt-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: cover;
  transform:  scaleX(-1);
}

#wcvt-canvas {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  transform:      scaleX(-1);
  pointer-events: none;
}

/* ── Hint ──────────────────────────────────────────────────── */
.wcvt-hint {
  color:          rgba(200, 190, 170, 0.50);
  font-size:      11px;
  text-align:     center;
  margin:         0;
  letter-spacing: 0.03em;
  padding:        0 8px;
}

/* ── Controles en vivo ─────────────────────────────────────── */
#wcvt-controls {
  width:          100%;
  max-width:      760px;
  background:     rgba(255,255,255,0.03);
  border:         1px solid var(--wcvt-border);
  border-radius:  10px;
  padding:        10px 16px;
}

.wcvt-ctrl-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.wcvt-ctrl-label {
  font-size:      12px;
  color:          rgba(200,190,160,0.65);
  min-width:      72px;
  letter-spacing: 0.02em;
}

.wcvt-ctrl-btn {
  background:    rgba(201,168,76,0.1);
  border:        1px solid var(--wcvt-border);
  color:         var(--wcvt-accent2);
  font-size:     16px;
  width:         32px;
  height:        32px;
  border-radius: 8px;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    background .15s;
  font-family:   inherit;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.wcvt-ctrl-btn:hover  { background: rgba(201,168,76,0.22); }
.wcvt-ctrl-btn:active { transform: scale(0.93); }

#wcvt-offset-slider {
  flex:          1;
  appearance:    none;
  height:        4px;
  border-radius: 4px;
  background:    rgba(201,168,76,0.2);
  outline:       none;
  cursor:        pointer;
}
#wcvt-offset-slider::-webkit-slider-thumb {
  appearance:    none;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  background:    var(--wcvt-accent);
  border:        2px solid var(--wcvt-accent2);
  cursor:        pointer;
  transition:    transform .1s;
}
#wcvt-offset-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
#wcvt-offset-slider::-moz-range-thumb {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--wcvt-accent);
  border:        2px solid var(--wcvt-accent2);
  cursor:        pointer;
}

/* ── Responsive móvil ──────────────────────────────────────── */
@media (max-width: 600px) {
  /* Modal centrado verticalmente, NO pegado al fondo */
  #wcvt-modal {
    padding:     8px;
    align-items: center;   /* centrado = cámara queda en la mitad superior */
  }

  #wcvt-modal-inner {
    width:          100%;
    max-height:     96vh;
    border-radius:  16px;
    padding:        14px 10px 16px;
    gap:            7px;
    animation:      wcvt-slidein .3s cubic-bezier(.22,.68,0,1.2);
  }

  /* Cámara: ocupa todo el ancho, aspect 3:4 = más altura */
  #wcvt-video-wrap {
    width:         100%;
    max-width:     100%;
    border-radius: 10px;
    aspect-ratio:  3 / 4;
  }

  /* Controles compactos en móvil */
  #wcvt-controls {
    padding:  9px 10px;
    gap:      6px;
  }

  .wcvt-ctrl-label {
    min-width: 62px;
    font-size: 11px;
  }

  .wcvt-ctrl-btn {
    width:  28px;
    height: 28px;
    font-size: 14px;
  }

  #wcvt-btn {
    width:           100%;
    justify-content: center;
  }

  .wcvt-hint { font-size: 10px; }
}

/* Pantallas muy pequeñas (< 380px) */
@media (max-width: 380px) {
  #wcvt-modal-inner { padding: 12px 8px 14px; gap: 5px; }
  .wcvt-ctrl-label  { display: none; }
}