/* Import Google Fonts - Montserrat font with various weights */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&display=swap');

/* Root variables for consistent styling */
:root {
    --color-green: #0b704b;
    /* Primary green color */
    --color-blue: #428fd3;
    /* Primary blue color */
    --color-gray: #333333;
    /* Dark gray text color */
    --color-white: #ffffff;
    /* White background color */
    --color-gold: #c79a3a;
    /* Gold accent — the "+" Add button, star ratings */
    --color-gold-dark: #a87d28;
    /* Darker gold for active/pressed states */
    --radius-sm: 5px;
    /* Small border radius for elements */
}

/* Universal box-sizing for all elements */
*,
/* Selects all elements */
*::before,
/* Selects pseudo-element ::before */
*::after {
    /* Selects pseudo-element ::after */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
    /* Enables smooth scrolling for anchor links */
}

/* Body base styles */
body {
    margin: 0;
    overflow-x: hidden;
    /* Removes default body margin and prevents horizontal scroll */
    font-family: "Montserrat", sans-serif;
    /* Sets Montserrat as primary font */
    font-weight: 300;
    /* Sets default font weight */
    color: var(--color-gray);
    /* Sets default text color using a CSS variable */
    background-color: var(--color-white);
    /* Sets default background color using a CSS variable */
}

/* Heading font weights */
h1,
h2,
h3,
h4,
h5,
h6 {
    /* Selects all heading elements */
    font-weight: 400;
    /* Sets default font weight for headings */
}

/* Page wrapper for content centering and padding */
.page-wrapper {
    max-width: 1280px;
    /* Sets maximum width of the page content */
    margin: 0 auto;
    /* Centers the page wrapper horizontally */
    padding: 0 1.5rem 2rem;
    /* Sets vertical and horizontal padding */
    background-color: var(--color-white);
    /* Sets background color for the page wrapper */
    position: relative;
    z-index: 100;
}

/* Specific padding for the skills section */
#skills {
    padding-left: 30px;
    /* Sets left padding for skills section */
    padding-right: 30px;
    /* Sets right padding for skills section */
}

/* Site header styling */
.site-header {
    width: 100%;
    /* Sets full width for the header */
    height: 50px;
    /* Compact resting height (half of the docked/fixed height) */
    padding: 0;
    /* No vertical padding while compact, so the logo fits the 50px bar */
    border-bottom: 1px solid #e0e0e0;
    /* Sets bottom border for separation */
    position: sticky;
    /* Makes header sticky */
    top: 0;
    /* Sticks to the top of the viewport */
    background-color: var(--color-white);
    /* Sets white background */
    z-index: 3000;
    /* Ensures header is above other content */
    transition: all 0.3s ease-in-out;
    overflow: visible;
    /* Sets smooth transition for changes */
}

/* Header content wrapper for alignment and max-width */
.header-content-wrapper {
    max-width: 1280px;
    /* Matches page-wrapper max-width */
    margin: 0 auto;
    /* Centers the content wrapper */
    height: 50px;
    padding: 0 1.5rem;
    /* Applies horizontal padding here */
    display: flex;
    /* Uses flexbox for layout */
    position: relative;
    /* Establish positioning context for children */
    flex-wrap: wrap;
    /* Allows items to wrap on smaller screens */
    align-items: center;
    /* Vertically aligns items in the center */
    justify-content: space-between;
    /* Distributes items with space between them */
    overflow: visible;
    /* Allow overflow */
}

.header-page-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.header-page-title h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-gray);
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.header-page-title p {
    margin: 0;
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .header-page-title {
        display: none;
        /* Hide on mobile to avoid overlap */
    }
}

/* Brand (logo and tagline) container styling */
.brand {
    max-width: 420px;
    /* Sets maximum width for the brand section */
    display: flex;
    /* Uses flexbox for logo and tagline */
    flex-direction: row;
    /* Arranges logo and tagline in a row */
    align-items: center;
    /* Vertically aligns items in the center */
    gap: 0.75rem;
    /* Sets space between logo and tagline */
}

/* Logo image styling */
.brand img {
    max-height: 48px;
    /* Sets maximum height of the logo */
    width: auto;
    /* Maintains aspect ratio */
    transform: translateY(0);
    /* Centered in the compact 50px resting bar (the -25px nudge would clip it). */
    transition: transform 0.2s ease;
}

/* In the docked/fixed (taller) header, nudge the logo up — the original look. */
.site-header.fixed .brand img {
    transform: translateY(-25px);
}


/* Main navigation styling - Fixed to top right corner */
.main-nav {
    position: absolute;
    top: -20px;
    right: 25px;
    z-index: 2000;
    display: flex;
    flex-direction: row;
    align-items: center;
}
/* In the compact (resting, non-fixed) header the `top:-20px` hack — tuned to the
   old 100px header's padding — would clip the nav, so center it in the 50px bar.
   The fixed/docked header keeps the original `top:-20px` above. */
.site-header:not(.fixed) .main-nav {
    top: 35%;
    transform: translateY(-50%);
}

/* Header Location Tag */
.header-location-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8f8f8;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-blue);
}

.header-location-tag:hover {
    background: #f0f0f0;
}

/* Unknown Location Pulse */
.header-location-tag.unknown-loc {
    animation: pulse-red 2s infinite;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(211, 47, 47, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0);
    }
}

.location-dropdown {
    display: none;
    /* Compact picker anchored under the header pin (.header-location-tag is
       position:relative). Just big enough to choose a location — no side panel. */
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    margin-top: 0;
    background: white;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 12px;
    width: 340px;
    max-width: 92vw;
    height: auto;
    max-height: none;
    z-index: 3300;
    overflow: visible;
    flex-direction: column;
    gap: 10px;
}

/* When the location dropdown (the map) is open, lift .main-nav above the
   docked search bar (inline z-index:3200 — see initSearchDock in script.js) so
   the map paints OVER the search bar. It still sits BELOW the nav/login
   dropdown, whose own z-index is maxed (2147483647). Declared before the nav
   dropdown's lift so that rule wins if both ever match. */
.main-nav:has(.location-dropdown.open),
.main-nav:has(.location-dropdown.pinned) {
    z-index: 3300;
}

/* No bridge needed for fixed positioning */
.location-dropdown::before {
    display: none;
}

/* Removed hover trigger - using click-based instead */
.location-dropdown.open {
    display: flex;
}

/* Keep visible when hovering if already open */
.header-location-tag:hover .location-dropdown.open {
    display: flex;
}

.loc-display {
    font-size: 0.85rem;
    color: #666;
    display: block;
    white-space: nowrap;
}

/* Top header of the location panel — holds the "My Location" button (moved up
   from the bottom) and the close button. */
.loc-dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 15px 8px 15px;
}

/* The "My Location" button is the primary action at the top — let it fill the
   row. (It still uses the .btn-locate-compact look defined below.) */
.loc-dropdown-header .btn-locate-compact {
    flex: 1;
}

/* Close (×) styled as a circle that mirrors the header location pin, so when
   the panel opens the × sits where the pin was. */
.loc-close-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-blue);
    transition: background 0.2s;
}

.loc-close-btn:hover {
    background: #f0f0f0;
}

/* The detected place name, shown just under the My Location button. */
.loc-status-row {
    padding: 0 15px 10px 15px;
}

/* Picker rows (compact dropdown). Row 1: My Location + close. Row 2: input + Save. */
.loc-row { display: flex; align-items: center; gap: 6px; }
.loc-row-top { justify-content: space-between; }
.loc-row-top .btn-locate-compact { flex: 1; }
.loc-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    position: relative; /* anchor for the autocomplete suggestions list */
}

/* Locate button shrinks to its content (its minimum width) while keeping the
   same font size as before. */
.loc-input-group .btn-locate-compact {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding: 8px 10px;
}

/* Skill filter is now a free-text search input (was a <select>). */
.loc-skill-search {
    width: 100%;
}

.loc-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
}

.loc-save-btn {
    padding: 8px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.loc-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Location Dropdown Map — small location-preview map with a draggable pin. */
.loc-map-container {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
}

#dropdown-map {
    width: 100%;
    height: 180px;
    background: #e0e0e0;
    border: none;
}

.loc-map-hint {
    margin: 8px 2px 0;
    font-size: 11px;
    color: #888;
    text-align: center;
}

.map-controls-compact {
    padding: 12px 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: white;
    /* Show all controls fully — no inner scroll. Sits directly under the input
       row, above the map, taking its natural height. */
    flex: 0 0 auto;
}

.control-group-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.control-group-compact label {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.control-group-compact input[type="range"],
.control-group-compact input[type="text"],
.control-group-compact select {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}

.radius-display-compact {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
}

.control-buttons-compact {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.btn-search-compact,
.btn-locate-compact {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-search-compact {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-search-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

.btn-locate-compact {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-locate-compact:hover {
    background: #f9f9f9;
    border-color: #bbb;
}

.results-list-compact {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    background: white;
    border-top: 1px solid #ddd;
    z-index: 2101;
}

.results-list-compact.show {
    display: block;
}

.result-item-compact {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 12px;
}

.result-item-compact:hover {
    background: #f9f9f9;
}

.result-username-compact {
    font-weight: 600;
    color: #333;
}

.result-distance-compact {
    font-size: 11px;
    color: #667eea;
    margin-top: 2px;
}

/* Responsive Location Dropdown */
@media (max-width: 768px) {
    .location-dropdown {
        /* Stay compact on small screens: a fixed panel near the top-right,
           not a full-height side sheet. */
        position: fixed;
        top: 64px;
        right: 12px;
        left: auto;
        transform: none;
        width: 340px;
        max-width: 92vw;
        height: auto;
        max-height: 80vh;
        overflow: auto;
    }

    #dropdown-map {
        height: 160px;
        min-height: 0;
    }

    .map-controls-compact {
        padding: 10px 12px;
    }

    .control-group-compact input[type="range"],
    .control-group-compact input[type="text"],
    .control-group-compact select {
        padding: 6px;
        font-size: 12px;
    }

    .control-buttons-compact {
        gap: 6px;
    }

    .btn-search-compact,
    .btn-locate-compact {
        padding: 7px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .location-dropdown {
        position: fixed;
        top: 60px;
        right: 50%;
        left: auto;
        transform: translateX(50%);
        width: 92vw;
        max-width: 360px;
        height: auto;
        max-height: 78vh;
        overflow: auto;
    }

    #dropdown-map {
        height: 150px;
        min-height: 0;
    }

    .map-controls-compact {
        padding: 8px 10px;
        gap: 8px;
    }

    .control-group-compact label {
        font-size: 10px;
    }

    .control-group-compact input[type="range"],
    .control-group-compact input[type="text"],
    .control-group-compact select {
        padding: 5px;
        font-size: 11px;
    }

    .control-buttons-compact {
        gap: 5px;
    }

    .btn-search-compact,
    .btn-locate-compact {
        padding: 6px;
        font-size: 10px;
    }

    .loc-display {
        font-size: 0.75rem;
    }

    .loc-input,
    .loc-save-btn {
        font-size: 0.75rem;
    }
}

/* Main navigation list styling */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

/* Main navigation link styling */
.main-nav a {
    text-decoration: none;
    /* Removes underline from links */
    color: var(--color-gray);
    /* Sets default link color */
    padding: 0.4rem 0.8rem;
    /* Sets padding around links */
    border-radius: var(--radius-sm);
    /* Sets rounded corners for links */
    font-size: 0.95rem;
    /* Sets font size for links */
    transition: color 0.2s ease, font-weight 0.2s ease;
    /* Sets smooth transition for color and font-weight */
    border: 1px solid transparent;
    /* Sets transparent border */
}

/* Main navigation link hover and focus states */
.main-nav a:hover,
/* Styles for hover state */
.main-nav a:focus-visible {
    /* Styles for focus-visible state */
    background-color: transparent;
    /* Sets transparent background on hover/focus */
    border-color: transparent;
    /* Sets transparent border on hover/focus */
    font-weight: 600;
    /* Sets bold font weight on hover/focus */
    color: var(--color-green);
    /* Sets green text color on hover/focus */
}

/* Search submit button: desktop shows the text label, mobile swaps to the
   magnifier icon (mobile.css flips these). */
.search-btn-icon { display: none; line-height: 0; }

/* Top-level "Manage" nav item (injected by script.js when signed in) */
.nav-manage-li .nav-manage-top {
    font-weight: 700;
    color: #d89018;
}
.nav-manage-li .nav-manage-top:hover,
.nav-manage-li .nav-manage-top:focus-visible {
    color: #b87607;
}
@media (max-width: 768px) {
    /* Mobile uses the bottom-right nav FAB instead */
    .nav-manage-li { display: none; }
}

/* Top-level "Manage" nav DROPDOWN (desktop) → Connect / Power / Alerts. */
.nav-manage-dropdown { position: relative; }
.nav-manage-dropdown .nav-manage-top {
    font-weight: 700;
    color: #d89018;
    cursor: pointer;
}
.nav-manage-dropdown .nav-manage-top:hover { color: #b87607; }
.nav-manage-dropdown .nav-manage-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 160px;
    padding: 6px;
    z-index: 3100;
}
.nav-manage-dropdown:hover .nav-manage-menu,
.nav-manage-dropdown.open .nav-manage-menu { display: block; }
.nav-manage-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}
.nav-manage-menu a:hover { background: rgba(245, 178, 52, 0.12); color: #d89018; }
@media (max-width: 768px) {
    .nav-manage-dropdown { display: none; }
}

/* Top-level "Admin" + "Analytics" nav links (injected by script.js for admin
   users) — the standout admin features, sitting to the LEFT of the account /
   Welcome button. */
.nav-admin-li { display: inline-flex; align-items: center; }
.nav-admin-li .nav-admin-top {
    font-weight: 700;
    color: #d89018;
    cursor: pointer;
    white-space: nowrap;
}
.nav-admin-li .nav-admin-top:hover,
.nav-admin-li .nav-admin-top:focus-visible {
    color: #b87607;
}

/* Dropdown container */
.dropdown {
    position: relative;
    /* Establishes positioning context for the dropdown content */
    display: inline-block;
    /* Allows dropdown to sit next to other nav items */
}

/* Dropdown button (Account link) */
.dropbtn {
    cursor: pointer;
    /* Indicates it's clickable */
}

/* Dropdown content (hidden by default) - LARGER SIZE, CLICK ONLY */
.dropdown-content {
    display: none;
    /* Hidden by default */
    position: absolute;
    /* Positions relative to the dropdown container */
    background-color: var(--color-white);
    /* White background */
    min-width: 300px;
    /* Increased from 160px for bigger dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* Subtle shadow */
    z-index: 2001;
    /* Above the fixed nav button */
    border-radius: var(--radius-sm);
    /* Rounded corners */
    right: 0;
    /* Aligns to the right of the parent dropdown */
    top: 100%;
    /* Positions below the dropdown button */
    margin-top: 0.5rem;
    /* Space between button and dropdown */
}

/* Invisible bridge for Account dropdown */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--color-gray);
    /* Dark gray text */
    padding: 12px 16px;
    /* Padding for clickable area */
    text-decoration: none;
    /* No underline */
    display: block;
    /* Each link takes full width */
    text-align: left;
    /* Aligns text to the left */
    font-weight: 400;
    /* Normal font weight */
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1;
    /* Light gray background on hover */
    color: var(--color-green);
    /* Green text on hover */
}

/* Show the dropdown menu when the 'show' class is added by JavaScript or on hover */
.dropdown-content.show,
.dropdown:hover .dropdown-content,
.dropdown-content.pinned {
    display: block;
}
/* Force-close after login even while still hovering. Removed on mouseleave. */
.dropdown-content.closing {
    display: none !important;
}

/* Location dropdown pinned state — flex (not block) so the column layout
   stretches the map to fill the full-height panel. */
.location-dropdown.pinned {
    display: flex;
}

/* Styles for the logged-out view within the dropdown */
#logged-out-view {
    padding: 10px 16px;
}

#logged-out-view .form-field {
    margin-bottom: 10px;
}

#logged-out-view label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--color-gray);
}

#logged-out-view input[type="tel"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    box-sizing: border-box;
}

/* Country-code selector + local-digits field sit side by side. The user picks
   a dialing code and types only the national number; script.js composes the
   canonical E.164 number ("+<code><digits>") on login/signup. */
#logged-out-view .phone-input-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

#logged-out-view .phone-input-row input[type="tel"] {
    flex: 1;
    min-width: 0;
}

#logged-out-view .country-code-select {
    /* Hug the flag + dial code; give the phone number field the rest of the row.
       appearance:none drops the bulky native arrow so we can pull the box in;
       a small custom caret keeps the affordance. Fits up to 4-digit codes. */
    flex: 0 0 auto;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    padding: 8px 20px 8px 7px;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23777' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    text-overflow: ellipsis;
}

#logged-out-view button {
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

#logged-out-view .error-message {
    margin-top: 10px;
    text-align: center;
    font-weight: 600;
    color: red;
    display: none;
}

/* Styles for the logged-in view within the dropdown (a.k.a. bhv-topnav-open) */
#bhv-topnav-open {
    padding: 5px 0;
}

#bhv-topnav-open a {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#bhv-topnav-open a#admin-link,
#bhv-topnav-open a#analytics-link {
    font-weight: 700;
}

#bhv-topnav-open a svg {
    flex-shrink: 0;
    opacity: 0.7;
}

#bhv-topnav-open a:hover svg {
    opacity: 1;
}

/* Site header styling */
.site-header {
    position: sticky;
    /* Makes header sticky */
    top: 0;
    /* Sticks to the top */
    background-color: var(--color-white);
    /* Sets white background */
    z-index: 3000;
    /* Ensures header is above other content */
    transition: all 0.3s ease-in-out;
    /* Sets smooth transition for changes */
}

/* Fixed site header styling (when scrolled down).
   The header keeps its normal height; the search bar docks as a separate
   position:fixed element backed by .search-dock-bg, so there's no layout
   shift. We just drop the header's own bottom border (the dock surface
   carries the divider). */
.site-header.fixed {
    border-bottom-color: transparent;
    /* When docked/fixed, restore the original full header height + padding. */
    height: 100px;
    padding: 1.5rem 0;
}

/* Profile pages keep a fixed 80px header (there's no scroll-dock there — they
   have no hero/search bar, so .fixed is never added). The home page keeps its
   50px resting / 100px docked behavior. The logo/nav already center in the
   non-fixed state, so they sit nicely in the 80px bar. */
.profile-page .site-header {
    height: 80px;
}

/* Search and chat wrapper */
.search-chat-wrapper {
    width: 100%;
    max-width: 700px;
    position: relative;
    margin: 0 auto;
    /* Center the wrapper in the page layout */
}

/* Chat response container styling - dropdown anchored under the search bar.
   It is absolutely positioned (NOT in normal flow) on purpose: the parent
   .search-chat-wrapper is position:fixed and docks into the header on scroll
   (see initFixedHeader). An in-flow panel here would (a) inflate the wrapper's
   measured height and bloat the white dock surface, and (b) ride up into the
   header as the bar docks. Absolute keeps it hanging directly below the bar in
   both the resting and docked states without affecting dock geometry. */
#chat-response-container {
    display: none;
    /* Hidden by default, shown when chat is active */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    /* Spans the bar's width (≤700 resting, ≤560 docked) via left/right:0 */
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Above the white dock surface (2900) and page content */
    z-index: 3300;
}

/* Chat header with close button */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-blue);
    color: var(--color-white);
    border-bottom: 1px solid var(--color-blue);
}

.chat-title {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Close button styling */
.close-chat-btn {
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.close-chat-btn:hover {
    transform: scale(1.2);
}

/* Chat messages container */
.chat-messages {
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
    background-color: #f9f9f9;
}

/* Chat message styling */
.chat-messages p {
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
}

/* User message styling */
.chat-messages p strong {
    color: var(--color-blue);
}

/* Hero section styling */
.hero {
    padding: 6rem 0 2.5rem;
    /* Sets vertical and horizontal padding */
    border-bottom: 1px solid var(--color-white);
    /* Sets bottom border */
    max-width: 900px;
    /* Sets maximum width */
    margin: 0 auto;
    /* Centers horizontally */
    text-align: center;
    /* Centers content within hero */
}

/* Hero content styling */
.hero-content {
    display: flex;
    /* Uses flexbox */
    flex-direction: column;
    /* Stacks items vertically */
    align-items: center;
    /* Centers items horizontally */
    gap: 1.5rem;
    /* Sets space between items */
}

/* Hero text heading styling */
.hero-text h2 {
    font-size: 2rem;
    /* Sets font size */
    margin-top: 0;
    /* Removes top margin */
    color: var(--color-green);
    /* Sets green text color */
}

/* Hero text paragraph styling */
.hero-text p {
    margin-bottom: 0;
    /* Adjusted as search is now separate */
    color: var(--color-gray);
    /* Sets text color */
}

/* Hero search form styling */
.hero-search {
    width: 100%;
    max-width: 700px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    transition: all 0.3s ease-in-out;
}

/* Hero search form field styling */
.hero-search .form-field {
    flex-grow: 1;
    margin-bottom: 0;
    display: flex;
}

/* Hero search textarea styling - fixed height, scrolls internally */
.hero-search textarea {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid var(--color-gray);
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    flex-grow: 1;
    flex-shrink: 1;
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    box-sizing: border-box;
}

/* Hero search button styling */
.hero-search .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-top: 0 !important;
}

/* Reset wrapping div around button so it doesn't add top margin */
.hero-search > div:last-child {
    margin-top: 0 !important;
    display: flex;
}

/* General button styling */
.button {
    display: inline-block;
    /* Displays as inline-block */
    padding: 0.65rem 1.4rem;
    /* Sets padding */
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    border: 1px solid transparent;
    /* Sets transparent border */
    text-decoration: none;
    /* Removes underline */
    font-weight: 600;
    /* Sets bold font weight */
    cursor: pointer;
    /* Sets pointer cursor on hover */
    font-size: 0.95rem;
    /* Sets font size */
}

/* Primary button styling */
.button.primary {
    background-color: var(--color-blue);
    /* Sets blue background */
    color: var(--color-white);
    /* Sets white text */
    border-color: var(--color-green);
    /* Sets green border */
}

/* Primary button hover and focus states */
.button.primary:hover,
/* Styles for hover state */
.button.primary:focus-visible {
    /* Styles for focus-visible state */
    background-color: var(--color-white);
    /* Sets white background on hover/focus */
    color: var(--color-blue);
    /* Sets blue text on hover/focus */
}

/* Secondary button styling */
.button.secondary {
    background-color: var(--color-white);
    /* Sets white background */
    color: var(--color-blue);
    /* Sets blue text */
    border-color: var(--color-blue);
    /* Sets blue border */
}

/* Secondary button hover and focus states */
.button.secondary:hover,
/* Styles for hover state */
.button.secondary:focus-visible {
    /* Styles for focus-visible state */
    background-color: var(--color-blue);
    /* Sets blue background on hover/focus */
    color: var(--color-white);
    /* Sets white text on hover/focus */
}

/* Auth buttons (Log In / Sign Up) — neutral by default, blue on hover */
.button.auth-btn {
    background-color: var(--color-white);
    color: var(--color-blue);
    border-color: var(--color-blue);
    transition: background-color 0.2s, color 0.2s;
}

.button.auth-btn:hover,
.button.auth-btn:focus-visible {
    background-color: var(--color-blue);
    color: var(--color-white);
}

#phone-number.input-error,
.phone-input-row.input-error {
    border-color: red !important;
    outline: none;
}
#phone-number.input-error {
    box-shadow: 0 0 0 2px rgba(220, 0, 0, 0.2);
}

