:root {
    --color-rose: #d6a8a8;
    --color-rose-hover: #c49292;
    --color-bg-base: #f9f5f2;
}

body {
    position: relative; 
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: #4a4a4a;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    filter: blur(5px);
    
    z-index: -1; 
}

/* --- TIPOGRAFIA --- */
.font-playfair { font-family: 'Playfair Display', serif; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-script { font-family: 'Great Vibes', cursive; }
.tracking-wide { letter-spacing: 2px; }
.text-rose { color: var(--color-rose); }

/* ==========================================
   BUSTA ANIMATA (PEEK ON HOVER, OPEN ON CLICK)
   ========================================== */
.envelope-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(250, 246, 244, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999;
    transition: opacity 1s ease, visibility 1s;
}
.envelope-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.envelope-wrapper { 
    position: relative; width: 380px; height: 270px; margin-top: -30px; z-index: 10; 
    cursor: pointer; 
    border-radius: 5px;
	perspective: 1200px;
}
.envelope { position: absolute; width: 100%; height: 100%; }
.envelope-back { position: absolute; width: 100%; height: 100%; background: #dccbc2; border-radius: 5px; }

.envelope-flap-top {
    position: absolute; top: 0; left: 0; width: 100%; z-index: 4;
    transform-origin: top center; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}
.envelope-flaps-side, .envelope-flap-bottom {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 3;
}
.letter-container {
    position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    background: #fff; z-index: 2; border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.envelope-seal {
    position: absolute; bottom: 35%; left: 50%; transform: translateX(-50%);
    width: 45px; height: 45px; background: #b86b6b; border-radius: 50%;
    z-index: 6; color: white; 
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* STATO 1: HOVER (Sbirciare) */
@media (hover: hover) {
.envelope-wrapper:hover:not(.open) .envelope-flap-top { 
    transform: rotateX(45deg); 
}
.envelope-wrapper:hover:not(.open) .letter-container { 
    transform: translateY(-25px); 
}
.envelope-wrapper:hover:not(.open) .envelope-seal { 
    transform: translateX(-50%) scale(1.1); 
}
}

/* STATO 2: CLICK (Apertura) */
.envelope-wrapper.open .envelope-flap-top { transform: rotateX(180deg); z-index: 1; }
.envelope-wrapper.open .letter-container { transform: translateY(-180px); z-index: 5; }
.envelope-wrapper.open .envelope-seal { opacity: 0; transform: translateX(-50%) scale(0); }

/* ==========================================
   GLASSMORPHISM & UI DESIGN
   ========================================== */
.glass-box {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    max-width: 850px;
}

.glass-input {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255,255,255, 0.9) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    color: #4a4a4a !important;
    transition: all 0.3s;
}
.glass-input:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--color-rose) !important;
    box-shadow: 0 0 0 0.25rem rgba(214, 168, 168, 0.25) !important;
}

/* BOTTONI */
.btn-rose { 
    background-color: var(--color-rose); color: white; border: none; 
}
.btn-rose:hover { background-color: var(--color-rose-hover); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(214, 168, 168, 0.4); }

.btn-outline-rose { border: 1px solid var(--color-rose); color: var(--color-rose); background: transparent;}
.btn-outline-rose:hover { background-color: var(--color-rose); color: white; }

.heart-divider i { font-size: 0.9rem; }

/* FIX RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .glass-box { padding: 30px 20px !important; border-radius: 30px !important; }
    .envelope-wrapper { transform: scale(0.85); }
    .font-script.display-2 { font-size: 3.5rem; }
    .w-md-auto { width: 100% !important; }
}
/* ==========================================================================
   Stile Polaroid per Foto Sposi
   ========================================================================== */

.polaroid-photo {
    background-color: #ffffff;
    padding: 10px 10px 45px 10px; /* Aumentato spazio sotto per effetto Polaroid */
    border: 1px solid #e0e0e0;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    
    /* MODIFICHE QUI */
    width: 100%;           /* Prende tutta la larghezza del contenitore */
    max-width: 280px;      /* Forza la dimensione massima */
    height: auto;
    display: block;
}

/* Applica la rotazione al contenitore, non all'immagine */
.polaroid-container {
    display: inline-block;
    margin: 20px auto;
    transform: rotate(5deg);
    max-width: 280px;      /* Coerenza con la foto */
}