/**
* LqD Golf Chat - Premium Design System
* Version 5.2 - Enhanced UI with Premium Animations & Micro-interactions
*/

:root {
 /* Primary color scheme with expanded palette */
 --primary-color: #10B981;
 --primary-dark: #059669;
 --primary-darker: #047857;
 --primary-light: rgba(16, 185, 129, 0.12);
 --primary-lighter: rgba(16, 185, 129, 0.05);
 --primary-rgb: 16, 185, 129;
 
 /* Light theme colors - refined palette */
 --background: #ffffff;
 --background-alt: #fafcfe;
 --surface: #f8fafc;
 --surface-hover: #f1f5f9;
 --surface-active: #e9effd;
 --card: #ffffff;
 --card-elevated: #ffffff;
 --border: #e2e8f0;
 --border-strong: #cbd5e1;
 --border-light: #f1f5f9;
 --text-primary: #0f172a;
 --text-secondary: #475569;
 --text-tertiary: #94a3b8;
 --text-muted: #cbd5e1;
 --shadow-color: rgba(0, 0, 0, 0.08);
 
 /* Success/Error/Warning colors */
 --success: #10b981;
 --success-dark: #059669;
 --success-light: rgba(16, 185, 129, 0.12);
 --warning: #f59e0b;
 --warning-light: rgba(245, 158, 11, 0.12);
 --error: #ef4444;
 --error-light: rgba(239, 68, 68, 0.12);
 --error-dark: #b91c1c;
 --error-rgb: 239, 68, 68;
 
 /* Premium typography */
 --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 --font-size-xs: 0.75rem;
 --font-size-sm: 0.875rem; 
 --font-size: 1rem;
 --font-size-lg: 1.125rem;
 --font-size-xl: 1.25rem;
 --font-size-2xl: 1.5rem;
 --font-weight-normal: 400;
 --font-weight-medium: 500;
 --font-weight-semibold: 600;
 --font-weight-bold: 700;
 --line-height-tight: 1.25;
 --line-height: 1.5;
 --line-height-relaxed: 1.75;
 --letter-spacing-tight: -0.01em;
 --letter-spacing-normal: 0;
 --letter-spacing-wide: 0.01em;
 
 /* Enhanced radius values */
 --radius-xs: 0.25rem;
 --radius-sm: 0.375rem;
 --radius: 0.5rem;
 --radius-md: 0.625rem;
 --radius-lg: 0.75rem;
 --radius-xl: 1rem;
 --radius-2xl: 1.5rem;
 --radius-full: 9999px;
 
 /* Premium shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 --shadow-outline: 0 0 0 3px var(--primary-light);
 
 /* Premium transitions */
 --transition-fastest: 50ms cubic-bezier(0.16, 1, 0.3, 1);
 --transition-fast: 100ms cubic-bezier(0.16, 1, 0.3, 1);
 --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
 --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);
 --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
 --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
 
 /* Spacing system */
 --spacing-3xs: 0.125rem;
 --spacing-2xs: 0.25rem;
 --spacing-xs: 0.5rem;
 --spacing-sm: 0.75rem;
 --spacing: 1rem;
 --spacing-md: 1.5rem;
 --spacing-lg: 2rem;
 --spacing-xl: 2.5rem;
 --spacing-2xl: 3rem;
 
 /* Input height - for calculations */
 --input-height: 60px;
 
 /* Z-indices */
 --z-header: 20;
 --z-footer: 20;
 --z-overlay: 30;
 --z-modal: 40;
 --z-toast: 50;
 --z-dropdown: 60;
 
 /* Viewport height variable - will be set by JS */
 --vh: 1vh;
 
 /* Safe area insets */
 --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Base styles */
.lqd-webchat-container,
#lqd-webchat-container {
 font-family: var(--font-family);
 line-height: var(--line-height);
 font-size: var(--font-size);
 color: var(--text-primary);
 width: 100%;
 height: 100%;
 position: relative;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-tap-highlight-color: transparent;
 background-color: var(--background);
}

/* Reset box-sizing for all elements */
.lqd-webchat-container *,
.lqd-webchat-container *::before,
.lqd-webchat-container *::after,
#lqd-webchat-container *,
#lqd-webchat-container *::before,
#lqd-webchat-container *::after {
 box-sizing: border-box;
}

/* Main chat container */
.lqd-chat {
 display: flex;
 flex-direction: column;
 background-color: var(--background);
 border-radius: var(--radius);
 overflow: hidden;
 width: 100%;
 height: 100%;
 position: relative;
 flex: 1;
 isolation: isolate; /* Create stacking context */
}

/* ENHANCED: Chat header with End Chat button */
.lqd-chat-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: var(--spacing-sm) var(--spacing);
 background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
 color: white;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.15);
 z-index: var(--z-header);
 position: relative;
}

.lqd-chat-title {
 display: flex;
 align-items: center;
 gap: 10px;
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size);
 letter-spacing: var(--letter-spacing-tight);
}

.lqd-chat-title svg {
 width: 20px;
 height: 20px;
 opacity: 0.9;
}

.lqd-end-chat-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 6px 12px;
 border-radius: var(--radius);
 background-color: rgba(255, 255, 255, 0.1);
 color: white;
 border: none;
 cursor: pointer;
 transition: all var(--transition);
 opacity: 0.8;
 font-size: var(--font-size-xs);
 font-weight: var(--font-weight-medium);
 letter-spacing: var(--letter-spacing-tight);
}

.lqd-end-chat-btn:hover {
 background-color: rgba(255, 255, 255, 0.2);
 opacity: 1;
 transform: scale(1.05);
}

.lqd-end-chat-btn:active {
 transform: scale(0.95);
}

/* Mobile adjustments for end chat button */
@media (max-width: 767px) {
 .lqd-chat-header {
   padding: var(--spacing-xs) var(--spacing);
 }
	.lqd-end-chat-btn {
   padding: 4px 8px;
   font-size: 11px;
 }
 }
/* Messages container */
.lqd-messages {
 flex: 1;
 overflow-y: auto;
 overflow-x: hidden;
 padding: var(--spacing);
 display: flex;
 flex-direction: column;
 background-color: var(--surface);
 gap: var(--spacing);
 scrollbar-width: thin;
 scrollbar-color: var(--border) transparent;
 scroll-behavior: smooth;
 -webkit-overflow-scrolling: touch; /* Improve scroll on iOS */
 min-height: 0; /* Important for flex containers */
 padding-bottom: calc(var(--input-height) + var(--spacing-lg)); /* Extra padding at bottom */
 will-change: transform; /* Optimize animations */
 max-width: 100%; /* Prevent overflow */
 background-image: 
   radial-gradient(var(--primary-lighter) 1px, transparent 1px),
   radial-gradient(var(--primary-lighter) 1px, transparent 1px);
 background-size: 50px 50px;
 background-position: 0 0, 25px 25px;
 background-attachment: fixed;
}

/* Scrollbar styling */
.lqd-messages::-webkit-scrollbar {
 width: 5px;
}

.lqd-messages::-webkit-scrollbar-track {
 background: transparent;
}

.lqd-messages::-webkit-scrollbar-thumb {
 background-color: var(--border);
 border-radius: 3px;
}

.lqd-messages::-webkit-scrollbar-thumb:hover {
 background-color: var(--text-tertiary);
}

/* Message bubbles - ENHANCED ANIMATIONS AND STYLING */
.lqd-message {
 display: flex;
 max-width: 85%;
 animation: messageFadeIn 0.35s var(--transition-bounce);
 align-self: flex-start;
 position: relative;
 margin-bottom: var(--spacing-sm);
 width: auto; /* Allow natural width */
 transform-origin: left center;
}

.lqd-message-user {
 align-self: flex-end;
 transform-origin: right center;
 animation: userMessageFadeIn 0.35s var(--transition-bounce);
}

