/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}


/* ==================================================
   MAIN PAGE
================================================== */

body {
  font-family: 'Cormorant Garamond', serif;

  background-color: #f8f5ed;

  background-image:
    url("assets/background3.png");

  background-position:
    top center;

  background-size:
    100% auto;

  background-repeat:
    no-repeat;

  background-attachment:
    scroll;

  color: #0b3975;

  text-align: center;

  margin: 0;

  padding:
    245px
    20px
    80px;

  min-height: 100vh;
}


/* ==================================================
   MAIN WEDDING CONTENT
================================================== */

.wedding-content {
  width: 100%;

  margin:
    0
    auto;
}


/* ==================================================
   WELCOME TO
================================================== */

.eyebrow {
  font-family:
    'Cormorant Garamond',
    serif;

  color: #0b3975;

  font-size: 1.15rem;

  font-weight: 600;

  letter-spacing: 8px;

  line-height: 1;

  text-transform: uppercase;

  margin:
    0
    0
    12px;
}


/* ==================================================
   OUR WEDDING
================================================== */

h1 {
  font-family:
    'Luxurious Script',
    cursive;

  color: #073675;

  font-size:
    clamp(
      4.5rem,
      8vw,
      7rem
    );

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: 0;

  margin:
    0
    auto
    25px;

  text-shadow:
    0 1px 1px
    rgba(8, 45, 95, 0.08);
}


/* ==================================================
   HEART DIVIDER
================================================== */

.flourish-divider {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 330px;

  max-width: 75vw;

  margin:
    0
    auto
    31px;

  color: #0b3975;
}


.flourish-divider::before,
.flourish-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background-color:
    #0b3975;
}


.flourish-divider span {
  padding:
    0
    18px;

  color: #0b3975;

  font-family:
    Georgia,
    serif;

  font-size: 1.7rem;

  line-height: 1;
}


/* ==================================================
   FIND YOUR TABLE HEADING
================================================== */

.find-heading {
  font-family: 'Cormorant Garamond', serif;

  font-size: 1.05rem;

  font-weight: 500;

  letter-spacing: 0.5px;

  line-height: 1.2;

  text-transform: none;

  margin: 0 auto 7px;

  width: 90%;

  max-width: 320px;
}


/* ==================================================
   ENTER YOUR NAME OR SURNAME BELOW
================================================== */

.search-instruction {
  font-family:
    'Cormorant Garamond',
    serif;

  color: #0b3975;

  font-size: 1.10rem;

  font-weight: 500;

  font-style: italic;

  line-height: 1.15;

  margin:
    0
    0
    10px;
}


/* ==================================================
   LEAF DIVIDER IMAGE
================================================== */

.leaf-divider {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin:
    8px
    auto
    24px;
}


.leaf-divider img {
  display: block;

  width: 300px;

  max-width: 100%;

  height: auto;

  object-fit: contain;
}


/* ==================================================
   SEARCH AREA
================================================== */

.search-area {
  width: 100%;

  max-width: 700px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin:
    0
    auto;
}


/* ==================================================
   SEARCH INPUT
================================================== */

input {
  display: block;

  width:
    min(
      520px,
      72vw
    );

  height: 60px;

  margin:
    0
    auto;

  padding:
    0
    28px;

  border:
    1.5px solid
    #123d78;

  border-radius:
    40px;

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );

  color: #0b3975;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 1.25rem;

  font-weight: 500;

  font-style: italic;

  text-align: center;

  outline: none;

  box-shadow:
    0 4px 14px
    rgba(
      9,
      47,
      100,
      0.06
    );

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


input::placeholder {
  color: #49668d;

  opacity: 0.9;

  font-family:
    'Cormorant Garamond',
    serif;

  font-style: italic;
}


input:focus {
  border-color:
    #082f69;

  box-shadow:
    0 0 0 3px
    rgba(
      11,
      57,
      117,
      0.08
    ),

    0 5px 18px
    rgba(
      9,
      47,
      100,
      0.10
    );
}


/* ==================================================
   FIND YOUR TABLE BUTTON
================================================== */

button {
  display: block;

  width:
    min(
      380px,
      62vw
    );

  min-height: 60px;

  margin:
    20px
    auto
    0;

  padding:
    14px
    30px;

  border: none;

  border-radius:
    40px;

  background:
    linear-gradient(
      135deg,
      #0b3975,
      #06316b,
      #0d468b
    );

  color: #ffffff;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 1.25rem;

  font-weight: 500;

  letter-spacing: 4px;

  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    0 7px 18px
    rgba(
      4,
      38,
      83,
      0.22
    );

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 22px
    rgba(
      4,
      38,
      83,
      0.28
    );
}


button:active {
  transform:
    translateY(0);
}


/* ==================================================
   RESULT EXTENSION
   NEW BLUE PATTERN BACKGROUND
================================================== */