.social-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0 8px;
    color: #999;
    font-size: 0.78rem;
}
.social-login-divider::before,
.social-login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}
.social-login-divider span {
    padding: 0 8px;
}

.social-login-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.social-login-btn:hover { background: #f5f5f5; border-color: #bbb; }
.social-login-btn svg { display: block; }

/* Section general styling */
.section {
    padding: 0.5rem 0 2.5rem;
    /* Sets vertical padding: 0.5rem top, 2.5rem bottom */
    border-bottom: 1px solid var(--color-white);
    /* Sets bottom border */
}

.admin-controls-wrapper,
.listing-controls-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Listings controls: select-all (left) · tabs (center) · search (right).
   The two side cells flex equally so the tabs sit dead-center in the row. */
.listing-controls-wrapper .listing-bulk-select {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-start;
}

.listing-controls-wrapper .admin-filters {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

.listing-controls-wrapper .listing-tabs {
    flex: 0 0 auto;
    justify-content: center;
}

.listing-select-all-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.listing-select-all-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}


/* Admin Sticky Navigation Sub-layers */
.admin-controls-wrapper,
.listing-controls-wrapper {
    position: sticky;
    top: 104px;
    /* Docks flush under the tabs: header 50 + 5px gap + tabs ~49px */
    background-color: var(--color-white);
    z-index: 998;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    /* Subtle separator when sticky */
}

/* Breathing room at the top of each listings pane so the sticky
   listing-controls-wrapper (tabs + search) never overlaps the first card. */
.admin-listing-pane {
    padding-top: 24px;
}

.admin-sticky-sub-nav {
    position: sticky;
    top: 104px;
    background-color: var(--color-white);
    z-index: 998;
    padding-top: 10px;
    padding-bottom: 10px;
    /* border-bottom removed per user request */
}

/* Section header heading styling */
.section-header h2 {
    margin-top: 0;
    /* Removes top margin */
    font-size: 1.6rem;
    /* Sets font size */
    color: var(--color-green);
    /* Sets green text color */
    text-align: center;
    /* Centers align text */
}

/* Section header paragraph styling */
.section-header p {
    max-width: 900px;
    /* Sets maximum width */
    color: var(--color-gray);
    /* Sets text color */
    text-align: center;
    /* Centers align text */
    margin: 0 auto;
    /* Centers horizontally */
}

/* Slider containers styling */
.category-slider,
.skills-slider,
.listing-slider {
    margin-top: 1.5rem;
    /* Sets top margin */
    position: relative;
    /* Needed for absolute positioning of arrows */
}

/* Slick Carousel Arrows Styling */
.slick-prev,
.slick-next {
    width: 30px;
    /* Sets half size for clickable area */
    height: 30px;
    /* Removes padding */
    -webkit-transform: translateY(-50%);
    /* Centers vertically for Webkit browsers */
    -ms-transform: translateY(-50%);
    /* Centers vertically for IE */
    transform: translateY(-50%);
    /* Centers vertically */
    cursor: pointer;
    /* Sets pointer cursor on hover */
    background: none !important;
    /* Forces transparent background */
    border: none !important;
    /* Forces no border */
    outline: none !important;
    /* Forces no outline */
    border-radius: 0 !important;
    /* Forces no border-radius */
    box-shadow: none !important;
    /* Forces no box-shadow */
    font-size: 0 !important;
    /* Forces font size to 0 */
    line-height: 0 !important;
    /* Forces line height to 0 */
    color: transparent !important;
    /* Forces transparent color */
    z-index: 10;
    /* Ensures arrows are above content */
}

/* Slick Carousel Arrows hover and focus states */
.slick-prev:hover,
.slick-prev:focus,
/* Styles for slick-prev hover/focus */
.slick-next:hover,
.slick-next:focus {
    /* Styles for slick-next hover/focus */
    outline: none !important;
    /* Removes outline */
    background: none !important;
    /* Keeps background transparent on hover */
}

/* Hide default slick arrow content */
.slick-prev:before,
.slick-next:before {
    content: none !important;
    /* Ensures no character is rendered */
    font-family: none !important;
    /* Explicitly sets to none to remove slick font icon */
    font-size: 0 !important;
    /* Ensures no font icon is rendered */
    line-height: 0 !important;
    /* Ensures no line height */
    width: 0 !important;
    /* Ensures no width */
    height: 0 !important;
    /* Ensures no height */
    border: none !important;
    /* Ensures no border */
    background: none !important;
    /* Ensures no background */
    box-shadow: none !important;
    /* Ensures no box-shadow */
    opacity: 0 !important;
    /* Ensures it's completely invisible */
}

/* Add custom triangle for slick-prev */
.slick-prev:after {
    content: '';
    /* Sets empty content for pseudo-element */
    position: absolute;
    /* Sets absolute positioning */
    top: 50%;
    /* Positions at 50% from the top */
    left: 50%;
    /* Centers the triangle within the 30x30 button */
    transform: translate(-50%, -50%);
    /* Centers the triangle */
    width: 0;
    /* Sets no width */
    height: 0;
    /* Sets no height */
    border-style: solid;
    /* Sets solid border style */
    border-width: 15px 15px 15px 0;
    /* Sets half size triangle */
    border-color: transparent var(--color-blue) transparent transparent;
    /* Sets blue triangle */
    opacity: 1;
    /* Sets fully opaque */
    transition: opacity 0.2s ease;
    /* Sets smooth transition for opacity */
}

/* Add custom triangle for slick-next */
.slick-next:after {
    content: '';
    /* Sets empty content for pseudo-element */
    position: absolute;
    /* Sets absolute positioning */
    top: 50%;
    /* Positions at 50% from the top */
    left: 50%;
    /* Centers the triangle within the 30x30 button */
    transform: translate(-50%, -50%);
    /* Centers the triangle */
    width: 0;
    /* Sets no width */
    height: 0;
    /* Sets no height */
    border-style: solid;
    /* Sets solid border style */
    border-width: 15px 0 15px 15px;
    /* Sets half size triangle */
    border-color: transparent transparent transparent var(--color-blue);
    /* Sets blue triangle */
    opacity: 1;
    /* Sets fully opaque */
    transition: opacity 0.2s ease;
    /* Sets smooth transition for opacity */
}

/* Apply opacity to custom triangle when disabled */
.slick-disabled:after {
    opacity: 0.5;
    /* Sets 50% opacity when disabled */
}

/* Specific triangle positioning for slick-prev */
.slick-prev {
    left: -35px;
    /* Adjusts position for smaller button */
}

/* RTL support for slick-prev */
[dir='rtl'] .slick-prev {
    right: -35px;
    /* Adjusts position for RTL */
    left: auto;
    /* Resets left position */
}

/* Specific triangle positioning for slick-next */
.slick-next {
    right: -35px;
    /* Adjusts position for smaller button */
}

/* RTL support for slick-next */
[dir='rtl'] .slick-next {
    right: auto;
    /* Resets right position */
    left: -35px;
    /* Adjusts position for RTL */
}

/* Category selector rendered as a wrapping row of buttons (replaces the
   former slick carousel). Keeps the same pill/button styling. */
.category-slider.category-filters {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem !important;
}

/* Category Item Styling */
.category-item {
    text-align: center !important;
    padding: 0.5rem 1.5rem !important;
    border: 2px solid var(--color-blue) !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 5px 10px !important;
    color: var(--color-blue) !important;
    background-color: var(--color-white) !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Category item hover state */
.category-item:hover {
    background-color: var(--color-blue);
    /* Blue background on hover */
    color: var(--color-white);
    /* White text on hover */
    border-color: var(--color-blue);
    /* Blue border on hover */
    font-weight: 600;
    /* Sets bold font weight on hover */
}

/* Selected category item state */
.category-item.selected {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
    border-color: var(--color-blue) !important;
    font-weight: 600 !important;
}

/* Ensure slick-current also gets the selected styling if it's the active one */
.category-item.slick-current:not(.selected) {
    background-color: var(--color-blue);
    /* Blue background */
    color: var(--color-white);
    /* White text */
    border-color: var(--color-blue);
    /* Blue border */
    font-weight: 600;
    /* Sets bold font weight */
}

/* Skill item styling within skills slider */
.skills-slider .skill-item {
    text-align: center;
    /* Centers align text */
    padding: .5rem;
    /* Sets padding */
    margin: 0 3px;
    border: 2px solid transparent;
    /* Add a transparent border for the blue box */
    border-radius: var(--radius-sm);
    /* Apply border-radius */
    transition: all 0.2s ease;
    /* Smooth transition for changes */
}

/* Selected skill item state */
.skills-slider .skill-item.selected {
    border: 3px solid var(--color-blue) !important;
    /* Add a clear blue outline/border */
    border-radius: 12px !important;
}

/* Skill item image styling — dimensions driven by .image-container */
.skills-slider .skill-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-bottom: 0.5rem !important;
}

/* Dark overlay (30%) on each skill image for text legibility */
.skills-slider .skill-item .skill-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* Skill title — centered ON the image, white, wraps to multiple lines so the
   text never crowds the left/right edges. Sits above the image + overlay. */
.skills-slider .skill-item .skill-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84%;            /* keeps multi-word titles off the edges */
    margin: 0;
    z-index: 2;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    /* Dark glow (30%) behind the text for legibility */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.30), 0 0 8px rgba(0, 0, 0, 0.30);
}

.category-slider {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Skills row: native horizontal scroll (the native scrollbar is hidden; a
   custom always-visible scrollbar with end arrows is rendered just below it).
   Trackpad / touch swipe still work. */
.skills-slider {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide the native bar — replaced by the custom .skills-scrollbar below */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.skills-slider::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* Each skill keeps its natural size while the row scrolls horizontally */
.skills-slider > .skill-item {
    flex: 0 0 auto;
}

/* ---- Custom always-visible scrollbar with click arrows at each end ---- */
.skills-scrollbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto 2rem auto;
    padding: 0 2px;
    box-sizing: border-box;
}

.skills-scroll-arrow {
    flex: 0 0 auto;
    width: 28px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: #e8e8e8;
    color: var(--color-blue);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    user-select: none;
}
.skills-scroll-arrow:hover {
    background: #d6d6d6;
}
.skills-scroll-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Track fills the space between the arrows; the thumb reflects scroll position
   and is draggable. */
.skills-scroll-track {
    position: relative;
    flex: 1 1 auto;
    height: 9px;
    background: #e8e8e8;
    border-radius: 5px;
    cursor: pointer;
}
.skills-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 24px;
    width: 30%;
    background: var(--color-green);
    border-radius: 5px;
    cursor: grab;
}
.skills-scroll-thumb:active {
    cursor: grabbing;
    filter: brightness(0.92);
}

/* If the skills row ever fits entirely (no overflow), hide the whole control. */
.skills-scrollbar.is-hidden {
    display: none;
}

.category-slider .slick-track {
    margin-left: 0 !important;
}

/* Center alignment and hide arrows when items fit (legacy slick sliders) */
.category-slider.not-scrollable .slick-track {
    display: flex !important;
    justify-content: center !important;
    transform: none !important;
    width: 100% !important;
}

.category-slider.not-scrollable .slick-arrow {
    display: none !important;
}

.listing-type-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
}

.listing-type-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-blue);
}

.listing-type-subtitle {
    font-size: 0.95rem;
    color: var(--color-gray);
    font-style: italic;
    opacity: 0.8;
}

.listing-type-section {
    margin-bottom: 40px;
}

/* Sets top margin */
/* Card-type filters (Portfolio / Project / Inspiration / …) — rest under the
   active-skill chips, then dock into the header on scroll (see .card-filters.docked). */
.card-filters-rail {
    /* Reserves the filters' slot in the flow while they're pinned to the header. */
    margin: 0.5rem 0 0.25rem;
}
.card-filters {
    display: flex;
    /* Uses flexbox */
    flex-wrap: nowrap;
    /* Keep all filter buttons on a single line */
    justify-content: center;
    /* Centers horizontally */
    margin: 0;
}

/* Pinned state: floats inside the docked header, directly under the search bar.
   Gets its own rounded white surface so scrolling content doesn't show through
   the gaps between the pill buttons. width:max-content lets it size to however
   wide the two-group rail actually is instead of being clamped to 560px. */
.card-filters.docked {
    z-index: 3150;
    padding: 5px 8px 2px;
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    width: max-content !important;  /* override any JS-set px width */
    max-width: calc(100vw - 32px);  /* still won't overflow narrow screens */
    /* The JS sets `left` to the in-flow rail's exact center-x (in px) and we
       pull back by half the rail's real width here, so the docked pill lands
       precisely where it sat in the flow — centered, with no horizontal jump
       and no scrollbar-reference ambiguity (px left resolves the same as the
       in-flow content, unlike `left:50%` on a fixed element). */
    transform: translateX(-50%);
}

/* Card filters button styling */
.card-filters .listing-filter-button {
    text-align: center;
    /* Centers align text */
    padding: 0.5rem 0.75rem;
    /* Sets padding */
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 0.9rem;
    border: 2px solid var(--color-blue);
    /* Blue border */
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    cursor: pointer;
    /* Sets pointer cursor on hover */
    transition: all 0.2s ease;
    /* Sets smooth transition for all properties */
    color: var(--color-blue);
    /* Blue text */
    background-color: var(--color-white);
    /* White background */
    font-weight: 600;
    /* Ensure text is bold */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

/* Secondary "(listing)" / "(discussion)" tag inside the toggle button */
.card-filters .listing-filter-button .lf-kind {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: lowercase;
    margin-top: 2px;
}
.card-filters .listing-filter-button .lf-kind::before { content: '('; }
.card-filters .listing-filter-button .lf-kind::after { content: ')'; }

/* Card filters button hover state */
.card-filters .listing-filter-button:hover {
    background-color: var(--color-blue);
    /* Blue background on hover */
    color: var(--color-white);
    /* White text on hover */
    border-color: var(--color-blue);
    /* Blue border on hover */
}

/* Card filters button selected state */
.card-filters .listing-filter-button.selected {
    background-color: var(--color-blue);
    /* Blue background for selected */
    color: var(--color-white);
    /* White text for selected */
    border-color: var(--color-blue);
    /* Blue border for selected */
}

/* ===== Two-part filter rail: left (Members/Discussions/Listings) and right
   (Saved/Tagged/Add), separated by a subtle vertical divider. ===== */
.card-filters .cf-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.card-filters .cf-sep {
    align-self: stretch;
    width: 1px;
    min-height: 1.6rem;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 0.2rem;
}
/* Left separator gets a 2px width to match the right one (cf-sep-b). The stacked
   media query still overrides cf-sep-a to a full-width horizontal divider. */
.card-filters .cf-sep-a {
    width: 2px;
}
/* The 1px divider is barely visible inside the docked pill — give the right-hand
   separator more width, a touch more contrast, and wider margins so there's clear
   space between the sort (Popular) control and the Saved tab. */
.card-filters.docked .cf-sep-b {
    width: 2px;
    background: rgba(0, 0, 0, 0.18);
}
/* Both docked separators get the same horizontal margin. */
.card-filters.docked .cf-sep-a,
.card-filters.docked .cf-sep-b {
    margin: 0 0.3rem;
}

/* Icon pills (Saved ★, Tagged 💬, Add +) — glyph beside label, row layout. */
.card-filters .listing-filter-button .lf-ic {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1rem;
}
.card-filters .listing-filter-button.cf-icon-btn,
.card-filters .listing-filter-button.cf-listings-btn {
    flex-direction: row;
    gap: 5px;
}
.card-filters .cf-listings-btn .cf-caret,
.card-filters .cf-sort-btn .cf-caret { font-size: 0.6rem; opacity: 0.7; }

/* ── Sort control (cf-sort-wrap): brand-gold pill with white text/symbols.
   The visible control is .cf-sort-btn inside .cf-sort-wrap. Funnel icon and
   caret use currentColor, so they track the text color automatically. On
   hover / focus / open / selected the colors reverse (white bg, gold text).
   The dropdown menu (.cf-sort-menu) is intentionally left unchanged. */
.card-filters .cf-sort-btn {
    background-color: var(--color-gold);
    color: var(--color-white);
    border-color: var(--color-gold);
}
.card-filters .cf-sort-btn .cf-caret { opacity: 1; }
.card-filters .cf-sort-btn:hover,
.card-filters .cf-sort-btn:focus-visible,
.card-filters .cf-sort-btn.selected,
.card-filters .cf-sort-btn[aria-expanded="true"] {
    background-color: var(--color-white);
    color: var(--color-gold);
    border-color: var(--color-gold);
}

/* ── Listings / Sort dropdowns (styled like the Add dropdown) ── */
.cf-listings-wrap,
.cf-sort-wrap { position: relative; display: inline-flex; }

/* Listings dropdown — click-toggled, same visual style as the Add dropdown.
   Uses the HTML `hidden` attribute for open/close (set by JS), so CSS only
   handles the open state; no hover trigger here. */
.cf-listings-menu,
.cf-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 3401;
}
/* Sort menu sits in the middle of the rail — center it under the funnel so a
   narrow menu doesn't shove off toward one side. */
.cf-sort-menu { left: 50%; transform: translateX(-50%); min-width: 170px; }
.cf-listings-menu[hidden],
.cf-sort-menu[hidden] { display: none; }

/* The Listings dropdown also opens on HOVER over its tab. The :hover rule
   out-specifies the [hidden] display:none so the menu shows while the pointer is
   anywhere in the wrap. */
.cf-listings-wrap:hover .cf-listings-menu,
.cf-listings-wrap:hover .cf-listings-menu[hidden] { display: block; }
/* Transparent bridge across the 8px gap between the tab and the menu so moving
   the cursor down into the menu doesn't drop the hover and close it. */
.cf-listings-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

/* The dropdown header doubles as a Select-All / Deselect-All action button. */
button.cf-listings-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 7px 7px 0 0;
    margin-bottom: 2px;
    cursor: pointer;
    color: var(--color-blue);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 10px;
    transition: background-color 0.13s ease;
}
button.cf-listings-head:hover,
button.cf-listings-head:focus-visible { background: #eaf3fb; outline: none; }
button.cf-listings-head .cf-li-check { opacity: 1; color: var(--color-blue); }

/* Header label inside the dropdown (mirrors .cf-add-head). */
.cf-listings-head,
.cf-sort-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    padding: 6px 8px 4px;
}

/* Each sub-item / sort-option row. */
.cf-listings-item,
.cf-sort-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-blue);
    transition: background-color 0.13s ease;
}
.cf-listings-item:hover,
.cf-listings-item:focus-visible,
.cf-sort-item:hover,
.cf-sort-item:focus-visible { background: #eaf3fb; outline: none; }
.cf-listings-item.selected { color: var(--color-blue); }
.cf-listings-item.selected .cf-li-check { opacity: 1; }
.cf-sort-item.selected .cf-sort-check { opacity: 1; }

/* Checkmark column — always 14px wide so labels stay left-aligned. */
.cf-li-check,
.cf-sort-check {
    display: inline-block;
    width: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-blue);
    opacity: 0;          /* hidden when not selected */
    flex-shrink: 0;
}

/* ── Responsive: at ≤760px keep the rail on ONE line — the sort funnel joins the
   LEFT cluster (Members / Discussions / Listings) and the whole right group
   (Saved / Tagged / Add) collapses behind a single "⋯" button. Gaps, padding and
   font shrink so it all fits without stacking. ── */
