/* ===========================
   🎨 CSS CUSTOM PROPERTIES
   =========================== */

:root {
    /* Modern Color Palette */
    --mrb-primary: #007AFF;
    --mrb-primary-light: #5AC8FA;
    --mrb-secondary: #34C759;
    --mrb-accent: #FF9500;
    --mrb-warning: #FF9500;
    --mrb-error: #FF3B30;
    --mrb-success: #34C759;
    
    /* Neutral Colors */
    --mrb-neutral-50: #FAFAFA;
    --mrb-neutral-100: #ffffff;
    --mrb-neutral-200: #E5E5E5;
    --mrb-neutral-300: #D4D4D4;
    --mrb-neutral-400: #A3A3A3;
    --mrb-neutral-500: #737373;
    --mrb-neutral-600: #525252;
    --mrb-neutral-700: #404040;
    --mrb-neutral-800: #262626;
    --mrb-neutral-900: #171717;
    
    /* Semantic Colors */
    --mrb-background: #F2F2F7;
    --mrb-surface: rgba(255, 255, 255, 0.85);
    --mrb-surface-glass: rgba(255, 255, 255, 0.7);
    --mrb-surface-subtle: rgba(255, 255, 255, 0.4);
    --mrb-text-primary: #1D1D1F;
    --mrb-text-secondary: #86868B;
    --mrb-text-tertiary: #C7C7CC;
    --mrb-border: rgba(0, 0, 0, 0.1);
    --mrb-border-light: rgba(0, 0, 0, 0.05);
    
    /* Room Type Colors */
    --mrb-pro-color: #34C759;
    --mrb-pro-bg: rgba(52, 199, 89, 0.1);
    --mrb-premium-color: #FF9500;
    --mrb-premium-bg: rgba(255, 149, 0, 0.1);
    --mrb-basic-color: #007AFF;
    --mrb-basic-bg: rgba(0, 122, 255, 0.1);
    --mrb-dj-color: #AF52DE;
    --mrb-dj-bg: rgba(175, 82, 222, 0.1);
    --mrb-podcast-color: #5AC8FA;
    --mrb-podcast-bg: rgba(90, 200, 250, 0.1);
    
    /* Spacing Scale */
    --mrb-space-1: 0.25rem;  /* 4px */
    --mrb-space-2: 0.5rem;   /* 8px */
    --mrb-space-3: 0.75rem;  /* 12px */
    --mrb-space-4: 1rem;     /* 16px */
    --mrb-space-5: 1.25rem;  /* 20px */
    --mrb-space-6: 1.5rem;   /* 24px */
    --mrb-space-8: 2rem;     /* 32px */
    --mrb-space-10: 2.5rem;  /* 40px */
    --mrb-space-12: 3rem;    /* 48px */
    --mrb-space-16: 4rem;    /* 64px */
    
    /* Border Radius */
    --mrb-radius-sm: 6px;
    --mrb-radius-md: 12px;
    --mrb-radius-lg: 20px;
    --mrb-radius-xl: 24px;
    --mrb-radius-2xl: 32px;
    --mrb-radius-full: 9999px;
    
    /* Shadows */
    --mrb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --mrb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mrb-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
    --mrb-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --mrb-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mrb-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    
    /* Font Sizes */
    --mrb-text-xs: 0.75rem;   /* 12px */
    --mrb-text-sm: 0.875rem;  /* 14px */
    --mrb-text-base: 1rem;    /* 16px */
    --mrb-text-lg: 1.125rem;  /* 18px */
    --mrb-text-xl: 1.25rem;   /* 20px */
    --mrb-text-2xl: 1.5rem;   /* 24px */
    --mrb-text-3xl: 1.875rem; /* 30px */
    --mrb-text-4xl: 2.25rem;  /* 36px */
    
    /* Font Weights */
    --mrb-font-normal: 400;
    --mrb-font-medium: 500;
    --mrb-font-semibold: 600;
    --mrb-font-bold: 700;
    --mrb-font-extrabold: 800;
    
    /* Line Heights */
    --mrb-leading-tight: 1.25;
    --mrb-leading-normal: 1.5;
    --mrb-leading-relaxed: 1.75;
    
    /* Transitions */
    --mrb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --mrb-transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --mrb-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --mrb-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-Index Scale */
    --mrb-z-dropdown: 10;
    --mrb-z-sticky: 20;
    --mrb-z-fixed: 30;
    --mrb-z-modal-backdrop: 40;
    --mrb-z-modal: 50;
    --mrb-z-popover: 60;
    --mrb-z-tooltip: 70;
    --mrb-z-toast: 9999999;
    
    /* Grid & Layout */
    --mrb-container-sm: 640px;
    --mrb-container-md: 768px;
    --mrb-container-lg: 1024px;
    --mrb-container-xl: 1280px;
    --mrb-container-2xl: 1536px;
}

/* ===========================
   🏗️ BASE STYLES
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--mrb-font-family);
    background: var(--mrb-background);
    color: var(--mrb-text-primary);
    line-height: var(--mrb-leading-normal);
    overflow-x: hidden;
}

/* Prevent body scroll when modal is open */
body.mrb-modal-open {
    overflow: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   🏛️ MAIN CONTAINER
   =========================== */

.mrb-container {
    margin: 0 auto;
}

@media (max-width: 768px) {
    .mrb-container {
    }
}

/* ===========================
   📱 HEADER SECTION - HERO STYLE
   =========================== */

.mrb-header {
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: none;
    border-radius: var(--mrb-radius-xl);
    padding: var(--mrb-space-8) 20px;
    margin-bottom: var(--mrb-space-8);
    position: relative;
    color: white;
}

.mrb-header-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

.mrb-header {
    position: relative;
}

.mrb-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mrb-space-8);
    flex-wrap: wrap;
    gap: var(--mrb-space-4);
    position: relative;
}

.mrb-header-spacer {
    flex: 1;
}

.mrb-page-title {
    font-size: var(--mrb-text-3xl);
    font-weight: var(--mrb-font-extrabold);
    color: white;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: mrb-slide-up 0.8s ease-out;
}

.mrb-page-title .mrb-icon {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* User Status - wie Hero Credits Card */
.mrb-user-status {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-4);
    animation: mrb-slide-up 0.8s ease-out 0.2s both;
}

.mrb-credits-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: var(--mrb-space-3) var(--mrb-space-5);
    border-radius: var(--mrb-radius-lg);
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-sm);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    transition: all var(--mrb-transition-normal);
    cursor: default;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mrb-credits-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.mrb-credits-card .mrb-icon {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mrb-flatrate-badge {
    background: rgba(52, 199, 89, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--mrb-space-2) var(--mrb-space-3);
    border-radius: var(--mrb-radius-md);
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--mrb-space-1);
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mrb-flatrate-badge .mrb-icon {
    width: 14px;
    height: 14px;
}

/* ===========================
   🔽 FILTERS SECTION - GLASSMORPHISM
   =========================== */

.mrb-filters {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--mrb-radius-xl);
    padding: var(--mrb-space-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mrb-space-6);
    animation: mrb-slide-up 0.8s ease-out 0.4s both;
}

.mrb-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-3);
}

/* Make date filter full width on first row */
.mrb-filter-group:first-child {
    grid-column: 1 / -1;
}

.mrb-filter-label {
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-bold);
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mrb-filter-section .mrb-filter-input,
.mrb-filter-section .mrb-filter-select {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    transition: all var(--mrb-transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Date Navigation */
.mrb-date-navigation {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
}

.mrb-date-nav-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--mrb-transition-fast);
    flex-shrink: 0;
}

.mrb-date-nav-btn:hover {
    background: var(--mrb-primary);
    border-color: var(--mrb-primary);
    color: white;
}

.mrb-date-nav-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #6B7280;
}

/* Calendar Keeper Checkbox */
.mrb-calendar-keeper {
    margin-top: var(--mrb-space-3);
}

.mrb-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    font-size: var(--mrb-text-sm);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    user-select: none;
}

.mrb-checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-sm);
    cursor: pointer;
    transition: all var(--mrb-transition-fast);
}

.mrb-checkbox:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.mrb-checkbox:checked {
    background: var(--mrb-primary);
    border-color: var(--mrb-primary);
}

.mrb-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Date Display Wrapper */
.mrb-date-display-wrapper {
    position: relative;
    flex: 1;
}

/* Custom Calendar Widget */
.mrb-calendar-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--mrb-space-2);
    background: white;
    border-radius: var(--mrb-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: var(--mrb-space-4);
    z-index: 9999;
    display: none;
    min-width: 280px;
}

.mrb-calendar-popup.show {
    display: block;
}

/* Calendar Header */
.mrb-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mrb-space-4);
}

.mrb-calendar-month-year {
    font-size: var(--mrb-text-lg);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
}

.mrb-calendar-nav {
    display: flex;
    gap: var(--mrb-space-2);
}

.mrb-calendar-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mrb-primary);
    color: white;
    border: none;
    border-radius: var(--mrb-radius-sm);
    cursor: pointer;
    transition: all var(--mrb-transition-fast);
}

.mrb-calendar-nav-btn:hover {
    background: var(--mrb-primary-light);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.mrb-calendar-nav-btn svg {
    width: 14px;
    height: 14px;
    color: white;
    flex-shrink: 0;
}

/* Calendar Grid */
.mrb-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--mrb-space-1);
    margin-bottom: var(--mrb-space-2);
}

.mrb-calendar-weekday {
    text-align: center;
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-secondary);
    padding: var(--mrb-space-2);
}

.mrb-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--mrb-space-1);
}

.mrb-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mrb-text-sm);
    color: var(--mrb-text-primary);
    border-radius: var(--mrb-radius-sm);
    cursor: pointer;
    transition: all var(--mrb-transition-fast);
    position: relative;
}

.mrb-calendar-day:hover:not(.disabled):not(.other-month) {
    background: var(--mrb-primary);
    color: white;
    font-weight: var(--mrb-font-semibold);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    cursor: pointer;
}

.mrb-calendar-day.today {
    background: var(--mrb-primary-light);
    color: white;
    font-weight: var(--mrb-font-semibold);
}

.mrb-calendar-day.selected {
    background: var(--mrb-primary);
    color: white;
    font-weight: var(--mrb-font-semibold);
}

.mrb-calendar-day.has-booking::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--mrb-success);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2);
}

.mrb-calendar-day.other-month {
    color: var(--mrb-text-tertiary);
    opacity: 0.6;
    cursor: pointer;
}

.mrb-calendar-day.other-month:hover {
    background: rgba(0, 122, 255, 0.1);
    color: var(--mrb-primary);
    opacity: 1;
    transform: scale(1.05);
}

.mrb-calendar-day.disabled {
    color: var(--mrb-text-tertiary);
    opacity: 0.5;
    cursor: not-allowed;
}

.mrb-filter-section .mrb-filter-input:focus,
.mrb-filter-section .mrb-filter-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.mrb-filter-section .mrb-filter-input::placeholder {
    color: rgba(29, 29, 31, 0.6);
}

/* Specific filter selectors to prevent system override */
#mrb-room-type-filter.mrb-filter-select,
#mrb-standort-filter.mrb-filter-select,
.mrb-filter-section #mrb-room-type-filter,
.mrb-filter-section #mrb-standort-filter {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--mrb-radius-lg) !important;
    padding: var(--mrb-space-3) var(--mrb-space-4) !important;
    font-size: var(--mrb-text-base) !important;
    font-weight: var(--mrb-font-medium) !important;
    color: var(--mrb-text-primary) !important;
    transition: all var(--mrb-transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    min-height: 44px;
}

#mrb-room-type-filter.mrb-filter-select:focus,
#mrb-standort-filter.mrb-filter-select:focus,
.mrb-filter-section #mrb-room-type-filter:focus,
.mrb-filter-section #mrb-standort-filter:focus,
.mrb-filter-section #mrb-date-display:focus,
#mrb-date-display.mrb-filter-input:focus,
.mrb-date-display-wrapper #mrb-date-display:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px);
}

/* Dropdown Options Styling */
#mrb-room-type-filter.mrb-filter-select option,
#mrb-standort-filter.mrb-filter-select option,
.mrb-filter-section #mrb-room-type-filter option,
.mrb-filter-section #mrb-standort-filter option {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--mrb-text-primary) !important;
    padding: var(--mrb-space-2) var(--mrb-space-3) !important;
    font-size: var(--mrb-text-base) !important;
    font-weight: var(--mrb-font-medium) !important;
    border: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#mrb-room-type-filter.mrb-filter-select option:hover,
#mrb-standort-filter.mrb-filter-select option:hover,
.mrb-filter-section #mrb-room-type-filter option:hover,
.mrb-filter-section #mrb-standort-filter option:hover {
    background: var(--mrb-primary) !important;
    color: white !important;
}

#mrb-room-type-filter.mrb-filter-select option:checked,
#mrb-standort-filter.mrb-filter-select option:checked,
.mrb-filter-section #mrb-room-type-filter option:checked,
.mrb-filter-section #mrb-standort-filter option:checked {
    background: var(--mrb-primary-light) !important;
    color: var(--mrb-primary) !important;
    font-weight: var(--mrb-font-semibold) !important;
}

/* Date display input styling */
#mrb-date-display.mrb-filter-input,
.mrb-date-display-wrapper #mrb-date-display,
.mrb-filter-section #mrb-date-display {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--mrb-radius-lg) !important;
    padding: var(--mrb-space-3) var(--mrb-space-4) !important;
    font-size: var(--mrb-text-base) !important;
    font-weight: var(--mrb-font-medium) !important;
    color: var(--mrb-text-primary) !important;
    transition: all var(--mrb-transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    min-width: 140px;
}

.mrb-action-button {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--mrb-primary);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-2) var(--mrb-space-4);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    height: 38px;
    align-self: flex-end;
}

.mrb-action-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
    color: #0056CC;
}

.mrb-action-button:active {
    transform: translateY(-1px);
}

.mrb-action-button .mrb-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--mrb-transition-normal);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mrb-action-button.mrb-refresh-spin .mrb-icon {
    animation: mrb-spin 1s linear infinite;
}

/* View Switcher - Glassmorphism Style */
.mrb-view-switcher {
    display: flex;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: auto;
    flex-shrink: 0;
}

/* View Switcher in Header - Between Title and Status */
.mrb-view-switcher-header {
    order: 2;
    margin: 0 var(--mrb-space-4);
}

