/* ==========================================================================
   1. GLOBAL & UTILITIES
   ========================================================================== */

/* Fix line-height for Select2 dropdown elements */
.select2-container ul li {
    line-height: 20px !important;
}

/* Glassmorphism utility class */
.glass {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(5.1px) saturate(100%) brightness(100%);
    -webkit-backdrop-filter: blur(5.1px) saturate(100%) brightness(100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
}

/* Base override to kill margins on content areas */
.content-area {
    margin: 0 !important;
}


/* ==========================================================================
   2. HEADER, NAVIGATION & FOOTER
   ========================================================================== */

/* Make 1st items in megamenu not change color on hover */
.sub-menu > li#menu-item-328 > a:hover,
.sub-menu > li#menu-item-329 > a:hover,
.sub-menu > li#menu-item-334 > a:hover,
.sub-menu > li#menu-item-335 > a:hover,
.sub-menu > li#menu-item-336 > a:hover,
.sub-menu > li#menu-item-337 > a:hover,
.sub-menu > li#menu-item-688 > a:hover,
.sub-menu > li#menu-item-693 > a:hover {
    background: #1A202C;
}

/* Style specific megamenu header links */
.sub-menu > li#menu-item-688 > a,
.sub-menu > li#menu-item-693 > a {
    font-weight: 700;
    color: #9fb2c5;
    text-transform: uppercase;
    cursor: default;
}

/* Footer Navigation and Sub-menus */
footer .collapse-sub-navigation ul.menu li a {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    border-bottom: 1px solid #2b5a9d;
    font-size: 16px;
}
footer .collapse-sub-navigation ul.menu .drawer-nav-drop-wrap .drawer-sub-toggle {
    border-left: 1px solid #2b5a9d;
    border-bottom: 1px solid #2b5a9d;
}
footer .drawer-nav-drop-wrap button {
    color: #65A4FF !important;
}
footer .widget-area .widget-title {
    font-size: 16px;
}


/* ==========================================================================
   3. RIDES DASHBOARD & SINGLE RIDE LAYOUT
   ========================================================================== */

/* Rides dashboard page background and spacing */
.page-id-2068 .content-area {    
    margin: 0 !important;
}
.page-id-2068 .content-container,
.page-id-2032 .content-area {
    padding: 0px;
}

/* Reduce gap between Kadence main content and sidebar (Desktop) */
@media screen and (min-width: 1025px) {                
    .single-ride.has-sidebar .content-container,
    .page-id-2068.has-sidebar .content-container {                
        grid-gap: 20px;  
        align-items: stretch;
    }              
}

/* Stack content and remove padding (Mobile) */
@media (max-width: 767px) {
    .single-ride .content-container,
    .single-rides .content-container,
    .page-id-2068 .content-container {
        display: flex;
        flex-direction: column-reverse;
        padding: 0;
    }
}

/* Single Ride page inner layout constraints */
.single-ride :where(.wp-block-columns.is-layout-flex) {
    gap: 1em;
}
.single-ride .single-content .wp-block-columns {
    margin-bottom: var(--global-md-spacing);
    margin-top: 0;
    border: 1px solid #b2c8fb;
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 9px;
    background: #f0f6fb;
}


/* ==========================================================================
   4. KADENCE TABS & POST GRID CAROUSEL
   ========================================================================== */

