/**
 * Top bar (desktop + phone) and the phone sheet-card menu, matching
 * luqsports.com.my. Ported from the main site's style.css "FINAL OVERRIDE —
 * top bar + burger sheetcard" block (2026-09-26), with these changes:
 *  - the navbar stays position:fixed (booking pages pad for a fixed bar);
 *  - --red-bright is defined here (the booking theme lacks it);
 *  - the logged-in account button gets the same skewed plate.
 * Selectors carry #nav-links#nav-links / #navbar#navbar.navbar: the old booking
 * style.css sheet rules use one id plus many classes, so one extra id wins.
 * Markup: header.php. Sheet open/close: assets/js/theme.js.
 */

html:root {
	--red: #AD0303;
	--red-deep: #8A0202;
	--red-bright: #AD0303;
	--nav-h: 72px;
	--nav-height: 72px;
}
@media (max-width: 768px) {
	html:root {
		--nav-h: 64px;
		--nav-height: 64px;
	}
}

/* ---------- 1. NAVBAR ---------- */
html body #navbar#navbar.navbar {
    background: #14171c !important;
    height: 72px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid #14171c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body #navbar#navbar.navbar.scrolled { background: #14171c !important; height: 72px !important; }
html body #navbar#navbar.navbar::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 1px !important; background: #14171c !important; opacity: 1 !important; }
html body #navbar#navbar.navbar .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 0 20px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    height: 100% !important;
}
html body #navbar#navbar.navbar .logo { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; }
html body #navbar#navbar.navbar .logo-img { height: 52px !important; width: auto !important; filter: none !important; }

/* menu (desktop) */
html body #navbar#navbar.navbar .menu {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body #navbar#navbar.navbar:not(.lp-has-portal) .menu a,
html body #navbar#navbar.navbar .nav-links:not(.lp-burger-sheet-portaled) .menu a {
    display: inline-flex !important;
    align-items: center !important;
    height: 42px !important;
    padding: 0 18px !important;
    color: #fff !important;
    font-size: 0.86rem !important;
    font-weight: 750 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.2s ease !important;
}
html body #navbar#navbar.navbar .nav-links:not(.lp-burger-sheet-portaled) .menu a::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: skew(-18deg) !important;
    border-radius: 4px !important;
    background: transparent !important;
    z-index: -1 !important;
    transition: background 0.2s ease !important;
}
html body #navbar#navbar.navbar .nav-links:not(.lp-burger-sheet-portaled) .menu a:hover::before { background: rgba(255, 255, 255, 0.13) !important; }
html body #navbar#navbar.navbar .nav-links:not(.lp-burger-sheet-portaled) .menu li.current-menu-item > a::before,
html body #navbar#navbar.navbar .nav-links:not(.lp-burger-sheet-portaled) .menu a.active::before { background: var(--red) !important; }

/* nav buttons (desktop) */
html body #navbar#navbar.navbar .btn,
html body #navbar#navbar.navbar .btn-nav,
html body #navbar#navbar.navbar .btn-nav-outline,
html body #navbar#navbar.navbar .control-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 26px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 0.86rem !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}
html body #navbar#navbar.navbar .btn::before,
html body #navbar#navbar.navbar .btn-nav::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: skew(-18deg) !important;
    border-radius: 4px !important;
    background: var(--red) !important;
    box-shadow: 0 6px 18px rgba(173, 3, 3, 0.32) !important;
    z-index: -1 !important;
}
html body #navbar#navbar.navbar .btn:hover::before,
html body #navbar#navbar.navbar .btn-nav:hover::before { background: var(--red-deep) !important; }
html body #navbar#navbar.navbar .btn-nav-outline::before,
html body #navbar#navbar.navbar .control-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: skew(-18deg) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    box-shadow: none !important;
    z-index: -1 !important;
}
html body #navbar#navbar.navbar .btn-nav-outline:hover::before,
html body #navbar#navbar.navbar .control-btn:hover::before { background: rgba(255, 255, 255, 0.26) !important; }

/* burger hidden on desktop */
html body #navbar#navbar.navbar .menu-toggle { display: none !important; }

