/* ==========================================================================
   Multi-Step Service Form V4 - MIXED UI Styles (Optimized & Rewritten)
   ========================================================================== */

/* --- CSS Variables --- */
:root {
    --mssform-v4-primary: #ae4a84;
    --mssform-v4-primary-dark: #8c3b6a;
    --mssform-v4-secondary: #6c757d;
    --mssform-v4-success: #198754; /* Green */
    --mssform-v4-warning: #ffc107;
    --mssform-v4-danger: #dc3545; /* Red */
    --mssform-v4-light: #f8f9fa;
    --mssform-v4-medium-gray: #e9ecef;
    --mssform-v4-light-gray: #f1f3f5;
    --mssform-v4-border: #dee2e6;
    --mssform-v4-text: #343a40;
    --mssform-v4-text-muted: #6c757d;
    --mssform-v4-radius: 8px;
    --mssform-v4-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --mssform-v4-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.1);
    --mssform-v4-transition: all 0.25s ease-in-out;
    --mssform-plan-features-max-height: 250px; /* Default max height */
    --mssform-feature-toggle-transition: max-height 0.4s ease-in-out;
    --mssform-icon-check-content: "✔"; /* Check icon */
    --mssform-icon-times-content: "✖"; /* Times/Cross icon */
}

/* --- Base & Wrapper --- */
.mssform-v4-wrapper {
    font-family: 'Poppins', sans-serif; /* Ensure Poppins is loaded */
    color: var(--mssform-v4-text);
    max-width: 1100px; /* Adjust max-width as needed */
    margin: 30px auto;
    padding: 0 15px;
    box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* --- Form Control Styles --- */
.mssform-v4-wrapper .form-control,
.mssform-v4-wrapper .form-select {
    border: 1px solid var(--mssform-v4-border);
    padding: 10px 15px;
    transition: var(--mssform-v4-transition);
    border-radius: 6px;
    height: auto; /* Use auto height */
    font-size: 1em;
    background-clip: padding-box; /* Fix for potential Bootstrap conflicts */
}
.mssform-v4-wrapper .form-control:focus,
.mssform-v4-wrapper .form-select:focus {
    border-color: var(--mssform-v4-primary);
    box-shadow: 0 0 0 0.2rem rgba(174, 74, 132, 0.2); /* Adjusted alpha */
    outline: 0;
}
.mssform-v4-wrapper textarea.form-control {
    min-height: calc(1.5em + 1rem + 2px); /* Default Bootstrap height */
}

/* --- Checkbox & Radio Styles --- */
.mssform-v4-wrapper .form-check-input {
    background-color: #fff;
    border: 1px solid var(--mssform-v4-border);
    transition: var(--mssform-v4-transition);
    cursor: pointer; /* Add cursor pointer */
}
.mssform-v4-wrapper .form-check-input:checked {
    background-color: var(--mssform-v4-primary);
    border-color: var(--mssform-v4-primary);
}
.mssform-v4-wrapper .form-check-input:focus {
    border-color: var(--mssform-v4-primary);
    box-shadow: 0 0 0 0.2rem rgba(174, 74, 132, 0.25); /* Adjusted alpha */
    outline: 0;
}
.mssform-v4-wrapper .form-check-label {
    cursor: pointer;
}

/* --- Font Awesome Icons (Ensure Font Awesome is loaded) --- */
.mssform-v4-wrapper [class*="fa-"] { /* Basic FA styling if needed */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; /* Adjust if using different FA version */
    font-weight: 900; /* Assuming Solid icons */
}
/* Specific Icon Styles for Features (Using :before pseudo-element) */
.mssform-feature-icon {
    display: inline-block;
    width: 18px;
    flex-shrink: 0;
    font-size: 0.9em;
    margin-right: 2px;
    text-align: center;
    margin-top: 2px;
    font-family: inherit;
    font-weight: bold;
    line-height: 1;
    margin-left: 2px;
    margin-top: 5px;
}
.mssform-feature-icon.fa-check.text-success::before {
    content: var(--mssform-icon-check-content);
    color: var(--mssform-v4-success);
}
.mssform-feature-icon.fa-times.text-danger::before {
    content: var(--mssform-icon-times-content);
    color: var(--mssform-v4-danger);
}

/* Utility color classes for icons/text */
.text-success { color: var(--mssform-v4-success) !important; }
.text-danger { color: var(--mssform-v4-danger) !important; }


/* --- Progress Bar --- */
.mssform-progress-indicator-wrapper {
    margin: 0 auto 40px auto; /* Increased bottom margin */
    padding: 0 10px;
    max-width: 600px;
}
.mssform-progress-indicator {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align icons at the top */
    position: relative; /* For connector positioning */
}
.mssform-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 70px; /* Consistent width */
    position: relative; /* For z-index */
    z-index: 1;
    transition: var(--mssform-v4-transition);
    flex-shrink: 0;
}
.mssform-step-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--mssform-v4-medium-gray);
    color: var(--mssform-v4-text-muted);
    border: 2px solid var(--mssform-v4-medium-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
    transition: var(--mssform-v4-transition);
    font-size: 1em;
}
.mssform-step-label {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--mssform-v4-text-muted);
    transition: var(--mssform-v4-transition);
    line-height: 1.3;
    margin-top: 0; /* Reset margin */
}
/* Active & Completed States */
.mssform-step-indicator.active .mssform-step-icon-container,
.mssform-step-indicator.completed .mssform-step-icon-container {
    background-color: var(--mssform-v4-primary);
    border-color: var(--mssform-v4-primary);
    color: #fff;
}
.mssform-step-indicator.active .mssform-step-icon-container {
    box-shadow: 0 0 0 3px rgba(174, 74, 132, 0.2); /* Active glow */
}
.mssform-step-indicator.active .mssform-step-label,
.mssform-step-indicator.completed .mssform-step-label {
    color: var(--mssform-v4-primary);
    font-weight: 600;
}
/* Connector Line */
.mssform-step-connector {
    flex-grow: 1;
    height: 3px;
    background-color: var(--mssform-v4-medium-gray);
    position: absolute;
    /* Center vertically relative to the icon */
    top: calc( (40px / 2) - (3px / 2) );
    /* Position between indicators */
    left: calc(70px / 2 + 5px); /* Half width + small gap */
    right: calc(70px / 2 + 5px);
    z-index: 0; /* Behind icons */
    transition: background-color 0.3s ease-in-out;
    overflow: hidden; /* For fill effect */
    border-radius: 2px;
}
.mssform-step-connector::before { /* Fill effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--mssform-v4-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-in-out;
    border-radius: 2px;
}
.mssform-step-connector.filled::before {
    transform: scaleX(1); /* Animate fill */
}

