/* ---------- Colours in one place ----------
   CSS variables: change a colour here and it changes everywhere.
   Later, a "theme" for a different holiday is mostly just new values here. */
:root {
  --bg: #0f3d2e;        /* deep Christmas green */
  --card: #fffaf0;      /* warm cream, like paper */
  --red: #b3202a;
  --gold: #d4a73c;
  --text: #2b2b2b;
}

/* Removes the browser's default spacing so we control the layout ourselves */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* width includes padding, so sizes are predictable */
}

body {
  min-height: 100vh;               /* at least the full screen height */
  background: var(--bg);
  font-family: "Nunito", sans-serif;
  color: var(--text);

  /* Flexbox centering: puts the card in the middle of the screen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* The star canvas: stretched over the whole screen, sitting BEHIND everything */
#sky {
  position: fixed;   /* stays put even if the page scrolls */
  inset: 0;          /* top, right, bottom, left all = 0, so it covers the full screen */
  z-index: 0;        /* layer 0 = the back */
}

/* The snow canvas: same full-screen size, but in FRONT of everything */
#snow {
  position: fixed;
  inset: 0;
  z-index: 4;            /* the very front: above everything except the music button */
  pointer-events: none;  /* clicks/taps pass straight through the snow
                            to the card, so buttons will still work */
}

/* Never let anything make the page wider than the screen.
   "clip" is the stricter, newer version of "hidden" (iPhones respect it
   better); browsers that don't know "clip" just use "hidden". */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- LAYERS, back to front ----------
   0  sky canvas (town + fairy lights)
   1  Santa's layer, and the snowy hills at the bottom
   2  the card (frosted glass: you see Santa and the town through it)
   3  the gift screen
   4  falling snow
   5  music button */
:root {
  --santa-w: min(115vw, 880px); /* big on a laptop, wider than a phone (he flies past the edges anyway) */
}

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  /* Leave green space above the card for Santa to fly in.
     The SAME space goes below too, so the card stays exactly in the
     middle of the screen (flexbox centers the whole box, margins included). */
  margin-top: calc(var(--santa-w) * 0.2);
  margin-bottom: calc(var(--santa-w) * 0.2);
}

/* Santa's own full-screen layer. overflow: hidden clips him at the
   screen edges, so he can never make the page wider than the phone. */
.santa-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.santa-flight {
  position: absolute;
  left: 50%;
  width: var(--santa-w);
  /* JavaScript sets --santa-top so Santa sits just above the card,
     sinking slightly behind its top edge (see placeSanta in script.js) */
  top: var(--santa-top, 10%);
  /* Waits off-screen on the left until the gift is opened (see the gift section) */
  transform: translateX(calc(-50vw - 100%));
}

.santa {
  display: block;
  width: 100%;
  animation: bob 1.4s ease-in-out infinite alternate;
}

/* Fly from fully off the left of the screen to fully off the right.
   translateX(%) is measured in Santa's own width, vw in screen width.
   He crosses during 0-75%, then the sky is empty until he loops back. */
@keyframes fly {
  0%   { transform: translateX(calc(-50vw - 100%)); }
  75%  { transform: translateX(50vw); }
  100% { transform: translateX(50vw); }
}

/* Gentle up-and-down, like riding on the wind */
@keyframes bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

.card {
  position: relative; /* needed so z-index works on the card */
  z-index: 1;
  width: 100%;
  max-width: 420px;   /* phone-sized card, even on a big laptop */
  /* perspective = how far away the "camera" is. It's what makes the
     flip look 3D (the near edge gets bigger) instead of a flat squish. */
  perspective: 1400px;
}

/* The part that actually spins. Both faces live inside it. */
.card-inner {
  display: grid;            /* grid trick: both faces go in the SAME cell,  */
  transform-style: preserve-3d; /* so they overlap exactly and the card is */
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); /* as tall as */
}                           /* the taller face. No scrolling needed.        */

