:root{
  --green-900:#173d1c;
  --green:#265b2b;
  --green-700:#1e4a23;
  --gold:#cc9c30;
  --gold-light:#e6c467;
  --sand:#f6f3ec;
  --ink:#14231a;
  --ink-soft:#4a5a4d;
  --white:#ffffff;
  --line:#e2ddd0;
  --danger:#a4432f;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--sand);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.app{
  max-width:560px;
  margin:0 auto;
  min-height:100vh;
  background:var(--white);
  display:flex;
  flex-direction:column;
  box-shadow:0 0 60px rgba(20,35,26,0.08);
}

/* Header */
.hero{
  position:relative;
  background:var(--green-900);
  color:var(--sand);
  padding:28px 24px 22px;
  overflow:hidden;
}
.hero svg.contours{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0.35;
}
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  position:relative; z-index:1;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
/* LOGO SLOT: this dashed box is a placeholder only.
   Once you have a logo file in /assets, swap the #logoSlot div in index.html
   for an <img> tag and delete these two rules (or restyle .brand-mark-img). */
.brand-mark-slot{
  width:34px;height:34px;border-radius:9px;
  border:1.5px dashed rgba(230,196,103,0.6);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--gold-light);
}
.brand-mark-img{
  width:34px;height:34px;border-radius:9px;object-fit:contain;background:var(--white);
}
.brand-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;letter-spacing:0.01em;}
.brand-sub{font-size:11px;color:#c9d6c9;margin-top:1px;}
.event-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--gold-light);
  border:1px solid rgba(230,196,103,0.4);
  padding:4px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.hero h1{
  position:relative; z-index:1;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1.15;
  margin:20px 0 6px;
}
.hero p{
  position:relative; z-index:1;
  margin:0; font-size:13.5px; color:#c9d6c9; max-width:38ch;
}

/* Progress */
.progress{
  display:flex; align-items:center; gap:0;
  padding:16px 24px 0;
}
.progress .seg{
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.progress .bar{
  height:3px; width:100%; background:var(--line); border-radius:3px; overflow:hidden;
}
.progress .bar i{ display:block; height:100%; width:0%; background:var(--gold); transition:width .35s ease; }
.progress .label{ font-size:10px; font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); letter-spacing:0.02em; }
.progress .seg.active .label{ color:var(--green); font-weight:600; }

/* Steps */
.steps{ flex:1; padding:22px 24px 100px; position:relative; }
.step{ display:none; animation:fade .25s ease; }
.step.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.step-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold); font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:6px;
}
.step h2{ font-family:'Space Grotesk',sans-serif; font-size:19px; margin:0 0 4px; }
.step .step-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 20px; line-height:1.5; }

/* Category cards */
.cat-card{
  display:flex; gap:14px; align-items:flex-start;
  border:1.5px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:12px; cursor:pointer;
  background:var(--white); transition:border-color .15s, background .15s;
}
.cat-card:hover{ border-color:var(--gold); }
.cat-card.selected{ border-color:var(--green); background:#f2f6f2; }
.cat-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:var(--green); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;
}
.cat-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:3px; }
.cat-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }

/* Form fields */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:6px;
}
.field .opt{ font-weight:400; color:var(--ink-soft); }
.field input, .field textarea, .field select{
  width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:var(--white);
  outline:none; transition:border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--green); }
.field textarea{ resize:vertical; min-height:70px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Day tabs */
.day-tabs{ display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding-bottom:2px; }
.day-tab{
  flex-shrink:0; padding:9px 15px; border-radius:20px; border:1.5px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--white); cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
}
.day-tab.active{ border-color:var(--green); background:var(--green); color:var(--white); }

