/* === ReadFy Update Notification Banner Styles === */

:root {
    --color-primario: #5867dd;
    --color-secundario: #ffffff;
    --color-texto-principal: #2d3748;
    --color-acento: #34d399;
    --border-radius-main: 12px;
    --shadow-strong: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

.update-notification-banner {
    position: fixed;
    bottom: -100px; /* Start off-screen */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem); /* Full width minus some padding */
    max-width: 600px; /* Max width on larger screens */
    background-color: var(--color-primario);
    color: var(--color-secundario);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-main) var(--border-radius-main) 0 0; /* Rounded top corners */
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column; /* Stack items vertically on small screens */
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    z-index: 10002; /* Above most content */
    transition: bottom 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth slide-in */
    text-align: center;
}

.update-notification-banner.show {
    bottom: 0; /* Slide in */
}

.update-notification-banner p {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.5;
}

.update-notification-banner .btn-update-now {
    background-color: var(--color-acento);
    color: var(--color-secundario);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap; /* Prevent button text wrapping */
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0; /* Prevent button shrinking */
}

.update-notification-banner .btn-update-now:hover {
    background-color: #2aa879;
    transform: translateY(-1px);
}

/* Responsive adjustments for larger screens */
@media (min-width: 500px) {
    .update-notification-banner {
        flex-direction: row; /* Side-by-side layout */
        text-align: left;
        padding: 1rem 1.5rem; /* Adjust padding if needed */
        gap: 1.5rem;
    }

     .update-notification-banner p {
        font-size: 1rem;
    }
}