/*
  TABLE OF CONTENTS
  =================
  1. FOUNDATION
     1.1 Variables
     1.2 Fonts
     1.3 Base Layout & Typography

  2. GLOBAL ELEMENTS
     2.1 Universal Inputs & Textareas
     2.2 Utilities
     2.3 Error States

  3. COMPONENTS
     3.1 Header & Top Nav
     3.2 Footer
     3.3 Buttons
     3.4 Form Container & Steps
     3.5 Form Groups & Fields
     3.6 Radio Blocks
     3.7 Input Spinner
     3.8 Plus One Block
     3.9 Review / Preview Area
     3.10 Lottie Emoji Styling

  4. PAGE SECTIONS
     4.1 Dividers
     4.2 Headings
     4.3 Paragraphs & Notes
     4.4 Contact Row

  5. RESPONSIVE & MEDIA QUERIES
     5.1 Base Mobile Overrides
     5.2 Mobile Layout Adjustments
     5.3 Tablet to Desktop Ranges

  6. FUTURE / EXPERIMENTAL
     6.1 Empty State Styles
     6.2 Fancy Borders
*/

/* ========== 1.1 VARIABLES ========== */
:root {
  --light-accent: #91b7d9;
  --light-neutral: #edebe9;
  --dark-accent: #143955;
  --dark-neutral: #3a4a5f;
  --dark-neutral-50: rgb(58, 74, 95, 0.5);
  --dark-neutral-25: rgb(58, 74, 95, 0.25);
  --white: #ffffff;
  --almost-white: #fcfcfd;
  --faint-grey: hsl(220, 33%, 93%);
  --pale-periwinkle: #dbe3ef;
  --corner: 0;
  --bg: var(--pale-periwinkle);
  --bg-form: rgba(248, 248, 250, 1);
  --quirky-accent: #fd8d6a;
  --quirky-accent-light: rgba(248, 211, 195, 0.3);
  --border-color: var(--pale-periwinkle);
  --radio-accent: var(--quirky-accent);
  --radio-bg: var(--quirky-accent-light);
  --icon-color: var(--light-accent);
  --offset-top-small-screen: 76px;
}

/* ========== 1.2 FONTS ========== */
@font-face {
  font-family: "Artisan Modified";
  src: url("https://assets.codepen.io/14361929/Artisan-Modified.woff2")
      format("woff2"),
    url("https://assets.codepen.io/14361929/Artisan-Modified.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Tenez";
  src: url("https://assets.codepen.io/14361929/TenezRegular-8337866.otf")
      format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Tenez";
  src: url("https://assets.codepen.io/14361929/TenezItalic-8337851.otf")
      format("opentype");
  font-weight: normal;
  font-style: italic;
}



.icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
}

/* ========== 1.3 BASE LAYOUT & TYPOGRAPHY ========== */

* {
  box-sizing: border-box;
}
body {
  background: #f0f4f8;
  background: aliceblue;
  background-image: url("https://assets.codepen.io/14361929/rococo.png");
  background-repeat: repeat-x repeat-y;
  background-size: 400px;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: var(--dark-neutral);
  font-size: 17px;
  line-height: 1.56em;
  position: relative;
  padding: 1em;
  padding: env(safe-area-inset-top, 1em) env(safe-area-inset-right, 1em)
    env(safe-area-inset-bottom, 1em) env(safe-area-inset-left, 1em);
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3 {
  font-family: "Tenez", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: 1px;
  font-style: italic;
  line-height: 1.1em !important;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.1em;
}
h4 {
  font-family: "Inter", sans-serif;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 300;
  color: var(--light-accent);
}
small {
  font-size: 0.75em;
  opacity: 0.8;
  display: block;
}

a {
  color: #26608c !important;
  opacity: 0.9;
}

/* ========== 2.1 UNIVERSAL INPUTS & TEXTAREAS ========== */
input,
textarea,
.form-section {
  will-change: transform, opacity, height;
}

/* ========== 2.2 UTILITIES ========== */
.flex-break {
  flex-basis: 100%;
  height: 0;
}
.spacer {
  display: block;
  height: 1.5em;
}
.subtitle {
  font-weight: 400 !important;
  color: #655;
  font-size: 0.8em;
}
i.fa-solid {
  opacity: 0.6;
}

/* ========== 2.3 ERROR STATES ========== */
.input-error {
  border-color: #e15451 !important;
  outline: none;
}
.form-error {
  color: #c0392b;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  display: none;
  text-align: right;
}
input.has-error,
textarea.has-error {
  border: 2px solid #c0392b !important;
}
.has-error {
  color: #c0392b !important;
}
.rsvp-error,
.c-error,
.c-validation,
.generic-form-error {
  background: transparent !important;
  padding: 10px !important;
  border-radius: 1px !important;
  position: relative;
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8em;
  color: rgb(216, 27, 96, 0.8);
}
.c-error .c-validation:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #c51244;
  position: absolute;
  top: -10px;
}
.c-label:after {
  color: #c51244 !important;
}
.c-error input,
.c-error select,
.c-error .c-choice-option {
  background: #fff0f4;
  color: #c51244;
}
.c-error input,
.c-error select {
  border: 1px solid #c51244 !important;
}
.isRequired::after {
  content: "*";
  margin: 0 3px;
  color: #d81b60;
}