@keyframes messageFadeIn {
 0% {
   opacity: 0;
   transform: translateY(10px) scale(0.96);
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

@keyframes userMessageFadeIn {
 0% {
   opacity: 0;
   transform: translateY(10px) scale(0.96);
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

.lqd-message-content {
 padding: var(--spacing-md);
 border-radius: var(--radius-lg);
 position: relative;
 box-shadow: var(--shadow-sm);
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-word;
 max-width: 100%; /* Prevent overflow */
 transition: all var(--transition);
}

.lqd-message-agent .lqd-message-content {
 background-color: var(--card);
 border: 1px solid var(--border-light);
 border-bottom-left-radius: var(--radius-xs);
 transform-origin: left bottom;
}

.lqd-message-agent .lqd-message-content::before {
 content: '';
 position: absolute;
 left: -8px;
 bottom: -1px;
 width: 12px;
 height: 12px;
 background-color: var(--card);
 border-bottom: 1px solid var(--border-light);
 border-left: 1px solid var(--border-light);
 border-radius: 0 0 0 12px;
 clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.lqd-message-user .lqd-message-content {
 background-color: var(--primary-color);
 color: white;
 border-bottom-right-radius: var(--radius-xs);
 transform-origin: right bottom;
 box-shadow: var(--shadow-sm);
}

.lqd-message-user .lqd-message-content::before {
 content: '';
 position: absolute;
 right: -8px;
 bottom: 0;
 width: 12px;
 height: 12px;
 background-color: var(--primary-color);
 border-radius: 0 0 12px 0;
 clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.lqd-message-error .lqd-message-content {
 background-color: var(--error-light);
 color: var(--error);
 border: 1px solid rgba(239, 68, 68, 0.2);
}

.lqd-message-text {
 line-height: var(--line-height);
 font-size: var(--font-size);
}

.lqd-message-text a {
 color: inherit;
 text-decoration: underline;
 transition: all var(--transition-fast);
}

.lqd-message-text a:hover {
 opacity: 0.85;
}

.lqd-message-time {
 font-size: var(--font-size-xs);
 margin-top: var(--spacing-xs);
 opacity: 0.7;
 text-align: right;
}

/* ENHANCED: Message interactive elements styling with premium animations - FIXED FOR WIDE SCREENS */
.lqd-message-interactive {
 width: 100%;
 max-width: min(600px, 100%); /* Constrain to max 600px but responsive */
 align-self: flex-start; /* Always align left for chat-like appearance */
 margin-bottom: var(--spacing-md);
 animation: interactiveElementFadeIn 0.45s var(--transition-bounce);
}

@keyframes interactiveElementFadeIn {
 0% {
   opacity: 0;
   transform: translateY(15px) scale(0.97);
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

.lqd-message-interactive .lqd-message-content {
 padding: 0;
 overflow: visible;
 background-color: transparent;
 border: none;
 box-shadow: none;
 width: 100%;
}

/* Interactive components within messages should take full width but be constrained */
.lqd-message-interactive .lqd-calendar-selector,
.lqd-message-interactive .lqd-player-picker,
.lqd-message-interactive .lqd-course-browser,
.lqd-message-interactive .lqd-tee-times-container,
.lqd-message-interactive .lqd-confirmation-card,
.lqd-message-interactive .lqd-cancellation-card,
.lqd-message-interactive .lqd-course-info-card {
 width: 100%;
 max-width: 100%;
 margin-left: 0;
 margin-right: 0;
 animation: cardEnter 0.5s var(--transition-bounce) both;
 box-shadow: var(--shadow-md), 
             0 0 0 1px rgba(var(--primary-rgb), 0.05),
             0 3px 15px -3px rgba(var(--primary-rgb), 0.1);
}

@keyframes cardEnter {
 0% {
   opacity: 0;
   transform: translateY(16px) scale(0.97);
 }
 40% {
   opacity: 1;
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

/* Disable interactive components after selection */
.lqd-message-interactive.selection-made {
 pointer-events: auto;
}

.lqd-message-interactive.selection-made .lqd-player-option:not(.active),
.lqd-message-interactive.selection-made .lqd-date-item:not(.selected),
.lqd-message-interactive.selection-made .lqd-tee-slot:not(.selected),
.lqd-message-interactive.selection-made .lqd-course-card:not(.selected) {
 opacity: 0.45;
 filter: saturate(0.7);
 transform: scale(0.98);
 pointer-events: none;
 transition: all var(--transition-slow);
}

/* After the user picks a player count, remove the selector from view */
.lqd-message-interactive.selection-made {
 display: none !important;
}

/* ENHANCED Quick suggestions with animated appearance and premium styling */
.lqd-suggestions {
 display: flex;
 flex-wrap: nowrap;
 gap: 10px;
 padding: 16px;
 background-color: var(--card);
 border-top: 1px solid var(--border);
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 position: relative;
 z-index: var(--z-footer);
 scrollbar-width: none;
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.lqd-suggestions::-webkit-scrollbar {
 display: none;
}

.lqd-suggestion-button {
 background-color: var(--card-elevated);
 color: var(--primary-color);
 border: 1px solid var(--primary-light);
 border-radius: var(--radius-full);
 padding: 12px 18px;
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
 white-space: nowrap;
 cursor: pointer;
 transition: all var(--transition-fast);
 box-shadow: var(--shadow-sm), 0 1px 2px rgba(var(--primary-rgb), 0.1);
 flex-shrink: 0;
 display: flex;
 align-items: center;
 gap: 8px;
 position: relative;
 overflow: hidden;
 letter-spacing: var(--letter-spacing-tight);
 opacity: 0;
 transform: translateY(8px);
 animation: buttonFadeIn 0.4s var(--transition-bounce) forwards;
 animation-delay: calc(var(--index, 0) * 0.07s);
}

@keyframes buttonFadeIn {
 0% {
   opacity: 0;
   transform: translateY(10px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }
}

.lqd-suggestion-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
   120deg, 
   transparent 0%, 
   transparent 45%,
   rgba(var(--primary-rgb), 0.1) 50%,
   transparent 55%, 
   transparent 100%
 );
 transform: translateX(-100%);
 transition: transform 0.7s ease-in-out;
}

.lqd-suggestion-button:hover::before {
 transform: translateX(100%);
}

.lqd-suggestion-button:hover {
 transform: translateY(-3px);
 box-shadow: 0 6px 12px rgba(var(--primary-rgb), 0.2);
 border-color: var(--primary-color);
}

.lqd-suggestion-button:active {
 transform: translateY(-1px);
 box-shadow: 0 3px 6px rgba(var(--primary-rgb), 0.15);
}

.lqd-suggestion-button svg {
 width: 16px;
 height: 16px;
 opacity: 0.85;
 transition: transform var(--transition-fast);
}

.lqd-suggestion-button:hover svg {
 transform: scale(1.1);
}

/* ENHANCED Typing indicator with more lively animation */
.lqd-typing {
 display: flex;
 align-items: center;
 align-self: flex-start;
 padding: var(--spacing-sm) var(--spacing);
 background-color: var(--card);
 border-radius: var(--radius-lg);
 border-bottom-left-radius: var(--radius-xs);
 border: 1px solid var(--border-light);
 gap: 4px;
 max-width: 60px;
 box-shadow: var(--shadow-sm);
 animation: typingFadeIn 0.35s var(--transition-bounce);
 position: relative;
}

.lqd-typing::before {
 content: '';
 position: absolute;
 left: -8px;
 bottom: -1px;
 width: 12px;
 height: 12px;
 background-color: var(--card);
 border-bottom: 1px solid var(--border-light);
 border-left: 1px solid var(--border-light);
 border-radius: 0 0 0 12px;
 clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

@keyframes typingFadeIn {
 0% {
   opacity: 0;
   transform: translateY(10px) scale(0.9);
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

.lqd-typing span {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: var(--primary-color);
 opacity: 0.7;
 animation: typingDot 1.4s infinite;
}

.lqd-typing span:nth-child(1) {
 animation-delay: 0s;
}

.lqd-typing span:nth-child(2) {
 animation-delay: 0.2s;
}

.lqd-typing span:nth-child(3) {
 animation-delay: 0.4s;
}

@keyframes typingDot {
 0%, 60%, 100% {
   transform: translateY(0) scale(1);
   opacity: 0.5;
 }
 30% {
   transform: translateY(-5px) scale(1.2);
   opacity: 0.9;
 }
}

/* ENHANCED Input container with polished styling */
.lqd-input-container {
 display: flex;
 align-items: center;
 padding: var(--spacing-sm) var(--spacing);
 border-top: 1px solid var(--border);
 background-color: var(--card);
 gap: var(--spacing-sm);
 z-index: var(--z-footer);
 min-height: var(--input-height);
 position: sticky;
 bottom: 0;
 left: 0;
 right: 0;
 flex-shrink: 0; /* Prevent container from shrinking */
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 transform: translateZ(0); /* Fix for sticky positioning */
}

.lqd-input {
 flex: 1;
 border: 1px solid var(--border);
 border-radius: var(--radius-full);
 padding: 14px 20px;
 font-size: 16px; /* Prevent iOS zoom */
 background-color: var(--surface);
 color: var(--text-primary);
 transition: all var(--transition);
 font-family: var(--font-family);
 -webkit-appearance: none; /* Fix for iOS */
 -moz-appearance: none;
 appearance: none;
 resize: none; /* Fix for iOS */
 height: 48px;
 min-height: 48px;
 line-height: 1.2;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.lqd-input:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: var(--shadow-outline);
}

/* ENHANCED Send button with glow and interaction effects */
.lqd-send-button {
 min-width: 48px;
 height: 48px;
 min-height: 48px;
 border-radius: var(--radius-full);
 background-color: var(--primary-color);
 color: white;
 border: none;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all var(--transition);
 box-shadow: var(--shadow-sm), 0 0 15px rgba(var(--primary-rgb), 0.4);
 flex-shrink: 0;
 padding: 0;
 position: relative;
 overflow: hidden; /* For ripple effect */
}

.lqd-send-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
 opacity: 0;
 transition: opacity var(--transition-fast);
}

.lqd-send-button svg {
 width: 18px;
 height: 18px;
 transition: transform var(--transition-fast);
}

.lqd-send-button:hover {
 background-color: var(--primary-dark);
 transform: translateY(-2px) scale(1.05);
 box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.5);
}

.lqd-send-button:hover::before {
 opacity: 1;
}

.lqd-send-button:hover svg {
 transform: scale(1.1) translateX(1px);
}

.lqd-send-button:active {
 transform: scale(0.95);
 background-color: var(--primary-darker);
 box-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.3);
}

.lqd-send-button:focus {
 outline: none;
 box-shadow: 0 0 0 3px var(--primary-light);
}

.lqd-send-button:disabled {
 background-color: var(--text-tertiary);
 cursor: not-allowed;
 transform: none;
 opacity: 0.7;
 box-shadow: none;
}

/* ENHANCED Ripple effect for buttons with smoother animation */
.lqd-ripple {
 position: absolute;
 background-color: rgba(255, 255, 255, 0.7);
 border-radius: 50%;
 transform: scale(0);
 animation: ripple 0.8s ease-out;
 pointer-events: none;
}

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

/* ENHANCED: DATE SELECTOR - 3-day CARDS with premium styling */
.lqd-calendar-selector {
 width: 100%;
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--primary-rgb), 0.05);
 position: relative;
 margin-bottom: var(--spacing-md);
 transition: all var(--transition);
}

.lqd-calendar-selector:hover {
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), 0.1);
}

/* Enhanced headers for all components */
.lqd-calendar-header,
.lqd-player-header,
.lqd-course-header-simple {
 text-align: center;
 padding: var(--spacing);
 border-bottom: 1px solid var(--border-light);
 background: linear-gradient(to right, var(--primary-light), rgba(var(--primary-rgb), 0.12));
 position: relative;
}

.lqd-calendar-header h3,
.lqd-player-header h3,
.lqd-course-header-simple h3 {
 margin: 0;
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-bold);
 color: var(--primary-dark);
 letter-spacing: var(--letter-spacing-tight);
 position: relative;
 display: inline-block;
}

.lqd-calendar-header h3::after,
.lqd-player-header h3::after,
.lqd-course-header-simple h3::after {
 content: '';
 position: absolute;
 bottom: -4px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 2px;
 background-color: var(--primary-color);
}

/* ENHANCED: 3-day date grid layout */
.lqd-date-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 10px;
 padding: var(--spacing-md);
 width: 100%;
}

.lqd-date-grid-3day {
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 16px;
}

.lqd-date-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius);
 border: 2px solid transparent;
 background-color: var(--surface);
 padding: 12px 5px;
 transition: all var(--transition);
 cursor: pointer;
 position: relative;
 height: 100%;
 min-height: 90px;
 box-shadow: var(--shadow-xs);
}

.lqd-date-day {
 font-size: 12px;
 text-transform: uppercase;
 font-weight: var(--font-weight-bold);
 color: var(--text-secondary);
 margin-bottom: 3px;
 letter-spacing: 0.02em;
}

.lqd-date-num {
 font-size: 26px;
 font-weight: var(--font-weight-bold);
 line-height: 1;
 color: var(--text-primary);
 transition: all var(--transition-fast);
}

.lqd-date-month {
 font-size: 12px;
 font-weight: var(--font-weight-medium);
 color: var(--text-secondary);
 margin-top: 3px;
}

.lqd-date-item:hover {
 transform: translateY(-4px);
 background-color: var(--primary-light);
 border-color: var(--primary-light);
 box-shadow: 0 8px 15px -3px rgba(var(--primary-rgb), 0.25);
 z-index: 1;
}

.lqd-date-item:hover .lqd-date-num {
 transform: scale(1.1);
 color: var(--primary-dark);
}

.lqd-date-item.selected {
 border-color: var(--primary-color);
 background-color: var(--primary-light);
 z-index: 2;
 box-shadow: 0 10px 20px -5px rgba(var(--primary-rgb), 0.3);
}

/* FIX: Today dot positioning */
.lqd-date-item.today {
 position: relative;
}

.lqd-date-item.today::after {
 content: '';
 position: absolute;
 top: 8px;
 right: 8px; /* Moved further right to avoid overlap */
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: var(--primary-color);
 box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.lqd-date-item.today .lqd-date-day {
 color: var(--primary-color);
 font-weight: var(--font-weight-bold);
}

/* Calendar subtitle styling */
.lqd-calendar-subtitle,
.lqd-player-subtitle {
 font-size: var(--font-size-xs);
 color: var(--text-tertiary);
 margin-top: 6px;
 opacity: 0.8;
}

/* ENHANCED: PLAYER PICKER with better layout and selection experience */
.lqd-player-picker {
 width: 100%;
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--primary-rgb), 0.05);
 margin-bottom: var(--spacing-md);
 transition: all var(--transition);
}

.lqd-player-picker:hover {
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), 0.1);
}

