/* RTL Styles for Arabic Home Page */

/* Base Direction & Unified Font Rule */
.rtl-wrapper,
.rtl-wrapper *:not(.dashicons):not(.fa):not(.fab):not(.fas):not(.far) {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}

.rtl-wrapper {
    direction: rtl;
    text-align: right;
}

.rtl-wrapper h1,
.rtl-wrapper h2,
.rtl-wrapper h3,
.rtl-wrapper h4,
.rtl-wrapper h5,
.rtl-wrapper h6 {
    /* Font family handled by universal selector above */
    letter-spacing: 0;
    /* Arabic doesn't need letter spacing */
}

/* Margin/Padding Flips */
.rtl-wrapper .mr-auto {
    margin-right: auto;
    margin-left: 0;
}

.rtl-wrapper .ml-auto {
    margin-left: auto;
    margin-right: 0;
}

/* Hero Section */
.rtl-wrapper .hero-nav,
.rtl-wrapper .hero-nav ul {
    direction: rtl;
    text-align: right;
}

.rtl-wrapper .trust-content {
    text-align: right;
    align-items: flex-start;
}

.rtl-wrapper .trust-heading,
.rtl-wrapper .trust-desc {
    text-align: right;
}

.rtl-wrapper .trust-buttons {
    justify-content: flex-start;
    /* Ensure buttons start from the right (start) */
}

/* Ensure Logo and Nav are placed correctly */
.rtl-wrapper .hero-brand {
    /* Logo usually stays left or right? In Arabic sites logo often stays right (start). */
    /* Our layout has logo on left (start for LTR). For RTL, start is Right. */
    /* Flexbox usually handles this and flips it. */
    order: 1;
    /* Keep logo first (Right side in RTL) */
}

.rtl-wrapper .hero-nav {
    order: 2;
    /* Nav in middle */
}

.rtl-wrapper .hero-actions {
    /* Actions usually on the left (end) for RTL. */
    order: 3;
    /* Actions last (Left side in RTL) */
}

/* Icons */
.rtl-wrapper .icon-mirror-rtl {
    transform: scaleX(-1);
}

.rtl-wrapper .icon-arrow,
.rtl-wrapper .arrow {
    transform: scaleX(-1);
    display: inline-block;
}

