/**
 * AsistFix Booking Widget Styles
 * 
 * Complete CSS for AsistFix booking widget components.
 * Integrates with Fixistory Design System (100% compliant).
 * 
 * @version 1.0.0
 * @since FAZA 7.5
 * @author AsistFix Development Team
 * 
 * CRITICAL: This file defines all 18 missing --booking-* variables
 * that are used in booking-modal-v2.css but never defined.
 * 
 * Loading Order (REQUIRED):
 * 1. design-system/tokens.css (FIRST - override legacy main.css)
 * 2. design-system/components.css (design system components)
 * 3. asistfix-booking-widget.css (THIS FILE - define --booking-* mappings)
 * 
 * Design System Compliance:
 * - Uses Fixistory design tokens (--color-*, --spacing-*, etc.)
 * - WCAG 2.1 AA contrast ratios (4.5:1 minimum)
 * - Touch targets: 44×44px (WCAG AAA)
 * - Keyboard focus indicators
 * - Mobile-first responsive
 */

/* ============================================================================
   1. CSS VARIABLE MAPPINGS (CRITICAL)
   ============================================================================
   Define all 18 --booking-* variables that are used but undefined.
   Map to Fixistory design tokens for consistency.
   ============================================================================ */

:root {
    /* CRITICAL FIX: Define missing --booking-* variables */
    
    /* Spacing (8px base scale) */
    --booking-space-xs: var(--spacing-1, 4px);
    --booking-space-sm: var(--spacing-2, 8px);
    --booking-space-md: var(--spacing-4, 16px);
    --booking-space-lg: var(--spacing-6, 24px);
    --booking-space-xl: var(--spacing-8, 32px);
    
    /* Colors - Primary & Semantic */
    --booking-primary: var(--color-primary, #667eea);
    --booking-primary-hover: var(--color-primary-hover, #5568d3);
    --booking-success: var(--color-success, #10b981);
    --booking-warning: var(--color-warning, #f59e0b);
    --booking-error: var(--color-danger, #ef4444);
    --booking-info: var(--color-info, #3b82f6);
    
    /* Background Colors */
    --booking-bg-primary: var(--color-bg-primary, #ffffff);
    --booking-bg-secondary: var(--color-bg-secondary, #f9fafb);
    --booking-bg-tertiary: var(--color-bg-tertiary, #f3f4f6);
    
    /* Text Colors */
    --booking-text-primary: var(--color-text-primary, #111827);
    --booking-text-secondary: var(--color-text-secondary, #6b7280);
    --booking-text-tertiary: var(--color-text-tertiary, #9ca3af);
    --booking-text-inverse: var(--color-text-inverse, #ffffff);
    
    /* Border Colors */
    --booking-border-color: var(--color-border-light, #e5e7eb);
    --booking-border-color-dark: var(--color-border-default, #d1d5db);
    
    /* Border Radius */
    --booking-border-radius-sm: var(--radius-sm, 0.25rem);
    --booking-border-radius-md: var(--radius-base, 0.375rem);
    --booking-border-radius-lg: var(--radius-lg, 0.5rem);
    --booking-border-radius-xl: var(--radius-xl, 0.75rem);
    
    /* Shadows */
    --booking-shadow-xs: var(--shadow-xs, 0 1px 2px 0 rgba(0,0,0,0.05));
    --booking-shadow-sm: var(--shadow-sm, 0 1px 3px 0 rgba(0,0,0,0.1));
    --booking-shadow-md: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
    --booking-shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
    --booking-shadow-xl: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
    
    /* Transitions */
    --booking-transition-fast: var(--transition-fast, 150ms ease-in-out);
    --booking-transition-base: var(--transition-base, 200ms ease-in-out);
    --booking-transition-slow: var(--transition-slow, 300ms ease-in-out);
    
    /* Overlay (already defined in booking-modal-v2.css but repeated for consistency) */
    --booking-overlay: rgba(0, 0, 0, 0.6);
    
    /* Z-index Scale */
    --booking-z-base: var(--z-10, 10);
    --booking-z-dropdown: var(--z-50, 50);
    --booking-z-modal: var(--z-100, 100);
    --booking-z-overlay: var(--z-1000, 1000);
}

/* ============================================================================
   2. BOOKING WIDGET CONTAINER
   ============================================================================ */

.asistfix-booking-widget {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--booking-space-lg);
    background: var(--booking-bg-primary);
    border-radius: var(--booking-border-radius-xl);
    box-shadow: var(--booking-shadow-lg);
}

/* Header */
.asistfix-widget-header {
    margin-bottom: var(--booking-space-xl);
    text-align: center;
}

.asistfix-widget-title {
    margin: 0 0 var(--booking-space-sm) 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--booking-text-primary);
    line-height: var(--line-height-tight, 1.25);
}

.asistfix-widget-subtitle {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--booking-text-secondary);
    font-weight: var(--font-weight-medium, 500);
}

/* Error Container */
.asistfix-error-container {
    margin-bottom: var(--booking-space-lg);
    padding: var(--booking-space-md);
    background: var(--color-danger-light, #fee2e2);
    border: 1px solid var(--booking-error);
    border-radius: var(--booking-border-radius-md);
    display: none;
}

.asistfix-error-container[data-error-type="warning"] {
    background: var(--color-warning-light, #fef3c7);
    border-color: var(--booking-warning);
}

.asistfix-error-message {
    display: flex;
    align-items: center;
    gap: var(--booking-space-sm);
}

.asistfix-error-icon {
    flex-shrink: 0;
    color: var(--booking-error);
}

.asistfix-error-container[data-error-type="warning"] .asistfix-error-icon {
    color: var(--booking-warning);
}

.asistfix-error-text {
    flex: 1;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--booking-text-primary);
}

/* Widget Body Grid */
.asistfix-widget-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--booking-space-xl);
}

@media (min-width: 768px) {
    .asistfix-widget-body {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .asistfix-widget-body {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* Section Headers */
.asistfix-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--booking-space-md);
}

.asistfix-section-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--booking-text-primary);
}

/* ============================================================================
   3. CALENDAR COMPONENT
   ============================================================================ */

.asistfix-calendar {
    width: 100%;
}

/* Calendar Header (Month Navigation) */
.asistfix-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--booking-space-lg);
}

.asistfix-month-label {
    margin: 0;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--booking-text-primary);
}

.asistfix-month-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--booking-border-color);
    border-radius: var(--booking-border-radius-md);
    background: var(--booking-bg-primary);
    color: var(--booking-text-secondary);
    cursor: pointer;
    transition: all var(--booking-transition-fast);
}

.asistfix-month-nav:hover {
    border-color: var(--booking-primary);
    background: var(--booking-primary);
    color: var(--booking-text-inverse);
}

.asistfix-month-nav:focus {
    outline: 2px solid var(--booking-primary);
    outline-offset: 2px;
}

/* Weekday Headers */
.asistfix-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--booking-space-xs);
    margin-bottom: var(--booking-space-sm);
}

.asistfix-calendar-weekday {
    padding: var(--booking-space-sm);
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--booking-text-secondary);
    text-transform: uppercase;
}

/* Calendar Grid */
.asistfix-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--booking-space-xs);
}

