/* ============================================
   CSS ISOLATION - HolaOlas Web Component Protection
   ============================================
   
   This CSS file provides protection and styling for the holaolas-booking
   web component across all excursion pages.
   
   Include this file in all pages that use the holaolas-booking component.
   ============================================ */

/* Main container isolation */
holaolas-booking,
holaolas-booking * {
    box-sizing: border-box;
}

/* Minimal Web Component protection */
/* ✅ CORRIGÉ : Pas de scroll interne sur le custom element - laisse la page scroller (fix iOS "tap to scroll") */
holaolas-booking {
    display: block;
    width: 100%;
    min-height: 600px;
    overflow: visible !important; /* ✅ Pas de scroll interne - laisse la page scroller */
    touch-action: pan-y !important; /* ✅ PERMET LE SCROLL VERTICAL - Checklist point 3 */
}

/* Reset styles for elements in web component */
/* Note: We don't fully reset to avoid deforming elements */

/* Specific protection for h3 */
holaolas-booking h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: rgb(17 24 39) !important; /* text-gray-900 */
    margin-bottom: 1rem !important;
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Specific protection for accordion headers (h3 with Tailwind classes) */
holaolas-booking h3.text-lg,
holaolas-booking h3[class*="text-lg"],
holaolas-booking h3.font-semibold,
holaolas-booking h3[class*="font-semibold"],
holaolas-booking h3.text-gray-900,
holaolas-booking h3[class*="text-gray-900"],
holaolas-booking h3.flex,
holaolas-booking h3[class*="flex"],
holaolas-booking h3.items-center,
holaolas-booking h3[class*="items-center"] {
    font-size: 1.125rem !important; /* text-lg = 18px */
    font-weight: 600 !important; /* font-semibold */
    color: rgb(17 24 39) !important; /* text-gray-900 */
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    line-height: 1.75rem !important;
}

/* Protection for SVG icons inside accordion headers */
holaolas-booking h3 svg,
holaolas-booking h3 .lucide {
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 1.25rem !important; /* h-5 = 20px */
    height: 1.25rem !important; /* h-5 = 20px */
    margin-right: 0.5rem !important; /* mr-2 = 8px */
}

/* Protection for green SVG icons (text-green-600) */
holaolas-booking h3 svg.text-green-600,
holaolas-booking h3 svg[class*="text-green-600"],
holaolas-booking h3 .lucide.text-green-600,
holaolas-booking h3 .lucide[class*="text-green-600"] {
    color: rgb(22 163 74) !important; /* text-green-600 */
}

/* Specific protection for h4 (especially "participants") */
holaolas-booking h4 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: rgb(17 24 39) !important; /* text-gray-900 */
    margin-bottom: 0.75rem !important;
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Paragraph and text protection */
holaolas-booking p {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
}