/* --- Form Container & Steps --- */
.mssform-form-container-wrapper {
    background-color: #fff;
    padding: 8px; /* Minimal padding on wrapper */
    border-radius: var(--mssform-v4-radius);
    box-shadow: none; /* Remove shadow from outer wrapper if steps have bg/shadow */
    overflow: hidden; /* Clip step animations */
    position: relative;
}
.mssform-form-step {
    padding: 30px 25px; /* Padding inside each step */
    display: none; /* Hide inactive steps */
    background-color: #fff; /* Ensure step has background */
}
.mssform-form-step.active {
    display: block; /* Show active step */
    animation: mssform-fadeIn 0.4s ease-in-out;
}
.d-none-force {
    display: none !important; /* Override other display rules */
}
@keyframes mssform-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mssform-step-title {
    color: #2c3e50; /* Darker title */
    border-bottom: 1px solid var(--mssform-v4-medium-gray);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.4em;
    font-weight: 600;
}
.mssform-step-title .mssform-step-number {
    color: var(--mssform-v4-primary);
    margin-right: 8px;
}
.mssform-step-optional {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--mssform-v4-secondary);
    vertical-align: middle;
    margin-left: 5px;
}
.mssform-form-guidance {
    color: var(--mssform-v4-text-muted);
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
}

/* --- Step 1: Service Selection List --- */
.mssform-service-selection-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.mssform-service-option {
    display: flex;
    background-color: #fff;
    padding: 15px 20px;
    border: 1px solid var(--mssform-v4-border);
    border-radius: var(--mssform-v4-radius);
    transition: var(--mssform-v4-transition);
    cursor: pointer;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--mssform-v4-border); /* Subtle left border */
}
.mssform-service-option:hover {
    border-color: #adb5bd;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
    border-left-color: #adb5bd;
}
.mssform-service-option.is-selected {
    background-color: #fdf4f9; /* Light primary background */
    border-color: var(--mssform-v4-primary);
    border-left-color: var(--mssform-v4-primary); /* Highlight left border */
    box-shadow: 0 3px 10px rgba(174, 74, 132, 0.1);
}
/* Add visual indicator for selection (optional) */
.mssform-service-option input[type="checkbox"]:checked + .form-check-label::after {
    content: var(--mssform-icon-check-content); /* Use variable */
    font-family: inherit; /* Use standard font */
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    color: var(--mssform-v4-primary);
    font-size: 1em;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}