.mrb-view-btn {
    background: transparent;
    border: none;
    padding: var(--mrb-space-3) var(--mrb-space-4);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.mrb-view-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.mrb-view-btn.active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--mrb-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mrb-view-btn .mrb-icon {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ===========================
   📱 MOBILE RESPONSIVE - OPTIMIERT
   =========================== */

@media (max-width: 768px) {
    .mrb-header {
        padding: var(--mrb-space-5) 20px;
    }
    
    .mrb-header-top {
        flex-direction: column;
        gap: var(--mrb-space-3);
        text-align: center;
        margin-bottom: var(--mrb-space-5);
    }
    
    /* View Switcher Mobile Position */
    .mrb-view-switcher-header {
        order: 1;
        margin: var(--mrb-space-3) 0;
    }
    
    .mrb-page-title {
        font-size: var(--mrb-text-2xl);
    }
    
    .mrb-page-title .mrb-icon {
        width: 28px;
        height: 28px;
    }
    
    .mrb-user-status {
        flex-direction: row;
        justify-content: center;
        gap: var(--mrb-space-3);
        flex-wrap: wrap;
    }
    
    .mrb-credits-card {
        padding: var(--mrb-space-2) var(--mrb-space-4);
        font-size: var(--mrb-text-sm);
    }
    
    /* Mobile Filter Layout - Kompakter */
    .mrb-filters {
        gap: var(--mrb-space-3);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 
            "date date"
            "type location"
            "instrument instrument"
            "action action";
    }
    
    .mrb-filter-group:nth-child(1) { grid-area: date; }
    .mrb-filter-group:nth-child(2) { grid-area: type; }
    .mrb-filter-group:nth-child(3) { grid-area: location; }
    .mrb-filter-group:nth-child(4) { grid-area: instrument; }
    .mrb-action-button { 
        grid-area: action; 
        justify-self: center;
        align-self: center;
        margin-top: 0;
        height: 36px;
    }
    
    .mrb-filter-group {
        min-width: unset;
        flex: none;
    }
    
    .mrb-filter-label {
        font-size: var(--mrb-text-xs);
        margin-bottom: var(--mrb-space-1);
    }
    
    .mrb-filter-section .mrb-filter-input,
    .mrb-filter-section .mrb-filter-select {
        padding: var(--mrb-space-3);
        font-size: var(--mrb-text-sm);
        border-radius: var(--mrb-radius-md);
    }
    
    .mrb-action-button {
        padding: var(--mrb-space-3) var(--mrb-space-4);
        font-size: var(--mrb-text-sm);
        justify-content: center;
        margin-top: var(--mrb-space-2);
    }
    
    .mrb-view-switcher {
        margin-top: var(--mrb-space-2);
    }
}

@media (max-width: 480px) {
    .mrb-header {
        padding: var(--mrb-space-4) 15px;
        border-radius: var(--mrb-radius-lg);
    }
    
    .mrb-page-title {
        font-size: var(--mrb-text-xl);
        gap: var(--mrb-space-2);
    }
    
    .mrb-page-title .mrb-icon {
        width: 24px;
        height: 24px;
    }
    
    .mrb-credits-card {
        padding: var(--mrb-space-2) var(--mrb-space-3);
        font-size: var(--mrb-text-xs);
    }
    
    .mrb-flatrate-badge {
        padding: var(--mrb-space-1) var(--mrb-space-2);
        font-size: 10px;
    }
    
    /* Noch kompaktere Filter für sehr kleine Screens */
    .mrb-filters {
        gap: var(--mrb-space-2);
        grid-template-columns: 1fr;
        grid-template-areas: 
            "date"
            "type"
            "location"
            "action"
            "views";
    }
    
    .mrb-filter-section .mrb-filter-input,
    .mrb-filter-section .mrb-filter-select {
        padding: var(--mrb-space-2) var(--mrb-space-3);
        font-size: var(--mrb-text-sm);
    }
    
    .mrb-filter-label {
        font-size: 10px;
    }
    
    .mrb-action-button {
        padding: var(--mrb-space-2) var(--mrb-space-3);
        font-size: var(--mrb-text-sm);
    }
    
    .mrb-view-switcher {
        margin-top: var(--mrb-space-1);
    }
}

/* ===========================
   ✨ PREMIUM GLASSMORPHISM EFFECTS
   =========================== */

/* Subtile Highlight-Effekte */
.mrb-header-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    opacity: 0.7;
}

/* Depth & Layering */
.mrb-filters {
    position: relative;
}

.mrb-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    border-radius: var(--mrb-radius-xl) var(--mrb-radius-xl) 0 0;
}

/* Enhanced Glow Effects */
.mrb-credits-card {
    position: relative;
}

.mrb-credits-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border-radius: var(--mrb-radius-lg);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--mrb-transition-normal);
}

.mrb-credits-card:hover::before {
    opacity: 1;
}

/* Responsive Glow Reduction */
@media (max-width: 768px) {
    .mrb-credits-card::before,
    .mrb-header::before,
    .mrb-header::after {
        display: none;
    }
}

/* Performance Optimizations */
.mrb-header,
.mrb-filters,
.mrb-credits-card,
.mrb-action-button {
    will-change: transform;
    transform: translateZ(0);
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mrb-header::before,
    .mrb-header::after {
        animation: none;
    }
    
    .mrb-page-title,
    .mrb-user-status,
    .mrb-filters {
        animation: none;
    }
}

/* ===========================
   ⏳ LOADING STATES
   =========================== */

.mrb-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.mrb-loading-spinner {
    text-align: center;
}

.mrb-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--mrb-neutral-200);
    border-top: 3px solid var(--mrb-primary);
    border-radius: 50%;
    animation: mrb-spin 1s linear infinite;
    margin: 0 auto var(--mrb-space-4);
}

.mrb-spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.mrb-loading-text {
    color: var(--mrb-text-secondary);
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-medium);
}

/* ===========================
   🏠 ROOM CARDS - GRID VIEW
   =========================== */

.mrb-rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--mrb-space-6);
    margin-bottom: var(--mrb-space-8);
}

.mrb-room-card {
    background: var(--mrb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-6);
    transition: all var(--mrb-transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--mrb-shadow-sm);
}

.mrb-room-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--mrb-shadow-lg);
    border-color: var(--mrb-primary);
}

.mrb-room-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mrb-primary), var(--mrb-primary-light));
    opacity: 0;
    transition: opacity var(--mrb-transition-normal);
}

.mrb-room-card:hover::before {
    opacity: 1;
}

.mrb-room-header {
    margin-bottom: var(--mrb-space-4);
}

.mrb-room-name {
    font-size: var(--mrb-text-xl);
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
    margin-bottom: var(--mrb-space-2);
}

.mrb-room-type {
    background: var(--mrb-neutral-100);
    color: var(--mrb-text-secondary);
    padding: var(--mrb-space-1) var(--mrb-space-2);
    border-radius: var(--mrb-radius-sm);
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mrb-room-meta {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
    margin-bottom: var(--mrb-space-5);
}

.mrb-room-detail {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    font-size: var(--mrb-text-sm);
    color: var(--mrb-text-secondary);
}

.mrb-room-detail .mrb-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* ===========================
   ⏰ TIME SLOTS - GRID VIEW
   =========================== */

.mrb-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--mrb-space-2);
    margin-bottom: var(--mrb-space-5);
}

.mrb-time-slot {
    aspect-ratio: 1;
    background: var(--mrb-neutral-100);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    position: relative;
    overflow: hidden;
}

.mrb-time-slot {
    animation-fill-mode: none !important;
}

.mrb-time-slot.mrb-slot-available {
    background: var(--mrb-success);
    color: white;
    border-color: var(--mrb-success);
}

.mrb-time-slot.mrb-slot-premium {
    background: linear-gradient(135deg, var(--mrb-accent), #FF8C00);
    color: white;
    border-color: var(--mrb-accent);
}

.mrb-time-slot.mrb-slot-booked {
    background: var(--mrb-neutral-200);
    color: var(--mrb-text-tertiary);
    cursor: not-allowed;
    border-color: var(--mrb-neutral-200);
}

/* Eigene Buchungen hervorheben - mit höherer Spezifität */
.mrb-time-slot.mrb-slot-booked.mrb-own-booking {
    background: #007aff !important;
    color: white !important;
    cursor: pointer !important;
    border-color: #007aff !important;
    position: relative;
}

.mrb-time-slot.mrb-slot-booked.mrb-own-booking:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.mrb-time-slot.mrb-slot-booked.mrb-own-booking .mrb-user-name {
    font-size: 8px;
    opacity: 0.9;
    margin-top: 2px;
}

.mrb-time-slot.mrb-slot-selected {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    transform: scale(1.1);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-time-slot:not(.mrb-slot-booked):hover {
    transform: scale(1.08);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-slot-time {
    font-size: 10px;
    margin-bottom: 2px;
}

.mrb-slot-price {
    font-size: 11px;
    font-weight: var(--mrb-font-bold);
}

/* ===========================
   💰 PRICING INFO
   =========================== */

.mrb-pricing-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--mrb-space-4);
    border-top: 1px solid var(--mrb-border);
}

.mrb-price-range {
    font-size: var(--mrb-text-lg);
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-primary);
}

.mrb-book-button {
    background: var(--mrb-primary);
    color: white;
    border: none;
    border-radius: var(--mrb-radius-full);
    padding: var(--mrb-space-2) var(--mrb-space-4);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    position: relative;
    overflow: hidden;
}

.mrb-book-button:hover {
    background: #0056CC;
    transform: scale(1.05);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-book-button:disabled {
    background: var(--mrb-neutral-300);
    cursor: not-allowed;
    transform: none;
}

/* ===========================
   📊 TABLE VIEW - WHITE 1PX BORDERS
   =========================== */

.mrb-table-container {
    background: var(--mrb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    box-shadow: var(--mrb-shadow-md);
    margin-bottom: var(--mrb-space-8);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Verhindert Content-Überlauf */
    /* Kein padding-bottom mehr */
}

/* ::after Element entfernt - nicht mehr benötigt */

/* Wrapper für die Tabelle mit separatem Scrolling */
.mrb-table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    /* Firefox Scrollbar komplett ausblenden */
    scrollbar-width: none;
    /* Kein smooth scrolling für direkte Reaktion */
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* Border-Radius für inneren Content */
    border-radius: var(--mrb-radius-lg);
}


.mrb-booking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mrb-text-sm);
    min-width: 800px;
    border: 1px solid white;
    margin-bottom: 0px;
    table-layout: fixed;
}

/* Table Header */
.mrb-table-header {
    background: linear-gradient(135deg, var(--mrb-neutral-100), var(--mrb-surface));
    border-bottom: 1px solid white;
}

.mrb-table-header th {
    padding: var(--mrb-space-4);
    text-align: center;
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
    font-size: var(--mrb-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid white;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: var(--mrb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
}

.mrb-time-header {
    text-align: left !important;
    font-size: var(--mrb-text-sm) !important;
    text-transform: none !important;
    font-weight: var(--mrb-font-semibold) !important;
    width: 80px;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    top: 0;
    z-index: 11;
    background: var(--mrb-surface) !important;
    border-right: 1px solid white;
}

/* Room Header Cells */
.mrb-room-header {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    position: relative;
}

/* Sticky Table Improvements für bessere Performance */
.mrb-booking-table {
    table-layout: fixed;
    width: auto;
    min-width: 100%;
}

/* Optional: Floating Horizontal Scrollbar Alternative */
/* Uncomment if you prefer a floating scrollbar at the bottom of viewport
.mrb-table-wrapper {
    position: relative;
}

.mrb-floating-scrollbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    height: 8px;
    background: var(--mrb-neutral-100);
    border-radius: 4px;
    overflow-x: auto;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mrb-floating-scrollbar-thumb {
    height: 100%;
    background: var(--mrb-primary);
    border-radius: 4px;
    cursor: pointer;
}
*/

/* Scrollbar-Gestaltung für den Wrapper */
.mrb-table-scroll-wrapper::-webkit-scrollbar {
    width: 12px; /* Für vertikale Scrollbar */
    height: 12px; /* Horizontale Scrollbar anzeigen */
}

.mrb-table-scroll-wrapper {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* IE und Edge */
}

/* Track (Hintergrund) */
.mrb-table-scroll-wrapper::-webkit-scrollbar-track {
    background: var(--mrb-neutral-50);
    border: 1px solid var(--mrb-neutral-200);
}

/* Handle (Scrollbalken) */
.mrb-table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--mrb-neutral-300);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
}

.mrb-table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--mrb-neutral-400);
}

.mrb-table-scroll-wrapper::-webkit-scrollbar-thumb:active {
    background-color: var(--mrb-neutral-500);
}

/* Ecke wo sich Scrollbars treffen */
.mrb-table-scroll-wrapper::-webkit-scrollbar-corner {
    background: var(--mrb-neutral-50);
    border: 1px solid var(--mrb-neutral-200);
}


.mrb-room-number {
    font-size: var(--mrb-text-xs);
    font-weight: 700;
    margin-bottom: 2px;
}

.mrb-room-type {
    font-size: 9px;
    font-weight: var(--mrb-font-semibold);
    padding: 2px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Room Type Styling */
.mrb-room-type.pro {
    background: var(--mrb-pro-bg);
    color: var(--mrb-pro-color);
}

.mrb-room-type.premium {
    background: var(--mrb-premium-bg);
    color: var(--mrb-premium-color);
}

.mrb-room-type.basic {
    background: var(--mrb-basic-bg);
    color: var(--mrb-basic-color);
}

.mrb-room-type.dj {
    background: var(--mrb-dj-bg);
    color: var(--mrb-dj-color);
}

.mrb-room-type.podcast {
    background: var(--mrb-podcast-bg);
    color: var(--mrb-podcast-color);
}

.mrb-flatrate-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    color: var(--mrb-accent);
    font-size: 10px;
}

/* Table Body */
.mrb-table-body {
    background: var(--mrb-surface);
}

.mrb-table-row {
    border-bottom: 1px solid white;
    transition: background var(--mrb-transition-fast);
}

.mrb-table-row:hover {
    background: rgba(0, 122, 255, 0.02);
}

/* Time Column */
.mrb-time-cell {
    padding: var(--mrb-space-4);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-secondary);
    border-right: 1px solid white;
    background: var(--mrb-surface);
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 2;
    backdrop-filter: blur(10px);
    width: 80px;
    text-align: center;
}