/* ========== 3.1 HEADER & TOP NAV ========== */
.btn-return,
.btn-reset-form,
.logo {
  flex: 1;
}
.header {
  display: flex;
  flex-flow: row no-wrap;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.header .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .logo img {
  height: 100px;
  width: 100px;
}
.header .logo a {
  text-decoration: none;
  outline: 0;
  border: 0;
  margin-top: 40px;
}
.header .btn-reset-form,
.header .btn-return {
  display: flex;
  align-items: center;
  height: 40px;
}
.header .btn-reset-form i,
.header .btn-return i {
  opacity: 1;
}
.header .btn-reset-form {
  justify-content: flex-end;
  margin-right: 1em;
}
.header .btn-return {
  justify-content: flex-start;
  margin-left: 1em;
}

.notification-bar {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: -999;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #c7d0e3 0%, #f6dbd7 100%);
  height: 40px;
  padding: 2px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  opacity: 0.7;
}
.notification-bar p {
  padding: 0;
  margin: auto 0;
  line-height: 1em;
  height: 1em;
  font-family: "Tenez", serif;
  font-style: italic;
}

/* ========== 3.2 FOOTER ========== */
.footer {
  margin-top: 1em;
  font-size: 14px;
  text-align: center;
  opacity: 0.7;
}
.footer p {
  margin: 2px 0;
  padding: 0;
  text-shadow: 1px 1px 0 white;
}
.footer a {
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 194, 222, 0.4);
}

/* ========== 3.3 BUTTONS ========== */
.rsvp-button {
  font-family: inherit;
  font-size: 1rem;
  padding: 1.1em 1.6em;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  border: 1px solid transparent;
}

/* === 3.3a Primary Buttons === */
.rsvp-button--primary {
  background-color: var(--dark-accent);
  border-color: var(--dark-accent);
  color: white;
  font-weight: 600;
}
.rsvp-button--primary:hover,
.rsvp-button--primary:focus {
  background-color: var(--light-accent);
  border-color: var(--light-accent);
}

/* === 3.3b Secondary Buttons === */
.rsvp-button--secondary {
  background-color: var(--almost-white);
  border-color: #c7d0e3;
  color: #555;
  font-weight: 500;
}
.rsvp-button--secondary:hover,
.rsvp-button--secondary:focus {
  background-color: #f5f5f5;
  border-color: #999;
  color: #333;
}

/* === 3.3c Tertiary Buttons === */
.rsvp-button--tertiary {
  background-color: var(--light-accent);
  border-color: var(--light-accent);
  color: #fff;
  font-weight: 500;
}
.rsvp-button--tertiary:hover,
.rsvp-button--tertiary:focus {
  background-color: #91b7d9;
  border-color: #91b7d9;
  color: #fff;
}

/* === 3.3d Small Buttons === */
.rsvp-button--primary.small,
.rsvp-button--secondary.small,
.rsvp-button--tertiary.small {
  padding: 0.8em 0.8em;
  border-radius: 0;
  margin-left: auto;
  margin-right: 0;
}