.lqd-player-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 padding: var(--spacing-md);
}

.lqd-player-option {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 18px 10px;
 background-color: var(--surface);
 border: 2px solid var(--border-light);
 border-radius: var(--radius-lg);
 transition: all var(--transition);
 cursor: pointer;
 overflow: hidden;
 box-shadow: var(--shadow-xs);
 min-height: 120px;
}

.lqd-player-option::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 4px;
 background: linear-gradient(to right, var(--primary-color), transparent);
 opacity: 0;
 transition: opacity var(--transition);
}

.lqd-player-option:hover {
 transform: translateY(-5px);
 border-color: var(--primary-light);
 background-color: var(--primary-light);
 box-shadow: 0 10px 20px -5px rgba(var(--primary-rgb), 0.2);
 z-index: 1;
}

.lqd-player-option:hover::before {
 opacity: 1;
}

.lqd-player-option.active {
 border-color: var(--primary-color);
 background-color: var(--primary-light);
 box-shadow: 0 10px 25px -5px rgba(var(--primary-rgb), 0.25);
 z-index: 2;
}

.lqd-player-option.active::before {
 opacity: 1;
 background: var(--primary-color);
}

.lqd-player-number {
 font-size: 32px;
 font-weight: var(--font-weight-bold);
 color: var(--primary-color);
 margin-bottom: 8px;
 transition: all var(--transition-fast);
}

.lqd-player-option:hover .lqd-player-number,
.lqd-player-option.active .lqd-player-number {
 transform: scale(1.15);
 text-shadow: 0 2px 5px rgba(var(--primary-rgb), 0.25);
}

.lqd-player-icons {
 display: flex;
 justify-content: center;
 margin: 6px 0;
 transition: all var(--transition-fast);
}

.lqd-player-icon {
 color: var(--primary-color);
 margin: 0 2px;
 opacity: 0.8;
 transition: all var(--transition-fast);
}

.lqd-player-option:hover .lqd-player-icons,
.lqd-player-option.active .lqd-player-icons {
 transform: scale(1.1);
}

.lqd-player-label {
 font-size: var(--font-size-xs);
 font-weight: var(--font-weight-medium);
 color: var(--text-secondary);
 margin-top: 6px;
 text-align: center;
}

.lqd-player-option:hover .lqd-player-label,
.lqd-player-option.active .lqd-player-label {
 color: var(--primary-dark);
 font-weight: var(--font-weight-semibold);
}