.mssform-service-option .form-check-label::after {
    content: '';
    opacity: 0;
}
.mssform-service-option .form-check {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0; /* Reset BS margin */
    position: relative; /* For pseudo-element positioning */
}
.mssform-service-option .form-check-input {
    margin-top: 0;
    margin-right: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transform: scale(1.1); /* Slightly larger checkbox */
    z-index: 1; /* Ensure clickable over label hover */
}
.mssform-service-option .form-check-label {
    font-weight: 500;
    flex-grow: 1;
    line-height: 1.4;
    color: var(--mssform-v4-text);
    margin-bottom: 0;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    padding-right: 25px; /* Space for potential checkmark */
}
.mssform-service-icon {
    margin-right: 10px;
    color: var(--mssform-v4-primary);
    font-size: 1.2em;
    width: 20px;
    text-align: center;
}
/* Step 1 Validation Styling */
.mssform-service-option.is-invalid {
    border-color: var(--mssform-v4-danger) !important;
    background-color: #fef5f5;
    border-left-color: var(--mssform-v4-danger) !important;
}
#mssform_v4m_step1_error.alert {
    font-size: 0.9em;
    padding: 0.6rem 1rem;
}

/* --- Step 2: Plan Cards & Currency --- */
.mssform-currency-selector-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Position to the right */
    margin-bottom: 20px !important; /* Override BS margin */
}
.mssform-currency-selector-wrapper .form-label {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.9em;
    color: #555;
}
.mssform-currency-selector-wrapper .form-select {
    width: auto; /* Auto width based on content */
    min-width: 110px; /* Minimum width */
    border-radius: 6px;
    font-size: 0.9em;
    padding: 0.3rem 2rem 0.3rem 0.75rem; /* Adjust padding for icon */
    background-position: right 0.5rem center; /* Position dropdown arrow */
}
#mssform_v4m_plan_selection_area {
    position: relative; /* For loader positioning */
    min-height: 150px; /* Ensure space for loader */
}
.mssform-plan-loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Above cards */
    transition: opacity 0.3s ease-in-out;
    border-radius: var(--mssform-v4-radius); /* Match container */
}
.mssform-plan-selection-placeholder {
    border-style: dashed !important;
    position: relative;
    z-index: 1; /* Below loader */
}
.mssform-plan-service-section {
    /* background: #fafcff; */ /* Optional subtle background for sections */
    padding: 20px;
    border-radius: var(--mssform-v4-radius);
    /* box-shadow: 0px 0px 15px -8px rgba(0,0,0,0.08); */ /* Soft shadow */
    margin-bottom: 30px !important; /* Spacing between service sections */
}
.mssform-plan-service-section:last-child {
    margin-bottom: 0 !important;
}
.mssform-plan-service-title {
    font-size: 1.5em; /* Slightly smaller than step title */
    font-weight: 600;
    color: var(--mssform-v4-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mssform-v4-medium-gray);
    margin-bottom: 25px !important; /* Space below title */
}
.mssform-plan-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 2px solid var(--mssform-v4-border);
    border-radius: var(--mssform-v4-radius);
    padding: 15px;
    transition: var(--mssform-v4-transition), transform 0.15s ease-out;
    cursor: pointer;
    position: relative; /* For indicator and tag */
    box-shadow: var(--mssform-v4-shadow);
    height: 100%; /* Make cards in a row equal height */
    margin-bottom: 0; /* Reset label margin */
}
.mssform-plan-card:hover {
    border-color: var(--mssform-v4-primary);
    box-shadow: var(--mssform-v4-shadow-lg);
    transform: translateY(-4px); /* Hover lift effect */
}
.mssform-plan-card__header {
    margin-bottom: 10px;
    text-align: left;
    border-bottom: 1px solid var(--mssform-v4-medium-gray);
    padding-bottom: 10px;
}
.mssform-plan-card__title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--mssform-v4-text);
}
.mssform-plan-card__price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--mssform-v4-primary);
    line-height: 1.2;
}
.mssform-plan-card--custom .mssform-plan-card__price {
    font-size: 1em; /* Smaller price for custom */
    font-weight: 600;
}
.mssform-plan-card__frequency {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--mssform-v4-text-muted);
    margin-left: 4px;
    vertical-align: baseline;
    display: inline-block; /* Ensure proper spacing */
}
.mssform-plan-card__body {
    flex-grow: 1;
    overflow: hidden;
    margin-bottom: 0px;
    position: relative;
}
/* Gradient overlay for feature list preview */
.mssform-plan-card__body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #ffffff 90%);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}
/* Hide gradient when features are expanded */
.mssform-plan-card__body:has(.mssform-plan-card__features.is-visible)::after {
    opacity: 0;
}
.mssform-plan-card__features {
    padding-left: 0 !important; /* Override Bootstrap list styles */
    margin: 0 !important;
    list-style: none;
    overflow: hidden;
    max-height: 50px; /* Initially show a preview of the list */
    transition: var(--mssform-feature-toggle-transition);
    scrollbar-width: thin; /* Firefox scrollbar */
    scrollbar-color: #ccc var(--mssform-v4-light-gray); /* Firefox scrollbar */
}
.mssform-plan-card__features.is-visible {
    max-height: var(--mssform-plan-features-max-height); /* Expanded state */
    opacity: 1; /* Expanded state */
    overflow-y: auto; /* Enable scroll if needed */
    padding-right: 10px; /* Space for scrollbar */
    margin-top: 10px !important; /* Add space when expanded */
    margin-bottom: 10px !important;
}
/* Webkit Scrollbar Styles */
.mssform-plan-card__features::-webkit-scrollbar { width: 5px; height: 5px; }
.mssform-plan-card__features::-webkit-scrollbar-track { background: var(--mssform-v4-light-gray); border-radius: 3px; }
.mssform-plan-card__features::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
.mssform-plan-card__features::-webkit-scrollbar-thumb:hover { background-color: #bbb; }

.mssform-plan-card__features li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mssform-v4-text-muted);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--mssform-v4-medium-gray);
    display: flex