/* Margins for Buttons with Icons */
.rtl-wrapper .btn-primary svg,
.rtl-wrapper .trust-btn svg,
.rtl-wrapper .card-link svg,
.rtl-wrapper .btn-dest .arrow {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.rtl-wrapper .lang-switch a {
    margin-left: 0;
    margin-right: 1rem;
}

.rtl-wrapper .lang-switch a,
.rtl-wrapper .lang-switch a * {
    font-family: 'Inter', sans-serif !important;
    /* English Text in Switcher */
}

/* Stats Card */
.rtl-wrapper .stat-icon-box {
    margin-right: 0;
    margin-left: 1rem;
}

/* Destinations Tabs */
.rtl-wrapper .destination-tabs {
    flex-wrap: wrap;
    /* Ensure tabs wrap correctly */
}

.rtl-wrapper .dest-tab:not(:last-child) {
    margin-right: 0;
    margin-left: 1rem;
}

.rtl-wrapper .dest-image {
    order: 2;
    /* Image on Left for RTL (or keep right? LTR: Image Left, Text Right. RTL: Image Right, Text Left) */
    /* Original CSS: dest-grid is grid-template-columns: 1fr 1fr. Order doesn't matter unless specified. */
    /* Check grid layout. */
}

/* Grid Checks */
@media (min-width: 992px) {
    .rtl-wrapper .trust-grid {
        grid-template-columns: 1fr 1fr;
        /* Trust Content (Text) | Trust Visuals (Cards) */
        /* In RTL, Col 1 is Right. So Text Right, Visuals Left. Correct. */
    }

    .rtl-wrapper .dest-grid {
        grid-template-columns: 1.2fr 1fr;
        /* Image | Info */
        /* In RTL, Image is Right, Info is Left. */
        /* If we want Image Left (End), we need to swap columns? */
        /* Usually Arabic sites mirror layout. Text Right, Image Left. */
        /* So Grid: Col 1 (Image) Right, Col 2 (Info) Left. */
        /* This is usually fine. */
    }
}

/* List Items */
.rtl-wrapper ul {
    padding-left: 0;
    padding-right: 0;
}

/* Inputs / Forms if any */
.rtl-wrapper input,
.rtl-wrapper textarea {
    text-align: right;
}

/* Typography Adjustments */
.rtl-wrapper .trust-heading {
    line-height: 1.3;
    font-weight: 700 !important;
    font-size: 1.95rem !important;
    /* Reduced by 20% */
}

@media (min-width: 640px) {
    .rtl-wrapper .trust-heading {
        font-size: 2.52rem !important;
        /* Reduced by 20% */
    }
}

@media (min-width: 1024px) {
    .rtl-wrapper .trust-heading {
        font-size: 2.88rem !important;
        /* Reduced by 20% */
    }
}

@media (min-width: 1280px) {
    .rtl-wrapper .trust-heading {
        font-size: 3.24rem !important;
        /* Reduced by 20% */
    }
}

/* Header Specifics */
/* If header is sticky/absolute, it needs to obey dir=rtl */
.rtl-wrapper .hero-header-inner {
    flex-direction: row;
    /* Starts from Right */
}

/* Marquee */
/* Marquee Alignment */
.rtl-wrapper .marquee-track {
    direction: rtl;
}

/* Submenu Alignment Fix */
.rtl-wrapper .hero-nav ul .sub-menu,
.rtl-wrapper .main-navigation ul ul {
    left: auto !important;
    right: 0 !important;
    transform: translateY(10px) !important;
    text-align: right;
}

.rtl-wrapper .hero-nav ul li:hover .sub-menu,
.rtl-wrapper .main-navigation ul li:hover>ul {
    transform: translateY(0) !important;
}

.rtl-wrapper .hero-nav ul ul a,
.rtl-wrapper .main-navigation ul ul a {
    text-align: right;
}

/* Timeline in Process */
.rtl-wrapper .timeline-item {
    border-left: none;
    border-right: 2px solid var(--color-primary);
    padding-left: 0;
    padding-right: 1rem;
}

/* Background Visibility Fix */
.rtl-wrapper .trust-bg {
    opacity: 0.6 !important;
    /* Increase visibility for dark images */
}

/* Category Page Header RTL */
.rtl-wrapper .page-header-content {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* flex-start in RTL is the right side */
}

.rtl-wrapper .page-header-premium p {
    margin-left: 0;
    margin-right: 0;
}

/* --- Sacred Grid Section (Bento Style) --- */
.rtl-wrapper .sacred-grid-section {
    padding: 4rem 1rem;
    background: #fff;
    /* Light background as requested */
}

.rtl-wrapper .sacred-header {
    text-align: center;
    margin-bottom: 3rem;
}

.rtl-wrapper .sacred-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #111;
}

.rtl-wrapper .sacred-header p {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.rtl-wrapper .view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: gap 0.3s;
}

.rtl-wrapper .view-all-link:hover {
    gap: 0.8rem;
}

/* Bento Grid Layout */
.rtl-wrapper .bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
}

.rtl-wrapper .bento-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 250px;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rtl-wrapper .bento-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.rtl-wrapper .bento-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    z-index: -2;
}

.rtl-wrapper .bento-item:hover .bento-bg {
    transform: scale(1.05);
}

.rtl-wrapper .bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    z-index: -1;
}

.rtl-wrapper .bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    color: #fff;
    text-align: right;
}

.rtl-wrapper .bento-tag {
    display: inline-block;
    background: var(--color-primary);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.rtl-wrapper .bento-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #fff;
}

.rtl-wrapper .bento-content p {
    font-size: 0.9rem;
    color: #e4e4e7;
    margin: 0;
    line-height: 1.4;
    max-width: 90%;
}

.rtl-wrapper .btn-sm {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Desktop Logic (RTL) */
@media (min-width: 992px) {
    .rtl-wrapper .bento-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 equal columns to start */
        grid-template-rows: repeat(2, 300px);
        /* fixed row height */
    }

    /*
       RTL GRID:
       Col 1 (Right): Makkah (Large) -> spans 2 rows
       Col 2 (Left):
          Row 1: Madinah (Top) -> spans 2 columns (Wait, if grid has 2 cols?)
       Let's use Grid Areas for clarity.
    */
    .rtl-wrapper .bento-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        /* 3 cols logic: approx 40% (Right) - 30% - 30% */
        grid-template-rows: 280px 280px;
        gap: 1.5rem;
    }

    /* Item Placements for RTL (Right to Left visual) */
    /*
       1 2 2  (Col 1 is Right-most in RTL context? No, Grid is LTR structure unless direction:rtl set on container)
       1 3 4
       Our container HAS direction: rtl.
       So Col 1 is the Right-most column.
    */

    .rtl-wrapper .item-makkah {
        grid-column: 1 / span 1;
        /* Right column */
        grid-row: 1 / span 2;
        /* Full height */
    }

    .rtl-wrapper .item-madinah {
        grid-column: 2 / span 2;
        /* Left 2 columns */
        grid-row: 1 / span 1;
        /* Top half */
    }

    .rtl-wrapper .item-sites {
        grid-column: 2 / span 1;
        /* Middle col */
        grid-row: 2 / span 1;
        /* Bottom half */
    }

    .rtl-wrapper .item-luxury {
        grid-column: 3 / span 1;
        /* Left-most col */
        grid-row: 2 / span 1;
        /* Bottom half */
    }
}