/* Table Slot Cells */
.mrb-table-slot {
    padding: var(--mrb-space-3);
    border-right: 1px solid white;
    text-align: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    position: relative;
    min-height: 44px;
    vertical-align: middle;
    font-weight: var(--mrb-font-semibold);
    border-radius: 12px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

/* Zeitslots mit 4px Abstand */
.mrb-time-slots {
    gap: 4px !important;
}

.mrb-time-slots-grid {
    gap: 4px !important;
}

.mrb-table-slot:hover {
    transform: scale(1.02);
    box-shadow: inset 0 0 0 2px var(--mrb-primary);
    z-index: 5;
}

/* Table Slot States */
.mrb-table-slot.mrb-slot-available {
    background: var(--mrb-success);
    color: white;
}

.mrb-table-slot.mrb-slot-available:hover {
    background: #2DB555;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.mrb-table-slot.mrb-slot-premium {
    background: linear-gradient(135deg, var(--mrb-accent), #FF8C00);
    color: white;
}

.mrb-table-slot.mrb-slot-premium:hover {
    background: linear-gradient(135deg, #E6830D, #D17500);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.mrb-table-slot.mrb-slot-booked {
    background: var(--mrb-neutral-200);
    color: var(--mrb-text-tertiary);
    cursor: not-allowed;
}

.mrb-table-slot.mrb-slot-booked:hover {
    transform: none;
    box-shadow: none;
}

/* Eigene Buchungen in Tabelle hervorheben - mit höherer Spezifität */
.mrb-table-slot.mrb-slot-booked.mrb-own-booking {
    background: #007aff !important;
    color: white !important;
    cursor: pointer !important;
}

.mrb-table-slot.mrb-slot-booked.mrb-own-booking:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.mrb-table-slot.mrb-slot-booked.mrb-own-booking .mrb-user-name {
    font-size: 10px;
    display: block;
    opacity: 0.9;
    color: white !important;
}

.mrb-table-slot.mrb-slot-selected {
    background: var(--mrb-primary);
    color: white;
    transform: scale(1.05);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-table-slot.mrb-slot-unavailable {
    background: var(--mrb-neutral-100);
    color: var(--mrb-text-tertiary);
    cursor: not-allowed;
}

.mrb-slot-price {
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-bold);
}

.mrb-slot-status {
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-medium);
}

/* Stelle sicher, dass eigene Buchungen in Tabellen korrekt angezeigt werden */
.mrb-table-slot.mrb-own-booking .mrb-slot-status {
    color: white !important;
}

/* Table Footer */
.mrb-table-footer {
    border-top: 1px solid white;
}

.mrb-table-footer td {
    padding: var(--mrb-space-4);
    text-align: center;
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
    border-right: 1px solid white;
}

.mrb-footer-label {
    font-weight: var(--mrb-font-semibold) !important;
    color: var(--mrb-text-primary) !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    border-right: 1px solid white !important;
}

.mrb-day-price-cell {
    text-align: center;
}

.mrb-day-price {
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
}

.mrb-day-price.pro {
    color: var(--mrb-pro-color);
}

.mrb-day-price.premium {
    color: var(--mrb-premium-color);
}

.mrb-day-price.basic {
    color: var(--mrb-basic-color);
}

.mrb-day-price.dj {
    color: var(--mrb-dj-color);
}

.mrb-day-price.podcast {
    color: var(--mrb-podcast-color);
}

/* ===========================
   🪟 MODAL STYLES
   =========================== */

.mrb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: var(--mrb-space-4);
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.mrb-modal-overlay.show {
    opacity: 1;
}

.mrb-modal {
    background: var(--mrb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--mrb-shadow-xl);
    position: relative;
    
    /* Zoom-in Animation */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    /* Container isolieren */
    isolation: isolate;
    /* Rendering optimieren */
    contain: paint;
}

.mrb-modal.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.mrb-modal-header-container {
    position: sticky;
    top: 0;
    background: var(--mrb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10;
    border-radius: var(--mrb-radius-xl) var(--mrb-radius-xl) 0 0;
}

.mrb-modal-header {
    padding: var(--mrb-space-6) var(--mrb-space-6) 0 var(--mrb-space-6);
    border-bottom: 1px solid var(--mrb-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mrb-modal-title {
    font-size: var(--mrb-text-xl);
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
}

.mrb-modal-close {
    background: var(--mrb-neutral-100);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    color: var(--mrb-text-secondary);
    flex-shrink: 0;
}

.mrb-modal-close:hover {
    background: var(--mrb-neutral-200);
    color: var(--mrb-text-primary);
    transform: scale(1.1);
}

.mrb-modal-close .mrb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mrb-modal-body {
    /* Das ist der entscheidende Fix */
    transform: translateZ(0);
    /* Zusätzliche Sicherheit */
    contain: layout;
    overflow: hidden;
    padding: 0;
}

.mrb-modal-footer {
    padding: var(--mrb-space-6);
    border-top: 1px solid var(--mrb-border);
    display: flex;
    gap: var(--mrb-space-4);
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    background: var(--mrb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 var(--mrb-radius-xl) var(--mrb-radius-xl);
}

/* ===========================
   🏷️ MODAL TABS - VERBESSERT
   =========================== */

.mrb-modal-tabs {
    display: flex;
    gap: 0;
    padding: var(--mrb-space-6) var(--mrb-space-6) var(--mrb-space-4) var(--mrb-space-6);
    margin: 0;
    border-bottom: 1px solid var(--mrb-border);
    position: static;
    background: var(--mrb-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mrb-tab-btn {
    flex: 1;
    padding: var(--mrb-space-3) var(--mrb-space-4);
    background: var(--mrb-surface-subtle);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-secondary);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mrb-space-2);
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mrb-tab-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.mrb-tab-btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mrb-tab-btn:hover {
    background: var(--mrb-surface);
    color: var(--mrb-text-primary);
    transform: translateY(-1px);
}

.mrb-tab-btn.active {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-tab-btn .mrb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mrb-tab-content {
    display: none;
}

.mrb-tab-content.active {
    display: block;
}

/* ===========================
   📄 BOOKING FORM SECTIONS
   =========================== */

.mrb-booking-summary {
    background: linear-gradient(135deg, var(--mrb-primary), var(--mrb-primary-light));
    color: white;
    padding: var(--mrb-space-6);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-4);
}

.mrb-room-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--mrb-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mrb-room-icon .mrb-icon {
    width: 32px;
    height: 32px;
}

.mrb-booking-info h3 {
    font-size: var(--mrb-text-xl);
    font-weight: var(--mrb-font-bold);
    margin-bottom: var(--mrb-space-1);
}

.mrb-booking-meta {
    font-size: var(--mrb-text-sm);
    opacity: 0.9;
    display: flex;
    flex-wrap: wrap;
		gap: 8px;
}

.mrb-form-section {
    padding: var(--mrb-space-6);
    border-bottom: 1px solid var(--mrb-border);
    opacity: 0;
    transform: translateY(20px);
    animation: mrb-slide-up 0.6s ease forwards;
    overflow: hidden;
    contain: layout;
}

.mrb-form-section:nth-child(1) { animation-delay: 0.1s; }
.mrb-form-section:nth-child(2) { animation-delay: 0.2s; }
.mrb-form-section:nth-child(3) { animation-delay: 0.3s; }
.mrb-form-section:nth-child(4) { animation-delay: 0.4s; }
.mrb-form-section:nth-child(5) { animation-delay: 0.5s; }

.mrb-section-title {
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
    margin-bottom: var(--mrb-space-4);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
}

.mrb-section-title .mrb-icon {
    width: 20px;
    height: 20px;
    color: var(--mrb-primary);
}

/* ===========================
   ⏰ TIME SELECTOR
   =========================== */

.mrb-time-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--mrb-space-2);
}

.mrb-time-option {
    background: var(--mrb-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3);
    text-align: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-sm);
}

.mrb-time-option:hover:not(.mrb-time-option-disabled) {
    background: var(--mrb-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-time-option.mrb-time-option-selected {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-time-option.mrb-time-option-premium {
    background: var(--mrb-accent);
    color: white;
}

.mrb-time-option.mrb-time-option-disabled .mrb-time-label {
    text-decoration: line-through;
    opacity: 0.7;
}

/* ===========================
   ⏱️ DURATION PICKER
   =========================== */

.mrb-duration-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mrb-space-3);
    margin-bottom: var(--mrb-space-5);
}

.mrb-duration-option {
    background: var(--mrb-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-4);
    text-align: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-base);
}

.mrb-duration-option:hover {
    background: var(--mrb-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-duration-option.selected {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

/* ===========================
   📝 FORM CONTROLS
   =========================== */

.mrb-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mrb-space-4);
}

.mrb-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
}

.mrb-form-label {
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mrb-form-control {
    background: var(--mrb-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    transition: all var(--mrb-transition-normal);
}

.mrb-form-control:focus {
    outline: none;
    border-color: var(--mrb-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* ===========================
   ⏱️ TIME VISUALIZATION
   =========================== */

.mrb-time-visualization {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mrb-space-4);
    margin-bottom: var(--mrb-space-6);
    flex-wrap: wrap;
}

.mrb-time-box {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    min-width: 100px;
    transition: all 0.3s ease;
}

.mrb-time-box.mrb-start, 
.mrb-time-box.mrb-end {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.mrb-time-box.mrb-start {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
    color: white;
}

.mrb-time-box.mrb-end {
    border-color: var(--mrb-success);
    background: var(--mrb-success);
    color: white;
}

.mrb-time-box .mrb-time-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mrb-time-box .mrb-time-value {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.mrb-time-arrow {
    font-size: 24px;
    color: var(--mrb-primary);
    font-weight: bold;
    opacity: 0.7;
}

/* ===========================
   🛠️ EQUIPMENT SELECTION
   =========================== */

.mrb-equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--mrb-space-3);
}

/* ===========================
   📋 FLATRATE CONTENT
   =========================== */

#mrb-flatrate-content {
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-4);
    background: var(--mrb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: var(--mrb-space-3);
}

.mrb-booking-type-info {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    position: relative;
}

/* Price Badge Styles */
.mrb-price-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 12px;
    border-radius: var(--mrb-radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mrb-price-badge.mrb-price-normal {
    background: var(--mrb-neutral-100);
    color: var(--mrb-neutral-600);
    border: 1px solid var(--mrb-neutral-200);
}

.mrb-price-badge.mrb-price-discount {
    background: var(--mrb-success-light);
    color: var(--mrb-success);
    border: 1px solid var(--mrb-success);
}

.mrb-price-badge.mrb-price-free {
    background: var(--mrb-primary-light);
    color: var(--mrb-primary);
    border: 1px solid var(--mrb-primary);
}

/* Container position for badges */
.mrb-booking-type-single,
.mrb-flatrate-option-content {
    position: relative;
}

.mrb-flatrate-option-header {
    position: relative;
    padding-right: 120px; /* Space for badge */
}

.mrb-equipment-item {
    background: var(--mrb-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-4);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
}

.mrb-equipment-item:hover {
    background: var(--mrb-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-equipment-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.mrb-equipment-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mrb-equipment-label input[type="checkbox"]:checked + .mrb-equipment-name {
    color: white;
}

.mrb-equipment-item:has(input:checked) {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-equipment-name {
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-sm);
}

.mrb-equipment-price {
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-medium);
    opacity: 0.8;
}

/* Equipment Styles */
.mrb-equipment-included {
    background: var(--mrb-success) !important;
    color: white !important;
    cursor: default !important;
}

.mrb-equipment-included:hover {
    transform: none !important;
    background: var(--mrb-success) !important;
}

.mrb-equipment-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mrb-equipment-included-badge {
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-bold);
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: var(--mrb-radius-sm);
    margin-top: var(--mrb-space-1);
}

/* ===========================
   💰 COST BREAKDOWN - VERBESSERT
   =========================== */

.mrb-cost-breakdown {
    background: var(--mrb-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-5);
    margin-top: var(--mrb-space-4);
}

.mrb-cost-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mrb-space-4);
}

.mrb-cost-title {
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
}

.mrb-cost-total {
    font-size: var(--mrb-text-xl);
    font-weight: var(--mrb-font-extrabold);
    color: var(--mrb-primary);
}

.mrb-cost-items {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-3);
}

.mrb-cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--mrb-text-sm);
    opacity: 0;
    transform: translateX(-10px);
    animation: mrb-slide-in 0.4s ease forwards;
}

.mrb-cost-item:nth-child(1) { animation-delay: 0.1s; }
.mrb-cost-item:nth-child(2) { animation-delay: 0.2s; }
.mrb-cost-item:nth-child(3) { animation-delay: 0.3s; }
.mrb-cost-item:nth-child(4) { animation-delay: 0.4s; }
.mrb-cost-item:nth-child(5) { animation-delay: 0.5s; }

.mrb-cost-label {
    color: var(--mrb-text-secondary);
}

.mrb-cost-value {
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
}

.mrb-cost-divider {
    height: 1px;
    background: var(--mrb-border);
    margin: var(--mrb-space-3) 0;
}

.mrb-cost-total-item {
    padding-top: var(--mrb-space-2);
    border-top: 1px solid var(--mrb-border);
    font-size: var(--mrb-text-base);
}

.mrb-cost-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-6);
    color: var(--mrb-text-secondary);
}

.mrb-calculation-error {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-4);
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: var(--mrb-radius-md);
    color: var(--mrb-error);
}

.mrb-calculation-error .mrb-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ===========================
   👤 USER CREDITS - RECHTS AUSGERICHTET
   =========================== */

.mrb-user-credits {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mrb-space-2);
    margin-top: var(--mrb-space-4);
    padding-top: var(--mrb-space-3);
    border-top: 1px solid var(--mrb-border);
    font-size: var(--mrb-text-sm);
}

.mrb-user-credits .mrb-credits-label {
    color: var(--mrb-text-secondary);
    font-weight: var(--mrb-font-medium);
}

.mrb-credits-label {
    color: white;
    font-weight: var(--mrb-font-medium);
}

.mrb-credits-value {
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-primary);
}

/* ===========================
   💳 CREDITS SECTION
   =========================== */

.mrb-credits-section {
    background: linear-gradient(135deg, var(--mrb-success), #2DB555);
    color: white;
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-4);
    margin-top: var(--mrb-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mrb-credits-info {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-1);
}

.mrb-credits-label {
    font-size: var(--mrb-text-xs);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--mrb-font-semibold);
}

.mrb-credits-value {
    font-size: var(--mrb-text-lg);
    font-weight: var(--mrb-font-bold);
}

.mrb-credits-icon {
    width: 32px;
    height: 32px;
    opacity: 0.8;
}

/* ===========================
   📋 BOOKING TYPE SELECTOR - VERBESSERT
   =========================== */

