.mmr-fit-guide-container {
    /* Font inherited from theme (Avada) */
    color: #1e293b;
    /* slate-800 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    width: 100%;
    /* Ensure it takes full width of parent */
}

.mmr-fit-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .mmr-fit-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Menu Column (Left) */
.mmr-fit-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mmr-fit-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    border-radius: 1rem;
    /* More rounded */
    transition: all 0.2s ease-in-out;
    border: none;
    background-color: #11999e;
    /* Teal matching screenshot */
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mmr-fit-btn:hover {
    background-color: #0e858a;
    /* Darker teal on hover */
    transform: translateY(-2px);
}

/* Active States for Buttons - maintaining the teal look but maybe highlighting slightly differently if needed, 
   but user asked for "items to look like example", so maybe uniform. 
   However, we need to show selection. 
   Let's make selected state slightly different or keep the color logic but change base?
   Actually, the screenshot showed ALL buttons as Teal. 
   I will make them ALL Teal by default.
   And on Active, maybe I will keep the color differentiation (Blue/Green/Orange) because that corresponds to the Right Panel?
   OR maybe the right panel stays colored but the buttons on left stay Teal?
   The user said "get the items you select to look more like the example".
   I will make the buttons Teal by default. 
   And when active, maybe keep them Teal but add a border or shadow? 
   Or stick to the Blue/Green/Orange distinction?
   The screenshot shows them all Teal. 
   I will try to make them ALL Teal. And maybe just darken/lighten on selection.
*/
.mmr-fit-btn.active.mmr-fit-btn-plans,
.mmr-fit-btn.active.mmr-fit-btn-ondemand,
.mmr-fit-btn.active.mmr-fit-btn-project {
    background-color: #0d7a7e;
    /* Darker Teal for active state to show selection? Or maybe Lighter? */
    /* Let's try to infer if they wanted the Blue/Green/Orange gone from the buttons. */
    /* "Look more like the example" -> Example had Teal buttons. */
    /* So I will remove the Blue/Green/Orange backgrounds from buttons. */
    border: 2px solid white;
    /* Add a border to indicate selection maybe? */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.mmr-btn-title {
    font-weight: 800;
    /* Bolder */
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mmr-btn-desc {
    font-size: 0.875rem;
    opacity: 0.8;
    line-height: 1.4;
}

/* Content Column (Right) */
.mmr-fit-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    min-height: 400px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Ensure scrollbar doesn't shift width if it appears internally, though usually this grows */
    scrollbar-gutter: stable;
}

.mmr-fit-panel {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.mmr-fit-panel.active {
    display: block;
}

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

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

.mmr-panel-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.label-plans {
    color: #2563eb;
}

/* blue-600 */
.label-ondemand {
    color: #059669;
}

/* emerald-600 */
.label-project {
    color: #ea580c;
}

/* orange-600 */

.mmr-panel-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    color: #1e293b;
    line-height: tight;
}

/* Check Lists */
.mmr-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mmr-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.5;
    color: #1e293b;
}

.mmr-check-list li svg {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.list-plans li svg {
    color: #2563eb;
}

.list-ondemand li svg {
    color: #059669;
}

.list-project li svg {
    color: #ea580c;
}

/* Panel Footer */
.mmr-panel-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
    /* slate-100 */
    font-size: 0.875rem;
    color: #64748b;
    /* slate-500 */
    font-style: italic;
}

/* V2.0 Component Styles */
.mmr-lifecycle-container {
    max-width: 1200px;
    /* Increased from 900px */
    width: 100%;
    margin: 4rem auto;
    font-family: inherit;
    color: #333;
    background: #fdfdfd;
    /* Slightly off-white */
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mmr-lc-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.mmr-lc-header h3 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 1rem;
    font-weight: 800;
}

.mmr-lc-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 1rem;
    color: #64748b;
    flex-wrap: wrap;
    /* Ensure wrapping on small screens */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    /* Prevent squashing on mobile */
}

.swatch-mmr {
    background-color: #55231e;
}

.swatch-internal {
    background-color: #30312f;
}

.mmr-lc-chart-wrapper {
    position: relative;
    width: 100%;
}

.mmr-lc-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-label {
    fill: #94a3b8;
    font-weight: 600;
}

/* Animations */
.area-mmr,
.area-internal {
    transform-origin: bottom;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scaleY(0);
}

.chart-pin {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 1.2s;
}

