diff --git a/README.md b/README.md deleted file mode 100644 index ee33814..0000000 --- a/README.md +++ /dev/null @@ -1,93 +0,0 @@ -# 🏠 Property Brochure Generator - -Professional PDF generation system for real estate properties with Salesforce integration. - -## 🚀 **Quick Start** - -### **1. Deploy LWC to Salesforce** -```bash -chmod +x deploy-lwc-production.sh -./deploy-lwc-production.sh -``` - -### **2. Deploy PDF API to Your Server** -```bash -cd python-pdf-generator -python3 -m venv venv -source venv/bin/activate -pip install -r requirements.txt -python3 api_server.py -``` - -### **3. Update LWC with Your API URL** -Edit these files with your actual server IP: - -**LWC JavaScript:** -```javascript -// force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js -pdfApiBaseUrl = 'https://YOUR-ACTUAL-IP:8000/api'; -``` - -**Apex Controller:** -```apex -// force-app/main/default/classes/PropertyTemplateController.cls -String apiEndpoint = 'https://YOUR-ACTUAL-IP:8000/api/generate-pdf'; -``` - -**Production Config:** -```javascript -// force-app/main/default/lwc/propertyTemplateSelector/production-config.js -PDF_API_BASE_URL: 'https://YOUR-ACTUAL-IP:8000/api' -``` - -## 📁 **Project Structure** - -``` -├── force-app/ # Salesforce LWC Components -│ └── main/default/ -│ ├── lwc/propertyTemplateSelector/ # Main LWC Component -│ ├── classes/PropertyTemplateController.cls # Apex Controller -│ └── objects/ # Custom Objects -├── python-pdf-generator/ # PDF Generation API -│ ├── api_server.py # FastAPI Server -│ ├── property_pdf_generator.py # PDF Generation Logic -│ └── requirements.txt # Python Dependencies -├── deploy-lwc-production.sh # LWC Deployment Script -└── README.md # This File -``` - -## 🔧 **Features** - -- **5-Step Wizard**: Template → Property → Details → Preview → Download -- **Multiple Templates**: 1-page, 3-page, 5-page, Luxury, Modern -- **Real-time Preview**: Instant customization updates -- **Image Management**: Multiple images with room names -- **Salesforce Integration**: Direct access to pcrm__Property__c data -- **Responsive Design**: Works on all devices - -## 📊 **API Endpoints** - -- **Base URL**: `https://YOUR-IP:8000/api` -- **Preview**: `POST /preview` -- **Generate PDF**: `POST /generate-pdf` -- **Health Check**: `GET /health` -- **Templates**: `GET /templates` - -## 🔒 **Security** - -- Configure CORS for your Salesforce domain -- Use HTTPS in production -- Implement authentication if needed -- Configure firewall for port 8000 - -## 📞 **Support** - -For issues or questions, check the deployment logs and ensure: -- Salesforce CLI is installed -- Python dependencies are installed -- API server is running on your IP -- LWC has correct API URL - ---- - -**🎯 Production-ready system for generating professional property brochures!** \ No newline at end of file diff --git a/force-app/main/default/classes/PDFGenerationProxy.cls b/force-app/main/default/classes/PDFGenerationProxy.cls index c723019..513cbaa 100644 --- a/force-app/main/default/classes/PDFGenerationProxy.cls +++ b/force-app/main/default/classes/PDFGenerationProxy.cls @@ -1,7 +1,7 @@ public with sharing class PDFGenerationProxy { @AuraEnabled - public static String generatePDFFromHTML(String htmlContent) { + public static String generatePDFFromHTML(String htmlContent, String pageSize) { try { // Prepare the request Http http = new Http(); @@ -10,17 +10,23 @@ public with sharing class PDFGenerationProxy { request.setMethod('POST'); request.setHeader('Content-Type', 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'); - // Create multipart form data + // Create multipart form data with page size String boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW'; String body = ''; body += '--' + boundary + '\r\n'; body += 'Content-Disposition: form-data; name="input"; filename="template.html"\r\n'; body += 'Content-Type: text/html\r\n\r\n'; body += htmlContent + '\r\n'; + body += '--' + boundary + '\r\n'; + body += 'Content-Disposition: form-data; name="pageSize"\r\n\r\n'; + body += (pageSize != null ? pageSize : 'A4') + '\r\n'; + body += '--' + boundary + '\r\n'; + body += 'Content-Disposition: form-data; name="maxSize"\r\n\r\n'; + body += '50000000\r\n'; // 50MB size limit body += '--' + boundary + '--\r\n'; request.setBody(body); - request.setTimeout(120000); // 2 minutes timeout + request.setTimeout(120000); // 2 minutes timeout (Salesforce maximum) // Make the callout HttpResponse response = http.send(request); @@ -43,7 +49,7 @@ public with sharing class PDFGenerationProxy { try { // Test with simple HTML String testHtml = 'Test

Test PDF Generation