/* ENHANCED: Course info card with premium styling - FIXED WHITE TEXT */
.lqd-course-info-card {
 width: 100%;
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--primary-rgb), 0.05);
 margin-bottom: var(--spacing-md);
 transition: all var(--transition);
}

.lqd-course-info-card:hover {
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), 0.1);
 transform: translateY(-2px);
}

.lqd-course-info-header {
 position: relative;
 display: flex;
 align-items: flex-end;
 min-height: 200px;
 background: linear-gradient(135deg, var(--primary-light) 0%, rgba(var(--primary-rgb), 0.05) 100%);
}

.lqd-course-info-image {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

.lqd-course-info-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.8s ease;
}

.lqd-course-info-card:hover .lqd-course-info-image img {
 transform: scale(1.05);
}

.lqd-course-info-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
}

.lqd-course-info-title {
 position: relative;
 z-index: 2;
 padding: var(--spacing-md);
 color: white !important;
 width: 100%;
}

.lqd-course-info-name {
 margin: 0 0 8px 0;
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 letter-spacing: var(--letter-spacing-tight);
 color: white !important; /* Force white text */
}

.lqd-course-info-location {
 display: flex;
 align-items: center;
 font-size: var(--font-size-sm);
 opacity: 0.95;
 text-shadow: 0 1px 2px rgba(0,0,0,0.3);
 color: white !important;
}

.lqd-course-info-location svg {
 width: 16px;
 height: 16px;
 margin-right: 8px;
 color: white !important;
}

.lqd-course-info-content {
 padding: var(--spacing-md);
}

.lqd-course-info-stats {
 display: flex;
 gap: 16px;
 margin-bottom: var(--spacing-md);
 padding: var(--spacing-sm) 0;
 border-bottom: 1px solid var(--border-light);
}

.lqd-course-stat {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.lqd-course-stat-label {
 font-size: var(--font-size-xs);
 color: var(--text-tertiary);
 font-weight: var(--font-weight-medium);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: 4px;
}

.lqd-course-stat-value {
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-bold);
 color: var(--primary-color);
}

.lqd-course-info-actions {
 display: flex;
 gap: 12px;
}

.lqd-course-action-btn {
 flex: 1;
 padding: 14px 16px;
 border-radius: var(--radius-lg);
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size-sm);
 cursor: pointer;
 transition: all var(--transition);
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 position: relative;
 overflow: hidden;
 border: none;
}

.lqd-course-action-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
   120deg, 
   transparent 0%, 
   transparent 45%,
   rgba(255,255,255,0.2) 50%,
   transparent 55%, 
   transparent 100%
 );
 transform: translateX(-100%);
 transition: transform 0.7s ease-in-out;
}

.lqd-course-action-btn:hover::before {
 transform: translateX(100%);
}

.lqd-course-action-primary {
 background-color: var(--primary-color);
 color: white;
 box-shadow: var(--shadow-sm), 0 2px 8px rgba(var(--primary-rgb), 0.25);
}

.lqd-course-action-primary:hover {
 background-color: var(--primary-dark);
 transform: translateY(-3px);
 box-shadow: 0 8px 20px -3px rgba(var(--primary-rgb), 0.35);
}

.lqd-course-action-secondary {
 background-color: transparent;
 color: var(--text-secondary);
 border: 1px solid var(--border);
 box-shadow: var(--shadow-xs);
}

.lqd-course-action-secondary:hover {
 background-color: var(--surface-hover);
 color: var(--primary-color);
 border-color: var(--primary-light);
 transform: translateY(-2px);
 box-shadow: var(--shadow-sm);
}

.lqd-course-action-btn svg {
 transition: transform var(--transition-fast);
}

.lqd-course-action-btn:hover svg {
 transform: scale(1.1);
}

/* ENHANCED: TEE TIME SELECTOR with better layout and UX - FIXED WHITE TEXT */
.lqd-tee-times-container {
 width: 100%;
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--primary-rgb), 0.05);
 margin-bottom: var(--spacing-md);
 transition: all var(--transition);
 max-height: 500px;
 overflow-y: auto;
}

.lqd-tee-times-container:hover {
 box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--primary-rgb), 0.1);
}

.lqd-course-header {
 position: relative;
}

.lqd-course-banner {
 height: 150px;
 background-size: cover;
 background-position: center;
 position: relative;
 transition: all var(--transition);
}

.lqd-tee-times-container:hover .lqd-course-banner {
 filter: saturate(1.1) brightness(1.05);
}

.lqd-course-gradient {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
}

/* FIX: Make course title text white */
.lqd-course-title {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 padding: var(--spacing-md);
 color: white !important;
}

.lqd-course-title h3 {
 margin: 0;
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 margin-bottom: 6px;
 text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 letter-spacing: var(--letter-spacing-tight);
 color: white !important; /* Force white text */
}

.lqd-course-subtitle {
 font-size: var(--font-size-sm);
 opacity: 0.95;
 display: flex;
 align-items: center;
 text-shadow: 0 1px 2px rgba(0,0,0,0.3);
 color: white !important;
 white-space: normal;
 word-break: break-word;
}

.lqd-course-subtitle svg {
 width: 14px;
 height: 14px;
 margin-right: 6px;
 color: white !important;
}

.lqd-tee-tabs {
 display: flex;
 padding: 3px;
 gap: 0;
 background-color: var(--surface);
 border-bottom: 1px solid var(--border-light);
}

.lqd-tee-tab {
 flex: 1;
 padding: 14px;
 border-radius: var(--radius);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size-sm);
 color: var(--text-secondary);
 background-color: transparent;
 border: none;
 cursor: pointer;
 transition: all var(--transition);
 position: relative;
 overflow: hidden;
}

.lqd-tee-tab::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
   120deg, 
   transparent 0%, 
   transparent 45%,
   rgba(var(--primary-rgb), 0.1) 50%,
   transparent 55%, 
   transparent 100%
 );
 transform: translateX(-100%);
 transition: transform 0.7s ease-in-out;
}

.lqd-tee-tab:hover::before {
 transform: translateX(100%);
}

.lqd-tee-tab.active {
 background-color: var(--primary-color);
 color: white;
 box-shadow: var(--shadow-sm);
}

.lqd-tee-tab:not(.active):hover {
 background-color: var(--primary-light);
 color: var(--primary-dark);
}

.lqd-tee-tab svg {
 width: 16px;
 height: 16px;
 transition: transform var(--transition-fast);
}

.lqd-tee-tab:hover svg {
 transform: scale(1.1);
}

.lqd-slot-section {
 padding: var(--spacing-md);
}

.lqd-tee-slot {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--spacing-md);
 background-color: var(--surface);
 border-radius: var(--radius-lg);
 margin-bottom: 14px;
 border: 2px solid transparent;
 transition: all var(--transition);
 cursor: pointer;
 box-shadow: var(--shadow-sm);
 position: relative;
 overflow: hidden;
}

.lqd-tee-slot:last-child {
 margin-bottom: 0;
}

.lqd-tee-slot::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 4px;
 height: 100%;
 background: var(--primary-color);
 opacity: 0;
 transition: opacity var(--transition), transform var(--transition);
 transform: scaleY(0.3);
}

.lqd-tee-slot:hover {
 transform: translateY(-3px) translateX(2px);
 box-shadow: var(--shadow-md);
 background-color: var(--primary-light);
 border-color: rgba(var(--primary-rgb), 0.2);
 z-index: 1;
}

.lqd-tee-slot:hover::before {
 opacity: 1;
 transform: scaleY(1);
}

.lqd-tee-slot.selected {
 border-color: var(--primary-color);
 background-color: var(--primary-light);
 z-index: 2;
 box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-color);
}

.lqd-tee-slot.selected::before {
 opacity: 1;
 transform: scaleY(1);
}

.lqd-tee-time-info {
 display: flex;
 flex-direction: column;
}

.lqd-tee-time {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-bold);
 color: var(--text-primary);
 transition: color var(--transition);
}

.lqd-tee-slot:hover .lqd-tee-time,
.lqd-tee-slot.selected .lqd-tee-time {
 color: var(--primary-color);
}

.lqd-tee-time svg {
 width: 16px;
 height: 16px;
 color: var(--primary-color);
 transition: transform var(--transition-fast);
}

.lqd-tee-slot:hover .lqd-tee-time svg,
.lqd-tee-slot.selected .lqd-tee-time svg {
 transform: scale(1.15);
}

