/* ═══════════════════════════════════
   INN OF CAPE MAY — EVENT PLANNER CSS
   Brand tokens: navy/gold/sage/linen
═══════════════════════════════════ */
:root {
  --p-navy: #1C2E3A; --p-navy-deep: #111D26; --p-navy-mid: #2A4457;
  --p-gold: #C4A265; --p-gold-lt: #D9C08E; --p-gold-pale: #EDE0C4;
  --p-sage: #8FAE9E; --p-sage-lt: #B5CEBC;
  --p-linen: #F7F4EF; --p-cream: #FFFDF8; --p-parch: #EDE8DF;
  --p-stone: #C8C1B4; --p-ink: #1E1B17; --p-ink2: #4A4540;
  --p-ink3: #7A756E; --p-ink4: #A9A49D; --p-white: #FFFFFF;
  --p-serif: 'Cormorant', Georgia, serif;
  --p-sans: 'Jost', 'Helvetica Neue', sans-serif;
  --p-ease: cubic-bezier(.22, 1, .36, 1);
}
#inn-event-planner { font-family: var(--p-sans); color: var(--p-ink); line-height: 1.5; }
#inn-event-planner * { margin: 0; padding: 0; box-sizing: border-box; }
#inn-event-planner img { display: block; max-width: 100%; height: auto; }
#inn-event-planner a { color: inherit; text-decoration: none; }
#inn-event-planner button { font-family: var(--p-sans); cursor: pointer; }

/* Header */
.ip-header { background: var(--p-navy); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ip-header-brand { font-family: var(--p-serif); font-size: 1.25rem; color: var(--p-white); font-weight: 400; }
.ip-header-sub { font-size: .52rem; letter-spacing: .4em; text-transform: uppercase; color: var(--p-gold-lt); margin-top: 2px; }
.ip-header-right { display: flex; align-items: center; gap: 16px; }
.ip-budget-badge-label { font-size: .46rem; letter-spacing: .3em; text-transform: uppercase; color: var(--p-gold-lt); text-align: right; }
.ip-budget-badge-amount { font-family: var(--p-serif); font-size: 1.15rem; color: var(--p-white); font-weight: 300; text-align: right; }

/* Progress */
.ip-progress { background: var(--p-white); border-bottom: 1px solid var(--p-parch); padding: 14px 24px; overflow-x: auto; }
.ip-progress-inner { display: flex; gap: 3px; max-width: 920px; margin: 0 auto; }
.ip-step-btn {
  flex: 1; padding: 9px 6px; border: none; font-size: .5rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; transition: all .3s;
  min-width: 0; white-space: nowrap;
}
.ip-step-btn--active { background: var(--p-gold); color: var(--p-white); }
.ip-step-btn--done { background: var(--p-sage); color: var(--p-white); cursor: pointer; }
.ip-step-btn--future { background: var(--p-parch); color: var(--p-ink4); opacity: .5; cursor: default; }

/* Main */
.ip-main { max-width: 960px; margin: 0 auto; padding: 36px 24px 72px; }
.ip-step { display: none; animation: ipFade .4s var(--p-ease); }
.ip-step.active { display: block; }
@keyframes ipFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Step header */
.ip-step-hd { margin-bottom: 28px; }
.ip-step-hd .ip-rule { width: 32px; height: 2px; background: var(--p-gold); margin-bottom: 14px; }
.ip-step-hd h2 { font-family: var(--p-serif); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 400; color: var(--p-navy); line-height: 1.1; }
.ip-step-hd h2 em { font-style: italic; color: var(--p-gold); }
.ip-step-hd p { font-family: var(--p-serif); font-size: .92rem; color: var(--p-ink3); margin-top: 8px; line-height: 1.5; }

/* Event type cards */
.ip-event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ip-event-card {
  padding: 26px 18px; background: var(--p-white); border: 1px solid var(--p-parch);
  text-align: center; transition: all .3s; font-size: .8rem;
}
.ip-event-card:hover { border-color: var(--p-gold); }
.ip-event-card.selected { background: var(--p-navy); color: var(--p-white); border-color: var(--p-navy); }
.ip-event-icon { font-size: 1.5rem; margin-bottom: 6px; opacity: .4; }
.ip-event-card.selected .ip-event-icon { opacity: 1; }
.ip-event-card .ip-event-label { font-weight: 500; }

/* Form fields */
.ip-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ip-form-grid--full { grid-column: span 2; }
.ip-field label {
  display: block; font-size: .52rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--p-ink4); margin-bottom: 3px;
}
.ip-field input, .ip-field select, .ip-field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--p-parch); background: var(--p-linen);
  font-family: var(--p-sans); font-size: .82rem; color: var(--p-ink); outline: none;
  transition: border-color .3s; -webkit-appearance: none;
}
.ip-field input:focus, .ip-field select:focus, .ip-field textarea:focus { border-color: var(--p-gold); }
.ip-field textarea { resize: vertical; }
.ip-slider-value { font-family: var(--p-serif); font-size: 1.3rem; color: var(--p-gold); font-weight: 400; }
.ip-slider { width: 100%; accent-color: var(--p-gold); margin-top: 6px; }
.ip-slider-labels { display: flex; justify-content: space-between; font-size: .6rem; color: var(--p-ink4); margin-top: 2px; }

