/*
RTL Styles for Coffee Shop Theme
Supports Arabic and other RTL languages
*/

/* General RTL Styles */
body.rtl {
    direction: rtl;
    text-align: right;
}

/* FAQ Section RTL Styles */
.rtl .faq-accordion .accordion-button {
    text-align: right;
}

.rtl .faq-accordion .accordion-button svg {
    margin-right: auto;
    margin-left: 0;
}

/* Container and Layout RTL */
.rtl .container {
    direction: rtl;
}

.rtl .flex {
    direction: rtl;
}

.rtl .items-center {
    text-align: center;
}

/* Tailwind RTL Overrides */
.rtl .justify-between {
    /* flex-direction: row-reverse; */
}

.rtl .text-left {
    text-align: right !important;
}

.rtl .text-right {
    text-align: left !important;
}

/* FAQ Specific RTL Styles */
.rtl #accordion-faq button {
    text-align: right;
    direction: rtl;
}

.rtl #accordion-faq .flex {
    flex-direction: row-reverse;
}

.rtl #accordion-faq svg {
    margin-left: 0;
    margin-right: auto;
}

.rtl #accordion-faq .p-5 {
    text-align: right;
    direction: rtl;
}

/* Navigation and Header RTL */
.rtl .nav-menu {
    direction: rtl;
}

.rtl .nav-menu li {
    text-align: right;
}

/* Header RTL Specific Styles */
.rtl header nav .flex {
    flex-direction: row-reverse;
}

.rtl header nav {
    flex-direction: row-reverse;
}

/* RTL Header Layout - Logo on right, icons on left, menu in center */
.rtl header .order-1 {
    order: 3; /* Icons move to left */
}

.rtl header .order-2 {
    order: 2; /* Menu stays in center */
}

.rtl header .order-3 {
    order: 1; /* Logo moves to right */
}

/* RTL Navigation Menu Centering */
.rtl .flex-1.flex.justify-center {
    justify-content: center;
    flex: 1;
}

.rtl header .space-x-8 > * + * {
    margin-left: 0 !important;
    margin-right: 2rem !important;
}

.rtl header .space-x-6 > * + * {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
}

.rtl header .space-x-4 > * + * {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

/* Mobile menu button - ensure it's clickable */
.drawer-toggle-button {
    position: relative;
    z-index: 9999;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
}

.drawer-toggle-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.drawer-toggle-button:focus {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

/* Flowbite Drawer RTL Support */
#drawer-navigation {
    direction: inherit;
}

/* RTL Drawer positioning */
.rtl #drawer-navigation {
    right: 0 !important;
    left: auto !important;
}

.rtl #drawer-navigation.translate-x-full {
    transform: translateX(100%) !important;
}

.rtl #drawer-navigation:not(.translate-x-full) {
    transform: translateX(0) !important;
}

/* LTR Drawer positioning */
.ltr #drawer-navigation,
body:not(.rtl) #drawer-navigation {
    left: 0 !important;
    right: auto !important;
}

.ltr #drawer-navigation.-translate-x-full,
body:not(.rtl) #drawer-navigation.-translate-x-full {
    transform: translateX(-100%) !important;
}

.ltr #drawer-navigation:not(.-translate-x-full),
body:not(.rtl) #drawer-navigation:not(.-translate-x-full) {
    transform: translateX(0) !important;
}

/* Drawer content RTL styles */
.rtl #drawer-navigation .py-4 {
    direction: rtl;
    text-align: right;
}

.rtl #drawer-navigation h5 {
    text-align: right;
}

.rtl #drawer-navigation .space-y-2 a {
    text-align: right;
    direction: rtl;
}

/* Drawer close button positioning */
.rtl #drawer-navigation [data-drawer-hide] {
    left: 0.625rem !important; /* top-2.5 left-2.5 for RTL */
    right: auto !important;
}

/* Legacy mobile menu support for backward compatibility */
#mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform, opacity;
    z-index: 20;
    opacity: 1;
}

/* RTL Mobile Menu - Hidden State */
.rtl #mobile-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%);
}

/* RTL Mobile Menu - Visible State */
.rtl #mobile-menu.show {
    transform: translateX(0);
}

