From 3907ae4b7e7555111e104b56f8069733373d9d45 Mon Sep 17 00:00:00 2001 From: rohit Date: Sun, 31 Aug 2025 12:05:59 +0530 Subject: [PATCH] v1.0.0-beta --- .../propertyTemplateSelector copy.css | 8133 +++++++++++++++++ .../propertyTemplateSelector.css | 7331 ++++++++++++++- .../propertyTemplateSelector.css.backup | 8133 +++++++++++++++++ .../propertyTemplateSelector.html | 1374 +-- .../propertyTemplateSelector.html.backup | 1192 +++ .../propertyTemplateSelector.js | 1553 +++- .../propertyTemplateSelector.js.backup | 4494 +++++++++ 7 files changed, 31014 insertions(+), 1196 deletions(-) create mode 100644 force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css create mode 100644 force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css.backup create mode 100644 force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html.backup create mode 100644 force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js.backup diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css new file mode 100644 index 0000000..2c526d5 --- /dev/null +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector copy.css @@ -0,0 +1,8133 @@ +.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 2ca0cb6..2c526d5 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css @@ -1,29 +1,80 @@ .property-brochure-generator { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + /* 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, #667eea 0%, #764ba2 100%); - color: white; - padding: 3rem 2rem; + 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; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + 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: -20px -20px 0px -20px; + 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; @@ -33,23 +84,55 @@ 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-size: 2.5rem; + 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 10px 0; - text-shadow: 0 2px 10px rgba(0,0,0,0.2); - letter-spacing: 1px; - z-index: 2; + 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-size: 1.2rem; + 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; - opacity: 0.95; - text-shadow: 0 1px 5px rgba(0,0,0,0.2); + 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; @@ -58,6 +141,8 @@ font-weight: 500; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); +} + /* Error Message */ .error-message { background: #fee; @@ -66,52 +151,116 @@ 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: white; + background: rgba(255, 255, 255, 0.95); margin: 0 2rem 0 2rem; - border-radius: 12px; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); + 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 { - transform: translateY(-2px); + 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: 2rem 3rem; + padding: 0 3rem 2rem 3rem; +} + .step-content.active { display: block; animation: fadeInUp 0.5s ease; +} + @keyframes fadeInUp { from { opacity: 0; @@ -120,13 +269,52 @@ 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-weight: 300; - margin: 0 0 1rem 0; + 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; @@ -134,163 +322,497 @@ 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; - border-width: 2px; +} + .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; @@ -298,1148 +820,6132 @@ 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 { - color: #FF8C00; /* Orange color for first text */ + 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; - color: #ffffff; /* White color for remaining texts */ + 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 { - margin-top: 0.5rem; + 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 { - padding: 1rem 2rem; + 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.6; + 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: #6c757d; + 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: #5a6268; + 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 { -/* Step 2 Grid Layout */ + 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 { - margin-bottom: 2rem; -.step2-grid-row-2 { - grid-column: 1 / span 2; -.property-section, .market-analysis-section { - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); -.property-section h3, .market-analysis-section h3 { -.property-dropdown { - border: 2px solid #e9ecef; - transition: border-color 0.3s ease; -.property-dropdown:focus { - outline: none; -/* Property Details Display */ -.property-details-display { - margin-top: 1.5rem; - padding-top: 1.5rem; - border-top: 1px solid #e9ecef; -.property-details-display h4 { -.property-grid { -.property-item { - flex-direction: column; - gap: 0.3rem; -.property-item .label { - -.property-item .value { -/* Market Analysis Options */ -.market-analysis-section p { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; margin-bottom: 1.5rem; -.market-options { - gap: 1rem; -.checkbox-item { + 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; - padding: 0.5rem; - transition: background-color 0.3s ease; +} + +/* 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); -/* Z-Index Control */ -.z-index-controls { -.z-index-input { - width: 80px; - border: 1px solid #ddd; -.z-index-input:focus { - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); -/* Draggable Elements */ -.draggable-text-box { - transition: box-shadow 0.2s ease; -.draggable-text-box:hover { - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -.draggable-text-box:focus { - border: 2px solid #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); -.draggable-image-container { -.draggable-image-container:hover { -/* Resizer */ -.resizer { -.resizer:hover { - background: #5a67d8 !important; - transform: scale(1.2); -/* Delete Button */ -.delete-btn { -.delete-btn:hover { - transform: scale(1.1); - background: #ff3742 !important; -/* Copy Button */ -.copy-btn { -.copy-btn:hover { - background: #26de81 !important; -/* Image Control Panel */ -.image-control-panel { - transition: opacity 0.3s ease; -.control-btn { -.control-btn:hover { - background: rgba(255, 255, 255, 0.2) !important; -/* Sticky Info Panel */ - .sticky-info-panel { - display: none !important; - position: fixed; - top: 150px; - right: 20px; - width: 320px; - background: white; - border: 2px solid #667eea; - border-radius: 8px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); - z-index: 10000; - transition: all 0.3s ease; - } -.sticky-info-panel.collapsed { - width: 200px; -.info-panel-header { - padding: 12px 15px; - border-radius: 6px 6px 0 0; -.info-panel-title { -.info-panel-toggle { - border-radius: 3px; - transition: background 0.2s ease; -.info-panel-toggle:hover { -.info-panel-content { - max-height: 500px; - overflow-y: scroll; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE and Edge */ -.info-panel-content::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ -.info-section { -.info-section:last-child { -.info-section h4 { - border-bottom: 1px solid #e9ecef; -.info-section ul { - padding-left: 20px; -.info-section li { - margin-bottom: 5px; -.info-section strong { -/* Selection Handles */ -.selection-handle { -.selection-handle:hover { -/* Selected Elements */ -.draggable-text-box.selected, -.draggable-image-container.selected { - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3); +} + /* 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 responsive dimensions for different page sizes */ +} + +/* Preview frame with exact A4 dimensions for accurate PDF generation */ .preview-frame { - background: #f5f5f5; -/* Individual page containers */ -.preview-page { - border: 2px solid #ddd; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - page-break-after: always; - break-after: page; -/* Page size specific dimensions */ -.preview-page.page-size-a4 { + position: relative; width: 210mm; height: 297mm; - transform: scale(0.9); -.preview-page.page-size-a3 { - width: 297mm; - height: 420mm; - transform: scale(0.5); -.preview-frame.page-size-a4 { -.preview-frame.page-size-a3 { - transform: scale(0.5); /* Reduced scale to prevent breaking */ + 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); -/* Page number indicator for each page */ -.preview-page::before { - content: attr(data-page-number); - top: 10px; - padding: 5px 10px; - z-index: 10; -/* Page Size Options */ -.page-size-section { -.page-size-label { -.page-size-options { -.page-size-option { - padding: 0.5rem 1rem; -.page-size-option:hover { -.page-size-option input[type="radio"] { -.page-size-option input[type="radio"]:checked + .page-size-text { -.page-size-text { - transition: color 0.2s ease; + 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; - color: #ffffff; /* White color for subtitle text */ + 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: 2rem; + font-size: 3rem; + } + .subtitle { - font-size: 1rem; + 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; - font-size: 1.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 { - background: rgba(0, 0, 0, 0.7); + 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: 90%; - max-height: 90%; - width: 800px; + 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); - gap: 30px; - align-items: start; +} + .property-details h4 { - grid-column: 1 / -1; -.property-section-group { - box-shadow: 0 4px 15px rgba(0,0,0,0.08); -.property-section-group:hover { -.property-section-group h5 { -.property-description { + 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 { - padding: 15px 18px; -.property-field:hover { - transform: translateX(5px); + 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 { - text-align: right; -/* Special styling for contact details */ -.contact-details-section { - background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); - border-left: 4px solid #28a745; -.contact-details-section .property-field { - border: 1px solid #d4edda; -/* Special styling for location details */ -.location-details-section { - background: linear-gradient(135deg, #f8f9fa 0%, #fff3cd 100%); - border-left: 4px solid #ffc107; -.location-details-section .property-field { - border: 1px solid #ffeaa7; -/* Special styling for specifications */ -.specifications-section { - background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%); -.specifications-section .property-field { - border: 1px solid #c3e6cb; -/* Special styling for pricing */ -.pricing-section { - background: linear-gradient(135deg, #f8f9fa 0%, #fff5f5 100%); - border-left: 4px solid #dc3545; -.pricing-section .property-field { - border: 1px solid #f5c6cb; -/* Special styling for availability */ -.availability-section { - background: linear-gradient(135deg, #f8f9fa 0%, #f0f8ff 100%); - border-left: 4px solid #17a2b8; -.availability-section .property-field { - border: 1px solid #bee5eb; -/* Special styling for amenities */ -.amenities-section { - background: linear-gradient(135deg, #f8f9fa 0%, #f8f9fa 100%); - border-left: 4px solid #6f42c1; -.amenities-section .property-field { -/* Special styling for basic info */ -.basic-info-section { -.basic-info-section .property-field { - border: 1px solid #bbdefb; -/* Grid Layout for Property Details - Two Top Rectangles + One Bottom Rectangle */ -.property-details-layout { - margin-top: 30px; -.property-details-layout h3 { - border-bottom: 2px solid #667eea; -/* Top Row: Two Smaller Rectangles Side by Side */ -.property-details-top-row { - min-height: fit-content; -.property-details-top-left, -.property-details-top-right { - grid-template-columns: 1fr; -/* Bottom Row: One Larger Rectangle - Full Width */ -.property-details-bottom-row { - clear: both; -/* Ensure property section groups maintain structure */ - box-shadow: 0 2px 8px rgba(0,0,0,0.1); -/* Ensure proper spacing and layout flow */ - padding-top: 0; - border-bottom: 2px solid #f0f0f0; - padding-bottom: 8px; - padding: 8px 12px; - background: #e3f2fd; - margin-left: 10px; -/* Description section styling - Left aligned */ -.description-section .property-description { - text-align: left; -.description-section .property-field { - align-items: flex-start; -.description-section .property-field .label { -.description-section .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 */ +} + +/* Debug Info - Hide in production */ .debug-info { - background: #e3f2fd !important; - border: 1px solid #2196f3; - color: #1565c0; - font-family: monospace; + 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 { - height: calc(100vh - 200px); + display: block; + position: relative; + height: calc(100vh - 160px); + overflow: hidden; + padding-bottom: 1rem; +} + .step3.hidden { + display: none; +} + /* Editor Container - Fixed Layout */ -/* Left Toolbar - Fixed Position, No Scrollbar */ - width: 280px; - max-height: 100%; +.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: 1rem !important; + 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 */ @@ -1449,352 +6955,1179 @@ button, .btn, .toolbar-button, .export-pdf-btn { .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; -/* First company name in orange, second in white */ -.preview-company .preview-company-name:first-child { -.preview-company .preview-company-name:last-child { - color: white; /* White color for second text */ +} + +.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: linear-gradient(135deg, #FFD700, #FFA500); - border: 1px solid #FFD700; - box-shadow: 0 6px 20px rgba(255,215,0,0.2); + 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 { -/* Image Review Modal Styles */ -.image-review-overlay { -.image-review-modal { - max-width: 800px; - max-height: 90vh; -.image-review-header { -.image-review-header h3 { -.image-review-content { - max-height: calc(90vh - 120px); -.category-navigation { -.category-btn { -.category-btn:hover { -.category-btn.active { -.image-display-area { - margin: 30px 0; -.review-image { - max-height: 400px; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); -.image-info h4 { -.image-category { -.no-image-message { -.image-navigation { -.nav-btn { -.nav-btn:hover:not(:disabled) { - background: #5a6fd8; -.nav-btn:disabled { - background: #ccc; -.nav-icon { -.image-counter { -/* Step 2 Image Review Section Styles */ -.image-review-section { -.image-review-section h3 { -.image-review-section p { -.category-navigation-step2 { -.category-btn-step2 { -.category-btn-step2:hover { -.category-btn-step2.active { -.category-icon { -.image-display-area-step2 { - min-height: 350px; -.image-container-step2 { -.property-image-step2 { - max-height: 300px; - border: 3px solid white; -.image-info-step2 h4 { -.image-category-step2 { -.no-image-message-step2 { -.image-navigation-step2 { -.nav-btn-step2 { -.nav-btn-step2:hover:not(:disabled) { -.nav-btn-step2:disabled { -.nav-icon-step2 { -.image-counter-step2 { -/* ===== ENHANCED TEXT BOX STYLES ===== */ -.enhanced-text-box { - border: 2px solid #007bff !important; - border-radius: 8px !important; - box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important; - transition: all 0.3s ease !important; -.enhanced-text-box:hover { - border-color: #0056b3 !important; - box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important; -.enhanced-text-box:focus { - box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important; - outline: none !important; -/* ===== EDIT IMAGE BUTTON STYLES ===== */ -.edit-image-btn { - position: absolute !important; - top: 5px !important; - right: 5px !important; - background: rgba(0, 123, 255, 0.9) !important; - border: none !important; - border-radius: 50% !important; - width: 30px !important; - height: 30px !important; - cursor: pointer !important; - font-size: 14px !important; - z-index: 1001 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; -.edit-image-btn:hover { - background: rgba(0, 123, 255, 1) !important; - transform: scale(1.1) !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; -.editable-image-container { - position: relative !important; - display: inline-block !important; -/* ===== IMPROVED TOOLBAR BUTTONS ===== */ - border-radius: 6px !important; - transform: translateY(-2px) !important; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; - transform: translateY(0) !important; -/* ===== SUCCESS/ERROR MESSAGE STYLES ===== */ -.success-message { - background: linear-gradient(135deg, #28a745, #20c997) !important; - color: white !important; - padding: 12px 20px !important; - margin: 10px 0 !important; - box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important; - animation: slideInDown 0.5s ease !important; - background: linear-gradient(135deg, #dc3545, #e74c3c) !important; - box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important; -@keyframes slideInDown { -/* ===== IMPROVED TEXT BOX RESIZE HANDLES ===== */ - resize: both !important; - overflow: auto !important; - white-space: pre-wrap !important; - word-wrap: break-word !important; - min-height: 40px !important; - min-width: 100px !important; -/* ===== BETTER SELECTION INDICATORS ===== */ -.draggable-text-box:focus, - outline: 2px solid #007bff !important; - outline-offset: 2px !important; -/* ===== IMPROVED TOOLBAR LAYOUT ===== */ - margin-bottom: 20px !important; - padding: 15px !important; - background: rgba(255, 255, 255, 0.8) !important; - border-radius: 10px !important; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; - font-weight: 600 !important; - color: #333 !important; - margin-bottom: 10px !important; - text-transform: uppercase !important; - letter-spacing: 0.5px !important; -/* ===== LOAD BUTTON STYLES ===== */ -.toolbar-button[onclick*="handleLoad"] { -.toolbar-button[onclick*="handleLoad"]:hover { - background: linear-gradient(135deg, #218838, #1e7e34) !important; -/* ===== SAVE BUTTON STYLES ===== */ -.toolbar-button[onclick*="handleSave"] { - background: linear-gradient(135deg, #007bff, #0056b3) !important; -.toolbar-button[onclick*="handleSave"]:hover { - background: linear-gradient(135deg, #0056b3, #004085) !important; -/* ===== ENHANCED IMAGE CONTAINER STYLES ===== */ -.enhanced-image-container { -.enhanced-image-container:hover { -.enhanced-image-container img { - height: 100% !important; - object-fit: cover !important; -/* ===== ENHANCED RESIZER STYLES ===== */ - background: #007bff !important; - border: 2px solid white !important; - z-index: 1002 !important; - transition: all 0.2s ease !important; - background: #0056b3 !important; - transform: scale(1.2) !important; -/* ===== IMPROVED TEXT BOX STYLES ===== */ - box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2) !important; - box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3) !important; -/* ===== HIDE QUICK START GUIDE FROM VIEWPORT ===== */ -.sticky-info-panel { -/* ===== IMAGE EDIT FUNCTIONALITY STYLES ===== */ -/* ===== MODAL STYLES ===== */ -.image-edit-modal, -.property-image-modal { - position: fixed !important; - top: 0 !important; - left: 0 !important; - background: rgba(0, 0, 0, 0.5) !important; - z-index: 10000 !important; -.image-edit-modal > div, -.property-image-modal > div { - background: white !important; - padding: 30px !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; - max-width: 400px !important; - width: 90% !important; - text-align: center !important; - max-width: 600px !important; - max-height: 80vh !important; -/* ===== IMAGE GRID STYLES ===== */ -.image-grid { - display: grid !important; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; - gap: 15px !important; -.image-item { - border: 2px solid #ddd !important; - overflow: hidden !important; -.image-item:hover { - border-color: #007bff !important; - transform: scale(1.05) !important; -.image-item img { - height: 120px !important; -.image-label { - padding: 8px !important; - font-size: 12px !important; - background: #f8f9fa !important; -/* ===== CUSTOM IMAGE EDIT MODAL ANIMATIONS ===== */ -@keyframes modalSlideIn { - transform: translateY(-50px) scale(0.9); -.custom-image-edit-modal { - animation: fadeIn 0.3s ease-out; - from { opacity: 0; } - to { opacity: 1; } -/* ===== ENHANCED EDIT BUTTON STYLES ===== */ -.template-image-edit-btn { -.template-image-edit-btn:hover { -/* ===== MODAL CONTENT STYLES ===== */ -.custom-image-edit-content { - animation: modalSlideIn 0.3s ease-out !important; -/* ===== PROPERTY IMAGE GRID STYLES ===== */ -.property-image-grid { - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; - gap: 20px !important; - margin-bottom: 25px !important; -.property-image-item { - border: 3px solid #ddd !important; - border-radius: 12px !important; -.property-image-item:hover { - box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important; + 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.backup b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css.backup new file mode 100644 index 0000000..2c526d5 --- /dev/null +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css.backup @@ -0,0 +1,8133 @@ +.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 111c17e..1b8d415 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html @@ -40,31 +40,34 @@
-

Property Brochure

+

Property Brochure

Professional Template

-
+
- +