.slot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.slot{
  padding:11px 8px; text-align:center; border-radius:10px; border:1.5px solid var(--line);
  font-size:13px; font-weight:500; cursor:pointer; background:var(--white); color:var(--ink);
}
.slot.selected{ border-color:var(--gold); background:#fbf3e0; color:var(--green-900); font-weight:600; }
.slot.taken{ background:#f2f0ea; color:#b3ada0; border-color:#eae5d8; cursor:not-allowed; text-decoration:line-through; }

.note{
  display:flex; gap:9px; align-items:flex-start;
  background:#f2f6f2; border:1px solid #dce6dc; border-radius:10px; padding:11px 12px;
  font-size:12px; color:var(--green-700); line-height:1.5; margin-bottom:4px;
}

/* Confirmation */
.confirm-wrap{ text-align:center; padding-top:10px; }
.confirm-badge{
  width:56px;height:56px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.confirm-badge svg{ width:26px;height:26px; }
.confirm-wrap h2{ font-family:'Space Grotesk',sans-serif; font-size:20px; margin:0 0 6px; }
.confirm-wrap p.sub{ font-size:13px; color:var(--ink-soft); margin:0 0 22px; }
.ref-card{
  text-align:left; border:1.5px dashed var(--line); border-radius:var(--radius);
  padding:16px; background:var(--sand);
}
.ref-row{ display:flex; justify-content:space-between; padding:7px 0; font-size:13px; border-bottom:1px solid var(--line); }
.ref-row:last-child{ border-bottom:none; }
.ref-row span:first-child{ color:var(--ink-soft); }
.ref-row span:last-child{ font-weight:600; text-align:right; }
.ref-id{ font-family:'IBM Plex Mono',monospace; background:var(--green-900); padding:2px 8px; border-radius:6px; color:#f0d896; }
.submit-status{ margin-top:14px; font-size:12.5px; color:var(--ink-soft); }
.submit-status.error{ color:var(--danger); }

/* Footer / nav */
.nav{
  position:sticky; bottom:0; left:0; right:0;
  background:var(--white); border-top:1px solid var(--line);
  padding:14px 24px; display:flex; gap:10px;
  max-width:560px; margin:0 auto;
}
.btn{
  flex:1; padding:13px; border-radius:10px; font-size:14px; font-weight:600;
  font-family:'Inter',sans-serif; border:none; cursor:pointer; transition:opacity .15s;
}
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-primary{ background:var(--green); color:var(--white); }
.btn-primary:hover:not(:disabled){ background:var(--green-700); }
.btn-ghost{ background:var(--white); color:var(--ink-soft); border:1.5px solid var(--line); flex:0 0 70px; }
.btn-gold{ background:var(--gold); color:var(--green-900); }

::placeholder{ color:#a7ab9f; }

.venue-note{ margin-bottom:16px; }
.venue-note .note{ margin-bottom:0; }


.modal-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(20,35,26,0.55);
  align-items:center; justify-content:center;
  z-index:50;
  padding:20px;
}
.modal-overlay.active{ display:flex; }
.modal-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:28px 24px;
  max-width:360px;
  width:100%;
  text-align:center;
  animation:fade .2s ease;
}
.modal-card h2{ font-family:'Space Grotesk',sans-serif; font-size:19px; margin:0 0 6px; }
.modal-card p.sub{ font-size:13px; color:var(--ink-soft); margin:0 0 20px; }

/* Country select — styled select box with custom arrow */
.field select#country{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:100%;
  padding:12px 40px 12px 13px; /* extra right padding for the arrow */
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:var(--ink);
  background-color:var(--white);
  cursor:pointer;
  outline:none;
  transition:border-color .15s, box-shadow .15s;

  /* Custom gold chevron, drawn as an SVG background */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23cc9c30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}

.field select#country:hover{
  border-color:var(--gold);
}

.field select#country:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(38,91,43,0.12);
}

/* Placeholder-style look for the unselected "Select a country" option */
.field select#country:invalid,
.field select#country option[value=""]{
  color:#a7ab9f;
}

.field select#country option{
  color:var(--ink);
  background:var(--white);
  font-family:'Inter',sans-serif;
  font-size:14px;
  padding:8px;
}

/* Disabled state, for consistency with rest of form */
.field select#country:disabled{
  opacity:0.5;
  cursor:not-allowed;
  background-color:#f2f0ea;
}

/* Firefox: hide the default dropdown arrow so ours shows cleanly */
.field select#country::-ms-expand{
  display:none;
}