.result-extension {
  width: 100%;

  /*
     This is your NEW blue circular pattern.
  */
  background-image:
    url("assets/Additional Background.png");

  background-repeat:
    repeat;

  background-position:
    top center;

  /*
     Controls the size of the pattern.
     Increase this number for bigger circles.
     Decrease it for smaller circles.
  */
  background-size:
    300px auto;

  padding:
    45px
    20px
    80px;

  margin: 0;

  min-height: 650px;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  box-sizing: border-box;
}


/* ==================================================
   RESULT EXTENSION CENTRE
================================================== */

.result-extension-centre {
  width: 100%;

  max-width: 700px;

  margin:
    0
    auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  box-sizing: border-box;
}


/* ==================================================
   RESULT AREA
================================================== */

#result {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;
}


/* ==================================================
   GUEST RESULT CARD
================================================== */

.guest-card {
  width:
    min(
      440px,
      78vw
    );

  margin:
    0
    auto;

  padding:
    28px
    32px
    30px;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  border:
    1.5px solid
    #1b4d89;

  border-radius:
    22px;

  color: #0b3975;

  box-shadow:
    0 10px 30px
    rgba(
      6,
      45,
      96,
      0.20
    );

  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;

  font-family:
    'Cormorant Garamond',
    serif;

  box-sizing: border-box;
}


.guest-card.show {
  opacity: 1;

  transform:
    translateY(0);
}


/* ==================================================
   RESULT CARD TOP HEART DIVIDER
================================================== */

.result-decoration {
  width: 70%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin:
    0
    auto
    8px;
}


.result-decoration span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #174a87
    );
}


.result-decoration span:last-child {
  background:
    linear-gradient(
      90deg,
      #174a87,
      transparent
    );
}


.result-heart {
  color: #0b3975;

  font-family:
    Georgia,
    serif;

  font-size: 1.7rem;

  line-height: 1;
}


/* ==================================================
   WELCOME TEXT
================================================== */

.welcome-text {
  font-family:
    'Luxurious Script',
    cursive;

  color: #0b3975;

  font-size: 3.4rem;

  font-weight: 400;

  line-height: 1;

  margin:
    5px
    0
    12px;

  letter-spacing: 0;
}


/* ==================================================
   GUEST NAME
================================================== */

.guest-name {
  color: #0b3975;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 1.8rem;

  font-weight: 600;

  margin:
    5px
    0
    12px;
}


/* ==================================================
   RESULT CARD LEAF IMAGE
================================================== */

.result-leaf-image {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin:
    10px
    auto
    14px;
}


.result-leaf-image img {
  display: block;

  width: 85px;

  max-width: 100%;

  height: auto;

  object-fit: contain;
}


/* ==================================================
   PLEASE TAKE YOUR SEAT AT
================================================== */

.seat-text {
  color: #174579;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  margin:
    8px
    0;
}


/* ==================================================
   TABLE NUMBER
================================================== */

.table-number {
  color: #073675;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 3.7rem;

  font-weight: 600;

  letter-spacing: 3px;

  line-height: 1;

  margin:
    18px
    0;
}


/* ==================================================
   CELEBRATION TEXT
================================================== */

.celebration-text {
  color: #0b3975;

  font-family:
    'Luxurious Script',
    cursive;

  font-size: 2rem;

  font-weight: 400;

  line-height: 1.2;

  margin:
    8px
    0
    15px;
}


/* ==================================================
   NOT FOUND MESSAGE
================================================== */

.not-found {
  width:
    min(
      420px,
      78vw
    );

  margin:
    0
    auto;

  padding:
    22px
    25px;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  border:
    1px solid
    #174a87;

  border-radius:
    18px;

  color: #0b3975;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 1.15rem;

  box-shadow:
    0 8px 24px
    rgba(
      6,
      45,
      96,
      0.18
    );
}


.not-found p {
  margin:
    5px
    0;
}


.not-found-heart {
  color: #0b3975;

  font-family:
    Georgia,
    serif;

  font-size: 1.8rem;

  margin-bottom:
    8px;
}


.not-found-title {
  color: #0b3975;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 1.35rem;

  font-weight: 600;

  margin-bottom:
    5px;
}