.mrb-booking-type-selector {
    display: flex;
    gap: var(--mrb-space-3);
    margin-bottom: var(--mrb-space-4);
    padding: var(--mrb-space-3);
    background: var(--mrb-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
}

.mrb-booking-type-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    cursor: pointer;
    font-weight: var(--mrb-font-semibold);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    border-radius: var(--mrb-radius-md);
    transition: all var(--mrb-transition-normal);
    background: var(--mrb-surface-subtle);
    border: 1px solid var(--mrb-border);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mrb-booking-type-option:hover {
    background: var(--mrb-surface);
    transform: translateY(-1px);
    box-shadow: var(--mrb-shadow-sm);
}

.mrb-booking-type-option input[type="radio"] {
    display: none;
}

/* Radio Custom */
.mrb-booking-type-option .mrb-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    position: relative;
    background: var(--mrb-surface);
}

.mrb-booking-type-option input[type="radio"]:checked + .mrb-radio-custom {
    border-color: white;
    background: var(--mrb-primary);
}

.mrb-booking-type-option input[type="radio"]:checked + .mrb-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Selected state for booking type */
.mrb-booking-type-option:has(input:checked) {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-booking-type-option.selected {
    background: var(--mrb-primary);
    color: white;
    border-color: var(--mrb-primary);
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

/* ===========================
   👤 EINZELBUCHUNG - Radio Options
   =========================== */

#mrb-single-booking {
    padding: var(--mrb-space-4);
    background: var(--mrb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--mrb-radius-lg);
    border: 1px solid var(--mrb-border);
}

.mrb-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
}

/* Radio Option */
.mrb-radio-option {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    background: var(--mrb-surface);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mrb-radio-option:hover {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.05);
    transform: translateY(-1px);
}

.mrb-radio-option.selected {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.1);
}

.mrb-radio-option input[type="radio"] {
    display: none;
}

/* Radio Custom */
.mrb-radio-option .mrb-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    position: relative;
    background: var(--mrb-surface);
}

.mrb-radio-option input[type="radio"]:checked + .mrb-radio-custom {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
}

.mrb-radio-option input[type="radio"]:checked + .mrb-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===========================
   👥 GRUPPENBUCHUNG
   =========================== */

.mrb-multiple-booking {
    margin-top: var(--mrb-space-4);
    padding: var(--mrb-space-4);
    background: var(--mrb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--mrb-radius-lg);
    border: 1px solid var(--mrb-border);
}

.mrb-multiple-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mrb-space-4);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    background: var(--mrb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--mrb-radius-md);
    border: 1px solid var(--mrb-border);
}

.mrb-selection-count {
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
    font-size: var(--mrb-text-sm);
}

.mrb-selection-summary {
    font-size: var(--mrb-text-xs);
    color: var(--mrb-text-secondary);
    margin-top: var(--mrb-space-1);
}

.mrb-btn-select-all {
    background: var(--mrb-primary);
    color: white;
    border: none;
    padding: var(--mrb-space-2) var(--mrb-space-3);
    border-radius: var(--mrb-radius-md);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
}

.mrb-btn-select-all:hover {
    background: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--mrb-shadow-sm);
}

.mrb-btn-select-all.deselect {
    background: var(--mrb-neutral-400);
}

.mrb-btn-select-all.deselect:hover {
    background: var(--mrb-neutral-500);
}

.mrb-multiple-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
    max-height: 200px;
    overflow-y: auto;
}

.mrb-multiple-checkbox-option {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    background: var(--mrb-surface);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mrb-multiple-checkbox-option:hover {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.05);
    transform: translateY(-1px);
}

.mrb-multiple-checkbox-option.selected {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.1);
}

.mrb-multiple-checkbox-option input[type="checkbox"] {
    display: none;
}

.mrb-multiple-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: var(--mrb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    background: var(--mrb-surface);
}

.mrb-multiple-checkbox-option input[type="checkbox"]:checked + .mrb-multiple-checkbox-custom {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
}

.mrb-multiple-checkbox-option input[type="checkbox"]:checked + .mrb-multiple-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* ===========================
   ☑️ AGB CHECKBOX
   =========================== */

.mrb-required-checkbox {
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-4);
    background: var(--mrb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: var(--mrb-space-3);
}

.mrb-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--mrb-space-3);
    cursor: pointer;
    line-height: 1.5;
}

.mrb-checkbox-option input[type="checkbox"] {
    display: none;
}

.mrb-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: var(--mrb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--mrb-surface);
}

.mrb-checkbox-option input[type="checkbox"]:checked + .mrb-checkbox-custom {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
}

.mrb-checkbox-option input[type="checkbox"]:checked + .mrb-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.mrb-link {
    color: var(--mrb-primary);
    text-decoration: none;
}

.mrb-link:hover {
    text-decoration: underline;
}

.mrb-required {
    color: var(--mrb-error);
    font-weight: bold;
}

/* ===========================
   🔘 BUTTONS
   =========================== */

.mrb-btn {
    border: none;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3) var(--mrb-space-6);
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-semibold);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    position: relative;
    overflow: hidden;
}

.mrb-btn-secondary {
    background: var(--mrb-neutral-100);
    color: var(--mrb-text-primary);
}

.mrb-btn-secondary:hover {
    background: var(--mrb-neutral-200);
    transform: translateY(-1px);
}

.mrb-btn-primary {
    background: var(--mrb-primary);
    color: white;
}

.mrb-btn-primary:hover:not(:disabled) {
    background: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-btn-primary:disabled,
.mrb-btn.mrb-btn-disabled {
    background: var(--mrb-neutral-300);
    color: var(--mrb-text-tertiary);
    cursor: not-allowed;
    transform: none;
}

.mrb-btn .mrb-icon {
    width: 18px;
    height: 18px;
}

/* Duration Custom Input */
.mrb-duration-custom input {
    width: 40px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    text-align: center;
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
    color: inherit;
    padding: 2px;
}

.mrb-duration-custom input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.mrb-duration-custom .mrb-duration-time {
    margin-bottom: 4px;
}

/* ===========================
   🍞 TOAST NOTIFICATIONS
   =========================== */

.mrb-toast {
    position: fixed;
    top: var(--mrb-space-6);
    right: var(--mrb-space-6);
    background: var(--mrb-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-4);
    box-shadow: var(--mrb-shadow-lg);
    z-index: var(--mrb-z-toast);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    max-width: 400px;
    transform: translateX(100%);
    opacity: 0;
    transition: all var(--mrb-transition-normal);
}

.mrb-toast.mrb-toast-show {
    transform: translateX(0);
    opacity: 1;
}

.mrb-toast-success {
    border-left: 4px solid var(--mrb-success);
}

.mrb-toast-error {
    border-left: 4px solid var(--mrb-error);
}

.mrb-toast-warning {
    border-left: 4px solid var(--mrb-warning);
}

.mrb-toast-info {
    border-left: 4px solid var(--mrb-primary);
}

.mrb-toast-icon {
    flex-shrink: 0;
}

.mrb-toast-icon .mrb-icon {
    width: 20px;
    height: 20px;
}

.mrb-toast-success .mrb-toast-icon {
    color: var(--mrb-success);
}

.mrb-toast-error .mrb-toast-icon {
    color: var(--mrb-error);
}

.mrb-toast-warning .mrb-toast-icon {
    color: var(--mrb-warning);
}

.mrb-toast-info .mrb-toast-icon {
    color: var(--mrb-primary);
}

.mrb-toast-content {
    flex: 1;
}

.mrb-toast-message {
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    line-height: var(--mrb-leading-tight);
		margin-bottom: 0px;
}

.mrb-toast-close {
    background: transparent;
    border: none;
    color: var(--mrb-text-secondary);
    cursor: pointer;
    padding: var(--mrb-space-1);
    border-radius: var(--mrb-radius-sm);
    transition: all var(--mrb-transition-fast);
}

.mrb-toast-close:hover {
    background: var(--mrb-neutral-100);
    color: var(--mrb-text-primary);
}

.mrb-toast-close .mrb-icon {
    width: 16px;
    height: 16px;
}

/* ===========================
   📊 ENHANCED LEGEND
   =========================== */

.mrb-legend {
    background: var(--mrb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-5);
    margin-bottom: var(--mrb-space-6);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-legend-title {
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
    margin-bottom: var(--mrb-space-4);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    border-bottom: 1px solid var(--mrb-border);
    padding-bottom: var(--mrb-space-3);
}

.mrb-legend-title .mrb-icon {
    width: 18px;
    height: 18px;
    color: var(--mrb-primary);
}

.mrb-legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mrb-space-3);
    margin-bottom: var(--mrb-space-4);
}

.mrb-legend-item {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    padding: var(--mrb-space-2);
    border-radius: var(--mrb-radius-sm);
    transition: all var(--mrb-transition-fast);
}

.mrb-legend-item:hover {
    background: var(--mrb-surface-subtle);
    transform: translateX(2px);
}

.mrb-legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--mrb-radius-sm);
    flex-shrink: 0;
    border: 1px solid var(--mrb-border-light);
    box-shadow: var(--mrb-shadow-sm);
}

/* Standard Legend Colors */
.mrb-legend-color.mrb-available {
    background: var(--mrb-success);
}

.mrb-legend-color.mrb-premium {
    background: linear-gradient(135deg, var(--mrb-accent), #FF8C00);
}

.mrb-legend-color.mrb-discount {
    background: linear-gradient(135deg, #34C759, #2DB555);
}

.mrb-legend-color.mrb-booked {
    background: var(--mrb-neutral-300);
}

.mrb-legend-color.mrb-selected {
    background: var(--mrb-primary);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

.mrb-legend-color.mrb-flatrate-only {
    background: linear-gradient(45deg, var(--mrb-success), var(--mrb-primary));
}

/* NEU: Past Time Legend Color */
.mrb-legend-color.mrb-past {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 3px,
        #d0d0d0 3px,
        #d0d0d0 6px
    );
    opacity: 0.8;
}

/* NEU: No Booking Times */
.mrb-legend-color.mrb-no-times {
    background: var(--mrb-neutral-200);
    border: 2px dashed var(--mrb-neutral-400);
}

/* Instrument Blocked (existing) */
.mrb-legend-color.mrb-instrument-blocked {
    background: repeating-linear-gradient(
        45deg,
        #ff6b6b,
        #ff6b6b 3px,
        #ff5252 3px,
        #ff5252 6px
    );
}

/* ===========================
   📊 LEGEND FOOTER - NEU
   =========================== */

.mrb-legend-footer {
    border-top: 1px solid var(--mrb-border);
    padding-top: var(--mrb-space-4);
    margin-top: var(--mrb-space-4);
}

.mrb-current-time-info {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    padding: var(--mrb-space-3);
    background: var(--mrb-surface-subtle);
    border-radius: var(--mrb-radius-md);
    border: 1px solid var(--mrb-border);
    margin-bottom: var(--mrb-space-3);
}

.mrb-current-time-info .mrb-icon {
    color: var(--mrb-primary);
}

.mrb-current-time-label {
    font-size: var(--mrb-text-sm);
    color: var(--mrb-text-secondary);
    font-weight: var(--mrb-font-medium);
}

.mrb-current-time-value {
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-primary);
    font-family: var(--mrb-font-mono);
    background: rgba(0, 122, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.mrb-current-date-value {
    font-size: var(--mrb-text-xs);
    color: var(--mrb-text-tertiary);
    font-weight: var(--mrb-font-medium);
}

/* ===========================
   🚨 LEGEND STATUS MESSAGES
   =========================== */

.mrb-legend-status {
    margin-top: var(--mrb-space-3);
}

.mrb-legend-success,
.mrb-legend-warning,
.mrb-legend-error,
.mrb-legend-info {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    padding: var(--mrb-space-3);
    border-radius: var(--mrb-radius-md);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
}

.mrb-legend-success {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.2);
    color: var(--mrb-success);
}

.mrb-legend-success .mrb-icon {
    color: var(--mrb-success);
}

.mrb-legend-warning {
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--mrb-warning);
}

.mrb-legend-warning .mrb-icon {
    color: var(--mrb-warning);
}

.mrb-legend-error {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    color: var(--mrb-error);
}

.mrb-legend-error .mrb-icon {
    color: var(--mrb-error);
}

.mrb-legend-info {
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.2);
    color: var(--mrb-primary);
}

.mrb-legend-info .mrb-icon {
    color: var(--mrb-primary);
}

/* ===========================
   🎯 DYNAMIC LEGEND ITEMS
   =========================== */

/* Instrument Info (enhanced) */
.mrb-legend-instrument-info {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3) !important;
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    color: #ff6b6b;
    margin-top: var(--mrb-space-2);
    animation: mrb-slide-in 0.3s ease;
}

.mrb-legend-instrument-info .mrb-legend-color {
    width: 14px;
    height: 14px;
}

/* Past Time Info - NEU */
.mrb-legend-past-info {
    background: rgba(160, 160, 160, 0.1);
    border: 1px solid rgba(160, 160, 160, 0.2);
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3) !important;
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-secondary);
    margin-top: var(--mrb-space-2);
    animation: mrb-slide-in 0.3s ease;
}

.mrb-legend-past-info .mrb-legend-color {
    width: 14px;
    height: 14px;
}

/* Dynamic items animation */
.mrb-legend-dynamic {
    animation: mrb-legend-appear 0.4s ease forwards;
}

@keyframes mrb-legend-appear {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===========================
   📱 RESPONSIVE LEGEND
   =========================== */

@media (max-width: 768px) {
    .mrb-legend {
        padding: var(--mrb-space-4);
        margin-bottom: var(--mrb-space-4);
    }
    
    .mrb-legend-items {
        grid-template-columns: 1fr;
        gap: var(--mrb-space-2);
    }
    
    .mrb-legend-item {
        padding: var(--mrb-space-2) var(--mrb-space-3);
        font-size: var(--mrb-text-sm);
    }
    
    .mrb-legend-color {
        width: 14px;
        height: 14px;
    }
    
    .mrb-current-time-info {
        flex-wrap: wrap;
        gap: var(--mrb-space-1);
        padding: var(--mrb-space-2);
    }
    
    .mrb-current-time-value,
    .mrb-current-date-value {
        font-size: var(--mrb-text-xs);
    }
    
    .mrb-legend-status div {
        flex-wrap: wrap;
        gap: var(--mrb-space-2);
    }
}

@media (max-width: 480px) {
    .mrb-legend {
        padding: var(--mrb-space-3);
        border-radius: var(--mrb-radius-md);
    }
    
    .mrb-legend-title {
        font-size: var(--mrb-text-sm);
        margin-bottom: var(--mrb-space-3);
        padding-bottom: var(--mrb-space-2);
    }
    
    .mrb-legend-items {
        gap: var(--mrb-space-1);
    }
    
    .mrb-legend-item {
        padding: var(--mrb-space-1) var(--mrb-space-2);
        font-size: var(--mrb-text-xs);
    }
    
    .mrb-legend-color {
        width: 12px;
        height: 12px;
    }
    
    .mrb-current-time-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mrb-space-1);
        padding: var(--mrb-space-2);
    }
    
    .mrb-legend-footer {
        padding-top: var(--mrb-space-3);
        margin-top: var(--mrb-space-3);
    }
}