/* Flipped: JavaScript adds class="flipped" to the card */
.card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Each face looks like the paper card */
.face {
  grid-area: 1 / 1;         /* row 1, column 1: both faces in the same spot */
  backface-visibility: hidden; /* a face turned away from you is invisible */
  -webkit-backface-visibility: hidden; /* same, for Safari/iPhone */
  background: var(--card);
  padding: 36px 28px;
  border-radius: 20px;
  border: 3px solid var(--gold);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  text-align: center;
  /* centre the content up and down, in case one face is shorter */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The back starts already turned around, facing away from you */
.back {
  transform: rotateY(180deg);
}

/* "Will you join us? →" on the front */
.flip-btn {
  margin-top: 24px;
  align-self: center;
  padding: 13px 28px;
  border-radius: 999px;
  border: none;
  background: var(--red);
  color: white;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(179, 32, 42, 0.35);
  transition: transform 0.15s;
}
.flip-btn:hover  { transform: translateY(-2px); }
.flip-btn:active { transform: scale(0.96); }

/* After they've replied, the front button turns green */
.flip-btn.replied {
  background: #1f7a4d;
  box-shadow: 0 4px 12px rgba(31, 122, 77, 0.35);
}

/* "← Back to invite" on the back */
.back-btn {
  margin-top: 18px;
  align-self: center;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  opacity: 0.7;
  cursor: pointer;
}
.back-btn:hover { opacity: 1; }

.greeting {
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: var(--gold);
  font-weight: 700;
}

.title {
  font-family: "Mountains of Christmas", cursive;
  font-size: 2.8rem;
  color: var(--red);
  margin: 8px 0;
  line-height: 1.1;
}

.hosts {
  font-style: italic;
  margin-bottom: 24px;
}

.details {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  line-height: 2;                  /* space between the date/time/place lines */
}

.message {
  font-size: 1.05rem;
  line-height: 1.6;
}

.party {
  margin-top: 20px;
  font-weight: 700;
  color: var(--red);
  line-height: 1.5;
}

/* :empty = the element has no text inside.
   Hide it then, so the general invite has no blank gap. */
.party:empty {
  display: none;
}


/* =========================================================
   STEP 4: The gift box
   Layers, back to front: stars (0), card (1), gift (2), snow (3)
   ========================================================= */

/* --- Before opening: the card is hidden, small and a bit low --- */
.stage {
  opacity: 0;
  transform: scale(0.6) translateY(40px);
  /* "transition" = when these values change, animate the change.
     The cubic-bezier makes it overshoot slightly, like a little bounce. */
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* --- After opening: JavaScript adds class="revealed" to <body> --- */
body.revealed .stage {
  opacity: 1;
  transform: none;
}

body.revealed .santa-flight {
  animation: fly 12s linear infinite;
  animation-delay: 1s; /* let the card appear first, then Santa flies in */
}

/* The full-screen layer holding the gift, centred like the card */
.gift-screen {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column; /* stack label, gift and hint top to bottom */
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: white;
  text-align: center;
  padding: 20px;
  transition: opacity 0.6s ease;
}

body.revealed .gift-screen {
  opacity: 0;
  pointer-events: none; /* invisible AND can't be tapped any more */
}

.gift-for {
  font-family: "Mountains of Christmas", cursive;
  font-size: 2.2rem;
  color: var(--gold);
  /* Extra space underneath pushes the text UP, into the open sky
     above the rooftops (the tallest buildings reach ~185px above the middle) */
  margin-bottom: 120px;
  /* A dark soft shadow behind the letters, so they stay readable
     even if a rooftop or fairy light is right behind them */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.gift-hint {
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.9rem;
  animation: pulse 1.6s ease-in-out infinite;
}

/* The button itself: remove the default grey button look */
.gift {
  position: relative;
  width: 190px;
  height: 200px;
  background: none;
  border: none;
  cursor: pointer;
  animation: wiggle 2.5s ease-in-out infinite;
}

/* Box and lid share the ribbon: a gold stripe down the middle.
   linear-gradient with hard stops = stripes, no image file needed. */
.box,
.lid {
  position: absolute;
  background:
    linear-gradient(90deg, transparent 43%, var(--gold) 43%, var(--gold) 57%, transparent 57%),
    var(--red);
  border-radius: 8px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.15); /* darker bottom edge = 3D look */
}

.box {
  bottom: 0;
  left: 12px;
  width: 166px;
  height: 128px;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.lid {
  top: 44px;
  left: 0;
  width: 190px;
  height: 38px;
  z-index: 1; /* lid sits on top of the box */
  transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.6, 1), opacity 0.7s ease;
}

/* The bow: two gold rings (loops), tilted outwards */
.bow span {
  position: absolute;
  top: -30px;
  width: 46px;
  height: 34px;
  border: 9px solid var(--gold);
  border-radius: 50%;
}
.bow span:first-child { left: 48px;  transform: rotate(-25deg); }
.bow span:last-child  { right: 48px; transform: rotate(25deg); }

/* --- The opening animation (JavaScript adds class="open") --- */
.gift.open {
  animation: none; /* stop wiggling */
}
.gift.open .lid {
  transform: translate(70px, -180px) rotate(40deg); /* fly up and to the right, spinning */
  opacity: 0;
}
.gift.open .box {
  transform: scale(0.7) translateY(30px);
  opacity: 0;
}

/* Wiggle, then rest, then wiggle: like something's inside */
@keyframes wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  65% { transform: rotate(-6deg); }
  70% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
  80% { transform: rotate(4deg); }
  85% { transform: rotate(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


/* =========================================================
   STEP 5: Music button, bottom-left corner
   ========================================================= */
.mute {
  position: fixed;
  left: 18px;               /* bottom-LEFT: Netlify puts its badge bottom-right */
  bottom: 18px;
  z-index: 5;               /* above the snow, so it can always be tapped */
  width: 52px;              /* comfortable size for a finger */
  height: 52px;
  border-radius: 50%;       /* a circle */
  border: 1.5px solid rgba(212, 167, 60, 0.8);  /* soft gold ring */
  /* "Frosted glass": see-through, and blurs whatever is behind it */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);           /* same thing, for Safari/iPhone */
  box-shadow: 0 0 18px rgba(212, 167, 60, 0.35); /* a gentle golden glow */
  cursor: pointer;
  /* hidden until the gift is opened */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease 1s, box-shadow 0.3s ease;
}

body.revealed .mute {
  opacity: 1;
  pointer-events: auto;
}

/* The note: the ♫ symbol as TEXT (not an emoji), so we can colour it.
   Emoji have fixed colours; Apple's music emoji is dark grey and
   disappears on dark green. */
.mute .note {
  color: #fff6dc;                                 /* warm cream */
  font-size: 1.7rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(212, 167, 60, 0.9);   /* golden glow */
  /* While music plays, the note sways gently to the beat */
  display: inline-block;    /* needed so the span can be rotated */
  animation: sway 0.8s ease-in-out infinite alternate; /* 0.8s = 2 beats */
}

@keyframes sway {
  from { transform: rotate(-12deg) translateY(1px); }
  to   { transform: rotate(12deg) translateY(-2px); }
}

/* --- Muted: the note stops, fades, and gets a line through it --- */
.mute.muted {
  box-shadow: none;
}
.mute.muted .note {
  animation: none;
  opacity: 0.45;
}
/* ::after = an extra decoration made by CSS only (no HTML needed).
   Here: a thin gold line, rotated 45deg, across the button */
.mute.muted::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  background: var(--gold);
  transform: rotate(-45deg);
}


/* =========================================================
   STEP 6: RSVP
   ========================================================= */
.rsvp {
  /* it has the whole back face to itself now, so no divider line needed */
}

.rsvp-title {
  font-family: "Mountains of Christmas", cursive;
  font-size: 1.9rem;
  color: var(--red);
  margin-bottom: 14px;
}

/* Every RSVP part stacks with the same gap */
#rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The "hidden" attribute normally hides things, but "display: flex" etc.
   can override it. This makes sure hidden ALWAYS means hidden. */
[hidden] {
  display: none !important;
}

.choice {
  display: flex;
  gap: 10px;
}

/* All buttons in the RSVP use the card's font, not the browser default */
.rsvp button,
.rsvp input,
.rsvp textarea {
  font-family: inherit;
  font-size: 1rem;
}

.choice-btn {
  flex: 1;                  /* both buttons share the width equally */
  padding: 12px 8px;
  border-radius: 999px;     /* pill shape */
  border: 2px solid var(--gold);
  background: white;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.choice-btn:active { transform: scale(0.96); } /* "pressed" feel */

.choice-btn.selected[data-answer="yes"] { background: #1f7a4d; border-color: #1f7a4d; color: white; }
.choice-btn.selected[data-answer="no"]  { background: #6b6b6b; border-color: #6b6b6b; color: white; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-weight: 700;
  font-size: 0.9rem;
}

.field input,
.field textarea {
  padding: 10px 12px;
  border: 1.5px solid #d9cfb8;
  border-radius: 10px;
  background: white;
  font-weight: 400;
  resize: vertical;
}

/* Gold outline when you're typing in a box */
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--gold);
  border-color: transparent;
}

/* --- Who's coming: names as tappable chips --- */
.who {
  border: none;
}
.who legend {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  width: 100%;
}
.who-list {
  display: flex;
  flex-wrap: wrap;          /* chips flow onto a new line when needed */
  gap: 8px;
  justify-content: center;
}
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid #d9cfb8;
  background: white;
  cursor: pointer;
  user-select: none;
}
.chip input {
  accent-color: #1f7a4d;    /* the tick box turns green */
}
/* :has() = "a chip that HAS a ticked box inside it" gets highlighted */
.chip:has(input:checked) {
  border-color: #1f7a4d;
  background: #eaf6ef;
}

/* --- The - 1 + counter --- */
.count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 700;
}
.count-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: white;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.count output {
  min-width: 1.5em;
  font-size: 1.3rem;
}

