/**
 * NapoliGaribaldi Theme - Custom Styles
 * Complementa Tailwind CSS con stili personalizzati
 */

/* Leaflet map controls - keep below navbar */
.leaflet-container {
    z-index: 1 !important;
}
.leaflet-control-container {
    z-index: 400 !important;
}
.leaflet-top,
.leaflet-bottom {
    z-index: 400 !important;
}
.leaflet-pane {
    z-index: 1 !important;
}

/* Alpine.js cloak - nascondi elementi finché Alpine non è pronto */
[x-cloak] {
    display: none !important;
}

/* ================================
   CSS Variables
   ================================ */
:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-secondary: #10b981;
    --color-accent: #f59e0b;
    --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-card-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ================================
   Base Styles
   ================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ================================
   Alpine.js Utilities
   ================================ */
[x-cloak] {
    display: none !important;
}

/* Hide scrollbar utility */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* ================================
   Date Input - Hide Native Calendar Icon
   ================================ */
/* Target date inputs inside flex wrapper */
input[type="date"] {
    /* Reset appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Hide the native calendar picker icon in Chrome/Edge/Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* Hide spin and clear buttons */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
    display: none;
}

/* ================================
   Custom Scrollbar
   ================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ================================
   Animations
   ================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* ================================
   Card Styles
   ================================ */
.structure-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.structure-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.structure-card img {
    transition: transform 0.5s ease;
}

.structure-card:hover img {
    transform: scale(1.05);
}

/* ================================
   Search Form Enhancements
   ================================ */
.search-input {
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    border-color: var(--color-primary);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Date inputs custom styling */
input[type="date"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 12px;
    opacity: 0;
    cursor: pointer;
}

/* ================================
   Type Filter Pills
   ================================ */
.type-pill {
    transition: all 0.2s ease;
}

.type-pill:hover {
    transform: translateY(-1px);
}

.type-pill.active {
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

/* ================================
   Price Display
   ================================ */
.price-tag {
    position: relative;
}

.price-tag::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #10b981, #059669);
    border-radius: 2px;
}

/* OTA Price comparison */
.ota-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* ================================
   Gallery Styles
   ================================ */
.gallery-container {
    position: relative;
    overflow: hidden;
}

.gallery-image {
    transition: opacity 0.3s ease;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.gallery-nav:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gallery-nav.prev { left: 16px; }
.gallery-nav.next { right: 16px; }

.gallery-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.gallery-dot.active {
    background: white;
    transform: scale(1.2);
}

/* ================================
   Skeleton Loading
   ================================ */
.skeleton {
    background: linear-gradient(
        90deg,
        #f1f5f9 0%,
        #e2e8f0 50%,
        #f1f5f9 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================
   Responsive Utilities
   ================================ */
@media (max-width: 640px) {
    .search-form-mobile {
        flex-direction: column;
    }
    
    .type-filters-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .type-filters-mobile::-webkit-scrollbar {
        display: none;
    }
}

/* ================================
   Print Styles
   ================================ */
@media print {
    header, footer, .no-print {
        display: none !important;
    }
    
    .structure-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ================================
   Accessibility
   ================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .structure-card {
        border: 2px solid currentColor;
    }
    
    .type-pill {
        border: 2px solid currentColor;
    }
}

/* ================================
   Cross-browser Date Input Styles
   ================================ */

/* Base date input styles - normalizza l'aspetto su tutti i browser */
input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 44px; /* Touch target minimo iOS */
    color: #1e293b;
    background-color: transparent;
}

/* iOS Safari - rimuovi stili nativi */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    padding: 0;
}

/* iOS Safari - nascondi placeholder nativo quando vuoto */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 2px;
}

/* Chrome/Edge - icona calendario */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    padding: 4px;
    margin-left: 4px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Firefox - rimuovi stili nativi */
input[type="date"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Placeholder style per date vuote */
input[type="date"]:not(:valid)::-webkit-datetime-edit {
    color: #94a3b8;
}

/* Mobile touch improvements */
@media (max-width: 768px) {
    input[type="date"] {
        font-size: 16px; /* Previene zoom automatico su iOS */
        min-height: 48px;
    }
}

/* Date input container - stile uniforme */
.date-input-container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    min-height: 44px;
}

.date-input-container:focus-within {
    border-color: #3b82f6;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input-container .date-icon {
    padding-left: 1rem;
    padding-right: 0.5rem;
    color: #94a3b8;
    pointer-events: none;
    flex-shrink: 0;
}

.date-input-container input[type="date"] {
    flex: 1;
    padding: 0.75rem 1rem 0.75rem 0;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    min-height: 44px;
}

/* Mobile: padding ridotto quando non c'è icona */
@media (max-width: 768px) {
    .date-input-container input[type="date"] {
        padding-left: 0.75rem;
    }
    
    .date-input-container .date-icon + .relative input[type="date"],
    .date-input-container .date-icon + div input[type="date"] {
        padding-left: 0;
    }
}

/* Placeholder overlay per date input vuoti */
.date-input-container .relative > span[x-show] {
    font-size: 14px;
}

@media (max-width: 768px) {
    .date-input-container .relative > span[x-show] {
        font-size: 12px;
    }
}

/* ================================
   Article Content Styles
   ================================ */

/* Tabelle stilizzate */
.article-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.article-content thead {
    background: linear-gradient(to right, #1e40af, #3b82f6);
}

/* Header cells - funziona sia con che senza thead */
.article-content th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background: linear-gradient(to right, #1e40af, #3b82f6);
}

/* Prima riga con th (quando non c'è thead) */
.article-content tr:first-child th {
    border-bottom: 2px solid #1e40af;
}

.article-content tbody tr {
    background: white;
    transition: background-color 0.15s ease;
}

.article-content tbody tr:nth-child(even) {
    background: #f8fafc;
}

/* Alternanza colori anche senza tbody */
.article-content table tr:nth-child(even) {
    background: #f8fafc;
}

.article-content table tr:nth-child(odd):not(:first-child) {
    background: white;
}

.article-content table tr:hover:not(:first-child) {
    background: #eff6ff;
}

.article-content tbody tr:hover {
    background: #eff6ff;
}

.article-content td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
}

.article-content tbody tr:last-child td,
.article-content table tr:last-child td {
    border-bottom: none;
}

/* Liste stilizzate */
.article-content ul {
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0;
}

.article-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    line-height: 1.6;
}

