/**
 * Benji Media - Rejoignez-Nous (WordPress Plugin Stylesheet)
 * Charte BENJI MEDIA : Jaune #DDDC06, Charbon #18191B / #212226, Cartes #26272C, Blanc #FFFFFF.
 * Typographies : Space Grotesk (Titres/Labels/Calendrier) & DM Sans (Corps/Formulaires).
 * Design inspiré d'Airbnb pour le calendrier de réservation en direct.
 */@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Space+Grotesk:wght@300..700&display=swap');



:root {--bj-accent: #DDDC06;
    --bj-accent-hover: #ECEB14;
    --bj-accent-glow: rgba(221, 220, 6, 0.35);
    --bj-accent-tint: rgba(221, 220, 6, 0.08);

    --bj-bg: #18191B;
    --bj-card-bg: #212226;
    --bj-card-surface: #27282D;
    --bj-card-surface-hover: #2E2F35;

    --bj-border: rgba(255, 255, 255, 0.08);
    --bj-border-hover: rgba(221, 220, 6, 0.5);
    --bj-border-active: #DDDC06;

    --bj-text-primary: #FFFFFF;
    --bj-text-secondary: #E5E5E5;
    --bj-text-muted: #9CA3AF;
    --bj-text-dimmed: #6B7280;

    --bj-radius-sm: 8px;
    --bj-radius-md: 12px;
    --bj-radius-lg: 16px;
    --bj-radius-xl: 22px;

    --bj-font-title: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bj-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bj-transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);}
/* ==========================================================================
   1. Wrapper & Reset
   ========================================================================== */.benji-join-wrap {width: 100%;
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: var(--bj-font-body);
    color: var(--bj-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;}
.benji-join-wrap * {box-sizing: border-box;}
/* Main Card */.benji-join-wrap .benji-join-card {background: var(--bj-card-bg);
    border: 1px solid var(--bj-border);
    border-radius: var(--bj-radius-xl);
    padding: 44px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);}