/* === 3.3e Button Areas === */
.rsvp-button-area {
  margin-top: 3em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.rsvp-button-area-inline {
  display: inline;
}
.rsvp-button-area-inline button {
  padding: 12px 18px !important;
}

/* ========== 3.4 FORM CONTAINER & STEPS ========== */
.rsvp-form {
  display: block;
  background: rgba(248, 248, 250, 1);
  margin: 1.2em auto;
  max-width: 560px;
  box-sizing: border-box;
  box-shadow: 5px 5px 5px rgba(104, 130, 167,0.2), 15px 15px 30px rgba(120,120,120, 0.2);

}

.form-step {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.form-step.active {
  opacity: 1;
  visibility: visible;
} 

/* ========== 3.5 FORM GROUPS & FIELDS ========== */
.form-group {
  margin-bottom: 1.8em;
}
.form-group span.info {
  font-size: 12px;
}
.form-group-wrapper > .form-group {
  margin-bottom: 0;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-row:not(:last-child) {
  margin-bottom: 1.2em;
}
.form-group-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
  transition: gap 0.3s ease, flex 0.3s ease;
}

/* === 3.5a Text Fields === */
.form__textfield {
  width: 100%;
}
.form-group-wrapper > .form__textfield {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form__textfield input[type="text"],
.form__textfield input[type="email"],
.form__textfield input[type="tel"],
textarea {
  border: none;
  border-radius: 0px;
  border: 2px solid var(--faint-grey);
  padding: 8px 12px;
}
.form__textfield input[type="text"],
.form__textfield input[type="email"],
.form__textfield input[type="tel"] {
  height: 48px;
}


textarea:focus {
  border-color: var(--light-accent);
}
.form__textfield input[type="text"],
.form__textfield input[type="email"],
.form__textfield input[type="tel"],
textarea {
  width: 100%;
  outline: none;
  font-size: 15px;
  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", HelveticaNeue,
    "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.4;
  box-sizing: border-box;
  margin: 0.5em 0 0;
  transition: border-color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

textarea {
  min-height: 106px;
  resize: none;
  color: #555;
  padding: 4px 8px;
}

.form__textfield label, .form__textarea label {
  font-size: 0.8em;
  font-weight: bold;
}

/* ========== 3.6 RADIO BLOCKS ========== */
/* ===== Toggle-style radios ===== */
.rsvp-radio-toggle {
  display: block;
  margin-top: 2em;
}
/* Only the button container should use flex */
.rsvp-radio-toggle .toggle-options {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 0.75em;
}
.centered {
  text-align: center;
}
.centered .toggle-options {
  justify-content: center;
}
.centered .toggle-options label {
  flex: 1;
}

.rsvp-radio-toggle p {
  margin-bottom: 1em;
}



.rsvp-radio-toggle .toggle-options input[type="radio"] {
  display: none;
}

.rsvp-radio-toggle .toggle-options label {
  flex: 1;
  flex-basis: 100%;
  box-sizing: border-box;
  padding: 0.4em 1.4em;
  border: 2px solid var(--faint-grey);
  background-color: white;
  color: var(--dark-neutral);
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.2s ease;
  text-align: center;
  border-radius: 1.4em;
}

.rsvp-radio-toggles__sharp .toggle-options label {
  flex: 1;
  padding: 0.4em;
  border-radius: 2.4em;
}

.rsvp-radio-toggle .toggle-options label:hover {
  border-color: var(--radio-accent);
  background-color: var(--radio-bg);
  color: var(--radio-accent);
}

.rsvp-radio-toggle .toggle-options span {
  margin-left: 0;
  display: inline-block;
  font-size: 1em;
  vertical-align: top;
}

.rsvp-radio-toggle .toggle-options input[type="radio"]:checked + label {
  border-color: var(--radio-accent);
  background-color: var(--radio-bg);
  color: var(--radio-accent);
  font-weight: 400;
}

/* ========== 3.7 INPUT SPINNER ========== */
.input-spinner {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c7d0e3;
  border-radius: 0;
  overflow: hidden;
  max-width: 140px;
  margin-top: 0.6em;
}

.input-spinner input[type="number"] {
  border: none;
  text-align: center;
  width: 50px;
  padding: 0.4em;
  font-size: 1em;
  appearance: textfield;
  background: white;
}

/* Hide default browser arrows */
.input-spinner input::-webkit-outer-spin-button,
.input-spinner input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.input-spinner input[type="number"]::-moz-inner-spin-button {
  appearance: none;
}

.spinner-btn {
  background: var(--faint-grey);
  border: none;
  padding: 0.4em 0.7em;
  font-size: 1.2em;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: background 0.2s;
}

.spinner-btn:hover {
  background: #c7d0e3;
}

/* ========== 3.8 PLUS ONE BLOCK ========== */
.plusone-guest {
  background: transparent;
  padding: 0.6em 0.72em;
}

.plusone-guest summary {
  font-weight: bold;
  color: var(--dark-neutral);
  font-size: 1em;
  cursor: pointer;
  list-style: none;
}

.plusone-guest summary em {
  color: var(--dark-neutral-50);
}

.plusone-guest summary::-webkit-details-marker {
  display: none;
}

.plusone-guest summary button {
  /* Empty placeholder – optional future styles */
}

.plusone-guest summary::after {
  background: #315783;
  padding: 0 1em;
  border-radius: 1px;
  float: right;
  font-size: 0.75em;
  font-weight: 400;
  margin-left: 0.5em;
}

.plusone-guest[open] summary::after {
  content: "\2714 \00a0 Save & Close";
  background: #ffa883;
  color: white;
}

.plusone-guest:not([open]) summary::after {
  content: "\270E \00a0 Edit";
  background: #91b7d9;
  color: white;
}

/* animations -- only in ✅ Chrome (v105+), Edge (v105+), Safari (v15.4+) */
.details-wrapper {
  border: 3px solid #e7ebf3;
  background-color: var(--almost-white);
  padding: 0;
  transition: border-color 0.1s linear, padding 0.1s ease-in,
    background-color 0.2s linear;
}

.details-wrapper:not(:last-child) {
  margin-bottom: 0.4em;
}

.details-wrapper:has(> details[open]) {
  border-color: var(--quirky-accent);
  padding-bottom: 2em;
  background-color: rgb(246, 219, 215, 0.2);
}

/* ========== 3.9 REVIEW / PREVIEW AREA ========== */
.rsvp-review-content-area {
  margin: 0 auto;
}

.review-content-section {
  /* optional layout block */
}

.review-content-section .invitee-info-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: flex-start;
}

.guest-review-card,
.additional-guest-card {
  padding: 0 1em 0.5em;
  border-radius: 1px;
  border: 1px solid var(--border-color);
  background: white;
  box-shadow: 2px 2px 4px #f6f3f3;
}

.guest-choices {
  display: flex;
  flex-direction: column;
  flex: 3;
  margin: 0.75rem 0;
}

.guest-name {
  font-family: "Tenez", "Cormorant", serif;
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}

.pill-group {
  margin: 0.75rem 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.response-yes {
  color: #079b89;
  text-transform: uppercase;
  font-size: 0.8em !important;
  font-weight: 600;
}

.response-no {
  color: #ec5d57;
  text-transform: uppercase;
  font-size: 0.8em !important;
  font-weight: 600;
}

.info-pill.response-yes::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  content: "\f4fc";
  color: #079b89;
  padding-right: 0.5em;
}

.info-pill.response-no::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  content: "\f235";
  color: #ec5d57;
  padding-right: 0.5em;
}

.guest-information p,
.guest-choices p,
.pill-group p {
  margin: 0.25rem 0;
  line-height: 1.4em;
  font-size: 0.95em;
}

.guest-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.5em;
}

.additional-guest-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1em;
  border: 1px solid #ddd;
  border-radius: 1px;
  padding: 0.75em 1em;
  background: #fff;
}

