/**
 * Travel With Julz - LTR (Left-to-Right) Stylesheet
 * Version: 1.2.0
 * Last Updated: 2026-02-23
 *
 * This stylesheet overrides RTL styles for English language support
 */

/* ============================================
   Base Direction Override
   ============================================ */
html[dir="ltr"] {
    direction: ltr;
}

html[dir="ltr"] body {
    text-align: left;
}

/* ============================================
   Text Alignment
   ============================================ */
html[dir="ltr"] .text-right {
    text-align: left;
}

html[dir="ltr"] .text-left {
    text-align: right;
}

/* ============================================
   Header
   ============================================ */
html[dir="ltr"] .header-container {
    flex-direction: row;
    max-width: 1540px;
    gap: 1rem;
}

html[dir="ltr"] .logo-text {
    text-align: left;
}

html[dir="ltr"] .nav-list {
    flex-direction: row;
}

/* ============================================
   Language Dropdown
   ============================================ */
html[dir="ltr"] .lang-dropdown-menu {
    right: auto;
    left: 0;
}

html[dir="ltr"] .lang-option {
    flex-direction: row;
}

html[dir="ltr"] .mobile-lang-buttons {
    flex-direction: row;
}

html[dir="ltr"] .mobile-lang-dropdown-menu {
    text-align: left;
}

/* ============================================
   Mobile Navigation
   ============================================ */
