/**
 * variables.css - Pixidia Design System Tokens
 * Source: maquette-wizard-transport.html
 */

/* ============================================
   SELF-HOSTED URBANIST FONT (Phase F)
   Files: assets/fonts/urbanist/urbanist-latin.woff2
          assets/fonts/urbanist/urbanist-latin-ext.woff2
   Source: Google Fonts v18 (variable font — weights 400-800)
   NOTE: These @font-face declarations use a relative path.
   In production, the CSS is loaded from dist/itinerary.css,
   and the path ../fonts/urbanist/ resolves correctly relative
   to assets/css/dist/itinerary.css.
   ============================================ */

/* latin-ext */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../../fonts/urbanist/urbanist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../../fonts/urbanist/urbanist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* === Brand Colors === */
    --pixidia-blue: #012827;
    --pixidia-blue-light: #023d3b;
    --pixidia-blue-alpha: rgba(1, 40, 39, 0.08);
    --pixidia-green: #208D3E;
    --pixidia-green-light: #2ba84a;
    --pixidia-green-alpha: rgba(32, 141, 62, 0.1);
    --pixidia-turquoise: #20c9b8;
    --pixidia-turquoise-light: #3dd4c5;
    --pixidia-turquoise-alpha: rgba(32, 201, 184, 0.1);

    /* === CPT Category Colors === */
    --pxd-color-logement: #388e3c;
    --pxd-color-transport: #1976d2;
    --pxd-color-restauration: #d32f2f;
    --pxd-color-activite: #ff9800;
    --pxd-color-location: #9c27b0;

    /* === Neutrals === */
    --pixidia-white: #ffffff;
    --pixidia-off-white: #f8fafa;
    --pixidia-bg: #f0f4f4;
    --pixidia-gray-50: #f5f7f7;
    --pixidia-gray-100: #eef2f2;
    --pixidia-gray-200: #dce4e4;
    --pixidia-gray-300: #b8c5c5;
    --pixidia-gray-400: #8a9c9c;
    --pixidia-gray-500: #5d7070;
    --pixidia-text: #1a2e2e;
    --pixidia-text-muted: rgba(1, 40, 39, 0.55);

    /* === Status Colors === */
    --pixidia-red: #e53935;
    --pixidia-red-alpha: rgba(229, 57, 53, 0.1);
    --pixidia-orange: #f59e0b;
    --pixidia-orange-alpha: rgba(245, 158, 11, 0.1);

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, var(--pixidia-blue) 0%, #0a4a47 100%);
    --gradient-accent: linear-gradient(135deg, var(--pixidia-green) 0%, var(--pixidia-turquoise) 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 250, 1) 100%);

    /* === Shadows === */
    --shadow-xs: 0 1px 2px rgba(1, 40, 39, 0.04);
    --shadow-sm: 0 2px 8px rgba(1, 40, 39, 0.06);
    --shadow-md: 0 4px 16px rgba(1, 40, 39, 0.08);
    --shadow-lg: 0 8px 32px rgba(1, 40, 39, 0.12);
    --shadow-xl: 0 16px 48px rgba(1, 40, 39, 0.16);
    --shadow-glow: 0 0 24px rgba(32, 201, 184, 0.2);
    --shadow-glow-green: 0 0 24px rgba(32, 141, 62, 0.2);

    /* === Border Radius === */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 100px;

    /* === Timing === */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* === Layout === */
    --pxd-header-height: 60px;
    --pxd-nav-height: 48px;
    --pxd-sidebar-width: 64px;
    --pxd-right-width: 35%;
    --pxd-left-width: 60.6%;
    --pxd-bottom-nav-height: 0px;
}

/* ============================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================ */

@media (max-width: 1200px) {
    :root {
        --pxd-header-height: 56px;
        --pxd-sidebar-width: 52px;
        --pxd-right-width: 40%;
    }
}

@media (max-width: 768px) {
    :root {
        --pxd-header-height: 52px;
        --pxd-nav-height: 44px;
        --pxd-sidebar-width: 0px;
        --pxd-right-width: 0%;
        --pxd-left-width: 100%;
        --pxd-bottom-nav-height: 56px;
    }
}

@media (max-width: 480px) {
    :root {
        --pxd-header-height: 48px;
        --pxd-bottom-nav-height: 56px;
    }
}
/**
 * 01-reset.css - CSS Reset
 * Scoped to .pxd-page to avoid conflicting with WordPress/BuddyX global styles.
 */

.pxd-page *,
.pxd-page *::before,
.pxd-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ul/ol reset — BuddyX removes list-style but may also affect spacing */
.pxd-page ul,
.pxd-page ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Heading reset — BuddyX sets h1 { font-size: 2em } which leaks through.
   Use :where() for zero specificity so component classes (.pxd-hero-title, .pxd-card-title, etc.) can override. */
.pxd-page :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    line-height: inherit;
}

/* Image reset — :where() for zero specificity so .pxd-avatar etc. can set explicit dimensions */
.pxd-page :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}

/* ── Override BuddyX link styles in header ── */
.pxd-site-header a {
    color: inherit;
    text-decoration: none;
}
.pxd-site-header a:hover,
.pxd-site-header a:focus,
.pxd-site-header a:active {
    color: inherit;
    text-decoration: none;
}

/* ── External plugin elements — hide floating widgets injected via wp_footer ── */
body.pxd-itinerary-single #gt_float_wrapper,
body.pxd-itinerary-single .gt_float_switcher {
    display: none !important;
}

body.pxd-itinerary-single #pixidia-chat-drawer {
    display: none !important;
}
/**
 * 02-base.css - Base Styles (scoped to .pxd-page)
 * Font, colors, links, headings, focus — fully isolated from BuddyX/Elementor cascade.
 */

/* ── Body/html reset — BuddyX parent style is dequeued on itinerary pages,
   so we must provide our own body reset to avoid browser default margin: 8px ── */
html:has(body.pxd-itinerary-single),
body.pxd-itinerary-single {
    margin: 0;
    padding: 0;
    overflow: hidden;       /* Desktop: scrolling handled by .pxd-panel-left, not the body */
    background: var(--pixidia-bg, #f0f4f4);
}

/* Mobile: switch to body scroll — the panel is no longer a fixed-height scroll container */
@media (max-width: 768px) {
    html:has(body.pxd-itinerary-single),
    body.pxd-itinerary-single {
        overflow-x: hidden;
        overflow-y: auto;
        /* Smooth momentum scroll on iOS */
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Body override — ensures Urbanist on body itself (overrides BuddyX "Open Sans") ── */
body.pxd-itinerary-single {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Root font + colors ── */
.pxd-page {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--pixidia-bg);
    color: var(--pixidia-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Force Urbanist inheritance throughout — overrides BuddyX "Open Sans" */
.pxd-page * {
    font-family: inherit;
}

/* ── Links — BuddyX/Elementor context sets color:white + underline ── */
.pxd-page a {
    color: var(--pixidia-text);
    text-decoration: none;
}

.pxd-page a:hover {
    text-decoration: none;
    color: var(--pixidia-blue);
}

/* ── Focus-visible — override child theme green outline on all pxd buttons ── */
.pxd-page button:focus-visible,
.pxd-page .pxd-btn:focus-visible,
.pxd-page .pxd-btn-icon:focus-visible,
.pxd-page .pxd-nav-item:focus-visible,
.pxd-page .pxd-header-icon-btn:focus-visible,
.pxd-page .pxd-header-profile:focus-visible {
    outline: 2px solid var(--pixidia-green);
    outline-offset: 2px;
}

/* ── Smooth scrolling on the scrollable left panel (not globally on html) ── */
.pxd-panel-left {
    scroll-behavior: smooth;
}
/**
 * 10-layout-grid.css - Split-view CSS Grid Layout
 * Main page grid, header, sidebar, panels
 */

/* ============================================
   SPLIT-VIEW LAYOUT (CSS Grid)
   ============================================ */

.pxd-page {
    display: grid;
    grid-template-columns: var(--pxd-sidebar-width) 1fr var(--pxd-right-width);
    grid-template-rows: var(--pxd-header-height) 1fr;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* Header: full width, always visible */
.pxd-site-header {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 200;
}

/* Sidebar nav: vertical icon column below header */
.pxd-sidebar-nav {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    overflow: visible;
    z-index: 100;
    box-shadow: 4px 0 20px rgba(15, 163, 107, 0.04);
}

.pxd-sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* (Section nav is now the sidebar column - see .pxd-sidebar-nav above) */

/* ============================================
   CONTENT SECTIONS GRID
   ============================================ */

.pxd-cards-grid {
    display: grid;
    gap: 12px;
    align-items: stretch;
}
.pxd-cards-grid > .pxd-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pxd-cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Transport grid: 2col for simple trips, A/R spans full width */
.pxd-cards-grid--2col-transport {
    grid-template-columns: repeat(2, 1fr);
}
/* Wide cards span full width in any grid */
.pxd-cards-grid > .pxd-card--wide {
    grid-column: 1 / -1;
}
/* Vehicle cards: 2-column details to limit card height */
.pxd-card--wide .pxd-card-details--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.pxd-cards-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.pxd-cards-grid--1col {
    grid-template-columns: 1fr;
}

/* ============================================
   COMMON ELEMENTS
   ============================================ */

.pxd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.65);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
    color: var(--pixidia-blue, #012827);
    transition: all 0.25s ease;
}

.pxd-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(15, 163, 107, 0.15);
    transform: translateY(-1px);
}

.pxd-btn--primary {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.25);
}

.pxd-btn--primary:hover {
    box-shadow: 0 6px 18px rgba(15, 163, 107, 0.35);
    transform: translateY(-2px);
}

.pxd-btn--outline {
    background: rgba(255, 255, 255, 0.65);
    color: var(--pixidia-gray-500, #5a6578);
    border: 1px solid rgba(1, 40, 39, 0.08);
}

.pxd-btn--outline:hover {
    background: rgba(255, 255, 255, 0.92);
    color: var(--pixidia-blue, #012827);
    border-color: rgba(15, 163, 107, 0.15);
}

.pxd-btn--sm {
    padding: 8px 16px;
    font-size: 13px;
}

.pxd-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.pxd-btn svg,
.pxd-btn i {
    width: 16px;
    height: 16px;
}

/* Avatar sizes */
.pxd-avatar--sm {
    width: 32px;
    height: 32px;
}

.pxd-avatar--xs {
    width: 24px;
    height: 24px;
}

/* Input */
.pxd-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--pixidia-gray-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--pixidia-text);
    background: white;
}

.pxd-input:focus {
    outline: none;
    border-color: var(--pixidia-green);
    box-shadow: 0 0 0 3px rgba(32, 141, 62, 0.1);
}

.pxd-input--sm {
    width: 120px;
}

.pxd-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Stars */
.pxd-star {
    width: 16px;
    height: 16px;
}

.pxd-star--filled {
    color: #ffc107;
    fill: #ffc107;
}

.pxd-star--half {
    color: #ffc107;
}

.pxd-star--empty {
    color: var(--pixidia-gray-200);
}

/* Badge variants used by app.js */
.pxd-badge--confirmed {
    background: rgba(56, 142, 60, 0.1);
    color: #388e3c;
}

.pxd-badge--pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.pxd-badge--cancelled {
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
}

.pxd-badge--budget {
    background: rgba(32, 141, 62, 0.7);
}

.pxd-badge--solo {
    background: rgba(255, 255, 255, 0.2);
}

.pxd-badge--type {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

/* Card inner elements used by app.js */
.pxd-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.pxd-card-cat svg,
.pxd-card-cat i {
    width: 12px;
    height: 12px;
}

.pxd-card-day {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-text-muted);
    background: var(--pixidia-gray-50);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.pxd-card-details {
    margin-top: 8px;
}

.pxd-card-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pixidia-text-muted);
    margin-top: 4px;
}

.pxd-card-detail i,
.pxd-card-detail svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pxd-card-cost {
    font-weight: 700;
    color: var(--pixidia-green);
}

.pxd-card-free {
    color: var(--pixidia-green);
}

.pxd-card-separator {
    height: 1px;
    background: var(--pixidia-gray-100);
    margin: 12px 0;
}

.pxd-card-sub {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pixidia-text-muted);
    margin-bottom: 6px;
}

.pxd-card-segment {
    padding: 6px 12px;
    margin-top: 6px;
    background: rgba(25, 118, 210, 0.05);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-card-segment i,
.pxd-card-segment svg {
    width: 14px;
    height: 14px;
}

.pxd-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.pxd-card--hover {
    box-shadow: var(--shadow-md);
    border-left-width: 6px;
}

/* Card comment */
.pxd-card-comment {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--pixidia-gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--pixidia-green);
    font-size: 13px;
    font-style: italic;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.pxd-card-comment i,
.pxd-card-comment svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Timeline elements used by app.js */
.pxd-timeline-empty {
    padding: 24px;
    text-align: center;
    color: var(--pixidia-text-muted);
    font-style: italic;
}

.pxd-timeline-day-header {
    padding: 12px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    border-bottom: 1px solid var(--pixidia-gray-100);
    margin-bottom: 4px;
}

.pxd-timeline-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--pixidia-text);
}

/* Budget elements used by app.js */
.pxd-budget-donut {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
}

.pxd-budget-donut-center {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}

.pxd-budget-total {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pixidia-blue);
    line-height: 1;
}

.pxd-budget-label {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    margin-top: 4px;
}

.pxd-budget-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pixidia-gray-100);
}

.pxd-budget-row:last-child {
    border-bottom: none;
}

.pxd-budget-row-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pxd-budget-row-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.pxd-budget-row-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue);
    min-width: 70px;
    text-align: right;
}

.pxd-budget-row-percent {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    min-width: 40px;
    text-align: right;
}

.pxd-budget-row-bar {
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background: var(--pixidia-gray-100);
    overflow: hidden;
}

.pxd-budget-row-fill {
    height: 100%;
    border-radius: 3px;
}

/* Reservation elements used by app.js */
.pxd-res-empty {
    font-size: 12.5px;
    color: #778494;
    font-style: italic;
    padding: 12px 6px;
    text-align: center;
}

.pxd-res-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 12.5px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    min-width: 0;
}

.pxd-res-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    opacity: 0.5;
    border-radius: inherit;
    transition: opacity 0.25s ease;
}

.pxd-res-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 163, 107, 0.14), 0 3px 8px rgba(15, 163, 107, 0.06);
    background: rgba(255, 255, 255, 0.92);
}

.pxd-res-item:hover::before { opacity: 0.9; }

.pxd-res-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.pxd-res-title {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pixidia-blue, #012827);
    position: relative;
    z-index: 1;
}

.pxd-res-type {
    font-size: 10.5px;
    font-weight: 600;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

/* Expense elements used by app.js */
.pxd-expense-summary {
    margin-bottom: 16px;
}

.pxd-expense-total {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.pxd-expense-total i,
.pxd-expense-total svg {
    width: 20px;
    height: 20px;
    color: var(--pixidia-green);
}

.pxd-expense-participants {
    display: grid;
    gap: 8px;
}

.pxd-expense-participant {
    background: var(--pixidia-gray-50);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.pxd-expense-participant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.pxd-expense-items {
    display: grid;
    gap: 4px;
}

.pxd-expense-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--pixidia-text-muted);
    padding: 4px 0;
}

.pxd-expense-desc {
    flex: 1;
}

.pxd-expense-amount {
    font-weight: 600;
    color: var(--pixidia-text);
}

.pxd-expense-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Review elements used by app.js */
.pxd-reviews-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
}

.pxd-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--pixidia-gray-300);
    transition: transform 0.15s ease, color 0.15s ease;
}

.pxd-star-btn:hover {
    transform: scale(1.2);
}

.pxd-star-btn.active {
    color: #ffc107;
}

.pxd-star-btn.active svg {
    fill: #ffc107;
    filter: drop-shadow(0 1px 4px rgba(255, 193, 7, 0.4));
}

.pxd-star-btn i,
.pxd-star-btn svg {
    width: 24px;
    height: 24px;
    transition: fill 0.15s ease, filter 0.15s ease;
}

/* Chat elements used by app.js */
.pxd-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pxd-chat-bubble {
    padding: 8px 12px;
    border-radius: 12px 12px 12px 4px;
    background: var(--pixidia-gray-50);
    font-size: 13px;
    max-width: 250px;
    line-height: 1.4;
}

.pxd-chat-message--own .pxd-chat-bubble {
    background: rgba(32, 141, 62, 0.1);
    border-radius: 12px 12px 4px 12px;
}

.pxd-chat-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    margin-bottom: 4px;
}

.pxd-chat-meta span {
    color: var(--pixidia-text-muted);
}

/* Legend elements used by map.js */
.pxd-legend-count {
    grid-column: 3;
    font-size: 0.6rem;
    font-weight: 700;
    color: #ad8800;
    background: rgba(236, 171, 0, 0.12);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.pxd-legend-label {
    grid-column: 2;
    font-size: 0.6rem;
    font-weight: 600;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.pxd-legend-item:hover .pxd-legend-label {
    color: #0d8c5a;
}

.pxd-legend-item svg,
.pxd-legend-item i {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 14px;
    height: 14px;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Popup elements used by map.js */
.pxd-popup-content {
    padding: 14px;
}

.pxd-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pxd-popup-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pxd-popup-day {
    font-size: 11px;
    color: var(--pixidia-text-muted);
}

.pxd-popup-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin: 0 0 4px;
    line-height: 1.3;
}

.pxd-popup-time,
.pxd-popup-address {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Leaflet zoom controls override */
.leaflet-bar {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.leaflet-bar a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--pixidia-text) !important;
    background: white !important;
    border: none !important;
    border-bottom: 1px solid var(--pixidia-gray-100) !important;
    transition: background 0.15s, color 0.15s;
}

.leaflet-bar a:last-child {
    border-bottom: none !important;
}

.leaflet-bar a:hover {
    background: var(--pixidia-gray-50) !important;
    color: var(--pixidia-green) !important;
}

/* Leaflet marker classes used by map.js */
.pxd-marker-icon {
    background: none !important;
    border: none !important;
}

.pxd-marker-bounce {
    animation: pxd-marker-bounce 0.6s var(--ease-bounce);
}

/* ============================================
   RESPONSIVE: TABLET (768px - 1200px)
   ============================================ */

@media (max-width: 1200px) {
    .pxd-cards-grid--2col {
        grid-template-columns: 1fr;
    }

    .pxd-cards-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   RESPONSIVE: MOBILE (< 768px)
   ============================================ */

@media (max-width: 768px) {
    /* Switch from fixed split-view to scrollable single-column layout */
    .pxd-page {
        display: block;           /* Disable CSS grid — content stacks naturally */
        height: auto;             /* No longer 100vh; page grows with content */
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;        /* Allow body scroll instead of panel scroll */
        overflow-x: hidden;       /* Prevent horizontal overflow */
    }

    .pxd-sidebar-nav {
        display: none;
    }

    .pxd-panel-left {
        grid-column: 1;           /* Kept for grid fallback safety */
        height: auto;
        overflow-y: visible;      /* Body scrolls — panel does not need its own scroll */
        overflow-x: hidden;       /* Prevent horizontal overflow */
    }

    .pxd-panel-right {
        grid-column: 1;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        z-index: 600;
        transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pxd-mobile-map-toggle {
        display: flex !important;
    }

    .pxd-cards-grid--2col,
    .pxd-cards-grid--3col,
    .pxd-cards-grid--2col-transport {
        grid-template-columns: 1fr;
    }

    /* Vehicle card: collapse 2-col details to 1 col on mobile */
    .pxd-card--wide .pxd-card-details--2col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pxd-expense-form-row {
        flex-direction: column;
    }

    .pxd-input--sm {
        width: 100%;
    }
}
/**
 * 11-layout-panels.css - Left and Right Panel Styles
 * Scrollable content panel + sticky map panel
 */

/* Left panel: scrollable content */
.pxd-panel-left {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding-bottom: 12vh;              /* fallback for browsers without svh */
    padding-bottom: 12svh;             /* modern — enough scroll overrun for map viewing */
    scrollbar-width: thin;
    scrollbar-color: var(--pixidia-gray-300) transparent;
}

.pxd-panel-left::-webkit-scrollbar {
    width: 6px;
}

.pxd-panel-left::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-panel-left::-webkit-scrollbar-thumb {
    background: var(--pixidia-gray-300);
    border-radius: 3px;
}

.pxd-panel-left::-webkit-scrollbar-thumb:hover {
    background: var(--pixidia-gray-400);
}

/* Right panel: map */
.pxd-panel-right {
    grid-column: 3;
    grid-row: 2;
    overflow: hidden;
}

/* ============================================
   TABLET PANEL REFINEMENT (768-1200px)
   ============================================ */

@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-panel-left {
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: 10vh;
        padding-bottom: 10svh;
    }
}

/* ============================================
   MOBILE PANEL (<768px)
   ============================================ */

@media (max-width: 768px) {
    .pxd-panel-left {
        grid-column: 1;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        /* Override 30vh desktop padding — replaced by safe-area + bottom-nav in 21-sidebar.css */
        padding-bottom: 0;
        /* Scrollbar hidden on mobile for cleaner UX */
        scrollbar-width: none;
    }

    .pxd-panel-left::-webkit-scrollbar {
        display: none;
    }

    .pxd-panel-right {
        grid-column: 1;
    }
}
/* ============================================
   2. HEADER — Glassmorphism Pill (adapté Elementor)
   ============================================ */

.pxd-site-header {
    height: var(--pxd-header-height, 60px);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    position: relative;
    z-index: 200;
}

/* --- Pill container (glassmorphism) --- */
.pxd-header-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 98%;
    max-width: 1600px;
    height: 44px;
    padding: 0 8px 0 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    overflow: visible;
}

.pxd-header-pill:hover {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

/* --- Left: logo + search --- */
.pxd-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.pxd-header-logo-link {
    text-decoration: none;
    flex-shrink: 0;
}

.pxd-header-logo-wrap {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 5px 14px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pxd-header-logo-wrap:hover {
    background: rgba(255, 255, 255, 0.65);
}

.pxd-header-logo-wrap:hover .pxd-header-logo {
    transform: scale(1.05);
}

.pxd-header-logo {
    height: 22px !important;
    width: auto !important;
    max-width: 120px !important;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
    border: none !important;
    background: transparent !important;
}

/* --- Search bar --- */
.pxd-header-search-wrap {
    position: relative;
    flex: 1;
    max-width: 480px;
    height: 34px;
    display: flex;
    align-items: center;
}

.pxd-header-search-icon {
    position: absolute;
    left: 12px;
    font-size: 12px;
    color: rgba(1, 40, 39, 0.5);
    z-index: 2;
    pointer-events: none;
}

.pxd-header-search {
    width: 100%;
    height: 34px;
    padding: 0 38px 0 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-text);
    transition: all 0.3s ease;
}

.pxd-header-search::placeholder {
    color: rgba(1, 40, 39, 0.5);
    font-weight: 300;
}

.pxd-header-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pxd-header-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #012827, #025b59);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(1, 40, 39, 0.3);
    transition: all 0.3s ease;
}

.pxd-header-search-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

/* --- User actions --- */
.pxd-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 20px;
}

/* "Nouvel itinéraire" button */
.pxd-header-btn-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 34px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--pixidia-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pxd-header-btn-new i {
    font-size: 13px;
}

.pxd-header-btn-new:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- "Nos offres" button (logged-out) --- */
.pxd-site-header .pxd-header-btn-offers {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 16px !important;
    height: 34px;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    line-height: 1.2 !important;
}

.pxd-site-header .pxd-header-btn-offers i {
    font-size: 13px;
    color: var(--pixidia-blue) !important;
}

.pxd-site-header .pxd-header-btn-offers:hover,
.pxd-site-header .pxd-header-btn-offers:focus,
.pxd-site-header .pxd-header-btn-offers:active {
    background: rgba(255, 255, 255, 0.65) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
}

/* Glow sweep effect on "Nos offres" */
.pxd-header-btn-glow {
    position: absolute;
    top: 0;
    left: -60px;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    filter: blur(4px);
    transition: left 0.8s ease;
    pointer-events: none;
}

.pxd-site-header .pxd-header-btn-offers:hover .pxd-header-btn-glow {
    left: calc(100% + 20px);
}

/* --- Connexion pill button (logged-out) --- */
.pxd-site-header .pxd-header-login-pill {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 14px !important;
    height: 34px;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: 1.2 !important;
}

.pxd-site-header .pxd-header-login-pill:hover,
.pxd-site-header .pxd-header-login-pill:focus,
.pxd-site-header .pxd-header-login-pill:active {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
}

.pxd-header-login-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--pixidia-blue) !important;
}

.pxd-header-login-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: var(--pixidia-blue) !important;
}

.pxd-site-header .pxd-header-login-pill:hover .pxd-header-login-avatar {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.8);
}

.pxd-header-login-avatar svg {
    width: 16px;
    height: 16px;
    color: var(--pixidia-blue) !important;
    stroke: var(--pixidia-blue) !important;
}

/* --- Focus/active overrides for icon buttons (prevent BuddyX conflicts) --- */
.pxd-site-header button.pxd-header-icon-btn:focus,
.pxd-site-header button.pxd-header-icon-btn:active,
.pxd-site-header button.pxd-header-icon-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: var(--pixidia-blue) !important;
}

/* --- Drawer highlight style (logged-out Connexion) --- */
@media (max-width: 768px) {
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--highlight,
    .pxd-header-drawer-nav-item--highlight {
        color: var(--pixidia-green, #1E9B52) !important;
        -webkit-text-fill-color: var(--pixidia-green, #1E9B52) !important;
        font-weight: 600;
    }
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--highlight svg,
    .pxd-header-drawer-nav-item--highlight svg {
        color: var(--pixidia-green, #1E9B52) !important;
        stroke: var(--pixidia-green, #1E9B52) !important;
    }
}

/* Icon buttons (fav, notif, lang) */
.pxd-header-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: var(--pixidia-blue);
    text-decoration: none;
    font-size: 14px;
}

.pxd-header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pxd-header-fav {
    color: #ff3b5c;
}

/* Notification badge */
.pxd-header-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    background: #ff3b5c;
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 6px rgba(255, 59, 92, 0.4);
    animation: pxd-header-pulse 2s infinite;
}

@keyframes pxd-header-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Language button */
.pxd-header-lang-wrap {
    position: relative;
}

.pxd-header-lang {
    font-size: 14px;
}

.pxd-header-lang svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pxd-header-lang-code {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 7px;
    font-weight: 700;
    background: rgba(1, 40, 39, 0.8);
    color: white;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1;
}

/* Language dropdown */
.pxd-header-lang-dropdown {
    width: 200px;
}

.pxd-header-lang-dropdown li a {
    justify-content: space-between;
}

.pxd-lang-name {
    flex: 1;
}

.pxd-lang-badge {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.pxd-header-lang-dropdown li.is-active {
    background: rgba(255, 255, 255, 0.1);
}

.pxd-header-lang-dropdown li.is-active::before {
    opacity: 1;
}

.pxd-header-lang-dropdown li.is-active .pxd-lang-badge {
    background: var(--pixidia-green);
    color: white;
}

/* --- Profile button --- */
.pxd-header-profile-wrap {
    position: relative;
}

.pxd-header-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 12px;
    height: 34px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: inherit;
    color: var(--pixidia-blue);
}

.pxd-header-profile:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pxd-header-profile-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pxd-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pxd-header-profile:hover .pxd-header-avatar {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.8);
}

.pxd-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pxd-header-profile-status {
    position: absolute;
    bottom: 3px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4AD66D;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* --- Dropdown menu --- */
.pxd-header-dropdown {
    position: fixed;
    width: 240px;
    background: var(--pixidia-blue);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0.25s;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.pxd-header-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0));
}

.pxd-header-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.pxd-header-dropdown ul {
    list-style: none;
    padding: 8px;
    margin: 0;
}

.pxd-header-dropdown li {
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pxd-header-dropdown li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--pixidia-green);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pxd-header-dropdown li:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.pxd-header-dropdown li:hover::before {
    opacity: 1;
}

