body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;}
.container {
            display: flex;
            min-height: 100vh;}
/* Main Content */
        .main-content {
            flex: 1;
            padding: 20px 40px;
        }
/* Navigation Tabs */
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 30px;
            padding-bottom: 10px;
            flex-wrap: wrap;
        }
.tabs span {
            margin-right: 20px;
            padding: 10px 0;
            color: #999;
            cursor: pointer;
            position: relative;
            font-size: 15px;}
.tabs span.active {
            color: #000;
            font-weight: 600;}
            /*
.tabs span.active::after {
            content: '';
            position: absolute;
            bottom: -11px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #ff9500;} */
/* Hero Section */
        .hero-section {
            margin-bottom: 40px;}
.hero-section img {
            width: 100%;
            max-width: 600px;
            height: auto;
            display: block;
            margin-bottom: 20px;}
.hero-section h1 {
            font-size: 28px;
            margin-bottom: 20px;}
/* Form Section */
        .form-section {
            margin-bottom: 30px;}
.input-group {
            margin-bottom: 20px;}
.input-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;}
.input-field {
            flex: 1;
            position: relative;}
.input-field input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
            line-height: normal;
        }
.input-field .icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;}
/* Navigation Buttons */
        .navigation-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 40px;}
.btn {
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;}
.btn-outline {
            background-color: transparent;
            border: 1px solid #ddd;
            color: #666;}
.btn-primary {
            background-color: #fff;
            color: #153d5c;
            border: 1px solid #fff;}
.btn-primary:hover {
            background-color: #153d5c;
        color: #fff;
        border: 1px solid #fff;
        }
/* Sidebar */
        .sidebar {
            width: 350px;
            background: #153d5c;
            color: white;
            padding: 20px;
            position: relative;
            right: 0;
                top: 0;
                bottom: 0;
                height: 95%;
                overflow-y: auto;
        }
.sidebar-header {
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;}
.sidebar-header h2 {
            margin: 0;
            font-size: 22px;
            color: #fff !important;
        }
.chevron {
            transform: rotate(180deg);
            cursor: pointer;
            transition: transform 0.3s ease;}
.sidebar-section {
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.sidebar-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;}
.sidebar-section-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: normal;}
.edit-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 18px;
        display: none;
        }
.sidebar-item {
            padding: 10px 0;
            font-size: 15px;}
.progress-wrap .bar {
            height: 7px;
            border: 1px solid #fff;
            border-radius: 20px;}
</style>

<style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;}
/* Form Header */
        .form-header {
            margin-bottom: 40px;}
.form-header h1 {
            font-size: 28px;
            margin-bottom: 20px;
            font-weight: normal;}
.form-header h1 strong {
            font-weight: bold;}
/* Form Section */
        .form-section {
            margin-bottom: 40px;}
.form-section h2 {
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: normal;}
.option-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;}
.option-grid.grid-3{
            grid-template-columns: 1fr 1fr 1fr;}
.option-button {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease;}
.option-button.selected {
            background-color: #D6EFFF;
            border-color: #1da1fc;}
.info-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #999;
            color: white;
            text-align: center;
            line-height: 18px;
            font-size: 12px;
            margin-left: 8px;}
/* Navigation Buttons */
        .navigation-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 60px;}
.btn {
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 140px;
            text-align: center;}
.btn-outline {
            background-color: transparent;
            border: 1px solid #ff9500;
            color: #ff9500;}

.btn .icon {
            margin-right: 5px;}
.chevron {
            cursor: pointer;
            transition: transform 0.3s ease;}
.sidebar-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;}
.sidebar-section-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: normal;
            margin-bottom: 10px;}
.sidebar-section-content {
            margin-top: 5px;
            font-size: 14px;
        padding-left: 10px;
        }
/* Progress Bar */
        .progress-bar {
            width: 100%;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            margin-top: 10px;
            margin-bottom: 20px;}