.additional-guest-card .guest-choices {
  flex: 3;
  margin: 0;
}

.additional-guest-card h2 {
  flex: 1;
  margin: 0;
  font-size: 1.3em;
  white-space: wrap;
}

.review-content-section:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  background: #eee;
  margin: 1.5rem 0;
}

/* Icon + Text Rows */
.icon-paragraph {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}

.icon-paragraph i {
  flex-shrink: 0;
  margin-top: 0.1em;
  color: var(--icon-color);
  opacity: 0.8 !important;
}

.icon-paragraph strong {
  white-space: nowrap;
  margin-right: 0.25em;
}

.icon-paragraph span {
  flex: 1;
}

/* ========== 3.9a RSVP MESSAGE PREVIEW ========== */
.message-quote {
  padding: 0.8em 1em;
  width: inherit;
  position: relative;
  text-align: left;
  border-left: 6px solid var(--light-accent);
  border-radius: 1px;
}

.rsvp-message {
  padding: 0.5em 0 0 1em;
}

.rsvp-message::before {
  /* Set the font for this icon style */
  font-family: "Font Awesome 6 Free";
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
  /* Set the Unicode value for the "fa-ghost" icon */
  content: "\f10d";
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  font-size: 1.75em;
  color: var(--light-accent);
  opacity: 0.6;
}

