/* ============================================
   DERBY FOOTBALL GYM — RTL COMPLETE FIX
   Applies when [dir="rtl"] or [lang="ar"] is set
   ============================================ */

/* ---- GLOBAL DIRECTION ---- */
[dir="rtl"],
[lang="ar"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] html,
[dir="rtl"] body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ---- NAVBAR ---- */
[dir="rtl"] .navbar,
[dir="rtl"] .nav-menu {
    flex-direction: row-reverse;
}

[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .nav-item {
    margin-left: 0;
    margin-right: 1rem;
}

/* Dropdown menus open to the left in RTL */
[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

/* Mobile offcanvas: do not slide #offcanvas off-screen in RTL.
   The menu opens via data-t="a" + Tailwind group visibility, not .active + translateX. */

/* ---- HERO SECTION ---- */
[dir="rtl"] .hero-content,
[dir="rtl"] .hero-text {
    text-align: right;
}

/* The animated letter-by-letter text — each letter spans should still flow RTL */
[dir="rtl"] .hero h1,
[dir="rtl"] .hero h2 {
    direction: rtl;
    text-align: right;
}

/* Hero CTA button alignment */
[dir="rtl"] .hero .btn,
[dir="rtl"] .hero-btn {
    margin-right: 0;
    margin-left: auto;
}

/* ---- SLIDERS / CAROUSELS ---- */
/*
   Tiny Slider handles RTL via the `rtl: true` JS option.
   Do NOT set direction:rtl on tns containers — it breaks transforms and hides slides.
   Keep slider mechanics LTR; slide content inherits RTL from the page.
*/
[dir="rtl"] .tns-outer,
[dir="rtl"] .tns-inner,
[dir="rtl"] .tns-slider,
[dir="rtl"] .tns-ovh {
    direction: ltr !important;
}

[dir="rtl"] [data-slider] {
    overflow: hidden;
}

[dir="rtl"] .tns-outer,
[dir="rtl"] .tns-ovh {
    overflow: hidden !important;
}

[dir="rtl"] .tns-slider > .tns-slide-cloned {
    display: none !important;
}

[dir="rtl"] .tns-liveregion {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Mirror hero carousel arrow icons only */
[dir="rtl"] .hero-prev img,
[dir="rtl"] .hero-next img,
[dir="rtl"] .classes-prev img,
[dir="rtl"] .classes-next img,
[dir="rtl"] .say-prev img,
[dir="rtl"] .say-next img {
    transform: scaleX(-1);
}

/* ---- MARQUEE / SCROLLING TEXT ---- */
[dir="rtl"] .sliding {
    direction: ltr;
}

/* ---- ABOUT SECTION (2-column layout) ---- */
[dir="rtl"] .about-section,
[dir="rtl"] .about-content {
    flex-direction: row-reverse;
}

[dir="rtl"] .about-text {
    text-align: right;
    padding-right: 0;
    padding-left: 2rem;
}

/* ---- STATS COUNTER ROW ---- */
[dir="rtl"] .stats-row,
[dir="rtl"] .counter-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .stat-item,
[dir="rtl"] .counter-item {
    text-align: center;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,.1);
}

[dir="rtl"] .stat-item:last-child,
[dir="rtl"] .counter-item:last-child {
    border-left: none;
}

/* ---- CARDS GRID (Classes, Services, Programs) ---- */
[dir="rtl"] .card-grid,
[dir="rtl"] .classes-grid,
[dir="rtl"] .services-grid {
    direction: rtl;
}

/* Program cards: slant overlay toward the right so Arabic titles sit on the dark area, not the photo */
[dir="rtl"] .classes .bg-gradient-to-tr {
    background-image: linear-gradient(to top left, var(--tw-gradient-stops));
}

[dir="rtl"] .classes .absolute.right-0.bottom-0.left-0 .relative.p-\[30px\] {
    text-align: right;
}

[dir="rtl"] .classes .font-\[Teko\].text-\[28px\] {
    font-family: Cairo, sans-serif;
    font-size: 22px;
    line-height: 1.3;
}

[dir="rtl"] .classes .mr-\[10px\] {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .classes .mr-\[20px\] {
    margin-right: 0;
    margin-left: 20px;
}

[dir="rtl"] .card-body,
[dir="rtl"] .class-info,
[dir="rtl"] .service-info {
    text-align: right;
}

/* Card location tag (e.g. "Stadium", "Gym") */
[dir="rtl"] .location-tag,
[dir="rtl"] .card-tag {
    margin-left: 0;
    margin-right: 0;
    text-align: right;
}

/* ---- SCHEDULE TABLE ---- */
[dir="rtl"] .schedule-table,
[dir="rtl"] table.schedule {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .schedule-table th,
[dir="rtl"] .schedule-table td {
    text-align: center;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,.08);
}

/* ---- TRAINER / COACH CARDS ---- */
[dir="rtl"] .trainer-card,
[dir="rtl"] .coach-card {
    text-align: center;
}

[dir="rtl"] .trainer-info {
    text-align: right;
}

/* Social links inside trainer card */
[dir="rtl"] .trainer-social {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ---- TESTIMONIALS ---- */
[dir="rtl"] .testimonial-text,
[dir="rtl"] .say blockquote,
[dir="rtl"] .testimonial-content {
    text-align: right;
    direction: rtl;
}

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

/* The say-dots (pagination dots) */
[dir="rtl"] .say-dots {
    direction: rtl;
}

/* ---- SKILLS / WHY US ICONS ---- */
[dir="rtl"] .skill-item,
[dir="rtl"] .why-item {
    text-align: right;
    flex-direction: row-reverse;
}

[dir="rtl"] .skill-icon,
[dir="rtl"] .why-icon {
    margin-right: 0;
    margin-left: 1rem;
}

/* ---- BLOG / POSTS SECTION ---- */
[dir="rtl"] .post-card,
[dir="rtl"] .blog-card {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .post-meta,
[dir="rtl"] .blog-meta {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .post-date,
[dir="rtl"] .post-category {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Read more arrow — flip it */
[dir="rtl"] .read-more .arrow,
[dir="rtl"] .btn-arrow::after {
    transform: scaleX(-1);
    display: inline-block;
}

/* ---- NEWSLETTER SECTION ---- */
[dir="rtl"] .newsletter-form {
    flex-direction: row-reverse;
}

[dir="rtl"] .newsletter-form input[type="email"] {
    text-align: right;
    border-radius: 0 4px 4px 0;
}

[dir="rtl"] .newsletter-form button {
    border-radius: 4px 0 0 4px;
}

/* ---- PRICING CARDS ---- */
[dir="rtl"] .pricing-card,
[dir="rtl"] .price-features {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .price-features li {
    padding-right: 0;
    padding-left: 0;
    flex-direction: row-reverse;
}

[dir="rtl"] .price-features li img,
[dir="rtl"] .price-features li .check-icon {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ---- BMI CALCULATOR FORM ---- */
[dir="rtl"] .bmi-form,
[dir="rtl"] .calculator-form {
    text-align: right;
    direction: rtl;
}

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

/* ---- FOOTER ---- */
[dir="rtl"] .footer {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .footer-grid,
[dir="rtl"] .footer-columns {
    direction: rtl;
}

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

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

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

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

/* Phone number in footer — keep LTR even in RTL mode */
[dir="rtl"] .footer-phone,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="https://wa.me"] {
    direction: ltr;
    unicode-bidi: embed;
    text-align: right;
}

/* ---- PAGE TITLE BANNER (breadcrumb) ---- */
[dir="rtl"] .page-title,
[dir="rtl"] .page-banner {
    text-align: right;
    direction: rtl;
}

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

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding: 0 0.25rem;
    transform: scaleX(-1);
    display: inline-block;
}

/* Breadcrumb arrow SVG */
[dir="rtl"] .breadcrumb img,
[dir="rtl"] .breadcrumb .arrow-icon {
    transform: scaleX(-1);
}

/* ---- ABOUT PAGE SPECIFIC ---- */
/* Timeline (Our Journey) */
[dir="rtl"] .timeline {
    direction: rtl;
}

[dir="rtl"] .timeline-item {
    text-align: right;
    padding-right: 2rem;
    padding-left: 0;
    border-right: 2px solid var(--accent-color, #bfe800);
    border-left: none;
}

[dir="rtl"] .timeline-item::before {
    right: -6px;
    left: auto;
}

/* FAQ accordion */
[dir="rtl"] .faq-item,
[dir="rtl"] .accordion-item {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .faq-question,
[dir="rtl"] .accordion-button {
    flex-direction: row-reverse;
    text-align: right;
}

/* FAQ expand/collapse icon — flip the chevron */
[dir="rtl"] .faq-icon,
[dir="rtl"] .accordion-icon {
    margin-right: 0;
    margin-left: 1rem;
    transform: scaleX(-1);
}

/* ---- CONTACT PAGE ---- */
[dir="rtl"] .contact-form,
[dir="rtl"] .contact-info {
    text-align: right;
    direction: rtl;
}

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

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

[dir="rtl"] .contact-icon {
    margin-right: 0;
    margin-left: 1rem;
}

/* ---- GALLERY GRID ---- */
[dir="rtl"] .gallery-grid,
[dir="rtl"] .gallery-masonry {
    direction: rtl;
}

/* ---- FLOATING WHATSAPP BUTTON ---- */
/* Keep it on the left in RTL (it's on right in LTR) */
[dir="rtl"] .whatsapp-float,
[dir="rtl"] .floating-btn {
    right: auto;
    left: 1.5rem;
}

/* ---- SCROLL-TO-TOP BUTTON ---- */
[dir="rtl"] #scrollTop,
[dir="rtl"] [href="#TOP"] {
    right: auto;
    left: 1.5rem;
}

/* ---- NUMBERS & PHONE — always LTR ---- */
[dir="rtl"] .stat-number,
[dir="rtl"] .counter-number,
[dir="rtl"] .price-amount,
[dir="rtl"] [class*="number"],
[dir="rtl"] time {
    direction: ltr;
    unicode-bidi: embed;
}

/* ---- BOOKING PAGE RTL OVERRIDES ---- */
[dir="rtl"] .info-icon {
    margin-right: 0;
    margin-left: 15px;
}
[dir="rtl"] .success-card, [dir="rtl"] .info-card {
    text-align: right;
}
[dir="rtl"] .success-card {
    text-align: center;
}
[dir="rtl"] .form-input, [dir="rtl"] .form-select, [dir="rtl"] .form-textarea {
    text-align: right;
}

/* ---- HOMEPAGE STATS DIVIDER ---- */
[dir="rtl"] .border-l-\[2px\] {
    border-left-width: 0 !important;
    border-right-width: 2px !important;
    border-right-color: #003186;
}

[dir="rtl"] .font-\[Teko\].grid.grid-cols-1.md\:grid-cols-2 .flex.gap-\[30px\] {
    flex-direction: row-reverse;
}

/* Keep stats like 17+ / 3k left-to-right; RTL flex was flipping them to +17 / k3 */
[dir="rtl"] .stats-figure {
    direction: ltr;
    unicode-bidi: isolate;
    justify-content: flex-end;
}

[dir="rtl"] .stats-year {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- HERO / NAV ARROW SVG ---- */
[dir="rtl"] img[src*="hero-arrow"] {
    transform: scaleX(-1);
}

/* ---- HOMEPAGE DIAGONAL TICKERS ---- */
[dir="rtl"] [data-scroll-item].group > .origin-left,
[dir="rtl"] [data-scroll-item].group > .origin-left + .relative {
    max-width: 100vw;
}