holaolas-booking span,
holaolas-booking div,
holaolas-booking label {
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Specific protection for spans with Tailwind text-[10px] classes */
holaolas-booking span.text-\[10px\],
holaolas-booking span[class*="text-[10px]"],
holaolas-booking .text-\[10px\] {
    font-size: 10px !important;
    font-weight: normal !important;
    color: rgb(17 24 39) !important; /* text-gray-900 */
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Protection for font-normal in web component */
holaolas-booking .font-normal {
    font-weight: 400 !important;
}

/* react-day-picker calendar protection */
holaolas-booking .rdp-root,
holaolas-booking .rdp-root * {
    box-sizing: border-box !important;
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Ensure calendar has visible colors */
holaolas-booking .rdp-root {
    --rdp-accent-color: rgb(37 99 235) !important; /* blue-600 */
    --rdp-accent-background-color: rgb(239 246 255) !important; /* blue-50 */
    --rdp-day-height: 44px !important;
    --rdp-day-width: 44px !important;
    --rdp-day_button-height: 42px !important;
    --rdp-day_button-width: 42px !important;
    --rdp-selected-border: 2px solid var(--rdp-accent-color) !important;
    --rdp-disabled-opacity: 0.5 !important;
    --rdp-outside-opacity: 0.75 !important;
    --rdp-today-color: var(--rdp-accent-color) !important;
    color: rgb(17 24 39) !important; /* text-gray-900 */
    background-color: transparent !important;
}

/* Calendar button protection */
holaolas-booking .rdp-day_button {
    background: none !important;
    color: inherit !important;
    border: var(--rdp-day_button-border) !important;
}

holaolas-booking .rdp-day_button:hover:not(:disabled) {
    background-color: rgb(243 244 246) !important; /* gray-100 */
    color: inherit !important;
}

holaolas-booking .rdp-day_selected .rdp-day_button {
    background-color: var(--rdp-accent-color) !important;
    color: white !important;
    border: var(--rdp-selected-border) !important;
}

holaolas-booking .rdp-day_selected .rdp-day_button:hover {
    background-color: rgb(29 78 216) !important; /* blue-700 */
    color: white !important;
}

/* Calendar cell protection */
holaolas-booking .rdp-cell {
    color: rgb(17 24 39) !important; /* text-gray-900 */
    background-color: transparent !important;
}

holaolas-booking .rdp-weekday {
    color: rgb(17 24 39) !important; /* text-gray-900 */
    opacity: 0.75 !important;
}

holaolas-booking .rdp-caption_label {
    color: rgb(17 24 39) !important; /* text-gray-900 */
    font-weight: bold !important;
}

/* Calendar navigation button protection */
holaolas-booking .rdp-button_next,
holaolas-booking .rdp-button_previous {
    color: var(--rdp-accent-color) !important;
    background: none !important;
    border: none !important;
}

holaolas-booking .rdp-button_next:hover:not(:disabled),
holaolas-booking .rdp-button_previous:hover:not(:disabled) {
    background-color: rgb(243 244 246) !important; /* gray-100 */
    color: var(--rdp-accent-color) !important;
}

/* Form element protection */
holaolas-booking input,
holaolas-booking select,
holaolas-booking textarea,
holaolas-booking button {
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
    box-sizing: border-box !important;
}

/* Button protection */
holaolas-booking button {
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
    cursor: pointer !important;
}

/* Link protection */
holaolas-booking a {
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Flex and grid container protection */
holaolas-booking .flex,
holaolas-booking .grid {
    display: flex !important;
}

holaolas-booking .grid {
    display: grid !important;
}

/* Ensure text colors are visible */
holaolas-booking .text-gray-900 {
    color: rgb(17 24 39) !important;
}

holaolas-booking .text-gray-700 {
    color: rgb(55 65 81) !important;
}

holaolas-booking .text-gray-600 {
    color: rgb(75 85 99) !important;
}

holaolas-booking .text-blue-600 {
    color: rgb(37 99 235) !important;
}

holaolas-booking .text-green-600 {
    color: rgb(22 163 74) !important;
}

/* Background protection */
holaolas-booking .bg-white {
    background-color: rgb(255 255 255) !important;
}

holaolas-booking .bg-blue-50 {
    background-color: rgb(239 246 255) !important;
}

holaolas-booking .bg-gray-50 {
    background-color: rgb(249 250 251) !important;
}

/* Targeted protection for dynamic values in summary (Date, Price, etc.) */
holaolas-booking .bg-white.rounded-lg.border.border-gray-200 .space-y-3 .flex.justify-between > span:last-child,
holaolas-booking .bg-white.rounded-lg.border.border-gray-200 .space-y-2 .flex.justify-between > span:last-child,
holaolas-booking .bg-white.rounded-lg.border.border-gray-200 .border-t .flex.justify-between > span:last-child {
    color: rgb(17 24 39) !important; /* text-gray-900 */
}

/* Specific protection for spans with font-medium in summary */
holaolas-booking .bg-white.rounded-lg.border.border-gray-200 .flex.justify-between > span.font-medium {
    color: rgb(17 24 39) !important; /* text-gray-900 */
}

/* Protection for price values (without color class) */
holaolas-booking .bg-white.rounded-lg.border.border-gray-200 .border-t .space-y-2 .flex.justify-between > span:last-child {
    color: rgb(17 24 39) !important; /* text-gray-900 */
}

/* General protection for spans in summary sections (fallback) */
holaolas-booking .bg-white.rounded-lg.border.border-gray-200 .flex.justify-between > span:not(.text-gray-600):not(.text-gray-500):not(.text-gray-400):not(.text-green-600) {
    color: rgb(17 24 39) !important; /* text-gray-900 */
}

/* ============================================
   CUSTOM CALENDAR STYLES
   ============================================ */

/* Custom styles for react-day-picker */
holaolas-booking .custom-date-picker {
    width: 100%;
    max-width: 350px;
}

holaolas-booking .custom-date-picker .rdp {
    margin: 0;
}

holaolas-booking .custom-date-picker .rdp-months {
    justify-content: center;
}

holaolas-booking .custom-date-picker .rdp-day_disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

holaolas-booking .custom-date-picker .rdp-day_selected:not(.rdp-day_disabled) {
    background-color: rgb(37 99 235) !important;
    color: white !important;
}

holaolas-booking .custom-date-picker .rdp-day_selected:hover:not(.rdp-day_disabled) {
    background-color: rgb(29 78 216) !important;
}

holaolas-booking .custom-date-picker .rdp-day:hover:not(.rdp-day_disabled):not(.rdp-day_selected) {
    background-color: rgb(243 244 246);
}

holaolas-booking .custom-date-picker .blocked-date {
    background-color: rgb(254 242 242) !important;
    position: relative;
}

holaolas-booking .custom-date-picker .blocked-date::after {
    content: '✕';
    position: absolute;
    top: 2px;
    right: 2px;
    color: rgb(220 38 38);
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

holaolas-booking .custom-date-picker .unavailable-date {
    background-color: rgb(243 244 246) !important;
}

holaolas-booking .custom-date-picker .rdp-day {
    position: relative;
}

holaolas-booking .custom-date-picker .rdp-day_button {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

holaolas-booking .custom-date-picker .rdp-cell {
    min-width: 2.5rem;
    min-height: 2.5rem;
}