/* ===========================
   ✨ ENHANCED ANIMATIONS
   =========================== */

/* Legend hover effects */
.mrb-legend-item:hover .mrb-legend-color.mrb-available {
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.4);
}

.mrb-legend-item:hover .mrb-legend-color.mrb-premium {
    box-shadow: 0 0 8px rgba(255, 149, 0, 0.4);
}

.mrb-legend-item:hover .mrb-legend-color.mrb-past {
    box-shadow: 0 0 8px rgba(160, 160, 160, 0.3);
}

.mrb-legend-item:hover .mrb-legend-color.mrb-instrument-blocked {
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}

/* Current time value animation */
.mrb-current-time-value {
    animation: mrb-time-pulse 2s ease-in-out infinite;
}

@keyframes mrb-time-pulse {
    0%, 100% {
        background: rgba(0, 122, 255, 0.1);
    }
    50% {
        background: rgba(0, 122, 255, 0.15);
    }
}

/* ===========================
   ♿ ACCESSIBILITY ENHANCEMENTS
   =========================== */

.mrb-legend-item:focus {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    background: var(--mrb-surface-subtle);
}

/* High contrast support */
@media (prefers-contrast: high) {
    .mrb-legend-color {
        border-width: 2px;
    }
    
    .mrb-legend-item {
        border: 1px solid var(--mrb-border);
    }
    
    .mrb-current-time-value {
        border: 1px solid var(--mrb-primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mrb-legend-dynamic,
    .mrb-legend-instrument-info,
    .mrb-legend-past-info {
        animation: none;
    }
    
    .mrb-current-time-value {
        animation: none;
        background: rgba(0, 122, 255, 0.1);
    }
    
    .mrb-legend-item:hover {
        transform: none;
    }
}

/* ===========================
   🚫 EMPTY & ERROR STATES
   =========================== */

.mrb-empty-state,
.mrb-error-state {
    text-align: center;
    padding: var(--mrb-space-16) var(--mrb-space-8);
}

.mrb-empty-animation,
.mrb-error-animation {
    margin-bottom: var(--mrb-space-6);
}

.mrb-empty-animation .mrb-icon,
.mrb-error-animation .mrb-icon {
    width: 64px;
    height: 64px;
    color: var(--mrb-text-tertiary);
    animation: mrb-float 3s ease-in-out infinite;
}

.mrb-empty-content h3,
.mrb-error-content h3 {
    font-size: var(--mrb-text-2xl);
    font-weight: var(--mrb-font-bold);
    color: var(--mrb-text-primary);
    margin-bottom: var(--mrb-space-3);
}

.mrb-empty-content p,
.mrb-error-content p {
    font-size: var(--mrb-text-base);
    color: var(--mrb-text-secondary);
    margin-bottom: var(--mrb-space-6);
}

/* ===========================
   🔔 LOGIN NOTICE
   =========================== */

.mrb-login-notice {
    background: var(--mrb-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-6);
    margin-bottom: var(--mrb-space-6);
    border-left: 4px solid var(--mrb-warning);
}

.mrb-notice-content {
    display: flex;
    align-items: flex-start;
    gap: var(--mrb-space-4);
}

.mrb-notice-content .mrb-icon {
    width: 24px;
    height: 24px;
    color: var(--mrb-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.mrb-notice-text strong {
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
    display: block;
    margin-bottom: var(--mrb-space-2);
}

.mrb-notice-text p {
    font-size: var(--mrb-text-sm);
    color: var(--mrb-text-secondary);
    margin: 0;
}

.mrb-login-link {
    color: var(--mrb-primary);
    text-decoration: none;
    font-weight: var(--mrb-font-medium);
}

.mrb-login-link:hover {
    text-decoration: underline;
}

/* ===========================
   ⏰ ENHANCED TIME SLOTS - SEAMLESS GRID
   =========================== */

.mrb-time-slots-container {
    margin-bottom: var(--mrb-space-5);
    position: relative;
}

/* Seamless grid for all time slots */
.mrb-time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--mrb-space-2);
    margin-bottom: var(--mrb-space-3);
}

/* Individual slot wrappers for controlled animations */
.mrb-time-slot-wrapper {
    position: relative;
}

.mrb-time-slot-wrapper.mrb-slot-appearing {
    animation: mrb-slot-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mrb-time-slot-wrapper.mrb-slot-disappearing {
    animation: mrb-slot-fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Slot animations */
@keyframes mrb-slot-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mrb-slot-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
}

/* ===========================
   🔽 EXPAND SECTION - SIMPLE & CLEAN
   =========================== */

.mrb-expand-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mrb-space-3);
    padding: var(--mrb-space-2);
    border-radius: var(--mrb-radius-md);
    background: rgba(0, 122, 255, 0.03);
    border: 1px solid rgba(0, 122, 255, 0.1);
    transition: all var(--mrb-transition-normal);
    position: relative;
    overflow: hidden;
}

.mrb-expand-section:hover {
    background: rgba(0, 122, 255, 0.06);
    border-color: rgba(0, 122, 255, 0.15);
    transform: translateY(-1px);
}

/* ===========================
   🔘 EXPAND BUTTON - SIMPLE & CLEAN
   =========================== */

.mrb-expand-button {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    cursor: pointer;
    padding: var(--mrb-space-2) var(--mrb-space-3);
    border-radius: var(--mrb-radius-md);
    transition: all var(--mrb-transition-normal);
    color: var(--mrb-primary);
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-sm);
    position: relative;
    overflow: hidden;
}

.mrb-expand-button:hover {
    background: rgba(0, 122, 255, 0.1);
    color: #0056CC;
    transform: translateY(-1px);
}

.mrb-expand-button:active {
    transform: translateY(0) scale(0.98);
    background: rgba(0, 122, 255, 0.15);
}

.mrb-expand-button:focus {
    outline: none;
    background: rgba(0, 122, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    color: var(--mrb-primary);
}

.mrb-expand-button:focus:not(:hover) {
    animation: mrb-focus-pulse 2s ease-in-out infinite;
}

/* Focus pulse animation */
@keyframes mrb-focus-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
    }
}

.mrb-expand-text {
    transition: opacity var(--mrb-transition-fast);
    white-space: nowrap;
}

.mrb-expand-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--mrb-primary);
}

.mrb-expand-icon.mrb-expand-icon-rotated {
    transform: rotate(180deg);
}

/* ===========================
   📊 AVAILABILITY HINT - APPLE STYLE
   =========================== */

.mrb-availability-hint {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    font-size: var(--mrb-text-xs);
    color: var(--mrb-text-secondary);
}

.mrb-available-count {
    background: var(--mrb-success);
    color: white;
    font-weight: var(--mrb-font-bold);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--mrb-radius-full);
    min-width: 20px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(52, 199, 89, 0.3);
}

.mrb-hint-text {
    font-weight: var(--mrb-font-medium);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

/* ===========================
   🎭 CARD STATES & ANIMATIONS
   =========================== */

.mrb-room-card.mrb-slots-expanded {
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-lg);
    border-color: rgba(0, 122, 255, 0.2);
}

.mrb-room-card.mrb-slots-expanded::before {
    opacity: 1;
}

/* ===========================
   📊 ROOM INFO ICONS - BEIDE VIEWS
   =========================== */

/* Grid View - Info Icon oben rechts */
.mrb-room-card .mrb-room-info-icon {
    position: absolute;
    top: var(--mrb-space-3);
    right: var(--mrb-space-3);
    background: none;
    border: none;
    color: var(--mrb-primary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--mrb-radius-sm);
    transition: all var(--mrb-transition-fast);
    z-index: 2;
}

.mrb-room-card .mrb-room-info-icon:hover {
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mrb-room-card .mrb-room-info-icon:focus {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mrb-room-card .mrb-room-info-icon:focus:not(:focus-visible) {
    outline: none;
}

.mrb-room-card .mrb-room-info-icon:focus-visible {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

.mrb-room-card .mrb-room-info-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Table View - Info Icon unter Raumnamen */
.mrb-table-room-info-icon {
    background: none;
    border: none;
    color: var(--mrb-primary);
    cursor: pointer;
    padding: 2px;
    margin: 2px 0;
    display: inline-block;
    line-height: 1;
    transition: color var(--mrb-transition-fast);
    border-radius: var(--mrb-radius-sm);
}

.mrb-table-room-info-icon:hover {
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mrb-table-room-info-icon:focus {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    color: #0056CC;
    background: rgba(0, 122, 255, 0.1);
}

.mrb-table-room-info-icon:focus:not(:focus-visible) {
    outline: none;
}

.mrb-table-room-info-icon:focus-visible {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

.mrb-table-room-info-icon:active {
    transform: scale(0.95);
    background: rgba(0, 122, 255, 0.2);
}

.mrb-table-room-info-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Room Hero Section - Version 5 Style */
.mrb-room-hero-section {
    background: linear-gradient(135deg, #007AFF, #5AC8FA);
    padding: var(--mrb-space-6);
    color: white;
    margin-bottom: var(--mrb-space-6);
    opacity: 0;
    transform: translateY(20px);
    animation: mrb-slide-up 0.6s ease forwards;
    animation-delay: 0.1s;
}

.mrb-hero-content {
    display: grid;
    gap: var(--mrb-space-10);
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* Gallery */
.mrb-room-hero-gallery {
    height: 300px;
    border-radius: var(--mrb-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background: var(--mrb-neutral-200);
    position: relative;
}

/* Room Info */
.mrb-room-hero-info {
    flex: 1;
}

.mrb-room-hero-title {
    font-size: var(--mrb-text-3xl);
    font-weight: var(--mrb-font-bold);
    margin-bottom: var(--mrb-space-4);
    color: white;
}

.mrb-room-hero-description {
    font-size: var(--mrb-text-base);
    line-height: var(--mrb-leading-relaxed);
    margin-bottom: var(--mrb-space-6);
    opacity: 0.95;
}

/* Info Kacheln - Kleiner */
.mrb-hero-info-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mrb-space-3);
}

.mrb-info-tile {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-md);
    padding: 10px;
    text-align: center;
    transition: all var(--mrb-transition-normal);
}

.mrb-info-tile:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.mrb-info-tile-icon {
    width: 24px;
    height: 24px;
    opacity: 0.9;
}

.mrb-info-tile-label {
    font-size: 10px;
    font-weight: var(--mrb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-bottom: 2px;
}

.mrb-info-tile-value {
    font-size: 14px;
    font-weight: var(--mrb-font-bold);
}

/* Gallery Navigation */
.mrb-gallery-slider {
    display: flex;
    height: 100%;
    transition: transform var(--mrb-transition-normal);
}

.mrb-gallery-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.mrb-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mrb-gallery-nav:focus {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    background: white;
}

.mrb-gallery-nav:focus:not(:focus-visible) {
    outline: none;
}

.mrb-gallery-nav:focus-visible {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
    background: white;
}

.mrb-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    box-shadow: var(--mrb-shadow-md);
    z-index: 2;
}

.mrb-gallery-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.mrb-gallery-nav.prev {
    left: var(--mrb-space-2);
}

.mrb-gallery-nav.next {
    right: var(--mrb-space-2);
}

.mrb-gallery-nav .mrb-icon {
    width: 18px;
    height: 18px;
    color: var(--mrb-primary);
    flex-shrink: 0;
}

.mrb-gallery-dots {
    position: absolute;
    bottom: var(--mrb-space-2);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--mrb-space-1);
    z-index: 2;
}

.mrb-gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.mrb-gallery-dot.active {
    background: white;
    width: 20px;
    border-radius: 3px;
}

.mrb-gallery-count {
    position: absolute;
    top: var(--mrb-space-2);
    right: var(--mrb-space-2);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: white;
    padding: var(--mrb-space-1) var(--mrb-space-2);
    border-radius: var(--mrb-radius-full);
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-1);
}

.mrb-gallery-count .mrb-icon {
    width: 12px;
    height: 12px;
}

/* No Gallery Fallback */
.mrb-no-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    gap: var(--mrb-space-3);
    color: var(--mrb-text-tertiary);
    background: rgba(255, 255, 255, 0.1);
}

.mrb-no-gallery .mrb-icon {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

/* Room Info Tab Specific Styles */
.mrb-room-description {
    background: var(--mrb-neutral-100);
    padding: var(--mrb-space-4);
    border-radius: var(--mrb-radius-md);
    font-size: var(--mrb-text-base);
    line-height: var(--mrb-leading-relaxed);
    color: var(--mrb-text-primary);
}

.mrb-room-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mrb-space-3);
}

.mrb-detail-card {
    background: var(--mrb-neutral-100);
    padding: var(--mrb-space-4);
    border-radius: var(--mrb-radius-md);
}

.mrb-detail-label {
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--mrb-space-1);
}

.mrb-detail-value {
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
}

.mrb-room-properties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mrb-space-2);
}

.mrb-property-tag {
    background: var(--mrb-neutral-100);
    padding: var(--mrb-space-2) var(--mrb-space-3);
    border-radius: var(--mrb-radius-full);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-1);
}

.mrb-property-tag.has-surcharge {
    background: rgba(255, 149, 0, 0.1);
    color: var(--mrb-accent);
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.mrb-property-count {
    background: var(--mrb-neutral-200);
    padding: 2px 8px;
    border-radius: var(--mrb-radius-sm);
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-bold);
}

.mrb-booking-rules {
    display: grid;
    gap: var(--mrb-space-3);
}

.mrb-rule-item {
    display: flex;
    align-items: flex-start;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-3);
    background: var(--mrb-neutral-100);
    border-radius: var(--mrb-radius-md);
}

.mrb-rule-icon {
    width: 20px;
    height: 20px;
    color: var(--mrb-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.mrb-rule-content {
    flex: 1;
}

.mrb-rule-title {
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
    margin-bottom: 2px;
}

.mrb-rule-value {
    font-size: var(--mrb-text-sm);
    color: var(--mrb-text-secondary);
}

.mrb-room-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mrb-space-2);
}

