/* CSS Custom Properties for Easy Overrides */
:root {
    --booking-primary-color: #196BDE;
    --booking-border-color: #e5e7eb;
    --booking-border-radius: 8px;
    --booking-background-white: #ffffff;
    --booking-text-gray: #374151;
}

/* Plugin Container Reset - Prevent Theme Interference */
#booking-datetime-container,
#property-details-container {
    all: initial !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--booking-text-gray) !important;
    background: var(--booking-background-white) !important;
    box-sizing: border-box !important;
    display: block !important;
}

#booking-datetime-container *,
#property-details-container * {
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* Flatpickr Customizations - High Specificity */
.woocommerce div.product form.cart .flatpickr-calendar,
#booking-datetime-container .flatpickr-calendar,
body .flatpickr-calendar {
    border-radius: var(--booking-border-radius) !important;
    border: 1px solid var(--booking-border-color) !important;
    z-index: 99999 !important;
}

.flatpickr-month {
    background: #196BDE !important;
    border-radius: 8px 8px 0 0 !important;
}

.flatpickr-current-month {
    color: white !important;
    font-weight: 600 !important;
}

.flatpickr-prev-month, .flatpickr-next-month {
    color: white !important;
    fill: white !important;
}

.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    fill: rgba(255, 255, 255, 0.8) !important;
}

.flatpickr-day {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.flatpickr-day:hover {
    background: rgba(25, 107, 222, 0.1) !important;
    color: #196BDE !important;
}

.flatpickr-day.selected {
    background: #196BDE !important;
    border-color: #196BDE !important;
    color: white !important;
}

.flatpickr-day.disabled {
    color: #d1d5db !important;
    background: #f9fafb !important;
}

/* Time Slot Buttons */
.time-slot-btn {
    @apply w-full transition-all duration-200 flex flex-col items-center justify-center min-h-20;
    border-color: #e5e7eb;
    padding: 5px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    background-color: white;
}

.time-slot-available {
    @apply text-gray-700;
}

.time-slot-available:hover {
    border-color: #196BDE;
    background-color: rgba(25, 107, 222, 0.05);
    color: #196BDE;
}

.time-slot-selected {
    background-color: #196BDE !important;
    border-color: #196BDE !important;
    color: white !important;
    padding: 5px !important;
    border-radius: 8px !important;
}

.time-slot-selected .font-medium {
    color: white !important;
}

.time-slot-selected .text-xs,
.time-slot-selected .text-gray-500 {
    color: white !important;
}

.time-slot-blocked {
    @apply bg-gray-100 text-gray-400 cursor-not-allowed;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

.time-slot-blocked:hover {
    @apply transform-none scale-100;
}

/* Booking Container Enhancements */
#booking-datetime-container {
    transition: all 0.3s ease;
}

/* Custom Animation for Form Elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#time-slots-container {
    animation: fadeInUp 0.5s ease-out;
}

/* Property Selection Buttons */
.property-type-btn, .dwelling-type-btn {
    @apply w-full border-2 rounded-lg transition-all duration-200 bg-white;
    border-color: #e5e7eb;
    padding: 5px;
    border-radius: 8px;
    border-width: 1px;
}

.property-type-btn svg, .dwelling-type-btn svg {
    color: #196BDE;
}

/* Remove default icon backgrounds */
.property-type-btn .bg-blue-100,
.property-type-btn .bg-green-100,
.property-type-btn .bg-purple-100,
.property-type-btn .bg-orange-100,
.dwelling-type-btn .bg-blue-100,
.dwelling-type-btn .bg-green-100,
.dwelling-type-btn .bg-purple-100,
.dwelling-type-btn .bg-orange-100 {
    background-color: transparent !important;
}

.property-type-btn:hover, .dwelling-type-btn:hover {
    border-color: #196BDE;
    background-color: rgba(25, 107, 222, 0.05);
}

.property-selected, .dwelling-selected {
    background-color: #196BDE !important;
    border-color: #196BDE !important;
    color: white !important;
    padding: 5px !important;
    border-radius: 8px !important;
}

.property-selected .bg-blue-100, .dwelling-selected .bg-purple-100, 
.property-selected .bg-green-100, .dwelling-selected .bg-orange-100 {
    background-color: white !important;
}

.property-selected .rounded-full, .dwelling-selected .rounded-full {
    background-color: white !important;
}

.property-selected .text-blue-600, .dwelling-selected .text-purple-600,
.property-selected .text-green-600, .dwelling-selected .text-orange-600 {
    color: #196BDE !important;
}

.property-selected .text-gray-500, .dwelling-selected .text-gray-500 {
    color: white !important;
}

.property-selected .font-medium, .dwelling-selected .font-medium {
    color: white !important;
}

.property-selected svg, .dwelling-selected svg {
    color: #196BDE !important;
}

/* Property Details Container */
#property-details-container {
    transition: all 0.3s ease;
}

/* Parking Instructions */
#parking-instructions-container {
    animation: fadeInUp 0.5s ease-out;
}

#parking_instructions {
    transition: border-color 0.2s ease;
}

#parking_instructions:focus, #booking_date:focus {
    border-color: #196BDE !important;
    outline: none;
}

/* WooCommerce Form Elements Fix */
.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart select {
    color: #374151 !important;
    background-color: white !important;
    opacity: 1 !important;
    border: 1px solid #d1d5db !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.cart select:focus {
    border-color: #196BDE !important;
    outline: none !important;
}

/* Ensure dropdown option text is visible */
.woocommerce form .form-row select option,
.woocommerce-page form .form-row select option,
.woocommerce div.product form.cart .variations select option,
.woocommerce div.product form.cart select option {
    color: #374151 !important;
    background-color: white !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .time-slot-btn {
        @apply min-h-16 p-3;
    }
    
    .property-type-btn, .dwelling-type-btn {
        @apply p-3;
    }
}

.wp-block-woocommerce-add-to-cart-form .variations_button, .wp-block-woocommerce-add-to-cart-form form.cart {
    display: block !important;
}