/* BIOMOTORS UNIFORM COLORS & MODERN STRUCTURE */
/* --- DARK MODE OVERRIDES --- */
body.dark-mode {
    background-color: #0d1b12 !important; /* Template --bg */
    color: #e8f5ec !important;           /* Template --text */
}

/* 1. GLOBAL BACKGROUND FIX */
body.dark-mode .bm-assistant-wrapper {
    background-color: #0d1b12 !important;
}

/* 2. PAGE HEADER */
body.dark-mode .page-header h1 { color: #ffffff !important; }
body.dark-mode .page-header p { color: #95b8a4 !important; }

/* 3. LEADS TABLE - Striped rows like the template */
body.dark-mode .table-wrap {
    background: #132419 !important;
    border-color: rgba(82, 183, 136, 0.12) !important;
}
body.dark-mode table thead th {
    background: rgba(82, 183, 136, 0.08) !important;
    color: #52b788 !important;
}
body.dark-mode tbody tr { border-bottom: 1px solid rgba(82, 183, 136, 0.06) !important; }
body.dark-mode tbody tr:nth-child(even) { background: #0f1a13 !important; }
body.dark-mode tbody tr:nth-child(odd) { background: #111e16 !important; }
body.dark-mode tbody tr:hover { background: #1a3527 !important; }
body.dark-mode tbody tr.selected { background: #1c3d2a !important; box-shadow: inset 3px 0 0 #52b788 !important; }
body.dark-mode tbody td { color: #e8f5ec !important; }
body.dark-mode .td-plate { color: #f4a261 !important; background: rgba(244, 162, 97, 0.1) !important; }

/* 4. CLIENT BANNER & CALL STATUS */
body.dark-mode .banner-inner,
body.dark-mode .call-status-inner,
body.dark-mode .voicemail-inner,
body.dark-mode .call-result-inner {
    background: #132419 !important; /* --bg-card */
    border: 1px solid rgba(82, 183, 136, 0.2) !important;
}
body.dark-mode #bannerName,
body.dark-mode .call-result-label { color: #ffffff !important; }
body.dark-mode .banner-details span,
body.dark-mode .call-status-label { color: #95b8a4 !important; }

/* 5. THE GUIDE SECTION (Steps) - fixing your readability issues */
/* 5. THE GUIDE SECTION (Steps) - No Hover highlights */
body.dark-mode .step {
    background: #132419 !important;
    border: 1px solid rgba(82, 183, 136, 0.12) !important;
}
body.dark-mode .step-header {
    background: transparent !important; /* Ensure no white/grey flash */
}
body.dark-mode .step-header:hover {
    background: rgba(82, 183, 136, 0.04) !important; /* Very subtle green hint only */
}
body.dark-mode .step-title {
    color: #ffffff !important;
    text-shadow: none !important; /* Remove any light-mode shadows */
}

/* 6. SCRIPT BLOCKS & TIPS */
body.dark-mode .script-block {
    background: rgba(82, 183, 136, 0.05) !important;
    border-left-color: #52b788 !important;
}
body.dark-mode .script-block em { color: #e8f5ec !important; }
body.dark-mode .script-block strong { color: #ffffff !important; }
body.dark-mode .tip {
    background: rgba(244, 162, 97, 0.06) !important;
    border-color: rgba(244, 162, 97, 0.12) !important;
    color: #95b8a4 !important;
}
body.dark-mode .tip strong { color: #f4a261 !important; }

/* 7. CALCULATORS & PRODUCT CARDS */
body.dark-mode .calc-box {
    background: #0d1b12 !important;
    border-color: rgba(82, 183, 136, 0.12) !important;
}
/*body.dark-mode .calc-box h4 { color: #ffffff !important; }*/
body.dark-mode .product-card { background: #0d1b12 !important; border-color: rgba(82, 183, 136, 0.12) !important; }
body.dark-mode .product-name { color: #ffffff !important; }
body.dark-mode .product-price { color: #52b788 !important; }
body.dark-mode .calc-result-box { background: linear-gradient(135deg, rgba(82,183,136,0.1), rgba(45,106,79,0.1)) !important; }
body.dark-mode .calc-result-box .big { color: #52b788 !important; }

/* 8. RECALL PLANNER & INPUTS */
body.dark-mode .rp-inner { background: rgba(244, 162, 97, 0.05) !important; border-color: rgba(244, 162, 97, 0.18) !important; }
body.dark-mode .rp-title { color: #ffffff !important; }
body.dark-mode .rp-note,
body.dark-mode .rp-date-input,
body.dark-mode .lead-comment-input {
    background: #0d1b12 !important;
    color: #e8f5ec !important;
    border-color: rgba(82, 183, 136, 0.15) !important;
}
/* 9. MINI STATS (Economy Bar) */
body.dark-mode .mini-stats-inner {
    background: rgba(82, 183, 136, 0.08) !important;
    border-color: rgba(82, 183, 136, 0.1) !important;
}
body.dark-mode .mini-stat {
    background: #132419 !important; /* --bg-card */
}
body.dark-mode .ms-label {
    color: #5a7d67 !important; /* --text-dim */
}

/* 10. STEPPER (Horizontal Progress Bar) */
body.dark-mode .stepper-wrapper {
    background: #132419 !important; /* --bg-card */
    border: 1px solid rgba(82, 183, 136, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
body.dark-mode .step-item .step-circle {
    background: #0d1b12 !important;
    border-color: rgba(82, 183, 136, 0.3) !important;
    color: #5a7d67 !important;
}
body.dark-mode .step-item.active .step-circle {
    background: #52b788 !important; /* Vibrant green for current step */
    color: #0d1b12 !important;
    border-color: #52b788 !important;
    box-shadow: 0 0 15px rgba(82, 183, 136, 0.3) !important;
}
body.dark-mode .step-item.completed .step-circle {
    background: #2d6a4f !important;
    color: #ffffff !important;
    border-color: #2d6a4f !important;
}
body.dark-mode .step-label {
    color: #95b8a4 !important; /* --text-muted */
}
body.dark-mode .step-item.active .step-label {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body.dark-mode .step-line {
    background: rgba(82, 183, 136, 0.1) !important;
}
/* --- BEAVER BUILDER HEADER FIX --- */
body.dark-mode .fl-row-content-wrap,
body.dark-mode .fl-row-content,
body.dark-mode .fl-col-content,
body.dark-mode .fl-module-content {
    background-color: #132419 !important; /* The --bg-card from your template */
    border-color: rgba(82, 183, 136, 0.1) !important;
}

/* Fix the Menu Text visibility */
body.dark-mode .menu-item-text,
body.dark-mode #menu-navigation a,
body.dark-mode #menu-garages a,
body.dark-mode .fl-menu-mobile-toggle-label {
    color: #e8f5ec !important; /* Template mint-white */
}

/* Fix Hover effects on the menu */
body.dark-mode .menu-item a:hover .menu-item-text,
body.dark-mode .menu-item a:hover {
    color: #52b788 !important; /* Template vibrant green */
}

/* Logo handling: If the logo is too dark/white, we can add a subtle glow */
body.dark-mode .fl-photo-content img {
    filter: drop-shadow(0 0 5px rgba(82, 183, 136, 0.2));
}

/* Fix the Mobile Hamburger Menu icon */
body.dark-mode .hamburger-menu rect {
    fill: #52b788 !important;
}
body.dark-mode #menu-item-146463,
body.dark-mode #menu-item-146463 a,
body.dark-mode #menu-item-146463.hvr-rectangle-out:before, /* Fix the Hover effect */
body.dark-mode #menu-item-146463.focus > a {
    background: #132419 !important; /* Template --bg-card */
    color: #e8f5ec !important;      /* Template --text */
}

/* --- 2. Fix the "Unreadable" Call Status Text --- */
body.dark-mode .call-status-inner p {
    color: #ffffff !important;
    font-weight: 700 !important;
}
/* --- ISOLATE MODALS FROM DARK MODE --- */
body.dark-mode .modal-content,
body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: #ffffff !important; /* Keep the popup white */
    color: #333333 !important;            /* Keep the text dark/black */
}

/* Ensure any internal headings in the modal are also dark */
body.dark-mode .modal-body h1,
body.dark-mode .modal-body h2,
body.dark-mode .modal-body h3,
body.dark-mode .modal-body p {
    color: #333333 !important;
}

/* ============================================================
   RECALL PLANNER: TEMPLATE DARK MODE ALIGNMENT
   ============================================================ */

body.dark-mode .rp-inner {
    background: var(--bg-card) !important; /* Template dark green card */
    border: 1px solid rgba(82, 183, 136, 0.2) !important;
    box-shadow: var(--shadow) !important;
}

/* Titles and Subtitles */
body.dark-mode .rp-title {
    color: var(--white) !important;
    font-family: 'Instrument Serif', serif;
}

body.dark-mode .rp-subtitle {
    color: var(--text-muted) !important;
    font-style: italic;
}

/* Section Labels (Quand rappeler / Créneau) */
body.dark-mode .rp-section-label {
    color: var(--accent) !important; /* Template orange accent */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* Standard Pills (Dates) */
body.dark-mode .rp-pill {
    background: rgba(244, 162, 97, 0.06) !important;
    border: 1px solid rgba(244, 162, 97, 0.25) !important;
    color: var(--accent) !important;
}

body.dark-mode .rp-pill:hover {
    background: rgba(244, 162, 97, 0.15) !important;
}

body.dark-mode .rp-pill.selected {
    background: var(--accent) !important;
    color: var(--bg) !important; /* Dark text on bright orange */
    border-color: var(--accent) !important;
}

/* Green Pills (Time Slots) */
body.dark-mode .rp-pill-green {
    background: rgba(82, 183, 136, 0.06) !important;
    border: 1px solid rgba(82, 183, 136, 0.25) !important;
    color: var(--green-light) !important;
}

body.dark-mode .rp-pill-green:hover {
    background: rgba(82, 183, 136, 0.15) !important;
}

body.dark-mode .rp-pill-green.selected {
    background: var(--green-light) !important;
    color: var(--green-dark) !important;
    border-color: var(--green-light) !important;
}

/* Inputs & Textareas */
body.dark-mode .rp-date-input,
body.dark-mode .rp-note {
    background: var(--bg) !important; /* Deepest green */
    color: var(--text) !important;
    border: 1px solid rgba(82, 183, 136, 0.2) !important;
}

body.dark-mode .rp-date-input:focus,
body.dark-mode .rp-note:focus {
    border-color: var(--green-light) !important;
    outline: none;
}

/* Success Confirmation */
body.dark-mode .rp-confirmation .rp-conf-text {
    color: var(--white) !important;
}

body.dark-mode .rp-confirmation .rp-conf-detail {
    color: var(--text-muted) !important;
}

/* The Save Button - using Template Gradient */
body.dark-mode .recall-planner .btn-primary {
    background: linear-gradient(135deg, var(--green-light), var(--green-mid)) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(82, 183, 136, 0.2) !important;
}
/* ============================================================
   STEP 4: PRODUIT & PRIX - TEMPLATE ALIGNMENT
   ============================================================ */

/* --- Remise Toggle --- */
body.dark-mode .remise-toggle {
    background: rgba(82, 183, 136, 0.06) !important;
    border-radius: 100px;
}
body.dark-mode .remise-btn {
    background: transparent !important;
    color: var(--text-muted) !important;
}
body.dark-mode .remise-btn.active {
    background: var(--green-light) !important;
    color: var(--green-dark) !important;
    font-weight: 700 !important;
}
body.dark-mode .remise-note {
    color: var(--green-light) !important;
    opacity: 0.8;
}

/* --- Product Cards --- */
body.dark-mode .product-card {
    background: var(--bg) !important;
    border: 1px solid rgba(82, 183, 136, 0.12) !important;
}
body.dark-mode .product-card:hover,
body.dark-mode .product-card.selected {
    border-color: var(--green-light) !important;
    background: rgba(82, 183, 136, 0.04) !important;
}
body.dark-mode .product-name { color: var(--white) !important; }
body.dark-mode .product-type { color: var(--text-dim) !important; }
body.dark-mode .product-price { color: var(--green-light) !important; }

/* Selected Checkmark (Template style) */
body.dark-mode .product-card.selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--green-light);
    color: var(--green-dark);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
}

/* --- Marge & Margin Boxes --- */
body.dark-mode .calc-box h4 {
    color: var(--white) !important;
}

/* This overrides your inline background-colors */
body.dark-mode .margin-box.cost {
    background: rgba(82, 183, 136, 0.05) !important;
}
body.dark-mode .margin-box.price {
    background: linear-gradient(135deg, rgba(82, 183, 136, 0.12), rgba(45, 106, 79, 0.12)) !important;
    border: 1px solid rgba(82, 183, 136, 0.2) !important;
}
body.dark-mode .margin-box.roi {
    background: rgba(244, 162, 97, 0.07) !important;
}

/* Values inside boxes */
body.dark-mode .margin-box.cost .m-val { color: var(--text-muted) !important; }
body.dark-mode .margin-box.price .m-val { color: var(--green-light) !important; }
body.dark-mode .margin-box.roi .m-val { color: var(--accent) !important; }
body.dark-mode .m-label { color: var(--text-dim) !important; }

/* Range Slider */
body.dark-mode #margeRange {
    accent-color: var(--green-light) !important;
}
body.dark-mode .calc-row label {
    color: var(--text-muted) !important;
}
body.dark-mode .calc-row input[type="number"] {
    background: var(--bg-card) !important;
    color: var(--white) !important;
    border: 1px solid rgba(82, 183, 136, 0.3) !important;
}
body.dark-mode .calc-row .val {
    color: var(--white) !important;
}

/* Special fix for the "€ HT" text and secondary labels */
body.dark-mode .calc-row span {
    color: var(--text-dim) !important;
}

/* --- Range Slider (Marge) --- */
body.dark-mode #margeRange {
    accent-color: var(--green-light) !important;
    background: rgba(82, 183, 136, 0.1) !important;
}

/* Fix for that specific Marge label with the transform */
body.dark-mode .calc-row label[style*="text-transform: uppercase"] {
    color: var(--green-light) !important;
    opacity: 0.9;
}

/* Dark Mode fix for the toggle */
body.dark-mode .expand-toggle {
    color: var(--green-light);
}

/* ============================================================
   STEP 5: OBJECTIONS (Dark Mode)
   ============================================================ */

body.dark-mode .obj-card {
    background: rgba(82, 183, 136, 0.04) !important;
    border: 1px solid rgba(82, 183, 136, 0.12) !important;
    transition: all 0.2s ease;
}

body.dark-mode .obj-card:hover {
    background: rgba(82, 183, 136, 0.08) !important;
    border-color: rgba(82, 183, 136, 0.25) !important;
}

body.dark-mode .obj-card .q {
    color: var(--accent) !important; /* Template Orange */
    font-weight: 700 !important;
}

body.dark-mode .obj-card .a {
    color: var(--text-muted) !important;
    border-top: 1px solid rgba(82, 183, 136, 0.1);
    margin-top: 8px;
    padding-top: 8px;
}

/* Links inside objections */
body.dark-mode .obj-card .a a {
    color: var(--green-light) !important;
    text-decoration: underline !important;
}

/* ============================================================
   STEP 6: GARANTIES (Dark Mode)
   ============================================================ */

/* Base Warranty Card */
body.dark-mode .w-card.base {
    background: rgba(82, 183, 136, 0.06) !important;
    border: 1px solid rgba(82, 183, 136, 0.15) !important;
}

body.dark-mode .w-card.base .w-num {
    color: var(--green-light) !important;
}

/* Extension Card (Orange) */
body.dark-mode .w-card.ext {
    background: rgba(244, 162, 97, 0.06) !important;
    border: 1px solid rgba(244, 162, 97, 0.15) !important;
}

body.dark-mode .w-card.ext .w-num {
    color: var(--accent) !important;
}

/* Specific override for your 3rd card which had an inline green background */
body.dark-mode .w-card[style*="background"] {
    background: rgba(82, 183, 136, 0.04) !important;
    border-color: rgba(82, 183, 136, 0.2) !important;
}

/* Text elements inside Warranty Cards */
body.dark-mode .w-card .w-label {
    color: var(--white) !important;
}

body.dark-mode .w-card .w-desc {
    color: var(--text-muted) !important;
}

body.dark-mode .w-card .w-desc strong {
    color: var(--accent) !important;
}

body.dark-mode .w-card .w-desc a {
    color: var(--green-light) !important;
}

/* ============================================================
   FOOTER DARK MODE OVERRIDES
   ============================================================ */

/* Main Footer Sections Background */
body.dark-mode .biomotors-partners-section,
body.dark-mode .biomotors-links-section {
    background-color: var(--bg-card) !important; /* Matches dashboard cards */
    border-top: 1px solid rgba(82, 183, 136, 0.1) !important;
}

/* Partner Title & Text */
body.dark-mode .biomotors-partners-title-column,
body.dark-mode .biomotors-partner-title-text {
    color: var(--green-light) !important;
    font-weight: 700;
}

/* Copyright Text */
body.dark-mode .biomotors-copyright {
    color: var(--text-dim) !important;
}

/* Footer Links & Dividers */
body.dark-mode .biomotors-footer-links a {
    color: var(--text-muted) !important;
    transition: color 0.2s ease;
}

body.dark-mode .biomotors-footer-links a:hover {
    color: var(--green-light) !important;
}

body.dark-mode .biomotors-footer-links span {
    color: var(--green-dark) !important; /* The separators | */
}

/* Partner Logos Background (Optional)
   If logos have white backgrounds and look bad, this adds a subtle light glow
   behind them so they remain legible without ruining the dark theme. */
body.dark-mode .biomotors-partner-logo-img {
    filter: brightness(0.9) contrast(1.1);
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 8px;
}
body.dark-mode .script-block .bm-assistant-wrapper {
    background-color: transparent !important;
}

body.dark-mode .script-block .label,
body.dark-mode .script-block .bm-assistant-label {
    background-color: #132419 !important; /* Template --bg-card: distinct from body */
    color: #52b788 !important;           /* Vibrant Template Green */
    border: 1px solid rgba(82, 183, 136, 0.4) !important;
    padding: 6px 16px !important;
    border-radius: 100px !important;
    display: inline-block !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- DARK MODE LOGO SWAP --- */
body.dark-mode .fl-photo-content img.fl-photo-img {
    /* Replaces the visual image source */
    content: url('/wp-content/uploads/2026/03/biomotors_white_text.png') !important;

    /* Ensures the replacement doesn't stretch and maintains proportions */
    height: auto !important;
    max-width: 100% !important;

    /* Clean up any drop-shadows that might look muddy on the white logo */
    filter: none !important;
}
body.dark-mode .dyn-client-name {
    color: #52b788 !important; /* Template Vibrant Green */
    font-weight: 800;
}

body.dark-mode .banner-name-script {
    color: #52b788 !important; /* Template Vibrant Green */
    font-weight: 800;
}

body.dark-mode .voicemail-inner h3,
body.dark-mode .call-result-inner h3 {
    color: #ffffff !important;
}
:root {
    --bm-green: #8ac642;
    --bm-green-dark: #79B135;
    --bm-gray-light: lightgray;
    --bm-white: #ffffff;
    --bm-text: #333333;

    --green-dark: #1a3c28;
    --green-mid: #2d6a4f;
    --green-light: #52b788;
    --green-pale: #d8f3dc;
    --accent: #f4a261;
    --accent-dark: #e76f51;
    --bg: #0d1b12;
    --bg-card: #132419;
    --text: #e8f5ec;
    --text-muted: #95b8a4;
    --text-dim: #5a7d67;
    --white: #ffffff;
    --shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.bm-assistant-wrapper .leads-section,
.bm-assistant-wrapper .client-banner,
.bm-assistant-wrapper .call-status-section,
.bm-assistant-wrapper .voicemail-section,
.bm-assistant-wrapper .call-result-section,
.bm-assistant-wrapper .mini-stats,
.bm-assistant-wrapper .guide-section {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    display: none;
}
.leads-section {
    display: block !important;
    max-width: 1200px !important;
    margin: 20px auto !important;
}

/* Force specific visible states while maintaining layout */
.leads-section,
.client-banner.visible,
.call-status-section.visible,
.voicemail-section.visible,
.call-result-section.visible,
.mini-stats.visible,
.guide-section.visible {
    display: block !important;
}

/* Force inner boxes to fill the 1200px width */
.table-wrap,
.banner-inner,
.call-status-inner,
.voicemail-inner,
.call-result-inner,
.mini-stats-inner {
    width: 100% !important;
    box-sizing: border-box !important;
}

body {
    background-color: #f4f4f4;
    color: var(--bm-text);
    font-family: 'DM Sans', sans-serif;
    /* NEW: Global increase */
    font-size: 18px;
    line-height: 1.7;
}
.bm-assistant-wrapper {
    background-color: #f4f4f4 !important;
    color: var(--bm-text) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    /* Standardizes the weight for readability */
    font-weight: 400 !important;
}

/* PAGE HEADER */
.page-header {
    text-align: right !important;
    /* We only keep padding for top and bottom, 0 for left and right */
    padding: 2rem 0 !important;
    max-width: 1200px !important;
    margin: 0 auto !important; /* Centers the container so it matches the table */
    border-bottom: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Anchors the content block to the right */
}
.page-header h1 {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    color: #000;
    font-family: 'Instrument Serif', serif;
    width: 100%; /* Allows text-align to work across the full width */
}
.page-header p {
    margin-right: 0 !important;
    margin-top: 10px !important;
    width: 100%;
    /* Optional: if you want the sub-text to wrap to stay in the right half */
    max-width: 600px;
}
.theme-switch-wrapper {
    top: auto !important;       /* Resets the 50% centering */
    bottom: -20px !important;    /* Moves it lower as requested */
    right: 0px !important;
    transform: none !important;  /* Removes the translateY centering */
}
/* Ensure the wrapper expands */
th:nth-child(8),
td:nth-child(8) {
    min-width: 100px; /* Keep this one slightly wider for the 📅 date badges */
}

/* 2. Ensure badges don't wrap internally */
.badge-new,
.badge-contacted,
.badge-pending {
    white-space: nowrap !important; /* Prevents "En" and "attente" from splitting */
    display: inline-block !important;
    text-align: center;
}

.bm-assistant-wrapper .table-wrap {
    width: 100% !important;
    overflow-x: hidden !important; /* Forces the horizontal scroll back */
    border-radius: 1em;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* FIX: Table Layout Auto makes columns stay closer together */
.bm-assistant-wrapper table {
    width: 100% !important;
    /*min-width: 1200px !important; !* Ensures the table is wide enough to show all columns *!*/
    table-layout: auto;
    border-collapse: collapse;
}

thead th {
    /*padding: 15px;*/
    background-color: var(--bm-green);
    color: black;
    text-transform: uppercase;
    font-size: 11px; /* Keeping headers slightly smaller but bold */
    font-weight: 700;
    padding: 8px 4px !important;
}

tbody tr { cursor: pointer; transition: background 0.2s; border-bottom: 1px solid #eee; }
tbody tr:nth-child(even) { background: #fafafa; }
tbody tr:hover { background: #f0f0f0; }
tbody tr.selected { background-color: #e8f5e9 !important; box-shadow: inset 4px 0 0 var(--bm-green); }

tbody td {
    /*padding: 14px 10px;*/
    padding: 10px 4px !important;
    font-size: 13px; /* RESTORED: Back to your original font size */
    color: var(--bm-text);
}
/* Add the 'Distance' between columns here */
.bm-assistant-wrapper thead th,
.bm-assistant-wrapper tbody td {
    width: auto;
    padding: 10px 8px !important; /* Reduced from 15px to 8px to bring columns closer */
    white-space: normal;
    text-align: center;
    vertical-align: middle;
}
/* PLATE STYLING */
.td-plate {
    font-family: monospace;
    background: rgba(0,0,0,0.05);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
}
.bm-assistant-wrapper th:first-child,
.bm-assistant-wrapper td:first-child {
    min-width: 120px !important;    /* Forces Chrome to respect the space needed for a date */
    white-space: nowrap !important;  /* Prevents the date from stacking vertically */
    width: 120px !important;        /* Gives Chrome a specific target width */
}

.bm-assistant-wrapper th:nth-child(9),
.bm-assistant-wrapper td:nth-child(9) {
    width: 20% !important;
    white-space: normal;
    text-align: left;
    min-width: 200px !important;
    max-width: 250px !important;
    position: relative;
}
.comment-wrapper {
    /*width: 100%;*/
    /*position: relative;*/
    /*display: flex;*/
    /*align-items: center;*/
    position: relative;
    display: flex;
    flex-direction: column;
}

.lead-comment-input {
    width: 100% !important;
    height: 40px !important; /* Fixed height for scannability */
    min-height: 40px !important;
    overflow-y: hidden !important; /* Forces scrollbar to stay hidden */
    resize: none;
    transition: all 0.3s ease;
    /* Hide scrollbars for Chrome, Safari and Opera */
    &::-webkit-scrollbar { display: none; }
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    scrollbar-width: none;
    /*width: 100%;*/
    /*min-width: 100%;*/
    /*height: 40px;*/
    /*padding: 5px;*/
    /*border: 1px solid #eee;*/
    /*background: #fdfdfd;*/
    /*border-radius: 8px;*/
    /*font-size: 12px;*/
    /*resize: none; !* Prevents manual resizing which breaks layout *!*/
    /*line-height: 1.6;*/
    /*color: #111;*/
    /*transition: all 0.3s ease;*/
    /*overflow-y: auto; !* Adds the modern scrollbar when text is long *!*/
    /*display: block;*/
}
/* --- EXPANDED STATE --- */
.lead-comment-input.is-expanded {
    height: 120px !important;
    overflow-y: auto !important; /* Bring back scroll if text is truly massive */
    scrollbar-width: thin; /* Minimal scrollbar for Firefox when expanded */
}

/* --- SEE MORE TOGGLE --- */
.expand-toggle {
    font-size: 10px;
    color: var(--bm-green-dark);
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    margin-top: 4px;
    align-self: flex-end;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.expand-toggle:hover {
    opacity: 1;
    text-decoration: underline;
}

.lead-comment-input:focus {
    outline: none;
    border-color: var(--bm-green);
    background: #fff;
    box-shadow: 0 2px 8px rgba(138, 198, 66, 0.15);
}

/* 3. SUCCESS INDICATOR ANIMATION */
.save-indicator {
    position: absolute;
    right: 10px;
    color: var(--bm-green-dark);
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* The class we will add via JS */
.comment-saved .lead-comment-input {
    border-color: var(--bm-green) !important;
    background: #f9fff4 !important;
}

.comment-saved .save-indicator {
    opacity: 1;
    transform: scale(1.2);
}

/* STATUS BADGES (Using original logic) */
.badge-new {
    /*font-size: 0.75rem;*/
    /*padding: 4px 12px;*/
    border-radius: 100px;
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffccbc;
}
.badge-contacted {
    font-size: 0.75rem; padding: 4px 12px; border-radius: 100px;
    background: #e8f5e9; color: var(--bm-green-dark); border: 1px solid #c8e6c9;
}

.badge-pending {
    /*font-size: 0.75rem;*/
    /*padding: 4px 12px;*/
    border-radius: 100px;
    background: #fff9c4; /* Light Yellow */
    color: #f57f17; /* Dark Orange/Yellow */
    border: 1px solid #fff59d;
}

/* CALL STATUS INTERFACE */
/*.call-status-section { max-width: 1200px; margin: 1rem auto; padding: 0 2rem; display: none; }*/
.call-status-section.visible { display: block; animation: slideDown 0.4s ease; }

.call-status-inner {
    text-align: center; padding: 2.5rem;
    background: var(--bm-white);
    border: 2px solid var(--bm-green);
    border-radius: 1em;
}


/* Neutral state for both buttons */
.call-btn {
    padding: 18px 36px;
    font-size: 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #ddd; /* Subtle border */
    background: #f8f8f8;    /* Neutral gray */
    color: #666;
    transition: all 0.2s ease;
    margin-right: 15px;
}

/* Hover effect: slight lift and darken border */
.call-btn:hover {
    transform: translateY(-2px);
    border-color: #bbb;
    background: #efefef;
}

/* The "Selected" state */
.call-btn.active {
    background: var(--bm-green);
    color: white;           /* White text looks sharper on green */
    border-color: var(--bm-green);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }


.client-banner.visible { display: block; animation: slideDown 0.4s ease; }

.banner-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bm-white);
    border: 2px solid var(--bm-green);
    border-radius: 1em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.banner-avatar {
    width: 60px; height: 60px;
    border-radius: 12px;
    background: var(--bm-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700; color: black;
}

.banner-info { flex: 1; }
.banner-name { font-size: 1.25rem; font-weight: 700; color: black; margin-bottom: 4px; }
.banner-details {
    display: flex;
    gap: 20px;
    font-size: 18px;
    color: #555;
}
.banner-plate { font-family: monospace; background: #eee; padding: 2px 8px; border-radius: 4px; font-weight: bold; }

.banner-actions { display: flex; gap: 10px; }
#bannerPhone {
    color: var(--bm-green-dark);
    font-size: 1.1rem;
}

.banner-details span {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Buttons in original style */
.btn-sm {
    padding: 12px 28px !important;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.bm-assistant-wrapper .btn-sm,
.bm-assistant-wrapper .btn-primary,
.bm-assistant-wrapper .btn-next-footer,
.bm-assistant-wrapper .call-btn,
.bm-assistant-wrapper .result-btn {
    min-height: 48px !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*border-radius: 50px !important; !* Forces rounded for assistant only *!*/
}
.btn-outline { background: white; border: 1px solid var(--bm-green); color: var(--bm-green-dark); }
.btn-next { background: #eee; color: #333; }
.btn-sm:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* VOICEMAIL & PLANNER STYLES */
/*.voicemail-section, .call-result-section {*/
/*    max-width: 98%; margin: 1.5rem auto; display: none; !* Hidden by default *!*/
/*}*/

.voicemail-inner, .call-result-inner {
    background: var(--bm-white);
    border: 2px solid #eee;
    border-radius: 1em;
    padding: 1.5rem;
}

.script-block .label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bm-green-dark);
    background: rgba(138, 198, 66, 0.1); /* Light green tint */
    padding: 5px 15px;
    border-radius: 100px;
    margin-bottom: 12px;
    font-weight: 700;
}


.script-block {
    font-size: 18px !important;
    background: #f9f9f9;
    border-left: 5px solid var(--bm-green);
    padding: 2rem; /* More breathing room */
    margin-bottom: 2rem;
    border-radius: 0 12px 12px 0;
}

.bm-assistant-wrapper .label {
    font-size: 16px !important;
    font-weight: 800;
    color: var(--bm-green-dark);
    margin-bottom: 10px;
    padding: 4px 12px !important;
}
/* PILLS FOR DATE/TIME */
.rp-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 15px 0 8px;
    color: #444;
}

.rp-pills {
    display: flex;
    flex-wrap: wrap;       /* Allows items to wrap on mobile */
    align-items: center;   /* Vertically centers buttons and input */
    justify-content: center; /* Centers the whole group */
    gap: 12px;              /* Consistent spacing between all items */
    margin-bottom: 25px;
}
.rp-pill, .rp-pill-green {
    border-radius: 50px !important;
    /* INCREASED PADDING */
    padding: 14px 28px !important;
    border: 1px solid #e0e0e0 !important;
    background: #ffffff;
    color: #555;
    /* LARGER FONT */
    font-size: 18px !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.rp-pill:hover, .rp-pill-green:hover {
    border-color: var(--bm-green);
    background: #f9fff4;
    transform: translateY(-1px);
}

/* THE ACTIVE STATE (Match your JS logic) */
.rp-pill.selected, .rp-pill-green.selected {
    background: var(--bm-green) !important;
    color: white !important;
    border-color: var(--bm-green) !important;
    box-shadow: 0 4px 12px rgba(138, 198, 66, 0.3);
}

/* RECALL PLANNER CARD STYLE */
.rp-inner {
    background: var(--bm-white) !important;
    border: 2px solid #eee !important;
    border-radius: 1em !important;
    padding: 2rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    margin-top: 10px;
}

/* Ensure the title stands out inside the white card */
.rp-title {
    font-family: 'Instrument Serif', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
}

.rp-subtitle {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

/* MODERNIZING THE MAIN BUTTON (Enregistrer & Suivant) */
.bm-assistant-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--bm-green), #2d6a4f) !important; /* Professional Gradient */
    border-radius: 50px !important; /* Rounded shape */
    padding: 16px 32px !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    /*font-size: 1rem !important;*/
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(45, 106, 79, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none; /* Keeps it readable */
}

.bm-assistant-wrapper .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(45, 106, 79, 0.3);
    filter: brightness(1.1);
}


.rp-date-input {
    width: 180px !important;
    /* INCREASED HEIGHT to match the new pill size */
    height: 52px !important;
    border-radius: 50px !important;
    padding: 0 20px !important;
    border: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    font-family: inherit;
    font-size: 16px !important;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.rp-date-input:hover {
    border-color: var(--bm-green) !important;
    background: #f9fff4 !important;
}

/* Remove individual margins from pills so they rely on the container gap */
.rp-pill, .rp-pill-green {
    margin: 0 !important;
}

.btn-primary { background: var(--bm-green); color: black; font-weight: 700; }

/* MINI STATS */
.mini-stats-inner {
    display: flex;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.mini-stat {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-right: 1px solid #eee;
}
.mini-stat:last-child { border-right: none; }
.ms-val {
    font-weight: bold;
    color: var(--bm-green-dark);
    font-size: 1.6rem; /* Larger stats */
}
.ms-label {
    font-size: 1.4rem;
}
/* STEPS ACCORDION */
.step {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 10px;
}
.step-header {
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fafafa;
    border-radius: 10px;
}
.step-number {
    width: 25px; height: 25px;
    background: var(--bm-green);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold; margin-right: 10px;
}
.step-title {
    flex: 1;
    font-weight: 700;
    font-size: 20px; /* Increased from 16px */
}
.step-content {
    font-size: 1.4rem; /* Global text size for guide content */
}
.step-tag { font-size: 1.2rem; padding: 2px 8px; border-radius: 10px; background: #eee; color: #666; }

.step-body { display: none; padding: 15px; border-top: 1px solid #eee; font-size: 1.3rem !important; }
.step.active .step-body { display: block; }
.step.active .step-header { background: #fff; border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0; }

.tip {
    font-size: 18px !important;
    background: #fff9c4;
    padding: 25px;
    border-radius: 12px;
    margin: 15px 0;
    border-left: 4px solid #fbc02d;
    line-height: 1.7;
}

/* CALCULATOR STYLES */
.calc-box { background: #fdfdfd; border: 1px solid #eee; border-radius: 12px; padding: 1.25rem; margin: 1rem 0; }
.calc-box h4 {
    font-size: 20px;
    font-weight: 700;
}
.calc-row label {
    font-size: 16px;
    font-weight: 600;
}
.calc-row label { flex: 1; color: #666; min-width: 130px; }
.calc-row input[type="range"] {
    flex: 2;
    accent-color: var(--bm-green);
    height: 5px;
    width: 75%;
    display: inline-block !important;
}

.pleins-big {
    font-size: 17px;
    font-weight: bold;
    color: var(--bm-green-dark);
    text-align: center;
    margin: 10px 0;
}

/*.tabs { display: flex; gap: 5px; margin-bottom: 1rem; background: #f0f0f0; border-radius: 100px; padding: 4px; }*/
.tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 1rem;
    background: #f0f0f0;
    border-radius: 100px;
    padding: 4px;
}
/*.tab-btn { flex: 1; padding: 8px; border: none; border-radius: 100px; background: transparent; cursor: pointer; font-size: 0.85rem; transition: 0.3s; }*/
.tab-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;

    /* Force text to be black and normal weight by default */
    color: #000 !important;
    font-weight: 500;
    font-size: 16px;
}
.tab-btn:hover:not(.active) {
    background: var(--bm-green);
    /*background: rgba(138, 198, 66, 0.2); !* Soft green tint on hover *!*/
    color: #000 !important;
    font-weight: 500;
}
.tab-btn.active { background: var(--bm-green); color: #000; font-weight: bold; }

.calc-results { display: flex; gap: 10px; margin-top: 15px; }
.calc-result-box { flex: 1; text-align: center; padding: 12px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee; font-size: 2rem !important; }
.calc-result-box .big { font-size: 19px; font-weight: bold; color: #333; }
.calc-result-box .sub { font-size: 16px; color: #888; }
.calc-hyp { font-size: 0.7rem; color: #999; margin-top: 10px; font-style: italic; text-align: center; }

.dyn, .dyn-accent { font-weight: bold; color: var(--bm-green-dark); }

.step-body {
    font-size: 1.25rem !important; /* General text inside dropdowns */
}

.script-block em {
    line-height: 1.7;
    color: #111;
    display: block;
    margin-top: 10px;
}

/* Centers the Call Status Buttons specifically */
.call-status-btns {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.badge-new,
.badge-contacted,
.badge-pending {
    font-size: 14px !important;
    padding: 4px 8px !important;
    white-space: normal !important;
    line-height: 1.1;
    font-weight: bold;
}

/* PRODUCT SELECTION GRID */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
.product-card {
    border: 2px solid #eee; border-radius: 12px; padding: 15px;
    text-align: center; cursor: pointer; transition: 0.3s; background: #fff;
}
.product-card:hover { border-color: var(--bm-green); }
.product-card.selected { border-color: var(--bm-green); background: rgba(138, 198, 66, 0.05); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.product-img img {
    /*max-height: 80px; */
    margin-bottom: 10px;
}
.product-name {
    font-weight: bold;
    font-size: 17px;
    color: #333;
}
.product-type {
    font-size: 16px;
    color: #777;
    margin-bottom: 5px;
}
.product-price {
    font-weight: 800;
    color: var(--bm-green-dark);
    font-size: 18px;
}

/* REMISE TOGGLE */
/*.remise-toggle { display: flex; gap: 5px; background: #f0f0f0; padding: 4px; border-radius: 100px; max-width: 300px; margin-bottom: 15px; }*/
.remise-toggle {
    display: flex;
    gap: 5px;
    background: #f0f0f0;
    padding: 4px;
    border-radius: 100px;
    max-width: 320px;
    margin-bottom: 15px;
}
/*.remise-btn { flex: 1; border: none; padding: 8px; border-radius: 100px; cursor: pointer; font-size: 0.9rem; transition: 0.3s; font-weight: 600; }*/
.remise-btn {
    flex: 1;
    border: none;
    padding: 8px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;

    /* UNSELECTED STATE: White background, Black text, Normal weight */
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 500;
}
/*.remise-btn.active { background: var(--bm-green); color: black; }*/
.remise-btn.active {
    background: var(--bm-green) !important;
    color: #000000 !important;
    font-weight: 800 !important; /* Bold only when active */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.remise-btn:hover:not(.active) {
    background: #f9f9f9 !important;
    border-color: var(--bm-green);
}

/* OBJECTIONS GRID & CARDS */
.obj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
}

/* On mobile/split screen, go to 1 column */
@media (max-width: 700px) {
    .obj-grid { grid-template-columns: 1fr; }
}

.obj-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.obj-card:hover {
    border-color: var(--bm-green);
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.obj-card .q {
    font-weight: 700;
    color: #333;
    font-size: 20px;
}

.obj-card .a {
    font-size: 18px;
    color: #555;
    margin-top: 10px;
    display: none; /* Hidden by default */
    line-height: 1.5;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* Shown when clicked */
.obj-card.open {
    border-color: var(--bm-green);
    background: #fff;
}

.obj-card.open .a {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Tag style for the header */
.tag-objection { background: #fff3e0; color: #e65100; }

/* WARRANTY GRID LAYOUT */
.warranty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

/* Responsive adjustment for split screen or mobile */
@media (max-width: 800px) {
    .warranty-grid { grid-template-columns: 1fr; }
}

.w-card {
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eee;
    background: #fff;
    transition: transform 0.2s ease;
}

.w-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

.w-card.base { background: #f9f9f9; }
.w-card.ext { background: #fffdf0; border-color: #ffe082; }

.w-num {
    font-family: 'Instrument Serif', serif;
    font-size: 25px;
    font-weight: bold;
    color: var(--bm-green-dark);
    line-height: 1;
    margin-bottom: 10px;
}

.w-label {
    font-weight: 700;
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}

.w-desc {
    font-size: 18px;
    color: #666;
    line-height: 1.5;
}

/* Tag style for the Step Header */
.tag-garantie {
    background: #e8f5e9;
    color: var(--bm-green-dark);
}

/* TAG CLOSING STYLE */
.tag-closing {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

/* CONTAINER & LABEL */
.call-result-label {
    font-family: 'Instrument Serif', serif;
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.call-result-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* BASE BUTTON STYLE */
.result-btn {
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 900;
    cursor: pointer;
    background: #fff;
    border: 4px solid #e0e0e0;
    color: #666;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* INDIVIDUAL STATES & SELECTION */

/* Interested - Green */
.result-btn-ok:hover,
.result-btn-ok.chosen {
    border-color: var(--bm-green) !important;
    color: #2d6a4f !important;
    background: #f1f8e9 !important;
}

/* Recall - Orange */
.result-btn-recall:hover,
.result-btn-recall.chosen {
    border-color: #f4a261 !important;
    color: #e76f51 !important;
    background: #fff7ed !important;
}

/* Not Interested - Red */
.result-btn-no:hover,
.result-btn-no.chosen {
    border-color: #ef5350 !important;
    color: #c62828 !important;
    background: #ffebee !important;
}

/* Focus Scale for chosen */
.result-btn.chosen {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.bottom-bar {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 20px auto 0 !important;
    padding: 0 10px !important;
    display: none; /* Hidden until setCallStatus is clicked */
}

/* When visible, it acts like a normal section */
.bottom-bar.visible {
    display: block !important;
    animation: slideDown 0.4s ease;
}

.bottom-inner {
    background: var(--bm-white);
    border: 2px solid #eee;
    border-radius: 1em;
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.bottom-inner .who {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #333;
    font-weight: 600;
}

.bottom-inner strong {
    color: var(--bm-green-dark) !important;
    font-weight: 800;}

.btn-next-footer {
    background: var(--bm-green);
    color: black;
    padding: 12px 25px;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-next-footer:hover {
    transform: scale(1.05);
    background: var(--bm-green-dark);
}

/* STEPPER CONTAINER */
.stepper-wrapper {
    position: sticky;
    top: 0; /* Adjust to 32px if WP Admin Bar is visible */
    z-index: 1000;
    background: #fff;
    padding: 20px 0; /* Increased padding */
    max-width: 1200px !important;
    margin: 30px auto !important;
    border: 1px solid #ddd;
    border-radius: 10px;
    border-bottom: 2px solid #eee; /* Thicker line */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.stepper-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

/* INDIVIDUAL STEP */
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    flex: 1;
}

.step-circle {
    width: 48px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: #999;
    transition: all 0.4s ease;
    z-index: 2;
}

.step-label {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #bbb;
    margin-top: 12px;
    letter-spacing: 0.06em;
    text-align: center;
}

/* CONNECTOR LINE */
.step-line {
    flex: 1;
    height: 3px;
    background: #eee;
    margin-top: -38px; /* Aligns with center of circles */
}

/* ACTIVE STATE (Current Step) */
.step-item.active .step-circle {
    background: var(--bm-green);
    border-color: var(--bm-green);
    color: white;
    transform: scale(1.25);
    box-shadow: 0 0 20px rgba(138, 198, 66, 0.4);
}

.step-item.active .step-label {
    color: var(--bm-green-dark);
    transform: translateY(2px);
}

/* COMPLETED STATE (Steps behind) */
.step-item.completed .step-circle {
    background: var(--bm-green-dark);
    border-color: var(--bm-green-dark);
    color: white;
}
.step-item.completed .step-line {
    background: var(--bm-green); /* Line turns green as you progress */
}

.step-item.completed .step-label {
    color: #444;
}
/* 1. COMPATIBLE STATE (Green) */
.script-block.is-compatible {
    background: rgba(138, 198, 66, 0.08) !important; /* Soft Green Background */
    border-left: 8px solid var(--bm-green) !important; /* Thicker Border */
}

.script-block.is-compatible .bm-assistant-label {
    background: var(--bm-green) !important;
    color: #000 !important; /* High contrast black text on green */
}

/* 2. NOT COMPATIBLE STATE (Red) */
.script-block.is-not-compatible {
    background: rgba(231, 76, 60, 0.08) !important; /* Soft Red Background */
    border-left: 8px solid #e74c3c !important; /* Thicker Red Border */
}

.script-block.is-not-compatible .bm-assistant-label {
    background: #e74c3c !important;
    color: #fff !important; /* High contrast white text on red */
}

/* 3. INCREASED LABEL SIZE & SPACING */
.bm-assistant-label {
    display: inline-block !important;
    font-size: 17px !important; /* Increased from 16px */
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 20px !important; /* More spacing inside label */
    border-radius: 8px;
    margin-bottom: 20px !important; /* More spacing before the script text */
    letter-spacing: 0.03em;
}

/* Adjust the script text itself for better reading */
.script-block em {
    font-size: 20px !important;
    line-height: 1.7 !important; /* Increased spacing between lines */
    display: inline-block !important;
}

.dyn-client-name {
    color: var(--bm-green-dark); /* Light Mode Green */
    font-weight: 800;
}
.dyn-client-name,
.dyn-client-vehicle,
.dyn-client-plate {
    display: inline !important;    /* Forces it to stay on the same line as "Bonjour" */
    color: var(--bm-green-dark) !important; /* Light Mode Green */
    font-weight: 800 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dyn-client-name br {
    display: none !important;
}

.banner-name-script br {
    display: none !important;
}