/* ========== 4.1 DIVIDERS ========== */
.question-divider {
  display: block;
  height: 3px;
  border: none;
  background: var(--faint-grey);
  margin: 2.4em 0;
}

a {
  text-decoration: none;
  border-bottom: 1px solid var(--light-accent);
  color: var(--light-accent);
}

/* ========== 4.2 HEADINGS ========== */
.rsvp-heading {
  font-size: 2.8rem;
  color: var(--dark-accent);
  line-height: 1.3;
  margin: 48px 0;
  text-align: center;
}

#passcode-form .rsvp-heading {
  margin-top: 16px;
}

/* ========== 4.3 PARAGRAPHS & NOTES ========== */
.rsvp-intro,
.rsvp-next-note,
.guest-form-intro,
.guest-form-note {
  display: block;
  font-size: 0.95em;
  line-height: 1.5;
  margin-bottom: 1.2em;
}

/* ========== 4.4 CONTACT ROW ========== */
.contact-row {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.contact-row p {
  margin-top: 0;
}

/* ========== 5.1 BASE MOBILE OVERRIDES ========== */
/* really small screens */
/*
Remove background
Reduce padding, and remove border around form area
Reduce line-height across
Max height for input 44px
*/

@media (max-width: 319px) {
  /* #Test: change back to 319 */

  html {
    border-top: 5px solid red !important;
  }
  body {
    background-image: none;
    background-color: var(--bg-form);
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 16px;
  }
  /* Hide scrollbar for Chrome, Safari and Opera */
  .example::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .rsvp-form,
  #site-header,
  .footer {
    display: block;
  }
  #site-header {
    /* fix at top above every thing */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: var(--bg);
    box-shadow: 0 4px 10px rgba(120, 120, 120, 0.4);
    height: var(--offset-top-small-screen); /* logo + padding and margins */
  }
  #site-header #navigate-out,
  #site-header .btn-reset-form,
  #toast-bar {
    display: none;
  }
  .header,
  .header .logo a {
    margin-top: 0;
    padding: 0;
  }
  .header .logo {
    margin: 12px auto 4px;
    width: 60px;
    height: 60px;
  }
  .header .logo img {
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
  }
  #mobile-warning {
    display: none;
    padding: 2em;
    text-align: center;
    font-size: 1rem;
    color: #856404;
    background: #fff8e1;
  }

  /* FORM ADJUSTMENTS */
  #rsvp-form-wrapper {
    padding: 0;
    margin-top: var(--offset-top-small-screen);
  }
  .rsvp-form {
    padding: 0.75em;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 100vh;
  }
  .rsvp-heading {
    font-size: 2em;
    margin: 0.5em auto 1em;
  }
  .form-step {
    padding: 0.5em;
  }
  .form-group-wrapper {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin: 0;
  }
  .form-group {
    padding: 0;
    flex-direction: column;
  }
  .form__textfield {
    padding: 0;
    margin: 0;
    flex: 1;
  }
  .rsvp-button-area-inline,
  .rsvp-button-area {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 0;
    flex-basis: 50%;
    gap: 0.5em;
  }
  
  .rsvp-button .rsvp-button--primary {
    align-self: flex-end;
    width: 100%;
    flex-basis: 50%;
  }
  .rsvp-button-area button[type="button"] {
    order: 2;
  }
  .rsvp-button-area button[type="submit"] {
    order: 1;
  }
 
  
  .progress-steps div {
    margin: 0 auto;
    text-align: center;
  }
  .progress-steps i {
    opacity: 1;
  }
  .progress-steps span {
    display: none;
  }

  .rsvp-radio-toggles .toggle-options,
  .rsvp-radio-toggles__sharp .toggle-options {
    flex-direction: column;

  }
  .toggle-options label {
    flex: 1;
    flex-basis: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  .review-content-section {
    margin: 0;
  }
  .review-content-section:not(:last-child)::after {
    content: "";
    display: block;
    height: 1px;
    background: #eee;
    margin: 0.75rem 0;
  }
  .review-content-section h4 {
    margin: 0;
    margin-bottom: 0.5em;
    font-size: 0.85em;
  }
  .guest-card-list {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .guest-review-card, .additional-guest-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 50%;
    padding: 0.75em;
    gap: 0.25em;
    border-radius: 1px;
  }
  .guest-review-card .invitee-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
   
  }
  .guest-review-card .invitee-info-wrapper>* {
    margin: 0;
    gap: 0;
  }
  .guest-review-card strong {
    margin-right: 4px;
  }
  .guest-review-card h2, .guest-name {
    margin: 0;
    padding: 0;
    font-size: 1.3em !important;
    letter-spacing: 0;
  }
  .guest-review-card p, .guest-review-card i,
  .additional-guest-card p, .additional-guest-card i {
    margin: 0;
    padding: 0;
    line-height: 1.4em;
    font-size: 0.9em;
    min-width: 20px;
  }
  .guest-review-card i,
  .additional-guest-card i {
    font-size: 0.95em;
  }
  .guest-review-card .response-yes::before, 
  .guest-review-card .reponse-no::before {
    margin-right: 0.5em;
  }
  
  .additional-guest-card>* {
    box-sizing: border-box;
    width: 100%;
    flex: 1;
  }
  
  .message-quote {
    border-left-width: 2px;
    padding: 0.5em;
  }
  .rsvp-message {
    padding: 0.5em 0 0 0.5em;
    font-size: 0.9em;
    line-height: 1.4em;
    font-style: italic;
  }
  .rsvp-message::before {
    font-size: 1em;
  }
  .guest-information p, .guest-information i {
    font-size: 0.9em !important;
    line-height: 1.3em;
  }
}

