/**
* 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 */
}

/* 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 */
.lqd-message-interactive {
 width: 100%;
 max-width: 100%;
 align-self: center;
 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 */
.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 {
 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 - 7-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);
}

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

.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);
}

.lqd-calendar-footer {
 padding: var(--spacing);
 border-top: 1px solid var(--border-light);
 background-color: var(--surface);
}

.lqd-calendar-confirm {
 width: 100%;
 height: 50px;
 border-radius: var(--radius);
 background-color: var(--primary-color);
 color: white;
 font-weight: var(--font-weight-semibold);
 border: none;
 transition: all var(--transition);
 cursor: pointer;
 position: relative;
 overflow: hidden;
 box-shadow: var(--shadow-sm);
}

.lqd-calendar-confirm::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-calendar-confirm:hover::before {
 transform: translateX(100%);
}

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

/* 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);
}

.lqd-player-recommended {
 position: relative;
}

/* Kill the Recommended ribbon on the 4-player option */
.lqd-player-recommended::before {
 display: none !important;
}

/* ENHANCED: COURSE BROWSER WITH THUMBNAILS with premium styling */
.lqd-course-browser {
 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);
 position: relative;
}

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

/* Add scroll indicator for mobile */
.lqd-scroll-indicator {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 background-color: rgba(var(--primary-rgb), 0.15);
 border-radius: var(--radius-full);
 padding: 8px;
 z-index: 5;
 opacity: 0.7;
 transition: opacity 0.3s ease;
 animation: pulseIndicator 2s infinite;
 display: flex;
 align-items: center;
 justify-content: center;
}

@keyframes pulseIndicator {
 0%, 100% {
   transform: translateX(-50%) scale(1);
   opacity: 0.7;
 }
 50% {
   transform: translateX(-50%) scale(1.1);
   opacity: 1;
 }
}

.lqd-region-tabs {
 display: flex;
 border-bottom: 1px solid var(--border);
 background-color: var(--surface);
 position: sticky;
 top: 0;
 z-index: 5;
}

.lqd-region-tab {
 flex: 1;
 padding: 16px 8px;
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
 background: transparent;
 border: none;
 color: var(--text-secondary);
 position: relative;
 transition: all var(--transition);
 text-align: center;
 cursor: pointer;
}

.lqd-region-tab::after {
 content: '';
 position: absolute;
 bottom: -1px;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: transparent;
 transition: transform var(--transition), background-color var(--transition);
 transform: scaleX(0.3);
}

.lqd-region-tab:hover {
 color: var(--primary-color);
}

.lqd-region-tab:hover::after {
 background-color: var(--primary-light);
 transform: scaleX(0.8);
}

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

.lqd-region-tab.active::after {
 background-color: var(--primary-color);
 transform: scaleX(1);
}

.lqd-region-content {
 padding: var(--spacing-md);
 max-height: 450px;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

/* Make course browser scroll more apparent */
.lqd-region-content:after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 30px;
 background: linear-gradient(to top, var(--card-elevated), transparent);
 pointer-events: none;
 opacity: 0.8;
}

.lqd-courses-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 16px;
}

.lqd-course-card {
 display: flex;
 flex-direction: column;
 background-color: var(--surface);
 border-radius: var(--radius-lg);
 overflow: hidden;
 transition: all var(--transition);
 border: 1px solid var(--border-light);
 height: 100%;
 cursor: pointer;
 box-shadow: var(--shadow-sm);
 position: relative;
}

.lqd-course-card::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 30%;
 background: linear-gradient(to top, rgba(0,0,0,0.03), transparent);
 opacity: 0;
 transition: opacity var(--transition);
}

.lqd-course-card:hover {
 transform: translateY(-6px) scale(1.02);
 box-shadow: var(--shadow-lg);
 border-color: rgba(var(--primary-rgb), 0.2);
 z-index: 1;
}

.lqd-course-card:hover::after {
 opacity: 1;
}

.lqd-course-image {
 width: 100%;
 height: 140px;
 overflow: hidden;
 position: relative;
}

.lqd-course-image::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent 30%);
 z-index: 1;
 opacity: 0;
 transition: opacity var(--transition);
}

.lqd-course-card:hover .lqd-course-image::before {
 opacity: 1;
}

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

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

.lqd-course-info {
 padding: 14px;
 display: flex;
 flex-direction: column;
 flex: 1;
 position: relative;
}

.lqd-course-name {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-bold);
 margin: 0 0 6px 0;
 color: var(--text-primary);
 line-height: var(--line-height-tight);
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 max-height: 2.5em;
 transition: color var(--transition);
}

.lqd-course-card:hover .lqd-course-name {
 color: var(--primary-color);
}

