* { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #000;
    min-height: 100vh;
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: #EDE9E2;
    padding: 0 0 60px;
  }
  .topbar { height: 1.5px; background: linear-gradient(90deg, transparent, #DAA520 30%, #FFD700 50%, #DAA520 70%, transparent); }
  .header { text-align: center; padding: 24px 24px 20px; border-bottom: 0.5px solid #1A1400; }
  .header img { height: 80px; object-fit: contain; margin-bottom: 10px; }
  .header h1 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 5px; color: #8B6914; text-transform: uppercase; font-weight: 400; }

  .progress-wrap { padding: 20px 24px 0; max-width: 540px; margin: 0 auto; }
  /* New: each step = dot + label stacked, connected by lines */
  .progress-steps { display: flex; align-items: flex-start; }
  .progress-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
  .step-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #2A2000; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 10px; color: #4A4030; flex-shrink: 0; transition: all 0.3s; background: #000; z-index: 1; }
  .step-dot.active { border-color: #DAA520; color: #DAA520; background: rgba(218,165,32,0.08); }
  .step-dot.done { border-color: #8B6914; background: #8B6914; color: #000; }
  .step-label { font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 1.5px; color: #4A4030; text-transform: uppercase; margin-top: 8px; text-align: center; white-space: nowrap; }
  .step-label.active { color: #DAA520; }
  .step-line { flex: 1; height: 0.5px; background: #1A1400; transition: background 0.3s; margin-top: 14px; }
  .step-line.done { background: #8B6914; }
  /* Hide old labels row */
  .progress-labels { display: none; }

  .page { display: none; padding: 24px 20px; max-width: 540px; margin: 0 auto; }
  .page.active { display: block; }

  .section-title { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 4px; color: #8B6914; text-transform: uppercase; margin-bottom: 16px; padding-left: 10px; border-left: 2px solid #DAA520; }
  .field-group { margin-bottom: 20px; }
  .field-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: #6A5010; text-transform: uppercase; display: block; margin-bottom: 8px; }

  .text-input, .select-input {
    width: 100%; background: rgba(218,165,32,0.03); border: 0.5px solid rgba(218,165,32,0.15);
    border-radius: 10px; padding: 12px 16px; font-family: 'Cormorant Garamond', serif;
    font-size: 16px; color: #EDE9E2; outline: none; transition: border-color 0.2s;
    appearance: none; -webkit-appearance: none;
  }
  .select-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B6914' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;
  }
  .select-input option { background: #0a0800; color: #EDE9E2; }
  .text-input:focus, .select-input:focus { border-color: #DAA520; }
  .text-input::placeholder { color: #4A4030; }
  .text-input.error { border-color: #C84040; }
  .text-input.valid { border-color: #4A9060; }

  /* phone wrapper */
  .phone-wrap { display: flex; gap: 8px; align-items: stretch; }
  .phone-country {
    flex-shrink: 0; width: 90px; background: rgba(218,165,32,0.05);
    border: 0.5px solid rgba(218,165,32,0.15); border-radius: 10px;
    padding: 12px 10px; font-family: 'Cormorant Garamond', serif;
    font-size: 15px; color: #8B6914; outline: none; transition: border-color 0.2s;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238B6914' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; cursor: pointer;
  }
  .phone-country option { background: #0a0800; color: #EDE9E2; }
  .phone-country:focus { border-color: #DAA520; }
  .phone-num { flex: 1; }

  .error-msg { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: #C84040; text-transform: uppercase; margin-top: 6px; display: none; }
  .valid-msg { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: #4A9060; text-transform: uppercase; margin-top: 6px; display: none; }

  .event-card { background: rgba(218,165,32,0.02); border: 0.5px solid rgba(218,165,32,0.1); border-radius: 14px; padding: 18px 16px; margin-bottom: 14px; }
  .event-num { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; color: #DAA520; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 0.5px solid #1A1400; }

  .tentative-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .tentative-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .tentative-toggle input[type="checkbox"] { display: none; }
  .toggle-box { width: 36px; height: 20px; background: rgba(218,165,32,0.05); border: 0.5px solid rgba(218,165,32,0.15); border-radius: 10px; position: relative; transition: background 0.2s; }
  .toggle-box::after { content: ''; width: 14px; height: 14px; background: #4A4030; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all 0.2s; }
  .tentative-toggle input:checked + .toggle-box { background: rgba(218,165,32,0.2); border-color: #DAA520; }
  .tentative-toggle input:checked + .toggle-box::after { left: 18px; background: #DAA520; }
  .toggle-label { font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 1.5px; color: #6A5010; text-transform: uppercase; }

  .coverage-card { background: rgba(218,165,32,0.02); border: 0.5px solid rgba(218,165,32,0.1); border-radius: 14px; padding: 18px 16px; margin-bottom: 14px; }
  .coverage-event-name { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; color: #DAA520; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 0.5px solid #1A1400; }
  .option-row { margin-bottom: 14px; }
  .option-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: #6A5010; text-transform: uppercase; display: block; margin-bottom: 8px; }

  /* photographer gender checkboxes */
  .gender-row { display: flex; gap: 10px; margin-bottom: 10px; }
  .gender-check-label {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 16px; border-radius: 10px; border: 0.5px solid rgba(218,165,32,0.1);
    background: rgba(218,165,32,0.03); transition: all 0.2s; flex: 1; justify-content: center;
  }
  .gender-check-label:hover { border-color: rgba(218,165,32,0.3); }
  .gender-check-label.checked { border-color: #DAA520; background: rgba(218,165,32,0.1); }
  .gender-check-label input { display: none; }
  .gender-check-text { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 2px; color: #8B6914; text-transform: uppercase; }
  .gender-check-label.checked .gender-check-text { color: #DAA520; }
  .gender-icon { font-size: 16px; }

  /* count pills */
  .count-pills { display: flex; gap: 8px; flex-wrap: wrap; }
  .count-pill { width: 44px; height: 44px; background: rgba(218,165,32,0.03); border: 0.5px solid rgba(218,165,32,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 300; color: #8B6914; cursor: pointer; transition: all 0.2s; }
  .count-pill:hover { border-color: rgba(218,165,32,0.3); }
  .count-pill.selected { border-color: #DAA520; background: rgba(218,165,32,0.12); color: #FFD700; }

  .gender-count-wrap { padding: 12px 14px; background: rgba(218,165,32,0.02); border-radius: 10px; border: 0.5px solid rgba(218,165,32,0.08); margin-top: 8px; }
  .gender-count-title { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: #6A5010; text-transform: uppercase; margin-bottom: 8px; display: block; }

  /* female note */
  .female-note {
    background: rgba(200,100,40,0.08); border: 0.5px solid rgba(200,100,40,0.25);
    border-radius: 10px; padding: 12px 14px; margin-top: 10px;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.5px;
    color: #C87840; text-transform: uppercase; line-height: 1.8;
    display: none;
  }
  .female-note .note-icon { font-size: 14px; margin-right: 4px; }

  .yn-pills { display: flex; gap: 8px; }
  .yn-pill { padding: 8px 22px; background: rgba(218,165,32,0.03); border: 0.5px solid rgba(218,165,32,0.1); border-radius: 20px; font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: #8B6914; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
  .yn-pill:hover { border-color: rgba(218,165,32,0.3); }
  .yn-pill.selected { border-color: #DAA520; background: rgba(218,165,32,0.12); color: #DAA520; }

  /* FIX: replaces the old flex-wrap pill list (each button a different width
  based on its own text, no visual rhythm) with a clean, uniform 2-column
  grid — every option the same size, with an icon for quick scanning. Reads
  as a considered set of choices instead of a loose pile of chips. */
  .addon-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .addon-card { display:flex; align-items:center; gap:10px; padding:14px 16px; background:rgba(218,165,32,0.03); border:0.5px solid rgba(218,165,32,0.12); border-radius:10px; cursor:pointer; transition:all 0.2s; }
  .addon-card:hover { border-color:rgba(218,165,32,0.35); background:rgba(218,165,32,0.06); }
  .addon-card.selected { border-color:#DAA520; background:rgba(218,165,32,0.12); }
  .addon-card i { font-size:18px; color:#8B6914; flex-shrink:0; transition:color 0.2s; }
  .addon-card.selected i { color:#DAA520; }
  .addon-card span { font-family:'Cinzel',serif; font-size:10px; letter-spacing:1px; color:#8B6914; text-transform:uppercase; line-height:1.5; transition:color 0.2s; }
  .addon-card.selected span { color:#DAA520; }
  @media(max-width:600px){ .addon-grid{grid-template-columns:1fr} }

  .prewed-card { background: rgba(218,165,32,0.02); border: 0.5px solid rgba(218,165,32,0.1); border-radius: 14px; padding: 18px 16px; margin-bottom: 14px; }

  .review-section { margin-bottom: 18px; }
  .review-title { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; color: #8B6914; text-transform: uppercase; margin-bottom: 10px; }
  .review-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 0.5px solid #1A1400; gap: 12px; }
  .review-key { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.5px; color: #4A4030; text-transform: uppercase; flex-shrink: 0; }
  .review-val { font-size: 14px; color: #C8A830; text-align: right; }

  .notes-area { width: 100%; background: rgba(218,165,32,0.03); border: 0.5px solid rgba(218,165,32,0.12); border-radius: 10px; padding: 12px 16px; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #EDE9E2; outline: none; resize: none; min-height: 90px; transition: border-color 0.2s; }
  .notes-area:focus { border-color: #DAA520; }
  .notes-area::placeholder { color: #4A4030; }

  .btn-row { display: flex; gap: 10px; margin-top: 24px; }
  .btn-back { flex: 0 0 auto; padding: 14px 22px; background: transparent; border: 0.5px solid rgba(218,165,32,0.2); border-radius: 12px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; color: #6A5010; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
  .btn-back:hover { border-color: #DAA520; color: #DAA520; }
  .btn-next { flex: 1; padding: 15px; background: linear-gradient(135deg, #8B6914, #DAA520, #FFD700, #8B6914); background-size: 200% 200%; border: none; border-radius: 12px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 4px; color: #000; cursor: pointer; text-transform: uppercase; font-weight: 500; animation: shimmer 3s ease infinite; }
  @keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

  .success-wrap { text-align: center; padding: 48px 24px; max-width: 420px; margin: 0 auto; }
  .success-icon { width: 70px; height: 70px; border-radius: 50%; border: 1px solid #DAA520; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
  .success-icon svg { width: 32px; height: 32px; }
  .success-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; background: linear-gradient(135deg, #8B6914, #DAA520, #FFD700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; }
  .success-sub { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; color: #6A5010; line-height: 1.9; text-transform: uppercase; }
  .divider-line { height: 0.5px; background: linear-gradient(90deg, transparent, #2A2000, transparent); margin: 20px 0; }
  .date-input-full { width: 100%; background: rgba(218,165,32,0.03); border: 0.5px solid rgba(218,165,32,0.12); border-radius: 10px; padding: 11px 14px; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #EDE9E2; outline: none; }
  .date-input-full:focus { border-color: #DAA520; }
  /* FIX: the calendar/clock icon on date & time inputs is drawn natively by
     the browser — it does NOT follow the input's CSS `color`, so on this
     dark background it rendered as a barely-visible dark-grey glyph in
     Chrome/Edge (and looked different again in Firefox/Safari). `color-scheme`
     tells the browser to use its light-on-dark native control style where
     supported, and the invert+brightness filter forces the icon itself
     visibly gold/light in WebKit-based browsers so it's readable everywhere. */
  input[type="date"], input[type="time"] { color-scheme: dark; }
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(72%) sepia(64%) saturate(496%) hue-rotate(0deg) brightness(1.05);
    cursor: pointer;
    opacity: 1;
  }
  /* FIX: Tabler icons (<i class="ti ti-...">) throughout the form relied on
     inheriting text color from whatever container they sat in, which meant
     some (e.g. inside faint/secondary-colored text) ended up too dim to
     read clearly. Icons now default to the same gold accent used everywhere
     else in the form, so they stay visibly readable regardless of what
     they're nested inside, in every browser. */
  [class^="ti-"], [class*=" ti-"], i.ti { color: #DAA520; }
.bk-notes-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(240,165,0,.15);color:var(--cream,#f5f0e8);padding:10px;border-radius:4px;resize:vertical;font-family:inherit;font-size:14px}
.bk-notes-textarea:focus{outline:none;border-color:rgba(240,165,0,.4)}