/* =========================================================
   Mizunara Studio Design System
   RSVP Component
   css/components/rsvp.css
   Version 2.1

   Glass Performance Pass
========================================================= */


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

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

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  background: transparent;
}


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


/* =========================================================
   VARIABLES DEL COMPONENTE
========================================================= */

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

  --rsvp-accent-dark:
    var(
      --ms-color-primary-dark,
      #8f6d35
    );

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

  --rsvp-muted:
    var(
      --ms-color-text-soft,
      rgba(52, 43, 37, 0.68)
    );

  --rsvp-surface:
    rgba(255, 255, 255, 0.48);

  --rsvp-surface-strong:
    rgba(255, 255, 255, 0.72);

  --rsvp-border:
    rgba(255, 255, 255, 0.54);

  --rsvp-input-border:
    rgba(143, 109, 53, 0.2);

  --rsvp-error:
    #a34b4b;

  --rsvp-error-soft:
    rgba(163, 75, 75, 0.1);

  --rsvp-success:
    #55745d;

  --rsvp-success-soft:
    rgba(85, 116, 93, 0.11);

  --rsvp-shadow:
    0 30px 80px
      rgba(48, 36, 28, 0.13),
    0 8px 24px
      rgba(48, 36, 28, 0.06);

  --rsvp-radius:
    var(
      --ms-radius-xl,
      28px
    );
}


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

.ms-component[data-component="rsvp"]
.ms-rsvp {
  position: relative;

  isolation: isolate;

  width: 100%;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(200, 164, 107, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 86%,
      rgba(221, 193, 168, 0.12),
      transparent 34%
    );
}


.ms-component[data-component="rsvp"]
.ms-rsvp::before {
  content: "";

  position: absolute;

  top: 12%;

  left: -90px;

  z-index: -1;

  width: 240px;

  height: 240px;

  border-radius: 50%;

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

  filter:
    blur(4px);

  pointer-events:
    none;
}


.ms-component[data-component="rsvp"]
.ms-rsvp::after {
  content: "";

  position: absolute;

  right: -110px;

  bottom: 8%;

  z-index: -1;

  width: 290px;

  height: 290px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(220, 190, 171, 0.13),
      transparent 70%
    );

  filter:
    blur(4px);

  pointer-events:
    none;
}


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

.ms-component[data-component="rsvp"]
.ms-rsvp-header {
  width:
    min(
      92%,
      720px
    );

  margin:
    0
    auto
    var(
      --ms-space-2xl,
      3rem
    );

  text-align:
    center;
}


.ms-component[data-component="rsvp"]
.ms-rsvp-header
.ms-section-description {
  max-width:
    650px;

  margin-inline:
    auto;

  color:
    var(--rsvp-muted);

  line-height:
    1.8;

  text-wrap:
    balance;
}


/* =========================================================
   TARJETA PRINCIPAL
   TRUE GLASS
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-card {
  position: relative;

  isolation: isolate;

  width:
    min(
      92%,
      720px
    );

  margin-inline:
    auto;

  padding:
    clamp(
      1.5rem,
      5vw,
      3rem
    );

  overflow: hidden;

  border:
    1px solid
    var(--rsvp-border);

  border-radius:
    var(--rsvp-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.28)
    );

  box-shadow:
    var(--rsvp-shadow);

  /*
    TRUE GLASS.

    Conservamos blur exclusivamente
    en la superficie principal.
  */

  backdrop-filter:
    blur(16px)
    saturate(1.08);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(1.08);
}


.ms-component[data-component="rsvp"]
.ms-rsvp-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(255, 255, 255, 0.42),
      transparent 35%
    ),
    linear-gradient(
      125deg,
      transparent 18%,
      rgba(255, 255, 255, 0.13) 48%,
      transparent 76%
    );

  pointer-events:
    none;
}


.ms-component[data-component="rsvp"]
.ms-rsvp-card::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 38%;

  height: 1px;

  transform:
    translateX(-50%);

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

  pointer-events:
    none;
}