/* Calendar Cell */
.asistfix-calendar-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: var(--booking-space-sm);
    border: 1px solid var(--booking-border-color);
    border-radius: var(--booking-border-radius-md);
    background: var(--booking-bg-primary);
    color: var(--booking-text-primary);
    font-size: var(--font-size-base, 1rem);
    cursor: pointer;
    transition: all var(--booking-transition-fast);
}

.asistfix-calendar-cell:hover:not(.asistfix-calendar-cell-disabled) {
    border-color: var(--booking-primary);
    background: var(--color-primary-light, #eef2ff);
    transform: translateY(-2px);
    box-shadow: var(--booking-shadow-md);
}

.asistfix-calendar-cell:focus {
    outline: 2px solid var(--booking-primary);
    outline-offset: 2px;
    z-index: var(--booking-z-base);
}

/* Calendar Cell - States */
.asistfix-calendar-cell-today {
    border-color: var(--booking-primary);
    border-width: 2px;
    font-weight: var(--font-weight-bold, 700);
}

.asistfix-calendar-cell-selected {
    background: var(--booking-primary);
    border-color: var(--booking-primary);
    color: var(--booking-text-inverse);
}

.asistfix-calendar-cell-selected .asistfix-calendar-cell-indicator {
    color: var(--booking-text-inverse);
}

.asistfix-calendar-cell-disabled {
    background: var(--booking-bg-tertiary);
    color: var(--booking-text-tertiary);
    cursor: not-allowed;
    opacity: 0.5;
}

.asistfix-calendar-cell-other-month {
    opacity: 0.4;
}

/* Calendar Cell - Availability Indicators */
.asistfix-calendar-cell-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
}

