@font-face {
  font-family: "BNazanin";
  src: url("fonts/BNazanin.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: #FFF0F0;
  font-family: "BNazanin", Tahoma, serif;
  background:
    linear-gradient(rgba(35, 25, 29, .34), rgba(35, 25, 29, .34)),
    url("background.jpg") center center / cover fixed no-repeat,
    #e9dfe1;
}

[hidden] { display: none !important; }

.welcome {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px;
  background:
    linear-gradient(rgba(35, 25, 29, .38), rgba(35, 25, 29, .38)),
    url("background.jpg") center / cover no-repeat,
    #e9dfe1;
  transition: opacity .65s ease, visibility .65s ease;
}

.welcome-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope {
  position: relative;
  width: min(88vw, 370px);
  padding: 42px 26px 30px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdfb, #f2e8e9);
  box-shadow: 0 18px 55px rgba(30, 15, 20, .28);
}

.envelope::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #d8c5c9;
  border-radius: 5px;
  pointer-events: none;
}

.heart { color: #b18d96; font-size: 42px; line-height: 1; }
.eyebrow { color: #a58b91; font: 10px Georgia, serif; letter-spacing: 3px; }
.envelope h2 { margin: 12px 0; font: 25px Georgia, serif; color: #665054; }
.envelope p:not(.eyebrow):not(.music-hint) { font-size: 21px; line-height: 1.9; }

.button, .more-button {
  border: 1px solid #b99da4;
  border-radius: 30px;
  background: #a99096;
  color: white;
  padding: 13px 24px;
  font: 20px "BNazanin", Tahoma, serif;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(100,70,75,.16);
}
.button span { margin-left: 7px; }
.music-hint { margin: 14px 0 0; color: #dd0a46; font-size: 15px; }

.invitation {
  width: min(94%, 650px);
  margin: 28px auto;
  animation: invitationOpen .8s ease both;
}
@keyframes invitationOpen {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.invitation-card {
  padding: 28px 22px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 12px;
  background: rgba(255, 251, 249, .94);
  box-shadow: 0 12px 45px rgba(30,15,20,.22);
  text-align: center;
}

.card-heading { margin: 5px auto 22px; color: #766064; }
.card-heading h2 { margin: 0; font-size: 32px; font-weight: normal; }
.card-heading p { margin: 4px 0; font-size: 23px; }

.names {
  margin: 18px 0;
  color: #665054;
  font: 32px Georgia, serif;
}
.names span { color: #b49b9f; margin: 0 7px; }
.heart-divider { color: #c5a7aa; font-size: 38px; }

.couple-photo {
  width: min(85%, 340px);
  margin: 18px auto 25px;
  padding: 7px;
  border: 1px solid #d8c9cb;
  border-radius: 14px;
  background: white;
  box-shadow: 0 5px 18px rgba(100,70,75,.12);
}
.couple-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 9px;
}

.poem { margin: 20px auto; color: #554348; font-size: 28px; line-height: 1.9; }
.ornament { margin: 18px 0; color: #b49b9f; }
.invitation-text { margin: 18px auto; color: #9b7e86; font-size: 23px; line-height: 1.9; }

.details {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  margin: 22px auto;
}
.detail-item {
  flex: 1;
  padding: 13px 8px;
  border: 1px solid #e3d6d8;
  border-radius: 13px;
  background: #fffdfd;
}
.detail-icon { color: #ae9298; font-size: 22px; }
.detail-item p { margin: 4px 0; color: #806a70; font-size: 20px; }
.detail-item strong { display: block; color: #665054; font-size: 22px; font-weight: normal; }

.venue { margin: 25px auto; color: #665054; }
.location-icon { color: #a99096; font-size: 32px; }
.venue h2 { margin: 5px 0; font-size: 23px; font-weight: normal; }
.venue h3 { margin: 3px 0 8px; font-size: 29px; font-weight: normal; }
.address { margin: 8px auto; color: #766064; font-size: 20px; line-height: 1.9; }

.more-button { margin: 10px auto; padding: 10px 23px; font-size: 19px; }
.more-button span { margin-right: 8px; }
.more-info {
  max-width: 440px;
  margin: 14px auto;
  padding: 17px;
  border: 1px solid #e3d6d8;
  border-radius: 13px;
  background: #fffdfd;
  font-size: 19px;
}
.map-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.map-links a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 22px;
  background: #a99096;
  color: white;
  text-decoration: none;
  font-size: 17px;
}
.address-note { color: #927b81; font-size: 15px; }

.footer { margin: 25px auto 5px; color: #766064; font-size: 24px; }
.footer span { color: #b49b9f; }

@media (max-width: 600px) {
  .invitation { width: 94%; margin: 15px auto; }
  .invitation-card { padding: 23px 14px; }
  .names { font-size: 27px; }
  .couple-photo { width: 90%; }
  .poem { font-size: 24px; }
  .invitation-text { font-size: 20px; }
  .details { gap: 8px; }
  .detail-item { padding: 11px 5px; }
  .detail-item p { font-size: 18px; }
  .detail-item strong { font-size: 18px; }
  .venue h3 { font-size: 25px; }
  .address { font-size: 17px; }
  .map-links a { font-size: 16px; }
}


/* ===== تم سفید و نباتی با نوشته‌های تیره ===== */

/* اگر می‌خواهی عکس پس‌زمینه هم باقی بماند، این دو background را تغییر نده؛
   این نسخه پس‌زمینه را به ترکیب سفید و نباتی تبدیل می‌کند. */
body {
  color: #40372f;
  background: linear-gradient(135deg, #fffefa 0%, #f7f0df 48%, #fffdf7 100%);
}

.welcome {
  background: linear-gradient(135deg, #fffefa 0%, #f4ecd9 52%, #fffdf8 100%);
}

.envelope {
  background: linear-gradient(145deg, #fffefa, #f3ead7);
  border-color: #e2d6bd;
  box-shadow: 0 18px 55px rgba(76, 62, 42, .16);
}

.envelope::before {
  border-color: #d8c9aa;
}

.heart,
.heart-divider,
.footer span {
  color: #aa9670;
}

.eyebrow,
.music-hint {
  color: #79684d;
}

.envelope h2,
.card-heading,
.names,
.venue,
.detail-item strong {
  color: #493f33;
}

.envelope p:not(.eyebrow):not(.music-hint) {
  color: #51483d;
}

.button,
.more-button,
.map-links a {
  background: #9b8967;
  border-color: #8d7b5b;
  color: #fffefa;
}

.button:hover,
.more-button:hover,
.map-links a:hover {
  background: #857451;
}

.invitation-card {
  background: rgba(255, 254, 249, .97);
  border-color: #e4dac6;
  box-shadow: 0 12px 45px rgba(76, 62, 42, .14);
}

.card-heading h2,
.card-heading p,
.invitation-text,
.poem,
.venue h2,
.venue h3,
.address,
.footer {
  color: #493f33;
}

.names span,
.ornament,
.detail-icon,
.location-icon {
  color: #a28d68;
}

.couple-photo {
  border-color: #dfd3bd;
  background: #fffefa;
  box-shadow: 0 5px 18px rgba(76, 62, 42, .10);
}

.detail-item,
.more-info {
  background: #f8f3e8;
  border-color: #e5dac5;
}

.detail-item p {
  color: #6b604f;
}

.address-note {
  color: #766a58;
}

/* فونت نستعلیق: فایل فونت را با نام IranNastaliq.ttf داخل پوشه fonts بگذار */
@font-face {
  font-family: "IranNastaliq";
  src: url("fonts/IranNastaliq.ttf") format("truetype");
  font-display: swap;
}

/* نستعلیق را روی شعر و نام‌ها می‌گذاریم تا خوانایی اطلاعات حفظ شود */
.poem,
.names,
.card-heading h2 {
  font-family: "IranNastaliq", "BNazanin", Tahoma, serif;
  font-weight: normal;
}

/* اگر فایل فونت نستعلیق هنوز اضافه نشده باشد، فونت فعلی به‌صورت خودکار نمایش داده می‌شود */