.pxd-header-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.pxd-dropdown-icon {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pxd-dropdown-icon--green {
    background: rgba(32, 141, 62, 0.3);
}

.pxd-dropdown-icon--red {
    background: rgba(244, 67, 54, 0.3);
}

.pxd-header-dropdown li:hover .pxd-dropdown-icon--green {
    background: rgba(32, 141, 62, 0.7);
}

.pxd-header-dropdown li:hover .pxd-dropdown-icon--red {
    background: rgba(244, 67, 54, 0.7);
}

.pxd-dropdown-logout:hover a {
    color: #f44336;
}

/* --- Hamburger button (hidden on desktop) --- */
.pxd-header-hamburger {
    display: none;
}

/* --- Header Drawer (hidden on desktop) --- */
.pxd-header-drawer-overlay {
    display: none;
}

.pxd-header-drawer {
    display: none;
}

/* --- Header responsive --- */
@media (max-width: 1100px) {
    .pxd-header-btn-text,
    .pxd-header-profile-name,
    .pxd-header-login-text {
        display: none;
    }
    .pxd-header-btn-new {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
    /* Collapse "Nos offres" to circle icon */
    .pxd-site-header .pxd-header-btn-offers {
        width: 34px;
        height: 34px;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center;
    }
    .pxd-header-btn-offers .pxd-header-btn-glow {
        display: none;
    }
    /* Collapse login pill */
    .pxd-site-header .pxd-header-login-pill {
        padding: 3px !important;
    }
    .pxd-header-profile {
        padding: 3px;
    }
}

@media (max-width: 1000px) {
    .pxd-header-search-wrap {
        display: none;
    }
    .pxd-header-actions {
        gap: 8px;
    }
}

/* ============================================
   MOBILE HEADER (<768px)
   ============================================ */

@media (max-width: 768px) {
    .pxd-site-header {
        /* Add safe-area-inset-top so the header doesn't hide under the iPhone notch/Dynamic Island */
        height: calc(var(--pxd-header-height, 52px) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }

    .pxd-header-pill {
        height: 40px;
        padding: 0 6px;
    }

    .pxd-header-logo {
        height: 18px;
    }

    .pxd-header-logo-wrap {
        height: 30px;
        padding: 4px 10px;
        border-radius: 10px;
    }

    /* Hide desktop-only elements on mobile */
    .pxd-header-search-wrap,
    .pxd-header-btn-new,
    .pxd-header-fav,
    .pxd-header-notif,
    .pxd-header-lang-wrap,
    .pxd-header-profile-wrap {
        display: none !important;
    }
    /* Hide logged-out desktop buttons on mobile (doubled selector for specificity) */
    .pxd-site-header.pxd-site-header .pxd-header-btn-offers,
    .pxd-site-header.pxd-site-header .pxd-header-login-pill {
        display: none !important;
    }

    /* Show hamburger — fits inside 40px pill, touch target via ::after */
    .pxd-header-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s ease;
        position: relative;
        flex-shrink: 0;
    }

    /* Invisible 44×44 touch target */
    .pxd-header-hamburger::after {
        content: "";
        position: absolute;
        inset: -6px;
        min-width: 44px;
        min-height: 44px;
    }

    .pxd-header-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: white;
        border-radius: 1px;
        transition: all 0.3s ease;
    }

    .pxd-header-hamburger:active {
        background: rgba(255, 255, 255, 0.5);
    }

    .pxd-header-actions {
        gap: 6px;
        margin-left: auto;
    }

    /* Drawer overlay */
    .pxd-header-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
        opacity: 0;
        transition: opacity 300ms var(--ease-smooth);
    }

    .pxd-header-drawer-overlay.is-open {
        display: block;
        opacity: 1;
    }

    /* Drawer panel */
    .pxd-header-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 9999;
        background: var(--pixidia-blue, #012827);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
        transform: translateX(100%);
        transition: transform 300ms var(--ease-smooth);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pxd-header-drawer.is-open {
        transform: translateX(0);
    }

    .pxd-header-drawer-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pxd-header-drawer-profile {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pxd-header-drawer .pxd-header-avatar {
        width: 36px;
        height: 36px;
    }

    .pxd-header-drawer-profile-info {
        display: flex;
        flex-direction: column;
    }

    .pxd-header-drawer-profile-name {
        font-size: 14px;
        font-weight: 600;
        color: white;
    }

    .pxd-header-drawer-profile-status {
        font-size: 11px;
        color: #4AD66D;
    }

    .pxd-header-drawer-close {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s ease;
        position: relative;
        flex-shrink: 0;
    }

    /* Touch target for drawer close */
    .pxd-header-drawer-close::after {
        content: "";
        position: absolute;
        inset: -4px;
        min-width: 44px;
        min-height: 44px;
    }

    .pxd-header-drawer-close:active {
        background: rgba(255, 255, 255, 0.2);
    }

    .pxd-header-drawer-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 16px;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pxd-header-drawer-search i,
    .pxd-header-drawer-search svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        font-size: 13px;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .pxd-header-drawer-search input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: white;
        font-family: inherit;
        font-size: 13px;
    }

    .pxd-header-drawer-search input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .pxd-header-drawer-nav {
        display: flex;
        flex-direction: column;
        padding: 8px;
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item,
    .pxd-header-drawer .pxd-header-drawer-nav button.pxd-header-drawer-nav-item,
    .pxd-header-drawer-nav-item,
    .pxd-header-drawer nav a,
    .pxd-header-drawer nav button {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 500;
        border-radius: 10px;
        transition: background 0.2s ease;
        min-height: 44px;
        -webkit-text-fill-color: #ffffff !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item:visited,
    .pxd-header-drawer nav a:visited {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav .pxd-header-drawer-nav-item i,
    .pxd-header-drawer .pxd-header-drawer-nav .pxd-header-drawer-nav-item svg,
    .pxd-header-drawer nav a svg,
    .pxd-header-drawer nav button svg {
        width: 18px;
        height: 18px;
        text-align: center;
        font-size: 14px;
        flex-shrink: 0;
        color: #ffffff !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav .pxd-header-drawer-nav-item svg,
    .pxd-header-drawer nav a svg,
    .pxd-header-drawer nav button svg {
        stroke: #ffffff !important;
        fill: none;
    }

    .pxd-header-drawer-nav-item:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--danger,
    .pxd-header-drawer-nav-item--danger {
        color: #f44336 !important;
        -webkit-text-fill-color: #f44336 !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--danger svg,
    .pxd-header-drawer-nav-item--danger svg {
        color: #f44336 !important;
        stroke: #f44336 !important;
    }

    .pxd-header-drawer-badge {
        margin-left: auto;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        background: #ff3b5c;
        color: white;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
    }

    .pxd-header-drawer-lang {
        margin-left: auto;
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 8px;
        border-radius: 4px;
    }

    /* Drawer language toggle button */
    .pxd-header-drawer-lang-item,
    .pxd-header-drawer .pxd-header-drawer-nav button.pxd-header-drawer-lang-item {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        width: 100%;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        -webkit-appearance: none !important;
        appearance: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .pxd-header-drawer-lang-item svg,
    .pxd-header-drawer .pxd-header-drawer-nav button.pxd-header-drawer-lang-item svg {
        fill: #ffffff !important;
        stroke: none !important;
    }

    /* Drawer language sub-list */
    .pxd-header-drawer-lang-list {
        padding: 0 0 0 30px;
    }

    .pxd-header-drawer-lang-option,
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-lang-option {
        padding: 10px 14px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    }

    .pxd-header-drawer-lang-option:active,
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-lang-option:active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08);
    }

    .pxd-header-drawer-lang-option.is-active,
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-lang-option.is-active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-weight: 600;
    }

    .pxd-header-drawer-lang-option.is-active .pxd-header-drawer-lang {
        background: var(--pixidia-green);
        color: #fff;
    }

    .pxd-header-drawer-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 4px 14px;
    }
}

/* ============================================
   5. SIDEBAR NAVIGATION (vertical icon column)
   ============================================ */

.pxd-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #778494;
    cursor: pointer;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.04);
    transition: all 0.35s ease;
    overflow: visible;
}

.pxd-nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.pxd-nav-item svg {
    width: 19px;
    height: 19px;
    position: relative;
    z-index: 1;
}

/* Tooltip */
.pxd-nav-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    letter-spacing: 0.01em;
}

.pxd-nav-label::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #0fa36b;
}

.pxd-nav-item:hover .pxd-nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Hover state */
.pxd-nav-item:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 163, 107, 0.2);
    color: var(--pixidia-blue);
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.12);
}

.pxd-nav-item:hover::before {
    opacity: 0.9;
}

/* Active state */
.pxd-nav-item.active {
    color: white;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(15, 163, 107, 0.3);
}

.pxd-nav-item.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
}

/* Active indicator bar on the right edge */
.pxd-nav-item.active::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(to bottom, #0fa36b, #38c19c);
    box-shadow: 0 0 8px rgba(15, 163, 107, 0.4);
}

/* ============================================
   6. PANNEAU ENRICHIR (auteur only)
   ============================================ */

.pxd-enrichir {
    margin: 16px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(32, 141, 62, 0.04) 0%, rgba(32, 201, 184, 0.04) 100%);
    border: 1px dashed var(--pixidia-green);
}

.pxd-enrichir-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin: 0 0 4px;
}

.pxd-enrichir-header p {
    font-size: 13px;
    color: var(--pixidia-text-muted);
    margin: 0 0 16px;
}

.pxd-enrichir-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pxd-enrichir-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--pixidia-gray-200);
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.pxd-enrichir-btn:hover {
    border-color: var(--pixidia-green);
    box-shadow: var(--shadow-sm);
}

.pxd-enrichir-btn svg {
    width: 18px;
    height: 18px;
    color: var(--pixidia-green);
}

/* ============================================
   MOBILE BOTTOM NAVIGATION BAR (<768px)
   ============================================ */

.pxd-bottom-nav {
    display: none;
}

.pxd-more-drawer-overlay {
    display: none;
}

.pxd-more-drawer {
    display: none;
}

@media (max-width: 768px) {
    .pxd-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Total height = nav content (56px) + safe-area-inset-bottom for iPhone X home indicator */
        height: calc(var(--pxd-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 -4px 20px rgba(15, 163, 107, 0.08);
        z-index: 1000;
        align-items: flex-start;
        justify-content: space-around;
    }

    .pxd-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        /* Fixed height = 56px so safe-area doesn't shrink the touch target */
        height: var(--pxd-bottom-nav-height, 56px);
        min-height: 44px;
        min-width: 44px;
        padding: 6px 4px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 10px;
        font-weight: 500;
        color: var(--pixidia-gray-400, #8a9c9c);
        transition: color var(--duration-fast) var(--ease-smooth);
        position: relative;
    }

    .pxd-bottom-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        transition: transform var(--duration-fast) var(--ease-smooth);
    }

    .pxd-bottom-nav-item span {
        line-height: 1;
        white-space: nowrap;
    }

    .pxd-bottom-nav-item.active {
        color: var(--pixidia-green, #208D3E);
    }

    .pxd-bottom-nav-item.active svg {
        transform: scale(1.1);
    }

    .pxd-bottom-nav-item.active::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--pixidia-green, #208D3E);
    }

    /* "More" drawer overlay */
    .pxd-more-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-smooth);
    }

    .pxd-more-drawer-overlay.is-open {
        display: block;
        opacity: 1;
    }

    /* "More" drawer */
    .pxd-more-drawer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
        /* Extra bottom padding clears the bottom nav bar (safe-area-aware) */
        padding: 8px 16px calc(var(--pxd-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
        transform: translateY(100%);
        transition: transform 300ms var(--ease-smooth);
    }

    .pxd-more-drawer.is-open {
        transform: translateY(0);
    }

    .pxd-more-drawer-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--pixidia-gray-300, #b8c5c5);
        margin: 0 auto 12px;
    }

    .pxd-more-drawer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .pxd-more-drawer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 4px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        color: var(--pixidia-text, #1a2e2e);
        border-radius: var(--radius-md, 12px);
        transition: background var(--duration-fast) var(--ease-smooth);
        min-height: 44px;
    }

    .pxd-more-drawer-item:active {
        background: rgba(0, 0, 0, 0.04);
    }

    .pxd-more-drawer-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md, 12px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pxd-more-drawer-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Adjust content panel bottom padding to clear the bottom nav (including safe-area) */
    .pxd-panel-left {
        padding-bottom: calc(var(--pxd-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* Mobile map toggle — positioned bottom-right (no bottom nav present) */
    .pxd-mobile-map-toggle {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.pxd-map-visible .pxd-mobile-map-toggle {
        bottom: calc(60vh + 12px) !important;
    }
}

/* ============================================
   3. HERO SECTION
   ============================================ */

/* ── Hero banner ── */
.pxd-hero {
    position: relative;
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px;
}

.pxd-hero-image {
    position: absolute;
    inset: 0;
}

.pxd-hero-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pxd-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pxd-hero-image--empty {
    background: linear-gradient(135deg, #0A3D3A 0%, #1E9B52 50%, #0A3D3A 100%);
}

.pxd-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.15) 100%);
}

/* ── Hero content — glass panel at bottom ── */
.pxd-hero-content {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 16px;
    color: var(--pixidia-blue, #012827);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px 16px 0 0;
}

.pxd-hero-badges {
    display: none;
}

.pxd-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--pixidia-blue, #012827);
}

/* Badges — tinted glass pills */
.pxd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.06);
    color: var(--pixidia-blue, #012827);
    transition: all 0.25s ease;
}

.pxd-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.pxd-badge--destination {
    background: rgba(15, 163, 107, 0.12);
    border-color: rgba(15, 163, 107, 0.22);
    color: #0a7a4f;
}

.pxd-badge--destination svg { color: #0fa36b; }

.pxd-badge--duration {
    background: rgba(25, 118, 210, 0.1);
    border-color: rgba(25, 118, 210, 0.2);
    color: #1565c0;
}

.pxd-badge--duration svg { color: #1976d2; }

.pxd-badge--budget {
    background: rgba(212, 160, 0, 0.1);
    border-color: rgba(212, 160, 0, 0.2);
    color: #ad8800;
}

.pxd-badge--budget svg { color: #d4a000; }

.pxd-badge--profile {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.2);
    color: #e65100;
}

.pxd-badge--ai {
    background: rgba(32, 201, 184, 0.1);
    border-color: rgba(32, 201, 184, 0.2);
    color: #00897b;
}

.pxd-badge--type {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(25, 118, 210, 0.10);
    border: 1px solid rgba(25, 118, 210, 0.18);
    color: #1565c0;
}

/* Actions hero — icon buttons row */
.pxd-hero-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* Scroll-fade wrapper for hero actions */
.pxd-hero-actions-wrap {
    position: relative;
}

.pxd-hero-actions-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pxd-hero-actions-sep {
    width: 1px;
    height: 22px;
    background: rgba(1, 40, 39, 0.12);
    margin: 0 4px;
    flex-shrink: 0;
}

.pxd-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(1, 40, 39, 0.08);
    background: rgba(255, 255, 255, 0.6);
    color: var(--pixidia-gray-500, #5a6578);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    position: relative;
}

.pxd-btn-icon:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--pixidia-blue, #012827);
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.12);
    transform: translateY(-1px);
}

.pxd-btn-icon svg,
.pxd-btn-icon i {
    width: 16px;
    height: 16px;
    font-size: 15px;
    line-height: 1;
}

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

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #0fa36b;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}

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

/* Favorite — heart fill red */
.pxd-hero-fav--active {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.pxd-hero-fav--active:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #dc2626;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
}

.pxd-hero-fav--active svg {
    fill: #ef4444;
}

/* Active state (e.g. chat open) */
.pxd-btn-icon--active {
    background: rgba(15, 163, 107, 0.1);
    border-color: rgba(15, 163, 107, 0.25);
    color: #0fa36b;
}

.pxd-btn-icon--active:hover {
    background: rgba(15, 163, 107, 0.18);
}

/* Danger button (delete) */
.pxd-btn-icon--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.1);
}

/* Author + rating */
.pxd-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pxd-hero-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--pixidia-blue, #012827);
}

.pxd-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.3);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12);
}

.pxd-hero-author span {
    font-weight: 500;
}

.pxd-hero-author strong {
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
}

/* --- Badge abonnement (premium/standard) --- */
.pixidia-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
    cursor: pointer;
    position: relative;
}
.pixidia-badge-img {
    max-width: 20px;
    max-height: 20px;
    width: auto;
    height: auto;
    display: inline-block;
}
/* Espacement badge ↔ profils voyageurs */
.pxd-hero-author + .pxd-hero-profiles {
    margin-left: 6px;
}

/* --- Profils voyageurs (hero meta pills) --- */
.pxd-hero-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.pxd-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.18);
    border: 1px solid rgba(255, 152, 0, 0.35);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #e65100;
    white-space: nowrap;
    line-height: 1.3;
}
.pxd-profile-pill-emoji {
    font-size: 13px;
}

.pxd-hero-date {
    color: var(--pixidia-gray-500, #5a6a7a);
    font-size: 12.5px;
    font-weight: 500;
}

.pxd-hero-author-name {
    font-size: 14px;
    font-weight: 500;
}

.pxd-hero-rating {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.18);
    border-radius: 20px;
    padding: 5px 14px 5px 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pxd-hero-rating-score {
    font-size: 18px;
    font-weight: 800;
    color: var(--pixidia-blue, #012827);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pxd-hero-rating-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    filter: drop-shadow(0 1px 3px rgba(255, 193, 7, 0.35));
}

.pxd-hero-rating-stars .pxd-star {
    width: 14px;
    height: 14px;
}

.pxd-hero-rating-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-gray-400, #778494);
    padding-left: 4px;
    border-left: 1px solid rgba(1, 40, 39, 0.1);
    line-height: 1;
}

.pxd-stars {
    color: #ffc107;
    letter-spacing: 2px;
    font-size: 14px;
}

/* --- Hero rating empty state --- */
.pxd-hero-rating--empty {
    background: rgba(1, 40, 39, 0.04);
    border: 1px dashed rgba(1, 40, 39, 0.12);
}

.pxd-hero-rating--empty .pxd-hero-rating-stars {
    filter: none;
    opacity: 0.3;
}

.pxd-hero-rating--empty .pxd-hero-rating-stars .pxd-star {
    color: var(--pixidia-gray-400, #778494);
}

.pxd-hero-rating--empty .pxd-hero-rating-count {
    color: var(--pixidia-gray-400, #778494);
    border-left: none;
    font-size: 11.5px;
    font-weight: 500;
    font-style: italic;
    padding-left: 0;
}

/* ============================================
   HERO — RESPONSIVE
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-hero {
        height: 280px;
    }
    .pxd-hero-title {
        font-size: 1.3rem;
    }
    .pxd-hero-content {
        padding: 12px 20px 14px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-hero {
        height: 260px;
        margin: 8px;
        border-radius: var(--radius-md, 12px);
    }
    .pxd-hero-content {
        padding: 10px 16px 12px;
        background: rgba(255, 255, 255, 0.76);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .pxd-hero-title {
        font-size: 1.05rem;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pxd-hero-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .pxd-hero-author {
        font-size: 13px;
        gap: 6px;
    }
    .pxd-avatar {
        width: 28px;
        height: 28px;
    }
    /* Hide profile badges on mobile — user request */
    .pxd-hero-profiles {
        display: none;
    }
    .pxd-hero-rating {
        padding: 3px 10px 3px 8px;
    }
    .pxd-hero-rating-score {
        font-size: 15px;
    }
    .pxd-hero-rating-stars .pxd-star {
        width: 12px;
        height: 12px;
    }
    .pxd-hero-actions-wrap {
        overflow: hidden;
    }
    .pxd-hero-actions {
        margin-top: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .pxd-hero-actions::-webkit-scrollbar {
        display: none;
    }
    .pxd-btn-icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }
    /* Tooltips hidden on touch */
    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none;
    }
    /* Show scroll-fade on mobile when action row overflows */
    .pxd-hero-actions-wrap::after {
        opacity: 1;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-hero {
        height: 220px;
    }
    .pxd-hero-content {
        padding: 8px 12px 10px;
        background: rgba(255, 255, 255, 0.80);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .pxd-hero-title {
        font-size: 0.95rem;
        margin-bottom: 3px;
        -webkit-line-clamp: 2;
    }
    .pxd-hero-meta {
        gap: 4px;
    }
    .pxd-hero-author-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }
    .pxd-avatar {
        width: 26px;
        height: 26px;
    }
    /* Hide rating score/count at 480px, keep stars only */
    .pxd-hero-rating-score,
    .pxd-hero-rating-count {
        display: none;
    }
    .pxd-hero-rating {
        padding: 3px 6px;
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .pxd-hero-actions {
        gap: 4px;
        margin-top: 4px;
    }
    .pxd-btn-icon {
        width: 34px;
        height: 34px;
    }
    /* Buttons become icon-only circular (text already hidden via pxd-hero-action-btn span) */
    .pxd-hero-actions-wrap::after {
        width: 28px;
    }
}

/* --- Tiny mobile (<=375px) --- */
@media (max-width: 375px) {
    .pxd-hero {
        height: 200px;
        margin: 6px;
    }
    .pxd-hero-content {
        padding: 8px 10px;
    }
    .pxd-hero-title {
        font-size: 0.95rem;
    }
    .pxd-hero-author-name {
        max-width: 100px;
    }
}

/* Scope hover-only styles for desktop */
@media (hover: hover) {
    .pxd-btn-icon:hover {
        background: rgba(255, 255, 255, 0.95);
        color: var(--pixidia-blue, #012827);
        box-shadow: 0 3px 10px rgba(15, 163, 107, 0.12);
        transform: translateY(-1px);
    }
}

/* ============================================
   HERO SSR — Additional classes for server-side rendered hero
   ============================================ */

/* Hero badges (destination + duration pills above title) */
.pxd-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.pxd-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--pixidia-blue, #012827);
}

.pxd-hero-badge svg,
.pxd-hero-badge i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.pxd-hero-badge--destination {
    background: rgba(15, 163, 107, 0.12);
    border-color: rgba(15, 163, 107, 0.22);
    color: #0a7a4f;
}

.pxd-hero-badge--duration {
    background: rgba(25, 118, 210, 0.1);
    border-color: rgba(25, 118, 210, 0.2);
    color: #1565c0;
}

/* Hero image edit button (author only) */
.pxd-hero-image-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.8);
    color: var(--pixidia-blue, #012827);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.pxd-hero-image-edit:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pxd-hero-image-edit svg,
.pxd-hero-image-edit i {
    width: 15px;
    height: 15px;
}

/* Hero author avatar */
.pxd-hero-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.3);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12);
    flex-shrink: 0;
}

/* Hero profile badges */
.pxd-hero-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: rgba(255, 152, 0, 0.18);
    border: 1px solid rgba(255, 152, 0, 0.35);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #e65100;
    white-space: nowrap;
    line-height: 1.3;
}

/* Hero action buttons row */
.pxd-hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(1, 40, 39, 0.1);
    background: rgba(255, 255, 255, 0.75);
    color: var(--pixidia-blue, #012827);
    transition: all 0.2s ease;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pxd-hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.12);
    transform: translateY(-1px);
}

.pxd-hero-action-btn svg,
.pxd-hero-action-btn i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-hero-action-btn--pdf {
    background: rgba(32, 141, 62, 0.08);
    border-color: rgba(32, 141, 62, 0.2);
    color: #208D3E;
}

.pxd-hero-action-btn--invite {
    background: rgba(25, 118, 210, 0.08);
    border-color: rgba(25, 118, 210, 0.2);
    color: #1565c0;
}

.pxd-hero-action-btn--edit {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.2);
    color: #e65100;
}

.pxd-hero-action-btn--delete {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.15);
    color: #e53935;
}

.pxd-hero-action-btn--delete:hover {
    background: rgba(229, 57, 53, 0.12);
    box-shadow: 0 3px 10px rgba(229, 57, 53, 0.12);
}

.pxd-hero-action-btn--leave {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.15);
    color: #e53935;
}

/* Responsive: hide action button text on small mobile */
@media (max-width: 480px) {
    .pxd-hero-action-btn span {
        display: none;
    }

    .pxd-hero-action-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}


/* ============================================
   4. INFO CARD (Glassmorphism - adapted from pixidia-itinerary-infocard)
   ============================================ */

.pxd-glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-sm);
}

/* Infocard variables */
.pxditcrd-container {
    --pxditcrd-main: #0fa36b;
    --pxditcrd-main-hover: #0d8c5a;
    --pxditcrd-main-light: rgba(15, 163, 107, 0.08);
    --pxditcrd-main-medium: rgba(15, 163, 107, 0.15);
    --pxditcrd-dark: #012827;
    --pxditcrd-glass-bg: rgba(255, 255, 255, 0.65);
    --pxditcrd-section-glass: rgba(255, 255, 255, 0.78);
    --pxditcrd-section-glass-hover: rgba(255, 255, 255, 0.92);
    --pxditcrd-border-light: rgba(255, 255, 255, 0.65);
    --pxditcrd-shadow-sm: 0 4px 10px rgba(15, 163, 107, 0.07);
    --pxditcrd-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    --pxditcrd-shadow-hover: 0 15px 40px -5px rgba(15, 163, 107, 0.25), 0 5px 15px rgba(15, 163, 107, 0.1);
    --pxditcrd-badge-bg: rgba(236, 171, 0, 0.12);
    --pxditcrd-badge-color: #ad8800;
    --pxditcrd-label: #778494;
    --pxditcrd-glass-blur: blur(16px);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: cubic-bezier(0.4, 0.2, 0.2, 1);

    width: 100%;
    margin: 0;
    padding: 0 16px 8px;
    font-family: 'Urbanist', 'Inter', sans-serif;
    color: var(--pxditcrd-dark);
}

.pxditcrd-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    background: var(--pxditcrd-glass-bg);
    border-radius: 14px;
    box-shadow: var(--pxditcrd-shadow);
    padding: 0.8rem;
    backdrop-filter: var(--pxditcrd-glass-blur);
    border: 1px solid var(--pxditcrd-border-light);
    transition: box-shadow 0.4s var(--transition-smooth);
    position: relative;
    overflow: visible;
}

.pxditcrd-card:hover {
    box-shadow: var(--pxditcrd-shadow-hover);
}

.pxditcrd-section {
    background: var(--pxditcrd-section-glass);
    border-radius: 10px;
    box-shadow: var(--pxditcrd-shadow-sm);
    border: 1px solid var(--pxditcrd-border-light);
    position: relative;
    z-index: 1;
    transition: all 0.35s var(--transition-bounce);
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pxditcrd-fadeSlideUp 0.5s ease forwards;
    opacity: 0;
}

.pxditcrd-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    z-index: -1;
    opacity: 0.6;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.pxditcrd-section:hover {
    transform: translateY(-3px);
    box-shadow: var(--pxditcrd-shadow-hover);
    background: var(--pxditcrd-section-glass-hover);
}

.pxditcrd-section:hover::before { opacity: 0.9; }

.pxditcrd-section:nth-child(1) { animation-delay: 0.1s; }
.pxditcrd-section:nth-child(2) { animation-delay: 0.15s; }
.pxditcrd-section:nth-child(3) { animation-delay: 0.2s; }
.pxditcrd-section:nth-child(4) { animation-delay: 0.25s; }
.pxditcrd-section:nth-child(5) { animation-delay: 0.3s; }

@keyframes pxditcrd-fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.pxditcrd-section-inner {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Icon */
.pxditcrd-icon-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;
}

.pxditcrd-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--pxditcrd-main) 25%, #38c19c 100%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15,163,107,0.2);
    font-size: 14px;
    color: #fff;
    transition: all 0.3s var(--transition-bounce);
}

.pxditcrd-section:hover .pxditcrd-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15,163,107,0.3);
}

.pxditcrd-vis-public { background: linear-gradient(135deg, var(--pxditcrd-main) 25%, #38c19c 100%); }
.pxditcrd-vis-prive { background: linear-gradient(135deg, #333 25%, #666 100%); }
.pxditcrd-vis-friends { background: linear-gradient(135deg, #f4c542 25%, #fba823 100%); }
.pxditcrd-vis-some { background: linear-gradient(135deg, #5b9df9 25%, #6c67e0 100%); }

/* Content */
.pxditcrd-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
}

.pxditcrd-label {
    color: var(--pxditcrd-label);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.8px;
    opacity: 0.84;
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-label {
    color: var(--pxditcrd-main-hover);
    opacity: 1;
}

/* Location flow */
.pxditcrd-location-flow {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pxditcrd-departure-name,
.pxditcrd-destination-name {
    color: var(--pxditcrd-main);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

.pxditcrd-arrow {
    color: var(--pxditcrd-label);
    font-size: 0.65rem;
}

/* Dates */
.pxditcrd-date-range {
    color: var(--pxditcrd-dark);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--pxditcrd-main-light);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    display: inline-block;
    border: 1px solid var(--pxditcrd-main-medium);
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-date-range {
    background: var(--pxditcrd-main-medium);
    transform: translateY(-2px);
}

.pxditcrd-duration {
    font-size: 0.65rem;
    color: var(--pxditcrd-badge-color);
    background: var(--pxditcrd-badge-bg);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    font-weight: 600;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(236, 171, 0, 0.15);
    transition: all 0.3s ease;
}

.pxditcrd-duration svg { width: 11px; height: 11px; opacity: 0.7; }

.pxditcrd-section:hover .pxditcrd-duration {
    transform: translateY(-2px);
    background: rgba(236, 171, 0, 0.18);
}

/* Budget */
.pxditcrd-budget-total {
    color: var(--pxditcrd-main);
    font-size: 0.85rem;
    font-weight: 800;
    background: var(--pxditcrd-main-light);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--pxditcrd-main-medium);
    transition: all 0.3s ease;
}

.pxditcrd-budget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--pxditcrd-main);
    border-radius: 50%;
    color: white;
    font-size: 0.55rem;
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-budget-total {
    background: var(--pxditcrd-main-medium);
    transform: translateY(-2px);
}

.pxditcrd-section:hover .pxditcrd-budget-icon {
    transform: rotate(15deg) scale(1.1);
}

.pxditcrd-budget-per-day {
    color: var(--pxditcrd-label);
    font-size: 0.65rem;
    margin-top: 0.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.9;
}

.pxditcrd-budget-per-day svg {
    width: 10px;
    height: 10px;
    color: var(--pxditcrd-main);
    opacity: 0.7;
}

.pxditcrd-section:hover .pxditcrd-budget-per-day {
    opacity: 1;
}

/* Visibility */
.pxditcrd-visibility-badge { margin-top: 0.15rem; }

.pxditcrd-visibility-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--pxditcrd-badge-bg);
    color: var(--pxditcrd-badge-color);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(236, 171, 0, 0.15);
    transition: all 0.3s var(--transition-bounce);
}

.pxditcrd-section:hover .pxditcrd-visibility-text {
    transform: translateY(-2px) scale(1.03);
    background: rgba(236, 171, 0, 0.18);
}

/* Travelers */
.pxditcrd-travelers-label {
    color: var(--pxditcrd-label);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.8px;
    margin-bottom: 0.3rem;
    opacity: 0.84;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
}

.pxditcrd-travelers-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pxditcrd-main-light);
    color: var(--pxditcrd-main);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-travelers-label {
    color: var(--pxditcrd-main-hover);
    opacity: 1;
}

.pxditcrd-section:hover .pxditcrd-travelers-number {
    background: var(--pxditcrd-main);
    color: white;
    transform: scale(1.1);
}

.pxditcrd-travelers-wrapper { margin-top: 0.1rem; }

.pxditcrd-travelers-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0.5rem;
}

.pxditcrd-traveler {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 163, 107, 0.1), 0 2px 6px rgba(15, 163, 107, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.5rem;
    overflow: visible;
    position: relative;
    transition: all 0.4s var(--transition-bounce);
    z-index: 1;
    cursor: pointer;
    text-decoration: none;
}

.pxditcrd-traveler:hover {
    box-shadow: 0 0 0 2px var(--pxditcrd-main), 0 4px 12px rgba(15, 163, 107, 0.25);
    z-index: 3;
    transform: scale(1.15) translateY(-3px);
}

.pxditcrd-traveler img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pxditcrd-traveler-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.01em;
}

.pxditcrd-traveler-tooltip::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    background: #38c19c;
}

.pxditcrd-traveler:hover .pxditcrd-traveler-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Allow tooltip to escape section + card overflow */
.pxditcrd-section:has(.pxditcrd-travelers-wrapper) {
    overflow: visible;
}
.pxditcrd-section:has(.pxditcrd-travelers-wrapper)::before {
    border-radius: inherit;
}

/* --- Add traveler "+" button --- */
.pxditcrd-add-traveler {
    background: rgba(15, 163, 107, 0.08);
    border: 2px dashed rgba(15, 163, 107, 0.3);
    box-shadow: none;
}
.pxditcrd-add-traveler:hover {
    background: rgba(15, 163, 107, 0.15);
    border-color: #0fa36b;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.2);
}

/* ============================================
   INFOCARD — RESPONSIVE
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxditcrd-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.7rem;
    }
    .pxditcrd-section-inner {
        padding: 0.6rem;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxditcrd-container {
        padding: 0 10px 6px;
    }
    .pxditcrd-card {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        padding: 0.55rem;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    /* First section (Destination) spans full width */
    .pxditcrd-section:nth-child(1) {
        grid-column: 1 / -1;
    }
    .pxditcrd-section-inner {
        padding: 0.55rem;
        gap: 0.3rem;
    }
    .pxditcrd-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: 12px;
    }
    .pxditcrd-label {
        font-size: 0.55rem;
    }
    .pxditcrd-departure-name,
    .pxditcrd-destination-name {
        font-size: 0.78rem;
    }
    .pxditcrd-date-range {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }
    .pxditcrd-duration {
        font-size: 0.6rem;
    }
    .pxditcrd-budget-total {
        font-size: 0.78rem;
    }
    .pxditcrd-budget-per-day {
        font-size: 0.6rem;
    }
    .pxditcrd-travelers-label {
        font-size: 0.55rem;
    }
    .pxditcrd-traveler {
        width: 26px;
        height: 26px;
    }
    /* Disable hover effects on touch */
    .pxditcrd-section:hover {
        transform: none;
    }
}

