/* ===========================
   FONT-FACES
   =========================== */

@font-face {
  font-family: "Inria Serif";
  src: url("./fonts/InriaSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inria Serif";
  src: url("./fonts/InriaSerif-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Luxurious Script";
  src: url("./fonts/LuxuriousScript-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   BASE LAYOUT
   =========================== */

.design {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* ===========================
   HERO SECTION
   =========================== */

.design .hero{
  position: relative;
  width: 100%;
  background-color: #bd4c2c;
  overflow: hidden;

  /* grow with content */
  height: auto;
  min-height: 762px;              /* keeps nice tall hero on big screens */
  padding: 80px 20px 260px;       /* bottom space so base image doesn't overlap text */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

/* Bottom base image (decor) */
.design .image{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1437px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* Center rectangle photo (IN FLOW, not absolute) */
.design .rectangle{
  position: relative;             /* was absolute */
  left: auto;
  bottom: auto;
  transform: none;

  width: clamp(280px, 55vw, 520px);
  height: auto;
  display: block;
  z-index: 1;

  /* mat */
  padding: 6px;
  background-color: #bc6b4d;

  object-fit: contain;
}

/* Hero headline block */
.design .hero-header{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 900px;
  text-align: center;
}

/* Stack name / & / name vertically */
.design .frame{
  display: flex;
  flex-direction: column;         /* was row */
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* if you use this somewhere */
.design .text-wrapper{
  position: relative;
  width: 100%;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 50px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: normal;
}

/* Names */
.design .text-wrapper-29{
  position: relative;
  width: 100%;                    /* was fit-content */
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 60px;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: normal;            /* allow wrapping */
  overflow-wrap: anywhere;
}

.design .div {
  position: relative;
  align-self: stretch;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.design .p {
  position: relative;
  align-self: stretch;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 130px;
  text-align: center;
  letter-spacing: 0;
  line-height: 100px;
}

/* Header nav (if used) */
.design .header {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  align-items: center;
  position: absolute;
  top: 20px;
  left: 20px;
}

.design .list-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 40px;
}

.design .list {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
}

/* ===========================
   INVITE MESSAGE BLOCK
   =========================== */

.design .hero-header-wrapper {
  display: flex;
  padding: 50px 20px;
  align-self: stretch;
  width: 100%;
  background-color: #fbf4ea;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.design .we-would-be-honoured {
  position: relative;
  width: 646px;
  max-width: 100%;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 42px;
}

.design .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  /* color: #5f2412; */
  color: #bd4c2c;
  font-size: 130px;
  text-align: center;
  letter-spacing: 0;
  line-height: 100px;
  white-space: nowrap;
}

/* ===========================
   “THE WEDDING” SECTION 1
   =========================== */

.design .the-wedding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 60px 29px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-image: url(https://c.animaapp.com/OuVi8PDS/img/the-wedding.png);
  background-size: cover;
  background-position: 50% 50%;
}

.design .title {
  display: flex;
  gap: 20px;
  align-self: stretch;
  width: 100%;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.design .title-2 {
  display: flex;
  background-color: #fbf4ea;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .title-4 {
  display: flex;
  background-color: #bd4c2c;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 42px;
  white-space: nowrap;
}

.design .text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 130px;
  text-align: center;
  letter-spacing: 0;
  line-height: 100px;
  white-space: nowrap;
}

.design .frame-2 {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.design .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 64px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.design .text-wrapper-6 {
  position: relative;
  align-self: stretch;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28.5px;
}

/* ===========================
   “THE WEDDING” SECTION 2
   =========================== */

.design .the-wedding-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 60px 29px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #fbf4ea;
}

.design .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 42px;
  white-space: nowrap;
}

.design .frame-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .frame-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .frame-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.design .text-wrapper-8 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.design .element-WIB {
  position: relative;
  align-self: stretch;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 24px;
}

/* ===========================
   MAP BLOCK
   =========================== */

.design .maps-full-map {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4 / 3;
  background-color: #ffffff;
  overflow: hidden;
}

.design .maps-full-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The rest is mostly decorative placeholder map artwork */
.design .maps-zoom-levels {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.design .map-of-birmingham {
  height: 243px;
  width: 500px;
  object-fit: cover;
}

.design .controls-google-maps {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 287px;
  height: 15px;
}

.design .rectangle-2 {
  position: absolute;
  width: 42.16%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f4f4f4cc;
}

.design .text-wrapper-9 {
  position: absolute;
  width: 37.98%;
  height: 80%;
  top: 20%;
  left: 0;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000cc;
  font-size: 10px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.design .rectangle-3 {
  position: absolute;
  width: 24.39%;
  height: 100%;
  top: 0;
  left: 42.51%;
  background-color: #f4f4f4cc;
}

.design .text-wrapper-10 {
  position: absolute;
  width: 20.91%;
  height: 80%;
  top: 20%;
  left: 44.25%;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000cc;
  font-size: 10px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.design .rectangle-4 {
  position: absolute;
  width: 32.75%;
  height: 100%;
  top: 0;
  left: 67.25%;
  background-color: #f4f4f4cc;
}

.design .text-wrapper-11 {
  position: absolute;
  width: 30.66%;
  height: 80%;
  top: 20%;
  left: 68.99%;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000cc;
  font-size: 10px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.design .controls-google-logo {
  position: absolute;
  left: 5px;
  bottom: 0;
  width: 66px;
  height: 26px;
  display: flex;
}

.design .google-logo {
  margin-top: 0.3px;
  width: 67.6px;
  height: 25.67px;
  margin-left: -1px;
}

.design .controls {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 89px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.design .controls-zoom {
  width: 28px;
  height: 53px;
  position: relative;
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 1px 3px #00000033;
}

.design .union {
  position: absolute;
  width: 35.71%;
  height: 18.87%;
  top: 15.09%;
  left: 32.14%;
}

.design .img {
  position: absolute;
  width: 35.71%;
  height: 3.77%;
  top: 73.58%;
  left: 32.14%;
}

.design .rectangle-5 {
  position: absolute;
  width: 71.43%;
  height: 0;
  top: 49.06%;
  left: 14.29%;
  background-color: #e6e6e6;
}

.design .controls-street-view {
  width: 28px;
  height: 28px;
  position: relative;
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 1px 3px #00000033;
}

.design .pegman-offscreen {
  position: absolute;
  width: 42.86%;
  height: 71.43%;
  top: 14.29%;
  left: 28.57%;
  object-fit: cover;
}

.design .controls-map-type {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 94px;
  height: 29px;
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 1px 3px #00000033;
}

.design .text-wrapper-12 {
  position: absolute;
  width: 44.68%;
  height: 48.28%;
  top: 27.59%;
  left: 47.87%;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #565656;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.design .line {
  position: absolute;
  width: 30.85%;
  height: 0;
  top: 0;
  left: 40.43%;
  object-fit: cover;
}

.design .text-wrapper-13 {
  position: absolute;
  width: 23.40%;
  height: 48.28%;
  top: 27.59%;
  left: 8.51%;
  font-family: "Inria Serif", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* ===========================
   SECTION HEADERS, MISC
   =========================== */

.design .text-wrapper-14 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #5f2412;
  font-size: 50px;
  text-align: center;
  letter-spacing: 2.5px;
  line-height: 40px;
}

.design .text-wrapper-15 {
  position: relative;
  align-self: stretch;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
}

.design .frame-7 {
  display: flex;
  max-width: 500px;
  height: 50px;
  width: 100%;
  background-color: #5f2412;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.design .text-wrapper-16 {
  position: relative;
  width: fit-content;
  text-shadow: 0px 4px 4px #00000040;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.design .img-2 {
  position: relative;
  width: 22px;
  height: 22px;
}

/* ===========================
   COUNTDOWN SECTION
   =========================== */

.design .countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 50px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #bd4c2c;
}

.design .frame-8 {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  position: relative;
  flex: 0 0 auto;
}

.design .frame-9 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
}

.design .text-wrapper-17 {
  position: relative;
  width: fit-content;
  font-family: "Inria Serif", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 50px;
  text-align: center;
  letter-spacing: 0;
  line-height: 60px;
  white-space: nowrap;
}

.design .text-wrapper-18 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 80px;
  text-align: center;
  letter-spacing: 0;
  line-height: 100px;
  white-space: nowrap;
}

.design .saturday-november {
  position: relative;
  align-self: stretch;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 43px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* ===========================
   RSVP SECTION (LAYOUT + DYNAMIC FORM HOST)
   =========================== */

.design .rsvp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 20px 60px;
  background-color: #fbf4ea;
  overflow: hidden;          /* keep side images from causing scroll */

  /* make RSVP stretch full width of the layout */
  align-self: stretch;
  width: 100%;
}

.design .title-2 {
  display: flex;
  background-color: #fbf4ea;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 42px;
  white-space: nowrap;
}

.design .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #bd4c2c;
  font-size: 130px;
  text-align: center;
  letter-spacing: 0;
  line-height: 100px;
  white-space: nowrap;
}

.design .please-confirm-your {
  position: relative;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  background-color: #fbf4ea;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
  max-width: 600px;
}

/* Host form container that rsvp.js will inject into */
.design .form {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  align-items: center;
  gap: 20px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

/* Need help block */
.design .need-help {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.design .text-wrapper-21 {
  position: relative;
  width: 320px;
  max-width: 100%;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
}

/* Side images left & right of RSVP card */
.design .image-2,
.design .image-3 {
  position: absolute;
  top: 0;
  width: 480px;
  height: auto;
  aspect-ratio: 0.35;
  z-index: 0;
  pointer-events: none;
}

.design .image-2 {
  left: 0;
}

.design .image-3 {
  right: 0;
}

/* “Contact Helpdesk” small button style reused */
.design .frame-11 {
  display: flex;
  height: 50px;
  align-self: stretch;
  width: 100%;
  max-width: 600px;
  background-color: #5f2412;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.design .text-wrapper-20 {
  font-weight: 400;
  color: #ffffff;
  font-size: 18px;
  line-height: 21.6px;
  position: relative;
  width: fit-content;
  font-family: "Inria Serif", Helvetica;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ===========================
   OTHER RSVP-RELATED UTILITY STYLES (FROM ORIGINAL)
   =========================== */

.design .input-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .input {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
  background: transparent;
  border: none;
  padding: 0;
}

.design .field {
  height: 50px;
  padding: 15px 0;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #fbf4ea;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #000000;
  border: none;
  margin-top: -0.5px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
}

.design .text-wrapper-19 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
}

.design .element-col {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .div-wrapper {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #d2d2d2;
}

.design .frame-10 {
  display: flex;
  height: 50px;
  flex: 1;
  flex-grow: 1;
  background-color: #5f2412;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.design .field-2 {
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  align-self: stretch;
  background-color: #fbf4ea;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #00000066;
  display: flex;
  gap: 10px;
  position: relative;
  width: 100%;
}

.design .choose-amount {
  position: relative;
  width: fit-content;
  margin-top: -0.5px;
  opacity: 0.5;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
  white-space: nowrap;
}

.design .caret-down {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  margin-bottom: -1px;
}

/* ===========================
   DRESS CODE SECTION
   =========================== */

.design .space {
  position: relative;
  width: 100px;
  height: 29px;
}

.design .dress-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  padding: 30px 20px 70px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #fbf4ea;
}

.design .to-support-our {
  position: relative;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28.5px;
}

.design .formal-attire-info {
  display: flex;
  flex-direction: column;
  width: 350px;
  max-width: 100%;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.design .frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.design .text-wrapper-22 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 700;
  color: #5f2412;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 24px;
}

.design .dress-code-2 {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.design .eclipse {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #5f2412;
  border-radius: 25px;
  aspect-ratio: 1;
}
.design .eclipse-1 {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #5f6832;
  border-radius: 25px;
  aspect-ratio: 1;
}
.design .eclipse-2 {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #803d45;
  border-radius: 25px;
  aspect-ratio: 1;
}
.design .eclipse-3 {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #d5da9c;
  border-radius: 25px;
  aspect-ratio: 1;
}
.design .eclipse-4 {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #c07c85;
  border-radius: 25px;
  aspect-ratio: 1;
}
.design .eclipse-5 {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #ebeade;
  border-radius: 25px;
  aspect-ratio: 1;
}

/* ===========================
   MERGE BLOCK / PERSONAL MESSAGE SECTIONS
   =========================== */

.design .merge {
  position: relative;
  width: 100%;
  background-color: #bd4c2c;
}

.design .personal-message {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 18px;
  padding: 70px 20px;
  position: relative;
}

.design .text-wrapper-23 {
  position: relative;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #020202;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
}

.design .enter-your-name-here {
  height: 50px;
  padding: 15px 10px;
  align-self: stretch;
  border: 1px solid;
  border-color: #5f2412;
  position: relative;
  width: 100%;
  background: none;
  margin-top: -0.5px;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
  white-space: nowrap;
}

.design .write-your-wish-here-wrapper {
  height: 200px;
  align-items: flex-start;
  padding: 15px 10px;
  align-self: stretch;
  background-color: #fbf4ea;
  border: 1px solid;
  border-color: #5f2412;
  display: flex;
  gap: 10px;
  position: relative;
  width: 100%;
}

.design .write-your-wish-here {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  opacity: 0.5;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #3c3c3c;
  font-size: 19px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19px;
  white-space: nowrap;
}

.design .frame-13 {
  display: flex;
  height: 50px;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.design .text-wrapper-24 {
  color: #5f2412;
  position: relative;
  width: fit-content;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.copy-btn{
  height: 50px;
  width: 174px;
  background-color: #ffffff;     /* so #5f2412 text is visible */
  border: 1px solid #5f2412;
  border-radius: 8px;
  cursor: pointer;
}

.copy-btn-text{
  color: #5f2412;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  font-size: 18px;
}

.design .list-of-messages {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  height: 299px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  width: 100%;
}

.design .message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff33;
}

.design .text-wrapper-25 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: #ffffff;
  font-size: 20px;
  line-height: 20px;
  white-space: nowrap;
  position: relative;
  font-family: "Inria Serif", Helvetica;
  text-align: center;
  letter-spacing: 0;
}

.design .text-wrapper-26 {
  position: relative;
  align-self: stretch;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18.2px;
}

.design .bar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 98px;
  background-color: #ffffff;
}

.design .personal-message-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 18px;
  padding: 70px 20px;
  position: relative;
}

.design .image-4 {
  position: relative;
  width: 400px;
  height: 400px;
  aspect-ratio: 1;
  object-fit: cover;
}

.design .frame-14 {
  display: flex;
  width: 174px;
  height: 50px;
  background-color: #5f2412;
  border: 1px solid;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.design .message-wedding-gift {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  align-items: center;
  gap: 18px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.design .write-your-message-wrapper {
  max-width: 600px;
  height: 100px;
  align-items: flex-start;
  padding: 15px 10px;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #e9e9e9;
  display: flex;
  gap: 10px;
  position: relative;
  width: 100%;
}

.design .write-your-message {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  opacity: 0.5;
  font-family: "Inria Serif", Helvetica;
  font-weight: 400;
  color: #3c3c3c;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.design .frame-15 {
  display: inline-flex;
  height: 40px;
  background-color: #ffffff;
  border: 1px solid;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.design .text-wrapper-27 {
  font-weight: 700;
  color: #5f2412;
  font-size: 12px;
  line-height: 14.4px;
  position: relative;
  width: fit-content;
  font-family: "Inria Serif", Helvetica;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

.design .image-5 {
  position: absolute;
  top: 0;
  left: 0;        /* lock to left */
  right: auto;
  width: 528px;
  height: 2012px;
  aspect-ratio: 0.35;
}

/* Right side image */
.design .image-6 {
  position: absolute;
  top: 0;
  right: 0;       /* lock to right */
  left: auto;
  width: 502px;
  height: 2012px;
  aspect-ratio: 0.36;
}

/* ===========================
   THANK YOU SECTION
   =========================== */

.design .thank-you{
  display: flex;
  flex-direction: column;
  height: 650px;
  width: 100%;
  align-self: stretch;
  position: relative;

  align-items: center;
  justify-content: flex-start;

  padding: 195px 29px 57px;  /* 30% of 650px */
  gap: 50px;

  background-image: url(./assets/footer.jpg);
  background-size: cover;
  background-position: 50% 30%;
}

.design .title-3 {
  display: inline-flex;
  gap: 23px;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.design .text-wrapper-28 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Luxurious Script", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 240px;
  text-align: center;
  letter-spacing: 12px;
  line-height: 100px;
}

.seg05 {
  padding: 0 0px;        /* match .the-wedding padding: 60px 29px; */
  align-self: stretch;
  width: 100%;
}

/* Let it fill the section; no extra max-width */
.seg05 .slider-container.gallery {
  width: 100%;
  max-width: 100%;        /* or simply remove this line */
  margin: 0;              /* centering not needed when width: 100% */
}

/* Swiper basics */
.seg05 .swiper.main-gallery-swiper {
  width: 100%;
}

/* Slides: full width, 3/4 viewport height, centered */
.seg05 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fbf4ea;

  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: 100vh;        /* ~3/4 screen */
  max-height: 100vh;
}

/* Inner content fills slide and crops overflow */
.seg05 .swiper-slide .content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Image fills content box */
.seg05 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
@media (min-width: 1025px){
  .seg05 .swiper-slide img{
    object-position: 50% 30%; /* x=50% (center), y=75% */
  }
}

/* ===========================
   TABLET STYLES (≤ 1024px)
   =========================== */

@media (max-width: 1024px) {
  .design {
    align-items: center;
  }

  .design .hero {
    overflow: hidden;
    padding: 60px 24px 220px;
  }

  .design .image {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;          /* between desktop 100% and mobile 100% but cropped */
    max-width: none;
    height: auto;
    z-index: 0;
  }

  .design .text-wrapper {
    font-size: 42px;      /* desktop 50, mobile 26 */
  }

  .design .div {
    font-size: 19px;      /* mid between 20 and 16 */
  }

  .design .p {
    font-size: 90px;      /* desktop 130, mobile 40 */
    line-height: 1.05;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .design .rectangle {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 55vw;          /* between desktop fixed and mobile 60–80vw */
    max-width: 460px;
    height: auto;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }

  .design .hero-header {
    align-items: center;
    text-align: center;
    z-index: 2;
  }

  .design .text-wrapper-2,
  .design .text-wrapper-4 {
    font-size: 110px;     /* desktop 130, mobile 52 */
    line-height: 1.05;
  }

  .design .text-wrapper-3,
  .design .text-wrapper-7 {
    font-size: 28px;      /* between 30 and 20 */
    line-height: 38px;
  }

  .design .text-wrapper-5 {
    font-size: 54px;
  }

  .design .text-wrapper-6,
  .design .to-support-our,
  .design .please-confirm-your {
    font-size: 18px;
    line-height: 1.5;
  }

  .design .text-wrapper-8 {
    font-size: 34px;
  }

  .design .element-WIB {
    font-size: 21px;
  }

  .design .saturday-november {
    font-size: 36px;
  }

  .design .text-wrapper-28 {
    font-size: 180px;
    line-height: 1.05;
    letter-spacing: 9px;
  }

  .design .frame-2 {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
  }

  .design .frame-3 {
    flex: 0 0 auto;
    max-width: 50%;
    text-align: center;
  }

  .design .frame-8 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    flex-wrap: nowrap;
  }

  .design .frame-9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
  }

  .design .text-wrapper-17 {
    font-size: 44px;
    line-height: 1.2;
  }

  .design .text-wrapper-18 {
    font-size: 34px;
    line-height: 1.2;
  }

  .design .dress-code-2 {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .design .eclipse {
    width: 36px;
    height: 36px;
  }

  .design .frame-5,
  .design .element-col {
    flex-direction: column;
    align-items: center;
  }

  .design .maps-full-map {
    width: 100%;
    max-width: 100%;
  }

  .design .map-of-birmingham {
    width: 100%;
    height: auto;
  }

  .design .merge,
  .design .personal-message,
  .design .personal-message-2 {
    width: 100%;
  }

  /* === RSVP tablet behaviour: intermediate between desktop and mobile === */

  .design .rsvp {
    position: relative;
    padding-top: 110px;         /* desktop ~40, mobile 140 */
    padding-bottom: 70px;
    overflow: hidden;
  }

  .design .rsvp .title-2 {
    margin-top: 10px;
  }

  /* Side flowers around RSVP – slightly shrunk and nudged, but less than mobile */
  .design .image-2,
  .design .image-3 {
    display: block;
    top: -50px;
    width: 420px;
    height: auto;
    transform: scale(0.85);     /* tablet smaller than desktop, larger than mobile 0.7 */
    clip-path: inset(0 0 12% 0);
  }

  .design .image-2 {
    left: -80px;
    right: auto;
    transform-origin: top left;
  }

  .design .image-3 {
    right: -80px;
    left: auto;
    transform-origin: top right;
  }

  /* === Merge section tablet behaviour === */

  .design .merge {
    position: relative;
    padding-top: 120px;         /* between desktop and mobile 140 */
    overflow: hidden;
  }

  .design .image-5,
  .design .image-6 {
    width: 520px;
    height: auto;
    top: -40px;
    transform: scale(0.85);
    clip-path: inset(0 0 35% 0); /* crop some bottom, but less than mobile 50% */
  }

  .design .image-5 {
    left: -80px;
    right: auto;
    transform-origin: top left;
  }

  .design .image-6 {
    right: -80px;
    left: auto;
    transform-origin: top right;
  }
}

/* ===========================
   MOBILE STYLES (≤ 600px)
   =========================== */

@media (max-width: 600px) {
  .design {
    align-items: center;
  }

  .design .hero {
    height: auto;
    padding: 40px 16px 160px;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
  }

  .design .image {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    max-width: 580px;
    height: auto;
    z-index: 0;
  }

  .design .text-wrapper {
    font-size: 26px;
  }

  .design .div {
    font-size: 16px;
  }

  .design .p {
    font-size: 40px;
    line-height: 1.1;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .design .rectangle {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 80vw;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }

  .design .hero-header {
    align-items: center;
    text-align: center;
    z-index: 2;
  }

  .design .text-wrapper-2,
  .design .text-wrapper-4 {
    font-size: 52px;
    line-height: 1.1;
  }

  .design .text-wrapper-3,
  .design .text-wrapper-7 {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }

  .design .we-would-be-honoured {
    width: 100%;
    font-size: 20px;
    line-height: 30px;
    padding: 0 8px;
  }

  .design .text-wrapper-5 {
    font-size: 28px;
  }

  .design .text-wrapper-6,
  .design .to-support-our,
  .design .please-confirm-your,
  .design .text-wrapper-21,
  .design .text-wrapper-19 {
    font-size: 15px;
    line-height: 1.5;
  }

  .design .text-wrapper-8 {
    font-size: 26px;
  }

  .design .element-WIB {
    font-size: 18px;
    line-height: 22px;
  }

  .design .text-wrapper-14 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 1.5px;
  }

  .design .text-wrapper-15 {
    font-size: 14px;
    line-height: 18px;
  }

  .design .text-wrapper-17 {
    font-size: 26px;
    line-height: 1.2;
  }

  .design .text-wrapper-18 {
    font-size: 42px;
    line-height: 1.2;
  }

  .design .saturday-november {
    font-size: 22px;
  }

  .design .text-wrapper-23,
  .design .enter-your-name-here,
  .design .write-your-wish-here {
    font-size: 16px;
  }

  .design .text-wrapper-25 {
    font-size: 18px;
  }

  .design .text-wrapper-26 {
    font-size: 13px;
  }

  .design .text-wrapper-28 {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: 4px;
  }

  .design .frame-2 {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
  }

  .design .frame-3 {
    flex: 0 0 auto;
    max-width: 50%;
    text-align: center;
  }

  .design .frame-8 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .design .frame-9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 10px;
  }

  .design .text-wrapper-17 {
    font-size: 26px;
    line-height: 1.2;
  }

  .design .text-wrapper-18 {
    font-size: 14px;
    line-height: 1.2;
  }

  .design .frame-5,
  .design .element-col {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .design .frame-7,
  .design .frame-10,
  .design .frame-11,
  .design .frame-13,
  .design .frame-14,
  .design .frame-15 {
    width: 100%;
    max-width: 100%;
  }

  .design .rsvp {
    position: relative;
    padding-top: 140px;      /* was 40px – adjust as needed */
    overflow: hidden;        /* keep images from causing scroll */
  }

  /* Make sure the RSVP header starts a bit lower */
  .design .rsvp .title-2 {
    margin-top: 12px;
  }

  /* Left flower (image-2): scale to 70% and nudge left */
  .design .image-2 {
    display: block;          /* override any display:none */
    top: -40px;
    left: -100px;            /* shift further left */
    right: auto;
    width: 480px;
    height: auto;
    transform: scale(0.7);   /* -30% size */
    transform-origin: top left;
    clip-path: inset(0 0 20% 0);
  }

  /* Right flower (image-3): scale to 70% and nudge right */
  .design .image-3 {
    display: block;          /* override any display:none */
    top: -40px;
    right: -100px;           /* shift further right */
    left: auto;
    width: 480px;
    height: auto;
    transform: scale(0.7);   /* -30% size */
    transform-origin: top right;
    clip-path: inset(0 0 7% 0);
  }

  /* Hide big side/background images on mobile */
  /* .design .image-2,
  .design .image-3 {
    display: none;
  } */

  .design .image-5 {
    top: 0 px;           /* adjust vertical overlap as you like */
    left: -80px;         /* move more off-screen to the left */
    right: auto;
    width: 528px;
    height: auto;
    transform: scale(0.7);          /* -30% */
    transform-origin: top left;     /* scale from top-left corner */
    clip-path: inset(0 0 50% 0);
  }

  /* Shift the right flower further right */
  .design .image-6 {
    top: 0 px;
    right: -80px;        /* move more off-screen to the right */
    left: auto;
    width: 502px;
    height: auto;
    transform: scale(0.7);          /* -30% */
    transform-origin: top right;    /* scale from top-right corner */
    clip-path: inset(0 0 50% 0);
  }


  .design .picture {
    height: auto;
  }

  .design .image-4 {
    width: 260px;
    height: 260px;
  }

  .design .merge {
    position: relative;
    padding-top: 140px;   /* push Personal Message + form down */
    overflow: hidden;     /* keep images from causing horizontal scroll */
  }

  .design .personal-message,
  .design .personal-message-2 {
    width: 100%;
  }

  .design .maps-full-map {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .design .map-of-birmingham {
    width: 100%;
    height: auto;
  }

  .design .form,
  .design .list-of-messages,
  .design .message-wedding-gift {
    width: 100%;
    max-width: 100%;
  }

  .design .enter-your-name-here,
  .design .write-your-wish-here-wrapper,
  .design .write-your-message-wrapper {
    font-size: 16px;
  }

  .design .dress-code {
    padding: 30px 16px 60px;
  }

  .design .formal-attire-info {
    width: 100%;
  }
}

/* =========================
   DYNAMIC RSVP FORM (rsvp.js)
   ========================= */

/* Apply font + box-sizing within dynamic block */
#dynamic-rsvp-root,
#dynamic-rsvp-root * {
  font-family: "Inria Serif", Helvetica, serif;
  box-sizing: border-box;
}

/* Main dynamic container */
#dynamic-rsvp-root {
  position: relative;
  z-index: 1;  /* above side images */
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 12px 4px;
  background-color: #fbf4ea;
}

/* Question blocks */
#dynamic-rsvp-root .form-group {
  margin: 0 0 22px;
}

/* Labels */
#dynamic-rsvp-root .aka-forms-label {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400;
  color: #000;
  text-align: center;
}

/* Inputs / selects / textareas */
#dynamic-rsvp-root .form-control,
#dynamic-rsvp-root select,
#dynamic-rsvp-root textarea {
  width: 100%;
  padding: 15px 0;
  background-color: #fbf4ea;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #000;
  text-align: center;
  box-shadow: none;
}

/* Yes / No buttons */
#dynamic-rsvp-root .btn-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#dynamic-rsvp-root .btn-group .btn {
  flex: 1;
  margin: 0;
  border-radius: 8px;
  font-size: 15px !important;
  border: 1px solid #000;
  background: transparent;
  color: #000;
}

#dynamic-rsvp-root .btn-group .btn.active {
  background-color: #5f2412;
  border-color: #5f2412;
  color: #fff;
}

/* Submit button */
#dynamic-rsvp-root #dyn-submit {
  height: 50px;
  width: 100%;
  background-color: #5f2412;
  border: none;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}

#dynamic-rsvp-root #dyn-submit:hover {
  opacity: 0.9;
}

/* Summary panel overrides */
#dynamic-rsvp-root .summary-panel {
  background-color: #fbf4ea;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

#dynamic-rsvp-root .summary-grid .k {
  text-align: left;
  opacity: 0.75;
}

#dynamic-rsvp-root .summary-grid .v {
  text-align: right;
}

/* === Personal Message section === */

.personal-message {
  padding: 60px 20px 80px;
}

.personal-message .form {
  max-width: 600px;
  margin: 0 auto 32px;
}

/* Inputs + textarea */
.personal-message input,
.personal-message textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Inria Serif", serif;
  font-size: 16px;
  padding: 14px 18px;
  border: 1px solid #4a2614;
  background-color: rgba(255, 250, 240, 0.9);
  color: #4a2614;
}

