* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(
    180deg,
    #fff4f7 0%,
    #ffeef3 100%
  );
  color: #1f1f1f;
  overflow-x: hidden;
}

.page {
  min-height: 100vh;

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

  padding: 24px;
}

.card {
  width: 100%;
  max-width: 480px;

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

  backdrop-filter: blur(10px);

  padding: 38px;

  border-radius: 32px;

  text-align: center;

  box-shadow:
    0 25px 70px rgba(255,105,145,0.18);

  position: relative;

  overflow: visible;
}

/* TITLES */

h1 {
  margin: 0 0 12px;

  font-weight: 800;

  font-size: clamp(26px, 6vw, 52px);

  line-height: 1.1;

  white-space: nowrap;

  overflow: hidden;
}

p {
  color: #666;
  margin-bottom: 28px;
  font-size: 18px;
}

/* FORM */

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  width: 100%;
}

.form input,
.date-fields,
.add-option-button,
.form .button {
  width: 100%;
  max-width: 100%;
}

input {
  display: block;

  width: 100%;
  height: 60px;

  padding: 0 20px;

  border: 1px solid #e6e6e6;

  border-radius: 18px;

  font-size: 16px;

  outline: none;

  background: #ffffff;

  transition: 0.25s;

  appearance: none;
  -webkit-appearance: none;
}

input:focus {
  border-color: #ff5c8a;

  box-shadow:
    0 0 0 4px rgba(255,92,138,0.15);
}

/* PHOTO UPLOAD TONDO */

.file-upload {
  width: 180px;
  height: 180px;

  margin: 0 auto 4px;

  border: 3px dashed #ff5c8a;

  border-radius: 50%;

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

  color: #ff5c8a;

  font-weight: 700;
  font-size: 18px;

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

  text-align: center;

  cursor: pointer;

  transition: 0.25s;

  overflow: hidden;

  position: relative;

  flex-shrink: 0;
}

.file-upload:hover {
  background: rgba(255,92,138,0.06);

  transform: translateY(-2px);
}

#photoUploadText {
  padding: 20px;
  line-height: 1.25;
}

#photoPreview {
  display: none;

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50%;
}

/* DATE INPUT CON TESTO INTERNO */

.date-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;

  width: 100%;
}

.date-wrapper {
  position: relative;

  width: 100%;
  height: 60px;
}

.date-input {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;

  opacity: 0;

  cursor: pointer;

  z-index: 2;
}

.date-display {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

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

  background: #ffffff;

  border: 1px solid #e6e6e6;

  border-radius: 18px;

  color: #b8b8b8;

  font-size: 16px;

  transition: 0.25s;

  pointer-events: none;

  z-index: 1;
}

.date-wrapper:hover .date-display {
  border-color: #ff5c8a;
}

.date-input:focus + .date-display {
  border-color: #ff5c8a;

  box-shadow:
    0 0 0 4px rgba(255,92,138,0.15);
}

.date-display.selected {
  background: rgba(255,92,138,0.06);

  border-color: #ff5c8a;

  color: #666;

  font-weight: 500;
}

/* BUTTONS GENERALI */

.add-option-button {
  height: 52px;

  border: 1px dashed #ff5c8a;

  border-radius: 18px;

  background: rgba(255,92,138,0.05);

  color: #ff4f7b;

  font-size: 16px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.25s;
}

.add-option-button:hover {
  background: rgba(255,92,138,0.12);

  transform: translateY(-1px);
}

.button {
  display: inline-flex;

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

  height: 60px;

  background: #ff4f7b;

  color: white;

  text-decoration: none;

  border-radius: 999px;

  font-weight: bold;

  border: none;

  cursor: pointer;

  transition: 0.25s;

  font-size: 17px;
}

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

  box-shadow:
    0 10px 25px rgba(255,79,123,0.35);
}

/* RESULT */

.result {
  margin-top: 24px;

  font-weight: bold;

  word-break: break-word;
}

.result a {
  color: #ff4f7b;
  text-decoration: none;
}

.result a:hover {
  text-decoration: underline;
}

/* INVITE PAGE */

.invite-page {
  align-items: center;
  justify-content: center;
}

