/* Placeholder Container Styles */
.gv-absolute { position: absolute; pointer-events: none; user-select: none; }

/* 1. DRIFT FALL (For Snow/Candy Canes) */
@keyframes gv-anim-drift-fall {
    0% { transform: translateY(0) translateX(0) rotate(0deg); }
    100% { transform: translateY(115vh) translateX(60px) rotate(360deg); }
}
.gv-animate-drift-fall { animation: gv-anim-drift-fall linear infinite alternate; }

/* 2. PENDULUM (For Swinging Bells/Ornaments) */
@keyframes gv-anim-pendulum {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(18deg); }
}
.gv-animate-pendulum { animation: gv-anim-pendulum ease-in-out infinite; transform-origin: top center; }

/* 3. SPIRAL (For Corkscrew/DNA falling) */
@keyframes gv-anim-spiral {
    0% { transform: translateY(0) rotate(0deg) translateX(-40px); }
    50% { transform: translateY(50vh) rotate(180deg) translateX(40px); }
    100% { transform: translateY(115vh) rotate(360deg) translateX(-40px); }
}
.gv-animate-spiral { animation: gv-anim-spiral linear infinite; }

/* 4. SHIMMER (For Twinkling Stars) */
@keyframes gv-anim-shimmer {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.1); filter: brightness(1.4); }
}
.gv-animate-shimmer { animation: gv-anim-shimmer ease-in-out infinite; }



/* Float Animation */
@keyframes gv-anim-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* Adjust height of float */
    100% { transform: translateY(0); }
}
.gv-animate-float {
    animation: gv-anim-float 4s ease-in-out infinite alternate;
}




/* Fade In/Out Animation */
@keyframes gv-anim-fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
.gv-animate-fade {
    animation: gv-anim-fade 3s ease-in-out infinite alternate;
}
/* If you only want a fade-in and then stay visible, remove 'alternate' and set fill-mode */
@keyframes gv-anim-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.gv-animate-fade-in {
    animation: gv-anim-fade-in 1s ease-out forwards; /* 'forwards' keeps the end state */
}




/* Wobble Animation */
@keyframes gv-anim-wobble {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15% { transform: translateX(-5px) rotate(-3deg); }
    30% { transform: translateX(5px) rotate(3deg); }
    45% { transform: translateX(-3px) rotate(-2deg); }
    60% { transform: translateX(3px) rotate(2deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
}
.gv-animate-wobble {
    animation: gv-anim-wobble 2.5s ease-in-out infinite;
}




/* Zoom Animation */
@keyframes gv-anim-zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); } /* Adjust max scale */
    100% { transform: scale(1); }
}
.gv-animate-zoom {
    animation: gv-anim-zoom 2s ease-in-out infinite alternate;
}






/* Slide Right to Left Animation */
@keyframes gv-anim-slide-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); } /* Slides an element its own width to the left */
}
.gv-animate-slide-left {
    animation: gv-anim-slide-left 8s linear infinite; /* Adjust duration for speed */
}

/* Slide Up & Down (for main icon) */
@keyframes gv-anim-slide-up-down {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
.gv-animate-slide-up-down {
    animation: gv-anim-slide-up-down 3s ease-in-out infinite alternate;
}


/* Blink/Flash Animation */
@keyframes gv-anim-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.gv-animate-flash {
    animation: gv-anim-flash 0.8s steps(1, end) infinite; /* steps(1, end) makes it instantly visible/invisible */
}






/* 5. Bounce Animation for the main card icon */
@keyframes gv-anim-main-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.gv-animate-main-bounce {
    animation: gv-anim-main-bounce 1s ease-in-out infinite alternate;
}

/* 6. Spin Animation  for the main card icon */
@keyframes gv-anim-main-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.gv-animate-main-spin {
    animation: gv-anim-main-spin 2s linear infinite;
}

/* 7. Pulse Animation  for the main card icon  */
@keyframes gv-anim-main-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
.gv-animate-main-pulse {
    animation: gv-anim-main-pulse 1.5s ease-in-out infinite;
}

/* 8. PENDULUM for the main card icon */
@keyframes gv-anim-main-pendulum {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(18deg); }
}
.gv-animate-main-pendulum {
    animation: gv-anim-main-pendulum 1.8s ease-in-out infinite alternate;
    transform-origin: top center;
}