/* ========== 5.2 MOBILE LAYOUT ADJUSTMENTS ========== */
/* small to average screens */
@media (min-width: 320px) and (max-width: 639px) {
  /* add more breathing room */
  html {
    border-top: 5px solid blue !important;
  }
  body {
    font-size: 18px !important;
  }
  #site-header #navigate-out,
  #site-header .btn-reset-form,
  #toast-bar {
    display: none;
  }
  .header .logo {
    padding: 0;
  }
  .header .logo a {
    margin-top: 0;
  }
  .header .logo img {
    margin-top:0;
    width: 84px;
    height: 84px;
  }
  
  .rsvp-heading {
    font-size: 2.4em;
  }
 
  .form-step {
  }
  .rsvp-form {
    padding: 2em;
    border-radius: 1px;
  }
  .progress-steps .step {
    text-wrap: nowrap;
  }
  .progress-steps .step i {
    opacity: 1;
    margin-right: 2px;
    
  }
  .progress-steps .step span {
    text-wrap: nowrap;
  }
  
  .form-group-wrapper {
    flex-direction: column;
  }
 
  .rsvp-radio-toggle .toggle-options, 
  .rsvp-radio-toggles__sharp .toggle-options {
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
  }
  .rsvp-radio-toggle .toggle-options label,
  .rsvp-radio-toggles__sharp .toggle-options label{
    width: auto;
    box-sizing: border-box;
    padding: 0.75em;
    border-radius: 2em;
    flex: 1;
    flex-basis: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .rsvp-radio-toggle .toggle-options label span,
  .rsvp-radio-toggles__sharp .toggle-options label span {
    display: none;
  }
  

  input[type="text"], input[type="email"], input[type="tel"], textarea,
  .rsvp-button.rsvp-button--primary,
  .rsvp-button.rsvp-button--secondary,
  .rsvp-button.rsvp-button--tertiary {
    max-height: 
  }
  .rsvp-button-area, .rsvp-button-area-inline {
    flex-direction: column;
    width: 100%;
    gap: 1em;
  }
  .rsvp-button.rsvp-button--primary,
  .rsvp-button.rsvp-button--secondary,
  .rsvp-button.rsvp-button--tertiary {
    width: 100%;
  }

  .guest-review-card .invitee-info-wrapper  {
    display: flex;
    flex-direction: row;
    gap: 1em;
    padding: 0;
  }
  .guest-review-card, .additional-guest-card {
  padding: 1em;
}
  .guest-review-card i, .additional-guest-card i {
    width: 20px;
  }
  .guest-review-card h2 {
  padding: 0;
  margin: 0 0 0.25em;
}
  .pill-group, .guest-choices {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .pill-group, .additional-guest-card h2 {
  flex: 1;
}
  .guest-choices, .additional-guest-card .guest-choices {
    padding-left: 1em;
    border-left: 2px solid var(--faint-grey);
    flex: 2;
  }
  .guest-choices p strong {
    display: none;
  }
  .guest-choices p:nth-child(4) span { 
    font-style: italic; 
  }
  
}

/* ========== 5.3 TABLET TO DESKTOP RANGES ========== */
/* ideal screens, double col layout */
@media (min-width: 640px) {
  html {
  }
  .header .logo {
    padding: 0;
  }
  .header .logo a {
    margin-top: 0;
  }
  .header .logo img {
    margin-top:0;
    width: 120px;
    height: 120px;
  }
  .rsvp-form {
    box-sizing: content-box;
    border-radius: 1px;
    padding: 3.6em;
  }
  #site-header #navigate-out,
  #site-header .btn-reset-form,
  #toast-bar {
    display: none;
  }
/* ========== 3.3 BUTTONS ========== */
.rsvp-button {
  font-family: inherit;
  font-size: 1rem !important;
  padding: 1.1em 1.6em !important;
  border-radius: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
}
  input[type="text"], input[type="email"], input[type="tel"], textarea,
  .rsvp-button.rsvp-button--primary,
  .rsvp-button.rsvp-button--secondary,
  .rsvp-button.rsvp-button--tertiary {
    padding: 0.75em 1em !important;
    font-size: 1em !important;
    flex-basis: auto;
    
  }
  input[type="text"], input[type="email"], input[type="tel"]
  {
    max-height: 48px;
  }
  .rsvp-radio-toggle.toggle-options {
    display: flex;
    flex-direction: row;
  }
  .rsvp-radio-toggle .toggle-options label {
    flex-basis: auto;
  }

  .rsvp-radio-toggles__sharp .toggle-options label {
    flex: 1;
    padding: 0.4em;
    border-radius: 2.4em;
  }
  .progress-steps .step i {
    opacity: 1;
    margin-right: 4px;
  }
}