/* Dashboard Tabs Layout */
.page-id-2068 .kt-tabs-title-list {
    justify-content: center;
    margin-bottom: 30px;
}
.page-id-2068 .kt-title-item {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.page-id-2068 .wp-block-kadence-tabs{
  margin-top: -53px;
}

.page-id-2068 .wp-block-kadence-tabs .kt-tabs-id2068_1034d4-9d > .kt-tabs-title-list li {
  z-index: 10;
}

.page-id-2068 .wp-block-kadence-tabs .kt-tabs-title-list{
  padding-right: 10px !important;
}


@media (max-width: 767px) {
 .page-id-2068 .wp-block-kadence-tabs {
	margin-top: -47px;
}
.page-id-2068 .kt-tabs-content-wrap {
  margin-top: 16px;
}
  
}


/* Post Grid / Carousel Mobile Adjustments */
@media screen and (max-width: 782px) {
    /* Create a safe padding zone at the bottom of the carousel so controls don't overlap the text */
    .wp-block-kadence-postgrid .splide {
        padding-bottom: 0px !important; 
    }

    /* Override Kadence's center alignment and lock dots to the bottom left */
    .wp-block-kadence-postgrid .splide__pagination {
        position: absolute !important;
        bottom: 10px !important; /* Pushes the dots up into the safe padding zone */
    }

    /* Lock arrows to the bottom right */
    .wp-block-kadence-postgrid .splide__arrows {
        position: absolute !important;
        top: -26px !important; /* Arrows are taller (40px) than dots, so this number is smaller to vertically align them */
        right: 10px !important;
        left: auto !important;
        width: auto !important;
        transform: none !important;
        display: flex !important;
    }
    
    /* Override Kadence's default dot pagination spacing */
    .wp-block-kadence-postgrid .kb-splide[data-slider-dots="true"] {
        margin-bottom: 0px !important;
    }
}


/* ==========================================================================
   5. UI ELEMENTS, BADGES & PACE GROUPS
   ========================================================================== */

/* Style the Add Ride button to stand out */
.add-ride-btn {
    box-shadow: 0px 4px 15px rgba(38, 92, 242, 0.3);
    transition: transform 0.2s;
}
.add-ride-btn:hover {
    transform: translateY(-2px);
}

/* White Circle Badge for Tab Counts */
.tab-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    width: 23px !important;
    height: 23px !important;
    border-radius: 50% !important;
    margin-left: 0px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* The TBD Pill UI */
.empty-state-pill {
    display: inline-block;
    background-color: #f0f0f1; 
    color: #646970;            
    padding: 4px 12px;
    border-radius: 20px;       
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); 
}

/* The Ghost Text UI */
.empty-state-text {
    display: block;
    color: #8c8f94;            
    font-style: italic;
    font-size: 15px;
    padding: 10px 0;
}

/* Base styling for all Pace Group Badges */
.bcc-pace-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 26px; /* Change to 50px if you want rounded pill shapes */
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    background-color: #666666; /* Default gray fallback color */
}

