/* --- Scoped Reset and Isolation Strategy for Plugin --- */
/*
   Crucial: We must prevent the host theme from bleeding styles into our plugin.
   We use #tmc-plugin-root as a namespace and reset typical inherited properties.
*/

#tmc-plugin-root {
    /* 1. Reset Fundamentals */
    all: unset;
    display: block;
    box-sizing: border-box;

    /* 2. Enforce Plugin Token Defaults */
    font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Fallback stack */
    font-size: 16px;
    line-height: 1.5;
    color: #0F172A;
    text-align: left;
    background: transparent;

    /* 3. Reset common block nuisances */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

/* Universal Reset inside the plugin */
#tmc-plugin-root *,
#tmc-plugin-root *::before,
#tmc-plugin-root *::after {
    box-sizing: border-box;
}

/* Aggressive Reset for specific elements to kill theme overrides */
#tmc-plugin-root h2,
#tmc-plugin-root h3,
#tmc-plugin-root p,
#tmc-plugin-root ul,
#tmc-plugin-root li,
#tmc-plugin-root label,
#tmc-plugin-root button,
#tmc-plugin-root input,
#tmc-plugin-root select {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-weight: normal;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    max-width: 100%;
}

/* Force Sharp Edges on specific components where desired (User Rule) */
#tmc-plugin-root input,
#tmc-plugin-root button,
#tmc-plugin-root select,
#tmc-plugin-root .tembo-content-card,
#tmc-plugin-root .tembo-option-card,
#tmc-plugin-root .yn-btn,
#tmc-plugin-root .tembo-result-card-inner,
#tmc-plugin-root .tembo-pref-tile,
#tmc-plugin-root .tembo-btn-primary,
#tmc-plugin-root .tembo-sharp-btn,
#tmc-plugin-root .tembo-edit-pill {
    border-radius: 0px !important;
}

/* Force Input Styling (often overridden by themes globally like input[type=text]) */
#tmc-plugin-root input[type="text"],
#tmc-plugin-root input[type="number"],
#tmc-plugin-root input[type="email"],
#tmc-plugin-root input[type="tel"] {
    background-color: #ffffff !important;
    color: #0F172A !important;
    box-shadow: none !important;
}

/* Restore intended background for cards */
#tmc-plugin-root .tembo-content-card,
#tmc-plugin-root .tembo-result-card-inner,
#tmc-plugin-root .result-card-body {
    background-color: #ffffff;
}

/* Scoped styles for Tembo Calculator Wizard - Premium Visuals */
#tmc-plugin-root #tembo-calc-container {
    max-width: 650px;
    margin: 40px auto;
    font-family: "Helvetica Neue LT Pro", sans-serif;
    color: #0F172A;
    box-sizing: border-box;
    position: relative;
}

/* New Content Card Wrapper */
#tmc-plugin-root .tembo-content-card {
    background: rgba(47, 34, 52, 0.05);
    /* Lighter, warmer cream */
    padding: 30px;
    border-radius: 0px !important;
    /* Soften corners */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    /* Deep, soft shadow */
}

/* Footer Navigation (Buttons Outside) */
#tmc-plugin-root .tembo-footer,
#tmc-plugin-root .tembo-footer.nav {
    margin-top: 24px;
}

#tmc-plugin-root #tembo-calc-container * {
    box-sizing: border-box;
    font-family: inherit;
}

/* Steps Animation */
#tmc-plugin-root .tembo-step {
    display: none;
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#tmc-plugin-root .tembo-step.active {
    display: block;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
        scale: 0.98;
    }

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

/* Typography - Elegant & Bold */
#tmc-plugin-root #tembo-calc-container h2,
#tmc-plugin-root #tembo-calc-container h3 {
    font-family: "Abhaya Libre", sans-serif;
    font-size: 32px;
    /* Slightly smaller for sleekness */
    font-weight: 400;
    margin-bottom: 20px;
    /* Reduced from 30px */
    color: #0F172A;
    line-height: 1.15;
    letter-spacing: -1px;
}

#tmc-plugin-root #tembo-calc-container h2 strong {
    font-weight: 700;
    color: #2f2234;
    /* Highlight keyword */
    position: relative;
    z-index: 1;
}

