/* =====================================================
   COMFORT TIME CENTER - RTL (Arabic) Stylesheet
   ===================================================== */

/* Arabic Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

[dir="rtl"] {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
}

/* General RTL Adjustments */
[dir="rtl"] .container {
    direction: rtl;
}

/* Top Header RTL */
[dir="rtl"] .top-header-social {
    right: auto;
    left: 20px;
}

/* Navigation RTL - Mirrored layout
   With direction: rtl on body, flex items naturally flow right-to-left.
   We use flex-direction: row (not row-reverse) so the visual order mirrors LTR:
     - Logo (first DOM child) → RIGHT side
     - Nav menu (middle) → CENTER
     - Phone (last DOM child) → LEFT side
   row-reverse + direction:rtl would double-reverse and produce LTR layout.
*/
[dir="rtl"] .main-nav .container {
    flex-direction: row !important;
}

[dir="rtl"] .nav-menu {
    flex-direction: row !important;
}

[dir="rtl"] .nav-menu a::after {
    left: auto;
    right: 0;
}

[dir="rtl"] .nav-right {
    flex-direction: row !important;
}

[dir="rtl"] .phone-button {
    flex-direction: row !important;
}

/* Keep phone number readable as LTR (Western digits, leading +) but
   the icon naturally appears to its right because of direction:rtl on
   the surrounding flex container. */