/* =========================================================
   FORMULARIO
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-form {
  display: grid;

  gap:
    var(
      --ms-space-lg,
      1.5rem
    );

  width: 100%;
}


/* =========================================================
   CAMPOS
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field {
  position: relative;

  display: grid;

  gap:
    0.55rem;

  min-width:
    0;
}


.ms-component[data-component="rsvp"]
.ms-field[hidden] {
  display:
    none !important;
}


.ms-component[data-component="rsvp"]
.ms-field label {
  color:
    var(--rsvp-text);

  font-family:
    var(--ms-font-body, inherit);

  font-size:
    var(--ms-text-sm, 0.86rem);

  font-weight:
    600;

  line-height:
    1.35;

  letter-spacing:
    0.015em;
}


/* =========================================================
   INPUTS
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field input,

.ms-component[data-component="rsvp"]
.ms-field select,

.ms-component[data-component="rsvp"]
.ms-field textarea {
  width: 100%;

  min-width: 0;

  margin: 0;

  border:
    1px solid
    var(--rsvp-input-border);

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

  outline:
    none;

  /*
    Fondo ligeramente más opaco
    para compensar la eliminación
    del backdrop blur.
  */

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

  padding:
    0.98rem
    1.05rem;

  color:
    var(--rsvp-text);

  font-family:
    var(--ms-font-body, inherit);

  font-size:
    0.95rem;

  font-weight:
    450;

  line-height:
    1.4;

  box-shadow:
    0 8px 22px
      rgba(49, 37, 29, 0.055),
    inset 0 1px 0
      rgba(255, 255, 255, 0.72);

  /*
    SIN backdrop-filter.

    Los controles existen varias veces
    y cada blur creaba una capa adicional.
  */

  transition:
    border-color
      220ms ease,
    background-color
      220ms ease,
    box-shadow
      220ms ease,
    transform
      220ms ease;
}


.ms-component[data-component="rsvp"]
.ms-field input {
  min-height:
    52px;
}


.ms-component[data-component="rsvp"]
.ms-field select {
  min-height:
    52px;

  padding-right:
    3rem;

  appearance:
    none;

  -webkit-appearance:
    none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--rsvp-accent-dark) 50%
    ),
    linear-gradient(
      135deg,
      var(--rsvp-accent-dark) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;

  cursor:
    pointer;
}


.ms-component[data-component="rsvp"]
.ms-field textarea {
  min-height:
    135px;

  resize:
    vertical;
}


/* =========================================================
   PLACEHOLDERS
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field input::placeholder,

.ms-component[data-component="rsvp"]
.ms-field textarea::placeholder {
  color:
    rgba(
      52,
      43,
      37,
      0.46
    );

  opacity:
    1;
}


/* =========================================================
   HOVER Y FOCUS
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field input:hover,

.ms-component[data-component="rsvp"]
.ms-field select:hover,

.ms-component[data-component="rsvp"]
.ms-field textarea:hover {
  border-color:
    rgba(
      143,
      109,
      53,
      0.36
    );

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


.ms-component[data-component="rsvp"]
.ms-field input:focus,

.ms-component[data-component="rsvp"]
.ms-field select:focus,

.ms-component[data-component="rsvp"]
.ms-field textarea:focus {
  border-color:
    var(--rsvp-accent);

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

  box-shadow:
    0 0 0 4px
      rgba(
        200,
        164,
        107,
        0.14
      ),
    0 12px 28px
      rgba(
        49,
        37,
        29,
        0.07
      );

  transform:
    translateY(-1px);
}


/* =========================================================
   CAMPOS DESHABILITADOS
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field input:disabled,

.ms-component[data-component="rsvp"]
.ms-field select:disabled,

.ms-component[data-component="rsvp"]
.ms-field textarea:disabled {
  cursor:
    not-allowed;

  opacity:
    0.58;

  background:
    rgba(
      245,
      242,
      237,
      0.68
    );
}


/* =========================================================
   AUTOFILL
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field input:-webkit-autofill,

.ms-component[data-component="rsvp"]
.ms-field input:-webkit-autofill:hover,

.ms-component[data-component="rsvp"]
.ms-field input:-webkit-autofill:focus {
  -webkit-text-fill-color:
    var(--rsvp-text);

  -webkit-box-shadow:
    0 0 0 1000px
    rgba(
      255,
      255,
      255,
      0.88
    )
    inset;

  transition:
    background-color
    9999s
    ease-in-out
    0s;
}


/* =========================================================
   TEXTO AUXILIAR
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field-hint {
  display: block;

  min-height:
    1em;

  color:
    var(--rsvp-muted);

  font-size:
    0.72rem;

  font-weight:
    450;

  line-height:
    1.45;
}


.ms-component[data-component="rsvp"]
.ms-rsvp-character-count {
  justify-self:
    end;

  margin-top:
    -0.2rem;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   ERRORES DE CAMPO
========================================================= */