/* ---------- 2. MOBILE BAR ---------- */
@media (max-width: 768px) {
    html body #navbar#navbar.navbar,
    html body #navbar#navbar.navbar.scrolled { height: 64px !important; background: #14171c !important; }
    html body #navbar#navbar.navbar .nav-container {
        justify-content: flex-start !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: none !important;
    }
    html body #navbar#navbar.navbar .nav-container .menu-toggle { order: -1 !important; margin-left: 0 !important; }
    html body #navbar#navbar.navbar .nav-container .logo { order: 9 !important; margin-left: auto !important; }
    html body #navbar#navbar.navbar .nav-container .nav-controls { order: 2 !important; }
    html body #navbar#navbar.navbar .nav-container > .nav-links:not(.lp-burger-sheet-portaled) {
        display: none !important;
        position: absolute !important;
        width: 0 !important;
        flex: 0 0 0 !important;
    }
    html body #navbar#navbar.navbar .desktop-controls { display: none !important; }
    html body #navbar#navbar.navbar .logo-img { height: 44px !important; }

    /* burger: red skewed plate */
    html body #navbar#navbar.navbar .menu-toggle,
    html body #menu-toggle {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 46px !important;
        height: 42px !important;
        min-width: 46px !important;
        min-height: 42px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 1 !important;
        appearance: none !important;
    }
    html body #navbar#navbar.navbar .menu-toggle::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        transform: skew(-18deg) !important;
        border-radius: 4px !important;
        background: var(--red) !important;
        z-index: -1 !important;
    }
    html body #navbar#navbar.navbar .menu-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2.5px !important;
        margin: 2.5px 0 !important;
        background: #fff !important;
        border-radius: 0 !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    html body.menu-open #navbar#navbar.navbar .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg) !important; }
    html body.menu-open #navbar#navbar.navbar .menu-toggle span:nth-child(2) { opacity: 0 !important; }
    html body.menu-open #navbar#navbar.navbar .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg) !important; }
}

/* ---------- 3. SHEETCARD (burger menu, redesigned 2026-09-26) ---------- */
/* sheet-only parts hidden when #nav-links#nav-links sits in the desktop navbar */
#nav-links#nav-links:not(.lp-burger-sheet-portaled) .lp-sheet-head,
#nav-links#nav-links:not(.lp-burger-sheet-portaled) .lp-sheet-info { display: none !important; }

html body .lp-burger-backdrop {
    background: rgba(8, 10, 13, 0.62) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0 !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2147483000 !important;
}
html body.menu-open .lp-burger-backdrop { opacity: 1 !important; pointer-events: auto !important; }