/* Green = Available (5+ slots) */
.asistfix-calendar-cell-available .asistfix-calendar-cell-indicator {
    color: var(--booking-success);
}

/* Yellow = Limited (1-4 slots) */
.asistfix-calendar-cell-limited .asistfix-calendar-cell-indicator {
    color: var(--booking-warning);
}

/* Red = Full (0 slots) */
.asistfix-calendar-cell-full {
    background: var(--booking-bg-tertiary);
    cursor: not-allowed;
}

.asistfix-calendar-cell-full .asistfix-calendar-cell-indicator {
    color: var(--booking-error);
}

/* Availability Legend */
.asistfix-availability-legend {
    display: flex;
    gap: var(--booking-space-md);
    font-size: var(--font-size-xs, 0.75rem);
}

.asistfix-legend-item {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
}

.asistfix-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.asistfix-legend-dot-available {
    background: var(--booking-success);
}

.asistfix-legend-dot-limited {
    background: var(--booking-warning);
}

.asistfix-legend-dot-full {
    background: var(--booking-error);
}

.asistfix-legend-label {
    color: var(--booking-text-secondary);
}

/* ============================================================================
   4. SLOT PICKER COMPONENT
   ============================================================================ */

.asistfix-slot-picker {
    width: 100%;
}

/* Time Filters */
.asistfix-slot-filters {
    display: flex;
    gap: var(--booking-space-sm);
    margin-bottom: var(--booking-space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.asistfix-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--booking-space-xs);
    padding: var(--booking-space-sm) var(--booking-space-md);
    border: 1px solid var(--booking-border-color);
    border-radius: var(--booking-border-radius-md);
    background: var(--booking-bg-primary);
    color: var(--booking-text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--booking-transition-fast);
}

.asistfix-filter-btn:hover {
    border-color: var(--booking-primary);
    color: var(--booking-primary);
}

.asistfix-filter-btn-active {
    background: var(--booking-primary);
    border-color: var(--booking-primary);
    color: var(--booking-text-inverse);
}

.asistfix-filter-icon {
    font-size: 1.25em;
}

/* Slot Grid */
.asistfix-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--booking-space-sm);
}

@media (min-width: 640px) {
    .asistfix-slot-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .asistfix-slot-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Slot Button */
.asistfix-slot-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* WCAG AAA touch target */
    padding: var(--booking-space-sm);
    border: 1px solid var(--booking-border-color);
    border-radius: var(--booking-border-radius-md);
    background: var(--booking-bg-primary);
    color: var(--booking-text-primary);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--booking-transition-fast);
}

.asistfix-slot-btn:hover:not(.asistfix-slot-btn-unavailable) {
    border-color: var(--booking-primary);
    background: var(--color-primary-light, #eef2ff);
    transform: translateY(-2px);
    box-shadow: var(--booking-shadow-sm);
}

.asistfix-slot-btn:focus {
    outline: 2px solid var(--booking-primary);
    outline-offset: 2px;
}

/* Slot Button - States */
.asistfix-slot-btn-selected {
    background: var(--booking-primary);
    border-color: var(--booking-primary);
    color: var(--booking-text-inverse);
}

.asistfix-slot-btn-unavailable {
    background: var(--booking-bg-tertiary);
    color: var(--booking-text-tertiary);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.5;
}

.asistfix-slot-time {
    font-weight: var(--font-weight-semibold, 600);
}

.asistfix-slot-count {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--booking-text-secondary);
}

.asistfix-slot-btn-selected .asistfix-slot-count {
    color: var(--booking-text-inverse);
    opacity: 0.8;
}

/* No Slots Message */
.asistfix-no-slots-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--booking-space-xl) var(--booking-space-lg);
    text-align: center;
}

.asistfix-no-slots-icon {
    margin-bottom: var(--booking-space-md);
    color: var(--booking-text-tertiary);
}

.asistfix-no-slots-text {
    margin: 0 0 var(--booking-space-lg) 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--booking-text-secondary);
}

/* ============================================================================
   5. SUMMARY SIDEBAR
   ============================================================================ */

.asistfix-summary-section {
    display: none; /* Hidden until date selected */
}

.asistfix-summary-card {
    padding: var(--booking-space-lg);
    background: var(--booking-bg-secondary);
    border: 1px solid var(--booking-border-color);
    border-radius: var(--booking-border-radius-lg);
}