.lqd-tee-players {
 font-size: var(--font-size-xs);
 color: var(--text-secondary);
 margin-top: 6px;
 display: flex;
 align-items: center;
}

.lqd-tee-players svg {
 width: 12px;
 height: 12px;
 margin-right: 6px;
 color: var(--primary-color);
}

.lqd-tee-price {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 transition: transform var(--transition);
}

.lqd-tee-slot:hover .lqd-tee-price,
.lqd-tee-slot.selected .lqd-tee-price {
 transform: scale(1.05);
}

.lqd-tee-price-amount {
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 color: var(--primary-color);
}

.lqd-tee-price-label {
 font-size: 11px;
 color: var(--text-tertiary);
 margin-top: 2px;
}

.lqd-empty-times {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: var(--spacing-xl);
 text-align: center;
 color: var(--text-tertiary);
}

.lqd-empty-icon {
 font-size: 36px;
 margin-bottom: var(--spacing-sm);
 opacity: 0.8;
}

.lqd-empty-subtext {
 margin-top: 6px;
 font-size: var(--font-size-xs);
 opacity: 0.8;
}

/* ENHANCED: CONFIRMATION CARD with premium styling */
.lqd-confirmation-card {
 width: 100%;
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-lg), 
             0 0 0 1px rgba(16, 185, 129, 0.1),
             0 10px 25px -5px rgba(16, 185, 129, 0.15);
 margin-bottom: var(--spacing-md);
 position: relative;
}

.lqd-confirmation-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 5px;
 background: linear-gradient(to right, var(--success) 70%, transparent);
 z-index: 1;
}

.lqd-confirmation-header {
 background-color: var(--success);
 color: white;
 padding: var(--spacing-md);
 display: flex;
 align-items: center;
 gap: 12px;
 background-image: linear-gradient(45deg, var(--success) 0%, var(--success-dark) 100%);
 box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2);
 position: relative;
 overflow: hidden;
}

.lqd-confirmation-header::before {
 content: '';
 position: absolute;
 top: -10px;
 right: -10px;
 background-color: rgba(255, 255, 255, 0.1);
 width: 30px;
 height: 30px;
 border-radius: 50%;
 box-shadow: 0 0 20px 15px rgba(255, 255, 255, 0.1);
}

.lqd-confirmation-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.2);
 box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
 animation: pulseSuccess 2s infinite;
}

@keyframes pulseSuccess {
 0% {
   transform: scale(1);
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
 }
 70% {
   transform: scale(1.05);
   box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
 }
 100% {
   transform: scale(1);
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
 }
}

.lqd-confirmation-icon svg {
 width: 22px;
 height: 22px;
 stroke-width: 3px;
}

.lqd-confirmation-title {
 flex: 1;
}

.lqd-confirmation-title h3 {
 margin: 0;
 font-size: var(--font-size-xl);
 font-weight: var(--font-weight-bold);
 letter-spacing: var(--letter-spacing-tight);
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 color: white !important;
}

.lqd-confirmation-id {
 font-size: var(--font-size-sm);
 opacity: 0.95;
 margin-top: 4px;
 letter-spacing: 0.02em;
}

.lqd-confirmation-details {
 padding: var(--spacing-md);
 background-color: var(--card);
}

.lqd-confirmation-row {
 display: flex;
 margin-bottom: 16px;
 align-items: flex-start;
 position: relative;
 padding-left: 28px;
}

.lqd-confirmation-row:last-child {
 margin-bottom: 0;
}

.lqd-confirmation-row::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: var(--primary-color);
 opacity: 0.7;
}

.lqd-confirmation-label {
 width: 110px;
 color: var(--text-secondary);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 flex-shrink: 0;
}

.lqd-confirmation-value {
 flex: 1;
 font-weight: var(--font-weight-bold);
 color: var(--text-primary);
 font-size: var(--font-size-sm);
}

.lqd-confirmation-footer {
 padding: var(--spacing-md);
 border-top: 1px solid var(--border-light);
 background-color: var(--surface);
 display: flex;
 justify-content: space-between;
 gap: 12px;
}

.lqd-confirmation-button {
 flex: 1;
 padding: 14px 8px;
 border-radius: var(--radius);
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size-sm);
 cursor: pointer;
 transition: all var(--transition);
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 position: relative;
 overflow: hidden;
}

.lqd-confirmation-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
   120deg, 
   transparent 0%, 
   transparent 45%,
   rgba(255,255,255,0.2) 50%,
   transparent 55%, 
   transparent 100%
 );
 transform: translateX(-100%);
 transition: transform 0.7s ease-in-out;
}

.lqd-confirmation-button:hover::before {
 transform: translateX(100%);
}

.lqd-confirmation-primary {
 background-color: var(--success);
 color: white;
 border: none;
 box-shadow: var(--shadow-sm);
}

.lqd-confirmation-primary svg {
 transition: transform var(--transition-fast);
}

.lqd-confirmation-secondary {
 background-color: transparent;
 color: var(--text-secondary);
 border: 1px solid var(--border);
}

.lqd-confirmation-button:hover {
 transform: translateY(-3px);
}

.lqd-confirmation-button:hover svg {
 transform: scale(1.15);
}

.lqd-confirmation-primary:hover {
 background-color: var(--success-dark);
 box-shadow: 0 6px 15px -3px rgba(16, 185, 129, 0.3);
}

.lqd-confirmation-secondary:hover {
 background-color: var(--surface-hover);
 border-color: var(--primary-light);
 box-shadow: var(--shadow-sm);
}

/* ENHANCED Authentication form with premium styling */
.lqd-auth {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: var(--spacing-lg);
 background-color: rgba(var(--primary-rgb), 0.02);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: var(--z-overlay);
 animation: fadeIn 0.4s ease-out;
 backdrop-filter: blur(5px);
}

.lqd-auth-form {
 max-width: 400px;
 width: 90%;
 padding: var(--spacing-lg);
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-xl), 0 15px 50px -10px rgba(var(--primary-rgb), 0.15);
 animation: authFormEnter 0.5s var(--transition-bounce);
 position: relative;
 z-index: var(--z-modal);
 border: 1px solid rgba(var(--primary-rgb), 0.08);
 overflow: hidden;
}

.lqd-auth-form::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 4px;
 background: linear-gradient(to right, var(--primary-color), transparent);
}

