/* PWA Install Modal Styles */

/* Modal backdrop */
#install-modal {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Modal content animations */
.modal-content {
    border-radius: 10px 10px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content.translate-y-0 {
    transform: translateY(0);
}

/* Button hover effects */
#install-confirm:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .modal-content {
        margin: 0 16px 16px 16px;
        border-radius: 16px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .modal-content {
        background-color: #1f2937;
        color: #f9fafb;
    }

    .modal-content h3 {
        color: #f9fafb;
    }

    .modal-content p {
        color: #d1d5db;
    }

    #install-close {
        color: #9ca3af;
    }

    #install-close:hover {
        color: #d1d5db;
    }

    #install-close-secondary {
        color: #9ca3af;
    }

    #install-close-secondary:hover {
        color: #f9fafb;
    }

    .text-gray-500 {
        color: #9ca3af;
    }
}

/* Animation for the icon */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

.modal-content .bg-blue-500 {
    animation: pulse-glow 2s infinite;
}

/* Smooth transitions for all interactive elements */
button,
.modal-content {
    transition: all 0.2s ease-in-out;
}

/* Focus states for accessibility */
#install-confirm:focus,
#install-close:focus,
#install-close-secondary:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading state for install button */
#install-confirm.loading {
    opacity: 0.7;
    pointer-events: none;
}

#install-confirm.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive text sizing */
@media (max-width: 480px) {
    .modal-content h3 {
        font-size: 1.125rem;
    }

    .modal-content p {
        font-size: 0.875rem;
    }

    .modal-content button {
        font-size: 0.875rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modal-content {
        border: 2px solid #000;
    }

    #install-confirm {
        border: 2px solid #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .modal-content,
    button,
    .bg-blue-500 {
        animation: none;
        transition: none;
    }
}