/* RSVP QR Code Generator - Custom Styles */

/* QR display card animation */
.qr-display-card {
    animation: qrCardAppear 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px) scale(0.97);
}

@keyframes qrCardAppear {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* QR image animation */
.qr-image {
    animation: qrImagePulse 0.8s ease-out 0.3s forwards;
    opacity: 0;
    transform: scale(0.8);
}

@keyframes qrImagePulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* QR Frame Styles */
.qr-frame {
    background: #fffbeb;
    border: 2px solid #e5e1d0;
    position: relative;
}

.qr-frame-classic {
    background: linear-gradient(135deg, #fefce8, #fffbeb);
    border: 3px solid #7c2d12;
    box-shadow: inset 0 0 0 2px #fef3c7, 0 4px 12px rgba(124, 45, 18, 0.1);
}

.qr-frame-modern {
    background: #f9fafb;
    border: 2px solid #d1d5db;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.qr-frame-floral {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border: 3px solid #be185d;
    box-shadow: inset 0 0 0 2px #fbcfe8, 0 4px 12px rgba(190, 24, 93, 0.1);
}

.qr-frame-floral::before,
.qr-frame-floral::after {
    content: '✿';
    position: absolute;
    font-size: 1.25rem;
    color: #be185d;
    opacity: 0.6;
}

.qr-frame-floral::before {
    top: 8px;
    left: 12px;
}

.qr-frame-floral::after {
    bottom: 8px;
    right: 12px;
}

/* Result section entrance */
.results-appear {
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style selector cards */
.style-option {
    transition: all 0.3s ease;
}

.style-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 45, 18, 0.1);
}

.style-option.selected {
    border-color: #7c2d12;
    background-color: #fef7f0;
}

/* Download button hover effect */
.qr-display-card a:hover {
    transform: translateY(-1px);
}