/* Space cards */
.ip-space-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ip-space-card {
  border: 1px solid var(--p-parch); background: var(--p-white); overflow: hidden;
  transition: all .3s; text-align: left;
}
.ip-space-card:hover { border-color: var(--p-gold); }
.ip-space-card.selected { background: var(--p-navy); border-color: var(--p-gold); color: var(--p-white); }
.ip-space-card.selected .ip-space-desc { color: rgba(255,255,255,.6); }
.ip-space-card.selected .ip-space-meta { color: var(--p-gold-pale); }
.ip-space-img { height: 150px; overflow: hidden; }
.ip-space-img img { width: 100%; height: 100%; object-fit: cover; }
.ip-space-card.selected .ip-space-img img { filter: brightness(.65); }
.ip-space-body { padding: 14px 16px; }
.ip-space-name { font-family: var(--p-serif); font-size: 1.15rem; color: var(--p-navy); margin-bottom: 4px; }
.ip-space-card.selected .ip-space-name { color: var(--p-white); }
.ip-space-desc { font-size: .7rem; color: var(--p-ink3); line-height: 1.45; }
.ip-space-meta { display: flex; gap: 10px; margin-top: 8px; font-size: .58rem; color: var(--p-ink4); letter-spacing: .08em; }
.ip-space-warn { font-size: .58rem; color: #c44; margin-top: 6px; }

/* Select cards (menu/bar) */
.ip-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ip-select-card {
  padding: 18px 14px; background: var(--p-white); border: 1px solid var(--p-parch);
  text-align: left; transition: all .3s; font-size: .8rem;
}
.ip-select-card:hover { border-color: var(--p-gold); }
.ip-select-card.selected { background: var(--p-navy); color: var(--p-white); border-color: var(--p-gold); }
.ip-select-title { font-weight: 500; margin-bottom: 2px; }
.ip-select-price { font-size: .7rem; color: var(--p-gold); font-weight: 600; margin-bottom: 4px; }
.ip-select-card.selected .ip-select-price { color: var(--p-gold-lt); }
.ip-select-desc { font-size: .68rem; color: var(--p-ink4); line-height: 1.35; }
.ip-select-card.selected .ip-select-desc { color: rgba(255,255,255,.55); }
.ip-section-title { font-family: var(--p-serif); font-size: 1.15rem; color: var(--p-navy); font-weight: 500; margin: 32px 0 12px; }
.ip-section-title:first-of-type { margin-top: 0; }

/* Addon checkboxes */
.ip-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ip-addon {
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  background: var(--p-white); border: 1px solid var(--p-parch);
  transition: all .3s; text-align: left; font-size: .8rem;
}
.ip-addon:hover { border-color: var(--p-gold); }
.ip-addon.selected { background: var(--p-navy); color: var(--p-white); border-color: var(--p-gold); }
.ip-addon-check {
  width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0;
  border: 2px solid var(--p-stone); display: flex; align-items: center;
  justify-content: center; font-size: .65rem; color: var(--p-white); transition: .2s;
}
.ip-addon.selected .ip-addon-check { background: var(--p-gold); border-color: var(--p-gold); }
.ip-addon-name { font-weight: 500; margin-bottom: 1px; }
.ip-addon-price { font-size: .65rem; color: var(--p-ink4); }
.ip-addon.selected .ip-addon-price { color: var(--p-gold-lt); }

/* Room block */
.ip-room-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px;
  align-items: end; padding: 14px 0; border-bottom: 1px solid var(--p-parch);
}
.ip-room-empty { text-align: center; padding: 36px 0; }
.ip-room-empty h3 { font-family: var(--p-serif); font-size: 1.2rem; color: var(--p-navy); margin-bottom: 6px; }
.ip-room-empty p { font-size: .84rem; color: var(--p-ink3); }
.ip-room-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.ip-room-total-label { font-size: .66rem; color: var(--p-ink4); }
.ip-room-total-amount { font-family: var(--p-serif); font-size: 1.3rem; color: var(--p-gold); }