/* Active State */
.mmr-lifecycle-container.animate .area-mmr {
    opacity: 1;
    transform: scaleY(1);
}

.mmr-lifecycle-container.animate .area-internal {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.3s;
    /* Draw teal after yellow starts */
}

.mmr-lifecycle-container.animate .chart-pin {
    opacity: 1;
}

/* V2.5 Responsive Comparison Table */
.mmr-comp-container {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto;
    font-family: inherit;
    /* User requested Avada fonts */
    background: white;
    /* border-radius: 1rem; Remove rounded corners to match square grid example if needed, but keeping container rounded is usually fine. User example looks square-ish. Let's keep subtle radius but cleaner borders. */
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Desktop Grid Layout */
.mmr-comp-header,
.mmr-comp-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
    /* padding: 1rem;  Remove padding from row to let cells handle it for full borders */
    padding: 0;
    align-items: stretch;
    /* Stretch to fill height for borders */
    border-bottom: 1px solid #e2e8f0;
}

.mmr-comp-header {
    background-color: #f9f9f9;
    /* Light gray header */
    font-weight: 700;
    color: #333;
}

.cell-title {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    /* Bolder */
}

/* Colors matching screenshot */
.cell-plans .cell-title {
    color: #2563eb;
}

/* Blue */
.cell-ondemand .cell-title {
    color: #059669;
}

/* Green */
.cell-project .cell-title {
    color: #55231e;
}

/* Maroon matching chart */

.mmr-comp-row:last-child {
    border-bottom: none;
}

.mmr-comp-row:hover {
    background-color: #fAfAfA;
}

.mmr-comp-cell {
    padding: 1rem;
    /* Padding moves to cell */
    font-size: 0.95rem;
    color: #333;
    text-align: center;
    border-right: 1px solid #e2e8f0;
    /* Vertical Border */
    display: flex;
    align-items: center;
    /* Vertically center content */
    justify-content: center;
}

.mmr-comp-cell:last-child {
    border-right: none;
}

.mmr-comp-cell.cell-feature {
    text-align: left;
    justify-content: flex-start;
    /* Align left */
    font-weight: 700;
    /* Bold feature names */
    color: #1a1a1a;
}

.cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

/* Icons */
.icon-check,
.icon-x {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-check.plans {
    color: #2563eb;
}

.icon-check.ondemand {
    color: #059669;
}

.icon-check.project {
    color: #55231e;
}

/* Maroon */
.icon-x {
    color: #94a3b8;
}

.text-strong {
    font-weight: 600;
}

.text-muted {
    color: #94a3b8;
}

.row-pricing {
    background-color: #fff;
    /* White background matching example */
}

.text-plans-dark {
    color: #2563eb;
    font-weight: 700;
}

.text-ondemand-dark {
    color: #059669;
    font-weight: 700;
}

.text-project-dark {
    color: #55231e;
    font-weight: 700;
}

/* Maroon */

/* Mobile Layout - Stacked Cards */
@media (max-width: 768px) {
    .mmr-comp-header {
        display: none;
    }

    .mmr-comp-row {
        display: flex;
        flex-direction: column;
        padding: 0;
        border-bottom: 8px solid #f1f5f9;
        /* Thicker separator */
        border-top: 1px solid #e2e8f0;
    }

    .mmr-comp-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-align: right;
        padding: 1rem;
        border-right: none;
        /* No vertical borders on mobile */
        border-bottom: 1px solid #f1f5f9;
    }

    .mmr-comp-cell:last-child {
        border-bottom: none;
    }

    .mmr-comp-cell.cell-feature {
        background-color: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        font-size: 1.1rem;
        font-weight: 800;
        text-align: center;
        justify-content: center;
    }

    /* Mobile Labels */
    .mmr-comp-cell:not(.cell-feature)::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
        /* Prevent wrapping */
        margin-right: 1rem;
        /* Spacing */
    }

    /* Override cell-content width on mobile to avoid squeezing label */
    .mmr-comp-cell .cell-content {
        width: auto;
        justify-content: flex-end;
    }

    .cell-plans::before {
        color: #2563eb;
    }

    .cell-ondemand::before {
        color: #059669;
    }

    .cell-project::before {
        color: #55231e;
    }
}

/* 
   --------------------------------------------------
   V2.8.2 Priority Services (Leaf Cards) - Solid Design
   --------------------------------------------------
*/
.mmr-priority-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 3rem auto;
}