.ms-component[data-component="rsvp"]
.ms-field-error {
  display:
    none;

  min-height:
    1em;

  color:
    var(--rsvp-error);

  font-size:
    0.74rem;

  font-weight:
    550;

  line-height:
    1.4;
}


.ms-component[data-component="rsvp"]
.ms-field-error:not(:empty) {
  display:
    block;
}


.ms-component[data-component="rsvp"]
.ms-field.has-error label {
  color:
    var(--rsvp-error);
}


.ms-component[data-component="rsvp"]
.ms-field.has-error input,

.ms-component[data-component="rsvp"]
.ms-field.has-error select,

.ms-component[data-component="rsvp"]
.ms-field.has-error textarea,

.ms-component[data-component="rsvp"]
.ms-field input[aria-invalid="true"],

.ms-component[data-component="rsvp"]
.ms-field select[aria-invalid="true"],

.ms-component[data-component="rsvp"]
.ms-field textarea[aria-invalid="true"] {
  border-color:
    rgba(
      163,
      75,
      75,
      0.64
    );

  background:
    rgba(
      255,
      249,
      249,
      0.88
    );

  box-shadow:
    0 0 0 4px
    var(--rsvp-error-soft);
}


.ms-component[data-component="rsvp"]
.ms-field.has-error input:focus,

.ms-component[data-component="rsvp"]
.ms-field.has-error select:focus,

.ms-component[data-component="rsvp"]
.ms-field.has-error textarea:focus {
  border-color:
    var(--rsvp-error);

  box-shadow:
    0 0 0 4px
    rgba(
      163,
      75,
      75,
      0.14
    );
}


/* =========================================================
   ESTADO GENERAL
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-status {
  position: relative;

  width: 100%;

  padding:
    0.95rem
    1rem;

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

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

  color:
    var(--rsvp-text);

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

  font-size:
    0.84rem;

  font-weight:
    550;

  line-height:
    1.55;

  text-align:
    center;

  animation:
    msRsvpStatusIn
    280ms
    ease
    both;
}


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


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

  color:
    var(--rsvp-error);

  background:
    var(--rsvp-error-soft);
}


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

  color:
    var(--rsvp-success);

  background:
    var(--rsvp-success-soft);
}


.ms-component[data-component="rsvp"]
.ms-rsvp-status.is-info {
  border-color:
    rgba(
      200,
      164,
      107,
      0.3
    );

  color:
    var(--rsvp-accent-dark);

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


/* =========================================================
   ACCIONES
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap:
    var(
      --ms-space-md,
      1rem
    );

  margin-top:
    var(
      --ms-space-md,
      1rem
    );
}


.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn {
  min-width:
    220px;

  min-height:
    52px;

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

  font-size:
    0.75rem;

  font-weight:
    650;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;

  transition:
    transform
      220ms ease,
    box-shadow
      220ms ease,
    filter
      220ms ease,
    opacity
      220ms ease;
}


.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn:hover {
  transform:
    translateY(-2px);
}


.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn:active {
  transform:
    translateY(0)
    scale(0.97);
}


/* =========================================================
   BOTÓN LIMPIAR
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn-glass {
  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.28
    );

  color:
    var(--rsvp-accent-dark);

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

  box-shadow:
    0 10px 28px
      rgba(
        49,
        37,
        29,
        0.07
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.55
      );

  /*
    SIN backdrop-filter.
  */
}