/* LTR Mobile Menu - Hidden State */
.ltr #mobile-menu,
body:not(.rtl) #mobile-menu {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%);
}

/* LTR Mobile Menu - Visible State */
.ltr #mobile-menu.show,
body:not(.rtl) #mobile-menu.show {
    transform: translateX(0);
}

/* Mobile menu specific RTL styles */
.rtl #mobile-menu .py-4 {
    direction: rtl;
    text-align: right;
}

.rtl #mobile-menu .block {
    text-align: right;
}

/* Language switcher in mobile menu */
.rtl #mobile-menu .language-switcher,
.rtl #mobile-menu .border-t {
    direction: rtl;
    text-align: right;
}

/* Cart Badge RTL Positioning */
.rtl .relative .absolute {
    right: auto !important;
}

/* LTR Cart Badge Positioning */
.ltr .relative .absolute {
    left: auto !important;
    right: -0.5rem !important;
}

/* Fix for space-x-reverse utility */
.rtl .space-x-reverse > * + * {
    margin-right: 0.5rem;
    margin-left: 0;
}

.rtl .space-x-8.space-x-reverse > * + * {
    margin-right: 2rem;
    margin-left: 0;
}

.rtl .space-x-6.space-x-reverse > * + * {
    margin-right: 1.5rem;
    margin-left: 0;
}

.rtl .space-x-4.space-x-reverse > * + * {
    margin-right: 1rem;
    margin-left: 0;
}

/* Language Switcher RTL */
.rtl .language-switcher {
    margin-right: auto;
    margin-left: 0;
}

/* Primary Navigation RTL */
.rtl .hidden.md\\:block .flex {
    flex-direction: row-reverse;
}

/* Arabic Font Support - Respects customizer settings with RTL fallbacks */
.lang-ar {
    font-family: var(--font-primary), 'Noto Sans Arabic', 'Amiri', 'Arial Unicode MS', Tahoma, sans-serif;
}

.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar h5, .lang-ar h6 {
    font-family: var(--font-headings), 'Noto Sans Arabic', 'Amiri', 'Arial Unicode MS', Tahoma, sans-serif;
    font-weight: 600;
}

/* Hebrew Font Support - Respects customizer settings with Hebrew fallbacks */
.lang-he {
    font-family: var(--font-primary), 'Noto Sans Hebrew', 'David Libre', 'Frank Ruehl CLM', serif;
}

.lang-he h1, .lang-he h2, .lang-he h3, .lang-he h4, .lang-he h5, .lang-he h6 {
    font-family: var(--font-headings), 'Noto Sans Hebrew', 'David Libre', 'Frank Ruehl CLM', serif;
}

/* Persian/Farsi Font Support - Respects customizer settings with Persian fallbacks */
.lang-fa {
    font-family: var(--font-primary), 'Noto Sans Arabic', 'Vazir', 'Tahoma', sans-serif;
}

.lang-fa h1, .lang-fa h2, .lang-fa h3, .lang-fa h4, .lang-fa h5, .lang-fa h6 {
    font-family: var(--font-headings), 'Noto Sans Arabic', 'Vazir', 'Tahoma', sans-serif;
}

/* Urdu Font Support - Respects customizer settings with Urdu fallbacks */
.lang-ur {
    font-family: var(--font-primary), 'Noto Sans Arabic', 'Jameel Noori Nastaleeq', 'Tahoma', sans-serif;
}

.lang-ur h1, .lang-ur h2, .lang-ur h3, .lang-ur h4, .lang-ur h5, .lang-ur h6 {
    font-family: var(--font-headings), 'Noto Sans Arabic', 'Jameel Noori Nastaleeq', 'Tahoma', sans-serif;
}

/* Layout Adjustments for RTL */
.rtl .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.rtl .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.rtl .pl-4 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

.rtl .pr-4 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

/* FAQ Icons RTL Positioning */
.rtl [data-accordion-icon] {
    transform: rotate(0deg);
}

.rtl .accordion-open [data-accordion-icon] {
    transform: rotate(180deg);
}

