/* === BASE STILI === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Playfair+Display&display=swap');

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

html{ height:100%; -webkit-text-size-adjust:100%; scrollbar-gutter:stable both-edges; }
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;           /* niente switch hidden/auto: evita shift su iOS */
  font-family:'Valentine Cute', sans-serif;
}

/* === FONT === */

@font-face{
  font-family:'Kingsguard Calligraphy';
  src:url('fonts/KingsguardCalligraphy_PERSONAL_USE_ONLY.otf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

@font-face{
  font-family:'KG_Only_Girlin_The_World';
  src:url('fonts/KGOnlyGirlInTheWorld.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Segoe UI';
  src:url('fonts/segoeui.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Valentine Love';
  src:url('fonts/Valentine_Love.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Valentine Cute';
  src:url('fonts/ValentineCute.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
*[style*="Valentine Cute"], .valentine-cute{
  font-feature-settings:"liga" 0 !important;
  font-variant-ligatures:none !important;
}
@font-face{
  font-family:'Babel Sans';
  src:url('fonts/BabelSans.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* === COVER: BUSTA a pieno viewport (iOS safe-area ready) === */
.envelope{
  position:fixed; inset:0;
  width:100dvw; height:100dvh;       /* dynamic viewport -> niente “tagli” su iPhone */
  padding:calc(var(--safe-top) + 6px) 0 calc(var(--safe-bottom) + 6px);
  display:grid;
  place-items:flex-end;
  overflow:hidden;
  z-index:20;
  transition:opacity .6s ease;
}
.envelope.fade-out{ opacity:0; visibility:hidden; }

/* Scena interna: rispetta viewport reale, mantiene ratio */
.envelope-wrap{
  aspect-ratio:3 / 4;
  width:min(92dvw, 780px);
  height:85%;
  max-height:calc(100dvh - (var(--safe-top) + var(--safe-bottom) + 12px));
  margin:0 auto;
}

/* Card blu ex colore #8eafbc */
.envelope-body{
  --bg:#90b7d0;
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  border-radius:130px 130px 18px 18px;
  background:var(--bg);
  box-shadow:0 18px 36px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.08);
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:clamp(10px,2.2vmin,20px);
}

/* Titolo, pannello, sigillo, nome */
.envelope-title{
  position:absolute;
  top:32%; left:50%; transform:translateX(-50%);
  font-family:'KG_Only_Girlin_The_World', cursive;
  color:#fff; font-size:clamp(40px,8.6vw,69.5px);
  text-shadow:0 3px 8px rgba(0,0,0,.25);
  white-space:nowrap; z-index:60;
}
.inner-panel{
  position:absolute;
  width:73%;
  aspect-ratio:16/10;
  top:35%;
  left:50%;
  transform:translateX(-50%);
  /* fondo leggermente più scuro per far risaltare le pieghe */
  background:rgba(0,0,0,.12);
  border-radius:6px;
  /* ombre interne più forti */
  box-shadow:
          inset 0 14px 22px rgba(0,0,0,.30),
          inset 0 -10px 18px rgba(0,0,0,.18);
  overflow:visible;
}
.inner-panel::before,
.inner-panel::after{
  content:"";
  position:absolute;
  top:52%;
  width:40%;
  height:2px;
  pointer-events:none;
  /* linea sfumata: centro più scuro, estremi trasparenti */
  background:linear-gradient(to right, transparent, rgba(0,0,0,.45), transparent);
  filter:blur(.2px);
  opacity:.55;
}
.inner-panel::before{
  left:6%;
  transform:rotate(-18deg);
}
.inner-panel::after{
  right:6%;
  transform:rotate(18deg);
}

/* cucitura/linea orizzontale leggera */
.inner-panel{
  background-image:
          linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.10) 55%, transparent 56%);
  background-blend-mode:overlay;
}
.inner-panel .flap{
  position:absolute; inset:0;
  background:
          linear-gradient(to bottom right, rgba(0,0,0,.22), transparent 50%),
          linear-gradient(to top left, rgba(0,0,0,.18), transparent 50%);
  clip-path:polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  border-radius:6px; opacity:.85;
}

.seal{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width: clamp(90px, 17.5vmin, 150px);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));
  cursor:pointer; z-index:100; pointer-events:auto;
}

.envelope-name{
  position:absolute;
  left:50%;
  bottom:15%;
  transform:translateX(-50%);
  font-family:'Valentine Love', cursive;
  color:#fff; font-size:clamp(30px, 8vw, 71.5px);
  line-height:1; white-space:nowrap;
  text-shadow:0 5px 12px rgba(0,0,0,.28);
  z-index:60; pointer-events:none;
}

/* PNG decorativi */
.el{ position:absolute; user-select:none; pointer-events:none; z-index:10;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.08)); }
.bear-top   { width:35%; top:-18%; left:50%; transform:translateX(-50%); }
.balloons-top{ width:30%; top:1%; right:3%; z-index:0; }
.bear-right { width:23%; top:37%; right:-6.4%; }
.bear-left  { width:44%; left:-8%; bottom:-4%; z-index:8; }
.bear-br    { width:30%; right:-5%; bottom:-3%; }

/* Animazione intro della cover */
.envelope.intro .envelope-title,
.envelope.intro .el,
.envelope.intro .envelope-name{ animation:fadeUp .6s ease both; }
/*@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }*/

/* === INVITO (nascosto finché non apri) === */
.invitation-content{
  position:relative; width:100%;
  height:0; min-height:0; overflow:hidden;
  opacity:0; pointer-events:none; padding:0;
  background:url('images/sfondo2.webp') center/cover, #fefefe;
  transition:opacity 1s ease .6s;
  z-index:10;
}
.envelope.open ~ .invitation-content{
  height:auto;
  min-height:100dvh;                /* viewport reale anche su iPhone */
  padding:0 15px;
  opacity:1; pointer-events:auto;
}

/* --- Testi/RSVP ecc. (come tuo file) --- */
.invito-container{ text-align:center; }
.invito-illustrazione{ max-width:300px; width:65%; height:auto; margin-top:5px;}
.invito-testo h2{
  font-size:clamp(30px, 8vw, 71px);
  margin-bottom:0.3em;
  color:#4a7b9f;
  font-family:'Valentine Love', cursive;
}
.invito-testo p{
  font-size:1.3rem;
  color:#5A90B2;
  line-height:1.3em;
  margin-top:0.5em;
  margin-bottom: 1em;
  font-family:'Montserrat', cursive;
  font-feature-settings:"liga" 0;
  font-variant-ligatures:none;
}
.invito-testo p strong{
  font-size:1.3rem;
  color:#5A90B2;
  line-height:1.9;
  margin-bottom:1em;
  font-family:'Valentine Cute', cursive;
  font-feature-settings:"liga" 0;
  font-variant-ligatures:none;
}

.info-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0px;
  margin:5px 0;
  text-align:center;
}
.info-row-centered{
  display: flex;
  justify-content: center;
  align-items: center;                 /* ← era baseline: centra verticalmente */
  flex-wrap: nowrap;                   /* ← niente a capo */
  gap: clamp(12px, 4.5vw, 36px);       /* ← più spazio dal blocco centrale */
  text-align: center;
  font-family: 'KG_Only_Girlin_The_World', cursive;
  font-feature-settings: "liga" 0;
  font-variant-ligatures: none;
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
}
.weekday,.year{
  font-size:clamp(2rem,4.5vw,2.4rem);
  color:#5A90B2;
  border-top: 1px solid #5A90B2; /* linea superiore */
  border-bottom: 1px solid #5A90B2; /* linea inferiore */
  padding: 4px 0; /* spazio per non far toccare il testo alla linea */
}
.day-month{ display:flex; flex-direction:column; align-items:center; }
.big-day{ font-family:'KG_Only_Girlin_The_World', cursive; font-size:clamp(2.4rem,6vw,3rem); color:#5A90B2; line-height:1; }
.month{ font-size:clamp(2rem,4.5vw,2.4rem); color:#5A90B2; line-height:1; margin-top:2px; }
.time{ font-size:1.1rem; font-family:'Valentine Cute', sans-serif; color:#5A90B2; }

.luoghi{ display:flex; justify-content:center; gap:40px; margin:15px 0 15px; font-family:'Valentine Cute', sans-serif; }
.luoghi .col{ text-align:center; }
.luoghi a{ text-decoration:none; color:#4a7b9f; font-size:.8rem; transition:transform .2s ease; }
.luoghi a:hover{ transform:scale(1.1); }
.luoghi i{ font-size:2.6rem; margin-bottom:5px; color:#4a7b9f; }

.conferma-rsvp{ margin-top:0px; text-align:center; font-family:'Valentine Cute', cursive; font-feature-settings:"liga" 0; font-variant-ligatures:none; }
.rsvp-domanda{ font-size:.9rem; color:#5A90B2; font-weight:600; margin-bottom:5px; position:relative; }
.rsvp-domanda .cuori{ color:#5A90B2; font-size:.85rem; margin-left:4px; }
.rsvp-bottoni{ display:flex; justify-content:center; gap:20px; margin-bottom:15px; }
.rsvp-bottoni a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: bold;
  background: none;
  border: 2px solid #5A90B2; /* bordo del colore del testo */
  border-radius: 6px; /* leggermente arrotondato */
  padding: 2px 4px; /* margine interno ridotto per non avere un box troppo grande */
  color: #5A90B2;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
a.rsvp-si{
  padding-left: 2.2%;
  padding-right: 2.2%;
}
.rsvp-bottoni a:hover {
  border-color: #5A90B2;
  background-color: rgba(74, 123, 159, 0.1); /* leggero sfondo in hover */
}
.rsvp-scadenza{ font-size:.50rem; color:#5A90B2; margin-top:10px; }

#rsvp-form-container{ margin-top:30px; padding:30px; background:rgba(255,255,255,.8); border-radius:16px; max-width:500px; margin-left:auto; margin-right:auto; font-family:'Valentine Cute', cursive; font-feature-settings:"liga" 0; font-variant-ligatures:none; box-shadow:0 4px 10px rgba(0,0,0,.1); }
#rsvp-form-container label{ display:block; font-size:1.3rem; color:#5A90B2; margin-top:10px; margin-bottom:5px; }
#rsvp-form-container input, #rsvp-form-container textarea{ width:100%; padding:10px; font-size:1rem; margin-bottom:15px; border:1px solid #ccc; border-radius:12px; font-family:'Valentine Cute', cursive; font-feature-settings:"liga" 0; font-variant-ligatures:none; }
#rsvp-form-container button{ padding:12px 24px; font-size:1.1rem; background-color:#5A90B2; color:#fff; border:none; border-radius:30px; cursor:pointer; transition:background-color .3s ease; display:block; margin:20px auto 0; }
#rsvp-form-container button:hover{ background-color:#5A90B2; }
#rsvp-no-message{ text-align:center; font-family:'Valentine Cute', cursive; font-size:1.3rem; color:#5A90B2; margin-top:30px; }

.hidden{ display:none; }

/* Responsive extra */
@media (min-width:900px){
  .envelope-wrap{ max-width:min(88vw,780px); }
  .bear-right{ right:-14px; }
}

/* === Luoghi stile cartolina === */
/* === Blocco CHIESA / NOTA / LOCATION === */
.luoghi-pro{
  display:grid;
  grid-template-columns: 1fr auto 1fr;   /* sinistra | centro | destra */
  align-items:center;
  justify-items:center;
  gap: clamp(14px, 4vw, 28px);
  margin: 2px 0 4px;
  max-width: 680px;          /* simile allo screenshot */
  margin-inline: auto;
}

.luogo-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#3a3a3a;
  gap: 6px;
}
.luogo-link .ico{
  width: clamp(28px, 6vw, 40px);
  height:auto;
  color:#2c2c2c;             /* colore tratto icone */
}

.luogo-link .titolo{
  font-family:'Valentine Cute', cursive;
  font-feature-settings:"liga" 0; font-variant-ligatures:none;
  font-size: clamp(18px, 4.2vw, 26px);
  line-height:1.5;
  color:#5A90B2;             /* marrone caldo */
}
.luogo-link .ora{
  font-weight:700;
  font-size: clamp(14px, 3.6vw, 18px);
  color:#222;
  margin-top: 2px;
}

.luoghi-pro .nota{
  text-align:center;
  font-family:'Montserrat', cursive;
  font-feature-settings:"liga" 0; font-variant-ligatures:none;
  font-size: clamp(12px, 3.2vw, 16px);
  color:#5A90B2;
  line-height:1.15;
  margin:0;
}

/* — forziamo SEMPRE 3 colonne anche su smartphone — */
@media (max-width: 480px){
  .luoghi-pro{
    max-width: 360px;        /* stringe il blocco per farlo stare in 1 riga */
    gap: 10px;
  }
  .luogo-link .ico{ width: 26px; }
  .luogo-link .titolo{ font-size: 11px; line-height: 19px}
  .luogo-link .ora{ font-size: 13px; }
  .luoghi-pro .nota {
    font-size: 12px;
    line-height: inherit;
  }
}
.icona-luogo {
  width: 35px; /* regola la dimensione */
  height: auto;
  vertical-align: middle;
  margin-right: 8px;
}

.luoghi {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* così su smartphone va a capo se serve */
  text-align: center;
  font-family: 'Valentine Cute', sans-serif;
  font-size: 16px;
}

.luoghi a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}