:root {--background: 0 0% 100%;--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary: 210 100% 50%;--primary-foreground: 0 0% 98%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 240 5.9% 10%;--hover-light: 240 5% 96%;}* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color: hsl(var(--foreground));background-color: hsl(var(--background));-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;line-height: 1.5;}@keyframes fade-in {from {opacity: 0;transform: translateY(10px);}to {opacity: 1;transform: translateY(0);}}@keyframes fade-out {from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(10px);}}@keyframes spin {to {transform: rotate(360deg);}}.header {padding: 2rem 1rem;border-bottom: 1px solid hsl(var(--border));}.footer {padding: 1.5rem 1rem;border-top: 1px solid hsl(var(--border));margin-top: 4rem;}.main {padding: 2rem 1rem;}.container {max-width: 1024px;margin: 0 auto;}.logo-container {display: flex;justify-content: center;margin-bottom: 1rem;}.app-logo {height: 48px;width: auto;}.logo {font-size: 1.5rem;font-weight: bold;}.copyright {font-size: 0.875rem;color: hsl(var(--muted-foreground));text-align: center;}.section {margin-bottom: 3rem;animation: fade-in 0.5s ease-out;}.text-center {text-align: center;}.badge {display: inline-block;padding: 0.25rem 0.75rem;margin-bottom: 2.5rem;background-color: hsl(var( --secondary));color: hsl(var( --primary));font-size: 1.2rem;font-weight: 600;}.title {font-size: 2rem;font-weight: bold;margin-bottom: 0.75rem;line-height: 1.2;min-height: 4rem;display: flex;flex-direction: column;align-items: center;}.arabic-heading {font-family: 'Arial', sans-serif;margin-top: 0.5rem;font-size: 1.75rem;}.subtitle {color: hsl(var(--muted-foreground));margin-bottom: 2rem;}.arabic-subtitle {font-family: 'Arial', sans-serif;opacity: 0.7;}.form-container {max-width: 480px;margin: 0 auto;}.form-group {margin-bottom: 1.5rem;}.label-container {display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5rem;}.form-label {font-weight: medium;transition: color 0.2s;}.form-label.focused {color: hsl(var(--primary));}.form-input {display: block;width: 100%;padding: 0.625rem 0.75rem;font-size: 1rem;line-height: 1.5;color: hsl(var(--foreground));background-color: hsl(var(--background));border: 1px solid hsl(var(--border));border-radius: 0.375rem;transition: border-color 0.2s, box-shadow 0.2s;}.form-input:focus {outline: none;border-color: hsl(var(--ring));box-shadow: 0 0 0 3px hsla(var(--ring), 0.1);}.form-input.error {border-color: hsl(var(--destructive));}.form-input.rtl {text-align: right;}.error-message {margin-top: 0.5rem;color: hsl(var(--destructive));font-size: 0.875rem;}.hidden {display: none;}.language-selector {display: flex;gap: 0.25rem;}.lang-btn {border: none;background-color: hsl(var(--secondary));color: hsl(var(--secondary-foreground));font-size: 0.75rem;font-weight: 500;padding: 0.25rem 0.5rem;border-radius: 0.25rem;cursor: pointer;transition: background-color 0.2s;}.lang-btn:hover {background-color: hsl(var(--hover-light));}.lang-btn.active {background-color: hsl(var(--primary));color: hsl(var(--primary-foreground));}.rtl-mode .form-label, .rtl-mode .device-title, .rtl-mode .device-description {text-align: center;}.rtl-mode .subtitle-arabic {display: none;}.device-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 1.5rem;margin-top: 2rem;}.device-option {background-color: hsl(var(--card));border: 1px solid hsl(var(--border));border-radius: 0.5rem;padding: 1.5rem;text-align: left;cursor: pointer;transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;}.device-option:hover {border-color: hsl(var(--ring));transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}.device-option.selected {border-color: hsl(var(--primary));box-shadow: 0 0 0 2px hsla(var(--primary), 0.1);}.device-icon-container {display: flex;align-items: center;justify-content: center;width: 3rem;height: 3rem;background-color: hsl(var(--secondary));border-radius: 0.5rem;margin: 0 auto 1rem auto;}.device-icon {color: hsl(var(--primary));}.device-title {font-size: 1.25rem;font-weight: bold;margin-bottom: 0.5rem;text-align: center }.device-description {color: hsl(var(--muted-foreground));font-size: 0.875rem;text-align: center;}.design-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 2rem;margin-top: 2rem;margin-left: 6%;}.design-option {background-color: hsl(var(--card));border: 1px solid hsl(var(--border));border-radius: 0.5rem;overflow: hidden;cursor: pointer;transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;}.design-option:hover {border-color: hsl(var(--ring));transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}.design-option.selected {border-color: hsl(var(--primary));box-shadow: 0 0 0 2px hsla(var(--primary), 0.1);}.design-info {padding: 1rem;}.design-info-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5rem;}.design-title {font-size: 1.125rem;font-weight: bold;}.design-check {color: hsl(var(--primary));height: 1.25rem;width: 1.25rem;}.design-description {color: hsl(var(--muted-foreground));font-size: 0.875rem;}.square-frame, .mobile-frame, .desktop-frame {position: relative;padding: 0.75rem;border-radius: 0.5rem 0.5rem 0 0;}.square-screen, .mobile-screen, .desktop-screen {position: relative;overflow: hidden;width: 100%;background-color: #000;}.square-screen {aspect-ratio: 1 / 1;}.mobile-screen {aspect-ratio: 9 / 16;width: 50%!important;margin-left: 25%;}.desktop-screen {aspect-ratio: 16 / 9;}.design-image {width: 100%;height: 100%;object-fit: cover;object-position: center;}.design-name {position: absolute;bottom: 10%;left: 0;right: 0;text-align: center;font-size: 1rem;color: white;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);padding: 0.5rem;font-weight: 500;}.design-name p {display: inline-block;padding: 5px 10px;font-size: 17px;font-weight: bold;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);text-rendering: geometricPrecision;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}@media (max-width: 1024px) {.design-name p {font-size: 14px;}}@media (max-width: 767px) {.design-name p {font-size: 12px;padding: 4px 8px;}}.desktop-browser-bar {display: flex;align-items: center;background-color: #f1f1f1;padding: 0.5rem;border-radius: 0.25rem 0.25rem 0 0;margin-bottom: 0.25rem;}.browser-controls {display: flex;gap: 0.375rem;margin-right: 0.75rem;}.browser-circle {width: 0.75rem;height: 0.75rem;border-radius: 50%;}.browser-red {background-color: #ff5f57;}.browser-yellow {background-color: #febc2e;}.browser-green {background-color: #28c840;}.browser-address-bar {flex-grow: 1;height: 1.5rem;background-color: white;border-radius: 0.25rem;}.download-container {margin-top: 2rem;text-align: center;}.download-button {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;background-color: hsl(var(--primary));color: hsl(var(--primary-foreground));font-size: 1rem;font-weight: 500;padding: 0.75rem 1.5rem;border-radius: 0.375rem;border: none;cursor: pointer;transition: background-color 0.2s, transform 0.1s;}.download-button:hover:not(:disabled) {background-color: hsla(var(--primary), 0.9);}.download-button:hover:not(:disabled) {background-color: #4da89d;}.download-button:active:not(:disabled) {transform: translateY(1px);}.download-button:disabled {opacity: 0.5;cursor: not-allowed;}.download-icon {width: 1.25rem;height: 1.25rem;}.downloading .download-icon {animation: spin 1s linear infinite;}.section.disabled {opacity: 0.5;pointer-events: none;}@media (max-width: 640px) {.device-grid, .design-grid {grid-template-columns: 1fr;}.title {font-size: 1.75rem;}.section {margin-bottom: 2rem;}}