/* Ambient Radial Glow */.benji-join-wrap .benji-join-card::before {content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle at top right, rgba(221, 220, 6, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;}
/* Light Theme Variables */.benji-join-wrap.theme-light {--bj-bg: #F9FAFB;
    --bj-card-bg: #FFFFFF;
    --bj-card-surface: #F3F4F6;
    --bj-card-surface-hover: #E5E7EB;
    --bj-border: rgba(0, 0, 0, 0.08);
    --bj-border-hover: rgba(0, 0, 0, 0.3);
    --bj-border-active: #111827;
    --bj-text-primary: #111827;
    --bj-text-secondary: #374151;
    --bj-text-muted: #6B7280;
    --bj-text-dimmed: #9CA3AF;}
.benji-join-wrap.theme-light .benji-join-card {background: #FFFFFF;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.04);}
.benji-join-wrap.theme-light .benji-join-card::before {background: radial-gradient(circle at top right, rgba(221, 220, 6, 0.15), transparent 70%);}
/* ==========================================================================
   2. Header & Hero Badge
   ========================================================================== */.benji-join-wrap .benji-join-header {margin-bottom: 36px;
    position: relative;
    z-index: 1;}
.benji-join-wrap .benji-join-badge {display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(221, 220, 6, 0.12);
    border: 1px solid rgba(221, 220, 6, 0.3);
    color: var(--bj-accent);
    font-family: var(--bj-font-title);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 16px;}
.benji-join-wrap .benji-join-badge::before {content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bj-accent);
    box-shadow: 0 0 8px var(--bj-accent);}
.benji-join-wrap.theme-light .benji-join-badge {background: rgba(221, 220, 6, 0.2);
    border-color: rgba(221, 220, 6, 0.5);
    color: #000000;}
.benji-join-wrap .benji-join-title {font-family: var(--bj-font-title);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin: 0 0 12px 0;
    color: var(--bj-text-primary);
    line-height: 1.2;}
.benji-join-wrap .benji-join-subtitle {font-size: 15px;
    color: var(--bj-text-muted);
    margin: 0;
    max-width: 680px;
    line-height: 1.6;}
/* ==========================================================================
   2.5. Wizard Progress Stepper Header
   ========================================================================== */.benji-join-wrap .join-wizard-progress {margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bj-border);}
.benji-join-wrap .wizard-progress-meta {display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;}
.benji-join-wrap .wizard-step-badge {display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(221, 220, 6, 0.14);
    border: 1px solid rgba(221, 220, 6, 0.35);
    color: var(--bj-accent);
    font-family: var(--bj-font-title);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;}
.benji-join-wrap.theme-light .wizard-step-badge {background: rgba(221, 220, 6, 0.22);
    border-color: rgba(221, 220, 6, 0.6);
    color: #000000;}
.benji-join-wrap .wizard-step-title {font-family: var(--bj-font-title);
    font-size: 14px;
    font-weight: 600;
    color: var(--bj-text-secondary);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
.benji-join-wrap .wizard-progress-track {width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
    position: relative;}
.benji-join-wrap.theme-light .wizard-progress-track {background: rgba(0, 0, 0, 0.08);}
.benji-join-wrap .wizard-progress-bar {height: 100%;
    background: var(--bj-accent);
    border-radius: 99px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px var(--bj-accent-glow);}
/* ==========================================================================
   2.6. Wizard Step Panels
   ========================================================================== */.benji-join-wrap .join-wizard-step {display: none !important;
    position: relative;
    z-index: 1;}
.benji-join-wrap .join-wizard-step.is-active {display: block !important;
    animation: wizardFadeSlide 0.32s var(--bj-transition-smooth) forwards;}
@keyframes wizardFadeSlide {0% {opacity: 0;
        transform: translateY(12px);}
100% {opacity: 1;
        transform: translateY(0);}
}
/* ==========================================================================
   3. Section Blocks & Step Badges
   ========================================================================== */.benji-join-wrap .join-section-block {margin-bottom: 12px;
    position: relative;
    z-index: 1;}
.benji-join-wrap .join-section-label {display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--bj-font-title);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--bj-text-primary);
    margin-bottom: 16px;}
.benji-join-wrap .step-num {display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(221, 220, 6, 0.12);
    border: 1px solid rgba(221, 220, 6, 0.35);
    color: var(--bj-accent);
    font-family: var(--bj-font-title);
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;}
.benji-join-wrap.theme-light .step-num {background: #000000;
    border-color: #000000;
    color: var(--bj-accent);}
.benji-join-wrap .req-star {color: var(--bj-accent);
    margin-left: 2px;}
.benji-join-wrap .opt-tag {font-family: var(--bj-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--bj-text-muted);
    margin-left: 4px;}
.benji-join-wrap .join-section-hint {font-size: 13px;
    color: var(--bj-text-muted);
    margin: -8px 0 16px 40px;}
.benji-join-wrap .join-sublabel {display: block;
    font-family: var(--bj-font-title);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--bj-text-secondary);
    margin-bottom: 10px;}
/* ==========================================================================
   4. Step 1: Radio Cards (Connection Type)
   ========================================================================== */.benji-join-wrap .join-radio-grid {display: flex;
    flex-direction: column;
    gap: 10px;}
.benji-join-wrap .join-radio-card {position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    padding: 15px 20px;
    border-radius: var(--bj-radius-md);
    cursor: pointer;
    transition: all 0.22s var(--bj-transition-smooth);
    user-select: none;}
.benji-join-wrap .join-radio-card:hover {border-color: var(--bj-border-hover);
    background: var(--bj-card-surface-hover);
    transform: translateX(3px);}
.benji-join-wrap .join-radio-card input[type="radio"] {position: absolute;
    opacity: 0;
    pointer-events: none;}
.benji-join-wrap .radio-indicator {width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;}
.benji-join-wrap.theme-light .radio-indicator {border-color: #9CA3AF;}
.benji-join-wrap .join-radio-card.active, .benji-join-wrap .join-radio-card:has(input[type="radio"]:checked) {background: rgba(221, 220, 6, 0.08);
    border-color: var(--bj-accent);
    box-shadow: 0 4px 18px rgba(221, 220, 6, 0.15);}
.benji-join-wrap .join-radio-card.active .radio-indicator, .benji-join-wrap .join-radio-card:has(input[type="radio"]:checked) .radio-indicator {border-color: var(--bj-accent);
    background: var(--bj-accent);
    box-shadow: inset 0 0 0 3px var(--bj-card-bg);}
.benji-join-wrap .radio-text {font-size: 15px;
    font-weight: 600;
    color: var(--bj-text-primary);
    transition: color 0.2s ease;}
.benji-join-wrap .join-radio-card.active .radio-text, .benji-join-wrap .join-radio-card:has(input[type="radio"]:checked) .radio-text {color: var(--bj-accent);}
.benji-join-wrap.theme-light .join-radio-card.active .radio-text, .benji-join-wrap.theme-light .join-radio-card:has(input[type="radio"]:checked) .radio-text {color: #000000;}
/* ==========================================================================
   5. Step 2: Form Inputs & Profile Pills
   ========================================================================== */.benji-join-wrap .join-fields-row {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;}
@media (max-width: 640px) {.benji-join-wrap .join-fields-row {grid-template-columns: 1fr;}
}
.benji-join-wrap .join-field-group {display: flex;
    flex-direction: column;}
.benji-join-wrap .join-field-group label {font-size: 13px;
    font-weight: 600;
    color: var(--bj-text-secondary);
    margin-bottom: 6px;}
.benji-join-wrap .join-field-group input[type="text"], .benji-join-wrap .join-field-group input[type="email"], .benji-join-wrap .join-field-group input[type="tel"], .benji-join-wrap .join-field-group input[type="url"], .benji-join-wrap .join-field-group textarea {width: 100%;
    appearance: none;
    background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    border-radius: var(--bj-radius-sm);
    padding: 13px 16px;
    font-family: var(--bj-font-body);
    font-size: 14px;
    color: var(--bj-text-primary);
    outline: none;
    transition: all 0.2s ease;}
.benji-join-wrap .join-field-group input::placeholder, .benji-join-wrap .join-field-group textarea::placeholder {color: var(--bj-text-dimmed);}
.benji-join-wrap .join-field-group input:focus, .benji-join-wrap .join-field-group textarea:focus {border-color: var(--bj-accent);
    box-shadow: 0 0 0 3px rgba(221, 220, 6, 0.2);
    background: #1c1d22;}
.benji-join-wrap.theme-light .join-field-group input:focus, .benji-join-wrap.theme-light .join-field-group textarea:focus {background: #FFFFFF;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);}
.benji-join-wrap .join-field-group textarea {resize: vertical;
    min-height: 85px;
    line-height: 1.5;}
/* Profile Pills Grid */.benji-join-wrap .join-pills-grid {display: flex;
    flex-wrap: wrap;
    gap: 8px;}
.benji-join-wrap .join-pill-card {position: relative;
    cursor: pointer;
    user-select: none;}
.benji-join-wrap .join-pill-card input[type="radio"] {position: absolute;
    opacity: 0;
    pointer-events: none;}
.benji-join-wrap .pill-btn {display: inline-block;
    background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    padding: 9px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bj-text-secondary);
    transition: all 0.2s var(--bj-transition-smooth);}
.benji-join-wrap .join-pill-card:hover .pill-btn {border-color: var(--bj-border-hover);
    color: var(--bj-text-primary);
    transform: translateY(-1px);}
.benji-join-wrap .join-pill-card.active .pill-btn, .benji-join-wrap .join-pill-card:has(input[type="radio"]:checked) .pill-btn {background: var(--bj-accent);
    border-color: var(--bj-accent);
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 14px var(--bj-accent-glow);}
/* ==========================================================================
   6. Step 3: Conditional Skills Checkboxes
   ========================================================================== */.benji-join-wrap .join-skills-conditional {animation: fadeInSlide 0.3s var(--bj-transition-smooth);}
@keyframes fadeInSlide {from {opacity: 0;
        transform: translateY(-8px);}
to {opacity: 1;
        transform: translateY(0);}
}
.benji-join-wrap .join-checkbox-grid {display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;}
.benji-join-wrap .join-check-card {position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    padding: 13px 16px;
    border-radius: var(--bj-radius-sm);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s var(--bj-transition-smooth);}
.benji-join-wrap .join-check-card:hover {border-color: var(--bj-border-hover);
    background: var(--bj-card-surface-hover);
    transform: translateY(-1px);}
.benji-join-wrap .join-check-card input[type="checkbox"] {position: absolute;
    opacity: 0;
    pointer-events: none;}
.benji-join-wrap .check-box-custom {width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;}
.benji-join-wrap .check-label {font-size: 13.5px;
    font-weight: 600;
    color: var(--bj-text-primary);}
.benji-join-wrap .join-check-card.is-checked, .benji-join-wrap .join-check-card:has(input[type="checkbox"]:checked) {background: rgba(221, 220, 6, 0.08);
    border-color: var(--bj-accent);}
.benji-join-wrap .join-check-card.is-checked .check-box-custom, .benji-join-wrap .join-check-card:has(input[type="checkbox"]:checked) .check-box-custom {background: var(--bj-accent);
    border-color: var(--bj-accent);}
.benji-join-wrap .join-check-card.is-checked .check-box-custom::after, .benji-join-wrap .join-check-card:has(input[type="checkbox"]:checked) .check-box-custom::after {content: '✓';
    color: #000000;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;}
/* ==========================================================================
   7. Step 6: Meeting Preference (Book vs Contact Later)
   ========================================================================== */.benji-join-wrap .join-meeting-section {padding-top: 10px;
    border-top: 1px solid var(--bj-border);}
.benji-join-wrap .meeting-section-heading {margin-bottom: 20px;}
.benji-join-wrap .meeting-title {font-family: var(--bj-font-title);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--bj-text-primary);
    margin: 0 0 6px 0;}
.benji-join-wrap .meeting-desc {font-size: 14px;
    color: var(--bj-text-muted);
    margin: 0;}
.benji-join-wrap .meeting-choice-grid {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;}
@media (max-width: 680px) {.benji-join-wrap .meeting-choice-grid {grid-template-columns: 1fr;}
}
.benji-join-wrap .meeting-choice-card {position: relative;
    border: 1.5px solid var(--bj-border);
    background: var(--bj-card-surface);
    border-radius: var(--bj-radius-md);
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    transition: all 0.22s var(--bj-transition-smooth);}
.benji-join-wrap .meeting-choice-card:hover {border-color: var(--bj-border-hover);
    transform: translateY(-2px);}
.benji-join-wrap .meeting-choice-card input[type="radio"] {position: absolute;
    opacity: 0;
    pointer-events: none;}
.benji-join-wrap .choice-card-content {display: flex;
    align-items: flex-start;
    gap: 14px;}
.benji-join-wrap .choice-badge-icon {font-size: 26px;
    flex-shrink: 0;
    line-height: 1;}
.benji-join-wrap .choice-card-info {display: flex;
    flex-direction: column;}
.benji-join-wrap .choice-card-title {font-family: var(--bj-font-title);
    font-size: 15px;
    font-weight: 700;
    color: var(--bj-text-primary);
    margin-bottom: 4px;
    line-height: 1.3;}
.benji-join-wrap .choice-card-sub {font-size: 12.5px;
    color: var(--bj-text-muted);
    line-height: 1.4;}
.benji-join-wrap .meeting-choice-card.active, .benji-join-wrap .meeting-choice-card:has(input[type="radio"]:checked) {border-color: var(--bj-accent);
    background: rgba(221, 220, 6, 0.08);
    box-shadow: 0 6px 20px rgba(221, 220, 6, 0.18);}
.benji-join-wrap .meeting-choice-card.active .choice-card-title, .benji-join-wrap .meeting-choice-card:has(input[type="radio"]:checked) .choice-card-title {color: var(--bj-accent);}
.benji-join-wrap.theme-light .meeting-choice-card.active .choice-card-title, .benji-join-wrap.theme-light .meeting-choice-card:has(input[type="radio"]:checked) .choice-card-title {color: #000000;}
/* ==========================================================================
   8. AIRBNB-STYLE LIVE CALENDAR & SLOTS
   ========================================================================== */.benji-join-wrap .meeting-slots-panel {background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    border-radius: var(--bj-radius-lg);
    padding: 24px;
    transition: all 0.3s ease;}
.benji-join-wrap .slots-panel-top {margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);}
.benji-join-wrap.theme-light .slots-panel-top {border-bottom-color: rgba(0, 0, 0, 0.07);}
.benji-join-wrap .slots-info-meta {display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--bj-text-secondary);}
.benji-join-wrap .slots-meta-item strong {color: var(--bj-accent);}
.benji-join-wrap.theme-light .slots-meta-item strong {color: #111827;}
.benji-join-wrap .live-indicator {display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    color: #10B981;}
.benji-join-wrap .live-indicator strong {color: #10B981 !important;}
.benji-join-wrap .pulse-dot {width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.5);
    animation: pulseDot 2s infinite;}
@keyframes pulseDot {0% {box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);}
70% {box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);}
100% {box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);}
}
/* Airbnb Booking Grid (Split 2 Columns) */.benji-join-wrap .airbnb-booking-grid {display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items: stretch;}
@media (max-width: 820px) {.benji-join-wrap .airbnb-booking-grid {grid-template-columns: 1fr;
        gap: 20px;}
}
/* Left Column: Airbnb Calendar Card */.benji-join-wrap .airbnb-calendar-card {background: #1F2024;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bj-radius-md);
    padding: 22px 20px 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;}
.benji-join-wrap.theme-light .airbnb-calendar-card {background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);}
/* Calendar Header (Month + Nav Arrows) */.benji-join-wrap .airbnb-calendar-header {display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 4px;}
.benji-join-wrap .airbnb-cal-month-title {font-family: var(--bj-font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--bj-text-primary);
    letter-spacing: -0.2px;
    text-transform: capitalize;}
.benji-join-wrap .airbnb-cal-nav {appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--bj-text-primary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;}
.benji-join-wrap.theme-light .airbnb-cal-nav {background: #F3F4F6;
    border-color: #E5E7EB;
    color: #1F2937;}
.benji-join-wrap .airbnb-cal-nav:hover:not(:disabled) {background: rgba(221, 220, 6, 0.15);
    border-color: var(--bj-accent);
    color: var(--bj-accent);
    transform: scale(1.06);}
.benji-join-wrap .airbnb-cal-nav:disabled {opacity: 0.22;
    cursor: not-allowed;
    transform: none;}
/* Weekday Labels (Lun, Mar, Mer...) */.benji-join-wrap .airbnb-weekdays-row {display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 10px;}
.benji-join-wrap .airbnb-weekdays-row span {font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #8E929B;}
/* Days Grid (7 Columns) */.benji-join-wrap .airbnb-days-grid {display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    row-gap: 6px;
    align-items: center;
    justify-items: center;}
/* Individual Day Cell Button */.benji-join-wrap .airbnb-day {appearance: none;
    border: none;
    background: transparent;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--bj-font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bj-text-primary);
    cursor: pointer;
    position: relative;
    transition: all 0.18s var(--bj-transition-smooth);
    outline: none;
    user-select: none;
    padding: 0;}
.benji-join-wrap.theme-light .airbnb-day {color: #1F2937;}
.benji-join-wrap .airbnb-day:hover:not(:disabled) {background: rgba(255, 255, 255, 0.12);
    transform: scale(1.08);}
.benji-join-wrap.theme-light .airbnb-day:hover:not(:disabled) {background: #F3F4F6;}
/* Today Indicator (Unbookable, bookings start tomorrow) */.benji-join-wrap .airbnb-day.is-today, .benji-join-wrap .airbnb-day.is-today {border: 1.5px dashed rgba(221, 220, 6, 0.45) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;}
.benji-join-wrap .airbnb-day.is-today::after, .benji-join-wrap .airbnb-day.is-today::after {content: '' !important;
    position: absolute !important;
    bottom: 3px !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--bj-accent) !important;}
.benji-join-wrap.theme-light .airbnb-day.is-today::after, .benji-join-wrap .theme-light .airbnb-day.is-today::after {background: #111827 !important;}
/* Selected Day (Airbnb Bold Circular State) */.benji-join-wrap .airbnb-day.is-selected {background: var(--bj-accent) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(221, 220, 6, 0.45);
    transform: scale(1.08);}
.benji-join-wrap .airbnb-day.is-selected::after {background: #000000 !important;}
/* Disabled, Past, Weekends */.benji-join-wrap .airbnb-day:disabled, .benji-join-wrap .airbnb-day.is-past {opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;}
.benji-join-wrap .airbnb-day.is-weekend {opacity: 0.28;
    cursor: not-allowed;}
.benji-join-wrap .airbnb-day.is-other-month {opacity: 0.12;
    pointer-events: none;}
/* Calendar Legend / Footer */.benji-join-wrap .airbnb-cal-footer {display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: #8E929B;}
.benji-join-wrap .legend-dot {display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;}
.benji-join-wrap .legend-dot.available {background: var(--bj-accent);
    box-shadow: 0 0 6px var(--bj-accent);}
.benji-join-wrap .legend-dot.today {background: transparent;
    border: 1.5px dashed var(--bj-accent);}
.benji-join-wrap .legend-dot.closed {background: #6B7280;}
/* Right Column: Time Slots & Reassurance */.benji-join-wrap .airbnb-slots-column {background: #1F2024;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bj-radius-md);
    padding: 22px 20px 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;}
.benji-join-wrap.theme-light .airbnb-slots-column {background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);}
.benji-join-wrap .slots-column-header {margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);}
.benji-join-wrap.theme-light .slots-column-header {border-bottom-color: #F3F4F6;}
.benji-join-wrap .slots-column-badge {display: inline-block;
    font-size: 10px;
    font-family: var(--bj-font-title);
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--bj-accent);
    text-transform: uppercase;
    margin-bottom: 4px;}
.benji-join-wrap .slots-selected-date-title {font-family: var(--bj-font-title);
    font-size: 17px;
    font-weight: 700;
    color: var(--bj-text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;}
.benji-join-wrap .slots-column-sub {font-size: 12px;
    color: var(--bj-text-muted);
    margin: 0;}
/* Time Slots Pills List */.benji-join-wrap .slots-times-grid {display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    flex-grow: 1;}
.benji-join-wrap .airbnb-time-slot {appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bj-radius-sm);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s var(--bj-transition-smooth);
    outline: none;
    color: var(--bj-text-primary);
    font-family: var(--bj-font-title);}
.benji-join-wrap.theme-light .airbnb-time-slot {background: #F9FAFB;
    border-color: #E5E7EB;
    color: #111827;}
.benji-join-wrap .airbnb-time-slot .time-text {font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;}
.benji-join-wrap .airbnb-time-slot .time-badge-avail {font-size: 11px;
    font-weight: 600;
    color: #10B981;
    background: rgba(16, 185, 129, 0.12);
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;}
.benji-join-wrap .airbnb-time-slot:hover:not(:disabled) {background: rgba(221, 220, 6, 0.12);
    border-color: var(--bj-accent);
    color: var(--bj-accent);
    transform: translateX(4px);}
.benji-join-wrap.theme-light .airbnb-time-slot:hover:not(:disabled) {background: #F3F4F6;
    border-color: #111827;
    color: #000000;}
/* Selected Time Slot */.benji-join-wrap .airbnb-time-slot.is-selected {background: var(--bj-accent) !important;
    border-color: var(--bj-accent) !important;
    color: #000000 !important;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(221, 220, 6, 0.35);
    transform: translateX(4px);}
.benji-join-wrap .airbnb-time-slot.is-selected .time-badge-avail {background: #000000;
    color: #FFFFFF;}
/* Booked / Taken Slot */.benji-join-wrap .airbnb-time-slot.is-taken, .benji-join-wrap .airbnb-time-slot:disabled {background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;}
.benji-join-wrap .airbnb-time-slot.is-taken .time-text {text-decoration: line-through;
    color: #6B7280;}
.benji-join-wrap .airbnb-time-slot.is-taken .time-badge {font-size: 11px;
    font-weight: 600;
    color: #EF4444;
    background: rgba(239, 68, 68, 0.12);
    padding: 3px 8px;
    border-radius: 20px;}
/* Features List at bottom of slots */.benji-join-wrap .slots-features-list {border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;}
.benji-join-wrap.theme-light .slots-features-list {border-top-color: #F3F4F6;}
.benji-join-wrap .slots-features-list .feature-item {display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--bj-text-muted);}
.benji-join-wrap .slots-features-list .f-icon {color: var(--bj-accent);
    font-weight: 800;
    font-size: 12px;}
.benji-join-wrap .slots-none {font-size: 13px;
    color: var(--bj-text-muted);
    font-style: italic;
    padding: 12px 0;
    margin: 0;}
/* Selected Slot Confirmation Strip */.benji-join-wrap .selected-slot-summary {margin-top: 18px;
    background: rgba(221, 220, 6, 0.12);
    border: 1px solid rgba(221, 220, 6, 0.35);
    border-radius: var(--bj-radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 18px rgba(221, 220, 6, 0.12);
    animation: fadeInSlide 0.3s var(--bj-transition-smooth);}
.benji-join-wrap .summary-strip-icon {width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bj-accent);
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;}
.benji-join-wrap .summary-strip-content {display: flex;
    flex-direction: column;
    gap: 2px;}
.benji-join-wrap .summary-strip-label {font-size: 10px;
    font-family: var(--bj-font-title);
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--bj-accent);}
.benji-join-wrap .summary-strip-value {font-size: 13.5px;
    font-weight: 600;
    color: var(--bj-text-primary);}
/* Pane B: Contact Later Note */.benji-join-wrap .meeting-later-panel {background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    border-radius: var(--bj-radius-lg);
    padding: 24px;
    transition: all 0.3s ease;}
.benji-join-wrap .meeting-later-box {border-left: 4px solid #3B82F6;
    padding-left: 16px;}
.benji-join-wrap .later-box-title {font-family: var(--bj-font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--bj-text-primary);
    margin: 0 0 6px 0;}
.benji-join-wrap .later-box-desc {font-size: 13.5px;
    color: var(--bj-text-muted);
    line-height: 1.5;
    margin: 0;}
/* ==========================================================================
   9. Wizard Navigation Controls & Submission
   ========================================================================== */.benji-join-wrap .join-wizard-nav {display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--bj-border);
    position: relative;
    z-index: 2;}
.benji-join-wrap .btn-wizard-prev {appearance: none;
    background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    color: var(--bj-text-secondary);
    padding: 13px 22px;
    border-radius: var(--bj-radius-md);
    font-family: var(--bj-font-title);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.22s var(--bj-transition-smooth);}
.benji-join-wrap .btn-wizard-prev:hover {border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    background: var(--bj-card-surface-hover);
    transform: translateX(-2px);}
.benji-join-wrap.theme-light .btn-wizard-prev:hover {border-color: #111827;
    color: #111827;}
.benji-join-wrap .wizard-nav-actions {display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;}
.benji-join-wrap .btn-wizard-skip {appearance: none;
    background: transparent;
    border: none;
    color: var(--bj-text-muted);
    padding: 12px 18px;
    font-family: var(--bj-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    border-radius: var(--bj-radius-sm);}
.benji-join-wrap .btn-wizard-skip:hover {color: var(--bj-text-primary);
    text-decoration: underline;}
.benji-join-wrap .btn-wizard-next {appearance: none;
    background: var(--bj-accent);
    border: 1px solid var(--bj-accent);
    color: #000000;
    padding: 14px 28px;
    border-radius: var(--bj-radius-md);
    font-family: var(--bj-font-title);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 18px var(--bj-accent-glow);
    transition: all 0.22s var(--bj-transition-smooth);}
.benji-join-wrap .btn-wizard-next:hover {background: var(--bj-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(221, 220, 6, 0.5);}
.benji-join-wrap .btn-wizard-next:active {transform: translateY(0);}
.benji-join-wrap .btn-join-submit {appearance: none;
    width: auto;
    background: var(--bj-accent);
    border: 1px solid var(--bj-accent);
    border-radius: var(--bj-radius-md);
    padding: 14px 28px;
    font-family: var(--bj-font-title);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #000000;
    cursor: pointer;
    transition: all 0.22s var(--bj-transition-smooth);
    box-shadow: 0 4px 18px var(--bj-accent-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;}
.benji-join-wrap .btn-join-submit::after {content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: 0.5s;}
.benji-join-wrap .btn-join-submit:hover:not(:disabled) {background: var(--bj-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(221, 220, 6, 0.5);}
.benji-join-wrap .btn-join-submit:hover:not(:disabled)::after {left: 100%;}
.benji-join-wrap .btn-join-submit:active:not(:disabled) {transform: translateY(0);}
.benji-join-wrap .btn-join-submit:disabled {opacity: 0.65;
    cursor: not-allowed;
    transform: none;}
@media (max-width: 640px) {.benji-join-wrap .join-wizard-nav {flex-direction: column-reverse;
        gap: 12px;}
.benji-join-wrap .wizard-nav-actions {width: 100%;
        display: flex;
        justify-content: space-between;}
.benji-join-wrap .btn-wizard-prev {width: 100%;
        justify-content: center;}
.benji-join-wrap .btn-wizard-next, .benji-join-wrap .btn-join-submit {width: 100%;
        justify-content: center;
        text-align: center;}
}
/* Feedback Tray */.benji-join-wrap .join-feedback-tray {margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--bj-radius-sm);
    font-size: 13.5px;
    line-height: 1.4;
    animation: fadeInSlide 0.25s ease;}
.benji-join-wrap .join-feedback-tray.is-error {background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #F87171;}
.benji-join-wrap .join-feedback-tray.is-success {background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34D399;}
/* ==========================================================================
   10. Success Screen
   ========================================================================== */.benji-join-wrap .join-success-screen {text-align: center;
    padding: 40px 20px;
    animation: fadeInSlide 0.4s var(--bj-transition-smooth);}
.benji-join-wrap .success-icon-circle {width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--bj-accent);
    color: #000000;
    font-size: 34px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px var(--bj-accent-glow);}
.benji-join-wrap .success-title {font-family: var(--bj-font-title);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--bj-text-primary);
    margin: 0 0 10px 0;}
.benji-join-wrap .success-desc {font-size: 15px;
    color: var(--bj-text-muted);
    max-width: 580px;
    margin: 0 auto 24px auto;
    line-height: 1.6;}
.benji-join-wrap .success-recap {background: var(--bj-card-surface);
    border: 1px solid var(--bj-border);
    border-radius: var(--bj-radius-md);
    padding: 20px;
    max-width: 540px;
    margin: 0 auto 28px auto;
    text-align: left;
    font-size: 13.5px;
    color: var(--bj-text-secondary);}
.benji-join-wrap .btn-join-reset {appearance: none;
    background: transparent;
    border: 1px solid var(--bj-border);
    color: var(--bj-text-primary);
    padding: 12px 24px;
    border-radius: var(--bj-radius-sm);
    font-family: var(--bj-font-title);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;}
.benji-join-wrap .btn-join-reset:hover {border-color: var(--bj-accent);
    color: var(--bj-accent);}
/* Register Opt-in Checkbox (Step 6) */.benji-join-wrap .join-register-optin-box {margin-top: 24px;
    padding: 14px 18px;
    background: rgba(221, 220, 6, 0.06);
    border: 1px solid rgba(221, 220, 6, 0.25);
    border-radius: var(--bj-radius-md, 12px);
    transition: all 0.2s ease;}
.benji-join-wrap .join-register-optin-box:hover {background: rgba(221, 220, 6, 0.1);
    border-color: rgba(221, 220, 6, 0.4);}
.benji-join-wrap .join-register-optin-label {display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--bj-text-primary, #FFFFFF);
    user-select: none;}
.benji-join-wrap .join-register-optin-label input[type="checkbox"] {position: absolute;
    opacity: 0;
    pointer-events: none;}
.benji-join-wrap .optin-custom-chk {width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(221, 220, 6, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;}
.benji-join-wrap .join-register-optin-label input[type="checkbox"]:checked + .optin-custom-chk {background: var(--bj-accent, #DDDC06);
    border-color: var(--bj-accent, #DDDC06);}
.benji-join-wrap .join-register-optin-label input[type="checkbox"]:checked + .optin-custom-chk::after {content: "✓";
    color: #000000;
    font-size: 13px;
    font-weight: 900;}
.benji-join-wrap .optin-text strong {color: var(--bj-accent, #DDDC06);}
/* 1-Click Register Card (Success Screen) */.benji-join-wrap .join-account-invite-card {background: linear-gradient(135deg, rgba(33, 34, 38, 0.98), rgba(24, 25, 28, 0.98));
    border: 1px solid rgba(221, 220, 6, 0.35);
    border-radius: 16px;
    padding: 24px;
    max-width: 540px;
    margin: 20px auto 24px auto;
    text-align: left;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);}
.benji-join-wrap .invite-card-badge {display: inline-block;
    font-family: var(--bj-font-title, 'Space Grotesk', sans-serif);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(221, 220, 6, 0.15);
    color: var(--bj-accent, #DDDC06);
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 10px;}
.benji-join-wrap .invite-card-title {margin: 0 0 8px 0;
    font-family: var(--bj-font-title, 'Space Grotesk', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;}
.benji-join-wrap .invite-card-desc {margin: 0 0 18px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #9CA3AF;}
.benji-join-wrap .btn-join-register-now {appearance: none;
    border: none;
    background: var(--bj-accent, #DDDC06);
    color: #000000 !important;
    font-family: var(--bj-font-title, 'Space Grotesk', sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(221, 220, 6, 0.3);
    width: 100%;
    justify-content: center;}
.benji-join-wrap .btn-join-register-now:hover:not(:disabled) {background: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);}
.benji-join-wrap .btn-join-register-now:disabled {opacity: 0.8;
    cursor: not-allowed;}
.benji-join-wrap .join-reg-success-banner {margin-top: 14px;
    padding: 14px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    color: #34D399;
    font-size: 13.5px;
    text-align: center;
    line-height: 1.5;
    animation: bj-badge-pulse 1.5s infinite ease-in-out;}


/* ==========================================================================
   BENJI USER PLANNING & ACCOUNT DASHBOARD
   ========================================================================== */.benji-account-dash-alert {display: flex;
    align-items: center;
    gap: 16px;
    background: #18191C;
    border: 1px solid rgba(221, 220, 6, 0.35);
    border-left: 5px solid var(--bj-accent, #DDDC06);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 28px;
    color: #FFFFFF;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);}
.benji-account-dash-alert .dash-alert-icon {font-size: 32px;
    line-height: 1;}
.benji-account-dash-alert .dash-alert-content {flex-grow: 1;}
.benji-account-dash-alert .dash-alert-tag {display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #DDDC06;
    margin-bottom: 4px;}
.benji-account-dash-alert h4 {margin: 0 0 4px 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;}
.benji-account-dash-alert p {margin: 0;
    font-size: 13px;
    color: #A3A3A3;}
.benji-account-dash-alert .btn-dash-planning {display: inline-flex;
    align-items: center;
    background: #DDDC06;
    color: #000000 !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;}
.benji-account-dash-alert .btn-dash-planning:hover {background: #FFFFFF;
    transform: translateY(-1px);}
/* User Planning Wrapper */.benji-user-planning-wrap {font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #E5E5E5;
    margin: 20px 0 40px 0;}
.benji-user-planning-wrap .benji-planning-header {display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
.benji-user-planning-wrap .planning-badge {display: inline-block;
    background: rgba(221, 220, 6, 0.12);
    border: 1px solid rgba(221, 220, 6, 0.35);
    color: #DDDC06;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 10px;}
.benji-user-planning-wrap .planning-title {margin: 0 0 8px 0;
    color: #FFFFFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;}
.benji-user-planning-wrap .planning-subtitle {margin: 0;
    color: #9CA3AF;
    font-size: 14px;
    line-height: 1.5;
    max-width: 620px;}
.benji-user-planning-wrap .user-meta-chip {display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #18191C;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;}
.benji-user-planning-wrap .chip-avatar {width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #DDDC06;
    color: #000000;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;}
.benji-user-planning-wrap .chip-email {font-size: 12.5px;
    color: #D1D5DB;
    font-weight: 500;}
/* Guest login card */.benji-planning-guest-card, .benji-user-planning-wrap .benji-planning-empty {background: #18191C;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    max-width: 640px;
    margin: 30px auto;}
.benji-user-planning-wrap .guest-card-badge {display: inline-block;
    color: #DDDC06;
    background: rgba(221, 220, 6, 0.12);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;}
.benji-planning-guest-card h3, .benji-user-planning-wrap .benji-planning-empty h3 {margin: 0 0 10px 0;
    color: #FFFFFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;}
.benji-planning-guest-card p, .benji-user-planning-wrap .benji-planning-empty p {color: #9CA3AF;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px 0;}
.benji-user-planning-wrap .btn-guest-login, .benji-user-planning-wrap .btn-empty-join {display: inline-block;
    background: #DDDC06;
    color: #000000 !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 13.5px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;}
.benji-user-planning-wrap .btn-guest-login:hover, .benji-user-planning-wrap .btn-empty-join:hover {background: #FFFFFF;
    transform: translateY(-2px);}
.benji-user-planning-wrap .empty-icon {font-size: 40px;
    margin-bottom: 12px;}
/* Planning Cards */.benji-user-planning-wrap .benji-planning-cards-list {display: flex;
    flex-direction: column;
    gap: 32px;}
.benji-user-planning-wrap .benji-planning-card {background: #212226;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease;}
.benji-user-planning-wrap .benji-planning-card:hover {border-color: rgba(221, 220, 6, 0.3);}
.benji-user-planning-wrap .planning-card-topbar {background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;}
.benji-user-planning-wrap .dossier-id-tag {color: #9CA3AF;
    font-family: 'Space Grotesk', monospace;
    font-weight: 700;
    margin-right: 10px;}
.benji-user-planning-wrap .dossier-conn-tag {background: rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11.5px;}
.benji-user-planning-wrap .dossier-date-text {color: #9CA3AF;
    font-size: 11.5px;}
/* Meeting Hero Banner */.benji-user-planning-wrap .planning-meeting-hero {padding: 24px 22px;
    display: flex;
    gap: 24px;
    background: linear-gradient(135deg, rgba(33, 34, 38, 0.95), rgba(24, 25, 28, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;}
.benji-user-planning-wrap .planning-meeting-hero.tense-future {border-left: 5px solid #DDDC06;}
.benji-user-planning-wrap .planning-meeting-hero.tense-today {border-left: 5px solid #10B981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(24, 25, 28, 0.95));}
.benji-user-planning-wrap .planning-meeting-hero.tense-past {border-left: 5px solid #6B7280;
    opacity: 0.9;}
/* Calendar Date Tile (Airbnb style calendar leaf) */.benji-user-planning-wrap .meeting-hero-dateblock {flex-shrink: 0;
    width: 104px;
    background: #18191C;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    align-self: flex-start;}
.benji-user-planning-wrap .hero-date-weekday {background: #DDDC06;
    color: #000000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 4px;}
.benji-user-planning-wrap .hero-date-daynum {font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    padding: 8px 4px 2px 4px;}
.benji-user-planning-wrap .hero-date-monthyear {font-size: 10.5px;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;}
/* Meeting Hero Details */.benji-user-planning-wrap .meeting-hero-details {flex-grow: 1;}
.benji-user-planning-wrap .meeting-status-row {display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;}
.benji-user-planning-wrap .meeting-badge {font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;}
.benji-user-planning-wrap .meeting-badge.is-confirmed {background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.35);}
.benji-user-planning-wrap .meeting-badge.is-today {background: rgba(221, 220, 6, 0.2);
    color: #DDDC06;
    border: 1px solid rgba(221, 220, 6, 0.5);
    animation: bj-badge-pulse 2s infinite ease-in-out;}
.benji-user-planning-wrap .meeting-badge.is-past {background: rgba(107, 114, 128, 0.15);
    color: #9CA3AF;
    border: 1px solid rgba(107, 114, 128, 0.3);}
.benji-user-planning-wrap .meeting-badge.is-pending {background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.35);}
.benji-user-planning-wrap .meeting-badge.is-platform {background: rgba(255, 255, 255, 0.08);
    color: #E5E5E5;}
@keyframes bj-badge-pulse {0%, 100% {transform: scale(1);}
50% {transform: scale(1.03);}
}
.benji-user-planning-wrap .meeting-hero-title {margin: 0 0 12px 0;
    color: #FFFFFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;}
.benji-user-planning-wrap .meeting-hero-meta-grid {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 16px;
    margin-bottom: 18px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 14px;
    border-radius: 8px;}
.benji-user-planning-wrap .meta-item {font-size: 12.5px;}
.benji-user-planning-wrap .meta-item-label {display: block;
    color: #9CA3AF;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;}
.benji-user-planning-wrap .meta-item-val {color: #FFFFFF;
    font-weight: 600;}
/* Quick Action Buttons */.benji-user-planning-wrap .meeting-hero-actions {display: flex;
    flex-wrap: wrap;
    gap: 10px;}
.benji-user-planning-wrap .btn-cal-action {display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;}
.benji-user-planning-wrap .btn-cal-action.is-gcal {background: #DDDC06;
    color: #000000 !important;}
.benji-user-planning-wrap .btn-cal-action.is-gcal:hover {background: #FFFFFF;
    transform: translateY(-1px);}
.benji-user-planning-wrap .btn-cal-action.is-ics {background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15);}
.benji-user-planning-wrap .btn-cal-action.is-ics:hover {background: rgba(255, 255, 255, 0.15);
    border-color: #DDDC06;
    color: #DDDC06 !important;}
.benji-user-planning-wrap .btn-cal-action.is-support {background: transparent;
    color: #9CA3AF !important;
    border: 1px solid rgba(255, 255, 255, 0.1);}
.benji-user-planning-wrap .btn-cal-action.is-support:hover {color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3);}
/* Contact Later Hero Box */.benji-user-planning-wrap .planning-meeting-hero.is-contact-later-box {border-left: 5px solid #F59E0B;
    display: flex;
    align-items: flex-start;
    gap: 16px;}
.benji-user-planning-wrap .contact-later-icon {font-size: 32px;
    line-height: 1;}
.benji-user-planning-wrap .contact-later-text p {margin: 0;
    color: #9CA3AF;
    font-size: 13.5px;
    line-height: 1.5;}
/* Application Snapshot */.benji-user-planning-wrap .planning-dossier-snapshot {padding: 20px 22px;
    background: #1C1D21;}
.benji-user-planning-wrap .snapshot-header {margin: 0 0 16px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);}
.benji-user-planning-wrap .snapshot-status-pill {font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;}
.benji-user-planning-wrap .snapshot-status-pill.status-nouveau {background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;}
.benji-user-planning-wrap .snapshot-status-pill.status-contacte {background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;}
.benji-user-planning-wrap .snapshot-status-pill.status-planifie {background: rgba(16, 185, 129, 0.15);
    color: #34D399;}
.benji-user-planning-wrap .snapshot-status-pill.status-retenu {background: rgba(168, 85, 247, 0.15);
    color: #C084FC;}
.benji-user-planning-wrap .snapshot-status-pill.status-archive {background: rgba(107, 114, 128, 0.15);
    color: #9CA3AF;}
.benji-user-planning-wrap .snapshot-grid {display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 20px;
    margin-bottom: 16px;}
.benji-user-planning-wrap .snapshot-item .snap-label {display: block;
    color: #9CA3AF;
    font-size: 11.5px;
    margin-bottom: 2px;}
.benji-user-planning-wrap .snapshot-item .snap-value {color: #E5E5E5;
    font-size: 13.5px;}
.benji-user-planning-wrap .snap-link {color: #DDDC06 !important;
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;}
.benji-user-planning-wrap .snap-link:hover {text-decoration: underline;}
.benji-user-planning-wrap .snapshot-skills-block {margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);}
.benji-user-planning-wrap .snap-skills-chips {display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;}
.benji-user-planning-wrap .skill-chip {background: rgba(221, 220, 6, 0.1);
    border: 1px solid rgba(221, 220, 6, 0.25);
    color: #DDDC06;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;}
.benji-user-planning-wrap .snapshot-message-block {margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);}
.benji-user-planning-wrap .snap-message-quote {background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid #DDDC06;
    padding: 10px 14px;
    border-radius: 4px;
    font-style: italic;
    font-size: 13px;
    color: #D1D5DB;
    line-height: 1.5;
    margin-top: 6px;}
/* Responsive */@media (max-width: 768px) {.benji-user-planning-wrap .benji-planning-header {flex-direction: column;
        align-items: flex-start;}
.benji-user-planning-wrap .planning-meeting-hero {flex-direction: column;
        gap: 16px;}
.benji-user-planning-wrap .meeting-hero-dateblock {width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 6px 12px;}
.benji-user-planning-wrap .hero-date-weekday {padding: 4px 8px;
        border-radius: 4px;}
.benji-user-planning-wrap .hero-date-daynum {font-size: 26px;
        padding: 0;}
.benji-user-planning-wrap .meeting-hero-meta-grid {grid-template-columns: 1fr;}
.benji-user-planning-wrap .meeting-hero-actions {flex-direction: column;}
.benji-user-planning-wrap .btn-cal-action {width: 100%;
        justify-content: center;}
.benji-account-dash-alert {flex-direction: column;
        align-items: flex-start;}
.benji-account-dash-alert .btn-dash-planning {width: 100%;
        justify-content: center;}
}