html[dir="ltr"] .mobile-nav {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

html[dir="ltr"] .mobile-nav.active {
    transform: translateX(0);
}

html[dir="ltr"] .mobile-nav-close {
    margin-right: 0;
    margin-left: auto;
}

html[dir="ltr"] .mobile-nav-link {
    flex-direction: row;
    text-align: left;
}

html[dir="ltr"] .mobile-nav-link svg {
    margin-right: 0.75rem;
    margin-left: 0;
}

html[dir="ltr"] .mobile-menu-btn {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================
   Hero Section
   ============================================ */
html[dir="ltr"] .hero-content {
    text-align: center;
}

html[dir="ltr"] .hero-title,
html[dir="ltr"] .hero-description {
    text-align: center;
}

/* ============================================
   Section Headers
   ============================================ */
html[dir="ltr"] .section-header {
    text-align: center;
}

html[dir="ltr"] .section-badge {
    flex-direction: row;
}

/* ============================================
   Cards
   ============================================ */
html[dir="ltr"] .card-content {
    text-align: left;
}

html[dir="ltr"] .card-meta {
    flex-direction: row;
}

html[dir="ltr"] .card-meta-item {
    flex-direction: row;
}

html[dir="ltr"] .card-meta-item svg {
    margin-right: 0.25rem;
    margin-left: 0;
}

html[dir="ltr"] .card-price {
    text-align: left;
}

/* ============================================
   Club Cards
   ============================================ */
html[dir="ltr"] .club-card-content {
    text-align: left;
}

html[dir="ltr"] .club-card-location {
    flex-direction: row;
}

html[dir="ltr"] .club-card-location svg {
    margin-right: 0.25rem;
    margin-left: 0;
}

html[dir="ltr"] .club-card-footer {
    flex-direction: row;
}

html[dir="ltr"] .club-card-price {
    text-align: right;
}

/* ============================================
   Party Event Cards
   ============================================ */
html[dir="ltr"] .party-event-card {
    flex-direction: row;
}

html[dir="ltr"] .party-event-info {
    text-align: left;
}

html[dir="ltr"] .party-event-meta {
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="ltr"] .party-meta-item {
    flex-direction: row-reverse;
}

html[dir="ltr"] .party-meta-item svg {
    margin-left: 0.25rem;
    margin-right: 0;
}

html[dir="ltr"] .party-event-price {
    order: -1;
}

/* ============================================
   Boat Cards
   ============================================ */
html[dir="ltr"] .boat-card-content {
    text-align: left;
}

html[dir="ltr"] .boat-card-details {
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="ltr"] .boat-detail {
    flex-direction: row;
}

html[dir="ltr"] .boat-detail svg {
    margin-right: 0.25rem;
    margin-left: 0;
}

html[dir="ltr"] .boat-card-footer {
    flex-direction: row;
}

html[dir="ltr"] .boat-card-price {
    text-align: right;
}

/* ============================================
   Villa Cards
   ============================================ */
html[dir="ltr"] .villa-card-content {
    text-align: left;
}

html[dir="ltr"] .villa-card-location {
    flex-direction: row;
}

html[dir="ltr"] .villa-card-location svg {
    margin-right: 0.25rem;
    margin-left: 0;
}

html[dir="ltr"] .villa-specs {
    flex-direction: row;
}

html[dir="ltr"] .villa-card-footer {
    flex-direction: row;
}

html[dir="ltr"] .villa-card-price {
    text-align: right;
}

/* ============================================
   Hotel Cards
   ============================================ */
html[dir="ltr"] .hotel-card-content {
    text-align: left;
}

html[dir="ltr"] .hotel-card-location,
html[dir="ltr"] .agoda-rating,
html[dir="ltr"] .hotel-card-distance {
    flex-direction: row;
}


html[dir="ltr"] .hotel-card-location svg,
html[dir="ltr"] .hotel-card-distance svg {
    margin-right: 0.25rem;
    margin-left: 0;
}

html[dir="ltr"] .hotel-card-footer {
    flex-direction: row;
}

html[dir="ltr"] .hotel-card-price {
    text-align: left;
}

/* ============================================
   Buttons with Icons
   ============================================ */
html[dir="ltr"] .btn svg {
    margin-right: 0.5rem;
    margin-left: 0;
}

html[dir="ltr"] .btn svg:last-child {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Flip arrow icons for LTR */
html[dir="ltr"] .btn svg[class*="arrow-left"] {
    transform: scaleX(-1);
}

/* ============================================
   Search Bar
   ============================================ */
html[dir="ltr"] .search-bar {
    flex-direction: row;
}

html[dir="ltr"] .search-input {
    text-align: left;
    padding-left: 3rem;
    padding-right: 1rem;
}

html[dir="ltr"] .search-icon {
    left: 1rem;
    right: auto;
}

/* ============================================
   Filter Tabs
   ============================================ */
html[dir="ltr"] .filter-tabs {
    flex-direction: row;
    justify-content: center;
}

/* ============================================
   Testimonials Carousel
   ============================================ */
html[dir="ltr"] .testimonial-card {
    text-align: left;
}

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

html[dir="ltr"] .testimonial-avatar {
    margin-left: 0;
    margin-right: 1rem;
    order: -1;
}

html[dir="ltr"] .testimonial-info {
    text-align: left;
}

html[dir="ltr"] .carousel-prev svg {
    transform: rotate(180deg);
}

html[dir="ltr"] .carousel-next svg {
    transform: rotate(180deg);
}

/* ============================================
   Services Grid
   ============================================ */
html[dir="ltr"] .service-card-content {
    text-align: left;
}

html[dir="ltr"] .service-features li {
    flex-direction: row;
}

html[dir="ltr"] .feature-dot {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* ============================================
   Contact Page
   ============================================ */
html[dir="ltr"] .contact-form-container,
html[dir="ltr"] .contact-info-container {
    text-align: left;
}

html[dir="ltr"] .contact-info-item {
    flex-direction: row;
}

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

html[dir="ltr"] .contact-info-content {
    text-align: left;
}

/* ============================================
   FAQ Section
   ============================================ */
html[dir="ltr"] .faq-item {
    text-align: left;
}

html[dir="ltr"] .faq-question::after {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================
   Footer
   ============================================ */
html[dir="ltr"] .footer-brand {
    text-align: left;
}

html[dir="ltr"] .footer-links,
html[dir="ltr"] .footer-services,
html[dir="ltr"] .footer-contact {
    text-align: left;
}

html[dir="ltr"] .footer-contact-item {
    flex-direction: row;
}

html[dir="ltr"] .footer-contact-item svg {
    margin-right: 0.5rem;
    margin-left: 0;
}

html[dir="ltr"] .footer-logo {
    flex-direction: row;
}

html[dir="ltr"] .footer-logo .logo-icon {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* ============================================
   Floating WhatsApp Button
   ============================================ */
html[dir="ltr"] .whatsapp-float {
    right: auto;
    left: 1.5rem;
}

/* ============================================
   Booking Modal
   ============================================ */
html[dir="ltr"] .booking-modal-content {
    text-align: left;
}

html[dir="ltr"] .booking-modal-close {
    right: auto;
    left: 1rem;
}

html[dir="ltr"] .form-label {
    text-align: left;
}

html[dir="ltr"] .form-input,
html[dir="ltr"] .form-select,
html[dir="ltr"] .form-textarea {
    text-align: left;
}

html[dir="ltr"] .service-checkboxes {
    flex-direction: row;
}

html[dir="ltr"] .service-checkbox-label {
    flex-direction: row;
}

html[dir="ltr"] .service-checkbox-label svg {
    margin-right: 0.5rem;
    margin-left: 0;
}

html[dir="ltr"] .custom-select-trigger {
    flex-direction: row;
    text-align: left;
}

html[dir="ltr"] .custom-select-trigger svg {
    margin-left: auto;
    margin-right: 0;
}

html[dir="ltr"] .date-inputs {
    flex-direction: row;
}

/* ============================================
   Included Grid (Boats)
   ============================================ */
html[dir="ltr"] .included-item {
    flex-direction: row;
    align-items: flex-start;  /* Align icon with top of text when wrapping */
    text-align: left;
}

html[dir="ltr"] .included-item svg {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* ============================================
   Why Villa Grid
   ============================================ */
html[dir="ltr"] .why-villa-item {
    text-align: center;
}

/* ============================================
   Tips Grid (Hotels)
   ============================================ */
html[dir="ltr"] .tip-card {
    text-align: left;
}

/* ============================================
   Page Header
   ============================================ */
html[dir="ltr"] .page-header-content {
    text-align: center;
}

/* ============================================
   Empty State
   ============================================ */
html[dir="ltr"] .empty-state {
    text-align: center;
}

/* ============================================
   Media Queries for LTR Mobile
   ============================================ */
@media (max-width: 768px) {
    html[dir="ltr"] .mobile-nav {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }

    html[dir="ltr"] .mobile-nav.active {
        transform: translateX(0);
    }

    html[dir="ltr"] .party-event-card {
        flex-direction: column;
    }

    html[dir="ltr"] .party-event-price {
        order: 0;
    }

    /* LTR Header Mobile Fix: Proper spacing between logo and mobile-menu-btn */
    html[dir="ltr"] .header-container {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.75rem;
    }

    html[dir="ltr"] .logo {
        flex: 1;
        min-width: 0;
    }

    html[dir="ltr"] .mobile-menu-btn {
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0.5rem;
    }
}