/* ==================================================
   MOBILE
================================================== */
@media (max-width: 600px) {

  html,
  body {
    width: 100%;
    min-height: 100svh;
    margin: 0;
  }

  body {
    background-color: #f8f5ed;

    background-image:
      url("assets/background3.png");

    background-size:
    
    120% auto;

    background-position:
      top center;

    background-repeat:
      no-repeat;

    padding:
      150px
      16px
      60px;
  }





  /* ================================================
     WELCOME TO
  ================================================= */

  .eyebrow {
    font-size:
      0.82rem;

    letter-spacing:
      5px;

    margin-bottom:
      8px;
  }


  /* ================================================
     OUR WEDDING
  ================================================= */

  h1 {
    font-size:
      4rem;

    line-height:
      0.95;

    margin-bottom:
      6px;
  }


  /* ================================================
     HEART DIVIDER
  ================================================= */

  .flourish-divider {
    width:
      230px;

    margin-bottom:
      12px;
  }


  .flourish-divider span {
    padding:
      0
      12px;

    font-size:
      1.3rem;
  }


  /* ================================================
     FIND YOUR TABLE
  ================================================= */

  .find-heading {
    font-family:
      'Cormorant Garamond',
      serif;

    font-size:
      1.05rem;

    font-weight:
      500;

    letter-spacing:
      0.5px;

    line-height:
      1.2;

    text-transform:
      none;

    margin:
      0
      auto
      7px;

    width:
      90%;

    max-width:
      320px;
  }


  /* ================================================
     SEARCH INSTRUCTION
  ================================================= */

  .search-instruction {
    font-size:
      1.05rem;

    margin-bottom:
      6px;
  }


  /* ================================================
     LEAF IMAGE
  ================================================= */

  .leaf-divider {
    margin:
      7px
      auto
      18px;
  }


  .leaf-divider img {
    width:
      75px;
  }


  /* ================================================
     SEARCH AREA
  ================================================= */

  .search-area {
    width:
      100%;

    margin:
      0
      auto;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;
  }


  /* ================================================
     SEARCH INPUT
  ================================================= */

  input {
    display:
      block;

    width:
      78%;

    max-width:
      280px;

    height:
      48px;

    margin:
      0
      auto;

    padding:
      0
      16px;

    border:
      1.5px solid
      #123d78;

    border-radius:
      40px;

    background:
      rgba(
        255,
        255,
        255,
        0.68
      );

    color:
      #0b3975;

    font-family:
      'Cormorant Garamond',
      serif;

    font-size:
      0.95rem;

    font-weight:
      500;

    font-style:
      italic;

    text-align:
      center;

    outline:
      none;
  }


  /* ================================================
     BUTTON
  ================================================= */

  button {
    display:
      block;

    width:
      68%;

    max-width:
      235px;

    min-height:
      46px;

    margin:
      14px
      auto
      0;

    padding:
      9px
      14px;

    border:
      none;

    border-radius:
      40px;

    font-size:
      0.82rem;

    font-weight:
      500;

    letter-spacing:
      1.8px;

    white-space:
      nowrap;
  }


  /* ================================================
     NEW RESULT BACKGROUND - MOBILE
  ================================================= */

  .result-extension {
    width:
      100%;

    background-image:
      url("assets/Additional Background.png");

    background-repeat:
      repeat;

    background-position:
      top center;

    /*
       Smaller pattern on mobile
    */
    background-size:
      220px auto;

    padding:
      30px
      16px
      60px;

    margin:
      0;

    min-height:
      550px;

    display:
      flex;

    justify-content:
      center;

    align-items:
      flex-start;
  }


  .result-extension-centre {
    width:
      100%;

    max-width:
      100%;

    margin:
      0
      auto;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;
  }


  /* ================================================
     RESULT CARD
  ================================================= */

  .guest-card {
    width:
      88%;

    max-width:
      340px;

    margin:
      0
      auto;

    padding:
      24px
      18px
      26px;

    border-radius:
      18px;
  }


  /* ================================================
     RESULT HEART DIVIDER
  ================================================= */

  .result-decoration {
    width:
      75%;
  }


  .result-heart {
    font-size:
      1.4rem;
  }


  /* ================================================
     WELCOME
  ================================================= */

  .welcome-text {
    font-size:
      2.8rem;
  }


  /* ================================================
     GUEST NAME
  ================================================= */

  .guest-name {
    font-size:
      1.5rem;
  }


  /* ================================================
     RESULT LEAF IMAGE
  ================================================= */

  .result-leaf-image {
    margin:
      8px
      auto
      11px;
  }


  .result-leaf-image img {
    width:
      68px;
  }


  /* ================================================
     PLEASE TAKE YOUR SEAT
  ================================================= */

  .seat-text {
    font-size:
      0.85rem;

    letter-spacing:
      2px;
  }


  /* ================================================
     TABLE NUMBER
  ================================================= */

  .table-number {
    font-size:
      2.9rem;

    letter-spacing:
      2px;

    margin:
      15px
      0;
  }


  /* ================================================
     CELEBRATION TEXT
  ================================================= */

  .celebration-text {
    font-size:
      1.7rem;
  }


  /* ================================================
     NOT FOUND
  ================================================= */

  .not-found {
    width:
      88%;

    max-width:
      320px;

    margin:
      0
      auto;

    font-size:
      1rem;
  }

}
/* ==================================================
   SEAT CONFIRMATION
================================================== */

.seat-confirmation {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.seat-confirm-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  color: #0b3975;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  letter-spacing: 1px;
}

.seat-confirm-checkbox {
 
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;

  flex: 0 0 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1.5px solid #0b3975 !important;
  border-radius: 2px !important;

  background: transparent !important;

  display: inline-grid !important;
  place-items: center;

  box-sizing: border-box !important;
  vertical-align: middle;
}

.seat-confirm-checkbox:checked::after {
  content: "✓";
  font-size: 12px;
  line-height: 1;
  color: #0b3975;
}

.seat-confirm-checkbox:checked::after {
  content: "✓";

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  color: #0b3975;
}

.seat-confirmed {
  margin: 0;
  color: #0b3975;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  letter-spacing: 1px;
}