/* Mobile Responsive RTL */
@media (max-width: 768px) {
    .rtl .container {
        direction: rtl;
        text-align: right;
    }
    
    .rtl .text-center {
        text-align: center !important;
    }
    
    /* Mobile menu items RTL */
    .rtl #mobile-menu .py-4 .block {
        text-align: right;
        direction: rtl;
    }
}

/* Additional RTL Layout Fixes */
.rtl .justify-start {
    justify-content: flex-end !important;
}

.rtl .justify-end {
    justify-content: flex-start !important;
}

/* Text alignment fixes */
.rtl p, .rtl div, .rtl span {
    /* text-align: right; */
}

.rtl .text-center {
    text-align: center !important;
}

/* Button and link alignments */
.rtl .btn, .rtl button, .rtl .button {
    text-align: center;
}

/* Search form RTL */
.rtl .search-form {
    direction: rtl;
}

.rtl .search-form input {
    text-align: right;
    direction: rtl;
}

/* Language switcher specific styles */
.rtl .language-switcher ul {
    text-align: right;
    direction: rtl;
}

.rtl .language-switcher li {
    text-align: right;
}

/* Polylang flags alignment */
.rtl .lang-item {
    display: inline-block;
    margin-left: 0.5rem;
    margin-right: 0;
}

.rtl .lang-item:first-child {
    margin-left: 0;
}

/* Polylang dropdown specific styles */
.rtl .lang-item.lang-item-first {
    margin-right: 0;
}

.rtl select[name="lang_choice"] {
    direction: rtl;
    text-align: right;
}

/* Search overlay RTL */
.rtl #search-overlay .bg-white {
    direction: rtl;
    text-align: right;
}

.rtl #search-overlay h2 {
    text-align: right;
}

.rtl #search-close {
    float: left;
}

/* WooCommerce cart specific RTL */
.rtl .woocommerce-cart-form {
    direction: rtl;
}

.rtl .cart-collaterals {
    direction: rtl;
    text-align: right;
}

/* Form elements RTL */
.rtl input[type="text"],
.rtl input[type="email"],
.rtl input[type="search"],
.rtl textarea,
.rtl select {
    direction: rtl;
    text-align: right;
}

/* Footer RTL adjustments */
.rtl footer {
    direction: rtl;
    text-align: right;
}

.rtl footer .flex {
    flex-direction: row-reverse;
}

/* Breadcrumb RTL */
.rtl .breadcrumb {
    direction: rtl;
}

.rtl .breadcrumb-separator {
    transform: scaleX(-1);
}

/* Table RTL */
.rtl table {
    direction: rtl;
}

.rtl th, .rtl td {
    text-align: right;
}

/* List items RTL */
.rtl ul, .rtl ol {
    direction: rtl;
    text-align: right;
}

.rtl li {
    text-align: right;
}

/* Menu items specific RTL styles */
.rtl .menu-item a {
    text-align: right;
    direction: rtl;
}

.rtl .sub-menu {
    direction: rtl;
    text-align: right;
}

.rtl .dropdown-indicator {
    margin-right: 0.25rem;
    margin-left: 0;
}

/* Mobile menu language switcher */
.rtl #mobile-menu .lang-item {
    display: block;
    margin: 0.5rem 0;
    text-align: right;
}

.rtl #mobile-menu .lang-item a {
    padding: 0.5rem 0;
    display: block;
}

/* Fix for Tailwind flex-row-reverse */
.rtl .flex-row-reverse {
    flex-direction: row !important;
}

/* Additional spacing fixes */
.rtl .space-y-1 > * + * {
    margin-top: 0.25rem;
}

.rtl .space-y-2 > * + * {
    margin-top: 0.5rem;
}

.rtl .space-y-4 > * + * {
    margin-top: 1rem;
}

/* Additional Tailwind RTL Utilities */
.rtl .space-x-reverse {
    --tw-space-x-reverse: 1;
}

.rtl .justify-start {
    justify-content: flex-end !important;
}

.rtl .justify-end {
    justify-content: flex-start !important;
}

.rtl .text-left {
    text-align: right !important;
}

.rtl .text-right {
    text-align: left !important;
}

