/**
 * HappyHour.Best - Design Improvements
 * Frontend design enhancements for better UX, accessibility, and visual polish
 * Date: 2026-01-09
 * Version: 3.1
 */

/* =========================================
   BRAND COLOR VARIABLES
   ========================================= */
:root {
    /* Primary Brand Colors */
    --hh-orange-primary: rgb(255, 107, 0);
    /* #FF6B00 - Main orange */
    --hh-orange-hover: rgb(230, 95, 0);
    /* #E65F00 - Darker hover */
    --hh-orange-dark: #B45A1A;
    /* Dark variant */
    --hh-orange-light: #FF8C42;
    /* Light variant */

    /* Neutrals */
    --hh-white: #FFFFFF;
    --hh-black: #000000;
    --hh-dark-bg: #0D1B2A;
    /* Header background */
    --hh-light-gray: #EEEEEE;
    /* Search bar background */
    --hh-medium-gray: #7F7F7F;
    /* Label text */
    --hh-border-gray: #DCDCDC;
    /* Dividers */
    --hh-text-dark: rgb(51, 51, 51);
    /* Primary text */
    --hh-text-light: rgb(90, 105, 120);
    /* Secondary text */

    /* Semantic Colors */
    --hh-success: #28a745;
    --hh-error: #dc3545;
    --hh-warning: #ffc107;
    --hh-info: #17a2b8;

    /* Shadows & Effects */
    --hh-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --hh-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --hh-shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.1);
    --hh-shadow-orange: 0 4px 12px rgba(255, 107, 0, 0.4);
}

/* =========================================
   1. SEARCH BUTTON - Icon + Text (DESKTOP ONLY)
   ========================================= */

@media (min-width: 992px) {

    .lp-search-btn,
    input.lp-search-btn,
    button.lp-search-btn,
    button[type="submit"].lp-search-btn {
        background: rgb(255, 107, 0) !important;
        border: none !important;
        border-radius: 0 4px 4px 0 !important;
        padding: 14px 24px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: white !important;
        text-indent: 0 !important;
        min-height: 48px !important;
        min-width: 65px !important;
        position: relative !important;
        overflow: visible !important;
    }

    .lp-search-btn .lp-search-icon {
        font-size: 18px !important;
        color: white !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .lp-search-btn .lp-search-text {
        color: white !important;
        font-weight: 600 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* Hover state with lift effect */
.lp-search-btn:hover,
input.lp-search-btn:hover,
button.lp-search-btn:hover {
    background: rgb(230, 95, 0) !important;
    /* Darker orange */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4) !important;
}

/* Active/Click state */
.lp-search-btn:active,
input.lp-search-btn:active,
button.lp-search-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.3) !important;
}

/* Ripple effect on click */
.lp-search-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
    z-index: 1 !important;
}

.lp-search-btn:active::after {
    width: 300px !important;
    height: 300px !important;
}

/* Focus state for accessibility */
.lp-search-btn:focus,
input.lp-search-btn:focus,
button.lp-search-btn:focus {
    outline: 2px solid rgb(255, 107, 0) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .lp-search-btn .lp-search-text {
        display: none !important;
        /* Hide text on mobile, show icon only */
    }

    .lp-search-btn {
        padding: 14px !important;
        min-width: 48px !important;
    }
}

/* =========================================
   2. HEADER LINK FONT SIZES (DESKTOP ONLY)
   ========================================= */

@media (min-width: 992px) {

    .lp-header-style-classic .header-nav li a,
    .header-nav li a,
    .lp-header .header-nav li a,
    header .header-nav li a,
    .lp-top-header-right-links a {
        font-size: 15px !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
    }
}

/* Mobile header links */
@media (max-width: 991px) {

    .home .header-nav,
    .home .lp-top-bar,
    .home .lp-top-header-right-links {
        display: none !important;
    }

    .lp-header-style-classic .header-nav li a,
    .header-nav li a {
        font-size: 16px !important;
    }
}

/* =========================================
   3. SEARCH INPUT PLACEHOLDER - Better Contrast
   ========================================= */

.lp-search-input::placeholder,
input.lp-search-input::placeholder,
.lp-search-form input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
    /* Better contrast than default light gray */
    font-style: italic !important;
    opacity: 1 !important;
}

/* Firefox specific */
.lp-search-input::-moz-placeholder,
input.lp-search-input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* =========================================
   4. FORM INPUT FOCUS STATES - Clear Visual Feedback
   ========================================= */

