:root {
    /* Global Colors */
    --wpfb-primary: #059669;
    --wpfb-text: #1f2937;
    --wpfb-background: #ffffff;
    --wpfb-border: #e5e7eb;
    
    /* Header/Hero */
        --wpfb-header-bg: #ffdd94;
        --wpfb-header-text: #030303;
    --wpfb-header-subtitle: rgba(255,255,255,0.9);
    
    /* Typography */
    --wpfb-font-base: system-ui, -apple-system, sans-serif;
    --wpfb-font-heading: system-ui, -apple-system, sans-serif;
    --wpfb-font-size-base: 14px;
    --wpfb-font-weight-heading: 600;
    
    /* Border Radius */
    --wpfb-radius-small: 4px;
    --wpfb-radius-medium: 8px;
    --wpfb-radius-large: 12px;
    --wpfb-radius-card: 12px;
    
    /* Calendar Colors */
    --wpfb-calendar-bg: #ffffff;
    --wpfb-calendar-border: #e5e7eb;
    --wpfb-calendar-weekday: #6b7280;
    --wpfb-calendar-available: #ffffff;
    --wpfb-calendar-selected: #059669;
    --wpfb-calendar-hover: #f3f4f6;
    --wpfb-calendar-unavailable: #fef2f2;
    --wpfb-calendar-range: #dbeafe;
    --wpfb-calendar-today: #3b82f6;
    
    /* Button Colors */
    --wpfb-btn-primary-bg: #059669;
    --wpfb-btn-primary-text: #ffffff;
    --wpfb-btn-primary-hover: #047857;
    --wpfb-btn-primary-disabled: #9ca3af;
    --wpfb-btn-secondary-bg: #f3f4f6;
    --wpfb-btn-secondary-text: #374151;
    --wpfb-btn-secondary-hover: #e5e7eb;
    --wpfb-btn-secondary-border: #d1d5db;
    
    /* Form Colors */
    --wpfb-input-bg: #ffffff;
    --wpfb-input-border: #d1d5db;
    --wpfb-input-focus: #059669;
    --wpfb-input-text: #1f2937;
    --wpfb-input-placeholder: #9ca3af;
    --wpfb-label: #374151;
    
    /* Message Colors */
    --wpfb-msg-success: #10b981;
    --wpfb-msg-error: #ef4444;
    --wpfb-msg-warning: #f59e0b;
    --wpfb-msg-info: #3b82f6;
    
    /* Addon Colors */
    --wpfb-addon-bg: #ffffff;
    --wpfb-addon-border: #e5e7eb;
    --wpfb-addon-selected: #dbeafe;
    --wpfb-addon-price: #059669;
    
    /* Summary Colors */
    --wpfb-summary-bg: #f9fafb;
    --wpfb-summary-heading: #1f2937;
    --wpfb-summary-total: #059669;
    --wpfb-summary-deposit: #f59e0b;
    
    /* Legacy Variables for Backward Compatibility */
    --wpfb-card-background: var(--wpfb-background);
    --wpfb-calendar-header-size: 1.75rem;
    --wpfb-line-height-base: 1.5;
    --wpfb-letter-spacing: normal;
}

/* Google Fonts Loading */

/* Base Styling */
.wpfb-booking-widget, 
.wpfb-booking-calendar,
.wpfb-booking-form {
    font-family: var(--wpfb-font-base);
    font-size: var(--wpfb-font-size-base);
    line-height: var(--wpfb-line-height-base);
    color: var(--wpfb-text);
    background: var(--wpfb-background);
}

/* Header Styling */
.wpfb-header,
.wpfb-booking-header {
    background: var(--wpfb-header-bg);
    color: var(--wpfb-header-text);
}

.wpfb-header h1, 
.wpfb-header h2, 
.wpfb-header h3,
.wpfb-booking-header h1,
.wpfb-booking-header h2,
.wpfb-booking-header h3 {
    font-family: var(--wpfb-font-heading);
    font-weight: var(--wpfb-font-weight-heading);
}

/* Utility Classes */
.wpfb-primary { color: var(--wpfb-primary) !important; }
.wpfb-bg-primary { background-color: var(--wpfb-primary) !important; }
.wpfb-border-primary { border-color: var(--wpfb-primary) !important; }

.wpfb-text { color: var(--wpfb-text) !important; }
.wpfb-bg-background { background-color: var(--wpfb-background) !important; }
.wpfb-border { border-color: var(--wpfb-border) !important; }

.wpfb-success { color: var(--wpfb-msg-success) !important; }
.wpfb-error { color: var(--wpfb-msg-error) !important; }
.wpfb-warning { color: var(--wpfb-msg-warning) !important; }
.wpfb-info { color: var(--wpfb-msg-info) !important; }

/* ============================================
   Elementor Widget Styles
   CSS Variables from widget override defaults
   ============================================ */

.wpfb-elementor-wrapper {
    box-sizing: border-box;
}

.wpfb-elementor-wrapper .wpfb-elementor-title {
    margin: 0 0 16px 0;
    padding: 0;
    font-weight: 600;
}