#tmc-plugin-root #tembo-calc-container p {
    font-size: 16px;
    color: #475569;
    margin-bottom: 24px;
    /* Reduced from 30px */
    line-height: 1.5;
}

/* Form Groups & Inputs */
#tmc-plugin-root #tembo-calc-container .tembo-form-group {
    margin-bottom: 20px;
    /* Reduced from 30px */
}

#tmc-plugin-root #tembo-calc-container label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#tmc-plugin-root #tembo-calc-container .sub-label {
    font-weight: 400;
    color: #64748B;
    font-size: 13px;
    display: inline-block;
    margin-left: 8px;
    text-transform: none;
}

#tmc-plugin-root #tembo-calc-container .tembo-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#tmc-plugin-root #tembo-calc-container .currency-symbol {
    position: absolute;
    left: 20px;
    font-size: 20px;
    color: #94A3B8;
    font-weight: 500;
    pointer-events: none;
    z-index: 2;
}

#tmc-plugin-root #tembo-calc-container input[type="number"],
#tmc-plugin-root #tembo-calc-container select {
    width: 100%;
    padding: 20px 20px 20px 45px;
    font-size: 20px;
    font-weight: 500;
    border: 2px solid #E2E8F0;
    /* Thicker, softer border */
    border-radius: 0px !important;
    background: #ffffff;
    color: #0F172A;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Sleek Dropdown Specifics */
#tmc-plugin-root #tembo-calc-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 20px;
    padding-left: 20px;
    /* No currency symbol */
    padding-right: 50px;
    /* Space for arrow */
    cursor: pointer;
}

#tmc-plugin-root #tembo-calc-container input:hover,
#tmc-plugin-root #tembo-calc-container select:hover {
    border-color: #CBD5E1;
}

#tmc-plugin-root #tembo-calc-container input:focus,
#tmc-plugin-root #tembo-calc-container select:focus {
    outline: none;
    border-color: #2f2234;
    box-shadow: 0 0 0 4px rgba(47, 34, 52, 0.1);
    transform: translateY(-1px);
}

/* Custom Counter Control (Steps +/-) */
#tmc-plugin-root .tembo-counter-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    border: 2px solid #E2E8F0;
    border-radius: 0px !important;
    padding: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#tmc-plugin-root .counter-btn {
    width: 44px;
    height: 44px;
    background: #F1F5F9;
    border: none;
    border-radius: 0px !important;
    font-size: 24px;
    font-weight: 300;
    color: #0F172A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#tmc-plugin-root .counter-btn:hover {
    background: #E2E8F0;
    color: #2f2234;
}

#tmc-plugin-root .counter-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

#tmc-plugin-root .counter-display input {
    width: 60px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: right;
    box-shadow: none !important;
}

#tmc-plugin-root .counter-label {
    font-size: 18px;
    font-weight: 500;
    color: #64748B;
}

/* Step 3 Group Spacing */
#tmc-plugin-root .tembo-yn-group {
    margin-bottom: 40px;
    /* Force significant gap between questions */
}

/* Step 3 Labels - Uppercase & Bold visual per image */
#tmc-plugin-root .tembo-yn-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4B5563;
    /* match image grey text */
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    /* Increased to 24px */
}

/* Interactive Toggles (Purchase/Remortgage) */
#tmc-plugin-root .tembo-toggle-row {
    display: flex;
    gap: 12px;
    background: #fff;
    /* Or white if design implies */
    padding: 6px;
    border-radius: 0px !important;
    /* Container rounded */
}

/* If Image 0 shows them as separate buttons, not joined: */
#tmc-plugin-root .tembo-toggle-btn {
    flex: 1;
    padding: 16px;
    background: transparent;
    border: none;
    border-radius: 0px !important;
    /* Inner buttons rounded to fit */
    font-size: 16px;
    color: #64748B;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#tmc-plugin-root .tembo-toggle-btn:hover {
    color: #0F172A;
}

#tmc-plugin-root .tembo-toggle-btn.active {
    background: #ffffff;
    color: #2f2234;
    /* Dark text on white? */
    /* Wait, Image 0 shows "Purchase" is DARK background, White text. "Remortgage" is White bg. */
    background: #111827;
    /* Dark from image */
    background: #2f2234;
    /* User primary */
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Option Cards (Step 2) - Grid Layout */
#tmc-plugin-root .tembo-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    /* Increased from 4px to 16px */
}