.lp-search-input:focus,
input.lp-search-input:focus,
.lp-search-form input:focus,
.lp-search-form select:focus {
    outline: none !important;
    border: 2px solid rgb(255, 107, 0) !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}

/* Remove browser default focus outline */
.lp-search-form input:focus-visible,
.lp-search-form select:focus-visible {
    outline: none !important;
}

/* =========================================
   5. HERO TITLE - Text Shadow for Better Contrast
   ========================================= */

/* Hero title on image background */
.lp-hero-title,
.hero-title,
.elementor-heading-title,
h1.entry-title,
.banner-title h1,
.banner-title {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Specific to homepage hero */
.lp-header-overlay .container h1,
.lp-header-overlay h1 {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Add gradient overlay to hero section for better text contrast */
.lp-header-overlay::before,
.banner-header-overlay::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.6) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.lp-header-overlay .container,
.banner-header-overlay .container {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================
   6. SUBTITLE TEXT - Darker for Better Readability
   ========================================= */

/* Section subtitles like "Cities You Must Explore This Summer" */
.section-subtitle,
.elementor-widget-text-editor p,
.lp-section-subtitle,
.banner-subtitle {
    color: rgb(90, 105, 120) !important;
    /* Darker gray for better contrast */
}

/* Specific to homepage sections */
.elementor-section .elementor-text-editor {
    color: rgb(90, 105, 120) !important;
}

/* =========================================
   7. SEARCH FORM LABELS - Better Styling
   ========================================= */

.input-group-addon.lp-border {
    font-weight: 600 !important;
    color: rgb(51, 51, 51) !important;
    font-size: 14px !important;
}

/* =========================================
   8. ACCESSIBILITY IMPROVEMENTS
   ========================================= */

/* Screen reader only text */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Skip to main content link for keyboard navigation */
.skip-to-content {
    position: absolute !important;
    top: -40px !important;
    left: 0 !important;
    background: rgb(255, 107, 0) !important;
    color: white !important;
    padding: 8px !important;
    z-index: 100000 !important;
    text-decoration: none !important;
}

.skip-to-content:focus {
    top: 0 !important;
}

/* Ensure touch targets are at least 44x44px on mobile */
@media (max-width: 768px) {

    .lp-search-btn,
    button,
    a.button,
    input[type="submit"],
    .header-nav li a {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* =========================================
   9. MICRO-INTERACTIONS - Loading States
   ========================================= */

/* Loading spinner positioning */
.searchloading {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.lp-search-bar-right.loading .searchloading {
    opacity: 1 !important;
    z-index: 10 !important;
}

.lp-search-bar-right.loading .lp-search-btn {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* =========================================
   10. RESPONSIVE IMPROVEMENTS
   ========================================= */

/* Ensure form elements are properly sized on mobile */
@media (max-width: 768px) {

    .lp-search-form input,
    .lp-search-form select {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
    }

    /* Better spacing for mobile search form */
    .lp-search-bar.classic-search .form-group {
        margin-bottom: 12px !important;
    }
}

/* =========================================
   11. FORGOT PASSWORD & MODAL TEXT - Increase Size
   ========================================= */

.modal-body a,
.modal-body p,
.forgot-password-link,
.lp-modal-text {
    font-size: 14px !important;
    /* Up from 12px */
    line-height: 1.5 !important;
}

/* =========================================
   12. SMOOTH TRANSITIONS
   ========================================= */

/* Add smooth transitions to all interactive elements */
a,
button,
input,
select {
    transition: all 0.2s ease !important;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   13. SEARCH BAR FIXES - Specific Issues
   ========================================= */

/* Fix: Position search icon INSIDE button visually */
.lp-search-bar-right {
    position: relative !important;
}

.lp-search-bar-right .lp-search-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    color: white !important;
    font-size: 20px !important;
    pointer-events: none !important;
    /* Click goes through to button */
}

/* Ensure button is properly sized and positioned */
.lp-search-bar-right .lp-search-btn {
    position: relative !important;
    z-index: 10 !important;
}

/* Fix: Remove any pseudo-elements that might show as symbols */
.input-group-addon.lp-border::before,
.input-group-addon.lp-border::after {
    content: none !important;
    display: none !important;
}

/* Fix: Improve search input visibility and prevent text cutoff */
.lp-search-input,
input.lp-search-input {
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow: visible !important;
    text-overflow: ellipsis !important;
}

/* Ensure placeholder is fully visible */
.lp-search-input::placeholder {
    overflow: visible !important;
}

/* Fix: Hide any decorative icons in labels */
.input-group-addon i,
.input-group-addon .fa,
.input-group-addon [class*="icon"] {
    display: none !important;
}

/* Fix: Ensure label text is visible */
.input-group-addon.lp-border {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: rgb(51, 51, 51) !important;
}

/* Fix: Adjust form group spacing to prevent overlap */
.lp-search-bar .form-group {
    margin-right: 0 !important;
}

/* Fix: Ensure Where dropdown doesn't overlap */
.lp-location-search .chosen-container {
    width: 100% !important;
    max-width: 250px !important;
}

/* =========================================
   14. Z-INDEX MANAGEMENT - Global Hierarchy
   ========================================= */

/*
   LAYER SYSTEM:
   -1     - Behind content (background decorations)
   1      - Base layer (backgrounds, containers)
   10     - Content layer (text, inputs, cards)
   100    - Interactive elements (buttons, dropdowns)
   500    - Overlays (modals, tooltips, popovers)
   1000   - Icons/decorations (always visible)
   5000   - Fixed headers/navigation
   9999   - Critical UI (loading spinners, alerts)
*/

/* Base layers */
.lp-search-bar,
.form-group {
    z-index: 1 !important;
}

/* Content elements */
.lp-search-input,
input:not([type="submit"]),
select {
    z-index: 10 !important;
}

/* Interactive elements - buttons */
.lp-search-btn {
    z-index: 100 !important;
}

/* Dropdowns and autocomplete */
.chosen-drop,
.ui-autocomplete,
#input-dropdown {
    z-index: 500 !important;
}

/* Icons and decorations - always visible */
.lp-search-icon,
.fa-search,
i.fa-magnifying-glass {
    z-index: 1000 !important;
}

/* Fixed header */
.lp-header,
header.lp-header-page {
    z-index: 5000 !important;
}

/* Modals and critical UI */
.modal,
.loading-overlay,
.notification,
.searchloading {
    z-index: 9999 !important;
}

/* =========================================
   15. MOBILE RESPONSIVE DESIGN
   ========================================= */

/* Tablets and below (768px) */
@media (max-width: 768px) {

    /* ===== SEARCH BAR - MOBILE ===== */

    /* Stack search fields vertically */
    .lp-search-bar.classic-search {
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Full width form groups */
    .lp-search-bar .form-group {
        width: 100% !important;
        margin-bottom: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--hh-border-gray) !important;
    }

    /* Remove bottom border from last field */
    .lp-search-bar .form-group:last-of-type {
        border-bottom: none !important;
    }

    /* Search button - full width on mobile */
    .lp-search-bar .form-group.pull-right {
        width: 100% !important;
        float: none !important;
    }

    .lp-search-btn {
        width: 100% !important;
        border-radius: 0 0 4px 4px !important;
        /* Round bottom corners only */
        min-height: 48px !important;
    }

    /* Hide search button text on mobile, show icon only */
    .lp-search-btn .lp-search-text {
        display: none !important;
    }

    .lp-search-btn .lp-search-icon {
        font-size: 22px !important;
        /* Larger icon on mobile */
    }

    /* ===== HEADER BUTTONS - MOBILE ===== */

    /* Larger touch targets */
    .header-list-icon-st6,
    .lp-join-now {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    /* Reduce padding on mobile for better fit */
    .header-list-icon-st6 {
        padding: 8px 16px !important;
    }

    /* ===== INPUT FIELDS - MOBILE ===== */

    /* Prevent iOS zoom on focus */
    .lp-search-input,
    input.lp-search-input,
    select {
        font-size: 16px !important;
    }

    /* Larger labels on mobile */
    .input-group-addon.lp-border {
        font-size: 15px !important;
    }

    /* Increase header link font size on mobile */
    .header-nav li a,
    .lp-header .header-nav li a {
        font-size: 16px !important;
    }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {

    /* Even more compact spacing */
    .header-list-icon-st6 {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .lp-join-now {
        padding: 0 12px !important;
    }

    /* Reduce icon gap on very small screens */
    .header-list-icon-st6 {
        gap: 4px !important;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {

    /* Reduce heights in landscape for more content */
    .lp-search-bar .form-group {
        height: 40px !important;
    }

    .lp-search-btn {
        min-height: 40px !important;
    }
}

/* =========================================
   16. FAVORITE BUTTON & TITLE BAR (CRITICAL OVERRIDES)
   ========================================= */

/* Force Visibility of Favorite Button */
.hh-action-btn.add-to-fav,
button.add-to-fav,
.add-to-fav.icon-only {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
}

.hh-action-btn.add-to-fav i {
    font-size: 16px !important;
    color: #FF6B00 !important;
}

/* Title Bar - Layout Container */
.hh-title-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.hh-title-info {
    flex: 1 !important;
    min-width: 280px !important;
}

.hh-title-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* Action Buttons (Share, Save) */
.hh-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.hh-action-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
    color: #fff !important;
}

.hh-action-btn i {
    font-size: 16px !important;
    color: #FF6B00 !important;
    /* Orange Icon Default */
}

/* Icon Only Variant */
.hh-action-btn.icon-only {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Active State (Saved) */
.hh-action-btn.active,
.hh-action-btn.saved {
    background: rgba(255, 107, 0, 0.15) !important;
    border-color: #FF6B00 !important;
    color: #FF6B00 !important;
}

.hh-action-btn.active i,
.hh-action-btn.saved i {
    color: #FF6B00 !important;
}

/* =========================================
   17. PINK STAR RATINGS (CRITICAL OVERRIDES)
   ========================================= */

/* Single Listing Header Rating */
.hh-rating i {
    color: #FF0066 !important;
    /* Hot Pink */
}

/* Global Star Rating Overrides for ListingPro */
.listing-rate i,
.lp-rating-stars i,
.lp-star-rating i,
.fa-star,
.fa-star-half-o,
.lr-star,
.lp-star-active,
.rating-symbol-foreground,
.lp-listing-stars i,
.rating-symbol span,
.review-form-rating i,
.lp-review-form-stars i {
    color: #FF0066 !important;
    fill: #FF0066 !important;
}

/* Specific fix for Rating Input (often uses span or :before) */
.rating-symbol-foreground>span {
    color: #FF0066 !important;
}

/* =========================================
   18. HOMEPAGE SEARCH BAR REGRESSION FIXES
   ========================================= */

/* Fix: Remove orange dot artifact from "What" field */
.lp-search-bar li::before,
.lp-search-bar .input-group-addon::before,
.input-group-addon.lp-border::before,
.lp-search-form .form-group::before {
    content: none !important;
    display: none !important;
}

.lp-search-bar ul,
.lp-search-bar li {
    list-style: none !important;
}

/* Fix: "Where" dropdown icon cut off */
.lp-location-search {
    overflow: visible !important;
    flex: 1 !important;
}

.lp-location-search .chosen-container {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
}

.lp-location-search .chosen-single {
    padding-right: 30px !important;
    /* Space for arrow */
}

.lp-location-search .chosen-single div {
    display: block !important;
    width: 20px !important;
    right: 5px !important;
}

/* =========================================
   19. PAGINATION STYLING (FALLBACK)
   ========================================= */

.hh-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.hh-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.hh-pagination .page-numbers.current {
    background: #FF6B00;
    border-color: #FF6B00;
    color: #fff;
}

.hh-pagination .page-numbers:hover:not(.current) {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* =========================================
   20. PREMIUM NAVIGATION DROPDOWNS
   ========================================= */

/*
 * CONSOLIDATED DROPDOWN FIX (per plan):
 * - Only the UL gets background color (#0D1B2A)
 * - All li and a elements are TRANSPARENT
 * - .lp-menu-container gets overflow: visible
 */

/* ===== CONTAINER OVERFLOW FIX ===== */
.lp-menu-container,
.lp-menu-container .lp-menu,
.lp-menu-container .menu,
header .lp-menu-container {
    overflow: visible !important;
}

/* ===== USER MENU DROPDOWN (UL - the ONLY element with background) ===== */
.lp-user-menu,
ul.lp-user-menu,
.lp-join-now .lp-user-menu,
.lp-join-user-info .lp-user-menu,
header .lp-user-menu {
    background: #0D1B2A !important;
    background-color: #0D1B2A !important;
    border: none !important;
    border-top: 3px solid #FF6B00 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 0 8px 8px !important;
    /* HOVER TUNNEL FIX: Padding + negative margin creates overlap */
    padding: 10px 0 !important;
    padding-top: 15px !important;
    margin-top: -5px !important;
    min-width: 220px !important;
    z-index: 99999 !important;
    height: auto !important;
    overflow: visible !important;
}

/* ===== HOVER BRIDGE: Invisible element to maintain hover state ===== */
.lp-user-menu::before,
ul.lp-user-menu::before,
.lp-join-now .lp-user-menu::before,
.lp-join-user-info .lp-user-menu::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -15px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
    /* This creates an invisible hover area above the dropdown */
}

/* ===== NAV MENU DROPDOWNS (Cities, etc. - UL gets background) ===== */
.lp-menu-container .sub-menu,
.lp-menu-container .children,
.menu ul.sub-menu,
.menu ul.children,
.lp-menu ul.sub-menu,
.lp-menu .sub-menu,
header .menu .sub-menu {
    background: #0D1B2A !important;
    background-color: #0D1B2A !important;
    border: none !important;
    border-top: 3px solid #FF6B00 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 10px 0 !important;
    /* GEOMETRY FIX: Wider to fit "Richmond, VA" etc. */
    min-width: 350px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 99999 !important;
    /* Alignment: Prevent spill off screen */
    right: 0 !important;
    left: auto !important;
}

/* ===== ALL LI ELEMENTS - TRANSPARENT ===== */
.lp-user-menu li,
ul.lp-user-menu li,
.lp-join-now .lp-user-menu li,
.lp-join-user-info .lp-user-menu li,
header .lp-user-menu li,
.lp-menu-container .sub-menu li,
.lp-menu-container .children li,
.menu ul.sub-menu li,
header .menu .sub-menu li {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 0 !important;
    padding: 0 !important;
    /* GEOMETRY FIX: Prevent text wrapping */
    white-space: nowrap !important;
}

.lp-user-menu li:last-child,
.lp-menu-container .sub-menu li:last-child,
.menu ul.sub-menu li:last-child {
    border-bottom: none !important;
}

/* ===== ALL A ELEMENTS - TRANSPARENT + ORANGE TEXT (for visibility) ===== */
.lp-user-menu li a,
ul.lp-user-menu li a,
.lp-join-now .lp-user-menu li a,
.lp-join-user-info .lp-user-menu li a,
header .lp-user-menu li a,
.juname .lp-user-menu li a,
li.juname .lp-user-menu li a {
    background: transparent !important;
    background-color: transparent !important;
    /* TEXT VISIBILITY FIX: Orange text per user request */
    color: #FF6B00 !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: block !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Nav Menu Links - Keep white text */
.lp-menu-container .sub-menu li a,
.lp-menu-container .children li a,
.menu ul.sub-menu li a,
header .menu .sub-menu li a {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: block !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* ===== HOVER STATES ===== */
.lp-user-menu li a:hover,
.lp-user-menu li:hover>a,
header .lp-user-menu li a:hover,
.lp-menu-container .sub-menu li a:hover,
.lp-menu-container .sub-menu li:hover>a,
.menu ul.sub-menu li a:hover,
.menu ul.sub-menu li:hover>a,
header .menu .sub-menu li a:hover {
    background: rgba(255, 107, 0, 0.15) !important;
    background-color: rgba(255, 107, 0, 0.15) !important;
    color: #FF6B00 !important;
    padding-left: 28px !important;
}

/* ===== REMOVE WHITE TRIANGLES (::after only - ::before used for hover bridge) ===== */
.lp-user-menu::after,
ul.lp-user-menu::after,
.menu ul.sub-menu::before,
.menu ul.sub-menu::after,
.menu ul.children::before,
.menu ul.children::after,
.lp-menu-container .sub-menu::before,
.lp-menu-container .sub-menu::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    border: none !important;
}

/* ===== REMOVE LEFT ACCENT BAR ===== */
.lp-user-menu li>a::before,
ul.lp-user-menu li>a::before,
.menu ul.sub-menu li>a::before,
header .menu .sub-menu li>a::before {
    display: none !important;
    width: 0 !important;
}

/* ===== ICONS ===== */
.lp-user-menu li a i,
ul.lp-user-menu li a i {
    color: #FF6B00 !important;
    margin-right: 10px !important;
    opacity: 0.8;
}

.lp-user-menu li a:hover i,
ul.lp-user-menu li a:hover i {
    opacity: 1;
}

/* ===== WRAPPER ELEMENTS - ALL TRANSPARENT ===== */
.lp-join-now,
.lp-join-now.after-login,
.lp-join-user-info,
.lp-join-now>ul,
.lp-join-now.after-login>ul,
.lp-join-user-info>ul,
.lp-join-now>ul>li,
.lp-join-now.after-login>ul>li,
.lp-join-user-info>ul>li {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===== ADDITIONAL SPECIFICITY FOR STUBBORN ELEMENTS ===== */

/* Hover state on dropdown container - ensure UL has background */
.lp-join-user-info li:hover>.lp-user-menu,
.lp-join-now li:hover>.lp-user-menu {
    background: #0D1B2A !important;
    background-color: #0D1B2A !important;
}

/* list-style-none variant used by theme */
.lp-user-menu.list-style-none {
    background: #0D1B2A !important;
    background-color: #0D1B2A !important;
}

.lp-user-menu.list-style-none li {
    background: transparent !important;
    background-color: transparent !important;
}

.lp-user-menu.list-style-none li a {
    background: transparent !important;
    background-color: transparent !important;
    color: #FF6B00 !important;
}

/* ===== JUNAME CONTAINER FIX (White Box Bug) ===== */
/* The .juname li wraps the user avatar and contains the dropdown */
li.juname,
.lp-join-now li.juname,
.lp-join-user-info li.juname,
.lp-join-now-v2 li.juname {
    background: transparent !important;
    background-color: transparent !important;
}

/* Target the dropdown UL inside .juname */
li.juname>ul,
li.juname>.lp-user-menu,
.juname>ul.lp-user-menu,
.lp-join-user-info .juname>ul,
.lp-join-now .juname>ul {
    background: #0D1B2A !important;
    background-color: #0D1B2A !important;
}

/* Also target via class chain for specificity */
.lp-join-now-v2 .juname .lp-user-menu,
.lp-join-user-info .juname .lp-user-menu {
    background: #0D1B2A !important;
    background-color: #0D1B2A !important;
}

/* =========================================
   21. HOMEPAGE SEARCH BAR FIXES (DESKTOP ONLY)
   ========================================= */

@media (min-width: 992px) {
    .lp-search-bar-right {
        position: relative !important;
    }

    .lp-search-bar-right .lp-search-icon {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        color: #fff !important;
        opacity: 1 !important;
        z-index: 20 !important;
        pointer-events: none !important;
        font-size: 18px !important;
        visibility: visible !important;
        display: block !important;
    }

    .lp-search-btn {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
        background-color: #FF6B00 !important;
        color: transparent !important;
    }
}

/* --- "WHAT" SECTION ARTIFACTS --- */
/* The phantom vertical bar often comes from these */
.lp-search-bar-view1 .form-group::before,
.lp-search-bar-view1 .form-group::after,
.lp-search-bar-view1 .input-group-addon::before,
.lp-search-bar-view1 .input-group-addon::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: transparent !important;
}

/* Remove left border on the label itself if that's the "bar" */
.lp-search-bar-view1 .input-group-addon {
    border-left: none !important;
    box-shadow: none !important;
}

/* --- "WHERE" SECTION CLIPPING & ARTIFACTS --- */
/* Fix top pixel/border */
.lp-location-search .input-group-addon {
    border-top: none !important;
    border-right: none !important;
}

/* Fix Clipping - The chain of parents must allow overflow */
.lp-search-bar-view1,
.lp-search-bar-view1 .form-group,
.lp-location-search,
.lp-location-search .chosen-container,
.lp-location-search .chosen-drop {
    overflow: visible !important;
}

/* Ensure the chosen container spans full width */
.lp-location-search .chosen-container {
    width: 100% !important;
}

/* =========================================
   22. HOMEPAGE SEARCH BAR FIXES - BROAD SPECTRUM (2026-01-29)
   Universal wrapper: .lp-search-bar (covers view 1, 2, 3...)
   Issues: Search icon invisible, "What" artifacts, "Where" clipping/pixel
   ========================================= */

/* Universal Search Bar Fixes */
.lp-search-bar .lp-search-bar-right {
    position: relative !important;
}

/* Force Icon Visibility & Position */
.lp-search-bar .lp-search-icon {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    color: #fff !important;
    opacity: 1 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
    font-size: 18px !important;
}

/* ULTIMATE FALLBACK: Use background SVG for search icon */
/* Font icon approach failed - using inline SVG data URI */
html body .lp-search-bar .lp-search-bar-right .lp-search-icon,
body .lp-search-bar.classic-search .lp-search-bar-right i.lp-search-icon,
.lp-search-bar .lp-search-icon.fa-solid.fa-magnifying-glass {
    /* Hide the broken font icon pseudo-element */
    font-size: 0 !important;
    /* Add background SVG magnifying glass */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Make sure pseudo-element doesn't interfere */
html body .lp-search-bar .lp-search-bar-right .lp-search-icon::before,
body .lp-search-bar.classic-search .lp-search-bar-right i.lp-search-icon::before,
.lp-search-bar .lp-search-icon.fa-solid.fa-magnifying-glass::before {
    display: none !important;
    content: none !important;
}

/* Fix Button Appearance */
.lp-search-bar .lp-search-btn {
    background: #FF6B00 !important;
    color: transparent !important;
    /* Hide text value if present */
    z-index: 10 !important;
}

/* CRITICAL: Icon must be ABOVE the button (button has z-index: 100) */
html body .lp-search-bar .lp-search-bar-right .lp-search-icon,
body .lp-search-bar.classic-search .lp-search-bar-right i.lp-search-icon {
    z-index: 200 !important;
}

/* Fix "a" artifact in What section */
/* The input overlaps the label - ensure clean separation */
.lp-search-bar .lp-suggested-search .input-group-addon.lp-border,
.lp-search-bar .input-group-addon.lp-border {
    position: relative !important;
    z-index: 5 !important;
    background: #fff !important;
    padding-left: 15px !important;
    padding-right: 10px !important;
    overflow: hidden !important;
}

.lp-search-bar .lp-suggested-search .input-group-addon.lp-border::before,
.lp-search-bar .input-group-addon::before {
    display: none !important;
    content: none !important;
}

/* Ensure search input doesn't overlap label visually */
.lp-search-bar .lp-suggested-search input.lp-search-input,
.lp-search-bar.classic-search .lp-suggested-search input.lp-search-input {
    padding-left: 80px !important;
    /* Make room for the "What?" label */
    text-indent: 0 !important;
}

/* Ensure "What?" label has proper width */
.lp-search-bar .lp-suggested-search .input-group-addon.lp-border {
    min-width: 65px !important;
}

/* Fix ">" artifact in Where section - crosshairs icon rendering broken */
/* NUCLEAR OPTION: Completely hide the broken crosshairs element */
html body .lp-search-bar.classic-search .form-group i.fa-crosshairs,
html body .lp-search-bar .lp-location-search i.fa-crosshairs,
.lp-search-bar.classic-search .lp-location-search .fa-crosshairs,
.lp-search-bar .fa-crosshairs,
.lp-search-bar i.fa-crosshairs {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Add location icon via parent element instead */
.lp-search-bar .ui-widget.border-dropdown {
    position: relative !important;
}

.lp-search-bar .ui-widget.border-dropdown::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666666' d='M256 0c17.7 0 32 14.3 32 32V66.7C368.4 80.1 431.9 143.6 445.3 224H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H445.3C431.9 368.4 368.4 431.9 288 445.3V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V445.3C143.6 431.9 80.1 368.4 66.7 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H66.7C80.1 143.6 143.6 80.1 224 66.7V32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
}

/* Fix "a" artifact - Hide broken FA6 icons that render as fallback text */
/* The category icons in the dropdown (fa-solid fa-utensils, etc.) may render broken */
.lp-search-bar .icons-search-cat {
    font-size: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Override any FA6 ::before that's rendering empty */
.lp-search-bar .fa-solid::before,
.lp-search-bar .icons-search-cat::before {
    display: none !important;
    content: none !important;
}

/* Remove Borders/Artifacts */
.lp-search-bar .input-group-addon,
.lp-search-bar .lp-border {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Kill Pseudo-elements */
.lp-search-bar .form-group::before,
.lp-search-bar .form-group::after,
.lp-search-bar .input-group-addon::before,
.lp-search-bar .input-group-addon::after {
    display: none !important;
    content: none !important;
}

/* Fix Clipping for Dropdowns */
.lp-search-bar,
.lp-search-bar .form-group,
.lp-search-bar .lp-location-search,
.lp-search-bar .chosen-container {
    overflow: visible !important;
}

.lp-search-bar .chosen-container {
    width: 100% !important;
}