.mrb-gallery-item {
    aspect-ratio: 1;
    border-radius: var(--mrb-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    position: relative;
}

.mrb-gallery-item:hover {
    transform: scale(1.05);
    box-shadow: var(--mrb-shadow-md);
}

.mrb-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mrb-gallery-main {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
    margin-bottom: var(--mrb-space-2);
}

/* Scrollbar komplett ausblenden aber funktionsfähig lassen */
.mrb-modal {
   /* Firefox */
   scrollbar-width: none;
   
   /* IE/Edge */
   -ms-overflow-style: none;
}

/* Chrome, Safari, Edge */
.mrb-modal::-webkit-scrollbar {
   display: none;
}

/* ===========================
   🎭 ANIMATIONS
   =========================== */

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

@keyframes mrb-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mrb-slide-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mrb-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes mrb-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes mrb-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

@keyframes mrb-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Animation Classes */
.mrb-animate-in {
    animation: mrb-slide-up 0.6s ease forwards;
}

.mrb-animate-pulse {
    animation: mrb-pulse 1s ease-in-out;
}

.mrb-animate-shake {
    animation: mrb-shake 0.5s ease-in-out;
}

.mrb-refresh-spin .mrb-icon {
    animation: mrb-spin 1s linear infinite;
}

.mrb-success-celebration {
    animation: mrb-pulse 0.8s ease-in-out;
}

/* Ripple Effect */
.mrb-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: mrb-ripple 0.6s linear;
    pointer-events: none;
}

/* ===========================
   📱 RESPONSIVE DESIGN
   =========================== */

@media (max-width: 768px) {
    .mrb-container {
    }
    
    .mrb-header-top {
        flex-direction: column;
        gap: var(--mrb-space-4);
        text-align: center;
    }
    
    .mrb-filters {
        flex-direction: column;
        gap: var(--mrb-space-3);
    }
    
    .mrb-filter-group {
        min-width: unset;
    }
    
    .mrb-rooms-grid {
        grid-template-columns: 1fr;
        gap: var(--mrb-space-4);
    }
    
    
    .mrb-modal-footer {
        flex-direction: column;
        gap: var(--mrb-space-3);
    }
    
    .mrb-btn {
        width: 100%;
        justify-content: center;
    }
    
    .mrb-duration-picker {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mrb-time-selector {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mrb-equipment-grid {
        grid-template-columns: 1fr;
    }
    
    .mrb-toast {
        top: var(--mrb-space-4);
        right: var(--mrb-space-4);
        left: var(--mrb-space-4);
        max-width: none;
    }
    
    .mrb-legend-items {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mrb-booking-type-selector {
        flex-direction: column;
        gap: var(--mrb-space-3);
    }
    
    .mrb-multiple-selection-header {
        flex-direction: column;
        gap: var(--mrb-space-2);
        text-align: center;
    }
    
    .mrb-radio-option,
    .mrb-multiple-checkbox-option {
        padding: var(--mrb-space-4);
    }
    
    .mrb-room-hero-section {
        padding: var(--mrb-space-6);
    }
    
    .mrb-hero-content {
        grid-template-columns: 1fr;
        gap: var(--mrb-space-6);
    }
    
    .mrb-room-hero-gallery {
        width: 100%;
        height: 200px;
    }
    
    .mrb-room-hero-title {
        font-size: var(--mrb-text-2xl);
    }
    
    .mrb-hero-info-tiles {
        grid-template-columns: 1fr;
        gap: var(--mrb-space-3);
    }
    
    .mrb-info-tile {
        padding: var(--mrb-space-4);
    }
    
    .mrb-room-details-grid {
        grid-template-columns: 1fr;
    }
    
    .mrb-room-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mrb-tab-btn {
        font-size: var(--mrb-text-xs);
        padding: var(--mrb-space-2) var(--mrb-space-3);
    }
    
    .mrb-tab-btn .mrb-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .mrb-page-title {
        font-size: var(--mrb-text-2xl);
    }
    
    .mrb-user-status {
        flex-direction: column;
        gap: var(--mrb-space-2);
    }
    
    .mrb-time-slots {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mrb-duration-picker {
        grid-template-columns: 1fr;
    }
    
    .mrb-time-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================
   🎯 UTILITY CLASSES
   =========================== */

.mrb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mrb-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    fill: none;
    stroke: currentColor;
}

.mrb-icon-sm {
    width: 16px;
    height: 16px;
}

.mrb-icon-lg {
    width: 24px;
    height: 24px;
}

.mrb-icon-xl {
    width: 48px;
    height: 48px;
}

/* Glassmorphism Effects */
.liquid-glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.specular-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
}

/* ===========================
   🎯 OVERRIDE GLOBAL TABLE BORDERS & BACKGROUNDS
   =========================== */

/* Spezifische Überschreibung für MRB Tabellen */
.mrb-booking-table td,
.mrb-booking-table th {
    border: 1px solid white !important;
    padding: var(--mrb-space-3) var(--mrb-space-4);
    line-height: 1.5;
    vertical-align: middle;
}

/* Override zebra stripes - keep MRB backgrounds */
.mrb-booking-table tbody > tr:nth-child(odd) > td,
.mrb-booking-table tbody > tr:nth-child(odd) > th {
    background-color: var(--mrb-surface) !important;
}

.mrb-booking-table tbody > tr:nth-child(even) > td,
.mrb-booking-table tbody > tr:nth-child(even) > th {
    background-color: var(--mrb-surface) !important;
}

/* Preserve specific MRB slot backgrounds */
.mrb-booking-table .mrb-table-slot.mrb-slot-available {
    background: var(--mrb-success) !important;
    color: white !important;
}

.mrb-booking-table .mrb-table-slot.mrb-slot-premium {
    background: linear-gradient(135deg, var(--mrb-accent), #FF8C00) !important;
    color: white !important;
}

.mrb-booking-table .mrb-table-slot.mrb-slot-booked {
    background: var(--mrb-neutral-200) !important;
    color: var(--mrb-text-tertiary) !important;
}

/* Eigene Buchungen müssen auch in der Booking Table korrekt angezeigt werden */
.mrb-booking-table .mrb-table-slot.mrb-slot-booked.mrb-own-booking {
    background: #007aff !important;
    color: white !important;
    cursor: pointer !important;
}

.mrb-booking-table .mrb-table-slot.mrb-slot-selected {
    background: var(--mrb-primary) !important;
    color: white !important;
}

.mrb-booking-table .mrb-table-slot.mrb-slot-unavailable {
    background: var(--mrb-neutral-100) !important;
    color: var(--mrb-text-tertiary) !important;
}

/* Preserve header backgrounds */
.mrb-booking-table .mrb-table-header th {
    background: var(--mrb-surface) !important;
}

.mrb-booking-table .mrb-time-header {
    background: var(--mrb-surface) !important;
}

/* Zusätzliche spezifische Border-Überschreibungen */
.mrb-table-header th {
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
}

.mrb-time-header {
    border-right: 1px solid white !important;
}

.mrb-time-cell {
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
}

.mrb-table-slot {
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
}

.mrb-table-footer td {
    border-right: 1px solid white !important;
    border-top: 1px solid white !important;
}

.mrb-footer-label {
    border-right: 1px solid white !important;
    border-top: 1px solid white !important;
}

/* ===========================
   ♿ ACCESSIBILITY ENHANCEMENTS
   =========================== */

.mrb-expand-button:focus {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
}

.mrb-expand-button[aria-expanded="true"] .mrb-expand-show {
    display: none;
}

.mrb-expand-button[aria-expanded="false"] .mrb-expand-hide {
    display: none;
}

/* High contrast support */
@media (prefers-contrast: high) {
    .mrb-expand-section {
        border-width: 2px;
    }
    
    .mrb-available-count {
        border: 1px solid var(--mrb-success);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mrb-time-slot-wrapper.mrb-slot-appearing,
    .mrb-time-slot-wrapper.mrb-slot-disappearing {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .mrb-expand-icon {
        transition: none;
    }
    
    .mrb-expand-section::before {
        display: none;
    }
}

/* ===========================
   🎸 INSTRUMENT-FILTER STYLES
   =========================== */

/* Filter Container */
.mrb-instrument-filters {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
    margin-top: var(--mrb-space-1);
}

/* Einzelne Filter-Option */
.mrb-instrument-filter-option {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    padding: var(--mrb-space-2) var(--mrb-space-3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--mrb-radius-md);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateY(10px);
    animation: mrb-slide-up 0.6s ease forwards;
}

.mrb-instrument-filter-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    color: white;
}

/* Aktive Filter-Option (via JavaScript) */
.mrb-instrument-filter-option.mrb-instrument-active {
    background: rgba(0, 122, 255, 0.2) !important;
    border-color: rgba(0, 122, 255, 0.4) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* Verstecke native Checkbox */
.mrb-instrument-filter-checkbox {
    display: none;
}

/* Custom Checkbox */
.mrb-instrument-filter-custom {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--mrb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

.mrb-instrument-filter-option input[type="checkbox"]:checked + .mrb-instrument-filter-custom,
.mrb-instrument-filter-option.mrb-instrument-active .mrb-instrument-filter-custom {
    border-color: white;
    background: rgba(255, 255, 255, 0.9);
}

.mrb-instrument-filter-option input[type="checkbox"]:checked + .mrb-instrument-filter-custom::after,
.mrb-instrument-filter-option.mrb-instrument-active .mrb-instrument-filter-custom::after {
    content: '✓';
    color: var(--mrb-primary);
    font-size: 12px;
    font-weight: bold;
}

.mrb-instrument-filter-label {
    font-weight: var(--mrb-font-medium);
    letter-spacing: 0.01em;
}

/* ===========================
   🚫 INSTRUMENT-BLOCKED SLOTS
   =========================== */

/* Table View - Instrument blocked slots */
.mrb-table-slot.mrb-slot-instrument-blocked {
    background: repeating-linear-gradient(
        45deg,
        #ff6b6b,
        #ff6b6b 10px,
        #ff5252 10px,
        #ff5252 20px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    position: relative;
}

.mrb-table-slot.mrb-slot-instrument-blocked:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
}

.mrb-table-slot.mrb-slot-instrument-blocked::before {
    content: '🚫';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.8;
}

/* Grid View - Instrument blocked slots */
.mrb-time-slot.mrb-slot-instrument-blocked {
    background: repeating-linear-gradient(
        45deg,
        #ff6b6b,
        #ff6b6b 8px,
        #ff5252 8px,
        #ff5252 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    position: relative;
}

.mrb-time-slot.mrb-slot-instrument-blocked:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
}

.mrb-time-slot.mrb-slot-instrument-blocked::before {
    content: '🎸';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 8px;
    opacity: 0.7;
}

/* ===========================
   📊 LEGEND ERWEITERUNGEN
   =========================== */

/* Legend color für instrument blocked */
.mrb-legend-color.mrb-instrument-blocked {
    background: repeating-linear-gradient(
        45deg,
        #ff6b6b,
        #ff6b6b 3px,
        #ff5252 3px,
        #ff5252 6px
    );
}

/* Instrument info in legend */
.mrb-legend-instrument-info {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: var(--mrb-radius-sm);
    padding: var(--mrb-space-2);
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    color: #ff6b6b;
    margin-top: var(--mrb-space-2);
}

/* ===========================
   🎯 MOBILE RESPONSIVE - INSTRUMENT FILTER
   =========================== */

@media (max-width: 768px) {
    .mrb-instrument-filters {
        gap: var(--mrb-space-1);
    }
    
    .mrb-instrument-filter-option {
        padding: var(--mrb-space-2);
        font-size: var(--mrb-text-xs);
        gap: var(--mrb-space-2);
    }
    
    .mrb-instrument-filter-custom {
        width: 16px;
        height: 16px;
    }
    
    .mrb-instrument-filter-custom::after {
        font-size: 10px !important;
    }
    
    .mrb-instrument-filter-label {
        font-size: var(--mrb-text-xs);
    }
}

@media (max-width: 480px) {
    .mrb-instrument-filter-option {
        padding: var(--mrb-space-1) var(--mrb-space-2);
        font-size: 11px;
    }
    
    .mrb-instrument-filter-custom {
        width: 14px;
        height: 14px;
    }
    
    .mrb-instrument-filter-custom::after {
        font-size: 8px !important;
    }
}

/* ===========================
   ✨ ANIMATIONEN FÜR INSTRUMENT-FILTER
   =========================== */

/* Animation für Filter-Erscheinen mit Stagger */
.mrb-instrument-filter-option:nth-child(1) { animation-delay: 0.1s; }
.mrb-instrument-filter-option:nth-child(2) { animation-delay: 0.2s; }
.mrb-instrument-filter-option:nth-child(3) { animation-delay: 0.3s; }
.mrb-instrument-filter-option:nth-child(4) { animation-delay: 0.4s; }
.mrb-instrument-filter-option:nth-child(5) { animation-delay: 0.5s; }

/* Fokus-Zustände für Accessibility */
.mrb-instrument-filter-option:focus-within {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .mrb-instrument-filter-option {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .mrb-instrument-filter-option {
        border-width: 2px;
    }
    
    .mrb-instrument-filter-custom {
        border-width: 3px;
    }
    
    .mrb-slot-instrument-blocked {
        border: 3px solid #ff0000 !important;
    }
}

/* ===========================
   🎸 INSTRUMENT QUESTIONS SECTION - SIMPLE
   =========================== */

/* Questions Container */
.mrb-instrument-questions {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-3);
}

/* Individual Question */
.mrb-instrument-question {
    background: var(--mrb-neutral-100);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-4);
}

/* Question Header */
.mrb-question-header {
    margin-bottom: var(--mrb-space-3);
}

.mrb-question-text {
    font-size: var(--mrb-text-base);
    color: var(--mrb-text-primary);
    margin-bottom: var(--mrb-space-2);
}

.mrb-question-note {
    display: flex;
    align-items: flex-start;
    gap: var(--mrb-space-2);
    font-size: var(--mrb-text-sm);
    color: var(--mrb-warning);
    background: rgba(255, 149, 0, 0.1);
    padding: var(--mrb-space-2);
    border-radius: var(--mrb-radius-sm);
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.mrb-question-note .mrb-icon {
    color: var(--mrb-warning);
    flex-shrink: 0;
}

/* Question Options */
.mrb-question-options {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
}

/* Answer Option */
.mrb-instrument-answer-option {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-3);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    background: var(--mrb-surface);
}

.mrb-instrument-answer-option:hover {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.05);
}

.mrb-instrument-answer-option.selected {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.1);
}

/* Hidden Radio Input */
.mrb-instrument-answer-radio {
    display: none;
}

/* Custom Radio */
.mrb-instrument-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    background: var(--mrb-surface);
}

.mrb-instrument-answer-option input[type="radio"]:checked + .mrb-instrument-radio-custom {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
}

.mrb-instrument-answer-option input[type="radio"]:checked + .mrb-instrument-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Answer Text */
.mrb-answer-text {
    font-size: var(--mrb-text-base);
    color: var(--mrb-text-primary);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
}

.mrb-answer-text .mrb-icon {
    color: var(--mrb-warning);
    flex-shrink: 0;
}

/* ===========================
   🚨 VALIDATION STATUS
   =========================== */

.mrb-instrument-status {
    padding: var(--mrb-space-3);
    border-radius: var(--mrb-radius-md);
    margin-top: var(--mrb-space-3);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
}

.mrb-instrument-status.success {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.2);
    color: var(--mrb-success);
}

.mrb-instrument-status.conflict {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    color: var(--mrb-error);
}

.mrb-instrument-status.partial {
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--mrb-warning);
}

/* ===========================
   🕒 ALTERNATIVE SUGGESTIONS
   =========================== */

.mrb-alternative-suggestions {
    background: var(--mrb-surface-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-4);
    margin-top: var(--mrb-space-3);
}

.mrb-alternatives-header {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    margin-bottom: var(--mrb-space-3);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
    font-size: var(--mrb-text-sm);
}

.mrb-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--mrb-space-2);
}