@keyframes fall { to { transform: translateY(100vh) rotate(360deg); } }
@keyframes twinkle {
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    25% { opacity: 1; transform: scale(1.5) rotate(90deg); }
    50% { opacity: 0.3; transform: scale(0.8) rotate(180deg); }
    75% { opacity: 1; transform: scale(1.3) rotate(270deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(360deg); }
}
@keyframes bounce {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-40px) rotate(10deg); }
    50% { transform: translateY(-80px) rotate(-10deg); }
    75% { transform: translateY(-40px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    75% { transform: rotate(15deg) scale(1.1); }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.animate-fall { animation: fall 8s linear infinite; }
.animate-twinkle { animation: twinkle 1s ease-in-out infinite; }
.animate-bounce-custom { animation: bounce 1.5s ease-in-out infinite; }
.animate-fadeIn { animation: fadeIn 0.6s ease-out; }

/* UNIVERSAL ICON RESET */
.icon-snowflake, .icon-sparkle, .icon-gift, .icon-tree, .icon-popper, .icon-bell {
    display: inline-block !important;
}

/* THEME ICON ASSIGNMENTS */
.icon-snowflake { animation: spin-slow 10s linear infinite; }
.icon-sparkle { animation: pulse-glow 1.5s ease-in-out infinite; }
.icon-gift { animation: wiggle 2s ease-in-out infinite; }
.icon-tree { animation: wiggle 2s ease-in-out infinite; }
.icon-popper { animation: pulse-glow 1.5s ease-in-out infinite; }
.icon-bell { animation: wiggle 2s ease-in-out infinite; }

/* PDF & PRINT OPTIMIZATION */
@page { margin: 0; } /* Keep this, removes default page margins */

@media print {
    /* --- General Print Overrides --- */
    body {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
        -webkit-print-color-adjust: exact !important; /* Ensure background colors print */
        print-color-adjust: exact !important;
        min-height: 100vh; /* Ensure body takes full page height in print */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Pushes card content to top, footer to bottom */
    }
    #app, #app > div {
        background: white !important;
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* Allows #app to grow and fill available space above the footer */
        min-height: 0; /* Critical for flex items: prevents them from taking more space than allotted */
    }
    .no-print { display: none !important; }

    /* --- Card Container Styling (.max-w-4xl wrapper for renderCardDisplay) --- */
    .max-w-4xl {
        width: 100% !important;
        max-width: none !important; /* Allow it to use full print width */
        margin: 0 !important;
        padding: 0 !important;
        flex-grow: 1; /* Allows this container to take all remaining space within #app */
        display: flex;
        flex-direction: column;
        min-height: 0; /* Critical for flex items */
    }

    /* --- Gradient Background (the actual card background) --- */
    .bg-gradient-to-br {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        border-radius: 0 !important; /* No rounded corners for print */
        min-height: auto !important; /* Allow height to be determined by flexible content */
        flex-grow: 1; /* This gradient area fills the available space within .max-w-4xl */
        page-break-inside: avoid !important; /* Keep the card's main gradient section on one page */
        display: flex;
        flex-direction: column; /* Stack content vertically */
        justify-content: flex-start; /* IMPORTANT: Align content to the TOP of the gradient */
        align-items: center; /* Center horizontally if white box is narrower than 100% */
        padding: 0 !important; /* No padding here; managed on inner element */
    }

    /* --- The wrapper div inside the gradient that contains the white message box --- */
    /* This targets: <div class="relative z-10 p-8 md:p-12 flex flex-grow flex-col items-center justify-center text-center"> */
    /* This is the container that will hold the white card, and its height must be constrained */
    .bg-gradient-to-br > div.relative.z-10 {
        flex-grow: 0 !important; /* Prevent it from taking all available space */
        flex-shrink: 1; /* Allow it to shrink if necessary */
        width: 100%; /* Ensure it spans the full width of its parent */
        box-sizing: border-box;
        padding: 0 !important; /* Remove internal padding from HTML element */

        /* --- Vertical Positioning and Spacing Control --- */
        margin-top: 2.5rem !important; /* Creates the desired top gradient margin (40px) */
        margin-bottom: auto !important; /* Pushes this element to the top, forcing remaining gradient space to bottom */

        /* --- Max Height Calculation --- */
        /* Total vertical space for footer (content + margins) estimated at 130px.
           We add 2.5rem (40px) for the 'margin-top' we just defined.
           So, total to subtract from 100vh = 130px + 40px = 170px. */
        max-height: calc(100vh - 170px) !important;
        
        display: flex; /* Ensure it's a flex container for its children */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Align internal content to the top */
        min-height: 0; /* Critical for flex items */
    }

    /* --- White Content Box (where text and icon are) --- */
    .max-w-4xl .bg-white.rounded-xl {
        max-width: 95% !important; /* Adjust this percentage as needed for desired width */
        width: auto !important;
        margin: 0 auto !important; /* Center the white box horizontally */
        padding: 1.5rem !important; /* Generous padding for print legibility */
        box-shadow: none !important; /* Remove shadows for print */
        border: 1px solid #eee !important; /* Add a subtle border for definition */
        border-radius: 0.75rem !important; /* Rounded corners back! (Adjust value if needed) */
        box-sizing: border-box !important;

        /* Critical: Make this a flex container to manage its internal content's height */
        display: flex;
        flex-direction: column;
        flex-grow: 0; /* Prevent it from growing beyond its content needs */
        flex-shrink: 1; /* Allow it to shrink if its parent constrains it */
        max-height: 90% !important; /* Take full height of its constrained parent (div.relative.z-10) */
        overflow: hidden !important; /* THIS IS WHERE THE CLIPPING HAPPENS FOR THE ENTIRE WHITE BOX IF NEEDED */
        min-height: 0; /* Critical for flex items */

        /* --- Internal Spacing Adjustments --- */
        /* Target direct children specifically to manage their flex behavior and margins */
        & > div.text-6xl { /* Targets the icon div */
            flex-shrink: 0; /* Prevents icon from shrinking */
            margin-bottom: 0.5rem !important;
            margin-top: 0 !important; /* Ensure no top margin pushing it out */
        }
        & > h2 { /* Targets the H2 element */
            flex-shrink: 0; /* Prevents H2 from shrinking */
            margin-bottom: 0.5rem !important;
            margin-top: 0 !important; /* Ensure no top margin pushing it out */
        }
        & > p { /* Targets message and sign-off paragraphs */
            flex-grow: 1; /* Allow message paragraphs to grow if space permits */
            flex-shrink: 1; /* Allow message paragraphs to shrink */
            overflow: hidden !important; /* Only clip message text if overall white box overflows */
            margin-bottom: 0.8rem !important;
            min-height: 0; /* Critical for flex items */
            margin-top: 0 !important; /* Ensure no top margin pushing it out */
        }
    }

    /* --- Branding Footer Styling (Logo and Metadata) --- */
    .branding-footer {
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px; /* Spacing between logo and metadata */
        page-break-inside: avoid !important; /* Keep logo and metadata together */
        flex-shrink: 0; /* Prevent the footer from shrinking */
        margin-top: 25px !important; /* Margin from the card content */
        margin-bottom: 25px !important; /* Margin from the bottom of the page */
        min-height: 0; /* Critical for flex items */
    }
    .branding-footer .made-with {
        display: flex !important;
        align-items: center;
        gap: 4px;
        font-size: 11px !important;
        color: #666;
        margin-bottom: 0 !important;
    }
    .branding-footer img {
        height: 16px !important;
        width: auto !important;
    }
    .metadata-info:not(.hide-print-metadata) {
        display: block !important;
        font-size: 9px;
        color: #999;
        text-align: center;
        line-height: 1.4;
    }
    .metadata-info.hide-print-metadata {
        display: none !important;
    }
}

/* NEW/UPDATED GLOBAL BRANDING FOOTER STYLES (outside @media print) */
.branding-footer {
    display: flex;         /* Use flexbox for layout */
    flex-direction: column; /* Stack direct children vertically (made-with and metadata) */
    align-items: center;   /* Center children horizontally within the footer */
    margin-top: 1.5rem;    /* Equivalent of Tailwind's mt-6 */
    padding-bottom: 2rem;  /* Equivalent of Tailwind's pb-8 */
}
.branding-footer .made-with {
    display: flex;        /* Make the "made-with" div itself a flex container */
    align-items: center;  /* Vertically align the text and logo within "made-with" */
    gap: 4px;             /* Space between the text and logo */
    font-size: 14px;      /* Default font size for screen */
    color: #666;
}
.branding-footer img {
    height: 24px; /* Screen size for logo (from previous fix) */
    width: auto;
}
.metadata-info { display: none; } /* Still hides metadata on screen */

/* FOOTER TABS STYLES */
.footer-tabs-container {
    width: 100%;
    max-width: 900px; /* Adjust max-width as needed */
    margin: 100px auto; /* Centered with vertical spacing */
    background-color: #f8f8f8;
    border-radius: 10px; /* Slightly rounded corners for the whole container */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Ensures rounded corners are visible */
    border: 1px solid #eee; /* Light border around the whole component */
    font-family: Arial, sans-serif; /* Example font */
}
.footer-tabs-headers {
    display: flex; /* Arrange buttons horizontally */
    justify-content: center; /* Center the tabs within the header */
    background-color: #e0e0e0; /* Background for the header row */
    border-bottom: 1px solid #ccc; /* Separator line below headers */
    padding: 0;
}
.footer-tab-header {
    background: none;
    border: none;
    padding: 15px 25px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #555;
    transition: all 0.3s ease; /* Smooth transitions for hover/active states */
    flex-grow: 1; /* Allows tabs to grow and fill available space */
    text-align: center; /* Center text within each tab */
    border-right: 1px solid rgba(0,0,0,0.05); /* Subtle separator between tabs */
    white-space: nowrap; /* Prevent tab names from wrapping */
}
.footer-tab-header:last-child {
    border-right: none; /* No separator after the last tab */
}
.footer-tab-header:hover {
    background-color: #d0d0d0;
    color: #222;
}
.footer-tab-header.active {
    background-color: #ffffff; /* Active tab background */
    color: #333;
    font-weight: 600;
    border-bottom: 3px solid #60a5fa; /* Blue accent line under active tab */
    position: relative; /* Needed for z-index to bring active tab forward */
    z-index: 1; /* Brings active tab slightly forward to cover border */
}
.footer-tabs-content-area {
    padding: 25px;
    background-color: #ffffff; /* Content area background */
    border-top: 1px solid #e0e0e0; /* Border above content area */
    color: #444;
    line-height: 1.7; /* Improved readability for text */
    font-size: 0.95rem;
}
.footer-tab-content {
    display: none; /* Hide all content by default */
    /* Add some padding-top/bottom here if you want space between content and header/footer area */
}
.footer-tab-content.active {
    display: block; /* Show active content */
}
/* Make sure footer tabs are not printed */
@media print {
    .footer-tabs-container {
        display: none !important;
    }
}