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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {

  background:
    linear-gradient(
      rgba(247,242,236,0.9),
      rgba(247,242,236,0.9)
    ),
    url("assets/floral-pattern.jpeg");

  background-size: 420px;

  background-repeat: repeat;

  background-attachment: fixed;

  color: #4f463f;

  font-family: 'Montserrat', sans-serif;

  line-height: 1.7;

  overflow-x: hidden;
}

/* =========================
   GLOBAL
========================= */

section {
  position: relative;
}

h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}

.section {

  position: relative;

  padding:
    120px
    20px;

  max-width: 1200px;

  margin: 0 auto;
}

.content-card {

  position: relative;

  max-width: 850px;

  margin: 0 auto;

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

  backdrop-filter: blur(1px);

  border-radius: 40px;

  padding:
    70px
    60px;

  text-align: center;

  overflow: hidden;

  z-index: 2;
}

.content-card p {

  margin-bottom: 20px;

  font-size: 17px;

  color: #5d534c;
}

/* =========================
   FLOWERS
========================= */

.flower {

  position: absolute;

  pointer-events: none;

  user-select: none;

  opacity: 0.72;

  filter:
    saturate(0.9)
    contrast(0.96);
}

.hero .flower {
  z-index: 1;
}

.flower-top-left {

  top: 0px;
  left: 0px;

  width: 620px;
}

.flower-top-right {

  top: 0xp;
  right: 0px;

  width: 600px;

  transform:
    rotate(-6deg);
}

.flower-bottom-left {

  bottom: -30px;
  left: -185px;

  width: 700px;

  opacity: 0.82;

  transform:
    rotate(3deg);
}

.flower-bottom-right {

  bottom: -30px;
  right: -185px;

  width: 700px;

  opacity: 0.82;

  transform:
    rotate(-3deg)
    scaleX(-1);
}

.section-flower {

  position: absolute;

  width: 430px;

  opacity: 0.38;

  z-index: 1;

  filter:
    saturate(0.78)
    contrast(0.95);
}

.flower-right {

  right: -250px;
  top: 20px;

  transform:
    rotate(14deg)
    scaleX(-1);
}

.flower-left {

  left: -250px;
  bottom: 10px;

  transform:
    rotate(-14deg);
}

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

.hero {

  position: relative;
  width: 100%;
  max-width: 100vw;

  min-height: 100vh;

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

  text-align: center;

  padding:
    100px
    20px;

  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      #f8f3ee,
      #f5efe8
    );
}

.hero-content {

  position: relative;

  z-index: 2;

  max-width: 700px;
}

.hero-subtitle {

  text-transform: uppercase;

  letter-spacing: 4px;

  font-size: 14px;

  margin-bottom: 30px;

  color: #7d7067;
}

h1 {

  font-size: 92px;

  line-height: 1.05;

  margin-bottom: 30px;
}

.hero-and {

  display: block;

  font-family: 'Great Vibes', cursive;

  font-size: 54px;

  margin:
    10px
    0;

  color: #8d7767;
}

.hero-invite {

  text-transform: uppercase;

  letter-spacing: 4px;

  font-size: 15px;

  margin-bottom: 30px;
}

.hero-date p {

  font-size: 42px;

  margin-bottom: 5px;
}

.hero-date span {

  letter-spacing: 2px;

  font-size: 15px;

  text-transform: uppercase;
}

.hero-description {

  margin-top: 35px;

  font-size: 18px;

  color: #5d534c;
}

/* =========================
   COUPLE PHOTO
========================= */

.couple-photo-wrap {

  display: flex;

  justify-content: center;

  margin:
    40px
    0
    35px;

  position: relative;

  z-index: 2;
}

.couple-photo-frame {

  position: relative;

  width: 290px;
  height: 390px;

  padding: 10px;

  border-radius: 50% / 38%;

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

  backdrop-filter: blur(2px);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.08);

  overflow: hidden;
}

.couple-photo {

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 30%;

  border-radius: 50% / 38%;

  display: block;
}

.photo-default,
.photo-kiss {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50% / 38%;

  transition:
    opacity 1s ease,
    transform 1.2s ease;
}

/* обычное фото */

