/* ─────────────────────────────────────────────────────────────────────
 *  Conexión Bachata · form modal styles
 * ───────────────────────────────────────────────────────────────────── */

.cb-modal-scrim {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 14, 18, 0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: cb-fade-in 0.22s ease-out;
}
@keyframes cb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-pop-in  { from { transform: translateY(16px) scale(0.98); opacity: 0; }
                       to   { transform: translateY(0) scale(1); opacity: 1; } }

.cb-modal-card {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #FFF7EC;
  border: 1px solid rgba(201,152,70,0.45);
  border-radius: 20px;
  padding: 36px 36px 30px;
  box-shadow: 0 30px 80px rgba(43,31,38,0.45),
              0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: cb-pop-in 0.28s cubic-bezier(0.2,0.7,0.3,1);
}
.cb-modal-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--color-rose), var(--color-gold), var(--color-blue));
  border-radius: 20px 20px 0 0;
}

.cb-modal-x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(43,31,38,0.15); background: #fff;
  color: var(--color-ink); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.cb-modal-x:hover { background: var(--color-rose); color: #fff; border-color: var(--color-rose); transform: scale(1.05); }

.cb-modal-eye {
  font: 700 11px/14px var(--font-sans);
  color: var(--color-rose);
  letter-spacing: 2.4px; text-transform: uppercase;
  margin-bottom: 10px;
}
.cb-modal-title {
  font: 500 30px/34px var(--font-serif);
  color: var(--color-ink-strong);
  letter-spacing: -0.4px;
  margin: 0 0 22px;
  text-wrap: balance;
}

.cb-form { display: flex; flex-direction: column; gap: 14px; }

.cb-field { display: flex; flex-direction: column; gap: 6px; }
.cb-label {
  font: 600 11px/14px var(--font-sans);
  color: var(--color-ink);
  letter-spacing: 1.4px; text-transform: uppercase;
}
.cb-form input, .cb-form select, .cb-form textarea {
  font: 400 15px/22px var(--font-sans);
  color: var(--color-ink-strong);
  background: #fff;
  border: 1px solid rgba(43,31,38,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.cb-form input:focus, .cb-form select:focus, .cb-form textarea:focus {
  outline: none;
  border-color: var(--color-rose);
  box-shadow: 0 0 0 3px rgba(224,48,112,0.16);
}
.cb-form textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); }
.cb-form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%232b1f26' stroke-width='1.8' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}

.cb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .cb-row2 { grid-template-columns: 1fr; } }

.cb-field-check {
  flex-direction: row; align-items: center; gap: 10px;
  font: 500 14px/20px var(--font-sans); color: var(--color-ink);
  padding: 8px 0;
}
.cb-field-check input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-rose); flex-shrink: 0;
  margin: 0;
}

.cb-form-submit {
  margin-top: 8px;
  align-self: flex-start;
  padding: 14px 28px !important;
  font-size: 15px !important;
}
.cb-form-submit:disabled { opacity: 0.6; cursor: wait; }

/* Inline notice — used inside RSVP form for ID-required warning */
.cb-note {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(201,152,70,0.10);
  border: 1px solid rgba(201,152,70,0.35);
  border-radius: 10px;
  font: 400 13px/19px var(--font-sans);
  color: var(--color-ink);
}
.cb-note-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-canvas-deep);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--font-sans);
  margin-top: 1px;
}
.cb-note-body b { color: var(--color-ink-strong); font-weight: 600; }

@media (max-width: 640px) {
  .cb-modal-scrim { padding: 14px; }
  .cb-modal-card  { padding: 30px 22px 22px; }
  .cb-modal-title { font-size: 24px; line-height: 28px; }
  .cb-form-submit { width: 100%; }
}