'; - return generatePDFFromHTML(testHtml); + return generatePDFFromHTML(testHtml, 'A4'); } catch (Exception e) { throw new AuraHandledException('API test failed: ' + e.getMessage()); } diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css deleted file mode 100644 index 2c526d5..0000000 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css +++ /dev/null @@ -1,8133 +0,0 @@ -.property-brochure-generator { - /* International Standard Font Stack - 2024 Best Practices */ - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, 'Roboto', 'Helvetica Neue', Arial, sans-serif; - background: - radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%), - linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 50%, #cbd5e1 100%); - min-height: 100vh; - padding: 0; - margin: 0; - /* Industry Standard Base Font Size - 16px (1rem) */ - font-size: 1rem; - /* Optimal Line Height for Readability (WCAG AA) */ - line-height: 1.5; - /* Modern Letter Spacing for Digital Displays */ - letter-spacing: -0.011em; - /* Advanced Typography Features */ - font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1; - font-variation-settings: 'slnt' 0; - font-optical-sizing: auto; - /* High-DPI Display Optimization */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -/* Header Section */ -.header-section { - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), - linear-gradient(135deg, #4f46e5 0%, #7c3aed 25%, #ec4899 75%, #f97316 100%); - padding: 4rem 2rem; - text-align: center; - margin-bottom: 0; - position: relative; - overflow: hidden; - border-radius: 24px; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(79, 70, 229, 0.15), - 0 20px 60px rgba(124, 58, 237, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} - - - - - - - -.header-content { - max-width: 1200px; - margin: 0 auto; - position: relative; - z-index: 3; -} - - - - - -/* Beautiful Purple Gradient Header for All Steps */ -.step-header-gradient { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 0 0 20px 20px; - padding: 40px 30px; - margin: 0 0 30px 0; - text-align: center; - box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); - position: relative; - overflow: hidden; -} - -.step-header-gradient::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - pointer-events: none; -} - -.main-title { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - /* International Standard: Display Large (3rem = 48px) */ - font-size: 3rem; - font-weight: 700; - margin: 0 0 1rem 0; - /* Optimal Letter Spacing for Large Headings */ - letter-spacing: -0.025em; - position: relative; - z-index: 3; - /* WCAG AA Compliant Line Height for Headings */ - line-height: 1.2; - color: white; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - /* Variable Font Weight for Modern Browsers */ - font-variation-settings: 'wght' 700; -} - - - - - -.subtitle { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - /* International Standard: Title Medium (1.25rem = 20px) */ - font-size: 1.25rem; - font-weight: 400; - margin: 0; - position: relative; - z-index: 3; - color: rgba(255, 255, 255, 0.9); - /* Moderate Letter Spacing for Subheadings */ - letter-spacing: 0.015em; - text-transform: uppercase; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - /* WCAG AA Line Height */ - line-height: 1.4; - font-variation-settings: 'wght' 400; -} - -.header-features { - display: flex; - justify-content: center; - gap: 1rem; - flex-wrap: wrap; -} - -.feature-badge { - background: rgba(255, 255, 255, 0.2); - padding: 0.5rem 1.5rem; - border-radius: 25px; - font-size: 0.9rem; - font-weight: 500; - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* Error Message */ -.error-message { - background: #fee; - border: 1px solid #fcc; - color: #c33; - padding: 1rem; - margin: 1rem 2rem; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: space-between; -} - -.error-content { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.error-close { - background: none; - border: none; - color: #c33; - font-size: 1.5rem; - cursor: pointer; - padding: 0; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; -} - -/* Step Navigation */ -.step-navigation { - display: flex; - justify-content: center; - gap: 2rem; - padding: 2rem; - background: rgba(255, 255, 255, 0.95); - margin: 0 2rem 0 2rem; - border-radius: 20px; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - margin-top: 0; - margin-bottom: 0; -} - -.step-nav-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - cursor: pointer; - padding: 1rem; - border-radius: 8px; - transition: all 0.3s ease; - min-width: 120px; -} - -.step-nav-item:hover { - background: #f8f9fa; -} - -.step-nav-item.active { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%); - color: white; - transform: translateY(-2px) scale(1.05); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 8px 32px rgba(79, 70, 229, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.step-number { - width: 40px; - height: 40px; - border-radius: 50%; - background: #e9ecef; - color: #6c757d; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 1.1rem; - transition: all 0.3s ease; -} - -.step-nav-item.active .step-number { - background: rgba(255, 255, 255, 0.2); - color: white; -} - -.step-label { - font-size: 0.9rem; - font-weight: 500; - text-align: center; -} - -/* Step Content */ -.step-content { - display: none; - max-width: 1400px; - margin: 0 auto 0 auto; - padding: 0 3rem 2rem 3rem; -} - -.step-content.active { - display: block; - animation: fadeInUp 0.5s ease; -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Elegant Flow Animation */ -@keyframes elegantFlow { - 0% { - background-position: 0% 50%; - } - 25% { - background-position: 50% 25%; - } - 50% { - background-position: 100% 50%; - } - 75% { - background-position: 50% 75%; - } - 100% { - background-position: 0% 50%; - } -} - -.step-header { - text-align: center; - margin-bottom: 3rem; -} - -.step-header h2 { - font-family: Georgia, 'Times New Roman', Times, serif; - font-size: 3.2rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; - letter-spacing: -0.02em; - line-height: 1.2; -} - -.step-header p { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 1.3rem; - color: #6c757d; - margin: 0; - font-weight: 500; - letter-spacing: 0.01em; -} - -/* Template Grid - Enhanced styling with A4 proportions */ -.template-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); - gap: 35px; - padding: 40px 20px; - max-width: 1600px; - margin: 0 auto; -} - -/* Template Cards - Enhanced with A4 proportions and better visibility */ -.template-card { - background: white; - border-radius: 20px; - padding: 20px; /* Further reduced padding to increase content width more */ - cursor: pointer; - transition: all 0.4s ease; - position: relative; - border: 2px solid transparent; - box-shadow: 0 8px 25px rgba(0,0,0,0.12); - overflow: hidden; - min-height: 420px; /* A4-like height */ - display: flex; - flex-direction: column; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - width: 100%; /* Ensure full width usage */ -} - -.template-card:hover { - transform: translateY(-10px); - box-shadow: 0 15px 40px rgba(0,0,0,0.18); - border-color: #667eea; -} - -.template-card.selected { - border-color: #667eea; - box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); - transform: translateY(-6px); -} - -/* Template Heights with A4 proportions */ -.template-tall { - min-height: 800px; /* Increased from 700px */ - padding: 25px 20px; /* Further reduced padding to increase content width more */ -} - -.template-medium { - min-height: 650px; /* Increased from 550px */ - padding: 20px 15px; /* Further reduced padding to increase content width more */ -} - -.template-small { - min-height: 550px; /* Increased from 480px */ - padding: 15px 10px; /* Further reduced padding to increase content width more */ -} - -/* Enhanced Template Content Styles */ -.template-content { - flex: 1; - display: flex; - flex-direction: column; - height: 100%; - color: #333; - line-height: 1.6; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -/* Newsletter Style Template - Enhanced */ -.newsletter-style { - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-style::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 120px; - height: 120px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 50%; - transform: translate(30px, -30px); - opacity: 0.1; - z-index: 0; -} - -.newsletter-style > * { - position: relative; - z-index: 1; -} - -.newsletter-header h2 { - color: #667eea; - font-size: 22px; - margin-bottom: 25px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-main h1 { - color: #2c3e50; - font-size: 32px; - margin-bottom: 25px; - font-weight: 800; - line-height: 1.2; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-main p { - color: #5a6c7d; - font-size: 17px; - margin-bottom: 30px; - font-weight: 500; - line-height: 1.6; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-section h4 { - color: #667eea; - font-size: 20px; - margin-bottom: 18px; - font-weight: 600; - text-transform: uppercase; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-section p { - color: #6c757d; - font-size: 16px; - margin-bottom: 30px; - line-height: 1.6; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.cta-buttons { - margin-top: auto; -} - -.cta-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - padding: 15px 35px; - border-radius: 25px; - font-size: 17px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.cta-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); -} - -/* Modern Home Template - Enhanced with Image */ -.modern-home-preview { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.modern-home-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100px; - height: 100px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.modern-home-preview > * { - position: relative; - z-index: 1; -} - -.preview-hero-section { - position: relative; - height: 160px; - border-radius: 12px; - overflow: hidden; - margin-bottom: 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-hero-image { - width: 100%; - height: 100%; - background: linear-gradient(45deg, #667eea, #764ba2); - position: relative; -} - -.preview-hero-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.2); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - padding: 30px; -} - -.preview-property-name { - font-size: 22px; - font-weight: 700; - margin-bottom: 10px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-property-address { - font-size: 16px; - opacity: 0.9; - margin-bottom: 12px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-price { - font-size: 24px; - font-weight: 800; - color: #ffd700; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-content-section { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-stats { - display: flex; - justify-content: space-around; - gap: 15px; - margin-bottom: 20px; -} - -.preview-stat { - background: #f8f9fa; - padding: 12px 18px; - border-radius: 20px; - font-size: 15px; - font-weight: 600; - color: #495057; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-description { - background: #f8f9fa; - padding: 20px; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); -} - -.preview-title { - font-size: 18px; - font-weight: 700; - color: #495057; - margin-bottom: 12px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-text { - font-size: 16px; - color: #6c757d; - line-height: 1.5; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 15px; - margin-top: auto; -} - -.feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; -} - -.feature-icon { - font-size: 24px; -} - -.feature-text { - font-size: 14px; - font-weight: 600; - color: #495057; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -/* Asgar1 Template - Enhanced with Image and Fixed Viewport */ -.asgar1-preview { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.asgar1-preview::before { - content: ''; - position: absolute; - top: 20px; - right: 20px; - width: 120px; - height: 120px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.asgar1-preview > * { - position: relative; - z-index: 1; -} - -.preview-hero { - height: auto; - background: none; /* Removed background completely */ - border-radius: 0; - margin-bottom: 30px; - position: relative; - overflow: visible; - box-shadow: none; /* Removed shadow */ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 20px; /* Added top margin to bring title into viewport */ - padding: 20px 0; -} - -.preview-hero-overlay { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - padding: 20px; - width: 100%; - height: 100%; -} - -.preview-property-name { - font-size: 28px; - font-weight: 800; - margin-bottom: 15px; - text-shadow: none; /* Removed shadow since no background */ - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ff8c00; /* Orange color for title */ - line-height: 1.2; - padding: 0 10px; - word-wrap: break-word; - max-width: 100%; - text-transform: uppercase; - letter-spacing: 1px; -} - -.preview-property-address { - font-size: 15px; - opacity: 0.95; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.2; - padding: 0 10px; - word-wrap: break-word; - max-width: 100%; -} - -.preview-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-section { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section-title { - font-size: 17px; - font-weight: 700; - color: #2c3e50; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-text { - font-size: 15px; - color: #6c757d; - line-height: 1.5; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.template-preview { - margin-top: auto; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 15px; -} - -/* Sample Template - Enhanced with Image and Orange Text */ -.sample-preview { - background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.sample-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100px; - height: 100px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.sample-preview > * { - position: relative; - z-index: 1; -} - -.preview-header { - text-align: center; - margin-bottom: 30px; - position: relative; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed from black to beautiful blue-purple gradient */ - border-radius: 12px; - padding: 20px; /* Reduced padding to increase width more */ - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-triangle { - width: 0; - height: 0; - border-left: 20px solid transparent; - border-right: 20px solid transparent; - border-bottom: 26px solid #ff8c00; /* Changed to orange to match text color */ - margin: 0 auto 20px; -} - -.preview-company-name { - font-size: 22px; - font-weight: 800; - color: #ffffff; /* Changed to white as requested */ - line-height: 1.2; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 2px 4px rgba(0,0,0,0.3); -} - -.preview-title { - font-size: 24px; - font-weight: 700; - color: #ffffff !important; /* Changed to white as requested with !important */ - margin: 15px 0; - text-transform: uppercase; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 2px 4px rgba(0,0,0,0.3); -} - -.preview-for-sale { - font-size: 16px; - font-weight: 600; - color: #ffffff; /* Changed to white for better contrast on gradient */ - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 1px 3px rgba(0,0,0,0.4); -} - -.preview-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-section { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #fed7d7; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section-title { - font-size: 17px; - font-weight: 700; - color: #2d3748; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-icons { - display: flex; - justify-content: center; - gap: 20px; - margin-top: 15px; -} - -.preview-icon { - font-size: 28px; - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); -} - -/* Luxury Template - Enhanced with Better Text Visibility */ -.luxury-preview { - background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.luxury-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 120px; - height: 120px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.luxury-preview > * { - position: relative; - z-index: 1; -} - -.preview-luxury-header { - text-align: center; - margin-bottom: 35px; - padding: 20px; /* Reduced padding to increase width */ - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed to blue-purple gradient to match 4th grid */ - border-radius: 12px; - color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - position: relative; - overflow: hidden; -} - -.preview-luxury-header::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - pointer-events: none; -} - -.preview-luxury-logo { - font-size: 24px; - font-weight: 800; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 1px; - position: relative; - z-index: 1; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ffffff; /* All text should be white as shown in image */ - text-shadow: 0 2px 4px rgba(0,0,0,0.3); -} - -.preview-luxury-title { - font-size: 18px; - font-weight: 600; - margin-bottom: 8px; - opacity: 0.95; - position: relative; - z-index: 1; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ffffff; /* Changed to white for better contrast on gradient */ - text-shadow: 0 1px 3px rgba(0,0,0,0.4); -} - -.preview-luxury-subtitle { - font-size: 16px; - opacity: 0.9; - position: relative; - z-index: 1; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ffffff; /* Changed to white for better contrast on gradient */ - text-shadow: 0 1px 3px rgba(0,0,0,0.4); -} - -.preview-luxury-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-luxury-features { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 15px; - margin-bottom: 20px; -} - -.preview-feature { - background: white; - padding: 15px; - border-radius: 10px; - font-size: 15px; - font-weight: 600; - color: #2d3748; - text-align: center; - border: 1px solid #e2e8f0; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-luxury-description { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #e2e8f0; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #e2e8f0; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section-title { - font-size: 17px; - font-weight: 700; - color: #2d3748; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.template-preview { - margin-top: auto; -} - -/* Selected Indicator - Enhanced */ -.selected-indicator { - position: absolute; - top: 15px; - right: 15px; - background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); - color: white; - padding: 12px 20px; - border-radius: 25px; - font-size: 14px; - font-weight: 600; - display: flex; - align-items: center; - gap: 8px; - box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4); - animation: slideIn 0.3s ease; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.selected-icon { - font-size: 16px; -} - -.selected-text { - text-transform: uppercase; - letter-spacing: 0.5px; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateX(20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -/* Template-specific styling - Exact colors from image with enhanced shadows */ -.template-everkind { - background: #f8f9fa; - border: 1px solid #e9ecef; - box-shadow: 0 6px 20px rgba(0,0,0,0.1); - padding: 35px 30px; -} - -.template-shift { - background: #e8f4fd; - border: 1px solid #d1ecf1; - box-shadow: 0 8px 25px rgba(0,0,0,0.12); - padding: 35px 30px; -} - -.template-saintbarts { - background: #fff5f5; - border: 1px solid #fed7d7; - box-shadow: 0 7px 22px rgba(0,0,0,0.11); - padding: 35px 30px; -} - -.template-learnoy { - background: #f0fff4; - border: 1px solid #c6f6d5; - box-shadow: 0 5px 18px rgba(0,0,0,0.09); - padding: 35px 30px; -} - -.template-leafamp { - background: #faf5ff; - border: 1px solid #e9d8fd; - box-shadow: 0 6px 20px rgba(0,0,0,0.1); - padding: 35px 30px; -} - -.template-coreshift { - background: #fffaf0; - border: 1px solid #feebc8; - box-shadow: 0 7px 22px rgba(0,0,0,0.11); - padding: 35px 30px; -} - -.template-pdf2html { - background: #f0f8ff; - border: 1px solid #b3d9ff; - box-shadow: 0 6px 20px rgba(0,0,0,0.12); - padding: 35px 30px; -} - -/* Template Content Styles */ -.template-content { - flex: 1; - display: flex; - flex-direction: column; - height: 100%; -} - -/* Newsletter Style Template */ -.newsletter-style { - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; -} - -.newsletter-header h2 { - color: #667eea; - font-size: 18px; - margin-bottom: 15px; - font-weight: 600; -} - -.newsletter-main h1 { - color: #333; - font-size: 24px; - font-weight: 700; - margin-bottom: 10px; - line-height: 1.2; -} - -.newsletter-main p { - color: #666; - font-size: 14px; - line-height: 1.4; -} - -/* Real Estate Flyer Preview Styles */ -.real-estate-flyer-preview { - display: flex; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-left { - flex: 1; - display: flex; - flex-direction: column; - gap: 12px; -} - -.preview-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px; - border-radius: 12px; - position: relative; - min-height: 80px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-triangle { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 20px 20px; - border-color: transparent transparent #555 transparent; -} - -.preview-company { - margin-top: 8px; -} - -.preview-company-name { - font-size: 8px; - font-weight: bold; - margin-bottom: 2px; - opacity: 0.9; -} - -.preview-title { - font-size: 14px; - font-weight: bold; - margin: 8px 0 4px 0; - color: #ffffff !important; -} - -.preview-for-sale { - font-size: 8px; - opacity: 0.8; -} - -.preview-section { - background: white; - padding: 8px; - border-radius: 6px; - border: 1px solid #e0e0e0; -} - -.preview-section-title { - color: #667eea; - font-size: 10px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-text { - color: #666; - font-size: 7px; - line-height: 1.3; - margin-bottom: 6px; -} - -.preview-icons { - display: flex; - gap: 8px; - margin-top: 6px; -} - -.preview-icon { - width: 16px; - height: 16px; - background: linear-gradient(135deg, #667eea, #764ba2); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 8px; -} - -.preview-contact { - color: #667eea; - font-size: 8px; - font-weight: bold; -} - -.preview-right { - flex: 1; - display: flex; - flex-direction: column; - gap: 12px; -} - -.preview-image-placeholder { - background: repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 8px 8px; - height: 60px; - display: flex; - align-items: center; - justify-content: center; - color: #999; - font-size: 8px; - border-radius: 6px; - border: 1px solid #e0e0e0; -} - -.preview-price-section { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 12px; - border-radius: 6px; - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.preview-price-label { - font-size: 6px; - opacity: 0.8; - margin-bottom: 4px; -} - -.preview-price { - font-size: 12px; - font-weight: bold; - margin-bottom: 8px; -} - -.preview-benefits { - font-size: 8px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-benefit { - font-size: 6px; - margin-bottom: 3px; - display: flex; - align-items: center; - gap: 4px; -} - -.preview-website { - font-size: 6px; - opacity: 0.8; - text-align: center; - margin-top: auto; -} - -/* Blank Template - Black theme */ -.template-blank { - background: #2c3e50; - border: 1px solid #34495e; - box-shadow: 0 8px 25px rgba(0,0,0,0.2); - padding: 30px 25px; - color: white; -} - -.template-blank .newsletter-style { - color: white; -} - -.template-blank .newsletter-header h2 { - color: #ecf0f1; -} - -.template-blank .newsletter-main h1 { - color: #bdc3c7; -} - -.template-blank .newsletter-section h4 { - color: #ecf0f1; -} - -.template-blank .newsletter-section p { - color: #bdc3c7; -} - -/* Newsletter Style Templates */ -.newsletter-style { - padding: 30px; - font-family: 'Georgia', 'Times New Roman', serif; - color: #2c3e50; - background: white; -} - -.newsletter-header h2 { - font-size: 1.8rem; - font-weight: 700; - margin: 0 0 20px 0; - color: #34495e; - text-transform: uppercase; - letter-spacing: 2px; -} - -.newsletter-main h1 { - font-size: 2.2rem; - font-weight: 300; - margin: 0 0 15px 0; - color: #2c3e50; - line-height: 1.2; -} - -.newsletter-main h3 { - font-size: 1.4rem; - font-weight: 400; - margin: 0 0 25px 0; - color: #7f8c8d; - letter-spacing: 1px; -} - -.newsletter-main .main-text { - font-size: 1.3rem; - font-weight: 400; - margin: 0 0 20px 0; - color: #2c3e50; - line-height: 1.4; -} - -.newsletter-section { - margin-bottom: 25px; -} - -.newsletter-section h4 { - font-size: 1.1rem; - font-weight: 600; - margin: 0 0 12px 0; - color: #34495e; - text-transform: uppercase; - letter-spacing: 1px; -} - -.newsletter-section p { - font-size: 0.95rem; - font-weight: 400; - margin: 0 0 15px 0; - color: #5a6c7d; - line-height: 1.5; -} - -.newsletter-section h5 { - font-size: 1rem; - font-weight: 500; - margin: 0 0 10px 0; - color: #2c3e50; - line-height: 1.3; -} - -/* Call-to-Action Buttons */ -.cta-buttons { - display: flex; - gap: 12px; - flex-wrap: wrap; - margin-top: 15px; -} - -.cta-btn { - background: #2c3e50; - color: white; - border: none; - padding: 10px 16px; - border-radius: 4px; - font-size: 0.85rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.cta-btn:hover { - background: #34495e; - transform: translateY(-1px); -} - -/* Episode Sections */ -.episode { - margin-bottom: 20px; - padding: 15px; - background: #f8f9fa; - border-radius: 6px; - border-left: 3px solid #3498db; -} - -.episode h5 { - margin-bottom: 12px; -} - -/* Destinations */ -.destinations { - display: flex; - gap: 15px; - margin-top: 10px; -} - -.destination { - background: #ecf0f1; - color: #2c3e50; - padding: 8px 16px; - border-radius: 20px; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; -} - -/* Template Content */ -.template-content { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.template-icon { - font-size: 3rem; - text-align: center; - margin-bottom: 1rem; -} - -.template-content h3 { - font-size: 1.8rem; - font-weight: 600; - margin: 0 0 1rem 0; - line-height: 1.2; - text-align: center; -} - -.template-content p { - font-size: 1rem; - margin: 0 0 1.5rem 0; - opacity: 0.9; - line-height: 1.5; - text-align: center; - flex-grow: 1; -} - -.template-meta { - display: flex; - justify-content: center; - gap: 0.5rem; - flex-wrap: wrap; -} - -.category, .style { - background: rgba(255, 255, 255, 0.2); - padding: 0.3rem 0.8rem; - border-radius: 15px; - font-size: 0.8rem; - font-weight: 500; - backdrop-filter: blur(10px); -} - -/* Selected Indicator - Enhanced positioning */ -.selected-indicator { - position: absolute; - top: 20px; - right: 20px; - background: #667eea; - color: white; - padding: 10px 15px; - border-radius: 25px; - font-size: 0.85rem; - font-weight: 600; - display: flex; - align-items: center; - gap: 6px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); - z-index: 100; - opacity: 1; - visibility: visible; - backdrop-filter: blur(10px); -} - -.selected-icon { - font-size: 1.1rem; - color: white; -} - -.selected-text { - color: white; - font-weight: 600; -} - -/* Ensure selected state is visible */ -.template-card.selected .selected-indicator { - opacity: 1; - visibility: visible; - display: flex; -} - -/* Step Actions */ -.step-actions { - display: flex; - justify-content: center; - gap: 1.5rem; - margin-top: 3rem; - margin-bottom: 3rem; - padding: 2rem 0; - position: relative; -} - -.step-actions::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 4px; - background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent); - border-radius: 2px; -} - -.btn { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - padding: 1rem 2.5rem; - border: none; - border-radius: 16px; - /* Standard Button Font Size (Body Medium) */ - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - gap: 0.75rem; - text-decoration: none; - min-width: 140px; - justify-content: center; - /* Optimized Letter Spacing for Buttons */ - letter-spacing: 0.005em; - text-transform: none; - position: relative; - overflow: hidden; - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - will-change: transform, box-shadow; - transform: translateZ(0); - /* Button Line Height Standard */ - line-height: 1.3; - font-variation-settings: 'wght' 500; -} - -.btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); - transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); -} - -.btn:hover::before { - left: 100%; -} - -.btn-primary { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%); - color: white; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(79, 70, 229, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-1px) scale(1.02); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 12px 40px rgba(79, 70, 229, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #f472b6 100%); -} - -.btn-primary:active { - transform: translateY(0) scale(0.98); - transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); -} - -.btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; - transform: none; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); - background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); -} - -.btn-secondary { - background: rgba(255, 255, 255, 0.9); - color: #374151; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -.btn-secondary:hover { - background: rgba(255, 255, 255, 1); - color: #1f2937; - transform: translateY(-1px) scale(1.02); - border: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 2px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 1); -} - -.btn-secondary:active { - transform: translateY(0) scale(0.98); - transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); -} - -.btn-icon { - font-size: 1.1rem; - transition: transform 0.3s ease; -} - -.btn:hover .btn-icon { - transform: translateX(2px); -} - -.btn-secondary:hover .btn-icon { - transform: translateX(-2px); -} - -/* Image Replacement Modal Styles */ -.image-replacement-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease; -} - -.image-replacement-modal { - background: white; - border-radius: 20px; - width: 90%; - max-width: 800px; - max-height: 85vh; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 8px 32px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - animation: slideUp 0.3s ease; -} - -.image-replacement-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem 2rem; - border-bottom: 1px solid #e5e7eb; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 20px 20px 0 0; -} - -.image-replacement-header h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter', sans-serif; -} - -.image-replacement-content { - padding: 2rem; - max-height: 60vh; - overflow-y: auto; -} - -/* Source Tabs */ -.source-tabs { - display: flex; - gap: 0.5rem; - margin-bottom: 2rem; - border-bottom: 2px solid #f1f5f9; -} - -.source-tab { - padding: 0.75rem 1.5rem; - border: none; - background: transparent; - font-family: 'Inter', sans-serif; - font-weight: 500; - color: #6b7280; - cursor: pointer; - border-radius: 8px 8px 0 0; - transition: all 0.3s ease; - position: relative; -} - -.source-tab.active { - color: #4f46e5; - background: rgba(79, 70, 229, 0.05); -} - -.source-tab.active::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - right: 0; - height: 2px; - background: #4f46e5; - border-radius: 1px; -} - -/* Category Navigation for Replacement */ -.category-navigation-replacement { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1.5rem; -} - -.category-btn-replacement { - padding: 0.5rem 1rem; - border: 1px solid #e5e7eb; - background: white; - border-radius: 8px; - font-size: 0.875rem; - font-weight: 500; - color: #374151; - cursor: pointer; - transition: all 0.3s ease; - font-family: 'Inter', sans-serif; -} - -.category-btn-replacement:hover { - background: #f3f4f6; - border-color: #d1d5db; -} - -.category-btn-replacement.active { - background: #4f46e5; - color: white; - border-color: #4f46e5; -} - -/* Image Grid */ -.replacement-image-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 1rem; - max-height: 400px; - overflow-y: auto; - padding: 0.5rem; -} - -.replacement-image-item { - border: 2px solid #e5e7eb; - border-radius: 12px; - overflow: hidden; - cursor: pointer; - transition: all 0.3s ease; - background: white; -} - -.replacement-image-item:hover { - border-color: #4f46e5; - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15); -} - -.replacement-thumbnail { - width: 100%; - height: 120px; - object-fit: cover; - display: block; -} - -.replacement-image-info { - padding: 0.75rem; -} - -.replacement-image-title { - font-size: 0.875rem; - font-weight: 500; - color: #1f2937; - margin-bottom: 0.25rem; - font-family: 'Inter', sans-serif; -} - -.replacement-image-category { - font-size: 0.75rem; - color: #6b7280; - font-family: 'Inter', sans-serif; -} - -/* Local Upload Section */ -.local-upload-section { - text-align: center; -} - -.upload-area { - margin-bottom: 2rem; -} - -.upload-dropzone { - border: 2px dashed #d1d5db; - border-radius: 12px; - padding: 3rem 2rem; - cursor: pointer; - transition: all 0.3s ease; - background: #f9fafb; -} - -.upload-dropzone:hover { - border-color: #4f46e5; - background: #f0f4ff; -} - -.upload-icon { - font-size: 3rem; - margin-bottom: 1rem; -} - -.upload-text h4 { - margin: 0 0 0.5rem 0; - font-size: 1.125rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter', sans-serif; -} - -.upload-text p { - margin: 0.25rem 0; - color: #6b7280; - font-family: 'Inter', sans-serif; -} - -.upload-formats { - font-size: 0.875rem; - color: #9ca3af; -} - -.uploaded-preview { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - margin-top: 1.5rem; -} - -.uploaded-image { - max-width: 200px; - max-height: 200px; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -/* Action Buttons */ -.image-replacement-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e5e7eb; - background: #f9fafb; -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translate(-50%, -50%) translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translate(-50%, -50%) translateY(0) scale(1); - } -} - -/* Action Buttons Section */ -.action-buttons-section { - display: flex; - gap: 0.75rem; - align-items: center; - flex-wrap: wrap; -} - -.action-btn { - min-width: 100px; - padding: 0.75rem 1.5rem; - font-size: 0.8rem; -} - -/* Save/Load/HTML Dialog Styles */ -.save-dialog-overlay, -.load-dialog-overlay, -.html-dialog-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease; -} - -.save-dialog-modal, -.load-dialog-modal, -.html-dialog-modal { - background: white; - border-radius: 20px; - width: 90%; - max-width: 600px; - max-height: 85vh; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 8px 32px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - animation: slideUp 0.3s ease; -} - -.save-dialog-header, -.load-dialog-header, -.html-dialog-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem 2rem; - border-bottom: 1px solid #e5e7eb; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 20px 20px 0 0; -} - -.save-dialog-header h3, -.load-dialog-header h3, -.html-dialog-header h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.save-dialog-content, -.load-dialog-content, -.html-dialog-content { - padding: 2rem; - max-height: 50vh; - overflow-y: auto; -} - -.save-dialog-actions, -.load-dialog-actions, -.html-dialog-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e5e7eb; - background: #f9fafb; -} - -/* Save Dialog Specific Styles */ -.input-group { - margin-bottom: 1.5rem; -} - -.input-label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: #374151; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.template-name-input { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid #d1d5db; - border-radius: 8px; - font-size: 1rem; - font-family: 'Inter Variable', 'Inter', sans-serif; - transition: border-color 0.3s ease, box-shadow 0.3s ease; -} - -.template-name-input:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -/* Load Dialog Specific Styles */ -.saved-templates-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.saved-template-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - border: 1px solid #e5e7eb; - border-radius: 12px; - cursor: pointer; - transition: all 0.3s ease; - background: white; -} - -.saved-template-item:hover { - border-color: #4f46e5; - background: #f0f4ff; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); -} - -.template-info { - flex: 1; -} - -.template-name { - font-weight: 600; - color: #1f2937; - margin-bottom: 0.25rem; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.template-meta { - display: flex; - gap: 1rem; - margin-bottom: 0.5rem; - font-size: 0.875rem; - color: #6b7280; -} - -.template-preview { - font-size: 0.8rem; - color: #9ca3af; - max-width: 300px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.delete-template-btn { - background: none; - border: none; - padding: 0.5rem; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.3s ease; - font-size: 1.2rem; - color: #ef4444; -} - -.delete-template-btn:hover { - background: #fef2f2; -} - -.no-templates { - text-align: center; - padding: 2rem; - color: #6b7280; -} - -.no-templates p { - margin: 0.5rem 0; -} - -/* HTML Dialog Specific Styles */ -.html-dialog-modal { - max-width: 800px; - width: 95%; -} - -.html-preview { - width: 100%; -} - -.html-textarea { - width: 100%; - height: 400px; - padding: 1rem; - border: 1px solid #d1d5db; - border-radius: 8px; - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - font-size: 0.875rem; - line-height: 1.4; - background: #f9fafb; - color: #374151; - resize: vertical; -} - -.html-textarea:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -/* Responsive Design for Professional Mobile Experience */ -@media (max-width: 768px) { - .step-actions { - flex-direction: column; - align-items: center; - gap: 1rem; - padding: 1.5rem 0; - } - - .btn { - min-width: 200px; - padding: 1.2rem 2rem; - font-size: 1rem; - } - - .step-navigation { - gap: 1rem; - padding: 1.5rem; - margin: 0 1rem; - } - - .step-nav-item { - min-width: 100px; - padding: 0.8rem; - } - - .header-section { - padding: 3rem 1.5rem; - border-radius: 16px; - margin: 0 1rem; - } - - .main-title { - font-size: 2.5rem; - } - - .subtitle { - font-size: 1.1rem; - } -} - -@media (max-width: 480px) { - .btn { - min-width: 100%; - padding: 1.2rem 1.5rem; - } - - .step-actions { - padding: 1rem 1rem; - } - - .step-navigation { - flex-direction: column; - align-items: center; - gap: 0.5rem; - } - - .step-nav-item { - width: 100%; - max-width: 200px; - } - - /* Image Replacement Modal Responsive */ - .image-replacement-modal { - width: 95%; - max-height: 90vh; - } - - .image-replacement-header, - .image-replacement-content, - .image-replacement-actions { - padding: 1rem; - } - - .replacement-image-grid { - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 0.75rem; - } - - .category-navigation-replacement { - gap: 0.25rem; - } - - .category-btn-replacement { - padding: 0.4rem 0.8rem; - font-size: 0.8rem; - } - - .upload-dropzone { - padding: 2rem 1rem; - } - - /* Save/Load/HTML Dialog Mobile Responsive */ - .action-buttons-section { - flex-direction: column; - gap: 0.5rem; - } - - .action-btn { - width: 100%; - min-width: auto; - } - - .save-dialog-modal, - .load-dialog-modal, - .html-dialog-modal { - width: 95%; - max-height: 90vh; - } - - .save-dialog-header, - .load-dialog-header, - .html-dialog-header, - .save-dialog-content, - .load-dialog-content, - .html-dialog-content, - .save-dialog-actions, - .load-dialog-actions, - .html-dialog-actions { - padding: 1rem; - } - - .html-textarea { - height: 300px; - font-size: 0.8rem; - } - - .template-meta { - flex-direction: column; - gap: 0.25rem; - } -} - -/* Step 2 Content */ -.step2-content { - display: flex; - flex-direction: column; - gap: 1.5rem; - margin-bottom: 1rem; - max-width: 1400px; - margin: 0 auto 1rem auto; - padding: 0 1rem; -} - -/* Step 2 Grid Row 1 - Property Selection and Market Analysis */ -.step2-grid-row-1 { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem; - margin-bottom: 1.5rem; - align-items: start; -} - -/* Step 2 Grid Row 2 - Property Details Full Width */ -.step2-grid-row-2 { - width: 100%; - margin-bottom: 1rem; -} - -/* Property Details Layout Container */ -.property-details-layout { - background: white; - border-radius: 8px; - padding: 1.5rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border: 1px solid #e1e5e9; - margin-bottom: 1rem; -} - -.property-details-layout h3 { - font-family: Georgia, 'Times New Roman', Times, serif; - font-size: 1.9rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; - text-align: center; - letter-spacing: -0.02em; - line-height: 1.2; -} - -/* Property Details Top Row - Two Columns */ -.property-details-top-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; - margin-bottom: 1.5rem; -} - -/* Property Details Top Left and Right */ -.property-details-top-left, -.property-details-top-right { - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Property Details Bottom Row - Enhanced Layout */ -.property-details-bottom-row { - width: 100%; - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Featured Description Section */ -.featured-description { - background: white; - border: 1px solid #e1e5e9; - padding: 1.5rem; - border-radius: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - margin-bottom: 0.5rem; -} - -.featured-description h5 { - font-size: 1.5rem !important; - color: #667eea !important; - margin-bottom: 2rem !important; - display: flex; - align-items: center; - gap: 0.5rem; -} - -/* Description Field Styling */ -.description-title-field .value.description-title { - font-family: Georgia, 'Times New Roman', Times, serif !important; - font-size: 1.5rem !important; - font-weight: 700 !important; - color: #2c3e50 !important; - line-height: 1.4 !important; - text-align: left !important; - margin-bottom: 1rem; -} - -.description-content-field { - margin-top: 1.5rem; -} - -.description-content-field .value.description-content { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; - font-size: 1.1rem !important; - font-weight: 500 !important; - color: #495057 !important; - line-height: 1.8 !important; - text-align: left !important; - padding: 1.5rem; - background: white; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - white-space: pre-wrap; - word-wrap: break-word; - min-height: 120px; -} - -/* Secondary Information Grid */ -.secondary-info-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; - margin-top: 1rem; -} - -/* Property Section Groups */ -.property-section-group { - background: white; - border-radius: 6px; - padding: 1.5rem; - border: 1px solid #e1e5e9; - margin-bottom: 1rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; -} - -.property-section-group:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -} - -.property-section-group h5 { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.2rem; - font-weight: 700; - color: #2c3e50; - margin: 0 0 1.5rem 0; - text-transform: uppercase; - letter-spacing: 1px; - line-height: 1.3; -} - -/* Simplified Section Styling - All sections have consistent styling */ -.basic-info-section, -.contact-details-section, -.specifications-section, -.pricing-section, -.location-details-section, -.availability-section, -.amenities-section, -.description-section { - border: 1px solid #e1e5e9; -} - -/* Property Grid Layout */ -.property-grid { - display: grid; - grid-template-columns: 1fr; - gap: 0.8rem; -} - -/* Property Field Styling */ -.property-field { - display: flex; - justify-content: space-between; - align-items: flex-start; - padding: 0.8rem 1rem; - background: white; - border-radius: 8px; - border: 1px solid #e9ecef; - transition: all 0.2s ease; -} - -.property-field:hover { - border-color: #667eea; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.property-field .label { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 600; - color: #495057; - font-size: 1.1rem; - min-width: 160px; - margin-right: 1.5rem; - letter-spacing: 0.01em; - line-height: 1.4; -} - -.property-field .value { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: #2c3e50; - font-size: 1.1rem; - font-weight: 500; - text-align: right; - word-break: break-word; - max-width: 250px; - letter-spacing: 0.01em; - line-height: 1.5; -} - -/* Property Description Special Styling */ -.property-description { - display: flex; - flex-direction: column; - gap: 0.8rem; -} - -.property-description .property-field { - flex-direction: column; - align-items: flex-start; - padding: 1rem; -} - -.property-description .property-field .label { - margin-bottom: 0.5rem; - min-width: auto; - margin-right: 0; -} - -.property-description .property-field .value { - text-align: left; - max-width: 100%; - line-height: 1.5; -} - -/* Image Review Section Styling */ -.image-review-section { - background: white; - border-radius: 6px; - padding: 2rem; - margin-top: 1.5rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - border: 1px solid #e1e5e9; -} - -.image-review-section h3 { - font-family: 'Playfair Display', Georgia, serif; - font-size: 2.8rem; - font-weight: 800; - margin: 0 0 1.5rem 0; - color: #2c3e50; - text-align: center; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: -0.02em; - line-height: 1.2; -} - -.image-review-section p { - font-family: 'Inter', sans-serif; - color: #6c757d; - text-align: center; - margin-bottom: 2.5rem; - font-size: 1.2rem; - font-weight: 500; - letter-spacing: 0.01em; - line-height: 1.6; -} - -/* Category Navigation for Step 2 - Industry Standard Design */ -.category-navigation-step2 { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.75rem; - margin-bottom: 2rem; - padding: 1.5rem 2rem; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); - border: 1px solid rgba(226, 232, 240, 0.8); - border-radius: 16px; - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} - -.category-btn-step2 { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); - border: 1px solid rgba(226, 232, 240, 0.6); - color: #475569; - padding: 0.875rem 1.75rem; - border-radius: 12px; - font-size: 0.875rem; - font-weight: 500; - font-variation-settings: 'wght' 500; - cursor: pointer; - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - text-transform: capitalize; - letter-spacing: 0.025em; - position: relative; - overflow: hidden; - min-width: 100px; - text-align: center; - box-shadow: - 0 1px 3px 0 rgba(0, 0, 0, 0.1), - 0 1px 2px 0 rgba(0, 0, 0, 0.06); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -.category-btn-step2::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); - transition: left 0.5s ease; - z-index: 1; -} - -.category-btn-step2:hover::before { - left: 100%; -} - -.category-btn-step2:hover { - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); - border-color: rgba(99, 102, 241, 0.3); - color: #334155; - transform: translateY(-2px); - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06), - 0 10px 15px -3px rgba(99, 102, 241, 0.1); -} - -.category-btn-step2.active { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - border-color: #6366f1; - color: white; - font-weight: 600; - font-variation-settings: 'wght' 600; - transform: translateY(-1px); - box-shadow: - 0 4px 6px -1px rgba(99, 102, 241, 0.4), - 0 2px 4px -1px rgba(99, 102, 241, 0.2), - 0 10px 15px -3px rgba(99, 102, 241, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -.category-btn-step2.active::before { - display: none; -} - -/* Image Display Area for Step 2 - Premium Design */ -.image-display-area-step2 { - background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); - border: 1px solid rgba(226, 232, 240, 0.6); - border-radius: 20px; - padding: 2.5rem; - min-height: 380px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-bottom: 1.5rem; - position: relative; - overflow: hidden; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.image-display-area-step2::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent); -} - -.image-display-area-step2:hover { - transform: translateY(-2px); - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 10px 10px -5px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -.image-container-step2 { - text-align: center; - max-width: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - position: relative; -} - -.property-image-step2 { - max-width: 100%; - max-height: 280px; - width: auto; - border-radius: 16px; - object-fit: cover; - margin-bottom: 1.5rem; - position: relative; - box-shadow: - 0 25px 50px -12px rgba(0, 0, 0, 0.25), - 0 10px 20px -8px rgba(0, 0, 0, 0.1); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid rgba(255, 255, 255, 0.9); -} - -.property-image-step2:hover { - transform: scale(1.02) translateY(-4px); - box-shadow: - 0 35px 60px -12px rgba(0, 0, 0, 0.3), - 0 15px 25px -8px rgba(0, 0, 0, 0.15); -} - -.image-info-step2 { - margin-top: 1.5rem; - padding: 1.5rem 2rem; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%); - border-radius: 16px; - border: 1px solid rgba(226, 232, 240, 0.5); - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - min-width: 300px; -} - -.image-info-step2 h4 { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.25rem; - font-weight: 600; - font-variation-settings: 'wght' 600; - color: #1e293b; - margin: 0 0 0.75rem 0; - letter-spacing: -0.025em; - line-height: 1.4; - text-align: center; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.image-category-step2 { - color: #64748b; - font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; - font-size: 0.875rem; - font-weight: 500; - font-variation-settings: 'wght' 500; - text-transform: uppercase; - letter-spacing: 0.1em; - text-align: center; - padding: 0.5rem 1rem; - background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); - border-radius: 8px; - border: 1px solid rgba(226, 232, 240, 0.6); - display: inline-block; -} - -.no-image-message-step2 { - text-align: center; - color: #64748b; - font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; - font-style: italic; - font-size: 1.125rem; - font-weight: 500; - letter-spacing: 0.025em; - line-height: 1.6; - padding: 3rem 2rem; - background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%); - border-radius: 16px; - border: 2px dashed rgba(203, 213, 225, 0.6); - margin: 2rem 0; -} - -/* Image Navigation for Step 2 - Modern Design */ -.image-navigation-step2 { - display: flex; - justify-content: center; - align-items: center; - gap: 1.5rem; - padding: 1.25rem 2rem; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%); - border-radius: 16px; - margin-top: auto; - border: 1px solid rgba(226, 232, 240, 0.6); - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} - -.nav-btn-step2 { - background: linear-gradient(135deg, #64748b 0%, #475569 100%); - border: none; - color: white; - padding: 0.875rem 1.125rem; - border-radius: 12px; - font-size: 1.125rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - justify-content: center; - min-width: 48px; - height: 48px; - position: relative; - overflow: hidden; - box-shadow: - 0 4px 6px -1px rgba(100, 116, 139, 0.4), - 0 2px 4px -1px rgba(100, 116, 139, 0.2); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.nav-btn-step2::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - transition: left 0.6s ease; -} - -.nav-btn-step2:hover::before { - left: 100%; -} - -.nav-btn-step2:hover:not(:disabled) { - background: linear-gradient(135deg, #475569 0%, #334155 100%); - transform: translateY(-2px) scale(1.05); - box-shadow: - 0 10px 15px -3px rgba(100, 116, 139, 0.4), - 0 4px 6px -2px rgba(100, 116, 139, 0.25); -} - -.nav-btn-step2:active:not(:disabled) { - transform: translateY(0) scale(0.98); - box-shadow: - 0 4px 6px -1px rgba(100, 116, 139, 0.4), - 0 2px 4px -1px rgba(100, 116, 139, 0.2); -} - -.nav-btn-step2:disabled { - background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%); - cursor: not-allowed; - transform: none; - opacity: 0.5; - box-shadow: none; -} - -.nav-btn-step2:disabled::before { - display: none; -} - -.nav-icon-step2 { - font-size: 1.125rem; - line-height: 1; -} - -.image-counter-step2 { - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); - padding: 0.75rem 1.5rem; - border-radius: 12px; - font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; - font-weight: 600; - font-variation-settings: 'wght' 600; - color: #475569; - border: 1px solid rgba(226, 232, 240, 0.8); - box-shadow: - 0 2px 4px -1px rgba(0, 0, 0, 0.1), - 0 1px 2px -1px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - font-size: 0.875rem; - letter-spacing: 0.025em; - min-width: 80px; - text-align: center; -} - -.property-section, .market-analysis-section { - background: white; - padding: 2rem; - border-radius: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - border: 1px solid #e1e5e9; - margin-bottom: 1.5rem; - transition: all 0.2s ease; - height: 100%; - display: flex; - flex-direction: column; -} - -.property-section:hover, .market-analysis-section:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -} - -.property-section h3, .market-analysis-section h3 { - font-family: 'Playfair Display', Georgia, serif; - font-size: 2.2rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; - letter-spacing: -0.01em; - line-height: 1.3; -} - -.property-section p, .market-analysis-section p { - font-family: 'Inter', sans-serif; - color: #6c757d; - margin-bottom: 2rem; - line-height: 1.7; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.01em; -} - -/* Market Analysis Options */ -.market-options { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.checkbox-item { - display: flex; - align-items: center; - gap: 0.8rem; - cursor: pointer; - padding: 1rem; - border-radius: 8px; - transition: all 0.3s ease; - border: 1px solid #e9ecef; - background: #f8f9fa; -} - -.checkbox-item:hover { - background: white; - border-color: #667eea; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.checkbox-item input[type="checkbox"] { - display: none; -} - -.checkmark { - width: 20px; - height: 20px; - border: 2px solid #dee2e6; - border-radius: 4px; - position: relative; - transition: all 0.3s ease; - flex-shrink: 0; -} - -.checkbox-item input[type="checkbox"]:checked + .checkmark { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; -} - -.checkbox-item input[type="checkbox"]:checked + .checkmark::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 14px; - font-weight: bold; -} - -.label-text { - font-family: 'Inter', sans-serif; - font-size: 1.2rem; - color: #2c3e50; - font-weight: 600; - line-height: 1.5; - letter-spacing: 0.01em; -} - -/* Responsive Design for Step 2 */ -@media (max-width: 1200px) { - .step2-grid-row-1 { - grid-template-columns: 1fr; - gap: 2rem; - } - - .property-details-top-row { - grid-template-columns: 1fr; - gap: 2rem; - } -} - -@media (max-width: 768px) { - .step2-content { - padding: 0 1rem; - gap: 2rem; - } - - .property-details-layout { - padding: 1.5rem; - } - - .property-details-layout h3 { - font-size: 2.2rem; - margin-bottom: 2rem; - } - - .image-review-section { - padding: 1.5rem; - } - - .image-review-section h3 { - font-size: 2.2rem; - } - - .category-navigation-step2 { - padding: 1rem 1.5rem; - gap: 0.5rem; - border-radius: 12px; - } - - .category-btn-step2 { - padding: 0.75rem 1.25rem; - font-size: 0.8125rem; - border-radius: 10px; - min-width: 80px; - } - - .image-display-area-step2 { - padding: 1.5rem; - min-height: 320px; - border-radius: 16px; - } - - .property-image-step2 { - max-height: 240px; - border-radius: 12px; - } - - .image-info-step2 { - padding: 1rem 1.5rem; - min-width: 250px; - border-radius: 12px; - } - - .image-info-step2 h4 { - font-size: 1.125rem; - } - - .image-navigation-step2 { - padding: 1rem 1.5rem; - gap: 1rem; - border-radius: 12px; - } - - .nav-btn-step2 { - min-width: 44px; - height: 44px; - padding: 0.75rem 1rem; - border-radius: 10px; - } - - .image-counter-step2 { - padding: 0.625rem 1.25rem; - font-size: 0.8125rem; - border-radius: 10px; - min-width: 70px; - } - - .property-field { - flex-direction: column; - align-items: flex-start; - gap: 0.8rem; - padding: 1rem 1.2rem; - } - - .property-field .label { - min-width: auto; - margin-right: 0; - font-size: 1rem; - } - - .property-field .value { - text-align: left; - max-width: 100%; - font-size: 1rem; - } - - .secondary-info-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .featured-description { - padding: 1.8rem; - } - - .featured-description h5 { - font-size: 1.5rem !important; - } - - .description-title-field .value.description-title { - font-size: 1.4rem !important; - } - - .description-content-field .value.description-content { - font-size: 1.1rem !important; - padding: 1.2rem; - } - - .property-section h3, .market-analysis-section h3 { - font-size: 1.8rem; - } - - .btn { - padding: 1rem 2rem; - font-size: 1rem; - min-width: 140px; - } -} - -.property-dropdown { - width: 100%; - padding: 1rem; - border: 2px solid #e9ecef; - border-radius: 8px; - font-size: 1rem; - background: white; - transition: border-color 0.3s ease; -} - -.property-dropdown:focus { - outline: none; - border-color: #667eea; -} - -/* Editor Container */ -.editor-container { - display: flex; - gap: 20px; - margin-top: 20px; -} - -/* Left Toolbar - Original Layout */ -.editor-toolbar.left { - width: 300px; - flex-shrink: 0; - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - height: fit-content; -} - -.toolbar-section { - margin-bottom: 25px; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 15px; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; - padding-bottom: 5px; -} - -.toolbar-group { - display: flex; - flex-direction: column; - gap: 10px; - margin-bottom: 15px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 10px 15px; - font-size: 13px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 8px; - width: 100%; - box-sizing: border-box; - margin-bottom: 0.5rem; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - -/* Insert Content Section - Fixed Layout */ -.insert-content-section .toolbar-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 5px; -} - -.insert-content-section .toolbar-group:first-child { - grid-template-columns: 1fr 1fr; -} - -.insert-content-section .toolbar-group:last-child { - grid-template-columns: 1fr 1fr; -} - -/* Text Formatting */ -.text-formatting-section .toolbar-group { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; -} - -.text-formatting-section label { - font-size: 12px; - color: #6c757d; - min-width: 80px; -} - -.text-formatting-section select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; - min-width: 120px; - flex: 1; -} - -/* Text Styling */ -.text-styling-section .toolbar-group { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 4px; -} - -.text-styling-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 40px; - font-weight: 600; -} - -/* Text Alignment */ -.text-alignment-section .toolbar-group { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 4px; -} - -.text-alignment-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 40px; -} - -/* Right Editor Area */ -.editor-right { - flex: 1; - background: white; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - min-height: 600px; -} - -/* Preview frame with exact A4 dimensions for accurate PDF generation */ -.preview-frame { - position: relative; - width: 210mm; - height: 297mm; - margin: 0 auto; - padding: 20mm; - border: 2px solid #ddd; - border-radius: 8px; - background: white; - overflow: visible; - box-sizing: border-box; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - transform: scale(0.8); - transform-origin: top center; - /* A4 Content Optimization */ - min-height: 297mm; - max-width: 100%; - word-wrap: break-word; - overflow-wrap: break-word; -} - -/* A4 Content Scaling and Responsiveness */ -.preview-frame * { - max-width: 100%; - box-sizing: border-box; - word-wrap: break-word; - overflow-wrap: break-word; -} - -/* Ensure all content fits within A4 dimensions */ -.preview-frame img, -.preview-frame video, -.preview-frame iframe { - max-width: 100%; - height: auto; - object-fit: contain; -} - -/* A4 Grid Layout Optimization - REMOVED */ - -/* A4 Text Optimization */ -.preview-frame h1 { - font-size: clamp(20px, 4vw, 28px); - line-height: 1.2; - margin-bottom: 15px; -} - -.preview-frame h2 { - font-size: clamp(16px, 3vw, 18px); - line-height: 1.3; - margin-bottom: 12px; -} - -.preview-frame p { - font-size: clamp(12px, 2.5vw, 14px); - line-height: 1.4; - margin-bottom: 10px; -} - -/* A4 page indicator */ -.preview-frame::before { - content: 'A4 Preview (210mm × 297mm)'; - position: absolute; - top: -30px; - left: 50%; - transform: translateX(-50%); - background: #667eea; - color: white; - padding: 5px 15px; - border-radius: 15px; - font-size: 12px; - font-weight: 500; -} - -/* Template Preview Content Styles */ -.preview-left, .preview-right { - flex: 1; - padding: 15px; -} - -.preview-header { - margin-bottom: 20px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px; - border-radius: 12px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-triangle { - width: 0; - height: 0; - border-left: 20px solid #555; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - margin-bottom: 15px; -} - -.preview-company-name { - font-size: 12px; - font-weight: 600; - color: #ffffff; - margin-bottom: 5px; -} - -.preview-title { - font-size: 20px; - font-weight: 700; - color: #ffffff; - margin-bottom: 5px; -} - -.preview-for-sale { - font-size: 14px; - color: #ffffff; - font-weight: 500; -} - -.preview-section { - margin-bottom: 15px; -} - -.preview-section-title { - font-size: 14px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.preview-text { - font-size: 12px; - color: #666; - line-height: 1.4; - margin-bottom: 10px; -} - -.preview-icons { - display: flex; - gap: 8px; -} - -.preview-icon { - font-size: 16px; -} - -.preview-price-section { - text-align: center; - padding: 15px; - background: rgba(255,255,255,0.9); - border-radius: 8px; -} - -.preview-price-label { - font-size: 10px; - color: #666; - margin-bottom: 5px; -} - -.preview-price { - font-size: 18px; - font-weight: 700; - color: #ff6b35; - margin-bottom: 10px; -} - -.preview-benefits { - font-size: 12px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.preview-benefit { - font-size: 11px; - color: #666; - margin-bottom: 5px; -} - -.preview-website { - font-size: 10px; - color: #999; - margin-top: 10px; -} - -.preview-image-placeholder { - background: #f0f0f0; - height: 120px; - display: flex; - align-items: center; - justify-content: center; - color: #999; - font-size: 12px; - border-radius: 8px; - margin-bottom: 15px; -} - -/* A4 Page Break Indicators */ -.a4-page-break { - page-break-before: always; - break-before: page; - height: 0; - margin: 0; - padding: 0; - border: none; - position: relative; -} - -.a4-page-break div { - text-align: center; - color: #999; - font-size: 12px; - margin: 10px 0; - background: #f8f9fa; - padding: 5px; - border-radius: 4px; - border: 1px dashed #ddd; -} - -/* A4 Content Overflow Handling */ -.preview-frame { - overflow-x: hidden; - overflow-y: auto; -} - -/* Ensure content fits within A4 bounds */ -.preview-frame > * { - max-width: 170mm; /* 210mm - 40mm padding */ - margin-left: auto; - margin-right: auto; -} - -/* Additional Template Preview Styles */ -.asgar1-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-hero { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 8px; - margin-bottom: 20px; - text-align: center; -} - -.preview-hero-overlay { - position: relative; -} - -.preview-property-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 5px; -} - -.preview-property-address { - font-size: 14px; - opacity: 0.9; -} - -.preview-content { - flex: 1; -} - -.preview-section { - background: #f8f9fa; - padding: 15px; - border-radius: 8px; - margin-bottom: 15px; -} - -.preview-section-title { - font-size: 14px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.preview-text { - font-size: 12px; - color: #666; - line-height: 1.4; -} - -/* Luxury and Modern Template Styles */ -.luxury-mansion-preview, -.modern-apartment-preview { - height: 100%; - display: flex; - flex-direction: column; - text-align: center; -} - -.luxury-mansion-preview h2, -.modern-apartment-preview h2 { - font-size: 20px; - font-weight: 700; - margin-bottom: 10px; - color: #333; -} - -.luxury-mansion-preview h3, -.modern-apartment-preview h3 { - font-size: 16px; - color: #666; - margin-bottom: 15px; -} - -.luxury-mansion-preview p, -.modern-apartment-preview p { - font-size: 12px; - color: #888; - line-height: 1.4; - margin-bottom: 10px; -} - -.feature-list { - display: flex; - flex-direction: column; - gap: 8px; - margin: 15px 0; -} - -.feature-item { - display: flex; - align-items: center; - gap: 8px; - font-size: 12px; - color: #555; -} - -.feature-icon { - font-size: 16px; -} - -/* Enhanced Luxury Template Styles */ -.luxury-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-luxury-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-crown { - font-size: 32px; - margin-bottom: 10px; -} - -.preview-luxury-title { - font-size: 18px; - font-weight: 700; - color: #8B4513; - margin-bottom: 5px; -} - -.preview-luxury-subtitle { - font-size: 14px; - color: #A0522D; - font-weight: 500; -} - -.preview-luxury-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-feature { - font-size: 12px; - color: #666; - display: flex; - align-items: center; - gap: 8px; -} - -.preview-luxury-description { - margin-bottom: 20px; -} - -.preview-text { - font-size: 11px; - color: #777; - line-height: 1.4; - margin-bottom: 8px; -} - -/* Enhanced Modern Template Styles */ -.modern-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-modern-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-modern-icon { - font-size: 32px; - margin-bottom: 10px; -} - -.preview-modern-title { - font-size: 18px; - font-weight: 700; - color: #2E86AB; - margin-bottom: 5px; -} - -.preview-modern-subtitle { - font-size: 14px; - color: #A23B72; - font-weight: 500; -} - -.preview-modern-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-modern-description { - margin-bottom: 20px; -} - -/* Serenity Shores Template Styles (sample5.html) */ -.serenity-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-serenity-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-logo { - font-size: 16px; - font-weight: 700; - color: #82A09A; - border: 2px solid #82A09A; - padding: 6px 12px; - display: inline-block; - margin-bottom: 15px; - border-radius: 4px; -} - -.preview-serenity-title { - font-size: 20px; - font-weight: 700; - color: #333; - margin-bottom: 5px; -} - -.preview-serenity-subtitle { - font-size: 14px; - color: #666; - font-weight: 500; -} - -.preview-serenity-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-serenity-description { - margin-bottom: 20px; -} - -/* Prestige Real Estate Template Styles (sample4.html) */ -.prestige-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-prestige-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-prestige-logo { - font-size: 16px; - font-weight: 700; - color: #C0A062; - border: 2px solid #C0A062; - padding: 6px 12px; - display: inline-block; - margin-bottom: 15px; - border-radius: 4px; -} - -.preview-prestige-title { - font-size: 18px; - font-weight: 700; - color: #121212; - margin-bottom: 5px; -} - -.preview-prestige-subtitle { - font-size: 14px; - color: #666; - font-weight: 500; -} - -.preview-prestige-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-prestige-description { - margin-bottom: 20px; -} - -/* Property Brochure Template Styles (sample3.html) */ -.brochure-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-brochure-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-brochure-icon { - font-size: 32px; - margin-bottom: 10px; -} - -.preview-brochure-title { - font-size: 18px; - font-weight: 700; - color: #003366; - margin-bottom: 5px; -} - -.preview-brochure-subtitle { - font-size: 14px; - color: #666; - font-weight: 500; -} - -.preview-brochure-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-brochure-description { - margin-bottom: 20px; -} - -/* Template Preview Features */ -.template-preview { - margin-top: auto; - padding-top: 20px; - border-top: 1px solid rgba(0,0,0,0.1); -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 10px; -} - -.preview-features .feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; - text-align: center; -} - -.preview-features .feature-icon { - font-size: 20px; -} - -.preview-features .feature-text { - font-size: 10px; - color: #666; - font-weight: 500; -} - -/* Enhanced padding for last 3 grids */ -.template-serenity, -.template-prestige, -.template-brochure { - padding: 40px 35px; - background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); - border: 2px solid #e9ecef; - position: relative; - min-height: 320px; -} - -.template-serenity::before, -.template-prestige::before, -.template-brochure::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%); - border-radius: 16px; - z-index: -1; -} - -.template-serenity .template-content, -.template-prestige .template-content, -.template-brochure .template-content { - position: relative; - z-index: 1; -} - -/* Responsive Design */ -@media (max-width: 1200px) { - .editor-container { - flex-direction: column; - } - - .editor-toolbar.left { - width: 100%; - order: 2; - } - - .editor-right { - order: 1; - } - - .preview-frame { - transform: scale(0.7); - margin: 20px auto; - width: 95%; - max-width: 210mm; - } - - .template-grid { - /* Grid removed - using default layout */ - gap: 25px; - padding: 30px 15px; - } - - .step-content { - padding: 1.5rem 2rem; - } -} - -@media (max-width: 768px) { - .preview-frame { - transform: scale(0.6); - margin: 10px auto; - width: 90%; - max-width: 210mm; - padding: 15mm; - } - - /* Mobile A4 Optimization */ - .preview-frame h1 { - font-size: clamp(18px, 5vw, 24px); - } - - .preview-frame h2 { - font-size: clamp(14px, 4vw, 16px); - } - - .preview-frame p { - font-size: clamp(11px, 3vw, 13px); - } - - .template-grid { - grid-template-columns: 1fr; - gap: 20px; - padding: 20px 15px; - } - - .template-card { - padding: 25px 20px; - min-height: 250px; - } - - .step-content { - padding: 1rem 1.5rem; - } -} - -@media (max-width: 480px) { - .preview-frame { - transform: scale(0.5); - width: 85%; - padding: 10mm; - } - - /* Small Mobile A4 Optimization */ - .preview-frame h1 { - font-size: clamp(16px, 6vw, 20px); - } - - .preview-frame h2 { - font-size: clamp(12px, 5vw, 14px); - } - - .preview-frame p { - font-size: clamp(10px, 4vw, 12px); - } -} - -@media (max-width: 768px) { - .insert-content-section .toolbar-group { - grid-template-columns: 1fr; - } - - .text-styling-section .toolbar-group { - grid-template-columns: repeat(2, 1fr); - } - - .text-alignment-section .toolbar-group { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Hide header in step 3 */ -.step-3 .step-header { - display: none; -} - -/* Page Management */ -.page-container { - margin-bottom: 30px; - border: 2px solid #e0e0e0; - border-radius: 8px; - background: white; - position: relative; - overflow: visible; -} - -.page-header { - background: #f8f9fa; - padding: 15px 20px; - border-bottom: 2px solid #e0e0e0; - border-radius: 6px 6px 0 0; - display: flex; - align-items: center; - justify-content: space-between; -} - -.page-title { - font-size: 1.1rem; - font-weight: 600; - color: #495057; - margin: 0; -} - -.page-number { - background: #6f42c1; - color: white; - padding: 4px 12px; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 600; -} - -.page-content { - padding: 20px; - min-height: 400px; - overflow: visible; -} - -.page-content[contenteditable="true"] { - outline: none; - cursor: text; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; -} - -.page-content[contenteditable="true"]:focus { - border: 2px solid #6f42c1; - border-radius: 6px; -} - -/* Page Navigation */ -.page-navigation { - display: none; -} - -/* Custom Popup Styling */ -.custom-popup { - 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: 10000; - backdrop-filter: blur(4px); -} - -.custom-popup-content { - background: white; - border-radius: 12px; - padding: 30px; - max-width: 500px; - width: 90%; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); - position: relative; - border: 1px solid #e0e0e0; -} - -.custom-popup-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - padding-bottom: 15px; - border-bottom: 2px solid #6f42c1; -} - -.custom-popup-title { - font-size: 1.5rem; - font-weight: 600; - color: #2c3e50; - margin: 0; -} - -.custom-popup-close { - background: #6f42c1; - color: white; - border: none; - width: 32px; - height: 32px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - transition: all 0.2s ease; -} - -.custom-popup-close:hover { - background: #8e44ad; - transform: scale(1.1); -} - -.custom-popup-body { - margin-bottom: 25px; -} - -.custom-popup-footer { - display: flex; - gap: 12px; - justify-content: flex-end; -} - -.custom-popup-btn { - padding: 10px 20px; - border-radius: 6px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - font-size: 0.9rem; -} - -.custom-popup-btn-primary { - background: #6f42c1; - color: white; -} - -.custom-popup-btn-primary:hover { - background: #8e44ad; - transform: translateY(-1px); -} - -.custom-popup-btn-secondary { - background: #f8f9fa; - color: #495057; - border: 1px solid #d0d0d0; -} - -.custom-popup-btn-secondary:hover { - background: #e9ecef; -} - -/* Success/Error Notifications */ -.notification { - position: fixed; - top: 20px; - right: 20px; - padding: 15px 20px; - border-radius: 8px; - color: white; - font-weight: 500; - z-index: 10001; - animation: slideInRight 0.3s ease; - max-width: 350px; -} - -.notification.success { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); -} - -.notification.error { - background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%); - box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); -} - -@keyframes slideInRight { - from { - transform: translateX(100%); - opacity: 0; -} - to { - transform: translateX(0); - opacity: 1; - } -} - -/* Loading Spinner */ -.loading-spinner { - width: 16px; - height: 16px; - border: 2px solid #ffffff; - border-top: 2px solid transparent; - border-radius: 50%; - animation: spin 1s linear infinite; - display: inline-block; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Header and Footer Edit Buttons */ -.header-section, .footer-section { - position: relative; -} - -.header-section .edit-btn, .footer-section .edit-btn { - position: absolute; - top: 10px; - right: 10px; - background: rgba(255,255,255,0.2); - padding: 5px 10px; - border-radius: 15px; - font-size: 0.8rem; - cursor: pointer; - color: white; - border: none; - transition: background 0.2s ease; -} - -.header-section .edit-btn:hover, .footer-section .edit-btn:hover { - background: rgba(255,255,255,0.3); -} - -/* Property Details Grid */ -.property-details-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - margin-bottom: 30px; -} - -.property-detail-item { - background: #f8f9fa; - padding: 15px; - border-radius: 8px; - border-left: 4px solid #667eea; - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -.property-detail-item:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); -} - -.property-detail-label { - font-weight: 600; - color: #667eea; - margin-bottom: 5px; - font-size: 0.9rem; -} - -.property-detail-value { - font-size: 1.1rem; - color: #2c3e50; -} - -/* Template-specific sections */ -.template-section { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - margin-bottom: 30px; - border-left: 4px solid #667eea; -} - -.template-section h3 { - color: #2c3e50; - margin-top: 0; - font-size: 1.3rem; -} - -.template-section ul { - color: #495057; - margin: 0; - padding-left: 20px; -} - -.template-section li { - margin-bottom: 8px; - line-height: 1.4; -} - -/* Editable content areas */ -.editable-area { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - margin-bottom: 30px; - border: 2px dashed #dee2e6; - transition: border-color 0.2s ease; -} - -.editable-area:hover { - border-color: #667eea; -} - -.editable-area h3 { - color: #6c757d; - margin-top: 0; - font-size: 1.3rem; -} - -.editable-area p { - color: #6c757d; - font-style: italic; - margin: 0; -} - -/* Responsive Toolbar */ -@media (max-width: 1200px) { - .editor-toolbar { - flex-direction: column; - align-items: stretch; -} - - .toolbar-group { - justify-content: center; - flex-wrap: wrap; - } -} - -@media (max-width: 768px) { - .toolbar-group { - flex-direction: column; - align-items: stretch; -} - - .toolbar-btn { - width: 100%; - justify-content: center; -} -} - -@media (max-width: 768px) { - .step-header-gradient { - padding: 30px 20px; - margin: -15px -15px 25px -15px; - } - - .main-title { - font-size: 3rem; - } - - .subtitle { - font-size: 1.3rem; -} - - .step-navigation { - flex-direction: column; - gap: 1rem; - margin: 0 1rem 1rem 1rem; -} - - .step2-content { - grid-template-columns: 1fr; - gap: 2rem; - } - - .template-grid { - grid-template-columns: 1fr; - gap: 1.5rem; -} - - .step-content { - padding: 0 1rem; - } - - .header-section { - padding: 2rem 1rem; -} -} - -@media (max-width: 480px) { - .main-title { - font-size: 2.5rem; - } - - .subtitle { - font-size: 1.2rem; -} - - - - .header-features { - flex-direction: column; - align-items: center; -} - - .btn { - padding: 0.8rem 1.5rem; - font-size: 0.9rem; -} -} - -/* PDF Preview Popup */ -.pdf-preview-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - backdrop-filter: blur(3px); -} - -.pdf-preview-popup { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 95%; - max-height: 95%; - width: 1200px; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.template-preview-frame { - background: white; - padding: 20px; - border-radius: 8px; - max-height: 70vh; - overflow-y: auto; - border: 1px solid #e9ecef; - box-shadow: inset 0 2px 8px rgba(0,0,0,0.05); -} - -.template-preview-frame::-webkit-scrollbar { - width: 8px; -} - -.template-preview-frame::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 4px; -} - -.template-preview-frame::-webkit-scrollbar-thumb { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 4px; -} - -.template-preview-frame::-webkit-scrollbar-thumb:hover { - background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); -} - -.pdf-preview-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px 30px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 12px 12px 0 0; -} - -.pdf-preview-header h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; -} - -.close-btn { - background: none; - border: none; - color: white; - font-size: 1.5rem; - cursor: pointer; - padding: 5px; - border-radius: 50%; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - transition: background 0.2s ease; -} - -.close-btn:hover { - background: rgba(255, 255, 255, 0.2); -} - -.pdf-preview-content { - flex: 1; - padding: 30px; - overflow-y: auto; - max-height: 500px; -} - -.pdf-preview-content .preview-frame { - border: 2px solid #dee2e6; - border-radius: 8px; - padding: 20px; - background: white; - min-height: 400px; -} - -.pdf-preview-actions { - padding: 20px 30px; - background: #f8f9fa; - border-top: 1px solid #dee2e6; - display: flex; - gap: 15px; - justify-content: flex-end; - border-radius: 0 0 12px 12px; -} - -.pdf-preview-actions .export-pdf-btn { - position: static !important; - top: auto !important; - right: auto !important; -} - -/* Page Navigation Buttons in Toolbar */ -.page-nav-btn { - background: #f8f9fa; - border: 1px solid #d0d0d0; - color: #495057; - width: 35px; - height: 35px; - border-radius: 6px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.9rem; - font-weight: 600; - transition: all 0.2s ease; -} - -.page-nav-btn:hover { - background: #6f42c1; - color: white; - border-color: #6f42c1; - transform: translateY(-1px); -} - -.page-nav-btn.active { - background: #6f42c1; - color: white; - border-color: #6f42c1; - box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3); -} - -/* Active page styling */ -.active-page { - display: block !important; -} - -.page-container:not(.active-page) { - display: none; -} - -/* Enhanced Dropdown Styling for Step 2 */ -.property-selector { - margin: 20px 0; -} - -.property-selector label { - font-family: 'Inter', sans-serif; - display: block; - margin-bottom: 12px; - font-weight: 700; - color: #2c3e50; - font-size: 1.2rem; - letter-spacing: 0.02em; -} - -.property-selector select { - font-family: 'Inter', sans-serif; - width: 100%; - padding: 16px 20px; - border: 2px solid #e0e0e0; - border-radius: 12px; - font-size: 1.1rem; - font-weight: 500; - background: white; - transition: all 0.3s ease; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - letter-spacing: 0.01em; -} - -.property-selector select:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.property-selector select option { - padding: 8px; -} - -/* Enhanced Property Details Display */ -.property-details { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 12px; - padding: 25px; - margin-top: 20px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - -.property-details h4 { - color: #2c3e50; - margin: 0 0 20px 0; - font-size: 1.2rem; - font-weight: 600; -} - -.property-grid { - /* Grid removed - using default layout */ - gap: 15px; -} - -.property-field { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 15px; - background: white; - border-radius: 8px; - border: 1px solid #e9ecef; -} - -.property-field .label { - font-weight: 600; - color: #6c757d; - font-size: 0.9rem; -} - -.property-field .value { - font-weight: 500; - color: #2c3e50; - font-size: 0.9rem; -} - -/* Export PDF Button - Improved - Fixed positioning */ -.export-pdf-section { - position: relative; - margin: 20px 0; - z-index: 1000; - background: rgba(255, 255, 255, 0.9); - padding: 16px 20px; - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - border: 2px solid #e3f2fd; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - min-width: 200px; - max-width: 220px; - backdrop-filter: blur(10px); -} - -/* A4 Page Size Detection and Styling */ -.a4-page { - width: 210mm; - height: 297mm; - margin: 0 auto; - background: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - position: relative; - overflow: hidden; -} - -.a4-page-content { - padding: 20mm; - box-sizing: border-box; - height: 100%; - overflow: hidden; -} - -.page-break { - page-break-after: always; - break-after: page; - height: 297mm; - width: 210mm; - position: relative; - margin-bottom: 10mm; -} - -.page-indicator { - position: absolute; - bottom: 5mm; - right: 5mm; - font-size: 10px; - color: #666; - background: rgba(255, 255, 255, 0.8); - padding: 2px 6px; - border-radius: 3px; -} - -.export-pdf-btn { - background: transparent; - color: #667eea; - border: 2px solid #667eea; - padding: 12px 24px; - border-radius: 25px; - font-weight: 600; - font-size: 11px; - cursor: pointer; - box-shadow: none; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.3px; - margin-bottom: 0; - white-space: nowrap; - width: 100%; - text-align: center; - line-height: 1; - min-width: 140px; -} - -.export-pdf-btn:hover { - background: #667eea; - color: white; - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.export-pdf-btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - - - -/* Page Count Display */ -.page-count-display { - text-align: center; - margin-top: 4px; -} - -.page-count-text { - color: #28a745; - font-weight: 500; - font-size: 10px; - padding: 4px 8px; - background: rgba(40, 167, 69, 0.1); - border: 1px solid rgba(40, 167, 69, 0.3); - border-radius: 12px; - display: inline-block; -} - -/* Complete Property Details Styling */ -.complete-property-details { - margin-top: 30px; - padding: 20px; - background: #f8f9fa; - border-radius: 8px; - border-left: 4px solid #667eea; -} - -.category-section { - margin-bottom: 25px; -} - -.category-heading { - font-size: 16px; - font-weight: 600; - color: #333; - margin-bottom: 15px; - padding-bottom: 8px; - border-bottom: 2px solid #e9ecef; -} - -.category-fields { - /* Grid removed - using default layout */ - gap: 12px; -} - -.field-item { - display: flex; - align-items: flex-start; - padding: 8px 12px; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; - transition: all 0.2s ease; -} - -.field-item:hover { - border-color: #667eea; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.field-label { - font-weight: 600; - color: #495057; - min-width: 120px; - margin-right: 12px; - font-size: 13px; -} - -.field-value { - color: #333; - font-size: 13px; - word-break: break-word; - flex: 1; -} - -/* Progress Text Display */ -.progress-text-display { - text-align: center; - margin-top: 6px; -} - -.progress-message { - color: #007bff; - font-weight: 500; - font-size: 11px; - padding: 6px 12px; - background: rgba(248, 249, 250, 0.9); - border: 1px solid rgba(222, 226, 230, 0.7); - border-radius: 15px; - display: inline-block; -} - -/* Responsive design for smaller screens */ -@media (max-width: 768px) { - .export-pdf-section { - position: relative; - top: auto; - right: auto; - margin: 20px auto; - width: 90%; - max-width: 190px; - justify-content: center; - } - - .export-pdf-btn { - padding: 12px 24px; - font-size: 11px; - margin-right: 0; - } -} - - - -/* PDF Generation Progress Indicator */ -.pdf-progress-indicator { - text-align: center; - padding: 15px; - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - margin-top: 10px; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; -} - -.pdf-progress-indicator .spinner { - display: inline-block; - width: 20px; - height: 20px; - border: 3px solid #f3f3f3; - border-top: 3px solid #007bff; - border-radius: 50%; - animation: spin 1s linear infinite; - flex-shrink: 0; -} - -.pdf-progress-indicator .progress-text { - color: #007bff; - font-weight: 500; - font-size: 14px; - margin: 0; -} - -/* Progress Bar for PDF Generation */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 10000; -} - -.progress-content { - background: white; - padding: 40px; - border-radius: 15px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); - text-align: center; - max-width: 400px; - width: 90%; -} - -.progress-spinner { - width: 60px; - height: 60px; - border: 4px solid #f3f3f3; - border-top: 4px solid #667eea; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20px; -} - -.progress-text { - font-size: 18px; - font-weight: 600; - color: #333; - margin-bottom: 20px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Progress bar animation */ -.progress-bar .progress-content { - animation: slideIn 0.3s ease-out; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); -} -} - -/* Loading Indicator */ -.loading-indicator { - text-align: center; - padding: 20px; - background: #f8f9fa; - border-radius: 8px; - margin: 15px 0; - color: #6c757d; - font-style: italic; -} - -.loading-indicator::before { - content: "⏳ "; - margin-right: 8px; -} - -/* Debug Info - Hide in production */ -.debug-info { - display: none !important; -} - -/* Ensure clean page bottom and hide any stray content */ -.property-brochure-generator::after { - content: ""; - display: block; - clear: both; - height: 0; - overflow: hidden; -} - -/* Hide any potential stray text elements */ -.property-brochure-generator { - position: relative; -} - -/* Additional cleanup for text nodes */ -.property-brochure-generator > *:last-child::after { - content: ""; - display: block; - height: 0; - clear: both; -} - -/* Image Review Modal Overlay */ -.image-review-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.7); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; -} - -.image-review-modal { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 90%; - max-height: 90%; - width: 1200px; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.image-review-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px 30px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 12px 12px 0 0; -} - -.image-review-header h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; -} - -.image-review-content { - flex: 1; - padding: 30px; - overflow-y: auto; - max-height: 600px; -} - -.category-navigation { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 20px; - justify-content: center; -} - -.category-btn { - background: #f8f9fa; - border: 2px solid #e9ecef; - color: #495057; - padding: 8px 16px; - border-radius: 20px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; -} - -.category-btn:hover, -.category-btn.active { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; - transform: translateY(-1px); -} - -.image-display-area { - background: #f8f9fa; - border-radius: 12px; - padding: 20px; - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - - - -/* Editor Toolbar - Fixed Layout */ -.editor-toolbar { - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 15px; - margin-bottom: 20px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - max-width: 100%; - overflow: hidden; -} - -.editor-toolbar.left { - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -.toolbar-section { - margin-bottom: 20px; - padding: 10px; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 10px; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.toolbar-group { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - margin-bottom: 10px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - min-width: fit-content; - max-width: 100%; - box-sizing: border-box; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; -} - -.toolbar-button:active { - background: #dee2e6; -} - -.button-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; - width: 100%; -} - -.button-grid .toolbar-button { - justify-content: center; - text-align: center; - min-height: 36px; -} - -/* Form Controls */ -.toolbar-group label { - font-size: 12px; - color: #6c757d; - margin-right: 8px; - white-space: nowrap; -} - -.toolbar-group select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; - min-width: 100px; - max-width: 150px; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .editor-toolbar { - padding: 10px; - } - - .toolbar-section { - padding: 8px; - } - - .toolbar-group { - gap: 6px; - } - - .toolbar-button { - padding: 6px 10px; - font-size: 11px; - } - - .button-grid { - grid-template-columns: 1fr; - } -} - -/* Step 3: HTML Editor - Fixed Layout */ -.step3 { - display: block; - position: relative; - height: calc(100vh - 160px); - overflow: hidden; - padding-bottom: 1rem; -} - -.step3.hidden { - display: none; -} - -/* Editor Container - Fixed Layout */ -.editor-container { - display: flex; - flex-direction: row; - gap: 20px; - height: 100%; - padding: 10px 20px; - box-sizing: border-box; - margin-bottom: 0; - max-height: calc(100vh - 180px); -} - -/* Quill Editor Container - Replaces Left Toolbar */ -.quill-editor-container { - width: 340px; - flex-shrink: 0; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border: 1px solid #dee2e6; - border-radius: 12px; - padding: 15px; - height: calc(100vh - 180px); - max-height: calc(100vh - 180px); - overflow-y: auto; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - position: relative; -} - -/* Hide default scrollbar */ -.quill-editor-container::-webkit-scrollbar { - display: none; -} - -.quill-editor-container { - -ms-overflow-style: none; - scrollbar-width: none; -} - -/* Custom scroll indicators for sidebar */ -.quill-editor-container::before { - content: ''; - position: absolute; - top: 10px; - right: 10px; - width: 4px; - height: 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - z-index: 10; -} - -.quill-editor-container::after { - content: ''; - position: absolute; - bottom: 10px; - right: 10px; - width: 4px; - height: 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - z-index: 10; -} - -.quill-editor-container:hover::before, -.quill-editor-container:hover::after { - opacity: 0.6; -} - -/* Quill Toolbar Wrapper */ -.quill-toolbar-wrapper { - margin-bottom: 25px; -} - -.quill-section-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.2rem; - font-weight: 700; - color: #2c3e50; - margin-bottom: 15px; - text-align: center; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 0.02em; -} - -/* Sticky Enhanced Toolbar Container */ -.enhanced-toolbar-sticky { - position: sticky; - top: 0; - z-index: 100; - background: white; - border-bottom: 2px solid #e9ecef; - padding: 15px 20px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - margin-bottom: 20px; -} - -/* Horizontal Enhanced Toolbar */ -.enhanced-toolbar-horizontal { - display: flex; - flex-wrap: wrap; - gap: 15px; - align-items: center; - justify-content: flex-start; - max-width: 100%; - overflow-x: auto; - padding: 10px 0; -} - -/* Custom Scrollbar Area for Toolbar */ -.enhanced-toolbar-scroll { - height: 100%; - overflow-y: auto; - padding-right: 10px; - margin-right: -10px; -} - -/* Hide native scrollbars but keep functionality */ -.enhanced-toolbar-scroll::-webkit-scrollbar { - width: 0px; - background: transparent; -} - -.enhanced-toolbar-scroll { - -ms-overflow-style: none; - scrollbar-width: none; -} - -/* Enhanced Toolbar - Sidebar Style */ -.enhanced-toolbar { - height: calc(100vh - 200px); - display: flex; - flex-direction: column; - gap: 1rem; - overflow-y: auto; - padding: 1rem; - background: #ffffff; - border: 1px solid #e1e5e9; - border-radius: 8px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - max-height: 800px; - position: relative; -} - -/* Custom scroll indicator */ -.enhanced-toolbar::after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 40px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.enhanced-toolbar:hover::after { - opacity: 0.3; - animation: scrollIndicator 2s ease-in-out infinite; -} - -@keyframes scrollIndicator { - 0%, 100% { transform: translateY(-70%); } - 50% { transform: translateY(-30%); } -} - -.enhanced-toolbar .toolbar-section { - margin-bottom: 20px; - padding: 15px; - background: #f8f9fa; - border-radius: 8px; - border: 1px solid #e9ecef; -} - -.enhanced-toolbar .toolbar-section:last-child { - margin-bottom: 0; -} - -.enhanced-toolbar .toolbar-section-title { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - font-weight: 600; - color: #495057; - margin-bottom: 12px; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; - padding-bottom: 4px; -} - -.enhanced-toolbar .toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 12px; -} - -.enhanced-toolbar .toolbar-group:last-child { - margin-bottom: 0; -} - -.enhanced-toolbar .toolbar-button { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - width: 100%; - box-sizing: border-box; -} - -.enhanced-toolbar .toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.enhanced-toolbar .toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - -.enhanced-toolbar .toolbar-group label { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - font-size: 12px; - color: #6c757d; - margin-bottom: 4px; - font-weight: 500; -} - -.enhanced-toolbar .toolbar-group select { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; - transition: all 0.2s ease; -} - -.enhanced-toolbar .toolbar-group select:hover { - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.enhanced-toolbar .toolbar-group input[type="color"] { - width: 100%; - height: 32px; - border: 1px solid #dee2e6; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.enhanced-toolbar .toolbar-group input[type="color"]:hover { - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.enhanced-toolbar .button-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; -} - -.enhanced-toolbar .alignment-buttons { - display: flex; - flex-direction: column; - gap: 6px; -} - -.enhanced-toolbar .alignment-btn { - justify-content: flex-start; -} - -/* Property Insert Section */ -.property-insert-section { - margin-bottom: 25px; - padding: 20px; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.property-insert-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: 700; - color: #2c3e50; - margin-bottom: 15px; - text-align: center; - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 0.02em; -} - -.property-insert-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; -} - -.property-insert-btn { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 10px 12px; - font-size: 11px; - font-weight: 600; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.property-insert-btn:hover { - background: #28a745; - border-color: #28a745; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2); -} - -/* Document Actions Section */ -.document-actions-section { - padding: 20px; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.document-actions-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: 700; - color: #2c3e50; - margin-bottom: 15px; - text-align: center; - background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 0.02em; -} - -.document-actions-grid { - display: flex; - flex-direction: column; - gap: 10px; -} - -.doc-action-btn { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 12px 15px; - font-size: 12px; - font-weight: 600; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: 100%; -} - -.doc-action-btn:hover { - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.doc-action-btn.save-btn:hover { - background: #28a745; - border-color: #28a745; - color: white; -} - -.doc-action-btn.load-btn:hover { - background: #007bff; - border-color: #007bff; - color: white; -} - -.doc-action-btn.reset-btn:hover { - background: #dc3545; - border-color: #dc3545; - color: white; -} - -.doc-action-btn.preview-btn:hover { - background: #667eea; - border-color: #667eea; - color: white; -} - -/* Generate PDF Section in Template Header */ -.generate-pdf-section { - display: flex; - align-items: center; -} - -.generate-pdf-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - padding: 12px 24px; - border-radius: 6px; - font-weight: 600; - cursor: pointer; - font-size: 14px; - transition: all 0.3s ease; - display: flex; - align-items: center; - gap: 8px; -} - -.generate-pdf-btn:hover { - transform: translateY(-1px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.generate-pdf-btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - -/* Enhanced Editor Content Area */ -.enhanced-editor-content { - background: white; - border: 1px solid #dee2e6; - border-radius: 12px; - height: calc(100vh - 200px); - max-height: calc(100vh - 200px); - padding: 20px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 14px; - line-height: 1.6; - color: #333; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); - overflow-y: auto; - position: relative; - scroll-behavior: smooth; - user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; -} - -.enhanced-editor-content:focus { - outline: none; -} - -/* Image Click Detection Enhancements */ -.enhanced-editor-content img { - cursor: pointer; - transition: all 0.3s ease; - position: relative; -} - -.enhanced-editor-content img:hover { - opacity: 0.9; - transform: scale(1.02); - box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2); - border-radius: 4px; -} - -/* Enhanced hover effects for draggable image containers */ -.enhanced-editor-content .draggable-element:has(img):hover { - outline: 2px dashed #4f46e5; - outline-offset: 4px; -} - -/* Only show cursor pointer for actual images and image containers */ -.enhanced-editor-content *[style*="background-image"]:hover { - cursor: pointer; -} - -@keyframes imageHintFade { - from { opacity: 0; transform: scale(0.9); } - to { opacity: 1; transform: scale(1); } -} - -/* International Typography Scale - Following Material Design 3 & Apple HIG */ -.display-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 3.5rem; /* 56px */ - font-weight: 400; - line-height: 1.12; - letter-spacing: -0.025em; - font-variation-settings: 'wght' 400; -} - -.display-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 2.8125rem; /* 45px */ - font-weight: 400; - line-height: 1.15; - letter-spacing: -0.015em; - font-variation-settings: 'wght' 400; -} - -.display-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 2.25rem; /* 36px */ - font-weight: 400; - line-height: 1.22; - letter-spacing: -0.005em; - font-variation-settings: 'wght' 400; -} - -.headline-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 2rem; /* 32px */ - font-weight: 600; - line-height: 1.25; - letter-spacing: -0.005em; - font-variation-settings: 'wght' 600; -} - -.headline-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.75rem; /* 28px */ - font-weight: 600; - line-height: 1.28; - letter-spacing: 0; - font-variation-settings: 'wght' 600; -} - -.headline-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.5rem; /* 24px */ - font-weight: 600; - line-height: 1.33; - letter-spacing: 0; - font-variation-settings: 'wght' 600; -} - -.title-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.375rem; /* 22px */ - font-weight: 500; - line-height: 1.27; - letter-spacing: 0; - font-variation-settings: 'wght' 500; -} - -.title-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.125rem; /* 18px */ - font-weight: 500; - line-height: 1.33; - letter-spacing: 0.009em; - font-variation-settings: 'wght' 500; -} - -.title-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.875rem; /* 14px */ - font-weight: 500; - line-height: 1.43; - letter-spacing: 0.007em; - font-variation-settings: 'wght' 500; -} - -.body-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1rem; /* 16px */ - font-weight: 400; - line-height: 1.5; - letter-spacing: 0.031em; - font-variation-settings: 'wght' 400; -} - -.body-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.875rem; /* 14px */ - font-weight: 400; - line-height: 1.43; - letter-spacing: 0.017em; - font-variation-settings: 'wght' 400; -} - -.body-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.75rem; /* 12px */ - font-weight: 400; - line-height: 1.33; - letter-spacing: 0.033em; - font-variation-settings: 'wght' 400; -} - -.label-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.875rem; /* 14px */ - font-weight: 500; - line-height: 1.43; - letter-spacing: 0.007em; - font-variation-settings: 'wght' 500; -} - -.label-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.75rem; /* 12px */ - font-weight: 500; - line-height: 1.33; - letter-spacing: 0.042em; - font-variation-settings: 'wght' 500; -} - -.label-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.6875rem; /* 11px */ - font-weight: 500; - line-height: 1.45; - letter-spacing: 0.045em; - font-variation-settings: 'wght' 500; -} - -.enhanced-editor-content[contenteditable="true"] { - cursor: text; - overflow-y: auto; - padding-right: 30px; - margin-right: -10px; -} - -/* Prevent jumping to top when interacting with draggable elements */ -.enhanced-editor-content * { - scroll-margin-top: 0; -} - -/* Ensure text content is editable */ -.enhanced-editor-content p, -.enhanced-editor-content div:not(.draggable-element), -.enhanced-editor-content span, -.enhanced-editor-content h1, -.enhanced-editor-content h2, -.enhanced-editor-content h3, -.enhanced-editor-content h4, -.enhanced-editor-content h5, -.enhanced-editor-content h6 { - user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - cursor: text; -} - -/* Draggable and Resizable Elements */ -.draggable-element { - position: absolute; - border: 2px dashed transparent; - cursor: move; - min-width: 50px; - min-height: 20px; - z-index: 1000; - box-sizing: border-box; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.draggable-element.draggable-text { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - cursor: text; -} - -.draggable-element:hover, -.draggable-element.selected { - border-color: #667eea; - background: rgba(102, 126, 234, 0.1); - box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); -} - -.draggable-element.dragging { - opacity: 0.8; - z-index: 1001; - cursor: move !important; -} - -.draggable-element.resizing { - z-index: 1001; -} - -/* Resize Handles */ -.resize-handle { - position: absolute; - background: #667eea; - border: 1px solid white; - width: 8px; - height: 8px; - border-radius: 50%; - opacity: 0; - transition: opacity 0.2s; - z-index: 1002; -} - -.draggable-element:hover .resize-handle, -.draggable-element.selected .resize-handle { - opacity: 1; -} - -.resize-handle.nw { top: -4px; left: -4px; cursor: nw-resize; } -.resize-handle.ne { top: -4px; right: -4px; cursor: ne-resize; } -.resize-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; } -.resize-handle.se { bottom: -4px; right: -4px; cursor: se-resize; } -.resize-handle.n { top: -4px; left: 50%; margin-left: -4px; cursor: n-resize; } -.resize-handle.s { bottom: -4px; left: 50%; margin-left: -4px; cursor: s-resize; } -.resize-handle.w { top: 50%; left: -4px; margin-top: -4px; cursor: w-resize; } -.resize-handle.e { top: 50%; right: -4px; margin-top: -4px; cursor: e-resize; } - -/* Draggable Image */ -.draggable-image { - max-width: 100%; - height: auto; - display: block; -} - -/* Draggable Text */ -.draggable-text { - padding: 8px; - min-height: 30px; - outline: none; - word-wrap: break-word; - z-index: 1000; - position: absolute; - background: rgba(255, 255, 255, 0.9); - border-radius: 4px; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 14px; - line-height: 1.4; -} - -.draggable-text:focus { - outline: 2px solid #667eea; - background: rgba(255, 255, 255, 1); -} - -/* Loading Spinner */ -.loading-spinner { - display: inline-block; - width: 16px; - height: 16px; - border: 2px solid rgba(255, 255, 255, 0.3); - border-radius: 50%; - border-top-color: #ffffff; - animation: spin 1s ease-in-out infinite; - margin-right: 8px; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -.generate-pdf-btn:disabled { - opacity: 0.7; - cursor: not-allowed; - background: linear-gradient(135deg, #999 0%, #666 100%); -} - -.enhanced-editor-content:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.enhanced-editor-content[contenteditable="true"] { - cursor: text; - overflow-y: auto; - padding-right: 30px; - margin-right: -10px; -} - -/* Hide scrollbars on editor content */ -.enhanced-editor-content::-webkit-scrollbar { - width: 0px; - background: transparent; -} - -.enhanced-editor-content { - -ms-overflow-style: none; - scrollbar-width: none; -} - -/* Custom scroll indicator for editor */ -.editor-right::after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 60px; - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; - z-index: 10; -} - -.editor-right:hover::after { - opacity: 0.4; - animation: editorScrollIndicator 2s ease-in-out infinite; -} - -@keyframes editorScrollIndicator { - 0%, 100% { transform: translateY(-70%); } - 50% { transform: translateY(-30%); } -} - -.enhanced-editor-content[contenteditable="true"]:empty::before { - content: "Start editing your template here..."; - color: #6c757d; - font-style: italic; -} - -.toolbar-section { - margin-bottom: 20px; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 12px; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; - padding-bottom: 4px; -} - -.toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 12px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - width: 100%; - box-sizing: border-box; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - -/* Insert Content Section - Compact Layout */ -.insert-content-section .toolbar-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; -} - -.insert-content-section .toolbar-group:first-child { - grid-template-columns: 1fr 1fr; -} - -.insert-content-section .toolbar-group:last-child { - grid-template-columns: 1fr 1fr; -} - -/* Text Formatting - Compact */ -.text-formatting-section .toolbar-group { - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; -} - -.text-formatting-section label { - font-size: 11px; - color: #6c757d; - min-width: 70px; -} - -.text-formatting-section select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 5px 6px; - font-size: 11px; - color: #495057; - min-width: 100px; - flex: 1; -} - -/* Text Styling - Compact */ -.text-styling-section .toolbar-group { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 6px; -} - -.text-styling-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 32px; - font-weight: 600; -} - -/* Text Alignment - Compact */ -.text-alignment-section .toolbar-group { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 6px; -} - -.text-alignment-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 32px; -} - -/* Right Editor Area - Takes Remaining Space */ -.editor-right { - flex: 1; - background: white; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - height: 100%; - max-height: calc(100vh - 250px); - overflow: hidden; - display: flex; - flex-direction: column; - position: relative; -} - -.preview-frame { - flex: 1; - width: 100%; - border: none; - outline: none; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; - background: white; - resize: none; - overflow-y: auto; - padding: 20px; - box-sizing: border-box; - max-height: 100%; -} - -/* Export PDF Button - Positioned at Template Level */ -.export-pdf-section { - position: absolute; - top: 20px; - right: 20px; - z-index: 10; -} - -.export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - text-transform: uppercase; - font-size: 14px; - transition: all 0.3s ease; -} - -.export-pdf-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); -} - -.export-pdf-btn:active { - transform: translateY(0); -} - -/* Responsive Design */ -@media (max-width: 1200px) { - .editor-container { - flex-direction: column; - height: auto; - } - - .editor-toolbar.left { - width: 100%; - height: auto; - order: 2; - } - - .editor-right { - order: 1; - height: 500px; - } -} - -@media (max-width: 768px) { - .insert-content-section .toolbar-group { - grid-template-columns: 1fr; - } - - .text-styling-section .toolbar-group { - grid-template-columns: repeat(2, 1fr); - } - - .text-alignment-section .toolbar-group { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Export PDF Button - Positioned at Template Header with Animation */ -.export-pdf-section { - position: absolute; - top: 40px; - right: 40px; - z-index: 1000; - animation: pulse-grow 2s ease-in-out infinite; -} - -.export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - text-transform: uppercase; - font-size: 14px; - transition: all 0.3s ease; - transform-origin: center; -} - -.export-pdf-btn:hover { - transform: translateY(-2px) scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - animation: none; -} - -.export-pdf-btn:active { - transform: translateY(0) scale(0.95); -} - -/* Pulse Animation: Small -> Big -> Small -> Big */ -@keyframes pulse-grow { - 0% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } - 25% { - transform: scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - } - 50% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } - 75% { - transform: scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - } - 100% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } -} - -/* Template Header Area - Position for Export Button */ -.template-header-area { - position: relative; - margin-bottom: 20px; - background: white; - border-radius: 12px; - padding: 20px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); - border: 1px solid #f0f0f0; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 20px; - flex-shrink: 0; -} - -/* Scroll hint for areas */ -.scroll-hint { - position: absolute; - bottom: 10px; - left: 50%; - transform: translateX(-50%); - background: rgba(102, 126, 234, 0.1); - color: #667eea; - padding: 4px 12px; - border-radius: 12px; - font-size: 11px; - font-weight: 500; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; - z-index: 5; -} - -.enhanced-toolbar:hover .scroll-hint, -.editor-right:hover .scroll-hint { - opacity: 1; -} - -/* Enhanced visual feedback for scrollable areas */ -.enhanced-toolbar-scroll:hover, -.enhanced-editor-content:hover { - background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%); -} - -/* Subtle border animation on hover */ -.enhanced-toolbar:hover { - border-color: #667eea; - box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1); -} - -.editor-right:hover { - border-color: #28a745; - box-shadow: 0 4px 20px rgba(40, 167, 69, 0.1); -} - -/* Page Size Section */ -.page-size-section { - display: flex; - align-items: center; - gap: 15px; - flex-wrap: wrap; -} - -.page-size-label { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 1.1rem; - font-weight: 600; - color: #2c3e50; - margin: 0; - letter-spacing: 0.01em; -} - -.page-size-options { - display: flex; - gap: 12px; - align-items: center; -} - -.page-size-option { - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; - padding: 8px 16px; - background: #f8f9fa; - border: 2px solid #e9ecef; - border-radius: 10px; - transition: all 0.3s ease; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-weight: 500; - color: #495057; - min-width: 60px; - justify-content: center; -} - -.page-size-option:hover { - background: #e9ecef; - border-color: #667eea; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.page-size-option input[type="radio"] { - display: none; -} - -.page-size-option input[type="radio"]:checked + .page-size-text { - color: white; -} - -.page-size-option:has(input:checked) { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.page-size-text { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.02em; - transition: color 0.3s ease; -} - -/* Custom Popup Styles - Matching Our Theme */ -.custom-popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; -} - -.popup-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(2px); -} - -.popup-container { - position: relative; - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - width: 90%; - max-width: 500px; - max-height: 80vh; - overflow-y: auto; - animation: popupSlideIn 0.3s ease-out; -} - -@keyframes popupSlideIn { - from { - opacity: 0; - transform: translateY(-20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -.popup-header { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 12px 12px 0 0; - display: flex; - justify-content: space-between; - align-items: center; -} - -.popup-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; -} - -.popup-close { - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - padding: 0; - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - transition: background-color 0.2s ease; -} - -.popup-close:hover { - background: rgba(255, 255, 255, 0.2); -} - -.popup-content { - padding: 25px; -} - -.form-group { - margin-bottom: 20px; -} - -.form-group label { - display: block; - margin-bottom: 8px; - font-weight: 600; - color: #495057; - font-size: 14px; -} - -.form-control { - width: 100%; - padding: 10px 12px; - border: 1px solid #dee2e6; - border-radius: 6px; - font-size: 14px; - color: #495057; - background: white; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - box-sizing: border-box; -} - -.form-control:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.form-control[type="color"] { - height: 40px; - padding: 5px; - cursor: pointer; -} - -.popup-actions { - display: flex; - gap: 12px; - justify-content: flex-end; - margin-top: 25px; - padding-top: 20px; - border-top: 1px solid #e9ecef; -} - -.popup-actions .btn { - padding: 10px 20px; - border: none; - border-radius: 6px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - min-width: 80px; -} - -.popup-actions .btn-secondary { - background: #6c757d; - color: white; -} - -.popup-actions .btn-secondary:hover { - background: #5a6268; - transform: translateY(-1px); -} - -.popup-actions .btn-primary { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; -} - -.popup-actions .btn-primary:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -/* Responsive popup */ -@media (max-width: 768px) { - .popup-container { - width: 95%; - margin: 20px; - } - - .popup-content { - padding: 20px; - } - - .popup-actions { - flex-direction: column; - } - - .popup-actions .btn { - width: 100%; - } -} - -/* General button spacing to prevent merging with page bottom */ -button, .btn, .toolbar-button, .export-pdf-btn { - margin-bottom: 0.5rem !important; -} - -/* Ensure proper spacing for button containers */ -.step-actions, .toolbar-section, .popup-actions { - margin-bottom: 1rem; -} - -/* Reduce bottom spacing in step 3 specifically */ -.step3 .step-actions, -.step3 .toolbar-section, -.step3 .popup-actions { - margin-bottom: 0.5rem; -} - -.step3 button, -.step3 .btn, -.step3 .toolbar-button { - margin-bottom: 0.3rem !important; -} - -/* Draggable image container styles */ -.draggable-image-container { - position: absolute; - cursor: move; - user-select: none; - z-index: 1000; - min-width: 100px; - min-height: 100px; - border: 2px dashed #667eea; - border-radius: 8px; - background: rgba(102, 126, 234, 0.1); - padding: 5px; - transition: all 0.2s ease; - transform: translate3d(0, 0, 0); -} - -.draggable-image-container:hover { - border-color: #764ba2; - background: rgba(102, 126, 234, 0.15); - transform: translate3d(0, -2px, 0); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); -} - -.draggable-image-container.dragging { - border-color: #764ba2; - background: rgba(102, 126, 234, 0.2); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); - transform: scale(1.02); - transition: none; - z-index: 1001; -} - -.draggable-image-container:focus { - outline: 2px solid #667eea; - outline-offset: 2px; -} - -.draggable-image-container img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 6px; - pointer-events: none; - user-select: none; -} - -/* Resize handle */ -.resize-handle { - position: absolute; - bottom: -8px; - right: -8px; - width: 24px; - height: 24px; - background: #667eea; - color: white; - border-radius: 50%; - cursor: se-resize; - border: 2px solid white; - z-index: 1001; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - font-weight: bold; - box-shadow: 0 2px 8px rgba(0,0,0,0.3); - transition: all 0.2s ease; - user-select: none; -} - -.resize-handle:hover { - background: #764ba2; - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0,0,0,0.4); -} - -.resize-handle:active { - background: #5a4fcf; - transform: scale(0.95); -} - -/* Delete button */ -.delete-image-btn { - position: absolute; - top: -10px; - right: -10px; - width: 24px; - height: 24px; - background: #ff4757; - color: white; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - font-weight: bold; - border: 2px solid white; - z-index: 1002; - transition: background-color 0.3s ease; -} - -.delete-image-btn:hover { - background: #ff3742; -} - -/* Image info display */ -.image-info { - position: absolute; - top: -25px; - left: 0; - background: rgba(0,0,0,0.8); - color: white; - padding: 4px 8px; - border-radius: 4px; - font-size: 10px; - white-space: nowrap; - opacity: 0; - transition: opacity 0.3s; - pointer-events: none; - z-index: 1003; -} - -/* Dragging state */ -.draggable-image-container.dragging { - border-color: #764ba2; - background: rgba(102, 126, 234, 0.2); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); -} - -/* Resizing state */ -.draggable-image-container.resizing { - border-color: #ff6b6b; - background: rgba(255, 107, 107, 0.1); -} - -/* Text Alignment Section - Fixed Width */ -.text-alignment-section .toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; -} - -.alignment-buttons { - display: flex; - flex-direction: column; - gap: 6px; - width: 100%; -} - -.alignment-btn { - width: 100%; - justify-content: flex-start; - padding: 8px 12px; - font-size: 12px; - min-height: 36px; -} - -/* Toolbar Section Ordering */ -.toolbar-section:nth-child(1) { order: 1; } /* Document Actions */ -.toolbar-section:nth-child(2) { order: 2; } /* Text Formatting */ -.toolbar-section:nth-child(3) { order: 3; } /* Text Styling */ -.toolbar-section:nth-child(4) { order: 4; } /* Text Alignment */ -.toolbar-section:nth-child(5) { order: 5; } /* Colors */ -.toolbar-section:nth-child(6) { order: 6; } /* Lists & Indentation */ -.toolbar-section:nth-child(7) { order: 7; } /* Element Positioning */ -.toolbar-section:nth-child(8) { order: 8; } /* Insert Content */ - -/* Asgar-1 Template Preview Styles */ -.template-asgar1 { - background: linear-gradient(135deg, #003366, #004080); - border: 1px solid #002244; - box-shadow: 0 6px 20px rgba(0,51,102,0.15); - padding: 30px 25px; -} - -.asgar1-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-hero { - background: linear-gradient(135deg, #003366, #004080); - color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; -} - -.preview-hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url('data:image/svg+xml,'); - opacity: 0.3; -} - -.preview-hero-overlay { - position: relative; - z-index: 1; -} - -.preview-property-name { - font-size: 18px; - font-weight: bold; - margin-bottom: 8px; - color: #f39c12; -} - -.preview-property-address { - font-size: 12px; - opacity: 0.9; -} - -.preview-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-section { - background: white; - padding: 12px; - border-radius: 6px; - border-left: 4px solid #f39c12; -} - -.preview-section-title { - color: #003366; - font-size: 11px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-text { - color: #666; - font-size: 9px; - line-height: 1.3; -} - -/* Preview Frame */ -.preview-frame { - width: 100%; - height: 600px; - border: 1px solid #ddd; - border-radius: 8px; - background: white; - overflow-y: auto; - overflow-x: hidden; /* Prevent horizontal scrollbar */ - position: relative; -} - -.preview-frame iframe { - width: 100%; - height: 100%; - border: none; - border-radius: 8px; -} - -/* Brochure Content Responsiveness */ -.brochure { - max-width: 100% !important; - width: 100% !important; - box-sizing: border-box; - overflow-x: hidden; -} - -/* Ensure all content fits within viewport */ -.preview-frame * { - max-width: 100% !important; - box-sizing: border-box; -} - -/* Fix for grid layouts that might cause overflow */ -.content.grid-layout { - max-width: 100%; - overflow-x: hidden; -} - -/* Ensure amenities grid doesn't overflow */ -.amenities-grid { - max-width: 100%; - grid-template-columns: 1fr 1fr; - gap: 15px; -} - -/* Fix for location section grid */ -.location-section { - max-width: 100%; - grid-template-columns: 1fr 1fr; - gap: 30px; -} - -/* Responsive adjustments for smaller screens */ -@media (max-width: 1200px) { - .amenities-grid { - grid-template-columns: 1fr; - } - - .location-section { - grid-template-columns: 1fr; - } - - .content.grid-layout { - grid-template-columns: 1fr; - } -} - -/* Sample Template Preview Styles */ -.template-sample { - background: linear-gradient(135deg, #667eea, #764ba2); - border: 1px solid #5a6fd8; - box-shadow: 0 6px 20px rgba(102,126,234,0.15); - padding: 30px 25px; -} - -.sample-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-header { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; -} - -.preview-triangle { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 30px 30px; - border-color: transparent transparent rgba(255,255,255,0.2) transparent; -} - -.preview-company { - margin-bottom: 10px; -} - -.preview-company-name { - font-size: 10px; - font-weight: bold; - margin-bottom: 2px; - opacity: 0.9; -} - -.preview-title { - font-size: 16px; - font-weight: bold; - margin-bottom: 5px; -} - -.preview-for-sale { - font-size: 9px; - opacity: 0.8; -} - -.preview-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-section { - background: white; - padding: 12px; - border-radius: 6px; - border-left: 4px solid #667eea; -} - -.preview-section-title { - color: #667eea; - font-size: 11px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-text { - color: #666; - font-size: 9px; - line-height: 1.3; - margin-bottom: 8px; -} - -.preview-icons { - display: flex; - gap: 8px; - justify-content: center; -} - -.preview-icon { - width: 20px; - height: 20px; - background: linear-gradient(135deg, #667eea, #764ba2); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 10px; -} - -/* Luxury Mansion Template Preview Styles */ -.template-luxury { - background: white; - border: 1px solid #e5e7eb; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); - padding: 30px 25px; -} - -.luxury-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-luxury-header { - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - color: #1f2937; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; - border: 1px solid #e5e7eb; -} - -.preview-crown { - font-size: 24px; - margin-bottom: 8px; -} - -.preview-luxury-title { - font-size: 14px; - font-weight: bold; - margin-bottom: 4px; - text-shadow: 1px 1px 2px rgba(255,255,255,0.5); -} - -.preview-luxury-subtitle { - font-size: 10px; - opacity: 0.8; - font-weight: 500; -} - -.preview-luxury-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-luxury-features { - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-feature { - background: white; - padding: 8px 12px; - border-radius: 6px; - font-size: 9px; - color: #8B4513; - font-weight: 500; - border-left: 3px solid #FFD700; -} - -.preview-luxury-description { - display: flex; - flex-direction: column; - gap: 6px; -} - -/* Modern Apartment Template Preview Styles */ -.template-modern { - background: linear-gradient(135deg, #00CED1, #20B2AA); - border: 1px solid #00CED1; - box-shadow: 0 6px 20px rgba(0,206,209,0.2); - padding: 30px 25px; -} - -.modern-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-modern-header { - background: linear-gradient(135deg, #00CED1, #20B2AA); - color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; -} - -.preview-modern-icon { - font-size: 24px; - margin-bottom: 8px; -} - -.preview-modern-title { - font-size: 14px; - font-weight: bold; - margin-bottom: 4px; -} - -.preview-modern-subtitle { - font-size: 10px; - opacity: 0.8; - font-weight: 500; -} - -.preview-modern-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-modern-features { - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-modern-description { - display: flex; - flex-direction: column; - gap: 6px; -} - -/* Luxury Data Overview Styles */ -.luxury-data-grid { - /* Grid removed - using default layout */ - gap: 20px; - margin-top: 25px; -} - -.data-card { - background: linear-gradient(135deg, #fafafa, #f0f0f0); - padding: 25px; - border-radius: 12px; - border: 2px solid #FFD700; - text-align: center; - transition: all 0.3s ease; -} - -.data-card:hover { - transform: translateY(-5px); - box-shadow: 0 15px 30px rgba(255,215,0,0.2); - border-color: #FFA500; -} - -.data-icon { - font-size: 36px; - margin-bottom: 15px; - color: #8B4513; -} - -.data-card h3 { - color: #8B4513; - font-size: 18px; - margin-bottom: 12px; - font-weight: 600; -} - -.data-value { - color: #333; - font-size: 16px; - font-weight: 500; - line-height: 1.4; -} - -/* Luxury Field Overview Styles */ -.luxury-field-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 15px; - margin-top: 25px; -} - -.field-item { - background: white; - padding: 18px 20px; - border-radius: 10px; - border-left: 4px solid #FFD700; - box-shadow: 0 4px 15px rgba(0,0,0,0.08); - display: flex; - justify-content: space-between; - align-items: center; - transition: all 0.3s ease; -} - -.field-item:hover { - transform: translateX(8px); - box-shadow: 0 8px 25px rgba(0,0,0,0.15); -} - -.field-label { - color: #8B4513; - font-weight: 600; - font-size: 14px; -} - -.field-value { - color: #333; - font-weight: 500; - font-size: 14px; - text-align: right; -} - -/* Modern Data Overview Styles */ -.modern-data-grid { - /* Grid removed - using default layout */ - gap: 18px; - margin-top: 25px; -} - -.modern-data-grid .data-card { - background: #f8fafc; - border: 2px solid #e2e8f0; - border-radius: 16px; - padding: 22px; - text-align: center; - transition: all 0.3s ease; -} - -.modern-data-grid .data-card:hover { - transform: translateY(-8px); - box-shadow: 0 20px 40px rgba(0,206,209,0.15); - border-color: #00CED1; - background: white; -} - -.modern-data-grid .data-icon { - font-size: 32px; - margin-bottom: 15px; - color: #00CED1; -} - -.modern-data-grid .data-card h3 { - color: #1e293b; - font-size: 16px; - margin-bottom: 10px; - font-weight: 600; -} - -.modern-data-grid .data-value { - color: #64748b; - font-size: 15px; - font-weight: 500; - line-height: 1.4; -} - -/* Modern Field Overview Styles */ -.modern-field-grid { - /* Grid removed - using default layout */ - gap: 15px; - margin-top: 25px; -} - -.modern-field-grid .field-item { - background: white; - padding: 16px 18px; - border-radius: 12px; - border-left: 4px solid #00CED1; - box-shadow: 0 4px 15px rgba(0,0,0,0.05); - display: flex; - justify-content: space-between; - align-items: center; - transition: all 0.3s ease; -} - -.modern-field-grid .field-item:hover { - transform: translateX(6px); - box-shadow: 0 8px 25px rgba(0,0,0,0.1); -} - -.modern-field-grid .field-label { - color: #1e293b; - font-weight: 600; - font-size: 13px; -} - -.modern-field-grid .field-value { - color: #64748b; - font-weight: 500; - font-size: 13px; - text-align: right; -} - -/* PDF Generation Progress Spinner */ -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.pdf-progress-indicator { - animation: fadeIn 0.3s ease-in; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(-10px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Modern Home Template Preview Styles */ -.template-modern-home { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 280px; -} - -.template-modern-home::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.modern-home-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-hero-section { - height: 65%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; -} - -.preview-hero-image { - width: 100%; - height: 100%; - background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); - background-size: cover; - background-position: center; - opacity: 0.8; -} - -.preview-hero-overlay { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); - padding: 20px; - color: white; -} - -.preview-property-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 5px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-property-address { - font-size: 12px; - opacity: 0.9; - margin-bottom: 8px; -} - -.preview-price { - font-size: 16px; - font-weight: 700; - color: #ffffff; -} - -.preview-content-section { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.preview-stats { - display: flex; - justify-content: space-around; - margin-bottom: 15px; -} - -.preview-stat { - font-size: 11px; - color: #000000; - font-weight: 600; - text-align: center; -} - -.preview-description { - flex-grow: 1; -} - -.preview-title { - font-size: 14px; - font-weight: 700; - color: #000000; - margin-bottom: 8px; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; -} - -/* The Grand Oak Villa Template - Remove border and increase height */ -.template-asgar1 { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 320px; -} - -.template-asgar1::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.asgar1-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-hero { - height: 50%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; -} - -.preview-hero-overlay { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); - padding: 20px; - color: white; -} - -.preview-property-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 5px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-property-address { - font-size: 12px; - opacity: 0.9; -} - -.preview-content { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - gap: 15px; -} - -.preview-section { - background: rgba(255,255,255,0.8); - padding: 15px; - border-radius: 8px; - border-left: 3px solid #f39c12; -} - -.preview-section-title { - font-size: 14px; - font-weight: 700; - color: #000000; - margin-bottom: 8px; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; -} - -.template-preview { - margin-top: auto; - padding: 15px 20px; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 10px; -} - -.feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; -} - -.feature-icon { - font-size: 16px; -} - -.feature-text { - font-size: 10px; - font-weight: 600; - color: #000000; - text-align: center; -} - -/* The Serenity House Template - Remove border and increase height */ -.template-sample { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 280px; -} - -.template-sample::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.sample-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-header { - height: 50%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - color: white; -} - -.preview-triangle { - width: 0; - height: 0; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - border-bottom: 20px solid #f39c12; - margin-bottom: 15px; -} - -.preview-company-name { - font-size: 16px; - font-weight: 700; - margin: 2px 0; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-title { - font-size: 14px; - font-weight: 600; - margin: 8px 0 5px 0; - opacity: 0.9; -} - -.preview-for-sale { - font-size: 12px; - opacity: 0.8; - background: rgba(243, 156, 18, 0.2); - padding: 5px 10px; - border-radius: 15px; -} - -.preview-content { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - gap: 15px; -} - -.preview-section { - background: rgba(255,255,255,0.8); - padding: 15px; - border-radius: 8px; - border-left: 3px solid #f39c12; -} - -.preview-section-title { - font-size: 14px; - font-weight: 700; - color: #000000; - margin-bottom: 8px; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; - margin-bottom: 10px; -} - -.preview-icons { - display: flex; - justify-content: center; - gap: 15px; -} - -.preview-icon { - font-size: 18px; -} - -/* The Vertice Template - Remove border and increase height */ -.template-luxury { - background: white; - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 320px; -} - -.template-luxury::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.luxury-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-luxury-header { - height: 45%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - color: white; -} - -.preview-luxury-logo { - font-size: 18px; - font-weight: 700; - margin-bottom: 8px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-luxury-title { - font-size: 14px; - font-weight: 600; - margin-bottom: 5px; - opacity: 0.9; -} - -.preview-luxury-subtitle { - font-size: 12px; - opacity: 0.8; - background: rgba(243, 156, 18, 0.2); - padding: 5px 10px; - border-radius: 15px; -} - -.preview-luxury-content { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - gap: 15px; -} - -.preview-luxury-features { - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-feature { - background: rgba(255,255,255,0.8); - padding: 10px 15px; - border-radius: 6px; - font-size: 12px; - font-weight: 600; - color: #000000; - border-left: 3px solid #f39c12; -} - -.preview-luxury-description { - background: rgba(255,255,255,0.8); - padding: 15px; - border-radius: 8px; - border-left: 3px solid #f39c12; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; - margin-bottom: 5px; -} - -.preview-text:last-child { - margin-bottom: 0; -} - -.template-preview { - margin-top: auto; - padding: 15px 20px; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 10px; -} - -.feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; -} - -.feature-icon { - font-size: 16px; -} - -.feature-text { - font-size: 10px; - font-weight: 600; - color: #000000; - text-align: center; -} - -/* Table Dialog Styles */ -.table-dialog-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease; -} - -.table-dialog-modal { - background: white; - border-radius: 20px; - width: 90%; - max-width: 500px; - max-height: 85vh; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 8px 32px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - animation: slideUp 0.3s ease; -} - -.table-dialog-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem 2rem; - border-bottom: 1px solid #e5e7eb; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 20px 20px 0 0; -} - -.table-dialog-header h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.table-dialog-content { - padding: 2rem; -} - -.table-dialog-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e5e7eb; - background: #f9fafb; -} - -.table-options { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.table-input { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid #d1d5db; - border-radius: 8px; - font-size: 1rem; - font-family: 'Inter Variable', 'Inter', sans-serif; - transition: border-color 0.3s ease, box-shadow 0.3s ease; -} - -.table-input:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -/* Table Styles in Editor */ -.inserted-table { - border-collapse: collapse; - width: 100%; - margin: 1rem 0; - border: 1px solid #ddd; - font-family: 'Inter Variable', 'Inter', sans-serif; - font-size: 0.9rem; -} - -.inserted-table th, -.inserted-table td { - border: 1px solid #ddd; - padding: 8px; - text-align: left; -} - -.inserted-table th { - background-color: #f2f2f2; - font-weight: 600; -} - -.inserted-table tr:nth-child(even) { - background-color: #f9f9f9; -} - -.inserted-table tr:hover { - background-color: #f0f4ff; -} - -/* Mobile Responsive for Table Dialog */ -@media (max-width: 768px) { - .table-dialog-modal { - width: 95%; - max-height: 90vh; - } - - .table-dialog-header, - .table-dialog-content, - .table-dialog-actions { - padding: 1rem; - } - - .table-options { - gap: 1rem; - } -} diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css index 2c526d5..5991ea5 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css @@ -5751,6 +5751,30 @@ color: white; } +.doc-action-btn.undo-btn { + background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); + border-color: #9ca3af; + color: #374151; +} + +.doc-action-btn.undo-btn:hover { + background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); + border-color: #6b7280; + color: #111827; +} + +.doc-action-btn.redo-btn { + background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); + border-color: #9ca3af; + color: #374151; +} + +.doc-action-btn.redo-btn:hover { + background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); + border-color: #6b7280; + color: #111827; +} + /* Generate PDF Section in Template Header */ .generate-pdf-section { display: flex; @@ -6474,28 +6498,7 @@ flex-shrink: 0; } -/* Scroll hint for areas */ -.scroll-hint { - position: absolute; - bottom: 10px; - left: 50%; - transform: translateX(-50%); - background: rgba(102, 126, 234, 0.1); - color: #667eea; - padding: 4px 12px; - border-radius: 12px; - font-size: 11px; - font-weight: 500; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; - z-index: 5; -} -.enhanced-toolbar:hover .scroll-hint, -.editor-right:hover .scroll-hint { - opacity: 1; -} /* Enhanced visual feedback for scrollable areas */ .enhanced-toolbar-scroll:hover, @@ -8131,3 +8134,293 @@ button, .btn, .toolbar-button, .export-pdf-btn { gap: 1rem; } } + +/* Draggable Table Button Styles */ +.draggable-table-btn { + position: relative; + transition: all 0.2s ease; +} + +.draggable-table-btn:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); +} + +.draggable-table-btn:active { + cursor: grabbing; + transform: scale(0.95); +} + +.draggable-table-btn.dragging { + opacity: 0.5; + transform: rotate(5deg); +} + +/* Editor Drag Over Styles */ +.enhanced-editor-content.drag-over { + background: linear-gradient(45deg, #f0f4ff 25%, transparent 25%), + linear-gradient(-45deg, #f0f4ff 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #f0f4ff 75%), + linear-gradient(-45deg, transparent 75%, #f0f4ff 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; + border: 2px dashed #4f46e5; + border-radius: 8px; +} + +/* Table Drop Indicator */ +.table-drop-indicator { + position: absolute; + border: 2px dashed #4f46e5; + background: rgba(79, 70, 229, 0.1); + border-radius: 4px; + pointer-events: none; + z-index: 1000; + display: none; +} + +.table-drop-indicator.show { + display: block; +} + +/* Editable Table Container Styles */ +.editable-table-container { + position: relative; + margin: 1rem 0; + border: 2px solid transparent; + border-radius: 8px; + transition: all 0.2s ease; +} + +.editable-table-container:hover { + border-color: #4f46e5; + box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); +} + +.editable-table-container.dragging { + opacity: 0.5; + transform: rotate(2deg); + z-index: 1000; +} + +/* Table Controls */ +.table-controls { + position: absolute; + top: -40px; + left: 0; + background: white; + border: 1px solid #e2e8f0; + border-radius: 8px; + padding: 0.5rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + display: flex; + gap: 0.5rem; + opacity: 0; + transition: opacity 0.2s ease; + z-index: 100; +} + +.editable-table-container:hover .table-controls { + opacity: 1; +} + +.table-control-group { + display: flex; + gap: 0.25rem; + align-items: center; +} + +.table-control-group:not(:last-child) { + border-right: 1px solid #e2e8f0; + padding-right: 0.5rem; + margin-right: 0.5rem; +} + +.table-control-btn { + background: #f8fafc; + border: 1px solid #e2e8f0; + border-radius: 4px; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + font-weight: 500; + color: #475569; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; + user-select: none; +} + +.table-control-btn:hover { + background: #e2e8f0; + border-color: #cbd5e1; + color: #334155; + transform: translateY(-1px); +} + +.table-control-btn:active { + transform: translateY(0); + background: #cbd5e1; +} + +.table-control-btn.delete { + background: #fef2f2; + border-color: #fecaca; + color: #dc2626; +} + +.table-control-btn.delete:hover { + background: #fee2e2; + border-color: #fca5a5; + color: #b91c1c; +} + +.table-control-btn.delete:active { + background: #fecaca; +} + +/* Table Container Drag Styles */ +.editable-table-container[draggable="true"] { + cursor: move; +} + +.editable-table-container[draggable="true"]:hover { + cursor: grab; +} + +.editable-table-container[draggable="true"]:active { + cursor: grabbing; +} + +/* Prevent text selection on controls */ +.table-controls * { + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +/* Responsive table controls */ +@media (max-width: 768px) { + .table-controls { + position: relative; + top: 0; + left: 0; + opacity: 1; + margin-bottom: 0.5rem; + flex-wrap: wrap; + } + + .table-control-btn { + font-size: 0.6875rem; + padding: 0.25rem 0.375rem; + } + + .table-control-group:not(:last-child) { + border-right: none; + padding-right: 0; + margin-right: 0; + border-bottom: 1px solid #e2e8f0; + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + } +} + +/* Draggable and resizable image styles */ +img[draggable="true"] { + position: relative; + z-index: 1000; + cursor: move; +} + +.resize-handle { + position: absolute; + width: 8px; + height: 8px; + background: #007bff; + border: 1px solid white; + z-index: 1001; +} + +.resize-handle.resize-nw { + top: -4px; + left: -4px; + cursor: nw-resize; +} + +.resize-handle.resize-ne { + top: -4px; + right: -4px; + cursor: ne-resize; +} + +.resize-handle.resize-sw { + bottom: -4px; + left: -4px; + cursor: sw-resize; +} + +.resize-handle.resize-se { + bottom: -4px; + right: -4px; + cursor: se-resize; +} + +/* Selector mode styles */ +.enhanced-editor-content.selector-mode { + cursor: crosshair; +} + +.selector-options-panel { + position: fixed; + top: 10px; + right: 10px; + background: white; + border: 2px solid #007bff; + border-radius: 8px; + padding: 15px; + box-shadow: 0 4px 20px rgba(0,0,0,0.15); + z-index: 10000; + min-width: 200px; + max-width: 250px; +} + +.property-image-popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + border: 2px solid #007bff; + border-radius: 8px; + padding: 20px; + box-shadow: 0 4px 20px rgba(0,0,0,0.15); + z-index: 10001; + max-width: 400px; + max-height: 500px; + overflow-y: auto; +} + +/* Bullet and numbering styles */ +ul, ol { + list-style-type: none; + padding-left: 0; +} + +ul li, ol li { + margin-left: 20px; + position: relative; +} + +ul li:before { + content: "* "; + position: absolute; + left: -20px; +} + +ol li:before { + content: "1. "; + position: absolute; + left: -20px; +} + + diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css.backup b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css.backup deleted file mode 100644 index 2c526d5..0000000 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css.backup +++ /dev/null @@ -1,8133 +0,0 @@ -.property-brochure-generator { - /* International Standard Font Stack - 2024 Best Practices */ - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, 'Roboto', 'Helvetica Neue', Arial, sans-serif; - background: - radial-gradient(circle at 20% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%), - linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 50%, #cbd5e1 100%); - min-height: 100vh; - padding: 0; - margin: 0; - /* Industry Standard Base Font Size - 16px (1rem) */ - font-size: 1rem; - /* Optimal Line Height for Readability (WCAG AA) */ - line-height: 1.5; - /* Modern Letter Spacing for Digital Displays */ - letter-spacing: -0.011em; - /* Advanced Typography Features */ - font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'cv02' 1, 'cv03' 1, 'cv04' 1; - font-variation-settings: 'slnt' 0; - font-optical-sizing: auto; - /* High-DPI Display Optimization */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -/* Header Section */ -.header-section { - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), - linear-gradient(135deg, #4f46e5 0%, #7c3aed 25%, #ec4899 75%, #f97316 100%); - padding: 4rem 2rem; - text-align: center; - margin-bottom: 0; - position: relative; - overflow: hidden; - border-radius: 24px; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(79, 70, 229, 0.15), - 0 20px 60px rgba(124, 58, 237, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.1); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} - - - - - - - -.header-content { - max-width: 1200px; - margin: 0 auto; - position: relative; - z-index: 3; -} - - - - - -/* Beautiful Purple Gradient Header for All Steps */ -.step-header-gradient { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 0 0 20px 20px; - padding: 40px 30px; - margin: 0 0 30px 0; - text-align: center; - box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); - position: relative; - overflow: hidden; -} - -.step-header-gradient::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - pointer-events: none; -} - -.main-title { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - /* International Standard: Display Large (3rem = 48px) */ - font-size: 3rem; - font-weight: 700; - margin: 0 0 1rem 0; - /* Optimal Letter Spacing for Large Headings */ - letter-spacing: -0.025em; - position: relative; - z-index: 3; - /* WCAG AA Compliant Line Height for Headings */ - line-height: 1.2; - color: white; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - /* Variable Font Weight for Modern Browsers */ - font-variation-settings: 'wght' 700; -} - - - - - -.subtitle { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - /* International Standard: Title Medium (1.25rem = 20px) */ - font-size: 1.25rem; - font-weight: 400; - margin: 0; - position: relative; - z-index: 3; - color: rgba(255, 255, 255, 0.9); - /* Moderate Letter Spacing for Subheadings */ - letter-spacing: 0.015em; - text-transform: uppercase; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - /* WCAG AA Line Height */ - line-height: 1.4; - font-variation-settings: 'wght' 400; -} - -.header-features { - display: flex; - justify-content: center; - gap: 1rem; - flex-wrap: wrap; -} - -.feature-badge { - background: rgba(255, 255, 255, 0.2); - padding: 0.5rem 1.5rem; - border-radius: 25px; - font-size: 0.9rem; - font-weight: 500; - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* Error Message */ -.error-message { - background: #fee; - border: 1px solid #fcc; - color: #c33; - padding: 1rem; - margin: 1rem 2rem; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: space-between; -} - -.error-content { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.error-close { - background: none; - border: none; - color: #c33; - font-size: 1.5rem; - cursor: pointer; - padding: 0; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; -} - -/* Step Navigation */ -.step-navigation { - display: flex; - justify-content: center; - gap: 2rem; - padding: 2rem; - background: rgba(255, 255, 255, 0.95); - margin: 0 2rem 0 2rem; - border-radius: 20px; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - margin-top: 0; - margin-bottom: 0; -} - -.step-nav-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - cursor: pointer; - padding: 1rem; - border-radius: 8px; - transition: all 0.3s ease; - min-width: 120px; -} - -.step-nav-item:hover { - background: #f8f9fa; -} - -.step-nav-item.active { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%); - color: white; - transform: translateY(-2px) scale(1.05); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 8px 32px rgba(79, 70, 229, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.step-number { - width: 40px; - height: 40px; - border-radius: 50%; - background: #e9ecef; - color: #6c757d; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 1.1rem; - transition: all 0.3s ease; -} - -.step-nav-item.active .step-number { - background: rgba(255, 255, 255, 0.2); - color: white; -} - -.step-label { - font-size: 0.9rem; - font-weight: 500; - text-align: center; -} - -/* Step Content */ -.step-content { - display: none; - max-width: 1400px; - margin: 0 auto 0 auto; - padding: 0 3rem 2rem 3rem; -} - -.step-content.active { - display: block; - animation: fadeInUp 0.5s ease; -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Elegant Flow Animation */ -@keyframes elegantFlow { - 0% { - background-position: 0% 50%; - } - 25% { - background-position: 50% 25%; - } - 50% { - background-position: 100% 50%; - } - 75% { - background-position: 50% 75%; - } - 100% { - background-position: 0% 50%; - } -} - -.step-header { - text-align: center; - margin-bottom: 3rem; -} - -.step-header h2 { - font-family: Georgia, 'Times New Roman', Times, serif; - font-size: 3.2rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; - letter-spacing: -0.02em; - line-height: 1.2; -} - -.step-header p { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 1.3rem; - color: #6c757d; - margin: 0; - font-weight: 500; - letter-spacing: 0.01em; -} - -/* Template Grid - Enhanced styling with A4 proportions */ -.template-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); - gap: 35px; - padding: 40px 20px; - max-width: 1600px; - margin: 0 auto; -} - -/* Template Cards - Enhanced with A4 proportions and better visibility */ -.template-card { - background: white; - border-radius: 20px; - padding: 20px; /* Further reduced padding to increase content width more */ - cursor: pointer; - transition: all 0.4s ease; - position: relative; - border: 2px solid transparent; - box-shadow: 0 8px 25px rgba(0,0,0,0.12); - overflow: hidden; - min-height: 420px; /* A4-like height */ - display: flex; - flex-direction: column; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - width: 100%; /* Ensure full width usage */ -} - -.template-card:hover { - transform: translateY(-10px); - box-shadow: 0 15px 40px rgba(0,0,0,0.18); - border-color: #667eea; -} - -.template-card.selected { - border-color: #667eea; - box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); - transform: translateY(-6px); -} - -/* Template Heights with A4 proportions */ -.template-tall { - min-height: 800px; /* Increased from 700px */ - padding: 25px 20px; /* Further reduced padding to increase content width more */ -} - -.template-medium { - min-height: 650px; /* Increased from 550px */ - padding: 20px 15px; /* Further reduced padding to increase content width more */ -} - -.template-small { - min-height: 550px; /* Increased from 480px */ - padding: 15px 10px; /* Further reduced padding to increase content width more */ -} - -/* Enhanced Template Content Styles */ -.template-content { - flex: 1; - display: flex; - flex-direction: column; - height: 100%; - color: #333; - line-height: 1.6; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -/* Newsletter Style Template - Enhanced */ -.newsletter-style { - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-style::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 120px; - height: 120px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 50%; - transform: translate(30px, -30px); - opacity: 0.1; - z-index: 0; -} - -.newsletter-style > * { - position: relative; - z-index: 1; -} - -.newsletter-header h2 { - color: #667eea; - font-size: 22px; - margin-bottom: 25px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-main h1 { - color: #2c3e50; - font-size: 32px; - margin-bottom: 25px; - font-weight: 800; - line-height: 1.2; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-main p { - color: #5a6c7d; - font-size: 17px; - margin-bottom: 30px; - font-weight: 500; - line-height: 1.6; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-section h4 { - color: #667eea; - font-size: 20px; - margin-bottom: 18px; - font-weight: 600; - text-transform: uppercase; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.newsletter-section p { - color: #6c757d; - font-size: 16px; - margin-bottom: 30px; - line-height: 1.6; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.cta-buttons { - margin-top: auto; -} - -.cta-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - padding: 15px 35px; - border-radius: 25px; - font-size: 17px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.cta-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); -} - -/* Modern Home Template - Enhanced with Image */ -.modern-home-preview { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.modern-home-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100px; - height: 100px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.modern-home-preview > * { - position: relative; - z-index: 1; -} - -.preview-hero-section { - position: relative; - height: 160px; - border-radius: 12px; - overflow: hidden; - margin-bottom: 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-hero-image { - width: 100%; - height: 100%; - background: linear-gradient(45deg, #667eea, #764ba2); - position: relative; -} - -.preview-hero-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.2); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - padding: 30px; -} - -.preview-property-name { - font-size: 22px; - font-weight: 700; - margin-bottom: 10px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-property-address { - font-size: 16px; - opacity: 0.9; - margin-bottom: 12px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-price { - font-size: 24px; - font-weight: 800; - color: #ffd700; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-content-section { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-stats { - display: flex; - justify-content: space-around; - gap: 15px; - margin-bottom: 20px; -} - -.preview-stat { - background: #f8f9fa; - padding: 12px 18px; - border-radius: 20px; - font-size: 15px; - font-weight: 600; - color: #495057; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-description { - background: #f8f9fa; - padding: 20px; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); -} - -.preview-title { - font-size: 18px; - font-weight: 700; - color: #495057; - margin-bottom: 12px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-text { - font-size: 16px; - color: #6c757d; - line-height: 1.5; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 15px; - margin-top: auto; -} - -.feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; -} - -.feature-icon { - font-size: 24px; -} - -.feature-text { - font-size: 14px; - font-weight: 600; - color: #495057; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -/* Asgar1 Template - Enhanced with Image and Fixed Viewport */ -.asgar1-preview { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.asgar1-preview::before { - content: ''; - position: absolute; - top: 20px; - right: 20px; - width: 120px; - height: 120px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.asgar1-preview > * { - position: relative; - z-index: 1; -} - -.preview-hero { - height: auto; - background: none; /* Removed background completely */ - border-radius: 0; - margin-bottom: 30px; - position: relative; - overflow: visible; - box-shadow: none; /* Removed shadow */ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 20px; /* Added top margin to bring title into viewport */ - padding: 20px 0; -} - -.preview-hero-overlay { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; - padding: 20px; - width: 100%; - height: 100%; -} - -.preview-property-name { - font-size: 28px; - font-weight: 800; - margin-bottom: 15px; - text-shadow: none; /* Removed shadow since no background */ - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ff8c00; /* Orange color for title */ - line-height: 1.2; - padding: 0 10px; - word-wrap: break-word; - max-width: 100%; - text-transform: uppercase; - letter-spacing: 1px; -} - -.preview-property-address { - font-size: 15px; - opacity: 0.95; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.2; - padding: 0 10px; - word-wrap: break-word; - max-width: 100%; -} - -.preview-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-section { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section-title { - font-size: 17px; - font-weight: 700; - color: #2c3e50; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-text { - font-size: 15px; - color: #6c757d; - line-height: 1.5; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.template-preview { - margin-top: auto; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 15px; -} - -/* Sample Template - Enhanced with Image and Orange Text */ -.sample-preview { - background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.sample-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 100px; - height: 100px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.sample-preview > * { - position: relative; - z-index: 1; -} - -.preview-header { - text-align: center; - margin-bottom: 30px; - position: relative; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed from black to beautiful blue-purple gradient */ - border-radius: 12px; - padding: 20px; /* Reduced padding to increase width more */ - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-triangle { - width: 0; - height: 0; - border-left: 20px solid transparent; - border-right: 20px solid transparent; - border-bottom: 26px solid #ff8c00; /* Changed to orange to match text color */ - margin: 0 auto 20px; -} - -.preview-company-name { - font-size: 22px; - font-weight: 800; - color: #ffffff; /* Changed to white as requested */ - line-height: 1.2; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 2px 4px rgba(0,0,0,0.3); -} - -.preview-title { - font-size: 24px; - font-weight: 700; - color: #ffffff !important; /* Changed to white as requested with !important */ - margin: 15px 0; - text-transform: uppercase; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 2px 4px rgba(0,0,0,0.3); -} - -.preview-for-sale { - font-size: 16px; - font-weight: 600; - color: #ffffff; /* Changed to white for better contrast on gradient */ - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - text-shadow: 0 1px 3px rgba(0,0,0,0.4); -} - -.preview-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-section { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #fed7d7; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section-title { - font-size: 17px; - font-weight: 700; - color: #2d3748; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-icons { - display: flex; - justify-content: center; - gap: 20px; - margin-top: 15px; -} - -.preview-icon { - font-size: 28px; - filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); -} - -/* Luxury Template - Enhanced with Better Text Visibility */ -.luxury-preview { - background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); - border-radius: 16px; - padding: 20px; /* Further reduced padding to increase content width more */ - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.luxury-preview::before { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 120px; - height: 120px; - background: url('data:image/svg+xml,') no-repeat center; - background-size: contain; - z-index: 0; -} - -.luxury-preview > * { - position: relative; - z-index: 1; -} - -.preview-luxury-header { - text-align: center; - margin-bottom: 35px; - padding: 20px; /* Reduced padding to increase width */ - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Changed to blue-purple gradient to match 4th grid */ - border-radius: 12px; - color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - position: relative; - overflow: hidden; -} - -.preview-luxury-header::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - pointer-events: none; -} - -.preview-luxury-logo { - font-size: 24px; - font-weight: 800; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 1px; - position: relative; - z-index: 1; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ffffff; /* All text should be white as shown in image */ - text-shadow: 0 2px 4px rgba(0,0,0,0.3); -} - -.preview-luxury-title { - font-size: 18px; - font-weight: 600; - margin-bottom: 8px; - opacity: 0.95; - position: relative; - z-index: 1; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ffffff; /* Changed to white for better contrast on gradient */ - text-shadow: 0 1px 3px rgba(0,0,0,0.4); -} - -.preview-luxury-subtitle { - font-size: 16px; - opacity: 0.9; - position: relative; - z-index: 1; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #ffffff; /* Changed to white for better contrast on gradient */ - text-shadow: 0 1px 3px rgba(0,0,0,0.4); -} - -.preview-luxury-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; -} - -.preview-luxury-features { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 15px; - margin-bottom: 20px; -} - -.preview-feature { - background: white; - padding: 15px; - border-radius: 10px; - font-size: 15px; - font-weight: 600; - color: #2d3748; - text-align: center; - border: 1px solid #e2e8f0; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.preview-luxury-description { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #e2e8f0; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section { - background: white; - padding: 20px; - border-radius: 12px; - border: 1px solid #e2e8f0; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -.preview-section-title { - font-size: 17px; - font-weight: 700; - color: #2d3748; - margin-bottom: 12px; - text-transform: uppercase; - letter-spacing: 0.5px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.template-preview { - margin-top: auto; -} - -/* Selected Indicator - Enhanced */ -.selected-indicator { - position: absolute; - top: 15px; - right: 15px; - background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); - color: white; - padding: 12px 20px; - border-radius: 25px; - font-size: 14px; - font-weight: 600; - display: flex; - align-items: center; - gap: 8px; - box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4); - animation: slideIn 0.3s ease; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.selected-icon { - font-size: 16px; -} - -.selected-text { - text-transform: uppercase; - letter-spacing: 0.5px; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateX(20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -/* Template-specific styling - Exact colors from image with enhanced shadows */ -.template-everkind { - background: #f8f9fa; - border: 1px solid #e9ecef; - box-shadow: 0 6px 20px rgba(0,0,0,0.1); - padding: 35px 30px; -} - -.template-shift { - background: #e8f4fd; - border: 1px solid #d1ecf1; - box-shadow: 0 8px 25px rgba(0,0,0,0.12); - padding: 35px 30px; -} - -.template-saintbarts { - background: #fff5f5; - border: 1px solid #fed7d7; - box-shadow: 0 7px 22px rgba(0,0,0,0.11); - padding: 35px 30px; -} - -.template-learnoy { - background: #f0fff4; - border: 1px solid #c6f6d5; - box-shadow: 0 5px 18px rgba(0,0,0,0.09); - padding: 35px 30px; -} - -.template-leafamp { - background: #faf5ff; - border: 1px solid #e9d8fd; - box-shadow: 0 6px 20px rgba(0,0,0,0.1); - padding: 35px 30px; -} - -.template-coreshift { - background: #fffaf0; - border: 1px solid #feebc8; - box-shadow: 0 7px 22px rgba(0,0,0,0.11); - padding: 35px 30px; -} - -.template-pdf2html { - background: #f0f8ff; - border: 1px solid #b3d9ff; - box-shadow: 0 6px 20px rgba(0,0,0,0.12); - padding: 35px 30px; -} - -/* Template Content Styles */ -.template-content { - flex: 1; - display: flex; - flex-direction: column; - height: 100%; -} - -/* Newsletter Style Template */ -.newsletter-style { - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; -} - -.newsletter-header h2 { - color: #667eea; - font-size: 18px; - margin-bottom: 15px; - font-weight: 600; -} - -.newsletter-main h1 { - color: #333; - font-size: 24px; - font-weight: 700; - margin-bottom: 10px; - line-height: 1.2; -} - -.newsletter-main p { - color: #666; - font-size: 14px; - line-height: 1.4; -} - -/* Real Estate Flyer Preview Styles */ -.real-estate-flyer-preview { - display: flex; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-left { - flex: 1; - display: flex; - flex-direction: column; - gap: 12px; -} - -.preview-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px; - border-radius: 12px; - position: relative; - min-height: 80px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-triangle { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 20px 20px; - border-color: transparent transparent #555 transparent; -} - -.preview-company { - margin-top: 8px; -} - -.preview-company-name { - font-size: 8px; - font-weight: bold; - margin-bottom: 2px; - opacity: 0.9; -} - -.preview-title { - font-size: 14px; - font-weight: bold; - margin: 8px 0 4px 0; - color: #ffffff !important; -} - -.preview-for-sale { - font-size: 8px; - opacity: 0.8; -} - -.preview-section { - background: white; - padding: 8px; - border-radius: 6px; - border: 1px solid #e0e0e0; -} - -.preview-section-title { - color: #667eea; - font-size: 10px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-text { - color: #666; - font-size: 7px; - line-height: 1.3; - margin-bottom: 6px; -} - -.preview-icons { - display: flex; - gap: 8px; - margin-top: 6px; -} - -.preview-icon { - width: 16px; - height: 16px; - background: linear-gradient(135deg, #667eea, #764ba2); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 8px; -} - -.preview-contact { - color: #667eea; - font-size: 8px; - font-weight: bold; -} - -.preview-right { - flex: 1; - display: flex; - flex-direction: column; - gap: 12px; -} - -.preview-image-placeholder { - background: repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 8px 8px; - height: 60px; - display: flex; - align-items: center; - justify-content: center; - color: #999; - font-size: 8px; - border-radius: 6px; - border: 1px solid #e0e0e0; -} - -.preview-price-section { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 12px; - border-radius: 6px; - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.preview-price-label { - font-size: 6px; - opacity: 0.8; - margin-bottom: 4px; -} - -.preview-price { - font-size: 12px; - font-weight: bold; - margin-bottom: 8px; -} - -.preview-benefits { - font-size: 8px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-benefit { - font-size: 6px; - margin-bottom: 3px; - display: flex; - align-items: center; - gap: 4px; -} - -.preview-website { - font-size: 6px; - opacity: 0.8; - text-align: center; - margin-top: auto; -} - -/* Blank Template - Black theme */ -.template-blank { - background: #2c3e50; - border: 1px solid #34495e; - box-shadow: 0 8px 25px rgba(0,0,0,0.2); - padding: 30px 25px; - color: white; -} - -.template-blank .newsletter-style { - color: white; -} - -.template-blank .newsletter-header h2 { - color: #ecf0f1; -} - -.template-blank .newsletter-main h1 { - color: #bdc3c7; -} - -.template-blank .newsletter-section h4 { - color: #ecf0f1; -} - -.template-blank .newsletter-section p { - color: #bdc3c7; -} - -/* Newsletter Style Templates */ -.newsletter-style { - padding: 30px; - font-family: 'Georgia', 'Times New Roman', serif; - color: #2c3e50; - background: white; -} - -.newsletter-header h2 { - font-size: 1.8rem; - font-weight: 700; - margin: 0 0 20px 0; - color: #34495e; - text-transform: uppercase; - letter-spacing: 2px; -} - -.newsletter-main h1 { - font-size: 2.2rem; - font-weight: 300; - margin: 0 0 15px 0; - color: #2c3e50; - line-height: 1.2; -} - -.newsletter-main h3 { - font-size: 1.4rem; - font-weight: 400; - margin: 0 0 25px 0; - color: #7f8c8d; - letter-spacing: 1px; -} - -.newsletter-main .main-text { - font-size: 1.3rem; - font-weight: 400; - margin: 0 0 20px 0; - color: #2c3e50; - line-height: 1.4; -} - -.newsletter-section { - margin-bottom: 25px; -} - -.newsletter-section h4 { - font-size: 1.1rem; - font-weight: 600; - margin: 0 0 12px 0; - color: #34495e; - text-transform: uppercase; - letter-spacing: 1px; -} - -.newsletter-section p { - font-size: 0.95rem; - font-weight: 400; - margin: 0 0 15px 0; - color: #5a6c7d; - line-height: 1.5; -} - -.newsletter-section h5 { - font-size: 1rem; - font-weight: 500; - margin: 0 0 10px 0; - color: #2c3e50; - line-height: 1.3; -} - -/* Call-to-Action Buttons */ -.cta-buttons { - display: flex; - gap: 12px; - flex-wrap: wrap; - margin-top: 15px; -} - -.cta-btn { - background: #2c3e50; - color: white; - border: none; - padding: 10px 16px; - border-radius: 4px; - font-size: 0.85rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.cta-btn:hover { - background: #34495e; - transform: translateY(-1px); -} - -/* Episode Sections */ -.episode { - margin-bottom: 20px; - padding: 15px; - background: #f8f9fa; - border-radius: 6px; - border-left: 3px solid #3498db; -} - -.episode h5 { - margin-bottom: 12px; -} - -/* Destinations */ -.destinations { - display: flex; - gap: 15px; - margin-top: 10px; -} - -.destination { - background: #ecf0f1; - color: #2c3e50; - padding: 8px 16px; - border-radius: 20px; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; -} - -/* Template Content */ -.template-content { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.template-icon { - font-size: 3rem; - text-align: center; - margin-bottom: 1rem; -} - -.template-content h3 { - font-size: 1.8rem; - font-weight: 600; - margin: 0 0 1rem 0; - line-height: 1.2; - text-align: center; -} - -.template-content p { - font-size: 1rem; - margin: 0 0 1.5rem 0; - opacity: 0.9; - line-height: 1.5; - text-align: center; - flex-grow: 1; -} - -.template-meta { - display: flex; - justify-content: center; - gap: 0.5rem; - flex-wrap: wrap; -} - -.category, .style { - background: rgba(255, 255, 255, 0.2); - padding: 0.3rem 0.8rem; - border-radius: 15px; - font-size: 0.8rem; - font-weight: 500; - backdrop-filter: blur(10px); -} - -/* Selected Indicator - Enhanced positioning */ -.selected-indicator { - position: absolute; - top: 20px; - right: 20px; - background: #667eea; - color: white; - padding: 10px 15px; - border-radius: 25px; - font-size: 0.85rem; - font-weight: 600; - display: flex; - align-items: center; - gap: 6px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); - z-index: 100; - opacity: 1; - visibility: visible; - backdrop-filter: blur(10px); -} - -.selected-icon { - font-size: 1.1rem; - color: white; -} - -.selected-text { - color: white; - font-weight: 600; -} - -/* Ensure selected state is visible */ -.template-card.selected .selected-indicator { - opacity: 1; - visibility: visible; - display: flex; -} - -/* Step Actions */ -.step-actions { - display: flex; - justify-content: center; - gap: 1.5rem; - margin-top: 3rem; - margin-bottom: 3rem; - padding: 2rem 0; - position: relative; -} - -.step-actions::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 4px; - background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent); - border-radius: 2px; -} - -.btn { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - padding: 1rem 2.5rem; - border: none; - border-radius: 16px; - /* Standard Button Font Size (Body Medium) */ - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - gap: 0.75rem; - text-decoration: none; - min-width: 140px; - justify-content: center; - /* Optimized Letter Spacing for Buttons */ - letter-spacing: 0.005em; - text-transform: none; - position: relative; - overflow: hidden; - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - will-change: transform, box-shadow; - transform: translateZ(0); - /* Button Line Height Standard */ - line-height: 1.3; - font-variation-settings: 'wght' 500; -} - -.btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); - transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); -} - -.btn:hover::before { - left: 100%; -} - -.btn-primary { - background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%); - color: white; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 8px 32px rgba(79, 70, 229, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-1px) scale(1.02); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 12px 40px rgba(79, 70, 229, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #f472b6 100%); -} - -.btn-primary:active { - transform: translateY(0) scale(0.98); - transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); -} - -.btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; - transform: none; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); - background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); -} - -.btn-secondary { - background: rgba(255, 255, 255, 0.9); - color: #374151; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -.btn-secondary:hover { - background: rgba(255, 255, 255, 1); - color: #1f2937; - transform: translateY(-1px) scale(1.02); - border: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 2px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 1); -} - -.btn-secondary:active { - transform: translateY(0) scale(0.98); - transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); -} - -.btn-icon { - font-size: 1.1rem; - transition: transform 0.3s ease; -} - -.btn:hover .btn-icon { - transform: translateX(2px); -} - -.btn-secondary:hover .btn-icon { - transform: translateX(-2px); -} - -/* Image Replacement Modal Styles */ -.image-replacement-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease; -} - -.image-replacement-modal { - background: white; - border-radius: 20px; - width: 90%; - max-width: 800px; - max-height: 85vh; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 8px 32px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - animation: slideUp 0.3s ease; -} - -.image-replacement-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem 2rem; - border-bottom: 1px solid #e5e7eb; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 20px 20px 0 0; -} - -.image-replacement-header h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter', sans-serif; -} - -.image-replacement-content { - padding: 2rem; - max-height: 60vh; - overflow-y: auto; -} - -/* Source Tabs */ -.source-tabs { - display: flex; - gap: 0.5rem; - margin-bottom: 2rem; - border-bottom: 2px solid #f1f5f9; -} - -.source-tab { - padding: 0.75rem 1.5rem; - border: none; - background: transparent; - font-family: 'Inter', sans-serif; - font-weight: 500; - color: #6b7280; - cursor: pointer; - border-radius: 8px 8px 0 0; - transition: all 0.3s ease; - position: relative; -} - -.source-tab.active { - color: #4f46e5; - background: rgba(79, 70, 229, 0.05); -} - -.source-tab.active::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - right: 0; - height: 2px; - background: #4f46e5; - border-radius: 1px; -} - -/* Category Navigation for Replacement */ -.category-navigation-replacement { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1.5rem; -} - -.category-btn-replacement { - padding: 0.5rem 1rem; - border: 1px solid #e5e7eb; - background: white; - border-radius: 8px; - font-size: 0.875rem; - font-weight: 500; - color: #374151; - cursor: pointer; - transition: all 0.3s ease; - font-family: 'Inter', sans-serif; -} - -.category-btn-replacement:hover { - background: #f3f4f6; - border-color: #d1d5db; -} - -.category-btn-replacement.active { - background: #4f46e5; - color: white; - border-color: #4f46e5; -} - -/* Image Grid */ -.replacement-image-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 1rem; - max-height: 400px; - overflow-y: auto; - padding: 0.5rem; -} - -.replacement-image-item { - border: 2px solid #e5e7eb; - border-radius: 12px; - overflow: hidden; - cursor: pointer; - transition: all 0.3s ease; - background: white; -} - -.replacement-image-item:hover { - border-color: #4f46e5; - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15); -} - -.replacement-thumbnail { - width: 100%; - height: 120px; - object-fit: cover; - display: block; -} - -.replacement-image-info { - padding: 0.75rem; -} - -.replacement-image-title { - font-size: 0.875rem; - font-weight: 500; - color: #1f2937; - margin-bottom: 0.25rem; - font-family: 'Inter', sans-serif; -} - -.replacement-image-category { - font-size: 0.75rem; - color: #6b7280; - font-family: 'Inter', sans-serif; -} - -/* Local Upload Section */ -.local-upload-section { - text-align: center; -} - -.upload-area { - margin-bottom: 2rem; -} - -.upload-dropzone { - border: 2px dashed #d1d5db; - border-radius: 12px; - padding: 3rem 2rem; - cursor: pointer; - transition: all 0.3s ease; - background: #f9fafb; -} - -.upload-dropzone:hover { - border-color: #4f46e5; - background: #f0f4ff; -} - -.upload-icon { - font-size: 3rem; - margin-bottom: 1rem; -} - -.upload-text h4 { - margin: 0 0 0.5rem 0; - font-size: 1.125rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter', sans-serif; -} - -.upload-text p { - margin: 0.25rem 0; - color: #6b7280; - font-family: 'Inter', sans-serif; -} - -.upload-formats { - font-size: 0.875rem; - color: #9ca3af; -} - -.uploaded-preview { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - margin-top: 1.5rem; -} - -.uploaded-image { - max-width: 200px; - max-height: 200px; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -/* Action Buttons */ -.image-replacement-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e5e7eb; - background: #f9fafb; -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translate(-50%, -50%) translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translate(-50%, -50%) translateY(0) scale(1); - } -} - -/* Action Buttons Section */ -.action-buttons-section { - display: flex; - gap: 0.75rem; - align-items: center; - flex-wrap: wrap; -} - -.action-btn { - min-width: 100px; - padding: 0.75rem 1.5rem; - font-size: 0.8rem; -} - -/* Save/Load/HTML Dialog Styles */ -.save-dialog-overlay, -.load-dialog-overlay, -.html-dialog-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease; -} - -.save-dialog-modal, -.load-dialog-modal, -.html-dialog-modal { - background: white; - border-radius: 20px; - width: 90%; - max-width: 600px; - max-height: 85vh; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 8px 32px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - animation: slideUp 0.3s ease; -} - -.save-dialog-header, -.load-dialog-header, -.html-dialog-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem 2rem; - border-bottom: 1px solid #e5e7eb; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 20px 20px 0 0; -} - -.save-dialog-header h3, -.load-dialog-header h3, -.html-dialog-header h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.save-dialog-content, -.load-dialog-content, -.html-dialog-content { - padding: 2rem; - max-height: 50vh; - overflow-y: auto; -} - -.save-dialog-actions, -.load-dialog-actions, -.html-dialog-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e5e7eb; - background: #f9fafb; -} - -/* Save Dialog Specific Styles */ -.input-group { - margin-bottom: 1.5rem; -} - -.input-label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: #374151; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.template-name-input { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid #d1d5db; - border-radius: 8px; - font-size: 1rem; - font-family: 'Inter Variable', 'Inter', sans-serif; - transition: border-color 0.3s ease, box-shadow 0.3s ease; -} - -.template-name-input:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -/* Load Dialog Specific Styles */ -.saved-templates-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.saved-template-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - border: 1px solid #e5e7eb; - border-radius: 12px; - cursor: pointer; - transition: all 0.3s ease; - background: white; -} - -.saved-template-item:hover { - border-color: #4f46e5; - background: #f0f4ff; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); -} - -.template-info { - flex: 1; -} - -.template-name { - font-weight: 600; - color: #1f2937; - margin-bottom: 0.25rem; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.template-meta { - display: flex; - gap: 1rem; - margin-bottom: 0.5rem; - font-size: 0.875rem; - color: #6b7280; -} - -.template-preview { - font-size: 0.8rem; - color: #9ca3af; - max-width: 300px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.delete-template-btn { - background: none; - border: none; - padding: 0.5rem; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.3s ease; - font-size: 1.2rem; - color: #ef4444; -} - -.delete-template-btn:hover { - background: #fef2f2; -} - -.no-templates { - text-align: center; - padding: 2rem; - color: #6b7280; -} - -.no-templates p { - margin: 0.5rem 0; -} - -/* HTML Dialog Specific Styles */ -.html-dialog-modal { - max-width: 800px; - width: 95%; -} - -.html-preview { - width: 100%; -} - -.html-textarea { - width: 100%; - height: 400px; - padding: 1rem; - border: 1px solid #d1d5db; - border-radius: 8px; - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - font-size: 0.875rem; - line-height: 1.4; - background: #f9fafb; - color: #374151; - resize: vertical; -} - -.html-textarea:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -/* Responsive Design for Professional Mobile Experience */ -@media (max-width: 768px) { - .step-actions { - flex-direction: column; - align-items: center; - gap: 1rem; - padding: 1.5rem 0; - } - - .btn { - min-width: 200px; - padding: 1.2rem 2rem; - font-size: 1rem; - } - - .step-navigation { - gap: 1rem; - padding: 1.5rem; - margin: 0 1rem; - } - - .step-nav-item { - min-width: 100px; - padding: 0.8rem; - } - - .header-section { - padding: 3rem 1.5rem; - border-radius: 16px; - margin: 0 1rem; - } - - .main-title { - font-size: 2.5rem; - } - - .subtitle { - font-size: 1.1rem; - } -} - -@media (max-width: 480px) { - .btn { - min-width: 100%; - padding: 1.2rem 1.5rem; - } - - .step-actions { - padding: 1rem 1rem; - } - - .step-navigation { - flex-direction: column; - align-items: center; - gap: 0.5rem; - } - - .step-nav-item { - width: 100%; - max-width: 200px; - } - - /* Image Replacement Modal Responsive */ - .image-replacement-modal { - width: 95%; - max-height: 90vh; - } - - .image-replacement-header, - .image-replacement-content, - .image-replacement-actions { - padding: 1rem; - } - - .replacement-image-grid { - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 0.75rem; - } - - .category-navigation-replacement { - gap: 0.25rem; - } - - .category-btn-replacement { - padding: 0.4rem 0.8rem; - font-size: 0.8rem; - } - - .upload-dropzone { - padding: 2rem 1rem; - } - - /* Save/Load/HTML Dialog Mobile Responsive */ - .action-buttons-section { - flex-direction: column; - gap: 0.5rem; - } - - .action-btn { - width: 100%; - min-width: auto; - } - - .save-dialog-modal, - .load-dialog-modal, - .html-dialog-modal { - width: 95%; - max-height: 90vh; - } - - .save-dialog-header, - .load-dialog-header, - .html-dialog-header, - .save-dialog-content, - .load-dialog-content, - .html-dialog-content, - .save-dialog-actions, - .load-dialog-actions, - .html-dialog-actions { - padding: 1rem; - } - - .html-textarea { - height: 300px; - font-size: 0.8rem; - } - - .template-meta { - flex-direction: column; - gap: 0.25rem; - } -} - -/* Step 2 Content */ -.step2-content { - display: flex; - flex-direction: column; - gap: 1.5rem; - margin-bottom: 1rem; - max-width: 1400px; - margin: 0 auto 1rem auto; - padding: 0 1rem; -} - -/* Step 2 Grid Row 1 - Property Selection and Market Analysis */ -.step2-grid-row-1 { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem; - margin-bottom: 1.5rem; - align-items: start; -} - -/* Step 2 Grid Row 2 - Property Details Full Width */ -.step2-grid-row-2 { - width: 100%; - margin-bottom: 1rem; -} - -/* Property Details Layout Container */ -.property-details-layout { - background: white; - border-radius: 8px; - padding: 1.5rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border: 1px solid #e1e5e9; - margin-bottom: 1rem; -} - -.property-details-layout h3 { - font-family: Georgia, 'Times New Roman', Times, serif; - font-size: 1.9rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; - text-align: center; - letter-spacing: -0.02em; - line-height: 1.2; -} - -/* Property Details Top Row - Two Columns */ -.property-details-top-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; - margin-bottom: 1.5rem; -} - -/* Property Details Top Left and Right */ -.property-details-top-left, -.property-details-top-right { - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Property Details Bottom Row - Enhanced Layout */ -.property-details-bottom-row { - width: 100%; - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Featured Description Section */ -.featured-description { - background: white; - border: 1px solid #e1e5e9; - padding: 1.5rem; - border-radius: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - margin-bottom: 0.5rem; -} - -.featured-description h5 { - font-size: 1.5rem !important; - color: #667eea !important; - margin-bottom: 2rem !important; - display: flex; - align-items: center; - gap: 0.5rem; -} - -/* Description Field Styling */ -.description-title-field .value.description-title { - font-family: Georgia, 'Times New Roman', Times, serif !important; - font-size: 1.5rem !important; - font-weight: 700 !important; - color: #2c3e50 !important; - line-height: 1.4 !important; - text-align: left !important; - margin-bottom: 1rem; -} - -.description-content-field { - margin-top: 1.5rem; -} - -.description-content-field .value.description-content { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; - font-size: 1.1rem !important; - font-weight: 500 !important; - color: #495057 !important; - line-height: 1.8 !important; - text-align: left !important; - padding: 1.5rem; - background: white; - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - white-space: pre-wrap; - word-wrap: break-word; - min-height: 120px; -} - -/* Secondary Information Grid */ -.secondary-info-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; - margin-top: 1rem; -} - -/* Property Section Groups */ -.property-section-group { - background: white; - border-radius: 6px; - padding: 1.5rem; - border: 1px solid #e1e5e9; - margin-bottom: 1rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; -} - -.property-section-group:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -} - -.property-section-group h5 { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.2rem; - font-weight: 700; - color: #2c3e50; - margin: 0 0 1.5rem 0; - text-transform: uppercase; - letter-spacing: 1px; - line-height: 1.3; -} - -/* Simplified Section Styling - All sections have consistent styling */ -.basic-info-section, -.contact-details-section, -.specifications-section, -.pricing-section, -.location-details-section, -.availability-section, -.amenities-section, -.description-section { - border: 1px solid #e1e5e9; -} - -/* Property Grid Layout */ -.property-grid { - display: grid; - grid-template-columns: 1fr; - gap: 0.8rem; -} - -/* Property Field Styling */ -.property-field { - display: flex; - justify-content: space-between; - align-items: flex-start; - padding: 0.8rem 1rem; - background: white; - border-radius: 8px; - border: 1px solid #e9ecef; - transition: all 0.2s ease; -} - -.property-field:hover { - border-color: #667eea; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.property-field .label { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 600; - color: #495057; - font-size: 1.1rem; - min-width: 160px; - margin-right: 1.5rem; - letter-spacing: 0.01em; - line-height: 1.4; -} - -.property-field .value { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: #2c3e50; - font-size: 1.1rem; - font-weight: 500; - text-align: right; - word-break: break-word; - max-width: 250px; - letter-spacing: 0.01em; - line-height: 1.5; -} - -/* Property Description Special Styling */ -.property-description { - display: flex; - flex-direction: column; - gap: 0.8rem; -} - -.property-description .property-field { - flex-direction: column; - align-items: flex-start; - padding: 1rem; -} - -.property-description .property-field .label { - margin-bottom: 0.5rem; - min-width: auto; - margin-right: 0; -} - -.property-description .property-field .value { - text-align: left; - max-width: 100%; - line-height: 1.5; -} - -/* Image Review Section Styling */ -.image-review-section { - background: white; - border-radius: 6px; - padding: 2rem; - margin-top: 1.5rem; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - border: 1px solid #e1e5e9; -} - -.image-review-section h3 { - font-family: 'Playfair Display', Georgia, serif; - font-size: 2.8rem; - font-weight: 800; - margin: 0 0 1.5rem 0; - color: #2c3e50; - text-align: center; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: -0.02em; - line-height: 1.2; -} - -.image-review-section p { - font-family: 'Inter', sans-serif; - color: #6c757d; - text-align: center; - margin-bottom: 2.5rem; - font-size: 1.2rem; - font-weight: 500; - letter-spacing: 0.01em; - line-height: 1.6; -} - -/* Category Navigation for Step 2 - Industry Standard Design */ -.category-navigation-step2 { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.75rem; - margin-bottom: 2rem; - padding: 1.5rem 2rem; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); - border: 1px solid rgba(226, 232, 240, 0.8); - border-radius: 16px; - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} - -.category-btn-step2 { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); - border: 1px solid rgba(226, 232, 240, 0.6); - color: #475569; - padding: 0.875rem 1.75rem; - border-radius: 12px; - font-size: 0.875rem; - font-weight: 500; - font-variation-settings: 'wght' 500; - cursor: pointer; - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - text-transform: capitalize; - letter-spacing: 0.025em; - position: relative; - overflow: hidden; - min-width: 100px; - text-align: center; - box-shadow: - 0 1px 3px 0 rgba(0, 0, 0, 0.1), - 0 1px 2px 0 rgba(0, 0, 0, 0.06); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -.category-btn-step2::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); - transition: left 0.5s ease; - z-index: 1; -} - -.category-btn-step2:hover::before { - left: 100%; -} - -.category-btn-step2:hover { - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); - border-color: rgba(99, 102, 241, 0.3); - color: #334155; - transform: translateY(-2px); - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06), - 0 10px 15px -3px rgba(99, 102, 241, 0.1); -} - -.category-btn-step2.active { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); - border-color: #6366f1; - color: white; - font-weight: 600; - font-variation-settings: 'wght' 600; - transform: translateY(-1px); - box-shadow: - 0 4px 6px -1px rgba(99, 102, 241, 0.4), - 0 2px 4px -1px rgba(99, 102, 241, 0.2), - 0 10px 15px -3px rgba(99, 102, 241, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.2); -} - -.category-btn-step2.active::before { - display: none; -} - -/* Image Display Area for Step 2 - Premium Design */ -.image-display-area-step2 { - background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); - border: 1px solid rgba(226, 232, 240, 0.6); - border-radius: 20px; - padding: 2.5rem; - min-height: 380px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-bottom: 1.5rem; - position: relative; - overflow: hidden; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.image-display-area-step2::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent); -} - -.image-display-area-step2:hover { - transform: translateY(-2px); - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.1), - 0 10px 10px -5px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -.image-container-step2 { - text-align: center; - max-width: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - position: relative; -} - -.property-image-step2 { - max-width: 100%; - max-height: 280px; - width: auto; - border-radius: 16px; - object-fit: cover; - margin-bottom: 1.5rem; - position: relative; - box-shadow: - 0 25px 50px -12px rgba(0, 0, 0, 0.25), - 0 10px 20px -8px rgba(0, 0, 0, 0.1); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid rgba(255, 255, 255, 0.9); -} - -.property-image-step2:hover { - transform: scale(1.02) translateY(-4px); - box-shadow: - 0 35px 60px -12px rgba(0, 0, 0, 0.3), - 0 15px 25px -8px rgba(0, 0, 0, 0.15); -} - -.image-info-step2 { - margin-top: 1.5rem; - padding: 1.5rem 2rem; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%); - border-radius: 16px; - border: 1px solid rgba(226, 232, 240, 0.5); - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - min-width: 300px; -} - -.image-info-step2 h4 { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.25rem; - font-weight: 600; - font-variation-settings: 'wght' 600; - color: #1e293b; - margin: 0 0 0.75rem 0; - letter-spacing: -0.025em; - line-height: 1.4; - text-align: center; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.image-category-step2 { - color: #64748b; - font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; - font-size: 0.875rem; - font-weight: 500; - font-variation-settings: 'wght' 500; - text-transform: uppercase; - letter-spacing: 0.1em; - text-align: center; - padding: 0.5rem 1rem; - background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); - border-radius: 8px; - border: 1px solid rgba(226, 232, 240, 0.6); - display: inline-block; -} - -.no-image-message-step2 { - text-align: center; - color: #64748b; - font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; - font-style: italic; - font-size: 1.125rem; - font-weight: 500; - letter-spacing: 0.025em; - line-height: 1.6; - padding: 3rem 2rem; - background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%); - border-radius: 16px; - border: 2px dashed rgba(203, 213, 225, 0.6); - margin: 2rem 0; -} - -/* Image Navigation for Step 2 - Modern Design */ -.image-navigation-step2 { - display: flex; - justify-content: center; - align-items: center; - gap: 1.5rem; - padding: 1.25rem 2rem; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%); - border-radius: 16px; - margin-top: auto; - border: 1px solid rgba(226, 232, 240, 0.6); - box-shadow: - 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} - -.nav-btn-step2 { - background: linear-gradient(135deg, #64748b 0%, #475569 100%); - border: none; - color: white; - padding: 0.875rem 1.125rem; - border-radius: 12px; - font-size: 1.125rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - justify-content: center; - min-width: 48px; - height: 48px; - position: relative; - overflow: hidden; - box-shadow: - 0 4px 6px -1px rgba(100, 116, 139, 0.4), - 0 2px 4px -1px rgba(100, 116, 139, 0.2); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.nav-btn-step2::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - transition: left 0.6s ease; -} - -.nav-btn-step2:hover::before { - left: 100%; -} - -.nav-btn-step2:hover:not(:disabled) { - background: linear-gradient(135deg, #475569 0%, #334155 100%); - transform: translateY(-2px) scale(1.05); - box-shadow: - 0 10px 15px -3px rgba(100, 116, 139, 0.4), - 0 4px 6px -2px rgba(100, 116, 139, 0.25); -} - -.nav-btn-step2:active:not(:disabled) { - transform: translateY(0) scale(0.98); - box-shadow: - 0 4px 6px -1px rgba(100, 116, 139, 0.4), - 0 2px 4px -1px rgba(100, 116, 139, 0.2); -} - -.nav-btn-step2:disabled { - background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%); - cursor: not-allowed; - transform: none; - opacity: 0.5; - box-shadow: none; -} - -.nav-btn-step2:disabled::before { - display: none; -} - -.nav-icon-step2 { - font-size: 1.125rem; - line-height: 1; -} - -.image-counter-step2 { - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); - padding: 0.75rem 1.5rem; - border-radius: 12px; - font-family: 'Inter Variable', 'Inter', system-ui, sans-serif; - font-weight: 600; - font-variation-settings: 'wght' 600; - color: #475569; - border: 1px solid rgba(226, 232, 240, 0.8); - box-shadow: - 0 2px 4px -1px rgba(0, 0, 0, 0.1), - 0 1px 2px -1px rgba(0, 0, 0, 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - font-size: 0.875rem; - letter-spacing: 0.025em; - min-width: 80px; - text-align: center; -} - -.property-section, .market-analysis-section { - background: white; - padding: 2rem; - border-radius: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - border: 1px solid #e1e5e9; - margin-bottom: 1.5rem; - transition: all 0.2s ease; - height: 100%; - display: flex; - flex-direction: column; -} - -.property-section:hover, .market-analysis-section:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -} - -.property-section h3, .market-analysis-section h3 { - font-family: 'Playfair Display', Georgia, serif; - font-size: 2.2rem; - font-weight: 700; - margin: 0 0 1.5rem 0; - color: #2c3e50; - letter-spacing: -0.01em; - line-height: 1.3; -} - -.property-section p, .market-analysis-section p { - font-family: 'Inter', sans-serif; - color: #6c757d; - margin-bottom: 2rem; - line-height: 1.7; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.01em; -} - -/* Market Analysis Options */ -.market-options { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.checkbox-item { - display: flex; - align-items: center; - gap: 0.8rem; - cursor: pointer; - padding: 1rem; - border-radius: 8px; - transition: all 0.3s ease; - border: 1px solid #e9ecef; - background: #f8f9fa; -} - -.checkbox-item:hover { - background: white; - border-color: #667eea; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.checkbox-item input[type="checkbox"] { - display: none; -} - -.checkmark { - width: 20px; - height: 20px; - border: 2px solid #dee2e6; - border-radius: 4px; - position: relative; - transition: all 0.3s ease; - flex-shrink: 0; -} - -.checkbox-item input[type="checkbox"]:checked + .checkmark { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; -} - -.checkbox-item input[type="checkbox"]:checked + .checkmark::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 14px; - font-weight: bold; -} - -.label-text { - font-family: 'Inter', sans-serif; - font-size: 1.2rem; - color: #2c3e50; - font-weight: 600; - line-height: 1.5; - letter-spacing: 0.01em; -} - -/* Responsive Design for Step 2 */ -@media (max-width: 1200px) { - .step2-grid-row-1 { - grid-template-columns: 1fr; - gap: 2rem; - } - - .property-details-top-row { - grid-template-columns: 1fr; - gap: 2rem; - } -} - -@media (max-width: 768px) { - .step2-content { - padding: 0 1rem; - gap: 2rem; - } - - .property-details-layout { - padding: 1.5rem; - } - - .property-details-layout h3 { - font-size: 2.2rem; - margin-bottom: 2rem; - } - - .image-review-section { - padding: 1.5rem; - } - - .image-review-section h3 { - font-size: 2.2rem; - } - - .category-navigation-step2 { - padding: 1rem 1.5rem; - gap: 0.5rem; - border-radius: 12px; - } - - .category-btn-step2 { - padding: 0.75rem 1.25rem; - font-size: 0.8125rem; - border-radius: 10px; - min-width: 80px; - } - - .image-display-area-step2 { - padding: 1.5rem; - min-height: 320px; - border-radius: 16px; - } - - .property-image-step2 { - max-height: 240px; - border-radius: 12px; - } - - .image-info-step2 { - padding: 1rem 1.5rem; - min-width: 250px; - border-radius: 12px; - } - - .image-info-step2 h4 { - font-size: 1.125rem; - } - - .image-navigation-step2 { - padding: 1rem 1.5rem; - gap: 1rem; - border-radius: 12px; - } - - .nav-btn-step2 { - min-width: 44px; - height: 44px; - padding: 0.75rem 1rem; - border-radius: 10px; - } - - .image-counter-step2 { - padding: 0.625rem 1.25rem; - font-size: 0.8125rem; - border-radius: 10px; - min-width: 70px; - } - - .property-field { - flex-direction: column; - align-items: flex-start; - gap: 0.8rem; - padding: 1rem 1.2rem; - } - - .property-field .label { - min-width: auto; - margin-right: 0; - font-size: 1rem; - } - - .property-field .value { - text-align: left; - max-width: 100%; - font-size: 1rem; - } - - .secondary-info-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .featured-description { - padding: 1.8rem; - } - - .featured-description h5 { - font-size: 1.5rem !important; - } - - .description-title-field .value.description-title { - font-size: 1.4rem !important; - } - - .description-content-field .value.description-content { - font-size: 1.1rem !important; - padding: 1.2rem; - } - - .property-section h3, .market-analysis-section h3 { - font-size: 1.8rem; - } - - .btn { - padding: 1rem 2rem; - font-size: 1rem; - min-width: 140px; - } -} - -.property-dropdown { - width: 100%; - padding: 1rem; - border: 2px solid #e9ecef; - border-radius: 8px; - font-size: 1rem; - background: white; - transition: border-color 0.3s ease; -} - -.property-dropdown:focus { - outline: none; - border-color: #667eea; -} - -/* Editor Container */ -.editor-container { - display: flex; - gap: 20px; - margin-top: 20px; -} - -/* Left Toolbar - Original Layout */ -.editor-toolbar.left { - width: 300px; - flex-shrink: 0; - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - height: fit-content; -} - -.toolbar-section { - margin-bottom: 25px; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 15px; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; - padding-bottom: 5px; -} - -.toolbar-group { - display: flex; - flex-direction: column; - gap: 10px; - margin-bottom: 15px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 10px 15px; - font-size: 13px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 8px; - width: 100%; - box-sizing: border-box; - margin-bottom: 0.5rem; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - -/* Insert Content Section - Fixed Layout */ -.insert-content-section .toolbar-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 5px; -} - -.insert-content-section .toolbar-group:first-child { - grid-template-columns: 1fr 1fr; -} - -.insert-content-section .toolbar-group:last-child { - grid-template-columns: 1fr 1fr; -} - -/* Text Formatting */ -.text-formatting-section .toolbar-group { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; -} - -.text-formatting-section label { - font-size: 12px; - color: #6c757d; - min-width: 80px; -} - -.text-formatting-section select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; - min-width: 120px; - flex: 1; -} - -/* Text Styling */ -.text-styling-section .toolbar-group { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 4px; -} - -.text-styling-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 40px; - font-weight: 600; -} - -/* Text Alignment */ -.text-alignment-section .toolbar-group { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 4px; -} - -.text-alignment-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 40px; -} - -/* Right Editor Area */ -.editor-right { - flex: 1; - background: white; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - min-height: 600px; -} - -/* Preview frame with exact A4 dimensions for accurate PDF generation */ -.preview-frame { - position: relative; - width: 210mm; - height: 297mm; - margin: 0 auto; - padding: 20mm; - border: 2px solid #ddd; - border-radius: 8px; - background: white; - overflow: visible; - box-sizing: border-box; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - transform: scale(0.8); - transform-origin: top center; - /* A4 Content Optimization */ - min-height: 297mm; - max-width: 100%; - word-wrap: break-word; - overflow-wrap: break-word; -} - -/* A4 Content Scaling and Responsiveness */ -.preview-frame * { - max-width: 100%; - box-sizing: border-box; - word-wrap: break-word; - overflow-wrap: break-word; -} - -/* Ensure all content fits within A4 dimensions */ -.preview-frame img, -.preview-frame video, -.preview-frame iframe { - max-width: 100%; - height: auto; - object-fit: contain; -} - -/* A4 Grid Layout Optimization - REMOVED */ - -/* A4 Text Optimization */ -.preview-frame h1 { - font-size: clamp(20px, 4vw, 28px); - line-height: 1.2; - margin-bottom: 15px; -} - -.preview-frame h2 { - font-size: clamp(16px, 3vw, 18px); - line-height: 1.3; - margin-bottom: 12px; -} - -.preview-frame p { - font-size: clamp(12px, 2.5vw, 14px); - line-height: 1.4; - margin-bottom: 10px; -} - -/* A4 page indicator */ -.preview-frame::before { - content: 'A4 Preview (210mm × 297mm)'; - position: absolute; - top: -30px; - left: 50%; - transform: translateX(-50%); - background: #667eea; - color: white; - padding: 5px 15px; - border-radius: 15px; - font-size: 12px; - font-weight: 500; -} - -/* Template Preview Content Styles */ -.preview-left, .preview-right { - flex: 1; - padding: 15px; -} - -.preview-header { - margin-bottom: 20px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px; - border-radius: 12px; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.preview-triangle { - width: 0; - height: 0; - border-left: 20px solid #555; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - margin-bottom: 15px; -} - -.preview-company-name { - font-size: 12px; - font-weight: 600; - color: #ffffff; - margin-bottom: 5px; -} - -.preview-title { - font-size: 20px; - font-weight: 700; - color: #ffffff; - margin-bottom: 5px; -} - -.preview-for-sale { - font-size: 14px; - color: #ffffff; - font-weight: 500; -} - -.preview-section { - margin-bottom: 15px; -} - -.preview-section-title { - font-size: 14px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.preview-text { - font-size: 12px; - color: #666; - line-height: 1.4; - margin-bottom: 10px; -} - -.preview-icons { - display: flex; - gap: 8px; -} - -.preview-icon { - font-size: 16px; -} - -.preview-price-section { - text-align: center; - padding: 15px; - background: rgba(255,255,255,0.9); - border-radius: 8px; -} - -.preview-price-label { - font-size: 10px; - color: #666; - margin-bottom: 5px; -} - -.preview-price { - font-size: 18px; - font-weight: 700; - color: #ff6b35; - margin-bottom: 10px; -} - -.preview-benefits { - font-size: 12px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.preview-benefit { - font-size: 11px; - color: #666; - margin-bottom: 5px; -} - -.preview-website { - font-size: 10px; - color: #999; - margin-top: 10px; -} - -.preview-image-placeholder { - background: #f0f0f0; - height: 120px; - display: flex; - align-items: center; - justify-content: center; - color: #999; - font-size: 12px; - border-radius: 8px; - margin-bottom: 15px; -} - -/* A4 Page Break Indicators */ -.a4-page-break { - page-break-before: always; - break-before: page; - height: 0; - margin: 0; - padding: 0; - border: none; - position: relative; -} - -.a4-page-break div { - text-align: center; - color: #999; - font-size: 12px; - margin: 10px 0; - background: #f8f9fa; - padding: 5px; - border-radius: 4px; - border: 1px dashed #ddd; -} - -/* A4 Content Overflow Handling */ -.preview-frame { - overflow-x: hidden; - overflow-y: auto; -} - -/* Ensure content fits within A4 bounds */ -.preview-frame > * { - max-width: 170mm; /* 210mm - 40mm padding */ - margin-left: auto; - margin-right: auto; -} - -/* Additional Template Preview Styles */ -.asgar1-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-hero { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 8px; - margin-bottom: 20px; - text-align: center; -} - -.preview-hero-overlay { - position: relative; -} - -.preview-property-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 5px; -} - -.preview-property-address { - font-size: 14px; - opacity: 0.9; -} - -.preview-content { - flex: 1; -} - -.preview-section { - background: #f8f9fa; - padding: 15px; - border-radius: 8px; - margin-bottom: 15px; -} - -.preview-section-title { - font-size: 14px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.preview-text { - font-size: 12px; - color: #666; - line-height: 1.4; -} - -/* Luxury and Modern Template Styles */ -.luxury-mansion-preview, -.modern-apartment-preview { - height: 100%; - display: flex; - flex-direction: column; - text-align: center; -} - -.luxury-mansion-preview h2, -.modern-apartment-preview h2 { - font-size: 20px; - font-weight: 700; - margin-bottom: 10px; - color: #333; -} - -.luxury-mansion-preview h3, -.modern-apartment-preview h3 { - font-size: 16px; - color: #666; - margin-bottom: 15px; -} - -.luxury-mansion-preview p, -.modern-apartment-preview p { - font-size: 12px; - color: #888; - line-height: 1.4; - margin-bottom: 10px; -} - -.feature-list { - display: flex; - flex-direction: column; - gap: 8px; - margin: 15px 0; -} - -.feature-item { - display: flex; - align-items: center; - gap: 8px; - font-size: 12px; - color: #555; -} - -.feature-icon { - font-size: 16px; -} - -/* Enhanced Luxury Template Styles */ -.luxury-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-luxury-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-crown { - font-size: 32px; - margin-bottom: 10px; -} - -.preview-luxury-title { - font-size: 18px; - font-weight: 700; - color: #8B4513; - margin-bottom: 5px; -} - -.preview-luxury-subtitle { - font-size: 14px; - color: #A0522D; - font-weight: 500; -} - -.preview-luxury-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-feature { - font-size: 12px; - color: #666; - display: flex; - align-items: center; - gap: 8px; -} - -.preview-luxury-description { - margin-bottom: 20px; -} - -.preview-text { - font-size: 11px; - color: #777; - line-height: 1.4; - margin-bottom: 8px; -} - -/* Enhanced Modern Template Styles */ -.modern-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-modern-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-modern-icon { - font-size: 32px; - margin-bottom: 10px; -} - -.preview-modern-title { - font-size: 18px; - font-weight: 700; - color: #2E86AB; - margin-bottom: 5px; -} - -.preview-modern-subtitle { - font-size: 14px; - color: #A23B72; - font-weight: 500; -} - -.preview-modern-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-modern-description { - margin-bottom: 20px; -} - -/* Serenity Shores Template Styles (sample5.html) */ -.serenity-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-serenity-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-logo { - font-size: 16px; - font-weight: 700; - color: #82A09A; - border: 2px solid #82A09A; - padding: 6px 12px; - display: inline-block; - margin-bottom: 15px; - border-radius: 4px; -} - -.preview-serenity-title { - font-size: 20px; - font-weight: 700; - color: #333; - margin-bottom: 5px; -} - -.preview-serenity-subtitle { - font-size: 14px; - color: #666; - font-weight: 500; -} - -.preview-serenity-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-serenity-description { - margin-bottom: 20px; -} - -/* Prestige Real Estate Template Styles (sample4.html) */ -.prestige-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-prestige-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-prestige-logo { - font-size: 16px; - font-weight: 700; - color: #C0A062; - border: 2px solid #C0A062; - padding: 6px 12px; - display: inline-block; - margin-bottom: 15px; - border-radius: 4px; -} - -.preview-prestige-title { - font-size: 18px; - font-weight: 700; - color: #121212; - margin-bottom: 5px; -} - -.preview-prestige-subtitle { - font-size: 14px; - color: #666; - font-weight: 500; -} - -.preview-prestige-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-prestige-description { - margin-bottom: 20px; -} - -/* Property Brochure Template Styles (sample3.html) */ -.brochure-preview { - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-brochure-header { - text-align: center; - margin-bottom: 20px; -} - -.preview-brochure-icon { - font-size: 32px; - margin-bottom: 10px; -} - -.preview-brochure-title { - font-size: 18px; - font-weight: 700; - color: #003366; - margin-bottom: 5px; -} - -.preview-brochure-subtitle { - font-size: 14px; - color: #666; - font-weight: 500; -} - -.preview-brochure-features { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 20px; -} - -.preview-brochure-description { - margin-bottom: 20px; -} - -/* Template Preview Features */ -.template-preview { - margin-top: auto; - padding-top: 20px; - border-top: 1px solid rgba(0,0,0,0.1); -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 10px; -} - -.preview-features .feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; - text-align: center; -} - -.preview-features .feature-icon { - font-size: 20px; -} - -.preview-features .feature-text { - font-size: 10px; - color: #666; - font-weight: 500; -} - -/* Enhanced padding for last 3 grids */ -.template-serenity, -.template-prestige, -.template-brochure { - padding: 40px 35px; - background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); - border: 2px solid #e9ecef; - position: relative; - min-height: 320px; -} - -.template-serenity::before, -.template-prestige::before, -.template-brochure::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%); - border-radius: 16px; - z-index: -1; -} - -.template-serenity .template-content, -.template-prestige .template-content, -.template-brochure .template-content { - position: relative; - z-index: 1; -} - -/* Responsive Design */ -@media (max-width: 1200px) { - .editor-container { - flex-direction: column; - } - - .editor-toolbar.left { - width: 100%; - order: 2; - } - - .editor-right { - order: 1; - } - - .preview-frame { - transform: scale(0.7); - margin: 20px auto; - width: 95%; - max-width: 210mm; - } - - .template-grid { - /* Grid removed - using default layout */ - gap: 25px; - padding: 30px 15px; - } - - .step-content { - padding: 1.5rem 2rem; - } -} - -@media (max-width: 768px) { - .preview-frame { - transform: scale(0.6); - margin: 10px auto; - width: 90%; - max-width: 210mm; - padding: 15mm; - } - - /* Mobile A4 Optimization */ - .preview-frame h1 { - font-size: clamp(18px, 5vw, 24px); - } - - .preview-frame h2 { - font-size: clamp(14px, 4vw, 16px); - } - - .preview-frame p { - font-size: clamp(11px, 3vw, 13px); - } - - .template-grid { - grid-template-columns: 1fr; - gap: 20px; - padding: 20px 15px; - } - - .template-card { - padding: 25px 20px; - min-height: 250px; - } - - .step-content { - padding: 1rem 1.5rem; - } -} - -@media (max-width: 480px) { - .preview-frame { - transform: scale(0.5); - width: 85%; - padding: 10mm; - } - - /* Small Mobile A4 Optimization */ - .preview-frame h1 { - font-size: clamp(16px, 6vw, 20px); - } - - .preview-frame h2 { - font-size: clamp(12px, 5vw, 14px); - } - - .preview-frame p { - font-size: clamp(10px, 4vw, 12px); - } -} - -@media (max-width: 768px) { - .insert-content-section .toolbar-group { - grid-template-columns: 1fr; - } - - .text-styling-section .toolbar-group { - grid-template-columns: repeat(2, 1fr); - } - - .text-alignment-section .toolbar-group { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Hide header in step 3 */ -.step-3 .step-header { - display: none; -} - -/* Page Management */ -.page-container { - margin-bottom: 30px; - border: 2px solid #e0e0e0; - border-radius: 8px; - background: white; - position: relative; - overflow: visible; -} - -.page-header { - background: #f8f9fa; - padding: 15px 20px; - border-bottom: 2px solid #e0e0e0; - border-radius: 6px 6px 0 0; - display: flex; - align-items: center; - justify-content: space-between; -} - -.page-title { - font-size: 1.1rem; - font-weight: 600; - color: #495057; - margin: 0; -} - -.page-number { - background: #6f42c1; - color: white; - padding: 4px 12px; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 600; -} - -.page-content { - padding: 20px; - min-height: 400px; - overflow: visible; -} - -.page-content[contenteditable="true"] { - outline: none; - cursor: text; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; -} - -.page-content[contenteditable="true"]:focus { - border: 2px solid #6f42c1; - border-radius: 6px; -} - -/* Page Navigation */ -.page-navigation { - display: none; -} - -/* Custom Popup Styling */ -.custom-popup { - 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: 10000; - backdrop-filter: blur(4px); -} - -.custom-popup-content { - background: white; - border-radius: 12px; - padding: 30px; - max-width: 500px; - width: 90%; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); - position: relative; - border: 1px solid #e0e0e0; -} - -.custom-popup-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - padding-bottom: 15px; - border-bottom: 2px solid #6f42c1; -} - -.custom-popup-title { - font-size: 1.5rem; - font-weight: 600; - color: #2c3e50; - margin: 0; -} - -.custom-popup-close { - background: #6f42c1; - color: white; - border: none; - width: 32px; - height: 32px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - transition: all 0.2s ease; -} - -.custom-popup-close:hover { - background: #8e44ad; - transform: scale(1.1); -} - -.custom-popup-body { - margin-bottom: 25px; -} - -.custom-popup-footer { - display: flex; - gap: 12px; - justify-content: flex-end; -} - -.custom-popup-btn { - padding: 10px 20px; - border-radius: 6px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - font-size: 0.9rem; -} - -.custom-popup-btn-primary { - background: #6f42c1; - color: white; -} - -.custom-popup-btn-primary:hover { - background: #8e44ad; - transform: translateY(-1px); -} - -.custom-popup-btn-secondary { - background: #f8f9fa; - color: #495057; - border: 1px solid #d0d0d0; -} - -.custom-popup-btn-secondary:hover { - background: #e9ecef; -} - -/* Success/Error Notifications */ -.notification { - position: fixed; - top: 20px; - right: 20px; - padding: 15px 20px; - border-radius: 8px; - color: white; - font-weight: 500; - z-index: 10001; - animation: slideInRight 0.3s ease; - max-width: 350px; -} - -.notification.success { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); -} - -.notification.error { - background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%); - box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); -} - -@keyframes slideInRight { - from { - transform: translateX(100%); - opacity: 0; -} - to { - transform: translateX(0); - opacity: 1; - } -} - -/* Loading Spinner */ -.loading-spinner { - width: 16px; - height: 16px; - border: 2px solid #ffffff; - border-top: 2px solid transparent; - border-radius: 50%; - animation: spin 1s linear infinite; - display: inline-block; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Header and Footer Edit Buttons */ -.header-section, .footer-section { - position: relative; -} - -.header-section .edit-btn, .footer-section .edit-btn { - position: absolute; - top: 10px; - right: 10px; - background: rgba(255,255,255,0.2); - padding: 5px 10px; - border-radius: 15px; - font-size: 0.8rem; - cursor: pointer; - color: white; - border: none; - transition: background 0.2s ease; -} - -.header-section .edit-btn:hover, .footer-section .edit-btn:hover { - background: rgba(255,255,255,0.3); -} - -/* Property Details Grid */ -.property-details-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - margin-bottom: 30px; -} - -.property-detail-item { - background: #f8f9fa; - padding: 15px; - border-radius: 8px; - border-left: 4px solid #667eea; - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -.property-detail-item:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); -} - -.property-detail-label { - font-weight: 600; - color: #667eea; - margin-bottom: 5px; - font-size: 0.9rem; -} - -.property-detail-value { - font-size: 1.1rem; - color: #2c3e50; -} - -/* Template-specific sections */ -.template-section { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - margin-bottom: 30px; - border-left: 4px solid #667eea; -} - -.template-section h3 { - color: #2c3e50; - margin-top: 0; - font-size: 1.3rem; -} - -.template-section ul { - color: #495057; - margin: 0; - padding-left: 20px; -} - -.template-section li { - margin-bottom: 8px; - line-height: 1.4; -} - -/* Editable content areas */ -.editable-area { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - margin-bottom: 30px; - border: 2px dashed #dee2e6; - transition: border-color 0.2s ease; -} - -.editable-area:hover { - border-color: #667eea; -} - -.editable-area h3 { - color: #6c757d; - margin-top: 0; - font-size: 1.3rem; -} - -.editable-area p { - color: #6c757d; - font-style: italic; - margin: 0; -} - -/* Responsive Toolbar */ -@media (max-width: 1200px) { - .editor-toolbar { - flex-direction: column; - align-items: stretch; -} - - .toolbar-group { - justify-content: center; - flex-wrap: wrap; - } -} - -@media (max-width: 768px) { - .toolbar-group { - flex-direction: column; - align-items: stretch; -} - - .toolbar-btn { - width: 100%; - justify-content: center; -} -} - -@media (max-width: 768px) { - .step-header-gradient { - padding: 30px 20px; - margin: -15px -15px 25px -15px; - } - - .main-title { - font-size: 3rem; - } - - .subtitle { - font-size: 1.3rem; -} - - .step-navigation { - flex-direction: column; - gap: 1rem; - margin: 0 1rem 1rem 1rem; -} - - .step2-content { - grid-template-columns: 1fr; - gap: 2rem; - } - - .template-grid { - grid-template-columns: 1fr; - gap: 1.5rem; -} - - .step-content { - padding: 0 1rem; - } - - .header-section { - padding: 2rem 1rem; -} -} - -@media (max-width: 480px) { - .main-title { - font-size: 2.5rem; - } - - .subtitle { - font-size: 1.2rem; -} - - - - .header-features { - flex-direction: column; - align-items: center; -} - - .btn { - padding: 0.8rem 1.5rem; - font-size: 0.9rem; -} -} - -/* PDF Preview Popup */ -.pdf-preview-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - backdrop-filter: blur(3px); -} - -.pdf-preview-popup { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 95%; - max-height: 95%; - width: 1200px; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.template-preview-frame { - background: white; - padding: 20px; - border-radius: 8px; - max-height: 70vh; - overflow-y: auto; - border: 1px solid #e9ecef; - box-shadow: inset 0 2px 8px rgba(0,0,0,0.05); -} - -.template-preview-frame::-webkit-scrollbar { - width: 8px; -} - -.template-preview-frame::-webkit-scrollbar-track { - background: #f1f1f1; - border-radius: 4px; -} - -.template-preview-frame::-webkit-scrollbar-thumb { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 4px; -} - -.template-preview-frame::-webkit-scrollbar-thumb:hover { - background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); -} - -.pdf-preview-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px 30px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 12px 12px 0 0; -} - -.pdf-preview-header h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; -} - -.close-btn { - background: none; - border: none; - color: white; - font-size: 1.5rem; - cursor: pointer; - padding: 5px; - border-radius: 50%; - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - transition: background 0.2s ease; -} - -.close-btn:hover { - background: rgba(255, 255, 255, 0.2); -} - -.pdf-preview-content { - flex: 1; - padding: 30px; - overflow-y: auto; - max-height: 500px; -} - -.pdf-preview-content .preview-frame { - border: 2px solid #dee2e6; - border-radius: 8px; - padding: 20px; - background: white; - min-height: 400px; -} - -.pdf-preview-actions { - padding: 20px 30px; - background: #f8f9fa; - border-top: 1px solid #dee2e6; - display: flex; - gap: 15px; - justify-content: flex-end; - border-radius: 0 0 12px 12px; -} - -.pdf-preview-actions .export-pdf-btn { - position: static !important; - top: auto !important; - right: auto !important; -} - -/* Page Navigation Buttons in Toolbar */ -.page-nav-btn { - background: #f8f9fa; - border: 1px solid #d0d0d0; - color: #495057; - width: 35px; - height: 35px; - border-radius: 6px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.9rem; - font-weight: 600; - transition: all 0.2s ease; -} - -.page-nav-btn:hover { - background: #6f42c1; - color: white; - border-color: #6f42c1; - transform: translateY(-1px); -} - -.page-nav-btn.active { - background: #6f42c1; - color: white; - border-color: #6f42c1; - box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3); -} - -/* Active page styling */ -.active-page { - display: block !important; -} - -.page-container:not(.active-page) { - display: none; -} - -/* Enhanced Dropdown Styling for Step 2 */ -.property-selector { - margin: 20px 0; -} - -.property-selector label { - font-family: 'Inter', sans-serif; - display: block; - margin-bottom: 12px; - font-weight: 700; - color: #2c3e50; - font-size: 1.2rem; - letter-spacing: 0.02em; -} - -.property-selector select { - font-family: 'Inter', sans-serif; - width: 100%; - padding: 16px 20px; - border: 2px solid #e0e0e0; - border-radius: 12px; - font-size: 1.1rem; - font-weight: 500; - background: white; - transition: all 0.3s ease; - box-shadow: 0 2px 8px rgba(0,0,0,0.05); - letter-spacing: 0.01em; -} - -.property-selector select:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.property-selector select option { - padding: 8px; -} - -/* Enhanced Property Details Display */ -.property-details { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 12px; - padding: 25px; - margin-top: 20px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} - -.property-details h4 { - color: #2c3e50; - margin: 0 0 20px 0; - font-size: 1.2rem; - font-weight: 600; -} - -.property-grid { - /* Grid removed - using default layout */ - gap: 15px; -} - -.property-field { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 15px; - background: white; - border-radius: 8px; - border: 1px solid #e9ecef; -} - -.property-field .label { - font-weight: 600; - color: #6c757d; - font-size: 0.9rem; -} - -.property-field .value { - font-weight: 500; - color: #2c3e50; - font-size: 0.9rem; -} - -/* Export PDF Button - Improved - Fixed positioning */ -.export-pdf-section { - position: relative; - margin: 20px 0; - z-index: 1000; - background: rgba(255, 255, 255, 0.9); - padding: 16px 20px; - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - border: 2px solid #e3f2fd; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - min-width: 200px; - max-width: 220px; - backdrop-filter: blur(10px); -} - -/* A4 Page Size Detection and Styling */ -.a4-page { - width: 210mm; - height: 297mm; - margin: 0 auto; - background: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - position: relative; - overflow: hidden; -} - -.a4-page-content { - padding: 20mm; - box-sizing: border-box; - height: 100%; - overflow: hidden; -} - -.page-break { - page-break-after: always; - break-after: page; - height: 297mm; - width: 210mm; - position: relative; - margin-bottom: 10mm; -} - -.page-indicator { - position: absolute; - bottom: 5mm; - right: 5mm; - font-size: 10px; - color: #666; - background: rgba(255, 255, 255, 0.8); - padding: 2px 6px; - border-radius: 3px; -} - -.export-pdf-btn { - background: transparent; - color: #667eea; - border: 2px solid #667eea; - padding: 12px 24px; - border-radius: 25px; - font-weight: 600; - font-size: 11px; - cursor: pointer; - box-shadow: none; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.3px; - margin-bottom: 0; - white-space: nowrap; - width: 100%; - text-align: center; - line-height: 1; - min-width: 140px; -} - -.export-pdf-btn:hover { - background: #667eea; - color: white; - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.export-pdf-btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - - - -/* Page Count Display */ -.page-count-display { - text-align: center; - margin-top: 4px; -} - -.page-count-text { - color: #28a745; - font-weight: 500; - font-size: 10px; - padding: 4px 8px; - background: rgba(40, 167, 69, 0.1); - border: 1px solid rgba(40, 167, 69, 0.3); - border-radius: 12px; - display: inline-block; -} - -/* Complete Property Details Styling */ -.complete-property-details { - margin-top: 30px; - padding: 20px; - background: #f8f9fa; - border-radius: 8px; - border-left: 4px solid #667eea; -} - -.category-section { - margin-bottom: 25px; -} - -.category-heading { - font-size: 16px; - font-weight: 600; - color: #333; - margin-bottom: 15px; - padding-bottom: 8px; - border-bottom: 2px solid #e9ecef; -} - -.category-fields { - /* Grid removed - using default layout */ - gap: 12px; -} - -.field-item { - display: flex; - align-items: flex-start; - padding: 8px 12px; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; - transition: all 0.2s ease; -} - -.field-item:hover { - border-color: #667eea; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.field-label { - font-weight: 600; - color: #495057; - min-width: 120px; - margin-right: 12px; - font-size: 13px; -} - -.field-value { - color: #333; - font-size: 13px; - word-break: break-word; - flex: 1; -} - -/* Progress Text Display */ -.progress-text-display { - text-align: center; - margin-top: 6px; -} - -.progress-message { - color: #007bff; - font-weight: 500; - font-size: 11px; - padding: 6px 12px; - background: rgba(248, 249, 250, 0.9); - border: 1px solid rgba(222, 226, 230, 0.7); - border-radius: 15px; - display: inline-block; -} - -/* Responsive design for smaller screens */ -@media (max-width: 768px) { - .export-pdf-section { - position: relative; - top: auto; - right: auto; - margin: 20px auto; - width: 90%; - max-width: 190px; - justify-content: center; - } - - .export-pdf-btn { - padding: 12px 24px; - font-size: 11px; - margin-right: 0; - } -} - - - -/* PDF Generation Progress Indicator */ -.pdf-progress-indicator { - text-align: center; - padding: 15px; - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - margin-top: 10px; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; -} - -.pdf-progress-indicator .spinner { - display: inline-block; - width: 20px; - height: 20px; - border: 3px solid #f3f3f3; - border-top: 3px solid #007bff; - border-radius: 50%; - animation: spin 1s linear infinite; - flex-shrink: 0; -} - -.pdf-progress-indicator .progress-text { - color: #007bff; - font-weight: 500; - font-size: 14px; - margin: 0; -} - -/* Progress Bar for PDF Generation */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 10000; -} - -.progress-content { - background: white; - padding: 40px; - border-radius: 15px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); - text-align: center; - max-width: 400px; - width: 90%; -} - -.progress-spinner { - width: 60px; - height: 60px; - border: 4px solid #f3f3f3; - border-top: 4px solid #667eea; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20px; -} - -.progress-text { - font-size: 18px; - font-weight: 600; - color: #333; - margin-bottom: 20px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Progress bar animation */ -.progress-bar .progress-content { - animation: slideIn 0.3s ease-out; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); -} -} - -/* Loading Indicator */ -.loading-indicator { - text-align: center; - padding: 20px; - background: #f8f9fa; - border-radius: 8px; - margin: 15px 0; - color: #6c757d; - font-style: italic; -} - -.loading-indicator::before { - content: "⏳ "; - margin-right: 8px; -} - -/* Debug Info - Hide in production */ -.debug-info { - display: none !important; -} - -/* Ensure clean page bottom and hide any stray content */ -.property-brochure-generator::after { - content: ""; - display: block; - clear: both; - height: 0; - overflow: hidden; -} - -/* Hide any potential stray text elements */ -.property-brochure-generator { - position: relative; -} - -/* Additional cleanup for text nodes */ -.property-brochure-generator > *:last-child::after { - content: ""; - display: block; - height: 0; - clear: both; -} - -/* Image Review Modal Overlay */ -.image-review-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.7); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; -} - -.image-review-modal { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 90%; - max-height: 90%; - width: 1200px; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.image-review-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px 30px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 12px 12px 0 0; -} - -.image-review-header h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; -} - -.image-review-content { - flex: 1; - padding: 30px; - overflow-y: auto; - max-height: 600px; -} - -.category-navigation { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 20px; - justify-content: center; -} - -.category-btn { - background: #f8f9fa; - border: 2px solid #e9ecef; - color: #495057; - padding: 8px 16px; - border-radius: 20px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; -} - -.category-btn:hover, -.category-btn.active { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; - transform: translateY(-1px); -} - -.image-display-area { - background: #f8f9fa; - border-radius: 12px; - padding: 20px; - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - - - -/* Editor Toolbar - Fixed Layout */ -.editor-toolbar { - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 15px; - margin-bottom: 20px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - max-width: 100%; - overflow: hidden; -} - -.editor-toolbar.left { - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -.toolbar-section { - margin-bottom: 20px; - padding: 10px; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 10px; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.toolbar-group { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - margin-bottom: 10px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - min-width: fit-content; - max-width: 100%; - box-sizing: border-box; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; -} - -.toolbar-button:active { - background: #dee2e6; -} - -.button-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; - width: 100%; -} - -.button-grid .toolbar-button { - justify-content: center; - text-align: center; - min-height: 36px; -} - -/* Form Controls */ -.toolbar-group label { - font-size: 12px; - color: #6c757d; - margin-right: 8px; - white-space: nowrap; -} - -.toolbar-group select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; - min-width: 100px; - max-width: 150px; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .editor-toolbar { - padding: 10px; - } - - .toolbar-section { - padding: 8px; - } - - .toolbar-group { - gap: 6px; - } - - .toolbar-button { - padding: 6px 10px; - font-size: 11px; - } - - .button-grid { - grid-template-columns: 1fr; - } -} - -/* Step 3: HTML Editor - Fixed Layout */ -.step3 { - display: block; - position: relative; - height: calc(100vh - 160px); - overflow: hidden; - padding-bottom: 1rem; -} - -.step3.hidden { - display: none; -} - -/* Editor Container - Fixed Layout */ -.editor-container { - display: flex; - flex-direction: row; - gap: 20px; - height: 100%; - padding: 10px 20px; - box-sizing: border-box; - margin-bottom: 0; - max-height: calc(100vh - 180px); -} - -/* Quill Editor Container - Replaces Left Toolbar */ -.quill-editor-container { - width: 340px; - flex-shrink: 0; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border: 1px solid #dee2e6; - border-radius: 12px; - padding: 15px; - height: calc(100vh - 180px); - max-height: calc(100vh - 180px); - overflow-y: auto; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - position: relative; -} - -/* Hide default scrollbar */ -.quill-editor-container::-webkit-scrollbar { - display: none; -} - -.quill-editor-container { - -ms-overflow-style: none; - scrollbar-width: none; -} - -/* Custom scroll indicators for sidebar */ -.quill-editor-container::before { - content: ''; - position: absolute; - top: 10px; - right: 10px; - width: 4px; - height: 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - z-index: 10; -} - -.quill-editor-container::after { - content: ''; - position: absolute; - bottom: 10px; - right: 10px; - width: 4px; - height: 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - z-index: 10; -} - -.quill-editor-container:hover::before, -.quill-editor-container:hover::after { - opacity: 0.6; -} - -/* Quill Toolbar Wrapper */ -.quill-toolbar-wrapper { - margin-bottom: 25px; -} - -.quill-section-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.2rem; - font-weight: 700; - color: #2c3e50; - margin-bottom: 15px; - text-align: center; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 0.02em; -} - -/* Sticky Enhanced Toolbar Container */ -.enhanced-toolbar-sticky { - position: sticky; - top: 0; - z-index: 100; - background: white; - border-bottom: 2px solid #e9ecef; - padding: 15px 20px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - margin-bottom: 20px; -} - -/* Horizontal Enhanced Toolbar */ -.enhanced-toolbar-horizontal { - display: flex; - flex-wrap: wrap; - gap: 15px; - align-items: center; - justify-content: flex-start; - max-width: 100%; - overflow-x: auto; - padding: 10px 0; -} - -/* Custom Scrollbar Area for Toolbar */ -.enhanced-toolbar-scroll { - height: 100%; - overflow-y: auto; - padding-right: 10px; - margin-right: -10px; -} - -/* Hide native scrollbars but keep functionality */ -.enhanced-toolbar-scroll::-webkit-scrollbar { - width: 0px; - background: transparent; -} - -.enhanced-toolbar-scroll { - -ms-overflow-style: none; - scrollbar-width: none; -} - -/* Enhanced Toolbar - Sidebar Style */ -.enhanced-toolbar { - height: calc(100vh - 200px); - display: flex; - flex-direction: column; - gap: 1rem; - overflow-y: auto; - padding: 1rem; - background: #ffffff; - border: 1px solid #e1e5e9; - border-radius: 8px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - max-height: 800px; - position: relative; -} - -/* Custom scroll indicator */ -.enhanced-toolbar::after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 40px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.enhanced-toolbar:hover::after { - opacity: 0.3; - animation: scrollIndicator 2s ease-in-out infinite; -} - -@keyframes scrollIndicator { - 0%, 100% { transform: translateY(-70%); } - 50% { transform: translateY(-30%); } -} - -.enhanced-toolbar .toolbar-section { - margin-bottom: 20px; - padding: 15px; - background: #f8f9fa; - border-radius: 8px; - border: 1px solid #e9ecef; -} - -.enhanced-toolbar .toolbar-section:last-child { - margin-bottom: 0; -} - -.enhanced-toolbar .toolbar-section-title { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - font-weight: 600; - color: #495057; - margin-bottom: 12px; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; - padding-bottom: 4px; -} - -.enhanced-toolbar .toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 12px; -} - -.enhanced-toolbar .toolbar-group:last-child { - margin-bottom: 0; -} - -.enhanced-toolbar .toolbar-button { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - width: 100%; - box-sizing: border-box; -} - -.enhanced-toolbar .toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.enhanced-toolbar .toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - -.enhanced-toolbar .toolbar-group label { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - font-size: 12px; - color: #6c757d; - margin-bottom: 4px; - font-weight: 500; -} - -.enhanced-toolbar .toolbar-group select { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 6px 8px; - font-size: 12px; - color: #495057; - transition: all 0.2s ease; -} - -.enhanced-toolbar .toolbar-group select:hover { - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.enhanced-toolbar .toolbar-group input[type="color"] { - width: 100%; - height: 32px; - border: 1px solid #dee2e6; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.enhanced-toolbar .toolbar-group input[type="color"]:hover { - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.enhanced-toolbar .button-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; -} - -.enhanced-toolbar .alignment-buttons { - display: flex; - flex-direction: column; - gap: 6px; -} - -.enhanced-toolbar .alignment-btn { - justify-content: flex-start; -} - -/* Property Insert Section */ -.property-insert-section { - margin-bottom: 25px; - padding: 20px; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.property-insert-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: 700; - color: #2c3e50; - margin-bottom: 15px; - text-align: center; - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 0.02em; -} - -.property-insert-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; -} - -.property-insert-btn { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 10px 12px; - font-size: 11px; - font-weight: 600; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.property-insert-btn:hover { - background: #28a745; - border-color: #28a745; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2); -} - -/* Document Actions Section */ -.document-actions-section { - padding: 20px; - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); -} - -.document-actions-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: 700; - color: #2c3e50; - margin-bottom: 15px; - text-align: center; - background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - letter-spacing: 0.02em; -} - -.document-actions-grid { - display: flex; - flex-direction: column; - gap: 10px; -} - -.doc-action-btn { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 12px 15px; - font-size: 12px; - font-weight: 600; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: 100%; -} - -.doc-action-btn:hover { - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.doc-action-btn.save-btn:hover { - background: #28a745; - border-color: #28a745; - color: white; -} - -.doc-action-btn.load-btn:hover { - background: #007bff; - border-color: #007bff; - color: white; -} - -.doc-action-btn.reset-btn:hover { - background: #dc3545; - border-color: #dc3545; - color: white; -} - -.doc-action-btn.preview-btn:hover { - background: #667eea; - border-color: #667eea; - color: white; -} - -/* Generate PDF Section in Template Header */ -.generate-pdf-section { - display: flex; - align-items: center; -} - -.generate-pdf-btn { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - padding: 12px 24px; - border-radius: 6px; - font-weight: 600; - cursor: pointer; - font-size: 14px; - transition: all 0.3s ease; - display: flex; - align-items: center; - gap: 8px; -} - -.generate-pdf-btn:hover { - transform: translateY(-1px); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.generate-pdf-btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - -/* Enhanced Editor Content Area */ -.enhanced-editor-content { - background: white; - border: 1px solid #dee2e6; - border-radius: 12px; - height: calc(100vh - 200px); - max-height: calc(100vh - 200px); - padding: 20px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 14px; - line-height: 1.6; - color: #333; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); - overflow-y: auto; - position: relative; - scroll-behavior: smooth; - user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; -} - -.enhanced-editor-content:focus { - outline: none; -} - -/* Image Click Detection Enhancements */ -.enhanced-editor-content img { - cursor: pointer; - transition: all 0.3s ease; - position: relative; -} - -.enhanced-editor-content img:hover { - opacity: 0.9; - transform: scale(1.02); - box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2); - border-radius: 4px; -} - -/* Enhanced hover effects for draggable image containers */ -.enhanced-editor-content .draggable-element:has(img):hover { - outline: 2px dashed #4f46e5; - outline-offset: 4px; -} - -/* Only show cursor pointer for actual images and image containers */ -.enhanced-editor-content *[style*="background-image"]:hover { - cursor: pointer; -} - -@keyframes imageHintFade { - from { opacity: 0; transform: scale(0.9); } - to { opacity: 1; transform: scale(1); } -} - -/* International Typography Scale - Following Material Design 3 & Apple HIG */ -.display-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 3.5rem; /* 56px */ - font-weight: 400; - line-height: 1.12; - letter-spacing: -0.025em; - font-variation-settings: 'wght' 400; -} - -.display-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 2.8125rem; /* 45px */ - font-weight: 400; - line-height: 1.15; - letter-spacing: -0.015em; - font-variation-settings: 'wght' 400; -} - -.display-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 2.25rem; /* 36px */ - font-weight: 400; - line-height: 1.22; - letter-spacing: -0.005em; - font-variation-settings: 'wght' 400; -} - -.headline-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 2rem; /* 32px */ - font-weight: 600; - line-height: 1.25; - letter-spacing: -0.005em; - font-variation-settings: 'wght' 600; -} - -.headline-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.75rem; /* 28px */ - font-weight: 600; - line-height: 1.28; - letter-spacing: 0; - font-variation-settings: 'wght' 600; -} - -.headline-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.5rem; /* 24px */ - font-weight: 600; - line-height: 1.33; - letter-spacing: 0; - font-variation-settings: 'wght' 600; -} - -.title-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.375rem; /* 22px */ - font-weight: 500; - line-height: 1.27; - letter-spacing: 0; - font-variation-settings: 'wght' 500; -} - -.title-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1.125rem; /* 18px */ - font-weight: 500; - line-height: 1.33; - letter-spacing: 0.009em; - font-variation-settings: 'wght' 500; -} - -.title-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.875rem; /* 14px */ - font-weight: 500; - line-height: 1.43; - letter-spacing: 0.007em; - font-variation-settings: 'wght' 500; -} - -.body-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 1rem; /* 16px */ - font-weight: 400; - line-height: 1.5; - letter-spacing: 0.031em; - font-variation-settings: 'wght' 400; -} - -.body-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.875rem; /* 14px */ - font-weight: 400; - line-height: 1.43; - letter-spacing: 0.017em; - font-variation-settings: 'wght' 400; -} - -.body-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.75rem; /* 12px */ - font-weight: 400; - line-height: 1.33; - letter-spacing: 0.033em; - font-variation-settings: 'wght' 400; -} - -.label-large { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.875rem; /* 14px */ - font-weight: 500; - line-height: 1.43; - letter-spacing: 0.007em; - font-variation-settings: 'wght' 500; -} - -.label-medium { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.75rem; /* 12px */ - font-weight: 500; - line-height: 1.33; - letter-spacing: 0.042em; - font-variation-settings: 'wght' 500; -} - -.label-small { - font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; - font-size: 0.6875rem; /* 11px */ - font-weight: 500; - line-height: 1.45; - letter-spacing: 0.045em; - font-variation-settings: 'wght' 500; -} - -.enhanced-editor-content[contenteditable="true"] { - cursor: text; - overflow-y: auto; - padding-right: 30px; - margin-right: -10px; -} - -/* Prevent jumping to top when interacting with draggable elements */ -.enhanced-editor-content * { - scroll-margin-top: 0; -} - -/* Ensure text content is editable */ -.enhanced-editor-content p, -.enhanced-editor-content div:not(.draggable-element), -.enhanced-editor-content span, -.enhanced-editor-content h1, -.enhanced-editor-content h2, -.enhanced-editor-content h3, -.enhanced-editor-content h4, -.enhanced-editor-content h5, -.enhanced-editor-content h6 { - user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - cursor: text; -} - -/* Draggable and Resizable Elements */ -.draggable-element { - position: absolute; - border: 2px dashed transparent; - cursor: move; - min-width: 50px; - min-height: 20px; - z-index: 1000; - box-sizing: border-box; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.draggable-element.draggable-text { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - cursor: text; -} - -.draggable-element:hover, -.draggable-element.selected { - border-color: #667eea; - background: rgba(102, 126, 234, 0.1); - box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3); -} - -.draggable-element.dragging { - opacity: 0.8; - z-index: 1001; - cursor: move !important; -} - -.draggable-element.resizing { - z-index: 1001; -} - -/* Resize Handles */ -.resize-handle { - position: absolute; - background: #667eea; - border: 1px solid white; - width: 8px; - height: 8px; - border-radius: 50%; - opacity: 0; - transition: opacity 0.2s; - z-index: 1002; -} - -.draggable-element:hover .resize-handle, -.draggable-element.selected .resize-handle { - opacity: 1; -} - -.resize-handle.nw { top: -4px; left: -4px; cursor: nw-resize; } -.resize-handle.ne { top: -4px; right: -4px; cursor: ne-resize; } -.resize-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; } -.resize-handle.se { bottom: -4px; right: -4px; cursor: se-resize; } -.resize-handle.n { top: -4px; left: 50%; margin-left: -4px; cursor: n-resize; } -.resize-handle.s { bottom: -4px; left: 50%; margin-left: -4px; cursor: s-resize; } -.resize-handle.w { top: 50%; left: -4px; margin-top: -4px; cursor: w-resize; } -.resize-handle.e { top: 50%; right: -4px; margin-top: -4px; cursor: e-resize; } - -/* Draggable Image */ -.draggable-image { - max-width: 100%; - height: auto; - display: block; -} - -/* Draggable Text */ -.draggable-text { - padding: 8px; - min-height: 30px; - outline: none; - word-wrap: break-word; - z-index: 1000; - position: absolute; - background: rgba(255, 255, 255, 0.9); - border-radius: 4px; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - font-size: 14px; - line-height: 1.4; -} - -.draggable-text:focus { - outline: 2px solid #667eea; - background: rgba(255, 255, 255, 1); -} - -/* Loading Spinner */ -.loading-spinner { - display: inline-block; - width: 16px; - height: 16px; - border: 2px solid rgba(255, 255, 255, 0.3); - border-radius: 50%; - border-top-color: #ffffff; - animation: spin 1s ease-in-out infinite; - margin-right: 8px; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -.generate-pdf-btn:disabled { - opacity: 0.7; - cursor: not-allowed; - background: linear-gradient(135deg, #999 0%, #666 100%); -} - -.enhanced-editor-content:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.enhanced-editor-content[contenteditable="true"] { - cursor: text; - overflow-y: auto; - padding-right: 30px; - margin-right: -10px; -} - -/* Hide scrollbars on editor content */ -.enhanced-editor-content::-webkit-scrollbar { - width: 0px; - background: transparent; -} - -.enhanced-editor-content { - -ms-overflow-style: none; - scrollbar-width: none; -} - -/* Custom scroll indicator for editor */ -.editor-right::after { - content: ''; - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 60px; - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); - border-radius: 2px; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; - z-index: 10; -} - -.editor-right:hover::after { - opacity: 0.4; - animation: editorScrollIndicator 2s ease-in-out infinite; -} - -@keyframes editorScrollIndicator { - 0%, 100% { transform: translateY(-70%); } - 50% { transform: translateY(-30%); } -} - -.enhanced-editor-content[contenteditable="true"]:empty::before { - content: "Start editing your template here..."; - color: #6c757d; - font-style: italic; -} - -.toolbar-section { - margin-bottom: 20px; -} - -.toolbar-section:last-child { - margin-bottom: 0; -} - -.toolbar-section-title { - font-weight: 600; - color: #495057; - margin-bottom: 12px; - font-size: 13px; - text-transform: uppercase; - letter-spacing: 0.5px; - border-bottom: 2px solid #dee2e6; - padding-bottom: 4px; -} - -.toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - margin-bottom: 12px; -} - -.toolbar-group:last-child { - margin-bottom: 0; -} - -.toolbar-button { - background: #ffffff; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 8px 12px; - font-size: 12px; - color: #495057; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 6px; - width: 100%; - box-sizing: border-box; -} - -.toolbar-button:hover { - background: #e9ecef; - border-color: #adb5bd; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.toolbar-button:active { - background: #dee2e6; - transform: translateY(0); -} - -/* Insert Content Section - Compact Layout */ -.insert-content-section .toolbar-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; -} - -.insert-content-section .toolbar-group:first-child { - grid-template-columns: 1fr 1fr; -} - -.insert-content-section .toolbar-group:last-child { - grid-template-columns: 1fr 1fr; -} - -/* Text Formatting - Compact */ -.text-formatting-section .toolbar-group { - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; -} - -.text-formatting-section label { - font-size: 11px; - color: #6c757d; - min-width: 70px; -} - -.text-formatting-section select { - background: white; - border: 1px solid #dee2e6; - border-radius: 4px; - padding: 5px 6px; - font-size: 11px; - color: #495057; - min-width: 100px; - flex: 1; -} - -/* Text Styling - Compact */ -.text-styling-section .toolbar-group { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 6px; -} - -.text-styling-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 32px; - font-weight: 600; -} - -/* Text Alignment - Compact */ -.text-alignment-section .toolbar-group { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 6px; -} - -.text-alignment-section .toolbar-button { - justify-content: center; - text-align: center; - min-height: 32px; -} - -/* Right Editor Area - Takes Remaining Space */ -.editor-right { - flex: 1; - background: white; - border: 1px solid #dee2e6; - border-radius: 8px; - padding: 20px; - height: 100%; - max-height: calc(100vh - 250px); - overflow: hidden; - display: flex; - flex-direction: column; - position: relative; -} - -.preview-frame { - flex: 1; - width: 100%; - border: none; - outline: none; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - line-height: 1.6; - color: #333; - background: white; - resize: none; - overflow-y: auto; - padding: 20px; - box-sizing: border-box; - max-height: 100%; -} - -/* Export PDF Button - Positioned at Template Level */ -.export-pdf-section { - position: absolute; - top: 20px; - right: 20px; - z-index: 10; -} - -.export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - text-transform: uppercase; - font-size: 14px; - transition: all 0.3s ease; -} - -.export-pdf-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); -} - -.export-pdf-btn:active { - transform: translateY(0); -} - -/* Responsive Design */ -@media (max-width: 1200px) { - .editor-container { - flex-direction: column; - height: auto; - } - - .editor-toolbar.left { - width: 100%; - height: auto; - order: 2; - } - - .editor-right { - order: 1; - height: 500px; - } -} - -@media (max-width: 768px) { - .insert-content-section .toolbar-group { - grid-template-columns: 1fr; - } - - .text-styling-section .toolbar-group { - grid-template-columns: repeat(2, 1fr); - } - - .text-alignment-section .toolbar-group { - grid-template-columns: repeat(3, 1fr); - } -} - -/* Export PDF Button - Positioned at Template Header with Animation */ -.export-pdf-section { - position: absolute; - top: 40px; - right: 40px; - z-index: 1000; - animation: pulse-grow 2s ease-in-out infinite; -} - -.export-pdf-btn { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - text-transform: uppercase; - font-size: 14px; - transition: all 0.3s ease; - transform-origin: center; -} - -.export-pdf-btn:hover { - transform: translateY(-2px) scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - animation: none; -} - -.export-pdf-btn:active { - transform: translateY(0) scale(0.95); -} - -/* Pulse Animation: Small -> Big -> Small -> Big */ -@keyframes pulse-grow { - 0% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } - 25% { - transform: scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - } - 50% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } - 75% { - transform: scale(1.05); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); - } - 100% { - transform: scale(1); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - } -} - -/* Template Header Area - Position for Export Button */ -.template-header-area { - position: relative; - margin-bottom: 20px; - background: white; - border-radius: 12px; - padding: 20px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); - border: 1px solid #f0f0f0; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 20px; - flex-shrink: 0; -} - -/* Scroll hint for areas */ -.scroll-hint { - position: absolute; - bottom: 10px; - left: 50%; - transform: translateX(-50%); - background: rgba(102, 126, 234, 0.1); - color: #667eea; - padding: 4px 12px; - border-radius: 12px; - font-size: 11px; - font-weight: 500; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; - z-index: 5; -} - -.enhanced-toolbar:hover .scroll-hint, -.editor-right:hover .scroll-hint { - opacity: 1; -} - -/* Enhanced visual feedback for scrollable areas */ -.enhanced-toolbar-scroll:hover, -.enhanced-editor-content:hover { - background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%); -} - -/* Subtle border animation on hover */ -.enhanced-toolbar:hover { - border-color: #667eea; - box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1); -} - -.editor-right:hover { - border-color: #28a745; - box-shadow: 0 4px 20px rgba(40, 167, 69, 0.1); -} - -/* Page Size Section */ -.page-size-section { - display: flex; - align-items: center; - gap: 15px; - flex-wrap: wrap; -} - -.page-size-label { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-size: 1.1rem; - font-weight: 600; - color: #2c3e50; - margin: 0; - letter-spacing: 0.01em; -} - -.page-size-options { - display: flex; - gap: 12px; - align-items: center; -} - -.page-size-option { - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; - padding: 8px 16px; - background: #f8f9fa; - border: 2px solid #e9ecef; - border-radius: 10px; - transition: all 0.3s ease; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, 'Helvetica Neue', Arial, sans-serif; - font-weight: 500; - color: #495057; - min-width: 60px; - justify-content: center; -} - -.page-size-option:hover { - background: #e9ecef; - border-color: #667eea; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); -} - -.page-size-option input[type="radio"] { - display: none; -} - -.page-size-option input[type="radio"]:checked + .page-size-text { - color: white; -} - -.page-size-option:has(input:checked) { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); -} - -.page-size-text { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.02em; - transition: color 0.3s ease; -} - -/* Custom Popup Styles - Matching Our Theme */ -.custom-popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; -} - -.popup-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(2px); -} - -.popup-container { - position: relative; - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - width: 90%; - max-width: 500px; - max-height: 80vh; - overflow-y: auto; - animation: popupSlideIn 0.3s ease-out; -} - -@keyframes popupSlideIn { - from { - opacity: 0; - transform: translateY(-20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -.popup-header { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 12px 12px 0 0; - display: flex; - justify-content: space-between; - align-items: center; -} - -.popup-header h3 { - margin: 0; - font-size: 18px; - font-weight: 600; -} - -.popup-close { - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - padding: 0; - width: 30px; - height: 30px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - transition: background-color 0.2s ease; -} - -.popup-close:hover { - background: rgba(255, 255, 255, 0.2); -} - -.popup-content { - padding: 25px; -} - -.form-group { - margin-bottom: 20px; -} - -.form-group label { - display: block; - margin-bottom: 8px; - font-weight: 600; - color: #495057; - font-size: 14px; -} - -.form-control { - width: 100%; - padding: 10px 12px; - border: 1px solid #dee2e6; - border-radius: 6px; - font-size: 14px; - color: #495057; - background: white; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - box-sizing: border-box; -} - -.form-control:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.form-control[type="color"] { - height: 40px; - padding: 5px; - cursor: pointer; -} - -.popup-actions { - display: flex; - gap: 12px; - justify-content: flex-end; - margin-top: 25px; - padding-top: 20px; - border-top: 1px solid #e9ecef; -} - -.popup-actions .btn { - padding: 10px 20px; - border: none; - border-radius: 6px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease; - min-width: 80px; -} - -.popup-actions .btn-secondary { - background: #6c757d; - color: white; -} - -.popup-actions .btn-secondary:hover { - background: #5a6268; - transform: translateY(-1px); -} - -.popup-actions .btn-primary { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; -} - -.popup-actions .btn-primary:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -/* Responsive popup */ -@media (max-width: 768px) { - .popup-container { - width: 95%; - margin: 20px; - } - - .popup-content { - padding: 20px; - } - - .popup-actions { - flex-direction: column; - } - - .popup-actions .btn { - width: 100%; - } -} - -/* General button spacing to prevent merging with page bottom */ -button, .btn, .toolbar-button, .export-pdf-btn { - margin-bottom: 0.5rem !important; -} - -/* Ensure proper spacing for button containers */ -.step-actions, .toolbar-section, .popup-actions { - margin-bottom: 1rem; -} - -/* Reduce bottom spacing in step 3 specifically */ -.step3 .step-actions, -.step3 .toolbar-section, -.step3 .popup-actions { - margin-bottom: 0.5rem; -} - -.step3 button, -.step3 .btn, -.step3 .toolbar-button { - margin-bottom: 0.3rem !important; -} - -/* Draggable image container styles */ -.draggable-image-container { - position: absolute; - cursor: move; - user-select: none; - z-index: 1000; - min-width: 100px; - min-height: 100px; - border: 2px dashed #667eea; - border-radius: 8px; - background: rgba(102, 126, 234, 0.1); - padding: 5px; - transition: all 0.2s ease; - transform: translate3d(0, 0, 0); -} - -.draggable-image-container:hover { - border-color: #764ba2; - background: rgba(102, 126, 234, 0.15); - transform: translate3d(0, -2px, 0); - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); -} - -.draggable-image-container.dragging { - border-color: #764ba2; - background: rgba(102, 126, 234, 0.2); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); - transform: scale(1.02); - transition: none; - z-index: 1001; -} - -.draggable-image-container:focus { - outline: 2px solid #667eea; - outline-offset: 2px; -} - -.draggable-image-container img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 6px; - pointer-events: none; - user-select: none; -} - -/* Resize handle */ -.resize-handle { - position: absolute; - bottom: -8px; - right: -8px; - width: 24px; - height: 24px; - background: #667eea; - color: white; - border-radius: 50%; - cursor: se-resize; - border: 2px solid white; - z-index: 1001; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - font-weight: bold; - box-shadow: 0 2px 8px rgba(0,0,0,0.3); - transition: all 0.2s ease; - user-select: none; -} - -.resize-handle:hover { - background: #764ba2; - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0,0,0,0.4); -} - -.resize-handle:active { - background: #5a4fcf; - transform: scale(0.95); -} - -/* Delete button */ -.delete-image-btn { - position: absolute; - top: -10px; - right: -10px; - width: 24px; - height: 24px; - background: #ff4757; - color: white; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - font-weight: bold; - border: 2px solid white; - z-index: 1002; - transition: background-color 0.3s ease; -} - -.delete-image-btn:hover { - background: #ff3742; -} - -/* Image info display */ -.image-info { - position: absolute; - top: -25px; - left: 0; - background: rgba(0,0,0,0.8); - color: white; - padding: 4px 8px; - border-radius: 4px; - font-size: 10px; - white-space: nowrap; - opacity: 0; - transition: opacity 0.3s; - pointer-events: none; - z-index: 1003; -} - -/* Dragging state */ -.draggable-image-container.dragging { - border-color: #764ba2; - background: rgba(102, 126, 234, 0.2); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); -} - -/* Resizing state */ -.draggable-image-container.resizing { - border-color: #ff6b6b; - background: rgba(255, 107, 107, 0.1); -} - -/* Text Alignment Section - Fixed Width */ -.text-alignment-section .toolbar-group { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; -} - -.alignment-buttons { - display: flex; - flex-direction: column; - gap: 6px; - width: 100%; -} - -.alignment-btn { - width: 100%; - justify-content: flex-start; - padding: 8px 12px; - font-size: 12px; - min-height: 36px; -} - -/* Toolbar Section Ordering */ -.toolbar-section:nth-child(1) { order: 1; } /* Document Actions */ -.toolbar-section:nth-child(2) { order: 2; } /* Text Formatting */ -.toolbar-section:nth-child(3) { order: 3; } /* Text Styling */ -.toolbar-section:nth-child(4) { order: 4; } /* Text Alignment */ -.toolbar-section:nth-child(5) { order: 5; } /* Colors */ -.toolbar-section:nth-child(6) { order: 6; } /* Lists & Indentation */ -.toolbar-section:nth-child(7) { order: 7; } /* Element Positioning */ -.toolbar-section:nth-child(8) { order: 8; } /* Insert Content */ - -/* Asgar-1 Template Preview Styles */ -.template-asgar1 { - background: linear-gradient(135deg, #003366, #004080); - border: 1px solid #002244; - box-shadow: 0 6px 20px rgba(0,51,102,0.15); - padding: 30px 25px; -} - -.asgar1-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-hero { - background: linear-gradient(135deg, #003366, #004080); - color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; -} - -.preview-hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url('data:image/svg+xml,'); - opacity: 0.3; -} - -.preview-hero-overlay { - position: relative; - z-index: 1; -} - -.preview-property-name { - font-size: 18px; - font-weight: bold; - margin-bottom: 8px; - color: #f39c12; -} - -.preview-property-address { - font-size: 12px; - opacity: 0.9; -} - -.preview-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-section { - background: white; - padding: 12px; - border-radius: 6px; - border-left: 4px solid #f39c12; -} - -.preview-section-title { - color: #003366; - font-size: 11px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-text { - color: #666; - font-size: 9px; - line-height: 1.3; -} - -/* Preview Frame */ -.preview-frame { - width: 100%; - height: 600px; - border: 1px solid #ddd; - border-radius: 8px; - background: white; - overflow-y: auto; - overflow-x: hidden; /* Prevent horizontal scrollbar */ - position: relative; -} - -.preview-frame iframe { - width: 100%; - height: 100%; - border: none; - border-radius: 8px; -} - -/* Brochure Content Responsiveness */ -.brochure { - max-width: 100% !important; - width: 100% !important; - box-sizing: border-box; - overflow-x: hidden; -} - -/* Ensure all content fits within viewport */ -.preview-frame * { - max-width: 100% !important; - box-sizing: border-box; -} - -/* Fix for grid layouts that might cause overflow */ -.content.grid-layout { - max-width: 100%; - overflow-x: hidden; -} - -/* Ensure amenities grid doesn't overflow */ -.amenities-grid { - max-width: 100%; - grid-template-columns: 1fr 1fr; - gap: 15px; -} - -/* Fix for location section grid */ -.location-section { - max-width: 100%; - grid-template-columns: 1fr 1fr; - gap: 30px; -} - -/* Responsive adjustments for smaller screens */ -@media (max-width: 1200px) { - .amenities-grid { - grid-template-columns: 1fr; - } - - .location-section { - grid-template-columns: 1fr; - } - - .content.grid-layout { - grid-template-columns: 1fr; - } -} - -/* Sample Template Preview Styles */ -.template-sample { - background: linear-gradient(135deg, #667eea, #764ba2); - border: 1px solid #5a6fd8; - box-shadow: 0 6px 20px rgba(102,126,234,0.15); - padding: 30px 25px; -} - -.sample-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-header { - background: linear-gradient(135deg, #667eea, #764ba2); - color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; -} - -.preview-triangle { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - border-style: solid; - border-width: 0 0 30px 30px; - border-color: transparent transparent rgba(255,255,255,0.2) transparent; -} - -.preview-company { - margin-bottom: 10px; -} - -.preview-company-name { - font-size: 10px; - font-weight: bold; - margin-bottom: 2px; - opacity: 0.9; -} - -.preview-title { - font-size: 16px; - font-weight: bold; - margin-bottom: 5px; -} - -.preview-for-sale { - font-size: 9px; - opacity: 0.8; -} - -.preview-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-section { - background: white; - padding: 12px; - border-radius: 6px; - border-left: 4px solid #667eea; -} - -.preview-section-title { - color: #667eea; - font-size: 11px; - font-weight: bold; - margin-bottom: 6px; -} - -.preview-text { - color: #666; - font-size: 9px; - line-height: 1.3; - margin-bottom: 8px; -} - -.preview-icons { - display: flex; - gap: 8px; - justify-content: center; -} - -.preview-icon { - width: 20px; - height: 20px; - background: linear-gradient(135deg, #667eea, #764ba2); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 10px; -} - -/* Luxury Mansion Template Preview Styles */ -.template-luxury { - background: white; - border: 1px solid #e5e7eb; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); - padding: 30px 25px; -} - -.luxury-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-luxury-header { - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - color: #1f2937; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; - border: 1px solid #e5e7eb; -} - -.preview-crown { - font-size: 24px; - margin-bottom: 8px; -} - -.preview-luxury-title { - font-size: 14px; - font-weight: bold; - margin-bottom: 4px; - text-shadow: 1px 1px 2px rgba(255,255,255,0.5); -} - -.preview-luxury-subtitle { - font-size: 10px; - opacity: 0.8; - font-weight: 500; -} - -.preview-luxury-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-luxury-features { - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-feature { - background: white; - padding: 8px 12px; - border-radius: 6px; - font-size: 9px; - color: #8B4513; - font-weight: 500; - border-left: 3px solid #FFD700; -} - -.preview-luxury-description { - display: flex; - flex-direction: column; - gap: 6px; -} - -/* Modern Apartment Template Preview Styles */ -.template-modern { - background: linear-gradient(135deg, #00CED1, #20B2AA); - border: 1px solid #00CED1; - box-shadow: 0 6px 20px rgba(0,206,209,0.2); - padding: 30px 25px; -} - -.modern-preview { - display: flex; - flex-direction: column; - height: 100%; - min-height: 200px; - gap: 15px; -} - -.preview-modern-header { - background: linear-gradient(135deg, #00CED1, #20B2AA); - color: white; - padding: 20px; - border-radius: 8px; - text-align: center; - position: relative; - overflow: hidden; -} - -.preview-modern-icon { - font-size: 24px; - margin-bottom: 8px; -} - -.preview-modern-title { - font-size: 14px; - font-weight: bold; - margin-bottom: 4px; -} - -.preview-modern-subtitle { - font-size: 10px; - opacity: 0.8; - font-weight: 500; -} - -.preview-modern-content { - display: flex; - flex-direction: column; - gap: 12px; - flex: 1; -} - -.preview-modern-features { - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-modern-description { - display: flex; - flex-direction: column; - gap: 6px; -} - -/* Luxury Data Overview Styles */ -.luxury-data-grid { - /* Grid removed - using default layout */ - gap: 20px; - margin-top: 25px; -} - -.data-card { - background: linear-gradient(135deg, #fafafa, #f0f0f0); - padding: 25px; - border-radius: 12px; - border: 2px solid #FFD700; - text-align: center; - transition: all 0.3s ease; -} - -.data-card:hover { - transform: translateY(-5px); - box-shadow: 0 15px 30px rgba(255,215,0,0.2); - border-color: #FFA500; -} - -.data-icon { - font-size: 36px; - margin-bottom: 15px; - color: #8B4513; -} - -.data-card h3 { - color: #8B4513; - font-size: 18px; - margin-bottom: 12px; - font-weight: 600; -} - -.data-value { - color: #333; - font-size: 16px; - font-weight: 500; - line-height: 1.4; -} - -/* Luxury Field Overview Styles */ -.luxury-field-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 15px; - margin-top: 25px; -} - -.field-item { - background: white; - padding: 18px 20px; - border-radius: 10px; - border-left: 4px solid #FFD700; - box-shadow: 0 4px 15px rgba(0,0,0,0.08); - display: flex; - justify-content: space-between; - align-items: center; - transition: all 0.3s ease; -} - -.field-item:hover { - transform: translateX(8px); - box-shadow: 0 8px 25px rgba(0,0,0,0.15); -} - -.field-label { - color: #8B4513; - font-weight: 600; - font-size: 14px; -} - -.field-value { - color: #333; - font-weight: 500; - font-size: 14px; - text-align: right; -} - -/* Modern Data Overview Styles */ -.modern-data-grid { - /* Grid removed - using default layout */ - gap: 18px; - margin-top: 25px; -} - -.modern-data-grid .data-card { - background: #f8fafc; - border: 2px solid #e2e8f0; - border-radius: 16px; - padding: 22px; - text-align: center; - transition: all 0.3s ease; -} - -.modern-data-grid .data-card:hover { - transform: translateY(-8px); - box-shadow: 0 20px 40px rgba(0,206,209,0.15); - border-color: #00CED1; - background: white; -} - -.modern-data-grid .data-icon { - font-size: 32px; - margin-bottom: 15px; - color: #00CED1; -} - -.modern-data-grid .data-card h3 { - color: #1e293b; - font-size: 16px; - margin-bottom: 10px; - font-weight: 600; -} - -.modern-data-grid .data-value { - color: #64748b; - font-size: 15px; - font-weight: 500; - line-height: 1.4; -} - -/* Modern Field Overview Styles */ -.modern-field-grid { - /* Grid removed - using default layout */ - gap: 15px; - margin-top: 25px; -} - -.modern-field-grid .field-item { - background: white; - padding: 16px 18px; - border-radius: 12px; - border-left: 4px solid #00CED1; - box-shadow: 0 4px 15px rgba(0,0,0,0.05); - display: flex; - justify-content: space-between; - align-items: center; - transition: all 0.3s ease; -} - -.modern-field-grid .field-item:hover { - transform: translateX(6px); - box-shadow: 0 8px 25px rgba(0,0,0,0.1); -} - -.modern-field-grid .field-label { - color: #1e293b; - font-weight: 600; - font-size: 13px; -} - -.modern-field-grid .field-value { - color: #64748b; - font-weight: 500; - font-size: 13px; - text-align: right; -} - -/* PDF Generation Progress Spinner */ -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.pdf-progress-indicator { - animation: fadeIn 0.3s ease-in; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(-10px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Modern Home Template Preview Styles */ -.template-modern-home { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 280px; -} - -.template-modern-home::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.modern-home-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-hero-section { - height: 65%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; -} - -.preview-hero-image { - width: 100%; - height: 100%; - background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); - background-size: cover; - background-position: center; - opacity: 0.8; -} - -.preview-hero-overlay { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); - padding: 20px; - color: white; -} - -.preview-property-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 5px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-property-address { - font-size: 12px; - opacity: 0.9; - margin-bottom: 8px; -} - -.preview-price { - font-size: 16px; - font-weight: 700; - color: #ffffff; -} - -.preview-content-section { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.preview-stats { - display: flex; - justify-content: space-around; - margin-bottom: 15px; -} - -.preview-stat { - font-size: 11px; - color: #000000; - font-weight: 600; - text-align: center; -} - -.preview-description { - flex-grow: 1; -} - -.preview-title { - font-size: 14px; - font-weight: 700; - color: #000000; - margin-bottom: 8px; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; -} - -/* The Grand Oak Villa Template - Remove border and increase height */ -.template-asgar1 { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 320px; -} - -.template-asgar1::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.asgar1-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-hero { - height: 50%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; -} - -.preview-hero-overlay { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.1) 100%); - padding: 20px; - color: white; -} - -.preview-property-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 5px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-property-address { - font-size: 12px; - opacity: 0.9; -} - -.preview-content { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - gap: 15px; -} - -.preview-section { - background: rgba(255,255,255,0.8); - padding: 15px; - border-radius: 8px; - border-left: 3px solid #f39c12; -} - -.preview-section-title { - font-size: 14px; - font-weight: 700; - color: #000000; - margin-bottom: 8px; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; -} - -.template-preview { - margin-top: auto; - padding: 15px 20px; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 10px; -} - -.feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; -} - -.feature-icon { - font-size: 16px; -} - -.feature-text { - font-size: 10px; - font-weight: 600; - color: #000000; - text-align: center; -} - -/* The Serenity House Template - Remove border and increase height */ -.template-sample { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 280px; -} - -.template-sample::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.sample-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-header { - height: 50%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - color: white; -} - -.preview-triangle { - width: 0; - height: 0; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - border-bottom: 20px solid #f39c12; - margin-bottom: 15px; -} - -.preview-company-name { - font-size: 16px; - font-weight: 700; - margin: 2px 0; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-title { - font-size: 14px; - font-weight: 600; - margin: 8px 0 5px 0; - opacity: 0.9; -} - -.preview-for-sale { - font-size: 12px; - opacity: 0.8; - background: rgba(243, 156, 18, 0.2); - padding: 5px 10px; - border-radius: 15px; -} - -.preview-content { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - gap: 15px; -} - -.preview-section { - background: rgba(255,255,255,0.8); - padding: 15px; - border-radius: 8px; - border-left: 3px solid #f39c12; -} - -.preview-section-title { - font-size: 14px; - font-weight: 700; - color: #000000; - margin-bottom: 8px; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; - margin-bottom: 10px; -} - -.preview-icons { - display: flex; - justify-content: center; - gap: 15px; -} - -.preview-icon { - font-size: 18px; -} - -/* The Vertice Template - Remove border and increase height */ -.template-luxury { - background: white; - border: none; - position: relative; - overflow: hidden; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - min-height: 320px; -} - -.template-luxury::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%); - pointer-events: none; -} - -.luxury-preview { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; -} - -.preview-luxury-header { - height: 45%; - background: linear-gradient(135deg, #000000 0%, #333333 100%); - position: relative; - border-radius: 12px 12px 0 0; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - color: white; -} - -.preview-luxury-logo { - font-size: 18px; - font-weight: 700; - margin-bottom: 8px; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.preview-luxury-title { - font-size: 14px; - font-weight: 600; - margin-bottom: 5px; - opacity: 0.9; -} - -.preview-luxury-subtitle { - font-size: 12px; - opacity: 0.8; - background: rgba(243, 156, 18, 0.2); - padding: 5px 10px; - border-radius: 15px; -} - -.preview-luxury-content { - padding: 20px; - flex-grow: 1; - display: flex; - flex-direction: column; - gap: 15px; -} - -.preview-luxury-features { - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-feature { - background: rgba(255,255,255,0.8); - padding: 10px 15px; - border-radius: 6px; - font-size: 12px; - font-weight: 600; - color: #000000; - border-left: 3px solid #f39c12; -} - -.preview-luxury-description { - background: rgba(255,255,255,0.8); - padding: 15px; - border-radius: 8px; - border-left: 3px solid #f39c12; -} - -.preview-text { - font-size: 11px; - color: #666666; - line-height: 1.4; - margin-bottom: 5px; -} - -.preview-text:last-child { - margin-bottom: 0; -} - -.template-preview { - margin-top: auto; - padding: 15px 20px; -} - -.preview-features { - display: flex; - justify-content: space-around; - gap: 10px; -} - -.feature-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; -} - -.feature-icon { - font-size: 16px; -} - -.feature-text { - font-size: 10px; - font-weight: 600; - color: #000000; - text-align: center; -} - -/* Table Dialog Styles */ -.table-dialog-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - z-index: 10000; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease; -} - -.table-dialog-modal { - background: white; - border-radius: 20px; - width: 90%; - max-width: 500px; - max-height: 85vh; - overflow: hidden; - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.3), - 0 8px 32px rgba(0, 0, 0, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 255, 255, 0.2); - animation: slideUp 0.3s ease; -} - -.table-dialog-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem 2rem; - border-bottom: 1px solid #e5e7eb; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - border-radius: 20px 20px 0 0; -} - -.table-dialog-header h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: #1f2937; - font-family: 'Inter Variable', 'Inter', sans-serif; -} - -.table-dialog-content { - padding: 2rem; -} - -.table-dialog-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e5e7eb; - background: #f9fafb; -} - -.table-options { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.table-input { - width: 100%; - padding: 0.75rem 1rem; - border: 1px solid #d1d5db; - border-radius: 8px; - font-size: 1rem; - font-family: 'Inter Variable', 'Inter', sans-serif; - transition: border-color 0.3s ease, box-shadow 0.3s ease; -} - -.table-input:focus { - outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); -} - -/* Table Styles in Editor */ -.inserted-table { - border-collapse: collapse; - width: 100%; - margin: 1rem 0; - border: 1px solid #ddd; - font-family: 'Inter Variable', 'Inter', sans-serif; - font-size: 0.9rem; -} - -.inserted-table th, -.inserted-table td { - border: 1px solid #ddd; - padding: 8px; - text-align: left; -} - -.inserted-table th { - background-color: #f2f2f2; - font-weight: 600; -} - -.inserted-table tr:nth-child(even) { - background-color: #f9f9f9; -} - -.inserted-table tr:hover { - background-color: #f0f4ff; -} - -/* Mobile Responsive for Table Dialog */ -@media (max-width: 768px) { - .table-dialog-modal { - width: 95%; - max-height: 90vh; - } - - .table-dialog-header, - .table-dialog-content, - .table-dialog-actions { - padding: 1rem; - } - - .table-options { - gap: 1rem; - } -} diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html index 1b8d415..c28df32 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html @@ -1,3 +1,5 @@ + +