;
    align-items: flex-start;
    transition: color 0.2s ease-in-out;
    /* padding-left: 5px !important; */
    padding-top: 4px;
}
.mssform-plan-card__features li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* No border on last item */
}
.mssform-plan-card__features li span { flex-grow: 1; } /* Allow text to wrap */
/* Excluded feature styling */
.mssform-plan-card__features li.mssform-feature--excluded {
    color: var(--mssform-v4-text-muted); /* Keep muted */
    /* text-decoration: line-through; */ /* Optional strike-through */
    opacity: 0.75; /* Slightly faded */
}
.mssform-plan-card.is-selected .mssform-plan-card__features.is-visible li.mssform-feature--included span {
    color: var(--mssform-v4-text); /* Darker text for included features when selected */
}
/* Highlight specific performance features */
.mssform-plan-service-section[data-service="performance"] .mssform-plan-card__features li:nth-child(-n+3):not(.mssform-feature--excluded) {
    background: #fff9e9; /* Light yellow highlight */
    padding-left: 5px; /* Indent slightly */
     margin-left: -5px; /* Counteract padding */
     border-radius: 3px;
}
/* Reset highlight for custom plan */
.mssform-plan-service-section[data-service="performance"] .mssform-plan-card[data-plan="custom"] .mssform-plan-card__features li {
    background: transparent;
    padding-left: 0;
     margin-left: 0;
}

/* Feature Toggle Button */
.mssform-feature-toggle-btn {
    display: block;
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    padding: 8px 15px !important;
    font-size: 0.7em !important;
    font-weight: 600 !important;
    color: var(--mssform-v4-primary) !important;
    text-decoration: none !important;
    background-color: var(--mssform-v4-light-gray);
    border: none;
    border-top: 1px solid var(--mssform-v4-medium-gray);
    border-radius: 0 0 var(--mssform-v4-radius) var(--mssform-v4-radius);
    margin-top: auto;
    transition: background-color 0.2s ease;
    cursor: pointer;
    text-align: center;
}
.mssform-feature-toggle-btn:hover,
.mssform-feature-toggle-btn:focus {
    background-color: var(--mssform-v4-medium-gray);
    color: var(--mssform-v4-primary-dark) !important;
    box-shadow: none;
    outline: none;
}
.mssform-feature-toggle-btn .icon-toggle {
    transition: transform 0.3s ease;
    margin-left: 5px;
    display: inline-block; /* Ensure transform works */
}
.mssform-feature-toggle-btn[aria-expanded="true"] .icon-toggle {
     transform: rotate(180deg); /* Rotate icon when expanded */
}

