/* =========================================================
   Mizunara Studio Design System
   Dress Code Component
   css/components/dress-code.css
   Version 1.0
========================================================= */

/* =========================================================
   WRAPPER DEL BUILDER
========================================================= */

.ms-component[data-component="dressCode"] {
  display: block;

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;
}

.ms-component[data-component="dressCode"] > .ms-dress-code {
  width: 100%;
}

/* =========================================================
   VARIABLES
========================================================= */

.ms-component[data-component="dressCode"] {
  --dress-code-primary: var(--ms-color-primary, #c8a46b);

  --dress-code-primary-dark: var(--ms-color-primary-dark, #8f6d35);

  --dress-code-text: var(--ms-color-text, #342b25);

  --dress-code-muted: var(--ms-color-muted, rgba(52, 43, 37, 0.68));

  --dress-code-surface: rgba(255, 255, 255, 0.5);

  --dress-code-surface-strong: rgba(255, 255, 255, 0.7);

  --dress-code-border: rgba(255, 255, 255, 0.52);

  --dress-code-gold-border: rgba(200, 164, 107, 0.3);

  --dress-code-shadow:
    0 30px 90px rgba(48, 36, 28, 0.14), 0 10px 30px rgba(48, 36, 28, 0.07);

  --dress-code-radius: var(--ms-radius-xl, 30px);

  --dress-code-transition: 300ms ease;
}

/* =========================================================
   SECCIÓN
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code {
  position: relative;
  isolation: isolate;

  width: 100%;

  padding: var(--ms-section-padding, clamp(5rem, 10vw, 8rem)) 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 18%,
      rgba(200, 164, 107, 0.1),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 78%,
      rgba(217, 188, 166, 0.14),
      transparent 34%
    );
}

/* =========================================================
   DECORACIONES
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-orb {
  position: absolute;
  z-index: -1;

  border-radius: 50%;

  filter: blur(10px);

  pointer-events: none;
}

.ms-component[data-component="dressCode"] .ms-dress-code-orb--left {
  top: 7%;
  left: -160px;

  width: 360px;
  height: 360px;

  background: radial-gradient(
    circle,
    rgba(200, 164, 107, 0.14),
    transparent 70%
  );
}

.ms-component[data-component="dressCode"] .ms-dress-code-orb--right {
  right: -190px;
  bottom: 3%;

  width: 420px;
  height: 420px;

  background: radial-gradient(
    circle,
    rgba(214, 185, 165, 0.17),
    transparent 70%
  );
}

/* =========================================================
   CONTENEDOR
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code .ms-container {
  position: relative;
  z-index: 1;

  width: min(92%, 1080px);

  margin-inline: auto;
}

/* =========================================================
   ENCABEZADO
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-header {
  width: min(100%, 760px);

  margin: 0 auto clamp(3rem, 7vw, 5rem);

  text-align: center;
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-header
  .ms-section-kicker {
  display: inline-block;

  margin-bottom: 1rem;

  color: var(--dress-code-primary-dark);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-header
  .ms-section-title {
  margin: 0 0 1.25rem;

  color: var(--dress-code-text);

  font-family: var(--ms-font-title, "Playfair Display", serif);

  font-size: clamp(2.3rem, 6vw, 4rem);

  font-weight: 500;
  line-height: 1.08;

  text-wrap: balance;
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-header
  .ms-section-description {
  max-width: 690px;

  margin-inline: auto;

  color: var(--dress-code-muted);

  font-size: clamp(0.95rem, 1.7vw, 1.06rem);

  line-height: 1.85;

  text-wrap: balance;
}

/* =========================================================
   TARJETA PRINCIPAL
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-card {
  position: relative;
  isolation: isolate;

  width: min(100%, 860px);

  margin-inline: auto;

  padding: clamp(2rem, 5vw, 4rem);

  overflow: hidden;

  border: 1px solid var(--dress-code-border);

  border-radius: var(--dress-code-radius);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.64),
    rgba(255, 255, 255, 0.27)
  );

  box-shadow: var(--dress-code-shadow);

  backdrop-filter: blur(24px) saturate(1.12);

  -webkit-backdrop-filter: blur(24px) saturate(1.12);

  opacity: 0;

  transform: translateY(36px) scale(0.985);

  transition:
    opacity 0.9s var(--ms-ease-luxury, ease),
    transform 0.95s var(--ms-ease-luxury, ease),
    border-color var(--dress-code-transition),
    box-shadow var(--dress-code-transition);
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-visible
  .ms-dress-code-card {
  opacity: 1;

  transform: translateY(0) scale(1);
}

.ms-component[data-component="dressCode"] .ms-dress-code-card:hover {
  border-color: rgba(200, 164, 107, 0.38);

  box-shadow:
    0 38px 105px rgba(48, 36, 28, 0.17),
    0 14px 38px rgba(48, 36, 28, 0.08);
}

/* Brillo interior */

.ms-component[data-component="dressCode"] .ms-dress-code-card::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(255, 255, 255, 0.5),
      transparent 34%
    ),
    linear-gradient(
      125deg,
      transparent 15%,
      rgba(255, 255, 255, 0.15) 48%,
      transparent 76%
    );

  pointer-events: none;
}

/* Línea decorativa inferior */

.ms-component[data-component="dressCode"] .ms-dress-code-card::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 0;

  width: 42%;
  height: 1px;

  transform: translateX(-50%);

  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 164, 107, 0.88),
    transparent
  );

  pointer-events: none;
}

