/* Complete Onboarding System Styles */
   :root {
       /* Primary Colors */
       --primary-color: #7c3aed;
       --primary-dark: #6d28d9;
       --primary-light: #ede9fe;
       --secondary-color: #f59e0b;
       --secondary-dark: #d97706;
       --accent-color: #10b981;
       --accent-light: #d1fae5;

       /* Status Colors */
       --success-color: #10b981;
       --warning-color: #f59e0b;
       --error-color: #ef4444;
       --info-color: #3b82f6;

       /* Luxury Colors */
       --luxury-gold: #d4af37;
       --luxury-dark: #1a1a2e;
       --text-dark: #1f2937;
       --text-light: #6b7280;
       --text-white: #ffffff;
       --background-white: #ffffff;
       --background-light: #f9fafb;
       --background-dark: #1f2937;
       --border-color: #e5e7eb;

       /* Gradients */
       --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
       --gradient-luxury: linear-gradient(135deg, #d4af37 0%, #f7ef8a 100%);
       --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
       --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);

       /* Enhanced Shadows */
       --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
       --shadow-extra: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

       /* Radius */
       --radius: 12px;
       --radius-lg: 20px;
       --radius-xl: 30px;
       --radius-full: 9999px;

       /* Fonts */
       --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-display: 'Playfair Display', Georgia, serif;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: var(--font-primary);
       background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
       color: var(--text-dark);
       line-height: 1.6;
       min-height: 100vh;
   }

   .onboarding-container {
       display: flex;
       gap: 30px;
       max-width: 1600px;
       margin: 0 auto;
       padding: 20px;
       min-height: 100vh;
   }

   /* ===== PANEL CLEAN ===== */
   .steps-panel {
       background: #ffffff;
       border-radius: 20px;
       padding: 25px;
       border: 1px solid #e5e7eb;
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
   }

   /* ===== HEADER ===== */
   .panel-header {
       text-align: center;
       margin-bottom: 25px;
   }

   .logo {
       background: #eef2ff;
       color: #4f46e5;
       font-weight: 700;
       padding: 10px 18px;
       border-radius: 12px;
       display: inline-flex;
       gap: 8px;
       font-size: 18px;
   }

   /* ===== TITLE ===== */
   .panel-title {
       font-size: 1.6rem;
       font-weight: 700;
       color: #1e293b;
   }

   .panel-subtitle {
       color: #64748b;
       font-size: 0.95rem;
   }

   /* ===== PROGRESS ===== */
   .progress-info {
       background: #eef2ff;
       color: #4f46e5;
       padding: 10px;
       border-radius: 999px;
       font-weight: 600;
       text-align: center;
       margin-bottom: 15px;
   }

   .progress-bar {
       height: 6px;
       background: #e5e7eb;
       border-radius: 999px;
       overflow: hidden;
   }

   .progress-fill {
       height: 100%;
       background: linear-gradient(90deg, #6366f1, #8b5cf6);
       transition: width 0.4s ease;
   }

   /* ===== STEP CARD ===== */
   .step-indicator {
       display: flex;
       align-items: center;
       gap: 16px;
       padding: 18px;
       margin-top: 14px;
       background: #ffffff;
       border-radius: 16px;
       border: 1px solid #e5e7eb;
       position: relative;
       cursor: pointer;
       transition: all 0.25s ease;
   }

   /* subtle hover */
   .step-indicator:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
   }

   /* ===== ICON ===== */
   .step-circle {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       background: #f1f5f9;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #6366f1;
       font-size: 18px;
       transition: 0.3s;
   }

   /* ===== TEXT ===== */
   .step-name {
       font-weight: 600;
       font-size: 0.95rem;
       color: #1e293b;
   }

   .step-description-small {
       font-size: 0.8rem;
       color: #64748b;
   }

   /* ===== ACTIVE STEP ===== */
   .step-indicator.active {
       border-color: #6366f1;
       background: linear-gradient(135deg, #eef2ff, #f8fafc);
       box-shadow: 0 12px 28px rgba(99, 102, 241, 0.18);
   }

   /* left highlight (premium feel) */
   .step-indicator.active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 15%;
       height: 70%;
       width: 4px;
       background: linear-gradient(#6366f1, #8b5cf6);
       border-radius: 10px;
   }

   /* active icon */
   .step-indicator.active .step-circle {
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       color: #fff;
       transform: scale(1.08);
   }

   /* ===== STEP BADGE ===== */
   .step-indicator::after {
       position: absolute;
       top: -10px;
       left: 70px;
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       color: #fff;
       font-size: 11px;
       padding: 5px 12px;
       border-radius: 999px;
       font-weight: 600;
       opacity: 0;
       transition: 0.3s;
   }

   /* show only active */
   .step-indicator.active::after {
       opacity: 1;
   }

   /* ===== COMPLETED ===== */
   .step-indicator.completed {
       background: #f0fdf4;
       border-color: #10b981;
   }

   .step-indicator.completed .step-circle {
       background: #10b981;
       color: #fff;
   }

   /* ===== ENTRY ANIMATION ===== */
   .step-indicator {
       animation: fadeUp 0.4s ease;
   }

   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(8px);
       }

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

   /* ===== ACTIVE GLOW (very subtle luxury) ===== */
   .step-indicator.active {
       animation: glowPulse 2.5s infinite;
   }

   @keyframes glowPulse {
       0% {
           box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.25);
       }

       70% {
           box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
       }
   }

   /* Right Panel - Main Content */
   .main-content {
       flex: 1;
       min-width: 0;
   }

   /* Header - Light Premium Style */
   .onboarding-header {
       background: linear-gradient(135deg, #f8fafc, #eef2ff);
       color: #1e293b;
       padding: 45px 30px;
       border-radius: 18px;
       margin-bottom: 30px;
       position: relative;
       overflow: hidden;
       border: 1px solid #e5e7eb;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   }

   /* Soft gradient glow */
   .onboarding-header::before {
       content: '';
       position: absolute;
       inset: 0;
       background:
           radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15), transparent 50%),
           radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.15), transparent 50%);
       animation: softMove 10s ease-in-out infinite alternate;
   }

   /* Content */
   .header-content {
       position: relative;
       z-index: 2;
       text-align: center;
   }

   /* Title */
   .header-title {
       font-size: 2.4rem;
       font-weight: 700;
       margin-bottom: 12px;
       letter-spacing: 0.3px;
       color: #1e293b;
   }

   /* Subtitle */
   .header-subtitle {
       font-size: 1.05rem;
       max-width: 800px;
       margin: 0 auto;
       line-height: 1.7;
       color: #64748b;
   }

   /* Small decorative badge (optional hotel feel) */
   .onboarding-header::after {
       content: "🏨";
       position: absolute;
       font-size: 120px;
       right: 20px;
       bottom: -10px;
       opacity: 0.05;
   }

   /* Animation */
   @keyframes softMove {
       0% {
           transform: translateY(0px);
       }

       100% {
           transform: translateY(-8px);
       }
   }

   /* Hover effect (subtle premium feel) */
   .onboarding-header:hover {
       transform: translateY(-3px);
       transition: 0.3s ease;
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .header-title {
           font-size: 1.8rem;
       }

       .header-subtitle {
           font-size: 0.95rem;
       }
   }

   /* Progress Bar Container */
   .progress-container {
       background: white;
       border-radius: var(--radius-xl);
       padding: 25px;
       margin-bottom: 30px;
       box-shadow: var(--shadow-large);
       border: 1px solid rgba(124, 58, 237, 0.1);
       display: none;
       /* Hidden since we have steps panel */
   }

   /* Form Container */
   .form-container {
       background: white;
       border-radius: var(--radius-xl);
       padding: 40px;
       box-shadow: var(--shadow-large);
       margin-bottom: 30px;
       border: 1px solid rgba(124, 58, 237, 0.1);
       position: relative;
       overflow: hidden;
   }

   .form-container::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: var(--gradient-primary);
   }

   .form-step {
       display: none;
       animation: fadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .form-step.active {
       display: block;
   }

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

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

   .step-header {
       margin-bottom: 40px;
       padding-bottom: 25px;
       border-bottom: 3px solid var(--border-color);
       position: relative;
   }

   .step-header::after {
       content: '';
       position: absolute;
       bottom: -3px;
       left: 0;
       width: 100px;
       height: 3px;
       background: var(--gradient-primary);
   }

   .step-number {
       display: inline-block;
       background: var(--gradient-primary);
       color: white;
       padding: 10px 25px;
       border-radius: var(--radius-full);
       font-weight: 700;
       margin-bottom: 20px;
       font-size: 0.9rem;
       letter-spacing: 1px;
       box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
   }

   .step-title {
       font-family: var(--font-display);
       font-size: 2.2rem;
       font-weight: 800;
       margin-bottom: 15px;
       color: var(--text-dark);
       line-height: 1.2;
   }

   .step-description {
       color: var(--text-light);
       font-size: 1.1rem;
       max-width: 800px;
       line-height: 1.7;
   }

   /* Form Layout */
   .form-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 25px;
       margin-bottom: 40px;
   }

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

   .form-group.full-width {
       grid-column: 1 / -1;
   }

   .form-label {
       display: block;
       margin-bottom: 10px;
       font-weight: 600;
       color: var(--text-dark);
       font-size: 1rem;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .form-label i {
       color: var(--primary-color);
       font-size: 0.9rem;
   }

   .form-label .required {
       color: var(--error-color);
       margin-left: 4px;
       font-weight: 700;
   }

   .form-input,
   .form-select,
   .form-textarea {
       width: 100%;
       padding: 15px 20px;
       border: 2px solid var(--border-color);
       border-radius: var(--radius);
       font-size: 16px;
       transition: all 0.3s ease;
       font-family: var(--font-primary);
       background: white;
   }

   .form-input:hover,
   .form-select:hover,
   .form-textarea:hover {
       border-color: var(--primary-light);
   }

   .form-input:focus,
   .form-select:focus,
   .form-textarea:focus {
       border-color: var(--primary-color);
       outline: none;
       box-shadow: 0 0 0 4px var(--primary-light);
       transform: translateY(-2px);
   }

   .form-textarea {
       min-height: 120px;
       resize: vertical;
       line-height: 1.6;
   }

   /* Enhanced Multi-Select Checkboxes */
   .multi-select-group {
       background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
       padding: 25px;
       border-radius: 12px;
       border: 2px solid #e5e7eb;
   }

   .checkbox-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
       gap: 15px;
       margin-top: 15px;
   }

   .checkbox-item {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 18px;
       background: white;
       border: 2px solid #e5e7eb;
       border-radius: 12px;
       cursor: pointer;
       transition: all 0.3s ease;
       position: relative;
   }

   .checkbox-item:hover {
       border-color: #7c3aed;
       background: #f5f3ff;
       transform: translateY(-3px);
   }

   .checkbox-item.selected {
       border-color: #7c3aed;
       background: #f5f3ff;
       box-shadow: 0 8px 16px rgba(124, 58, 237, 0.15);
   }

   .checkbox-item input {
       position: absolute;
       opacity: 0;
       pointer-events: none;
   }

   .checkbox-icon {
       width: 28px;
       height: 28px;
       border: 2px solid #d1d5db;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .checkbox-icon i {
       display: none;
       color: white;
   }

   .checkbox-item.selected .checkbox-icon {
       background: linear-gradient(135deg, #7c3aed, #5b21b6);
       border-color: #7c3aed;
   }

   .checkbox-item.selected .checkbox-icon i {
       display: block;
   }


   /* OTP Verification Styles */
   .otp-container {
       margin-top: 20px;
       padding: 25px;
       background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
       border-radius: var(--radius);
       border: 2px solid var(--border-color);
   }

   .otp-input-group {
       display: flex;
       gap: 15px;
       justify-content: center;
       margin: 20px 0;
   }

   .otp-input {
       width: 60px;
       height: 70px;
       text-align: center;
       font-size: 24px;
       font-weight: 600;
       border: 2px solid var(--border-color);
       border-radius: var(--radius);
       background: white;
       transition: all 0.3s ease;
   }

   .otp-input:focus {
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px var(--primary-light);
       outline: none;
       transform: scale(1.05);
   }

   .otp-input.filled {
       border-color: var(--success-color);
       background: var(--accent-light);
   }

   .otp-timer {
       text-align: center;
       color: var(--text-light);
       margin: 15px 0;
   }

   .otp-timer span {
       font-weight: 600;
       color: var(--primary-color);
   }

   .otp-actions {
       display: flex;
       gap: 15px;
       justify-content: center;
       margin-top: 20px;
   }

   /* Enhanced Toggle Switches */
   .toggle-group {
       display: flex;
       align-items: center;
       gap: 20px;
       padding: 15px;
       background: var(--background-light);
       border-radius: var(--radius);
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .toggle-group:hover {
       border-color: var(--primary-light);
       background: white;
   }

   .toggle-switch {
       position: relative;
       display: inline-block;
       width: 70px;
       height: 36px;
   }

   .toggle-switch input {
       opacity: 0;
       width: 0;
       height: 0;
   }

   .toggle-slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
       transition: .4s;
       border-radius: 36px;
       border: 2px solid transparent;
   }

   .toggle-slider:before {
       position: absolute;
       content: "";
       height: 28px;
       width: 28px;
       left: 4px;
       bottom: 4px;
       background: white;
       transition: .4s cubic-bezier(0.34, 1.56, 0.64, 1);
       border-radius: 50%;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }

   input:checked+.toggle-slider {
       background: var(--gradient-primary);
   }

   input:checked+.toggle-slider:before {
       transform: translateX(34px);
   }

   .toggle-label {
       font-weight: 600;
       color: var(--text-dark);
       flex: 1;
   }

   /* Google Maps Container */
   .map-container {
       width: 100%;
       height: 400px;
       border-radius: var(--radius);
       overflow: hidden;
       border: 2px solid var(--border-color);
       margin-top: 15px;
       box-shadow: var(--shadow-medium);
   }

   #map {
       width: 100%;
       height: 100%;
   }

   .location-search {
       position: relative;
       margin-bottom: 15px;
   }

   .location-search input {
       padding-right: 50px;
   }

   .location-search-btn {
       position: absolute;
       right: 10px;
       top: 50%;
       transform: translateY(-50%);
       background: var(--gradient-primary);
       color: white;
       border: none;
       width: 40px;
       height: 40px;
       border-radius: var(--radius);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .location-search-btn:hover {
       transform: translateY(-50%) scale(1.1);
   }

   .map-coordinates {
       display: flex;
       gap: 15px;
       margin-top: 15px;
   }

   .coordinate-input {
       flex: 1;
   }

   /* Enhanced File Upload */
   .file-upload {
       border: 3px dashed var(--border-color);
       border-radius: var(--radius);
       padding: 40px;
       text-align: center;
       cursor: pointer;
       transition: all 0.3s ease;
       background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
       position: relative;
       overflow: hidden;
   }

   .file-upload:hover {
       border-color: var(--primary-color);
       background: var(--primary-light);
       transform: translateY(-3px);
       box-shadow: var(--shadow-medium);
   }

   .file-upload.dragover {
       border-color: var(--success-color);
       background: var(--accent-light);
       transform: scale(1.02);
   }

   .file-upload i {
       font-size: 48px;
       color: var(--text-light);
       margin-bottom: 20px;
       transition: all 0.3s ease;
   }

   .file-upload:hover i {
       color: var(--primary-color);
       transform: scale(1.1);
   }

   .file-upload p {
       font-weight: 600;
       color: var(--text-dark);
       margin-bottom: 8px;
       font-size: 1.1rem;
   }

   .file-upload small {
       color: var(--text-light);
       font-size: 0.9rem;
   }

   .file-upload-progress {
       margin-top: 15px;
       display: none;
   }

   .progress-bar-inner {
       height: 8px;
       background: var(--gradient-primary);
       border-radius: var(--radius-full);
       width: 0%;
       transition: width 0.3s ease;
   }

   /* Enhanced File Preview */
   .file-preview {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 20px;
       margin-top: 25px;
   }

   .file-preview-item {
       width: 100%;
       height: 140px;
       border-radius: var(--radius);
       overflow: hidden;
       position: relative;
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .file-preview-item:hover {
       transform: translateY(-5px);
       box-shadow: var(--shadow-medium);
       border-color: var(--primary-color);
   }

   .file-preview-item img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.3s ease;
   }

   .file-preview-item:hover img {
       transform: scale(1.1);
   }

   .file-info {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.8);
       color: white;
       padding: 10px;
       font-size: 0.8rem;
       transform: translateY(100%);
       transition: transform 0.3s ease;
   }

   .file-preview-item:hover .file-info {
       transform: translateY(0);
   }

   .remove-file {
       position: absolute;
       top: 10px;
       right: 10px;
       width: 32px;
       height: 32px;
       background: rgba(239, 68, 68, 0.95);
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       font-size: 14px;
       transition: all 0.3s ease;
       opacity: 0;
       transform: scale(0.8);
   }

   .file-preview-item:hover .remove-file {
       opacity: 1;
       transform: scale(1);
   }

   .remove-file:hover {
       background: rgba(220, 38, 38, 0.95);
       transform: scale(1.1);
   }

   /* Enhanced Repeatable Sections */
   .repeatable-section {
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
       border-radius: var(--radius-lg);
       padding: 30px;
       margin-bottom: 30px;
       border: 2px solid var(--border-color);
       position: relative;
       overflow: hidden;
   }

   .repeatable-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: var(--gradient-primary);
   }

   .repeatable-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 25px;
   }

   .repeatable-header h3 {
       color: var(--text-dark);
       font-size: 1.4rem;
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .add-more-btn {
       background: var(--gradient-primary);
       color: white;
       border: none;
       padding: 12px 25px;
       border-radius: var(--radius);
       cursor: pointer;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .add-more-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
   }

   .remove-btn {
       background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
       color: white;
       border: none;
       padding: 10px 20px;
       border-radius: var(--radius);
       cursor: pointer;
       font-size: 0.9rem;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 8px;
       transition: all 0.3s ease;
   }

   .remove-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
   }

   /* Enhanced Commission Options */
   .commission-options {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 25px;
       margin-top: 20px;
   }

   .commission-option {
       padding: 35px;
       border: 3px solid var(--border-color);
       border-radius: var(--radius-lg);
       text-align: center;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       background: white;
       position: relative;
       overflow: hidden;
   }

   .commission-option:hover {
       transform: translateY(-8px);
       border-color: var(--primary-light);
       box-shadow: var(--shadow-large);
   }

   .commission-option.selected {
       border-color: var(--primary-color);
       background: var(--primary-light);
       box-shadow: 0 15px 30px rgba(124, 58, 237, 0.2);
   }

   .commission-option.selected::before {
       content: '✓';
       position: absolute;
       top: 15px;
       right: 15px;
       background: var(--primary-color);
       color: white;
       width: 30px;
       height: 30px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
   }

   .commission-option i {
       font-size: 42px;
       margin-bottom: 15px;
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .commission-option.selected i {
       -webkit-text-fill-color: white;
   }

   .commission-option h4 {
       margin: 10px 0;
       color: var(--text-dark);
   }

   .commission-option p {
       color: var(--text-light);
       font-size: 0.9rem;
       line-height: 1.5;
   }

   /* Enhanced Verification Options */
   .verification-options {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 25px;
       margin-top: 20px;
   }

   .verification-option {
       padding: 35px;
       border: 3px solid var(--border-color);
       border-radius: var(--radius-lg);
       text-align: center;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       background: white;
       position: relative;
   }

   .verification-option:hover {
       transform: translateY(-8px);
       border-color: var(--primary-light);
       box-shadow: var(--shadow-large);
   }

   .verification-option.selected {
       border-color: var(--primary-color);
       background: var(--primary-light);
       box-shadow: 0 15px 30px rgba(124, 58, 237, 0.2);
   }

   .verification-option.selected::before {
       content: '✓';
       position: absolute;
       top: 15px;
       right: 15px;
       background: var(--primary-color);
       color: white;
       width: 30px;
       height: 30px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
   }

   /* Enhanced Status Tracker */
   .status-tracker {
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
       border-radius: var(--radius-lg);
       padding: 35px;
       margin-top: 40px;
       border: 2px solid var(--border-color);
   }

   .status-steps {
       display: flex;
       justify-content: space-between;
       position: relative;
       margin: 40px 0;
   }

   .status-steps::before {
       content: '';
       position: absolute;
       top: 30px;
       left: 50px;
       right: 50px;
       height: 4px;
       background: var(--border-color);
       z-index: 1;
   }

   .status-step {
       text-align: center;
       position: relative;
       z-index: 2;
       flex: 1;
   }

   .status-icon {
       width: 70px;
       height: 70px;
       background: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       border: 3px solid var(--border-color);
       font-size: 28px;
       transition: all 0.3s ease;
   }

   .status-step.completed .status-icon {
       background: var(--gradient-success);
       border-color: var(--success-color);
       color: white;
       transform: scale(1.1);
       box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
   }

   .status-step.current .status-icon {
       background: var(--gradient-primary);
       border-color: var(--primary-color);
       color: white;
       animation: pulse 2s infinite;
       box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
   }

   .status-step.completed .status-icon::after {
       content: '✓';
       position: absolute;
       top: -5px;
       right: -5px;
       background: var(--success-color);
       color: white;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       font-weight: bold;
   }


   @media (max-width: 449px) {

       .repeatable-section {
           width: 100%;
           overflow: hidden;
       }

       .form-grid {
           width: 100%;
       }

       .form-group {
           width: 100%;
           padding: 14px 12px;
           overflow: hidden;
       }

       .form-input {
           width: 100%;
           min-width: 0;
           max-width: 100%;
           box-sizing: border-box;
           font-size: 14px;
           padding: 12px;
       }

       /* Upload Box Fix */
       .file-upload {
           width: 100%;
           min-height: 120px;
           padding: 15px 10px;
           box-sizing: border-box;
       }

       .file-upload p {
           font-size: 14px;
           line-height: 1.5;
           word-break: break-word;
       }

       /* Counter Section Fix */
       .counter-input {
           display: flex;
           align-items: center;
           gap: 8px;
           width: 100%;
       }

       .counter-btn {
           width: 38px;
           min-width: 38px;
           height: 38px;
           flex-shrink: 0;
       }

       .counter-input .form-input {
           flex: 1;
           width: auto;
           max-width: 100% !important;
           min-width: 0;
           text-align: center;
       }

       /* Shift Timing Fix */
       .date-input-group {
           display: flex;
           align-items: center;
           gap: 6px;
           width: 100%;
       }

       .date-input-group span {
           font-size: 13px;
           flex-shrink: 0;
       }

       .date-input-group .form-input {
           flex: 1;
           min-width: 0;
           width: 100%;
           padding: 10px 8px;
           font-size: 13px;
       }

       /* Header Fix */
       .repeatable-header {
           padding: 14px 12px;
       }

       .repeatable-header h3 {
           font-size: 1rem;
           line-height: 1.5;
           word-break: break-word;
       }

       .repeatable-header .badge {
           font-size: 11px;
           padding: 5px 10px;
       }

       .form-label {
           font-size: 14px;
           line-height: 1.5;
           flex-wrap: wrap;
       }
   }

   /* Enhanced Navigation Buttons */
   .form-navigation {
       display: flex;
       justify-content: space-between;
       padding-top: 40px;
       margin-top: 40px;
       border-top: 3px solid var(--border-color);
   }

   .nav-btn {
       padding: 16px 35px;
       border-radius: var(--radius);
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       border: none;
       font-size: 16px;
       display: flex;
       align-items: center;
       gap: 12px;
       position: relative;
       overflow: hidden;
   }

   .nav-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.5s ease;
   }

   .nav-btn:hover::before {
       left: 100%;
   }

   .btn-prev {
       background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
       color: var(--text-dark);
       border: 2px solid var(--border-color);
   }

   .btn-prev:hover {
       transform: translateY(-3px) translateX(-5px);
       box-shadow: var(--shadow-medium);
       border-color: var(--primary-color);
   }

   .btn-next {
       background: var(--gradient-primary);
       color: white;
   }

   .btn-next:hover {
       transform: translateY(-3px) translateX(5px);
       box-shadow: 0 15px 30px rgba(124, 58, 237, 0.3);
   }

   .btn-save {
       background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
       color: white;
   }

   .btn-save:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 30px rgba(245, 158, 11, 0.3);
   }

   .btn-submit {
       background: var(--gradient-luxury);
       color: var(--luxury-dark);
       font-weight: 700;
       padding: 18px 45px;
       font-size: 1.1rem;
   }

   .btn-submit:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
   }

   /* Enhanced Info Box */
   .info-box {
       background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
       border-left: 6px solid var(--primary-color);
       padding: 25px;
       border-radius: var(--radius);
       margin-bottom: 35px;
       display: flex;
       align-items: flex-start;
       gap: 20px;
       box-shadow: var(--shadow-light);
   }

   .info-box i {
       color: var(--primary-color);
       font-size: 1.5rem;
       margin-top: 2px;
   }

   .info-box p {
       margin: 0;
       color: var(--text-dark);
       line-height: 1.7;
   }

   /* Validation Messages */
   .validation-message {
       color: var(--error-color);
       font-size: 0.9rem;
       margin-top: 8px;
       display: none;
       padding: 10px 15px;
       background: rgba(239, 68, 68, 0.1);
       border-radius: var(--radius);
       border-left: 4px solid var(--error-color);
   }

   .form-input.error,
   .form-select.error,
   .form-textarea.error {
       border-color: var(--error-color);
       background: rgba(239, 68, 68, 0.05);
   }

   .validation-message.show {
       display: flex;
       align-items: center;
       gap: 10px;
       animation: shake 0.5s ease;
   }

   @keyframes shake {

       0%,
       100% {
           transform: translateX(0);
       }

       25% {
           transform: translateX(-5px);
       }

       75% {
           transform: translateX(5px);
       }
   }

   /* Enhanced Counter Input */
   .counter-input {
       display: flex;
       align-items: center;
       gap: 20px;
       padding: 15px;
       background: var(--background-light);
       border-radius: var(--radius);
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .counter-input:hover {
       border-color: var(--primary-light);
       background: white;
   }

   .counter-btn {
       width: 45px;
       height: 45px;
       border-radius: 50%;
       background: var(--primary-light);
       border: 2px solid var(--primary-color);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       font-size: 20px;
       color: var(--primary-color);
       transition: all 0.3s ease;
   }

   .counter-btn:hover {
       background: var(--primary-color);
       color: white;
       transform: scale(1.1);
   }

   .counter-value {
       font-size: 20px;
       font-weight: 700;
       min-width: 60px;
       text-align: center;
       color: var(--text-dark);
   }

   /* Enhanced Price Input */
   .price-input-group {
       display: flex;
       align-items: center;
       gap: 15px;
       padding: 15px;
       background: var(--background-light);
       border-radius: var(--radius);
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .price-input-group:hover {
       border-color: var(--primary-light);
       background: white;
   }

   .price-input-group span {
       font-weight: 700;
       color: var(--primary-color);
       font-size: 1.1rem;
   }

   /* Enhanced Star Rating */
   .star-rating {
       display: flex;
       gap: 10px;
       margin: 15px 0;
   }

   .star-rating i {
       color: #e5e7eb;
       cursor: pointer;
       font-size: 32px;
       transition: all 0.3s ease;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }

   .star-rating i:hover {
       transform: scale(1.2);
   }

   .star-rating i.active {
       color: #f59e0b;
       text-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
   }

   /* Enhanced Date Input */
   .date-input-group {
       display: flex;
       gap: 20px;
       align-items: center;
       padding: 0px;
       background: var(--background-light);
       border-radius: var(--radius);
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .date-input-group:hover {
       border-color: var(--primary-light);
       background: white;
   }

   .date-input-group span {
       font-weight: 600;
       color: var(--text-light);
   }

   /* Success Modal */
   .success-modal {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.9);
       backdrop-filter: blur(10px);
       z-index: 2000;
       align-items: center;
       justify-content: center;
       animation: fadeIn 0.5s ease;
   }

   .success-modal.active {
       display: flex;
   }

   .success-content {
       background: white;
       border-radius: var(--radius-xl);
       padding: 70px;
       text-align: center;
       max-width: 650px;
       width: 90%;
       animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
       position: relative;
       overflow: hidden;
       box-shadow: var(--shadow-extra);
   }

   .success-content::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 6px;
       background: var(--gradient-success);
   }

   @keyframes scaleIn {
       from {
           transform: scale(0.8);
           opacity: 0;
       }

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

   .success-icon {
       width: 120px;
       height: 120px;
       background: var(--gradient-success);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 35px;
       font-size: 52px;
       color: white;
       box-shadow: 0 15px 30px rgba(16, 185, 129, 0.3);
       animation: bounce 1s ease;
   }

   @keyframes bounce {

       0%,
       20%,
       50%,
       80%,
       100% {
           transform: translateY(0);
       }

       40% {
           transform: translateY(-20px);
       }

       60% {
           transform: translateY(-10px);
       }
   }

   .success-content h2 {
       font-family: var(--font-display);
       font-size: 2.5rem;
       margin-bottom: 20px;
       color: var(--text-dark);
   }

   /* Notification System */
   .notification {
       position: fixed;
       top: 20px;
       right: 20px;
       padding: 20px 25px;
       border-radius: var(--radius);
       color: white;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 15px;
       z-index: 3000;
       animation: slideInRight 0.5s ease;
       max-width: 400px;
       box-shadow: var(--shadow-extra);
   }

   .notification.success {
       background: var(--gradient-success);
   }

   .notification.error {
       background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
   }

   .notification.info {
       background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
   }

   .notification.warning {
       background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
   }

   @keyframes slideInRight {
       from {
           transform: translateX(100%);
           opacity: 0;
       }

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

   @keyframes slideOutRight {
       from {
           transform: translateX(0);
           opacity: 1;
       }

       to {
           transform: translateX(100%);
           opacity: 0;
       }
   }

   /* Loading Spinner */
   .spinner {
       width: 40px;
       height: 40px;
       border: 4px solid var(--border-color);
       border-top-color: var(--primary-color);
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   /* Responsive Design */
   @media (max-width: 1400px) {
       .onboarding-container {
           padding: 15px;
       }
   }

   @media (max-width: 1200px) {
       .form-grid {
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       }

       .step-title {
           font-size: 2.2rem;
       }

       .steps-panel {
           flex: 0 0 280px;
       }
   }

   @media (max-width: 992px) {
       .header-title {
           font-size: 2.4rem;
       }

       .steps-panel {
           flex: 0 0 250px;
           padding: 20px;
       }

       .step-indicator {
           padding: 15px;
           gap: 15px;
       }

       .step-circle {
           width: 45px;
           height: 45px;
           font-size: 14px;
       }

       .form-container {
           padding: 30px;
       }

       .commission-options,
       .verification-options {
           grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       }
   }

   @media (max-width: 768px) {
       .onboarding-container {
           flex-direction: column;
           gap: 20px;
       }

       .steps-panel {
           flex: none;
           width: 100%;
           position: static;
           margin-bottom: 20px;
       }

       .header-title {
           font-size: 2rem;
       }

       .form-container {
           padding: 25px;
       }

       .step-title {
           font-size: 1.9rem;
       }

       .form-grid {
           grid-template-columns: 1fr;
           gap: 25px;
       }

       .form-navigation {
           flex-direction: column;
           gap: 15px;
       }

       .nav-btn {
           width: 100%;
           justify-content: center;
       }

       .status-steps {
           flex-wrap: wrap;
           gap: 30px;
       }

       .status-step {
           flex: 0 0 calc(50% - 15px);
       }

       .success-content {
           padding: 40px 25px;
       }

       .success-content h2 {
           font-size: 2rem;
       }
   }

   @media (max-width: 576px) {
       .header-title {
           font-size: 1.8rem;
       }

       .header-subtitle {
           font-size: 1.1rem;
       }

       .step-indicator {
           padding: 12px;
           gap: 12px;
       }

       .step-circle {
           width: 40px;
           height: 40px;
           font-size: 12px;
       }

       .step-name {
           font-size: 0.9rem;
       }

       .form-container {
           padding: 20px;
       }

       .step-title {
           font-size: 1.6rem;
       }

       .checkbox-grid {
           grid-template-columns: 1fr;
       }

       .commission-options,
       .verification-options {
           grid-template-columns: 1fr;
       }

       .map-container {
           height: 300px;
       }

       .otp-input-group {
           gap: 10px;
       }

       .otp-input {
           width: 50px;
           height: 60px;
           font-size: 20px;
       }

       .stats-container {
           grid-template-columns: repeat(2, 1fr);
           gap: 10px;
       }

       .stat-box {
           padding: 12px;
       }

       .stat-number {
           font-size: 1.2rem;
       }
   }

   /* Additional UI Enhancements */
   .section-divider {
       height: 1px;
       background: linear-gradient(90deg, transparent, var(--border-color), transparent);
       margin: 40px 0;
   }

   .help-text {
       color: var(--text-light);
       font-size: 0.9rem;
       margin-top: 8px;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .character-count {
       text-align: right;
       font-size: 0.85rem;
       color: var(--text-light);
       margin-top: 5px;
   }

   .character-count.warning {
       color: var(--warning-color);
   }

   .character-count.error {
       color: var(--error-color);
   }

   .form-section {
       margin-bottom: 40px;
       padding-bottom: 30px;
       border-bottom: 2px solid var(--border-color);
   }

   .form-section:last-child {
       border-bottom: none;
       margin-bottom: 0;
       padding-bottom: 0;
   }

   .password-strength {
       margin-top: 10px;
       height: 6px;
       background: var(--border-color);
       border-radius: var(--radius-full);
       overflow: hidden;
   }

   .password-strength-meter {
       height: 100%;
       width: 0%;
       transition: width 0.3s ease;
       background: var(--gradient-primary);
   }

   .password-strength.weak .password-strength-meter {
       background: linear-gradient(90deg, #ef4444, #f59e0b);
       width: 33%;
   }

   .password-strength.medium .password-strength-meter {
       background: linear-gradient(90deg, #f59e0b, #f59e0b);
       width: 66%;
   }

   .password-strength.strong .password-strength-meter {
       background: linear-gradient(90deg, #f59e0b, #10b981);
       width: 100%;
   }

   .password-strength-text {
       font-size: 0.85rem;
       margin-top: 5px;
       color: var(--text-light);
   }

   /* Tooltip */
   .tooltip {
       position: relative;
       display: inline-block;
   }

   .tooltip .tooltip-text {
       visibility: hidden;
       width: 200px;
       background: var(--background-dark);
       color: white;
       text-align: center;
       padding: 10px;
       border-radius: var(--radius);
       position: absolute;
       z-index: 1;
       bottom: 125%;
       left: 50%;
       transform: translateX(-50%);
       opacity: 0;
       transition: opacity 0.3s;
       font-size: 0.85rem;
       font-weight: normal;
       box-shadow: var(--shadow-large);
   }

   .tooltip .tooltip-text::after {
       content: "";
       position: absolute;
       top: 100%;
       left: 50%;
       margin-left: -5px;
       border-width: 5px;
       border-style: solid;
       border-color: var(--background-dark) transparent transparent transparent;
   }

   .tooltip:hover .tooltip-text {
       visibility: visible;
       opacity: 1;
   }

   /* Badge */
   .badge {
       display: inline-block;
       padding: 5px 12px;
       border-radius: var(--radius-full);
       font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .badge.success {
       background: var(--accent-light);
       color: var(--success-color);
   }

   .badge.warning {
       background: #fef3c7;
       color: var(--warning-color);
   }

   .badge.error {
       background: #fee2e2;
       color: var(--error-color);
   }

   .badge.info {
       background: #dbeafe;
       color: var(--info-color);
   }

   /* Card Hover Effects */
   .room-card,
   .policy-card,
   .amenity-category {
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .room-card:hover,
   .policy-card:hover,
   .amenity-category:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-extra);
   }

   /* Focus Visible Enhancement */
   .form-input:focus-visible,
   .form-select:focus-visible,
   .form-textarea:focus-visible,
   .nav-btn:focus-visible,
   .counter-btn:focus-visible {
       outline: 2px solid var(--primary-color);
       outline-offset: 2px;
   }

   /* Selection Styling */
   ::selection {
       background: rgba(124, 58, 237, 0.3);
       color: var(--text-dark);
   }

   /* Scrollbar Styling */
   ::-webkit-scrollbar {
       width: 10px;
   }

   ::-webkit-scrollbar-track {
       background: var(--background-light);
       border-radius: var(--radius);
   }

   ::-webkit-scrollbar-thumb {
       background: var(--primary-color);
       border-radius: var(--radius);
   }

   ::-webkit-scrollbar-thumb:hover {
       background: var(--primary-dark);
   }

   /* Amenities Grid */
   .amenities-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 25px;
       margin: 30px 0;
   }

   .amenity-category {
       background: white;
       border-radius: var(--radius);
       padding: 25px;
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .amenity-category:hover {
       border-color: var(--primary-color);
       transform: translateY(-5px);
       box-shadow: var(--shadow-large);
   }

   .amenity-category h4 {
       color: var(--primary-color);
       margin-bottom: 20px;
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 1.2rem;
   }

   /* Policies Grid */
   .policies-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 25px;
       margin: 30px 0;
   }

   .policy-card {
       background: white;
       border-radius: var(--radius);
       padding: 25px;
       border: 2px solid var(--border-color);
       transition: all 0.3s ease;
   }

   .policy-card:hover {
       border-color: var(--primary-color);
       transform: translateY(-5px);
       box-shadow: var(--shadow-large);
   }

   .policy-card h4 {
       color: var(--primary-color);
       margin-bottom: 20px;
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 1.2rem;
   }

   @media (max-width: 767px) {
       .steps-panel {
           display: none !important;
       }
   }

   /* ===== FORM CONTAINER CLEAN ===== */
   .form-container {
       background: #ffffff;
       border-radius: 20px;
       padding: 35px;
       border: 1px solid #e5e7eb;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
   }

   /* top accent line */
   .form-container::before {
       height: 3px;
       background: linear-gradient(90deg, #6366f1, #8b5cf6);
   }

   /* ===== STEP HEADER ===== */
   .step-header {
       margin-bottom: 30px;
       border-bottom: 1px solid #e5e7eb;
       padding-bottom: 20px;
   }

   .step-header::after {
       height: 2px;
       width: 80px;
       background: #6366f1;
   }

   /* badge */
   .step-number {
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       font-size: 12px;
       padding: 6px 16px;
       border-radius: 999px;
       box-shadow: 0 6px 15px rgba(99, 102, 241, 0.25);
   }

   /* title */
   .step-title {
       font-size: 2rem;
       font-weight: 700;
       color: #1e293b;
   }

   /* description */
   .step-description {
       color: #64748b;
       font-size: 1rem;
   }

   /* ===== INFO BOX ===== */
   .info-box {
       background: #eff6ff;
       border-left: 4px solid #6366f1;
       border-radius: 12px;
       padding: 18px;
       box-shadow: none;
   }

   /* ===== INPUTS ===== */
   .form-input,
   .form-select,
   .form-textarea {
       border: 1.5px solid #e5e7eb;
       border-radius: 12px;
       padding: 14px 16px;
       background: #ffffff;
       font-size: 14px;
       transition: all 0.2s ease;
   }

   /* hover */
   .form-input:hover,
   .form-select:hover,
   .form-textarea:hover {
       border-color: #c7d2fe;
   }

   /* focus */
   .form-input:focus,
   .form-select:focus,
   .form-textarea:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
       transform: none;
   }

   /* ===== LABEL ===== */
   .form-label {
       font-weight: 600;
       font-size: 14px;
       color: #334155;
   }

   /* ===== GRID ===== */
   .form-grid {
       gap: 20px;
   }

   /* ===== TEXTAREA ===== */
   .form-textarea {
       min-height: 120px;
   }

   /* ===== STAR RATING ===== */
   .star-rating i {
       font-size: 26px;
       color: #e5e7eb;
   }

   .star-rating i.active {
       color: #f59e0b;
   }

   /* ===== COUNTER ===== */
   .counter-input {
       border-radius: 12px;
       background: #f8fafc;
       border: 1px solid #e5e7eb;
   }

   .counter-btn {
       width: 38px;
       height: 38px;
       border-radius: 10px;
       background: #eef2ff;
       border: none;
       color: #6366f1;
   }

   .counter-btn:hover {
       background: #6366f1;
       color: #fff;
   }

   /* ===== PRICE INPUT ===== */
   .price-input-group {
       border-radius: 12px;
       background: #f8fafc;
       border: 1px solid #e5e7eb;
   }

   /* ===== SECTION DIVIDER ===== */
   .section-divider {
       margin: 30px 0;
       background: #e5e7eb;
   }

   /* ===== BUTTONS ===== */
   .nav-btn {
       border-radius: 12px;
       padding: 14px 28px;
       font-size: 14px;
   }

   /* previous */
   .btn-prev {
       background: #f1f5f9;
       border: 1px solid #e5e7eb;
   }

   /* next */
   .btn-next {
       background: linear-gradient(135deg, #6366f1, #8b5cf6);
       box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
   }

   .btn-next:hover {
       transform: translateY(-2px);
   }

   /* ===== ANIMATION ===== */
   .form-step.active {
       animation: smoothFade 0.4s ease;
   }

   @keyframes smoothFade {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

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

   /* ===== VALIDATION ===== */
   .validation-message {
       font-size: 12px;
       border-radius: 8px;
   }

   /* ===== FILE UPLOAD ===== */
   .file-upload {
       border-radius: 14px;
       border: 2px dashed #e5e7eb;
       background: #f8fafc;
   }

   .file-upload:hover {
       background: #eef2ff;
       border-color: #6366f1;
   }

   /* ===== MODAL ===== */
   .success-content {
       border-radius: 20px;
   }

   /* ===== SCROLL ===== */
   ::-webkit-scrollbar-thumb {
       background: #6366f1;
   }

   @media (max-width: 480px) {

       /* Main Room Card */
       .repeatable-section {
           width: 100%;
           max-width: 100%;
           overflow: hidden;
           border-radius: 14px;
       }

       /* Header */
       .repeatable-header {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 12px;
           padding: 16px 14px;
       }

       .repeatable-header h4,
       .repeatable-header h3 {
           width: 100%;
           font-size: 1.05rem;
           line-height: 1.5;
           word-break: break-word;
           display: flex;
           align-items: flex-start;
           gap: 8px;
           flex-wrap: wrap;
           margin: 0;
       }

       /* Remove Button */
       .remove-btn {
           width: 100%;
           justify-content: center;
           padding: 12px;
           font-size: 14px;
           border-radius: 12px;
       }

       /* Form Grid */
       .form-grid {
           display: flex;
           flex-direction: column;
           width: 100%;
       }

       /* Form Group */
       .form-group {
           width: 100%;
           padding: 14px;
           box-sizing: border-box;
           overflow: hidden;
       }

       /* Labels */
       .form-label {
           display: flex;
           align-items: center;
           gap: 8px;
           flex-wrap: wrap;
           font-size: 14px;
           line-height: 1.5;
           margin-bottom: 10px;
       }

       /* Inputs */
       .form-input,
       .form-select,
       textarea {
           width: 100% !important;
           max-width: 100% !important;
           min-width: 0 !important;
           box-sizing: border-box;
           font-size: 14px;
           padding: 12px;
           min-height: 46px;
       }

       /* Select Fix */
       .form-select {
           appearance: auto;
       }

       /* Upload Box */
       .file-upload {
           width: 100%;
           max-width: 100%;
           min-height: 130px;
           padding: 18px 12px;
           box-sizing: border-box;
           text-align: center;
       }

       .file-upload i {
           font-size: 2rem;
           margin-bottom: 10px;
       }

       .file-upload p {
           font-size: 14px;
           line-height: 1.5;
           word-break: break-word;
           margin: 0;
       }

       /* Toggle Fix */
       .toggle-group {
           width: 100%;
           display: flex;
           align-items: center;
           gap: 12px;
           flex-wrap: wrap;
       }

       .toggle-label {
           font-size: 14px;
       }

       /* Number Input Fix */
       input[type="number"] {
           width: 100%;
       }

       /* Prevent overflow */
       * {
           min-width: 0;
       }
   }