/* Option Cards (Step 2) - Centered & Right Icon */
#tmc-plugin-root .tembo-option-card {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center Content */
    padding: 24px 60px;
    /* Increased padding */
    background: #fff;
    border: 2px solid #F1F5F9;
    border-radius: 0px !important;
    /* Increased radius */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-align: center;
    /* Center Align text */
    min-height: 60px;
    /* Taller Height per image */
}

#tmc-plugin-root .tembo-option-card:hover {
    border-color: #CBD5E1;
    background: #FAFAFA;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Hide actual checkbox */
#tmc-plugin-root .tembo-option-card input {
    display: none;
}

/* Custom Checkbox Indicator (Hidden by default, SVG inside) */
#tmc-plugin-root .tembo-checkbox-indicator {
    display: none;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Checked State - Entire Card */
#tmc-plugin-root .tembo-option-card:has(input:checked) {
    border-color: #2f2234;
    background: #2f2234;
    /* Dark Primary */
    color: #fff;
    box-shadow: 0 4px 15px rgba(47, 34, 52, 0.2);
}

/* Checked State - Show Indicator */
#tmc-plugin-root .tembo-option-card input:checked~.tembo-checkbox-indicator {
    display: flex;
    /* Show SVG checkmark */
}


/* Text Styles */
#tmc-plugin-root .option-text {
    color: #0F172A;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    /* Normal case */
    letter-spacing: 0.5px;
    line-height: 1.2;
}

#tmc-plugin-root .tembo-option-card:has(input:checked) .option-text {
    color: #fff;
}

#tmc-plugin-root .sub-text {
    display: block;
    font-size: 13px;
    text-transform: none;
    font-weight: 500;
    color: #64748B;
    margin-top: 4px;
}

#tmc-plugin-root .tembo-option-card:has(input:checked) .sub-text {
    color: #94A3B8;
    /* Light grey on dark bg */
}

/* Yes/No Buttons - Clean & Sharp */
#tmc-plugin-root .tembo-yn-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

#tmc-plugin-root .yn-btn {
    flex: 1;
    padding: 18px;
    background: #fff;
    border: 2px solid #E2E8F0;
    border-radius: 0px !important;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    color: #64748B;
    transition: all 0.2s;
}

#tmc-plugin-root .yn-btn:hover {
    border-color: #CBD5E1;
}

#tmc-plugin-root .yn-btn.selected {
    background: #2f2234;
    color: #fff;
    border-color: #2f2234;
    box-shadow: 0 4px 15px rgba(47, 34, 52, 0.25);
    transform: translateY(-1px);
}

/* Navigation Buttons */
#tmc-plugin-root .tembo-footer {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#tmc-plugin-root .tembo-footer.nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#tmc-plugin-root .tembo-btn-primary {
    background: #2f2234;
    color: #fff;
    padding: 20px 32px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    width: 100%;
    cursor: pointer;
    border-radius: 0px !important;
    /* Softened corners */
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(47, 34, 52, 0.2);
}

#tmc-plugin-root .tembo-btn-primary:active {
    transform: scale(0.98);
}

#tmc-plugin-root .tembo-btn-primary:hover {
    background: #3E2F46;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(47, 34, 52, 0.3);
}

#tmc-plugin-root .tembo-btn-back {
    background: #fff;
    /* White background */
    border: 2px solid #E2E8F0;
    color: #0F172A;
    /* Icon color */
    width: 56px;
    height: 56px;
    border-radius: 0px !important;
    /* Circle */
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

#tmc-plugin-root .tembo-btn-back:hover {
    border-color: #2f2234;
    color: #2f2234;
    background: #fff;
}



/* Result Card (Step 5) - Exact Design Match */
#tmc-plugin-root .tembo-edit-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#tmc-plugin-root .tembo-edit-pill {
    background: #EBEAE8;
    /* Light grey pill */
    border: none;
    padding: 10px 20px;
    border-radius: 0px !important;
    font-size: 14px;
    color: #4B5563;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

#tmc-plugin-root .tembo-edit-pill:hover {
    background: #D1D5DB;
}

#tmc-plugin-root .tembo-result-card-inner {
    border-radius: 0px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    /* Deep shadow */
}