.article-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
}

/* Rimuovi bullet quando c'è già un'icona SVG inline */
.article-content ul li:has(> svg:first-child)::before,
.article-content ul li:has(> .inline:first-child)::before {
    display: none;
}

/* Liste con icone SVG inline - no padding extra */
.article-content ul li:has(> svg:first-child),
.article-content ul li:has(> .inline:first-child) {
    padding-left: 0;
}

.article-content ol {
    list-style: none;
    padding-left: 0;
    counter-reset: item;
    margin: 1.25rem 0;
}

.article-content ol li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
    counter-increment: item;
}

.article-content ol li::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blockquote */
.article-content blockquote {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(to right, #eff6ff, #f0f9ff);
    border-left: 4px solid #3b82f6;
    border-radius: 0 0.75rem 0.75rem 0;
}

.article-content blockquote p {
    color: #334155;
    font-size: 1.0625rem;
    margin: 0;
}

/* Links */
.article-content a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.article-content a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Headings */
.article-content h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.625rem;
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

.article-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

/* Emoji as bullet */
.article-content h2:first-letter,
.article-content h3:first-letter {
    /* Se inizia con emoji, styling leggero */
}

/* Paragrafi */
.article-content p {
    margin-bottom: 1.25rem;
    line-height: 1.75;
    color: #475569;
}

/* Strong/Bold */
.article-content strong {
    color: #1e293b;
    font-weight: 600;
}

/* HR divider */
.article-content hr {
    margin: 2.5rem 0;
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
}

/* Code inline */
.article-content code {
    background: #f1f5f9;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: #0f172a;
}

/* Images */
.article-content img {
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    margin: 1.5rem 0;
}

/* Responsive tables */
@media (max-width: 640px) {
    .article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .article-content th,
    .article-content td {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* Line clamp utility */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================
   Filtri - Safe Area per iPhone
   ================================ */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Modale filtri fullscreen */
@supports (padding: max(0px)) {
    .safe-area-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Smooth scroll per container filtri */
.filters-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Badge filtri attivi - animazione */
@keyframes badge-pop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.filter-badge-enter {
    animation: badge-pop 0.2s ease-out;
}

/* ================================
   Flatpickr Range Picker Styles
   (Solo Desktop - su mobile usa modal custom)
   ================================ */

/* Nascondi flatpickr su mobile */
@media screen and (max-width: 1023px) {
    .flatpickr-calendar {
        display: none !important;
    }
}

/* Desktop: Stili Flatpickr */
@media screen and (min-width: 1024px) {
    .flatpickr-calendar {
        border-radius: 16px !important;
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
        border: 1px solid #e2e8f0 !important;
        padding: 8px !important;
    }
    
    .flatpickr-calendar .flatpickr-day {
        border: none !important;
        border-radius: 50% !important;
        margin: 0 !important;
    }
    
    /* Date intermedie del range */
    .flatpickr-calendar .flatpickr-day.inRange {
        background: #dbeafe !important;
        border-radius: 0 !important;
        color: #1e40af !important;
    }
    
    /* Check-in e Check-out */
    .flatpickr-calendar .flatpickr-day.startRange,
    .flatpickr-calendar .flatpickr-day.endRange {
        background: #2563eb !important;
        color: white !important;
        font-weight: 600 !important;
        border-radius: 50% !important;
    }
    
    /* Hover */
    .flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):not(.inRange):not(.startRange):not(.endRange):hover {
        background: #eff6ff !important;
        border-radius: 50% !important;
    }
    
    /* Oggi */
    .flatpickr-calendar .flatpickr-day.today:not(.startRange):not(.endRange):not(.inRange) {
        box-shadow: inset 0 0 0 2px #3b82f6 !important;
        background: transparent !important;
        color: #2563eb !important;
    }
}

/* ================================
   Modal Date Picker Styles (Mobile)
   ================================ */

/* Safe area per iPhone con notch */
.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
}

/* Calendario nel modal - range background */
@media screen and (max-width: 1023px) {
    /* Container per il range visivo */
    .aspect-square {
        position: relative;
    }
    
    /* Range background che si estende */
    .aspect-square span[x-show*="isInRange"] {
        border-radius: 0 !important;
    }
}