/* ============================================
   LTR Overrides - Pyra AI English Version
   هذا الملف يحتوي على التعديلات اللازمة لتحويل التصميم من RTL إلى LTR
   يُستخدم فقط في النسخة الإنجليزية (index-en.html)
   ============================================ */

/* ══════════════════════════════════════════════════════════════════
   0. Font Family - Inter for English
   ══════════════════════════════════════════════════════════════════ */

body {
    font-family: 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.logo-text {
    font-family: 'Inter', 'Tajawal', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════
   1. Text Alignment Overrides
   ══════════════════════════════════════════════════════════════════ */

/* Global text alignment */
body,
.section-header,
.hero-text,
.hero-description,
.problem-card,
.feature-box,
.service-card,
.faq-question,
.lead-form-header,
.footer-section {
    text-align: left;
}

/* Center aligned elements (keep centered) */
.section-header,
.hero-badge,
.section-badge,
.stat-item,
.benefit-card,
.package-card {
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   2. Check List - تحويل علامة الصح من اليمين لليسار
   ══════════════════════════════════════════════════════════════════ */

.check-list li {
    padding-right: 0;
    padding-left: 30px;
}

.check-list li::before {
    right: auto;
    left: 0;
}

/* Mobile */
@media (max-width: 768px) {
    .check-list li {
        padding-right: 0;
        padding-left: 28px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3. Hero Section
   ══════════════════════════════════════════════════════════════════ */

.hero-content {
    text-align: left;
}

.hero-text {
    text-align: left;
}

.hero-badge {
    /* Keep centered */
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   4. Problem & Feature Cards - أيقونات
   ══════════════════════════════════════════════════════════════════ */

.problem-card,
.feature-box {
    text-align: left;
}

/* Icons stay centered in their containers */
.problem-icon,
.feature-icon {
    /* Already centered, no change needed */
}

/* ══════════════════════════════════════════════════════════════════
   5. What Is Section - Rows
   ══════════════════════════════════════════════════════════════════ */

.what-is-row {
    text-align: left;
}

.what-is-row .what-is-text {
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════
   6. FAQ Section - عكس السهم
   ══════════════════════════════════════════════════════════════════ */

.faq-question {
    text-align: left;
    flex-direction: row-reverse;
}

.faq-icon {
    margin-right: 0;
    margin-left: 15px;
}

.faq-answer p {
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════
   7. Timeline Section
   ══════════════════════════════════════════════════════════════════ */

.timeline-content,
.guarantee-content {
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════
   8. Phone Input - عكس ترتيب country code
   ══════════════════════════════════════════════════════════════════ */

.phone-input {
    flex-direction: row;
}

.phone-input select {
    border-radius: var(--border-radius-md);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.phone-input input {
    border-radius: var(--border-radius-md);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Popup Phone Input */
.popup-phone-input {
    flex-direction: row;
}

.popup-phone-input .popup-select {
    border-radius: var(--border-radius-md);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.popup-phone-input .popup-input {
    border-radius: var(--border-radius-md);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Mobile - Stack vertically */
@media (max-width: 544px) {
    .phone-input,
    .popup-phone-input {
        flex-direction: column;
    }

    .phone-input select,
    .phone-input input,
    .popup-phone-input .popup-select,
    .popup-phone-input .popup-input {
        border-radius: var(--border-radius-md);
    }
}

/* ══════════════════════════════════════════════════════════════════
   9. Chat Messages - عكس اتجاه الرسائل
   ══════════════════════════════════════════════════════════════════ */

/* Bot messages - left side */
.chat-message.bot,
.chat-message.bot-message {
    align-self: flex-start;
}

.chat-message.bot-message .message-content {
    border-radius: 20px 20px 20px 5px;
}

/* User messages - right side */
.chat-message.user,
.chat-message.user-message {
    align-self: flex-end;
}

.chat-message.user-message {
    flex-direction: row-reverse;
}

.chat-message.user-message .message-content {
    border-radius: 20px 20px 5px 20px;
}

/* Chatbot widget messages */
.chatbot-messages .chat-message.bot {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: var(--border-radius);
}

.chatbot-messages .chat-message.user {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: var(--border-radius);
}

/* ══════════════════════════════════════════════════════════════════
   10. Notifications - تعديل الموقع والاتجاه
   ══════════════════════════════════════════════════════════════════ */

.notification-item:hover {
    transform: translateX(-5px); /* Reverse direction */
}

/* ══════════════════════════════════════════════════════════════════
   11. Floating Elements - مراجعة المواقع
   ══════════════════════════════════════════════════════════════════ */

/* Scroll to top - move to right side for LTR */
.scroll-top {
    left: auto;
    right: 30px;
}

@media (max-width: 768px) {
    .scroll-top {
        left: auto;
        right: 20px;
    }
}

@media (max-width: 544px) {
    .scroll-top {
        left: auto;
        right: 15px;
    }
}

/* WhatsApp Float Button - move to right side for LTR */
.whatsapp-float {
    left: auto;
    right: 30px;
}

.whatsapp-float-tooltip {
    left: auto;
    right: calc(100% + 15px);
    transform: translateY(-50%) translateX(10px);
}

.whatsapp-float-tooltip::before {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: var(--secondary-color);
}

.whatsapp-float:hover .whatsapp-float-tooltip {
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
    .whatsapp-float {
        left: auto;
        right: 20px;
    }
}

@media (max-width: 544px) {
    .whatsapp-float {
        left: auto;
        right: 15px;
    }
}

/* Notification Stack - keep on left for LTR (standard position) */
.notification-stack {
    left: 20px;
    right: auto;
}

/* ══════════════════════════════════════════════════════════════════
   12. Lead Form Section
   ══════════════════════════════════════════════════════════════════ */

.lead-form-header {
    text-align: center;
}

.form-field label {
    text-align: left;
}

.form-field input,
.form-field select,
.form-field textarea {
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════
   13. Footer
   ══════════════════════════════════════════════════════════════════ */

.footer-section {
    text-align: left;
}

.footer-main {
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   14. Quick Edit Panel - Keep RTL for admin (Arabic interface)
   ══════════════════════════════════════════════════════════════════ */

.quick-edit-panel {
    direction: rtl;
    text-align: right;
}

.quick-edit-panel input,
.quick-edit-panel textarea,
.quick-edit-panel select {
    direction: ltr;
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════
   15. Chatbot Attention Tooltip
   ══════════════════════════════════════════════════════════════════ */

.chatbot-attention-tooltip {
    right: auto;
    left: 90px;
    transform: translateX(20px);
}

.chatbot-attention-tooltip::after {
    left: auto;
    right: 100%;
    border-left-color: transparent;
    border-right-color: var(--white);
}

.chatbot-attention-tooltip.show {
    transform: translateX(0);
}

@media (max-width: 768px) {
    .chatbot-attention-tooltip {
        left: 85px;
        right: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════
   16. Comparison Cards
   ══════════════════════════════════════════════════════════════════ */

.comparison-card {
    text-align: left;
}

.comparison-card .comparison-list li {
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════
   17. Benefit Cards
   ══════════════════════════════════════════════════════════════════ */

.benefit-card {
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   18. Package Cards
   ══════════════════════════════════════════════════════════════════ */

.package-card {
    text-align: center;
}

.package-features li {
    text-align: left;
    padding-right: 0;
    padding-left: 25px;
}

.package-features li::before {
    right: auto;
    left: 0;
}

/* ══════════════════════════════════════════════════════════════════
   19. Demo Section - Chat Messages
   ══════════════════════════════════════════════════════════════════ */

.demo-chat-messages .chat-message.user-message {
    flex-direction: row-reverse;
}

.live-chat-messages .chat-message.user-message {
    flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════════════════
   20. Popup Form
   ══════════════════════════════════════════════════════════════════ */

.popup-field label {
    text-align: left;
}

.popup-field .popup-input,
.popup-field .popup-select,
.popup-field .popup-textarea {
    text-align: left;
}

/* Progress steps */
.popup-progress {
    direction: ltr;
}

/* ══════════════════════════════════════════════════════════════════
   21. Misc Overrides
   ══════════════════════════════════════════════════════════════════ */

/* Service items */
.service-item {
    text-align: left;
}

/* Solution intro */
.solution-intro {
    text-align: center;
}

/* Urgency text */
.urgency-text {
    text-align: center;
}

/* Formula section */
.formula-section {
    text-align: center;
}