.wpfb-elementor-wrapper .wpfb-elementor-subtitle {
    margin: 0 0 16px 0;
    padding: 0;
}

/* Map Elementor CSS variables to existing Vue component variables */
.wpfb-elementor-wrapper .wpfb-booking-calendar,
.wpfb-elementor-wrapper .wpfb-booking-widget {
    /* Global Colors - inherit from wrapper if set */
    --wpfb-primary: var(--wpfb-primary, #059669);
    --wpfb-accent: var(--wpfb-accent, #3b82f6);
    --wpfb-text: var(--wpfb-text, #1f2937);
    --wpfb-background: var(--wpfb-background, #ffffff);
    --wpfb-border: var(--wpfb-border, #e5e7eb);
    
    /* Calendar Header */
    --wpfb-header-gradient-start: var(--wpfb-header-gradient-start, #667eea);
    --wpfb-header-gradient-end: var(--wpfb-header-gradient-end, #764ba2);
    --wpfb-header-text: var(--wpfb-header-text, #ffffff);
    
    /* Calendar Grid */
    --wpfb-calendar-bg: var(--wpfb-calendar-bg, #ffffff);
    --wpfb-day-available: var(--wpfb-day-available, #ffffff);
    --wpfb-day-selected: var(--wpfb-day-selected, #059669);
    --wpfb-day-selected-text: var(--wpfb-day-selected-text, #ffffff);
    --wpfb-day-hover: var(--wpfb-day-hover, #f3f4f6);
    --wpfb-day-unavailable: var(--wpfb-day-unavailable, #fef2f2);
    --wpfb-day-range: var(--wpfb-day-range, #dbeafe);
    --wpfb-today-border: var(--wpfb-today-border, #3b82f6);
    
    /* Buttons */
    --wpfb-btn-primary-bg: var(--wpfb-btn-primary-bg, #059669);
    --wpfb-btn-primary-text: var(--wpfb-btn-primary-text, #ffffff);
    --wpfb-btn-primary-hover: var(--wpfb-btn-primary-hover, #047857);
    --wpfb-btn-secondary-bg: var(--wpfb-btn-secondary-bg, #f3f4f6);
    --wpfb-btn-secondary-text: var(--wpfb-btn-secondary-text, #374151);
    --wpfb-btn-radius: var(--wpfb-btn-radius, 6px);
    
    /* Forms */
    --wpfb-input-bg: var(--wpfb-input-bg, #ffffff);
    --wpfb-input-border: var(--wpfb-input-border, #d1d5db);
    --wpfb-input-focus: var(--wpfb-input-focus, #059669);
    --wpfb-input-text: var(--wpfb-input-text, #1f2937);
    --wpfb-input-radius: var(--wpfb-input-radius, 6px);
    
    /* Cards */
    --wpfb-card-bg: var(--wpfb-card-bg, #ffffff);
    --wpfb-card-border: var(--wpfb-card-border, #e5e7eb);
    --wpfb-card-selected: var(--wpfb-card-selected, #dbeafe);
    --wpfb-card-hover: var(--wpfb-card-hover, #f9fafb);
    --wpfb-card-radius: var(--wpfb-card-radius, 8px);
    
    /* Summary */
    --wpfb-summary-bg: var(--wpfb-summary-bg, #f9fafb);
    --wpfb-summary-heading: var(--wpfb-summary-heading, #1f2937);
    --wpfb-summary-total: var(--wpfb-summary-total, #059669);
    --wpfb-summary-deposit: var(--wpfb-summary-deposit, #f59e0b);
    
    /* Typography */
    --wpfb-font-family: var(--wpfb-font-family, system-ui, -apple-system, sans-serif);
    --wpfb-font-size: var(--wpfb-font-size, 14px);
    --wpfb-heading-family: var(--wpfb-heading-family, system-ui, -apple-system, sans-serif);
    --wpfb-heading-weight: var(--wpfb-heading-weight, 600);
    
    /* Spacing/Radius */
    --wpfb-radius-sm: var(--wpfb-radius-sm, 4px);
    --wpfb-radius-md: var(--wpfb-radius-md, 8px);
    --wpfb-radius-lg: var(--wpfb-radius-lg, 12px);
}

/* Apply header gradient based on --wpfb-header-style */
.wpfb-elementor-wrapper .wpfb-header,
.wpfb-elementor-wrapper .wpfb-booking-header,
.wpfb-elementor-wrapper [class*="header-gradient"] {
    background: linear-gradient(135deg, var(--wpfb-header-gradient-start) 0%, var(--wpfb-header-gradient-end) 100%);
}

/* When header-style is solid */
.wpfb-elementor-wrapper[style*="--wpfb-header-style: solid"] .wpfb-header,
.wpfb-elementor-wrapper[style*="--wpfb-header-style: solid"] .wpfb-booking-header {
    background: var(--wpfb-header-bg, #059669);
}

/* Typography inheritance */
.wpfb-elementor-wrapper .wpfb-booking-calendar,
.wpfb-elementor-wrapper .wpfb-booking-widget {
    font-family: var(--wpfb-font-family);
    font-size: var(--wpfb-font-size);
}

.wpfb-elementor-wrapper h1,
.wpfb-elementor-wrapper h2,
.wpfb-elementor-wrapper h3,
.wpfb-elementor-wrapper h4,
.wpfb-elementor-wrapper h5,
.wpfb-elementor-wrapper h6 {
    font-family: var(--wpfb-heading-family);
    font-weight: var(--wpfb-heading-weight);
}

/* Calendar day cells */
.wpfb-elementor-wrapper .wpfb-day-cell {
    background: var(--wpfb-day-available);
}

.wpfb-elementor-wrapper .wpfb-day-cell:hover {
    background: var(--wpfb-day-hover);
}

.wpfb-elementor-wrapper .wpfb-day-cell.selected,
.wpfb-elementor-wrapper .wpfb-day-cell.range-start,
.wpfb-elementor-wrapper .wpfb-day-cell.range-end {
    background: var(--wpfb-day-selected);
    color: var(--wpfb-day-selected-text);
}

.wpfb-elementor-wrapper .wpfb-day-cell.in-range {
    background: var(--wpfb-day-range);
}

.wpfb-elementor-wrapper .wpfb-day-cell.unavailable {
    background: var(--wpfb-day-unavailable);
}

.wpfb-elementor-wrapper .wpfb-day-cell.today {
    border-color: var(--wpfb-today-border);
}

/* Buttons */
.wpfb-elementor-wrapper .wpfb-button-primary,
.wpfb-elementor-wrapper button[type="submit"],
.wpfb-elementor-wrapper .wpfb-btn-primary {
    background: var(--wpfb-btn-primary-bg);
    color: var(--wpfb-btn-primary-text);
    border-radius: var(--wpfb-btn-radius);
}

.wpfb-elementor-wrapper .wpfb-button-primary:hover,
.wpfb-elementor-wrapper button[type="submit"]:hover,
.wpfb-elementor-wrapper .wpfb-btn-primary:hover {
    background: var(--wpfb-btn-primary-hover);
}

.wpfb-elementor-wrapper .wpfb-button-secondary,
.wpfb-elementor-wrapper .wpfb-btn-secondary {
    background: var(--wpfb-btn-secondary-bg);
    color: var(--wpfb-btn-secondary-text);
    border-radius: var(--wpfb-btn-radius);
}

/* Form inputs */
.wpfb-elementor-wrapper input[type="text"],
.wpfb-elementor-wrapper input[type="email"],
.wpfb-elementor-wrapper input[type="tel"],
.wpfb-elementor-wrapper input[type="number"],
.wpfb-elementor-wrapper textarea,
.wpfb-elementor-wrapper select {
    background: var(--wpfb-input-bg);
    border-color: var(--wpfb-input-border);
    color: var(--wpfb-input-text);
    border-radius: var(--wpfb-input-radius);
}

.wpfb-elementor-wrapper input:focus,
.wpfb-elementor-wrapper textarea:focus,
.wpfb-elementor-wrapper select:focus {
    border-color: var(--wpfb-input-focus);
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
}

/* Cards (services, addons) */
.wpfb-elementor-wrapper .wpfb-service-card,
.wpfb-elementor-wrapper .wpfb-addon-card,
.wpfb-elementor-wrapper .wpfb-extra-item {
    background: var(--wpfb-card-bg);
    border-color: var(--wpfb-card-border);
    border-radius: var(--wpfb-card-radius);
}

.wpfb-elementor-wrapper .wpfb-service-card:hover,
.wpfb-elementor-wrapper .wpfb-addon-card:hover,
.wpfb-elementor-wrapper .wpfb-extra-item:hover {
    background: var(--wpfb-card-hover);
}

.wpfb-elementor-wrapper .wpfb-service-card.selected,
.wpfb-elementor-wrapper .wpfb-addon-card.selected,
.wpfb-elementor-wrapper .wpfb-selected-addon {
    background: var(--wpfb-card-selected);
}

/* Summary panel */
.wpfb-elementor-wrapper .wpfb-summary,
.wpfb-elementor-wrapper .wpfb-sidebar-summary,
.wpfb-elementor-wrapper .wpfb-summary-panel {
    background: var(--wpfb-summary-bg);
}

.wpfb-elementor-wrapper .wpfb-summary-heading,
.wpfb-elementor-wrapper .wpfb-summary h3,
.wpfb-elementor-wrapper .wpfb-summary h4 {
    color: var(--wpfb-summary-heading);
}

.wpfb-elementor-wrapper .wpfb-total,
.wpfb-elementor-wrapper .wpfb-total-amount {
    color: var(--wpfb-summary-total);
}

.wpfb-elementor-wrapper .wpfb-deposit,
.wpfb-elementor-wrapper .wpfb-deposit-amount {
    color: var(--wpfb-summary-deposit);
}

/* Placeholder for Elementor editor */
.wpfb-elementor-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 40px;
    text-align: center;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
}

.wpfb-elementor-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}