/* Simple Booking Slots - Frontend CSS */
/* Sélecteurs spécifiques pour éviter conflits thème */

/* Container principal */
.woocommerce .sbs-booking-container,
.single-product .sbs-booking-container {
    margin: 20px 0 !important;
    padding: 16px !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Header */
.sbs-booking-container .sbs-booking-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.sbs-booking-container .sbs-booking-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

.sbs-booking-container .sbs-booking-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pagination */
.sbs-booking-container .sbs-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.sbs-booking-container .sbs-nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #000 !important;
    flex-shrink: 0 !important;
}

.sbs-booking-container .sbs-nav-btn:hover:not(:disabled) {
    background: #6e2867 !important;
    border-color: #6e2867 !important;
    color: #fff !important;
}

.sbs-booking-container .sbs-nav-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.sbs-booking-container .sbs-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    stroke: currentColor !important;
}

.sbs-booking-container .sbs-range-label {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #000 !important;
}

/* Steps */
.sbs-booking-container .sbs-booking-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.sbs-booking-container .sbs-step {
    transition: opacity 0.2s ease !important;
}

.sbs-booking-container .sbs-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 12px !important;
}

/* Slots content */
.sbs-booking-container .sbs-slots-content {
    min-height: 80px !important;
}

/* Dates list */
.sbs-booking-container .sbs-dates-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Date button */
.sbs-booking-container button.sbs-date-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 80px !important;
    padding: 12px 8px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #000 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
}

.sbs-booking-container button.sbs-date-btn:hover {
    border-color: #6e2867 !important;
    background: #faf5f9 !important;
    color: #000 !important;
}

.sbs-booking-container button.sbs-date-btn:focus {
    outline: none !important;
    border-color: #6e2867 !important;
    box-shadow: 0 0 0 3px rgba(110, 40, 103, 0.25) !important;
}

.sbs-booking-container button.sbs-date-btn.sbs-selected {
    background: #6e2867 !important;
    border-color: #6e2867 !important;
    color: #fff !important;
}

.sbs-booking-container button.sbs-date-btn .sbs-date-day {
    font-size: 11px !important;
    text-transform: uppercase !important;
    opacity: 0.7 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.sbs-booking-container button.sbs-date-btn .sbs-date-num {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    margin: 2px 0 !important;
    padding: 0 !important;
}

.sbs-booking-container button.sbs-date-btn .sbs-date-month {
    font-size: 11px !important;
    text-transform: uppercase !important;
    opacity: 0.7 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Times */
.sbs-booking-container .sbs-times-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sbs-booking-container button.sbs-time-btn {
    padding: 14px 8px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #000 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-family: inherit !important;
    width: 100% !important;
    min-height: 48px !important;
}

.sbs-booking-container button.sbs-time-btn:hover {
    border-color: #6e2867 !important;
    background: #faf5f9 !important;
    color: #000 !important;
}

.sbs-booking-container button.sbs-time-btn:focus {
    outline: none !important;
    border-color: #6e2867 !important;
    box-shadow: 0 0 0 3px rgba(110, 40, 103, 0.25) !important;
}

.sbs-booking-container button.sbs-time-btn.sbs-selected {
    background: #6e2867 !important;
    border-color: #6e2867 !important;
    color: #fff !important;
}

.sbs-booking-container button.sbs-time-btn.sbs-unavailable {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}

/* Summary */
.sbs-booking-container .sbs-summary {
    margin-top: 16px !important;
    padding: 14px !important;
    background: #f5eaf4 !important;
    border-radius: 10px !important;
    border: 1px solid #d4b8d1 !important;
    animation: sbs-fade-in 0.3s ease !important;
}

@keyframes sbs-fade-in {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.sbs-booking-container .sbs-summary-content {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.sbs-booking-container .sbs-summary-icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #6e2867 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.sbs-booking-container .sbs-summary-text {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4a1a45 !important;
}

.sbs-booking-container button.sbs-change-btn {
    padding: 6px 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid #6e2867 !important;
    border-radius: 6px !important;
    color: #6e2867 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.sbs-booking-container button.sbs-change-btn:hover {
    background: #6e2867 !important;
    color: #fff !important;
}

/* Error */
.sbs-booking-container .sbs-error {
    margin-top: 12px !important;
    padding: 12px !important;
    background: #f8d7da !important;
    border-radius: 8px !important;
    color: #842029 !important;
    font-size: 14px !important;
}

/* Loader - hidden by default, shown via JS */
.sbs-booking-container .sbs-loader {
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 20px !important;
    color: #6c757d !important;
}

.sbs-booking-container .sbs-loader[style*="block"],
.sbs-booking-container .sbs-loader.sbs-visible {
    display: flex !important;
}

.sbs-booking-container .sbs-loader-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #dee2e6 !important;
    border-top-color: #6e2867 !important;
    border-radius: 50% !important;
    animation: sbs-spin 0.8s linear infinite !important;
}

@keyframes sbs-spin {
    to { transform: rotate(360deg); }
}

/* No slots */
.sbs-booking-container .sbs-no-slots {
    padding: 24px !important;
    text-align: center !important;
    color: #6c757d !important;
}

.sbs-booking-container .sbs-no-slots p {
    margin: 0 !important;
    color: #6c757d !important;
}

/* Cart display */
.woocommerce-cart-form .sbs-slot-cart-item,
.woocommerce-checkout .sbs-slot-cart-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: #f5eaf4 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    color: #4a1a45 !important;
}

.sbs-slot-cart-item::before {
    content: "📅" !important;
}

/* ========================================
   RESPONSIVE
======================================== */

/* Tablet */
@media (min-width: 576px) {
    .woocommerce .sbs-booking-container,
    .single-product .sbs-booking-container {
        padding: 20px !important;
    }
    
    .sbs-booking-container .sbs-dates-list {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    .sbs-booking-container .sbs-times-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }
    
    .sbs-booking-container .sbs-range-label {
        font-size: 15px !important;
    }
}

/* Desktop */
@media (min-width: 768px) {
    .woocommerce .sbs-booking-container,
    .single-product .sbs-booking-container {
        padding: 24px !important;
    }
    
    .sbs-booking-container .sbs-booking-title {
        font-size: 18px !important;
    }
    
    .sbs-booking-container button.sbs-date-btn .sbs-date-num {
        font-size: 26px !important;
    }
    
    .sbs-booking-container .sbs-pagination {
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .sbs-booking-container button.sbs-date-btn,
    .sbs-booking-container button.sbs-time-btn {
        min-height: 48px !important;
    }
    
    .sbs-booking-container button.sbs-date-btn:hover,
    .sbs-booking-container button.sbs-time-btn:hover {
        border-color: #dee2e6 !important;
        background: #fff !important;
        color: #000 !important;
    }
    
    .sbs-booking-container button.sbs-date-btn.sbs-selected:hover,
    .sbs-booking-container button.sbs-time-btn.sbs-selected:hover {
        background: #6e2867 !important;
        border-color: #6e2867 !important;
        color: #fff !important;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .sbs-booking-container button.sbs-date-btn,
    .sbs-booking-container button.sbs-time-btn,
    .sbs-booking-container .sbs-summary,
    .sbs-booking-container .sbs-loader-spinner {
        animation: none !important;
        transition: none !important;
    }
}