/*
Theme Name: Luqsports Cyber-Active Performance Theme
Theme URI: https://luqsports.com.my
Author: Antigravity AI
Description: Premium cyber-active theme matching the Luqsports design language. Fits light/dark modes, featuring neon cobalt & laser crimson accents.
Version: 1.3.31
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luqsports-theme
*/

/* ==========================================================================
   Luqsports Cyber-Active Performance Design System
   Sleek Dark Mode Lab & Silver Slate Light Mode
   ========================================================================== */

/* ============================================
   CSS Variables & Design Tokens
   ============================================ */
:root {
    /* Font System */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Light Theme (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(226, 232, 240, 0.8);
    
    /* Brand Accents - Premium Active Silver System (Athletic Cobalt & Crimson) */
    --accent-primary: #1A5BA3;
    --accent-secondary: #E31E24;
    --accent-gradient: linear-gradient(135deg, #1A5BA3 0%, #0088ff 100%);
    --accent-red-gradient: linear-gradient(135deg, #E31E24 0%, #ff183c 100%);
    --glow-primary: rgba(26, 91, 163, 0.12);
    --glow-secondary: rgba(227, 30, 36, 0.12);
    --accent-light: var(--glow-primary);
    
    /* Glassmorphism System */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.04);
    
    /* Shadow Elevators */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 16px -6px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 10px 20px -10px rgba(15, 23, 42, 0.03);
    
    /* Constants */
    --nav-height: 80px;
    --container-max: 1200px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Timing & Curves (Animations Disabled for Performance) */
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
}

/* Dark Theme Overrides - Cyber Athletic Recovery Lab */
[data-theme="dark"] {
    --bg-primary: #06080c;
    --bg-secondary: #0d1017;
    --bg-tertiary: #151a24;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(255, 255, 255, 0.05);
    
    /* Glowing Laser Accents (Vibrant Cyber Cobalt & Laser Crimson) */
    --accent-primary: #0088ff;
    --accent-secondary: #ff183c;
    --accent-gradient: linear-gradient(135deg, #0088ff 0%, #00d2ff 100%);
    --accent-red-gradient: linear-gradient(135deg, #ff183c 0%, #ff527b 100%);
    --glow-primary: rgba(0, 136, 255, 0.16);
    --glow-secondary: rgba(255, 24, 60, 0.16);
    --accent-light: var(--glow-primary);
    
    /* Glassmorphism System */
    --glass-bg: rgba(13, 16, 23, 0.85);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Base Setup & Reset
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.65;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* ==========================================================================
   Internal Scrolling for Service/Agent Lists
   ========================================================================== */
.latepoint-w .step-services-w,
.latepoint-w .step-agents-w,
.latepoint-w .step-locations-w {
    height: 550px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px;
}

/* Custom internal scrollbar for a native app feel */
.latepoint-w .step-services-w::-webkit-scrollbar,
.latepoint-w .step-agents-w::-webkit-scrollbar,
.latepoint-w .step-locations-w::-webkit-scrollbar {
    width: 6px;
}
.latepoint-w .step-services-w::-webkit-scrollbar-track,
.latepoint-w .step-agents-w::-webkit-scrollbar-track,
.latepoint-w .step-locations-w::-webkit-scrollbar-track {
    background: transparent;
}
.latepoint-w .step-services-w::-webkit-scrollbar-thumb,
.latepoint-w .step-agents-w::-webkit-scrollbar-thumb,
.latepoint-w .step-locations-w::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* ==========================================================================
   Mobile: Auto height for service/agent lists so Back button stays close
   ========================================================================== */
@media (max-width: 768px) {
    .latepoint-w .step-services-w,
    .latepoint-w .step-agents-w,
    .latepoint-w .step-locations-w {
        height: auto !important;
        min-height: unset !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Selection highlight */
::selection {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p {
    color: var(--text-secondary);
    font-size: 0.98rem;
    transition: color var(--transition-normal);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Common Utility Classes
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 90px 0;
    position: relative;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.section-badge i {
    font-size: 0.85rem;
    color: var(--accent-secondary);
}

.section-title {
    margin-bottom: 16px;
}

.section-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.text-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-red {
    background: var(--accent-red-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-center { text-align: center; }

/* ============================================
   Buttons Styling
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.94rem;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: var(--accent-red-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px var(--glow-secondary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(227, 30, 36, 0.35);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 22px rgba(255, 42, 95, 0.35);
}

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

.btn-secondary:hover {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--accent-primary);
    color: var(--accent-primary);
}

.btn-outline:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--glow-primary);
}

/* Custom Nav buttons */
.btn-nav {
    padding: 9px 18px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--accent-red-gradient);
    color: #ffffff;
    box-shadow: 0 4px 10px var(--glow-secondary);
}

.btn-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(227, 30, 36, 0.25);
}

.btn-nav-outline {
    padding: 9px 18px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-nav-outline:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

/* ============================================
   Glassmorphism Card System
   ============================================ */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

/* ============================================
   Header & Navigation
   ============================================ */
.navbar {
    height: var(--nav-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
}

.nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img,
.logo img,
.custom-logo-link img,
.custom-logo {
    height: 44px !important;
    width: auto !important;
    max-height: 44px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.nav-links {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    padding: 5px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}

.nav-links ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding: 8px 18px;
    border-radius: calc(var(--radius-md) - 3px);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a.active,
.nav-links li.current-menu-item > a {
    color: #ffffff;
    background: var(--accent-gradient);
    box-shadow: 0 4px 10px var(--glow-primary);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.desktop-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 700;
    font-size: 0.8rem;
}

.control-btn:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 10px var(--glow-primary);
}

.menu-toggle {
    display: none;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
}

.mobile-menu-btns {
    display: none;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    animation: floatBlob 20s ease-in-out infinite;
}

.hero-blob-1 {
    width: 500px;
    height: 500px;
    background: var(--accent-primary);
    top: -100px;
    right: -100px;
}

.hero-blob-2 {
    width: 400px;
    height: 400px;
    background: var(--accent-secondary);
    bottom: -100px;
    left: -100px;
    animation-delay: -10s;
}

@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-container {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--glow-primary);
    color: var(--accent-primary);
    border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.hero-badge i {
    color: var(--accent-secondary);
}

.hero-title {
    margin-bottom: 20px;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.hero-stat {
    text-align: left;
}

.hero-stat-number {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.hero-stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 16px;
    align-items: stretch;
}

.hero-video-wrapper {
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-stack-img {
    width: 100%;
    height: calc(50% - 8px);
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-slow);
}

.hero-stack-img:hover {
    transform: scale(1.02);
}

.hero-image-badge {
    position: absolute;
    bottom: -12px;
    left: -16px;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 20;
    transition: transform var(--transition-normal);
}

.hero-image-badge:hover {
    transform: scale(1.02);
}

.hero-image-badge-icon {
    width: 38px;
    height: 38px;
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 4px 10px var(--glow-primary);
}

.hero-image-badge-text h4 {
    font-size: 0.88rem;
    margin-bottom: 1px;
}

.hero-image-badge-text span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* ============================================
   Partners & Collaboration Showcase
   ============================================ */
.partners-section {
    background: var(--bg-secondary);
    padding: 60px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.partners-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.partners-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
}

.partner-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 24px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 100px;
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.partner-logo {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.6);
    transition: all var(--transition-normal);
    z-index: 2;
}

/* Hover state for partner card */
.partner-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 0 25px var(--glow-primary);
}

[data-theme="dark"] .partner-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px var(--glow-primary);
    border-color: var(--accent-primary);
}

.partner-card:hover .partner-logo {
    filter: grayscale(0) opacity(1);
    transform: scale(1.08);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .partners-section {
        padding: 40px 0;
    }
    
    .partners-grid {
        gap: 16px;
    }
    
    .partner-card {
        min-width: 140px;
        padding: 16px 24px;
        height: 80px;
    }
    
    .partner-logo {
        height: 36px;
    }
}

/* ============================================
   Services Section Grid
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    padding: 32px 24px;
    text-align: center;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--glow-primary);
    color: var(--accent-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 20px;
    transition: all var(--transition-normal);
}

.service-card:hover .service-icon {
    background: var(--accent-gradient);
    color: #ffffff;
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 4px 15px var(--glow-primary);
}

.service-card h3 {
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 0.88rem;
}

.service-link i {
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.service-card:hover .service-link i {
    transform: translateX(4px);
}

/* ============================================
   Advantages Section
   ============================================ */
.advantages-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
}

.advantages-image {
    position: relative;
}

.advantages-image img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.advantages-list {
    display: grid;
    gap: 16px;
}

.advantage-item {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}

.advantage-item:hover {
    background: var(--glass-bg);
    transform: translateX(6px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.advantage-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px var(--glow-primary);
}

.advantage-item:nth-child(even) .advantage-icon {
    background: var(--accent-red-gradient);
    box-shadow: 0 4px 10px var(--glow-secondary);
}

.advantage-content h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.advantage-content p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   Testimonials Section
   ============================================ */
.testimonials-section {
    background: var(--bg-secondary);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--bg-primary);
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.testimonial-quote {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 2.8rem;
    color: var(--bg-tertiary);
    font-family: serif;
    line-height: 1;
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    color: #eab308;
}

.testimonial-rating i {
    font-size: 0.9rem;
}

.testimonial-text {
    font-size: 0.94rem;
    line-height: 1.65;
    margin-bottom: 24px;
    color: var(--text-secondary);
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
}

.testimonial-card:nth-child(even) .testimonial-avatar {
    background: var(--accent-red-gradient);
}

.testimonial-author-info h4 {
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.testimonial-author-info span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ============================================
   CTA Section
   ============================================ */
.cta-section {
    padding: 80px 0;
}

.cta-card {
    background: var(--accent-gradient);
    padding: 64px;
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    animation: ctaPulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.7; }
}

.cta-card h2 {
    color: #ffffff;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.cta-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    margin-bottom: 28px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.cta-card .btn {
    background: #ffffff;
    color: var(--accent-primary);
    font-weight: 700;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-card .btn:hover {
    background: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Footer Section
   ============================================ */
.footer {
    background: #06070a;
    padding: 80px 0 32px;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .footer {
    background: #0b0f19;
    color: #cbd5e1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-brand p {
    margin-top: 18px;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.65;
}

.footer-title {
    font-size: 0.94rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #94a3b8;
    font-size: 0.88rem;
    transition: all var(--transition-fast);
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
    display: inline-block;
}

.footer-contact-item {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #94a3b8;
}

.footer-contact-item i {
    color: var(--accent-primary);
    font-size: 0.95rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.copyright {
    font-size: 0.82rem;
    color: #64748b;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all var(--transition-normal);
}

.social-link:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--glow-primary);
}

/* ============================================
   Page Header (Sub-pages)
   ============================================ */
.page-header {
    padding-top: calc(var(--nav-height) + 60px);
    padding-bottom: 60px;
    text-align: center;
    position: relative;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.page-header h1 {
    margin-bottom: 12px;
}

.page-header p {
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   Forms & Contact Elements
   ============================================ */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    outline: none;
    transition: all var(--transition-fast);
}

.form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-panel {
    padding: 36px;
}

.contact-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-icon {
    width: 44px;
    height: 44px;
    background: var(--glow-primary);
    color: var(--accent-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.contact-item:nth-child(2) .contact-icon {
    background: var(--glow-secondary);
    color: var(--accent-secondary);
}

.contact-text h4 {
    font-size: 0.96rem;
    margin-bottom: 4px;
}

.contact-text p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.contact-map-wrapper {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.contact-map-iframe {
    width: 100%;
    height: 100%;
}

/* ============================================
   Responsive Layout & Drawer Menu
   ============================================ */

/* Desktop / Tablet Breakpoint (1024px) */
@media (max-width: 1024px) {
    .section {
        padding: 72px 0;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .hero-content {
        max-width: 680px;
        margin: 0 auto;
    }
    
    .hero-stats {
        justify-content: center;
        gap: 32px;
    }
    
    .hero-media {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .advantages-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .advantages-image {
        max-width: 440px;
        margin: 0 auto;
        order: -1;
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Tablet / Mobile Breakpoint (768px) */
@media (max-width: 768px) {
    .section {
        padding: 56px 0;
    }
    
    .page-header {
        padding-top: calc(var(--nav-height) + 32px);
        padding-bottom: 40px;
    }
    
    .navbar {
        height: 70px;
    }
    
    .logo-img,
    .logo img,
    .custom-logo {
        height: 38px;
        max-height: 38px;
    }
    
    .desktop-controls {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    /* Mobile Drawer Backdrop Overlay */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(6, 7, 10, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
    }

    body.menu-open {
        overflow: hidden; /* Prevent page scrolling under mobile menu */
    }

    body.menu-open::after {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Fullscreen Mobile Drawer Menu */
    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: var(--bg-primary); /* Solid color instead of glassmorphism */
        padding: 90px 24px 32px;
        gap: 12px;
        z-index: 999;
        border-radius: 0;
        border: none;
        border-left: 1px solid var(--glass-border);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
        transition: right var(--transition-slow);
    }
    
    .menu-open .nav-links {
        right: 0;
    }
    
    .nav-links ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
    
    .nav-links li {
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-links a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 18px;
        font-size: 1.05rem;
        font-weight: 700;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text-secondary);
        text-decoration: none;
    }

    .nav-links li:last-child {
        border-bottom: none;
    }
    
    .nav-link.active {
        color: var(--accent-primary);
    }
    
    .mobile-menu-btns {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
    }
    
    .mobile-menu-btns .btn-nav, 
    .mobile-menu-btns .btn-nav-outline {
        width: 100%;
        padding: 12px;
        font-size: 0.94rem;
        font-weight: 700;
        justify-content: center;
    }
    
    .mobile-controls-row {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }
    
    /* Hamburger toggle animated lines */
    .menu-toggle {
        z-index: 1001;
    }
    
    .menu-open .menu-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    
    .menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-open .menu-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    
    /* Hero Adjustments */
    .hero {
        padding-top: 90px;
        padding-bottom: 32px;
    }
    
    .hero-subtitle {
        font-size: 1.05rem;
        margin-bottom: 24px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    
    .hero-stat {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-media {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .hero-video-wrapper {
        aspect-ratio: 16 / 10;
        height: auto;
    }
    
    .hero-image-stack {
        flex-direction: row;
        height: auto;
        gap: 12px;
    }
    
    .hero-stack-img {
        width: calc(50% - 6px);
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    .hero-image-badge {
        position: static;
        width: 100%;
        transform: none !important;
        margin-top: 12px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* Extra Small Devices Breakpoint (480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .hero-image-badge {
        padding: 10px 14px;
    }
    
    .hero-image-badge-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .hero-image-badge-text h4 {
        font-size: 0.8rem;
    }
    
    .hero-image-badge-text span {
        font-size: 0.7rem;
    }
    
    .advantage-item,
    .testimonial-card {
        padding: 24px 16px;
    }
}

/* ============================================
   WordPress Core & Content Overrides
   ============================================ */
.post-content {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}

.post-title {
    margin-bottom: 20px;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.post-meta {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
}

.post-meta a {
    color: var(--accent-primary);
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 20px auto;
}

.alignright {
    float: right;
    margin: 20px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 20px 20px 20px 0;
}

blockquote {
    border-left: 4px solid var(--accent-primary);
    padding: 15px 20px;
    background: var(--bg-secondary);
    font-style: italic;
    margin: 20px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ==========================================================================
   LatePoint Dashboard Overrides (Luqsports Theme)
   ========================================================================== */

/* 0. Remove outer card wrapper on dashboard pages */
.post-content:has(.latepoint-w) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 1. Global CSS Variable Injection for LatePoint */
:root {
    --lp-primary-color: #0047b3;
    --os-primary-color: #0047b3;
    --lp-border-radius: 12px;
    --os-border-radius: 12px;
}

/* 2. Layout Structure & Wrappers */
.latepoint-w,
.wp-block-latepoint-customer-dashboard,
.latepoint-app-wrap,
.os-app-wrap,
.latepoint-customer-dashboard-w,
.os-customer-dashboard-w {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: inherit !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Sidebar Layout using Flexbox */
.latepoint-tabs-w {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

/* Pill nav wrapper — desktop: transparent flex column; mobile: horizontal scroll row */
.lp-mobile-pill-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
}

/* Sidebar Menu (Triggers) */
.latepoint-tab-triggers.customer-dashboard-tabs,
.os-customer-dashboard-tabs {
    display: flex !important;
    flex-direction: column !important;
    min-width: 240px !important;
    width: 240px !important;
    background: var(--glass-bg, rgba(255, 255, 255, 0.03)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06)) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    padding: 12px !important;
    gap: 2px !important;
    position: sticky !important;
    top: 100px !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a,
.os-customer-dashboard-tabs a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: var(--text-secondary, #64748b) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-bottom: none !important;
    border-left: none !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Left accent indicator bar */
.latepoint-tab-triggers.customer-dashboard-tabs a::before,
.os-customer-dashboard-tabs a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) scaleY(0) !important;
    width: 3px !important;
    height: 60% !important;
    border-radius: 0 4px 4px 0 !important;
    background: linear-gradient(180deg, #0088ff, #0047b3) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a:hover,
.os-customer-dashboard-tabs a:hover {
    background: rgba(0, 136, 255, 0.06) !important;
    color: var(--text-primary, #f8fafc) !important;
    transform: translateX(2px) !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a:hover::before,
.os-customer-dashboard-tabs a:hover::before {
    transform: translateY(-50%) scaleY(0.5) !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a.active,
.os-customer-dashboard-tabs a.active {
    background: rgba(0, 136, 255, 0.1) !important;
    color: var(--accent-primary, #1A5BA3) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border-left: none !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a.active span,
.os-customer-dashboard-tabs a.active span {
    color: var(--accent-primary, #1A5BA3) !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a.active::before,
.os-customer-dashboard-tabs a.active::before {
    transform: translateY(-50%) scaleY(1) !important;
    box-shadow: 0 0 12px rgba(0, 136, 255, 0.4) !important;
}

/* Tab Link Icon Styling */
.latepoint-tab-triggers.customer-dashboard-tabs a i,
.os-customer-dashboard-tabs a i {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    opacity: 0.5 !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a:hover i,
.os-customer-dashboard-tabs a:hover i {
    opacity: 0.8 !important;
    color: var(--accent-primary, #0088ff) !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a.active i,
.os-customer-dashboard-tabs a.active i {
    opacity: 1 !important;
    color: var(--accent-primary, #1A5BA3) !important;
    filter: none !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a span,
.os-customer-dashboard-tabs a span {
    flex: 1 !important;
}

/* Active tab indicator (left bar for previous CSS) */
.latepoint-tab-triggers.customer-dashboard-tabs a.active:before {
    background: linear-gradient(180deg, #0088ff, #0047b3) !important;
}

/* Content Area Expansion */
.latepoint-tab-content,
.os-customer-dashboard-content {
    flex: 1 !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Responsive Sidebar Mobile Fallback */
@media (max-width: 768px) {
    /* Stack the whole dashboard vertically on mobile */
    .latepoint-tabs-w {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* On mobile: sidebar becomes a full-width top panel */
    .latepoint-tab-triggers.customer-dashboard-tabs,
    .os-customer-dashboard-tabs {
        width: 100% !important;
        min-width: 100% !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        padding: 16px 12px 12px 12px !important;
        gap: 0 !important;
        border-radius: 20px !important;
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        margin-bottom: 18px !important;
    }

    /* Sidebar avatar: switch to horizontal row on mobile */
    .lp-custom-sidebar-avatar-w {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 0 4px 14px 4px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.07)) !important;
    }

    .lp-custom-sidebar-avatar {
        width: 58px !important;
        height: 58px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .lp-custom-sidebar-username {
        font-size: 16px !important;
        text-align: left !important;
    }

    /* Pill nav: horizontal scrollable row on mobile */
    .lp-mobile-pill-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 12px 0 4px 0 !important;
        margin: 0 !important;
    }

    .lp-mobile-pill-nav::-webkit-scrollbar {
        display: none !important;
    }

    @media (max-width: 768px) {
    /* Hide the main site footer ONLY on the booking page */
    body.has-latepoint .footer,
    body.has-latepoint footer,
    body.has-latepoint .lp-mobile-bottom-nav {
        display: none !important;
    }
}

    /* Tab links inside pill nav */
    .lp-mobile-pill-nav a,
    .latepoint-tab-triggers.customer-dashboard-tabs a,
    .os-customer-dashboard-tabs a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 9px 16px !important;
        border-radius: 30px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        transform: none !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    .latepoint-tab-triggers.customer-dashboard-tabs a:hover,
    .os-customer-dashboard-tabs a:hover {
        transform: none !important;
    }

    /* Hide the vertical accent bar on mobile */
    .latepoint-tab-triggers.customer-dashboard-tabs a::before,
    .os-customer-dashboard-tabs a::before,
    .latepoint-tab-triggers.customer-dashboard-tabs a.active::before,
    .os-customer-dashboard-tabs a.active::before {
        display: none !important;
    }

    /* Logout button on mobile: compact inline link */
    .lp-custom-sidebar-profile {
        padding: 10px 4px 0 4px !important;
        margin: 4px 0 0 0 !important;
        border-top: 1px solid var(--border-color, rgba(0,0,0,0.07)) !important;
        border-left: none !important;
        display: block !important;
    }

    .lp-custom-logout-btn {
        padding: 9px 16px !important;
        font-size: 13px !important;
        border-radius: 30px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        width: auto !important;
        display: inline-flex !important;
    }
}

/* 3. Form Inputs & Controls */
.latepoint-app-wrap input[type="text"],
.latepoint-app-wrap input[type="password"],
.latepoint-app-wrap input[type="email"],
.latepoint-app-wrap select,
.latepoint-app-wrap textarea,
.os-app-wrap input[type="text"],
.os-app-wrap input[type="password"],
.os-app-wrap input[type="email"],
.os-app-wrap select,
.os-app-wrap textarea,
.os-form-control,
.latepoint-form-control {
    background: var(--bg-tertiary, #f1f5f9) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-primary, #0f172a) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
}

[data-theme="dark"] .latepoint-app-wrap input,
[data-theme="dark"] .os-app-wrap input,
[data-theme="dark"] .os-form-control {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.latepoint-app-wrap input:focus,
.os-app-wrap input:focus,
.os-form-control:focus {
    border-color: #0047b3 !important;
    box-shadow: 0 0 0 3px rgba(0, 71, 179, 0.2) !important;
    outline: none !important;
}

.latepoint-tab-triggers.customer-dashboard-tabs a.active:before,
.os-customer-dashboard-tabs a.active::before {
    background: var(--accent-gradient, #1A5BA3) !important; /* Premium Cobalt Blue Gradient for active tab indicator */
}

/* 4. Welcome Header Spacing */
.latepoint-w > h4 {
    margin-bottom: 30px !important;
    font-size: 20px !important;
    color: var(--text-primary) !important;
}

/* 5. Buttons (Primary & Secondary) */
.latepoint-app-wrap .latepoint-btn,
.latepoint-app-wrap .os-btn-primary,
.os-app-wrap .os-btn-primary {
    background: linear-gradient(135deg, #0047b3 0%, #002255 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 71, 179, 0.3) !important;
}

.latepoint-app-wrap .latepoint-btn:hover,
.latepoint-app-wrap .os-btn-primary:hover,
.os-app-wrap .os-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 71, 179, 0.4) !important;
}

.latepoint-app-wrap .os-btn-secondary,
.os-app-wrap .os-btn-secondary {
    background: transparent !important;
    color: #0047b3 !important;
    border: 2px solid #0047b3 !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.latepoint-app-wrap .os-btn-secondary:hover,
.os-app-wrap .os-btn-secondary:hover {
    background: rgba(0, 71, 179, 0.1) !important;
}

/* 5. Typography and Labels */
.latepoint-app-wrap label,
.os-app-wrap label,
.os-app-wrap .os-label {
    color: var(--text-secondary, #64748b) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
}

.latepoint-app-wrap h1, .latepoint-app-wrap h2, .latepoint-app-wrap h3,
.os-app-wrap h1, .os-app-wrap h2, .os-app-wrap h3 {
    color: var(--text-primary, #0f172a) !important;
    font-family: inherit !important;
}

[data-theme="dark"] .latepoint-app-wrap label,
[data-theme="dark"] .os-app-wrap label,
[data-theme="dark"] .os-app-wrap h1,
[data-theme="dark"] .os-app-wrap h2,
[data-theme="dark"] .os-app-wrap h3 {
    color: #f8fafc !important;
}

/* 6. Sidebar Sign Out Button */
/* Sign Out Profile Area — positioned at bottom of sidebar */
.lp-custom-sidebar-profile {
    padding: 8px 4px 4px !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.06)) !important;
    border-bottom: none !important;
}

.lp-custom-logout-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted, #64748b) !important;
    text-decoration: none !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    background: transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
    justify-content: flex-start !important;
    border: none !important;
}

.lp-custom-logout-btn:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    box-shadow: none !important;
    transform: none !important;
}

.lp-custom-logout-btn i {
    font-size: 15px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.lp-custom-logout-btn:hover i {
    opacity: 1 !important;
    color: #ef4444 !important;
}

/* 7. New Appointment Buttons & Tiles */
.latepoint-w .new-booking-tile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: rgba(0, 71, 179, 0.03) !important;
    border: 2px dashed #0047b3 !important;
    border-radius: var(--radius-lg) !important;
    min-height: 180px !important;
    color: #0047b3 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.latepoint-w .new-booking-tile:hover {
    background: rgba(0, 71, 179, 0.08) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 71, 179, 0.15) !important;
}

.latepoint-w .new-booking-tile i {
    font-size: 32px !important;
    margin-bottom: 5px !important;
}

.latepoint-w .latepoint-book-button, 
.latepoint-w .os_trigger_booking:not(.new-booking-tile) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0047b3 0%, #002255 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 71, 179, 0.3) !important;
    transition: all 0.3s ease !important;
}

.latepoint-w .latepoint-book-button:hover, 
.latepoint-w .os_trigger_booking:not(.new-booking-tile):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 71, 179, 0.4) !important;
    color: #ffffff !important;
}

/* 8. Collapsible Sections (Past & Cancelled) */
.latepoint-w .latepoint-section-heading-w.is-collapsible {
    cursor: pointer !important;
    position: relative !important;
    user-select: none !important;
    transition: opacity 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background: rgba(0, 71, 179, 0.03) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 20px !important;
}

.latepoint-w .latepoint-section-heading-w.is-collapsible:hover {
    background: rgba(0, 71, 179, 0.08) !important;
}

.latepoint-w .latepoint-section-heading-w.is-collapsible::after {
    content: '\f107' !important; /* FontAwesome angle-down */
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    margin-left: auto !important;
    transition: transform 0.3s ease !important;
    font-size: 18px !important;
    color: var(--text-secondary) !important;
}

.latepoint-w .latepoint-section-heading-w.is-collapsible.is-collapsed::after {
    transform: rotate(-90deg) !important;
}

.latepoint-w .latepoint-section-heading-w.is-collapsible h5 {
    margin: 0 !important;
}

.latepoint-w .latepoint-section-heading-w.is-collapsible .heading-extra {
    margin-left: 15px !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   9. LatePoint Dark Mode Overrides
   ========================================================================== */

/* --- Booking Tiles (Appointment Cards) --- */
[data-theme="dark"] .latepoint-w .customer-booking {
    background: var(--bg-tertiary, #151a24) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.05)) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .customer-booking-service-name {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .customer-booking-datetime {
    color: var(--text-secondary, #94a3b8) !important;
}

[data-theme="dark"] .latepoint-w .customer-booking-info-row .booking-info-label {
    color: var(--text-muted, #64748b) !important;
}

[data-theme="dark"] .latepoint-w .customer-booking-info-row .booking-info-value {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .customer-booking-bottom-actions .latepoint-btn-outline {
    color: var(--accent-primary, #0088ff) !important;
    border-color: var(--accent-primary, #0088ff) !important;
    background: transparent !important;
}

[data-theme="dark"] .latepoint-w .customer-booking-bottom-actions .latepoint-btn-outline:hover {
    background: rgba(0, 136, 255, 0.1) !important;
}

/* --- Order Tiles --- */
[data-theme="dark"] .latepoint-w .customer-order {
    background: var(--bg-tertiary, #151a24) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.05)) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .customer-order-confirmation {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .customer-order-datetime {
    color: var(--text-secondary, #94a3b8) !important;
}

[data-theme="dark"] .latepoint-w .customer-order-bottom-actions .latepoint-btn-outline {
    color: var(--accent-primary, #0088ff) !important;
    border-color: var(--accent-primary, #0088ff) !important;
    background: transparent !important;
}

/* --- Price Breakdown (inside order tiles) --- */
[data-theme="dark"] .latepoint-w .summary-price-item-w .spi-name,
[data-theme="dark"] .latepoint-w .summary-price-item-w .spi-price {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .summary-price-item-w.spi-total {
    border-top-color: var(--border-color, rgba(255,255,255,0.1)) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .summary-box-heading .sbh-item {
    color: var(--text-muted, #64748b) !important;
}

[data-theme="dark"] .latepoint-w .summary-box-heading .sbh-line {
    background-color: rgba(255,255,255,0.05) !important;
}

[data-theme="dark"] .latepoint-w .pb-heading,
[data-theme="dark"] .latepoint-w .pb-heading .pbh-label {
    color: var(--text-muted, #64748b) !important;
}

[data-theme="dark"] .latepoint-w .pb-heading .pbh-line {
    background-color: rgba(255,255,255,0.05) !important;
}

/* --- Form Inputs (Profile / Password tab) --- */
[data-theme="dark"] .latepoint-w input[type="text"],
[data-theme="dark"] .latepoint-w input[type="password"],
[data-theme="dark"] .latepoint-w input[type="email"],
[data-theme="dark"] .latepoint-w input[type="tel"],
[data-theme="dark"] .latepoint-w input[type="number"],
[data-theme="dark"] .latepoint-w select,
[data-theme="dark"] .latepoint-w textarea,
[data-theme="dark"] .latepoint-w .os-form-control,
[data-theme="dark"] .latepoint-w .latepoint-form-control {
    background: var(--bg-tertiary, #151a24) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w input::placeholder,
[data-theme="dark"] .latepoint-w textarea::placeholder {
    color: var(--text-muted, #64748b) !important;
}

[data-theme="dark"] .latepoint-w input:focus,
[data-theme="dark"] .latepoint-w select:focus,
[data-theme="dark"] .latepoint-w textarea:focus,
[data-theme="dark"] .latepoint-w .os-form-control:focus {
    border-color: var(--accent-primary, #0088ff) !important;
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15) !important;
}

/* --- Labels, Headings, and General Text --- */
[data-theme="dark"] .latepoint-w label,
[data-theme="dark"] .latepoint-w .os-label,
[data-theme="dark"] .latepoint-w .os-form-group label {
    color: var(--text-secondary, #94a3b8) !important;
}

[data-theme="dark"] .latepoint-w h4,
[data-theme="dark"] .latepoint-w h5,
[data-theme="dark"] .latepoint-w h6,
[data-theme="dark"] .latepoint-w .latepoint-section-heading {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-w .heading-extra {
    color: var(--text-muted, #64748b) !important;
}

/* --- Customer Password Section --- */
[data-theme="dark"] .latepoint-w .customer-password-form-w h5 {
    color: var(--text-primary, #f8fafc) !important;
}

/* --- Booking Tiles Grid --- */
[data-theme="dark"] .latepoint-w .customer-bookings-tiles,
[data-theme="dark"] .latepoint-w .customer-orders-tiles {
    color: var(--text-primary, #f8fafc) !important;
}

/* --- New Booking Tile (dashed) --- */
[data-theme="dark"] .latepoint-w .new-booking-tile {
    border-color: var(--accent-primary, #0088ff) !important;
    background: rgba(0, 136, 255, 0.03) !important;
    color: var(--accent-primary, #0088ff) !important;
}

[data-theme="dark"] .latepoint-w .new-booking-tile:hover {
    background: rgba(0, 136, 255, 0.08) !important;
}

/* --- Messages --- */
[data-theme="dark"] .latepoint-w .latepoint-message-info,
[data-theme="dark"] .latepoint-w .latepoint-message {
    background: var(--bg-tertiary, #151a24) !important;
    color: var(--text-primary, #f8fafc) !important;
    border-color: var(--border-color, rgba(255,255,255,0.05)) !important;
}

/* --- Collapsible Section Heading in Dark --- */
[data-theme="dark"] .latepoint-w .latepoint-section-heading-w.is-collapsible {
    background: rgba(0, 136, 255, 0.05) !important;
}

[data-theme="dark"] .latepoint-w .latepoint-section-heading-w.is-collapsible:hover {
    background: rgba(0, 136, 255, 0.1) !important;
}

/* --- LatePoint Links --- */
[data-theme="dark"] .latepoint-w a {
    color: var(--accent-primary, #0088ff) !important;
}

[data-theme="dark"] .latepoint-w .latepoint-tab-triggers.customer-dashboard-tabs a {
    color: var(--text-secondary, #94a3b8) !important;
}

[data-theme="dark"] .latepoint-w .latepoint-tab-triggers.customer-dashboard-tabs a:hover {
    color: var(--text-primary, #f8fafc) !important;
    background: rgba(0, 136, 255, 0.05) !important;
}

[data-theme="dark"] .latepoint-w .latepoint-tab-triggers.customer-dashboard-tabs a.active,
[data-theme="dark"] .os-customer-dashboard-tabs a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0047b3 0%, #002255 100%) !important;
}

[data-theme="dark"] .latepoint-w .latepoint-tab-triggers.customer-dashboard-tabs a.active span,
[data-theme="dark"] .os-customer-dashboard-tabs a.active span {
    color: #ffffff !important;
}

[data-theme="dark"] .latepoint-w .latepoint-tab-triggers.customer-dashboard-tabs a.active i,
[data-theme="dark"] .os-customer-dashboard-tabs a.active i {
    color: var(--accent-primary, #0088ff) !important;
    filter: drop-shadow(0 0 6px rgba(0, 136, 255, 0.4)) !important;
}

[data-theme="dark"] .latepoint-w .latepoint-tab-triggers.customer-dashboard-tabs a.active::before,
[data-theme="dark"] .os-customer-dashboard-tabs a.active::before {
    box-shadow: 0 0 12px rgba(255, 24, 60, 0.5) !important;
}

/* --- Checkbox / Terms Text --- */
[data-theme="dark"] .latepoint-w .os-form-group span,
[data-theme="dark"] .latepoint-w .os-form-group a {
    color: var(--text-secondary, #94a3b8) !important;
}

/* --- Lightbox / Summary Popup in Dark --- */
[data-theme="dark"] .latepoint-lightbox-w .latepoint-lightbox-i {
    background: var(--bg-secondary, #0d1017) !important;
    color: var(--text-primary, #f8fafc) !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.05)) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .manage-booking-inner,
[data-theme="dark"] .latepoint-lightbox-w .manage-order-wrapper,
[data-theme="dark"] .latepoint-lightbox-w .manage-booking-wrapper {
    background-color: var(--bg-secondary, #0d1017) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .manage-booking-inner::before {
    background-color: var(--bg-secondary, #0d1017) !important;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 0) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .summary-box .sbc-big-item,
[data-theme="dark"] .latepoint-lightbox-w .full-summary-number strong,
[data-theme="dark"] .latepoint-lightbox-w .fsoi-main-wrapper .fsoi-main strong {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .summary-box .sbc-highlighted-item,
[data-theme="dark"] .latepoint-lightbox-w .summary-box .sbc-sub-item,
[data-theme="dark"] .latepoint-lightbox-w .summary-box .sbc-main-item,
[data-theme="dark"] .latepoint-lightbox-w .full-summary-number,
[data-theme="dark"] .latepoint-lightbox-w .summary-box-heading .sbh-item {
    color: var(--text-secondary, #94a3b8) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .booking-full-summary-actions .booking-summary-action-btn {
    color: var(--text-primary, #f8fafc) !important;
    border-color: var(--border-color, rgba(255,255,255,0.2)) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .summary-price-item-w .spi-name,
[data-theme="dark"] .latepoint-lightbox-w .summary-price-item-w .spi-price {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="dark"] .latepoint-lightbox-w .summary-price-item-w.spi-total {
    border-top-color: rgba(255,255,255,0.1) !important;
}

/* Force Lightbox Close Button to appear globally and be positioned inside the white box */
body .latepoint-lightbox-w .latepoint-lightbox-i {
    position: relative !important;
}

body .latepoint-lightbox-w .latepoint-lightbox-close {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
    color: var(--text-primary, #333) !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
}

body .latepoint-lightbox-w .latepoint-lightbox-close i {
    color: var(--text-primary, #333) !important;
    font-size: 20px !important;
}

html[data-theme="dark"] body .latepoint-lightbox-w .latepoint-lightbox-close,
html[data-theme="dark"] body .latepoint-lightbox-w .latepoint-lightbox-close i {
    color: #fff !important;
}

/* ==========================================================================
   10. Premium Sports Massage Booking Wizard Redesign (Luqsports Active System)
   ========================================================================== */

/* Active glowing background radial gradient blobs specifically on booking and dashboard pages */
body:has(.latepoint-booking-form-element),
body:has(.os-booking-form-element),
body:has(.latepoint-customer-dashboard-w),
body:has(.os-customer-dashboard-w) {
    position: relative;
}

body:has(.latepoint-booking-form-element)::before,
body:has(.os-booking-form-element)::before,
body:has(.latepoint-customer-dashboard-w)::before,
body:has(.os-customer-dashboard-w)::before {
    content: '' !important;
    position: fixed !important;
    top: -15% !important;
    left: -15% !important;
    width: 70vw !important;
    height: 70vw !important;
    background: radial-gradient(circle, rgba(26, 91, 163, 0.05) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

body:has(.latepoint-booking-form-element)::after,
body:has(.os-booking-form-element)::after,
body:has(.latepoint-customer-dashboard-w)::after,
body:has(.os-customer-dashboard-w)::after {
    content: '' !important;
    position: fixed !important;
    bottom: -15% !important;
    right: -15% !important;
    width: 60vw !important;
    height: 60vw !important;
    background: radial-gradient(circle, rgba(0, 136, 255, 0.03) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

html[data-theme="dark"] body:has(.latepoint-booking-form-element)::before,
html[data-theme="dark"] body:has(.os-booking-form-element)::before,
html[data-theme="dark"] body:has(.latepoint-customer-dashboard-w)::before,
html[data-theme="dark"] body:has(.os-customer-dashboard-w)::before {
    background: radial-gradient(circle, rgba(0, 136, 255, 0.07) 0%, transparent 70%) !important;
}

html[data-theme="dark"] body:has(.latepoint-booking-form-element)::after,
html[data-theme="dark"] body:has(.os-booking-form-element)::after,
html[data-theme="dark"] body:has(.latepoint-customer-dashboard-w)::after,
html[data-theme="dark"] body:has(.os-customer-dashboard-w)::after {
    background: radial-gradient(circle, rgba(227, 30, 36, 0.03) 0%, transparent 70%) !important;
}

/* Main Booking Form Element Container (Premium Glassmorphism) */
.latepoint-w .latepoint-booking-form-element,
.os-booking-form-element {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-body) !important;
    overflow: hidden !important;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

/* Left Panel (Side Description / Step Info) */
.latepoint-w .latepoint-side-panel,
.os-side-panel {
    background: rgba(255, 255, 255, 0.02) !important;
    border-right: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    padding: 30px !important;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

html[data-theme="dark"] body .latepoint-w .latepoint-side-panel,
html[data-theme="dark"] body .os-side-panel {
    background: rgba(0, 0, 0, 0.15) !important;
}

.latepoint-w .latepoint-side-panel .latepoint-desc-title,
.os-side-panel .latepoint-desc-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px !important;
}

.latepoint-w .latepoint-side-panel .latepoint-desc-content,
.os-side-panel .latepoint-desc-content {
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}

.latepoint-w .latepoint-side-panel .latepoint-questions,
.os-side-panel .latepoint-questions {
    color: var(--text-muted) !important;
    border-top: 1px solid var(--border-color) !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
}

.latepoint-w .latepoint-side-panel .latepoint-questions a,
.os-side-panel .latepoint-questions a {
    color: var(--accent-primary) !important;
    font-weight: 600 !important;
}

.latepoint-w .latepoint-side-panel .latepoint-desc-media.svg-w svg {
    filter: var(--svg-filter, none) !important;
}
[data-theme="dark"] .latepoint-w .latepoint-side-panel .latepoint-desc-media.svg-w svg {
    filter: brightness(0.9) invert(1) !important;
}

/* Center Panel (Form contents) */
.latepoint-w .latepoint-form-w,
.os-form-w {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color var(--transition-normal);
}

.latepoint-w .latepoint-form-w .latepoint-heading-w,
.os-form-w .latepoint-heading-w {
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-primary) !important;
    padding: 24px 30px !important;
}

.latepoint-w .latepoint-form-w .os-heading-text,
.latepoint-w .latepoint-form-w .os-heading-text-library {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    font-size: 1.5rem !important;
}

.latepoint-w .latepoint-form-w .latepoint-body,
.os-form-w .latepoint-body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    padding: 30px !important;
}

.latepoint-w .latepoint-form-w .latepoint-footer,
.os-form-w .latepoint-footer {
    border-top: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    padding: 20px 30px !important;
}

html[data-theme="dark"] body .latepoint-w .latepoint-form-w .latepoint-footer,
html[data-theme="dark"] body .os-form-w .latepoint-footer {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Right Panel (Summary Panel) */
.latepoint-w .latepoint-summary-w,
.os-summary-w {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

html[data-theme="dark"] body .latepoint-w .latepoint-summary-w,
html[data-theme="dark"] body .os-summary-w {
    background: rgba(0, 0, 0, 0.2) !important;
}

.latepoint-w .latepoint-summary-w .summary-header,
.os-summary-w .summary-header {
    border-bottom: 1px solid var(--glass-border) !important;
    background: transparent !important;
    padding: 24px 20px !important;
}

.latepoint-w .latepoint-summary-w .summary-header-label,
.os-summary-w .summary-header-label {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    background-color: transparent !important; /* Fixes white block background */
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
}

/* Restored close button in summary header */
.latepoint-w .latepoint-summary-w .summary-header-w .os-lines,
.os-summary-w .summary-header-w .os-lines {
    display: block !important;
}

.latepoint-w .latepoint-summary-w .os-summary-contents-inner,
.os-summary-w .os-summary-contents-inner {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 20px !important;
}

/* Steps Progress Tracker */
.latepoint-w .latepoint-progress,
.os-progress {
    background-color: transparent !important;
    padding: 15px 30px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.latepoint-w .latepoint-progress li .progress-item,
.os-progress li .progress-item {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

.latepoint-w .latepoint-progress li .progress-item span,
.os-progress li .progress-item span {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
}

.latepoint-w .latepoint-progress li.active .progress-item span,
.os-progress li.active .progress-item span {
    color: var(--accent-primary) !important;
}

.latepoint-w .latepoint-progress li.completed .progress-item span,
.os-progress li.completed .progress-item span {
    color: var(--text-primary) !important;
}

/* Premium sports massage card selections */
.latepoint-w .os-items .os-item,
.latepoint-w .os-selectable-items .os-selectable-item,
.os-booking-form-element .os-items .os-item {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
}

.latepoint-w .os-items .os-item-i,
.latepoint-w .os-selectable-items .os-selectable-item .os-item-i,
.os-booking-form-element .os-items .os-item .os-item-i {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.latepoint-w .os-items .os-item .os-item-name,
.latepoint-w .os-selectable-items .os-selectable-item .os-item-name,
.os-booking-form-element .os-items .os-item .os-item-name {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    font-size: 1.05rem !important;
    margin-bottom: 4px !important;
}

.latepoint-w .os-items .os-item .os-item-desc,
.latepoint-w .os-selectable-items .os-selectable-item .os-item-desc,
.os-booking-form-element .os-items .os-item .os-item-desc {
    color: var(--text-secondary) !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
}

.latepoint-w .os-items .os-item .os-item-price,
.latepoint-w .os-selectable-items .os-selectable-item .os-item-price,
.os-booking-form-element .os-items .os-item .os-item-price {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
    font-size: 1.15rem !important;
    background: var(--bg-secondary) !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
}

/* Service durations represented as premium active badges */
.latepoint-w .os-selectable-items .os-selectable-item .os-item-duration,
.os-booking-form-element .os-items .os-item .os-item-duration {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    background-color: var(--bg-primary) !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--border-color) !important;
    display: inline-block !important;
    margin-top: 6px !important;
}

.latepoint-w .os-items .os-item:hover,
.latepoint-w .os-selectable-items .os-selectable-item:hover {
    border-color: var(--accent-primary) !important;
    background-color: var(--bg-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md), 0 0 15px var(--glow-primary) !important;
}

.latepoint-w .os-items .os-item.selected,
.latepoint-w .os-selectable-items .os-selectable-item.selected {
    background-color: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: var(--shadow-md), 0 0 20px var(--glow-primary) !important;
}

.latepoint-w .os-items .os-item.selected .os-item-price,
.latepoint-w .os-selectable-items .os-selectable-item.selected .os-item-price {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Category Headers */
.latepoint-w .os-item-category-info-w .os-item-category-info {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Therapist (Agent) Avatar Selection Cards */
.latepoint-w .os-selectable-item .os-avatar,
.os-booking-form-element .os-item .os-avatar {
    border-radius: 50% !important;
    border: 3px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
}

.latepoint-w .os-selectable-item.selected .os-avatar,
.os-booking-form-element .os-item.selected .os-avatar {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 10px var(--glow-primary) !important;
}

/* Datepicker & Calendar styling */
.latepoint-w .os-monthly-calendar-w {
    background-color: transparent !important;
    margin-top: 15px !important;
}

.latepoint-w .os-current-month-label-w .os-current-month-label {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
}

/* Make year readable in both light and dark themes */
html body .os-current-month-label-w .os-current-month-label .current-year,
html body .latepoint-w .os-current-month-label-w .os-current-month-label .current-year,
html body .os-booking-form-element .os-current-month-label-w .os-current-month-label .current-year {
    color: var(--text-muted) !important;
    margin-left: 5px !important;
    font-weight: 500 !important;
}

html[data-theme="dark"] body .os-current-month-label-w .os-current-month-label .current-year,
html[data-theme="dark"] body .latepoint-w .os-current-month-label-w .os-current-month-label .current-year,
html[data-theme="dark"] body .os-booking-form-element .os-current-month-label-w .os-current-month-label .current-year {
    color: var(--text-secondary, #94a3b8) !important;
}

.latepoint-w .os-current-month-label-w .os-prev-month,
.latepoint-w .os-current-month-label-w .os-next-month,
.latepoint-w .os-current-month-label-w .os-month-prev-btn,
.latepoint-w .os-current-month-label-w .os-month-next-btn {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.latepoint-w .os-current-month-label-w .os-prev-month:hover,
.latepoint-w .os-current-month-label-w .os-next-month:hover,
.latepoint-w .os-current-month-label-w .os-month-prev-btn:hover,
.latepoint-w .os-current-month-label-w .os-month-next-btn:hover {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.latepoint-w .os-weekdays .weekday {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

/* Explicitly style the day numbers for readability */
html body .latepoint-w .os-monthly-calendar-days .os-day .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day .os-day-box .os-day-number {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    transition: all var(--transition-fast) !important;
}

/* Faded/muted day styles for unavailable, passed, not allowed, or next/prev month days */
html body .latepoint-w .os-monthly-calendar-days .os-day.os-not-available .os-day-box,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-day-passed .os-day-box,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-not-in-allowed-period .os-day-box,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-month-next .os-day-box,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-month-prev .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-not-available .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-day-passed .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-not-in-allowed-period .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-month-next .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-month-prev .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-not-available .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-day-passed .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-not-in-allowed-period .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-month-next .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-month-prev .os-day-box {
    background-color: transparent !important;
    border-color: transparent !important;
    opacity: 0.3 !important;
}

html body .latepoint-w .os-monthly-calendar-days .os-day.os-not-available .os-day-box .os-day-number,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-day-passed .os-day-box .os-day-number,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-not-in-allowed-period .os-day-box .os-day-number,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-month-next .os-day-box .os-day-number,
html body .latepoint-w .os-monthly-calendar-days .os-day.os-month-prev .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-not-available .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-day-passed .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-not-in-allowed-period .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-month-next .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-month-prev .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-not-available .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-day-passed .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-not-in-allowed-period .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-month-next .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-month-prev .os-day-box .os-day-number {
    color: var(--text-muted) !important;
}

/* Base style for calendar day boxes */
html body .latepoint-w .os-monthly-calendar-days .os-day .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day .os-day-box {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

/* Base style for available calendar days */
html body .latepoint-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period) .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period) .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period) .os-day-box {
    background-color: rgba(26, 91, 163, 0.05) !important;
    border-color: rgba(26, 91, 163, 0.15) !important;
}

html[data-theme="dark"] body .latepoint-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period) .os-day-box,
html[data-theme="dark"] body .os-booking-form-element .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period) .os-day-box,
html[data-theme="dark"] body .latepoint-lightbox-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period) .os-day-box {
    background-color: rgba(0, 136, 255, 0.05) !important;
    border-color: rgba(0, 136, 255, 0.15) !important;
}

/* Hover style for available calendar days */
html body .latepoint-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period):hover .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period):hover .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period):hover .os-day-box {
    background-color: var(--accent-primary) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px var(--glow-primary) !important;
}

html body .latepoint-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period):hover .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period):hover .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day:not(.os-not-available):not(.os-day-passed):not(.os-not-in-allowed-period):hover .os-day-box .os-day-number {
    color: #ffffff !important;
}

/* Selected calendar day */
html body .latepoint-w .os-monthly-calendar-days .os-day.selected .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.selected .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.selected .os-day-box {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px var(--glow-primary) !important;
}

html body .latepoint-w .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number {
    color: #ffffff !important;
}

/* Today indicator */
html body .latepoint-w .os-monthly-calendar-days .os-day.os-today .os-day-box,
html body .os-booking-form-element .os-monthly-calendar-days .os-day.os-today .os-day-box,
html body .latepoint-lightbox-w .os-monthly-calendar-days .os-day.os-today .os-day-box {
    border: 2px solid var(--accent-primary) !important;
}

/* Time Slots Grid */
.latepoint-w .os-time-slots-w {
    background-color: transparent !important;
    margin-top: 20px !important;
}

/* Style the 'Pick a slot for' header for high visibility */
html body .latepoint-w .times-header-label,
html body .os-booking-form-element .times-header-label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

html[data-theme="dark"] body .latepoint-w .times-header-label,
html[data-theme="dark"] body .os-booking-form-element .times-header-label {
    color: var(--text-primary, #f8fafc) !important;
}

.latepoint-w .os-time-slot {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-fast) !important;
    margin-bottom: 8px !important;
}

.latepoint-w .os-time-slot .os-time-slot-i {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}

.latepoint-w .os-time-slot.is-available:hover {
    border-color: var(--accent-primary) !important;
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 4px 10px var(--glow-primary) !important;
}

.latepoint-w .os-time-slot.selected {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px var(--glow-primary) !important;
}

.latepoint-w .os-time-slot.selected .os-time-slot-i {
    color: #ffffff !important;
}

/* Summary Box Info & Price Breakdown */
.latepoint-w .summary-box {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

.latepoint-w .summary-box-heading .sbh-item {
    color: var(--text-muted) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

.latepoint-w .summary-box-heading .sbh-line {
    background-color: var(--border-color) !important;
}

.latepoint-w .summary-box-content {
    color: var(--text-primary) !important;
    margin-top: 10px !important;
}

.latepoint-w .sbc-big-item {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

.latepoint-w .sbc-highlighted-item,
.latepoint-w .sbc-sub-item,
.latepoint-w .sbc-main-item {
    color: var(--text-secondary) !important;
    font-size: 0.88rem !important;
}

.latepoint-w .pb-heading .pbh-label {
    color: var(--text-muted) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

.latepoint-w .pb-heading .pbh-line {
    background-color: var(--border-color) !important;
}

.latepoint-w .summary-price-item-w .spi-name,
.latepoint-w .summary-price-item-w .spi-price {
    color: var(--text-primary) !important;
    font-size: 0.92rem !important;
}

.latepoint-w .summary-price-item-w.spi-total {
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}

.latepoint-w .checkout-from-summary-panel-btn {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(26, 91, 163, 0.25) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all var(--transition-normal) !important;
}

.latepoint-w .checkout-from-summary-panel-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(26, 91, 163, 0.45) !important;
}

.latepoint-w .latepoint-add-another-item-trigger {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-primary) !important;
    border: 1px dashed var(--accent-primary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
}

.latepoint-w .latepoint-add-another-item-trigger:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-primary) !important;
}

/* Wizard Buttons styling (Next / Prev) */
.latepoint-btn.latepoint-btn-white,
.latepoint-w .latepoint-btn.latepoint-btn-white,
.latepoint-w .latepoint-prev-btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all var(--transition-fast) !important;
}

.latepoint-btn.latepoint-btn-white:hover,
.latepoint-w .latepoint-btn.latepoint-btn-white:hover,
.latepoint-w .latepoint-prev-btn:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.latepoint-w .latepoint-btn-primary:not(.latepoint-btn-outline):not(.latepoint-btn-link),
.latepoint-w .latepoint-next-btn,
.latepoint-w .latepoint-btn:not(.latepoint-btn-white):not(.latepoint-btn-outline):not(.latepoint-btn-link):not(.os-btn-secondary):not(.btn-outline) {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(26, 91, 163, 0.25) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all var(--transition-normal) !important;
}

.latepoint-w .latepoint-btn-primary:not(.latepoint-btn-outline):not(.latepoint-btn-link):hover,
.latepoint-w .latepoint-next-btn:hover,
.latepoint-w .latepoint-btn:not(.latepoint-btn-white):not(.latepoint-btn-outline):not(.latepoint-btn-link):not(.os-btn-secondary):not(.btn-outline):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(26, 91, 163, 0.45) !important;
}

/* Link-style action buttons overrides (e.g. Forgot password, inline text buttons) */
.latepoint-btn.latepoint-btn-link,
.latepoint-w .latepoint-btn.latepoint-btn-link,
.latepoint-w .step-forgot-password-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--accent-primary, #1A5BA3) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    display: inline-block !important;
    height: auto !important;
    line-height: normal !important;
    width: auto !important;
    min-height: 0 !important;
    transition: color 0.2s ease !important;
    transform: none !important;
}

.latepoint-btn.latepoint-btn-link:hover,
.latepoint-w .latepoint-btn.latepoint-btn-link:hover,
.latepoint-w .step-forgot-password-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--accent-secondary, #E31E24) !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    transform: none !important;
}

html[data-theme="dark"] body .latepoint-btn.latepoint-btn-link,
html[data-theme="dark"] body .latepoint-w .latepoint-btn.latepoint-btn-link,
html[data-theme="dark"] body .latepoint-w .step-forgot-password-btn {
    color: var(--accent-primary, #0088ff) !important;
}

html[data-theme="dark"] body .latepoint-btn.latepoint-btn-link:hover,
html[data-theme="dark"] body .latepoint-w .latepoint-btn.latepoint-btn-link:hover,
html[data-theme="dark"] body .latepoint-w .step-forgot-password-btn:hover {
    color: var(--accent-secondary, #ff183c) !important;
}

/* Premium active outline buttons styling */
html body .latepoint-w .latepoint-btn-outline,
html body .os-booking-form-element .latepoint-btn-outline,
html body .latepoint-lightbox-w .latepoint-btn-outline,
html body .latepoint-w .customer-booking-bottom-actions .latepoint-btn-outline,
html body .latepoint-w .customer-order-bottom-actions .latepoint-btn-outline {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--accent-primary, #1A5BA3) !important;
    border: 2px solid var(--accent-primary, #1A5BA3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: all var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
}

html body .latepoint-w .latepoint-btn-outline i,
html body .os-booking-form-element .latepoint-btn-outline i,
html body .latepoint-lightbox-w .latepoint-btn-outline i {
    color: inherit !important;
}

html body .latepoint-w .latepoint-btn-outline:hover,
html body .os-booking-form-element .latepoint-btn-outline:hover,
html body .latepoint-lightbox-w .latepoint-btn-outline:hover,
html body .latepoint-w .customer-booking-bottom-actions .latepoint-btn-outline:hover,
html body .latepoint-w .customer-order-bottom-actions .latepoint-btn-outline:hover {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px var(--glow-primary) !important;
}

html[data-theme="dark"] body .latepoint-w .latepoint-btn-outline,
html[data-theme="dark"] body .os-booking-form-element .latepoint-btn-outline,
html[data-theme="dark"] body .latepoint-lightbox-w .latepoint-btn-outline,
html[data-theme="dark"] body .latepoint-w .customer-booking-bottom-actions .latepoint-btn-outline,
html[data-theme="dark"] body .latepoint-w .customer-order-bottom-actions .latepoint-btn-outline {
    color: var(--accent-primary, #0088ff) !important;
    border-color: var(--accent-primary, #0088ff) !important;
}

/* Payment Methods Selection */
.latepoint-w .lp-options .lp-option,
.latepoint-w .lp-options [role="button"],
.latepoint-w .lp-payment-methods-w .lp-option,
.latepoint-w .lp-payment-methods-w [role="button"] {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    transition: all var(--transition-fast) !important;
}

.latepoint-w .lp-options .lp-option:hover,
.latepoint-w .lp-options [role="button"]:hover,
.latepoint-w .lp-payment-methods-w .lp-option:hover,
.latepoint-w .lp-payment-methods-w [role="button"]:hover {
    border-color: var(--accent-primary) !important;
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 4px 12px var(--glow-primary) !important;
}

.latepoint-w .lp-options .lp-option.selected,
.latepoint-w .lp-options [role="button"].selected,
.latepoint-w .lp-payment-methods-w .lp-option.selected,
.latepoint-w .lp-payment-methods-w [role="button"].selected {
    background-color: var(--bg-secondary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 4px 12px var(--glow-primary) !important;
}

/* Form Input Overrides (Customer Details Step) */
html body .latepoint-w .os-form-group.os-form-select-group .os-form-control,
html body .latepoint-w .os-form-group.os-form-select-group select.os-form-control,
html body .latepoint-w .os-form-group.os-form-textfield-group .os-form-control,
html body .latepoint-w .os-form-group.os-form-textfield-group input.os-form-control,
html body .os-booking-form-element .os-form-group.os-form-select-group .os-form-control,
html body .os-booking-form-element .os-form-group.os-form-select-group select.os-form-control,
html body .os-booking-form-element .os-form-group.os-form-textfield-group .os-form-control,
html body .os-booking-form-element .os-form-group.os-form-textfield-group input.os-form-control,
html body .latepoint-lightbox-w .os-form-group.os-form-select-group .os-form-control,
html body .latepoint-lightbox-w .os-form-group.os-form-select-group select.os-form-control,
html body .latepoint-lightbox-w .os-form-group.os-form-textfield-group .os-form-control,
html body .latepoint-lightbox-w .os-form-group.os-form-textfield-group input.os-form-control,
html body .latepoint-w .os-form-group .os-form-control,
html body .latepoint-w .os-form-control,
html body .latepoint-w .latepoint-form-control,
html body .latepoint-w input[type="text"],
html body .latepoint-w input[type="password"],
html body .latepoint-w input[type="email"],
html body .latepoint-w input[type="tel"]:not(.os-mask-phone),
html body .latepoint-w input[type="number"],
html body .latepoint-w select,
html body .latepoint-w textarea,
html body .os-booking-form-element input[type="text"],
html body .os-booking-form-element input[type="email"],
html body .os-booking-form-element select,
html body .os-booking-form-element textarea {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    padding: 12px 16px !important;
    transition: all var(--transition-fast) !important;
}

/* Ensure select options look decent in dark mode */
html body .latepoint-w select option,
html body .os-booking-form-element select option,
html body .latepoint-lightbox-w select option {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Specific styling for Phone Field Group wrapper and its inner .lp_iti container */
html body .latepoint-w .os-form-group.os-form-phonefield-group,
html body .latepoint-w .os-form-group.os-form-phonefield-group .lp_iti,
html body .os-booking-form-element .os-form-group.os-form-phonefield-group,
html body .os-booking-form-element .os-form-group.os-form-phonefield-group .lp_iti,
html body .latepoint-lightbox-w .os-form-group.os-form-phonefield-group,
html body .latepoint-lightbox-w .os-form-group.os-form-phonefield-group .lp_iti {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
    display: flex !important;
    align-items: center !important;
}

/* Phone input field inside the wrapper */
html body .latepoint-w .os-form-group.os-form-phonefield-group input.os-form-control.os-mask-phone,
html body .os-booking-form-element .os-form-group.os-form-phonefield-group input.os-form-control.os-mask-phone,
html body .latepoint-lightbox-w .os-form-group.os-form-phonefield-group input.os-form-control.os-mask-phone {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    padding: 12px 16px 12px 0px !important;
    margin: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

/* Dial code inside the phone field */
html body .latepoint-w .os-form-group.os-form-phonefield-group .lp_iti__selected-dial-code,
html body .os-booking-form-element .os-form-group.os-form-phonefield-group .lp_iti__selected-dial-code,
html body .latepoint-lightbox-w .os-form-group.os-form-phonefield-group .lp_iti__selected-dial-code {
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
}

/* Flag selector list styling for dark mode */
html body .latepoint-w .lp_iti__country-list,
html body .os-booking-form-element .lp_iti__country-list,
html body .latepoint-lightbox-w .lp_iti__country-list {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

html body .latepoint-w .lp_iti__country,
html body .os-booking-form-element .lp_iti__country,
html body .latepoint-lightbox-w .lp_iti__country {
    color: var(--text-primary) !important;
    padding: 8px 12px !important;
    background-color: var(--bg-tertiary) !important;
}

html body .latepoint-w .lp_iti__country.lp_iti__highlight,
html body .os-booking-form-element .lp_iti__country.lp_iti__highlight,
html body .latepoint-lightbox-w .lp_iti__country.lp_iti__highlight {
    background-color: var(--bg-secondary) !important;
}

html body .latepoint-w .lp_iti__dial-code,
html body .os-booking-form-element .lp_iti__dial-code,
html body .latepoint-lightbox-w .lp_iti__dial-code {
    color: var(--text-muted) !important;
}

html body .latepoint-w input::placeholder,
html body .latepoint-w textarea::placeholder,
html body .os-booking-form-element input::placeholder,
html body .os-booking-form-element textarea::placeholder,
html body .latepoint-lightbox-w input::placeholder,
html body .latepoint-lightbox-w textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Focus states for standard fields */
html body .latepoint-w .os-form-group.os-form-select-group .os-form-control:focus,
html body .latepoint-w .os-form-group.os-form-select-group select.os-form-control:focus,
html body .latepoint-w .os-form-group.os-form-textfield-group .os-form-control:focus,
html body .latepoint-w .os-form-group.os-form-textfield-group input.os-form-control:focus,
html body .os-booking-form-element .os-form-group.os-form-select-group .os-form-control:focus,
html body .os-booking-form-element .os-form-group.os-form-select-group select.os-form-control:focus,
html body .os-booking-form-element .os-form-group.os-form-textfield-group .os-form-control:focus,
html body .os-booking-form-element .os-form-group.os-form-textfield-group input.os-form-control:focus,
html body .latepoint-lightbox-w .os-form-group.os-form-select-group .os-form-control:focus,
html body .latepoint-lightbox-w .os-form-group.os-form-select-group select.os-form-control:focus,
html body .latepoint-lightbox-w .os-form-group.os-form-textfield-group .os-form-control:focus,
html body .latepoint-lightbox-w .os-form-group.os-form-textfield-group input.os-form-control:focus,
html body .latepoint-w .os-form-group .os-form-control:focus,
html body .latepoint-w .os-form-control:focus,
html body .latepoint-w input:focus,
html body .latepoint-w select:focus,
html body .latepoint-w textarea:focus,
html body .os-booking-form-element input:focus,
html body .os-booking-form-element select:focus,
html body .os-booking-form-element textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--glow-primary) !important;
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    outline: none !important;
}

/* Focus state for phone field group */
html body .latepoint-w .os-form-group.os-form-phonefield-group:has(input.os-form-control:focus),
html body .latepoint-w .os-form-group.os-form-phonefield-group .lp_iti:has(input:focus),
html body .os-booking-form-element .os-form-group.os-form-phonefield-group:has(input.os-form-control:focus),
html body .os-booking-form-element .os-form-group.os-form-phonefield-group .lp_iti:has(input:focus),
html body .latepoint-lightbox-w .os-form-group.os-form-phonefield-group:has(input.os-form-control:focus),
html body .latepoint-lightbox-w .os-form-group.os-form-phonefield-group .lp_iti:has(input:focus) {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--glow-primary) !important;
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
}

/* Input labels */
.latepoint-w label,
.latepoint-w .os-label,
.latepoint-w .os-form-group label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    font-size: 0.9rem !important;
}

/* Confirmation Step styling */
.latepoint-w .confirmation-info-w {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    padding: 25px !important;
}

.latepoint-w .confirmation-head-info {
    color: var(--text-primary) !important;
}

.latepoint-w .confirmation-head-info h2,
.latepoint-w .confirmation-head-info h3 {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
}

.latepoint-w .confirmation-head-info p {
    color: var(--text-secondary) !important;
}

.latepoint-w .confirmation-head-info .confirmation-code,
.latepoint-w .confirmation-head-info .confirmation-sub-title {
    color: var(--text-primary) !important;
}

.latepoint-w .part-of-bundle-message {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
}

.latepoint-w .step-confirmation-set-password {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

.latepoint-w .confirmation-cabinet-info {
    border-top: 1px solid var(--border-color) !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
}

.latepoint-w .confirmation-cabinet-text {
    color: var(--text-secondary) !important;
}

.latepoint-w .confirmation-cabinet-link {
    color: var(--accent-primary) !important;
    font-weight: 600 !important;
}

.latepoint-w .info-box {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
}

/* Responsive / Mobile overrides for the columns */
@media (max-width: 768px) {
    .latepoint-w .latepoint-booking-form-element,
    .os-booking-form-element {
        display: flex !important;
        flex-direction: column !important;
    }

    .latepoint-w .latepoint-side-panel,
    .os-side-panel {
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 20px !important;
        background-color: var(--bg-primary) !important; /* Solid background for mobile burger menu */
    }

    html[data-theme="dark"] body .latepoint-w .latepoint-side-panel,
    html[data-theme="dark"] body .os-side-panel {
        background-color: var(--bg-primary) !important;
    }

    .latepoint-w .latepoint-summary-w,
    .os-summary-w {
        border-left: none !important;
        border-top: 1px solid var(--border-color) !important;
        position: relative !important;
    }
}

/* ==========================================================================
   Mobile Booking: Linktree Style UI & Auto Height
   ========================================================================== */
@media (max-width: 768px) {

    /* Let the widget height adapt to content */
    .latepoint-w {
        min-height: auto !important;
        height: auto !important;
    }

    /* Tree Style Widget Wrapper - Make it transparent to blend with page */
    .latepoint-w .latepoint-booking-form-element,
    .latepoint-w .latepoint-booking-form-element .latepoint-form-w {
        height: auto !important;
        min-height: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove heavy horizontal padding from the form body on mobile */
    .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-body {
        padding: 0 16px 16px 16px !important;
        max-height: none !important;
        height: auto !important;
        background: transparent !important;
    }
    
    /* Center the heading */
    .latepoint-w .os-step-heading {
        text-align: center !important;
        width: 100% !important;
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    /* --- Tree View Hierarchy --- */
    .latepoint-w .os-services,
    .latepoint-w .os-items,
    .latepoint-w .os-item-categories-holder,
    .latepoint-w .os-animated-parent {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important; /* Increased gap between different categories */
        width: 100% !important;
    }

    /* Group wrapper (category + services) */
    .latepoint-w .os-item-category-w {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Services List (The Child Nodes) - Centered, no indent */
    .latepoint-w .os-item-category-w .os-selectable-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;  
        padding-top: 20px !important;
        padding-bottom: 8px !important;
        position: relative !important;
        width: 100% !important;
    }

    /* Individual service card */
    .latepoint-w .os-item,
    .latepoint-w .os-animated-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        border: 2px solid var(--border-color) !important;
        position: relative !important;
        overflow: visible !important;
    }

    .latepoint-w .os-item:active {
        transform: scale(0.98) !important;
    }

    /* Category Header (The Parent Node) */
    .latepoint-w .os-item-category-info-w {
        width: 100% !important;
        background: var(--bg-primary) !important;
        border: 2px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        padding: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        z-index: 2 !important;
        position: relative !important;
        pointer-events: none !important; /* Disable click on category header */
    }
    
    .latepoint-w .os-item-category-info-w .os-item-category-info {
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Inner selector: horizontal row layout */
    .latepoint-w .os-service-selector,
    .latepoint-w .os-item-i,
    .latepoint-w .os-location-selector,
    .latepoint-w .os-agent-selector {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        background: var(--bg-primary) !important;
        border-radius: calc(var(--radius-md) - 2px) !important;
    }
    
    /* Show descriptions in tree view */
    .latepoint-w .os-item-desc {
        display: block !important;
        font-size: 13px !important;
        color: var(--text-secondary) !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }
    
    /* Left align text for cards */
    .latepoint-w .os-item-name-w {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex: 1 !important;
        text-align: left !important;
    }

    .latepoint-w .os-item-name {
        font-weight: 700 !important;
        font-size: 15px !important;
        margin-bottom: 2px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--text-primary) !important;
    }

    /* Price tag styling */
    .latepoint-w .os-item-price-w {
        margin-top: 6px !important;
        background: var(--bg-tertiary) !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .latepoint-w .os-item-price-w .os-item-price {
        font-size: 14px !important;
        color: var(--accent-primary) !important;
        font-weight: 700 !important;
    }
    
    .latepoint-w .os-item-price-w .os-item-price-label {
        display: none !important;
    }

    /* Service thumbnail */
    .latepoint-w .os-item-img-w {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: var(--radius-sm) !important;
    }

    /* Step content — ensure auto height */
    .latepoint-w .latepoint-step-content,
    .latepoint-w .os-step-content,
    .latepoint-w .step-services-w {
        height: auto !important;
        min-height: unset !important;
        padding-bottom: 0 !important;
    }

    /* Step actions (Back/Next buttons) */
    .latepoint-w .latepoint-footer,
    .latepoint-w .os-step-actions,
    .latepoint-w .latepoint-step-actions {
        position: relative !important;
        padding: 16px 16px !important;
        margin-top: 20px !important;
        background: transparent !important;
        border-top: none !important;
    }
}

/* ==========================================================================
   10. Customer Dashboard Booking UI Overrides
   ========================================================================== */

/* Hide Dashboard Top booking trigger button */
.latepoint-customer-dashboard-w a.latepoint-book-button,
.latepoint-customer-dashboard-w .os_trigger_booking:not(.new-booking-tile),
.os-customer-dashboard-w a.latepoint-book-button,
.os-customer-dashboard-w .os_trigger_booking:not(.new-booking-tile),
.wp-block-latepoint-customer-dashboard a.latepoint-book-button,
.wp-block-latepoint-customer-dashboard .os_trigger_booking:not(.new-booking-tile),
.latepoint-w > a.latepoint-book-button,
.latepoint-w > .os_trigger_booking:not(.new-booking-tile) {
    display: none !important;
}

/* Hide Dashboard sidebar "New Appointment" tab trigger */
.latepoint-tab-triggers.customer-dashboard-tabs a[data-tab-target=".tab-content-customer-new-appointment-form"],
.os-customer-dashboard-tabs a[data-tab-target=".tab-content-customer-new-appointment-form"] {
    display: none !important;
}

/* Dark mode overrides for LatePoint primary action buttons */
html[data-theme="dark"] body .latepoint-w .checkout-from-summary-panel-btn {
    box-shadow: 0 4px 12px rgba(0, 136, 255, 0.3) !important;
}

html[data-theme="dark"] body .latepoint-w .checkout-from-summary-panel-btn:hover {
    box-shadow: 0 8px 22px rgba(0, 136, 255, 0.5) !important;
}

html[data-theme="dark"] body .latepoint-w .latepoint-btn-primary:not(.latepoint-btn-outline):not(.latepoint-btn-link),
html[data-theme="dark"] body .latepoint-w .latepoint-next-btn,
html[data-theme="dark"] body .latepoint-w .latepoint-btn:not(.latepoint-btn-white):not(.latepoint-btn-outline):not(.latepoint-btn-link):not(.os-btn-secondary):not(.btn-outline) {
    box-shadow: 0 4px 15px rgba(0, 136, 255, 0.3) !important;
}

html[data-theme="dark"] body .latepoint-w .latepoint-btn-primary:not(.latepoint-btn-outline):not(.latepoint-btn-link):hover,
html[data-theme="dark"] body .latepoint-w .latepoint-next-btn:hover,
html[data-theme="dark"] body .latepoint-w .latepoint-btn:not(.latepoint-btn-white):not(.latepoint-btn-outline):not(.latepoint-btn-link):not(.os-btn-secondary):not(.btn-outline):hover {
    box-shadow: 0 8px 22px rgba(0, 136, 255, 0.5) !important;
}

/* ==========================================================================
   11. Customer Dashboard Dynamic Filter Bar
   ========================================================================== */
.lp-custom-filter-group {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.lp-date-filter-w,
.lp-category-filter-w {
    display: flex !important;
    align-items: center !important;
}

.lp-filter-select {
    background-color: var(--bg-tertiary, #f1f5f9) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    color: var(--text-secondary, #475569) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full, 9999px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2523475569%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

.lp-filter-select:hover {
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

.lp-filter-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--glow-primary) !important;
}

html[data-theme="dark"] body .lp-filter-select {
    background-color: var(--bg-tertiary, #151a24) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.05)) !important;
    color: var(--text-secondary, #94a3b8) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%252394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}

html[data-theme="dark"] body .lp-filter-select:hover {
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
}

html[data-theme="dark"] body .lp-filter-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.35) !important;
}

/* Smooth transition for card filtering scale/opacity */
.customer-booking {
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (max-width: 768px) {
    .lp-custom-filter-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .lp-date-filter-w,
    .lp-category-filter-w {
        width: 100% !important;
    }
    .lp-filter-select {
        width: 100% !important;
    }
}

/* ==========================================================================
   12. Customer Dashboard Sidebar Avatar (Gravatar)
   ========================================================================== */
.lp-custom-sidebar-avatar-w {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 8px 24px 8px !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lp-custom-sidebar-avatar {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    border: 3px solid var(--accent-primary, #0088ff) !important;
    box-shadow: 0 4px 14px rgba(0, 136, 255, 0.3) !important;
    object-fit: cover !important;
    margin-bottom: 12px !important;
    background-color: var(--bg-tertiary, #151a24) !important;
    transition: transform var(--transition-fast) !important;
}

.lp-custom-sidebar-avatar:hover {
    transform: scale(1.05) rotate(2deg) !important;
}

.lp-custom-sidebar-username {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #ffffff) !important;
    text-align: center !important;
    font-family: var(--font-header, 'Outfit', sans-serif) !important;
    letter-spacing: 0.02em !important;
    text-transform: capitalize !important;
}

/* Hide redundant dashboard welcome header since we show name under sidebar avatar */
.latepoint-w > h4 {
    display: none !important;
}

/* Light mode overrides for sidebar profile card */
html:not([data-theme="dark"]) body .lp-custom-sidebar-avatar {
    border-color: var(--accent-primary, #1a5ba3) !important;
    box-shadow: 0 4px 12px rgba(26, 91, 163, 0.2) !important;
    background-color: var(--bg-tertiary, #f1f5f9) !important;
}

html:not([data-theme="dark"]) body .lp-custom-sidebar-username {
    color: var(--text-primary, #0f172a) !important;
}

/* ==========================================================================
   13. Mobile Fixed Bottom Navigation Bar (Profile, Messages, Sign Out)
   ========================================================================== */

/* Desktop: hidden */
.lp-mobile-bottom-nav {
    display: none !important;
}

/* Mobile: fixed bottom bar */
@media (max-width: 768px) {
    /* Hide secondary tabs from the pill nav on mobile */
    .lp-mobile-pill-nav a[data-secondary-tab="true"] {
        display: none !important;
    }

    /* Fixed bottom nav bar */
    .lp-mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: var(--bg-secondary, #ffffff) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid var(--border-color, rgba(0,0,0,0.08)) !important;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) 16px !important;
        gap: 0 !important;
        justify-content: space-around !important;
        align-items: center !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10) !important;
    }

    /* Each bottom nav item */
    .lp-bottom-nav-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 8px 18px !important;
        border-radius: 14px !important;
        text-decoration: none !important;
        color: var(--text-muted, #94a3b8) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
        flex: 1 !important;
        text-align: center !important;
        max-width: 100px !important;
    }

    .lp-bottom-nav-link i {
        font-size: 20px !important;
        margin-bottom: 2px !important;
        transition: all 0.2s ease !important;
    }

    .lp-bottom-nav-link span {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .lp-bottom-nav-link:hover,
    .lp-bottom-nav-link.active {
        color: var(--accent-primary, #0088ff) !important;
        background: rgba(0, 136, 255, 0.06) !important;
    }

    .lp-bottom-nav-link.active i {
        color: var(--accent-primary, #0088ff) !important;
    }

    /* Sign out link: red tint */
    .lp-bottom-signout {
        color: var(--text-muted, #94a3b8) !important;
    }

    .lp-bottom-signout:hover {
        color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.06) !important;
    }

    /* Add bottom padding to the page so content isn't hidden behind the bar */
    .latepoint-w {
        padding-bottom: 80px !important;
    }

    /* Dark mode: bottom bar background */
    html[data-theme="dark"] .lp-mobile-bottom-nav {
        background: var(--bg-secondary, #0f1623) !important;
        border-top-color: var(--border-color, rgba(255,255,255,0.06)) !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35) !important;
    }

    html[data-theme="dark"] .lp-bottom-nav-link {
        color: var(--text-muted, #475569) !important;
    }

    html[data-theme="dark"] .lp-bottom-nav-link:hover,
    html[data-theme="dark"] .lp-bottom-nav-link.active {
        color: var(--accent-primary, #0088ff) !important;
        background: rgba(0, 136, 255, 0.08) !important;
    }

    html[data-theme="dark"] .lp-bottom-signout:hover {
        color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.08) !important;
    }
}

/* ==========================================================================
   LatePoint Booking Animations Disable
   ========================================================================== */
.latepoint-w .latepoint-step-content,
.latepoint-w .os-step-content,
.latepoint-w .os-step-animating,
.latepoint-w .os-step-animating-out,
.latepoint-w .latepoint-step-animating {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* ==========================================================================
   LatePoint Dark/Light Mode Global Overrides
   Force Latepoint to use theme colors regardless of its internal scheme
   ========================================================================== */
.latepoint-w {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 750px !important;
}

/* On mobile, allow widget to shrink to content — no giant empty space */
@media (max-width: 768px) {
    .latepoint-w {
        min-height: unset !important;
    }
}

.latepoint-w .latepoint-step-content,
.latepoint-w .os-step-content,
.latepoint-w .latepoint-summary-w,
.latepoint-w .os-summary-w,
.latepoint-w .latepoint-body,
.latepoint-w .os-form-w,
.latepoint-w .latepoint-step-actions,
.latepoint-w .os-step-actions,
.latepoint-w .os-month-days-names,
.latepoint-w .os-month-days-names .os-day-name,
.latepoint-w .os-month-days .os-day {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   PERFORMANCE: Disable all CSS animations and hover transforms
   ========================================================================== */
*, *::before, *::after {
    animation: none !important;
}

.glass-card:hover,
.feature-card:hover,
.pricing-card:hover,
.team-member:hover,
.service-card:hover,
.hero-content:hover,
.btn:hover,
.btn-primary:hover,
.btn-nav:hover,
.btn-nav-outline:hover,
a:hover,
img:hover,
.latepoint-w *:hover {
    transform: none !important;
}

.latepoint-w .latepoint-service-box,
.latepoint-w .os-service-box,
.latepoint-w .latepoint-location-box,
.latepoint-w .os-location-box,
.latepoint-w .latepoint-agent-box,
.latepoint-w .os-agent-box,
.latepoint-w .os-form-group input,
.latepoint-w .os-form-group select,
.latepoint-w .os-form-group textarea,
.latepoint-w .os-availability-days .os-day,
.latepoint-w .latepoint-btn,
.latepoint-w .os-btn {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.latepoint-w h1, .latepoint-w h2, .latepoint-w h3, .latepoint-w h4, .latepoint-w h5, .latepoint-w h6,
.latepoint-w .os-step-heading,
.latepoint-w .latepoint-step-heading,
.latepoint-w .os-summary-w,
.latepoint-w .os-summary-w * {
    color: var(--text-primary) !important;
}

.latepoint-w .os-availability-days .os-day.os-day-current {
    background-color: var(--accent-primary) !important;
    color: #fff !important;
}

/* Force button colors in latepoint */
.latepoint-w .os-step-actions .latepoint-btn,
.latepoint-w .os-step-actions .os-btn {
    background-color: var(--accent-primary) !important;
    color: #fff !important;
    border: none !important;
}

.latepoint-w .os-step-actions .latepoint-btn-secondary,
.latepoint-w .os-step-actions .os-btn-secondary,
.latepoint-w .os-step-actions .latepoint-prev-btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}