/* Radio Indicator (visual cue for selection) */
.mssform-plan-card__radio-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--mssform-v4-border);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    pointer-events: none; /* Don't interfere with label click */
}
.mssform-plan-card__radio-indicator::after { /* Inner dot */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Hidden initially */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--mssform-v4-primary);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
}
/* Selected State for Plan Card */
.mssform-plan-card.is-selected {
    border-color: var(--mssform-v4-primary);
    background-color: #fdf4f9; /* Light pink background */
    box-shadow: 0 5px 18px rgba(174, 74, 132, 0.18);
    transform: translateY(-2px) scale(1.01); /* Lift and scale slightly */
}
.mssform-plan-card.is-selected .mssform-plan-card__radio-indicator {
    border-color: var(--mssform-v4-primary);
    /* background-color: var(--mssform-v4-primary); */ /* Keep outer ring white */
}
.mssform-plan-card.is-selected .mssform-plan-card__radio-indicator::after {
    transform: translate(-50%, -50%) scale(1); /* Show inner dot */
    background-color: var(--mssform-v4-primary); /* Dot color */
}

/* Best Selling Tag */
.mssform-plan-card__custom-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); /* Center and move up */
    background-color: #5a2b7b; /* Distinct tag color */
    color: #fff;
    font-size: 0.7em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: capitalize;
    z-index: 1; /* Above card */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: nowrap; /* Prevent wrapping */
}
#mssform_v4m_step_2 p.mssform-form-guidance {
    margin-bottom: 15px !important; /* Less margin before currency */
}

/* --- Step 3: User Details --- */
#mssform_v4m_step_3 .form-label {
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.9em;
    color: #333;
}
#mssform_v4m_step_3 .required {
    color: var(--mssform-v4-danger);
    font-weight: bold;
    margin-left: 2px;
}
/* Bootstrap Validation Styles */
#mssform_v4m_form.was-validated .form-control:invalid,
.mssform-v4-wrapper .form-control.is-invalid {
    border-color: var(--mssform-v4-danger);
    background-image: none; /* Remove default BS icons */
    padding-right: calc(1.5em + .75rem); /* Keep space if needed */
}
#mssform_v4m_form.was-validated .form-control:invalid:focus,
.mssform-v4-wrapper .form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.mssform-v4-wrapper .invalid-feedback,
.mssform-v4-wrapper .validation-error-message { /* General error message style */
    display: none; /* Hide by default */
    width: 100%;
    margin-top: .3rem;
    font-size: .85em;
    color: var(--mssform-v4-danger);
}
/* Show feedback when invalid and validated */
#mssform_v4m_form.was-validated :invalid ~ .invalid-feedback,
#mssform_v4m_form.was-validated .is-invalid ~ .invalid-feedback,
.mssform-v4-wrapper .validation-error-message:not(.d-none):not(.d-none-force) {
    display: block;
}
/* Conference Specific Validation */
#mssform_v4m_conf_error.alert { /* Style for the specific conference error div */
    padding: 0.4rem 0.8rem;
    margin-bottom: 0;
    font-size: 0.85em;
}
.mssform-conference-fieldset .form-legend {
    font-size: 1em !important; /* Override Bootstrap legend size */
    color: var(--mssform-v4-text);
    margin-bottom: 0.75rem;
    font-weight: 600;
    padding: 0; /* Reset padding */
    border-bottom: none; /* No border */
    width: auto; /* Allow natural width */
    float: none; /* Override BS float */
}
.mssform-radio-options-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.mssform-radio-option { /* Style the container div */
    border: 2px solid var(--mssform-v4-border);
    padding: 12px 18px;
    border-radius: var(--mssform-v4-radius);
    transition: var(--mssform-v4-transition);
    cursor: pointer;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 0; /* Reset BS margin */
    position: relative; /* For focus outline */
}
.mssform-radio-option:hover {
    background-color: var(--mssform-v4-light-gray);
    border-color: #bbb;
}
.mssform-radio-option .form-check-input { /* Style the radio input itself */
    margin-top: 0;
    transform: scale(1.15);
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
}
.mssform-radio-option .form-check-label { /* Style the label text */
    font-weight: 500;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between radio and icon/text */
    color: var(--mssform-v4-text);
}
.mssform-radio-option .form-check-label i { /* Style the icon */
    font-size: 1.1em;
    transition: transform 0.2s ease;
    width: 16px; /* Fixed width for alignment */
    text-align: center;
}
/* Checked state styling */
.mssform-radio-option .form-check-input:checked + .form-check-label {
    color: var(--mssform-v4-primary); /* Highlight text */
    font-weight: 600;
}
.mssform-radio-option .form-check-input:checked + .form-check-label i {
    transform: scale(1.1); /* Slightly scale icon */
}
/* Invalid state for conference options */
#mssform_v4m_form.was-validated .form-check-input[type="radio"].is-invalid + .form-check-label {
    color: var(--mssform-v4-danger); /* Make label text red */
}
#mssform_v4m_form.was-validated .mssform-conference-fieldset.is-invalid {
    border: 1px solid var(--mssform-v4-danger); /* Red border around fieldset */
    padding: 1rem;
    border-radius: var(--mssform-v4-radius);
    margin-bottom: 1rem;
    background-color: #fef5f5; /* Light red background */
}
#mssform_v4m_form.was-validated .mssform-conference-fieldset.is-invalid .form-legend {
    color: var(--mssform-v4-danger); /* Make legend text red */
}