/* Specific Colors for Specific Pace Groups */
.pace-beginners { background-color: #0a85ea; } 
.pace-easy-rollers { background-color: #024db6; } 
.pace-touring { background-color: #cc00bf; } 
.pace-classic { background-color: #00893b; } 
.pace-classic-plus { background-color: #fe4d02; } 
.pace-sportif { background-color: #e40303; } 
.pace-all-group { background-color: #3b3939; } 


/* ==========================================================================
   6. "SIGNED-UP" RIDE HIGHLIGHTS & ANIMATIONS
   ========================================================================== */

/* Heartbeat math for the pulse animation */
@keyframes bcc-beacon-pulse {
    0% {
        /* Keeps your original drop shadow AND adds a tight green glow */
        box-shadow: 0 3px 6px rgba(0,0,0,0.25), 0 0 0 0 rgba(0, 106, 187, 0.7); 
    }
    70% {
        /* Keeps original drop shadow, expands the green glow to 15px and fades out */
        box-shadow: 0 3px 6px rgba(0,0,0,0.25), 0 0 0 15px rgba(0, 106, 187, 0); 
    }
    100% {
        /* Reset for the next loop */
        box-shadow: 0 3px 6px rgba(0,0,0,0.25), 0 0 0 0 rgba(0, 137, 59, 0); 
    }
}

/* Add a red border to the entire Kadence Query Card */
.is-signed-up-ride { 
    box-shadow: 0 4px 6px rgba(38, 92, 242, 0.15) !important;
    transform: translateY(-2px); /* Physically nudges the card up slightly */
    border: 1px solid rgba(38, 92, 242, 0.3) !important;
    transition: all 0.3s ease;  
    position: relative; /* Required for the badge to anchor properly */
    overflow: visible !important;
}

/* The Animated Checkmark Badge */
.is-signed-up-ride::before {
    content: "✓";
    position: absolute;
    top: -12px;
    right: -7px;
    background-color: #0E7BEC; /* A nice success green */
    color: white;
    padding: 1px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 10;
    animation: bcc-beacon-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* Change the background color of the specific col1 section inside that card */
.is-signed-up-ride .dashboard-ride-col1 {
    background-color: #ffe6e6 !important; 
}


/* ==========================================================================
   7. COMMENTS AREA
   ========================================================================== */

/* Hide the "X responses to..." title specifically on Ride pages */
.single-ride #comments  {
    display: none !important;
}

/* Shrink height of the comment text area */
textarea#comment {
    min-height: 95px !important; /* Forces Kadence to drop its default minimum size */
    height: 95px !important;     /* Sets your preferred starting height */
}

/* Hide the default "Comment *" label */
.comment-form-comment label[for="comment"] {
    display: none !important;
}
.comment-form-comment {
    margin-bottom: 17px !important;
}


/* ==========================================================================
   8. PIE CALENDAR TWEAKS & DAY SEPARATORS
   ========================================================================== */

/* Fix Time and Title Overlap */
.fc-daygrid-block-event .fc-event-time {
    overflow: visible !important;
    margin-right: 1px !important;
}

/* Force Pie Calendar event borders to a custom color */
.fc-theme-standard .fc-event {
    border-color: #78a0bf !important; 
}

/* Creates a temporary dead-zone for clicks */
@keyframes absorb-ghost-click {
    0% { pointer-events: none; }
    99% { pointer-events: none; }
    100% { pointer-events: auto; }
}

@media (max-width: 768px) {
    /* Hide Pie Calendar 'Today' button on mobile devices in listDay view */
    .piecal-wrapper[data-view="listDay"] .piecal-controls__today-button {
        display: none !important;
    }
    
    /* Deploys the shield for exactly 450ms when the list view opens on mobile */
    .piecal-wrapper[data-view="listDay"] {
        animation: absorb-ghost-click 0.45s forwards;
    }
}

/* Day Separators (Mobile Adjustment) */
@media (max-width: 767px) {
    .bcc-day-separator {
        margin: 10px 0 0 !important;
        font-size: 1rem !important;
    }
}



/* ==========================================================================
   Participant Tab CSS
   ========================================================================== */
 /* 1. The Container */
        .ride-participants-stack {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex;
            flex-wrap: wrap; 
            gap: 12px; 
            align-items: center;
        }

        /* 2. The Anchor */
        .ride-participant-pill {
            position: relative; 
            width: 65px;
            height: 65px;
            border-radius: 50%; 
            cursor: pointer;
            z-index: 1; 
        }

        /* 3. The Expanded State */
        .ride-participant-pill.is-expanded {
            z-index: 10; 
        }

        /* 4. The Avatar Image (Remains Large at 65px) */
        .ride-participant-pill img.avatar {
            position: relative;
            z-index: 2; 
            width: 65px;
            height: 65px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
			background: #fff;
        }

        /* 5. The Slim Frosted Glass Drawer */
        .ride-participant-pill .rider-name-drawer {
            position: absolute;
            
            /* THE HEIGHT FIX: Dead-centers the slimmer ribbon vertically behind the 65px image */
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            
            /* THE HEIGHT FIX: Dropped the height to 45px so it sits inside the 65px avatar */
            height: 45px;
            max-width: 45px; 
            
            background-color: rgba(241, 245, 249, 0.85);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px); 
            
            border-radius: 45px; /* Matches the new height to keep the ends perfectly round */
            z-index: 1; 
            
            display: flex;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
            
            transition: max-width 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
        }

/* 6. The Name Text (UPDATED FOR 2-LINE STACK) */
        .ride-participant-pill .rider-name-text {
            padding: 0 15px 0 75px; /* 75px left padding safely clears the 65px image */
            
            /* THE DYNAMIC WIDTH FIX */
            width: max-content;  /* Hugs short names perfectly (e.g., "Mark") */
            max-width: 210px;    /* Stops long names exactly where the drawer ends */
            
            box-sizing: border-box;
            
            /* Allow natural wrapping for long names, capped at 2 lines */
            white-space: normal; 
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.15; 
            word-break: break-word; 
            
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            font-size: 0.95em;
            color: #333;
            opacity: 0; 
            transition: opacity 0.2s ease;
        }

        /* 7. The Standard Right-Sliding Animation */
        .ride-participant-pill.is-expanded .rider-name-drawer {
            max-width: 210px; 
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        }
        .ride-participant-pill.is-expanded .rider-name-text {
            opacity: 1;
            transition-delay: 0.1s; 
        }

        /* ----------------------------------------------------------- */
        /* 8. THE COLLISION FLIP: Reverses everything if near the edge */
        /* ----------------------------------------------------------- */
        
        .ride-participant-pill.open-left .rider-name-drawer {
            left: auto; 
            right: 0;   
        }
        
        .ride-participant-pill.open-left .rider-name-text {
            /* Swaps the padding so the empty space hides under the avatar! */
            padding: 0 75px 0 15px; 
            text-align: right; 
        }



/* ==========================================================================
   Ride Description CSS
   ========================================================================== */
 /* Override Kadence global variables for text inside the description */
        .ride-description-content  {
            margin-left: 3px !important; 
        }
        .ride-description-content p {
            margin-bottom: 0em !important; /* TIGHTENED: Much less space between lines */
        }
        .ride-description-content ul, 
        .ride-description-content ol {
            margin-bottom: 0.5em !important;
            padding-left: 20px; 
        }
        .ride-description-content li {
            margin-bottom: 0.1em !important; /* TIGHTENED: Keeps list items close together */
        }
        .ride-description-content h1, 
        .ride-description-content h2, 
        .ride-description-content h3 {
            margin-top: 1em !important;
            margin-bottom: 0.25em !important;
        }



 /* ==========================================================================
   Ride Buttons CSS
   ========================================================================== */       
    /* --- KADENCE ANTI-CLIPPING FIX --- */
        .wp-block-kadence-column, 
        .kt-inside-inner-col, 
        .ride-actions-wrapper form {
            overflow: visible !important; 
        }

        

        /* Elevates the button row above the tabs block sitting below it */
        .ride-actions-wrapper { 
            display: flex; 
            gap: 10px; 
            flex-wrap: wrap; 
            align-items: center; 
        }
        .ride-actions-wrapper form { margin-bottom: 0 !important; display: inline-flex !important;}

        /* Base style for the Main Button (ICON ONLY) */
        .ride-btn-join {
            background-color: transparent !important;
            border: 2px solid #fff !important;
            color: transparent !important; /* Hides text entirely */
            
            /* PERFECT SQUARE: Fixed width and height instead of max-content */
            width: 40px !important; 
            height: 40px !important; 
            padding: 0 !important; 
            
            border-radius: 4px !important;
            cursor: pointer !important;
            position: relative;
            transition: background-color 0.2s ease;
            
            /* The Icon */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='8.5' cy='7' r='4'/%3e%3cline x1='20' y1='8' x2='20' y2='14'/%3e%3cline x1='17' y1='11' x2='23' y2='11'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center center !important; /* Centered perfectly */
            background-size: 18px !important; /* Slightly larger for visibility */
        }
        

        /* 1. Base State (Joined: Checkmark) */
        .ride-btn-leave { 
            background-color: #10b981 !important; 
            border: 2px solid #fff !important; 
            color: #fff !important; 
            
            /* Starts as a perfect square */
            width: 40px !important; 
            height: 40px !important; 
            padding: 0 !important; 
            
            border-radius: 4px !important; 
            cursor: pointer !important; 
            overflow: hidden !important;
            
            /* Flexbox allows us to align the hidden text */
            display: flex !important;
            align-items: center !important;
            
            /* Smoothly animates the width and background color */
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease !important;
            
            /* The Checkmark Icon */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;
            background-size: 18px !important;
        }

        /* The hidden confirmation text */
        .ride-btn-leave .leave-text {
            opacity: 0;
            white-space: nowrap;
            font-size: 0.95rem;
            font-weight: bold;
            margin-left: 12px; /* Spaces it from the left edge */
            transition: opacity 0.2s ease;
        }

        /* 2. Hover State (Intent: Red X) */
        .ride-btn-leave:hover { 
            background-color: #e60000 !important; 
            border-color: #e60000 !important;
            
            /* Swap to the X Icon */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") !important;
        }

        /* 3. Clicked State (Confirmation: Text ONLY - Protected against hover) */
        .ride-btn-leave.is-confirming,
        .ride-btn-leave.is-confirming:hover {
            background-color: #e60000 !important; 
            border-color: #e60000 !important;
            width: 80px !important; 
			justify-content: center !important;
            
            /* Forces the X to stay hidden even while your mouse is resting on the expanded button */
            background-image: none !important; 
        }

        /* Reveal the text when expanded */
        .ride-btn-leave.is-confirming .leave-text {
            opacity: 1;
            transition-delay: 0.1s; /* Slight delay so text appears smoothly after expansion */
			margin-left: 0 !important;
        }

        .ride-btn-leave:hover { 
            background-color: #e60000 !important; /* Keeps the red warning hover */
            color: transparent !important;
            
            /* Protects the icon from Kadence overrides on hover */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") !important;
        }
							   
        /* Mobile-only size adjustments */
        @media (max-width: 480px) {                   

            /* Protect the expanded confirmation state AND its hover state */
            .ride-btn-leave.is-confirming,
            .ride-btn-leave.is-confirming:hover {
                width: 70px !important; 
                padding: 0 4px !important; 
            }
            
        }				   

        /* --- THE CUSTOM DROPDOWN MAGIC --- */
        .ride-dropdown-container {
            position: relative;
            display: inline-block;
			display: inline-flex !important; /* Flexbox ignores text baselines */
            align-items: center !important;  /* Centers the button vertically */
            vertical-align: middle !important; /* Aligns the entire wrapper with the Leave button */
        }

        /* The hidden popup menu */
        .ride-dropdown-menu {
            display: none; 
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            background-color: #222;
            border: 1px solid #444;
            border-radius: 4px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.4);
            z-index: 100;
            overflow: hidden;
            
            /* This allows the menu to be wider than the tiny button above it! */
            min-width: 140px; 
        }

        /* The JS class that reveals the menu */
        .ride-dropdown-menu.show-menu {
            display: flex;
            flex-direction: column;
        }

        /* The buttons inside the popup */
        .ride-dropdown-menu button {
            display: block !important; /* Forces the clickable hitbox edge-to-edge */
            box-sizing: border-box !important;
            background: none !important;
            border: none !important;
            color: #fff !important;
            padding: 10px 15px !important;
            text-align: left !important;
            font-size: 0.95rem !important;
            cursor: pointer !important;
            width: 100% !important;
            transition: background-color 0.2s;
        }
                                       
                                       
        /* 1. Keep the main button highlighted while interacting with the menu OR when clicked open */
        .ride-btn-join:hover,
        .ride-dropdown-container:hover .ride-btn-join,
        .ride-btn-join.is-active { 
            background-color: #1a1d24 !important; 
            color: transparent !important;
            
            /* This ensures the icon stays protected and doesn't change color */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='8.5' cy='7' r='4'/%3e%3cline x1='20' y1='8' x2='20' y2='14'/%3e%3cline x1='17' y1='11' x2='23' y2='11'/%3e%3c/svg%3e") !important;
            
            background-size: 18px !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
        }

        /* 2. Completely lock down the inner menu options so Kadence cannot attack them */
        .ride-dropdown-menu button {
            background-color: transparent !important;
            background-image: none !important; /* Forces Kadence to hide any global button icons */
            color: #fff !important;
        }

        .ride-dropdown-menu button:hover { 
            background-color: #dceaec !important;
  background-image: none !important;
  color: #002145 !important;
  box-shadow: none !important;         
        }
                                       
        .ride-dropdown-menu button:not(:last-child) { border-bottom: 1px solid #535050 !important; }
			
			/* OVERRIDE: Force the text to stay white and visible during hover */
        .ride-btn-leave:hover,
        .ride-btn-leave:active,
        .ride-btn-leave:focus,
        .ride-btn-leave:hover .leave-text,
        .ride-btn-leave.is-confirming .leave-text {
            color: #ffffff !important;
        }
		
		/* ========================================== */
        /* THE Z-INDEX PRISON & HITBOX FIX            */
        /* ========================================== */
        
        /* 1. Elevate the entire Kadence Row that holds the buttons */
        .kt-row-column-wrap:has(.ride-actions-wrapper),
        .wp-block-kadence-column:has(.ride-actions-wrapper) {
            z-index: 10 !important;
            position: relative !important;
        }

        /* 2. Fix the unclickable padding inside the dropdown menu */
        .ride-dropdown-menu button {
            display: block !important; 
            box-sizing: border-box !important;
            width: 100% !important;
        }
        /* ========================================== */


  /* ==========================================================================
   Clean Comments CSS
   ========================================================================== */     
   /* 1. Kill any lingering line-height in the title wrapper */
        #reply-title, 
        #reply-title small { 
            line-height: 0 !important; 
            margin: 0 !important; 
            padding: 0 !important; 
            border: none !important;
        }
        
        /* 2. Restore normal size ONLY when the 'Cancel' link actually appears */
        #cancel-comment-reply-link {
            line-height: 1.5 !important;
            font-size: 16px !important;
            margin-bottom: 15px !important;
            display: inline-block;
        }

        /* 3. Remove Kadence's hardcoded top margins on the comment section */
        #respond {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        #respond form#commentform {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }



  /* ==========================================================================
   Single Rides Element Alignment
   ========================================================================== */     
  @media (min-width: 768px) {
      /* Force the row into a mathematical 3-column grid */
      .bcc-perfect-align>.kt-row-column-wrap {
          display: grid !important;
          grid-template-columns: repeat(3, 1fr) !important;
      }

      /* Clean up legacy Kadence flexbox settings */
      .bcc-perfect-align>.kt-row-column-wrap>.wp-block-kadence-column {
          max-width: 100% !important;
          width: 100% !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }

      /* Column 1 (Ride Leader) takes exactly 1 slot */
      .bcc-perfect-align>.kt-row-column-wrap>.wp-block-kadence-column:nth-child(1) {
          grid-column: span 1 !important;
      }

      /* Column 2 (Description) stretches across the remaining 2 slots */
      .bcc-perfect-align>.kt-row-column-wrap>.wp-block-kadence-column:nth-child(2) {
          grid-column: span 2 !important;
      }
  }


  /* Force the outer Section and inner wrappers to align to the top on mobile */
  @media (max-width: 767px) {

      /* Targets the inner column wrapper of the specific parent section */
      .kadence-column2032_fa200e-2b>.kt-inside-inner-col {
          align-items: flex-start !important;
      }

      /* Pushes the buttons to the top of their own wrapper */
      .ride-actions-wrapper {
          align-items: flex-start !important;
      }
  }



  /* ==========================================================================
   9. FRONT-END FORMS
   ========================================================================== */

/* Hide the Route Distance field on front-end forms (The API handles this automatically) */
.acf-field[data-name="route_distance"] {
    display: none !important;
}