/* --- Small mobile (<=480px): Horizontal scroll chips --- */
@media (max-width: 480px) {
    .pxditcrd-container {
        padding: 0 8px 4px;
        /* Fade indicator wrapper */
        position: relative;
    }
    /* Gradient fade on right edge to indicate more chips */
    .pxditcrd-container::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 0;
        bottom: 4px;
        width: 36px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
        pointer-events: none;
        border-radius: 0 12px 12px 0;
        z-index: 2;
    }
    .pxditcrd-card {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0.4rem;
        padding: 0.5rem;
        padding-right: 2rem; /* extra space for fade */
        border-radius: 12px;
    }
    .pxditcrd-card::-webkit-scrollbar {
        display: none;
    }
    .pxditcrd-section {
        flex: 0 0 auto;
        width: 120px;
        min-width: 110px;
        scroll-snap-align: start;
        border-radius: 10px;
    }
    .pxditcrd-section:nth-child(1) {
        grid-column: auto;
        width: 130px;
    }
    .pxditcrd-section-inner {
        padding: 0.5rem;
        gap: 0.25rem;
        align-items: center;
        text-align: center;
    }
    .pxditcrd-icon-wrapper {
        justify-content: center;
    }
    /* Hide labels on chip mode — show icon + key value only */
    .pxditcrd-label {
        display: none;
    }
    .pxditcrd-content {
        align-items: center;
    }
    .pxditcrd-location-flow {
        flex-direction: column;
        gap: 0.15rem;
        align-items: center;
    }
    .pxditcrd-departure-name,
    .pxditcrd-destination-name {
        font-size: 0.72rem;
    }
    .pxditcrd-arrow {
        transform: rotate(90deg);
    }
    .pxditcrd-date-range {
        font-size: 0.68rem;
        padding: 0.2rem 0.35rem;
    }
    .pxditcrd-duration {
        font-size: 0.58rem;
        margin-top: 0.15rem;
    }
    .pxditcrd-budget-total {
        font-size: 0.72rem;
        padding: 0.2rem 0.4rem;
    }
    .pxditcrd-budget-per-day {
        font-size: 0.55rem;
    }
    .pxditcrd-visibility-text {
        font-size: 0.58rem;
        padding: 0.2rem 0.4rem;
    }
    .pxditcrd-travelers-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pxditcrd-travelers-list {
        margin-left: 0;
    }
    .pxditcrd-traveler {
        width: 24px;
        height: 24px;
        margin-left: -0.35rem;
    }
    /* SSR flat items: scroll-snap-align + chip size */
    .pxditcrd-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-width: 130px;
        max-width: 160px;
    }
}

/* --- Tiny mobile (<=375px) --- */
@media (max-width: 375px) {
    .pxditcrd-section {
        width: 105px;
        min-width: 100px;
    }
    .pxditcrd-section:nth-child(1) {
        width: 115px;
    }
}

/* Scope hover effects for desktop only */
@media (hover: hover) {
    .pxditcrd-section:hover {
        transform: translateY(-3px);
        box-shadow: var(--pxditcrd-shadow-hover);
        background: var(--pxditcrd-section-glass-hover);
    }
}

/* ============================================
   INFOCARD SSR — New flat item structure
   Used in production infocard.php SSR rendering
   ============================================ */

.pxditcrd-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0.7rem;
    background: var(--pxditcrd-section-glass, rgba(255, 255, 255, 0.78));
    border-radius: 10px;
    box-shadow: var(--pxditcrd-shadow-sm, 0 4px 10px rgba(15, 163, 107, 0.07));
    border: 1px solid var(--pxditcrd-border-light, rgba(255, 255, 255, 0.65));
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.pxditcrd-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--pxditcrd-shadow-hover, 0 15px 40px -5px rgba(15, 163, 107, 0.25), 0 5px 15px rgba(15, 163, 107, 0.1));
    background: var(--pxditcrd-section-glass-hover, rgba(255, 255, 255, 0.92));
}

.pxditcrd-item .pxditcrd-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--pxditcrd-main, #0fa36b) 25%, #38c19c 100%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15,163,107,0.2);
    font-size: 14px;
    color: #fff;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxditcrd-item:hover .pxditcrd-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15,163,107,0.3);
}

.pxditcrd-item .pxditcrd-icon svg,
.pxditcrd-item .pxditcrd-icon i {
    width: 15px;
    height: 15px;
}

.pxditcrd-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pxditcrd-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pxditcrd-dark, #012827);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxditcrd-sub {
    font-size: 0.65rem;
    color: var(--pxditcrd-label, #778494);
    font-weight: 500;
}

/* Avatars row (participants) */
.pxditcrd-avatars {
    display: flex;
    align-items: center;
    gap: -4px;
    margin-top: 2px;
}

.pxditcrd-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    margin-left: -4px;
    box-shadow: 0 0 0 1px rgba(15, 163, 107, 0.1);
}

.pxditcrd-avatar:first-child {
    margin-left: 0;
}

.pxditcrd-avatar--more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pxditcrd-main-light, rgba(15, 163, 107, 0.08));
    color: var(--pxditcrd-main, #0fa36b);
    font-size: 9px;
    font-weight: 700;
    border: 2px solid white;
    margin-left: -4px;
}

/* ============================================
   INFOCARD SSR — RESPONSIVE
   ============================================ */

@media (max-width: 1200px) and (min-width: 769px) {
    .pxditcrd-item {
        padding: 0.6rem;
        gap: 7px;
    }
}

@media (max-width: 768px) {
    .pxditcrd-item {
        padding: 0.5rem;
        gap: 6px;
    }

    .pxditcrd-item .pxditcrd-icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 12px;
    }

    .pxditcrd-value {
        font-size: 0.72rem;
    }

    .pxditcrd-item:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .pxditcrd-item .pxditcrd-icon {
        width: 24px;
        height: 24px;
    }

    .pxditcrd-value {
        font-size: 0.68rem;
    }
}

/* Disable hover effects on touch */
@media (hover: none) {
    .pxditcrd-item:hover {
        transform: none;
        box-shadow: var(--pxditcrd-shadow-sm);
        background: var(--pxditcrd-section-glass);
    }
}


/* ============================================
   7. PROGRAMME — CALENDRIER & DATE PICKER
   ============================================ */

/* --- Programme glass variables --- */
.pxd-section--programme {
    --prog-glass-bg: rgba(255, 255, 255, 0.65);
    --prog-section-glass: rgba(255, 255, 255, 0.78);
    --prog-section-glass-hover: rgba(255, 255, 255, 0.92);
    --prog-border: rgba(255, 255, 255, 0.65);
    --prog-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.10), 0 2px 8px rgba(15, 163, 107, 0.05);
    --prog-shadow-hover: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    --prog-blur: blur(16px);
}

/* Section Programme (pas d'accordéon) */
.pxd-section--programme > .pxd-section-header {
    display: none;
}

/* --- Glass wrapper for programme content --- */
.pxd-programme-glass {
    margin: 0 12px;
    padding: 14px;
    background: var(--prog-glass-bg);
    backdrop-filter: var(--prog-blur);
    -webkit-backdrop-filter: var(--prog-blur);
    border: 1px solid var(--prog-border);
    border-radius: 14px;
    box-shadow: var(--prog-shadow);
    transition: box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

.pxd-programme-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-programme-glass > * {
    position: relative;
    z-index: 1;
}

.pxd-programme-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 12px;
    flex-wrap: wrap;
}

.pxd-programme-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pxd-programme-header-left h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

/* --- Date Picker Button --- */
.pxd-date-picker {
    position: relative;
}

.pxd-date-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15, 163, 107, 0.08);
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-blue);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pxd-date-picker-btn:hover {
    background: rgba(15, 163, 107, 0.15);
    border-color: rgba(15, 163, 107, 0.3);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12);
}

.pxd-date-picker-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-date-picker-chevron {
    transition: transform 0.25s ease;
}

.pxd-date-picker.open .pxd-date-picker-chevron {
    transform: rotate(180deg);
}

/* --- Calendar Popup (glassmorphism, portaled to body) --- */
.pxd-calendar-popup {
    position: fixed;
    width: 320px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-lg);
    box-shadow:
        0 16px 48px rgba(1, 40, 39, 0.18),
        0 0 0 1px rgba(1, 40, 39, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 10000;
    display: none;
}

.pxd-calendar-popup.show {
    display: block;
    animation: pxd-dropIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pxd-dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Calendar header (nav arrows + month title) */
.pxd-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pxd-calendar-nav {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    background: var(--pixidia-gray-50, #f5f7f7);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    color: var(--pixidia-blue);
}

.pxd-calendar-nav:hover {
    background: rgba(32, 201, 184, 0.12);
    color: var(--pixidia-turquoise);
}

.pxd-calendar-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pxd-calendar-nav svg {
    width: 16px;
    height: 16px;
}

.pxd-calendar-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--pixidia-blue);
}

/* Weekday headers */
.pxd-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.pxd-calendar-weekdays span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pixidia-gray-400, #8a9c9c);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
}

/* Days grid */
.pxd-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.pxd-cal-day {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    background: transparent;
    color: var(--pixidia-text);
    border: none;
    font-family: inherit;
}

.pxd-cal-day:hover:not(:disabled):not(.selected) {
    background: var(--pixidia-gray-100, #eef2f2);
}

/* Date dans la plage du séjour (sélectionnable) */
.pxd-cal-day.in-range {
    background: rgba(32, 201, 184, 0.08);
    font-weight: 600;
}

.pxd-cal-day.in-range:hover:not(.selected) {
    background: rgba(32, 201, 184, 0.18);
}

/* Date sélectionnée */
.pxd-cal-day.selected {
    background: linear-gradient(135deg, #208D3E, #20c9b8);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(32, 141, 62, 0.3);
}

/* Début et fin de plage : coins arrondis accentués */
.pxd-cal-day.range-start {
    border-radius: 10px 4px 4px 10px;
}

.pxd-cal-day.range-end {
    border-radius: 4px 10px 10px 4px;
}

/* Jours du mois précédent/suivant */
.pxd-cal-day.other-month {
    color: var(--pixidia-gray-200, #dce4e4);
}

/* Date hors séjour (non-sélectionnable) */
.pxd-cal-day:disabled {
    color: var(--pixidia-gray-300, #b8c5c5);
    cursor: default;
}

.pxd-cal-day:disabled:hover {
    background: transparent;
}

/* --- Day Info Bar (glass section like pxditcrd) --- */
.pxd-programme-day-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 16px;
    background: var(--prog-section-glass);
    border-radius: 10px;
    border: 1px solid var(--prog-border);
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.pxd-programme-day-info::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.pxd-programme-day-info > * {
    position: relative;
    z-index: 1;
}

.pxd-programme-day-info:hover {
    background: var(--prog-section-glass-hover);
    box-shadow: var(--prog-shadow-hover);
}

.pxd-day-info-badge {
    padding: 5px 12px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.25);
}

.pxd-day-info-city {
    font-weight: 700;
    color: #0fa36b;
    font-size: 14px;
}

.pxd-day-info-date {
    color: #778494;
    font-size: 12.5px;
    margin-left: auto;
    white-space: nowrap;
}

/* --- Bouton Vue Globale --- */
.pxd-global-view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-left: auto;
    background: var(--prog-section-glass);
    border: 1px solid var(--prog-border);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-gray-500, #5d7070);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.05);
}

.pxd-global-view-btn svg {
    width: 15px;
    height: 15px;
}

.pxd-global-view-btn:hover {
    background: var(--prog-section-glass-hover);
    border-color: rgba(15, 163, 107, 0.25);
    color: var(--pixidia-blue);
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
}

.pxd-global-view-btn.active {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

/* ============================================
   PROGRAMME/CALENDAR — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-programme-glass {
        margin: 0 8px;
        padding: 10px;
        border-radius: 12px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .pxd-programme-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 2px 2px 10px;
    }
    .pxd-programme-header-left h2 {
        font-size: 1rem;
    }
    .pxd-date-picker-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
    }
    .pxd-global-view-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        order: 3;
    }

    /* Calendar popup becomes bottom-sheet */
    .pxd-calendar-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important; /* override JS positioning on mobile */
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 24px 16px 20px;
        box-shadow:
            0 -8px 32px rgba(1, 40, 39, 0.18),
            0 0 0 1px rgba(1, 40, 39, 0.05);
        max-height: 72vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Drag handle */
    .pxd-calendar-popup::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(1, 40, 39, 0.18);
    }
    /* Backdrop behind bottom-sheet */
    .pxd-calendar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(1, 40, 39, 0.35);
        z-index: 9999;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .pxd-calendar-backdrop.show {
        display: block;
        animation: pxd-backdropIn 0.25s ease;
    }
    @keyframes pxd-backdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .pxd-calendar-popup.show {
        animation: pxd-slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10001;
    }

    /* Day info bar */
    .pxd-programme-day-info {
        gap: 8px;
        padding: 10px 12px;
    }
    .pxd-day-info-badge {
        font-size: 10.5px;
        padding: 4px 10px;
    }
    .pxd-day-info-city {
        font-size: 13px;
    }
    .pxd-day-info-date {
        font-size: 11.5px;
    }
}

@keyframes pxd-slideUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-programme-glass {
        margin: 0 6px;
        padding: 8px;
    }
    .pxd-programme-header-left h2 {
        font-size: 0.95rem;
    }

    /* Day info stacks vertically */
    .pxd-programme-day-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 12px;
    }
    .pxd-day-info-date {
        margin-left: 0;
    }
    .pxd-day-info-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    .pxd-day-info-city {
        font-size: 12.5px;
    }

    /* Calendar popup compact */
    .pxd-calendar-popup {
        padding: 16px 12px;
    }
    .pxd-cal-day {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        border-radius: 8px;
    }
    .pxd-calendar-nav {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   8. TIMELINE VERTICALE
   ============================================ */

/* --- Timeline container --- */
.pxd-timeline {
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Timeline item (row) --- */
.pxd-tl-item {
    display: flex;
    gap: 0;
    cursor: pointer;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
}

@keyframes pxd-tl-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Gutter: time + node + vertical line --- */
.pxd-tl-gutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    flex-shrink: 0;
    position: relative;
}

.pxd-tl-time {
    font-size: 11.5px;
    font-weight: 700;
    color: #778494;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

/* Circular icon node */
.pxd-tl-node {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tl-color) 25%, color-mix(in srgb, var(--tl-color) 70%, #38c19c) 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 2px 8px color-mix(in srgb, var(--tl-color) 30%, transparent);
    transition: all 0.35s ease;
}

.pxd-tl-item:hover .pxd-tl-node {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 4px 14px color-mix(in srgb, var(--tl-color) 40%, transparent);
}

.pxd-tl-node svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

/* Vertical connector line */
.pxd-tl-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--tl-color) 40%, transparent), color-mix(in srgb, var(--tl-color) 10%, transparent));
    border-radius: 1px;
    min-height: 12px;
}

.pxd-tl-item--last .pxd-tl-line {
    display: none;
}

/* --- Card (right side, glass section) --- */
.pxd-tl-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    margin: 0 0 0 0;
    background: var(--prog-section-glass);
    border: 1px solid var(--prog-border);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.pxd-tl-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-tl-item:hover .pxd-tl-card {
    background: var(--prog-section-glass-hover);
    box-shadow: var(--prog-shadow-hover);
    border-color: rgba(15, 163, 107, 0.2);
}

.pxd-tl-item:hover .pxd-tl-card::before {
    opacity: 0.9;
}

.pxd-tl-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-blue);
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.pxd-tl-card-cat {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

/* --- Empty state --- */
.pxd-timeline-empty {
    text-align: center;
    padding: 32px 16px;
    color: #778494;
    font-size: 13px;
}

/* --- Timeline card subtitle --- */
.pxd-tl-card-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #778494;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* --- Timeline muted variant (night / in-use) --- */
.pxd-tl-item--muted .pxd-tl-node {
    width: 24px;
    height: 24px;
    opacity: 0.55;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.pxd-tl-item--muted .pxd-tl-node svg {
    width: 11px;
    height: 11px;
}
.pxd-tl-item--muted .pxd-tl-card {
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.25);
    border-style: dashed;
}
.pxd-tl-item--muted .pxd-tl-time {
    opacity: 0.5;
}

/* --- Timeline layover variant --- */
.pxd-tl-item--layover .pxd-tl-node {
    background: linear-gradient(135deg, #ff9800 25%, #ffb74d 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 2px 8px rgba(255, 152, 0, 0.25);
}
.pxd-tl-item--layover .pxd-tl-card {
    border-left: 3px dashed rgba(255, 152, 0, 0.3);
}

/* ============================================
   TIMELINE — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-tl-gutter {
        width: 48px;
    }
    .pxd-tl-node {
        width: 24px;
        height: 24px;
    }
    .pxd-tl-node svg {
        width: 12px;
        height: 12px;
    }
    /* Hide time label and move it inside the card as a subtle tag */
    .pxd-tl-time {
        display: none;
    }
    .pxd-tl-card {
        padding: 8px 12px;
    }
    .pxd-tl-card::after {
        content: attr(data-time);
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        color: #778494;
        background: rgba(10, 61, 58, 0.04);
        padding: 2px 6px;
        border-radius: 4px;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
    }
    .pxd-tl-card-title {
        font-size: 14px;
    }
    .pxd-tl-card-cat {
        font-size: 10px;
    }
    .pxd-tl-card-subtitle {
        font-size: 11px;
    }
    .pxd-tl-item--muted .pxd-tl-node {
        width: 20px;
        height: 20px;
    }
    .pxd-tl-item--muted .pxd-tl-node svg {
        width: 9px;
        height: 9px;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-tl-gutter {
        width: 40px;
    }
    .pxd-tl-card {
        padding: 7px 10px;
    }
    .pxd-tl-node {
        width: 22px;
        height: 22px;
    }
    .pxd-tl-node svg {
        width: 11px;
        height: 11px;
    }
    .pxd-tl-card-title {
        font-size: 13px;
    }
}

/* ============================================
   9. SECTION HEADERS
   ============================================ */

.pxd-section {
    padding: 24px 16px 16px;
    transition: padding var(--duration-normal) var(--ease-smooth),
                background 0.4s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                margin 0.3s ease,
                transform 0.25s ease;
}

/* Glass container — all content sections except Programme */
.pxd-section:not(.pxd-section--programme) {
    margin: 0 8px 10px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(1, 40, 39, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pxd-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
    transition: margin-bottom var(--duration-normal) var(--ease-smooth);
}

.pxd-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pxd-section-icon--logement {
    background: var(--pxd-color-logement);
}

.pxd-section-icon--transport {
    background: var(--pxd-color-transport);
}

.pxd-section-icon--restauration {
    background: var(--pxd-color-restauration);
}

.pxd-section-icon--activite {
    background: var(--pxd-color-activite);
}

.pxd-section-icon--location {
    background: var(--pxd-color-location);
}

.pxd-section-icon--budget {
    background: var(--pixidia-green);
}

.pxd-section-icon--reservation {
    background: var(--pixidia-turquoise);
}

.pxd-section-icon--avis {
    background: #ffc107;
}

.pxd-section-icon--comments {
    background: linear-gradient(135deg, #0A3D3A 25%, #0fa36b 100%);
}

.pxd-section-icon svg {
    width: 20px;
    height: 20px;
}

.pxd-section-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pixidia-blue);
    flex: 1;
    margin: 0;
}

.pxd-section-count {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text-muted);
}

.pxd-section-header-sub {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pixidia-text-muted);
    white-space: nowrap;
}

.pxd-section-header-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    margin-left: auto;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
    flex-shrink: 0;
}

.pxd-section-header-btn svg {
    width: 14px;
    height: 14px;
}

.pxd-section-header-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

/* --- Accordion behavior --- */

.pxd-section--collapsed {
    padding: 10px 16px 10px;
    margin-bottom: 6px;
}

.pxd-section--collapsed:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 20px rgba(1, 40, 39, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.pxd-section--collapsed .pxd-section-header {
    margin-bottom: 0;
}

.pxd-section--collapsed .pxd-section-header-btn {
    display: none;
}

.pxd-section-header:hover .pxd-section-chevron {
    color: var(--pixidia-green);
}

.pxd-section-chevron {
    width: 20px;
    height: 20px;
    color: var(--pixidia-gray-400);
    transition: transform var(--duration-normal) var(--ease-smooth),
                color var(--duration-fast);
    flex-shrink: 0;
}

.pxd-section--collapsed .pxd-section-chevron {
    transform: rotate(-90deg);
}

.pxd-section-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-smooth);
}

.pxd-section--collapsed .pxd-section-body {
    grid-template-rows: 0fr;
}

.pxd-section-body-inner {
    overflow: hidden;
    min-height: 0;
}
/* Allow tooltips to overflow when section is expanded */
.pxd-section:not(.pxd-section--collapsed) .pxd-section-body-inner {
    overflow: visible;
}

/* ============================================
   COMMENT CARDS
   ============================================ */

.pxd-comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Card --- */
.pxd-cc {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px 20px 20px 24px;
    box-shadow:
        0 4px 16px rgba(1, 40, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease;
    opacity: 0;
    animation: pxd-ccSlideIn 0.5s ease forwards;
    animation-delay: calc(var(--card-index, 0) * 0.1s + 0.15s);
}

@keyframes pxd-ccSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pxd-cc:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 28px rgba(1, 40, 39, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Left accent bar */
.pxd-cc-accent {
    position: absolute;
    top: 12px;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #0fa36b, #38c19c);
    border-radius: 0 4px 4px 0;
    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pxd-cc:hover .pxd-cc-accent {
    height: calc(100% - 24px);
}

/* --- Header --- */
.pxd-cc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pxd-cc-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
.pxd-cc:hover .pxd-cc-avatar img {
    transform: scale(1.05);
}

.pxd-cc-meta {
    flex: 1;
    min-width: 0;
}

.pxd-cc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue);
    line-height: 1.3;
}

.pxd-cc-date {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pxd-cc-date::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0fa36b;
    opacity: 0.5;
}

.pxd-cc-updated {
    font-size: 11px;
    color: var(--pixidia-text-muted);
    font-style: italic;
    margin-top: 1px;
}

/* --- Actions (edit/delete) --- */
.pxd-cc-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pxd-cc:hover .pxd-cc-actions {
    opacity: 1;
}

.pxd-cc-action-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.pxd-cc-action-btn svg {
    width: 14px;
    height: 14px;
}

.pxd-cc-edit {
    background: rgba(15, 163, 107, 0.08);
    color: #0fa36b;
}
.pxd-cc-edit:hover {
    background: rgba(15, 163, 107, 0.18);
    transform: translateY(-1px);
}

.pxd-cc-delete {
    background: rgba(220, 53, 69, 0.06);
    color: #dc3545;
}
.pxd-cc-delete:hover {
    background: rgba(220, 53, 69, 0.15);
    transform: translateY(-1px);
}

/* --- Content & truncation --- */
.pxd-cc-body {
    position: relative;
}

.pxd-cc-content {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Truncation: clamped state */
.pxd-cc-content--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Expanded state */
.pxd-cc-content--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Toggle button */
.pxd-cc-toggle-btn {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: #0fa36b;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}
.pxd-cc-toggle-btn:hover {
    color: #0A3D3A;
}
.pxd-cc-toggle-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

/* ============================================
   SECTION HEADERS — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-section {
        padding: 16px 12px 12px;
    }
    .pxd-section:not(.pxd-section--programme) {
        margin: 0 6px 8px;
        border-radius: 14px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .pxd-section-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .pxd-section-icon svg {
        width: 16px;
        height: 16px;
    }
    .pxd-section-header {
        gap: 10px;
        margin-bottom: 12px;
    }
    .pxd-section-header h2 {
        font-size: 1rem;
    }
    /* Hide count badge on mobile */
    .pxd-section-count {
        display: none;
    }
    .pxd-section-header-sub {
        display: none;
    }
    /* Add button icon-only mode — 44×44 touch target via padding */
    .pxd-section-header-btn {
        padding: 10px;
        border-radius: 8px;
        width: 36px;
        height: 36px;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: content-box;
    }
    .pxd-section-header-btn span {
        display: none;
    }
    .pxd-section-header-btn svg {
        width: 16px;
        height: 16px;
    }
    .pxd-section-chevron {
        width: 24px;
        height: 24px;
        padding: 10px;
        box-sizing: content-box;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .pxd-section--collapsed {
        padding: 8px 12px;
        margin-bottom: 4px;
    }

    /* Comment cards mobile */
    .pxd-cc {
        padding: 16px 16px 16px 20px;
        border-radius: 14px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .pxd-cc-header {
        gap: 10px;
        margin-bottom: 10px;
    }
    .pxd-cc-avatar img {
        width: 36px;
        height: 36px;
    }
    .pxd-cc-name {
        font-size: 13px;
    }
    .pxd-cc-content {
        font-size: 14px;
        line-height: 1.6;
    }
    /* Make comment actions always visible on mobile */
    .pxd-cc-actions {
        opacity: 1;
    }
    .pxd-cc-action-btn {
        width: 34px;
        height: 34px;
        padding: 5px;
        box-sizing: content-box;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-section {
        padding: 12px 10px 10px;
    }
    .pxd-section-header h2 {
        font-size: 0.95rem;
    }
    .pxd-section-icon {
        width: 30px;
        height: 30px;
    }
    .pxd-section--collapsed {
        padding: 8px 10px;
    }
    .pxd-cc {
        padding: 14px 14px 14px 18px;
    }
    .pxd-cc-avatar img {
        width: 32px;
        height: 32px;
    }
    .pxd-cc-content {
        font-size: 13px;
    }
    .pxd-cc-content--clamped {
        -webkit-line-clamp: 3;
    }
}

/* Scope hover effects */
@media (hover: hover) {
    .pxd-section--collapsed:hover {
        background: rgba(255, 255, 255, 0.55);
        box-shadow: 0 4px 20px rgba(1, 40, 39, 0.07),
                    inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
    }
    .pxd-cc:hover {
        transform: translateY(-3px);
    }
    .pxd-cc:hover .pxd-cc-accent {
        height: calc(100% - 24px);
    }
}

/* ============================================
   10. CARTES CONTENU (BASE COMMUNE)
   ============================================ */

.pxd-card {
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-left: 4px solid transparent;
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: 0 4px 16px rgba(1, 40, 39, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease;
}

.pxd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(1, 40, 39, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Gradient overlay */
.pxd-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
    opacity: 0.5;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pxd-card:hover::before { opacity: 0.9; }

.pxd-card--hidden {
    display: none;
}

.pxd-card--highlighted {
    box-shadow: 0 0 0 3px var(--pixidia-green), 0 8px 28px rgba(1,40,39,0.12) !important;
}

/* Bordures CPT */
.pxd-card[data-item-type="logement"] {
    border-left-color: var(--pxd-color-logement);
}

.pxd-card[data-item-type="transport"] {
    border-left-color: var(--pxd-color-transport);
}

.pxd-card[data-item-type="restauration"] {
    border-left-color: var(--pxd-color-restauration);
}

.pxd-card[data-item-type="activite"] {
    border-left-color: var(--pxd-color-activite);
}

.pxd-card[data-item-type="location"] {
    border-left-color: var(--pxd-color-location);
}

/* --- Card Actions / Locate button --- */
.pxd-card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
}

.pxd-card-locate {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.25s ease;
}
.pxd-card:hover .pxd-card-locate { opacity: 1; }
.pxd-card-locate:hover {
    background: rgba(32, 141, 62, 0.08);
    border-color: var(--pixidia-green);
    transform: scale(1.1);
}
.pxd-card-locate:active {
    transform: scale(0.92);
    background: rgba(32, 141, 62, 0.15);
    border-color: var(--pixidia-green);
}
.pxd-card-locate:focus-visible {
    outline: 2px solid var(--pixidia-green);
    outline-offset: 2px;
    opacity: 1;
}
.pxd-card-locate::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}
.pxd-card-locate img {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* --- Card Header --- */
.pxd-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 36px;
    position: relative;
    z-index: 3;
    overflow: visible;
}

/* Category badge (Hotel, Location...) */
.pxd-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10),
                inset 0 1px 0 rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pxd-card-cat svg, .pxd-card-cat i { width: 12px; height: 12px; opacity: 0.9; }

/* Day badge */
.pxd-card-day {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(10, 61, 58, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(10, 61, 58, 0.08);
    color: var(--pixidia-blue);
    letter-spacing: 0.5px;
}

/* Title */
.pxd-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(10, 61, 58, 0.06);
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

/* Permalink link on card title */
.pxd-card-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pxd-card-link:hover {
    color: var(--pixidia-green, #1E9B52);
    text-decoration: underline;
    text-decoration-color: rgba(30, 155, 82, 0.4);
    text-underline-offset: 2px;
}

/* --- Details list --- */
.pxd-card-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
    flex: 1;
    background: rgba(10, 61, 58, 0.02);
    border-radius: 10px;
    padding: 4px 0;
    border: 1px solid rgba(10, 61, 58, 0.04);
}

.pxd-card-detail {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--pixidia-text-muted);
    line-height: 1.4;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.pxd-card-detail:hover {
    background: rgba(10, 61, 58, 0.03);
}
.pxd-card-detail svg, .pxd-card-detail i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--pixidia-gray-400);
    opacity: 0.7;
}

/* Cost line (highlighted) */
.pxd-card-cost {
    font-weight: 700;
    color: var(--pixidia-green);
    margin-top: 2px;
    padding-top: 7px;
    border-top: 1px dashed rgba(32, 141, 62, 0.15);
}
.pxd-card-cost svg, .pxd-card-cost i { color: var(--pixidia-green); opacity: 1; }



.pxd-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pixidia-green);
    white-space: nowrap;
}

.pxd-card-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    line-height: 1;
}
.pxd-card-type-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pxd-card-type-badge--logement {
    background: var(--pxd-color-logement);
}

.pxd-card-type-badge--transport {
    background: var(--pxd-color-transport);
}

.pxd-card-type-badge--restauration {
    background: var(--pxd-color-restauration);
}

.pxd-card-type-badge--activite {
    background: var(--pxd-color-activite);
}

