/* جراجي | Garaji - Stylesheet Build Plan: ============ 1. CSS Reset & Base Styles 2. Typography System (IBM Plex Sans Arabic) 3. Color Palette & Variables 4. Layout System (Container, Grid, Section) 5. Components: - Header & Navigation - Hero Section - Feature Cards - Steps/How It Works - Registration Form (with dynamic service fields) - FAQ Accordion - CTA Section - Footer 6. Utilities & Helpers 7. Responsive Breakpoints RTL/LTR Handling: ================= • All directional properties use CSS logical properties: - margin-left/right → margin-inline-start/end - padding-left/right → padding-inline-start/end - text-align: left/right → text-align: start/end - border-radius → border-start-start-radius, etc. • Icons and transforms use :dir(rtl) and :dir(ltr) selectors • Grid and flexbox naturally adapt to direction changes • Simply changing dir="rtl" or dir="ltr" on updates the entire layout Inspired by Thmanyah: ===================== • Generous white space • Strong typography hierarchy • Clean grid layouts • Black/white + single accent color • Subtle borders and shadows */ /* ======================================== 1. CSS Reset & Base Styles ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.7; color: #111; background-color: #fff; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: all 0.3s ease; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ======================================== 2. Typography System ======================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin-block-end: 1rem; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; } h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; } p { margin-block-end: 1rem; } .lead { font-size: 1.25rem; line-height: 1.6; color: #444; } /* ======================================== 3. Color Palette & Variables ======================================== */ :root { --color-text: #111; --color-text-light: #444; --color-text-lighter: #666; --color-bg: #fff; --color-bg-alt: #fafafa; --color-border: #eaeaea; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-success: #10b981; --color-error: #ef4444; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 5rem; --spacing-2xl: 7rem; --border-radius: 8px; --border-radius-sm: 4px; --border-radius-lg: 12px; --transition: all 0.3s ease; --container-max: 1200px; --container-padding: 2rem; } /* ======================================== 4. Layout System ======================================== */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); width: 100%; } .section { padding-block: var(--spacing-2xl); } .section-intro { max-width: 800px; margin-inline: auto; text-align: center; margin-block-end: var(--spacing-lg); } .section-title { margin-block-end: var(--spacing-sm); text-align: center; } .section-description { font-size: 1.125rem; color: var(--color-text-light); line-height: 1.7; text-align: center; max-width: 700px; margin-inline: auto; margin-block-end: var(--spacing-lg); } .section-lead { font-size: 1.25rem; color: var(--color-text-light); line-height: 1.7; margin-block-end: var(--spacing-md); } /* Grid System */ .grid { display: grid; gap: var(--spacing-md); } .grid-features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-steps { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); } /* ======================================== 5. Components - Header & Navigation ======================================== */ .header { position: sticky; top: 0; z-index: 1000; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-block-end: 1px solid var(--color-border); } .nav-container { padding-block: var(--spacing-sm); } .nav-wrapper { display: flex; align-items: center; justify-content: space-between; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 0.5rem; } .logo-image { display: inline-flex; align-items: center; transition: var(--transition); } .logo-image:hover { transform: translateY(-2px); } .logo-svg { height: 50px; width: auto; display: block; } @media (max-width: 768px) { .logo-svg { height: 40px; } } .logo-divider { color: var(--color-border); } .logo-en { font-weight: 400; color: var(--color-text-lighter); } .mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; z-index: 1001; } .hamburger { width: 24px; height: 2px; background-color: var(--color-text); transition: var(--transition); } .mobile-menu-toggle[aria-expanded="true"] .hamburger { background-color: transparent; } .nav-menu { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; } .nav-link { color: var(--color-text); font-weight: 500; padding: 0.5rem 0; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 0; height: 2px; background-color: var(--color-accent); transition: width 0.3s ease; } .nav-link:hover::after, .nav-link:focus::after { width: 100%; } /* Language Dropdown */ .language-dropdown { position: relative; } .language-toggle { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: transparent; color: var(--color-text); font-weight: 500; font-size: 0.95rem; transition: var(--transition); cursor: pointer; } .language-toggle:hover { border-color: var(--color-accent); background-color: rgba(37, 99, 235, 0.05); } .language-toggle[aria-expanded="true"] { border-color: var(--color-accent); background-color: rgba(37, 99, 235, 0.05); } .language-toggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); } .globe-icon { flex-shrink: 0; color: var(--color-accent); } .current-lang { font-size: 0.95rem; } .chevron-icon { flex-shrink: 0; transition: transform 0.3s ease; } .language-menu { position: absolute; top: calc(100% + 0.5rem); inset-inline-start: 0; background-color: #fff; border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 140px; padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; list-style: none; } .language-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .language-option { display: block; padding: 0.625rem 1rem; color: var(--color-text); font-weight: 500; transition: var(--transition); text-decoration: none; } .language-option:hover { background-color: var(--color-bg-alt); color: var(--color-accent); } .language-option.active { background-color: rgba(37, 99, 235, 0.1); color: var(--color-accent); position: relative; } .language-option.active::before { content: '✓'; position: absolute; inset-inline-start: 0.75rem; font-weight: 700; } .language-option.active { padding-inline-start: 2rem; } /* ======================================== Components - Buttons ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; border-radius: var(--border-radius); transition: var(--transition); cursor: pointer; text-align: center; border: 2px solid transparent; font-size: 1rem; line-height: 1.5; } .btn-primary { background-color: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } .btn-outline { background-color: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn-outline:hover, .btn-outline:focus { background-color: var(--color-accent); color: #fff; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; } .btn-lg { padding: 1rem 2rem; font-size: 1.125rem; } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } /* ======================================== Components - Hero Section ======================================== */ .hero { padding-block-start: var(--spacing-xl); padding-block-end: var(--spacing-2xl); background: linear-gradient(to bottom, #fafafa 0%, #fff 100%); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); align-items: center; } @media (min-width: 768px) { .hero-grid { grid-template-columns: 1.2fr 1fr; } } .hero-content { max-width: 600px; } .hero-title { margin-block-end: var(--spacing-md); color: var(--color-text); } .hero-lead { font-size: 1.25rem; line-height: 1.7; color: var(--color-text-light); margin-block-end: var(--spacing-lg); font-style: italic; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; } .hero-image { display: flex; align-items: center; justify-content: center; } .hero-image img { max-width: 75%; height: auto; } /* ======================================== Components - Feature Cards ======================================== */ .section-features { background-color: var(--color-bg); } .card { background-color: #fff; border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--spacing-lg); transition: var(--transition); } .card:hover { border-color: var(--color-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-4px); } .feature-card { text-align: center; } .feature-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-inline: auto; margin-block-end: var(--spacing-sm); color: var(--color-accent); } .feature-title { font-size: 1.25rem; margin-block-end: var(--spacing-xs); color: var(--color-text); } .feature-description { color: var(--color-text-light); margin: 0; } /* ======================================== Components - Steps / How It Works ======================================== */ .section-how { background-color: var(--color-bg-alt); } .step-card { position: relative; padding-inline-start: calc(var(--spacing-lg) + 40px); } .step-number { position: absolute; inset-inline-start: 0; top: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--color-accent); color: #fff; border-radius: 50%; font-size: 1.5rem; font-weight: 700; } .step-title { margin-block-end: var(--spacing-xs); } .step-description { color: var(--color-text-light); margin: 0; } /* ======================================== Components - Provider Highlight ======================================== */ .section-provider-highlight { background-color: var(--color-bg); } .provider-content { max-width: 800px; margin-inline: auto; text-align: center; } .benefits-list { text-align: start; max-width: 600px; margin-inline: auto; margin-block: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); } .benefits-list li { padding-inline-start: var(--spacing-md); position: relative; color: var(--color-text-light); line-height: 1.7; } .benefits-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--color-accent); font-weight: 700; } /* ======================================== Components - Registration Form ======================================== */ .section-register { background-color: var(--color-bg-alt); } .form-header { max-width: 800px; margin-inline: auto; text-align: center; margin-block-end: var(--spacing-lg); } .registration-form { max-width: 900px; margin-inline: auto; background-color: #fff; padding: var(--spacing-lg); border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); } .form-section { border: none; margin-block-end: var(--spacing-lg); } .form-section-title { font-size: 1.5rem; font-weight: 600; margin-block-end: var(--spacing-md); padding-block-end: var(--spacing-xs); border-block-end: 2px solid var(--color-border); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); } .form-group { margin-block-end: var(--spacing-md); } .form-label { display: block; font-weight: 600; margin-block-end: var(--spacing-xs); color: var(--color-text); } .required { color: var(--color-error); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem 1rem; font-family: inherit; font-size: 1rem; border: 2px solid var(--color-border); border-radius: var(--border-radius); background-color: #fff; transition: var(--transition); color: var(--color-text); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-input.error, .form-select.error, .form-textarea.error { border-color: var(--color-error); } .form-input-sm { padding: 0.5rem 0.75rem; font-size: 0.9rem; } .form-textarea { resize: vertical; min-height: 100px; } .form-error { display: block; color: var(--color-error); font-size: 0.875rem; margin-block-start: var(--spacing-xs); } .form-help { display: block; color: var(--color-text-lighter); font-size: 0.9rem; margin-block-end: var(--spacing-sm); } .checkbox-label { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; font-weight: 500; } .checkbox-label-block { display: flex; align-items: flex-start; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; } .link { color: var(--color-accent); text-decoration: underline; } .link:hover { color: var(--color-accent-hover); } /* Map Preview */ .map-preview { margin-block-start: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; } /* Services List */ .services-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .service-item { padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: var(--transition); } .service-item:has(.service-checkbox:checked) { border-color: var(--color-accent); background-color: rgba(37, 99, 235, 0.05); } .service-details { margin-block-start: var(--spacing-sm); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-sm); } @media (max-width: 600px) { .service-details { grid-template-columns: 1fr; } } /* Form Actions */ .form-actions { margin-block-start: var(--spacing-lg); display: flex; justify-content: center; } .btn-loader { display: flex; align-items: center; gap: 0.5rem; } .spinner { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Form Messages */ .form-message { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-md); border-radius: var(--border-radius); margin-block-start: var(--spacing-md); } .form-message svg { flex-shrink: 0; margin-block-start: 2px; } .form-message-success { background-color: rgba(16, 185, 129, 0.1); border: 1px solid var(--color-success); color: #065f46; } .form-message-success svg { stroke: var(--color-success); } .form-message-error { background-color: rgba(239, 68, 68, 0.1); border: 1px solid var(--color-error); color: #991b1b; } .form-message-error svg { stroke: var(--color-error); } .form-message strong { display: block; margin-block-end: 0.25rem; } .form-message p { margin: 0; } /* ======================================== Components - FAQ Accordion ======================================== */ .section-faq { background-color: var(--color-bg); } .faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--spacing-sm); } .faq-item { border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; background-color: #fff; } .faq-question { width: 100%; padding: var(--spacing-md); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); font-size: 1.125rem; font-weight: 600; text-align: start; cursor: pointer; transition: var(--transition); background-color: transparent; color: var(--color-text); } .faq-question:hover { background-color: var(--color-bg-alt); } .faq-icon { flex-shrink: 0; transition: transform 0.3s ease; color: var(--color-accent); } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-answer { padding: 0 var(--spacing-md) var(--spacing-md); color: var(--color-text-light); line-height: 1.7; } .faq-answer p { margin: 0; } /* ======================================== Components - CTA Section ======================================== */ .section-cta { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); color: #fff; text-align: center; } .cta-content { max-width: 700px; margin-inline: auto; } .cta-title { color: #fff; margin-block-end: var(--spacing-sm); } .cta-description { font-size: 1.25rem; margin-block-end: var(--spacing-lg); opacity: 0.95; } .section-cta .btn-primary { background-color: #fff; color: var(--color-accent); border-color: #fff; } .section-cta .btn-primary:hover { background-color: var(--color-bg-alt); border-color: var(--color-bg-alt); } /* ======================================== Components - Footer ======================================== */ .footer { background-color: #111; color: #fff; padding-block: var(--spacing-xl); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-block-end: var(--spacing-lg); } .footer-logo { font-size: 1.5rem; font-weight: 700; margin-block-end: var(--spacing-sm); display: flex; align-items: center; gap: 0.5rem; } .footer-description { color: #aaa; margin: 0; } .footer-title { font-size: 1rem; font-weight: 600; margin-block-end: var(--spacing-sm); color: #fff; } .footer-list { display: flex; flex-direction: column; gap: var(--spacing-xs); } .footer-link, .footer-text { color: #aaa; display: flex; align-items: center; gap: var(--spacing-xs); transition: var(--transition); } .footer-link:hover { color: #fff; padding-inline-start: var(--spacing-xs); } .footer-link svg, .footer-text svg { flex-shrink: 0; } .social-links { display: flex; gap: var(--spacing-sm); margin-block-start: var(--spacing-md); } .social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: #fff; transition: var(--transition); } .social-link:hover { background-color: var(--color-accent); transform: translateY(-3px); } .footer-bottom { text-align: center; padding-block-start: var(--spacing-md); border-block-start: 1px solid rgba(255, 255, 255, 0.1); color: #aaa; font-size: 0.9rem; } .footer-bottom p { margin: 0; } /* ======================================== 6. Responsive - Mobile Menu ======================================== */ @media (max-width: 900px) { .mobile-menu-toggle { display: flex; } .nav-menu { position: fixed; top: 0; inset-inline-end: -100%; width: 100%; max-width: 300px; height: 100vh; background-color: #fff; flex-direction: column; align-items: flex-start; padding: var(--spacing-2xl) var(--spacing-md); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1); transition: inset-inline-end 0.3s ease; z-index: 999; } .nav-menu.active { inset-inline-end: 0; } .nav-link { width: 100%; padding: var(--spacing-sm) 0; font-size: 1.125rem; } /* Language Dropdown on Mobile */ .language-dropdown { width: 100%; margin-block: var(--spacing-sm); } .language-toggle { width: 100%; justify-content: space-between; } .language-menu { position: static; width: 100%; margin-block-start: var(--spacing-xs); box-shadow: none; border: 1px solid var(--color-border); } } /* ======================================== 7. Responsive Adjustments ======================================== */ @media (max-width: 768px) { :root { --container-padding: 1.5rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; } .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-content { max-width: 100%; } .hero-actions { justify-content: center; } .step-card { padding-inline-start: 0; text-align: center; } .step-number { position: static; margin-inline: auto; margin-block-end: var(--spacing-sm); } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } .btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; } .hero-lead { font-size: 1.125rem; } .registration-form { padding: var(--spacing-md); } } /* ======================================== 8. Accessibility & Focus States ======================================== */ :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .btn:focus-visible { outline-offset: 4px; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ======================================== 9. Print Styles ======================================== */ @media print { .header, .mobile-menu-toggle, .hero-actions, .form-actions, .section-cta, .footer { display: none; } body { font-size: 12pt; line-height: 1.5; color: #000; } .section { page-break-inside: avoid; } } /* ======================================== Modal Styles ======================================== */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .modal-content { background: white; border-radius: 12px; max-width: 90vw; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); margin: auto; } .modal-header { flex-shrink: 0; padding: 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; background: white; border-radius: 12px 12px 0 0; } .modal-header h3 { font-size: 1.25rem; font-weight: 600; color: #111827; } .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6b7280; padding: 0.25rem; line-height: 1; } .modal-close:hover { color: #374151; } .modal-body { padding: 1.5rem; flex: 1; overflow-y: auto; } .modal-footer { flex-shrink: 0; padding: 1.5rem; border-top: 1px solid #e5e7eb; display: flex; gap: 0.75rem; justify-content: flex-end; background: white; border-radius: 0 0 12px 12px; } /* ======================================== Form Enhancements ======================================== */ .form-input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; } .form-error { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; display: block; } .service-details { margin-top: 0.75rem; padding: 0.75rem; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 0.5rem; } .service-details .form-input-sm { font-size: 0.875rem; padding: 0.5rem 0.75rem; } /* ======================================== Map Selection Styles ======================================== */ .map-selection-container { display: flex; flex-direction: column; gap: 1rem; } .map-selection-btn { width: 100%; justify-content: center; padding: 1rem; border: 2px dashed #d1d5db; background: #f9fafb; color: #6b7280; transition: all 0.3s ease; } .map-selection-btn:hover { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; } .selected-location { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f0fdf4; border: 2px solid #22c55e; border-radius: 8px; color: #166534; } .btn-change-location { background: none; border: 1px solid #22c55e; color: #22c55e; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; } .btn-change-location:hover { background: #22c55e; color: white; } .geolocation-control { background: white; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .modal-content { background: white; border-radius: 12px; width: 100%; max-width: 90vw; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; } .map-modal-content { max-width: 800px; width: 100%; max-height: 90vh; height: auto; } .map-instructions { background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; color: #0c4a6e; } .map-instructions p { margin: 0; font-size: 0.875rem; line-height: 1.5; } #confirmLocationBtn:disabled { opacity: 0.5; cursor: not-allowed; } /* Map Container */ #map { width: 100% !important; height: 500px !important; border-radius: 8px; border: 1px solid #e5e7eb; z-index: 1; background: #f0f0f0; position: relative; } .leaflet-container { width: 100% !important; height: 100% !important; border-radius: 8px; background: #f0f0f0; } .leaflet-tile-container { background: #f0f0f0; } .leaflet-map-pane { background: #f0f0f0; } /* Leaflet Tiles */ .leaflet-tile { background: #f0f0f0; } .leaflet-tile-pane { background: #f0f0f0; } /* Debug styles */ #map:empty::after { content: "جاري تحميل الخريطة..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666; font-size: 14px; z-index: 1000; } /* Force Leaflet styles */ .leaflet-container { font-family: inherit !important; } .leaflet-popup-content-wrapper { border-radius: 8px !important; } .leaflet-control-zoom { border-radius: 4px !important; } /* Ensure map container is visible */ #map { visibility: visible !important; opacity: 1 !important; } /* Modal Body for Map */ .modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 1.5rem; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .map-instructions { flex-shrink: 0; margin-bottom: 1rem; } #map { flex: 0 0 auto; min-height: 400px; height: 500px; position: relative; } /* Ensure modal is properly centered */ @media (max-width: 768px) { .modal { padding: 0.5rem; align-items: flex-start; } .map-modal-content { max-width: 95vw; max-height: 95vh; margin-top: 0.5rem; margin-bottom: 0.5rem; } .modal-body { padding: 1rem; } #map { min-height: 300px; height: 400px; } .modal-header { padding: 1rem; } .modal-footer { padding: 1rem; } } .btn-loader { display: flex; align-items: center; gap: 0.5rem; } .spinner { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ======================================== 10. Direction-Specific Adjustments ======================================== */ /* Ensure icons flip correctly in RTL */ :dir(rtl) .faq-icon, :dir(rtl) .step-number { transform: scaleX(1); } :dir(ltr) .benefits-list li::before { left: 0; } :dir(rtl) .benefits-list li::before { right: 0; } /* Specific overrides for elements that need manual direction handling */ input[type="email"], input[type="tel"] { /* Keep tel/email inputs LTR for better UX */ direction: ltr; text-align: start; } /* ======================================== 11. Enhanced Map Modal Animations ======================================== */ .modal { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .map-modal-content { animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; padding: 0; } .modal-close:hover { background-color: #fee; transform: rotate(90deg); } .modal-close svg { transition: transform 0.2s ease; } /* Enhanced Map Styles */ .leaflet-control-zoom a { color: #2563eb !important; font-weight: 600 !important; } .leaflet-control-zoom a:hover { background-color: #eff6ff !important; } .leaflet-popup-content-wrapper { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } .leaflet-popup-tip { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } /* Pulse animation for marker */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } .marker-pulse { animation: pulse 2s infinite; } /* Map loading state */ .leaflet-container.loading { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Geolocation button states */ .geolocation-control.loading { animation: spin 1s linear infinite; } .geolocation-control.success { background-color: #dcfce7 !important; color: #16a34a !important; } .geolocation-control.error { background-color: #fee !important; color: #dc2626 !important; } /* Better instructions box */ .map-instructions { position: relative; overflow: hidden; } .map-instructions::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, #0ea5e9, #0284c7); border-radius: 4px 0 0 4px; } .map-instructions ul { list-style: none; } .map-instructions li { position: relative; padding-inline-start: 1.5rem; margin-block: 0.25rem; } .map-instructions li::before { content: '•'; position: absolute; inset-inline-start: 0.5rem; color: #0ea5e9; font-weight: bold; font-size: 1.2rem; } /* Modal footer responsive */ @media (max-width: 480px) { .modal-footer { flex-direction: column-reverse; } .modal-footer .btn { width: 100%; } } /* Smooth transitions for all buttons */ .btn { position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:active::before { width: 300px; height: 300px; } /* Map container focus state */ #map:focus { outline: 3px solid rgba(37, 99, 235, 0.3); outline-offset: 2px; } /* Tooltip for coordinates */ .coordinates-tooltip { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .coordinates-tooltip.active { opacity: 1; } /* ======================================== 12. File Upload Styling ======================================== */ input[type="file"] { cursor: pointer; } input[type="file"]::file-selector-button { padding: 0.5rem 1rem; background: var(--color-accent); color: white; border: none; border-radius: var(--border-radius-sm); cursor: pointer; font-weight: 600; margin-inline-end: 1rem; transition: var(--transition); } input[type="file"]::file-selector-button:hover { background: var(--color-accent-hover); } .form-help { display: block; color: var(--color-text-lighter); font-size: 0.875rem; margin-block-start: var(--spacing-xs); } /* File upload progress indicator */ .file-upload-loading { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: #eff6ff; border: 1px solid #3b82f6; border-radius: 4px; color: #1e40af; font-size: 0.875rem; } .file-upload-loading svg { animation: spin 1s linear infinite; } /* Certificate list */ .certificate-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; transition: var(--transition); } .certificate-item:hover { background: #f3f4f6; border-color: #d1d5db; } .certificate-item button:hover { background: #dc2626; transform: scale(1.05); } /* ======================================== 13. Sticky Notification System ======================================== */ .sticky-notification { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 600px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); border-radius: var(--border-radius-lg); } .sticky-notification.success { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 2px solid #22c55e; } .sticky-notification.error { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 2px solid #ef4444; } .sticky-notification-content { padding: 1.5rem; } @keyframes slideDown { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 768px) { .sticky-notification { top: 70px; width: 95%; max-width: none; } .sticky-notification-content { padding: 1rem; } .sticky-notification h3 { font-size: 1.1rem !important; } .sticky-notification p { font-size: 0.9rem !important; } } /* ======================================== 14. Services Accordion ======================================== */ .services-accordion { display: flex; flex-direction: column; gap: 0.75rem; } .service-accordion-item { border: 2px solid var(--color-border); border-radius: var(--border-radius); background: white; overflow: hidden; transition: var(--transition); } .service-accordion-item:hover { border-color: var(--color-accent); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1); } .service-accordion-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; background: white; border: none; cursor: pointer; transition: var(--transition); text-align: start; } .service-accordion-header:hover { background: #f9fafb; } .service-accordion-header.active { background: #eff6ff; border-bottom: 1px solid #e5e7eb; } .service-accordion-content { overflow: hidden; } /* Alpine.js transitions */ .accordion-enter { transition: all 0.3s ease; } .accordion-leave { transition: all 0.3s ease; } /* Service counter badge */ .services-counter { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 2px solid #3b82f6; border-radius: var(--border-radius); color: #1e40af; font-weight: 600; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Service selected badge */ .service-selected-badge { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem; font-weight: 600; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3); } /* Responsive accordion */ @media (max-width: 768px) { .service-accordion-header { padding: 1rem; } .service-accordion-content > div { padding: 1rem !important; } }