.progress {
            width: 20%;
            height: 100%;
            background-color: white;
            border-radius: 3px;}
.chevron-icon {
            transition: transform 0.3s ease;}
.chevron-icon.up {
            transform: rotate(180deg);}
</style>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;}
/* Room Selection Grid */
        .room-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;}
.room-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px 15px;
            text-align: center;
            background-color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;}
.room-item:hover {
            border-color: #ff9500;}
.room-item.selected {
            background-color: #f8e0e0;
            border-color: #ff9500;}
.room-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto 15px;}
.room-name {
            font-size: 14px;
            color: #333;}
/* Counter */
        .counter {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;}
.counter-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background-color: #ddd;
            color: #333;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;}
.counter-btn.minus {
            background-color: #ff9500;
            color: white;}
.counter-btn.plus {
            background-color: white;
            color: #333;
            border: 2px solid #ff9500;}
.counter-value {
            margin: 0 15px;
            font-size: 18px;
            font-weight: bold;}
.btn {
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 140px;
            text-align: center;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;}

.btn .icon-right {
            margin-left: 5px;}
.sidebar-icon {
            cursor: pointer;
            font-size: 20px;}
.sidebar-section-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: normal;
            display: flex;
            align-items: center;
            color: #fff !important;
        }
.sidebar-section-content {
            margin-top: 10px;
            font-size: 14px;}
.check-icon {
            margin-right: 10px;
            font-size: 14px;}
.sidebar-section-header .chevron-icon {
            cursor: pointer;
            font-size: 16px;}
.sidebar-item {
            padding: 15px 0;
            font-size: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.sidebar-item.active {
            font-weight: bold;}
.progress {
            width: 30%;
            height: 100%;
            background-color: white;
            border-radius: 3px;}
/* Room Selection */
        .room-selection {
            display: flex;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
.room-option {
            position: relative;
            width: 100px;
            height: 85px;
            border: 2px solid #ddd;
            border-radius: 8px;
            text-align: center;
            padding: 15px 10px;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: white;}
.room-option.selected {
            border-color: #ff9500;
            background-color: #f8e0e0;}
.room-option .room-icon {
            font-size: 28px;
            /*
            color: #ff9500;
            */
            margin-bottom: 10px;}
.room-option .room-name {
            font-size: 14px;}
.room-option .circle-indicator {
            display: none;
            position: absolute;
            top: -10px;
            right: -10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #ff9500;
            color: white;
            /*
            display: flex; */
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;}
.add-room {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ccc;
            border-radius: 8px;
            color: #999;
            font-size: 24px;}
/* Search and Furniture List */
        .furniture-selection {
            display: flex;
            gap: 20px;}
.furniture-column {
            flex: 1;}
.search-container {
            position: relative;
            margin-bottom: 20px;}
.search-input {
            width: 100%;
            padding: 12px 40px 12px 40px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            outline: none;}
.search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;}
.clear-search {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            cursor: pointer;
            background: none;
            border: none;
            font-size: 18px;}
.furniture-list {
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            max-height: 400px;
            overflow-y: auto;}
.furniture-header {
            font-size: 14px;
            color: #666;
            padding: 10px 15px;
            border-bottom: 1px solid #ddd;
            font-weight: bold;}
.furniture-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;}
.furniture-item:last-child {
            border-bottom: none;}
.furniture-info {
            display: flex;
            align-items: center;}
.furniture-icon {
            width: 30px;
            margin-right: 15px;
            color: #777;}
.furniture-details {
            flex: 1;}
.furniture-name {
            font-size: 14px;
            margin-bottom: 4px;}
.furniture-description {
            font-size: 12px;
            color: #777;}
.add-furniture {
            color: #ff9500;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;}
/* Added Furniture */
        .added-furniture {
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            padding: 15px;
            height: 400px;}
.added-header {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;}
.added-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;}
.added-info {
            display: flex;
            align-items: center;}
.item-counter {
            display: flex;
            align-items: center;}
.counter-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid #ddd;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;}
.counter-value {
            margin: 0 10px;
            font-size: 14px;
            min-width: 20px;
            text-align: center;}
.remove-item {
            color: #ff9500;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin-left: 10px;}
/* Notes Section */
        .notes-section {
            margin-top: 30px;}
.notes-label {
            font-size: 14px;
            margin-bottom: 10px;
            color: #555;
            display: flex;
            align-items: center;}
.info-icon {
            margin-left: 8px;
            color: #ff9500;
            font-size: 16px;}
.notes-textarea {
            width: 100%;
            height: 100px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: none;
            font-family: Arial, sans-serif;
            font-size: 14px;}
/* Confirmation Message */
        .confirmation-msg {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #555;
            margin-top: 20px;}
.confirmation-msg i {
            color: #ff9500;
            margin-right: 10px;}
/* Navigation Button */
        .next-room-btn {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;}
.btn {
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            display: flex;
            align-items: center;}
.btn .icon {
            margin-left: 8px;}
/* Custom Furniture Button */
        .custom-furniture-btn {
            display: block;
            width: 100%;
            padding: 12px;
            border: 1px solid #ff9500;
            border-radius: 8px;
            background-color: white;
            color: #ff9500;
            text-align: center;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.2s ease;}
.custom-furniture-btn:hover {
            background-color: #f8e0e0;}
.progress {
            width: 40%;
            height: 100%;
            background-color: white;
            border-radius: 3px;}
/* Navigation Buttons for Bottom */
        .navigation-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 60px;}
/* Form Header */
        .form-header {
            margin-bottom: 30px;}
/* Box Selection */
        .box-selection {
            margin-bottom: 30px;}
.info-text {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;}
.info-text i {
            margin-right: 10px;
            color: #ff9500;}
.step-9 .info-bar .info-text {
    display: block;
}
.quantity-selector {
            display: flex;
            align-items: center;
            margin-bottom: 15px;}
.quantity-input {
            width: 60px;
            height: 35px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            font-size: 16px;
            margin-right: 15px;}
.purchase-label {
            background-color: #f8e0e0;
            color: #ff9500;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            display: inline-block;}
/* Box Types Section */
        .box-types-section {
            margin-top: 40px;}
.section-title {
            font-size: 20px;
            font-weight: normal;
            margin-bottom: 15px;
            color: #333;}
.section-subtitle {
            font-size: 14px;
            color: #666;
            margin-bottom: 25px;}
/* Box Options */
        .box-options {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;}
.box-option {
            width: calc(30% - 14px);
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            background-color: white;
            position: relative;}
.box-option.selected {
            border-color: #ff9500;}
.recommended-badge {
            position: absolute;
            top: 10px;
            left: 0;
            background-color: #ff9500;
            color: white;
            font-size: 12px;
            padding: 4px 8px;
            font-weight: 500;
            z-index: 1;}
.box-image {
            width: 100%;
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;}
.box-image img {
            max-width: 100%;
            height: auto;}
.box-details {
            padding: 15px;
            border-top: 1px solid #eee;}
.box-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            text-align: center;}
.box-info {
            font-size: 12px;
            color: #666;
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            text-align: center;
            line-height: 1.2em;
        }
.materials-options .box-option.selected {
    background: #e9dfde;
}
.quantity-control {
            display: flex;
            justify-content: center;
            margin-top: 15px;}
.quantity-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            user-select: none;}
.quantity-btn:first-child {
            border-radius: 4px 0 0 4px;}
.quantity-btn:last-child {
            border-radius: 0 4px 4px 0;}
.quantity-value {
            width: 40px;
            height: 30px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-left: none;
            border-right: none;}

/* Packaging Service Section */

.service-option {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            margin-bottom: 20px;}
.service-icon {
            margin-right: 15px;
            color: #ff9500;
            font-size: 20px;}
.service-details {
            flex: 1;}
.service-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;}
.service-description {
            font-size: 14px;
            color: #666;}
.service-control {
            display: flex;
            align-items: center;}
/* Packaging Materials Section */
        .packaging-materials {
            margin: 40px 0;}
.materials-options {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;}
/* Delivery Date */
        .delivery-date {
            margin: 40px 0;
            max-width: 600px;}
.date-optional {
            font-size: 12px;
            color: #999;
            margin-left: 5px;}
.date-input {
            width: 100%;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 10px;
            font-size: 14px;
            margin-top: 10px;}
.date-info {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
            display: flex;
            align-items: flex-start;}
.date-info i {
            margin-right: 10px;
            color: #ff9500;
            margin-top: 2px;}
/* Additional Notes */
        .additional-notes {
            margin: 40px 0;
            max-width: 600px;}
.notes-label {
            font-size: 14px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;}
.notes-textarea {
            width: 100%;
            height: 100px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            resize: none;
            font-family: Arial, sans-serif;
            font-size: 14px;}
/* Navigation Buttons */
        .navigation-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;}
.btn .icon-left {
            margin-right: 8px;}
.sidebar-section-details {
            font-size: 14px;
            margin-top: 5px;}
.progress {
            width: 60%;
            height: 100%;
            background-color: white;
            border-radius: 3px;}
.service-button {
            width: 100%;
            padding: 12px;
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
            font-size: 14px;
            color: #ff9500;
            cursor: pointer;
            margin-top: 15px;}
.service-button:hover {
            background-color: #f0f0f0;}
/* Room Selection */
        .room-options {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;}
.room-option {
            width: 120px;
            height: 90px;
            border: 1px solid #ddd;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 15px;
        }
.room-icon {
            font-size: 24px;
            margin-bottom: 8px;
            color: #666;}
.room-option.selected .room-icon {
            color: #ff9500;}
.room-name {
            font-size: 14px;
            color: #666;}
.room-option.selected .room-name {
            color: #ff9500;
            font-weight: 500;}
/* Service Selection */
        .service-selection {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-top: 30px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.service-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;}
.service-icon {
            width: 50px;
            height: 50px;
            background-color: #f8e0e0;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;}
.service-icon i {
            font-size: 24px;
            color: #ff9500;}
.service-title {
            flex: 1;}
.service-title h2 {
            font-size: 20px;
            margin: 0 0 5px 0;}
.service-subtitle {
            font-size: 14px;
            color: #777;}
.no-items-message {
            text-align: center;
            padding: 30px;
            color: #777;
            font-style: italic;}
/* Additional Notes */
        .additional-notes {
            margin: 40px 0;
            max-width: 800px;}
.notes-label {
            font-size: 16px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;}
.optional-tag {
            font-size: 12px;
            color: #999;
            margin-left: 5px;}
.info-icon {
            margin-left: 8px;
            color: #ff9500;
            font-size: 16px;}
.progress {
            width: 75%;
            height: 100%;
            background-color: white;
            border-radius: 3px;}
/* Furniture Service Items */
        .furniture-services {
            margin-top: 20px;}
.furniture-service-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 15px;
            background-color: white;
            cursor: pointer;
            transition: all 0.2s ease;}
.furniture-service-item:hover {
            border-color: #d32f2f;}
.furniture-service-item.selected {
            border-color: #ff9500;
            background-color: #f8e0e0;}
.service-checkbox {
            margin-right: 15px;
            width: 22px;
            height: 22px;
            border: 2px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;}
.furniture-service-item.selected .service-checkbox {
            border-color: #ff9500;
            background-color: #ff9500;
            color: white;}
.service-info {
            flex: 1;}
.service-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;}
.service-description {
            font-size: 14px;
            color: #777;}
/* Info bar with thumbs up */
        .info-bar {
            display: flex;
            align-items: center;
            background-color: #f9f9f9;
            border-radius: 30px;
            padding: 15px 20px;
            margin-bottom: 30px;}
.thumbs-up-icon {
            width: 40px;
            height: 40px;
            background-color: #f4e4e4;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;}
.thumbs-up-icon i {
            color: #ff9500;
            font-size: 20px;}
.info-text {
            flex: 1;
            font-size: 15px;}
/* Next room button */
        .next-room-btn {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 25px;
            color: #333;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            margin-top: 30px;}
.next-room-btn:hover {
            background-color: #f8f8f8;}
.next-room-btn i {
            margin-left: 10px;}
/* Helper text */
        .helper-text {
            color: #777;
            font-size: 14px;
            margin-top: 8px;
            margin-bottom: 20px;}
/* Circle indicator next to text */
        .circle-indicator {
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: #28a745;
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;}
/* Protection Package Section */
        .section-title {
            font-size: 22px;
            margin: 30px 0 15px 0;
            font-weight: 600;}
.section-subtitle {
            font-size: 16px;
            margin: 0 0 20px 0;
            color: #666;}
/* Protection Options */
        .protection-options {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;}
.protection-option {
            width: 48%;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 35px 20px 20px 20px;
            background-color: white;
            position: relative;
        }
.protection-option.selected {
            border-color: #ff9500;
            background-color: #f8e0e0;}
.included-tag {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ff9500;
            color: white;
            padding: 5px 15px;
            border-radius: 8px 0;
            font-size: 14px;
            font-weight: 500;}
.protection-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;}
.protection-checkbox {
            width: 22px;
            height: 22px;
            border: 2px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;}
.protection-option.selected .protection-checkbox {
            border-color: #ff9500;
            background-color: #ff9500;
            color: white;}
.star-icon {
            color: #ffc107;
            font-size: 20px;
            margin-right: 5px;}
.protection-price {
            font-size: 14px;
            color: #666;
            margin-top: 5px;}
.protection-details {
            margin-top: 15px;}
.protection-detail-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;}
.protection-detail-value {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;}
.protection-features {
            margin-top: 15px;}
.protection-feature {
            display: flex;
            align-items: flex-start;
            margin-bottom: 8px;
            font-size: 14px;}
.check-icon {
            color: #4caf50;
            margin-right: 10px;
            flex-shrink: 0;}
/* No parking options */
        .no-parking-section {
            margin: 40px 0;}
.no-parking-info {
            margin-bottom: 20px;
            line-height: 1.5;}
.location-options {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;}
.location-option {
            width: 48%;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            background-color: white;
            position: relative;}
.location-option.selected {
            border-color: #ff9500;
            background-color: #f8e0e0;}
.location-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;}
.location-radio {
            width: 22px;
            height: 22px;
            border: 2px solid #ff9500;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            position: relative;}
.location-option.selected .location-radio::after {
            content: '';
            width: 12px;
            height: 12px;
            background-color: #ff9500;
            border-radius: 50%;
            position: absolute;
            display: none;
        }
.location-title {
            font-size: 16px;
            font-weight: 500;}
.location-address {
            margin-top: 5px;
            font-size: 14px;
            color: #666;}
.selected-tag {
            position: absolute;
            top: -10px;
            right: 20px;
            background-color: #ff9500;
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;}
/* Premium Protection */
        .premium-protection {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;}
.premium-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;}
.star-rating {
            display: flex;
            margin-left: 15px;}
.premium-title {
            font-size: 16px;
            margin-bottom: 15px;}
.premium-input {
            display: flex;
            align-items: center;}
.premium-textfield {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd !important;
            border-radius: 4px 0 0 4px;
            font-size: 16px;}
.currency-button {
            padding: 10px 15px;
            background-color: #ff9500;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            font-size: 16px;
            cursor: pointer;}
.check-icon-sidebar {
            margin-right: 10px;
            font-size: 14px;}
.progress {
            width: 85%;
            height: 100%;
            background-color: white;
            border-radius: 3px;
        }

.step {
    display: none;
}

.step.active {
    display: block;
}

.field-error {
  color: red;
  font-size: 0.85em;
  margin-top: 4px;
}




        /* Submit Button */
        .submit-button {
            display: inline-block;
            background-color: #ff9500;
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 25px;
        }

        .submit-button i {
            margin-left: 5px;
        }

        /* Offer Box */
        .offer-box {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 30px;
        }

        .offer-box-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
        }

        .offer-feature {
            display: flex;
            align-items: flex-start;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .offer-feature i {
            color: #4caf50;
            margin-right: 10px;
            flex-shrink: 0;
            margin-top: 3px;
        }

        /* Section Title */
        .section-title {
            font-size: 30px;
            padding: 10px 0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            margin: 30px 0 20px;
            font-weight: 500;
            color: #000;
        }

        /* Address Section */
        .address-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .address-column h3 {
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            font-size: 14px;
            margin-bottom: 5px;
            color: #666;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .small-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        /* Date Section */
        .date-section {
            margin-bottom: 30px;
        }

        .date-input {
            display: block;
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            margin-bottom: 15px;
            background-color: #fff;
        }

        .date-label {
            display: block;
            font-size: 14px;
            margin-bottom: 5px;
            color: #666;
        }

        /* Service List */
        .service-list {
            margin-bottom: 30px;
        }

        .service-item {
            display: ;
            align-items: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            background-color: white;
        }

        .service-check {
            width: 20px;
            height: 20px;
            margin-right: 15px;
        }

        .service-name {
            flex: 1;
            font-size: 14px;
        }

        .service-toggle {
            color: #ff9500;
            cursor: pointer;
        }

        /* Individual Offer Section */
        .individual-offer {
            margin-bottom: 30px;
        }

        .individual-offer-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 20px;
            color: #333;
        }

        .offer-item {
            margin-bottom: 25px;
        }

        .offer-item-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
            color: #555;
        }

        .offer-item-subtitle {
            font-size: 12px;
            color: #888;
        }

        .offer-price {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
        }

        .offer-price-label {
            font-size: 14px;
        }

        .offer-price-value {
            font-size: 14px;
            font-weight: 500;
        }

        .options-group {
            margin-top: 10px;
        }

        .option-item {
            display: flex;
            justify-content: space-between;
            padding: 3px 0;
            font-size: 13px;
            color: #666;
        }

        /* Next Steps Section */
        .next-steps {
            margin-bottom: 40px;
        }

        .next-steps-title {
            font-size: 18px;
            color: #ff9500;
            margin-bottom: 20px;
        }

        .step-item {
            display: flex;
            margin-bottom: 25px;
        }

        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #ff9500;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            margin-right: 15px;
            color: #ff9500;
            flex-shrink: 0;
        }

        .step-content {
            flex: 1;
        }

        .step-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
            color: #333;
        }

        .step-description {
            font-size: 14px;
            color: #666;
        }

        /* Questions Section */
        .questions-section {
            margin-bottom: 40px;
        }

        .questions-title {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .questions-text {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .contact-info {
            font-size: 14px;
            color: #ff9500;
            margin-top: 20px;
        }

        /* Helper Classes */
        .text-muted {
            color: #888;
        }

        .mb-0 {
            margin-bottom: 0;
        }

        .mb-3 {
            margin-bottom: 15px;
        }

        .address-info .line {
    margin-bottom: 20px;
}

.address-info .line .title {
    font-size: 12px;
    margin-bottom: 5px;
}

.service-item .furniture-wrap {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 10px;
}

.offer-section .title {
    color: #666;
    padding-bottom: 5px;
}

.offer-section .offer-wrap {
    color: #666;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}

.offer-section {
    margin-bottom: 20px;
}

.offer-section .subtitle {
    color: #666;
    font-size: 13px;
}

.progress-wrap .bar {
    height: 7px;
    border: 1px solid #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.progress-wrap .bar-fill {
    height: 100%;
    background-color: #fff; /* Accent color */
    border-radius: 20px;
    width: 0%; /* Dynamically updated */
    transition: width 0.4s ease;
}

.sidebar-section-content .title {
    font-weight: bold;
}


.sidebar-section-content .row {
    margin-bottom: 8px;
}

.box-selection .quantity-input {
    width: auto;
    text-align: left;
    padding: 0 10px;
}

.notifi-content {
    font-size: 12px;
    display: flex;
    align-items: center;
}

.notifi-content img {
    padding-right: 5px;
}

.service-box {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.pack-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.pack-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.counter {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.counter-btn {
    border: none;
    background: #ddd;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
}

.highlight-button {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #c00;
    background-color: #fff0f0;
    color: #c00;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
}

.insurance-note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.service-selection .checkbox-group {
    display: none;
}

.btn.back {
    border: 1px solid #ccc;
    color: #fff;
}


.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 430px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.modal-content input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  max-width: 100%;
  border: 1px solid #cecdcc;
  border-radius: 10px;
  line-height: normal;
}

button#close-modal {
    background: transparent;
    border: 1px solid #cecdcc;
    color: #888;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
}

button#modal-add-furniture {
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
}


.date-fields .input-field {
  position: relative;
  display: inline-block;
  width: 100%;
}

.date-fields .input-field input {
  padding-right: 30px; /* make space for icon */
  width: 100%;
  box-sizing: border-box;
}

.date-fields .calendar-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  cursor: pointer;
  font-size: 1.1em;
  user-select: none;
}

.delivery-date .calendar-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  cursor: pointer;
  font-size: 1.1em;
  user-select: none;
}

.delivery-date .input-field {
  position: relative;
  display: inline-block;
  width: 100%;
}

.delivery-date .input-field input {
  padding-right: 30px; /* make space for icon */
  width: 100%;
  box-sizing: border-box;
}


.service-name i {
    font-size: 30px;
    padding-right: 20px;
}

.service-item .furniture-wrap {
    padding-left: 35px;
}

.service-item .furniture-wrap table {
    width: 100%;
    text-align: center;
    font-size: 15px;
}

.service-name {
    font-size: 22px;
}

.hidden {
  display: none;
}

#customer-popup {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  max-width: 420px;
  width: 100%;
  border-radius: 6px;
}

#customer-popup h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

#customer-popup label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

#customer-popup input {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
    border: 1px solid #ccc;
    line-height: normal;
}

#customer-popup button {
  margin-right: 10px;
  padding: 12px 15px;
  cursor: pointer;
    border-radius: 30px;
    background: #153D5C;
    color: #fff;
    line-height: normal !important;
}

#customer-popup select {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    line-height: normal;';
}

button#cancel-popup {
    border: 1px solid #cecdcc;
    color: #888;
    background: transparent;
}

#popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.5); /* semi-transparent black */
  z-index: 999; /* less than popup */
}

.furniture-item select {
    max-width: 60px;
    border: 1px solid #ddd;
}

.premium-header .star-rating::before {
    display: none;
}

.address-column h3 {
    padding-top: 10px;
}

#furniture-service-list td, #furniture-service-list th {
    border: none;
    text-align: center;
    padding: 5px;
    line-height: normal;
}

.option-button.disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}
.not-needed-msg {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

#sidebar-submit {
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    padding: 12px 30px;
    color: #fff;
    background: #ff9500;
    line-height: normal;
}

#sidebar-submit.hidde {
    display: none;
}

.tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  max-width: 250px;
}

.search-container .search-input {
    padding-left: 40px;
    border: 1px solid #eee;
}


@media (max-width: 991px) {
    .moving-form-page .container {
        flex-direction: column;
    }

    .moving-form-page .container .sidebar {
        width: 90%;
        margin: auto;
    }

    .moving-form-page .container .sidebar .navigation-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        justify-content: center;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid #ccc;
        box-shadow: 0 0 5px rgba(0, 0, 0, .102);
    }

    .next {
        background: #153D5C;
        color: #fff;
    }
}