.lqd-course-location {
 font-size: var(--font-size-xs);
 color: var(--text-secondary);
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.lqd-course-location svg {
 width: 12px;
 height: 12px;
 margin-right: 4px;
 color: var(--primary-color);
 flex-shrink: 0;
}

.lqd-course-details {
 display: flex;
 gap: 6px;
 margin-bottom: auto;
 flex-wrap: wrap;
}

.lqd-course-rating,
.lqd-course-par {
 font-size: 10px;
 color: var(--text-tertiary);
 background-color: var(--surface-hover);
 padding: 3px 8px;
 border-radius: var(--radius-full);
 white-space: nowrap;
 transition: all var(--transition);
}

.lqd-course-card:hover .lqd-course-rating,
.lqd-course-card:hover .lqd-course-par {
 background-color: rgba(var(--primary-rgb), 0.1);
 color: var(--primary-dark);
}

.lqd-course-select {
 display: none; /* Hide separate buttons - entire card is now clickable */
}

/* Course card with full-card click action */
.lqd-course-card::before {
 content: '';  /* Empty content instead of 'Select Course' */
 display: none; /* Hide it completely */
}

.lqd-course-card:hover::before {
 opacity: 0;
 transform: translateY(0);
}

.lqd-region-listing {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.lqd-region-title {
 font-size: var(--font-size);
 font-weight: var(--font-weight-bold);
 margin: 0 0 10px 0;
 color: var(--text-primary);
 display: flex;
 align-items: center;
 letter-spacing: var(--letter-spacing-tight);
}

.lqd-region-title svg {
 width: 16px;
 height: 16px;
 margin-right: 8px;
 color: var(--primary-color);
}

/* ENHANCED: TEE TIME SELECTOR with better layout and UX */
.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;
}

.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;
 white-space: normal;
 word-break: break-word;
}

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

.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);
}

/* NEW: CANCELLATION CARD styling */
.lqd-cancellation-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(239, 68, 68, 0.1),
             0 10px 25px -5px rgba(239, 68, 68, 0.15);
 margin-bottom: var(--spacing-md);
 position: relative;
}

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

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

.lqd-cancellation-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-cancellation-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: pulseCancellation 2s infinite;
}

@keyframes pulseCancellation {
 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-cancellation-icon svg {
 width: 22px;
 height: 22px;
 stroke-width: 3px;
}

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

.lqd-cancellation-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-cancellation-id {
 font-size: var(--font-size-sm);
 opacity: 0.95;
 margin-top: 4px;
 letter-spacing: 0.02em;
}

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

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

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

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

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

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

.lqd-cancellation-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-cancellation-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-cancellation-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-cancellation-button:hover::before {
 transform: translateX(100%);
}

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

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

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

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

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

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

.lqd-cancellation-secondary:hover {
 background-color: var(--surface-hover);
 border-color: var(--border-strong);
 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);
 }
}

.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);
}

.lqd-auth-form p {
 margin-top: 0;
 margin-bottom: var(--spacing-lg);
 color: var(--text-secondary);
 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;
}

.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);
}

.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 .lqd-loading {
 margin-right: var(--spacing-sm);
}

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

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

/* 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);
 }
}

/* Desktop improvements for course browser and tee times */
@media (min-width: 768px) {
 /* 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);
 }
 
 .lqd-course-title h3 {
   color: var(--text-primary) !important;
   text-shadow: none;
 }
 
 .lqd-course-subtitle {
   color: var(--text-secondary);
   text-shadow: none;
 }
 
 .lqd-course-subtitle svg {
   color: var(--primary-color);
 }
 
 .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;
 }
 
 /* Larger course cards in grid on desktop */
 .lqd-courses-grid {
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 20px;
 }
 
 /* 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 */
 .lqd-confirmation-card,
 .lqd-cancellation-card {
   max-width: 700px;
   margin-left: auto;
   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);
 }
}

/* 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);
 }

 /* IMPROVED: Course listing grid for mobile - 2 columns */
 .lqd-courses-grid {
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
 }
 
 /* IMPROVED increase course content height on mobile */
 .lqd-region-content {
   max-height: 470px !important;
 }
 
 /* IMPROVED: Course card styling for mobile */
 .lqd-course-image {
   height: 100px;
 }
 
 /* FIX: Make course titles smaller on mobile */
 .lqd-course-name {
   font-size: 12px;
   line-height: 1.2;
   -webkit-line-clamp: 2;
   max-height: 2.4em;
 }
 
 .lqd-course-info {
   padding: 10px;
 }
 
 /* Hide select course button on mobile - whole card clickable */
 .lqd-course-select {
   display: none;
 }
 
 /* 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 {
   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;
 }
 
 /* FIX: Date selector on small screens - improve layout to 4 columns and 2 rows */
 .lqd-date-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 8px;
   padding: 14px;
 }
 
 .lqd-date-item {
   padding: 10px 4px;
   min-height: 90px;
   background-color: var(--background);
   border: 1px solid var(--border-light);
 }
 
 .lqd-date-day {
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
   color: var(--primary-color);
 }
 
 .lqd-date-num {
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
 }
 
 .lqd-date-month {
   font-size: 11px;
 }
 
 /* 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;
 }
}

/* 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);
 }
}