.invite-card {
  max-width: 620px;

  min-height: 420px;

  padding: 46px 42px;

  overflow: hidden;

  position: relative;
}

/* TITOLO INVITO */

.invite-card #inviteTitle,
.invite-card h1 {
  width: 100% !important;
  max-width: 440px !important;

  margin: 0 auto 18px !important;

  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.12 !important;

  font-weight: 800 !important;
  letter-spacing: 0.5px;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
}

.invite-card p {
  font-size: 19px;

  margin-bottom: 30px;
}

#invitePhoto {
  display: none;

  width: 220px;
  height: 220px;

  object-fit: cover;

  border-radius: 50%;

  margin: 0 auto 24px;

  border: 6px solid white;

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

/* AREA BOTTONI INVITE */

.invite-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

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

  gap: 16px;

  width: 50%;
  min-width: 280px;
  max-width: 330px;

  margin: 28px auto 0;

  position: static !important;

  min-height: 110px;

  overflow: visible;
}

.invite-actions .button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 58px;

  flex: none !important;

  font-size: 17px;
  letter-spacing: 1px;

  border-radius: 999px;
}

.yes-button {
  background: #ff4f7b;

  position: relative;

  z-index: 2;

  box-shadow:
    0 12px 26px rgba(255,79,123,0.26);
}

.yes-button:hover {
  transform: translateY(-2px) scale(1.03);

  box-shadow:
    0 16px 32px rgba(255,79,123,0.35);
}

.secondary-button,
.no-button {
  background: #222;
}

.no-button {
  position: relative;

  z-index: 10;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.22);

  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease;
}

.no-button:hover {
  transform: scale(1.04) rotate(-1deg);

  box-shadow:
    0 14px 30px rgba(0,0,0,0.3);
}

/* DATE CHOICE PAGE */

#dateOptions {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 16px;

  width: 100%;

  margin: 28px 0 28px;
}

.date-option {
  width: 100%;
  max-width: 230px;

  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  background: #fff7f2;

  padding: 0 18px;

  border-radius: 18px;

  cursor: pointer;

  text-align: left;

  font-size: 17px;
  font-weight: 500;

  color: #333;

  transition: 0.25s;
}

.date-option:hover {
  background: rgba(255,92,138,0.08);

  transform: translateY(-1px);
}

.date-option input {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  appearance: none;
  -webkit-appearance: none;

  border: 2px solid #e2d8d8;

  border-radius: 6px;

  background: #ffffff;

  cursor: pointer;

  position: relative;

  transition: 0.2s;
}

.date-option input:checked {
  background: #ff4f7b;

  border-color: #ff4f7b;
}

.date-option input:checked::after {
  content: "";

  position: absolute;

  left: 5px;
  top: 1px;

  width: 5px;
  height: 10px;

  border: solid #ffffff;
  border-width: 0 2px 2px 0;

  transform: rotate(45deg);
}

/* MOBILE */

@media (max-width: 600px) {
  .page {
    padding: 18px;
  }

  .card {
    padding: 28px;
  }

  h1 {
    font-size: clamp(24px, 8vw, 42px);
  }

  .file-upload {
    width: 150px;
    height: 150px;
  }

  .invite-card {
    max-width: 100%;

    padding: 34px 24px;

    min-height: 420px;
  }

  .invite-card #inviteTitle,
  .invite-card h1 {
    max-width: 300px !important;

    font-size: clamp(22px, 6.5vw, 32px) !important;

    line-height: 1.14 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .invite-card p {
    font-size: 17px;

    margin-bottom: 28px;
  }

  .invite-actions {
    gap: 14px;

    width: 76%;
    min-width: 250px;
    max-width: 300px;

    min-height: 110px;

    position: static !important;
  }

  .invite-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 54px;

    flex: none !important;

    font-size: 16px;
  }

  #invitePhoto {
    width: 180px;
    height: 180px;
  }

  #dateOptions {
    gap: 14px;

    margin: 26px 0 28px;
  }

  .date-option {
    max-width: 220px;

    min-height: 56px;

    font-size: 16px;
  }

  .date-option input {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;
  }
}