@media (max-width: 768px) {
    html body #nav-links#nav-links.lp-burger-sheet-portaled,
    html body.menu-open #nav-links#nav-links.lp-burger-sheet-portaled {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        background:
            repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 110px),
            radial-gradient(420px 260px at 100% 0%, rgba(173, 3, 3, 0.2), transparent 70%),
            #14171c !important;
        border: 0 !important;
        border-top: 3px solid var(--red) !important;
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5) !important;
        transform: translateY(105%) !important;
        transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important;
        z-index: 2147483005 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    html body.menu-open #nav-links#nav-links.lp-burger-sheet-portaled { transform: translateY(0) !important; }
    /* grab handle */
    html body #nav-links#nav-links.lp-burger-sheet-portaled::before {
        content: "" !important;
        position: absolute !important;
        top: 9px !important;
        left: 50% !important;
        width: 40px !important;
        height: 4px !important;
        margin-left: -20px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.22) !important;
    }

    /* header: MENU + close */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-head,
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section,
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-info { width: 100% !important; align-self: stretch !important; }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-head {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
    }
    html body #nav-links#nav-links .lp-sheet-title {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: var(--red-bright) !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
    }
    html body #nav-links#nav-links .lp-sheet-bar {
        width: 24px !important;
        height: 4px !important;
        background: currentColor !important;
        transform: skew(-24deg) !important;
    }
    html body #nav-links#nav-links .lp-sheet-close {
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #fff !important;
        font-size: 1.05rem !important;
        cursor: pointer !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
    }
    html body #nav-links#nav-links .lp-sheet-close:active { background: var(--red) !important; transform: scale(0.94) !important; }

    /* sections */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .lp-sheet-label { display: none !important; }

    /* nav rows: numbered, big type */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        counter-reset: lpsheet !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li:not(.menu-item--book) { counter-increment: lpsheet !important; }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 17px 6px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
        font-size: 1.55rem !important;
        font-weight: 850 !important;
        letter-spacing: -0.03em !important;
        line-height: 1.1 !important;
        text-align: left !important;
        text-decoration: none !important;
        position: relative !important;
        z-index: 1 !important;
        transition: padding 0.2s ease, background 0.2s ease !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a::before {
        content: counter(lpsheet, decimal-leading-zero) !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 22px !important;
        flex-shrink: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #6b7485 !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        z-index: auto !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a::after {
        content: "\f061" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        margin-left: auto !important;
        color: #4b5363 !important;
        font-size: 0.85rem !important;
        transform: rotate(-45deg) !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a:active { background: rgba(255, 255, 255, 0.04) !important; }
    /* current page */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.current-menu-item > a,
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a.active {
        padding-left: 16px !important;
        background: linear-gradient(90deg, rgba(173, 3, 3, 0.18), transparent 75%) !important;
        box-shadow: inset 3px 0 0 var(--red) !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.current-menu-item > a::before,
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a.active::before { color: var(--red-bright) !important; }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.current-menu-item > a::after,
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li > a.active::after { color: var(--red-bright) !important; transform: none !important; }
    /* Contact row visible in the sheet */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li:has(> a[href="contact.html"]) { display: block !important; }

    /* Book Now: red skewed CTA */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.menu-item--book {
        border-bottom: 0 !important;
        margin-top: 20px !important;
        padding: 0 8px !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.menu-item--book > a {
        justify-content: center !important;
        gap: 10px !important;
        min-height: 56px !important;
        padding: 0 20px !important;
        font-size: 1.02rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.menu-item--book > a::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        width: auto !important;
        transform: skew(-18deg) !important;
        border-radius: 4px !important;
        background: var(--red) !important;
        box-shadow: 0 10px 24px rgba(173, 3, 3, 0.35) !important;
        z-index: -1 !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.menu-item--book > a::after {
        margin-left: 0 !important;
        color: #fff !important;
        transform: none !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section > .menu > li.menu-item--book > a:active::before { background: var(--red-deep) !important; }

    /* actions: BM/EN + Login chips (Contact already a row above) */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-section-actions { margin-top: 18px !important; }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border: 0 !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns > a[href="contact.html"] { display: none !important; }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns .btn {
        appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 46px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
        font-size: 0.9rem !important;
        font-weight: 750 !important;
        text-decoration: none !important;
        position: relative !important;
        z-index: 1 !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns .btn::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        transform: skew(-18deg) !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        box-shadow: none !important;
        z-index: -1 !important;
    }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns .btn:active::before { background: rgba(255, 255, 255, 0.18) !important; }
    html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns .lang-toggle-btn { flex: 0 0 88px !important; }

    /* info footer */
    html body #nav-links#nav-links.lp-burger-sheet-portaled > .lp-sheet-info {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        gap: 8px 16px !important;
        margin-top: 20px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #8e97a8 !important;
        font-size: 0.8rem !important;
    }
    html body #nav-links#nav-links .lp-sheet-info a { background: transparent !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; width: auto !important; justify-content: flex-start !important; color: #fff !important; font-weight: 750 !important; text-decoration: none !important; }
    html body #nav-links#nav-links .lp-sheet-info a i { color: #25d366 !important; }
    html body #nav-links#nav-links .lp-sheet-info i { margin-right: 4px !important; }
}

/* Book Now lives in ul.menu (mobile sheet only) — hidden in desktop navbar */
html body #navbar#navbar.navbar .nav-links:not(.lp-burger-sheet-portaled) .menu > li.menu-item--book { display: none !important; }


/* ---------- Booking-site extras ---------- */
/* Old booking-theme drawer bits that the main-site sheet does not have. */
html body #nav-links#nav-links .mobile-drawer-profile { display: none !important; }

/* Logged-in account button: same skewed outline plate as "Login". */
html body #navbar#navbar.navbar #user-account-trigger.user-account-trigger {
	background-color: transparent !important;
	outline: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-height: 42px !important;
	padding: 0 20px 0 10px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 0.86rem !important;
	font-weight: 750 !important;
	position: relative !important;
	z-index: 1 !important;
	cursor: pointer !important;
}
html body #navbar#navbar.navbar #user-account-trigger.user-account-trigger::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	transform: skew(-18deg) !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.13) !important;
	z-index: -1 !important;
}
html body #navbar#navbar.navbar #user-account-trigger.user-account-trigger:hover::before { background: rgba(255, 255, 255, 0.26) !important; }
html body #navbar#navbar.navbar #user-account-trigger .user-account-avatar {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
}
html body #navbar#navbar.navbar #user-account-trigger .user-account-name { color: #fff !important; font-size: 0.86rem !important; font-weight: 750 !important; }
html body #navbar#navbar.navbar #user-account-trigger .user-account-hint { display: none !important; }
html body #navbar#navbar.navbar #user-account-trigger .user-account-caret { color: rgba(255, 255, 255, 0.7) !important; font-size: 0.7rem !important; }