/* --- Navigation Buttons --- */
.mssform-navigation-buttons {
    border-top: 1px solid var(--mssform-v4-medium-gray);
    padding-top: 25px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 10px; /* Add gap between buttons */
}
/* Flex spacer for show all mode */
.mssform-navigation-buttons .flex-grow-1 { display: none; }
.mssform-showall-mode #mssform_v4m_step_2 .mssform-navigation-buttons .flex-grow-1 { display: block; }

.mssform-v4-wrapper .btn {
    padding: 12px 25px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 6px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: var(--mssform-v4-transition), transform 0.15s ease-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    line-height: 1.3;
    white-space: nowrap;
}

.mssform-v4-wrapper .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.mssform-v4-wrapper .btn:disabled,
.mssform-v4-wrapper .btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.mssform-v4-wrapper .btn .btn-icon-left { margin-right: 8px; }
.mssform-v4-wrapper .btn .btn-icon-right { margin-left: 8px; }

/* Specific Button Colors */
.mssform-v4-wrapper .btn-primary { background-color: var(--mssform-v4-primary); color: #fff; }
.mssform-v4-wrapper .btn-primary:hover:not(:disabled):not(.disabled) { background-color: var(--mssform-v4-primary-dark); }
.mssform-v4-wrapper .btn-secondary { background-color: var(--mssform-v4-secondary); color: #fff; }
.mssform-v4-wrapper .btn-secondary:hover:not(:disabled):not(.disabled) { background-color: #5a6268; }
.mssform-v4-wrapper .btn-success { background-color: var(--mssform-v4-success); color: #fff; }
.mssform-v4-wrapper .btn-success:hover:not(:disabled):not(.disabled) { background-color: #157347; }
.mssform-v4-wrapper .btn-warning { background-color: var(--mssform-v4-warning); color: #000; }
.mssform-v4-wrapper .btn-warning:hover:not(:disabled):not(.disabled) { background-color: #ffca2c; }
.mssform-v4-wrapper .btn-outline-secondary { border: 1px solid var(--mssform-v4-secondary); color: var(--mssform-v4-secondary); background-color: transparent; box-shadow: none;}
.mssform-v4-wrapper .btn-outline-secondary:hover:not(:disabled):not(.disabled) { background-color: var(--mssform-v4-secondary); color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.mssform-v4-wrapper .btn-link { box-shadow: none; text-decoration: none; padding: 0; border: none; background: none; }
.mssform-v4-wrapper .btn-link:hover:not(:disabled):not(.disabled) { transform: none; box-shadow: none; }

/* Final Submit Button Group */
.mssform-final-submit-group {
    display: flex;
    gap: 10px; /* Space between Schedule/Submit */
}
/* Button Loading State */
.mssform-v4-wrapper .submit-btn .spinner-border {
    width: 1em;
    height: 1em;
    border-width: .2em;
    /* Spinner is hidden/shown by JS adding/removing .d-none */
}
.mssform-v4-wrapper .submit-btn .button-text {
    transition: opacity 0.15s linear; /* Smooth text fade */
}
.mssform-v4-wrapper .submit-btn.is-loading .button-text {
    opacity: 0; /* Hide text when loading */
}
.mssform-v4-wrapper .submit-btn.is-loading .spinner-border {
    /* Spinner visibility is controlled by JS */
}


/* --- Thank You Message --- */
.mssform-thank-you-container {
    display: none; /* Hidden by default */
    animation: mssform-fadeIn 0.5s ease-in-out;
    padding: 20px 0; /* Add padding around the card */
}
.mssform-thank-you-container.active {
    display: block !important; /* Ensure JS override works */
}
.mssform-thank-you-card {
    max-width: 100%; /* Slightly wider card */
    margin: 40px auto;
    background-color: #fff;
    padding: 35px 40px;
    border-radius: var(--mssform-v4-radius);
    box-shadow: var(--mssform-v4-shadow-lg);
    border-top: 5px solid var(--mssform-v4-success); /* Thicker top border */
    text-align: center; /* Center content */
}
.mssform-thank-you-icon {
    font-size: 3em;
    color: var(--mssform-v4-success);
    margin-bottom: 15px;
    line-height: 1; /* Prevent extra spacing */
}
/* Checkmark Icon using :before */
.mssform-thank-you-icon i.fa-check-circle::before {
     content: var(--mssform-icon-check-content); /* Use variable */
     font-family: inherit; /* Use standard font */
     font-weight: bold;
}
.mssform-thank-you-heading {
    color: var(--mssform-v4-text);
    font-weight: 600;
    margin-top: 0 !important; /* Override potential conflicts */
    margin-bottom: 15px;
    font-size: 1.8em;
}
.mssform-thank-you-text {
    font-size: 1.05em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px; /* Space before HR */
}
.mssform-thank-you-card hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid var(--mssform-v4-medium-gray);
}
.mssform-thank-you-card p a {
    color: var(--mssform-v4-primary);
    text-decoration: none;
    font-weight: 500;
}
.mssform-thank-you-card p a:hover {
    text-decoration: underline;
    color: var(--mssform-v4-primary-dark);
}
.mssform-thank-you-content {
    /* Hidden/shown by JS */
}
.mssform-calendar-embed-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--mssform-v4-border);
    border-radius: var(--mssform-v4-radius);
    overflow: hidden; /* Clip iframe corners */
}

/* --- Utility Classes --- */
.d-none { display: none !important; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.text-center { text-align: center !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.p-4 { padding: 1.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.bg-light { background-color: var(--mssform-v4-light) !important; }
.border { border: 1px solid var(--mssform-v4-border) !important; }
.rounded { border-radius: var(--mssform-v4-radius) !important; }
.alert { padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; -webkit-animation: spinner-border .75s linear infinite; animation: spinner-border .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes spinner-border { to { transform: rotate(360deg); } }

/* --- Bootstrap Grid Fallbacks / Overrides (Ensure consistency) --- */
.mssform-v4-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y, 0)); /* Use 0 default */
    margin-right: calc(-.5 * var(--bs-gutter-x, 1rem)); /* Use 1rem default */
    margin-left: calc(-.5 * var(--bs-gutter-x, 1rem));
}
.mssform-v4-wrapper .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1rem) * .5);
    margin-top: var(--bs-gutter-y, 0);
}
/* Gutters */
.mssform-v4-wrapper .g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
/* Columns */
.mssform-v4-wrapper .col { flex: 1 0 0%; }
.mssform-v4-wrapper .col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) { /* Medium devices */
    .mssform-v4-wrapper .col-md-6 { flex: 0 0 auto; width: 50%; }
}
/* Row Columns for Plan Grid */
.mssform-v4-wrapper .row-cols-1 > * { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) { /* Small devices */
    .mssform-v4-wrapper .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) { /* Large devices */
    .mssform-v4-wrapper .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
}


/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) { /* Below Large */
    .mssform-v4-wrapper .row-cols-lg-4 > * { width: 50%; } /* 2 cards per row on medium */
    :root { --mssform-plan-features-max-height: 220px; }
}

@media (max-width: 767.98px) { /* Below Medium */
    .mssform-v4-wrapper { margin: 20px auto; }
    .mssform-form-container-wrapper { padding: 0; background-color: transparent; box-shadow: none; }
    .mssform-form-step { padding: 25px 15px; }
    .mssform-step-title { font-size: 1.3em; margin-bottom: 20px; }
    .mssform-progress-indicator-wrapper { max-width: none; padding: 0; }
    .mssform-step-label { font-size: 0.75em; }
    .mssform-step-icon-container { width: 35px; height: 35px; font-size: 0.9em; }
    .mssform-step-indicator { width: 60px; }
    .mssform-step-connector { top: calc( (35px / 2) - (3px / 2) ); left: calc(60px / 2 + 4px); right: calc(60px / 2 + 4px); }
    .mssform-service-selection-list { grid-template-columns: 1fr; gap: 12px; }
    .mssform-service-option { padding: 12px 15px; }
    .mssform-plan-service-section { padding: 15px; }
    .mssform-plan-service-title { font-size: 1.3rem; }
    .mssform-currency-selector-wrapper { justify-content: center; margin-top: 10px; }
    /* Stack cards on small screens */
    .mssform-v4-wrapper .row-cols-sm-2 > *,
    .mssform-v4-wrapper .row-cols-lg-4 > * { width: 100%; }
    /* Stack Step 3 inputs */
    #mssform_v4m_step_3 .row > .col-md-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .mssform-radio-options-group { justify-content: flex-start; }
    /* Stack Nav buttons */
    .mssform-navigation-buttons { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
    #mssform_v4m_step_3 .mssform-navigation-buttons .mssform-final-submit-group { order: -1; display: flex; flex-direction: column; gap: 10px; width: 100%; }
    #mssform_v4m_step_3 .mssform-navigation-buttons .prev-btn { width: 100%; } /* Full width prev button */
    .mssform-thank-you-card { padding: 30px 20px; }
}

@media (max-width: 575.98px) { /* Below Small */
    .mssform-v4-wrapper { padding: 0 5px; }
    .mssform-form-step { padding: 20px 10px; }
    .mssform-step-title { font-size: 1.2em; }
    .mssform-form-guidance { font-size: 0.9em; }
    /* Hide progress labels on very small screens */
    .mssform-step-label { display: none; }
    .mssform-step-indicator { width: 50px; }
    .mssform-step-icon-container { width: 32px; height: 32px; font-size: 0.9em; }
    .mssform-step-connector { top: calc( (32px / 2) - (3px / 2) ); left: calc(50px / 2); right: calc(50px / 2); }
    .mssform-progress-indicator { padding-bottom: 0; } /* Remove extra space if labels are hidden */
    .mssform-service-option .form-check-label { font-size: 0.9em; }
    .mssform-service-icon { font-size: 1.1em; margin-right: 8px; }
    .mssform-plan-card { padding: 12px; }
    .mssform-plan-card__price { font-size: 1.1em; }
    .mssform-plan-card__frequency { font-size: 0.65em; }
    .mssform-plan-card__features li { font-size: 12px; }
    :root { --mssform-plan-features-max-height: 180px; } /* Shorter max height */
    .mssform-feature-toggle-btn { font-size: 0.75em !important;}
    .mssform-v4-wrapper .btn { padding: 10px 18px; font-size: 0.85em; }
    .mssform-thank-you-card { padding: 30px 15px; }
    .mssform-thank-you-heading { font-size: 1.6em; }
    .mssform-thank-you-text { font-size: 1em; }
    .mssform-service-selection-list { grid-template-columns: 1fr; }
}

i.fas.fa-times.text-danger.icon-no:before {
       /* content: "🗙"; */
    content: "✖";
}

i.fas.fa-check.text-success.icon-yes:before {
    content: "✔";
}

i.mssform-feature-icon.fas.fa-times.text-danger:before {
        /* content: "🗙"; */
    content: "✖";
}

i.mssform-feature-icon.fas.fa-check.text-success:before {
    content: "✔";
}
button.btn.btn-link.btn-sm.mssform-feature-toggle-btn {
    background: #e4e4e4;
}

div[data-service="performance"] li:nth-child(n+1):nth-child(-n+3) {
    background: #fff9e9;
}

ul#mssform_v4m_plan_performance_custom_features li {
    background: transparent;
}

div#mssform_v4m_thank_you.active {
    display: block !important;
}