.pxd-card-type-badge--location {
    background: var(--pxd-color-location);
}

.pxd-card-address,
.pxd-card-date,
.pxd-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pixidia-text-muted);
    margin-top: 6px;
}

.pxd-card-address svg,
.pxd-card-date svg,
.pxd-card-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pxd-card-comment {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--pixidia-gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--pixidia-green);
    font-size: 13px;
    font-style: italic;
    color: var(--pixidia-text-muted);
}

/* --- Reservation status icons --- */
.pxd-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 10;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pxd-status-icon:hover {
    transform: scale(1.12);
}
.pxd-status-icon svg { width: 14px; height: 14px; stroke-width: 2.5; }

.pxd-status-icon--reserved {
    background: rgba(56, 142, 60, 0.12);
    border: 1px solid rgba(56, 142, 60, 0.2);
    color: #388e3c;
    box-shadow: 0 2px 8px rgba(56, 142, 60, 0.12);
}
.pxd-status-icon--reserved:hover {
    box-shadow: 0 4px 14px rgba(56, 142, 60, 0.2);
}
.pxd-status-icon--pending {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}
.pxd-status-icon--pending:hover {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}
.pxd-status-icon--non-reservable {
    background: rgba(158, 158, 158, 0.10);
    border: 1px solid rgba(158, 158, 158, 0.15);
    color: var(--pixidia-gray-400);
    box-shadow: 0 2px 8px rgba(158, 158, 158, 0.08);
}

/* ============================================
   BASE CARDS — RESPONSIVE
   ============================================ */

/* Scope hover-only styles for desktop */
@media (hover: hover) {
    .pxd-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(1, 40, 39, 0.10),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .pxd-card:hover::before { opacity: 0.9; }
    .pxd-card:hover .pxd-card-locate { opacity: 1; }
}

/* On touch devices, always show locate button */
@media (hover: none) {
    .pxd-card-locate {
        opacity: 1;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-card {
        padding: 14px 14px 12px;
        border-radius: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(1, 40, 39, 0.05),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .pxd-card-header {
        padding-right: 40px;
    }
    /* Locate button always visible on mobile — 44×44 touch target via padding */
    .pxd-card-locate {
        opacity: 1;
        width: 36px;
        height: 36px;
        padding: 4px;
        box-sizing: content-box;
    }
    .pxd-card-title {
        font-size: 14px;
    }
    .pxd-card-detail {
        font-size: 13px;
        padding: 5px 10px;
    }
    .pxd-card-cat {
        font-size: 10.5px;
        padding: 4px 9px;
    }
    .pxd-card-day {
        font-size: 10px;
    }
    .pxd-card-comment {
        font-size: 12.5px;
        padding: 8px 10px;
    }
    .pxd-status-icon {
        width: 32px;
        height: 32px;
        padding: 6px;
        box-sizing: content-box;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-card {
        padding: 12px 12px 10px;
        border-radius: 12px;
        border-left-width: 3px;
    }
    .pxd-card-title {
        font-size: 13.5px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .pxd-card-detail {
        font-size: 12.5px;
        gap: 7px;
    }
    .pxd-card-price {
        font-size: 14px;
    }
}

/* ============================================
   11. CARTE TRANSPORT (layout special)
   ============================================ */

/* Transport cards inherit glassmorphism from .pxd-card — no override needed */

.pxd-transport-legs {
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

/* A/R mode: legs side by side */
.pxd-transport-legs--ar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.pxd-transport-legs--ar > .pxd-transport-leg {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.pxd-transport-legs--ar > .pxd-transport-leg:first-child {
    padding-right: 10px;
    border-right: 1px dashed rgba(25, 118, 210, 0.12);
}
.pxd-transport-legs--ar > .pxd-transport-leg:last-child {
    padding-left: 10px;
}

/* Single-leg stacked mode */
.pxd-transport-leg {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(25, 118, 210, 0.12);
}

.pxd-transport-leg:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.pxd-transport-leg-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pxd-color-transport);
    margin-bottom: 8px;
    padding: 2px 8px;
    background: rgba(25, 118, 210, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(25, 118, 210, 0.10);
}

.pxd-transport-route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pxd-transport-point {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--pixidia-text);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.pxd-transport-point svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--pixidia-gray-400);
    opacity: 0.7;
}

.pxd-transport-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--pixidia-gray-400);
    opacity: 0.5;
}

.pxd-leg-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pxd-color-transport);
    margin-bottom: 6px;
}

.pxd-transport-city {
    text-align: center;
    min-width: 60px;
}

.pxd-transport-city-code {
    font-size: 24px;
    font-weight: 800;
    color: var(--pixidia-text);
    letter-spacing: -0.5px;
    line-height: 1;
}

.pxd-transport-city-name {
    font-size: 13px;
    color: var(--pixidia-gray-400);
    font-weight: 500;
    margin-top: 4px;
}

.pxd-transport-line {
    flex: 1;
    height: 2px;
    background: rgba(25, 118, 210, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pxd-transport-line::before,
.pxd-transport-line::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid rgba(25, 118, 210, 0.35);
    background: rgba(255, 255, 255, 0.9);
}

.pxd-transport-line::before {
    left: -3px;
}

.pxd-transport-line::after {
    right: -3px;
}

.pxd-transport-line-icon {
    width: 16px;
    height: 16px;
    color: var(--pixidia-gray-400);
    transform: rotate(0deg);
    position: absolute;
    top: -20px;
}

.pxd-transport-duration {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pixidia-text-muted);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 6px;
    white-space: nowrap;
    z-index: 1;
}

.pxd-transport-times {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-text);
    margin-bottom: 8px;
}

.pxd-transport-details {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--pixidia-gray-500);
    background: rgba(10, 61, 58, 0.02);
    border: 1px solid rgba(10, 61, 58, 0.04);
    padding: 8px 12px;
    border-radius: 10px;
    flex-wrap: wrap;
}

.pxd-transport-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pxd-transport-details svg {
    width: 14px;
    height: 14px;
}

.pxd-transport-segment {
    padding: 6px 12px;
    margin-top: 6px;
    background: rgba(25, 118, 210, 0.04);
    border: 1px solid rgba(25, 118, 210, 0.08);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-transport-segment svg {
    width: 14px;
    height: 14px;
}

/* Transport price removed — uses shared .pxd-card-cost */

/* Compact transport card (metro, bus) — no city codes */
.pxd-transport-compact .pxd-transport-city {
    min-width: auto;
}
.pxd-transport-compact .pxd-transport-city-code {
    display: none;
}
.pxd-transport-compact .pxd-transport-city-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text);
    margin-top: 0;
}
.pxd-transport-compact .pxd-transport-times {
    font-size: 12.5px;
}

/* ============================================
   TRANSPORT CARDS — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    /* Transport route: allow city names to wrap */
    .pxd-transport-city-name {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* A/R grid stacks into single column */
    .pxd-transport-legs--ar {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pxd-transport-legs--ar > .pxd-transport-leg:first-child {
        padding-right: 0;
        border-right: none;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgba(25, 118, 210, 0.12);
    }
    .pxd-transport-legs--ar > .pxd-transport-leg:last-child {
        padding-left: 0;
    }
    .pxd-transport-legs--ar > .pxd-transport-leg {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .pxd-transport-city-code {
        font-size: 18px;
    }
    .pxd-transport-city {
        min-width: 48px;
    }
    .pxd-transport-city-name {
        font-size: 12px;
    }
    .pxd-transport-route {
        gap: 8px;
    }
    .pxd-transport-times {
        font-size: 13px;
    }
    .pxd-transport-details {
        gap: 8px;
        padding: 6px 10px;
        font-size: 11.5px;
    }
    .pxd-transport-duration {
        font-size: 10px;
    }
    .pxd-transport-leg-label {
        font-size: 9.5px;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-transport-city-code {
        font-size: 16px;
        letter-spacing: -0.3px;
    }
    .pxd-transport-city {
        min-width: 40px;
    }
    .pxd-transport-city-name {
        font-size: 11px;
        margin-top: 2px;
    }
    .pxd-transport-route {
        gap: 6px;
    }
    .pxd-transport-times {
        font-size: 12px;
    }
    .pxd-transport-details {
        flex-wrap: wrap;
        gap: 6px;
        padding: 5px 8px;
        font-size: 11px;
    }
    .pxd-transport-line-icon {
        width: 14px;
        height: 14px;
    }
    .pxd-transport-segment {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ============================================
   12. BUDGET
   ============================================ */

/* --- Budget section --- */

/* --- Budget glass wrapper --- */
.pxd-budget-glass {
    margin: 0 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.10), 0 2px 8px rgba(15, 163, 107, 0.05);
    position: relative;
    overflow: hidden;
}

.pxd-budget-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-budget-glass > * {
    position: relative;
    z-index: 1;
}

/* --- Budget header --- */
.pxd-budget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 14px;
}

.pxd-budget-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-budget-header-left h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

/* --- Budget content: donut + breakdown side by side --- */
.pxd-budget-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 20px;
    align-items: center;
}

/* --- Donut chart --- */
.pxd-budget-chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.pxd-budget-donut {
    /* Responsive donut: scales with container, clamped between 140-190px */
    width: clamp(140px, 100%, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 6px 20px rgba(15, 163, 107, 0.12);
}

.pxd-budget-donut-center {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(15, 163, 107, 0.06);
}

.pxd-budget-total {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 800;
    color: var(--pixidia-blue);
    line-height: 1;
}

.pxd-budget-sublabel {
    font-size: 11px;
    color: #778494;
    margin-top: 3px;
    font-weight: 600;
}

/* --- Breakdown rows (glass sections) --- */
.pxd-budget-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pxd-budget-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
    transition: all 0.35s ease;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.pxd-budget-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-budget-row:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.2);
}

.pxd-budget-row:hover::before {
    opacity: 0.9;
}

/* Icon circle */
.pxd-budget-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--row-color) 30%, transparent);
    position: relative;
    z-index: 1;
}

.pxd-budget-row-icon svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

/* Label + bar */
.pxd-budget-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pxd-budget-row-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

.pxd-budget-row-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(1, 40, 39, 0.06);
    overflow: hidden;
}

.pxd-budget-row-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Amount + percent */
.pxd-budget-row-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pxd-budget-row-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-budget-row-percent {
    font-size: 10.5px;
    font-weight: 600;
    color: #778494;
}

/* --- Footer: stats bar (glass) --- */
.pxd-budget-footer {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
}

.pxd-budget-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0fa36b;
}

.pxd-budget-stat svg {
    width: 15px;
    height: 15px;
    color: #778494;
}

.pxd-budget-stat small {
    font-weight: 500;
    color: #778494;
    font-size: 11px;
}

/* --- Budget customize button (author only) --- */
.pxd-budget-customize-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-blue);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.05);
}

.pxd-budget-customize-btn svg {
    width: 15px;
    height: 15px;
}

.pxd-budget-customize-btn:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 163, 107, 0.25);
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
    color: #0fa36b;
}

/* ============================================
   12b. BUDGET ALLOCATION MODAL
   ============================================ */

/* Overlay */
.pxd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 40, 39, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 20000;
    display: none;
    place-items: center;
}

.pxd-modal-overlay.open {
    display: grid;
    animation: pxd-modalFadeIn 0.25s ease;
}

@keyframes pxd-modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal container */
.pxd-modal {
    position: relative;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow:
        0 24px 64px rgba(1, 40, 39, 0.20),
        0 0 0 1px rgba(1, 40, 39, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: pxd-modalSlideUp 0.3s ease;
    overflow: hidden;
}

@keyframes pxd-modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal header */
.pxd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.06);
}

.pxd-modal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-modal-header-left h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-modal-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    background: rgba(1, 40, 39, 0.05);
    color: #778494;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pxd-modal-close:hover {
    background: rgba(1, 40, 39, 0.1);
    color: var(--pixidia-blue);
}

.pxd-modal-close svg {
    width: 16px;
    height: 16px;
}

/* Modal body (scrollable) */
.pxd-modal-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Category slider row */
.pxd-alloc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pxd-alloc-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.5;
}

.pxd-alloc-row:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.10);
}

/* Category icon circle */
.pxd-alloc-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pxd-alloc-icon svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

/* Category info: label + slider */
.pxd-alloc-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pxd-alloc-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-blue);
    margin-bottom: 6px;
}

/* Range slider styling */
.pxd-alloc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(1, 40, 39, 0.08);
    outline: none;
    cursor: pointer;
}

.pxd-alloc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--alloc-color) 25%, color-mix(in srgb, var(--alloc-color) 70%, #38c19c) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pxd-alloc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.pxd-alloc-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--alloc-color) 25%, color-mix(in srgb, var(--alloc-color) 70%, #38c19c) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

/* Percent input */
.pxd-alloc-percent {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pxd-alloc-input {
    width: 48px;
    padding: 5px 4px;
    text-align: center;
    border: 1px solid rgba(1, 40, 39, 0.1);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.2s ease;
}

.pxd-alloc-input:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.15);
}

.pxd-alloc-unit {
    font-size: 12px;
    font-weight: 600;
    color: #778494;
}

/* Modal footer */
.pxd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid rgba(1, 40, 39, 0.06);
    gap: 16px;
}

/* Total display */
.pxd-modal-total {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pxd-modal-total-label {
    font-size: 13px;
    font-weight: 600;
    color: #778494;
}

.pxd-modal-total-value {
    font-size: 15px;
    font-weight: 800;
    color: #0fa36b;
    transition: color 0.2s ease;
}

.pxd-modal-total-value.error {
    color: #e53935;
    animation: pxd-totalPulse 1s ease infinite;
}

@keyframes pxd-totalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Action buttons */
.pxd-modal-actions {
    display: flex;
    gap: 8px;
}

.pxd-modal-btn {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
}

.pxd-modal-btn svg {
    width: 15px;
    height: 15px;
}

.pxd-modal-btn--cancel {
    background: rgba(1, 40, 39, 0.05);
    color: #778494;
}

.pxd-modal-btn--cancel:hover {
    background: rgba(1, 40, 39, 0.1);
    color: var(--pixidia-blue);
}

.pxd-modal-btn--save {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.25);
}

.pxd-modal-btn--save:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

.pxd-modal-btn--save:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* --- Confirm modal variant --- */

.pxd-modal--confirm {
    max-width: 400px;
    text-align: center;
    padding: 32px 28px 24px;
}

.pxd-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
}

.pxd-confirm-icon svg {
    width: 26px;
    height: 26px;
}

.pxd-confirm-icon--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.pxd-confirm-icon--danger {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
}

.pxd-confirm-title {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-confirm-text {
    margin: 0 0 24px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5a6a7a;
}

.pxd-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pxd-modal-btn--danger {
    background: linear-gradient(135deg, #dc2626 25%, #ef4444 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

.pxd-modal-btn--danger:hover {
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

/* --- Image modal variant --- */

.pxd-modal--image {
    max-width: 620px;
}

/* --- PDF Export modal: radio options --- */
.pxd-modal--pdf {
    max-width: 480px;
}
.pxd-pdf-subtitle {
    color: #555;
    font-size: 14px;
    margin: 0 0 20px;
}
.pxd-pdf-option-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pxd-pdf-option-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pxd-pdf-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pxd-pdf-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.pxd-pdf-option:hover {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.04);
}
.pxd-pdf-option input[type="radio"] {
    display: none;
}
.pxd-pdf-option-radio {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-top: 2px;
    position: relative;
    transition: border-color 0.2s;
}
.pxd-pdf-option input[type="radio"]:checked ~ .pxd-pdf-option-radio {
    border-color: #0fa36b;
}
.pxd-pdf-option input[type="radio"]:checked ~ .pxd-pdf-option-radio::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #0fa36b;
    border-radius: 50%;
}
.pxd-pdf-option input[type="radio"]:checked ~ .pxd-pdf-option-content .pxd-pdf-option-title {
    color: #0fa36b;
}
.pxd-pdf-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pxd-pdf-option-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: color 0.2s;
}
.pxd-pdf-option-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

/* --- Invite travelers modal --- */
.pxd-modal--invite {
    max-width: 520px;
}
.pxd-invite-section {
    margin-bottom: 20px;
}
.pxd-invite-section:last-child { margin-bottom: 0; }
.pxd-invite-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.pxd-invite-section-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 12px;
}
.pxd-invite-friends-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pxd-invite-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}
.pxd-invite-card:hover {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.04);
}
.pxd-invite-card.selected {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.08);
}
.pxd-invite-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.pxd-invite-card-info {
    flex: 1;
    min-width: 0;
}
.pxd-invite-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pxd-invite-card-username {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pxd-invite-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pxd-invite-card-check svg {
    width: 13px;
    height: 13px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}
.pxd-invite-card.selected .pxd-invite-card-check {
    background: #0fa36b;
    border-color: #0fa36b;
}
.pxd-invite-card.selected .pxd-invite-card-check svg {
    opacity: 1;
}
.pxd-invite-others-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pxd-invite-other-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pxd-invite-other-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.pxd-invite-other-input:focus {
    border-color: #0fa36b;
}
.pxd-invite-other-remove {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(220, 53, 69, 0.08);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.pxd-invite-other-remove:hover {
    background: rgba(220, 53, 69, 0.18);
}
.pxd-invite-other-remove svg {
    width: 14px;
    height: 14px;
    color: #dc3545;
}
.pxd-invite-add-other {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1.5px dashed #ccc;
    border-radius: 10px;
    background: none;
    color: #666;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.pxd-invite-add-other:hover {
    border-color: #0fa36b;
    color: #0fa36b;
}
.pxd-invite-add-other svg {
    width: 14px;
    height: 14px;
}
.pxd-modal--invite .pxd-modal-body {
    overflow-x: hidden;
}

/* --- Comment Card Editor Modal --- */
.pxd-modal--comment-editor {
    max-width: 560px;
}

.pxd-comment-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    background: rgba(255, 255, 255, 0.6);
}
.pxd-comment-textarea:focus {
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.08);
}
.pxd-comment-textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.pxd-comment-editor-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: #999;
    text-align: right;
}

/* Tabs */
.pxd-img-tabs {
    display: flex;
    border-bottom: 1px solid rgba(1, 40, 39, 0.08);
    padding: 0 20px;
}

.pxd-img-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #778494;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.pxd-img-tab svg {
    width: 15px;
    height: 15px;
}

.pxd-img-tab:hover {
    color: var(--pixidia-blue);
}

.pxd-img-tab.active {
    color: #0fa36b;
    border-bottom-color: #0fa36b;
}

.pxd-img-tab-content {
    display: none;
    padding: 20px;
    max-height: 55vh;
    overflow-y: auto;
}

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

.pxd-img-tab-content::-webkit-scrollbar {
    width: 6px;
}

.pxd-img-tab-content::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-img-tab-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.pxd-img-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Search */
.pxd-img-search {
    position: relative;
    margin-bottom: 16px;
}

.pxd-img-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #778494;
    pointer-events: none;
}

.pxd-img-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 2px solid rgba(1, 40, 39, 0.08);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--pixidia-blue);
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.pxd-img-search input:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.1);
}

/* Image grid */
.pxd-img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 2px;
}

.pxd-img-grid-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.pxd-img-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pxd-img-grid-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(15, 163, 107, 0.3);
}

.pxd-img-grid-item.selected {
    border-color: #0fa36b;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.25);
}

.pxd-img-grid-item.selected::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #0fa36b;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.pxd-img-grid-item-credit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    color: white;
    font-size: 10.5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.pxd-img-grid-item:hover .pxd-img-grid-item-credit {
    opacity: 1;
}

/* Load more button */
.pxd-img-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #0fa36b;
    background: rgba(15, 163, 107, 0.06);
    border: 1.5px dashed rgba(15, 163, 107, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.pxd-img-load-more:hover {
    background: rgba(15, 163, 107, 0.1);
    border-color: #0fa36b;
}

.pxd-img-load-more svg {
    width: 16px;
    height: 16px;
}

/* Credit line */
.pxd-img-credit {
    font-size: 11px;
    color: #778494;
    text-align: center;
    margin-top: 10px;
    min-height: 16px;
}

.pxd-img-credit a {
    color: #0fa36b;
    text-decoration: none;
}

/* Dropzone */
.pxd-img-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
    border: 2px dashed rgba(1, 40, 39, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s;
}

.pxd-img-dropzone:hover,
.pxd-img-dropzone.dragover {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.04);
}

.pxd-img-dropzone-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(15, 163, 107, 0.1);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: #0fa36b;
}

.pxd-img-dropzone-icon svg {
    width: 26px;
    height: 26px;
}

.pxd-img-dropzone-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 4px;
}

.pxd-img-dropzone-subtitle {
    font-size: 13px;
    color: #778494;
    margin-bottom: 12px;
}

.pxd-img-dropzone-info {
    font-size: 11.5px;
    color: #adb5bd;
}

/* ============================================
   BUDGET — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-budget-content {
        gap: 16px;
    }

    .pxd-budget-donut {
        width: clamp(130px, 100%, 170px);
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-budget-glass {
        margin: 0 8px;
        padding: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Allow content to be visible, clipping handled by parent */
        overflow: visible;
    }

    .pxd-budget-content {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
    }

    .pxd-budget-chart-wrapper {
        padding: 4px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .pxd-budget-donut {
        /* Responsive donut: relative to viewport for true mobile */
        width: clamp(130px, 35vw, 170px);
        height: clamp(130px, 35vw, 170px);
    }

    /* Donut center text: larger font at true phone sizes */
    .pxd-budget-total {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }

    .pxd-budget-sublabel {
        font-size: clamp(9px, 2.5vw, 11px);
    }

    .pxd-budget-breakdown {
        width: 100%;
    }

    .pxd-budget-row {
        padding: 8px 10px;
        gap: 8px;
        /* Prevent layout overflow within tight containers */
        min-width: 0;
        overflow: hidden;
    }

    /* Ensure label truncates rather than overflows */
    .pxd-budget-row-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .pxd-budget-row:hover {
        box-shadow: 0 8px 24px -5px rgba(15, 163, 107, 0.15), 0 3px 10px rgba(15, 163, 107, 0.06);
    }

    .pxd-budget-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px;
    }

    .pxd-budget-stat {
        font-size: 12px;
        justify-content: center;
    }

    /* Modal: larger slider thumbs for touch */
    .pxd-alloc-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .pxd-alloc-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    /* Allocation input: 44px min touch target */
    .pxd-alloc-input {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .pxd-modal {
        width: 95%;
        max-height: 90vh;
        border-radius: 14px;
    }

    .pxd-modal-header {
        padding: 14px 16px;
    }

    .pxd-modal-body {
        padding: 14px 16px;
    }

    .pxd-modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
    }

    .pxd-modal-actions {
        width: 100%;
        justify-content: stretch;
    }

    .pxd-modal-actions .pxd-modal-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    /* Invite friends grid stacks */
    .pxd-invite-friends-grid {
        grid-template-columns: 1fr;
    }

    /* Image grid 2 columns on mobile */
    .pxd-img-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-budget-donut {
        width: clamp(110px, 38vw, 150px);
        height: clamp(110px, 38vw, 150px);
    }

    .pxd-budget-row-bar {
        display: none;
    }

    .pxd-budget-row-label {
        font-size: 12px;
    }

    .pxd-budget-row-amount {
        font-size: 12px;
    }

    .pxd-budget-row-percent {
        font-size: 10px;
    }

    .pxd-budget-total {
        font-size: clamp(0.9rem, 5vw, 1.1rem);
    }

    .pxd-budget-sublabel {
        font-size: 9px;
    }

    .pxd-budget-header-left h2 {
        font-size: 1.05rem;
    }

    .pxd-budget-stat {
        font-size: 11px;
    }

    .pxd-budget-stat small {
        font-size: 10px;
    }

    .pxd-alloc-row {
        padding: 8px 10px;
        gap: 8px;
    }

    .pxd-alloc-label {
        font-size: 11px;
    }

    .pxd-alloc-input {
        width: 42px;
        font-size: 12px;
    }
}

/* ============================================
   13. RESERVATIONS DASHBOARD
   ============================================ */

/* --- Reservations: glassmorphism dashboard --- */

.pxd-reservations-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Progress bar */
.pxd-res-progress {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
}

.pxd-res-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pxd-res-progress-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pxd-res-progress-value {
    font-size: 13px;
    font-weight: 600;
    color: #388e3c;
}

.pxd-res-progress-bar {
    height: 8px;
    background: rgba(200, 205, 212, 0.25);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.pxd-res-progress-fill {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.pxd-res-progress-fill--confirmed {
    background: linear-gradient(90deg, #2e7d32, #43a047);
    border-radius: 4px 0 0 4px;
}

.pxd-res-progress-fill--pending {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.pxd-res-progress-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.pxd-res-progress-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #778494;
}

.pxd-res-progress-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pxd-res-progress-legend-dot--confirmed { background: #388e3c; }
.pxd-res-progress-legend-dot--pending { background: #f59e0b; }
.pxd-res-progress-legend-dot--none { background: #c8cdd4; }

/* Columns grid */
.pxd-res-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Column card */
.pxd-res-col {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    min-width: 0;
}

.pxd-res-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid rgba(200, 205, 212, 0.2);
}

.pxd-res-col-header svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-res-col-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
}

/* Column color variants */
.pxd-res-col--confirmed .pxd-res-col-header {
    color: #2e7d32;
}
.pxd-res-col--confirmed .pxd-res-col-count {
    background: rgba(56, 142, 60, 0.12);
    color: #2e7d32;
}

.pxd-res-col--pending .pxd-res-col-header {
    color: #d97706;
}
.pxd-res-col--pending .pxd-res-col-count {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.pxd-res-col--none .pxd-res-col-header {
    color: #778494;
}
.pxd-res-col--none .pxd-res-col-count {
    background: rgba(176, 184, 196, 0.15);
    color: #778494;
}

.pxd-res-col-body {
    padding: 8px;
}

/* Show more button */
.pxd-res-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: none;
    border: 1px dashed rgba(200, 205, 212, 0.4);
    border-radius: 8px;
    color: #778494;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pxd-res-show-more svg {
    width: 13px;
    height: 13px;
    transition: transform 0.3s ease;
}

.pxd-res-show-more:hover {
    color: #0d8c5a;
    border-color: rgba(15, 163, 107, 0.3);
    background: rgba(15, 163, 107, 0.04);
}

/* Hidden items */
.pxd-res-hidden {
    display: none;
}

/* Toggle button (AJAX status change) */
.pxd-res-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(200, 205, 212, 0.35);
    background: rgba(255, 255, 255, 0.6);
    color: #778494;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: auto;
}

.pxd-res-toggle svg {
    width: 13px;
    height: 13px;
}

.pxd-res-toggle:hover {
    transform: scale(1.15);
}

/* Elevate stacking contexts when tooltip is visible */
.pxd-res-col:has(.pxd-res-toggle:hover) {
    z-index: 10;
}
.pxd-res-item:has(.pxd-res-toggle:hover) {
    z-index: 5;
}

/* Column-specific toggle hover colors */
.pxd-res-col--pending .pxd-res-toggle:hover {
    background: rgba(56, 142, 60, 0.12);
    border-color: rgba(56, 142, 60, 0.3);
    color: #2e7d32;
}

.pxd-res-col--confirmed .pxd-res-toggle:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.pxd-res-col--none .pxd-res-toggle:hover {
    background: rgba(56, 142, 60, 0.12);
    border-color: rgba(56, 142, 60, 0.3);
    color: #2e7d32;
}

/* Loading state */
.pxd-res-toggle--loading {
    pointer-events: none;
    opacity: 0.5;
}

.pxd-res-toggle--loading svg {
    animation: pxd-res-spin 0.8s linear infinite;
}

@keyframes pxd-res-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   RESERVATIONS — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-res-columns {
        gap: 10px;
    }

    .pxd-res-col-header {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-res-progress {
        padding: 14px 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .pxd-res-progress-bar {
        height: 10px;
        border-radius: 5px;
    }

    .pxd-res-progress-value {
        font-size: 14px;
        font-weight: 700;
    }

    .pxd-res-columns {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pxd-res-col {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Collapsible column headers on mobile */
    .pxd-res-col-header {
        padding: 12px 14px;
        cursor: pointer;
        min-height: 44px;
    }

    .pxd-res-col-body {
        padding: 6px;
    }

    /* Ensure touch targets */
    .pxd-res-show-more {
        min-height: 44px;
        font-size: 12px;
    }

    .pxd-res-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .pxd-res-toggle svg {
        width: 16px;
        height: 16px;
    }

    /* Reservation item cards: truncate type label on tight widths */
    .pxd-res-type {
        flex-shrink: 0;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-res-progress-legend {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pxd-res-progress-legend-item {
        font-size: 11px;
    }

    .pxd-res-progress-label {
        font-size: 12px;
    }

    .pxd-res-col-header {
        font-size: 11.5px;
        padding: 10px 12px;
    }

    /* Hide type badge on very small screens to give more room to title */
    .pxd-res-type {
        display: none;
    }
}

/* ============================================
   14. GESTION DEPENSES (glassmorphism)
   ============================================ */

/* --- Glass wrapper --- */
.pxd-depenses-glass {
    margin: 0 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.10), 0 2px 8px rgba(15, 163, 107, 0.05);
    position: relative;
    overflow: hidden;
}

.pxd-depenses-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-depenses-glass > * {
    position: relative;
    z-index: 1;
}

/* --- Header --- */
.pxd-dep-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 14px;
}

.pxd-dep-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-dep-header-left h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-dep-header-sub {
    font-size: 12px;
    color: #778494;
    font-weight: 500;
}

/* --- Summary: total + categories --- */
.pxd-dep-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.pxd-dep-total-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.06);
    position: relative;
    overflow: hidden;
}

.pxd-dep-total-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.pxd-dep-total-card > * {
    position: relative;
    z-index: 1;
}

.pxd-dep-total-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
}

.pxd-dep-total-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.pxd-dep-total-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pxd-dep-total-label {
    font-size: 12px;
    color: #778494;
    font-weight: 500;
}

.pxd-dep-total-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-dep-total-avg {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(15, 163, 107, 0.08);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #0fa36b;
    white-space: nowrap;
}

.pxd-dep-total-avg svg {
    width: 14px;
    height: 14px;
}

.pxd-dep-total-avg small {
    font-weight: 500;
    color: #778494;
    font-size: 11px;
}

/* Category chips */
.pxd-dep-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pxd-dep-cat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cat-color);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.05);
}

.pxd-dep-cat-chip svg {
    width: 13px;
    height: 13px;
}

.pxd-dep-cat-chip strong {
    font-weight: 700;
}

/* --- Participant cards --- */
.pxd-dep-participants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.pxd-dep-participant {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
    overflow: hidden;
    transition: all 0.35s ease;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
    position: relative;
}

