/* Shared family theme entrypoint. Portal-specific CSS is loaded conditionally by the PHP layout. */
@import url("./tokens.css");
@import url("./layout.css");
@import url("./motion.css");

/* No admin or kids portal stylesheet is imported here by design. */

.cq-pwa-update-toast,
.cq-pwa-install-toast {
    position: fixed;
    z-index: 1200;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: min(360px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(138, 181, 255, 0.28);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(87, 147, 255, 0.22), transparent 42%),
        linear-gradient(180deg, rgba(10, 28, 68, 0.96), rgba(5, 15, 40, 0.98));
    color: #f8fbff;
    box-shadow:
        0 22px 48px rgba(0, 6, 20, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cq-pwa-update-toast.is-leaving,
.cq-pwa-install-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.cq-pwa-update-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cq-pwa-update-copy strong {
    font-size: 0.95rem;
    line-height: 1.1;
}

.cq-pwa-update-copy p {
    margin: 0;
    color: rgba(218, 230, 255, 0.78);
    font-size: 0.8rem;
    line-height: 1.25;
}

.cq-pwa-update-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cq-pwa-update-actions button {
    min-height: 36px;
    border: 1px solid rgba(144, 188, 255, 0.28);
    border-radius: 999px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.cq-pwa-update-refresh,
.cq-pwa-install-action {
    padding: 0 13px;
    background: linear-gradient(180deg, rgba(94, 151, 255, 0.98), rgba(42, 95, 226, 0.98));
    color: #ffffff;
}

.cq-pwa-update-later {
    width: 42px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(233, 241, 255, 0.88);
}

@media (max-width: 520px) {
    .cq-pwa-update-toast,
    .cq-pwa-install-toast {
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        width: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .cq-pwa-update-actions {
        justify-content: stretch;
    }

    .cq-pwa-update-refresh,
    .cq-pwa-install-action {
        flex: 1 1 auto;
    }
}