/* ==========================================================================
   LIVACITE — Premium Sports Design Gallery
   RTL Stylesheet: Right-To-Left Alignment, Directional Flow & Unified Arabic Typography
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Universal Unified Arabic Typography
   -------------------------------------------------------------------------- */
[dir="rtl"],
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
  text-align: right;
}

/* Headings & Display Typography */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .disp, [dir="rtl"] .zh-hero-title, [dir="rtl"] .page-title, [dir="rtl"] .card-title,
[dir="rtl"] .section-title, [dir="rtl"] .detail-title, [dir="rtl"] .modal-title, [dir="rtl"] .comm-head h3,
[dir="rtl"] .flow-title, [dir="rtl"] .format-title, [dir="rtl"] .info-card-title, [dir="rtl"] .club-name,
[dir="rtl"] .welcome-heading {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.35 !important;
}

/* Paragraphs & Body Descriptions */
[dir="rtl"] p, [dir="rtl"] .zh-hero-sub, [dir="rtl"] .detail-desc, [dir="rtl"] .flow-desc,
[dir="rtl"] .format-desc, [dir="rtl"] .info-card-body, [dir="rtl"] .card-subtitle, [dir="rtl"] .comm-head p,
[dir="rtl"] .footer-brand-desc, [dir="rtl"] .catalog-hero p, [dir="rtl"] .welcome-sub {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.75 !important;
}

/* Eyebrows, Badges, Chips & Meta Labels */
[dir="rtl"] .eyebrow, [dir="rtl"] .zh-eyebrow, [dir="rtl"] .hc-eyebrow, [dir="rtl"] .hcu-eyebrow,
[dir="rtl"] .badge, [dir="rtl"] .m-badge, [dir="rtl"] .m-nuevo, [dir="rtl"] .hc-badge,
[dir="rtl"] .detail-tag, [dir="rtl"] .quick-tag, [dir="rtl"] .chip, [dir="rtl"] .filter-btn,
[dir="rtl"] .format-badge, [dir="rtl"] .spec-badge, [dir="rtl"] .club-tag, [dir="rtl"] .attached-badge,
[dir="rtl"] .btn, [dir="rtl"] .btn-hero-primary, [dir="rtl"] .btn-hero-secondary, [dir="rtl"] .btn-submit-comm,
[dir="rtl"] .zh-link-arrow, [dir="rtl"] .sort-link, [dir="rtl"] .sort-label, [dir="rtl"] .results-count,
[dir="rtl"] .nav-link, [dir="rtl"] .footer-link, [dir="rtl"] .zh-ticker-item, [dir="rtl"] .palabra {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
}

/* Prevent animated word splitting from distorting connected Arabic text */
[dir="rtl"] .palabra {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   2. Eyebrow Accents & Visual Decorations
   -------------------------------------------------------------------------- */
[dir="rtl"] .zh-eyebrow,
[dir="rtl"] .eyebrow,
[dir="rtl"] .hc-eyebrow,
[dir="rtl"] .hcu-eyebrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

[dir="rtl"] .zh-eyebrow::before,
[dir="rtl"] .eyebrow::before,
[dir="rtl"] .hc-eyebrow::before,
[dir="rtl"] .hcu-eyebrow::before {
  transform: skewX(20deg);
  margin-left: 2px;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   3. Header & Navigation Directional Flow
   -------------------------------------------------------------------------- */
[dir="rtl"] .site-header .header-inner {
  direction: rtl;
}

[dir="rtl"] .logo a {
  flex-direction: row;
}

[dir="rtl"] .nav-actions {
  padding-left: 0;
  padding-right: 0.9rem;
  border-left: none;
  border-right: 1px solid var(--border-light);
}

/* --------------------------------------------------------------------------
   4. Hero Search Bar, Badges & Inputs
   -------------------------------------------------------------------------- */
[dir="rtl"] .zh-search-icon,
[dir="rtl"] .search-icon-svg {
  left: auto;
  right: 1.25rem;
}

[dir="rtl"] .zh-search-input,
[dir="rtl"] .search-input {
  padding-left: 1.2rem;
  padding-right: 3.2rem;
  text-align: right;
}

[dir="rtl"] .zh-search-clear {
  right: auto;
  left: 0.9rem;
}

[dir="rtl"] .zh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
}

[dir="rtl"] .quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  flex-direction: row;
}

/* --------------------------------------------------------------------------
   5. Card Layouts, Overlays & Badges
   -------------------------------------------------------------------------- */
[dir="rtl"] .zh-bg-card-badge,
[dir="rtl"] .m-badge {
  left: auto;
  right: 10px;
}

[dir="rtl"] .m-nuevo {
  right: auto;
  left: 10px;
}

[dir="rtl"] .hc-badge {
  right: auto;
  left: 12px;
}

[dir="rtl"] .info-card-num,
[dir="rtl"] .flow-num {
  right: auto;
  left: 16px;
  text-align: left;
}

[dir="rtl"] .gallery-header,
[dir="rtl"] .zh-section-head,
[dir="rtl"] .hc-head,
[dir="rtl"] .hcu-head,
[dir="rtl"] .section-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

[dir="rtl"] .zh-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[dir="rtl"] .zh-link-arrow:hover {
  transform: translateX(-4px);
}

/* --------------------------------------------------------------------------
   6. Commission Form & Resource Detail View
   -------------------------------------------------------------------------- */
[dir="rtl"] .comm-form,
[dir="rtl"] .comm-field label,
[dir="rtl"] .comm-input,
[dir="rtl"] .comm-select,
[dir="rtl"] .comm-textarea {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .flow-card,
[dir="rtl"] .format-card,
[dir="rtl"] .info-card,
[dir="rtl"] .club-card {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .detail-breadcrumbs {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

[dir="rtl"] .btn-back-cat {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .attached-item-chip {
  flex-direction: row;
  text-align: right;
}

[dir="rtl"] .modal-close-btn {
  right: auto;
  left: 15px;
}

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

[dir="rtl"] .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --------------------------------------------------------------------------
   7. Seamless Infinite Carousels & Tracks in RTL
   -------------------------------------------------------------------------- */
@keyframes mScrollRtl {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

@keyframes zhHeroDriftRtl {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

[dir="rtl"] .m-track {
  animation-name: mScrollRtl;
}

[dir="rtl"] .zh-bg-track {
  animation-name: zhHeroDriftRtl;
}

[dir="rtl"] .zh-ticker-track {
  animation-name: mScrollRtl;
}