.send {
  padding: 13px;
  border-radius: 999px;
  border: none;
  background: var(--red);
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(179, 32, 42, 0.35);
}
.send:disabled {
  opacity: 0.6;
  cursor: wait;
}

.rsvp-error {
  color: var(--red);
  font-size: 0.9rem;
  min-height: 0;
}
.rsvp-error:empty { display: none; }

.done-msg {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1f7a4d;
  margin-bottom: 10px;
}
.change-btn {
  background: none;
  border: none;
  color: var(--text);
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.7;
}


/* =========================================================
   PHONES: a smaller card, so the town, snow and Santa show around it
   ---------------------------------------------------------
   @media = "only use these rules when...". Here: when the screen
   is 600px wide or less (phones). On laptops nothing below applies.
   These rules come LAST in the file, so they win over the ones above.
   ========================================================= */
@media (max-width: 600px) {

  /* The card: about 3/4 of the screen width instead of almost all of it */
  .stage {
    max-width: min(76vw, 300px);
  }

  .face {
    padding: 22px 16px;
    border-radius: 16px;
    border-width: 2px;
  }

  /* Text a little smaller, still easy to read */
  .greeting { font-size: 0.85rem; }
  .title    { font-size: 1.9rem; margin: 4px 0; }
  .hosts    { font-size: 0.85rem; margin-bottom: 14px; }

  .details {
    padding: 10px 8px;
    margin-bottom: 14px;
    font-size: 0.85rem;
    line-height: 1.8;
  }

  .message { font-size: 0.88rem; line-height: 1.5; }
  .party   { font-size: 0.85rem; margin-top: 12px; }

  .flip-btn {
    margin-top: 16px;
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  /* --- The RSVP side --- */
  .rsvp-title { font-size: 1.6rem; margin-bottom: 10px; }
  #rsvp-form  { gap: 10px; }

  /* Yes / No on top of each other: side by side they get squashed */
  .choice { flex-direction: column; gap: 8px; }
  .choice-btn { padding: 10px; }

  .rsvp button,
  .rsvp input,
  .rsvp textarea { font-size: 0.9rem; }

  .field     { font-size: 0.8rem; }
  .chip      { padding: 4px 10px; font-size: 0.85rem; }
  .who legend { font-size: 0.8rem; }
  .send      { padding: 11px; }
  .back-btn  { margin-top: 12px; font-size: 0.85rem; }

  /* Gift screen */
  .gift-for { font-size: 1.8rem; }

  /* Music button: a bit smaller, tucked into the corner */
  .mute {
    width: 42px;
    height: 42px;
    left: 10px;
    bottom: 10px;
  }
  .mute .note { font-size: 1.35rem; }
}


/* =========================================================
   Snowy hills along the bottom (trees, deer, rabbits)
   ========================================================= */
.bottom-scene {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(130px, 18vw, 230px); /* between 130px (phone) and 230px (big screen) */
  z-index: 1;               /* above the town, behind the card and the snow */
  pointer-events: none;
}


/* =========================================================
   FROSTED GLASS CARD
   The card is see-through: the town, lights and Santa show
   through it, softly blurred so the text is still readable.
   (These rules come last, so they replace the cream colours above.)
   ========================================================= */
.face {
  /* 14% white: mostly see-through */
  background: rgba(255, 255, 255, 0.14);
  /* blur whatever is BEHIND the card, like frosted glass */
  backdrop-filter: blur(5px) saturate(1.3);
  -webkit-backdrop-filter: blur(5px) saturate(1.3);
  border: 1.5px solid rgba(212, 167, 60, 0.85);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);  /* thin shine on the top edge */
  color: #fffaf0;
  /* a soft dark outline behind every letter, so text stays readable
     even when a bright window or light is right behind it */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.greeting { color: #ffd77a; }
.title    { color: #ffffff; text-shadow: 0 0 18px rgba(255, 215, 122, 0.55), 0 2px 4px rgba(0, 0, 0, 0.6); }
.hosts    { color: #f3ead8; }
.message  { color: #fffaf0; }
.party    { color: #ffd77a; }

.details {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* --- RSVP side --- */
.rsvp-title { color: #ffffff; text-shadow: 0 0 18px rgba(255, 215, 122, 0.55), 0 2px 4px rgba(0, 0, 0, 0.6); }

.choice-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fffaf0;
  text-shadow: inherit;
}
.choice-btn.selected[data-answer="yes"] { background: #1f7a4d; border-color: #1f7a4d; }
.choice-btn.selected[data-answer="no"]  { background: #6b6b6b; border-color: #6b6b6b; }

.field, .who legend, .count { color: #fffaf0; }

/* typing boxes stay solid white, so typing is easy to see */
.field input,
.field textarea {
  color: #2b2b2b;
  text-shadow: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fffaf0;
}
.chip:has(input:checked) {
  background: rgba(31, 122, 77, 0.55);
  border-color: #6fd39f;
}

.count-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fffaf0;
}

.done-msg   { color: #9df0c2; }
.change-btn,
.back-btn   { color: #fffaf0; opacity: 0.85; }
.rsvp-error { color: #ffb3b3; }

/* The music button sits on white snow now, so it gets darker green glass */
.mute {
  background: rgba(15, 61, 46, 0.6);
}

/* On bigger screens the card is wider, so walk the deer further left
   to keep their heads out from behind it. (In SVG, these px are the
   drawing's own units.) */
@media (min-width: 601px) {
  .deer-pair { transform: translateX(-110px); }
}

/* On phones, lift the music button above the snowy hills,
   so it doesn't cover the deer */
@media (max-width: 600px) {
  .mute { bottom: 140px; }
}

/* "We'll miss you! 💛" when they choose Can't make it */
.miss-you {
  font-family: "Mountains of Christmas", cursive;
  font-size: 1.7rem;
  color: #ffd77a;
  margin: 4px 0;
}

/* "Thank you! 😊  DIGITAL INVITES" after a guest replies */
.brand-thanks {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 167, 60, 0.5); /* thin gold line above */
  font-size: 1rem;
  font-weight: 700;
  color: #fffaf0;
}
.brand-name {
  display: block;              /* its own line, under "Thank you!" */
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 3px;         /* spaced-out capitals look like a logo */
  text-transform: uppercase;
  color: #ffd77a;
}

/* =========================================================
   General invite: "Who's coming with you?" name boxes
   ========================================================= */
.companions { text-align: left; }
.companions-label {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-align: center;
}
.companion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.companion {
  display: flex;
  gap: 8px;
}
.companion input {
  flex: 1;                         /* the box takes all the space except the × */
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: white;
  color: #2b2b2b;
  text-shadow: none;
}
.companion input:focus { outline: 2px solid var(--gold); }
.remove-btn {
  width: 38px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
  color: #fffaf0;
  font-size: 1.2rem;
  cursor: pointer;
}
.add-btn {
  display: block;
  margin: 10px auto 0;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px dashed #ffd77a;    /* dashed = "add something here" */
  background: none;
  color: #ffd77a;
  font-weight: 700;
  cursor: pointer;
}

/* "Make your own invitation" link under the business name */
.make-own {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 215, 122, 0.7);
  color: #ffd77a;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.make-own:hover { background: rgba(255, 215, 122, 0.15); }