/**
 * Salmiya Oasis - RTL (Right-to-Left) Styles
 * Comprehensive Arabic language layout support
 * Updated to use html[dir="rtl"] selector for proper compatibility
 */

/* ============================================
   BASE RTL STYLES
   ============================================ */

html[dir="rtl"],
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', 'Gill Sans', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: 'Tajawal', 'Canto', sans-serif;
  text-align: right;
  letter-spacing: 0;
  font-weight: 700;
}

html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] span {
  text-align: right;
}

/* ============================================
   NAVIGATION
   ============================================ */

html[dir="rtl"] .navbar,
html[dir="rtl"] .header-container {
  direction: rtl;
  flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links,
html[dir="rtl"] nav ul {
  flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links li,
html[dir="rtl"] nav li {
  margin-left: 0;
  margin-right: 2rem;
}

html[dir="rtl"] .nav-links li:last-child,
html[dir="rtl"] nav li:last-child {
  margin-right: 0;
}

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

html[dir="rtl"] .language-switcher {
  margin-left: 0;
  margin-right: auto;
}

/* Mobile menu */
html[dir="rtl"] .mobile-menu-toggle,
html[dir="rtl"] .hamburger-menu {
  right: auto;
  left: 1rem;
}

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

/* ============================================
   HERO SECTION
   ============================================ */

html[dir="rtl"] .hero {
  text-align: right;
}

html[dir="rtl"] .hero-content {
  text-align: right;
  align-items: flex-end;
}

html[dir="rtl"] .hero-content h1,
html[dir="rtl"] .hero-content p {
  text-align: right;
}

html[dir="rtl"] .weather-widget {
  left: auto;
  right: 2rem;
}

/* ============================================
   BUTTONS & CTAs
   ============================================ */

html[dir="rtl"] .cta,
html[dir="rtl"] .btn,
html[dir="rtl"] .btn-expand {
  flex-direction: row-reverse;
}

html[dir="rtl"] .cta svg,
html[dir="rtl"] .btn-expand svg {
  transform: rotate(180deg);
  margin-left: 0;
  margin-right: 0;
}

html[dir="rtl"] .cta i,
html[dir="rtl"] .btn-expand i,
html[dir="rtl"] .btn i {
  margin-left: 0.5rem;
  margin-right: 0;
}

html[dir="rtl"] .fa-arrow-right::before {
  content: "\f060"; /* Left arrow for RTL */
}

html[dir="rtl"] .cta-button-group {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

html[dir="rtl"] .service-link-cta {
  flex-direction: row-reverse;
}

/* ============================================
   FORMS
   ============================================ */

html[dir="rtl"] form {
  direction: rtl;
}

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

html[dir="rtl"] .form-group,
html[dir="rtl"] .form-group label,
html[dir="rtl"] label {
  text-align: right;
}

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

html[dir="rtl"] input[type="checkbox"],
html[dir="rtl"] input[type="radio"] {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Fix for select dropdown arrow */
html[dir="rtl"] select {
  background-position: left 0.75rem center;
  padding-left: 2.5rem;
  padding-right: 0.75rem;
}

/* ============================================
   BOOKING SECTION
   ============================================ */

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

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

html[dir="rtl"] .booking-wrapper,
html[dir="rtl"] .booking-contact-section .booking-wrapper {
  flex-direction: row-reverse;
}

html[dir="rtl"] .booking-info {
  padding-right: 0;
  padding-left: 3rem;
  text-align: right;
}

html[dir="rtl"] .contact-item,
html[dir="rtl"] .contact-method {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="rtl"] .contact-item i,
html[dir="rtl"] .contact-method i {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir="rtl"] .contact-details {
  text-align: right;
}

/* ============================================
   MARQUEE
   ============================================ */

html[dir="rtl"] .marquee_content {
  animation-direction: reverse;
}

html[dir="rtl"] .marquee_header {
  text-align: right;
}

/* ============================================
   ABOUT SECTION
   ============================================ */

html[dir="rtl"] .about-section .container {
  flex-direction: row-reverse;
}

html[dir="rtl"] .about-section .col-1 {
  padding-right: 0;
  padding-left: 3rem;
}

html[dir="rtl"] .about-section .col-2 {
  padding-left: 0;
  padding-right: 3rem;
}

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

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

html[dir="rtl"] .section-inline-cta {
  text-align: right;
}

html[dir="rtl"] .cta-subtext {
  text-align: right;
}

/* ============================================
   CAPACITY SECTION
   ============================================ */

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

html[dir="rtl"] .capacity-number {
  text-align: center;
}

html[dir="rtl"] .capacity-label {
  text-align: center;
}

html[dir="rtl"] .capacity-cta-buttons {
  flex-direction: row-reverse;
  justify-content: center;
}

/* ============================================
   SERVICES SECTION
   ============================================ */

html[dir="rtl"] .service-card,
html[dir="rtl"] .services-grid {
  text-align: right;
  direction: rtl;
}

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

html[dir="rtl"] .service-features li,
html[dir="rtl"] .service-features-white li {
  text-align: right;
  padding-left: 0;
  padding-right: 2rem;
}

html[dir="rtl"] .service-features li i,
html[dir="rtl"] .service-features-white li i {
  right: 0;
  left: auto;
}

/* Masonry layout for services page */
html[dir="rtl"] .masonry-row {
  flex-direction: row-reverse;
}

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

html[dir="rtl"] .masonry-item {
  text-align: right;
}

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

html[dir="rtl"] .services-grid-3 {
  direction: rtl;
}

/* ============================================
   FEATURES SECTION
   ============================================ */

html[dir="rtl"] .features-container {
  flex-direction: row-reverse;
}

html[dir="rtl"] .features-image {
  padding-left: 0;
  padding-right: 2rem;
}

html[dir="rtl"] .features-cards {
  padding-right: 0;
  padding-left: 2rem;
}

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

html[dir="rtl"] .feature-card-icon {
  margin-right: 0;
  margin-left: 1.5rem;
}

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

/* ============================================
   GALLERY SECTION
   ============================================ */

html[dir="rtl"] .gallery-card,
html[dir="rtl"] .gallery-item {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .gallery-card-content,
html[dir="rtl"] .gallery-caption {
  text-align: right;
}

html[dir="rtl"] .gallery-accordion {
  text-align: right;
}

html[dir="rtl"] .accordion-header {
  text-align: right;
  flex-direction: row-reverse;
}

html[dir="rtl"] .accordion-header i {
  margin-right: 0;
  margin-left: 1rem;
}

/* ============================================
   TESTIMONIALS
   ============================================ */

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

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

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

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

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

html[dir="rtl"] blockquote {
  border-right: 4px solid var(--primary-color);
  border-left: none;
  padding-right: 1.5rem;
  padding-left: 0;
}

/* Quote marks */
html[dir="rtl"] .testimonial-quote::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .testimonial-quote::after {
  left: 0;
  right: auto;
}

/* ============================================
   FAQ SECTION
   ============================================ */

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

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

html[dir="rtl"] .faq-question i {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir="rtl"] .faq-answer {
  text-align: right;
  padding-right: 0;
  padding-left: 2.5rem;
}

/* ============================================
   CONTACT SECTION
   ============================================ */

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

html[dir="rtl"] .contact-info {
  padding-right: 0;
  padding-left: 3rem;
  text-align: right;
}

html[dir="rtl"] .map-container {
  padding-left: 0;
  padding-right: 3rem;
}

/* ============================================
   FOOTER
   ============================================ */

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

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

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

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

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

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

html[dir="rtl"] .footer-social {
  justify-content: flex-start;
}

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

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

html[dir="rtl"] .footer-bottom {
  text-align: center;
}

/* ============================================
   BLOGS PAGE
   ============================================ */

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

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

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

html[dir="rtl"] .blog-meta i {
  margin-right: 0;
  margin-left: 0.5rem;
}

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

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

/* ============================================
   CTA BANNER
   ============================================ */

html[dir="rtl"] .cta-banner {
  text-align: right;
}

html[dir="rtl"] .cta-banner-content {
  text-align: center;
}

html[dir="rtl"] .cta-buttons {
  flex-direction: row-reverse;
  justify-content: center;
}

html[dir="rtl"] .whatsapp-btn i {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .secondary-cta i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* ============================================
   DASHBOARD (Admin)
   ============================================ */

html[dir="rtl"] .dashboard-header {
  flex-direction: row-reverse;
}

html[dir="rtl"] .dashboard-tabs {
  flex-direction: row-reverse;
}

html[dir="rtl"] .dashboard-tabs button {
  margin-left: 0;
  margin-right: 0.5rem;
}

html[dir="rtl"] .table,
html[dir="rtl"] table {
  direction: rtl;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td,
html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

/* ============================================
   LISTS
   ============================================ */

html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 2rem;
  padding-left: 0;
  text-align: right;
}

html[dir="rtl"] li {
  text-align: right;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

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

html[dir="rtl"] .float-left {
  float: right !important;
}

html[dir="rtl"] .float-right {
  float: left !important;
}

html[dir="rtl"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

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

html[dir="rtl"] .align-items-start {
  align-items: flex-end;
}

html[dir="rtl"] .align-items-end {
  align-items: flex-start;
}

html[dir="rtl"] .justify-content-start {
  justify-content: flex-end;
}

html[dir="rtl"] .justify-content-end {
  justify-content: flex-start;
}

/* Spacing utilities */
html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 3rem; }

html[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 1rem; }
html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1.5rem; }
html[dir="rtl"] .pr-5 { padding-right: 0; padding-left: 3rem; }

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

/* ============================================
   BREADCRUMBS
   ============================================ */

html[dir="rtl"] .breadcrumb {
  direction: rtl;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "\\";
  transform: rotate(180deg);
}

/* ============================================
   ANIMATIONS RTL ADJUSTMENTS
   ============================================ */

html[dir="rtl"] .slide-in-left {
  animation-name: slideInRight;
}

html[dir="rtl"] .slide-in-right {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   LANGUAGE TOGGLE BUTTON
   ============================================ */

.language-toggle {
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: 2px solid white;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  min-width: 70px;
  font-family: 'Tajawal', sans-serif;
}

.language-toggle:hover {
  background: white;
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* ============================================
   LOADING STATE
   ============================================ */

body.loading {
  pointer-events: none;
  cursor: wait;
}

body.loading .language-toggle::after {
  content: '...';
  animation: dots 1s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Smooth transitions for language switch */
[data-i18n],
[data-i18n-html],
[data-i18n-placeholder] {
  transition: opacity 0.2s ease;
}

body.loading [data-i18n],
body.loading [data-i18n-html],
body.loading [data-i18n-placeholder] {
  opacity: 0.5;
}

/* ============================================
   RESPONSIVE RTL ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  html[dir="rtl"] .nav-links,
  html[dir="rtl"] nav ul {
    text-align: right;
  }

  html[dir="rtl"] .hero-content {
    text-align: center;
    align-items: center;
  }

  html[dir="rtl"] .booking-wrapper,
  html[dir="rtl"] .contact-wrapper,
  html[dir="rtl"] .features-container,
  html[dir="rtl"] .about-section .container {
    flex-direction: column;
  }

  html[dir="rtl"] .about-section .col-1,
  html[dir="rtl"] .about-section .col-2,
  html[dir="rtl"] .booking-info,
  html[dir="rtl"] .contact-info,
  html[dir="rtl"] .features-image,
  html[dir="rtl"] .features-cards {
    padding-left: 0;
    padding-right: 0;
  }

  html[dir="rtl"] .weather-widget {
    right: 50%;
    left: auto;
    transform: translateX(50%);
  }

  html[dir="rtl"] .masonry-row {
    flex-direction: column;
  }
}

/* Tablet RTL Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  html[dir="rtl"] .nav-links li,
  html[dir="rtl"] nav li {
    margin-right: 1.5rem;
  }
}