/* ========== 6.1 EMPTY STATE STYLES ========== */
.progress-steps {
  --block: 4px;
  display: flex;
  justify-content: space-evenly;
  gap: 0px 8px;
  margin-top: 0;
  align-items: stretch;
}
.step {
  display: block;
  box-sizing: border-box;
  flex: 1;
  color: #dce0e2;
  font-weight: bold;
  font-size: 12px;
  transition: background-color 0.3s ease;
}
.step:before {
  display: block !important;
  content: "";
  height: 6px;
  border-radius: 1px;
  margin-bottom: 2px;
  background-color: #dce0e2;
}
.step.active {
  color: var(--quirky-accent);
}
.step.active:before {
  content: "";
  background-color: var(--quirky-accent);
}
.step.completed {
  color: var(--light-accent);
}
.step.completed:before {
  background-color: var(--light-accent);
  opacity: 0.6;
}

/* ========== 6.2 FANCY BORDERS ========== */
.most-fancy-border {
  --s: 16px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid var(--light-accent);
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #f000 25%, #0003 0);
}

.scallop {
  border: var(--corner) solid;
  border-image-source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="hsla(255, 100%, 100%, 1)"><path d="M2 0H1C1 .6.6 1 0 1v1c.6 0 1 .4 1 1h1c0-.6.4-1 1-1V1a1 1 0 0 1-1-1Z"/></svg>');
  border-image-slice: 1 fill;
}

.cloud {
  border: var(--corner) solid;
  border-image-source: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" fill="hsl(0, 0%, 100%)"><path d="M1 2c-.552285 0-1 .44772-1 1s.447715 1 1 1c.55228 0 1-.44772 1-1 0 .55228.44772 1 1 1s1-.44772 1-1-.44772-1-1-1c.55228 0 1-.44772 1-1 0-.552285-.44772-1-1-1S2 .447715 2 1c0-.552285-.44772-1-1-1-.552285 0-1 .447715-1 1 0 .55228.447715 1 1 1Z"/></svg>');
  border-image-slice: 1 fill;
  border-image-repeat: round;
  box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.06);
}