.photo-default {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* фото поцелуя */

.photo-kiss {
  opacity: 0;
  transform: scale(1.05);
  z-index: 2;
}

/* активное состояние */

.couple-photo-frame.kiss-active .photo-default {
  opacity: 0;
  transform: scale(0.98);
}

.couple-photo-frame.kiss-active .photo-kiss {
  opacity: 1;
  transform: scale(1);
}


/* =========================
   TIMER
========================= */

.timer {

  margin-top: 60px;

  display: flex;

  justify-content: center;

  gap: 16px;

  flex-wrap: wrap;
}

.timer-item {

  width: 105px;
  height: 105px;

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

  backdrop-filter: blur(1px);

  border-radius: 24px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.timer-item span {

  font-size: 34px;

  font-family: 'Cormorant Garamond', serif;
}

.timer-item small {

  margin-top: 5px;

  font-size: 13px;

  color: #7b6d64;
}

/* =========================
   TITLES
========================= */

h2 {

  font-size: 64px;

  margin-bottom: 35px;

  color: #443c36;
}

/* =========================
   CALENDAR
========================= */

.calendar {

  margin-top: 45px;

  background: white;

  border-radius: 28px;

  padding: 35px;

  max-width: 500px;

  margin-inline: auto;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.04);
}

.calendar-header {

  font-size: 34px;

  margin-bottom: 30px;
}

.calendar-weekdays,
.calendar-days {

  display: grid;

  grid-template-columns: repeat(7,1fr);

  gap: 10px;
}

.calendar-weekdays {

  margin-bottom: 18px;
}

.calendar-weekdays span {

  font-size: 13px;

  text-transform: uppercase;

  color: #8b7d73;
}

.calendar-days span {

  aspect-ratio: 1/1;

  display: flex;

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

  border-radius: 50%;

  font-size: 15px;

  position: relative;
}

.active-day {

  background: transparent;

  color: #b73a3a;

  font-weight: 600;
}

.active-day svg {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.active-day span {

  position: relative;

  z-index: 2;
}

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

.map {

  margin-top: 40px;

  border-radius: 30px;

  overflow: hidden;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.06);
}

/* =========================
   TIMELINE
========================= */

.wedding-timeline {

  position: relative;

  max-width: 700px;

  margin:
    70px
    auto
    0;
}

.wedding-timeline::before {

  content: '';

  position: absolute;

  left: 140px;
  top: 0;

  width: 1px;
  height: 100%;

  background: #d8cfc6;
}

.timeline-row {

  display: grid;

  grid-template-columns:
    100px
    80px
    1fr;

  align-items: center;

  margin-bottom: 55px;
}

.timeline-time {

  font-size: 40px;
}

.timeline-center {

  position: relative;

  display: flex;
  justify-content: center;
}

.timeline-center span {

  width: 75px;
  height: 75px;

  background:
    url('assets/flowers/point-flower.png')
    center/contain
    no-repeat;

  display: block;

  z-index: 2;
}

.timeline-content {

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

  padding:
    28px
    30px;

  border-radius: 24px;

  text-align: left;

  backdrop-filter: blur(1px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.03);
}

.timeline-content h3 {

  font-size: 34px;

  margin-bottom: 10px;
}

/* =========================
   COLORS
========================= */

.colors {

  margin-top: 40px;

  display: flex;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;
}

.colors span {

  width: 52px;
  height: 52px;

  border-radius: 50%;

  box-shadow:
    0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
   FORM
========================= */

.deadline {

  margin-bottom: 40px;

  color: #7d7067;
}

.wedding-form {

  max-width: 700px;

  margin:
    50px
    auto
    0;
}

.form-card {

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

  backdrop-filter: blur(1px);

  border-radius: 30px;

  padding: 35px;

  margin-bottom: 25px;

  text-align: left;
}

.form-card h3 {

  font-size: 34px;

  margin-bottom: 25px;
}

.form-label {

  display: block;

  margin-bottom: 12px;

  font-size: 14px;

  letter-spacing: 1px;

  color: #7d7067;
}

.wedding-form input[type="text"],
.wedding-form textarea {

  width: 100%;

  border: 1px solid #dbd7d4;

  border-radius: 18px;

  padding:
    18px
    20px;

  background: white;

  font-size: 16px;

  font-family: inherit;

  color: #4f463f;
}

.wedding-form textarea {

  min-height: 150px;

  resize: vertical;
}

.option-grid,
.checkbox-list {

  display: grid;

  gap: 14px;
}

.option-item,
.checkbox-item {

  background: white;

  border-radius: 18px;

  padding:
    18px
    20px;

  display: flex;

  align-items: center;

  gap: 14px;

  cursor: pointer;

  transition: 0.3s;
}

.option-item:hover,
.checkbox-item:hover {

  transform: translateY(-2px);
}

.option-item input,
.checkbox-item input {

  width: 18px;
  height: 18px;
}

.submit-btn {

  width: 100%;

  padding: 22px;

  border: none;

  border-radius: 24px;

  background: #d7c1ae;

  color: white;

  font-size: 15px;

  letter-spacing: 2px;

  text-transform: uppercase;

  cursor: pointer;

  transition: 0.3s;
}

.submit-btn:hover {

  background: #c6ae98;
}

/* =========================
   CONTACTS
========================= */

.contact-card {

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

  border-radius: 24px;

  padding: 35px;

  margin-top: 25px;

  backdrop-filter: blur(1px);
}

.contact-card h3 {

  font-size: 34px;

  margin-bottom: 14px;
}

.contact-card a {

  text-decoration: none;

  color: #5d534c;

  font-size: 18px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 992px) {

  .flower-top-left,
  .flower-top-right {

    top: -105px;

    width: 430px;
  }

  .flower-top-left {

    left: -205px;
  }

  .flower-top-right {

    right: -205px;
  }

  .flower-bottom-left,
  .flower-bottom-right {

    bottom: -125px;

    width: 540px;
  }

  .flower-bottom-left {

    left: -165px;
  }

  .flower-bottom-right {

    right: -165px;
  }

  h1 {
    font-size: 72px;
  }

  h2 {
    font-size: 50px;
  }

  .content-card {

    padding:
      50px
      30px;
  }
}

@media (max-width: 768px) {

  .section {

    padding:
      30px
      16px;
  }

  h1 {

    font-size: 56px;
  }

  .hero-and {

    font-size: 42px;
  }

  h2 {

    font-size: 42px;
  }

  .hero-date p {

    font-size: 30px;
  }

  .timer-item {

    width: 78px;
    height: 78px;
  }

  .timer-item span {

    font-size: 26px;
  }

  .content-card {

    padding:
      40px
      22px;

    border-radius: 28px;
  }

  .section-flower {

    width: 250px;

    opacity: 0.34;
  }

  .flower-right {

    right: -150px;
    top: -10px;
  }

  .flower-left {

    left: -150px;
    top: 10px;
  }

  /* timeline mobile */

  .wedding-timeline::before {

    left: 20px;
  }

  .timeline-row {

    grid-template-columns:
      50px
      1fr;

    gap: 18px;

    position: relative;
  }

  .timeline-time {

    grid-column: 2;

    font-size: 32px;
  }

  .timeline-center {

    position: absolute;

    left: -17px;
    top: 0px;
  }

  .timeline-content {

    grid-column: 2;
  }

  .timeline-content h3 {

    font-size: 28px;
  }

  /* form */

  .form-card {

    padding: 24px;
  }

  .form-card h3 {

    font-size: 28px;
  }

  /* calendar */

  .calendar {

    padding: 20px;
  }

  .calendar-header {

    font-size: 28px;
  }

  .calendar-days span {

    font-size: 13px;
  }
}

@media (max-width: 480px) {


.couple-photo-wrap {

  margin:
    30px
    0;
}

.couple-photo-frame {

  width: 190px;
  height: 255px;
}

  .hero {

    padding:
      40px
      20px
      118px;
  }

  .flower-top-left,
  .flower-top-right {

    top: 0px;

    width: 265px;

    opacity: 0.66;
  }

  .flower-top-left {

    left: 0px;
  }

  .flower-top-right {
    top: 420px;
    right: -30px;
  }

  .flower-bottom-left,
  .flower-bottom-right {

    bottom: -10px;

    width: 256px;

    opacity: 0.74;
  }

  .flower-bottom-left {

    left: -112px;
  }

  .flower-bottom-right {

    right: -112px;
  }

  .section-flower {

    width: 190px;
  }

  .flower-right {

    right: -125px;
  }

  .flower-left {

    left: -125px;
  }

  h1 {

    font-size: 48px;
  }

  .hero-subtitle {

    font-size: 12px;
  }

  .hero-description {

    font-size: 16px;
  }

  .timer {

    gap: 10px;
  }

  .timer-item {

    width: 70px;
    height: 70px;
  }

  .timer-item span {

    font-size: 22px;
  }

  .content-card p {

    font-size: 15px;
  }

  .colors span {

    width: 40px;
    height: 40px;
  }

  .contact-card h3 {

    font-size: 28px;
  }
}


.success-message {
  text-align: center;
  padding: 40px 20px;
  animation: fadeIn 0.6s ease;
}

.success-message h3 {
  font-size: 32px;
  margin-bottom: 15px;
  color: #b73a3a;
}

.success-message p {
  font-size: 18px;
  line-height: 1.6;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}