/* 1. Header Section (Peach/Gold) */
#tmc-plugin-root .result-card-header {
    background: #2f2234;
    /* Peach/Tan color from screenshot */
    padding: 40px 30px 20px 30px;
    text-align: center;
}

#tmc-plugin-root .result-card-header h2 {
    font-family: "Abhaya Libre", sans-serif;
    font-size: 32px;
    color: #fff !important;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

#tmc-plugin-root .result-card-header p {
    color: #fff !important;
    font-size: 16px;
    margin: 0;
}

/* 2. Body Section (White) */
#tmc-plugin-root .result-card-body {
    background: #FFFFFF;
    padding: 30px;
}

/* Grid Layout */
#tmc-plugin-root .result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* Reduced from 16px */
    margin-bottom: 20px;
    /* Further reduced from 24px */
}

#tmc-plugin-root .result-box {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0px !important;
    padding: 20px;
    /* Reduced vertical padding like image */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Image aligns top-leftish */
    align-items: flex-start;
    text-align: left;
    height: 100%;
}

#tmc-plugin-root .result-box .label {
    display: block;
    font-size: 15px;
    color: #6B7280;
    margin-bottom: 8px;
    font-weight: 500;
}

#tmc-plugin-root .result-box .value {
    display: block;
    font-size: 24px;
    /* Big Numbers */
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.5px;
}

/* Max Prop Text */
#tmc-plugin-root .result-extra-info {
    text-align: center;
    margin-bottom: 30px;
    background: rgba(47, 34, 52, 0.1);
    /* Primary with opacity */
    padding: 20px;
    border-radius: 0px !important;
}

#tmc-plugin-root .max-prop-text {
    font-size: 18px;
    /* Slightly larger per visual check */
    color: #334155;
    /* Slightly darker slate */
    margin-bottom: 10px;
    font-weight: 500;
    /* Bolder as requested */
}

#tmc-plugin-root .max-prop-text strong {
    color: #2f2234;
    font-size: 18px;
}

#tmc-plugin-root .disclaimer-text {
    font-size: 13px;
    color: #9CA3AF;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 90%;
}

/* What's Next Section */
#tmc-plugin-root .tembo-footer-action {
    margin-top: 10px;
}

#tmc-plugin-root .tembo-footer-action label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #6B7280;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #tmc-plugin-root .tembo-footer.nav {
        gap: 10px;
    }

    #tmc-plugin-root .result-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

/* --- New Features Styles --- */

/* Sharp Edged Elements */
#tmc-plugin-root .tembo-sharp-btn {
    border-radius: 0px !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: none !important;
}

#tmc-plugin-root .tembo-sharp-input {
    border-radius: 0px !important;
    border: 1px solid #CBD5E1 !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
}

#tmc-plugin-root .tembo-sharp-card {
    border-radius: 0px !important;
    background: #fff;
    border: 1px solid #E2E8F0;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Quote Form */
#tmc-plugin-root #tembo-quote-card h3 {
    margin-top: 0;
    font-family: inherit;
    font-size: 20px;
}

#tmc-plugin-root .tembo-action-container {
    margin-top: 30px;
}

/* Amortization Table */
#tmc-plugin-root .tembo-amortization-wrapper {
    text-align: center;
}

#tmc-plugin-root .tembo-accordion-btn {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    /* Should inherit primary color via JS or context */
    cursor: pointer;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

#tmc-plugin-root .tembo-accordion-btn:hover {
    opacity: 0.8;
}

#tmc-plugin-root .tembo-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 14px;
}

#tmc-plugin-root .tembo-table th {
    background: #F8FAFC;
    color: #475569;
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #E2E8F0;
}

#tmc-plugin-root .tembo-table td {
    padding: 12px;
    border-bottom: 1px solid #E2E8F0;
    color: #334155;
}

#tmc-plugin-root .tembo-table tr:last-child td {
    border-bottom: none;
}

/* Overpayment Slider */
#tmc-plugin-root .tembo-overpayment-wrapper input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

#tmc-plugin-root .tembo-overpayment-wrapper input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 0px !important;
    background: #2f2234;
    /* Fallback */
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#tmc-plugin-root .tembo-overpayment-wrapper input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #E2E8F0;
    border-radius: 0px !important;
}


/* --- Modern Lead Capture Modal --- */
#tmc-plugin-root .tembo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