i.fas.fa-check-circle:before {
     content: "✔";
}
.mssform-thank-you-heading {
    margin-top: 0px !important;
}

.mssform-plan-card {
    padding: 0;
}

.mssform-plan-card__header {
    padding: 5px 15px;
}

.mssform-plan-card__body {
    padding: 0 15px;
}

button.btn.btn-link.btn-sm.mssform-feature-toggle-btn {
    width: calc(100% - 0px);
    margin: 0 auto;
    margin-bottom: 0px;
    line-height: 1.2;
    border-radius: 0 0 6px 6px;
    padding: 10px 15px !important;
	background: #2b2a29;
	color: #fff !important;
}

.mssform-plan-service-section.mb-4 {
    margin-bottom: 0.2rem !important;
    margin-top: 1.5rem !important;
}

.mssform-plan-service-section {
    padding: 15px;
}


.mssform-plan-card__header h5 {
    margin-bottom: 0;
}


.mssform-plan-service-section.mb-4[data-service="website"] .col {
    display: none;
}

.mssform-plan-service-section.mb-4[data-service="website"] .col:last-child {
    display: block;
}


.mssform-plan-card__custom-tag {
    display: none;
}

.mssform-plan-service-section.mb-4 {
    background: #e9e9e9;
}

.single-content h5.mssform-plan-service-title {
    margin: 0px !important;
}

.mssform-plan-card__features li {
    background: #fff !important;
}

.mssform-service-option {
    padding: 0;
}

.mssform-service-option .form-check-input {
    margin-left: 0px;
    margin-right: 0px;
}

.mssform-service-option label.form-check-label {
    padding: 15px 20px;
    padding-left: 0;
}