/* =========================================================
   RESPLANDOR
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-glow {
  position: absolute;
  top: -170px;
  left: 50%;
  z-index: -1;

  width: 420px;
  height: 300px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(200, 164, 107, 0.18),
    transparent 70%
  );

  filter: blur(8px);

  pointer-events: none;
}

/* =========================================================
   ICONO
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-icon {
  display: grid;
  place-items: center;

  width: 92px;
  height: 92px;

  margin: 0 auto 1.8rem;

  border: 1px solid rgba(200, 164, 107, 0.34);

  border-radius: 50%;

  color: var(--dress-code-primary-dark);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.8),
    rgba(200, 164, 107, 0.08)
  );

  box-shadow:
    0 18px 42px rgba(48, 36, 28, 0.1),
    0 0 0 9px rgba(200, 164, 107, 0.055);

  transition:
    transform var(--dress-code-transition),
    box-shadow var(--dress-code-transition);
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-card:hover
  .ms-dress-code-icon {
  transform: translateY(-3px) rotate(-2deg);

  box-shadow:
    0 22px 48px rgba(48, 36, 28, 0.13),
    0 0 0 11px rgba(200, 164, 107, 0.07);
}

.ms-component[data-component="dressCode"] .ms-dress-code-icon svg {
  display: block;

  width: 48px;
  height: 48px;
}

/* =========================================================
   INFORMACIÓN PRINCIPAL
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-content {
  width: min(100%, 680px);

  margin-inline: auto;

  text-align: center;
}

.ms-component[data-component="dressCode"] .ms-dress-code-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  margin: 0 auto 1rem;

  padding: 0.45rem 1rem;

  border: 1px solid rgba(200, 164, 107, 0.26);

  border-radius: var(--ms-radius-full, 999px);

  color: var(--dress-code-primary-dark);

  background: rgba(200, 164, 107, 0.08);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ms-component[data-component="dressCode"] .ms-dress-code-label[hidden] {
  display: none !important;
}

/* =========================================================
   TIPO DE VESTIMENTA
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-name {
  margin: 0 0 1rem;

  color: var(--dress-code-text);

  font-family: var(--ms-font-title, "Playfair Display", serif);

  font-size: clamp(2.2rem, 6vw, 3.7rem);

  font-weight: 500;
  line-height: 1;

  text-wrap: balance;
}

.ms-component[data-component="dressCode"] .ms-dress-code-name[hidden] {
  display: none !important;
}

/* =========================================================
   DESCRIPCIÓN
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-text {
  margin: 0;

  color: var(--dress-code-muted);

  font-size: clamp(0.95rem, 1.7vw, 1.05rem);

  line-height: 1.85;

  text-wrap: pretty;
}

.ms-component[data-component="dressCode"] .ms-dress-code-text[hidden] {
  display: none !important;
}

/* =========================================================
   NOTA ESPECIAL
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-note {
  position: relative;

  width: min(100%, 620px);

  margin: 1.6rem auto 0;

  padding: 1.1rem 1.3rem;

  border: 1px solid rgba(200, 164, 107, 0.2);

  border-radius: var(--ms-radius-lg, 18px);

  color: var(--dress-code-primary-dark);

  background: rgba(200, 164, 107, 0.07);

  font-size: 0.9rem;
  line-height: 1.7;

  text-align: center;
}

.ms-component[data-component="dressCode"] .ms-dress-code-note::before {
  content: "✦";

  display: inline-block;

  margin-right: 0.5rem;

  color: var(--dress-code-primary);

  font-size: 0.78rem;
}

.ms-component[data-component="dressCode"] .ms-dress-code-note[hidden] {
  display: none !important;
}

/* =========================================================
   SECCIONES INTERNAS
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-palette-section,
.ms-component[data-component="dressCode"] .ms-dress-code-reserved,
.ms-component[data-component="dressCode"] .ms-dress-code-guidelines {
  width: min(100%, 700px);

  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;

  padding-top: clamp(2rem, 5vw, 2.8rem);

  border-top: 1px solid rgba(200, 164, 107, 0.18);
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-palette-section[hidden],
.ms-component[data-component="dressCode"] .ms-dress-code-reserved[hidden],
.ms-component[data-component="dressCode"] .ms-dress-code-guidelines[hidden] {
  display: none !important;
}

/* =========================================================
   SUBTÍTULOS
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-subtitle {
  margin: 0 0 1.4rem;

  color: var(--dress-code-text);

  font-family: var(--ms-font-title, "Playfair Display", serif);

  font-size: clamp(1.35rem, 3vw, 1.8rem);

  font-weight: 500;
  line-height: 1.25;

  text-align: center;
}

/* =========================================================
   PALETA DE COLORES
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-palette,
.ms-component[data-component="dressCode"] .ms-dress-code-reserved-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: clamp(0.8rem, 2vw, 1.25rem);
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-reserved-colors[hidden] {
  display: none !important;
}

/* =========================================================
   COLOR INDIVIDUAL
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-color {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 92px;

  opacity: 0;

  transform: translateY(16px);

  transition:
    opacity 0.55s ease,
    transform 0.65s var(--ms-ease-luxury, ease);
}

.ms-component[data-component="dressCode"] .ms-dress-code-color.is-visible {
  opacity: 1;

  transform: translateY(0);

  transition-delay: calc(var(--dress-code-color-index, 0) * 80ms);
}

.ms-component[data-component="dressCode"] .ms-dress-code-color-swatch {
  position: relative;

  display: block;

  width: 58px;
  height: 58px;

  margin-bottom: 0.7rem;

  border: 5px solid rgba(255, 255, 255, 0.8);

  border-radius: 50%;

  background: var(--dress-code-swatch, #c8a46b);

  box-shadow:
    0 9px 24px rgba(48, 36, 28, 0.15),
    0 0 0 1px rgba(200, 164, 107, 0.16);

  transition:
    transform var(--dress-code-transition),
    box-shadow var(--dress-code-transition);
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-color:hover
  .ms-dress-code-color-swatch {
  transform: translateY(-4px) scale(1.05);

  box-shadow:
    0 14px 30px rgba(48, 36, 28, 0.2),
    0 0 0 1px rgba(200, 164, 107, 0.24);
}

.ms-component[data-component="dressCode"] .ms-dress-code-color-name {
  color: var(--dress-code-muted);

  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;

  text-align: center;
}

/* =========================================================
   COLORES RESERVADOS
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-reserved-text {
  max-width: 620px;

  margin: -0.25rem auto 1.5rem;

  color: var(--dress-code-muted);

  font-size: 0.9rem;
  line-height: 1.75;

  text-align: center;
}

.ms-component[data-component="dressCode"] .ms-dress-code-reserved-text[hidden] {
  display: none !important;
}

.ms-component[data-component="dressCode"]
  .ms-dress-code-reserved
  .ms-dress-code-color-swatch {
  border-color: rgba(200, 164, 107, 0.34);

  box-shadow:
    0 9px 24px rgba(48, 36, 28, 0.12),
    0 0 0 1px rgba(143, 109, 53, 0.2);
}

/* =========================================================
   RECOMENDACIONES
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-guidelines-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.9rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

/* =========================================================
   RECOMENDACIÓN INDIVIDUAL
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-guideline {
  display: flex;
  align-items: flex-start;

  gap: 0.85rem;

  min-width: 0;

  padding: 1rem 1.1rem;

  border: 1px solid rgba(200, 164, 107, 0.16);

  border-radius: var(--ms-radius-lg, 18px);

  color: var(--dress-code-muted);

  background: rgba(255, 255, 255, 0.32);

  font-size: 0.86rem;
  line-height: 1.65;

  opacity: 0;

  transform: translateY(16px);

  transition:
    opacity 0.55s ease,
    transform 0.65s var(--ms-ease-luxury, ease),
    border-color var(--dress-code-transition),
    background var(--dress-code-transition);
}

.ms-component[data-component="dressCode"] .ms-dress-code-guideline.is-visible {
  opacity: 1;

  transform: translateY(0);

  transition-delay: calc(var(--dress-code-guideline-index, 0) * 85ms);
}

.ms-component[data-component="dressCode"] .ms-dress-code-guideline:hover {
  border-color: rgba(200, 164, 107, 0.3);

  background: rgba(255, 255, 255, 0.48);
}

/* =========================================================
   ICONO DE RECOMENDACIÓN
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-guideline-icon {
  display: grid;
  place-items: center;

  flex: 0 0 27px;

  width: 27px;
  height: 27px;

  margin-top: 0.05rem;

  border: 1px solid rgba(200, 164, 107, 0.28);

  border-radius: 50%;

  color: var(--dress-code-primary-dark);

  background: rgba(200, 164, 107, 0.09);
}

.ms-component[data-component="dressCode"] .ms-dress-code-guideline-icon svg {
  display: block;

  width: 14px;
  height: 14px;
}

/* =========================================================
   VARIANTE PREMIUM
========================================================= */