@keyframes authFormEnter {
 0% {
   opacity: 0;
   transform: scale(0.9) translateY(20px);
 }
 100% {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
}

/* ENHANCED: Auth form styling */
.lqd-auth-brand {
 text-align: center;
 margin-bottom: var(--spacing-lg);
}

.lqd-auth-logo {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
 color: white;
 margin-bottom: var(--spacing-sm);
 box-shadow: var(--shadow-md), 0 8px 20px -5px rgba(var(--primary-rgb), 0.3);
 animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
 0%, 100% {
   transform: translateY(0px);
 }
 50% {
   transform: translateY(-5px);
 }
}

.lqd-auth-form h2 {
 margin-top: 0;
 margin-bottom: var(--spacing-xs);
 font-size: var(--font-size-2xl);
 color: var(--text-primary);
 text-align: center;
 line-height: 1.2;
 letter-spacing: var(--letter-spacing-tight);
 font-weight: var(--font-weight-bold);
 background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.lqd-auth-form p {
 margin-top: 0;
 margin-bottom: var(--spacing-lg);
 color: var(--text-tertiary);
 text-align: center;
 font-size: var(--font-size-sm);
}

/* ENHANCED Tab-based auth form with premium styling */
.lqd-auth-tabs {
 display: flex;
 border-bottom: 1px solid var(--border);
 margin-bottom: var(--spacing-md);
 position: relative;
}

.lqd-auth-tabs::after {
 content: '';
 position: absolute;
 bottom: -1px;
 left: 0;
 width: 50%;
 height: 2px;
 background-color: var(--primary-color);
 transition: transform var(--transition-spring);
 transform-origin: center left;
}

.lqd-auth-tabs[data-active-tab="email"]::after {
 transform: translateX(100%);
}

.lqd-auth-tab {
 flex: 1;
 background: transparent;
 border: none;
 border-bottom: 2px solid transparent;
 padding: var(--spacing) var(--spacing-sm);
 font-size: var(--font-size);
 font-weight: var(--font-weight-semibold);
 color: var(--text-secondary);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 transition: color var(--transition);
 position: relative;
 z-index: 1;
 display: flex;
 align-items: center;
 gap: 8px;
}

.lqd-auth-tab svg {
 width: 16px;
 height: 16px;
 opacity: 0.7;
 transition: all var(--transition);
}

.lqd-auth-tab.active svg {
 opacity: 1;
 transform: scale(1.1);
}

.lqd-auth-tab.active {
 color: var(--primary-color);
}

.lqd-auth-tab-form {
 display: none;
 animation: formTabEnter 0.4s var(--transition-bounce);
 transform-origin: top center;
}

@keyframes formTabEnter {
 0% {
   opacity: 0;
   transform: translateY(10px) scale(0.98);
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

.lqd-auth-tab-form.active {
 display: block;
}

.lqd-form-group {
 margin-bottom: var(--spacing-md);
}

.lqd-form-group label {
 display: block;
 margin-bottom: var(--spacing-xs);
 font-weight: var(--font-weight-medium);
 color: var(--text-secondary);
 font-size: var(--font-size-sm);
}

/* ENHANCED form inputs with premium styling */
.lqd-form-input {
 width: 100%;
 height: 54px; /* Taller for better touch targets */
 min-height: 54px; /* Ensure minimum height */
 padding: 14px 18px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background-color: var(--surface);
 color: var(--text-primary);
 font-size: 16px; /* Prevents iOS zoom */
 font-family: var(--font-family);
 transition: all var(--transition);
 -webkit-appearance: none; /* Fix for iOS */
 -moz-appearance: none;
 appearance: none;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lqd-form-input:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.lqd-form-input:hover {
 border-color: var(--primary-light);
}

.lqd-form-error {
 display: none;
 color: var(--error);
 font-size: var(--font-size-sm);
 margin-top: var(--spacing-xs);
 padding: var(--spacing-xs) var(--spacing-sm);
 background-color: var(--error-light);
 border-radius: var(--radius-sm);
 animation: errorShake 0.4s ease;
}

@keyframes errorShake {
 0%, 100% { transform: translateX(0); }
 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
 20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.lqd-form-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: var(--spacing-lg);
 gap: var(--spacing);
}

.lqd-form-button {
 flex: 1;
 height: 54px;
 min-height: 54px; /* Ensure minimum height */
 padding: 0 var(--spacing-md);
 border: none;
 border-radius: var(--radius-lg);
 background-color: var(--primary-color);
 color: white;
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size);
 cursor: pointer;
 transition: all var(--transition);
 -webkit-tap-highlight-color: transparent; /* Fix iOS tap highlight */
 position: relative;
 overflow: hidden;
 box-shadow: var(--shadow-sm), 0 2px 10px rgba(var(--primary-rgb), 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
}

.lqd-form-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
   120deg, 
   transparent 0%, 
   transparent 45%,
   rgba(255,255,255,0.2) 50%,
   transparent 55%, 
   transparent 100%
 );
 transform: translateX(-100%);
 transition: transform 0.7s ease-in-out;
}

.lqd-form-button:hover::before {
 transform: translateX(100%);
}

.lqd-form-button:hover,
.lqd-form-button:active {
 background-color: var(--primary-dark);
 transform: translateY(-3px);
 box-shadow: var(--shadow-md), 0 4px 15px rgba(var(--primary-rgb), 0.25);
}

.lqd-form-button:active {
 transform: translateY(-1px);
}

.lqd-form-button:focus {
 outline: none;
 box-shadow: 0 0 0 3px var(--primary-light);
}

.lqd-form-button:disabled {
 opacity: 0.7;
 cursor: not-allowed;
 transform: none !important;
 box-shadow: none !important;
}

.lqd-form-button svg {
 transition: transform var(--transition-fast);
}

.lqd-form-button:hover svg {
 transform: translateX(2px);
}

.lqd-auth-help {
 margin-top: var(--spacing-md);
 padding: var(--spacing-sm);
 background-color: var(--surface);
 border-radius: var(--radius);
 border-left: 3px solid var(--primary-color);
}

.lqd-auth-help p {
 margin: 0;
 font-size: var(--font-size-xs);
 color: var(--text-tertiary);
 line-height: var(--line-height-relaxed);
}

/* ENHANCED: Membership error styling */
.lqd-message-membership-error .lqd-message-content {
 padding: 0;
 background-color: transparent;
 border: none;
 box-shadow: none;
}

.lqd-membership-error-content {
 background-color: var(--card-elevated);
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-lg), 
             0 0 0 1px rgba(239, 68, 68, 0.1),
             0 10px 25px -5px rgba(239, 68, 68, 0.15);
 animation: membershipErrorFadeIn 0.5s var(--transition-bounce);
}

@keyframes membershipErrorFadeIn {
 0% {
   opacity: 0;
   transform: translateY(20px) scale(0.95);
 }
 100% {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
}

.lqd-membership-error-header {
 background: linear-gradient(135deg, var(--error) 0%, var(--error-dark) 100%);
 color: white;
 padding: var(--spacing-md);
 display: flex;
 align-items: center;
 gap: 12px;
}

.lqd-membership-error-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.2);
 animation: pulseError 2s infinite;
}

@keyframes pulseError {
 0% {
   transform: scale(1);
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
 }
 70% {
   transform: scale(1.05);
   box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
 }
 100% {
   transform: scale(1);
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
 }
}

.lqd-membership-error-header h3 {
 margin: 0;
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-bold);
 color: white;
}

.lqd-membership-error-message {
 padding: var(--spacing-md);
 background-color: var(--card);
}

.lqd-membership-error-message p {
 margin: 0;
 line-height: var(--line-height-relaxed);
 color: var(--text-secondary);
}

.lqd-membership-error-actions {
 padding: var(--spacing-md);
 border-top: 1px solid var(--border-light);
 background-color: var(--surface);
 display: flex;
 gap: 12px;
}

.lqd-membership-action-btn {
 flex: 1;
 padding: 12px 16px;
 border-radius: var(--radius);
 font-weight: var(--font-weight-semibold);
 font-size: var(--font-size-sm);
 cursor: pointer;
 transition: all var(--transition);
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 position: relative;
 overflow: hidden;
 border: none;
}

.lqd-membership-action-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(
   120deg, 
   transparent 0%, 
   transparent 45%,
   rgba(255,255,255,0.2) 50%,
   transparent 55%, 
   transparent 100%
 );
 transform: translateX(-100%);
 transition: transform 0.7s ease-in-out;
}

.lqd-membership-action-btn:hover::before {
 transform: translateX(100%);
}

.lqd-membership-primary {
 background-color: var(--primary-color);
 color: white;
 box-shadow: var(--shadow-sm);
}

.lqd-membership-primary:hover {
 background-color: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 6px 15px -3px rgba(var(--primary-rgb), 0.3);
}

.lqd-membership-secondary {
 background-color: transparent;
 color: var(--text-secondary);
 border: 1px solid var(--border);
}

.lqd-membership-secondary:hover {
 background-color: var(--surface-hover);
 color: var(--primary-color);
 border-color: var(--primary-light);
 transform: translateY(-2px);
 box-shadow: var(--shadow-sm);
}

.lqd-membership-action-btn svg {
 transition: transform var(--transition-fast);
}

.lqd-membership-action-btn:hover svg {
 transform: scale(1.1);
}

/* ENHANCED: Inline membership error styling for auth form */
.lqd-membership-error-inline {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: var(--spacing-sm);
 background-color: var(--error-light);
 border-radius: var(--radius);
 border-left: 3px solid var(--error);
 animation: errorSlideIn 0.4s var(--transition-bounce);
}

@keyframes errorSlideIn {
 0% {
   opacity: 0;
   transform: translateX(-10px);
 }
 100% {
   opacity: 1;
   transform: translateX(0);
 }
}

.lqd-membership-error-inline .lqd-membership-error-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background-color: var(--error);
 color: white;
 flex-shrink: 0;
 margin-top: 2px;
}

.lqd-membership-error-inline .lqd-membership-error-icon svg {
 width: 12px;
 height: 12px;
}

.lqd-membership-error-text {
 flex: 1;
 font-size: var(--font-size-sm);
 line-height: var(--line-height-relaxed);
 color: var(--error-dark);
}

.lqd-membership-error-text strong {
 font-weight: var(--font-weight-bold);
 display: block;
 margin-bottom: 4px;
}