.asistfix-summary-title {
    margin: 0 0 var(--booking-space-lg) 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--booking-text-primary);
}

.asistfix-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--booking-space-sm) 0;
    border-bottom: 1px solid var(--booking-border-color);
}

.asistfix-summary-item:last-of-type {
    border-bottom: none;
}

.asistfix-summary-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--booking-text-secondary);
}

.asistfix-summary-value {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--booking-text-primary);
}

/* HOLD Timer */
.asistfix-hold-timer {
    display: none; /* Hidden until HOLD created */
    margin-top: var(--booking-space-lg);
    padding: var(--booking-space-md);
    background: var(--color-info-light, #dbeafe);
    border: 1px solid var(--booking-info);
    border-radius: var(--booking-border-radius-md);
}

.asistfix-hold-timer-header {
    display: flex;
    align-items: center;
    gap: var(--booking-space-xs);
    margin-bottom: var(--booking-space-sm);
}

.asistfix-hold-icon {
    color: var(--booking-info);
}

.asistfix-hold-timer-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--booking-text-primary);
}

.asistfix-hold-timer-countdown {
    margin-bottom: var(--booking-space-sm);
}

.asistfix-hold-timer-value {
    display: block;
    font-size: var(--font-size-3xl, 1.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--booking-info);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.asistfix-hold-warning .asistfix-hold-timer-value {
    color: var(--booking-error);
    animation: pulse 1s infinite;
}

.asistfix-hold-timer-help {
    margin: 0;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--booking-text-secondary);
    text-align: center;
}

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

/* Submit Button */
.asistfix-submit-btn {
    width: 100%;
    margin-top: var(--booking-space-lg);
}

.asistfix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-space-sm);
    padding: var(--booking-space-md) var(--booking-space-lg);
    border: none;
    border-radius: var(--booking-border-radius-md);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: all var(--booking-transition-fast);
}

.asistfix-btn-primary {
    background: var(--booking-primary);
    color: var(--booking-text-inverse);
}

.asistfix-btn-primary:hover:not(:disabled) {
    background: var(--booking-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--booking-shadow-lg);
}

.asistfix-btn-primary:disabled {
    background: var(--booking-bg-tertiary);
    color: var(--booking-text-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

.asistfix-btn-secondary {
    background: var(--booking-bg-secondary);
    color: var(--booking-text-primary);
    border: 1px solid var(--booking-border-color);
}

.asistfix-btn-secondary:hover:not(:disabled) {
    background: var(--booking-bg-tertiary);
}

.asistfix-btn-block {
    width: 100%;
}

.asistfix-btn-icon {
    flex-shrink: 0;
}

/* ============================================================================
   6. LOADING STATES
   ============================================================================ */

.asistfix-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--booking-border-radius-xl);
    z-index: var(--booking-z-overlay);
}

.asistfix-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--booking-border-color);
    border-top-color: var(--booking-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.asistfix-loading-text {
    margin-top: var(--booking-space-md);
    font-size: var(--font-size-base, 1rem);
    color: var(--booking-text-secondary);
}

/* Skeleton Loading */
.asistfix-skeleton {
    background: linear-gradient(
        90deg,
        var(--booking-bg-tertiary) 0%,
        var(--booking-bg-secondary) 50%,
        var(--booking-bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

.asistfix-skeleton-month {
    height: 32px;
    width: 150px;
    border-radius: var(--booking-border-radius-md);
}

/* ============================================================================
   7. RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 767px) {
    .asistfix-booking-widget {
        padding: var(--booking-space-md);
    }
    
    .asistfix-widget-title {
        font-size: var(--font-size-xl, 1.25rem);
    }
    
    .asistfix-calendar-cell {
        min-height: 48px;
        font-size: var(--font-size-sm, 0.875rem);
    }
    
    .asistfix-month-nav {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 374px) {
    /* iPhone SE optimization */
    .asistfix-calendar-cell {
        min-height: 44px;
        padding: var(--booking-space-xs);
    }
    
    .asistfix-slot-btn {
        min-height: 44px;
    }
}

/* ============================================================================
   8. ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Focus visible (keyboard navigation) */
.asistfix-calendar-cell:focus-visible,
.asistfix-slot-btn:focus-visible,
.asistfix-btn:focus-visible {
    outline: 2px solid var(--booking-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@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) {
    .asistfix-calendar-cell,
    .asistfix-slot-btn {
        border-width: 2px;
    }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    /* TODO: Add dark mode variables when design system supports it */
}