/* Cruise Fare Tracker - Custom Styles */

/* These styles complement Tailwind CSS */

/* Smooth page transitions */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus ring customization */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #0369a1;
    outline-offset: 2px;
}

/* Chart.js responsive container */
.chart-container {
    position: relative;
    width: 100%;
}

/* Leaflet map customizations */
.leaflet-container {
    font-family: inherit;
}

.leaflet-popup-content-wrapper {
    border-radius: 8px;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Mobile-specific touch improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch devices */
    button,
    [type="button"],
    [type="submit"],
    [type="reset"],
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better spacing for touch */
    .btn,
    button,
    a {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Prevent double-tap zoom on form elements */
    input,
    textarea,
    select,
    button {
        touch-action: manipulation;
    }
}

/* Mobile navigation improvements */
.mobile-menu-open {
    overflow: hidden;
}

/* Responsive cruise card hover effects */
@media (hover: hover) {
    .cruise-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    }
}

/* Print styles */
@media print {
    nav,
    footer,
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }

    .cruise-card {
        break-inside: avoid;
    }
}