/* ENHANCED Toast notification with premium styling */
.lqd-toast {
 position: fixed;
 bottom: 80px;
 left: 50%;
 transform: translateX(-50%);
 padding: var(--spacing) var(--spacing-md);
 border-radius: var(--radius-full);
 background-color: var(--primary-color);
 color: white;
 font-weight: var(--font-weight-semibold);
 box-shadow: var(--shadow-lg), 0 8px 20px -5px rgba(var(--primary-rgb), 0.4);
 z-index: var(--z-toast);
 animation: toastEntrance 0.5s var(--transition-bounce);
 max-width: 80%;
 text-align: center;
 letter-spacing: var(--letter-spacing-tight);
}

@keyframes toastEntrance {
 0% {
   opacity: 0;
   transform: translate(-50%, 20px) scale(0.9);
 }
 40% {
   transform: translate(-50%, -8px) scale(1.02);
 }
 100% {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
 }
}

.lqd-toast.fadeout {
 animation: toastExit 0.5s var(--transition) forwards;
}

@keyframes toastExit {
 from { 
   opacity: 1;
   transform: translate(-50%, 0);
 }
 to { 
   opacity: 0;
   transform: translate(-50%, 15px);
 }
}

/* ENHANCED Loading indicator with premium styling */
.lqd-loading {
 display: inline-block;
 position: relative;
 width: 20px;
 height: 20px;
 margin-right: var(--spacing-sm);
}