/* Review */
.ip-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ip-review-block { margin-bottom: 18px; }
.ip-review-block-title {
  font-size: .52rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--p-gold); font-weight: 600; margin-bottom: 6px;
}
.ip-review-card { background: var(--p-white); border: 1px solid var(--p-parch); padding: 10px 14px; }
.ip-review-line {
  display: flex; justify-content: space-between; padding: 5px 0;
  border-bottom: 1px solid var(--p-parch); font-size: .8rem;
}
.ip-review-line-label { color: var(--p-ink3); }
.ip-review-line-value { color: var(--p-navy); font-weight: 500; }
.ip-budget-box {
  background: var(--p-navy); padding: 26px; text-align: center; margin-bottom: 18px;
}
.ip-budget-box-label { font-size: .52rem; letter-spacing: .4em; text-transform: uppercase; color: var(--p-gold-lt); margin-bottom: 6px; }
.ip-budget-box-amount { font-family: var(--p-serif); font-size: 2.4rem; color: var(--p-white); font-weight: 300; }
.ip-budget-box-note { font-size: .65rem; color: var(--p-ink4); margin-top: 4px; }
.ip-next-steps {
  background: var(--p-white); border: 1px solid var(--p-parch); padding: 18px;
  font-size: .76rem; color: var(--p-ink3); line-height: 1.6;
}
.ip-next-steps strong { color: var(--p-navy); }
.ip-next-steps div { margin-top: 6px; }
.ip-next-steps a { color: var(--p-gold); }

/* Submitted */
.ip-submitted {
  min-height: 100vh; background: var(--p-navy); display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 40px;
}
.ip-submitted-inner { max-width: 540px; }
.ip-submitted-check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--p-gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; font-size: 1.7rem; color: var(--p-white);
}
.ip-submitted h2 { font-family: var(--p-serif); font-size: 2.2rem; color: var(--p-white); margin-bottom: 10px; }
.ip-submitted h2 em { font-style: italic; color: var(--p-gold-lt); }
.ip-submitted p { font-family: var(--p-serif); font-size: 1rem; color: var(--p-stone); line-height: 1.7; margin-bottom: 28px; }
.ip-submitted-budget {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  padding: 18px; margin-bottom: 26px;
}

/* Nav buttons */
.ip-nav { display: flex; justify-content: space-between; margin-top: 36px; gap: 10px; }
.ip-nav-right { margin-left: auto; }

/* Buttons */
.ip-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px;
  font-family: var(--p-sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; border: none; cursor: pointer;
  transition: all .35s var(--p-ease);
}
.ip-btn--gold { background: var(--p-gold); color: var(--p-white); }
.ip-btn--gold:hover { background: #b8934e; transform: translateY(-1px); }
.ip-btn--ghost { background: transparent; border: 1px solid var(--p-navy); color: var(--p-navy); }
.ip-btn--ghost:hover { background: var(--p-navy); color: var(--p-white); }
.ip-btn--outline { background: transparent; border: 1px solid rgba(255,255,255,.3); color: var(--p-white); }
.ip-btn--outline:hover { background: var(--p-white); color: var(--p-navy); }
.ip-btn--danger { background: transparent; border: 1px solid #c44; color: #c44; padding: 7px 12px; font-size: .55rem; }
.ip-btn--sm { padding: 6px 14px; font-size: .52rem; }

/* Gallery strip */
.ip-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ip-gallery-item { aspect-ratio: 16/9; overflow: hidden; }
.ip-gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }

/* Responsive */
@media (max-width: 768px) {
  .ip-form-grid { grid-template-columns: 1fr; }
  .ip-form-grid--full { grid-column: auto; }
  .ip-space-grid { grid-template-columns: 1fr; }
  .ip-addon-grid { grid-template-columns: 1fr; }
  .ip-room-row { grid-template-columns: 1fr; }
  .ip-review-grid { grid-template-columns: 1fr; }
  .ip-gallery { grid-template-columns: 1fr 1fr; }
  .ip-header { flex-direction: column; text-align: center; }
  .ip-header-right { justify-content: center; }
}