#tmc-plugin-root .tembo-modal-container {
    background: #fff;
    width: 900px;
    max-width: 95%;
    height: 600px;
    /* Fixed height for split screen */
    border-radius: 0px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

#tmc-plugin-root .tembo-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #64748B;
    z-index: 10;
}

#tmc-plugin-root .tembo-modal-content {
    display: flex;
    flex: 1;
    height: 100%;
}

/* Left Side: Form */
#tmc-plugin-root .tembo-modal-left {
    flex: 1;
    padding: 60px 40px;
    /* Generous padding */
    background: #FFFFFF;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#tmc-plugin-root .tembo-modal-title {
    font-family: 'Abhaya Libre', sans-serif;
    font-size: 28px;
    color: #0F172A;
    margin-bottom: 12px;
    line-height: 1.2;
}

#tmc-plugin-root .tembo-modal-subtitle {
    font-size: 15px;
    color: #64748B;
    margin-bottom: 30px;
}

#tmc-plugin-root .tembo-pref-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 10px;
}

#tmc-plugin-root .tembo-pref-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #E2E8F0;
    border-radius: 0px !important;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: #475569;
}

#tmc-plugin-root .tembo-pref-tile:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

#tmc-plugin-root .tembo-pref-tile:has(input:checked) {
    background: #2f2234;
    color: #fff;
    border-color: #2f2234;
}

#tmc-plugin-root .tembo-pref-tile input {
    display: none;
}

/* Right Side: Info */
#tmc-plugin-root .tembo-modal-right {
    flex: 0 0 320px;
    background: #FDFBF7;
    /* Soft beige */
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-left: 1px solid #F1F5F9;
}

#tmc-plugin-root .tembo-key-icon {
    margin-bottom: 24px;
    color: #2f2234;
}

#tmc-plugin-root .tembo-modal-right h3 {
    font-size: 22px;
    margin-bottom: 12px;
    color: #0F172A;
}

#tmc-plugin-root .tembo-modal-right p {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    #tmc-plugin-root .tembo-modal-content {
        flex-direction: column;
    }

    #tmc-plugin-root .tembo-modal-right {
        display: none;
        /* Hide decorative side on mobile */
    }

    #tmc-plugin-root .tembo-modal-container {
        height: auto;
        min-height: 90vh;
    }
}


/* --- Split Screen (Step 6) --- */
#tmc-plugin-root .tembo-split-card {
    /* Override standard padding to allow full flush split */
    padding: 0 !important;
}

@media (max-width: 600px) {
    #tmc-plugin-root .tembo-split-card {
        flex-direction: column !important;
    }

    #tmc-plugin-root .tembo-split-right {
        display: none !important;
        /* Hide on mobile? Or show below? Image 0 shows just form on mobile usually. User requirement: Mobile responsive. */
    }
}


/* --- Reset Step 6 to Single Column --- */
/* (Styles added in previous steps are removed or overridden by structure change) */
/* Ensure tembo-pref-grid-small looks good */
#tmc-plugin-root .tembo-pref-grid-small {
    margin-top: 10px;
}


/* --- Fix Step 6 Input Styling --- */

/* Ensure text inputs match standard input style */
/* The shortcode uses #tembo-calc-container input[type='number'], but text inputs were missed. */

#tmc-plugin-root #tembo-calc-container input[type='text'],
#tmc-plugin-root #tembo-calc-container input[type='email'],
#tmc-plugin-root #tembo-calc-container input[type='tel'] {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    font-weight: 500;
    border: 2px solid #E2E8F0;
    border-radius: 0px !important;
    /* Standard rounded */
    background: #ffffff;
    color: #0F172A;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#tmc-plugin-root #tembo-calc-container input[type='text']:focus,
#tmc-plugin-root #tembo-calc-container input[type='email']:focus,
#tmc-plugin-root #tembo-calc-container input[type='tel']:focus {
    outline: none;
    border-color: #2f2234;
    box-shadow: 0 0 0 4px rgba(47, 34, 52, 0.1);
}

/* Ensure selected preferences have readable text */
#tmc-plugin-root .tembo-pref-tile:has(input:checked) {
    color: #ffffff !important;
    /* Force white text */
    background-color: #2f2234;
}

/* Specific override if label color is causing issues */
#tmc-plugin-root .tembo-pref-tile:has(input:checked) span {
    color: #ffffff !important;
}