.pxd-dep-participant::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-dep-participant:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 36px -5px rgba(15, 163, 107, 0.18), 0 4px 12px rgba(15, 163, 107, 0.06);
    border-color: rgba(15, 163, 107, 0.15);
}

.pxd-dep-participant:hover::before {
    opacity: 0.9;
}

.pxd-dep-participant-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    position: relative;
    z-index: 1;
}

.pxd-dep-participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(15, 163, 107, 0.15);
    flex-shrink: 0;
}

.pxd-dep-participant-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pxd-dep-participant-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-dep-participant-count {
    font-size: 11.5px;
    color: #778494;
    font-weight: 500;
}

.pxd-dep-participant-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.pxd-dep-participant-amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-dep-participant-balance {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.pxd-dep-participant-balance.positive {
    color: #0fa36b;
    background: rgba(15, 163, 107, 0.1);
}

.pxd-dep-participant-balance.negative {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.08);
}

/* Expense items inside a participant */
.pxd-dep-items {
    border-top: 1px solid rgba(1, 40, 39, 0.06);
    padding: 4px 14px 10px;
    position: relative;
    z-index: 1;
}

.pxd-dep-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.pxd-dep-item + .pxd-dep-item {
    border-top: 1px solid rgba(1, 40, 39, 0.04);
}

.pxd-dep-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pxd-dep-item-icon svg {
    width: 13px;
    height: 13px;
    color: white;
    stroke-width: 2.2;
}

.pxd-dep-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pxd-dep-item-desc {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxd-dep-item-meta {
    font-size: 11px;
    color: #778494;
    font-weight: 500;
}

.pxd-dep-item-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    flex-shrink: 0;
}

/* --- Manage button (header) --- */
.pxd-dep-manage-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
    margin-left: auto;
}

.pxd-dep-manage-btn svg {
    width: 14px;
    height: 14px;
}

.pxd-dep-manage-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

/* --- Settlement section --- */
.pxd-dep-settlement {
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
}

.pxd-dep-settlement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 10px;
}

.pxd-dep-settlement-header svg {
    width: 16px;
    height: 16px;
    color: #0fa36b;
}

.pxd-dep-settlement-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.pxd-dep-settlement-row + .pxd-dep-settlement-row {
    border-top: 1px solid rgba(1, 40, 39, 0.06);
}

.pxd-dep-settlement-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(15, 163, 107, 0.15);
    flex-shrink: 0;
}

.pxd-dep-settlement-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

.pxd-dep-settlement-arrow {
    font-size: 12px;
    color: #778494;
}

.pxd-dep-settlement-amount {
    font-size: 13px;
    font-weight: 800;
    color: #0fa36b;
}

/* --- Expense Modal overrides --- */
.pxd-modal--expenses {
    max-width: 580px;
}

/* Tabs */
.pxd-exp-tabs {
    display: flex;
    border-bottom: 1px solid rgba(1, 40, 39, 0.08);
    padding: 0 20px;
}

.pxd-exp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #778494;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pxd-exp-tab svg {
    width: 15px;
    height: 15px;
}

.pxd-exp-tab:hover {
    color: var(--pixidia-blue);
}

.pxd-exp-tab.active {
    color: #0fa36b;
    border-bottom-color: #0fa36b;
}

/* Tab content */
.pxd-exp-body {
    padding: 0 !important;
}

.pxd-exp-tab-content {
    display: none;
    padding: 20px;
}

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

/* Form fields */
.pxd-exp-field {
    margin-bottom: 16px;
}

.pxd-exp-field:last-child {
    margin-bottom: 0;
}

.pxd-exp-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pxd-exp-field label svg {
    width: 13px;
    height: 13px;
    color: #0fa36b;
    stroke-width: 2.2;
}

.pxd-exp-label-hint {
    text-transform: none;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0;
    font-size: 11px;
}

/* Input wrapper with inline icon */
.pxd-exp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pxd-exp-input-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #9ca3af;
    stroke-width: 1.8;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

.pxd-exp-input-wrap:focus-within .pxd-exp-input-icon {
    color: #0fa36b;
}

/* Base input */
.pxd-exp-input {
    width: 100%;
    padding: 11px 14px;
    min-height: 44px;
    border: 1.5px solid rgba(1, 40, 39, 0.09);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--pixidia-text);
    background-color: rgba(248, 250, 252, 0.8);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.pxd-exp-input::placeholder {
    color: #b0b8c4;
    font-weight: 400;
}

.pxd-exp-input:hover {
    border-color: rgba(1, 40, 39, 0.18);
    background-color: rgba(255, 255, 255, 0.9);
}

.pxd-exp-input:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 3.5px rgba(15, 163, 107, 0.1);
    background-color: white;
}

/* Validation error states */
.pxd-exp-field--error .pxd-exp-input {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.pxd-exp-field--error .pxd-exp-input-icon {
    color: #e74c3c;
}

.pxd-exp-error-msg {
    display: block;
    color: #e74c3c;
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
    padding-left: 2px;
    animation: pxd-exp-error-in 0.25s ease;
}

@keyframes pxd-exp-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Input with icon — left padding */
.pxd-exp-input--icon {
    padding-left: 38px;
}

/* Input with currency suffix */
.pxd-exp-input--currency {
    padding-right: 44px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.pxd-exp-input-suffix {
    position: absolute;
    right: 14px;
    font-size: 14px;
    font-weight: 800;
    color: #0fa36b;
    pointer-events: none;
    z-index: 1;
}

/* Category dot (color preview) */
.pxd-exp-cat-dot {
    position: absolute;
    left: 13px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1976d2;
    z-index: 1;
    pointer-events: none;
    transition: background 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Hide native selects — replaced by custom dropdowns */
select.pxd-exp-input { display: none; }

/* ─── Custom dropdown component ─── */
.pxd-exp-custom-select {
    position: relative;
    width: 100%;
}

.pxd-exp-select-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    padding-left: 38px;
    padding-right: 38px;
    border: 1.5px solid rgba(1, 40, 39, 0.09);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--pixidia-text);
    background-color: rgba(248, 250, 252, 0.8);
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    min-height: 44px;
}

.pxd-exp-select-trigger:hover {
    border-color: rgba(1, 40, 39, 0.18);
    background-color: rgba(255, 255, 255, 0.95);
}

.pxd-exp-custom-select.open .pxd-exp-select-trigger {
    border-color: #0fa36b;
    box-shadow: 0 0 0 3.5px rgba(15, 163, 107, 0.1);
    background-color: white;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pxd-exp-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pxd-exp-select-placeholder {
    color: #b0b8c4;
}

.pxd-exp-select-chevron {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    color: #9ca3af;
    stroke-width: 2;
    pointer-events: none;
    transition: transform 0.25s ease, color 0.25s ease;
}

.pxd-exp-custom-select.open .pxd-exp-select-chevron {
    transform: rotate(180deg);
    color: #0fa36b;
}

/* Dropdown panel */
.pxd-exp-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1.5px solid #0fa36b;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(15, 163, 107, 0.06);
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}

.pxd-exp-custom-select.open .pxd-exp-select-options {
    display: block;
    animation: pxd-dropdown-in 0.2s ease;
}

@keyframes pxd-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar styling */
.pxd-exp-select-options::-webkit-scrollbar {
    width: 5px;
}

.pxd-exp-select-options::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-exp-select-options::-webkit-scrollbar-thumb {
    background: rgba(1, 40, 39, 0.12);
    border-radius: 10px;
}

/* Option item */
.pxd-exp-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--pixidia-text);
    transition: background 0.15s ease;
}

.pxd-exp-select-option:hover {
    background: rgba(15, 163, 107, 0.06);
}

.pxd-exp-select-option.selected {
    background: rgba(15, 163, 107, 0.08);
    font-weight: 600;
    color: #0a7a50;
}

.pxd-exp-select-option.selected::after {
    content: '';
    margin-left: auto;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230fa36b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
}

/* Category option dot */
.pxd-exp-opt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Category option emoji */
.pxd-exp-opt-emoji {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

/* Group headers (for linked posts) */
.pxd-exp-select-group {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pixidia-blue);
    opacity: 0.7;
}

.pxd-exp-select-group:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid rgba(1, 40, 39, 0.05);
    padding-top: 10px;
}

/* Group option (indented) */
.pxd-exp-select-option--grouped {
    padding-left: 18px;
    font-size: 13px;
}

/* Payer / Shared avatar selectors */
.pxd-exp-payer-select,
.pxd-exp-shared-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pxd-exp-avatar-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    background: none;
    transition: all 0.2s ease;
    position: relative;
}

.pxd-exp-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pxd-exp-avatar-btn.selected {
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.2);
}

.pxd-exp-avatar-btn.deselected {
    opacity: 0.35;
    filter: grayscale(40%);
}

.pxd-exp-avatar-btn .pxd-exp-avatar-name {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--pixidia-blue);
    white-space: nowrap;
}

.pxd-exp-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pxd-exp-avatar-wrap .pxd-exp-avatar-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

/* Participant action buttons */
.pxd-exp-participants-actions {
    display: flex;
    gap: 10px;
    padding: 0 20px;
    margin-bottom: 2px;
}

.pxd-exp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid rgba(15, 163, 107, 0.2);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(15, 163, 107, 0.06);
    color: var(--pixidia-blue);
}

.pxd-exp-action-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.pxd-exp-action-btn--add-participant {
    color: #0fa36b;
    border-color: rgba(15, 163, 107, 0.25);
}

.pxd-exp-action-btn--add-participant:hover {
    background: rgba(15, 163, 107, 0.12);
    border-color: rgba(15, 163, 107, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.15);
}

.pxd-exp-action-btn--manage-users {
    color: var(--pixidia-gray-500);
    border-color: rgba(1, 40, 39, 0.1);
    background: rgba(1, 40, 39, 0.03);
}

.pxd-exp-action-btn--manage-users:hover {
    background: rgba(1, 40, 39, 0.07);
    border-color: rgba(1, 40, 39, 0.2);
    color: var(--pixidia-blue);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(1, 40, 39, 0.08);
}

/* ── Sub-panels (Ajouter participant / Gérer utilisateurs) ── */
.pxd-exp-subpanel {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.pxd-exp-subpanel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pxd-exp-subpanel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(15, 163, 107, 0.1);
}

.pxd-exp-subpanel-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pxd-exp-subpanel-header h4 svg {
    width: 18px;
    height: 18px;
    color: #0fa36b;
}

.pxd-exp-subpanel-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(1, 40, 39, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pxd-exp-subpanel-close:hover {
    background: rgba(1, 40, 39, 0.1);
}

.pxd-exp-subpanel-close svg {
    width: 16px;
    height: 16px;
    color: var(--pixidia-gray-400);
}

.pxd-exp-subpanel-body {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.pxd-exp-subpanel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
}

/* New participant preview */
.pxd-exp-subpanel-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(15, 163, 107, 0.06);
    border: 1.5px solid rgba(15, 163, 107, 0.15);
    border-radius: 12px;
    animation: pxd-fadeSlideIn 0.25s ease;
}

.pxd-exp-subpanel-preview-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.3);
    object-fit: cover;
}

.pxd-exp-subpanel-preview span {
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

/* Users list (manage panel) */
.pxd-exp-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pxd-exp-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(1, 40, 39, 0.06);
    border-radius: 10px;
    transition: background 0.2s, box-shadow 0.2s;
}

.pxd-exp-user-item:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
}

.pxd-exp-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pxd-exp-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.2);
    object-fit: cover;
}

.pxd-exp-user-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

.pxd-exp-user-role {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(15, 163, 107, 0.1);
    color: #0fa36b;
}

.pxd-exp-user-role--author {
    background: rgba(212, 160, 0, 0.1);
    color: #d4a000;
}

.pxd-exp-user-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(211, 47, 47, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.pxd-exp-user-item:hover .pxd-exp-user-remove {
    opacity: 1;
}

.pxd-exp-user-remove:hover {
    background: rgba(211, 47, 47, 0.15);
}

.pxd-exp-user-remove svg {
    width: 14px;
    height: 14px;
    color: #d32f2f;
}

@keyframes pxd-fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Expense footer */
.pxd-exp-footer .pxd-modal-btn--save {
    transition: opacity 0.2s ease;
}

.pxd-exp-footer.hide-save .pxd-modal-btn--save {
    display: none;
}

/* History tab */
#exp-tab-history {
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 20px !important;
}

.pxd-exp-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #778494;
    font-size: 13px;
}

.pxd-exp-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.pxd-exp-history-item + .pxd-exp-history-item {
    border-top: 1px solid rgba(1, 40, 39, 0.06);
}

.pxd-exp-history-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pxd-exp-history-icon svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

.pxd-exp-history-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pxd-exp-history-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxd-exp-history-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #778494;
    font-weight: 500;
}

.pxd-exp-history-payer {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(15, 163, 107, 0.15);
}

.pxd-exp-history-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.pxd-exp-history-amount {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-exp-history-shared {
    display: flex;
}

.pxd-exp-history-shared img {
    width: 20px;
    height: 20px;
    margin-left: -5px;
    border: 2px solid white;
    border-radius: 50%;
    object-fit: cover;
}

.pxd-exp-history-shared img:first-child {
    margin-left: 0;
}

.pxd-exp-history-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #d32f2f;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.pxd-exp-history-item:hover .pxd-exp-history-delete {
    opacity: 0.6;
}

.pxd-exp-history-delete:hover {
    opacity: 1 !important;
}

.pxd-exp-history-delete svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   EXPENSES — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-dep-total-card {
        gap: 10px;
        padding: 12px 14px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-depenses-glass {
        margin: 0 8px;
        padding: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Summary total card stacks */
    .pxd-dep-total-card {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pxd-dep-total-avg {
        width: 100%;
        justify-content: center;
    }

    /* Category chips wrap */
    .pxd-dep-cats {
        gap: 5px;
    }

    .pxd-dep-cat-chip {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Participant cards */
    .pxd-dep-participant-head {
        padding: 10px 12px;
        gap: 8px;
    }

    .pxd-dep-items {
        padding: 4px 12px 8px;
    }

    /* Settlement: ensure "who owes who" reads clearly at 375px */
    .pxd-dep-settlement {
        padding: 12px;
    }

    .pxd-dep-settlement-row {
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    /* Names truncate rather than wrap mid-word */
    .pxd-dep-settlement-name {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Manage button — prominent on mobile */
    .pxd-dep-manage-btn {
        padding: 10px 18px;
        font-size: 13px;
        min-height: 44px;
    }

    /* Modal form inputs full width */
    .pxd-exp-field {
        margin-bottom: 14px;
    }

    .pxd-exp-input {
        padding: 12px 14px;
        min-height: 44px;
        font-size: 14px;
    }

    .pxd-exp-input--currency {
        font-size: 16px;
    }

    /* Custom dropdown: open upward when near bottom of bottom sheet */
    .pxd-exp-custom-select.open-up .pxd-exp-select-options {
        top: auto;
        bottom: 100%;
        border-top: 1.5px solid #0fa36b;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
    }

    .pxd-exp-custom-select.open-up.open .pxd-exp-select-trigger {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* Payer/shared select: larger touch targets */
    .pxd-exp-avatar-btn {
        width: 48px;
        height: 48px;
    }

    .pxd-exp-payer-select,
    .pxd-exp-shared-select {
        gap: 10px;
    }

    /* Participant action buttons */
    .pxd-exp-participants-actions {
        padding: 0 16px;
        flex-wrap: wrap;
    }

    .pxd-exp-action-btn {
        min-height: 44px;
        padding: 8px 16px;
    }

    /* Sub-panel mobile */
    .pxd-exp-subpanel-header {
        padding: 14px 16px;
    }

    .pxd-exp-subpanel-body {
        padding: 16px;
    }

    .pxd-exp-subpanel-footer {
        padding: 12px 16px;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-dep-header-left h2 {
        font-size: 1.05rem;
    }

    .pxd-dep-total-amount {
        font-size: 1.15rem;
    }

    .pxd-dep-participant-name {
        font-size: 13px;
    }

    .pxd-dep-participant-amount {
        font-size: 13px;
    }

    .pxd-dep-item {
        gap: 8px;
        padding: 6px 0;
    }

    .pxd-dep-item-desc {
        font-size: 12px;
    }

    .pxd-dep-item-amount {
        font-size: 12px;
    }

    .pxd-dep-item-meta {
        font-size: 10px;
    }

    .pxd-exp-history-item {
        gap: 8px;
        padding: 8px 0;
    }

    .pxd-exp-history-desc {
        font-size: 12px;
    }

    .pxd-exp-history-amount {
        font-size: 12.5px;
    }
}

/* ============================================
   15. AVIS (Glassmorphism)
   ============================================ */

/* --- Glass outer container --- */
.pxd-avis-glass {
    margin: 0 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(255, 193, 7, 0.10),
                0 2px 8px rgba(255, 193, 7, 0.05);
    position: relative;
    overflow: hidden;
}

.pxd-avis-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-avis-glass > * {
    position: relative;
    z-index: 1;
}

/* --- Summary card --- */
.pxd-review-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

.pxd-review-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.pxd-review-summary-card > * {
    position: relative;
    z-index: 1;
}

.pxd-review-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffc107 25%, #ffd54f 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(255, 193, 7, 0.30);
}

.pxd-review-summary-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.pxd-review-summary-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pxd-review-summary-label {
    font-size: 12px;
    color: #778494;
    font-weight: 500;
}

.pxd-review-summary-score {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-review-summary-score small {
    font-size: 0.75rem;
    font-weight: 600;
    color: #778494;
}

.pxd-review-summary-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pxd-review-summary-stars .pxd-star {
    width: 18px;
    height: 18px;
}

.pxd-review-summary-count {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 193, 7, 0.10);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #d4a000;
    white-space: nowrap;
}

.pxd-review-summary-count svg {
    width: 14px;
    height: 14px;
}

/* --- Review cards container --- */
.pxd-review-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

/* --- Individual review card --- */
.pxd-review-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.05);
    overflow: hidden;
    transition: all 0.35s ease;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
    position: relative;
    padding: 14px;
}

.pxd-review-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-review-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 36px -5px rgba(255, 193, 7, 0.18),
                0 4px 12px rgba(255, 193, 7, 0.06);
    border-color: rgba(255, 193, 7, 0.20);
}

.pxd-review-card:hover::before {
    opacity: 0.9;
}

/* --- Review card header --- */
.pxd-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.pxd-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 193, 7, 0.20);
    flex-shrink: 0;
}

.pxd-review-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pxd-review-author {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-review-date {
    font-size: 11.5px;
    color: #778494;
    font-weight: 500;
}

.pxd-review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.pxd-review-stars .pxd-star {
    width: 14px;
    height: 14px;
}

/* --- Delete review button --- */
.pxd-review-delete {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    opacity: 0.35;
    color: #778494;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    margin-left: 4px;
}

.pxd-review-delete svg {
    width: 15px;
    height: 15px;
}

.pxd-review-delete:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    transform: scale(1.1);
}

.pxd-review-delete:active {
    transform: scale(0.9);
}

.pxd-review-delete:disabled {
    opacity: 0.2;
    pointer-events: none;
}

/* --- Cancel rating link --- */
.pxd-cancel-rating-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-gray-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-left: auto;
    transition: color 0.2s ease;
}

.pxd-cancel-rating-link:hover {
    color: #ef4444;
}

.pxd-cancel-rating-link svg {
    width: 14px;
    height: 14px;
}

.pxd-cancel-rating-link:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Review text --- */
.pxd-review-text {
    font-size: 13.5px;
    color: var(--pixidia-text);
    line-height: 1.55;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* --- Review form --- */
.pxd-review-form {
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.05);
}

.pxd-review-form-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 12px;
}

.pxd-review-form-header svg {
    width: 16px;
    height: 16px;
    color: #ffc107;
}

.pxd-review-form .pxd-star-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.pxd-review-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--pixidia-text);
    resize: vertical;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.pxd-review-textarea:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

.pxd-review-textarea::placeholder {
    color: #778494;
}

.pxd-review-form .pxd-btn {
    float: right;
}

/* --- Comment submit button — chat send button style --- */
.pxd-comment-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: right;
    padding: 9px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15, 163, 107, 0.2);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxd-comment-submit svg {
    width: 14px;
    height: 14px;
}

.pxd-comment-submit:hover {
    background: linear-gradient(135deg, #0d8c5a 25%, #2fb08a 100%);
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15, 163, 107, 0.3);
}

.pxd-comment-submit:active {
    background: linear-gradient(135deg, #0a7a4e 25%, #28a07e 100%);
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 2px 6px rgba(15, 163, 107, 0.2);
}

.pxd-comment-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* --- Rating confirmation + optional comment --- */

.pxd-rating-confirmation {
    display: none;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    animation: pxd-tl-fadeIn 0.3s ease both;
}

.pxd-rating-confirmation.active {
    display: flex;
}

.pxd-rating-thanks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2e7d32;
}

.pxd-rating-thanks svg {
    width: 16px;
    height: 16px;
    color: #2e7d32;
}

.pxd-add-comment-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-gray-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.2s ease;
}

.pxd-add-comment-link:hover {
    color: #d4a000;
}

.pxd-add-comment-link svg {
    width: 14px;
    height: 14px;
}

.pxd-comment-section {
    display: none;
    margin-top: 10px;
    animation: pxd-tl-fadeIn 0.3s ease both;
}

.pxd-comment-section.active {
    display: block;
}

/* --- Replies --- */

.pxd-review-replies {
    margin: 10px 0 0 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.pxd-reply {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: pxd-tl-fadeIn 0.3s ease both;
}

.pxd-reply--new {
    animation: pxd-tl-fadeIn 0.35s ease both;
}

.pxd-reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 193, 7, 0.3);
    object-fit: cover;
    flex-shrink: 0;
}

.pxd-reply-content {
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.10);
    border-radius: 10px;
    padding: 8px 12px;
    flex: 1;
    min-width: 0;
}

.pxd-reply-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.pxd-reply-author {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--pixidia-blue);
}

.pxd-reply-date {
    font-size: 11px;
    color: var(--pixidia-gray-400);
}

.pxd-reply-text {
    font-size: 13px;
    color: var(--pixidia-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* --- Reply button (author only) --- */

.pxd-reply-btn {
    background: none;
    border: none;
    color: var(--pixidia-gray-400);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 4px 0;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.pxd-reply-btn:hover {
    color: #d4a000;
}

.pxd-reply-btn i,
.pxd-reply-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Reply form (author only) --- */

.pxd-reply-form {
    display: none;
    margin: 8px 0 0 48px;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.pxd-reply-form.active {
    display: flex;
    animation: pxd-tl-fadeIn 0.25s ease both;
}

.pxd-reply-form-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pxd-reply-form-input {
    flex: 1;
    min-width: 0;
}

.pxd-reply-form textarea {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-text);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pxd-reply-form textarea:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

.pxd-reply-form textarea::placeholder {
    color: #778494;
}

.pxd-reply-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.pxd-reply-cancel {
    background: none;
    border: none;
    color: var(--pixidia-gray-400);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}

.pxd-reply-cancel:hover {
    color: var(--pixidia-text);
    background: rgba(0, 0, 0, 0.04);
}

.pxd-reply-form .pxd-reply-submit {
    font-size: 12.5px;
    padding: 6px 14px;
}

.pxd-reply-form .pxd-reply-submit i,
.pxd-reply-form .pxd-reply-submit svg {
    width: 13px;
    height: 13px;
}

/* ============================================
   REVIEWS — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-review-summary-card {
        gap: 10px;
        padding: 12px 14px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-avis-glass {
        margin: 0 8px;
        padding: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Summary card stacks vertically */
    .pxd-review-summary-card {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 16px;
    }

    .pxd-review-summary-info {
        align-items: center;
    }

    .pxd-review-summary-stars {
        justify-content: center;
    }

    /* Review cards full width */
    .pxd-review-card {
        padding: 12px;
    }

    .pxd-review-header {
        gap: 8px;
    }

    /* Star interactive areas: 44px minimum touch target */
    .pxd-star-rating .pxd-star,
    .pxd-star-rating .pxd-star-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        cursor: pointer;
    }

    .pxd-review-form .pxd-star-rating {
        gap: 2px;
    }

    /* Reply thread margin reduced — max 1 level on mobile */
    .pxd-review-replies {
        margin-left: 16px;
    }

    .pxd-reply-form {
        margin-left: 16px;
    }

    /* Prevent nested replies from indenting further on mobile */
    .pxd-review-replies .pxd-review-replies {
        margin-left: 0;
    }

    /* Review text */
    .pxd-review-text {
        font-size: 13px;
    }

    /* Reply btn touch target */
    .pxd-reply-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-review-avatar {
        width: 28px;
        height: 28px;
    }

    .pxd-reply-avatar {
        width: 22px;
        height: 22px;
    }

    .pxd-reply-form-avatar {
        width: 22px;
        height: 22px;
    }

    .pxd-review-author {
        font-size: 12.5px;
    }

    .pxd-review-date {
        font-size: 11px;
    }

    .pxd-review-stars .pxd-star {
        width: 12px;
        height: 12px;
    }

    .pxd-reply-author {
        font-size: 12px;
    }

    .pxd-reply-text {
        font-size: 12.5px;
    }

    .pxd-review-summary-score {
        font-size: 1.15rem;
    }
}

/* ============================================
   16. CHAT WIDGET
   ============================================ */

/* --- Chat widget: glassmorphism --- */

.pxd-chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 900;
    width: 360px;
    max-height: 580px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12),
                0 2px 8px rgba(15, 163, 107, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    font-family: 'Urbanist', 'Inter', sans-serif;
}

.pxd-chat-widget--open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Header — green gradient */
.pxd-chat-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.pxd-chat-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.pxd-chat-header h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}

.pxd-chat-header h4 svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.pxd-chat-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    position: relative;
    z-index: 1;
}

.pxd-chat-toggle:hover {
    background: rgba(255, 255, 255, 0.28);
}

.pxd-chat-toggle svg {
    width: 16px;
    height: 16px;
}

/* Body */
.pxd-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.3);
}

.pxd-chat-body::-webkit-scrollbar {
    width: 5px;
}

.pxd-chat-body::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-chat-body::-webkit-scrollbar-thumb {
    background: rgba(15, 163, 107, 0.15);
    border-radius: 10px;
}

.pxd-chat-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 163, 107, 0.3);
}

/* Messages */
.pxd-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pxd-chat-message {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.pxd-chat-message .pxd-avatar--xs {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.12);
}

/* Bubble — glass card */
.pxd-chat-bubble {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px 12px 12px 4px;
    padding: 8px 12px;
    max-width: 240px;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    transition: box-shadow 0.2s ease;
}

.pxd-chat-bubble:hover {
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
}

.pxd-chat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.pxd-chat-meta strong {
    font-size: 12px;
    font-weight: 700;
    color: #012827;
    letter-spacing: 0.01em;
}

.pxd-chat-meta span {
    font-size: 10.5px;
    font-weight: 500;
    color: #778494;
}

.pxd-chat-bubble p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #2c3e50;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Own messages — green tint */
.pxd-chat-message--own {
    flex-direction: row-reverse;
}

.pxd-chat-message--own .pxd-chat-bubble {
    background: rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.15);
    border-radius: 12px 12px 4px 12px;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
}

.pxd-chat-message--own .pxd-chat-bubble:hover {
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.16);
}

.pxd-chat-message--own .pxd-chat-meta strong {
    color: #0d8c5a;
}

/* ── Message grouping ─────────────────────────────────── */

.pxd-chat-message--grouped {
    margin-top: -6px;
}

.pxd-chat-message--grouped .pxd-avatar--xs {
    visibility: hidden;
}

.pxd-chat-message--grouped .pxd-chat-meta {
    display: none;
}

.pxd-chat-message--grouped .pxd-chat-bubble {
    border-radius: 12px;
}

.pxd-chat-message--grouped.pxd-chat-message--own .pxd-chat-bubble {
    border-radius: 12px;
}

/* ── Date separators ──────────────────────────────────── */

.pxd-chat-date-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    padding: 0 4px;
}

.pxd-chat-date-sep::before,
.pxd-chat-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(15, 163, 107, 0.12);
}

.pxd-chat-date-sep span {
    font-size: 11px;
    font-weight: 600;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Empty state ──────────────────────────────────────── */

.pxd-chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    min-height: 280px;
}

.pxd-chat-empty-illustration {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
}

.pxd-chat-empty-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(15, 163, 107, 0.12) 0%, rgba(56, 193, 156, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(15, 163, 107, 0.1);
}

.pxd-chat-empty-icon-wrapper svg {
    width: 26px;
    height: 26px;
    color: #0fa36b;
    opacity: 0.6;
}

/* Decorative floating bubbles */
.pxd-chat-empty-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(15, 163, 107, 0.1);
}

.pxd-chat-empty-bubble--1 {
    width: 16px;
    height: 16px;
    top: 4px;
    right: 2px;
    opacity: 0.25;
    animation: pxd-chat-float 3s ease-in-out infinite alternate;
}

.pxd-chat-empty-bubble--2 {
    width: 12px;
    height: 12px;
    bottom: 8px;
    left: 4px;
    opacity: 0.18;
    animation: pxd-chat-float 3s ease-in-out infinite alternate;
    animation-delay: 0.8s;
}

.pxd-chat-empty-bubble--3 {
    width: 10px;
    height: 10px;
    top: 12px;
    left: 10px;
    opacity: 0.15;
    animation: pxd-chat-float 3s ease-in-out infinite alternate;
    animation-delay: 1.6s;
}

@keyframes pxd-chat-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

.pxd-chat-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #012827;
    margin: 0 0 4px;
}

.pxd-chat-empty-subtitle {
    font-size: 12.5px;
    font-weight: 400;
    color: #778494;
    margin: 0 0 16px;
    max-width: 240px;
    line-height: 1.5;
}

.pxd-chat-empty-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(15, 163, 107, 0.06);
    font-size: 11px;
    color: #5d7070;
}

.pxd-chat-empty-hint svg {
    width: 12px;
    height: 12px;
    color: #0fa36b;
}

.pxd-chat-empty-hint strong {
    color: #0fa36b;
    font-weight: 700;
}

/* ── Input bar — textarea ────────────────────────────── */

.pxd-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
    background: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    position: relative;
    align-items: flex-end;
}

.pxd-chat-input textarea {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 18px;
    font-family: 'Urbanist', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #012827;
    background: rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: none;
    min-height: 36px;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.4;
}

.pxd-chat-input textarea::placeholder {
    color: #778494;
    font-weight: 400;
}

.pxd-chat-input textarea:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.1);
}

.pxd-chat-input button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15, 163, 107, 0.2);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxd-chat-input button:hover {
    background: linear-gradient(135deg, #0d8c5a 25%, #2fb08a 100%);
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15, 163, 107, 0.3);
}