/* ---------- Bar width: same box as luqsports.com.my ----------
   Main site: .container = min(100% - 48px, 1200px) (32px on phones) with
   20px (14px) inner padding, so the logo sits at 140px on a 1440 screen. */
html body #navbar#navbar.navbar .nav-container {
	width: min(100% - 48px, 1200px) !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}
html body #navbar#navbar.navbar .logo-img {
	width: 52px !important;
	height: 52px !important;
	object-fit: contain !important;
}
/* Main site: BM + Login + Book Now = 320px of controls; keep the same box
   here (no BM) so the menu sits in the same place. */
@media (min-width: 769px) {
	html body #navbar#navbar.navbar .desktop-controls {
		min-width: 320px !important;
		justify-content: flex-end !important;
	}
}
@media (max-width: 768px) {
	/* style.css adds top:50% + translateY(-50%) on a relative button, which
	   pushes it ~10px low; let the flex row centre it like the main site. */
	html body #navbar#navbar.navbar #menu-toggle.menu-toggle {
		margin: 0 !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		align-self: center !important;
	}
	html body #navbar#navbar.navbar .nav-container {
		width: min(100% - 32px, 1200px) !important;
		padding: 0 14px !important;
	}
	html body #navbar#navbar.navbar .logo-img {
		width: 44px !important;
		height: 44px !important;
	}
}

/* ---------- Footer: luqsports.com.my ---------- */
html body footer.footer.footer {
	background: #101318 !important;
	color: #b8bfcc !important;
	padding: 64px 0 0 !important;
	margin: 0 !important;
	border: 0 !important;
	font-family: var(--font-body, 'Mona Sans', system-ui, sans-serif) !important;
}
html body footer.footer.footer > .container {
	width: min(100% - 48px, 1200px) !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}
html body footer.footer.footer .footer-grid {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
	gap: 40px !important;
	padding-bottom: 48px !important;
	margin: 0 !important;
}
html body footer.footer.footer .footer-brand .logo {
	display: inline-flex !important;
	background: none !important;
	padding: 0 !important;
}
html body footer.footer.footer .footer-brand .logo-img {
	filter: brightness(0) invert(1) !important;
	height: 40px !important;
	width: auto !important;
	margin: 0 0 16px !important;
}
html body footer.footer.footer .footer-brand p {
	margin: 0 !important;
	color: #b8bfcc !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	max-width: none !important;
}
html body footer.footer.footer .footer-title {
	margin: 0 0 18px !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	font-weight: 830 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	line-height: 1.4 !important;
}
html body footer.footer.footer .footer-title::after,
html body footer.footer.footer .footer-title::before {
	content: none !important;
}
html body footer.footer.footer .footer-links {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
html body footer.footer.footer .footer-links li {
	margin: 0 !important;
	padding: 0 !important;
}
html body footer.footer.footer .footer-links li::before {
	content: none !important;
}
html body footer.footer.footer .footer-links a {
	color: #b8bfcc !important;
	font-size: 0.9rem !important;
	text-decoration: none !important;
	padding: 0 !important;
	background: none !important;
	transition: color 0.2s !important;
}
html body footer.footer.footer .footer-links a:hover {
	color: var(--red-bright) !important;
}
html body footer.footer.footer .footer-contact-item {
	display: flex !important;
	gap: 12px !important;
	margin: 0 0 12px !important;
	color: #b8bfcc !important;
	font-size: 0.9rem !important;
	line-height: 1.6 !important;
}
html body footer.footer.footer .footer-contact-item i {
	color: var(--red-bright) !important;
	margin-top: 4px !important;
	width: auto !important;
}
html body footer.footer.footer .footer-bottom {
	display: block !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding: 22px 0 !important;
	margin: 0 !important;
	text-align: center !important;
	color: #8b93a3 !important;
	font-size: 0.82rem !important;
}
html body footer.footer.footer .copyright {
	margin: 0 !important;
	color: #8b93a3 !important;
	font-size: 0.82rem !important;
}
html body footer.footer.footer .social-links {
	display: flex !important;
	gap: 10px !important;
	margin-top: 16px !important;
	justify-content: flex-start !important;
}
html body footer.footer.footer .social-link {
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.07) !important;
	color: #fff !important;
	font-size: 0.8rem !important;
	transition: background 0.2s, color 0.2s !important;
}
html body footer.footer.footer .social-link:hover {
	background: var(--red) !important;
	color: #fff !important;
}
@media (max-width: 768px) {
	html body footer.footer.footer > .container {
		width: min(100% - 32px, 1200px) !important;
	}
	html body footer.footer.footer .footer-grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
}