.mrb-alternative-time-slot {
    background: var(--mrb-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3);
    text-align: center;
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    font-weight: var(--mrb-font-semibold);
    font-size: var(--mrb-text-sm);
}

.mrb-alternative-time-slot:hover {
    background: var(--mrb-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--mrb-shadow-md);
}

/* ===========================
   📱 MOBILE RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .mrb-instrument-question {
        padding: var(--mrb-space-3);
    }
    
    .mrb-instrument-answer-option {
        padding: var(--mrb-space-2);
    }
    
    .mrb-alternatives-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mrb-alternative-time-slot {
        padding: var(--mrb-space-2);
        font-size: var(--mrb-text-xs);
    }
}

/* ===========================
   ⏰ PAST TIME SLOTS - UNIFIED STYLE
   =========================== */

/* Generic slot classes (without prefix) */
.mrb-slot-past,
.mrb-slot-lead-time {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mrb-slot-past:hover,
.mrb-slot-lead-time:hover {
    transform: none !important;
    box-shadow: none !important;
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
}

/* Table View */
.mrb-table-slot.mrb-slot-past {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mrb-table-slot.mrb-slot-past:hover {
    transform: none !important;
    box-shadow: none !important;
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
}

/* Grid View (Kacheln) */
.mrb-time-slot.mrb-slot-past {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.mrb-time-slot.mrb-slot-past:hover {
    transform: none !important;
    box-shadow: none !important;
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
}

/* Modal Time Selector */
.mrb-time-option.mrb-time-option-past,
.mrb-time-option.mrb-time-option-lead-time,
.mrb-time-option.mrb-time-option-disabled {
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
    cursor: not-allowed !important;
    opacity: 0.7;
    border: 2px solid var(--mrb-neutral-300) !important;
}

.mrb-time-option.mrb-time-option-past:hover,
.mrb-time-option.mrb-time-option-lead-time:hover,
.mrb-time-option.mrb-time-option-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 8px,
        #d0d0d0 8px,
        #d0d0d0 16px
    ) !important;
    color: white !important;
}

.mrb-table-slot:hover:not(.mrb-slot-booked):not(.mrb-slot-past):not(.mrb-slot-unavailable):not(.mrb-slot-lead-time) {
   transform: scale(1.05);
   box-shadow: inset 0 0 0 2px var(--mrb-primary, var(--mtb-primary, #007cba));
   z-index: 5;
   color: var(--mrb-primary, var(--mtb-primary, #007cba)) !important;
   cursor: pointer;
}

.mrb-table-slot {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
}

.mrb-table-slot:focus:not(.mrb-slot-booked):not(.mrb-slot-past):not(.mrb-slot-unavailable):not(.mrb-slot-lead-time) {
   transform: scale(1.05);
   box-shadow: inset 0 0 0 2px var(--mrb-primary, var(--mtb-primary, #007cba));
   z-index: 5;
   color: var(--mrb-primary, var(--mtb-primary, #007cba)) !important;
   outline: none;
}

.mrb-table-slot:active:not(.mrb-slot-booked):not(.mrb-slot-past):not(.mrb-slot-unavailable):not(.mrb-slot-lead-time) {
   transform: scale(0.98);
}

.mrb-table-slot.mrb-slot-available:hover,
.mrb-table-slot.mrb-slot-premium:hover {
   cursor: pointer;
}

/* MRB Room Booking - Leichtes Apple-Style Grau für Header und Time Cells */

/* Table Headers */
.mrb-booking-table .mrb-table-header,
.mrb-booking-table .mrb-table-header th,
.mrb-booking-table .mrb-room-header {
    background: #fafafd !important;
    color: #1d1d1f !important;
    border-right: 1px solid #fafafd !important;
    border-bottom: 1px solid #fafafd !important;
}

/* Time Cells */
.mrb-booking-table .mrb-time-header,
.mrb-booking-table .mrb-time-cell {
    background: #fafafd !important;
    color: #1d1d1f !important;
    border-right: 1px solid #fafafd !important;
    font-weight: 600 !important;
}

/* Borders */
.mrb-table-row {
    border-bottom: 1px solid #fafafd !important;
}

.mrb-table-slot {
    border-right: 1px solid #fafafd !important;
}

/* Überschreibe zebra stripes für Header/Time Bereiche */
.mrb-booking-table tbody > tr:nth-child(odd) > .mrb-time-cell,
.mrb-booking-table tbody > tr:nth-child(even) > .mrb-time-cell {
    background: #fafafd !important;
}

.mrb-time-option.mtb-time-option-affected {
    color: white;
    font-weight: 600;
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgb(255, 154, 86) 0%, rgb(255, 123, 66) 100%);
    border-color: rgb(255, 123, 66);
    transition: 0.3s;
}

.mrb-time-option.mtb-time-option-affected:hover:not(.mtb-time-option-selected) {
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%) !important;
    color: white !important;
}


/* Füge diese CSS-Regeln zu deinem raumbuchung.css hinzu */

/* 4px Abstand zwischen den Zellen in der Tabelle */
.mrb-booking-table {
    border-collapse: separate;
    border-spacing: 3px;
    background-color: #fafafd;
    border: none;
}

/* Anpassungen für Border-Radius bei separaten Zellen */
.mrb-table-slot {
    border: none !important;
    border-radius: 8px !important;
    margin: 0;
    box-shadow: none;
}

/* Entferne die Borders der anderen Zellen auch */
.mrb-booking-table td,
.mrb-booking-table th {
    border: none !important;
}

/* Spezifischer Style für Header und Zeit-Zellen */
.mrb-table-header th,
.mrb-time-header,
.mrb-time-cell {
    background: #fafafd !important;
    border: none !important;
}

/* Hintergrund der Tabelle anpassen */
.mrb-table-container {
    background: #fafafd;
    /* border: 1px solid #fafafd; */
}

/* Erhöhe den Abstand zwischen Zeilen bei Bedarf */
.mrb-table-row {
    border-bottom: none !important;
}

/* ===========================
   🎸 INSTRUMENT FILTER DROPDOWN - Z-INDEX FIX
   =========================== */

/* Fix 1: Erhöhe z-index für Dropdown Container */
.mrb-instrument-filter-container {
    position: relative;
    width: 100%;
    z-index: 100; /* Füge z-index hinzu */
}

/* Fix 2: Stelle sicher, dass das Dropdown über allem anderen liegt */
.mrb-instrument-filters-dropdown {
    position: absolute;
    top: calc(100% + var(--mrb-space-2));
		 min-width: 250px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 9999; /* Erhöhe z-index deutlich */
    overflow: hidden;
}

/* Fix 3: Entferne problematische Styles vom Header Container */
.mrb-header {
    /* ... andere styles ... */
    position: relative; /* Stelle sicher, dass position gesetzt ist */
    z-index: 10; /* Niedrigerer z-index als das Dropdown */
}

/* Fix 4: Filters Container anpassen */
.mrb-filters {
    /* ... andere styles ... */
    position: relative;
    z-index: 20; /* Höher als Header, aber niedriger als Dropdown */
    overflow: visible; /* WICHTIG: Erlaube overflow für Dropdown */
}

/* Fix 5: Content Wrapper darf Dropdown nicht abschneiden */
.mrb-content-wrapper {
    position: relative;
    z-index: 1; /* Niedriger z-index */
    overflow: visible; /* Erlaube overflow */
}

/* Fix 6: Expliziter z-index Stack für alle Elemente */
.mrb-container {
    position: relative;
    z-index: 1;
}

.mrb-header-content {
    position: relative;
    z-index: 2;
}

/* Alternative Lösung: Wenn das Dropdown immer noch Probleme macht */
.mrb-filter-group:has(.mrb-instrument-filter-container) {
    position: relative;
    z-index: 1000;
    overflow: visible;
}

/* ===========================
   🎸 INSTRUMENT FILTER DROPDOWN
   =========================== */

.mrb-instrument-filter-container {
    position: relative;
    width: 100%;
	z-index: 100;
}

/* Toggle Button */
.mrb-instrument-filter-toggle {
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-lg);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mrb-space-2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mrb-instrument-filter-toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--mrb-text-primary);
}

.mrb-instrument-filter-toggle:focus {
outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
	color: var(--mrb-text-primary);
}

.mrb-filter-toggle-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mrb-filter-toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--mrb-transition-normal);
    flex-shrink: 0;
}

.mrb-filter-open .mrb-filter-toggle-icon {
    transform: rotate(180deg);
}

/* Dropdown Container */
.mrb-instrument-filters-dropdown {
    position: absolute;
    top: calc(100% + var(--mrb-space-2));
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: var(--mrb-z-dropdown);
    overflow: hidden;
}

/* Dropdown Header */
.mrb-instrument-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mrb-space-3) var(--mrb-space-4);
    background: rgba(0, 122, 255, 0.05);
    border-bottom: 1px solid rgba(0, 122, 255, 0.1);
}

.mrb-selected-count {
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-primary);
}

.mrb-clear-instruments {
    background: none;
    border: none;
    color: var(--mrb-error);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-medium);
    cursor: pointer;
    padding: var(--mrb-space-1) var(--mrb-space-2);
    border-radius: var(--mrb-radius-sm);
    transition: all var(--mrb-transition-fast);
}

.mrb-clear-instruments:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #D70015;
}

/* Scrollable Content */
.mrb-instrument-filters-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--mrb-space-3);
}

/* Custom Scrollbar */
.mrb-instrument-filters-scroll::-webkit-scrollbar {
    width: 6px;
}

.mrb-instrument-filters-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.mrb-instrument-filters-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.mrb-instrument-filters-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Filter Options in Dropdown */
.mrb-instrument-filters-dropdown .mrb-instrument-filter-option {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-3) var(--mrb-space-3);
    margin-bottom: var(--mrb-space-2);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    background: var(--mrb-surface);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-medium);
    color: var(--mrb-text-primary);
    opacity: 1;
    transform: none;
    animation: none;
}

.mrb-instrument-filters-dropdown .mrb-instrument-filter-option:last-child {
    margin-bottom: 0;
}

.mrb-instrument-filters-dropdown .mrb-instrument-filter-option:hover {
    background: rgba(0, 122, 255, 0.05);
    border-color: var(--mrb-primary);
    transform: translateY(-1px);
}

.mrb-instrument-filters-dropdown .mrb-instrument-filter-option.mrb-instrument-active {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--mrb-primary);
    color: var(--mrb-primary);
}

/* Checkbox Styling */
.mrb-instrument-filters-dropdown .mrb-instrument-filter-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: var(--mrb-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    background: var(--mrb-surface);
    position: relative;
}

.mrb-instrument-filters-dropdown .mrb-instrument-filter-option input[type="checkbox"]:checked + .mrb-instrument-filter-custom {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
}

.mrb-instrument-filters-dropdown .mrb-instrument-filter-option input[type="checkbox"]:checked + .mrb-instrument-filter-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.mrb-instrument-filters-dropdown .mrb-instrument-filter-label {
    font-weight: var(--mrb-font-medium);
    letter-spacing: 0.01em;
    flex: 1;
}

/* Footer */
.mrb-instrument-filters-footer {
    padding: var(--mrb-space-3) var(--mrb-space-4);
    background: rgba(0, 122, 255, 0.02);
    border-top: 1px solid rgba(0, 122, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

.mrb-apply-instruments {
    background: var(--mrb-primary);
    color: white;
    border: none;
    padding: var(--mrb-space-2) var(--mrb-space-4);
    border-radius: var(--mrb-radius-md);
    font-size: var(--mrb-text-sm);
    font-weight: var(--mrb-font-semibold);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
}

.mrb-apply-instruments:hover {
    background: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--mrb-shadow-sm);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mrb-instrument-filters-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--mrb-radius-lg) var(--mrb-radius-lg) 0 0;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    .mrb-instrument-filters-scroll {
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }
    
    .mrb-instrument-filters-header {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgba(255, 255, 255, 0.98);
    }
    
    .mrb-instrument-filters-footer {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 480px) {
    .mrb-instrument-filter-toggle {
        padding: var(--mrb-space-2) var(--mrb-space-3);
        font-size: var(--mrb-text-sm);
    }
    
    .mrb-filter-toggle-icon {
        width: 16px;
        height: 16px;
    }
    
    .mrb-instrument-filters-dropdown .mrb-instrument-filter-option {
        padding: var(--mrb-space-2);
        font-size: var(--mrb-text-sm);
    }
    
    .mrb-instrument-filters-dropdown .mrb-instrument-filter-custom {
        width: 18px;
        height: 18px;
    }
}

/* Focus States */
.mrb-instrument-filter-toggle:focus-visible {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
}

.mrb-clear-instruments:focus-visible,
.mrb-apply-instruments:focus-visible {
    outline: 2px solid var(--mrb-primary);
    outline-offset: 2px;
}

/* Dark overlay for mobile */
@media (max-width: 768px) {
    .mrb-filter-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: calc(var(--mrb-z-dropdown) - 1);
        animation: mrb-fade-in 0.3s ease;
    }
}

@keyframes mrb-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===========================
   MODERNE RAUMBUCHUNG - SPERRZEITEN STYLES
   =========================== */

/* Grundlegende Sperrzeit-Slots */
.mrb-slot-blocked {
    position: relative;
    cursor: not-allowed !important;
    opacity: 0.8;
}

.mrb-slot-blocked:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

