/* ========================================= */
/* GALLERY SPECIFIC STYLES                   */
/* ========================================= */

.gallery-body {
    margin: 0; padding: 0; 
    background-color: #0B0C10; /* Dark premium base */
    min-height: 100vh; overflow-x: hidden;
}

.gallery-wrapper {
    position: relative; min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 120px 20px 60px;
}

/* --- THE NEW DESIGN ELEMENT (Replaces img1.png) --- */
.gallery-bg-image {
    position: absolute; inset: 0; z-index: 0;
    /* Uses a heavy dark gradient over an image to look like a high-end photography studio */
    background: linear-gradient(rgba(11, 12, 16, 0.85), rgba(11, 12, 16, 0.95)), url('../images/bg-silk-drape.webp') center/cover;
}

.gallery-ambient {
    position: absolute; width: 400px; height: 400px; 
    background: rgba(212, 175, 55, 0.15); border-radius: 50%; 
    filter: blur(100px); top: 10%; left: 50%; transform: translateX(-50%); 
    z-index: 1; pointer-events: none;
}

/* --- LAYER 1: Lock Screen --- */
.pin-screen { 
    position: fixed; inset: 0; background: url('../images/bg-charcoal-rsvp.webp') center/cover; 
    z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; 
}
.pin-screen::before { 
    content: ''; position: absolute; inset: 0; 
    background: rgba(0,0,0,0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
}
.pin-box { position: relative; z-index: 10000; padding: 40px 20px; width: 100%; max-width: 400px; }
.pin-box h2 { color: var(--gold-accent); margin-bottom: 15px; font-size: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 15px;}
.pin-box p { color: #E8DFD5; margin-bottom: 30px; font-size: 1.1rem; }
#lock-icon { font-size: 2rem; transition: all 0.4s ease; }

/* OTP Inputs */
.otp-container { 
    display: flex; 
    gap: 12px; 
    justify-content: center; 
    margin-bottom: 20px;
    flex-wrap: wrap; 
}
.otp-input { 
    width: 55px; height: 70px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 12px; color: var(--gold-accent); font-size: 2.5rem; text-align: center; font-family: 'Playfair Display', serif; 
    outline: none; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: all 0.3s ease; -webkit-appearance: none;
}
.otp-input:focus { 
    border-color: var(--gold-accent); background: rgba(255,255,255,0.1); 
    transform: translateY(-5px); box-shadow: 0 15px 25px rgba(212, 175, 55, 0.15); 
}
.error-msg { color: #ff6b6b; font-size: 0.95rem; opacity: 0; transition: opacity 0.3s; font-weight: bold; }

/* --- LAYER 2: Albums Screen --- */
.albums-screen { display: none; width: 100%; max-width: 900px; z-index: 2; opacity: 0; position: relative; }
.album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 50px; perspective: 1000px; }

/* Cards are now divs instead of links */
.album-card { 
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px; text-align: center; 
    color: #FFF; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    cursor: pointer; position: relative;
    /* Add touch-action for better mobile tap handling */
    touch-action: manipulation; 
}

.album-icon-wrapper { 
    width: 90px; height: 90px; margin: 0 auto 25px; 
    background: rgba(212, 175, 55, 0.15); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 1px solid rgba(212, 175, 55, 0.3);
}
.album-icon-wrapper i { font-size: 2.2rem; color: var(--gold-accent); }
.album-card h3 { font-size: 2rem; margin-bottom: 15px; color: #FFF; font-family: 'Playfair Display', serif; }
.album-card p { color: #CCC; font-size: 1.05rem; margin-bottom: 30px; line-height: 1.6; }

/* The Dedicated Link Button */
.action-btn { position: relative; z-index: 5; margin-top: 10px; }

@media(max-width: 768px) { 
    .album-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; } 
    .album-card { padding: 30px 20px; }
    
    /* Shrink the gap and the boxes slightly so longer PINs fit better */
    .otp-container { gap: 8px; }
    .otp-input { 
        width: 45px; 
        height: 55px; 
        font-size: 1.5rem; 
    }
}