/* ---------- LatePoint brand colour: red, not LatePoint's default blue ----------
   LatePoint prints --latepoint-brand-primary:#1d7bff (its "blue" scheme) and
   uses it for ~140 things: buttons, selected slots, focus, lightboxes,
   reschedule calendar. Loaded on every page, so the portal gets it too. */
html:root,
html body .latepoint-w,
html body .latepoint-lightbox-w,
html body .latepoint-summary-w,
html body .latepoint-booking-form-element {
	--latepoint-brand-primary: #AD0303 !important;
	--latepoint-timeslot-selected-color: #AD0303 !important;
}

/* Logged-in account button: keep the controls box at the main site's 320px
   (BM + Login + Book Now) so the menu does not shift; long names truncate. */
html body #navbar#navbar.navbar #user-account-trigger.user-account-trigger {
	max-width: 190px !important;
}
html body #navbar#navbar.navbar #user-account-trigger .user-account-meta {
	min-width: 0 !important;
	overflow: hidden !important;
}
html body #navbar#navbar.navbar #user-account-trigger .user-account-name {
	display: block !important;
	max-width: 110px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
html body #navbar#navbar.navbar #user-account-trigger .user-account-avatar,
html body #navbar#navbar.navbar #user-account-trigger .user-account-avatar img {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	flex: 0 0 28px !important;
}

/* Buttons: main site uses normal tracking and 0.9em icons (booking style.css
   had -0.01em and full-size icons, so Login/Book Now looked slightly off). */
html body #navbar#navbar.navbar .desktop-controls .btn,
html body #navbar#navbar.navbar .desktop-controls .btn-nav,
html body #navbar#navbar.navbar .desktop-controls .btn-nav-outline,
html body #navbar#navbar.navbar .desktop-controls .control-btn,
html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns .btn {
	letter-spacing: normal !important;
}
html body #navbar#navbar.navbar .desktop-controls .btn i,
html body #navbar#navbar.navbar .desktop-controls .btn-nav-outline i,
html body #nav-links#nav-links.lp-burger-sheet-portaled .mobile-menu-btns .btn i {
	font-size: 0.9em !important;
	width: auto !important;
	margin: 0 !important;
}
html body #navbar#navbar.navbar .desktop-controls {
	gap: 8px !important;
}

/* Footer legal links — same as luqsports.com.my (.footer-legal). */
footer.footer.footer .footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
footer.footer.footer .footer-legal li {
	margin: 0;
	padding: 0;
	list-style: none;
}
footer.footer.footer .footer-legal li::before {
	content: none;
}
footer.footer.footer .footer-legal a {
	color: #aab3c5;
	font-size: 0.84rem;
	font-weight: 650;
	text-decoration: none;
	transition: color 0.2s;
}
footer.footer.footer .footer-legal a:hover {
	color: #ffffff;
}