.personal-message textarea {
  min-height: 140px;
  resize: vertical;
}

.personal-message input::placeholder,
.personal-message textarea::placeholder {
  color: rgba(74, 38, 20, 0.55);
}

/* Send button – keep your existing .frame-13 look but make it behave like a button */
#btn-personalguestmessage-upload.frame-13 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid #4a2614;
  background: #faf4ed;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

#btn-personalguestmessage-upload.frame-13:hover {
  background: #f0e3d7;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

#btn-personalguestmessage-upload.frame-13:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.write-your-wish-here-wrapper {
  /* keep your existing background & border from Anima */
  padding: 14px 18px;          /* inner padding for text */
  box-sizing: border-box;
}

/* The textarea itself – no inner border, full width */
.write-your-wish-here-wrapper .write-your-wish-here {
  width: 100%;
  height: 100%;
  border: none;                /* remove inner border */
  background: transparent;     /* let the wrapper's cream show */
  padding: 0;                  /* padding handled by wrapper */
  resize: vertical;
  outline: none;
  box-shadow: none;
  font-family: "Inria Serif", serif;
  font-size: 16px;
  color: #4a2614;
}

/* Make sure the generic textarea styling doesn't re-add the border */
.personal-message textarea.write-your-wish-here {
  border: none;
  background: transparent;
}