.pxd-chat-input button:active {
    background: linear-gradient(135deg, #0a7a4e 25%, #28a07e 100%);
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 2px 6px rgba(15, 163, 107, 0.2);
}

.pxd-chat-input button svg {
    width: 15px;
    height: 15px;
}

/* Send button feedback */
.pxd-chat-input button.pxd-chat-sending {
    opacity: 0.6;
    transform: scale(0.92);
    pointer-events: none;
}

/* ── Autocomplete popup ──────────────────────────────── */

.pxd-chat-ac {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 163, 107, 0.12);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(1, 40, 39, 0.08);
    z-index: 10;
    padding: 6px 0;
}

.pxd-chat-ac::-webkit-scrollbar {
    width: 4px;
}

.pxd-chat-ac::-webkit-scrollbar-thumb {
    background: rgba(15, 163, 107, 0.15);
    border-radius: 10px;
}

.pxd-chat-ac-group {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pxd-chat-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.pxd-chat-ac-item:hover,
.pxd-chat-ac-item--active {
    background: rgba(15, 163, 107, 0.06);
}

.pxd-chat-ac-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pxd-chat-ac-icon svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.pxd-chat-ac-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a2e2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ── Reference chips in messages ─────────────────────── */

.pxd-chat-ref {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(93, 112, 112, 0.1);
    color: #5d7070;
    cursor: pointer;
    transition: background 0.15s ease;
    vertical-align: baseline;
    line-height: 1.5;
}

.pxd-chat-ref--resolved {
    background: color-mix(in srgb, var(--ref-color, #5d7070) 12%, white);
    color: var(--ref-color, #5d7070);
}

.pxd-chat-ref:hover {
    background: color-mix(in srgb, var(--ref-color, #5d7070) 20%, white);
}

.pxd-chat-ref svg {
    width: 12px;
    height: 12px;
}

/* User mention styling */
.pixidia-chat-mention {
    color: #0d8c5a;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================
   CHAT WIDGET — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-chat-widget {
        width: 320px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-chat-widget {
        width: calc(100% - 24px);
        left: 12px;
        right: 12px;
        bottom: 80px;
        max-height: 70vh;
        border-radius: 14px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Shift up when virtual keyboard is open */
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.4s ease, bottom 0.2s ease;
    }

    .pxd-chat-body {
        min-height: 160px;
        padding: 12px;
    }

    .pxd-chat-bubble {
        max-width: 75%;
    }

    .pxd-chat-input {
        padding: 10px 12px;
        /* Safe area padding for notched iPhones */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .pxd-chat-input textarea {
        padding: 10px 14px;
        font-size: 14px;
        min-height: 44px;
    }

    .pxd-chat-input button {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .pxd-chat-header {
        padding: 12px 14px;
    }

    .pxd-chat-toggle {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pxd-chat-ac {
        max-height: 200px;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-chat-bubble {
        max-width: 85%;
    }

    .pxd-chat-bubble p {
        font-size: 14px;
        line-height: 1.5;
    }

    .pxd-chat-meta strong {
        font-size: 11.5px;
    }

    .pxd-chat-meta span {
        font-size: 10px;
    }

    .pxd-chat-header h4 {
        font-size: 13px;
    }
}
/* ============================================
   17. MAP OVERLAYS
   ============================================ */

.pxd-map-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.pxd-map-canvas {
    width: 100%;
    height: 100%;
}

/* Leaflet tiles — remove any inherited borders/outlines */
.pxd-map-canvas img,
.leaflet-tile,
.leaflet-tile-pane img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline (prevents black rectangle on click/tab) */
.leaflet-container:focus,
.leaflet-container:focus-visible {
    outline: none !important;
}

.pxd-map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 500;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0.45rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.65);
    transition: box-shadow 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.pxd-map-legend:hover {
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.18), 0 5px 15px rgba(15, 163, 107, 0.08);
}

.pxd-legend-item {
    display: grid;
    grid-template-columns: 24px auto auto;
    align-items: center;
    gap: 0 5px;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    color: #012827;
    user-select: none;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.07);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    animation: pxd-legendFadeUp 0.5s ease forwards;
    opacity: 0;
}

.pxd-legend-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
    opacity: 0.6;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.pxd-legend-item:nth-child(1) { animation-delay: 0.05s; }
.pxd-legend-item:nth-child(2) { animation-delay: 0.1s; }
.pxd-legend-item:nth-child(3) { animation-delay: 0.15s; }
.pxd-legend-item:nth-child(4) { animation-delay: 0.2s; }
.pxd-legend-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes pxd-legendFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pxd-legend-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.pxd-legend-item:hover::before {
    opacity: 0.9;
}

/* --- Inactive state (not .active) --- */
.pxd-legend-item:not(.active) {
    background: rgba(240, 242, 245, 0.6);
    border-color: rgba(200, 205, 212, 0.4);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pxd-legend-item:not(.active) .pxd-legend-dot {
    background-color: #b0b8c4 !important;
    box-shadow: none;
}

.pxd-legend-item:not(.active) svg,
.pxd-legend-item:not(.active) i {
    color: rgba(255, 255, 255, 0.6);
}

.pxd-legend-item:not(.active) .pxd-legend-label {
    color: #b0b8c4;
}

.pxd-legend-item:not(.active) .pxd-legend-count {
    color: #b0b8c4;
    background: rgba(176, 184, 196, 0.12);
}

.pxd-legend-item:not(.active):hover {
    transform: translateY(-1px);
    background: rgba(245, 247, 250, 0.8);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.06);
}

.pxd-legend-item:not(.active):hover .pxd-legend-dot {
    transform: none;
}

.pxd-legend-item:not(.active):hover .pxd-legend-label {
    color: #8a93a1;
}

.pxd-legend-dot {
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 0 3px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.pxd-legend-item:hover .pxd-legend-dot {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(0, 0, 0, 0.15);
}

.pxd-map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pxd-map-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: white;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pixidia-text);
}

.pxd-map-btn:hover {
    background: var(--pixidia-gray-50);
}

.pxd-map-btn.active {
    background: var(--pixidia-green);
    color: white;
}

.pxd-map-btn svg {
    width: 18px;
    height: 18px;
}

/* Popups carte Leaflet — matches single-plugin popup pattern */
.pxd-map-popup .leaflet-popup-content-wrapper {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pxd-map-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

.pxd-map-popup .leaflet-popup-tip-container {
    text-align: center;
    margin-left: -20px;
    left: 50%;
}

.pxd-map-popup .leaflet-popup-tip {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    margin: -10px auto 0;
}

/* Rich popup container */
.pxd-popup-rich {
    display: flex;
    flex-direction: column;
}

.pxd-popup-photo {
    width: 100%;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.pxd-popup-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pxd-popup-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Type badge */
.pxd-popup-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 50px);
    width: fit-content;
}

/* Title */
.pxd-popup-rich .pxd-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-text, #1a1a1a);
    line-height: 1.3;
    margin: 0;
}

/* Rating row: score + stars + count */
.pxd-popup-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pxd-popup-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-text, #1a1a1a);
}

.pxd-popup-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.pxd-popup-star {
    width: 13px;
    height: 13px;
}

.pxd-popup-star--full { fill: #fbbc04; }
.pxd-popup-star--half { fill: url(#ph); }
.pxd-popup-star--empty { fill: #e0e0e0; }

.pxd-popup-count {
    font-size: 11px;
    color: var(--pixidia-text-muted, #888);
    margin-left: 2px;
}

/* Address */
.pxd-popup-rich .pxd-popup-address {
    font-size: 11.5px;
    color: var(--pixidia-text-muted, #888);
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
}

.pxd-popup-rich .pxd-popup-address svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Google Maps CTA button */
.pxd-popup-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    margin-top: 4px;
    border-radius: var(--radius-full, 50px);
    background: white;
    border: 1.5px solid var(--pixidia-gray-200, #e0e0e0);
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-text, #1a1a1a);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pxd-popup-cta:hover {
    border-color: #4285F4;
    color: #4285F4;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

.pxd-popup-cta svg:last-child {
    opacity: 0.4;
    transition: opacity 0.2s;
}

.pxd-popup-cta:hover svg:last-child {
    opacity: 1;
}

/* Tooltips carte Leaflet (hover) — style nav-label */
.pxd-map-tooltip {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%) !important;
    color: white !important;
    font-family: 'Urbanist', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    letter-spacing: 0.01em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-map-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #38c19c;
    box-shadow: none;
    border: none;
}

/* Override Leaflet default tooltip arrow */
.pxd-map-tooltip.leaflet-tooltip-top::before {
    border: none !important;
    margin: 0 !important;
}

.pxd-map-tooltip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.pxd-map-tooltip-label {
    color: white;
    line-height: 1.2;
}

/* Route segment tooltips (hover on polylines) */
.pxd-route-tooltip {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--pixidia-text, #333) !important;
    font-family: 'Urbanist', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pxd-route-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: none;
}

.pxd-route-tooltip.leaflet-tooltip-top::before {
    border: none !important;
    margin: 0 !important;
}

.pxd-route-tooltip-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-route-tooltip-inner strong {
    font-weight: 700;
    color: var(--pixidia-text, #333);
}

.pxd-route-tooltip-sep {
    color: var(--pixidia-text-muted, #bbb);
    font-weight: 300;
}

.pxd-route-tooltip-step {
    background: var(--pixidia-green, #1E9B52);
    color: white;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.pxd-route-tooltip-meta {
    color: var(--pixidia-text-muted, #666);
    font-weight: 500;
}

/* Directional arrows on route segments */
.pxd-route-arrow {
    background: transparent !important;
    border: none !important;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ============================================
   18. MOBILE MAP TOGGLE
   ============================================ */

.pxd-mobile-map-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 950;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    background: var(--pixidia-blue);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    cursor: pointer;
    gap: 8px;
    align-items: center;
    /* Ensure minimum 44px touch target */
    min-height: 44px;
}

.pxd-mobile-map-toggle svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .pxd-mobile-map-toggle {
        display: flex;
    }
}

/* ============================================
   MAP BOTTOM SHEET - MOBILE (<768px)
   ============================================ */

/* Drag handle for map bottom sheet */
.pxd-map-drag-handle {
    display: none;
}

@media (max-width: 768px) {
    .pxd-map-drag-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 6px;
        cursor: grab;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 601;
        background: transparent;
        /* Enlarged touch area */
        min-height: 28px;
    }

    .pxd-map-drag-handle:active {
        cursor: grabbing;
    }

    .pxd-map-drag-handle::after {
        content: '';
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--pixidia-gray-300, #b8c5c5);
    }

    .pxd-panel-right {
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }

    /* Snap positions via JS-set classes */
    .pxd-panel-right.pxd-map-peek {
        height: 20vh !important;
    }

    .pxd-panel-right.pxd-map-half {
        height: 50vh !important;
    }

    .pxd-panel-right.pxd-map-full {
        height: 90vh !important;
    }

    /* Legend: compact, horizontal scroll in all mobile modes */
    .pxd-map-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        bottom: 6px;
        left: 8px;
        right: 8px;
        padding: 0.3rem;
        /* Ensure it doesn't overlap Leaflet zoom controls (top-left) */
        max-height: 48px;
    }

    .pxd-map-legend::-webkit-scrollbar {
        display: none;
    }

    .pxd-legend-item {
        flex-shrink: 0;
        padding: 0.25rem 0.4rem;
        font-size: 11px;
        /* 44px min touch target height */
        min-height: 36px;
    }

    /* Legend label hidden in peek mode to save space */
    .pxd-map-peek .pxd-legend-label {
        display: none;
    }

    /* Reposition zoom controls when map is expanded */
    .pxd-map-full .pxd-map-controls,
    .pxd-map-half .pxd-map-controls {
        top: 16px;
        right: 12px;
    }

    /* Leaflet popups: narrower on mobile */
    .pxd-map-popup .leaflet-popup-content {
        width: 230px !important;
    }

    .pxd-popup-photo {
        height: 110px;
    }

    .pxd-popup-body {
        padding: 12px 14px 14px;
    }

    .pxd-popup-rich .pxd-popup-title {
        font-size: 14px;
    }

    /* Marker tap area: enlarge via padding on the icon container */
    .pxd-marker-icon {
        padding: 6px;
        box-sizing: content-box;
    }

    /* Map panel transition */
    .pxd-panel-right {
        transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
   SHARE MODAL
   ============================================ */

.pxd-modal--share {
    max-width: 440px;
}

.pxd-modal--share .pxd-modal-body {
    padding: 20px 24px 24px;
}

/* Copy link row */
.pxd-share-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.pxd-share-link-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--pixidia-gray-200, #d5dfdf);
    border-radius: 10px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    color: var(--pixidia-gray-700, #3a5252);
    background: var(--pixidia-gray-50, #f5f8f8);
    outline: none;
    min-width: 0;
}

.pxd-share-link-input:focus {
    border-color: var(--pixidia-secondary, #1E9B52);
}

.pxd-share-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    background: var(--pixidia-primary, #0A3D3A);
    color: #fff;
    transition: background 200ms ease, transform 100ms ease;
}

.pxd-share-copy-btn:hover {
    background: var(--pixidia-primary-dark, #072e2c);
}

.pxd-share-copy-btn:active {
    transform: scale(0.97);
}

.pxd-share-copy-btn--copied {
    background: var(--pixidia-secondary, #1E9B52) !important;
}

.pxd-share-copy-btn svg,
.pxd-share-copy-btn i {
    width: 16px;
    height: 16px;
}

/* Label */
.pxd-share-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pixidia-gray-500, #6b8585);
    margin: 0 0 12px;
}

/* Social buttons grid */
.pxd-share-socials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .pxd-share-socials {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pxd-share-social-btn {
        min-height: 72px;
        padding: 16px 8px;
    }

    .pxd-share-link-row {
        flex-direction: column;
        gap: 8px;
    }

    .pxd-share-copy-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

.pxd-share-social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--pixidia-gray-200, #d5dfdf);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pixidia-gray-700, #3a5252);
    transition: border-color 200ms ease, background 200ms ease, transform 100ms ease;
}

.pxd-share-social-btn:hover {
    border-color: var(--pixidia-gray-300, #b8c5c5);
    background: var(--pixidia-gray-50, #f5f8f8);
}

.pxd-share-social-btn:active {
    transform: scale(0.96);
}

.pxd-share-social-btn svg,
.pxd-share-social-btn i {
    width: 22px;
    height: 22px;
}

/* Social brand colors */
.pxd-share-social-btn--whatsapp svg { color: #25D366; }
.pxd-share-social-btn--facebook svg { color: #1877F2; }
.pxd-share-social-btn--twitter svg  { color: #000; }
.pxd-share-social-btn--email svg,
.pxd-share-social-btn--email i      { color: var(--pixidia-primary, #0A3D3A); }

/* ============================================
   IMAGE MODAL — Unsplash Grid Spinner
   ============================================ */

.pxd-img-grid-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.pxd-img-grid-spinner-circle {
    width: 40px;
    height: 40px;
    border: 3px solid var(--pixidia-gray-200, #d5dfdf);
    border-top-color: var(--pixidia-secondary, #1E9B52);
    border-radius: 50%;
    animation: pxd-spin 0.8s linear infinite;
}

.pxd-img-grid-spinner-label {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pixidia-gray-500, #6b8585);
}

@keyframes pxd-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   IMAGE MODAL — Upload Progress Spinner
   ============================================ */

.pxd-img-upload-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
}

.pxd-img-upload-progress-circle {
    position: relative;
    width: 72px;
    height: 72px;
}

.pxd-img-upload-progress-circle svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
}

.pxd-img-progress-track {
    fill: none;
    stroke: var(--pixidia-gray-200, #d5dfdf);
    stroke-width: 4;
}

.pxd-img-progress-fill {
    fill: none;
    stroke: var(--pixidia-secondary, #1E9B52);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.pxd-img-progress-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pixidia-secondary, #1E9B52);
}

.pxd-img-progress-icon svg,
.pxd-img-progress-icon i {
    width: 24px;
    height: 24px;
}

.pxd-img-upload-progress-label {
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pixidia-gray-700, #3a5252);
}

.pxd-img-upload-progress-step {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pixidia-gray-400, #8fa3a3);
}

/* ============================================
   IMAGE MODAL — Portrait Error State
   ============================================ */

.pxd-img-dropzone-icon--error {
    color: var(--pixidia-error, #e53e3e);
}

.pxd-img-dropzone-icon--error svg,
.pxd-img-dropzone-icon--error i {
    width: 48px;
    height: 48px;
}

.pxd-img-dropzone-title--error {
    color: var(--pixidia-error, #e53e3e);
    font-weight: 700;
}

.pxd-img-dropzone-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--pixidia-gray-300, #b8c5c5);
    border-radius: 8px;
    background: #fff;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pixidia-gray-700, #3a5252);
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}

.pxd-img-dropzone-retry:hover {
    border-color: var(--pixidia-secondary, #1E9B52);
    background: var(--pixidia-gray-50, #f5f8f8);
}

.pxd-img-dropzone-retry svg,
.pxd-img-dropzone-retry i {
    width: 16px;
    height: 16px;
}

/* ============================================
   MODALS - Responsive Styles
   ============================================ */

/* ============================================
   MOBILE MODALS (<768px) - Bottom Sheet Style
   ============================================ */

@media (max-width: 768px) {
    .pxd-modal-overlay {
        align-items: flex-end !important;
    }

    .pxd-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        animation: pxd-modal-slide-up 300ms var(--ease-smooth) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Drag handle indicator for modals */
    .pxd-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--pixidia-gray-300, #b8c5c5);
        margin: 8px auto 4px;
        flex-shrink: 0;
    }

    .pxd-modal-body {
        max-height: calc(90vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pxd-img-upload-progress {
        padding: 30px 16px;
    }

    .pxd-img-grid-spinner {
        padding: 40px 16px;
    }

    /* Confirm modals stay centered but still bottom-sheet */
    .pxd-modal--confirm {
        max-height: 80vh;
    }

    /* Confirm modal buttons: large touch targets with good spacing */
    .pxd-modal--confirm .pxd-modal-actions,
    .pxd-modal--confirm .pxd-modal-footer {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .pxd-modal--confirm .pxd-btn {
        min-height: 48px;
        width: 100%;
        justify-content: center;
        font-size: 15px;
    }

    /* Image modal: responsive Unsplash grid */
    .pxd-img-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Share modal: show on 768px as proper bottom-sheet */
    .pxd-modal--share .pxd-modal-body {
        padding: 16px;
    }

    @keyframes pxd-modal-slide-up {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* ============================================
   SMALL MOBILE MODALS (<=480px) - True Full Screen
   ============================================ */

@media (max-width: 480px) {
    .pxd-modal {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0 !important;
    }

    .pxd-modal::before {
        display: none;
    }

    .pxd-modal-body {
        max-height: calc(100vh - 140px);
        flex: 1;
    }

    .pxd-img-upload-progress {
        padding: 24px 12px;
    }

    .pxd-img-upload-progress-circle {
        width: 60px;
        height: 60px;
    }

    .pxd-img-upload-progress-circle svg {
        width: 60px;
        height: 60px;
    }

    /* Confirm modals keep some spacing on small screens */
    .pxd-modal--confirm {
        height: auto;
        max-height: 100vh;
        border-radius: 0 !important;
    }
}
/**
 * 36-view-toggle.css - Author/Visitor/Collaborator mode visibility rules
 *
 * The .pxd-view-toggle dev widget is HIDDEN in production.
 * Body class-based mode rules remain active for server-side rendering.
 */

/* Dev toggle widget — hidden in production */
.pxd-view-toggle {
    display: none !important;
}

/* ============================================
   MODE VISIBILITY RULES
   Applied via body class set server-side (PHP)
   ============================================ */

/* Mode auteur : masquer/afficher les elements */
body:not(.pxd-mode-author) .pxd-author-only {
    display: none !important;
}

/* Mode collaborateur : masquer éléments exclusifs auteur */
body.pxd-mode-collaborator .pxd-hide-collaborator {
    display: none !important;
}

/* Mode collaborateur : afficher éléments exclusifs collaborateur */
body:not(.pxd-mode-collaborator) .pxd-collaborator-only {
    display: none !important;
}

/* Visible pour auteur ET collaborateur, masqué pour visiteur */
body:not(.pxd-mode-author):not(.pxd-mode-collaborator) .pxd-collab-action {
    display: none !important;
}
/* ============================================
   19. ETAT VIDE
   ============================================ */

.pxd-empty-state {
    padding: 32px;
    text-align: center;
    color: var(--pixidia-text-muted);
    grid-column: 1 / -1;
}

.pxd-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
    color: var(--pixidia-gray-400);
}

.pxd-empty-state p {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.pxd-empty-state .pxd-btn--primary {
    margin-top: 16px;
}

/* ============================================
   20. RESPONSIVE OVERRIDES (cross-component)
   ============================================ */

/* === Tablet (768-1200px) === */
@media (max-width: 1200px) and (min-width: 769px) {
    /* Enrichir panel */
    .pxd-enrichir {
        margin: 10px;
        padding: 18px;
    }
}

/* === Mobile (<768px) === */
@media (max-width: 768px) {
    /* Reservations */
    .pxd-res-columns {
        grid-template-columns: 1fr;
    }

    /* Expenses */
    .pxd-dep-form-row {
        flex-direction: column;
    }
    .pxd-dep-input--sm {
        flex: 1;
    }

    /* Budget */
    .pxd-budget-content {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .pxd-budget-donut {
        width: 170px;
    }

    .pxd-budget-breakdown {
        width: 100%;
    }

    /* Chat */
    .pxd-chat-widget {
        width: calc(100% - 32px);
        right: 16px;
        left: 16px;
        bottom: 80px;
    }

    /* Enrichir panel */
    .pxd-enrichir {
        margin: 8px;
        padding: 16px;
    }

    .pxd-enrichir-actions {
        flex-direction: column;
    }

    /* Empty state mobile */
    .pxd-empty-state {
        padding: 24px 16px;
    }

    .pxd-empty-state svg {
        width: 40px;
        height: 40px;
    }

    .pxd-empty-state p {
        font-size: 13px;
    }

    /* Glassmorphism perf: reduce blur and shadow on mobile */
    .pxd-glass {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: var(--shadow-sm);
    }
}

/* === Small Mobile (<=480px) === */
@media (max-width: 480px) {
    .pxd-budget-donut {
        width: 150px;
    }

    /* Empty state */
    .pxd-empty-state {
        padding: 20px 12px;
    }

    .pxd-empty-state svg {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
    }

    .pxd-empty-state p {
        font-size: 12.5px;
    }
}

/* === Extreme small (<=320px) — prevent horizontal overflow === */
@media (max-width: 320px) {
    /* Prevent any fixed-width element from causing overflow */
    .pxd-budget-donut {
        width: 130px;
        height: 130px;
    }

    .pxd-budget-donut-center {
        inset: 20px;
    }

    /* Infocard grid: single column on tiny screens */
    .pxd-infocard-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cards: force single column */
    .pxd-cards-grid--2col,
    .pxd-cards-grid--3col,
    .pxd-cards-grid--2col-transport {
        grid-template-columns: 1fr !important;
    }

    /* Vehicle card 2-col details: collapse to 1 col */
    .pxd-card--wide .pxd-card-details--2col {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* Section padding reduction */
    .pxd-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Header pill full width */
    .pxd-header-pill {
        width: 100%;
    }

    /* Hero action buttons: wrap on tiny screens */
    .pxd-hero-actions {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* === Desktop large (>1200px) — line clamp only === */
@media (min-width: 1201px) {
    .pxd-cc-content--clamped {
        -webkit-line-clamp: 6;
    }
}
/**
 * animations.css - Pixidia Itinerary Split-View Prototype
 * Transitions, keyframe animations, and reduced motion.
 * Relies on variables.css for design tokens (durations, easings, colors).
 */

/* ============================================
   TRANSITIONS DE BASE
   ============================================ */

.pxd-card {
    transition:
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.pxd-nav-item {
    transition:
        color var(--duration-fast),
        background var(--duration-fast),
        border-color var(--duration-fast);
}

.pxd-day-pill {
    transition: all var(--duration-normal) var(--ease-smooth);
}

.pxd-card-locate {
    transition: opacity var(--duration-fast),
                background var(--duration-fast),
                border-color var(--duration-fast),
                transform var(--duration-fast);
}

.pxd-btn-icon {
    transition: background var(--duration-fast);
}

.pxd-enrichir-btn {
    transition:
        border-color var(--duration-fast),
        box-shadow var(--duration-fast);
}

.pxd-view-btn {
    transition: all var(--duration-normal) var(--ease-smooth);
}

.pxd-btn--primary,
.pxd-btn--outline {
    transition:
        background var(--duration-fast),
        border-color var(--duration-fast),
        color var(--duration-fast),
        box-shadow var(--duration-fast);
}

.pxd-map-btn {
    transition:
        background var(--duration-fast),
        color var(--duration-fast);
}

.pxd-legend-item {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxd-star {
    transition: color var(--duration-fast);
}

.pxd-chat-input button {
    transition: background var(--duration-fast);
}

.pxd-reservation-badge {
    transition: background var(--duration-fast);
}

/* ============================================
   CARD HIGHLIGHT (map -> card sync)
   ============================================ */

@keyframes pxd-highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 141, 62, 0.5), var(--shadow-lg);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(32, 141, 62, 0), var(--shadow-lg);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(32, 141, 62, 0), var(--shadow-sm);
    }
}

.pxd-card--highlighted {
    animation: pxd-highlight-pulse 2s ease-out;
}

/* ============================================
   SECTION FADE IN
   ============================================ */

@keyframes pxd-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pxd-section {
    animation: pxd-fade-in-up 0.4s var(--ease-smooth) both;
}

/* Stagger sections for sequential appearance */
.pxd-section:nth-child(1) { animation-delay: 0s; }
.pxd-section:nth-child(2) { animation-delay: 0.06s; }
.pxd-section:nth-child(3) { animation-delay: 0.12s; }
.pxd-section:nth-child(4) { animation-delay: 0.18s; }
.pxd-section:nth-child(5) { animation-delay: 0.24s; }
.pxd-section:nth-child(6) { animation-delay: 0.30s; }
.pxd-section:nth-child(7) { animation-delay: 0.36s; }
.pxd-section:nth-child(8) { animation-delay: 0.42s; }

/* ============================================
   MARKER BOUNCE (for JS to add class)
   ============================================ */

@keyframes pxd-marker-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-14px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-7px);
    }
}

.pxd-marker-bouncing {
    animation: pxd-marker-bounce 0.6s var(--ease-bounce);
}

/* ============================================
   MARKER APPEAR (on map load / filter)
   ============================================ */

@keyframes pxd-marker-appear {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pxd-marker-entering {
    animation: pxd-marker-appear 0.3s var(--ease-smooth);
}

/* ============================================
   GLASSMORPHISM TRANSITIONS
   ============================================ */

.pxd-glass {
    transition:
        background var(--duration-normal) var(--ease-smooth),
        backdrop-filter var(--duration-normal);
}

/* ============================================
   SKELETON LOADING
   ============================================ */

@keyframes pxd-shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

.pxd-skeleton {
    background: linear-gradient(
        90deg,
        var(--pixidia-gray-100) 25%,
        var(--pixidia-gray-50) 50%,
        var(--pixidia-gray-100) 75%
    );
    background-size: 400px 100%;
    animation: pxd-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.pxd-skeleton--text {
    height: 14px;
    width: 80%;
    margin-bottom: 8px;
}

.pxd-skeleton--title {
    height: 20px;
    width: 60%;
    margin-bottom: 12px;
}

.pxd-skeleton--avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.pxd-skeleton--card {
    height: 120px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
}

/* Aliases for JS compatibility */
.pxd-skeleton-line {
    height: 14px;
    width: 80%;
    margin-bottom: 8px;
    background: linear-gradient(
        90deg,
        var(--pixidia-gray-100) 25%,
        var(--pixidia-gray-50) 50%,
        var(--pixidia-gray-100) 75%
    );
    background-size: 400px 100%;
    animation: pxd-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.pxd-skeleton-circle {
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        var(--pixidia-gray-100) 25%,
        var(--pixidia-gray-50) 50%,
        var(--pixidia-gray-100) 75%
    );
    background-size: 400px 100%;
    animation: pxd-shimmer 1.5s infinite;
}

/* ============================================
   MOBILE MAP SLIDE
   ============================================ */

.pxd-right {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

/* ============================================
   DAY PILL PULSE (current day indicator)
   ============================================ */

@keyframes pxd-pill-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(32, 141, 62, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(32, 141, 62, 0);
    }
}

.pxd-day-pill--current.active {
    animation: pxd-pill-pulse 2s ease-in-out infinite;
}

/* ============================================
   DONUT CHART ANIMATION
   ============================================ */

@keyframes pxd-donut-spin {
    from {
        transform: rotate(-90deg);
    }
    to {
        transform: rotate(270deg);
    }
}

.pxd-budget-chart--animated {
    animation: pxd-donut-spin 1s var(--ease-smooth) forwards;
}

/* Budget bar fill animation */
@keyframes pxd-bar-fill {
    from {
        width: 0;
    }
}

.pxd-budget-bar-fill {
    animation: pxd-bar-fill 0.6s var(--ease-smooth) both;
}

.pxd-budget-row:nth-child(1) .pxd-budget-bar-fill { animation-delay: 0.1s; }
.pxd-budget-row:nth-child(2) .pxd-budget-bar-fill { animation-delay: 0.2s; }
.pxd-budget-row:nth-child(3) .pxd-budget-bar-fill { animation-delay: 0.3s; }
.pxd-budget-row:nth-child(4) .pxd-budget-bar-fill { animation-delay: 0.4s; }
.pxd-budget-row:nth-child(5) .pxd-budget-bar-fill { animation-delay: 0.5s; }

/* ============================================
   CHAT WIDGET SLIDE
   ============================================ */

@keyframes pxd-chat-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pxd-chat-widget {
    animation: pxd-chat-slide-up 0.3s var(--ease-smooth);
}

/* ============================================
   HERO IMAGE PARALLAX HINT
   ============================================ */

@keyframes pxd-hero-zoom {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}

.pxd-hero-image {
    animation: pxd-hero-zoom 0.8s var(--ease-smooth);
}

/* ============================================
   TOOLTIP FADE
   ============================================ */

@keyframes pxd-tooltip-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pxd-tooltip {
    animation: pxd-tooltip-fade 0.2s var(--ease-smooth);
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

@keyframes pxd-scroll-hint {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(4px);
    }
}

.pxd-scroll-indicator {
    animation: pxd-scroll-hint 2s ease-in-out infinite;
}

/* ============================================
   MOBILE: REDUCED ANIMATION INTENSITY
   Smaller transforms, shorter durations on
   mobile even without reduced-motion preference
   ============================================ */

@media (max-width: 768px) {
    /* Reduce section stagger */
    .pxd-section {
        animation-duration: 0.25s;
    }

    .pxd-section:nth-child(1) { animation-delay: 0s; }
    .pxd-section:nth-child(2) { animation-delay: 0.03s; }
    .pxd-section:nth-child(3) { animation-delay: 0.06s; }
    .pxd-section:nth-child(4) { animation-delay: 0.09s; }
    .pxd-section:nth-child(5) { animation-delay: 0.12s; }
    .pxd-section:nth-child(6) { animation-delay: 0.15s; }
    .pxd-section:nth-child(7) { animation-delay: 0.18s; }
    .pxd-section:nth-child(8) { animation-delay: 0.21s; }

    /* Smaller translate on fade-in-up */
    @keyframes pxd-fade-in-up {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Reduce marker bounce */
    @keyframes pxd-marker-bounce {
        0%, 100% { transform: translateY(0); }
        25% { transform: translateY(-8px); }
        50% { transform: translateY(0); }
        75% { transform: translateY(-4px); }
    }

    /* Reduce highlight pulse radius */
    @keyframes pxd-highlight-pulse {
        0% { box-shadow: 0 0 0 0 rgba(32, 141, 62, 0.4), var(--shadow-sm); }
        70% { box-shadow: 0 0 0 6px rgba(32, 141, 62, 0), var(--shadow-sm); }
        100% { box-shadow: 0 0 0 0 rgba(32, 141, 62, 0), var(--shadow-sm); }
    }

    /* Shorten hero zoom */
    .pxd-hero-image {
        animation-duration: 0.4s;
    }

    /* Reduce chat slide */
    @keyframes pxd-chat-slide-up {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Reduce hover transforms */
    .pxd-card:hover {
        transform: none;
    }

    .pxd-legend-item {
        transition-duration: 0.2s;
    }

    /* Reduce modal animation */
    @keyframes pxd-modalSlideUp {
        from { opacity: 0; transform: translateY(10px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Reduce donut animation */
    .pxd-budget-chart--animated {
        animation-duration: 0.5s;
    }

    /* Reduce shimmer for battery savings */
    .pxd-skeleton {
        animation-duration: 2s;
    }
}

/* ============================================
   RESPECT PREFERS-REDUCED-MOTION
   Complete accessibility block: disable or
   minimize ALL animations and transitions
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Specifically disable infinite animations */
    .pxd-day-pill--current.active,
    .pxd-scroll-indicator,
    .pxd-modal-total-value.error,
    .pxd-skeleton {
        animation: none !important;
    }

    /* Remove hover transforms */
    .pxd-card:hover,
    .pxd-modal-btn--save:hover,
    .pxd-modal-btn--danger:hover,
    .pxd-dep-manage-btn:hover,
    .pxd-chat-input button:hover,
    .pxd-exp-action-btn--add-participant:hover,
    .pxd-exp-action-btn--manage-users:hover,
    .pxd-alloc-slider::-webkit-slider-thumb:hover,
    .pxd-legend-item:hover {
        transform: none !important;
    }

    /* Remove parallax and zoom */
    .pxd-hero-image {
        animation: none !important;
        transform: none !important;
    }

    /* Ensure chat widget is immediately visible when open */
    .pxd-chat-widget--open {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }

    /* Modal appears instantly */
    .pxd-modal-overlay.open {
        animation: none !important;
    }

    .pxd-modal {
        animation: none !important;
    }

    /* Budget rows appear instantly */
    .pxd-budget-row,
    .pxd-dep-participant,
    .pxd-review-card,
    .pxd-reply,
    .pxd-reply--new,
    .pxd-rating-confirmation.active,
    .pxd-comment-section.active {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Sections appear instantly */
    .pxd-section {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Sub-panel appears instantly */
    .pxd-exp-subpanel.open {
        transition: none !important;
    }

    /* Dropdown appears instantly */
    .pxd-exp-custom-select.open .pxd-exp-select-options {
        animation: none !important;
    }

    /* Remove box-shadow transitions for performance */
    .pxd-budget-row,
    .pxd-dep-participant,
    .pxd-review-card,
    .pxd-alloc-row {
        transition: none !important;
    }
}
/* ======================================================================
 * 41-weather.css — Weather modal
 *
 * Architecture:
 *   .pxd-modal--weather           wide modal container (max-width 960px)
 *   .pxd-modal-header-actions     wraps unit toggle + close btn
 *   .pxd-weather-unit-toggle      inline °C/°F pill switch (header)
 *   .pxd-weather-content          layout root
 *   .pxd-weather-mode-badge       status chip (forecast/climatology/archive)
 *   .pxd-weather-points-tabs      horizontal tabs when ≥2 points
 *   .pxd-weather-current          hero card for live conditions
 *   .pxd-weather-daily-strip      responsive grid of day cards
 *
 * Prefixed with `pxd-weather-*` to avoid BuddyX / Elementor conflicts.
 * ==================================================================== */

/* ── Modal container ─────────────────────────────────────────── */
.pxd-modal--weather {
    max-width: 960px;
    width: 96vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pxd-modal--weather .pxd-modal-body {
    padding: 0 24px 24px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0d8d8 transparent;
}
.pxd-modal--weather .pxd-modal-body::-webkit-scrollbar { width: 6px; }
.pxd-modal--weather .pxd-modal-body::-webkit-scrollbar-thumb { background: #d0d8d8; border-radius: 4px; }

/* Header adjustments */
.pxd-modal--weather .pxd-modal-header {
    gap: 16px;
    align-items: center;
}
.pxd-modal--weather .pxd-modal-header-left h3 { margin: 0; }
.pxd-weather-modal-subtitle {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: #6b7a7a;
    font-weight: 500;
}
.pxd-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

/* Section icon weather accent */
.pxd-section-icon--weather {
    background: linear-gradient(135deg, #0A3D3A 0%, #1e9b52 100%) !important;
    color: #fff;
}

/* ── Unit toggle (header, local) ──────────────────────────────── */
.pxd-weather-unit-toggle {
    position: relative;
    display: inline-flex;
    background: #f0f4f4;
    border: 1px solid #dce4e4;
    border-radius: 999px;
    padding: 3px;
    box-shadow: inset 0 1px 2px rgba(10,61,58,0.05);
}
.pxd-weather-unit-btn {
    position: relative;
    z-index: 2;
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #6b7a7a;
    cursor: pointer;
    border-radius: 999px;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pxd-weather-unit-btn:hover:not(.is-active) {
    color: #0A3D3A;
}
.pxd-weather-unit-btn.is-active {
    color: #fff;
}
.pxd-weather-unit-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    bottom: 3px;
    background: linear-gradient(135deg, #0A3D3A 0%, #15564f 100%);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(10,61,58,0.25);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}
.pxd-weather-unit-toggle[data-unit="F"] .pxd-weather-unit-indicator {
    transform: translateX(100%);
}

/* ── States (loading / error) ─────────────────────────────────── */
.pxd-weather-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 260px;
    text-align: center;
    color: #6b7a7a;
    padding: 40px 20px;
}
.pxd-weather-state[hidden] { display: none; }
.pxd-weather-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e3eaea;
    border-top-color: #0A3D3A;
    border-radius: 50%;
    animation: pxd-weather-spin 900ms linear infinite;
}
@keyframes pxd-weather-spin { to { transform: rotate(360deg); } }
.pxd-weather-state--error i {
    width: 44px;
    height: 44px;
    color: #b0bcbc;
}
.pxd-weather-retry-btn {
    border: 1px solid #0A3D3A;
    background: #fff;
    color: #0A3D3A;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}
.pxd-weather-retry-btn:hover {
    background: #0A3D3A;
    color: #fff;
}

/* ── Content root ─────────────────────────────────────────────── */
.pxd-weather-content[hidden] { display: none; }
.pxd-weather-content {
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Mode badge ───────────────────────────────────────────────── */
.pxd-weather-mode-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.pxd-weather-mode-badge--current {
    background: linear-gradient(135deg, #fff7e6 0%, #fff1d4 100%);
    color: #a36a00;
    border-color: #ffd98a;
}
.pxd-weather-mode-badge--forecast {
    background: linear-gradient(135deg, #e4f5ec 0%, #d5efdf 100%);
    color: #0f6b37;
    border-color: #9fd6b2;
}
.pxd-weather-mode-badge--climatology {
    background: linear-gradient(135deg, #eef1fb 0%, #e0e6f5 100%);
    color: #3b4686;
    border-color: #b9c1e3;
}
.pxd-weather-mode-badge--archive {
    background: linear-gradient(135deg, #f2efe9 0%, #e8e4dc 100%);
    color: #6b5a3d;
    border-color: #cec2a6;
}

/* ── Points tabs ──────────────────────────────────────────────── */
.pxd-weather-points-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.pxd-weather-points-tabs::-webkit-scrollbar { display: none; }
.pxd-weather-points-tabs[hidden] { display: none; }
.pxd-weather-point-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dce4e4;
    background: #fff;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: #3d4a4a;
    cursor: pointer;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pxd-weather-point-tab:hover {
    border-color: #0A3D3A;
    color: #0A3D3A;
}
.pxd-weather-point-tab.is-active {
    background: linear-gradient(135deg, #0A3D3A 0%, #15564f 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(10,61,58,0.2);
}
.pxd-weather-point-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(10,61,58,0.08);
    color: #0A3D3A;
    font-size: 0.72rem;
    font-weight: 700;
}
.pxd-weather-point-tab.is-active .pxd-weather-point-tab__count {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

/* ── Current conditions card ──────────────────────────────────── */
.pxd-weather-current[hidden] { display: none; }
.pxd-weather-current {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px 28px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(10,61,58,0.94) 0%, rgba(30,155,82,0.88) 100%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18), transparent 60%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(10,61,58,0.15);
    position: relative;
    overflow: hidden;
}
.pxd-weather-current::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.pxd-weather-current__icon {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.14);
    border-radius: 50%;
    backdrop-filter: blur(8px);
}
.pxd-weather-current__icon svg,
.pxd-weather-current__icon i[data-lucide] {
    width: 52px;
    height: 52px;
    stroke-width: 1.6;
}
.pxd-weather-current__body {
    position: relative;
    z-index: 1;
}
.pxd-weather-current__label-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pxd-weather-current__location {
    font-size: 0.88rem;
    font-weight: 600;
    opacity: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pxd-weather-current__now {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
}
.pxd-weather-current__temp {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 6px 0 8px;
}
.pxd-weather-current__description {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 12px;
}
.pxd-weather-current__meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    opacity: 0.88;
}
.pxd-weather-current__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pxd-weather-current__meta svg,
.pxd-weather-current__meta i[data-lucide] {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

/* ── Daily strip ──────────────────────────────────────────────── */
.pxd-weather-daily-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}
.pxd-weather-day-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 12px;
    background: #fff;
    border: 1px solid #e6ecec;
    border-radius: 14px;
    text-align: center;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pxd-weather-day-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10,61,58,0.08);
    border-color: #c7d2d2;
}
.pxd-weather-day-card__date {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7a7a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pxd-weather-day-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A3D3A;
}
.pxd-weather-day-card__icon svg,
.pxd-weather-day-card__icon i[data-lucide] {
    width: 36px;
    height: 36px;
    stroke-width: 1.8;
}
.pxd-weather-day-card__temps {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.pxd-weather-day-card__tmax {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0A3D3A;
}
.pxd-weather-day-card__tmin {
    font-size: 0.9rem;
    font-weight: 500;
    color: #93a0a0;
}
.pxd-weather-day-card__precip {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.pxd-weather-day-card__precip-bar {
    width: 100%;
    height: 4px;
    background: #eef2f2;
    border-radius: 2px;
    overflow: hidden;
}
.pxd-weather-day-card__precip-fill {
    height: 100%;
    background: linear-gradient(90deg, #72b3f5 0%, #4287f5 100%);
    border-radius: 2px;
    transition: width 300ms ease;
}
.pxd-weather-day-card__precip-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.72rem;
    color: #6688aa;
    font-weight: 500;
}
.pxd-weather-day-card__precip-value svg,
.pxd-weather-day-card__precip-value i[data-lucide] {
    width: 11px;
    height: 11px;
    stroke-width: 2.4;
}
.pxd-weather-day-card__wind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #6b7a7a;
    font-weight: 500;
    margin-top: 2px;
}
.pxd-weather-day-card__wind svg,
.pxd-weather-day-card__wind i[data-lucide] {
    width: 11px;
    height: 11px;
    stroke-width: 2.4;
}

/* ── Empty state ──────────────────────────────────────────────── */
.pxd-weather-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #93a0a0;
    text-align: center;
}
.pxd-weather-empty svg,
.pxd-weather-empty i[data-lucide] {
    width: 42px;
    height: 42px;
    stroke-width: 1.6;
}

/* ── Footer note ──────────────────────────────────────────────── */
.pxd-weather-footer-note {
    font-size: 0.74rem;
    color: #93a0a0;
    text-align: center;
    margin: 6px 0 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 720px) {
    .pxd-modal--weather .pxd-modal-header {
        flex-wrap: wrap;
    }
    .pxd-modal-header-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .pxd-weather-current {
        grid-template-columns: 1fr;
        padding: 20px;
        text-align: center;
        justify-items: center;
    }
    .pxd-weather-current__icon {
        width: 80px;
        height: 80px;
    }
    .pxd-weather-current__icon svg,
    .pxd-weather-current__icon i[data-lucide] {
        width: 46px;
        height: 46px;
    }
    .pxd-weather-current__temp {
        font-size: 2.8rem;
    }
    .pxd-weather-current__label-row,
    .pxd-weather-current__meta {
        justify-content: center;
    }
    .pxd-weather-daily-strip {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 10px;
    }
}
@media (max-width: 480px) {
    .pxd-weather-unit-btn {
        padding: 5px 10px;
        font-size: 0.76rem;
    }
    .pxd-weather-current__temp {
        font-size: 2.4rem;
    }
    .pxd-weather-daily-strip {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    .pxd-weather-day-card {
        padding: 10px 8px 8px;
    }
}
/**
 * 42-assistant.css — Pixi assistant panel, chat UI, cards
 * Part of pixidia-itinerary-single (Phase Pixi)
 *
 * Design aligned with:
 *   - 02-glassmorphism.md (3-level glass hierarchy)
 *   - 13-tooltips.md (branded green gradient tooltips)
 *   - 33-chat.css (chat widget patterns)
 *   - 00-tokens.css (design tokens)
 */

/* ============================================
   PANEL TABS BAR — Glassmorphism Level 2
   ============================================ */

.pxd-panel-tabs {
    display: flex;
    gap: 3px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    z-index: 10;
    flex-shrink: 0;
}

.pxd-panel-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 7px 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: all var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    font-size: 0;
}

.pxd-panel-tab:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.65);
    color: var(--pixidia-text, #1a2e2e);
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.07);
    transform: translateY(-1px);
}

.pxd-panel-tab--active {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

.pxd-panel-tab--active:hover {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.3);
}

.pxd-panel-tab .pxd-icon-sm,
.pxd-panel-tab svg {
    width: 17px;
    height: 17px;
}

/* ── Custom tooltips (replaces native title) ─────── */

.pxd-panel-tab[data-tooltip] {
    position: relative;
}

.pxd-panel-tab[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

.pxd-panel-tab[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #0fa36b;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

.pxd-panel-tab[data-tooltip]:hover::after,
.pxd-panel-tab[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   PANEL MODES (map / split / pixi)
   ============================================ */

.pxd-panel-right {
    display: flex;
    flex-direction: column;
}

.pxd-map-zone {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: flex 350ms var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.pxd-assistant-zone {
    flex: 0;
    overflow: hidden;
    transition: flex 350ms var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Mode: map (default) */
.pxd-panel-right[data-mode="map"] .pxd-map-zone {
    flex: 1;
}

.pxd-panel-right[data-mode="map"] .pxd-assistant-zone {
    flex: 0;
    height: 0;
    display: none;
}

/* Mode: split */
.pxd-panel-right[data-mode="split"] .pxd-map-zone {
    flex: 0 0 40%;
    min-height: 180px;
}

.pxd-panel-right[data-mode="split"] .pxd-map-legend {
    display: none;
}

.pxd-panel-right[data-mode="split"] .pxd-map-controls {
    top: 6px;
    right: 6px;
}

.pxd-panel-right[data-mode="split"] .pxd-map-controls .pxd-map-btn {
    width: 30px;
    height: 30px;
}

/* Split mode: Leaflet attribution behind assistant zone */
.pxd-panel-right[data-mode="split"] .leaflet-control-attribution {
    display: none;
}

/* Split mode: disable rich popups on itinerary markers */
.pxd-panel-right[data-mode="split"] .pxd-map-popup {
    display: none !important;
}

.pxd-panel-right[data-mode="split"] .leaflet-popup:not(.pxd-proposal-popup) {
    display: none !important;
}

.pxd-panel-right[data-mode="split"] .pxd-assistant-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
}

/* Mode: pixi */
.pxd-panel-right[data-mode="pixi"] .pxd-map-zone {
    flex: 0;
    height: 0;
    overflow: hidden;
    display: none;
}

.pxd-panel-right[data-mode="pixi"] .pxd-assistant-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================
   ASSISTANT INNER LAYOUT — Glassmorphism
   ============================================ */

.pxd-assistant-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    font-family: 'Urbanist', 'Inter', sans-serif;
    /* Reset Elementor global overrides */
    --e-global-color-primary: initial;
    --button-background-color: initial;
}

.pxd-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 163, 107, 0.15) transparent;
}

.pxd-assistant-messages::-webkit-scrollbar {
    width: 4px;
}

.pxd-assistant-messages::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-assistant-messages::-webkit-scrollbar-thumb {
    background: rgba(15, 163, 107, 0.15);
    border-radius: 2px;
}

.pxd-assistant-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 163, 107, 0.3);
}

/* ============================================
   INPUT BAR — Aligned with chat widget
   ============================================ */

.pxd-assistant-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
    background: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    align-items: center;
}

.pxd-assistant-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Urbanist', 'Inter', sans-serif;
    outline: none;
    transition: border-color var(--duration-normal, 250ms) ease, box-shadow var(--duration-normal, 250ms) ease;
    background: rgba(255, 255, 255, 0.8);
    color: var(--pixidia-text, #012827);
    min-height: 36px;
}

.pxd-assistant-input:focus {
    border-color: #0fa36b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.1);
}

.pxd-assistant-input::placeholder {
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-weight: 400;
}

.pxd-assistant-send {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(15, 163, 107, 0.2);
    flex-shrink: 0;
}

.pxd-assistant-send:hover {
    background: linear-gradient(135deg, #0d8c5a 25%, #2ea88a 100%);
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(15, 163, 107, 0.35);
}

.pxd-assistant-send:active {
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(15, 163, 107, 0.15);
}

.pxd-assistant-send svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

/* ============================================
   MESSAGE BUBBLES — Glassmorphism Level 2
   ============================================ */

.pxd-assistant-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.005em;
    margin-bottom: 8px;
    word-wrap: break-word;
    animation: pxd-msg-in 250ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.pxd-assistant-msg--user {
    margin-left: auto;
    background: rgba(15, 163, 107, 0.08);
    color: var(--pixidia-text, #1a2e2e);
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 12px 12px 4px 12px;
    font-weight: 500;
}

.pxd-assistant-msg--bot {
    margin-right: auto;
    background: rgba(255, 255, 255, 0.78);
    color: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    font-weight: 400;
}

.pxd-assistant-msg--bot:hover {
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
}

.pxd-assistant-msg--bot a {
    color: #0d8c5a;
    text-decoration: underline;
    font-weight: 600;
}

.pxd-assistant-msg--bot strong {
    font-weight: 700;
    color: var(--pixidia-text, #012827);
}

.pxd-assistant-msg--bot em {
    font-style: italic;
    color: var(--pixidia-gray-400, #8a9c9c);
    font-size: 0.95em;
}

.pxd-assistant-msg--bot .pxd-assistant-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-text, #012827);
    margin: 8px 0 4px;
}

/* First bot message (welcome) — slightly larger */
.pxd-assistant-msg--bot:first-child {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pixidia-text, #012827);
}

@keyframes pxd-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   TYPING INDICATOR — Green themed
   ============================================ */

.pxd-assistant-typing {
    display: inline-flex;
    gap: 5px;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px 12px 12px 4px;
}

.pxd-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0fa36b;
    animation: pxd-typing-pulse 1.4s ease-in-out infinite;
}

.pxd-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.pxd-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pxd-typing-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ============================================
   QUICK SUGGESTION PILLS — Branded
   ============================================ */

.pxd-assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0 2px;
}

.pxd-assistant-suggestion-pill {
    padding: 6px 14px;
    border: 1px solid rgba(15, 163, 107, 0.25);
    border-radius: var(--radius-full, 100px);
    background: rgba(15, 163, 107, 0.04);
    color: #0d8c5a;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Urbanist', 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--duration-normal, 250ms) var(--ease-smooth);
    white-space: nowrap;
}

.pxd-assistant-suggestion-pill:hover {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    transform: translateY(-1px);
}

.pxd-assistant-suggestion-pill:active {
    transform: translateY(0) scale(0.97);
}

/* ============================================
   PIXI CARDS — Glassmorphism Level 1
   ============================================ */

.pxd-assistant-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
    scrollbar-width: none;
}

.pxd-assistant-cards::-webkit-scrollbar {
    display: none;
}

.pxd-assistant-cards-wrapper {
    margin-bottom: 10px;
}

.pxd-pixi-card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    transition: all var(--duration-normal, 250ms) var(--ease-smooth);
    animation: pxd-card-in 400ms var(--ease-out) both;
    position: relative;
}

.pxd-pixi-card:nth-child(2) { animation-delay: 60ms; }
.pxd-pixi-card:nth-child(3) { animation-delay: 120ms; }
.pxd-pixi-card:nth-child(4) { animation-delay: 180ms; }
.pxd-pixi-card:nth-child(5) { animation-delay: 240ms; }

.pxd-pixi-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    transform: translateY(-3px);
}

.pxd-pixi-card--highlight {
    box-shadow: 0 0 0 2px #0fa36b, 0 15px 40px -5px rgba(15, 163, 107, 0.25) !important;
}

@keyframes pxd-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card photo */
.pxd-pixi-card-photo {
    width: 100%;
    padding-bottom: 60%;
    background: linear-gradient(135deg, var(--pixidia-gray-200, #dce4e4) 0%, var(--pixidia-gray-100, #eef2f2) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Subtle overlay for text readability */
.pxd-pixi-card-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.pxd-pixi-card-type {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-full, 100px);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Rating badge on photo (top right) */
.pxd-pixi-card-rating-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    border-radius: var(--radius-full, 100px);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pxd-pixi-card-rating-badge .pxd-icon-xs,
.pxd-pixi-card-rating-badge svg {
    width: 11px;
    height: 11px;
    fill: var(--pixidia-orange, #f59e0b);
    stroke: var(--pixidia-orange, #f59e0b);
}

/* Card body */
.pxd-pixi-card-body {
    padding: 10px 12px 12px;
}

.pxd-pixi-card-name {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: var(--pixidia-text, #012827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card meta (price + distance) */
.pxd-pixi-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-bottom: 4px;
    font-weight: 500;
}

.pxd-pixi-card-meta span + span::before {
    content: '· ';
    color: var(--pixidia-gray-300, #b8c5c5);
}

/* Transport/Hotel card extras */
.pxd-pixi-card-stars {
    color: #f5a623;
    letter-spacing: -1px;
    font-size: 12px;
}
.pxd-pixi-card-duration,
.pxd-pixi-card-stops,
.pxd-pixi-card-info {
    font-size: 11px;
}

/* ── Dedicated Transport Card Layout (no photo) ─────────────── */
.pxd-pixi-card.pxd-pixi-card--transport {
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid rgba(25, 118, 210, 0.15);
}
.pxd-pixi-card.pxd-pixi-card--transport .pxd-pixi-card-photo {
    display: none;
}
.pxd-pxt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.pxd-pxt-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-transport, #1976d2);
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pxd-pxt-mode-icon {
    font-size: 13px;
}
.pxd-pxt-source {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.pxd-pxt-source--real {
    background: #e8f5e9;
    color: #2e7d32;
}
.pxd-pxt-source--est {
    background: #fff3e0;
    color: #e65100;
}
.pxd-pxt-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-text, #012827);
    line-height: 1.2;
}
.pxd-pxt-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.pxd-pxt-metric {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text, #012827);
}
.pxd-pxt-metric-icon {
    font-size: 14px;
    opacity: 0.7;
}
.pxd-pxt-metric--price {
    margin-left: auto;
    color: var(--color-transport, #1976d2);
    font-size: 15px;
}
.pxd-pxt-metric-suffix {
    font-size: 11px;
    opacity: 0.6;
    font-weight: 400;
    margin-left: 2px;
}
.pxd-pxt-segments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.pxd-pxt-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
    flex-wrap: wrap;
}
.pxd-pxt-segment + .pxd-pxt-segment {
    padding-top: 6px;
    border-top: 1px dashed #e5e7eb;
}
.pxd-pxt-seg-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.pxd-pxt-seg-route {
    font-weight: 600;
    color: var(--pixidia-text, #012827);
    flex: 1;
}
.pxd-pxt-seg-dur {
    font-size: 11px;
    color: var(--pixidia-text-muted, #6b7280);
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
}
.pxd-pxt-seg-airline {
    font-size: 11px;
    color: var(--color-transport, #1976d2);
    font-weight: 500;
}
.pxd-pxt-seg-real {
    font-size: 11px;
    color: #2e7d32;
    font-weight: 700;
}
.pxd-pxt-scores {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    font-size: 11px;
}
.pxd-pxt-score {
    color: var(--pixidia-text-muted, #6b7280);
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 4px;
}
.pxd-pxt-add-btn {
    width: 100%;
    justify-content: center;
}
.pxd-pixi-card.pxd-pixi-card--transport .pxd-pixi-card-actions {
    margin-top: 2px;
}
.pxd-pixi-card-photo--placeholder {
    background: linear-gradient(135deg, #e8eff0 0%, #d0dadb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pxd-pixi-card-photo--placeholder::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23012827'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* City line */
.pxd-pixi-card-city {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-bottom: 4px;
}

.pxd-pixi-card-city svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Card reason */
.pxd-pixi-card-reason {
    font-size: 11px;
    color: var(--pixidia-gray-400, #8a9c9c);
    font-style: italic;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card actions row */
.pxd-pixi-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(1, 40, 39, 0.05);
}

/* Shared pill style for Carte & Ajouter */
.pxd-pixi-card-map-btn,
.pxd-pixi-card-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(1, 40, 39, 0.08);
    border-radius: var(--radius-full, 100px);
    background: rgba(255, 255, 255, 0.78);
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    cursor: pointer;
    font-family: 'Urbanist', 'Inter', sans-serif;
    transition: all var(--duration-fast, 150ms) var(--ease-smooth, ease);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(1, 40, 39, 0.04);
}

.pxd-pixi-card-map-btn:hover {
    background: rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.2);
    color: #0d8c5a;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.12);
}

.pxd-pixi-card-add-btn:hover {
    background: linear-gradient(135deg, rgba(15, 163, 107, 0.08), rgba(32, 201, 184, 0.06));
    border-color: rgba(15, 163, 107, 0.25);
    color: var(--pixidia-green, #208D3E);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.15);
    transform: translateY(-1px);
}

.pxd-pixi-card-map-btn:active,
.pxd-pixi-card-add-btn:active {
    transform: scale(0.97);
}

.pxd-pixi-card-map-btn .pxd-icon-xs,
.pxd-pixi-card-map-btn svg,
.pxd-pixi-card-add-btn .pxd-icon-xs,
.pxd-pixi-card-add-btn svg {
    width: 12px;
    height: 12px;
}

/* Feedback buttons — overlay on card photo (top-right) */
.pxd-pixi-card-photo {
    position: relative;
}

.pxd-pixi-card-feedback {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pxd-pixi-card:hover .pxd-pixi-card-feedback {
    opacity: 1;
}

.pxd-feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-xs, 6px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--pixidia-gray-400, #8a9c9c);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-smooth, ease);
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pxd-feedback-btn svg,
.pxd-feedback-btn .pxd-icon-xs {
    width: 12px;
    height: 12px;
}

.pxd-feedback-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--pixidia-text, #1a2e2e);
    transform: scale(1.1);
}

.pxd-feedback-up.pxd-feedback-active {
    background: rgba(15, 163, 107, 0.9);
    color: white;
}

.pxd-feedback-down.pxd-feedback-active {
    background: rgba(229, 57, 53, 0.85);
    color: white;
}

/* Show feedback always on touch devices */
@media (hover: none) {
    .pxd-pixi-card-feedback {
        opacity: 1;
    }
}

/* ============================================
   SKELETON CARDS (Shimmer)
   ============================================ */

.pxd-pixi-card--skeleton {
    pointer-events: none;
    background: rgba(255, 255, 255, 0.5);
}

.pxd-shimmer {
    background: linear-gradient(90deg,
        rgba(15, 163, 107, 0.06) 25%,
        rgba(15, 163, 107, 0.02) 50%,
        rgba(15, 163, 107, 0.06) 75%
    );
    background-size: 200% 100%;
    animation: pxd-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes pxd-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================
   PROPOSAL MARKERS — Green tooltip style
   ============================================ */

.pxd-proposal-marker {
    background: transparent !important;
    border: none !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

/* Proposal markers use tooltips only (no popup) — see .pxd-map-tooltip in 34-map.css */

/* ============================================
   PROFILE NUDGE — Green accent
   ============================================ */

.pxd-assistant-nudge {
    padding: 8px 12px;
    margin: 8px 0;
    background: rgba(15, 163, 107, 0.06);
    border-left: 3px solid #0fa36b;
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    font-size: 12.5px;
    color: var(--pixidia-text, #1a2e2e);
    line-height: 1.4;
    animation: pxd-msg-in 250ms var(--ease-out);
}

.pxd-assistant-nudge a {
    color: #0d8c5a;
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE — TABLET (768-1200px)
   ============================================ */

@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-pixi-card {
        flex: 0 0 185px;
    }

    .pxd-panel-right[data-mode="split"] .pxd-map-zone {
        flex: 0 0 45%;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (<768px)
   ============================================ */

@media (max-width: 768px) {
    .pxd-panel-tabs {
        padding: 3px 4px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .pxd-panel-tab {
        padding: 5px 6px;
    }

    /* Hide tooltips on mobile (touch) */
    .pxd-panel-tab[data-tooltip]::after,
    .pxd-panel-tab[data-tooltip]::before {
        display: none;
    }

    .pxd-pixi-card {
        flex: 0 0 190px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .pxd-assistant-input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .pxd-assistant-msg {
        max-width: 90%;
        font-size: 13px;
    }

    .pxd-assistant-input-bar {
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* ════════════════════════════════════════════════════════════════
   Pixi Mascot — integration points (Phase 5.5 — mascotte camaeleon)
   ════════════════════════════════════════════════════════════════ */

.pxd-pixi-mascot {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.pxd-pixi-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Welcome hero (neutre 72px) */
.pxd-assistant-msg--welcome {
    background: linear-gradient(135deg, rgba(15, 163, 107, 0.08), rgba(56, 193, 156, 0.04));
    border-radius: 16px;
    padding: 14px 16px;
    max-width: none;
}
.pxd-assistant-welcome-hero {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pxd-assistant-welcome-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
}

/* Typing indicator (thinking 40px + dots) */
.pxd-assistant-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}
.pxd-assistant-typing-pixi {
    animation: pxd-pixi-float 1.6s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes pxd-pixi-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg); }
}
.pxd-typing-dots {
    display: inline-flex;
    gap: 4px;
}

/* Profile nudge (pointing 40px) */
.pxd-assistant-nudge-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pxd-assistant-nudge-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}

/* Empty cards (confused 120px) */
.pxd-assistant-empty-cards {
    text-align: center;
    padding: 20px 16px;
    color: var(--pxd-text-muted, #6b7280);
}
.pxd-assistant-empty-cards .pxd-pixi-mascot {
    margin: 0 auto 10px;
}
.pxd-assistant-empty-cards p {
    font-size: 14px;
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Toast Pixi (override sizing via wrapper) */
.pxd-toast .pxd-toast-pixi {
    width: 36px !important;
    height: auto !important;
}

/* Mobile ≤640px — reduce sizes */
@media (max-width: 640px) {
    .pxd-assistant-welcome-hero { gap: 10px; }
    .pxd-assistant-welcome-hero .pxd-pixi-mascot {
        width: 56px !important;
        height: auto !important;
    }
    .pxd-assistant-empty-cards .pxd-pixi-mascot {
        width: 96px !important;
        height: auto !important;
    }
}
/* ─────────────────────────────────────────────────────────────────
   43-wishlist.css — Section "Idées de voyage" (Phase 3 Pixi)
   Glassmorphism Level 2 — matches .pxd-section style
   Prefix: .pxd-wishlist-*
   ───────────────────────────────────────────────────────────────── */

/* ── Section container — glassmorphism Level 2 ────────────────── */
body .pxd-wishlist-section {
    --e-global-color-primary: initial;
    --button-background-color: initial;
    margin: 0 8px 10px;
    padding: 24px 16px 16px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 2px 12px rgba(1, 40, 39, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ── Header — matches .pxd-section-header ─────────────────────── */
body .pxd-wishlist-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

body .pxd-wishlist-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Icon square — matches .pxd-section-icon */
body .pxd-wishlist-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    flex-shrink: 0;
}

body .pxd-wishlist-icon-box svg {
    width: 20px;
    height: 20px;
}

/* Legacy icon (if icon-box not used) */
body .pxd-wishlist-icon {
    display: none;
}

body .pxd-wishlist-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0;
    line-height: 1.3;
}

body .pxd-wishlist-count {
    padding: 4px 12px;
    border-radius: var(--radius-full, 100px);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
}

body .pxd-wishlist-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body .pxd-wishlist-chevron {
    width: 20px;
    height: 20px;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: transform var(--duration-normal, 300ms) var(--ease-smooth, ease),
                color var(--duration-fast, 150ms);
}

body .pxd-wishlist-header:hover .pxd-wishlist-chevron {
    color: var(--pixidia-green, #208D3E);
}

body .pxd-wishlist-collapsed .pxd-wishlist-chevron {
    transform: rotate(-90deg);
}

/* ── Body (collapsible with smooth grid transition) ───────────── */
body .pxd-wishlist-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

body .pxd-wishlist-body-inner {
    overflow: hidden;
    min-height: 0;
}

body .pxd-wishlist-collapsed .pxd-wishlist-body {
    grid-template-rows: 0fr;
}

body .pxd-wishlist-collapsed {
    padding: 10px 16px;
    margin-bottom: 6px;
}

body .pxd-wishlist-collapsed:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 20px rgba(1, 40, 39, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

body .pxd-wishlist-collapsed .pxd-wishlist-header {
    margin-bottom: 0;
}

/* ── Empty state ──────────────────────────────────────────────── */
body .pxd-wishlist-empty {
    text-align: center;
    padding: 20px 0 8px;
}

body .pxd-wishlist-empty-icon {
    color: var(--pixidia-gray-300, #b8c5c5);
    margin-bottom: 8px;
}

body .pxd-wishlist-empty-icon svg {
    width: 28px;
    height: 28px;
}

body .pxd-wishlist-empty p {
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin: 0 0 4px;
    line-height: 1.5;
}

body .pxd-wishlist-empty-hint {
    font-size: 12px !important;
    color: var(--pixidia-gray-400, #8a9c9c) !important;
}

body .pxd-wishlist-ask-pixi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-family: 'Urbanist', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
}

body .pxd-wishlist-ask-pixi-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

body .pxd-wishlist-ask-pixi-btn svg {
    width: 14px;
    height: 14px;
}

/* ── Group label ──────────────────────────────────────────────── */
body .pxd-wishlist-group {
    margin-bottom: 12px;
}

body .pxd-wishlist-group:last-child {
    margin-bottom: 0;
}

body .pxd-wishlist-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.05);
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-wishlist-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* ── Card — glassmorphism mini-card ───────────────────────────── */
body .pxd-wishlist-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    box-shadow: 0 1px 4px rgba(1, 40, 39, 0.03);
    transition: all 0.25s var(--ease-smooth, ease);
}

body .pxd-wishlist-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(1, 40, 39, 0.06);
    transform: translateY(-1px);
}

body .pxd-wishlist-card:last-child {
    margin-bottom: 0;
}

body .pxd-wishlist-card-info {
    flex: 1;
    min-width: 0;
}

body .pxd-wishlist-card-name {
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-text, #1a2e2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

body .pxd-wishlist-card-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pxd-wishlist-card-addr .pxd-icon-xs {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.6;
}

body .pxd-wishlist-card-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 2px;
}

body .pxd-star-filled {
    color: var(--pixidia-orange, #f59e0b);
    fill: var(--pixidia-orange, #f59e0b);
}

body .pxd-wishlist-card-reviews {
    color: var(--pixidia-gray-400, #8a9c9c);
}

body .pxd-wishlist-card-cost {
    font-size: 11px;
    font-weight: 600;
    color: var(--pixidia-green, #208D3E);
    margin-top: 2px;
}

/* ── Card actions — pill buttons ──────────────────────────────── */
body .pxd-wishlist-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

body .pxd-wishlist-card:hover .pxd-wishlist-card-actions {
    opacity: 1;
}

body .pxd-wishlist-plan-btn,
body .pxd-wishlist-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0;
}

body .pxd-wishlist-plan-btn {
    color: var(--pixidia-green, #208D3E);
}

body .pxd-wishlist-plan-btn:hover {
    background: rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.15);
    transform: translateY(-1px);
}

body .pxd-wishlist-delete-btn {
    color: var(--pixidia-gray-400, #8a9c9c);
}

body .pxd-wishlist-delete-btn:hover {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.12);
    color: var(--pixidia-red, #e53935);
}

body .pxd-wishlist-plan-btn .pxd-icon-sm,
body .pxd-wishlist-delete-btn .pxd-icon-sm {
    width: 15px;
    height: 15px;
}

/* ── Day selector modal — glassmorphism Level 3 ───────────────── */
body .pxd-day-selector-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 40, 39, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body .pxd-day-selector-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-lg, 16px);
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(1, 40, 39, 0.18),
                0 0 0 1px rgba(1, 40, 39, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body .pxd-day-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.06);
}

body .pxd-day-selector-header h3 {
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0;
}

body .pxd-day-selector-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pixidia-gray-400, #8a9c9c);
    padding: 4px;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s;
}

body .pxd-day-selector-close:hover {
    background: rgba(1, 40, 39, 0.04);
    color: var(--pixidia-text, #1a2e2e);
}

body .pxd-day-selector-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body .pxd-day-selector-day {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(1, 40, 39, 0.06);
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth, ease);
    text-align: left;
    font-family: 'Urbanist', sans-serif;
}

body .pxd-day-selector-day:hover {
    border-color: rgba(15, 163, 107, 0.2);
    background: rgba(15, 163, 107, 0.04);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.08);
}

body .pxd-day-selector-day.pxd-day-selected {
    border-color: var(--pixidia-green, #208D3E);
    background: rgba(15, 163, 107, 0.06);
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.15);
}

body .pxd-day-selector-num {
    font-weight: 700;
    font-size: 13px;
    color: var(--pixidia-blue, #012827);
    min-width: 28px;
}

body .pxd-day-selector-date {
    font-size: 12px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-day-selector-time {
    padding: 8px 20px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body .pxd-day-selector-time label {
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-day-selector-time-input {
    padding: 6px 10px;
    border: 1px solid rgba(1, 40, 39, 0.08);
    border-radius: var(--radius-sm, 8px);
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.78);
}

body .pxd-day-selector-footer {
    padding: 8px 20px 16px;
    text-align: right;
}

body .pxd-day-selector-cancel {
    padding: 6px 14px;
    border: none;
    background: none;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s;
}

body .pxd-day-selector-cancel:hover {
    color: var(--pixidia-text, #1a2e2e);
}

/* ══════════════════════════════════════════════════════════════════
   ADD-TO MODAL — glassmorphism Level 3
   Matches .pxd-modal + .pxd-calendar-popup design tokens
   ══════════════════════════════════════════════════════════════════ */

body .pxd-addto-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 40, 39, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: pxd-fadeIn 0.2s ease;
}

body .pxd-addto-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-lg, 16px);
    width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(1, 40, 39, 0.18),
                0 0 0 1px rgba(1, 40, 39, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: pxd-dropIn 0.25s var(--ease-smooth, ease);
}

@keyframes pxd-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pxd-dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Header (matches .pxd-modal-header) ───────────────────────── */
body .pxd-addto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.06);
}

body .pxd-addto-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .pxd-addto-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

body .pxd-addto-header-icon svg {
    width: 18px;
    height: 18px;
}

body .pxd-addto-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0;
    line-height: 1.2;
}

body .pxd-addto-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-addto-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pixidia-gray-50, #f5f7f7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: all 0.15s;
    flex-shrink: 0;
}

body .pxd-addto-close:hover {
    background: rgba(32, 201, 184, 0.12);
    color: var(--pixidia-turquoise, #20c9b8);
}

body .pxd-addto-close svg {
    width: 16px;
    height: 16px;
}

/* ── Item preview ─────────────────────────────────────────────── */
body .pxd-addto-item-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(1, 40, 39, 0.04);
}

body .pxd-addto-item-photo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--pixidia-gray-100, #eef2f2);
    flex-shrink: 0;
}

body .pxd-addto-item-info {
    flex: 1;
    min-width: 0;
}

body .pxd-addto-item-name {
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-text, #1a2e2e);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pxd-addto-item-addr {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pxd-addto-item-addr svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.6;
}

body .pxd-addto-item-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted);
    margin-top: 2px;
}

/* ── Wishlist button ──────────────────────────────────────────── */
body .pxd-addto-wishlist-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 28px);
    margin: 10px 14px 0;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 152, 0, 0.25);
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 152, 0, 0.03);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth, ease);
    text-align: left;
    font-family: 'Urbanist', sans-serif;
}

body .pxd-addto-wishlist-btn:hover {
    border-color: rgba(255, 152, 0, 0.4);
    background: rgba(255, 152, 0, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

body .pxd-addto-wishlist-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

body .pxd-addto-wishlist-icon svg {
    width: 16px;
    height: 16px;
}

body .pxd-addto-wishlist-label {
    font-size: 13px;
    font-weight: 600;
    color: #e65100;
}

body .pxd-addto-wishlist-desc {
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 1px;
}

/* ── Divider ──────────────────────────────────────────────────── */
body .pxd-addto-divider {
    display: flex;
    align-items: center;
    padding: 10px 18px 6px;
}

body .pxd-addto-divider::before,
body .pxd-addto-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(1, 40, 39, 0.06);
}

body .pxd-addto-divider span {
    padding: 0 10px;
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pixidia-gray-400, #8a9c9c);
    white-space: nowrap;
}

/* ── Calendar (matches .pxd-calendar-popup design) ────────────── */
body .pxd-addto-calendar {
    padding: 4px 14px 8px;
}

body .pxd-addto-cal-title {
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    padding: 6px 0;
}

body .pxd-addto-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--pixidia-gray-400, #8a9c9c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 4px;
}

body .pxd-addto-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

body .pxd-addto-cal-day {
    width: 100%;
    aspect-ratio: 1;
    max-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pixidia-text, #1a2e2e);
    cursor: default;
    transition: all 0.2s ease;
    padding: 0;
}

body .pxd-addto-cal-day:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

body .pxd-addto-cal-other {
    opacity: 0.15;
}

body .pxd-addto-cal-inrange {
    background: rgba(32, 201, 184, 0.08);
    font-weight: 600;
    cursor: pointer;
}

body .pxd-addto-cal-inrange:hover {
    background: rgba(32, 201, 184, 0.18);
    transform: scale(1.05);
}

body .pxd-addto-cal-range-start {
    border-radius: 10px 4px 4px 10px;
}

body .pxd-addto-cal-range-end {
    border-radius: 4px 10px 10px 4px;
}

body .pxd-addto-cal-selected {
    background: linear-gradient(135deg, var(--pixidia-green, #208D3E), var(--pixidia-turquoise, #20c9b8)) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(32, 141, 62, 0.3);
    transform: scale(1.08);
}

/* ── Selected day display (step 2) ─────────────────────────────── */
body .pxd-addto-selected-day {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(32, 201, 184, 0.06);
    border: 1px solid rgba(32, 201, 184, 0.15);
    border-radius: var(--radius-md, 12px);
    margin: 8px 14px;
    animation: pxd-dropIn 0.2s ease;
}

body .pxd-addto-selected-day .pxd-icon-sm {
    width: 18px;
    height: 18px;
    color: var(--pixidia-green, #208D3E);
    flex-shrink: 0;
}

body .pxd-addto-selected-day-text {
    flex: 1;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
}

body .pxd-addto-change-day {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-full, 100px);
    background: rgba(1, 40, 39, 0.04);
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

body .pxd-addto-change-day:hover {
    background: rgba(1, 40, 39, 0.08);
    color: var(--pixidia-text, #1a2e2e);
}

body .pxd-addto-change-day svg {
    width: 11px;
    height: 11px;
}

/* ── Checkout date options (logement) ──────────────────────────── */
body .pxd-addto-checkout-section {
    padding: 8px 14px 4px;
    animation: pxd-dropIn 0.2s ease;
}

body .pxd-addto-checkout-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body .pxd-addto-checkout-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid rgba(1, 40, 39, 0.06);
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.78);
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--pixidia-text, #1a2e2e);
    cursor: pointer;
    transition: all 0.15s;
}

body .pxd-addto-checkout-opt:hover {
    border-color: rgba(15, 163, 107, 0.2);
    background: rgba(15, 163, 107, 0.04);
}

body .pxd-addto-checkout-sel {
    border-color: var(--pixidia-green, #208D3E) !important;
    background: rgba(15, 163, 107, 0.06) !important;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.15);
    font-weight: 700;
}

body .pxd-addto-checkout-nights {
    font-size: 10px;
    font-weight: 600;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

/* ── Calendar empty state ─────────────────────────────────────── */
body .pxd-addto-cal-empty {
    text-align: center;
    padding: 20px 14px;
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

/* ── Time picker (matches pxwzr-time-popup style) ─────────────── */
body .pxd-addto-time-section {
    padding: 8px 14px 4px;
    animation: pxd-dropIn 0.2s ease;
}

body .pxd-addto-time-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--pixidia-gray-400, #8a9c9c);
    margin-bottom: 6px;
}

body .pxd-addto-time-label svg {
    width: 13px;
    height: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   Time picker — "Temps Fluide"
   Digital display + horizontal scroll-snap hours + minute grid
   ═══════════════════════════════════════════════════════════════════ */

body .pxd-addto-time-card {
    padding: 16px 14px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(1, 40, 39, 0.04),
        0 4px 12px rgba(1, 40, 39, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    overflow: hidden;
}

/* ── Digital display + clear button wrapper ────────────────── */
body .pxd-addto-time-display-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

body .pxd-addto-time-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    padding: 10px 22px 11px;
    background: linear-gradient(135deg, #0fa36b 0%, #208D3E 45%, #20c9b8 100%);
    border-radius: 12px;
    box-shadow:
        0 6px 18px rgba(32, 141, 62, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Empty state — no time chosen yet */
body .pxd-addto-time-card--empty .pxd-addto-time-display {
    background: rgba(1, 40, 39, 0.05);
    color: rgba(1, 40, 39, 0.35);
    box-shadow: inset 0 0 0 1px rgba(1, 40, 39, 0.06);
}

body .pxd-addto-time-card--empty .pxd-addto-time-colon {
    animation: none;
    opacity: 0.3;
}

body .pxd-addto-time-hh,
body .pxd-addto-time-mm {
    display: inline-block;
    min-width: 2ch;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

body .pxd-addto-time-card--empty .pxd-addto-time-hh,
body .pxd-addto-time-card--empty .pxd-addto-time-mm {
    text-shadow: none;
}

body .pxd-addto-time-colon {
    display: inline-block;
    margin: 0 2px;
    opacity: 0.85;
    animation: pxd-addto-blink 1.6s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    position: relative;
    top: -2px;
}

@keyframes pxd-addto-blink {
    0%, 45%, 55%, 100% { opacity: 0.92; }
    50%                { opacity: 0.35; }
}

/* Clear button (×) — only visible when a time is set */
body .pxd-addto-time-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(1, 40, 39, 0.06);
    color: var(--pixidia-gray-500, #5d7070);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

body .pxd-addto-time-clear:hover {
    background: rgba(229, 57, 53, 0.1);
    color: var(--pixidia-red, #e53935);
}

body .pxd-addto-time-clear svg {
    width: 14px;
    height: 14px;
}

body .pxd-addto-time-clear[hidden] {
    display: none;
}

/* ── Hours: wrapper with chevron navigation ───────────────── */
body .pxd-addto-time-strip-wrap {
    position: relative;
    margin: 0 -14px 12px;
}

body .pxd-addto-time-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 45%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Subtle fade at edges — chevron buttons do most of the "more content" signalling */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

body .pxd-addto-time-strip::-webkit-scrollbar { display: none; }

body .pxd-addto-time-strip:focus { outline: none; }

body .pxd-addto-time-strip:focus-visible {
    outline: 2px solid rgba(32, 201, 184, 0.5);
    outline-offset: 4px;
    border-radius: 12px;
}

/* ── Chevron navigation buttons ───────────────────────────── */
body .pxd-addto-time-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(1, 40, 39, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(1, 40, 39, 0.12);
    color: var(--pixidia-text, #1a2e2e);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.18s ease;
}

body .pxd-addto-time-nav-prev { left: 2px; }
body .pxd-addto-time-nav-next { right: 2px; }

body .pxd-addto-time-nav svg {
    width: 16px;
    height: 16px;
}

body .pxd-addto-time-nav:hover:not([disabled]) {
    background: rgba(32, 201, 184, 0.12);
    color: var(--pixidia-turquoise, #20c9b8);
}

body .pxd-addto-time-nav:active:not([disabled]) {
    background: rgba(32, 201, 184, 0.2);
}

body .pxd-addto-time-nav[disabled] {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

body .pxd-addto-time-nav:focus-visible {
    outline: 2px solid rgba(32, 201, 184, 0.5);
    outline-offset: 2px;
}

/* ── Minutes: 4-column grid ────────────────────────────────── */
body .pxd-addto-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* ── Chips (shared) ────────────────────────────────────────── */
body .pxd-addto-time-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid rgba(1, 40, 39, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.75);
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-text, #1a2e2e);
    cursor: pointer;
    /* Only transition lightweight properties for smooth hover — NO transform/box-shadow on hover */
    transition:
        background-color 0.12s ease,
        border-color     0.12s ease,
        color            0.12s ease;
    font-variant-numeric: tabular-nums;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body .pxd-addto-time-chip--min {
    height: 48px;
    font-size: 15px;
}

/* Hover: lightweight — only color/border, no layout shift */
body .pxd-addto-time-chip:hover {
    border-color: rgba(32, 201, 184, 0.35);
    background: rgba(32, 201, 184, 0.05);
}

body .pxd-addto-time-chip:active {
    background: rgba(32, 201, 184, 0.1);
}

/* Checked state — scale + gradient. Transform only here (one chip at a time, no repaint cascade). */
body .pxd-addto-time-chip[aria-checked="true"] {
    background: linear-gradient(135deg, #208D3E 0%, #20c9b8 100%);
    color: #fff;
    border-color: transparent;
    box-shadow:
        0 4px 12px rgba(32, 141, 62, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: scale(1.06);
    transition:
        background-color 0.18s ease,
        color            0.18s ease,
        transform        0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow       0.2s ease;
}

body .pxd-addto-time-chip[aria-checked="true"]:hover {
    /* Subtle hover on checked chip — no additional transform */
    filter: brightness(1.05);
}

body .pxd-addto-time-chip:focus-visible {
    outline: 2px solid rgba(32, 201, 184, 0.55);
    outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    body .pxd-addto-time-display { font-size: 1.75rem; padding: 9px 18px; }
    body .pxd-addto-time-chip--min { height: 46px; }
    body .pxd-addto-time-strip {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .pxd-addto-time-strip { scroll-behavior: auto; }
    body .pxd-addto-time-colon { animation: none; }
    body .pxd-addto-time-chip { transition: none; }
}

/* ── Footer (matches .pxd-modal-footer) ───────────────────────── */
body .pxd-addto-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px 16px;
    border-top: 1px solid rgba(1, 40, 39, 0.04);
}

body .pxd-addto-cancel {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s;
}

body .pxd-addto-cancel:hover {
    background: rgba(1, 40, 39, 0.04);
    color: var(--pixidia-text, #1a2e2e);
}

body .pxd-addto-confirm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
}

body .pxd-addto-confirm:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

body .pxd-addto-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

body .pxd-addto-confirm svg {
    width: 14px;
    height: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   TOAST — glassmorphism + green accent
   Matches the modal/wishlist aesthetic (no dark navy anymore)
   ══════════════════════════════════════════════════════════════════ */

body .pxd-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-blue, #012827);
    box-shadow:
        0 12px 40px rgba(1, 40, 39, 0.18),
        0 2px 8px rgba(1, 40, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: pxd-toast-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
    max-width: calc(100vw - 32px);
}

/* Icon — success (default) */
body .pxd-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0fa36b 0%, #20c9b8 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow:
        0 3px 8px rgba(15, 163, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body .pxd-toast-icon svg {
    width: 16px;
    height: 16px;
}

/* Variants */
body .pxd-toast--error .pxd-toast-icon {
    background: linear-gradient(135deg, #e53935 0%, #f56565 100%);
    box-shadow:
        0 3px 8px rgba(229, 57, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body .pxd-toast--info .pxd-toast-icon {
    background: linear-gradient(135deg, #1976d2 0%, #20c9b8 100%);
    box-shadow:
        0 3px 8px rgba(25, 118, 210, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Message */
body .pxd-toast-msg {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    color: var(--pixidia-text, #1a2e2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Undo button — matches .pxd-addto-confirm style */
body .pxd-toast-undo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid rgba(15, 163, 107, 0.25);
    border-radius: var(--radius-full, 100px);
    background: rgba(15, 163, 107, 0.06);
    color: var(--pixidia-green, #208D3E);
    font-family: 'Urbanist', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

body .pxd-toast-undo:hover {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.3);
}

body .pxd-toast-undo:active {
    transform: scale(0.97);
}

body .pxd-toast-undo svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

body .pxd-toast-undo span {
    white-space: nowrap;
}

/* Leaving animation */
body .pxd-toast--leaving {
    animation: pxd-toast-out 0.22s ease forwards;
}

@keyframes pxd-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pxd-toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* Responsive */
@media (max-width: 480px) {
    body .pxd-toast {
        bottom: 16px;
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }
    @keyframes pxd-toast-in {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pxd-toast-out {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(12px); }
    }
}

/* ══════════════════════════════════════════════════════════════════
   ENRICHMENT PROGRESS MODAL (matches pxwzr-modal style)
   ══════════════════════════════════════════════════════════════════ */

body .pxd-enrich-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

body .pxd-enrich-overlay.pxd-enrich-visible {
    opacity: 1;
    visibility: visible;
}

body .pxd-enrich-modal {
    background: white;
    border-radius: var(--radius-xl, 20px);
    padding: 40px 36px;
    text-align: center;
    max-width: 420px;
    width: 100%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

body .pxd-enrich-visible .pxd-enrich-modal {
    transform: scale(1);
}

/* Icon */
body .pxd-enrich-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 163, 107, 0.08);
}

body .pxd-enrich-icon svg {
    width: 36px;
    height: 36px;
    color: var(--pixidia-green, #208D3E);
}

/* Title */
body .pxd-enrich-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0 0 8px;
}

body .pxd-enrich-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.95rem;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin: 0 0 24px;
    transition: color 0.3s;
}

/* Steps container */
body .pxd-enrich-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    text-align: left;
}

body .pxd-enrich-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm, 8px);
    background: var(--pixidia-gray-50, #f5f7f7);
    transition: all 0.4s ease;
}

body .pxd-enrich-step-label {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: color 0.3s ease;
}

/* Status icon container */
body .pxd-enrich-step-status {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Pending: gray circle */
body .pxd-enrich-step-circle {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pixidia-gray-200, #dce4e4);
    transition: opacity 0.3s ease;
}

/* Spinner (hidden by default) */
body .pxd-enrich-step-spinner {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pixidia-gray-200, #dce4e4);
    border-top-color: var(--pixidia-green, #208D3E);
    border-radius: 50%;
    animation: pxd-enrich-spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Checkmark SVG (hidden by default) */
body .pxd-enrich-check {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    color: var(--pixidia-green, #208D3E);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

/* ── Active step ──────────────────────────────────────────────── */
body .pxd-enrich-step.pxd-enrich-step-active {
    background: rgba(15, 163, 107, 0.06);
}

body .pxd-enrich-step.pxd-enrich-step-active .pxd-enrich-step-label {
    color: var(--pixidia-text, #1a2e2e);
    font-weight: 600;
}

body .pxd-enrich-step.pxd-enrich-step-active .pxd-enrich-step-circle {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-active .pxd-enrich-step-spinner {
    opacity: 1;
}

/* ── Done step ────────────────────────────────────────────────── */
body .pxd-enrich-step.pxd-enrich-step-done {
    background: rgba(15, 163, 107, 0.04);
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-step-label {
    color: #0d7a4a;
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-step-circle {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-step-spinner {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-check {
    opacity: 1;
    transform: scale(1);
}

/* ── Error step ───────────────────────────────────────────────── */
body .pxd-enrich-step.pxd-enrich-step-error {
    background: rgba(229, 57, 53, 0.06);
}

body .pxd-enrich-step.pxd-enrich-step-error .pxd-enrich-step-label {
    color: var(--pixidia-red, #e53935);
}

body .pxd-enrich-step.pxd-enrich-step-error .pxd-enrich-step-spinner {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-error .pxd-enrich-step-circle {
    border-color: var(--pixidia-red, #e53935);
    opacity: 1;
}

@keyframes pxd-enrich-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    body .pxd-enrich-modal {
        padding: 32px 24px;
    }

    body .pxd-enrich-title {
        font-size: 1.2rem;
    }

    body .pxd-enrich-icon {
        width: 56px;
        height: 56px;
    }

    body .pxd-enrich-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ── Highlight pulse (after live refresh scroll) ──────────────── */
.pxd-highlight-pulse {
    animation: pxd-pulse-glow 2s ease;
}

@keyframes pxd-pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(15, 163, 107, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(15, 163, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 163, 107, 0); }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    body .pxd-wishlist-section {
        margin: 0 6px 8px;
        padding: 16px 12px 12px;
        border-radius: 14px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body .pxd-wishlist-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    body .pxd-wishlist-icon-box svg {
        width: 16px;
        height: 16px;
    }

    body .pxd-wishlist-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    body .pxd-wishlist-title {
        font-size: 1rem;
    }

    body .pxd-wishlist-count {
        display: none;
    }

    body .pxd-wishlist-card-actions {
        opacity: 1;
    }

    body .pxd-day-selector-modal,
    body .pxd-addto-modal {
        width: calc(100vw - 32px);
        max-width: 360px;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        max-height: 70vh;
    }

    body .pxd-day-selector-overlay,
    body .pxd-addto-overlay {
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
    body .pxd-wishlist-section {
        padding: 12px 10px 10px;
    }

    body .pxd-wishlist-title {
        font-size: 0.95rem;
    }
}

/* ════════════════════════════════════════════════════════════════
   Pixi Mascot — wishlist empty state (Phase 5.5)
   ════════════════════════════════════════════════════════════════ */

.pxd-wishlist-empty .pxd-wishlist-empty-icon {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}
.pxd-wishlist-empty .pxd-pixi-mascot {
    margin: 0;
}
@media (max-width: 640px) {
    .pxd-wishlist-empty .pxd-pixi-mascot {
        width: 112px !important;
        height: auto !important;
    }
}
/* ─────────────────────────────────────────────────────────────
   Phase 6 (2026-04-17) — Pixi Plan Health suggestions
   Prefix: .pxd-suggestions-* (conflict-resistant vs Elementor/BuddyX)
   ───────────────────────────────────────────────────────────── */

body .pxd-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 12px;
  background: #f6faf7;
  border: 1px solid #d6e7dd;
  border-radius: 10px;
  font-family: 'Urbanist', system-ui, sans-serif;
  font-size: 14px;
  color: #0A3D3A;
}

body .pxd-suggestions:empty { display: none; }

body .pxd-suggestions-heading {
  font-weight: 600;
  color: #0A3D3A;
  margin-bottom: 4px;
}

body .pxd-suggestions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border-left: 4px solid #1E9B52;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body .pxd-suggestions-row--warning { border-left-color: #ff9800; }
body .pxd-suggestions-row--alert   { border-left-color: #d32f2f; background: #fff5f5; }
body .pxd-suggestions-row--info    { border-left-color: #1976d2; }

body .pxd-suggestions-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

body .pxd-suggestions-msg {
  flex: 1 1 auto;
  line-height: 1.4;
}

body .pxd-suggestions-action {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #0A3D3A;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  /* Elementor reset */
  --e-global-color-primary: initial;
  --button-background-color: initial;
  box-shadow: none;
}

body .pxd-suggestions-action:hover { background: #1E9B52; }

body .pxd-suggestions-dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #888;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  box-shadow: none;
}

body .pxd-suggestions-dismiss:hover { color: #333; }

body .pxd-suggestions-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}