/* ═══════════════════════════════════════════════════════
   Monopoli Concierge Form — Premium Luxury Styles v3
   Uses display:none/flex for step control (Elementor safe)
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

/* ═══ Outer Wrap ═══ */
.mcf-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #0c0c10 !important;
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
  overflow: hidden;

  /* CSS Variables */
  --mcf-gold:      #c9a96e;
  --mcf-gold-dim:  rgba(201, 169, 110, 0.25);
  --mcf-gold-glow: rgba(201, 169, 110, 0.10);
  --mcf-bg:        #0c0c10;
  --mcf-card-bg:   #111118;
  --mcf-input-bg:  #111118;
  --mcf-text:      #e8e0d0;
  --mcf-muted:     rgba(232, 224, 208, 0.45);
  --mcf-border:    rgba(201, 169, 110, 0.22);
  --mcf-radius:    2px;
  --mcf-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle noise grain overlay */
.mcf-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ═══ Progress Bar ═══ */
.mcf-progress-bar {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 5px;
  padding: 32px 48px 0;
  width: 100%;
  box-sizing: border-box;
}

.mcf-progress-track {
  flex: 1;
  height: 2px;
  background-color: rgba(201, 169, 110, 0.12);
  overflow: hidden;
  border-radius: 2px;
}

.mcf-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--mcf-gold);
  transition: width 0.65s var(--mcf-ease);
}

.mcf-progress-track.done   .mcf-progress-fill { width: 100%; }
.mcf-progress-track.active .mcf-progress-fill { width: 55%; }

/* ═══ Steps — HIDDEN BY DEFAULT ═══ */
.mcf-step {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 64px 48px 80px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  animation: mcfFadeUp 0.45s var(--mcf-ease) both;
}

/* ONLY the active step is shown */
.mcf-step.active {
  display: flex !important;
}

@keyframes mcfFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Step Kicker / Label ═══ */
.mcf-step-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mcf-gold);
  display: block;
  text-align: center;
  margin-bottom: 18px;
}

/* ═══ Step Title ═══ */
.mcf-step-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(32px, 5vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--mcf-text) !important;
  text-align: center;
  margin: 0 0 48px !important;
}

/* ═══ Card Grid ═══ */
.mcf-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 700px;
  margin-bottom: 48px;
}

.mcf-card-grid--2   { max-width: 580px; }
.mcf-card-grid--4col { max-width: 700px; }

@media (max-width: 600px) {
  .mcf-card-grid,
  .mcf-card-grid--2,
  .mcf-card-grid--4col { grid-template-columns: 1fr; }
}

/* ═══ Card ═══ */
.mcf-card {
  background: var(--mcf-card-bg) !important;
  border: 1px solid var(--mcf-border) !important;
  border-radius: var(--mcf-radius) !important;
  padding: 28px 24px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
  width: 100%;
  box-shadow: none !important;
}

.mcf-card:hover {
  border-color: rgba(201, 169, 110, 0.5) !important;
  transform: translateY(-2px);
}

.mcf-card.selected {
  border-color: var(--mcf-gold) !important;
  box-shadow: 0 0 0 1px var(--mcf-gold), 0 0 28px var(--mcf-gold-glow) !important;
}

.mcf-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--mcf-text) !important;
  line-height: 1.15;
}

.mcf-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--mcf-muted);
}

/* ═══ Date & Guest Fields ═══ */
.mcf-field-group {
  width: 100%;
  max-width: 560px;
  margin-bottom: 28px;
}

.mcf-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mcf-text);
  margin-bottom: 12px;
}

/* ═══ ALL INPUTS — Dark Luxury Style ═══ */
.mcf-wrap .mcf-input {
  width: 100% !important;
  background: #111118 !important;
  background-color: #111118 !important;
  border: 1px solid rgba(201, 169, 110, 0.22) !important;
  border-radius: 2px !important;
  padding: 16px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #e8e0d0 !important;
  outline: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: 0.02em;
}

.mcf-wrap .mcf-input:focus {
  border-color: var(--mcf-gold) !important;
  box-shadow: 0 0 0 1px var(--mcf-gold) !important;
}

.mcf-wrap .mcf-input::placeholder {
  color: rgba(232, 224, 208, 0.38) !important;
  font-weight: 300;
}

/* Date picker icon gold tint */
.mcf-wrap .mcf-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(70%) sepia(30%) saturate(500%) hue-rotate(5deg);
  cursor: pointer;
  opacity: 0.8;
}

/* Remove number spinners */
.mcf-wrap .mcf-input[type="number"] {
  -moz-appearance: textfield;
}
.mcf-wrap .mcf-input[type="number"]::-webkit-outer-spin-button,
.mcf-wrap .mcf-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ═══ Contact Stack — vertical single column ═══ */
.mcf-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 580px;
  margin-bottom: 40px;
}

.mcf-textarea {
  min-height: 96px !important;
  resize: vertical;
  line-height: 1.6 !important;
}

/* ═══ Nav Buttons ═══ */
.mcf-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  max-width: 580px;
  margin-top: 4px;
}

.mcf-btn-primary,
.mcf-back-btn {
  background: transparent !important;
  border: 1px solid rgba(201, 169, 110, 0.35) !important;
  border-radius: 2px !important;
  padding: 14px 34px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #e8e0d0 !important;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none !important;
}

.mcf-btn-primary:hover:not(:disabled) {
  border-color: var(--mcf-gold) !important;
  color: var(--mcf-gold) !important;
  box-shadow: 0 0 22px var(--mcf-gold-glow) !important;
}

.mcf-back-btn:hover {
  border-color: rgba(201, 169, 110, 0.5) !important;
  color: var(--mcf-gold) !important;
}

.mcf-btn-primary:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
}

/* ═══ Error Message ═══ */
.mcf-error-msg {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #e07070;
  text-align: center;
  letter-spacing: 0.03em;
  width: 100%;
  max-width: 580px;
}

/* ═══ Success / Thank You Screen ═══ */
.mcf-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 40px 100px;
  width: 100%;
  box-sizing: border-box;
  animation: mcfFadeUp 0.55s var(--mcf-ease) both;
  position: relative;
  z-index: 1;
}

.mcf-success.visible {
  display: flex !important;
}

.mcf-success-icon {
  font-size: 48px;
  color: var(--mcf-gold);
  margin-bottom: 32px;
  display: inline-block;
  animation: mcfSpin 10s linear infinite;
}

@keyframes mcfSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.mcf-success .mcf-step-title {
  margin-bottom: 20px !important;
}

.mcf-success-msg {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: rgba(232, 224, 208, 0.55);
  text-align: center;
  max-width: 460px;
}