:root { --primary-teal: #00677F; --primary-navy: #004165; --light-gray: #F6F6F6; --white: #FFFFFF; --text-dark: #1a1a1a; --text-gray: #666666; --border-light: #e5e5e5; --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15); --success-green: #10B981; --error-red: #EF4444; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text-dark); background-color: var(--light-gray); direction: rtl; text-align: right; } body.en { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; direction: ltr; text-align: left; } /* Let drive layout */ html[dir="rtl"] body { direction: rtl; text-align: right; } html[dir="ltr"] body { direction: ltr; text-align: left; } .container { max-width: 800px; margin: 0 auto; padding: 2rem 20px; } /* Header */ .header { background: var(--white); border-bottom: 1px solid var(--border-light); margin-bottom: 2rem; border-radius: 0.75rem; box-shadow: var(--shadow-light); } .header-content { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; gap: 2rem; } .logo-img { height: 50px; width: auto; } .language-toggle { background: none; border: 1px solid var(--border-light); padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; transition: all 0.3s ease; } .language-toggle:hover { border-color: var(--primary-teal); color: var(--primary-teal); } /* Form Container */ .form-container { background: var(--white); border-radius: 0.75rem; padding: 2rem; box-shadow: var(--shadow-light); } .form-header { text-align: center; margin-bottom: 2rem; } .form-title { font-size: 2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; } .form-subtitle { font-size: 1.125rem; color: var(--text-gray); } /* Form Styles */ .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 1rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-light); border-radius: 0.5rem; font-size: 1rem; font-family: inherit; transition: all 0.3s ease; background: var(--white); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary-teal); box-shadow: 0 0 0 3px rgba(0, 103, 127, 0.1); } .form-textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } /* Buttons */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 1rem; text-align: center; transition: all 0.3s ease; border: none; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--primary-teal); color: var(--white); } .btn-primary:hover { background: var(--primary-navy); transform: translateY(-2px); box-shadow: var(--shadow-medium); } .btn-secondary { background: transparent; color: var(--primary-teal); border: 2px solid var(--primary-teal); } .btn-secondary:hover { background: var(--primary-teal); color: var(--white); } .form-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; } /* Success/Error Messages */ .message { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; display: none; } .message.success { background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success-green); color: var(--success-green); } .message.error { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--error-red); color: var(--error-red); } .message.show { display: block; } /* Service Info */ .service-info { background: var(--light-gray); padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; } .service-name { font-size: 1.25rem; font-weight: 600; color: var(--primary-teal); margin-bottom: 0.5rem; } .service-description { color: var(--text-gray); font-size: 0.875rem; } /* Hidden content for language switching */ .ar-content { display: block; } .en-content { display: none; } .en .ar-content { display: none; } .en .en-content { display: block; } /* Loading State */ .btn:disabled { opacity: 0.6; cursor: not-allowed; } .loading { display: none; } .loading.show { display: inline-block; width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 0.5rem; } .en .loading.show { margin-left: 0; margin-right: 0.5rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== MOBILE OPTIMIZATIONS ===== */ @media (max-width: 768px) { .container { max-width: 100%; padding: 1rem 16px; } .header-content { padding: 1rem 1.5rem; gap: 1rem; } .logo-img { height: 40px; } .form-container { padding: 1.5rem; border-radius: 0.5rem; } .form-title { font-size: 1.75rem; } .form-subtitle { font-size: 1rem; } .form-label { font-size: 1rem; } .form-input, .form-select, .form-textarea { padding: 0.875rem 1rem; font-size: 1rem; } } @media (max-width: 480px) { .container { padding: 0.75rem 12px; } .header { margin-bottom: 1rem; border-radius: 0.5rem; } .header-content { padding: 0.75rem 1rem; flex-direction: row; align-items: center; } .logo-img { height: 36px; } .language-toggle { padding: 0.5rem 0.875rem; font-size: 0.8125rem; } /* Form container - reduced padding */ .form-container { padding: 1.25rem 1rem; border-radius: 12px; } .form-header { margin-bottom: 1.25rem; } .form-title { font-size: 1.75rem; margin-bottom: 0.5rem; line-height: 1.3; } .form-subtitle { font-size: 1rem; line-height: 1.5; } /* Form groups - reduced spacing */ .form-group { margin-bottom: 1.25rem; } /* Labels - bigger and bolder */ .form-label { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; } /* Inputs - bigger touch targets */ .form-input, .form-select, .form-textarea { padding: 0.875rem 1rem; font-size: 1rem; border-radius: 0.5rem; border-width: 2px; min-height: 48px; } .form-textarea { min-height: 120px; padding: 0.875rem 1rem; } .form-select { padding-right: 2.5rem; } html[dir="rtl"] .form-select { padding-right: 1rem; padding-left: 2.5rem; } /* Error messages */ .form-group small { font-size: 0.875rem; margin-top: 0.25rem; display: block; } /* Buttons - full width and bigger */ .btn { width: 100%; padding: 0.875rem 1.5rem; font-size: 1.0625rem; border-radius: 0.5rem; min-height: 48px; } .form-actions { margin-top: 1.5rem; flex-direction: column; gap: 0.75rem; } /* Messages */ .message { padding: 0.875rem 1rem; font-size: 0.95rem; border-radius: 0.5rem; } /* Service info */ .service-info { padding: 1rem; margin-bottom: 1.25rem; border-radius: 0.5rem; } .service-name { font-size: 1.25rem; margin-bottom: 0.625rem; } .service-description { font-size: 1rem; } /* Language-specific adjustments */ html[lang="ar"] .form-label, html[lang="ar"] .form-input, html[lang="ar"] .form-select, html[lang="ar"] .form-textarea { text-align: right; } html[lang="en"] .form-label, html[lang="en"] .form-input, html[lang="en"] .form-select, html[lang="en"] .form-textarea { text-align: left; } /* File upload button */ input[type="file"] { padding: 0.75rem; font-size: 1rem; } /* Focus states - more prominent on mobile */ .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary-teal); box-shadow: 0 0 0 4px rgba(0, 103, 127, 0.15); } }