.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn-glass:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.76
    );
}


/* =========================================================
   BOTONES DESHABILITADOS
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    0.58;

  transform:
    none;

  filter:
    grayscale(0.18);
}


/* =========================================================
   FOCUS VISIBLE
========================================================= */

.ms-component[data-component="rsvp"]
.ms-rsvp-actions
.ms-btn:focus-visible {
  outline:
    none;

  box-shadow:
    0 0 0 4px
      rgba(
        200,
        164,
        107,
        0.18
      ),
    0 14px 34px
      rgba(
        143,
        109,
        53,
        0.2
      );
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes msRsvpStatusIn {

  from {
    opacity:
      0;

    transform:
      translateY(-6px);
  }


  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


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

@media (max-width: 900px) {

  .ms-component[data-component="rsvp"]
  .ms-rsvp {
    padding:
      clamp(
        4.5rem,
        9vw,
        6rem
      )
      0;
  }


  .ms-component[data-component="rsvp"]
  .ms-rsvp-card {
    width:
      min(
        94%,
        680px
      );
  }

}


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

@media (max-width: 600px) {

  .ms-component[data-component="rsvp"]
  .ms-rsvp {
    padding:
      4.5rem
      0;
  }


  .ms-component[data-component="rsvp"]
  .ms-rsvp-header {
    width:
      90%;

    margin-bottom:
      2rem;
  }


  .ms-component[data-component="rsvp"]
  .ms-rsvp-card {
    width:
      92%;

    padding:
      1.35rem;

    border-radius:
      1.5rem;

    /*
      Una sola superficie blur
      dentro de RSVP.
    */

    backdrop-filter:
      blur(14px)
      saturate(1.06);

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


  .ms-component[data-component="rsvp"]
  .ms-rsvp-form {
    gap:
      1.25rem;
  }


  /*
    16px evita zoom automático
    de Safari/iOS en formularios.
  */

  .ms-component[data-component="rsvp"]
  .ms-field input,

  .ms-component[data-component="rsvp"]
  .ms-field select,

  .ms-component[data-component="rsvp"]
  .ms-field textarea {
    font-size:
      16px;
  }


  .ms-component[data-component="rsvp"]
  .ms-rsvp-actions {
    flex-direction:
      column;

    width:
      100%;
  }


  .ms-component[data-component="rsvp"]
  .ms-rsvp-actions
  .ms-btn {
    width:
      100%;

    min-width:
      0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .ms-component[data-component="rsvp"]
  .ms-rsvp-card {
    width:
      94%;

    padding:
      1.1rem;
  }


  .ms-component[data-component="rsvp"]
  .ms-field input,

  .ms-component[data-component="rsvp"]
  .ms-field select,

  .ms-component[data-component="rsvp"]
  .ms-field textarea {
    padding:
      0.9rem;
  }

}


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

@media (
  prefers-reduced-motion:
  reduce
) {

  .ms-component[data-component="rsvp"]
  .ms-rsvp-status,

  .ms-component[data-component="rsvp"]
  .ms-field input,

  .ms-component[data-component="rsvp"]
  .ms-field select,

  .ms-component[data-component="rsvp"]
  .ms-field textarea,

  .ms-component[data-component="rsvp"]
  .ms-rsvp-actions
  .ms-btn {
    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }

}


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

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


@media (max-width: 600px) {

  .ms-component[data-component="rsvp"]
  .ms-rsvp {
    padding-bottom:
      3rem;
  }

}