.ms-component[data-component="dressCode"]
  .ms-dress-code--premium
  .ms-dress-code-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.66),
    rgba(255, 255, 255, 0.29)
  );
}

/* =========================================================
   VARIANTE GLASS
========================================================= */

.ms-component[data-component="dressCode"]
  .ms-dress-code--glass
  .ms-dress-code-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.47),
    rgba(255, 255, 255, 0.16)
  );

  backdrop-filter: blur(30px) saturate(1.18);

  -webkit-backdrop-filter: blur(30px) saturate(1.18);
}

/* =========================================================
   VARIANTE MINIMAL
========================================================= */

.ms-component[data-component="dressCode"]
  .ms-dress-code--minimal
  .ms-dress-code-card {
  border-color: rgba(200, 164, 107, 0.18);

  background: rgba(255, 255, 255, 0.28);

  box-shadow: 0 20px 56px rgba(48, 36, 28, 0.08);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);
}

.ms-component[data-component="dressCode"]
  .ms-dress-code--minimal
  .ms-dress-code-glow {
  opacity: 0.45;
}

/* =========================================================
   MENSAJE DE ESTADO
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code-status {
  width: min(90%, 720px);

  margin: 2rem auto 0;

  padding: 1rem 1.2rem;

  border: 1px solid rgba(200, 164, 107, 0.24);

  border-radius: var(--ms-radius-lg, 18px);

  color: var(--dress-code-primary-dark);

  background: rgba(200, 164, 107, 0.08);

  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.55;

  text-align: center;
}

.ms-component[data-component="dressCode"] .ms-dress-code-status[hidden] {
  display: none !important;
}

.ms-component[data-component="dressCode"] .ms-dress-code-status.is-error {
  border-color: rgba(163, 75, 75, 0.25);

  color: #a34b4b;

  background: rgba(163, 75, 75, 0.08);
}

.ms-component[data-component="dressCode"] .ms-dress-code-status.is-success {
  border-color: rgba(85, 116, 93, 0.25);

  color: #55745d;

  background: rgba(85, 116, 93, 0.09);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {
  .ms-component[data-component="dressCode"] .ms-dress-code {
    padding: clamp(4.5rem, 9vw, 6rem) 0;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code .ms-container {
    width: 94%;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-card {
    padding: clamp(1.8rem, 5vw, 3rem);
  }
}

/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media (max-width: 700px) {
  .ms-component[data-component="dressCode"] .ms-dress-code {
    padding: 4.5rem 0;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code .ms-container {
    width: 90%;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-header {
    margin-bottom: 2.8rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-card {
    padding: 2rem 1.25rem;

    border-radius: 1.6rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-icon {
    width: 78px;
    height: 78px;

    margin-bottom: 1.55rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-icon svg {
    width: 41px;
    height: 41px;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-name {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-palette-section,
  .ms-component[data-component="dressCode"] .ms-dress-code-reserved,
  .ms-component[data-component="dressCode"] .ms-dress-code-guidelines {
    margin-top: 2.3rem;

    padding-top: 2rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-guidelines-list {
    grid-template-columns: 1fr;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-palette,
  .ms-component[data-component="dressCode"] .ms-dress-code-reserved-colors {
    gap: 1rem 0.7rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-color {
    width: 78px;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-color-swatch {
    width: 52px;
    height: 52px;
  }
}

/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 380px) {
  .ms-component[data-component="dressCode"] .ms-dress-code .ms-container {
    width: 92%;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-card {
    padding: 1.7rem 1rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-label {
    padding: 0.4rem 0.75rem;

    font-size: 0.62rem;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-color {
    width: 72px;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-color-swatch {
    width: 48px;
    height: 48px;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-guideline {
    padding: 0.9rem 0.85rem;
  }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ms-component[data-component="dressCode"] .ms-dress-code-card,
  .ms-component[data-component="dressCode"] .ms-dress-code-color,
  .ms-component[data-component="dressCode"] .ms-dress-code-guideline,
  .ms-component[data-component="dressCode"] .ms-dress-code-icon,
  .ms-component[data-component="dressCode"] .ms-dress-code-color-swatch {
    animation: none !important;

    transition: none !important;

    transform: none !important;
  }

  .ms-component[data-component="dressCode"] .ms-dress-code-card,
  .ms-component[data-component="dressCode"] .ms-dress-code-color,
  .ms-component[data-component="dressCode"] .ms-dress-code-guideline {
    opacity: 1;
  }
}

/* =========================================================
   BODA LUXURY 01
   AJUSTE DE TRANSICIÓN HACIA GIFT TABLE
========================================================= */

.ms-component[data-component="dressCode"] .ms-dress-code {
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

@media (max-width: 700px) {
  .ms-component[data-component="dressCode"] .ms-dress-code {
    padding-bottom: 3rem;
  }
}