[dir="rtl"] .phone-button > span[dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Hero Slider RTL */
[dir="rtl"] .slide-content {
    left: auto;
    right: 80px;
    text-align: right;
}

/* On large screens, give the RTL slide content extra room so the
   longer Arabic title "مركز وقت الراحة للعلاج الطبيعي" fits on a
   single line at the desktop subtitle size (52px). The English
   title "Comfort Time Center" is shorter and fits comfortably in
   the default 600px max-width, so this override is RTL-only.
   Below 1024px the existing responsive rules for .slide-content
   take over (max-width: 90% on tablet, repositioning on mobile),
   so no layout regressions on smaller screens. */
@media (min-width: 1024px) {
    [dir="rtl"] .slide-content {
        max-width: 800px;
    }
}

[dir="rtl"] .slider-dots {
    right: auto;
    left: 40px;
    flex-direction: column;
}

/* Info Cards RTL */
[dir="rtl"] .info-cards-grid {
    direction: rtl;
}

[dir="rtl"] .recovery-card-overlay {
    text-align: right;
    padding-right: 35px;
    /* Mirror of the LTR fix: in RTL the appointment card sits at left: 20px
       (not 25px like LTR), so the buffer formula is min(48%, 380px) + 45px
       (= 20px offset + 25px breathing room). */
    padding-left: calc(min(48%, 380px) + 45px);
    background: linear-gradient(225deg, rgba(75, 95, 65, 0.92) 0%, rgba(75, 95, 65, 0.75) 40%, rgba(75, 95, 65, 0.4) 70%, transparent 100%);
}

[dir="rtl"] .appointment-card {
    right: auto;
    left: 20px;
}

[dir="rtl"] .appointment-card,
[dir="rtl"] .visit-card,
[dir="rtl"] .hours-card {
    text-align: right;
}

/* Info Card Headers - Icon on left, title on right in RTL */
[dir="rtl"] .appointment-card-header,
[dir="rtl"] .visit-card-header,
[dir="rtl"] .hours-card-header {
    flex-direction: row;
}

/* Appointment Card Phone - Text/numbers on left, phone icon on right in RTL */
[dir="rtl"] .appointment-card-phone {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .appointment-card-phone .phone-icon {
    order: 2;
}

[dir="rtl"] .appointment-card-phone-numbers {
    order: 1;
}

/* Card Links - Arrow on left, text on right, aligned to right of card */
[dir="rtl"] .visit-card-link,
[dir="rtl"] .hours-card-link {
    flex-direction: row;
    justify-content: flex-end;
}

/* Hours Card Rows - Times on left, days on right in RTL */
[dir="rtl"] .hours-card-row {
    flex-direction: row;
}

/* About Section */
[dir="rtl"] .about-grid {
    direction: rtl;
}

[dir="rtl"] .about-image {
    padding-right: 0;
    padding-left: 15px;
    padding-bottom: 15px;
}

[dir="rtl"] .about-image::before {
    left: 0;
    right: 40px;
    border-radius: 0 0 0 130px;
}

[dir="rtl"] .about-image img {
    border-radius: 0 130px 0 130px;
}

[dir="rtl"] .about-image-badge {
    left: auto;
    right: 20px;
    flex-direction: row-reverse;
}

[dir="rtl"] .about-feature {
    flex-direction: row;
    text-align: right;
}

[dir="rtl"] .about-content {
    text-align: right;
}

/* Services Bar */
[dir="rtl"] .services-grid {
    direction: rtl;
}

[dir="rtl"] .service-item {
    flex-direction: row;
}

[dir="rtl"] .services-intro {
    text-align: right;
}

/* (Note: previously set font-family: Tenor Sans here for Arabic to match
   the LTR heading stack. Removed so the title falls back to the same
   font as other section titles like "لماذا تختارنا".) */

/* Why Choose Us */
[dir="rtl"] .why-choose-grid {
    direction: rtl;
}

[dir="rtl"] .why-choose-card {
    text-align: center;
}

/* Core Values */
[dir="rtl"] .core-values-section .section-title {
    text-align: center;
}

[dir="rtl"] .core-values-section .section-description {
    text-align: center;
}

[dir="rtl"] .values-grid {
    direction: rtl;
}

[dir="rtl"] .value-item {
    flex-direction: row-reverse !important;
    justify-content: flex-end;
}

[dir="rtl"] .value-number {
    order: 2 !important;
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .value-text {
    order: 1 !important;
    text-align: right;
}

/* About Testimonials */
[dir="rtl"] .about-testimonials-section .section-title {
    text-align: center;
    font-family: 'Tenor Sans', serif;
}

/* Scrolling Text — the heavy lifting is done in pages.css:
     - .scrolling-text-track has direction:ltr forced so 3 copies stay in order
     - [dir="rtl"] .scrolling-text-track { animation-direction: reverse } in
       pages.css makes the scroll go the opposite way for Arabic
   No additional rules needed here. */

/* About Intro Section */
[dir="rtl"] .about-intro-section .about-intro-text {
    text-align: right;
}

[dir="rtl"] .about-intro-section .section-title {
    text-align: center;
}

/* Stats Bar */
[dir="rtl"] .stats-bar {
    direction: rtl;
}

[dir="rtl"] .stat-item {
    text-align: center;
}

/* Vision/Mission Section */
[dir="rtl"] .vision-mission-section .section-title {
    text-align: center;
}

[dir="rtl"] .vision-content,
[dir="rtl"] .mission-content {
    text-align: right;
}

[dir="rtl"] .vision-row,
[dir="rtl"] .mission-row {
    direction: rtl;
}

/* Instagram Section */
[dir="rtl"] .instagram-section {
    text-align: center;
}

[dir="rtl"] .instagram-handle {
    direction: ltr;
    unicode-bidi: bidi-override;
}

[dir="rtl"] .instagram-subtitle {
    text-align: center;
}

/* Services Content Section */
[dir="rtl"] .services-content-section {
    direction: rtl;
}

[dir="rtl"] .service-detail {
    text-align: right;
}

[dir="rtl"] .service-detail-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .service-detail-icon {
    margin-right: 0;
    margin-left: 20px;
}

/* FAQ Section */
[dir="rtl"] .faq-grid {
    direction: rtl;
}

[dir="rtl"] .faq-intro {
    text-align: right;
}

[dir="rtl"] .faq-question {
    flex-direction: row;
}

[dir="rtl"] .faq-question h4 {
    text-align: right;
}

[dir="rtl"] .faq-answer {
    text-align: right;
}

[dir="rtl"] .faq-question i {
    transform: none;
}

[dir="rtl"] .faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Testimonials */
[dir="rtl"] .testimonials-grid {
    direction: rtl;
}

[dir="rtl"] .testimonials-intro {
    text-align: right;
}

[dir="rtl"] .testimonial-card {
    text-align: right;
}

[dir="rtl"] .testimonial-author {
    flex-direction: row-reverse;
}

[dir="rtl"] .testimonial-stars {
    direction: ltr;
    text-align: right;
}

/* Booking Section */
[dir="rtl"] .booking-section {
    background: linear-gradient(to left, var(--white) 50%, var(--primary-green) 50%);
}

[dir="rtl"] .booking-section-full {
    background: var(--white);
}

[dir="rtl"] .booking-grid {
    direction: rtl;
}

[dir="rtl"] .booking-intro {
    text-align: right;
}

[dir="rtl"] .booking-form {
    text-align: right;
}

[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea,
[dir="rtl"] .form-group select {
    text-align: right;
}

[dir="rtl"] .form-row {
    direction: rtl;
}

/* Footer */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

[dir="rtl"] .footer-brand {
    text-align: right;
}

[dir="rtl"] .footer-brand .logo {
    display: flex;
    flex-direction: row-reverse;
    margin-left: auto;
    margin-right: 0;
    width: fit-content;
    float: right;
}

[dir="rtl"] .footer-brand p {
    text-align: right;
    clear: both;
}

[dir="rtl"] .footer-contact-item {
    display: flex !important;
    flex-direction: row-reverse !important;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

[dir="rtl"] .footer-contact-item i {
    margin-right: 0;
    margin-left: 10px;
    order: 2;
}

[dir="rtl"] .footer-contact-item span {
    order: 1;
}

[dir="rtl"] .footer-links {
    text-align: right;
}

[dir="rtl"] .footer-links a:hover {
    padding-right: 5px;
    padding-left: 0;
}

[dir="rtl"] .footer-bottom {
    flex-direction: row;
}

[dir="rtl"] .footer-social {
    flex-direction: row;
}

/* WhatsApp Float */
[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 30px;
}

/* Page Header */
[dir="rtl"] .page-header .breadcrumb {
    flex-direction: row-reverse;
}

/* Mobile Menu */
@media (max-width: 768px) {
    [dir="rtl"] .nav-menu {
        flex-direction: column;
        text-align: right;
    }
    
    [dir="rtl"] .nav-menu li {
        display: block;
        width: 100%;
    }
    
    [dir="rtl"] .nav-menu a {
        display: block;
        text-align: right;
    }
    
    [dir="rtl"] .top-header .container {
        flex-direction: column;
    }
    
    [dir="rtl"] .top-header-info {
        flex-direction: column;
        align-items: center;
    }

    [dir="rtl"] .recovery-card-overlay {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 320px;
    }

    [dir="rtl"] .appointment-card {
        right: 20px;
        left: 20px;
    }
    
    [dir="rtl"] .booking-section {
        background: var(--white);
    }
    
    [dir="rtl"] .footer-grid {
        text-align: center;
    }
    
    [dir="rtl"] .footer-brand {
        text-align: center;
    }
    
    [dir="rtl"] .footer-brand .logo {
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    [dir="rtl"] .footer-brand p {
        text-align: center;
    }
    
    [dir="rtl"] .footer-contact-item {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    [dir="rtl"] .footer-links {
        text-align: center;
    }
}

/* Service Item Hover */
[dir="rtl"] .service-item:hover {
    transform: translateX(5px);
}

/* Form Placeholder Alignment */
[dir="rtl"] .form-group input::placeholder,
[dir="rtl"] .form-group textarea::placeholder {
    text-align: right;
}

/* Section Title Alignment */
[dir="rtl"] .section-subtitle,
[dir="rtl"] .section-title {
    text-align: right;
}

[dir="rtl"] .why-choose-section .section-title {
    text-align: center;
}

/* Button Icons - Arrow on left side of text in RTL */
[dir="rtl"] .btn {
    flex-direction: row;
}

[dir="rtl"] .btn i {
    transform: none;
}

/* Lists and Items */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 20px;
    padding-left: 0;
}

/* Phone Numbers - Keep LTR for readability */
[dir="rtl"] .footer-contact-item span,
[dir="rtl"] .top-header-info a[href^="tel"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Email - Keep LTR */
[dir="rtl"] .top-header-info a[href^="mailto"] {
    direction: ltr;
    unicode-bidi: embed;
}


/* =====================================================
   ARABIC FONT FIX — replaces Tenor Sans with Noto Sans Arabic
   for Arabic pages.

   Many classes across style.css and pages.css explicitly set
   `font-family: 'Tenor Sans', serif;`. Tenor Sans has no Arabic
   glyphs, so on Arabic pages those rules fell back to the next
   font in the stack — generic `serif` (Times New Roman) — which
   renders Arabic too thin and small relative to its surroundings.

   Rather than rewrite 25+ individual rules, we override the
   font-family on Arabic pages so Tenor Sans body classes use
   Noto Sans Arabic (already loaded via <link>) instead. This
   gives Arabic text its proper webfont everywhere on the site.

   We also bump font-size by 1px on body-prose classes that
   were small. Headings (already in Tenor Sans for stylistic
   reasons) get the Arabic font but keep their existing sizes
   since they were never the problem.
   ===================================================== */

/* Replace Tenor Sans with Noto Sans Arabic on Arabic pages.
   Single broad rule using attribute targeting — wins by
   specificity over per-class declarations. */
[dir="rtl"] .about-intro-text,
[dir="rtl"] .about-intro-title,
[dir="rtl"] .about-intro-subtitle,
[dir="rtl"] .vision-content p,
[dir="rtl"] .mission-content p,
[dir="rtl"] .vision-content h2,
[dir="rtl"] .mission-content h2,
[dir="rtl"] .core-value-content h3,
[dir="rtl"] .core-value-content p,
[dir="rtl"] .testimonial-text,
[dir="rtl"] .testimonial-name,
[dir="rtl"] .scrolling-text,
[dir="rtl"] .instagram-title,
[dir="rtl"] .instagram-subtitle,
[dir="rtl"] .booking-form-side h2,
[dir="rtl"] .booking-form-side > p,
[dir="rtl"] .booking-form-centered h2,
[dir="rtl"] .booking-form-centered > p,
[dir="rtl"] .contact-card h3,
[dir="rtl"] .contact-card p,
[dir="rtl"] .contact-booking-wrapper h2,
[dir="rtl"] .services-main-title,
[dir="rtl"] .service-detail h3,
[dir="rtl"] .service-detail p,
[dir="rtl"] .service-intro p,
[dir="rtl"] .stat-text {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Bump body-prose sizes on Arabic pages by 1px. These sit on
   classes where a) the size genuinely was small even after the
   font fix above, and b) the bump won't break surrounding
   layout (these are paragraphs in flow, not labels in fixed
   containers). */
[dir="rtl"] .about-intro-text {
    font-size: 16px;        /* was 15px (now in Noto Sans Arabic) */
}

[dir="rtl"] .vision-content p,
[dir="rtl"] .mission-content p {
    font-size: 17px;        /* was 16px */
}

[dir="rtl"] .core-value-content p {
    font-size: 15px;        /* was 14px */
}

[dir="rtl"] .visit-card-text,
[dir="rtl"] .contact-card p {
    font-size: 15px;        /* was 14px */
}

[dir="rtl"] .footer-brand p,
[dir="rtl"] .footer-contact-item,
[dir="rtl"] .footer-bottom p {
    font-size: 15px;        /* was 14px */
}