@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@400;500;600&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f0ece3;
    color: #1F2A44;
    perspective: 1000px;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
}

.passport-container {
    perspective: 1500px;
}

.passport {
    transform-style: preserve-3d;
    transition: transform 1.2s ease;
}

.passport.open {
    transform: rotateY(-180deg);
}

.passport-cover, .passport-inside {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.passport-cover {
    background-color: #4B1248;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23632b60' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 2;
}

.passport-inside {
    background-color: #e8e1d9;
    transform: rotateY(180deg);
    z-index: 1;
    overflow-y: auto;
}

.page {
    background-color: #f8f5f2;
    border: 1px solid #d3ccc1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.07;
    z-index: 0;
    width: 80%;
    height: 80%;
    pointer-events: none;
}

.button {
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 18, 72, 0.15);
}

.stamp {
    position: absolute;
    bottom: 20px;
    right: 30px;
    transform: rotate(-5deg);
    opacity: 0.9;
}

.paw-print {
    position: absolute;
    width: 30px;
    height: 30px;
    opacity: 0.2;
}

.emblem {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

.gold-foil {
    background: linear-gradient(45deg, #d4af37 0%, #f9f295 50%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}

.page-number {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #888;
}

.signature-line {
    border-bottom: 1px solid #1F2A44;
    margin-top: 30px;
    position: relative;
}

.signature-text {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 10px;
}