.lqd-loading:after {
 content: " ";
 display: block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 border: 2px solid currentColor;
 border-color: currentColor transparent currentColor transparent;
 animation: loaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes loaderSpin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* ENHANCED Visual feedback on touch with premium styling */
.lqd-touch-feedback {
 position: relative;
 overflow: hidden;
}

.lqd-touch-feedback::after {
 content: '';
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none;
 background-image: radial-gradient(circle, rgba(var(--primary-rgb), 0.3) 10%, transparent 10.01%);
 background-repeat: no-repeat;
 background-position: 50%;
 transform: scale(10, 10);
 opacity: 0;
 transition: transform 0.5s, opacity 0.5s;
}

.lqd-touch-feedback:active::after {
 transform: scale(0, 0);
 opacity: 0.4;
 transition: 0s;
}

/* Fix blue outline/tap color on mobile */
button, a, input, select, textarea, [role="button"], [tabindex="0"] {
 -webkit-tap-highlight-color: transparent !important;
 outline: none !important;
}

button:focus, a:focus, input:focus, select:focus, textarea:focus, [role="button"]:focus, [tabindex="0"]:focus {
 outline: none !important;
 box-shadow: none !important;
}

button:active, a:active, [role="button"]:active {
 background-image: none !important;
}

/* ENHANCED animations */
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes fadeOut {
 from { opacity: 1; }
 to { opacity: 0; }
}

@keyframes floatUp {
 0% {
   opacity: 0;
   transform: translateY(15px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }
}

@keyframes floatDown {
 0% {
   opacity: 0;
   transform: translateY(-15px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }
}

@keyframes scaleIn {
 0% { 
   opacity: 0; 
   transform: scale(0.92);
 }
 100% { 
   opacity: 1;
   transform: scale(1);
 }
}

/* RESPONSIVE BREAKPOINTS - ENHANCED FOR WIDE SCREENS */

/* Desktop improvements for course browser and tee times - CONSTRAINED FOR CHAT-LIKE LAYOUT */
@media (min-width: 768px) {
 /* Keep interactive elements constrained on wide screens */
 .lqd-message-interactive {
   max-width: min(650px, 85%); /* Better constraint for desktop */
 }
 
 /* Increase height for better desktop experience */
 .lqd-tee-times-container,
 .lqd-course-browser {
   max-height: 600px;
 }
 
 .lqd-region-content {
   max-height: 520px !important;
 }
 
 /* Make header and tabs sticky */
 .lqd-course-header,
 .lqd-tee-tabs,
 .lqd-region-tabs {
   position: sticky;
   top: 0;
   z-index: 10;
   background-color: var(--card-elevated);
 }
 
 /* Improved course header for desktop */
 .lqd-course-header {
   display: flex;
   align-items: center;
   height: auto;
   padding: var(--spacing-md);
 }
 
 .lqd-course-banner {
   width: 120px;
   height: 120px;
   background-size: cover;
   background-position: center;
   border-radius: var(--radius);
   margin-right: 15px;
   flex-shrink: 0;
 }
 
 .lqd-course-title {
   position: relative;
   bottom: auto;
   left: auto;
   width: auto;
   padding: 0;
   color: var(--text-primary) !important;
 }
 
 .lqd-course-title h3 {
   color: var(--text-primary) !important;
   text-shadow: none;
 }
 
 .lqd-course-subtitle {
   color: var(--text-secondary) !important;
   text-shadow: none;
 }
 
 .lqd-course-subtitle svg {
   color: var(--primary-color) !important;
 }
 
 .lqd-course-gradient {
   display: none;
 }
 
 /* Improved slot sections on desktop */
 .lqd-slot-section {
   padding: var(--spacing-md) var(--spacing-lg);
 }
 
 /* Improved tee time slots on desktop */
 .lqd-tee-slot {
   padding: var(--spacing-md) var(--spacing-lg);
 }
 
 /* Larger tee time price on desktop */
 .lqd-tee-price-amount {
   font-size: var(--font-size-2xl);
 }
 
 /* More space between slots on desktop */
 .lqd-tee-slot {
   margin-bottom: 18px;
 }
 
 /* Better padding for course cards on desktop */
 .lqd-course-info {
   padding: 18px;
 }
 
 /* Larger course names on desktop */
 .lqd-course-name {
   font-size: var(--font-size);
   margin-bottom: 8px;
 }
 
 /* Improved confirmation card on desktop - CONSTRAINED */
 .lqd-confirmation-card,
 .lqd-cancellation-card {
   max-width: min(600px, 100%); /* Constrain to 600px max */
   margin-left: 0; /* Keep aligned left for chat-like appearance */
   margin-right: auto;
 }
 
 .lqd-confirmation-details,
 .lqd-cancellation-details {
   padding: var(--spacing-lg);
 }
 
 .lqd-confirmation-row,
 .lqd-cancellation-row {
   margin-bottom: 20px;
   padding-left: 32px;
 }
 
 .lqd-confirmation-row::before,
 .lqd-cancellation-row::before {
   width: 10px;
   height: 10px;
 }
 
 .lqd-confirmation-label,
 .lqd-cancellation-label {
   width: 130px;
   font-size: var(--font-size);
 }
 
 .lqd-confirmation-value,
 .lqd-cancellation-value {
   font-size: var(--font-size);
 }
 
 /* Better course info card layout on desktop */
 .lqd-course-info-header {
   min-height: 240px;
 }
 
 .lqd-course-info-stats {
   gap: 32px;
   justify-content: flex-start;
 }
 
 .lqd-course-stat-value {
   font-size: var(--font-size-xl);
 }
 
 /* Auth form desktop adjustments */
 .lqd-auth-form {
   max-width: 450px;
   padding: var(--spacing-xl);
 }
 
 .lqd-auth-logo {
   width: 70px;
   height: 70px;
 }
 
 .lqd-membership-error-actions {
   justify-content: flex-end;
 }
 
 .lqd-membership-action-btn {
   flex: none;
   min-width: 140px;
 }
}

/* MOBILE ENHANCEMENTS */
@media (max-width: 767px) {
 /* Smaller screens */
 :root {
   --spacing: 0.75rem;
   --font-size: 15px;
   --input-height: 60px;
 }
 
 .lqd-webchat-container,
 #lqd-webchat-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   max-height: -webkit-fill-available; /* iOS Safari fix */
 }
 
 .lqd-chat {
   border-radius: 0;
   height: 100%;
   position: relative;
 }
 
 /* Message sizes and layout - IMPROVED */
 .lqd-message {
   max-width: 90%;
 }
 
 .lqd-message-interactive {
   width: 100%;
   max-width: 100%;
 }
 
 /* Fix for iOS viewport issues */
 .lqd-messages {
   height: auto;
   flex: 1;
   /* This is crucial - prevents content from being hidden under the keyboard */
   padding-bottom: calc(var(--input-height) + var(--safe-area-bottom) + 80px) !important;
 }
 
 /* FIX: Input container positioning for mobile to not overlap suggestions */
 .lqd-input-container {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: var(--card);
   padding: 12px 16px;
   padding-bottom: calc(12px + var(--safe-area-bottom)); /* iOS safe area */
   z-index: var(--z-footer);
   box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(10px);
 }

 /* FIX: Suggestions positioning to not be cut off by input */
 .lqd-suggestions {
   position: fixed;
   bottom: calc(var(--input-height) + var(--safe-area-bottom) + 20px) !important;
   left: 0;
   right: 0;
   padding: 12px 16px;
   z-index: var(--z-footer);
   box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
   backdrop-filter: blur(5px);
   background-color: var(--card);
 }

 /* Mobile responsive for 3-day grid */
 .lqd-date-grid-3day {
   grid-template-columns: repeat(3, 1fr) !important;
   gap: 12px;
   padding: 16px;
 }
 
 .lqd-date-grid-3day .lqd-date-item {
   min-height: 100px;
   padding: 12px 8px;
 }
 
 /* Authentication form on mobile */
 .lqd-auth-form {
   width: 92%;
   padding: var(--spacing);
   margin-bottom: 40px; /* Add space for keyboard */
 }
 
 .lqd-auth {
   align-items: flex-start;
   padding-top: 50px;
   justify-content: flex-start;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 /* Toast positioning on mobile */
 .lqd-toast {
   bottom: calc(var(--input-height) + 10px);
   max-width: 85%;
 }

 /* IMPROVED: Interactive components span full width */
 .lqd-message-interactive .lqd-message-content {
   width: 100%;
   padding: 0;
   margin: 0;
 }
 
 /* IMPROVED: Interactive components with better mobile styling */
 .lqd-calendar-selector,
 .lqd-player-picker,
 .lqd-course-browser,
 .lqd-tee-times-container,
 .lqd-confirmation-card,
 .lqd-cancellation-card,
 .lqd-course-info-card {
   width: 100% !important;
   max-width: 100% !important;
   border-radius: var(--radius-xl);
   margin: 0 0 16px 0;
   box-shadow: var(--shadow-lg), 0 15px 30px -10px rgba(var(--primary-rgb), 0.15);
 }

 /* IMPROVED: Player selector on a single row for mobile */
 .lqd-player-grid {
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto;
   gap: 10px;
   padding: 14px;
 }
 
 .lqd-player-option {
   padding: 12px 6px;
   min-height: 100px;
 }
 
 .lqd-player-number {
   font-size: 26px;
   margin-bottom: 4px;
 }
 
 .lqd-player-icons svg {
   width: 14px;
   height: 14px;
 }
 
 /* Suggestion button adjustments for mobile */
 .lqd-suggestion-button {
   padding: 10px 14px;
   font-size: 13px;
 }
 
 /* Tee slot adjustments for mobile */
 .lqd-tee-slot {
   padding: 14px;
 }
 
 .lqd-tee-time {
   font-size: 16px;
 }
 
 .lqd-tee-price-amount {
   font-size: 16px;
 }
 
 /* Form adjustments for mobile */
 .lqd-form-input {
   height: 50px;
   min-height: 50px;
   padding: 12px 16px;
 }
 
 .lqd-form-button {
   height: 50px;
   min-height: 50px;
 }
 
 /* Adjust course header for mobile */
 .lqd-course-banner {
   height: 130px;
 }
 
 .lqd-course-title h3 {
   font-size: var(--font-size-lg);
 }
 
 /* Mobile-specific confirmation card styling adjustments */
 .lqd-confirmation-card,
 .lqd-cancellation-card {
   border-radius: var(--radius-lg);
 }
 
 .lqd-confirmation-header,
 .lqd-cancellation-header {
   padding: 14px;
 }
 
 .lqd-confirmation-icon,
 .lqd-cancellation-icon {
   width: 36px;
   height: 36px;
 }
 
 .lqd-confirmation-title h3,
 .lqd-cancellation-title h3 {
   font-size: var(--font-size-lg);
 }
 
 .lqd-confirmation-details,
 .lqd-cancellation-details {
   padding: 16px;
 }
 
 .lqd-confirmation-row,
 .lqd-cancellation-row {
   margin-bottom: 14px;
   padding-left: 24px;
 }
 
 .lqd-confirmation-footer,
 .lqd-cancellation-footer {
   padding: 14px;
   flex-direction: column;
 }
 
 .lqd-confirmation-button,
 .lqd-cancellation-button {
   width: 100%;
   margin-bottom: 8px;
 }
 
 .lqd-confirmation-button:last-child,
 .lqd-cancellation-button:last-child {
   margin-bottom: 0;
 }
 
 /* Course info card mobile adjustments */
 .lqd-course-info-header {
   min-height: 160px;
 }
 
 .lqd-course-info-name {
   font-size: var(--font-size-lg);
 }
 
 .lqd-course-info-location {
   font-size: var(--font-size-xs);
 }
 
 .lqd-course-info-stats {
   justify-content: center;
   gap: 24px;
 }
 
 .lqd-course-info-actions {
   flex-direction: column;
   gap: 8px;
 }
 
 .lqd-course-action-btn {
   width: 100%;
   padding: 12px 16px;
 }
 
 /* Membership error mobile adjustments */
 .lqd-membership-error-actions {
   flex-direction: column;
   gap: 8px;
 }
 
 .lqd-membership-action-btn {
   width: 100%;
 }
 
 /* Auth form mobile adjustments */
 .lqd-auth-logo {
   width: 50px;
   height: 50px;
 }
 
 .lqd-auth-form h2 {
   font-size: var(--font-size-xl);
 }
 
 .lqd-auth-help {
   margin-top: var(--spacing);
 }
 
 /* Inline error mobile adjustments */
 .lqd-membership-error-inline {
   padding: var(--spacing-xs);
   gap: 8px;
 }
 
 .lqd-membership-error-inline .lqd-membership-error-icon {
   width: 20px;
   height: 20px;
 }
 
 .lqd-membership-error-inline .lqd-membership-error-icon svg {
   width: 10px;
   height: 10px;
 }
 
 .lqd-membership-error-text {
   font-size: var(--font-size-xs);
 }
 
 /* Chat header mobile adjustments */
 .lqd-chat-header {
   padding: var(--spacing-xs) var(--spacing);
 }
 
 .lqd-chat-title {
   font-size: var(--font-size-sm);
 }
 
 .lqd-end-chat-btn {
   width: 28px;
   height: 28px;
 }
 
 .lqd-end-chat-btn svg {
   width: 14px;
   height: 14px;
 }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
 .lqd-webchat-container,
 #lqd-webchat-container {
   height: -webkit-fill-available !important;
 }
 
 .lqd-messages {
   padding-bottom: calc(var(--input-height) + var(--safe-area-bottom) + 80px) !important;
 }
 
 .lqd-input-container {
   padding-bottom: max(12px, var(--safe-area-bottom));
 }
 
 /* Fix for full height in iOS Safari */
 html, body, #lqd-webchat-container {
   min-height: -webkit-fill-available;
 }
 
 /* Special iOS animation optimizations */
 .lqd-message,
 .lqd-message-interactive,
 .lqd-typing,
 .lqd-suggestion-button,
 .lqd-player-option,
 .lqd-date-item,
 .lqd-course-card,
 .lqd-tee-slot {
   will-change: transform;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
}

/* Fix for Android */
@supports not (-webkit-touch-callout: none) {
 .lqd-chat {
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
 }
 
 /* Special Android optimizations */
 .lqd-input-container,
 .lqd-suggestions {
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
 }
}

/* HIGH DPI / RETINA DISPLAYS */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .lqd-course-info-image img,
 .lqd-course-banner {
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }
}

/* DARK MODE SUPPORT (if needed in future) */
@media (prefers-color-scheme: dark) {
 /* Future dark mode styles can be added here */
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
 .lqd-auth-logo,
 .lqd-membership-error-icon,
 .lqd-course-info-card,
 .lqd-membership-error-content,
 .lqd-membership-error-inline,
 .lqd-confirmation-icon {
   animation: none;
 }
 
 .lqd-course-action-btn::before,
 .lqd-membership-action-btn::before,
 .lqd-form-button::before,
 .lqd-suggestion-button::before,
 .lqd-confirmation-button::before {
   display: none;
 }
 
 .lqd-course-info-card:hover .lqd-course-info-image img {
   transform: none;
 }
}

/* PRINT STYLES */
@media print {
 .lqd-webchat-container,
 #lqd-webchat-container {
   display: none;
 }
}