/* La Casita - Vacation Rental Website Styles */

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #b45309;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
    /* La barra de navegación es fija (h-16): las anclas no quedan tapadas */
    scroll-padding-top: 4rem;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Backdrop blur fallback for older browsers */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Custom form styles */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #d97706;
    opacity: 1;
    display: block;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23d97706" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>') no-repeat;
    width: 20px;
    height: 20px;
}

/* Hero image optimization */
.hero-image {
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Smooth transitions for interactive elements */
.transition-all {
    transition: all 0.3s ease;
}

/* Custom focus styles */
input:focus,
select:focus,
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

/* Mobile menu animation */
.mobile-menu-enter {
    transform: translateY(-100%);
    opacity: 0;
}

.mobile-menu-enter-active {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s ease;
}

/* Responsive image adjustments */
@media (max-width: 768px) {
    .hero-responsive {
        background-attachment: scroll;
    }
}

/* Rich text content styles */
.rich-text-content {
    line-height: 1.7;
    text-align: left !important;
}

.rich-text-content p {
    margin-bottom: 1rem;
}

.rich-text-content p:last-child {
    margin-bottom: 0;
}

.rich-text-content ul, 
.rich-text-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.rich-text-content ul li {
    list-style-type: none;
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.5rem;
}

.rich-text-content ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1rem;
}

.rich-text-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
}

.rich-text-content strong {
    font-weight: 600;
}

.rich-text-content em {
    font-style: italic;
}

.rich-text-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.5rem 0 1rem 0;
    color: #374151;
}

.rich-text-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.25rem 0 0.75rem 0;
    color: #374151;
}

.rich-text-content blockquote {
    border-left: 4px solid #d97706;
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #6b7280;
}

.rich-text-content a {
    color: #d97706;
    text-decoration: underline;
}

.rich-text-content a:hover {
    color: #b45309;
}

/* Respeta la alineación configurada en CKEditor */
.rich-text-content .text-center,
.rich-text-content [style*="text-align: center"] {
    text-align: center !important;
}

.rich-text-content .text-right,
.rich-text-content [style*="text-align: right"] {
    text-align: right !important;
}

.rich-text-content .text-left,
.rich-text-content [style*="text-align: left"] {
    text-align: left !important;
}

.rich-text-content .text-justify,
.rich-text-content [style*="text-align: justify"] {
    text-align: justify !important;
}

/* CKEditor 5 Dark Mode Styles */
/* Estilos para el modo oscuro del admin de Django */
@media (prefers-color-scheme: dark) {
    /* Contenedor principal del editor */
    .django-ckeditor-5 {
        background-color: #1f2937 !important;
        border: 1px solid #374151 !important;
        border-radius: 0.375rem !important;
    }

    /* Toolbar del editor */
    .django-ckeditor-5 .ck-toolbar {
        background-color: #374151 !important;
        border-bottom: 1px solid #4b5563 !important;
    }

    /* Botones del toolbar */
    .django-ckeditor-5 .ck-button {
        color: #d1d5db !important;
        background-color: transparent !important;
    }

    .django-ckeditor-5 .ck-button:hover {
        background-color: #4b5563 !important;
    }

    .django-ckeditor-5 .ck-button.ck-on {
        background-color: #6b7280 !important;
        color: #ffffff !important;
    }

    /* Dropdown del toolbar */
    .django-ckeditor-5 .ck-dropdown__panel {
        background-color: #374151 !important;
        border: 1px solid #4b5563 !important;
    }

    .django-ckeditor-5 .ck-dropdown__panel .ck-button {
        color: #d1d5db !important;
    }

    .django-ckeditor-5 .ck-dropdown__panel .ck-button:hover {
        background-color: #4b5563 !important;
    }

    /* Área de contenido del editor */
    .django-ckeditor-5 .ck-editor__editable {
        background-color: #1f2937 !important;
        color: #f9fafb !important;
        border: none !important;
        min-height: 200px !important;
    }

    /* Placeholder del editor */
    .django-ckeditor-5 .ck-editor__editable.ck-blurred .ck-placeholder {
        color: #9ca3af !important;
    }

    /* Enlaces en el editor */
    .django-ckeditor-5 .ck-editor__editable a {
        color: #60a5fa !important;
    }

    /* Bloques de código */
    .django-ckeditor-5 .ck-editor__editable code {
        background-color: #374151 !important;
        color: #fbbf24 !important;
    }

    /* Bloques de cita */
    .django-ckeditor-5 .ck-editor__editable blockquote {
        border-left-color: #d97706 !important;
        color: #d1d5db !important;
    }

    /* Separadores */
    .django-ckeditor-5 .ck-horizontal-line {
        background-color: #4b5563 !important;
    }

    /* Panel de inserción de imágenes */
    .django-ckeditor-5 .ck-image-upload__panel {
        background-color: #374151 !important;
        border: 1px solid #4b5563 !important;
    }

    /* Botones de acción del editor */
    .django-ckeditor-5 .ck-button-save {
        background-color: #059669 !important;
        color: #ffffff !important;
    }

    .django-ckeditor-5 .ck-button-cancel {
        background-color: #dc2626 !important;
        color: #ffffff !important;
    }
}

/* Estilos específicos para el admin de Django en modo oscuro */
.admin-interface .django-ckeditor-5 {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

.admin-interface .django-ckeditor-5 .ck-editor__editable {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

/* Estilos para el modo oscuro del sistema */
[data-theme="dark"] .django-ckeditor-5,
.dark .django-ckeditor-5 {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

[data-theme="dark"] .django-ckeditor-5 .ck-editor__editable,
.dark .django-ckeditor-5 .ck-editor__editable {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

/* Estrellas con relleno continuo (9,6/10 = última casi llena) */
.star-rating {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.star-rating__row {
    display: flex;
    gap: 0.125rem;
}

.star-rating__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--star-fill, 0%);
    overflow: hidden;
}

.star-rating__fill .star-rating__row {
    width: max-content;
} 
/* Mobile-first horizontal swipe carousel (becomes a grid from md via utility classes) */
@media (max-width: 767px) {
    .mobile-carousel {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        margin-inline: -1rem;
        padding: 0.25rem 1rem 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-carousel::-webkit-scrollbar {
        display: none;
    }

    .mobile-carousel-item {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
}

/* Selector de fechas (flatpickr) con los colores de la web.
   Su CSS se carga después que este, por eso las reglas van con .flatpickr-calendar delante */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Días con esquinas redondeadas, como el calendario de disponibilidad de la portada */
.flatpickr-calendar .flatpickr-day {
    border-radius: 0.5rem;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: #fbbf24;
}

.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today:focus {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #393939;
}

/* Noches ocupadas: en gris, como en el calendario de disponibilidad de la portada */
.flatpickr-calendar .flatpickr-day.is-occupied {
    background: #d1d5db;
    border-color: #d1d5db;
    color: #6b7280;
}

.flatpickr-input[readonly] {
    cursor: pointer;
}

/* Enlace de la barra de la sección o página actual */
.nav-link.is-active {
    color: #d97706;
    background-color: #fffbeb;
}