@media (max-width: 760px) {
    .card-filters {
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
    }
    /* `order` pulls the sort funnel out from between the separators and up next
       to the left cluster; the overflow button takes the far right. */
    .card-filters .cf-left      { order: 1; flex: 0 1 auto; justify-content: center; }
    .card-filters .cf-sort-wrap { order: 2; flex: 0 0 auto; margin: 0; }
    /* First separator stays a thin vertical divider between the filter cluster
       and the overflow button (no full-width wrap-forcing). */
    .card-filters .cf-sep-a {
        order: 3;
        flex: 0 0 auto;
        width: 1px;
        height: auto;
        min-height: 1.4rem;
        margin: 0 0.15rem;
        align-self: stretch;
        background: rgba(0, 0, 0, 0.12);
    }
    /* The right group is replaced by the overflow button; drop its separator. */
    .card-filters .cf-sep-b { display: none; }
    .card-filters .cf-right { display: none; }
    .card-filters .cf-overflow-wrap { order: 4; flex: 0 0 auto; display: inline-flex; }
    /* Tighten internal spacing + buttons so the single row fits narrow screens. */
    .card-filters .cf-group { gap: 0.2rem; flex-wrap: nowrap; }
    .card-filters .listing-filter-button { padding: 0.35rem 0.4rem; font-size: 0.78rem; }
    .card-filters.docked { padding: 0.4rem 3px 0.1rem; }
}

/* ===== Masonry grid of listing / forum / add cards ===== */
/* Cards keep the same column width but vary in height so each card hugs the
   shape of its media (media is shown in full, never cropped to a fixed box). */
.listing-masonry {
    column-count: 4;
    column-gap: 1rem;
    margin-top: 1rem;
}
/* Smooth, jump-free filter swap: the freshly-rendered grid fades in (the
   container height is held + eased in JS so the page stays still). */
@keyframes lm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.listing-stack-container .listing-masonry,
.listing-stack-container .listing-masonry-cols { animation: lm-fade-in 0.22s ease both; }
/* JS-managed columns for the default mixed feed — lets us place add-cards in a
   specific column/depth (CSS multicol can't). Cards stay descendants of
   .listing-masonry so all card/media styles still apply. */
.listing-masonry.listing-masonry-cols {
    column-count: unset;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    /* Center the columns so the leftover space (when each column is capped at
       its max-width) sits in the margins rather than stretching the cards. */
    justify-content: center;
}
.listing-masonry-cols .listing-col {
    flex: 1 1 0;
    min-width: 0;
    /* Cap each column (card) width. Combined with the container-width-based
       column count (computeColumnCount), this keeps card width in a tight
       ~280–336px band (≤20%) so resizing the window no longer shrinks/grows
       cards a lot — the COUNT of columns flexes instead of the card SIZE. */
    max-width: 336px;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}
.listing-masonry-cols .listing-col > .listing-card {
    display: block;
    width: 100%;
    margin: 0;
    /* Drop the base .listing-card { min-height:480px } floor. The plain masonry
       resets this via `.listing-masonry > .listing-card` (direct child), but in
       this flex-column layout the cards are nested in .listing-col, so that
       selector misses them — leaving every short card padded out to 480px
       (the excess whitespace under image and member cards). Hug content here. */
    min-height: 0;
}
.listing-masonry > .listing-card {
    /* break-inside keeps a card from splitting across two columns */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    min-height: 0 !important;
    margin: 0 0 1.35rem;
    vertical-align: top;
}

/* Media inside masonry cards: full width, natural height (no fixed crop). */
.listing-masonry .listing-card img:not(.lc-owner-avatar),
.listing-masonry .listing-card video.listing-media {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
    background: #1f2937;
}
/* ===== Member cards mixed into the default masonry feed ===== */
/* Inherit the .listing-card chrome (bg/radius/shadow); style the inner bits and
   force the avatar to a fixed card-top crop (the generic masonry img rule would
   otherwise make a portrait photo full-height). */
/* Member card base look. Members are interleaved into the masonry for every
   view (default and filtered), so this renders identically in all of them. */
.listing-card.member-card {
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    cursor: pointer;
}
.member-card .member-card-avatar {
    width: 100% !important;
    aspect-ratio: 4 / 3;
    height: auto !important;
    max-height: 240px;
    object-fit: cover !important;
    display: block;
    background: #1f2937;
}
.member-card .member-card-body {
    padding: 0.7rem 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.member-card .member-card-namerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.member-card .member-card-name { font-weight: 700; }
.member-card .member-card-rating { font-size: 0.82rem; opacity: 0.85; white-space: nowrap; }
.member-card .member-card-loc { font-size: 0.8rem; opacity: 0.7; }
.member-card .member-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.member-card .member-card-cta { margin-top: 0.25rem; font-size: 0.82rem; font-weight: 600; opacity: 0.9; }

/* Social embeds. The card shape follows the video type: vertical (Shorts /
   Reels / TikTok) get a 9:16 portrait frame; horizontal (long YouTube videos)
   get a 16:9 landscape frame. height:auto overrides the fixed 250px from
   .listing-card .listing-media so the aspect-ratio actually takes effect. */
.listing-masonry .listing-card .lc-embed {
    width: 100%;
    height: auto;
}
.listing-masonry .listing-card .lc-embed.lc-embed-vertical { aspect-ratio: 9 / 16; }
.listing-masonry .listing-card .lc-embed.lc-embed-horizontal { aspect-ratio: 16 / 9; }

/* Framed image/video media. The element carries `aspect-ratio: auto <fallback>`
   (set inline per listing): once the media loads, its natural ratio wins and the
   card hugs the media exactly — full image, no crop, no excess whitespace. The
   fallback ratio only reserves height BEFORE load or for a missing/broken file,
   so the card never collapses and reshuffles the grid. height:auto lets the
   natural ratio drive the box. */
.listing-masonry .listing-card .listing-card-media-wrap.lc-framed {
    width: 100%;
    overflow: hidden;
    background: #1f2937;
}
.listing-masonry .listing-card .lc-framed > img:not(.lc-owner-avatar),
.listing-masonry .listing-card .lc-framed > video.listing-media {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    background: #1f2937;
}

@media (max-width: 1200px) { .listing-masonry { column-count: 3; } }
@media (max-width: 860px)  { .listing-masonry { column-count: 2; } }
@media (max-width: 560px)  { .listing-masonry { column-count: 1; } }

/* Profile-page masonry: reuses the homepage card/masonry styles (via the
   .listing-masonry class) but uses fewer columns for the narrower profile
   section. Higher specificity (.listing-masonry.profile-masonry) so it beats
   the homepage column-count rules above at every breakpoint. */
.listing-masonry.profile-masonry { column-count: 3; }
@media (max-width: 1000px) { .listing-masonry.profile-masonry { column-count: 2; } }
@media (max-width: 640px)  { .listing-masonry.profile-masonry { column-count: 1; } }

/* ── Profile-page listing cards: their OWN styling, scoped to .profile-masonry
   so the homepage/browse cards are never affected (and vice-versa). ─────────
   • Every listing here belongs to the profile owner, so the per-card owner
     avatar + name is redundant → hide it.
   • On desktop the action bar sits over a dark hover gradient; the shared
     card styles color the icons dark-gray (var(--color-gray)), which renders
     them nearly invisible (the comment icon "disappears"). Force them light
     on the profile cards so comment / star / hide read clearly. Mobile keeps
     its own light, always-visible bar (see mobile.css). */
.profile-masonry .lc-owner { display: none !important; }
@media (min-width: 769px) {
    .profile-masonry .lc-comment-btn,
    .profile-masonry .lc-actions .icon-button { color: #fff; }
    .profile-masonry .lc-comment-btn:hover,
    .profile-masonry .lc-comment-btn:focus-visible,
    .profile-masonry .lc-actions .icon-button:hover,
    .profile-masonry .lc-actions .icon-button:focus-visible {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }
    .profile-masonry .lc-actions .icon-button.star.active-star { color: #f5b234; }
}

/* Forum topic cards in the grid */
.listing-card.forum-card {
    cursor: default;
    padding: 0.75rem 0.85rem;
    min-height: 0;
}
.forum-card-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-blue);
    background: #eaf3fb;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 0.35rem;
}
.forum-card-title { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--color-blue); }
.forum-card-body { margin: 0 0 0.4rem; color: #555; font-size: 0.9rem; line-height: 1.35; }
/* Optional attached image on a forum card in the masonry. */
.forum-card-media { margin: 0 0 0.5rem; border-radius: 8px; overflow: hidden; background: #f4f4f4; }
.forum-card-media img { display: block; width: 100%; height: auto; }
.forum-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 0.4rem; }

/* Listing type badge (Portfolio / Inspiration / Project) over the media,
   mirroring the forum card's "Forum" tag. */
.lc-type-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-white);
    background: rgba(31, 41, 55, 0.78);
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
/* Hide the type tag while hovering the card so the overlay reads cleanly. */
.listing-card:hover .lc-type-tag,
.listing-card:focus-within .lc-type-tag {
    opacity: 0;
    visibility: hidden;
}
.lc-type-tag.lc-type-portfolio { background: rgba(37, 99, 235, 0.85); }
.lc-type-tag.lc-type-inspiration { background: rgba(217, 119, 6, 0.85); }
.lc-type-tag.lc-type-project { background: rgba(22, 163, 74, 0.85); }

/* Brief highlight when a forum thread is opened from search. */
.forum-card-highlight {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: outline-color 0.4s ease, box-shadow 0.4s ease;
}

/* Emoji/icon stand-in for search results that have no thumbnail (forum). */
.search-result-item .sr-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #eaf3fb;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* ===== Active skill filter chips (under the slider, above the cards) ===== */
.active-skills-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 1rem;
}
.active-skills-bar[hidden] { display: none; }

/* The collapsed "(Skills)" pill only appears once the bar docks; in flow the
   chips show inline (below). */
.active-skills-bar .ask-collapsed-btn { display: none; }
.active-skills-bar .ask-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Placeholder that holds the bar's flow slot while it's pinned to the header. */
.active-skills-placeholder { margin: 0.25rem 0 1rem; }

/* Docked: the chip bar pins inside the header under the search bar and contracts
   to a single pill. JS sets position:fixed + top/left; the translateX(-50%) lands
   it on the placeholder's center, matching the search-bar / card-filters docks. */
.active-skills-bar.docked {
    z-index: 3160;
    margin: 0;
    padding: 0.25rem;
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
}
.active-skills-bar.docked .ask-collapsed-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.active-skills-bar.docked .ask-count { opacity: 0.85; }
.active-skills-bar.docked .ask-caret { font-size: 0.7rem; }
/* Chips become a dropdown under the pill, revealed only when .open. */
.active-skills-bar.docked .ask-chips {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    max-width: calc(100vw - 32px);
    max-height: 50vh;
    overflow: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    z-index: 3401;
}
.active-skills-bar.docked.open .ask-chips { display: flex; }
.active-skill-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem 0.3rem 0.7rem;
    background: var(--color-blue);
    color: var(--color-white);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}
.active-skill-tab .ast-remove {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: var(--color-white);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}
.active-skill-tab .ast-remove:hover { background: rgba(255, 255, 255, 0.45); }

.ast-close-all {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1.5px solid var(--color-blue);
    color: var(--color-blue);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ast-close-all:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

/* ===== Forum composer skill-tag picker ===== */
.add-forum-skill-picker { width: 100%; }
.add-forum-skill-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.4rem; }
.afs-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 6px 2px 10px;
    background: #eaf3fb;
    color: var(--color-blue);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.afs-tag .afs-tag-remove {
    background: none;
    border: none;
    color: var(--color-blue);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
}
.afs-input-wrap { position: relative; }
.add-forum-skill-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    margin-top: 2px;
    max-height: 180px;
    overflow-y: auto;
}
.add-forum-skill-suggest[hidden] { display: none; }
.afs-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
}
.afs-suggest-item:hover { background: #f1f7fd; color: var(--color-blue); }
.forum-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #888;
}

/* Add-listing / add-forum cards */
.listing-card.add-card {
    cursor: default;
    border: 2px dashed #c5d4e3;
    background: #f8fbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.4rem 1rem;
    min-height: 0;
}
.add-card-plus { font-size: 2.2rem; color: var(--color-blue); line-height: 1; }
.add-card-title { margin: 0; font-size: 1rem; color: var(--color-blue); }
.add-card-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #444;
}
.add-card-options label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.add-forum-form { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.add-forum-form input,
.add-forum-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-family: inherit;
    font-size: 0.9rem;
}
.add-forum-actions { display: flex; gap: 0.5rem; justify-content: center; }

/* (Removed: .members-list / .members-grid / .member-row styles. Members are no
   longer rendered as a separate list — they're interleaved into the masonry as
   .member-card cards for every view, styled above.) */

/* Listing grid container styling */
.listing-grid-container {
    margin-top: 1.5rem;
    /* Sets top margin */
}

/* Listing grid styling */
.listing-grid {
    display: grid;
    /* Uses grid layout */
    grid-template-columns: repeat(3, 1fr);
    /* Sets 3 columns */
    grid-auto-rows: minmax(360px, auto);
    /* Ensures rows accommodate doubled card height */
    gap: 1rem;
    /* Sets space between cards */
    padding: 1rem;
    /* Adds some padding around the grid */
    box-sizing: border-box;
    /* Includes padding and border in the element's total width and height */
}

/* Listing card styling */
.listing-card {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 480px;
    background: var(--color-white);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Listing detail overlay (opens when a card is clicked) */
.listing-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    overflow-y: auto;
    padding: 5vh 1rem 5vh;
}
.listing-detail-overlay.open { display: flex; }
.listing-detail-dialog {
    background: var(--color-white);
    border-radius: 12px;
    max-width: 760px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: ldFadeIn 0.18s ease-out;
}
@keyframes ldFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.ld-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
    background: #f8fafc;
    flex-wrap: wrap;
}
.ld-breadcrumb a {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 600;
}
.ld-breadcrumb a:hover { text-decoration: underline; }
.ld-breadcrumb .ld-sep { color: #999; }
.ld-breadcrumb .ld-current {
    color: #333;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.ld-close {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0 6px;
}
.ld-close:hover { color: #000; }
.ld-media-wrap img,
.ld-media-wrap video {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    background: #1f2937;
}
.ld-body {
    padding: 1.2rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.ld-title {
    font-size: 1.4rem;
    margin: 0;
    color: var(--color-blue);
}
.ld-owner-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafbfd;
}
.ld-owner-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e6e6e6;
}
.ld-owner-card .ld-owner-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ld-owner-card .ld-owner-name {
    font-weight: 700;
    color: var(--color-blue);
}
.ld-owner-card .ld-owner-sub {
    font-size: 0.8rem;
    color: #666;
}
.ld-view-profile {
    text-decoration: none;
}
.ld-caption {
    line-height: 1.5;
    color: #333;
    margin: 0;
}
.ld-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin: 0;
}
.ld-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Crumb-trail banner shown on profile.html when arriving from a listing.
   Sits inside #profile-container above the profile-hero. */