/* === Guest messages list (rendered by JS) === */

.pgm-all {
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;   /* no left/right auto-centering */
}

/* Cards still look nice but use full width inside the section */
.pgm-item-all {
  width: 100%;
  margin: 0 0 12px;
  border-radius: 14px;
  padding: 14px 16px;
}

/* Minimal “bootstrap-like” helpers used in the JS */

.pgm-all .d-flex {
  display: flex;
}

.pgm-all .justify-content-between {
  justify-content: space-between;
}

.pgm-all .align-items-center {
  align-items: center;
}

.pgm-all .mb-1 {
  margin-bottom: 4px;
}

.pgm-all .fw-bold {
  font-weight: 600;
}

.pgm-all .small {
  font-size: 12px;
  opacity: 0.85;
}

/* Tablet sizing */
@media (min-width: 768px) {
  #dynamic-rsvp-root {
    max-width: 540px;
    padding: 0 16px;
  }

  #dynamic-rsvp-root .aka-forms-label {
    font-size: 17px !important;
  }

  #dynamic-rsvp-root .form-control,
  #dynamic-rsvp-root select,
  #dynamic-rsvp-root textarea {
    font-size: 17px !important;
  }
}

/* Desktop sizing */
@media (min-width: 1024px) {
  #dynamic-rsvp-root {
    max-width: 600px;
    padding: 0 20px;
  }

  #dynamic-rsvp-root .aka-forms-label {
    font-size: 18px !important;
  }

  #dynamic-rsvp-root .form-control,
  #dynamic-rsvp-root select,
  #dynamic-rsvp-root textarea {
    font-size: 18px !important;
  }
}