/* Verschiedene Sperrgründe mit ::after Overlays für moderne Slots */
.mrb-slot-blocked-maintenance::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(255, 193, 7, 0.4) 8px,
        rgba(255, 193, 7, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mrb-slot-blocked-holiday::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(220, 53, 69, 0.4) 8px,
        rgba(220, 53, 69, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mrb-slot-blocked-vacation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(0, 123, 255, 0.4) 8px,
        rgba(0, 123, 255, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mrb-slot-blocked-event::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(233, 30, 99, 0.4) 8px,
        rgba(233, 30, 99, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mrb-slot-blocked-cleaning::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(0, 188, 212, 0.4) 8px,
        rgba(0, 188, 212, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mrb-slot-blocked-custom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 8px,
        rgba(108, 117, 125, 0.4) 8px,
        rgba(108, 117, 125, 0.4) 16px
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Tabellen-Slots */
.mrb-table-slot.mrb-slot-blocked-maintenance,
.mrb-table-slot.mrb-slot-blocked-holiday,
.mrb-table-slot.mrb-slot-blocked-vacation,
.mrb-table-slot.mrb-slot-blocked-event,
.mrb-table-slot.mrb-slot-blocked-cleaning,
.mrb-table-slot.mrb-slot-blocked-custom {
    position: relative;
    cursor: not-allowed !important;
}

/* Legende - Moderne Raumbuchung */
.mrb-legend-color.mrb-blocked-maintenance {
    background: #fff3cd;
    position: relative;
}

.mrb-legend-color.mrb-blocked-maintenance::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(255, 193, 7, 0.6) 3px,
        rgba(255, 193, 7, 0.6) 6px
    );
}

.mrb-legend-color.mrb-blocked-holiday {
    background: #f8d7da;
    position: relative;
}

.mrb-legend-color.mrb-blocked-holiday::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(220, 53, 69, 0.6) 3px,
        rgba(220, 53, 69, 0.6) 6px
    );
}

.mrb-legend-color.mrb-blocked-vacation {
    background: #cce5ff;
    position: relative;
}

.mrb-legend-color.mrb-blocked-vacation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(0, 123, 255, 0.6) 3px,
        rgba(0, 123, 255, 0.6) 6px
    );
}

.mrb-legend-color.mrb-blocked-event {
    background: #f8d7da;
    position: relative;
}

.mrb-legend-color.mrb-blocked-event::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(233, 30, 99, 0.6) 3px,
        rgba(233, 30, 99, 0.6) 6px
    );
}

.mrb-legend-color.mrb-blocked-cleaning {
    background: #d1ecf1;
    position: relative;
}

.mrb-legend-color.mrb-blocked-cleaning::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(0, 188, 212, 0.6) 3px,
        rgba(0, 188, 212, 0.6) 6px
    );
}

.mrb-legend-color.mrb-blocked-custom {
    background: #e2e3e5;
    position: relative;
}

.mrb-legend-color.mrb-blocked-custom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(108, 117, 125, 0.6) 3px,
        rgba(108, 117, 125, 0.6) 6px
    );
}

/* Lehrer-Arbeitszeit Blockierung (Unterricht) */
.mrb-slot-blocked-teacher-work {
    background: linear-gradient(135deg, #8e24aa 0%, #7b1fa2 100%) !important;
    color: #ffffff !important;
    position: relative;
    cursor: not-allowed !important;
    opacity: 0.9;
}

.mrb-slot-blocked-teacher-work::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
    pointer-events: none;
    border-radius: inherit;
}

.mrb-slot-blocked-teacher-work .mrb-slot-time {
    color: #ffffff !important;
    font-weight: 500;
}

.mrb-slot-blocked-teacher-work .mrb-slot-status {
    color: #ffffff !important;
    opacity: 0.9;
}

.mrb-table-slot.mrb-slot-blocked-teacher-work {
    position: relative;
    cursor: not-allowed !important;
}

.mrb-legend-color.mrb-blocked-teacher-work {
    background: linear-gradient(135deg, #8e24aa 0%, #7b1fa2 100%);
    position: relative;
}

.mrb-legend-color.mrb-blocked-teacher-work::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.2) 3px,
        rgba(255, 255, 255, 0.2) 6px
    );
}


/* ===========================
   ⭐ FLATRATE SELECTION STYLES
   =========================== */

/* Flatrate Selection Container */
.mrb-flatrate-selection {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-4);
}

/* Flatrate Detected Info */
.mrb-flatrate-detected {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: var(--mrb-radius-md);
    padding: var(--mrb-space-3);
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    font-size: var(--mrb-text-sm);
    color: var(--mrb-success);
}

.mrb-flatrate-detected .mrb-icon {
    width: 18px;
    height: 18px;
    color: var(--mrb-success);
    flex-shrink: 0;
}

/* Flatrate Options Container */
.mrb-flatrate-options {
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-2);
}

/* Individual Flatrate Option */
.mrb-flatrate-option {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-3);
    padding: var(--mrb-space-3) var(--mrb-space-4);
    border: 1px solid var(--mrb-border);
    border-radius: var(--mrb-radius-md);
    cursor: pointer;
    transition: all var(--mrb-transition-normal);
    background: var(--mrb-surface);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mrb-flatrate-option:hover {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.05);
    transform: translateY(-1px);
}

.mrb-flatrate-option.selected {
    border-color: var(--mrb-primary);
    background: rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: var(--mrb-shadow-sm);
}

.mrb-flatrate-option input[type="radio"] {
    display: none;
}

/* Custom Radio Button */
.mrb-flatrate-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mrb-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mrb-transition-normal);
    flex-shrink: 0;
    position: relative;
    background: var(--mrb-surface);
}

.mrb-flatrate-option input[type="radio"]:checked + .mrb-flatrate-radio-custom {
    border-color: var(--mrb-primary);
    background: var(--mrb-primary);
}

.mrb-flatrate-option input[type="radio"]:checked + .mrb-flatrate-radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Flatrate Option Content */
.mrb-flatrate-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--mrb-space-1);
}

.mrb-flatrate-option-header {
    display: flex;
    align-items: center;
    gap: var(--mrb-space-2);
    flex-wrap: wrap;
}

.mrb-flatrate-option-header .mrb-icon {
    width: 18px;
    height: 18px;
    color: var(--mrb-primary);
    flex-shrink: 0;
}

.mrb-flatrate-name {
    font-size: var(--mrb-text-base);
    font-weight: var(--mrb-font-semibold);
    color: var(--mrb-text-primary);
    margin-right: var(--mrb-space-2);
}

.mrb-flatrate-category {
    background: var(--mrb-neutral-100);
    color: var(--mrb-text-secondary);
    padding: var(--mrb-space-1) var(--mrb-space-2);
    border-radius: var(--mrb-radius-sm);
    font-size: var(--mrb-text-xs);
    font-weight: var(--mrb-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mrb-flatrate-option-description {
    font-size: var(--mrb-text-sm);
    color: var(--mrb-text-secondary);
    line-height: var(--mrb-leading-normal);
}

/* Selected state enhancements */
.mrb-flatrate-option.selected .mrb-flatrate-name {
    color: var(--mrb-primary);
}

.mrb-flatrate-option.selected .mrb-flatrate-category {
    background: rgba(0, 122, 255, 0.1);
    color: var(--mrb-primary);
}

.mrb-flatrate-option.selected .mrb-flatrate-option-description {
    color: var(--mrb-text-primary);
}

/* Ripple effect for flatrate options */
.mrb-flatrate-option {
    position: relative;
    overflow: hidden;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mrb-flatrate-option {
        padding: var(--mrb-space-3);
    }
    
    .mrb-flatrate-option-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mrb-space-1);
    }
    
    .mrb-flatrate-name {
        font-size: var(--mrb-text-sm);
        margin-right: 0;
    }
    
    .mrb-flatrate-option-description {
        font-size: var(--mrb-text-xs);
    }
}

@media (max-width: 480px) {
    .mrb-flatrate-detected {
        padding: var(--mrb-space-2);
        font-size: var(--mrb-text-xs);
    }
    
    .mrb-flatrate-detected .mrb-icon {
        width: 16px;
        height: 16px;
    }
    
    .mrb-flatrate-option {
        padding: var(--mrb-space-2) var(--mrb-space-3);
        gap: var(--mrb-space-2);
    }
    
    .mrb-flatrate-radio-custom {
        width: 18px;
        height: 18px;
    }
    
    .mrb-flatrate-option-header .mrb-icon {
        width: 16px;
        height: 16px;
    }
}

/* ===========================
   💬 BOOKING DETAILS MODAL (MDS Style)
   =========================== */

/* Modal Overlay */
.mds-booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    padding: 20px;
}

.mds-booking-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.mds-booking-modal {
    background: rgba(255, 255, 255, 0.85); /* var(--mds-surface) */
    border-radius: 24px; /* var(--mds-radius-xl) */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* var(--mds-shadow-xl) */
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* var(--mds-transition-normal) */
    margin: auto;
    position: relative;
}

.mds-booking-modal-overlay.show .mds-booking-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.mds-booking-modal.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Modal Header Container */
.mds-booking-modal-header-container {
    background: rgba(250, 250, 253, 0.9); /* var(--mds-surface-header) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* var(--mds-border-light) */
    border-radius: 24px 24px 0 0; /* var(--mds-radius-xl) */
}

/* Modal Header */
.mds-booking-modal-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mds-booking-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F; /* var(--mds-text-primary) */
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* var(--mds-font-family) */
}

/* Modal Close Button */
.mds-booking-modal-close {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* var(--mds-transition-fast) */
    color: #86868B; /* var(--mds-text-secondary) */
}

.mds-booking-modal-close:hover {
    background: #e5e7eb;
    color: #1D1D1F; /* var(--mds-text-primary) */
    transform: scale(1.1);
}

.mds-booking-modal-close svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Modal Body */
.mds-booking-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Footer */
.mds-booking-modal-footer {
    padding: 16px 24px;
    background: rgba(250, 250, 253, 0.9); /* var(--mds-surface-header) */
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* var(--mds-border-light) */
    border-radius: 0 0 24px 24px; /* var(--mds-radius-xl) */
}

.mds-booking-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Booking Info Groups */
.mds-booking-info-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* var(--mds-border-light) */
    font-weight: 600;
}

.mds-booking-info-group:last-child {
    border-bottom: none;
}

.mds-booking-info-label {
    font-size: 14px;
    color: #86868B; /* var(--mds-text-secondary) */
    flex-shrink: 0;
    min-width: 140px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.mds-booking-info-value {
    font-size: 14px;
    color: #1D1D1F; /* var(--mds-text-primary) */
    text-align: right;
    flex: 1;
    margin-left: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
}

/* Spezielle Styles für Gesamtkosten */
.mds-total-cost-group .mds-booking-info-value {
    font-size: 20px;
    color: #007AFF;
}

/* Modal Buttons */
.mds-booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-height: 44px;
}

.mds-booking-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.mds-booking-btn-primary {
    background-color: #007AFF;
    color: #ffffff;
}

.mds-booking-btn-primary:hover {
    background-color: #0056CC;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mds-booking-btn-secondary {
    background-color: rgba(255, 255, 255, 0.85);
    color: #1D1D1F;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.mds-booking-btn-secondary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Responsive Modal */
@media (max-width: 768px) {
    .mds-booking-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .mds-booking-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }
    
    .mds-booking-modal-header {
        padding: 20px;
    }
    
    .mds-booking-modal-body {
        padding: 20px;
    }
    
    .mds-booking-info-group {
        flex-direction: column;
        gap: 4px;
    }
    
    .mds-booking-info-label {
        min-width: auto;
    }
    
    .mds-booking-info-value {
        text-align: left;
        margin-left: 0;
    }
}

/* ===========================
   SCROLL ENHANCEMENTS
   =========================== */

/* Scroll Navigation Buttons */
/* Scroll buttons removed as requested - using draggable indicator instead */

/* Scroll Indicator - Sehr durchlässig/transparent */
.mrb-scroll-indicator {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    width: 25%;
    min-width: 180px;
    max-width: 270px;
    z-index: 9999;
    padding: 8px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mrb-radius-xl);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    opacity: 0;
}

/* Wenn sichtbar */
.mrb-scroll-indicator.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Hover-Bereich für Aktivierung */
.mrb-table-container:hover .mrb-scroll-indicator {
    opacity: 1;
}

.mrb-scroll-track {
    position: relative;
    width: 100%;
    height: 5px;
    background: var(--mrb-neutral-100);
    border-radius: var(--mrb-radius-full);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Track wird größer beim Hover */
.mrb-scroll-indicator:hover .mrb-scroll-track {
    height: 8px;
}

.mrb-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--mrb-primary), var(--mrb-primary-light));
    border-radius: var(--mrb-radius-full);
    cursor: grab;
    min-width: 40px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    /* Keine transition für left - für direkte Reaktion */
}

/* Thumb Effekte */
.mrb-scroll-indicator:hover .mrb-scroll-thumb {
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.mrb-scroll-thumb:hover {
    box-shadow: 0 2px 12px rgba(0, 122, 255, 0.4);
    transform: scale(1.05);
}

.mrb-scroll-thumb.dragging {
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.5);
    transform: scale(1.08);
}

/* Fade in/out Animation - nur auf Desktop */
@media (min-width: 769px) {
    .mrb-scroll-indicator {
        opacity: 0;
    }
}

/* Auf Mobile standardmäßig sichtbar */
@media (max-width: 768px) {
    .mrb-scroll-indicator {
        opacity: 1;
    }
}

.mrb-table-container:hover .mrb-scroll-indicator {
    opacity: 1;
}

.mrb-scroll-indicator:hover {
    opacity: 1;
}

/* Bei Inaktivität ausblenden - nur auf Desktop */
@media (min-width: 769px) {
    .mrb-table-container:not(:hover) .mrb-scroll-indicator {
        opacity: 0;
        transition-delay: 2s;
    }
}

/* Auf Mobile immer sichtbar */
@media (max-width: 768px) {
    .mrb-scroll-indicator {
        opacity: 1 !important;
    }
    
    .mrb-table-container:hover .mrb-scroll-indicator {
        opacity: 1 !important;
    }
}

/* Remove old scroll hint - no longer needed */
.mrb-scroll-hint {
    display: none;
}

/* Keyboard Navigation Highlight */
.mrb-table-slot:focus {
    outline: 2px solid var(--mrb-primary);
    outline-offset: -2px;
}

/* Middle Mouse Button Drag Cursor */
.mrb-table-scroll-wrapper.grabbing {
    cursor: grabbing !important;
}

/* Sticky Header Styles */
.mrb-sticky-header-wrapper {
    overflow: hidden !important;
    border-bottom: 1px solid var(--mrb-border);
}

.mrb-sticky-table {
    table-layout: fixed;
    margin: 0;
}

.mrb-sticky-header-clone {
    background: var(--mrb-surface);
}