.crumb-trail {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin: 1rem 0 0.5rem 200px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.crumb-trail a {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 600;
}
.crumb-trail a:hover { text-decoration: underline; }
.crumb-trail .crumb-sep { color: #999; }
.crumb-trail .crumb-current {
    color: #333;
    font-weight: 600;
}
/* Crumb trail relocated to the page bottom (above the footer) — centered, no
   avatar offset. */
.crumb-trail.crumb-trail-bottom {
    margin: 1.75rem auto 1rem;
    max-width: 1280px;
    box-sizing: border-box;
}

/* Reviews summary + "Request a Quote" block at the top of the profile hero. */
.profile-rq {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem 0;
    box-sizing: border-box;
}
/* Reviews summary + action buttons. On desktop this becomes a 2-column row
   (reviews left ↔ buttons right); the mobile skin keeps it centered/wrapping. */
.profile-rq .prq-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.prq-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.prq-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* "Comment on profile" — outlined companion to the filled Request-a-Quote btn. */
.prq-comment-btn {
    display: inline-flex; align-items: center;
    background: #fff; color: #1a1a1a; font-weight: 700; font-size: 0.9rem;
    border: 1px solid #e5e7eb; border-radius: 999px; padding: 7px 17px;
    cursor: pointer; font-family: inherit;
}
.prq-comment-btn:hover { border-color: #f5b234; background: #fffdf6; }
/* Comment composer modal (reuses the reviews-popup overlay chrome). */
.prq-modal-comment { max-width: 460px; }
.prq-comment-sub { color: #666; font-size: 0.85rem; margin: 0 0 0.75rem; }
.prq-comment-input {
    width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 0.6rem 0.7rem; font-family: inherit;
    font-size: 0.92rem; resize: vertical;
}
.prq-comment-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.75rem; }
.prq-comment-send[disabled] { opacity: 0.6; cursor: default; }
.prq-comment-msg { color: #d9534f; font-size: 0.82rem; margin: 0.5rem 0 0; }
.prq-reviews {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 999px;
    padding: 6px 14px; cursor: pointer; font-size: 0.9rem; color: #333;
}
.prq-reviews:hover { border-color: #f5b234; }
.prq-stars, .prq-item-stars { color: #ddd; letter-spacing: 1px; white-space: nowrap; }
.prq-star.full { color: #f5b234; }
.prq-star.half { color: #f5b234; opacity: 0.5; }
.prq-avg { font-weight: 700; color: #333; }
.prq-count { color: #888; font-size: 0.85rem; }
.prq-noreviews { color: #999; font-size: 0.88rem; }
.prq-quote-btn {
    display: inline-flex; align-items: center;
    background: #f5b234; color: #1a1a1a; font-weight: 700; font-size: 0.9rem;
    border-radius: 999px; padding: 8px 18px; text-decoration: none;
    border: none; cursor: pointer; font-family: inherit; /* <button> fallback form */
}
.prq-quote-btn:hover { background: #d89018; }
.prq-list { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; max-width: 700px; }
.prq-item { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 0.7rem 0.9rem; }
.prq-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.prq-item-name { font-weight: 700; font-size: 0.88rem; color: #333; }
.prq-item-text { margin: 4px 0 0; font-size: 0.86rem; color: #555; line-height: 1.5; }

/* Owner edit-mode controls in the prq-row (Manage reviews / Edit survey). */
.prq-edit-controls { display: inline-flex; align-items: center; gap: 0.5rem; }
.prq-edit-controls[hidden] { display: none; }
.prq-manage-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff; border: 1px solid #d0d5dd; border-radius: 999px;
    padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: #444;
    cursor: pointer; text-decoration: none;
}
.prq-manage-btn:hover { border-color: #f5b234; color: #d89018; }

/* Reviews pop-up (modal) — centered over the page. */
.prq-modal-overlay {
    position: fixed; inset: 0; z-index: 12000;
    background: rgba(17, 17, 20, 0.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; box-sizing: border-box;
}
.prq-modal {
    background: #fff; border-radius: 16px; width: 100%; max-width: 560px;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden;
}
.prq-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid #eee;
}
.prq-modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #222; }
.prq-modal-close {
    background: none; border: none; font-size: 1.6rem; line-height: 1;
    color: #888; cursor: pointer; padding: 0 4px;
}
.prq-modal-close:hover { color: #222; }
.prq-modal-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
.prq-modal-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 0.9rem; }
.prq-modal-empty { color: #888; font-size: 0.9rem; margin: 0.5rem 0; }
.prq-modal .prq-list { max-width: none; margin-top: 0; }
.prq-item-hidden { opacity: 0.55; }
.prq-item-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.prq-item-act {
    background: #f4f4f6; border: 1px solid #e2e2e6; border-radius: 8px;
    font-size: 0.78rem; padding: 4px 10px; cursor: pointer; color: #444;
}
.prq-item-act.danger { color: #c0392b; }
.prq-item-act:hover { border-color: #c9c9d0; }
.prq-manage-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.prq-tool-btn {
    background: #fff; border: 1px solid #d0d5dd; border-radius: 999px;
    padding: 7px 14px; font-size: 0.84rem; font-weight: 600; color: #444; cursor: pointer;
}
.prq-tool-btn:hover { border-color: #f5b234; color: #d89018; }
.prq-tool-btn.primary { background: #f5b234; border-color: #f5b234; color: #1a1a1a; }
.prq-tool-btn.primary:hover { background: #d89018; color: #1a1a1a; }
.prq-import-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.prq-import-form[hidden] { display: none; }

/* "Request a review" panel: contact channels + member search/send list. */
.prq-request-panel {
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafbfc;
    padding: 0.8rem;
    margin-bottom: 1rem;
}
.prq-request-panel[hidden] { display: none; }
.prq-req-sub { margin: 0 0 0.6rem; font-size: 0.8rem; color: #667085; line-height: 1.45; }
.prq-req-channels { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.7rem; }
.prq-req-chan {
    display: inline-flex; align-items: center;
    background: #fff; border: 1px solid #dcdfe4; border-radius: 999px;
    padding: 5px 13px; font-size: 0.78rem; font-weight: 700; font-family: inherit;
    color: #333; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.prq-req-chan:hover { border-color: #f5b234; color: #d89018; }
.prq-req-search {
    width: 100%; box-sizing: border-box;
    border: 1px solid #dcdfe4; border-radius: 8px;
    padding: 0.5rem 0.7rem; font-family: inherit; font-size: 0.88rem;
    margin-bottom: 0.5rem; background: #fff;
}
.prq-req-list { max-height: 220px; overflow-y: auto; }
.prq-req-loading { margin: 0.4rem 0; font-size: 0.8rem; color: #98a2b3; }
.prq-req-row {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0.15rem; border-top: 1px solid #f0f2f5;
}
.prq-req-row:first-child { border-top: none; }
.prq-req-avatar {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important; object-fit: cover; flex-shrink: 0;
    border: 1px solid #e6e6e6;
}
.prq-req-name {
    flex: 1; font-size: 0.86rem; font-weight: 600; color: #333;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.prq-req-conn {
    display: inline-block; font-size: 0.62rem; font-weight: 700;
    color: #2e7d32; background: #e8f5e9; border-radius: 8px;
    padding: 1px 7px; margin-left: 4px; vertical-align: middle;
}
.prq-req-send {
    flex-shrink: 0; background: var(--color-blue, #2f6fed); color: #fff;
    border: none; border-radius: 999px; padding: 5px 14px;
    font-size: 0.76rem; font-weight: 700; font-family: inherit;
    cursor: pointer; line-height: 1.3;
}
.prq-req-send:hover { filter: brightness(0.95); }
.prq-req-send[disabled] { background: #e8f5e9; color: #2e7d32; cursor: default; }
.prq-import-form input, .prq-import-form select, .prq-import-form textarea {
    border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; font-size: 0.88rem; font-family: inherit;
}
.prq-import-actions { display: flex; justify-content: flex-end; }
.prq-import-msg { color: #c0392b; font-size: 0.8rem; margin: 0; }

/* ── Owner edit-mode vs preview toggles on the profile hero row ──────────────
   The owner sees the visitor-preview affordances by default and the edit-only
   ones only while #profile-container has .edit-mode (toggled live in JS). */
.prq-owner-editonly { display: none !important; }
#profile-container.edit-mode .prq-owner-editonly { display: inline-flex !important; }
#profile-container.edit-mode .prq-owner-previewonly { display: none !important; }
.prq-share-reviews {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-blue, #2f6fed); font-weight: 700;
}
.prq-share-reviews svg { flex-shrink: 0; }

/* ── New in-page popups (Surveys builder iframe, review-share, quote fill) ──
   Reuse the .prq-modal-overlay / .prq-modal chrome; prqm-* is namespaced so it
   never collides with survey.html's generic class names. */
.prq-modal.prqm-iframe-modal { width: min(920px, 96vw); max-width: 96vw; height: 88vh; display: flex; flex-direction: column; }
.prqm-iframe-body { flex: 1; padding: 0; overflow: hidden; }
.prqm-iframe { width: 100%; height: 100%; border: 0; display: block; }
.prq-modal.prqm-share { width: min(460px, 94vw); }
.prqm-share-sub { color: #555; font-size: 0.88rem; margin: 0 0 12px; }
.prqm-field-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #667085; margin: 10px 0 4px; }
.prqm-copyrow { display: flex; gap: 8px; }
.prqm-copyinput { flex: 1; min-width: 0; border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; font-family: inherit; background: #f9fafb; color: #333; }

.prq-modal.prqm-quote { width: min(560px, 96vw); }
.prqm-back { background: none; border: none; color: var(--color-blue, #2f6fed); font-weight: 700; font-size: 0.9rem; font-family: inherit; cursor: pointer; padding: 0 8px 0 0; }
.prqm-lead { color: #555; font-size: 0.9rem; margin: 0 0 12px; }
.prqm-picker { display: flex; flex-direction: column; gap: 10px; }
.prqm-pick { text-align: left; background: #f9fafb; border: 1px solid #e4e7ec; border-radius: 10px; padding: 12px 14px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 3px; }
.prqm-pick:hover { border-color: var(--color-blue, #2f6fed); background: #fff; }
.prqm-pick-title { font-weight: 700; color: #1d2939; font-size: 0.95rem; }
.prqm-pick-desc { color: #667085; font-size: 0.82rem; }
.prqm-pick-meta { color: #98a2b3; font-size: 0.75rem; }
.prqm-form { display: flex; flex-direction: column; gap: 14px; }
.prqm-qcard { display: flex; flex-direction: column; gap: 6px; }
.prqm-qcard.prqm-invalid { outline: 2px solid #f04438; outline-offset: 4px; border-radius: 8px; }
.prqm-qlabel { font-weight: 700; color: #1d2939; font-size: 0.9rem; }
.prqm-req { color: #f04438; }
.prqm-qhelp { color: #667085; font-size: 0.8rem; margin: 0; }
.prqm-input { border: 1px solid #d0d5dd; border-radius: 8px; padding: 9px 11px; font-size: 0.9rem; font-family: inherit; width: 100%; box-sizing: border-box; }
.prqm-input:focus { outline: none; border-color: var(--color-blue, #2f6fed); }
.prqm-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.prqm-opt { font-size: 0.9rem; color: #344054; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.prqm-scale { display: flex; gap: 8px; }
.prqm-scale-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; font-weight: 700; color: #344054; cursor: pointer; font-family: inherit; }
.prqm-scale-btn.sel { background: var(--color-blue, #2f6fed); border-color: var(--color-blue, #2f6fed); color: #fff; }
.prqm-attach-btn { align-self: flex-start; border: 1px dashed #98a2b3; background: #f9fafb; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; font-family: inherit; color: #344054; cursor: pointer; }
.prqm-attach-btn:hover { border-color: var(--color-blue, #2f6fed); color: var(--color-blue, #2f6fed); }
.prqm-attach-btn[disabled] { opacity: 0.6; cursor: default; }
.prqm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prqm-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef4ff; color: #175cd3; border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 0.8rem; max-width: 220px; }
.prqm-chip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prqm-chip-x { border: none; background: none; color: #175cd3; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 2px; }
.prqm-global-attach { border-top: 1px solid #eef0f3; padding-top: 12px; }
.prqm-error { color: #d92d20; font-size: 0.85rem; margin: 0; }
.prqm-send { align-self: stretch; justify-content: center; }
.prqm-done { text-align: center; padding: 16px 4px; }
.prqm-done-check { width: 52px; height: 52px; border-radius: 50%; background: #12b76a; color: #fff; font-size: 1.6rem; line-height: 52px; margin: 0 auto 12px; }
.prqm-done h4 { margin: 0 0 6px; font-size: 1.05rem; color: #1d2939; }
.prqm-done p { color: #667085; font-size: 0.9rem; margin: 0 0 16px; }

/* Media query for medium screens (max-width: 1024px) */
@media (max-width: 1024px) {
    .listing-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Sets 2 columns on medium screens */
        grid-auto-rows: minmax(360px, auto);
        /* Ensures rows accommodate doubled card height */
    }
}

/* Media query for small screens (max-width: 768px) */
@media (max-width: 768px) {
    .listing-grid {
        grid-template-columns: 1fr;
        /* Sets 1 column on small screens */
        grid-auto-rows: minmax(360px, auto);
        /* Ensures rows accommodate doubled card height */
    }
}

/* Listing card layout — media fills the card; info + bottom bar overlay
 * on top of the media and only appear on hover. */
.listing-card {
    cursor: pointer;
    position: relative;
}
.listing-card:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}
.listing-card-media-wrap {
    position: relative;
}
/* Listing-card media must never navigate the user off-site. Cross-origin
   embeds (YouTube / Instagram / Facebook iframes) capture their own clicks and
   would open the external page; making them non-interactive lets the click fall
   through to the card, which opens the in-site listing detail instead. Hover-to
   -play still works (it swaps the iframe src in JS, not via clicks). */
.listing-card-media-wrap iframe,
.listing-card-media-wrap a {
    pointer-events: none;
}

/* Info + bottom bar are hidden until the card is hovered/focused. */
.listing-card-info,
.lc-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45));
    color: #fff;
    pointer-events: none;
}
.listing-card-info {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}
.lc-bottom-bar {
    bottom: 0;
}
.listing-card:hover .listing-card-info,
.listing-card:hover .lc-bottom-bar,
.listing-card:focus-within .listing-card-info,
.listing-card:focus-within .lc-bottom-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.listing-card:hover .lc-title,
.listing-card:focus-within .lc-title {
    color: #fff;
}
.listing-card:hover .lc-owner,
.listing-card:focus-within .lc-owner {
    color: rgba(255, 255, 255, 0.9);
}
.listing-card-info {
    padding: 0.4rem 0.7rem 0.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.lc-title {
    font-size: 1rem;
    margin: 0;
    color: var(--color-blue);
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Skill tags shown under the listing title — smaller than the rest. */
.lc-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.lc-info-tags .lc-tag {
    font-size: 0.62rem;
    padding: 1px 6px;
}

/* Type-specific detail chips (budget/scope for projects; cost/timeframe for portfolios). */
.lc-type-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.lc-detail-chip {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lc-detail-budget, .lc-detail-scope {
    background: rgba(22, 163, 74, 0.15);
    color: #14532d;
    border: 1px solid rgba(22, 163, 74, 0.3);
}
.lc-detail-cost, .lc-detail-timeframe {
    background: rgba(37, 99, 235, 0.12);
    color: #1e3a8a;
    border: 1px solid rgba(37, 99, 235, 0.25);
}
[data-theme="dark"] .lc-detail-budget,
[data-theme="dark"] .lc-detail-scope {
    background: rgba(22, 163, 74, 0.2);
    color: #86efac;
    border-color: rgba(22, 163, 74, 0.35);
}
[data-theme="dark"] .lc-detail-cost,
[data-theme="dark"] .lc-detail-timeframe {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
}

/* Bottom bar — only minimal info: tiny round owner avatar + name on the
 * left, speech-bubble (private comment) icon on the right. */
.lc-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.7rem 0.45rem;
    margin-top: auto;
}
.lc-owner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--color-gray);
    font-size: 0.82rem;
    overflow: hidden;
    cursor: pointer;
}
.lc-owner:hover .lc-owner-name {
    color: var(--color-blue);
    text-decoration: underline;
}
.lc-owner-avatar {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e6e6e6;
}
.lc-owner-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* ── Tier badges & card rings ───────────────────────────────────────────── */
.lc-tier-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.5;
    white-space: nowrap;
}
.lc-tier-keystone {
    background: #fff8e1;
    color: #b8860b;
    border: 1px solid #e6c200;
}
.lc-tier-artisan {
    background: #fdf3e7;
    color: #9c6a1a;
    border: 1px solid #d4942a;
}
/* Gold ring on the card itself */
.listing-card.lc-tier-keystone {
    box-shadow: 0 0 0 2px #e6c200, 0 2px 8px rgba(0,0,0,0.10);
}
.listing-card.lc-tier-artisan {
    box-shadow: 0 0 0 2px #d4942a, 0 2px 8px rgba(0,0,0,0.08);
}

.lc-comment-btn {
    background: transparent;
    border: none;
    color: var(--color-gray);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}
.lc-comment-btn:hover,
.lc-comment-btn:focus-visible {
    background: #eaf3fb;
    color: var(--color-blue);
    outline: none;
}
.lc-comment-btn svg {
    display: block;
}
.lc-comment-btn.has-count {
    width: auto;
    padding: 0 8px 0 6px;
    border-radius: 12px;
    gap: 3px;
}
.lc-comment-count {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Inline action group in the bottom bar: comment, save (star), hide (✖). */
.lc-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}
.lc-actions .icon-button {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-gray);
    transition: background-color 0.15s, color 0.15s;
}
.lc-actions .icon-button:hover,
.lc-actions .icon-button:focus-visible {
    background: #eaf3fb;
    outline: none;
}
.lc-actions .icon-button.star { color: #c9a227; }
.lc-actions .icon-button.star.active-star { color: gold; }
.lc-actions .icon-button.discard:hover { color: #c0392b; background: #fdecea; }

/* In the dark hover overlay, the comment and discard (×) icons are white. */
.lc-bottom-bar .lc-actions .lc-comment-btn,
.lc-bottom-bar .lc-actions .icon-button.discard {
    color: #fff;
}
.lc-bottom-bar .lc-actions .lc-comment-btn:hover,
.lc-bottom-bar .lc-actions .lc-comment-btn:focus-visible,
.lc-bottom-bar .lc-actions .icon-button:hover,
.lc-bottom-bar .lc-actions .icon-button:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}
.lc-bottom-bar .lc-actions .icon-button.discard:hover {
    color: #ff6b5e;
    background: rgba(255, 255, 255, 0.18);
}

/* Hidden per-card details — copied into the floating tooltip on hover. */
.lc-hover-details {
    display: none;
}

/* Floating tooltip that follows the cursor. */
.lc-hover-tooltip {
    position: absolute;
    z-index: 10500;
    max-width: 320px;
    background: #fff;
    color: #222;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
/* Owner header inside the hover tooltip — makes clear the rating is for the
 * user, not the media. */
.lc-hover-tooltip .lc-hd-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #eee;
}
.lc-hover-tooltip .lc-hd-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.lc-hover-tooltip .lc-hd-name {
    font-weight: 600;
    color: #222;
    font-size: 0.9rem;
}
.lc-hover-tooltip .lc-hd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.lc-hover-tooltip .lc-hd-caption {
    margin: 0;
    color: #444;
    line-height: 1.4;
}
.lc-hover-tooltip .lc-hd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lc-rating {
    font-size: 0.78rem;
    color: #d4a017;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lc-rating-num { color: var(--color-gray); font-weight: 600; }
.lc-review-count { color: #999; font-weight: 400; }
.lc-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eaf3fb;
    color: var(--color-blue);
    font-weight: 600;
}
.lc-location {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
}

/* Private comment modal — opens over the listing card. */
.lc-private-comment-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    padding: 1rem;
}
.lc-private-comment-modal[hidden] {
    display: none;
}
.lc-pcm-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 440px;
    padding: 1.25rem 1.25rem 1rem;
    position: relative;
}
.lc-pcm-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-gray);
    cursor: pointer;
}
.lc-pcm-title {
    margin: 0 1.5rem 0.25rem 0;
    font-size: 1.05rem;
    color: var(--color-blue);
}
.lc-pcm-sub {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: #777;
}
.lc-pcm-input {
    width: 100%;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 88px;
    box-sizing: border-box;
}
.lc-pcm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Previous comments the viewer already left on this listing, shown above the
   composer when the comment modal is re-opened. */
.lc-pcm-history {
    margin: 0 0 0.85rem;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #f8fafc;
    padding: 0.55rem 0.7rem;
    max-height: 160px;
    overflow-y: auto;
}
.lc-pcm-history[hidden] { display: none; }
.lc-pcm-history-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.4rem;
}
.lc-pcm-history-list { list-style: none; margin: 0; padding: 0; }
.lc-pcm-h-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-top: 1px solid #eef2f6;
}
.lc-pcm-h-row:first-child { border-top: none; }
.lc-pcm-h-text {
    flex: 1;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.35;
    word-break: break-word;
}
.lc-pcm-h-time {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: #9aa5b1;
}

/* Lightweight transient confirmation toast. */
.lc-pcm-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    z-index: 12000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Listing card image styling */
.listing-card img:not(.lc-owner-avatar),
.listing-card .listing-media {
    width: 100%;
    /* Sets full width */
    height: 250px;
    /* Makes image square and increase height */
    object-fit: cover;
    /* Covers the area */
    display: block;
    /* Displays as block */
    margin: 0 auto;
    /* Centers the image */
    background: #1f2937;
}

/* Social media embeds — YouTube Shorts / Instagram Reels / Facebook Reels.
 * Wrap the iframe in a div so the card keeps a fixed height matching the
 * stack; the iframe fills it. object-fit doesn't apply to iframes, so we
 * use absolute positioning instead. */
.listing-card .lc-embed {
    position: relative;
    overflow: hidden;
    /* No-scroll: the embed is a fixed-size player, never a scrollable feed —
       contain any scroll/overscroll so a swipe can't chain out to the page. */
    overscroll-behavior: none;
    padding: 0;
    background: #000;
}
.listing-card .lc-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* VERTICAL embeds only (Instagram/Facebook reels, YouTube Shorts, TikTok)
 * include a ~70px header (avatar/username) above the video and a caption/likes
 * footer below it. Scoot the iframe up 70px so the header is clipped, and grow
 * its height so the media area frames just the video. Horizontal embeds (long
 * YouTube videos) have no such chrome — they must NOT be shifted or they'd be
 * cropped, so this rule is scoped to .lc-embed-vertical.
 *
 * Per-platform chrome sizes (measured at typical card widths):
 *   Instagram Reel – top header ~55 px; bottom (action bar + likes + comments
 *                    + "View more on Instagram") ≈ 220 px
 *   TikTok embed v2 – minimal top chrome; bottom bar ≈ 60 px
 *   Facebook reel  – top header ~50 px; bottom bar ≈ 50 px
 *   YouTube Shorts – top bar ~70 px; bottom info strip ≈ 50 px
 * Fallback covers any unknown vertical embed (clips 55 px top + 55 px bottom). */

/* Generic fallback */
.listing-card .lc-embed.lc-embed-vertical iframe {
    top: -55px;
    height: calc(100% + 110px);
}
/* YouTube Shorts */
.listing-card .lc-embed.lc-embed-vertical.lc-embed-youtube iframe {
    top: -70px;
    height: calc(100% + 120px);
}
/* Instagram Reels — large footer */
.listing-card .lc-embed.lc-embed-vertical.lc-embed-instagram iframe {
    top: -55px;
    height: calc(100% + 275px);
}
/* TikTok */
.listing-card .lc-embed.lc-embed-vertical.lc-embed-tiktok iframe {
    top: -15%;
    height: 130%;
}
/* Facebook reels */
.listing-card .lc-embed.lc-embed-vertical.lc-embed-facebook iframe {
    top: -50px;
    height: calc(100% + 100px);
}

/* Detail overlay embed — shape follows the video type. Vertical clips stay
   portrait (max 420px); horizontal videos get a wider 16:9 frame. */
.ld-embed {
    width: 100%;
    margin: 0 auto;
    background: #000;
    position: relative;
    overflow: hidden;
    /* No-scroll: keep the player from scrolling and from chaining a swipe out to
       the detail overlay behind it (scrolling="no" + overflow:hidden + this). */
    overscroll-behavior: none;
    border-radius: 8px;
}
.ld-embed.lc-embed-vertical { max-width: 420px; aspect-ratio: 9 / 16; }
.ld-embed.lc-embed-horizontal { max-width: 720px; aspect-ratio: 16 / 9; }
.ld-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Per-platform chrome clipping — detail overlay (mirrors masonry card rules) */
.ld-embed.lc-embed-vertical iframe {
    top: -55px;
    height: calc(100% + 110px);
}
.ld-embed.lc-embed-vertical.lc-embed-youtube iframe {
    top: -70px;
    height: calc(100% + 120px);
}
.ld-embed.lc-embed-vertical.lc-embed-instagram iframe {
    top: -55px;
    height: calc(100% + 275px);
}
.ld-embed.lc-embed-vertical.lc-embed-tiktok iframe {
    top: -15%;
    height: 130%;
}
.ld-embed.lc-embed-vertical.lc-embed-facebook iframe {
    top: -50px;
    height: calc(100% + 100px);
}

/* Listing card buttons container */
.listing-card .card-buttons {
    position: absolute;
    /* Sets absolute positioning */
    top: 0;
    /* Positions at the top */
    left: 0;
    /* Positions at the left */
    width: 100%;
    /* Sets full width */
    display: flex;
    /* Uses flexbox */
    justify-content: space-between;
    /* Sets space between buttons */
    padding: 0.5rem;
    /* Sets padding */
    box-sizing: border-box;
    /* Includes padding and border in the element's total width and height */
}

/* Listing card icon button styling */
.listing-card .card-buttons .icon-button {
    background: rgba(255, 255, 255, 0.8);
    /* Sets semi-transparent white background */
    border: none;
    /* Removes border */
    border-radius: 50%;
    /* Sets circular shape */
    width: 30px;
    /* Sets fixed width */
    height: 30px;
    /* Sets fixed height */
    display: flex;
    /* Uses flexbox */
    align-items: center;
    /* Vertically aligns content */
    justify-content: center;
    /* Horizontally aligns content */
    cursor: pointer;
    /* Sets pointer cursor on hover */
    font-size: 1.2rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Sets subtle shadow */
}

/* Star icon button styling */
.listing-card .card-buttons .icon-button.star {
    color: gold;
    /* Sets example color for star */
}

/* Listing comments toggle styling */
.listing-comments-toggle {
    padding: 0.5rem;
    /* Sets padding */
    text-align: center;
    /* Centers align text */
}

/* Listing comments section styling */
.listing-comments-section {
    padding: 0.5rem;
    /* Sets padding */
    border-top: 1px solid #e0e0e0;
    /* Sets top border */
    background-color: #f9f9f9;
    /* Sets light gray background */
}

/* Listing comments section heading styling */
.listing-comments-section h4 {
    margin-top: 0;
    /* Removes top margin */
    margin-bottom: 0.5rem;
    /* Sets bottom margin */
    font-size: 1rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
}

/* Listing comments list styling */
.listing-comments-section .comments-list {
    list-style: none;
    /* Removes bullet points */
    padding: 0;
    /* Removes padding */
    margin: 0 0 0.5rem 0;
    /* Sets margins */
    font-size: 0.9rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
}

/* Listing comments list item styling */
.listing-comments-section .comments-list li {
    margin-bottom: 0.3rem;
    /* Sets bottom margin */
    padding: 0.2rem 0;
    /* Sets vertical padding */
    border-bottom: 1px dotted #e0e0e0;
    /* Sets dotted bottom border */
}

/* Listing comments add comment form styling */
.listing-comments-section .add-comment-form {
    display: flex;
    /* Uses flexbox */
    gap: 0.5rem;
    /* Sets space between items */
    margin-bottom: 0.5rem;
    /* Sets bottom margin */
}

/* Listing comments input styling */
.listing-comments-section .comment-input {
    flex-grow: 1;
    /* Allows input to grow */
    padding: 0.4rem 0.6rem;
    /* Sets padding */
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    border: 1px solid var(--color-gray);
    /* Sets gray border */
    font-size: 0.9rem;
    /* Sets font size */
    font-family: inherit;
    /* Inherits font family */
}

/* Listing comments button styling */
.listing-comments-section .button {
    padding: 0.4rem 0.8rem;
    /* Sets padding */
    font-size: 0.9rem;
    /* Sets font size */
}

/* Listing comments close button styling */
.listing-comments-section .close-comments-button {
    width: 100%;
    /* Sets full width */
    margin-top: 0.5rem;
    /* Sets top margin */
}

/* Styling for isolated listing card (full screen view) */
.listing-card.isolated {
    position: fixed;
    /* Sets fixed position */
    top: 50%;
    /* Positions at 50% from the top */
    left: 50%;
    /* Positions at 50% from the left */
    transform: translate(-50%, -50%) scale(2);
    /* Centers and double size */
    width: 45%;
    /* Sets half of original 90% to make it double in size after scale(2) */
    max-width: 1200px;
    /* Sets double max-width */
    height: auto;
    /* Sets auto height */
    max-height: 180vh;
    /* Sets double max-height */
    z-index: 10000;
    /* Ensures it's above all other content */
    background-color: var(--color-white);
    /* Sets white background */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Sets shadow */
    overflow-y: auto;
    /* Enables vertical scroll for overflow */
    display: flex;
    /* Uses flexbox */
    flex-direction: column;
    /* Stacks items vertically */
    transition: transform 0.3s ease-in-out;
    /* Sets smooth transition for scaling */
}

/* Isolated listing card image styling */
.listing-card.isolated img {
    height: auto;
    /* Allows image to scale */
    max-height: 300px;
    /* Sets max height for isolated image */
}

/* Overlay for isolated view */
.overlay {
    position: fixed;
    /* Sets fixed position */
    top: 0;
    /* Positions at the top */
    left: 0;
    /* Positions at the left */
    width: 100%;
    /* Sets full width */
    height: 100%;
    /* Sets full height */
    background-color: rgba(0, 0, 0, 0.7);
    /* Sets semi-transparent black background */
    z-index: 9999;
    /* Ensures it's above most content */
    display: none;
    /* Hidden by default */
}

/* Portfolio carousel styling */
/* ... existing portfolio carousel styles ... */

/* Admin Dashboard Styles */
.admin-tabs,
.listing-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.tab-button,
.listing-tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    /* For notification badge */
}

.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-color: #ff4d4d;
    border-radius: 50%;
    border: 2px solid white;
    display: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.tab-button:hover,
.listing-tab-btn:hover {
    color: var(--color-blue);
}

.tab-button.active,
.listing-tab-btn.active {
    color: var(--color-blue);
    border-bottom-color: var(--color-blue);
    font-weight: 700;
}

/* Settings Page Accordion */
.settings-sections {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.set-item {
    border-bottom: 1px solid #e0e0e0;
}

.set-item:last-child {
    border-bottom: none;
}

.set-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.set-header:hover {
    background-color: #f5f5f5;
}

.set-header::after {
    content: '\25BC';
    /* Down arrow */
    font-size: 0.8rem;
    color: #999;
    transition: transform 0.3s ease;
}

.set-item.active .set-header::after {
    transform: rotate(180deg);
}

.set-content {
    display: none;
    background-color: #fff;
    /* Border top omitted to keep clean look */
}

.set-item.active .set-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

.user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-info strong {
    display: block;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 4px;
}

.user-info span {
    font-size: 0.9rem;
    color: #777;
    display: block;
}

.user-actions {
    display: flex;
    gap: 10px;
}

.button.small {
    padding: 6px 14px;
    font-size: 0.85rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-carousel {
    margin-top: 2rem;
    /* Sets top margin */
}

/* Slick slide styling within portfolio carousel */
.portfolio-carousel .slick-slide {
    display: block !important;
    /* Forces display as block */
    padding: 0 !important;
    /* Removes padding */
    margin: 0 !important;
    /* Removes margin */
}

/* Slick list styling within portfolio carousel */
.portfolio-carousel .slick-list {
    overflow: hidden !important;
    /* Hides overflowing content */
}

/* Listings slide styling */
.listings-slide {
    width: 100%;
    /* Sets full width */
    overflow: hidden;
    /* Hides overflowing content */
}

/* Listings content styling */
.listings-content {
    display: flex;
    /* Uses flexbox */
    gap: 1.5rem;
    /* Sets space between items */
    width: 100%;
    /* Sets full width */
    padding: 1rem 0;
    /* Sets vertical padding */
    overflow: hidden;
    /* Hides overflowing content */
}

/* Mobile Responsiveness for Settings Header */
@media (max-width: 768px) {
    .settings-container .section-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start !important;
    }

    .settings-container .section-header>div:last-child {
        width: 100%;
        align-items: flex-start !important;
    }

    .settings-container .section-header button {
        width: 100%;
        /* Full width buttons on mobile */
    }

    .settings-container .section-header>div:last-child>div:first-child {
        width: 100%;
        gap: 0.5rem;
    }
}

/* Listings text styling */
.listings-text {
    flex: 0 0 30%;
    /* Sets fixed width of 30% */
    display: flex;
    /* Uses flexbox */
    flex-direction: column;
    /* Stacks items vertically */
    justify-content: center;
    /* Centers vertically */
}

/* Listings text heading styling */
.listings-text h3 {
    margin: 0 0 0.5rem;
    /* Sets margins */
    color: var(--color-green);
    /* Sets green text color */
}

/* Listings text paragraph styling */
.listings-text p {
    margin: 0;
    /* Removes default margin */
    color: var(--color-green);
    /* Sets green text color */
}

/* Listings image styling */
.listings-image {
    flex: 0 0 70%;
    /* Sets fixed width of 70% */
}

/* Listings image styling */
.listings-image img {
    width: 100%;
    /* Sets full width */
    height: 100%;
    /* Sets full height */
    display: block;
    /* Displays as block */
    border-radius: 0.75rem;
    /* Sets rounded corners */
    object-fit: cover;
    /* Covers the area */
}

/* Inspiration section styling */
#inspiration {
    text-align: center;
    /* Centers align text */
}

/* Community layout styling */
.community-layout {
    display: flex;
    /* Uses flexbox */
    flex-direction: column;
    /* Stacks items vertically */
    align-items: center;
    /* Centers items horizontally */
    gap: 1rem;
    /* Sets space between items */
}

/* Load quotes button styling */
#load-quotes-btn {
    margin: 0 auto;
    /* Centers horizontally */
}

/* Quote navigation styling */
.quote-nav {
    display: flex;
    /* Uses flexbox */
    gap: 0.75rem;
    /* Sets space between items */
    justify-content: center;
    /* Centers horizontally */
    display: none;
    /* Hidden by default */
}

/* Quote track wrapper styling */
.quote-track-wrapper {
    width: 100%;
    /* Sets full width */
    overflow: hidden;
    /* Hides overflowing content */
}

/* Community thread styling */
.community-thread {
    margin-top: 0.5rem;
    /* Sets top margin */
    display: flex;
    /* Uses flexbox */
    flex-wrap: nowrap;
    /* Prevents wrapping */
    gap: 1rem;
    /* Sets space between items */
    overflow-x: auto;
    /* Enables horizontal scroll for overflow */
    scroll-behavior: smooth;
    /* Sets smooth scroll behavior */
    padding-bottom: 0.5rem;
    /* Sets bottom padding */
}

/* Quote card styling */
.quote-card {
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    padding: 1rem 1.1rem;
    /* Sets padding */
    background-color: var(--color-white) !important;
    /* Sets white background */
    border: 1px solid var(--color-blue);
    /* Sets blue border */
    color: var(--color-gray);
    /* Sets text color */
    flex: 0 0 calc(50% - 0.75rem);
    /* Sets fixed width of 50% minus gap */
    box-sizing: border-box;
    /* Includes padding and border in the element's total width and height */
}

/* Quote card paragraph styling */
.quote-card p {
    margin: 0 0 0.6rem;
    /* Sets margins */
}

/* Quote source styling */
.quote-source {
    font-size: 0.9rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
}

/* Status message styling */
.status-message {
    margin: 0;
    /* Removes default margin */
}

/* Error status message styling */
.status-message.error {
    color: #b00001;
    /* Sets red text color */
}

/* Quote conversation styling */
.quote-conversation {
    margin-top: 1rem;
    /* Sets top margin */
    padding-top: 0.75rem;
    /* Sets top padding */
    border-top: 1px solid var(--color-gray);
    /* Sets top border */
}

/* Quote conversation heading styling */
.quote-conversation h4 {
    margin: 0 0 0.5rem;
    /* Sets margins */
    font-size: 0.95rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
}

/* Conversation list styling */
.conversation-list {
    list-style: none;
    /* Removes bullet points */
    padding-left: 0;
    /* Removes left padding */
    margin: 0 0 0.75rem;
    /* Sets margins */
    font-size: 0.9rem;
    /* Sets font size */
}

/* Conversation list item styling */
.conversation-list li {
    margin-bottom: 0.35rem;
    /* Sets bottom margin */
}

/* Conversation input row styling */
.conversation-input-row {
    display: flex;
    /* Uses flexbox */
    gap: 0.5rem;
    /* Sets space between items */
    align-items: center;
    /* Vertically aligns items */
}

/* Conversation input styling */
.conversation-input {
    flex: 1;
    /* Allows input to grow */
    padding: 0.4rem 0.6rem;
    /* Sets padding */
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    border: 1px solid var(--color-gray);
    /* Sets gray border */
    font-size: 0.9rem;
    /* Sets font size */
    font-family: inherit;
    /* Inherits font family */
}

/* Conversation submit button styling */
.conversation-submit {
    white-space: nowrap;
    /* Prevents text wrapping */
    font-size: 0.9rem;
    /* Sets font size */
}

/* Quote card styling (duplicate, will be consolidated) */
.quote-card {
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    padding: 1rem 1.1rem;
    /* Sets padding */
    background-color: var(--color-blue);
    /* Sets blue background */
    border: 1px solid var(--color-green);
    /* Sets green border */
}

/* Quote card paragraph styling (duplicate, will be consolidated) */
.quote-card p {
    margin: 0 0 0.6rem;
    /* Sets margins */
}

/* Quote source styling (duplicate, will be consolidated) */
.quote-source {
    font-size: 0.9rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
}

/* Status message styling (duplicate, will be consolidated) */
.status-message {
    margin: 0;
    /* Removes default margin */
}

/* Error status message styling (duplicate, will be consolidated) */
.status-message.error {
    color: #b00001;
    /* Sets red text color */
}

/* Submit layout styling */
.submit-layout {
    display: grid;
    /* Uses grid layout */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    /* Sets two columns with flexible widths */
    gap: 1.75rem;
    /* Sets space between grid items */
    margin-top: 1.5rem;
    /* Sets top margin */
}

/* Form field styling */
.form-field {
    margin-bottom: 1rem;
    /* Sets bottom margin */
}

/* Label styling */
label {
    display: block;
    /* Displays as block */
    font-weight: 600;
    /* Sets bold font weight */
    margin-bottom: 0.35rem;
    /* Sets bottom margin */
    color: var(--color-gray);
    /* Sets text color */
}

/* Input and select element styling */
input[type="text"],
/* Styles for text input */
input[type="search"],
/* Styles for search input */
select {
    /* Styles for select dropdown */
    width: 100%;
    /* Sets full width */
    padding: 0.5rem 0.6rem;
    /* Sets padding */
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    border: 1px solid var(--color-gray);
    /* Sets gray border */
    font-size: 0.95rem;
    /* Sets font size */
    font-family: inherit;
    /* Inherits font family */
}

/* Textarea styling */
textarea {
    width: 100%;
    /* Sets full width */
    max-width: 600px;
    /* Sets max width for textarea in general */
    height: 60px;
    /* Sets default height for textarea */
    min-height: 38px;
    /* Sets minimum height for one line */
    padding: 0.5rem 0.6rem;
    /* Sets padding */
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    border: 1px solid var(--color-gray);
    /* Sets gray border */
    font-size: 0.95rem;
    /* Sets font size */
    font-family: inherit;
    /* Inherits font family */
    resize: vertical;
    /* Allows vertical resize */
    overflow-y: auto;
    /* Enables scroll for overflow */
    line-height: 1.5;
    /* Adjusts line height for 2 lines */
    box-sizing: border-box;
    /* Includes padding and border in the element's total width and height */
}

/* Fixed header hero search textarea styling */
.site-header.fixed .hero-search textarea {
    max-height: 60px;
    min-height: 60px;
    height: 60px;
    resize: none;
    overflow-y: auto;
}

/* The search wrapper is positioned imperatively (position:fixed + top/left/
   width) by initFixedHeader, interpolated continuously against scroll. No CSS
   transition on geometry — the scroll position IS the animation timeline. */
.search-chat-wrapper {
    will-change: top, left, width;
}

/* Empty placeholder in the hero that reserves the bar's resting slot. */
.search-anchor {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    pointer-events: none;
}

/* Full-width white surface that fades in behind the bar as it docks. */
.search-dock-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    background-color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid #e0e0e0;
    opacity: 0;
    z-index: 2900;
    pointer-events: none;
    transition: opacity 0.15s linear;
}

/* Search results dropdown inside the chat container */
.search-result-item {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-white);
    margin: 0.35rem 0;
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid #eee;
}
.search-result-item:hover {
    background: #f1f7ff;
}
.search-result-item img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.search-result-item .sr-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.search-result-item .sr-title {
    font-weight: 600;
    color: var(--color-blue);
    font-size: 0.92rem;
}
.search-result-item .sr-sub {
    font-size: 0.78rem;
    color: var(--color-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Submit summary styling */
.submit-summary {
    border-radius: var(--radius-sm);
    /* Sets rounded corners */
    background-color: var(--color-white);
    /* Sets white background */
    border: 1px solid var(--color-blue);
    /* Sets blue border */
    padding: 1rem 1.1rem;
    /* Sets padding */
}

/* Submit summary heading styling */
.submit-summary h3 {
    margin-top: 0;
    /* Removes top margin */
    color: var(--color-green);
    /* Sets green text color */
}

/* Submit list styling */
#submit-list {
    padding-left: 1.1rem;
    /* Sets left padding */
}

/* Contact section styling */
.contact {
    display: grid;
    /* Uses grid layout */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    /* Sets responsive columns */
    gap: 1.5rem;
    /* Sets space between grid items */
    margin-top: 1.5rem;
    /* Sets top margin */
}

/* Site footer styling */
.site-footer {
    padding: 1.75rem 0 0;
    /* Sets vertical padding */
    text-align: center;
    /* Centers align text */
    font-size: 0.9rem;
    /* Sets font size */
    color: var(--color-gray);
    /* Sets text color */
}

/* Footer navigation link styling */
.footer-nav a {
    color: var(--color-green);
    /* Sets green text color */
    text-decoration: none;
    /* Removes underline */
}

/* Footer navigation link hover and focus states */
.footer-nav a:hover,
/* Styles for hover state */
.footer-nav a:focus-visible {
    /* Styles for focus-visible state */
    text-decoration: underline;
    /* Underlines on hover/focus */
}

/* Legal / pricing footer row — quieter than the primary nav above it. */
.footer-legal {
    font-size: 0.82rem;
    margin: 0.4rem 0 0;
}
.footer-legal a {
    color: var(--color-gray);
    text-decoration: none;
    opacity: 0.85;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--color-blue);
    text-decoration: underline;
}

/* Media query for max-width: 900px */
@media (max-width: 900px) {
    .submit-layout {
        grid-template-columns: 1fr;
        /* Sets single column layout */
    }

    .community-layout {
        grid-template-columns: 1fr;
        /* Sets single column layout */
    }

    .listings-content {
        flex-direction: column;
        /* Stacks items vertically */
    }

    .listings-text,
    /* Styles for listings text */
    .listings-image {
        /* Styles for listings image */
        flex: 0 0 auto;
        /* Sets auto width */
    }

    .site-header .header-content-wrapper {
        flex-direction: row;
        /* Keeps brand and nav in a row */
        justify-content: space-between;
        /* Sets space between brand and nav */
        align-items: center;
        /* Vertically centers */
        gap: 1rem;
        /* Sets space between items */
    }



    .main-nav ul {
        justify-content: flex-start;
        /* Aligns items to the start */
    }

    .hero {
        padding-top: 2.5rem;
        /* Sets top padding */
    }

    .ui-tabs .ui-tabs-nav li {
        align-items: flex-start;
        /* Aligns items to the start */
    }
}

/* Add spacing to page-wrapper when header is fixed */
.page-wrapper.header-fixed-spacing {
    margin-top: 150px;
    /* Adjust this value to match the height of your fixed header */
}

/* Media query for max-width: 600px */
@media (max-width: 600px) {
    .quote-card {
        flex: 0 0 100%;
        /* Sets full width */
    }

    .ui-tabs .ui-tabs-nav li {
        align-items: flex-start;
        /* Aligns items to the start */
    }
}

/* Admin Modal Styling */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black with opacity */
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #333;
}

.modal-content .close {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    font-size: 2rem;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.modal-content .close:hover {
    color: #333;
}

.modal-content .form-field {
    margin-bottom: 1rem;
}

.modal-content .form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}

.modal-content .form-field input[type="text"],
.modal-content .form-field input[type="tel"],
.modal-content .form-field input[type="email"],
.modal-content .form-field select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
}

.modal-content .form-field small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #666;
}

.modal-content .form-field input[type="checkbox"] {
    margin-right: 0.5rem;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

/* Master Nav Styling */

#master-nav {
    position: fixed;
    /* Floated to the bottom-center of the viewport (was top-left). */
    top: auto;
    bottom: 24px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    pointer-events: none;
    /* Let clicks pass through empty areas */
}

/* Ensure content inside master nav catches clicks */
.master-nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: auto;
    /* Transparent wrapper so each control floats as its own pill. */
    background: transparent;
    padding: 0;
    transition: all 0.3s ease;
    width: auto;
    max-width: 90%;
}

/* Stack the private toggle ABOVE the Edit Mode button, centered. */
#profile-mode-toggle-container {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* "Profile Private" on/off switch (edit mode only). */
.profile-private-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.95rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    font-size: 0.92rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    user-select: none;
}
.profile-private-toggle[hidden] { display: none; }
.profile-private-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.profile-private-toggle .pp-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    background: #ccc;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}
.profile-private-toggle .pp-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.profile-private-toggle input:checked + .pp-switch { background: var(--color-gold); }
.profile-private-toggle input:checked + .pp-switch::after { transform: translateX(18px); }

/* ===== Profile edit-mode listing management ===== */
/* "Add Listings Item" bar above the masonry. */
.profile-add-listings-bar {
    display: none;
    justify-content: center;
    margin: 0 0 1rem;
}
.profile-add-listings-bar .button { font-weight: 700; }

/* Per-card Edit / Hide / Remove actions (edit mode). */
.lc-owner-actions {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.lc-owner-actions .plc-act {
    flex: 1 1 auto;
    padding: 6px 4px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: var(--color-blue);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.lc-owner-actions .plc-act:hover { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }
.lc-owner-actions .plc-remove { color: #d9534f; border-color: #e3b6b6; }
.lc-owner-actions .plc-remove:hover { background: #d9534f; color: #fff; border-color: #d9534f; }

/* ===== In-page Add / Edit Listing modal (mirrors account page) ===== */
.pl-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 6000;
    align-items: center;
    justify-content: center;
}
.pl-modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
}
.pl-modal-content h3 { margin-top: 0; margin-bottom: 1.5rem; }
.pl-fg { margin-bottom: 1rem; }
.pl-fg > label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.85rem;
}
.pl-fg input[type="text"],
.pl-fg textarea,
.pl-fg select,
.pl-fg input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    box-sizing: border-box;
}
.pl-fg textarea { resize: vertical; }
.pl-fg small { color: #aaa; font-size: 0.8rem; }
.pl-skill-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 6500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pl-skill-item { padding: 8px 12px; cursor: pointer; font-size: 0.875rem; }
.pl-skill-item:hover { background: #e8f0ff; }
.pl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px;
    margin-top: 5px;
    border: 1px solid #eee;
    border-radius: 6px;
    min-height: 38px;
}
.pl-tags-ph { color: #ccc; font-size: 0.85rem; align-self: center; }
.pl-tag {
    background: #e0f0ff;
    color: #0066cc;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pl-tag-x { cursor: pointer; font-weight: bold; color: #004499; }
.pl-existing-media-box {
    width: 160px;
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}
.pl-media-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-blue);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#pl-upload-preview { margin-bottom: 1rem; }
#pl-upload-preview img { max-width: 100%; max-height: 200px; border-radius: 6px; }
.pl-aspect-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pl-aspect-btn {
    padding: 5px 11px;
    border: 1.5px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.pl-aspect-btn.on { border-color: var(--color-blue); background: var(--color-blue); color: #fff; }
.pl-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

#save-profile-btn {
    order: 2;
}

#discard-profile-btn {
    order: 3;
}

/* Removed body.has-master-nav and .site-header displacement rules */




/* Elements inside Master Nav */
#profile-mode-toggle-container,
#profile-edit-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Bio Title Styling */
#profile-bio-title {
    font-weight: 400;
    /* Normal weight */
    font-size: 1.2rem;
    color: #333;
    /* Dark Grey */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Highlights & Credentials Styling */
.profile-list-section h3 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--color-green);
    border-bottom: 1px solid #eee;
    padding-bottom: 0.25rem;
}

#profile-highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Flex layout */
    flex-wrap: wrap;
    /* Wrap to next line */
    gap: 0.5rem;
    /* Space between items */
}

.profile-list-item {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    /* Center vertically */
    gap: 0.5rem;
    /* Default behavior: size to content, wrap if long text? 
       User said: "make profile-highlights-list items one row, unless item is long then wrap in box"
       This likely means display inline-block or flex-item behavior where it takes natural width. 
    */
    max-width: 100%;
    /* Prevent exceeding container */
}

/* If item text is long, the flex item will grow.
   If really long, we might want it to wrap internal text? Yes, default.
*/

.profile-list-item .item-type-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    background: transparent;
    padding: 0;
    border-radius: 4px;
    color: #555;
    font-weight: bold;
    white-space: nowrap;
    margin-right: 0.2rem;
    flex-shrink: 0;
    /* Tag shouldn't shrink */
}

.profile-list-item .item-text {
    /* Allow editing */
    min-width: 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent backdrop */
    z-index: 9999;
    /* High z-index to sit above page content */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

/* Close 'X' Button */
.close-modal-x {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2rem;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
    z-index: 10001;
    transition: color 0.2s;
}

.close-modal-x:hover {
    color: #333;
}

/* Compact Admin List Styles */
ul.user-list {
    list-style: none;
    /* Remove dots */
    padding: 0;
    margin: 0;
}

.user-card-wrapper {
    margin-bottom: 5px;
    /* Reduced gap between cards */
}

.user-card {
    height: 40px;
    /* Fixed height */
    padding: 5px 10px;
    /* Reduced padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.user-card:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-actions {
    display: flex;
    gap: 0.5rem;
}

/* --- Admin Page Restructuring --- */

/* Main UI Tabs */
.main-admin-tabs {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0;
    /* No gap to the controls/header row directly below */
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 55px;
    /* 5px under the 50px admin header (no hero search bar, so it never grows) */
    background-color: var(--color-white);
    z-index: 999;
}

.main-tab {
    background: none;
    border: none;
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-bottom 0.2s;
    position: relative;
    /* For notification badge */
}

.main-tab:hover {
    color: #333;
}

.main-tab.active {
    color: #333;
    border-bottom-color: #333;
}

.main-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.main-tab-content.active {
    display: block;
}

#admin-skills-list {
    padding: 0;
    list-style: none;
    margin: 0;
}


/* --- Admin Skills Management Styling --- */

.skill-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Admin Category 3-Column Grid */
.admin-category-grid {
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    gap: 20px;
    margin-top: 10px;
    align-items: stretch;
}

.category-column {
    min-height: 400px;
    padding: 10px;
    background: #fdfdfd;
    border: 2px dashed #eee;
    border-radius: 8px;
    transition: background 0.3s, border-color 0.3s;
}

.category-column.drag-over {
    background: #f0f7ff;
    border-color: var(--color-blue);
}

.category-column h4 {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Expansion Column Specifics */
.expansion-column {
    background: #fafafa;
}

.expansion-column .category-set-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* More prominence for expanded items */
}

@media (max-width: 1024px) {
    .admin-category-grid {
        grid-template-columns: 1fr;
    }

    .category-column {
        min-height: auto;
    }
}

#new-item-input {
    flex: 1;
    max-width: 300px;
    padding: 8px;
    font-size: 1rem;
}

.category-set-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.category-set-item.dragging {
    opacity: 0.5;
    background: #f0f0f0;
}

.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: 600;
}

.cat-header:hover {
    background: #f0f0f0;
}

.cat-header .handle {
    cursor: grab;
    margin-right: 12px;
    color: #999;
}

.cat-content {
    display: none;
    padding: 10px;
}

.category-set-item.active .cat-content {
    display: block;
}

.skill-list {
    min-height: 50px;
    /* Drop target */
}

/* Skill Item Styling */
.skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 6px;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.skill-item:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: #fcfcfc;
}

.skill-item.dragging-svc {
    opacity: 0.5;
}

.skill-drop-zone.drag-over-zone {
    background-color: #e6f7ff;
    border: 2px dashed #1890ff;
    border-radius: 4px;
}

.svc-actions {
    display: flex;
    gap: 8px;
    opacity: 1;
    /* Always visible for admin convenience */
}

.icon-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #666;
    padding: 2px;
}

.icon-btn:hover {
    color: #333;
}

.del-btn:hover {
    color: #d32f2f;
}

.linked-clone {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

/* Uncategorized Area */
#uncategorized-area {
    background: #fff3e0;
    border: 1px dashed #ffa726;
    padding: 0.5rem;
    margin-bottom: 0;
    border-radius: 6px;
}


/* User Card Grid Layout */
.user-info {
    /* Grid Layout for Even Distribution */
    display: grid !important;
    /* Override flex */
    grid-template-columns: 1.5fr 1.2fr 2fr 0.8fr;
    /* Name | Phone | Email | Type */
    gap: 1rem;
    width: 100%;
    align-items: center;
}

/* Member-row Type column is widened to host the inline GodMode grant/revoke
   button (right of the Expert/Admin label). Scoped to .user-card so the shared
   .user-info on admin LISTING cards keeps its own layout. Must stay in sync with
   .user-list-header below so the column under "Type" lines up. */
.user-card .user-info {
    grid-template-columns: 1.5fr 1.2fr 1.8fr 1.5fr;
    /* Name | Phone | Email | Type+GodMode */
}

.user-info strong,
.user-info span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    /* Ensure grid item behavior */
}

/* Compact User Details */
.user-details .details-section {
    margin: 0 30px;
    /* Requested 30px indent */
    padding: 0.5rem 0;
}

.user-details h4 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
}

.user-details p {
    font-size: 0.9rem;
    /* Smaller text */
    line-height: 1.3;
    /* Closer together */
    margin-bottom: 0.25rem;
    color: #555;
    margin-top: 0;
}

/* Utility */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Admin Refinement Phase 2 --- */

/* Arrow Button */
.arrow-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
    padding: 0 0.5rem;
    transition: transform 0.2s;
    line-height: 1;
}

.arrow-btn:hover {
    color: #333;
    transform: scale(1.1);
}

/* Split Details Layout */
.details-split-container {
    display: flex;
    gap: 1.5rem;
    margin: 0 30px;
    /* Indent */
    padding: 1rem 0;
}

.details-left {
    flex: 0 0 80%;
    /* 80% width */
}

.details-right {
    flex: 0 0 20%;
    /* 20% width */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-start;
    padding-top: 0.5rem;
    /* Align with text */
}

/* Ensure buttons in stack are full width or consistent */
.details-right .button {
    width: 100%;
    text-align: center;
}

/* Remove old details padding override if needed */
.user-details .details-section {
    margin: 0;
    /* Reset since container has margin */
    padding: 0;
}

/* --- Admin Refinement Phase 4 --- */

/* Boxed Active Main Tabs */
.main-tab.active {
    color: #333;
    border: 1px solid #777;
    /* Darker border for visibility */
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* Responsive Admin Controls */
@media (max-width: 768px) {
    .admin-controls-wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .admin-filters {
        width: 100%;
        justify-content: space-between;
    }

    .search-control input {
        width: 100% !important;
        /* Full width search on mobile */
    }
}

/* User List Header */
.user-list-header {
    display: grid !important;
    /* Must match the .user-card .user-info grid exactly so columns line up */
    grid-template-columns: 1.5fr 1.2fr 1.8fr 1.5fr;
    gap: 1rem;
    /* 10px matches .user-card padding; +1px accounts for the card's 1px border
       so each header column sits directly above its data column */
    padding: 0.5rem 11px;
    background-color: #f9f9f9;
    border-bottom: 2px solid #ddd;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-radius: 4px;
    /* Left-aligned to match the left-aligned data cells in each card */
    text-align: left;
    /* Dock the header under the sticky tabs/controls when scrolling the list:
       header 50 + 5px gap + tabs ~49 + controls ~63 */
    position: sticky;
    top: 167px;
    z-index: 997;
}

/* Adjust User Card to align with Header */
/* The User Card has click area. 
   Inside user-card is .user-info (grid) and .user-actions (right aligned, but now empty/removed). 
   The .user-info grid width is 100%. 
   So header grid should match .user-info grid. 
   AND padding should match.
*/

/* --- Profile Page Overhaul --- */

/* Profile Page Styles */
/* Profile Page Overhaul */
.profile-hero {
    background: #fff;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.profile-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    /* Ensured columns are same height */
    padding: 2rem 1.5rem;
    /* Standard top padding */
    transition: all 0.3s ease;
}

/* Base style for single column padding consistency */
.profile-hero-container>div:first-child {
    padding-top: 0;
    /* Already handled by container padding */
}

/* Constraint for all hero columns */
.profile-hero-container>div {
    min-width: 250px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    /* Center if it hits max-width */
}

/* Location styles moved to main-nav section */

@media (max-width: 1100px) {
    .profile-hero-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Specific request for 1024px consistency */
@media (max-width: 1024px) {
    .profile-hero-container {
        padding-top: 2rem;
        /* Keep same top padding */
    }
}

/* Specific request for 1281px consistency */
@media (min-width: 1281px) {
    .profile-hero-container {
        grid-template-columns: repeat(4, 1fr);
        /* Ensure 4 consistent widths */
        padding-top: 2rem;
    }
}

/* Responsive adjustments for 900px and below */
@media (max-width: 900px) {
    .profile-hero-container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column stack */
        padding: 2rem 1.5rem;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Reset child elements */
    .profile-hero-container>div {
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
        /* Enforce global max constraint even on mobile */
        min-width: 250px;
        /* Enforce global min constraint */
    }

    .profile-hero-container .hero-header {
        justify-content: flex-start;
        /* Reset justify content */
    }

    /* Hide slick arrows if any remain */
    .slick-prev,
    .slick-next {
        display: none !important;
    }
}



/* Header Integration */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.profile-header-col {
    display: flex;
    align-items: center;
}

.profile-header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transform: translateY(-15px); /* nudge the name/actions block up on desktop */
    flex: 1;
    position: relative;
    /* Anchor for centered dropdowns */
}

.header-back-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.header-back-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.triangle-left {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #666;
    margin-right: 2px;
}

.profile-avatar-header {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 1rem;
    z-index: 4000;
    transition: all 0.2s;
}

.col-photo {
    width: 150px;
    height: 100px;
    position: relative;
}

/* Profile Header Rows */
.profile-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.profile-name-row h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    /* No bold */
    color: #333;
    white-space: nowrap;
    max-width: 40ch;
}

#profile-name {
    transition: font-size 0.2s;
}

@media (max-width: 768px) {
    #profile-name {
        font-size: clamp(1rem, 4vw, 1.5rem);
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #profile-name.wide-name {
        font-size: 0.95rem;
    }
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: #666;
}

.profile-meta span {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Share + Message icons — grouped, plain (no circle), pinned to the RIGHT of the
   hero tabs in the actions row. */
.profile-action-buttons {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;   /* sit at the far right of the tabs row */
}


/* Hero Tabs & Content Dropdowns — the Bio/Creds/Links/Details items are CENTERED
   in the space they share with the action buttons (which sit to their right). */
.hero-tabs {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 1.2rem;
    z-index: 2000;
}

.hero-tab-btn {
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
    position: static;
    /* Let dropdown position relative to profile-header-info */
    font-weight: 400;
}

.hero-tab-btn:hover,
.hero-tab-btn.locked {
    color: #428fd3;
}

.hero-tab-btn .hero-content {
    display: none;
    position: absolute;
    top: 86%;
    /* Below header info — CENTERED in the anchor wrapper so the popup never
       falls off the page edge. */
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    max-width: min(92vw, 380px);
    max-height: 60vh;
    overflow-y: auto;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    z-index: 3000;
    text-align: left;
    margin-top: 10px;
}

.hero-tab-btn:hover .hero-content,
.hero-tab-btn.locked .hero-content {
    display: block;
}

/* Desktop only (mobile keeps the centered docked layout in mobile.css):
   left-align the hero tabs, and anchor each tab's dropdown directly beneath
   its own tab rather than centered under the whole header. */
@media (min-width: 769px) {
    .hero-tabs {
        justify-content: flex-start;
    }
    .hero-tab-btn {
        position: relative;
    }
    .hero-tab-btn .hero-content {
        left: 0;
        top: 100%;
        transform: none;
    }
}

/* Edit Mode Layout vs Public Mode Layout */
#profile-container.edit-mode .hero-content {
    display: block !important;
    position: static;
    width: auto;
    box-shadow: none;
    border: none;
    padding: 0;
}

#profile-container:not(.edit-mode) .view-more-container-btn,
#profile-container:not(.edit-mode) .view-more-btn {
    display: none !important;
}

#profile-container:not(.edit-mode) .hero-header {
    display: none !important;
}

/* Hero Columns */
.hero-cred {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-list-section h3 {
    font-size: 1.1rem;
    font-weight: 400;
    /* Normal weight */
    margin-bottom: 0.4rem;
    color: #333;
    /* Dark Grey */
}

.profile-list-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-list-section li,
.profile-social-credentials li {
    font-size: 0.95rem;
    color: #333;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.hero-social {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-social h3 {
    font-size: 1.1rem;
    font-weight: 400;
    color: #333;
    margin-top: 0;
    margin-bottom: 0.4rem;
}

/* Drag Handle Styles */
.hero-drag-handle {
    display: none;
    margin-right: 8px;
    cursor: grab;
    color: #999;
}

#profile-container.edit-mode .hero-drag-handle {
    display: inline-block;
}

.profile-social-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.social-tag {
    font-size: 0.85rem;
    background: #f0f0f0;
    color: #555;
    padding: 0.3rem 0.7rem;
    border-radius: 15px;
    border: 1px solid #ddd;
}

/* Social Credentials List */
.social-credentials-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
    padding: 0;
    list-style: none;
    /* Ensure no bullets */
}

.social-cred-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-cred-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.social-cred-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.social-cred-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    line-height: 1.2;
}

.social-cred-value {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.social-cred-label {
    font-size: 0.8rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Edit Mode Controls for Social List */
.social-cred-actions {
    display: none;
    gap: 0.3rem;
}

#profile-container.edit-mode .social-cred-actions {
    display: flex;
}

.add-social-cred-btn {
    display: none;
    width: 100%;
    padding: 0.5rem;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.add-social-cred-btn:hover {
    background: #eee;
    color: #333;
    border-color: #999;
}

#profile-container.edit-mode .add-social-cred-btn {
    display: block;
}

.hero-bio p {
    color: #444;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.button-link {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    text-decoration: underline;
}

.profile-listings {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}




/* Combined Profile Tabs */
.combined-profile-tabs {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding: 0.5rem;
    /* Dock just under the sticky 80px site-header on scroll. (Previously top:1rem
       tucked it INTO the header zone, where the higher-z-index header hid it.) */
    position: sticky;
    top: 80px;
    background: white;
    /* Ensure content doesn't show through */
    z-index: 1500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    border-radius: 14px;
}

@media (min-width: 900px) {
    .combined-profile-tabs {
        margin-left: 200px;
    }
    /* Align the reviews / Request-a-Quote row past the larger desktop profile
       photo. The 14rem left padding clears the avatar; the row itself is a
       2-column (reviews ↔ buttons) layout. */
    .profile-rq {
        padding: .5rem 1.5rem .5rem 14rem;
    }
    .profile-rq .prq-row {
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .profile-rq .prq-actions {
        margin-left: auto;
        justify-content: flex-end;
    }
}

.listing-type-tab {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    border-radius: 20px;
}

.listing-type-tab:hover {
    color: var(--color-dark);
    background: #f5f5f5;
}

.listing-type-tab.active {
    color: var(--color-green);
    background: rgba(39, 174, 96, 0.1);
    font-weight: 600;
}

/* Edit Mode Drag Styles */
.sortable-tabs .listing-type-tab {
    cursor: grab;
}

.sortable-tabs .listing-type-tab:active {
    cursor: grabbing;
}

/* Display Controls */
.display-option-btn {
    border: 1px solid #ddd;
    background: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #666;
}

.display-option-btn.active {
    background: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
}

/* Listing Grid Modes */
.listing-grid {
    display: block;
    /* Default for slick */
}

.listing-grid.mode-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.listing-grid.mode-full {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.mode-grid-3 .listing-card,
.mode-full .listing-card {
    margin: 0;
    /* Override slick margins */
}

/* Hidden Tab Style */
#profile-container:not(.edit-mode) .listing-type-tab[data-hidden="true"] {
    display: none !important;
}

.listing-type-tab[data-hidden="true"] .tab-label {
    /* text-decoration: line-through; -> User wants simple (-) icon, maybe no strikethrough needed? 
       I'll keep strikethrough for edit mode clarity or remove it if user didn't ask. 
       User said "invisible with a (-)". didn't say strikethrough. I'll remove it to be clean. */
    text-decoration: none;
    opacity: 1;
}

/* Edit Mode Opacity handled inline or class */
.edit-mode .listing-type-tab[data-hidden="true"] {
    opacity: 0.6;
}

@media (max-width: 900px) {
    .listing-grid.mode-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .listing-grid.mode-grid-3 {
        grid-template-columns: 1fr;
    }
}


/* Listing Cards */
.listing-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 0 10px;
    transition: transform 0.2s;
}

.listing-card:hover {
    transform: translateY(-5px);
}

.listing-image-container {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* Video listings on the profile page: the frame shape follows the video type
   (the iframe's top-70px clip, applied to vertical only, comes from the shared
   .lc-embed-vertical rule). */
.listing-image-container.has-embed {
    height: auto;
    background: #000;
}
.listing-image-container.has-embed:has(.lc-embed-vertical) { aspect-ratio: 9 / 16; }
.listing-image-container.has-embed:has(.lc-embed-horizontal) { aspect-ratio: 16 / 9; }
.listing-image-container .lc-embed {
    width: 100%;
    height: 100%;
}

.listing-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: capitalize;
}

.listing-details {
    padding: 1rem;
}

.listing-details h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.listing-details p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.no-listings {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #888;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Social Media Tabs */
.social-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.social-tab {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.social-tab.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Responsive */

/* Desktop Specifics (1024px, 1281px, etc.) */
@media (min-width: 901px) {
    .profile-hero-container>div:first-child {
        padding-top: 50px;
    }

    .profile-avatar-header {
        top: 1px;
        /* Moved up 15px */
    }
}

@media (max-width: 900px) {
    .profile-hero-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1rem;
        padding-bottom: 1rem;
        /* Space for scrollbar */
        align-items: stretch;
        /* Hide scrollbar for standard feel, or keep it? user said accordion slider */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .hero-bio,
    .hero-cred,
    .hero-social,
    .hero-details {
        flex: 0 0 85%;
        /* Shows most of one, peek at next */
        min-width: 240px;
        max-width: 240px;
        scroll-snap-align: start;
        border: 1px solid #eee;
        /* Light border for card feel */
        border-radius: 8px;
        padding: 1rem;
    }

    .profile-rating {
        justify-content: flex-start;
    }

    .profile-social-tags {
        justify-content: flex-start;
    }

    .profile-lists-col {
        align-items: center;
    }

    .profile-avatar-header {
        width: 75px;
        height: 75px;
        top: 0.5rem;
    }

    .col-photo {
        width: 75px;
    }

    .col-name h1 {
        font-size: 1.3rem;
    }

    .col-meta .profile-meta {
        font-size: 0.8rem;
        gap: 0.4rem;
    }
}

@media (max-width: 600px) {
    .profile-header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Small mobile: the header info (name + verified/location "details") was
   overflowing off the page wrapper. Fix by (1) moving the Share/Message
   actions ABOVE the name, (2) scooting the photo + info left so the photo
   nearly touches the back button, and (3) letting the name + meta wrap
   instead of running off-screen. */
@media (max-width: 600px) {
    .profile-header {
        gap: 0.25rem;
        align-items: flex-start;
    }
    .col-back { flex: 0 0 auto; }

    /* Photo hugs the back button: smaller, pinned left, tighter reserved col. */
    .col-photo { width: 70px; }
    .profile-avatar-header {
        width: 70px;
        height: 70px;
        top: 0.25rem;
        left: 0;
    }

    /* min-width:0 lets this flex column actually shrink so its children wrap
       inside the wrapper instead of pushing the "details" off-screen. */
    .profile-header-info {
        flex: 1;
        min-width: 0;
    }

    /* Share/Message icons float to the TOP of the info column (above the name). */
    .profile-actions-row { order: -1; width: auto; margin-bottom: 2px; }
    .profile-name-row { order: 0; }

    /* Name + meta wrap onto the next line rather than running off-screen. */
    .profile-name-row {
        flex-wrap: wrap;
        gap: 0.1rem 0.4rem;
    }
    .profile-meta { flex-wrap: wrap; gap: 0.3rem; }
    .profile-name-row h1,
    #profile-name {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Profile Header */
.profile-edit-header {
    background: #f9f9f9;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2rem;
    display: none;
    /* Shown only for owner */
}

/* Person Section Grid */
.profile-person-section {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

/* Expert: 3 Columns (Face | Contact | Intro) */
.profile-person-expert {
    grid-template-columns: 200px 1fr 1.5fr;
}

/* Client: 2 Columns (Face | Contact) or Custom */
.profile-person-client {
    grid-template-columns: 200px 1fr;
}

/* Profile Image */
.profile-face-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.profile-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .profile-header-info {
        gap: 0.25rem;
    }

    .profile-avatar {
        width: 100px;
        /* Small screen 100px */
        height: 100px;
    }

    .profile-person-expert,
    .profile-person-client {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        text-align: center;
    }

    .profile-contact-col,
    .profile-intro-col {
        text-align: center;
        /* Center text on mobile */
    }
}

/* Contact Column */
.profile-contact-details p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.request-phone-btn {
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    color: #4a90e2;
    background: none;
    border: none;
    padding: 0;
}

/* Intro Column */
.profile-intro-text {
    line-height: 1.6;
    color: #333;
    position: relative;
    max-width: 600px;
    /* Limit line length */
}

/* Sections (Portfolio, Inspirations, Projects) */
.profile-section-full {
    width: 100%;
    margin-bottom: 3rem;
}

.profile-section-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Add Listing Card */
.add-listing-card {
    min-width: 250px;
    height: 300px;
    /* Match standard listing card height */
    border: 2px dashed #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    background: #f9f9f9;
    color: #888;
}

.add-listing-card:hover {
    border-color: #666;
    color: #333;
    background: #f0f0f0;
}

.add-listing-card .plus-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Edit Mode Styles */
.edit-mode .editable-field {
    border: 1px dashed #ccc;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 2px 5px;
    border-radius: 4px;
    cursor: text;
}

.edit-mode #profile-photo {
    cursor: pointer;
    transition: opacity 0.2s;
}

.edit-mode #profile-photo:hover {
    opacity: 0.8;
}


/* Edit Mode Indicators */
.editable:hover {
    background-color: rgba(255, 255, 0, 0.1);
    outline: 1px dashed #ccc;
    cursor: text;
}

.edit-icon {
    display: inline-block;
    margin-left: 5px;
    font-size: 0.8rem;
    color: #999;
    cursor: pointer;
}

.field-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    /* Desktop: bottom-RIGHT corner (mobile.css moves it to the left, beside the
       chat FAB). */
    bottom: 26px;
    right: 26px;
    left: auto;
    width: 45px;
    height: 45px;
    background-color: var(--color-blue);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--color-green);
    transform: translateY(-5px);
    color: var(--color-white);
}

/* ===== Floating Map View / Masonry View toggle =====
   Larger pill fixed to the bottom-center, floating above the masonry. Toggles
   the feed between the card grid and a map of the same members (see JS). */
.view-toggle {
    position: fixed;
    bottom: 26px;   /* desktop stays low; only mobile is raised 55px (mobile.css) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3300;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.4rem;
    background-color: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.view-toggle:hover {
    background-color: #2f73b8;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
}
.view-toggle:active { transform: translateX(-50%) scale(0.97); }
.view-toggle .view-toggle-ic { display: inline-flex; }
.view-toggle .view-toggle-ic svg { display: block; }

/* Map view container that replaces the masonry. Flex: map + right sidebar. */
.main-map-wrap {
    margin: 0.5rem 0 2rem;
    display: flex;
    gap: 12px;
    height: 70vh;
    min-height: 420px;
}
.main-map-wrap[hidden] { display: none; }
.mv-map-col { position: relative; flex: 1 1 auto; min-width: 0; }
#main-map {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    z-index: 1;
}

/* Right sidebar: header, controls (My Location + radius), member list. */
.mv-sidebar {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
}
.main-map-wrap.mv-collapsed .mv-sidebar { display: none; }
.mv-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
}
.mv-title { font-weight: 700; font-size: 15px; }
.mv-head-actions { display: flex; align-items: center; gap: 6px; }
.mv-saved-toggle {
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.mv-saved-toggle.on {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}
.mv-collapse, .mv-show-list, .mv-gear {
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Controls wrapper is a passthrough — the settings panel carries its own
   padding/border, so when the gear is closed there's no empty bar. */
.mv-controls { display: flex; flex-direction: column; }
.mv-locate {
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.mv-locate:hover { background: #f7f9fc; border-color: #bbb; }
.mv-radius { display: flex; align-items: center; gap: 8px; }
.mv-radius input[type="range"] { flex: 1 1 auto; min-width: 0; }
.mv-radius-display {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-blue);
    white-space: nowrap;
}
.mv-list { flex: 1 1 auto; overflow-y: auto; }
.mv-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.mv-row:hover { background: #f7f9fc; }
.mv-row-main { min-width: 0; }
.mv-row-name { font-weight: 600; font-size: 14px; color: #222; }
.mv-row-loc { font-size: 12px; color: #667; margin-top: 2px; }
.mv-row-skills {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.mv-save-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #c9c9c9;
    padding: 0;
    flex: 0 0 auto;
}
.mv-save-btn.saved { color: #f5b301; }
.mv-empty { padding: 22px 16px; text-align: center; color: #999; font-size: 13px; }

/* "Show list" button appears over the map only when the sidebar is collapsed. */
.mv-show-list {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 600;
    width: auto;
    padding: 0 10px;
    height: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: none;
}
.main-map-wrap.mv-collapsed .mv-show-list { display: inline-flex; }

/* Controls docked over the map bottom (ALL screen sizes): radius + My Location. */
.mv-dock {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    padding: 8px 10px;
}
.mv-dock .mv-radius { flex: 1 1 auto; min-width: 0; }
.mv-dock .mv-locate {
    flex: 0 0 auto;
    width: 38px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* The two docked location buttons (pin = saved location, crosshair = current). */
.mv-locate-icon { color: #333; }
.mv-locate-icon svg { display: block; }
.mv-locate-icon:hover { color: #0066ff; }
.mv-locate.mv-locate-busy { opacity: 0.55; cursor: progress; }

/* Gear (settings) button + the settings panel inside the sidebar controls. */
.mv-gear.on {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}
/* Saved + Sort share the first row of the settings panel. */
.mv-filters-row .mv-saved-toggle { flex: 0 0 auto; }
.mv-filters-row #mv-sort { flex: 1 1 auto; min-width: 0; max-width: 60%; }
.mv-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
}
.mv-settings[hidden] { display: none; }
.mv-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mv-setting-row > label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}
.mv-seg {
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.mv-seg button {
    border: none;
    background: #fff;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
}
.mv-seg button + button { border-left: 1px solid #ddd; }
.mv-seg button.on { background: var(--color-blue); color: #fff; }
.mv-maxdist {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
}

/* Hide the card filters rail entirely while map view is active. */
body.mv-active #card-filters-rail { display: none !important; }

/* Small screens: stack map + list; the radius bar docks at the map bottom. */
@media (max-width: 768px) {
    .main-map-wrap {
        flex-direction: column;
        height: auto;
    }
    .mv-map-col { height: 58vh; min-height: 320px; }
    .main-map-wrap.mv-collapsed .mv-map-col { height: 70vh; }
    .mv-sidebar {
        flex: 0 0 auto;
        max-height: 40vh;
    }
}

/* Listing Stack Styles */
.listing-type-section {
    margin-bottom: 3rem;
    scroll-margin-top: 180px;
    /* Offset for fixed header */
}

.listing-type-header {
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--color-blue);
    color: var(--color-gray);
}

.listing-type-header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-blue);
}

/* Update Category Slider to be cleaner without buttons if needed, 
   but user said "Width of buttons are good as they are" */
.category-item {
    min-width: 100px;
    /* Ensure a minimum width */
}

/* --- Account Settings Refactor Styles --- */

/* Horizontal User Info Header */
.settings-header .user-info-display.horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.settings-header .user-info-display.horizontal h3,
.settings-header .user-info-display.horizontal p {
    margin: 0;
    line-height: 1.2;
}

.settings-header .user-info-display.horizontal .info-divider {
    color: #ccc;
    font-size: 1.2rem;
}

.settings-header {
    background: #fdfdfd;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Accordion Section Actions (Top Right / Bottom Right aligned) */
.section-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

.section-actions .status-msg {
    font-size: 0.9rem;
    font-weight: 500;
}

.section-actions .btn-group {
    display: flex;
    gap: 10px;
}

/* Draggable Accordion Items */
.set-item[draggable="true"] {
    cursor: grab;
}

.set-item[draggable="true"].dragging {
    opacity: 0.5;
    background: #f9f9f9;
    border: 2px dashed #428fd3;
}

.set-item .set-header {
    cursor: pointer;
    /* Ensure clickable */
}

/* When active (open), maybe disable dragging? Or allow it? 
   User requirement: "user can drag and drop ... when all accordions are closed"
*/


/* --- Account Settings Drag & Drop --- */
.set-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.set-item[draggable="true"] .set-header {
    cursor: grab;
}

.set-item.dragging {
    opacity: 0.5;
    background: #fafafa;
    border: 1px dashed #ccc;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.set-item.drag-over {
    border-top: 2px solid #3366ff;
    /* Highlight drop position */
    margin-top: 5px;
}

/* --- Section Actions --- */
.section-actions {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
    margin-top: 2rem;
}

/* --- Admin Skills Drag & Drop --- */
.skill-set-item {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
    background: #fff;
    cursor: default;
}

.skill-set-header {
    background: #f9f9f9;
    padding: 10px 15px;
    cursor: move;
    /* Drag handler for category */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.skill-set-content {
    display: none;
    padding: 10px;
}

.skill-set-item.active .skill-set-content {
    display: block;
}

.admin-skill-list {
    min-height: 50px;
    padding: 5px;
    border: 1px dashed transparent;
}

.admin-skill-list.drag-over {
    border-color: #3366ff;
    background: #f0f7ff;
}

.admin-skill-item {
    padding: 8px 12px;
    margin-bottom: 5px;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: move;
    /* Drag handler for skill */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-skill-item:hover {
    border-color: #ccc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-skill-item.dragging {
    opacity: 0.5;
}

.skill-actions-btn {
    display: flex;
    gap: 5px;
}


.input-group-top {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}

@media (min-width: 900px) {
    .profile-bio-col {
        margin-top: 70px;
    }
}

.editable-field {
    border: 1px dashed transparent;
    transition: all 0.2s;
    padding: 2px;
    border-radius: 4px;
}

.editable-field:hover {
    background-color: rgba(255, 255, 0, 0.1);
    border-color: #ccc;
    cursor: text;
}

.editable-field:focus {
    background-color: #fff;
    border-color: var(--color-blue);
    outline: none;
    box-shadow: 0 0 5px rgba(66, 143, 211, 0.3);
}

/* Profile Edit UI Refinements */
.toggle-btn-large {
    padding: 8px 20px !important;
    font-size: 1.1rem !important;
    white-space: nowrap !important;
    min-width: 140px;
}

.list-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.list-section-header h3 {
    margin-bottom: 0 !important;
}

.add-item-btn {
    background: var(--color-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.add-item-btn:hover {
    background: #0056b3;
}

/* Ensure editable fields in lists look consistent */
.profile-list-section ul li.editable-field {
    display: block;
    margin-bottom: 4px;
}

/* Ensure editable fields in lists look consistent */
.hero-details .item-text {
    display: block;
    margin-top: 2px;
    white-space: pre-line;
}

#profile-payments-accepted::-webkit-scrollbar {
    width: 6px;
}

#profile-payments-accepted::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#profile-payments-accepted::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

#profile-payments-accepted::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Enhanced Edit Mode UI */
.head-toggle-btn {
    font-size: 0.95rem !important;
    padding: 6px 15px !important;
    white-space: nowrap;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #555555 !important;
    font-weight: 400 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* Edit Mode toggle: larger, brand-gold, prominent — it floats bottom-center
   (see #master-nav). ID + !important to out-specify .head-toggle-btn above.
   Fixed 60px height with the text/padding bumped ~20%; white outline + drop
   shadow; gold (#f5b234) exactly matches the messaging FAB (--bw-gold in
   chat-widget.css) at the bottom-left. */
#edit-mode-toggle {
    height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    padding: 0 3.11rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    background: #f5b234 !important;
    color: var(--color-white) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
#edit-mode-toggle:hover {
    background: #e0a020 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}
#edit-mode-toggle:active { transform: scale(0.97); }

/* Narrow screens: scale the bottom-center toggle down so it (and the stacked
   Profile-Private switch) never overflow the viewport. Lets the nav wrap too. */
@media (max-width: 600px) {
    #edit-mode-toggle {
        height: 52px !important;
        font-size: 1.25rem !important;
        padding: 0 1.6rem !important;
    }
    .master-nav-content { max-width: 96%; flex-wrap: wrap; }
}

/* Settings FAB — bottom-right, mirrors the messaging FAB (bottom-left).
   Brand-gold circle with a small white gear icon. Hidden by default; the
   profile script reveals it ONLY on the owner's own profile (display:flex). */
#settings-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f5b234;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 99998;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#settings-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
#settings-fab svg { width: 20px; height: 20px; display: block; }

/* ── Desktop profile-page header restructure (JS-injected, ≥769px) ─────────
   Top-right: Connect + Star act ON the viewed profile. Welcome pill + Admin
   links are floated out to the FABs so the top-right is action-only. */
@media (min-width: 769px) {
    /* (B) Connect + Star cluster, top-right of the header nav. */
    .profile-visitor-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-right: 12px;
    }
    .prof-connect-btn {
        display: inline-flex; align-items: center;
        background: var(--color-blue, #2f6fed); color: #fff;
        font-weight: 700; font-size: 0.85rem; font-family: inherit;
        border: none; border-radius: 999px; padding: 7px 16px; cursor: pointer;
        line-height: 1;
    }
    .prof-connect-btn:hover { filter: brightness(0.95); }
    .prof-connect-btn.is-pending { background: #eef1f5; color: #555; }
    .prof-connect-btn.is-connected { background: #e8f5e9; color: #2e7d32; }
    .prof-save-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 50%;
        background: #fff; border: 1px solid #e5e7eb; color: #bbb;
        font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
    }
    .prof-save-btn:hover { border-color: #f5b234; color: #f5b234; }
    .prof-save-btn.saved { color: #f5b234; border-color: #f5b234; background: #fffdf6; }
}

#profile-edit-actions .button {
    margin: 0 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* List Management */
.profile-list-section {
    position: relative;
}

.profile-list-section ul {
    list-style: none;
    padding: 0;
}

.profile-list-section li {
    position: relative;
    padding: 8px 35px 8px 30px;
    margin-bottom: 5px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 6px;
    transition: all 0.2s;
}

.edit-mode .profile-list-section li:hover {
    border-color: var(--color-blue);
}

.drag-handle {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: grab;
    color: #ccc;
    display: none;
}

.edit-mode .drag-handle {
    display: block;
}

.item-delete-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ff4d4d;
    cursor: pointer;
    font-size: 1.1rem;
    display: none;
    padding: 4px;
}

.edit-mode .item-delete-btn {
    display: block;
}

.add-item-btn {
    display: none;
    width: 100%;
    padding: 6px;
    margin-top: 8px;
    background: #f0f7ff;
    border: 1px dashed var(--color-blue);
    color: var(--color-blue);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.edit-mode .add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.add-item-btn:hover {
    background: #e1efff;
}

/* Sortable Placeholder */
.sortable-placeholder {
    background: #eef5ff !important;
    border: 2px dashed #99c2ff !important;
    visibility: visible !important;
}

.sortable-ghost {
    opacity: 0.4;
}

/* Location Edit */
#profile-location.editable-field {
    display: inline-block;
    min-width: 100px;
}

/* Expandable Content (Accordion) */
/* Expandable Hero Container (Accordion) */
.profile-hero .profile-hero-container {
    position: relative;
    /* transition: max-height 0.3s ease;  Removing transition for height as it can be jumpy with auto */
}

.hero-collapsed {
    max-height: 200px;
    overflow: hidden;
}

/* Gradient Mask for Collapsed State */
.hero-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    z-index: 10;
}

/* Edit Mode Overrides - Force Expand */
.edit-mode .hero-collapsed {
    max-height: none !important;
    overflow: visible !important;
}

.edit-mode .hero-collapsed::after {
    display: none !important;
}

.edit-mode .view-more-container-btn {
    display: none !important;
}

.view-more-container-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    padding-bottom: 10px;
    transition: background-color 0.2s;
}

.view-more-container-btn:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* View More Button Styling */
.view-more-btn {
    display: block;
    margin: 10px auto 0;
    padding: 6px 12px;
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    color: var(--color-dark);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.view-more-btn:hover {
    background: #e0e0e0;
}

/* Account Header - remove bold */
.account-header-title h2 {
    font-weight: 400 !important;
}

/* Accordion Drag Handle (3 lines) */
.set-header {
    position: relative;
    padding: 1rem !important;
    padding-left: 3.5rem !important;
    /* Space for handle */
}

.set-header::before {
    content: "";
    position: absolute;
    left: 1rem;
    /* Adjust left position */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 10px;
    padding: 0 0.5rem;
    /* Padding to widen the handle lines */
    box-sizing: content-box;
    /* Ensure padding adds to width */
    /* 3 lines using gradient or box-shadow */
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    background-image: linear-gradient(#ccc 2px, transparent 2px);
    /* Middle line */
    background-size: 100% 2px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

/* Hover state for handle */
.set-item:hover .set-header::before {
    opacity: 1;
    border-color: #999;
}

/* --- Profile UI Refinements --- */

/* Share Button Styling */
.share-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.share-btn:hover {
    color: var(--color-green);
    transform: scale(1.1);
}

.share-btn.copied {
    color: var(--color-green);
}

/* Item Type Tag Refinement */
.profile-list-item .item-type-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    background: transparent !important;
    padding: 0;
    color: #333;
    font-weight: 800;
    /* Stronger bold */
    border-right: 2px solid #eee;
    padding-right: 6px;
    margin-right: 8px;
}

/* View More Container Button Refinement */
.view-more-container-btn {
    border-top: 1px solid transparent;
    transition: all 0.3s ease;
}

.view-more-container-btn:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-top-color: #eee;
}

.view-more-container-btn:active {
    background-color: rgba(0, 0, 0, 0.05);
}

/* --- Profile UI Refinements (Phase 2) --- */

/* Hero Headers & Toggles */
.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    height: 35px;
    /* Enforced height */
}

.col-visibility-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    margin-left: auto;
    /* Push to right in flex container */
}

.col-visibility-toggle:hover {
    background: #f0f0f0;
    color: var(--color-green);
}

.col-visibility-toggle.invisible {
    color: #ccc;
    text-decoration: line-through;
}

/* Verified Badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #d4af37;
    /* Gold */
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: 8px;
    vertical-align: middle;
}
.verified-badge .bhv-verified { display: block; flex-shrink: 0; }

/* Message Button */
.message-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    margin-left: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.message-btn:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Hero Social Refinement */
.hero-social {
    gap: 0 !important;
}

/* Profile Details Column */
.profile-details-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Custom Tooltip Styles */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 10000;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Profile Specific Tooltip Overrides — the header "detail item" pop-ups
   (verified badge, location). Center them UNDER the item and let the text wrap
   with a capped width, so they never bleed off the right edge of the page. */
.verified-badge[data-tooltip]::after,
#profile-location-wrapper[data-tooltip]::after {
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateY(5px) translateX(-50%);
    white-space: normal;
    width: max-content;
    max-width: min(78vw, 260px);
    text-align: center;
    z-index: 5000;
}
.verified-badge[data-tooltip]::before,
#profile-location-wrapper[data-tooltip]::before {
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateY(5px) translateX(-50%);
    z-index: 5000;
}

.verified-badge[data-tooltip]:hover::after,
.verified-badge[data-tooltip]:hover::before,
#profile-location-wrapper[data-tooltip]:hover::after,
#profile-location-wrapper[data-tooltip]:hover::before {
    transform: translateY(5px) translateX(-50%);
}

.hero-details {
    display: flex;
    flex-direction: column;
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Match other sections gap */
}

.detail-item {
    font-size: 0.95rem;
    color: #333 !important;
    padding: 8px 12px !important;
    background: #fdfdfd !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.8rem;
}

.detail-item label {
    display: block;
    font-weight: 400;
    /* Normal weight */
    color: #666;
    /* Lighter color for label */
    font-size: 0.8rem;
    text-transform: none;
    /* No capitalization */
    margin: 0;
}

.detail-item .item-text,
.detail-item p {
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
}

/* Ensure consistent text across all hero columns */
.hero-bio p,
.profile-list-section li,
.profile-social-credentials li,
.detail-item {
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #333;
}

#profile-bio-short {
    color: #333;
}

/* Bio uses the regular dark body color (not blue) regardless of inherited rules. */
#profile-bio-short,
#profile-bio-full,
#bio-content p {
    color: #333 !important;
}

/* On the owner's own profile (body.has-master-nav is set only for the owner),
   hide the listing-card bottom action bar. */
body.has-master-nav .lc-bottom-bar {
    display: none !important;
}

/* Account page → Profile shortcut FAB (mirrors the profile page's settings FAB).
   Gold circle, white icon, fixed bottom-right. */
#account-profile-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f5b234;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    z-index: 99998;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#account-profile-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
#account-profile-fab svg { width: 22px; height: 22px; display: block; }

/* Hero Container Grid Adjustment */
.profile-hero-container {
    align-items: stretch;
    /* Make columns same height */
}

/* View More Button Refinement */
.view-more-btn {
    background: transparent !important;
    border: none;
    color: #666;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.view-more-btn:hover {
    color: var(--color-primary);
}

/* Fix Hero Titles in Edit Mode */
#profile-container.edit-mode .hero-header h3 {
    margin-right: 30px;
    /* Space for toggle */
}

.hero-title-wrapper {
    margin-top: 1.5rem;
}

/* --- Refinements Phase 3 --- */

/* Hero Bio Stacking */
.hero-bio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Stack title on top */
}

.hero-bio .hero-header {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Light Grey Items */
.profile-social-credentials li,
.profile-list-item {
    background: #fdfdfd !important;
    border: 1px solid #f0f0f0 !important;
    color: #333 !important;
}

/* Consistent Add Buttons */
.add-item-btn-container button,
.add-cred-btn {
    background: #f5f5f5;
    border: 1px dashed #ccc;
    color: #666;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.add-item-btn-container button:hover,
.add-cred-btn:hover {
    background: #eee;
    color: #333;
    border-color: #999;
}

/* --- Account Page View Modes --- */

.settings-sections.tabbed-view {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}

.settings-sections.tabbed-view .set-item {
    border: 1px solid #e0e0e0 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    margin-right: -1px;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    cursor: grab;
    position: relative;
    z-index: 1;
}

.settings-sections.tabbed-view .set-item.active {
    background: #fff;
    border-bottom: 2px solid #fff !important;
    z-index: 3;
}

.settings-sections.tabbed-view .set-header {
    padding: 12px 10px !important;
    font-size: 0.95rem !important;
    background: transparent !important;
    justify-content: center !important;
    border-radius: 8px 8px 0 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide arrow in tabbed view */
.settings-sections.tabbed-view .set-header::after {
    display: none !important;
}

.settings-sections.tabbed-view .set-content {
    grid-column: 1 / -1;
    grid-row: 999;
    /* Push all content panels to the end */
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 0 8px 8px !important;
    background: #fff !important;
    width: 100%;
    margin-top: -2px;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Ensure only one visible panel in tabbed mode */
.settings-sections.tabbed-view .set-item:not(.active) .set-content {
    display: none !important;
}

.settings-sections.tabbed-view .set-item.active .set-content {
    display: block !important;
}

/* Drag handling in tabbed view */
.settings-sections.tabbed-view .set-item.dragging {
    opacity: 0.5;
    background: #e9e9e9;
}

.settings-sections.tabbed-view .set-item.drag-over {
    border-left: 3px solid #428fd3 !important;
}

/* --- Account Page View Modes --- */

/* Tabbed View Styles */
.settings-sections.tabbed-view #set-nav {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.settings-sections.tabbed-view #set-nav a {
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.settings-sections.tabbed-view #set-nav a.active {
    border-bottom: 2px solid var(--color-blue);
    color: var(--color-blue);
    font-weight: 600;
}

.settings-sections.tabbed-view .set-header {
    display: none;
}

.settings-sections.tabbed-view .set-item {
    border: none;
    margin-bottom: 0;
}

.settings-sections.tabbed-view .set-item:not(.active) {
    display: none;
}

.settings-sections.tabbed-view .set-item.active {
    display: block;
}

.settings-sections.tabbed-view .set-content {
    display: block !important;
    max-height: none !important;
    padding: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide expand/collapse in tabbed view */
.tabbed-view-active #expand-all-btn,
.tabbed-view-active #collapse-all-btn {
    display: none !important;
}

/* Drag and Drop Styles */
.set-nav a[draggable="true"] {
    cursor: move;
}

.set-nav a.dragging {
    opacity: 0.5;
    background: #f0f0f0;
}

.set-nav a.drag-over {
    border-left: 2px solid var(--color-blue);
}

/* Location Suggestions Autocomplete */
.location-suggestions {
    position: absolute;
    top: 100%;
    left: 4px;
    right: 4px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2200;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    margin-top: 2px;
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.suggestion-item:hover {
    background: #f5f7f9;
    color: var(--color-blue);
}

.suggestion-item .type {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.loc-input-group {
    position: relative;
    display: flex;
    gap: 5px;
}

/* Search Result Location Tags */
.result-location-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f4f8;
    color: #546e7a;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-left: 5px;
    font-weight: 500;
    border: 1px solid #e1e8ed;
    vertical-align: middle;
}
/* ================================================
   PROXIMITY FEATURES - CONSISTENT STYLING
   ================================================ */

/* Proximity distance badge on profiles */
.proximity-distance-badge {
    display: inline-block;
    margin-left: 8px;
    color: #667eea;
    font-size: 0.9em;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.proximity-distance-badge:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

/* Profile location wrapper with proximity data */
#profile-location-wrapper.has-proximity-distance {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

/* Map sidebar styling to match site */
.map-sidebar-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-search {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Link to map from home page */
.btn-proximity-map,
.link-proximity-map {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.btn-proximity-map:hover,
.link-proximity-map:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Proximity info icon */
.proximity-info-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    margin-left: 4px;
    cursor: help;
}

/* Map page responsive adjustments */
@media (max-width: 768px) {
    .map-sidebar {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 45vh;
        border-left: none;
        border-top: 1px solid #ddd;
    }

    #map {
        height: 55vh;
    }

    .map-sidebar-header h2 {
        font-size: 16px;
    }

    .proximity-distance-badge {
        font-size: 0.85em;
        padding: 3px 8px;
    }
}

/* Location sync indicator */
.location-synced {
    opacity: 0.7;
    color: #4caf50;
}

.location-synced::after {
    content: " ✓";
    color: #4caf50;
    font-weight: bold;
}

/* ===== Community Forum View (listing-section Forum toggle) ===== */
.forum-view {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1rem;
}

.forum-composer {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray, #e3e6ea);
    border-radius: var(--radius-md, 10px);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.forum-composer-title {
    margin: 0 0 0.25rem 0;
    color: var(--color-blue);
    font-size: 1.2rem;
}

.forum-composer-subtitle {
    margin: 0 0 0.9rem 0;
    color: var(--color-gray);
    font-size: 0.9rem;
}

.forum-composer-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.forum-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-light-gray, #d8dde2);
    border-radius: var(--radius-sm, 6px);
    font: inherit;
    color: inherit;
    background: #fafbfc;
    box-sizing: border-box;
    resize: vertical;
}

.forum-input:focus {
    outline: none;
    border-color: var(--color-blue);
    background: #fff;
}

.forum-composer-actions {
    display: flex;
    gap: 0.5rem;
}

.forum-thread-count {
    font-size: 0.9rem;
    color: var(--color-gray);
    margin: 0 0 0.75rem 0.25rem;
    font-weight: 600;
}

.forum-thread-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray, #e3e6ea);
    border-radius: var(--radius-md, 10px);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.forum-thread-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.forum-thread-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
    color: var(--color-blue);
}

.forum-thread-body {
    margin: 0 0 0.6rem 0;
    color: var(--color-gray);
    font-size: 0.92rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forum-thread-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.forum-thread-author {
    color: var(--color-gray);
}

.forum-thread-replies {
    color: var(--color-gold, #c79a3a);
    font-weight: 600;
}

@media (max-width: 600px) {
    .forum-thread-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

/* Note: the card-filter tabs deliberately keep their full size below the 660px
   stacking breakpoint — once the rail stacks (see the 660px block above) the
   buttons no longer compete for one row, so they no longer shrink as the screen
   narrows. They wrap/stack at a consistent, readable size instead. */

/* ===========================================================================
   LOGIN / ACCOUNT / PROFILE DROPDOWN — ALWAYS ON TOP
   (every page, every scroll state)

   The dropdown is nested inside .main-nav (stacking context: position:relative
   z-index:110) inside the sticky .site-header (stacking context: z-index:3000).
   On scroll the search bar docks as a high z-index position:fixed element
   (above .search-dock-bg, z-index:2900), and page modals/toasts run up to
   z-index ~12000 — both previously painted OVER the dropdown because it was
   trapped in those nested contexts, so raising the popup's own z-index alone
   never worked.

   Fix: while a dropdown is open (click = .show/.pinned, hover, or the JS
   profile chip = .open), lift BOTH the nav's and the header's stacking contexts
   to the very top so the popup escapes above everything, and max out the
   popup's own z-index. !important guards against the inline z-index the dock
   animation sets on the search bar. Covers .site-header and legacy .header.
   =========================================================================== */
.dropdown-content,
.user-profile-menu {
    z-index: 2147483647 !important;
}

.site-header:has(.dropdown-content.show),
.site-header:has(.dropdown-content.pinned),
.site-header:has(.dropdown:hover),
.site-header:has(.user-profile-wrapper.open),
.header:has(.dropdown-content.show),
.header:has(.dropdown-content.pinned),
.header:has(.dropdown:hover),
.header:has(.user-profile-wrapper.open),
.main-nav:has(.dropdown-content.show),
.main-nav:has(.dropdown-content.pinned),
.main-nav:has(.dropdown:hover),
.main-nav:has(.user-profile-wrapper.open) {
    z-index: 2147483647 !important;
}

/* ===========================================================================
   CARD-FILTER TOOLTIPS, "+" ADD MENU, FORUM CARD ICONS & MODALS
   =========================================================================== */

/* --- Hover tooltips on each card-filter button --- */
.card-filters .listing-filter-button { position: relative; }
.card-filters .listing-filter-button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 220px;
    background: #1f2937;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    padding: 6px 9px;
    border-radius: 6px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 3400;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.card-filters .listing-filter-button[data-tip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease;
    z-index: 3400;
}
.card-filters .listing-filter-button[data-tip]:hover::after,
.card-filters .listing-filter-button[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.card-filters .listing-filter-button[data-tip]:hover::before,
.card-filters .listing-filter-button[data-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* --- "+" Add New dropdown --- */
.cf-add-wrap { position: relative; display: inline-flex; }

/* Gold, icon-only Add button — a bare "+" (no "Add" label) that stands apart
   from the blue filter tabs. Overrides the blue base button styling. */
.card-filters .listing-filter-button.cf-add-btn {
    color: var(--color-gold);
    border-color: var(--color-gold);
    padding: 0.5rem 0.7rem;
}
.card-filters .listing-filter-button.cf-add-btn:hover,
.card-filters .listing-filter-button.cf-add-btn.selected,
.card-filters .listing-filter-button.cf-add-btn[aria-expanded="true"] {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}
.card-filters .listing-filter-button.cf-add-btn:active {
    background-color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}
/* Make the bare "+" read as a clear, weighty glyph (needs to out-specify the
   base `.card-filters .listing-filter-button .lf-ic` rule). */
.card-filters .listing-filter-button.cf-add-btn .lf-ic { font-size: 1.3rem; line-height: 1; }
.cf-add-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 3401;
}
.cf-add-menu[hidden] { display: none; }
.cf-add-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    padding: 6px 8px 4px;
}
.cf-add-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.13s ease;
}
.cf-add-item:hover,
.cf-add-item:focus-visible { background: #eaf3fb; outline: none; }
.cf-add-name { font-size: 0.9rem; font-weight: 600; color: var(--color-blue); }
.cf-add-sub { font-size: 0.74rem; color: #777; }

/* ── Small-screen overflow ("⋯") that re-hosts the right group ── */
/* Hidden on wide screens; the responsive block below swaps it in for cf-right. */
/* The right group (Saved / Tagged / Add) is collapsed into the single "⋯"
   overflow tab at ALL screen sizes. */
.card-filters .cf-right { display: none; }
.cf-overflow-wrap { position: relative; display: inline-flex; }
.cf-overflow-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 3401;
}
.cf-overflow-menu[hidden] { display: none; }
/* Saved / Tagged sit side by side at the top of the menu. */
.cf-overflow-row { display: flex; gap: 0.5rem; padding: 2px 4px 4px; }
.cf-overflow-row .listing-filter-button { flex: 1 1 auto; }
.cf-overflow-sep { height: 1px; background: rgba(0, 0, 0, 0.1); margin: 4px 6px; }

/* --- Forum card: header (tag left, tags top-right) + action icons --- */
.forum-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.35rem;
}
.forum-card-head .forum-card-tag { margin-bottom: 0; flex-shrink: 0; }
.forum-card-head .forum-card-tags {
    margin: 0;
    justify-content: flex-end;
    max-width: 62%;
}
.forum-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}
.forum-card-replies { margin-right: 2px; white-space: nowrap; }
.forum-card-actions .icon-button {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: #c9a227;
    transition: background-color 0.15s, color 0.15s;
}
.forum-card-actions .icon-button:hover,
.forum-card-actions .icon-button:focus-visible { background: #eaf3fb; outline: none; }
.forum-card-actions .icon-button.star.active-star { color: gold; }
.forum-card-meta .forum-card-author { align-self: center; }

/* --- Shared modal backdrop for forum-thread and add-card modals --- */
.forum-thread-modal,
.add-card-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 12000;
}
.forum-thread-modal[hidden],
.add-card-modal[hidden] { display: none; }

.ftm-dialog,
.acm-dialog {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.ftm-close,
.acm-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}
.ftm-close:hover,
.acm-close:hover { color: #333; }

/* Forum thread modal */
.ftm-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 0.5rem; }
.ftm-title { margin: 0 0 0.2rem; color: var(--color-blue); font-size: 1.2rem; padding-right: 28px; }
.ftm-op-meta { margin: 0 0 0.5rem; font-size: 0.78rem; color: #888; }
.ftm-op-body { margin: 0 0 0.9rem; color: #444; line-height: 1.45; }
.ftm-replies-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 0.7rem;
    margin-bottom: 0.5rem;
}
.ftm-replies { display: flex; flex-direction: column; gap: 0.7rem; max-height: 38vh; overflow-y: auto; margin-bottom: 0.9rem; }
.ftm-reply { background: #f6f8fa; border-radius: 10px; padding: 8px 11px; }
.ftm-reply-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.ftm-reply-author { font-weight: 600; font-size: 0.84rem; color: #333; }
.ftm-reply-time { font-size: 0.72rem; color: #999; }
.ftm-reply-body { margin: 0; font-size: 0.88rem; color: #444; line-height: 1.4; }
.ftm-empty { color: #888; font-size: 0.85rem; font-style: italic; }
.ftm-form .ftm-input,
.acm-form input,
.acm-form textarea {
    width: 100%;
    border: 1px solid #d8dee5;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.ftm-actions,
.acm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.7rem; }

/* Add-card modal */
.acm-title-h { margin: 0 0 0.2rem; color: var(--color-blue); font-size: 1.2rem; padding-right: 28px; }
.acm-sub { margin: 0 0 1rem; font-size: 0.85rem; color: #777; }
.acm-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.7rem; }
.acm-field > span { font-size: 0.78rem; font-weight: 600; color: #555; }
.acm-error { color: #c0392b; font-size: 0.82rem; margin: 0.2rem 0 0; }
.acm-error[hidden] { display: none; }

/* ── ACM tag search widget ───────────────────────────────────────────────── */
.acm-tags-wrap { position: relative; }
.acm-tags-search {
    width: 100%;
    border: 1px solid #d8dee5;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.acm-tags-search:focus { outline: none; border-color: var(--color-blue); }
.acm-tags-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d8dee5;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 3500;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.acm-tags-dropdown[hidden] { display: none; }
.acm-tags-dropdown-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: #333;
}
.acm-tags-dropdown-item:hover { background: #f0f2f5; }
.acm-tags-dropdown-add { color: var(--color-blue); font-weight: 600; }
.acm-tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    min-height: 0;
}
.acm-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    padding: 2px 8px 2px 10px;
    font-size: 0.8rem;
    color: #3730a3;
}
.acm-tag-chip-remove {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    color: #6366f1;
    cursor: pointer;
}
.acm-tag-chip-remove:hover { color: #c0392b; }
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Shared-link location notice ─────────────────────────────────────────── */
.loc-shared-notice {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    padding: 6px 10px 6px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1200;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.loc-shared-notice.lsn-fade {
    opacity: 0;
    pointer-events: none;
}
/* caret pointing up at the location tag */
.loc-shared-notice::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1e293b;
}
.loc-shared-notice-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.loc-shared-notice-close:hover { color: #f1f5f9; }

/* ── Membership details link (bottom of account dropdown) ───────────────── */
#membership-details-link {
    border-top: 1px solid #e8e8e8;
    margin-top: 4px;
    padding-top: 10px !important;
    font-size: 0.82rem !important;
    color: #888 !important;
    text-align: center !important;
}

/* ── Listing detail popup footer (star / save) ───────────────────────────── */
.ld-popup-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 2;
}
.ld-star-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px solid #d1d5db;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 0.95rem;
    color: #555;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-weight: 500;
}
.ld-star-btn .ld-star-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: #c9a227;
}
.ld-star-btn:hover {
    border-color: #c9a227;
    color: #c9a227;
    background: #fffdf0;
}
.ld-star-btn.active {
    border-color: #c9a227;
    background: #fffdf0;
    color: #c9a227;
    font-weight: 700;
}
.ld-star-btn.active .ld-star-icon {
    color: gold;
}

/* Share + Hide footer buttons — same pill shape as Save. */
.ld-share-btn, .ld-hide-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px solid #d1d5db;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 0.95rem;
    color: #555;
    cursor: pointer;
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ld-share-btn .ld-share-icon { line-height: 0; color: #3b82f6; display: inline-flex; }
.ld-share-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #f5f9ff; }
.ld-hide-btn .ld-hide-icon { font-size: 0.95rem; line-height: 1; color: #c0392b; }
.ld-hide-btn:hover { border-color: #c0392b; color: #c0392b; background: #fff5f4; }

/* Share picker panel — overlays the listing-detail dialog. */
.ld-share-panel {
    position: absolute;
    left: 50%;
    bottom: 74px;
    transform: translateX(-50%);
    width: min(420px, calc(100% - 24px));
    max-height: 62%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 6;
}
.ld-share-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #eee;
}
.ld-share-title { font-weight: 700; font-size: 0.95rem; color: #222; }
.ld-share-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.ld-share-close:hover { color: #222; }
.ld-share-hint { margin: 10px 16px 0; font-size: 0.8rem; color: #777; line-height: 1.4; }
.ld-share-search {
    margin: 10px 16px; box-sizing: border-box; width: calc(100% - 32px);
    border: 1.5px solid #d1d5db; border-radius: 10px;
    padding: 8px 12px; font-size: 0.88rem; font-family: inherit; outline: none;
}
.ld-share-search:focus { border-color: #3b82f6; }
.ld-share-results { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.ld-share-loading { text-align: center; color: #999; font-size: 0.85rem; padding: 14px 0; margin: 0; }
.ld-share-row {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; border-radius: 10px; padding: 9px 10px;
    cursor: pointer; text-align: left; font-family: inherit;
}
.ld-share-row:hover { background: #f5f7fa; }
.ld-share-row.on { background: #eef4ff; }
.ld-share-check { width: 16px; flex-shrink: 0; color: #3b82f6; font-weight: 700; }
.ld-share-rowname { font-weight: 600; font-size: 0.88rem; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-share-handle { font-size: 0.8rem; color: #999; margin-left: auto; flex-shrink: 0; }
.ld-share-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-top: 1px solid #eee;
}
.ld-share-count { font-size: 0.82rem; color: #777; }
.ld-share-send { padding: 8px 18px; border-radius: 10px; }

/* Mobile: keep the 3 footer pills on one row (compact) + full-width share sheet. */
@media (max-width: 768px) {
    .ld-popup-footer { gap: 8px; padding: 10px 12px; }
    .ld-star-btn, .ld-share-btn, .ld-hide-btn { padding: 8px 12px; font-size: 0.85rem; gap: 4px; }
    .ld-share-panel { width: calc(100% - 16px); bottom: 70px; max-height: 66%; }
}

/* ── Listing detail popup — comments section ─────────────────────────────── */
.ld-comments-section {
    margin-top: 24px;
    padding-bottom: 8px;
}
.ld-comments-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.ld-comment {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 10px 14px;
}
.ld-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.ld-comment-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1a1a1a;
}
.ld-comment-time {
    font-size: 0.75rem;
    color: #999;
}
.ld-comment-text {
    margin: 0;
    font-size: 0.88rem;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.ld-comment-replies {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ld-comment-replies .ld-comment {
    background: #fff;
    font-size: 0.84rem;
    padding: 8px 12px;
}
.ld-no-comments,
.ld-comments-loading {
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    padding: 16px 0;
    margin: 0;
}
.ld-comment-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.ld-comment-input {
    flex: 1;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.88rem;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s;
}
.ld-comment-input:focus {
    outline: none;
    border-color: var(--color-green, #2ecc71);
}
.ld-comment-submit {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.88rem;
    border-radius: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL FLOW FAB  (all screen sizes)
   A round gold launcher sitting just to the RIGHT of the chat bubble
   (bottom-left), mirroring the AllBeam app's chat + Flow FAB pair. Injected on
   every shell page by flow-fab.js (hidden on flow.html itself). Mobile geometry
   is overridden in mobile.css so it lifts above the floating tab bar.
   The 56px chat bubble lives at left:20 / bottom:20 (chat-widget.css); this FAB
   is slightly smaller and bottom-aligned with it.
   ────────────────────────────────────────────────────────────────────────── */
.bhv-flow-fab {
    position: fixed;
    left: 86px;          /* 20 (chat left) + 56 (chat width) + 10 gap */
    bottom: 24px;        /* centres against the 56px chat bubble */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5b234;  /* match the chat bubble gold (not the muted page gold) */
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    text-decoration: none;
    z-index: 99997;       /* just under the chat bubble (99998) */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.bhv-flow-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    color: #fff;
}
.bhv-flow-fab svg { width: 24px; height: 24px; display: block; }

/* Placement variants (chosen in Appearance settings). Base = 'between' (right
   of the chat bubble). Desktop has no mobile nav bar, so 'profile' just docks
   bottom-right and 'chat' stacks directly above the chat bubble. The compound
   selector outranks the base rule regardless of source order. */
.bhv-flow-fab.bhv-flow-fab--chat {
    left: 24px;
    right: auto;
    bottom: 84px;            /* above the 56px chat bubble (bottom:20 + 56 + 8) */
}
.bhv-flow-fab.bhv-flow-fab--profile {
    left: auto;
    right: 24px;
    bottom: 24px;
}