/* --- Umrah Card RTL Fixes --- */
.rtl-wrapper .umrah-card {
    text-align: right;
    direction: rtl;
}

.rtl-wrapper .umrah-card-content h3 {
    text-align: right;
    font-size: 1.1rem;
    /* 1.35rem * 0.8 */
}

.rtl-wrapper .umrah-meta {
    flex-direction: row-reverse;
    /* Duration Right, Price Left */
}

.rtl-wrapper .umrah-meta .price {
    font-size: 1rem;
    /* 1.25rem * 0.8 */
}

.rtl-wrapper .umrah-meta .duration {
    flex-direction: row;
    gap: 8px;
    font-size: 0.75rem;
    /* 0.9rem * 0.8 */
}

.rtl-wrapper .umrah-meta .duration i {
    margin-left: 5px;
    margin-right: 0;
    font-size: 0.9rem;
    /* 1.1rem * 0.8 */
}


.rtl-wrapper .umrah-actions {
    direction: rtl;
    /* Ensure grid respects RTL, but customize columns if needed */
    grid-template-columns: 1.5fr 1fr;
    /* Swap width ratios: Book (Larger) | View (Smaller) */
}

.rtl-wrapper .umrah-book-btn {
    order: 1;
    /* Make Book Now first on Right */
    font-size: 0.9rem;
    /* 1rem * 0.9 (approx) */
}

.rtl-wrapper .umrah-view-btn {
    order: 2;
    /* Make View Details second on Left */
    font-size: 0.9rem;
}

.rtl-wrapper .umrah-book-btn {
    flex-direction: row;
    /* WhatsApp icon alignment */
    gap: 8px;
}

.rtl-wrapper .umrah-book-btn i {
    order: -1;
    margin-right: 0;
    margin-left: 5px;
}

/* Fix Badge Position */
.rtl-wrapper .ended-badge {
    right: auto;
    left: 15px;
}

/* Main Header RTL Adjustments */
.site-header[dir="rtl"] .main-navigation {
    margin-left: auto;
    margin-right: auto;
    /* Center the menu between logo and actions */
}

.site-header[dir="rtl"] .container-header {
    justify-content: space-between;
}

.site-header[dir="rtl"] .header-socials {
    margin-left: 0;
    margin-right: 2rem;
    /* Proper spacing from nav in RTL */
    flex-direction: row-reverse;
    /* Maintain social icon order visually */
}

/* Ensure Logo has some breathing room in RTL */
.site-header[dir="rtl"] .site-branding {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Lang Switch Spacing in RTL */
.rtl-wrapper .lang-switch a {
    margin-left: 0.5rem !important;
    margin-right: 1rem !important;
}

@media (max-width: 992px) {
    .site-header[dir="rtl"] .menu-toggle {
        margin-right: auto;
        margin-left: 1.5rem;
    }
}

@media (max-width: 768px) {
    .rtl-wrapper .sacred-header h2 {
        font-size: 1.8rem;
    }

    .rtl-wrapper .sacred-header p {
        font-size: 0.95rem;
    }
}

/* --- Testimonials Section RTL --- */
.rtl-wrapper .google-rating-badge {
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.rtl-wrapper .testimonial-date {
    margin-right: auto;
    margin-left: 0;
}

.rtl-wrapper .author-image-mini {
    margin-left: 10px;
    margin-right: 0;
}

.rtl-wrapper .testimonials-scroller-wrapper {
    /* Mechanically we use LTR for the marquee container to ensure standard swipe/scroll logic, 
       but content inside cards is RTL. */
    direction: ltr;
}

.rtl-wrapper .testimonial-card {
    direction: rtl;
    text-align: right;
}