.mmr-priority-card {
    flex: 1;
    min-width: 300px;
    padding: 2.5rem 2rem;
    color: white;
    border-radius: 2rem 6rem 2rem 2rem;
    /* Leaf Shape */
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Card Colors */
.card-contracting {
    background-color: #923428;
}

/* Maroon */
.card-funding {
    background-color: #374151;
}

/* Charcoal */
.card-demolition {
    background-color: #f0c960;
}

/* Gold */

/* Force Titles to be White */
.priority-title {
    color: white !important;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.priority-icon-circle {
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Demolition icon: WHITE (reverted from dark) */
.card-demolition .priority-icon-circle {
    border-color: rgba(255, 255, 255, 0.3);
}

.card-demolition svg {
    color: white;
}


.priority-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    flex-grow: 1;
}

/* Price: Reverted to Text (No Button) */
.priority-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    /* Default to white */
    margin-bottom: 1.5rem;
    /* Removed bg, padding, border-radius */
}

/* Gold Price: Keep dark for readability? Or White? User asked for 'white icon and white titles'. 
   User specifically requested white text for "Custom Pricing..." on Gold card. */
.card-demolition .priority-price {
    color: white;
}

.priority-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
}

.priority-list li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding-left: 0;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
}



/* 
   --------------------------------------------------
   V2.8.2 Operational Services (Mini Leaf) - Solid Design
   --------------------------------------------------
*/
.mmr-operational-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 3rem auto;
}

.mmr-op-card {
    border-radius: 1.5rem 4rem 1.5rem 1.5rem;
    /* Mini Leaf Shape */
    padding: 2rem;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

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

/* Op Card Colors - Custom Palette */
.card-inventory {
    background-color: #283d54;
}

/* Dark Blue */
.card-marketing {
    background-color: #445e35;
}

/* Forest Green */
.card-reporting {
    background-color: #366e91;
}

/* Steel Blue */
.card-consulting {
    background-color: #30312f;
}

/* Dark Grey */

/* Force Titles to White */
.op-title {
    color: white !important;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.op-icon-circle {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.op-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    opacity: 0.9;
}

.op-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.op-price-mini {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .mmr-priority-container {
        flex-direction: column;
        align-items: center;
    }

    .mmr-priority-card {
        width: 100%;
        max-width: 400px;
    }
}

/* Auction Notification Banner */
.mmr-auction-banner {
    position: static;
    background: #711D12;
    /* Maroon brand color */
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    /* Use site font */
    width: 100%;
    clear: both;

    /* Animation: Slide down (push content) */
    display: block;
    height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    /* Optimize transition */
    will-change: height, opacity;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease-out;
}

.mmr-auction-banner.mmr-slide-down {
    height: auto;
    max-height: 140px;
    /* Taller on mobile to accommodate wrapping, but more compact */
    opacity: 1;
}

/* Desktop: More compact */
@media (min-width: 640px) {
    .mmr-auction-banner.mmr-slide-down {
        max-height: 80px;
    }
}

.mmr-auction-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.4rem 0.75rem;
    /* Tighter padding on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Reduced gap on mobile */
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .mmr-auction-container {
        flex-direction: row;
        text-align: left;
        padding: 0.5rem 1rem;
        gap: 1.5rem;
    }
}

.mmr-auction-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Tighter gap on mobile */
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .mmr-auction-content {
        justify-content: flex-start;
        gap: 0.75rem;
    }
}

.mmr-auction-badge {
    background-color: #ffffff;
    color: #1f2937;
    /* gray-800 */
    font-size: 0.65rem;
    /* Smaller on mobile */
    font-weight: 700;
    /* font-bold */
    padding: 0.2rem 0.4rem;
    /* Smaller padding on mobile */
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    /* tracking-wide */
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .mmr-auction-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

.mmr-auction-text {
    font-weight: 500;
    /* font-medium */
    font-size: 0.75rem;
    /* Smaller on mobile */
    line-height: 1.3;
}

@media (min-width: 640px) {
    .mmr-auction-text {
        font-size: 1rem;
        /* text-base */
    }
}

.mmr-auction-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    /* Smaller on mobile */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    /* Smaller on mobile */
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .mmr-auction-link {
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }
}

.mmr-auction-link:hover {
    background-color: #ffffff;
    color: #434549;
    border-color: #ffffff;
}

.mmr-auction-link svg {
    margin-left: 0.5rem;
    width: 1rem;
    height: 1rem;
}