/* Header specific RTL improvements */
.rtl header .container {
    direction: rtl;
}

.rtl header .justify-between {
    flex-direction: row-reverse;
}

/* Make sure icons are properly positioned in RTL */
.rtl svg {
    transform: scaleX(-1);
}

.rtl .menu-icon svg,
.rtl .search-toggle svg,
.rtl .cart svg {
    transform: none; /* Keep these icons normal */
}

/* Ensure proper RTL behavior for hidden elements */
.rtl .hidden.md\\:block {
    direction: rtl;
}

/* Language switcher dropdown RTL positioning */
.rtl .language-switcher select {
    direction: rtl;
    text-align: right;
}

/* Search form RTL */
.rtl .search-form {
    direction: rtl;
}

.rtl .search-form input[type="search"] {
    direction: rtl;
    text-align: right;
}

.rtl .search-form button {
    order: -1;
}

/* Fix for mobile menu close button positioning in RTL */
.rtl #search-close {
    order: -1;
}

/* Responsive RTL adjustments */
@media (max-width: 768px) {
    .rtl #mobile-menu {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
    }
    
    .rtl #mobile-menu.show {
        transform: translateX(0) !important;
    }
    
    .ltr #mobile-menu {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important;
    }
    
    .ltr #mobile-menu.show {
        transform: translateX(0) !important;
    }
    
    .rtl .language-switcher {
        display: block !important;
        text-align: right;
    }
    
    /* Mobile header layout fixes */
    .rtl header nav {
        flex-direction: row-reverse;
    }
    
    .rtl header .flex-1 {
        order: 2;
    }
}

/* Print styles for RTL */
@media print {
    .rtl * {
        direction: rtl !important;
        text-align: right !important;
    }
}

/* Language Switcher Enhanced Styling */
.language-switcher {
    position: relative;
}

.language-switcher select,
.lang-select-custom {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.language-switcher select:hover,
.lang-select-custom:hover {
    border-color: #9ca3af;
    background-color: #f9fafb;
}

.language-switcher select:focus,
.lang-select-custom:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* RTL Language Switcher */
.rtl .language-switcher select,
.rtl .lang-select-custom {
    padding: 0.375rem 0.75rem 0.375rem 2rem;
    background-position: left 0.5rem center;
}

/* Mobile Language Switcher */
#mobile-menu .language-switcher {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

#mobile-menu .language-switcher h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

#mobile-menu .language-switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-menu .language-switcher li {
    margin: 0;
    padding: 0;
}

#mobile-menu .language-switcher a {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

#mobile-menu .language-switcher a:hover {
    color: #7c2d12;
}

#mobile-menu .language-switcher a.current {
    color: #7c2d12;
    font-weight: 600;
}

#mobile-menu .language-switcher img {
    width: 1.25rem;
    height: auto;
    margin-right: 0.5rem;
    border-radius: 0.125rem;
}

.rtl #mobile-menu .language-switcher img {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Desktop Language Switcher Flags */
.language-switcher img {
    width: 1rem;
    height: auto;
    margin-right: 0.25rem;
    border-radius: 0.125rem;
}

.rtl .language-switcher img {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* Polylang specific styling */
.lang-item {
    display: inline-block;
}

.lang-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lang-item.current-lang a {
    font-weight: 600;
    color: #7c2d12;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 19;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Ensure mobile menu appears above overlay */
#mobile-menu {
    z-index: 20;
    position: fixed;
    top: 77px;
    height: calc(100vh - 77px);
    width: 24rem; /* 96 in Tailwind */
    max-width: 90vw;
    background: white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Mobile menu button accessibility */
#mobile-menu-button {
    position: relative;
    z-index: 50;
    outline: none;
}

#mobile-menu-button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Mobile menu content styling */
#mobile-menu .py-4 {
    padding: 1rem;
}

#mobile-menu .space-y-1 > * + * {
    margin-top: 0.25rem;
}

#mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
}

#mobile-menu a:hover {
    background-color: #f3f4f6;
}

#mobile-menu a.current {
    background-color: #fef3c7;
    color: #92400e;
}

/* RTL mobile menu content */
.rtl #mobile-menu a {
    text-align: right;
}