:root {

            --primary: #64748b;

            --primary-dark: #314158;

            --primary-light: #cadaf1;

            --success: #00875A;

            --success-color: #10b981;

            --success-dark: #059669;

            --warning-color: #f59e0b;

            --warning-dark: #d97706;

            --neutral-color: #6b7280;

            --neutral-dark: #4b5563;

            --sidebar-width: 400px;

            --glow-color: #64748b; /* Color wheel integrated */

            --glow-color-rgb: 100, 116, 139; /* RGB values for glow color */

        }



        /* Required field styling that responds to color wheel */

        .required-field {

            border: 2px solid var(--primary) !important;

            transition: border-color 0.3s ease;

        }



        .required-field:focus {

            border-color: var(--primary) !important;

            box-shadow: 0 0 0 3px rgba(var(--glow-color-rgb), 0.1) !important;

        }



        /* Progressive field highlighting system */

        .progressive-field {

            border: 1px solid #d1d5db;

            transition: all 0.3s ease;

        }



        .progressive-field:focus {

            border-color: var(--primary);

            box-shadow: 0 0 0 3px rgba(var(--glow-color-rgb), 0.1);

        }



        .progressive-field.completed {

            border-color: #10b981 !important;

            background-color: #f0fdf4 !important;

        }



        .progressive-field.current {

            border-color: var(--primary) !important;

            box-shadow: 0 0 0 3px rgba(var(--glow-color-rgb), 0.2) !important;

            background-color: #fef3c7 !important;

        }



        .progressive-field.next-up {

            border-color: #f59e0b !important;

            background-color: #fffbeb !important;

            animation: pulse-next 2s infinite;

        }



        @keyframes pulse-next {

            0%, 100% {

                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);

            }

            50% {

                box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);

            }

        }



        @keyframes pulse {

            0%, 100% {

                opacity: 1;

            }

            50% {

                opacity: 0.5;

            }

        }

        

        /* Business Address Debug Tooltip Styles */

        .debug-tooltip-container {

            position: relative;

            display: inline-block;

        }

        

        .debug-tooltip-icon {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 18px;

            height: 18px;

            background: #f3f4f6;

            border: 1px solid #d1d5db;

            border-radius: 50%;

            cursor: help;

            margin-left: 8px;

            font-size: 12px;

            color: #6b7280;

            transition: all 0.2s ease;

        }

        

        .debug-tooltip-icon:hover {

            background: var(--primary);

            color: white;

            border-color: var(--primary);

            transform: scale(1.1);

        }

        

        .debug-tooltip {

            position: absolute;

            bottom: 125%;

            right: 0;

            background: #1f2937;

            color: white;

            padding: 12px 16px;

            border-radius: 8px;

            font-size: 13px;

            line-height: 1.4;

            min-width: 300px;

            max-width: 400px;

            white-space: normal;

            word-wrap: break-word;

            opacity: 0;

            visibility: hidden;

            transition: all 0.3s ease;

            z-index: 999999;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

        }

        

        .debug-tooltip::after {

            content: '';

            position: absolute;

            top: 100%;

            right: 20px;

            border: 6px solid transparent;

            border-top-color: #1f2937;

        }

        

        .debug-tooltip-container:hover .debug-tooltip {

            opacity: 1;

            visibility: visible;

        }

        

        .debug-tooltip .loading {

            color: #fbbf24;

        }

        

        .debug-tooltip .error {

            color: #f87171;

        }

        

        .debug-tooltip .success {

            color: #34d399;

        }

        

        body {

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

            margin: 0;

            padding: 0;

            background: #f8fafc;

            height: 100vh;

            overflow: hidden;

        }

        

        .hidden {

            display: none !important;

        }

        

        .modal-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 9999;

            padding: 1rem;

        }

        

        /* Enhanced Radio Button Styling for Mobile */

        .confirmation-option {

            position: relative;

        }

        

        .confirmation-option:hover {

            border-color: #0052CC !important;

            background: #f8fafc !important;

            transform: translateY(-1px);

            box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);

        }

        

        .confirmation-option input[type="radio"]:checked + i + span {

            color: #0052CC;

            font-weight: 600;

        }

        

        .confirmation-option input[type="radio"]:checked {

            accent-color: #0052CC;

        }

        

        .confirmation-option input[type="radio"] {

            margin: 0;

            flex-shrink: 0;

        }

        

        /* Mobile Responsiveness */

        @media (max-width: 768px) {

            .modal-overlay {

                padding: 0.5rem;

                align-items: flex-start;

                padding-top: 2rem;

            }

            

            .modal-content {

                width: 100% !important;

                max-width: none !important;

                margin: 0 !important;

                padding: 1rem !important;

                max-height: calc(100vh - 4rem);

                overflow-y: auto;

            }

            

            .confirmation-preview {

                padding: 0.75rem !important;

                margin-bottom: 1rem !important;

            }

            

            .confirmation-option {

                padding: 1rem !important;

                min-height: 56px;

            }

            

            .confirmation-option input[type="radio"] {

                width: 20px !important;

                height: 20px !important;

            }

            

            .confirmation-option i {

                font-size: 1.2rem !important;

            }

            

            .confirmation-option span {

                font-size: 1.1rem !important;

            }

            

            /* Make buttons stack on mobile */

            .modal-buttons {

                flex-direction: column !important;

                gap: 0.75rem !important;

            }

            

            .modal-buttons button {

                width: 100% !important;

                padding: 1rem !important;

                font-size: 1rem !important;

                justify-content: center;

                display: flex;

                align-items: center;

                gap: 0.5rem;

            }

        }

        

        @media (max-width: 480px) {

            .modal-content h3 {

                font-size: 1.1rem !important;

            }

            

            .confirmation-preview h4 {

                font-size: 1rem !important;

            }

            

            #appointmentSummary {

                font-size: 0.85rem !important;

            }

            

            .form-group label {

                font-size: 0.95rem !important;

            }

        }

        

        .btn-indigo {

            background: #6366f1;

            color: white;

        }

        

        .btn-indigo:hover {

            background: #5b21b6;

        }

        

        /* Required field highlighting */

        .required-field {

            border: 2px solid #10b981 !important;

            box-shadow: 0 0 5px rgba(16, 185, 129, 0.3);

        }

        

        .required-label::after {

            content: " *";

            color: #10b981;

            font-weight: bold;

        }

        

        .main-container {

            transition: margin-right 0.3s ease-in-out;

            height: 100vh;

            overflow-y: auto;

            overflow-x: hidden;

        }

        

        .main-container.with-sidebar {

            margin-right: var(--sidebar-width);

        }

        

        .step-indicator {

            background: var(--primary);

            height: 1px;

            border-radius: 2px;

        }

        

        .animate-fade-in {

            animation: fadeIn 0.3s ease-in-out;

        }

        

        @keyframes fadeIn {

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

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

        }



        /* Save Agent Button Styling */

        .save-agent-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(0, 135, 90, 0.6) !important;

            background: linear-gradient(135deg, #00a86b, #00875A) !important;

        }



        .save-agent-btn:active {

            transform: translateY(0);

            box-shadow: 0 4px 16px rgba(0, 135, 90, 0.4) !important;

        }

        

        /* Compact Header */

        .header-compact {

            background: white;

            color: #1f2937;

            padding: 1rem 0;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        }

        

        .header-compact h1 {

            font-size: 1.5rem;

            margin: 0;

            font-weight: 600;

            color: #1f2937;

        }

        

        .header-compact p {

            margin: 0.25rem 0 0 0;

            color: #6b7280;

            font-size: 0.875rem;

        }





































        

        /* Compact Forms */

        .form-section {

            background: white;

            border-radius: 8px;

            padding: 1rem;

            margin: 1rem 0;

            box-shadow: 0 1px 3px rgba(0,0,0,0.1);

        }

        

        .form-section h2 {

            font-size: 1.125rem;

            margin: 0 0 0.75rem 0;

            color: #1f2937;

            font-weight: 600;

        }

        

        .form-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 0.75rem;

        }

        

        .form-group {

            margin-bottom: 0.75rem;

        }

        

        .form-group label {

            display: block;

            font-size: 0.875rem;

            font-weight: 500;

            color: #374151;

            margin-bottom: 0.25rem;

        }

        

        .form-group input, 

        .form-group select {

            width: 100%;

            padding: 0.5rem 0.75rem;

            border: 1px solid #d1d5db;

            border-radius: 6px;

            font-size: 0.875rem;

            transition: border-color 0.2s;

        }

        

        .form-group input:focus,

        .form-group select:focus {

            outline: none;

            border-color: var(--primary);

            box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);

        }

        

        /* Property Details Form Layout */

        .form-row {

            display: flex;

            gap: 1rem;

            margin-bottom: 0.75rem;

        }

        

        .form-group.half-width {

            flex: 1;

            margin-bottom: 0;

        }

        

        

        #getPropertyDetails {

            background: linear-gradient(135deg, #059669, #047857);

            color: white;

            border: none;

            padding: 0.75rem 1.5rem;

            border-radius: 8px;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.2s;

        }

        

        #getPropertyDetails:hover {

            background: linear-gradient(135deg, #047857, #065f46);

            transform: translateY(-1px);

        }

        

        #getPropertyDetails:disabled {

            background: #9ca3af;

            cursor: not-allowed;

            transform: none;

        }

        

        @media (max-width: 768px) {

            .form-row {

                flex-direction: column;

                gap: 0;

            }

            

            .form-group.half-width {

                margin-bottom: 0.75rem;

            }

        }

        

        /* Compact Service Cards */

        .services-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

            gap: 6px;

            margin: 0.5rem 0;

        }

        

        .service-card-compact {

            background: white;

            border: 1px solid #d1d5db;

            border-radius: 8px;

            padding: 0.4rem 0.55rem;

            cursor: pointer;

            transition: all 0.3s ease;

            position: relative;

            min-height: auto;

            height: auto;

        }

        

        .service-card-compact:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 24px rgba(0,0,0,0.08);

        }

        

        .service-card-compact.selected {

            background: rgba(var(--glow-color-rgb), 0.05);

            border-color: var(--glow-color);

            box-shadow: 0 0 0 4px rgba(var(--glow-color-rgb), 0.1), 

                        0 8px 24px rgba(var(--glow-color-rgb), 0.15),

                        inset 0 0 40px rgba(var(--glow-color-rgb), 0.05);

            transform: translateY(-2px);

        }

        

        .service-card-compact h4 {

            font-size: 0.78rem;

            font-weight: 700;

            margin: 0;

            color: #1f2937;

            line-height: 1.2;

        }

        

        .service-card-compact p {

            font-size: 0.7rem;

            color: #6b7280;

            margin: 0.25rem 0 0 0;

            line-height: 1.2;

        }

        

        .service-price-compact {

            font-size: 0.82rem;

            font-weight: 700;

            color: #059669;

            white-space: nowrap;

        }



        /* Upcharge cards - identical styling to service cards */

        .upcharge-card {

            background: white;

            border: 1px solid #d1d5db;

            border-radius: 8px;

            padding: 0.4rem 0.55rem;

            cursor: pointer;

            transition: all 0.3s ease;

            position: relative;

            min-height: auto;

            height: auto;

        }



        .upcharge-card:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 24px rgba(0,0,0,0.08);

        }



        .upcharge-card.selected {

            background: rgba(var(--glow-color-rgb), 0.05);

            border-color: var(--glow-color);

            box-shadow: 0 0 0 4px rgba(var(--glow-color-rgb), 0.1),

                        0 8px 24px rgba(var(--glow-color-rgb), 0.15),

                        inset 0 0 40px rgba(var(--glow-color-rgb), 0.05);

            transform: translateY(-2px);

        }



        .upcharge-card h4 {

            font-size: 0.875rem;

            font-weight: 600;

            margin: 0;

            color: #1f2937;

            line-height: 1.2;

        }



        .upcharge-card p {

            font-size: 0.75rem;

            color: #6b7280;

            margin: 0.25rem 0 0 0;

            line-height: 1.2;

        }



        /* Client search UX enhancements */

        .keyboard-selected {

            background: #f0f9ff !important;

            border-left: 3px solid #3b82f6 !important;

        }

        

        .suggestion-item {

            transition: all 0.2s ease;

        }



        .suggestion-item:hover {

            background: #f9fafb !important;

        }



        /* 🤖 AI PRICING INTELLIGENCE - Clean & Professional */

        .ai-pricing-badge {

            margin-top: 8px;

            padding: 8px 10px;

            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

            border: 1px solid #bae6fd;

            border-radius: 8px;

            font-size: 0.75rem;

        }



        .ai-price-row {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 6px;

        }



        .ai-base-price {

            color: #94a3b8;

            text-decoration: line-through;

            font-size: 0.875rem;

        }



        .ai-suggested-price {

            color: #0369a1;

            font-weight: 700;

            font-size: 1rem;

        }



        .ai-tag {

            display: inline-block;

            padding: 2px 8px;

            background: white;

            border: 1px solid #bae6fd;

            border-radius: 12px;

            font-size: 0.7rem;

            color: #0369a1;

            margin-right: 4px;

        }



        .ai-accept-btn {

            background: linear-gradient(135deg, #0ea5e9, #0284c7);

            color: white;

            border: none;

            padding: 4px 10px;

            border-radius: 6px;

            font-size: 0.7rem;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.2s;

        }



        .ai-accept-btn:hover {

            transform: translateY(-1px);

            box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);

        }



        /* 🤖 Property Scanner Animation */

        @keyframes spin {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }



        .scanning-spinner {

            animation: spin 1s linear infinite;

        }



        /* Quote Summary Compact */

        .quote-summary-compact {

            background: white;

            border: 1px solid #e5e7eb;

            border-radius: 8px;

            padding: 1rem;

            margin: 1rem 0;

        }

        

        .quote-summary-compact h3 {

            font-size: 1rem;

            font-weight: 600;

            margin: 0 0 0.75rem 0;

            color: #1f2937;

        }



        /* Elegant Travel Card Styling */

        .travel-elegant-card {

            background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);

            border: 1px solid #e2e8f0;

            border-radius: 12px;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

            overflow: visible;

            transition: all 0.3s ease;

            padding: 0;

        }

        

        .travel-elegant-card:hover {

            border-color: var(--primary);

            box-shadow: 0 4px 12px rgba(var(--glow-color-rgb), 0.15);

        }

        

        /* Travel Card Header */

        .travel-card-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 1rem 1.25rem;

            background: linear-gradient(135deg, #fefefe 0%, #f9fafb 100%);

            border-bottom: 1px solid #f1f5f9;

            min-height: 60px;

        }

        

        .travel-title-section {

            display: flex;

            align-items: center;

            gap: 0.875rem;

            flex: 1;

        }

        

        .travel-icon-wrapper {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 36px;

            height: 36px;

            background: linear-gradient(135deg, var(--primary), var(--primary-dark));

            border-radius: 8px;

            box-shadow: 0 2px 8px rgba(var(--glow-color-rgb), 0.2);

        }

        

        .travel-icon {

            color: white;

            font-size: 0.875rem;

        }

        

        .travel-title-content {

            flex: 1;

        }

        

        .travel-title {

            font-size: 0.95rem;

            font-weight: 600;

            color: #1e293b;

            margin: 0 0 2px 0;

            line-height: 1.2;

        }

        

        .travel-subtitle {

            font-size: 0.75rem;

            color: #64748b;

            font-weight: 400;

        }

        

        .travel-tooltip-wrapper {

            margin-left: 0.5rem;

            position: relative;

        }

        

        .travel-info-icon {

            width: 18px;

            height: 18px;

            border-radius: 50%;

            background: #f1f5f9;

            color: var(--primary);

            border: 1px solid #e2e8f0;

            font-style: normal;

            font-size: 0.7rem;

            font-weight: 600;

        }

        

        .travel-info-icon:hover {

            background: var(--primary);

            color: white;

            border-color: var(--primary);

        }



        /* Override Address Modal */

        .override-modal {

            display: none;

            position: fixed;

            z-index: 10000;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5);

            animation: fadeIn 0.3s ease;

        }



        .override-modal-content {

            background-color: white;

            margin: 10% auto;

            padding: 2rem;

            border-radius: 12px;

            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

            width: 90%;

            max-width: 500px;

            position: relative;

            animation: slideIn 0.3s ease;

        }



        .override-modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 1.5rem;

            padding-bottom: 1rem;

            border-bottom: 1px solid #e5e7eb;

        }



        .override-modal-title {

            font-size: 1.25rem;

            font-weight: 600;

            color: #1f2937;

        }



        .override-modal-close {

            background: none;

            border: none;

            font-size: 1.5rem;

            cursor: pointer;

            color: #6b7280;

            padding: 0.25rem;

            border-radius: 4px;

        }



        .override-modal-close:hover {

            background: #f3f4f6;

            color: #1f2937;

        }



        .override-modal-body {

            margin-bottom: 1.5rem;

        }



        .override-modal-buttons {

            display: flex;

            gap: 1rem;

            justify-content: flex-end;

        }



        .override-modal-btn {

            padding: 0.5rem 1rem;

            border-radius: 6px;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.2s;

        }



        .override-modal-btn-primary {

            background: var(--primary);

            color: white;

            border: none;

        }



        .override-modal-btn-secondary {

            background: #6b7280;

            color: white;

            border: none;

        }



        .override-modal-btn:hover {

            opacity: 0.9;

            transform: translateY(-1px);

        }



        @keyframes fadeIn {

            from { opacity: 0; }

            to { opacity: 1; }

        }



        @keyframes slideIn {

            from { transform: translateY(-50px); opacity: 0; }

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

        }



        /* Premium Estimate Modal Styles */

        .premium-estimate-modal {

            display: none;

            position: fixed;

            z-index: 10000;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(30, 41, 59, 0.85) 100%);

            backdrop-filter: blur(8px);

            animation: fadeInPremium 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        }



        .premium-estimate-content {

            background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);

            margin: 3% auto;

            padding: 0;

            border-radius: 24px;

            box-shadow: 

                0 25px 50px -12px rgba(0, 0, 0, 0.25),

                0 0 0 1px rgba(255, 255, 255, 0.05),

                inset 0 1px 0 rgba(255, 255, 255, 0.1);

            width: 90%;

            max-width: 850px;

            min-height: 600px;

            position: relative;

            animation: slideInPremium 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

            overflow: hidden;

        }



        /* Premium Document Header */

        .premium-estimate-header {

            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

            padding: 2.5rem 3rem 2rem;

            border-radius: 24px 24px 0 0;

            position: relative;

            overflow: hidden;

        }



        .premium-estimate-header::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="white" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');

            opacity: 0.1;

        }



        .premium-estimate-title {

            color: white;

            font-size: 2.25rem;

            font-weight: 300;

            letter-spacing: -0.025em;

            margin: 0 0 0.5rem 0;

            position: relative;

            z-index: 1;

        }



        .premium-estimate-subtitle {

            color: rgba(255, 255, 255, 0.85);

            font-size: 1rem;

            font-weight: 400;

            position: relative;

            z-index: 1;

        }



        /* Premium Document Body */

        .premium-estimate-body {

            padding: 3rem;

            background: white;

        }



        /* Premium Typography Hierarchy */

        .premium-section-title {

            font-size: 1.375rem;

            font-weight: 600;

            color: #1e293b;

            margin: 0 0 1.5rem 0;

            padding-bottom: 0.75rem;

            border-bottom: 2px solid #e2e8f0;

            position: relative;

        }



        .premium-section-title::after {

            content: '';

            position: absolute;

            bottom: -2px;

            left: 0;

            width: 60px;

            height: 2px;

            background: linear-gradient(90deg, var(--primary), var(--primary-dark));

        }



        /* Premium Service Items */

        .premium-service-list {

            background: #fafbfc;

            border-radius: 16px;

            padding: 1.5rem;

            margin-bottom: 2rem;

            border: 1px solid #e2e8f0;

        }



        .premium-service-item {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            padding: 1rem 0;

            border-bottom: 1px solid rgba(226, 232, 240, 0.5);

            transition: background-color 0.2s ease;

        }



        .premium-service-item:last-child {

            border-bottom: none;

        }



        .premium-service-item:hover {

            background: rgba(59, 130, 246, 0.02);

        }



        .premium-service-details {

            flex: 1;

        }



        .premium-service-name {

            font-size: 1rem;

            font-weight: 600;

            color: #1e293b;

            margin-bottom: 0.25rem;

            line-height: 1.4;

        }



        .premium-service-description {

            font-size: 0.875rem;

            color: #64748b;

            line-height: 1.5;

        }



        .premium-service-price {

            font-size: 1.125rem;

            font-weight: 700;

            color: var(--primary);

            margin-left: 1rem;

            text-align: right;

        }



        /* Premium Pricing Summary */

        .premium-pricing-summary {

            background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);

            border-radius: 16px;

            padding: 2rem;

            border: 1px solid #e2e8f0;

            margin-top: 2rem;

        }



        .premium-pricing-row {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 0.75rem 0;

            font-size: 1rem;

        }



        .premium-pricing-row.subtotal {

            color: #64748b;

            border-bottom: 1px solid #e2e8f0;

        }



        .premium-pricing-row.total {

            font-size: 1.5rem;

            font-weight: 700;

            color: #1e293b;

            border-top: 2px solid var(--primary);

            padding-top: 1rem;

            margin-top: 0.5rem;

        }



        .premium-total-amount {

            color: var(--primary);

            font-size: 1.75rem;

        }



        /* Premium Property Information */

        .premium-property-info {

            background: white;

            border: 1px solid #e2e8f0;

            border-radius: 12px;

            padding: 1.5rem;

            margin-bottom: 2rem;

        }



        .premium-property-detail {

            display: flex;

            align-items: center;

            margin-bottom: 0.75rem;

            font-size: 0.875rem;

        }



        .premium-property-detail:last-child {

            margin-bottom: 0;

        }



        .premium-property-icon {

            width: 16px;

            margin-right: 0.75rem;

            color: var(--primary);

        }



        .premium-property-label {

            font-weight: 600;

            color: #374151;

            min-width: 120px;

        }



        .premium-property-value {

            color: #1f2937;

        }



        /* Premium Action Buttons */

        .premium-action-buttons {

            display: flex;

            gap: 1rem;

            justify-content: flex-end;

            padding: 2rem 3rem;

            background: #fafbfc;

            border-radius: 0 0 24px 24px;

            border-top: 1px solid #e2e8f0;

        }



        .premium-btn {

            padding: 0.875rem 2rem;

            border-radius: 12px;

            font-weight: 600;

            font-size: 0.875rem;

            cursor: pointer;

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            border: none;

            display: flex;

            align-items: center;

            gap: 0.5rem;

            position: relative;

            overflow: hidden;

        }



        .premium-btn-primary {

            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

            color: white;

            box-shadow: 0 4px 14px 0 rgba(0, 82, 204, 0.3);

        }



        .premium-btn-primary:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px 0 rgba(0, 82, 204, 0.4);

        }



        .premium-btn-secondary {

            background: white;

            color: #374151;

            border: 1.5px solid #d1d5db;

        }



        .premium-btn-secondary:hover {

            background: #f9fafb;

            border-color: var(--primary);

            color: var(--primary);

        }



        /* Premium Animations */

        @keyframes fadeInPremium {

            from { 

                opacity: 0;

                backdrop-filter: blur(0px);

            }

            to { 

                opacity: 1;

                backdrop-filter: blur(8px);

            }

        }



        @keyframes slideInPremium {

            from { 

                transform: translateY(-30px) scale(0.96);

                opacity: 0;

            }

            to { 

                transform: translateY(0) scale(1);

                opacity: 1;

            }

        }



        /* Premium Responsive Design */

        @media (max-width: 768px) {

            .premium-estimate-content {

                margin: 1% auto;

                width: 95%;

                border-radius: 16px;

            }



            .premium-estimate-header {

                padding: 2rem 1.5rem 1.5rem;

                border-radius: 16px 16px 0 0;

            }



            .premium-estimate-title {

                font-size: 1.875rem;

            }



            .premium-estimate-body {

                padding: 2rem 1.5rem;

            }



            .premium-action-buttons {

                padding: 1.5rem;

                flex-direction: column;

            }



            .premium-btn {

                width: 100%;

                justify-content: center;

            }



            .premium-service-item {

                flex-direction: column;

                gap: 0.5rem;

            }



            .premium-service-price {

                margin-left: 0;

                text-align: left;

            }

        }



        /* Compact Travel Mode Buttons */

        .compact-mode-buttons {

            display: flex;

            justify-content: center;

            gap: 0.5rem;

        }



        .compact-mode-btn {

            font-size: 0.7rem;

            padding: 0.25rem 0.5rem;

            border: 1px solid #d1d5db;

            background: white;

            color: #6b7280;

            border-radius: 12px;

            cursor: pointer;

            transition: all 0.2s;

            font-weight: 500;

            min-width: 60px;

        }



        .compact-mode-btn:hover {

            border-color: var(--primary);

            color: var(--primary);

            background: #f8faff;

        }



        .compact-mode-btn.active {

            background: var(--primary);

            color: white;

            border-color: var(--primary);

        }



        .compact-travel-calc {

            font-family: 'Segoe UI', system-ui, sans-serif;

            letter-spacing: 0.025em;

        }

        

        /* Travel Controls Section */

        .travel-controls-section {

            display: flex;

            align-items: center;

            gap: 1rem;

        }

        

        .travel-toggle-wrapper {

            display: flex;

            align-items: center;

            gap: 0.5rem;

        }

        

        .travel-checkbox {

            display: none;

        }

        

        .travel-toggle-label {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            cursor: pointer;

            user-select: none;

        }

        

        .toggle-slider {

            position: relative;

            width: 44px;

            height: 22px;

            background: #cbd5e1;

            border-radius: 22px;

            transition: all 0.3s ease;

        }

        

        .toggle-slider::before {

            content: '';

            position: absolute;

            top: 2px;

            left: 2px;

            width: 18px;

            height: 18px;

            background: white;

            border-radius: 50%;

            transition: all 0.3s ease;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

        }

        

        .travel-checkbox:checked + .travel-toggle-label .toggle-slider {

            background: var(--primary);

        }

        

        .travel-checkbox:checked + .travel-toggle-label .toggle-slider::before {

            transform: translateX(22px);

        }

        

        .toggle-text {

            font-size: 0.8rem;

            font-weight: 500;

            color: #475569;

        }

        

        .travel-rate-input-wrapper {

            display: flex;

            align-items: center;

            background: white;

            border: 1px solid #e2e8f0;

            border-radius: 8px;

            padding: 0 0.75rem;

            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

        }

        

        .currency-symbol,

        .rate-unit {

            font-size: 0.8rem;

            font-weight: 500;

            color: #64748b;

        }

        

        .travel-rate-input {

            border: none;

            outline: none;

            width: 50px;

            padding: 0.5rem 0.25rem;

            text-align: center;

            font-size: 0.875rem;

            font-weight: 600;

            color: #1e293b;

        }

        

        /* Distance Display */

        .travel-distance-display {

            padding: 1rem 1.25rem;

            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);

            border-top: 1px solid #f1f5f9;

        }

        

        .distance-info {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        

        .distance-details {

            display: flex;

            align-items: center;

            gap: 0.5rem;

        }

        

        .distance-marker {

            color: var(--primary);

            font-size: 0.8rem;

        }

        

        .distance-text {

            font-size: 0.875rem;

            font-weight: 600;

            color: #1e293b;

        }

        

        .distance-subtext {

            font-size: 0.75rem;

            color: #64748b;

        }

        

        .charge-summary {

            display: flex;

            align-items: center;

            gap: 0.5rem;

        }

        

        .charge-label {

            font-size: 0.8rem;

            font-weight: 500;

            color: #475569;

        }

        

        .charge-amount {

            font-size: 1rem;

            font-weight: 700;

            color: var(--primary);

        }

        

        .status-badge {

            font-size: 0.7rem;

            font-weight: 600;

            padding: 0.25rem 0.5rem;

            border-radius: 12px;

            background: #10b981;

            color: white;

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }

        

        /* Travel Mode Card */

        .travel-mode-card {

            padding: 1rem 1.25rem;

            background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);

            border-top: 1px solid #f1f5f9;

        }

        

        .travel-calculation-summary {

            margin-bottom: 1rem;

        }

        

        .calculation-display {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            padding: 0.75rem 1rem;

            background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);

            border: 1px solid #e2e8f0;

            border-radius: 8px;

        }

        

        .calc-icon {

            color: var(--primary);

            font-size: 0.8rem;

        }

        

        .calc-breakdown {

            font-size: 0.875rem;

            color: #475569;

            font-weight: 500;

        }

        

        .calc-total {

            font-size: 0.95rem;

            font-weight: 700;

            color: var(--primary);

        }

        

        .mode-indicator {

            font-size: 0.75rem;

            color: #64748b;

            font-style: italic;

            margin-left: 0.5rem;

        }

        

        /* Mode Selector */

        .travel-mode-selector {

            display: flex;

            flex-direction: column;

            gap: 0.75rem;

        }

        

        .mode-options {

            display: flex;

            gap: 0.75rem;

        }

        

        .mode-option {

            flex: 1;

            cursor: pointer;

            user-select: none;

        }

        

        .mode-option input[type="radio"] {

            display: none;

        }

        

        .mode-option-content {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            padding: 0.75rem 1rem;

            background: white;

            border: 2px solid #e2e8f0;

            border-radius: 8px;

            font-size: 0.875rem;

            font-weight: 500;

            color: #475569;

            transition: all 0.3s ease;

        }

        

        .mode-option-content i {

            font-size: 0.8rem;

        }

        

        .mode-option input[type="radio"]:checked + .mode-option-content {

            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

            border-color: var(--primary);

            color: white;

            box-shadow: 0 2px 8px rgba(var(--glow-color-rgb), 0.2);

        }

        

        .mode-option:hover .mode-option-content {

            border-color: var(--primary);

            background: #f8fafc;

        }

        

        .mode-option input[type="radio"]:checked + .mode-option-content:hover {

            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

        }

        

        .mode-explanation {

            text-align: center;

            font-size: 0.75rem;

            color: #64748b;

            font-style: italic;

            padding: 0.5rem;

            background: #f8fafc;

            border-radius: 6px;

            border: 1px solid #f1f5f9;

        }

        

        .quote-actions {

            display: flex;

            flex-wrap: wrap;

            gap: 0.5rem;

            margin-top: 1rem;

        }

        

        .btn-compact {

            padding: 0.5rem 1rem;

            font-size: 0.875rem;

            font-weight: 500;

            border-radius: 6px;

            border: none;

            cursor: pointer;

            transition: all 0.2s;

            display: flex;

            align-items: center;

            gap: 0.25rem;

        }

        

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

        .btn-primary:hover { background: var(--primary-dark); }

        

        .btn-secondary { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); }

        .btn-secondary:hover { background: var(--primary); color: white; }

        

        .btn-success { background: var(--success-color); color: white; }

        .btn-success:hover { background: var(--success-dark); }

        

        .btn-warning { background: var(--warning-color); color: white; }

        .btn-warning:hover { background: var(--warning-dark); }

        

        .btn-neutral { background: var(--neutral-color); color: white; }

        .btn-neutral:hover { background: var(--neutral-dark); }

        

        .btn-purple { background: #7c3aed; color: white; }

        .btn-purple:hover { background: #6d28d9; }

        

        .btn-orange { background: #ea580c; color: white; }

        .btn-orange:hover { background: #c2410c; }

        

        .btn-gray { background: #6b7280; color: white; }

        .btn-gray:hover { background: #4b5563; }

        

        /* Floating Zillow Sidebar */

        .zillow-sidebar {

            position: fixed;

            top: 0;

            right: -400px;

            width: var(--sidebar-width);

            height: 100vh;

            background: white;

            box-shadow: -4px 0 20px rgba(0,0,0,0.15);

            z-index: 9999;

            transition: right 0.3s ease-in-out;

            display: flex;

            flex-direction: column;

            overflow: hidden;

        }

        

        .zillow-sidebar iframe {

            width: 100% !important;

            height: 600px !important;

            max-height: 600px !important;

            min-height: 400px;

            border: none;

        }

        

        #zillowEmbed {

        }



        /* Overlay to block Claim Home and Get Cash Offer buttons */

        .zillow-button-blocker {

            position: absolute;

            top: 0;

            right: 0;

            width: 200px;

            height: 80px;

            background: white;

            z-index: 10000;

            pointer-events: all;

        }



        .zillow-bottom-blocker {

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            height: 100px;

            background: white;

            z-index: 10000;

            pointer-events: all;

            flex: 1;

            flex-grow: 1;

            overflow: hidden;

            position: relative;

            height: 100%;

        }

        

        .zillow-sidebar.show {

            right: 0;

            opacity: 1;

            visibility: visible;

        }

        

        .zillow-header {

            padding: 1rem;

            border-bottom: 1px solid #e5e7eb;

            background: #f8fafc;

            display: flex;

            align-items: center;

            justify-content: between;

        }

        

        .zillow-header h3 {

            font-size: 0.875rem;

            font-weight: 600;

            margin: 0;

            color: #1f2937;

        }

        

        .zillow-close {

            background: #dc2626;

            border: none;

            font-size: 1.25rem;

            color: white;

            cursor: pointer;

            padding: 0.5rem;

            border-radius: 6px;

            transition: background 0.2s;

        }

        

        .zillow-close:hover {

            background: #b91c1c;

            color: white;

        }

        

        .zillow-content {

            flex: 1;

            overflow-y: auto;

            padding: 0.5rem;

        }

        

        .zillow-toggle {

            position: fixed;

            top: 50%;

            right: 1rem;

            transform: translateY(-50%);

            background: #dc2626 !important;

            color: white !important;

            border: 3px solid white !important;

            width: 60px;

            height: 60px;

            border-radius: 50%;

            cursor: pointer;

            z-index: 999;

            box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);

            transition: all 0.2s;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.5rem;

        }



        .zillow-toggle:hover {

            background: #b91c1c !important;

            transform: translateY(-50%) scale(1.15);

            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6);

        }

        

        .zillow-toggle.hidden {

            right: calc(var(--sidebar-width) + 1rem);

        }

        

        .hidden {

            display: none !important;

        }

        

        /* Mobile Zillow Overlay */

        .zillow-mobile-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            z-index: 9998;

            display: none;

        }

        

        /* Mobile Property Button */

        .property-listing-btn {

            display: none;

            width: 100%;

            padding: 0.75rem;

            background: #0052CC;

            color: white;

            border: none;

            border-radius: 8px;

            font-weight: 600;

            margin-top: 0.5rem;

            cursor: pointer;

            transition: all 0.2s;

        }

        

        .property-listing-btn:hover {

            background: #0747A6;

        }

        

        /* Responsive */

        @media (max-width: 768px) {

            .main-container.with-sidebar {

                margin-right: 0;

            }

            

            .zillow-sidebar {

                width: 100%;

                right: -100%;

                z-index: 9999;

            }

            

            .zillow-sidebar.show ~ .zillow-mobile-overlay {

                display: block;

            }

            

            .zillow-toggle {

                display: none !important;

            }

            

            .property-listing-btn {

                display: block;

            }

            

            .zillow-close {

                font-size: 1.5rem !important;

                padding: 0.5rem !important;

                background: #ef4444 !important;

                color: white !important;

                border-radius: 50% !important;

                width: 40px;

                height: 40px;

                display: flex;

                align-items: center;

                justify-content: center;

            }

            

            .zillow-close:hover {

                background: #dc2626 !important;

            }

            

            .zillow-header {

                padding: 1.5rem 1rem !important;

                justify-content: space-between !important;

            }

            

            .zillow-header h3 {

                font-size: 1rem !important;

                font-weight: 700 !important;

            }

            

            /* Add mobile instruction text */

            .zillow-header::after {

                content: "Tap X to close or swipe right →";

                font-size: 0.75rem;

                color: #6b7280;

                display: block;

                margin-top: 0.25rem;

            }

            

            .form-grid {

                grid-template-columns: 1fr;

            }

            

            .services-grid {

                grid-template-columns: 1fr;

            }

        }

        

        /* Agreement Review Styles */

        .agreement-review-container {

            max-width: 100%;

        }

        

        .agreement-section {

            transition: all 0.2s ease;

        }

        

        .agreement-section:hover {

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        }

        

        .agreement-preview {

            background: #fafafa;

            border-radius: 6px;

            font-family: Georgia, serif;

        }

        

        .agreement-preview h1, .agreement-preview h2, .agreement-preview h3 {

            color: var(--primary);

            margin-top: 1.5rem;

            margin-bottom: 0.5rem;

        }

        

        .agreement-preview h1 { font-size: 1.25rem; }

        .agreement-preview h2 { font-size: 1.1rem; }

        .agreement-preview h3 { font-size: 1rem; }

        

        .agreement-preview p {

            margin-bottom: 0.75rem;

            text-align: justify;

        }

        

        .agreement-preview strong {

            color: #1f2937;

        }

        

        .agreement-editor textarea {

            font-family: 'Courier New', monospace;

            font-size: 0.9rem;

            line-height: 1.4;

        }

        

        .agreement-editor textarea:focus {

            border-color: var(--primary) !important;

            box-shadow: 0 0 0 3px rgba(var(--glow-color-rgb), 0.1) !important;

        }

        

        /* Tailwind-like utility classes for compatibility */

        .hidden { display: none !important; }

        .flex { display: flex; }

        .justify-between { justify-content: space-between; }

        .justify-center { justify-content: center; }

        .items-center { align-items: center; }

        .gap-2 { gap: 0.5rem; }

        .gap-3 { gap: 0.75rem; }

        .mb-2 { margin-bottom: 0.5rem; }

        .mb-4 { margin-bottom: 1rem; }

        .mb-6 { margin-bottom: 1.5rem; }

        .mt-3 { margin-top: 0.75rem; }

        .mt-6 { margin-top: 1.5rem; }

        .mr-1 { margin-right: 0.25rem; }

        .mr-2 { margin-right: 0.5rem; }

        .p-4 { padding: 1rem; }

        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }

        .px-4 { padding-left: 1rem; padding-right: 1rem; }

        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

        .py-8 { padding-top: 2rem; padding-bottom: 2rem; }

        .text-sm { font-size: 0.875rem; }

        .text-lg { font-size: 1.125rem; }

        .text-xl { font-size: 1.25rem; }

        .text-2xl { font-size: 1.5rem; }

        .text-4xl { font-size: 2.25rem; }

        .font-semibold { font-weight: 600; }

        .font-bold { font-weight: 700; }

        .text-center { text-align: center; }

        .text-gray-500 { color: #6b7280; }

        .text-gray-600 { color: #4b5563; }

        .text-gray-700 { color: #374151; }

        .text-gray-800 { color: #1f2937; }

        .text-blue-600 { color: #2563eb; }

        .text-red-500 { color: #ef4444; }

        .text-yellow-500 { color: #eab308; }

        .text-white { color: white; }

        .bg-gray-50 { background-color: #f9fafb; }

        .bg-gray-500 { background-color: #6b7280; }

        .bg-gray-600 { background-color: #4b5563; }

        .bg-blue-600 { background-color: #2563eb; }

        .bg-blue-700 { background-color: #1d4ed8; }

        .border { border-width: 1px; }

        .border-gray-200 { border-color: #e5e7eb; }

        .border-gray-300 { border-color: #d1d5db; }

        .rounded { border-radius: 0.25rem; }

        .rounded-lg { border-radius: 0.5rem; }

        .overflow-hidden { overflow: hidden; }

        .overflow-y-auto { overflow-y: auto; }

        .max-h-64 { max-height: 16rem; }

        .w-full { width: 100%; }

        .h-64 { height: 16rem; }

        .resize-vertical { resize: vertical; }

        .hover\:bg-gray-50:hover { background-color: #f9fafb; }

        .hover\:bg-gray-600:hover { background-color: #4b5563; }

        .hover\:bg-gray-700:hover { background-color: #374151; }

        .hover\:bg-blue-700:hover { background-color: #1d4ed8; }

        .hover\:text-gray-700:hover { color: #374151; }

        .hover\:text-gray-800:hover { color: #1f2937; }