/**
 * RTL Stylesheet - Premium Massage Directory
 * Right-to-left language support (Hebrew)
 */

/* ==========================================================================
   Base RTL Direction
   ========================================================================== */
html[dir="rtl"],
[dir="rtl"],
.rtl {
 direction: rtl;
 text-align: right;
}

html[dir="rtl"] body {
 direction: rtl;
 text-align: right;
 /* Ensure sticky positioning works */
 overflow-x: clip;
}

/* Ensure site-header sticky works in RTL */
[dir="rtl"] .site-header {
 position: sticky;
 position: -webkit-sticky;
 top: 0;
}

/* ==========================================================================
   Typography & Text Alignment
   ========================================================================== */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] li,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] label,
html[dir="rtl"] .section__title,
html[dir="rtl"] .section__header,
html[dir="rtl"] .provider-card__title,
html[dir="rtl"] .provider-card__content {
 direction: rtl;
 text-align: right;
}

/* ==========================================================================
   Directional Icons - Flip for RTL
   ========================================================================== */
[dir="rtl"] .icon--arrow,
[dir="rtl"] .icon--chevron,
[dir="rtl"] .icon--arrow-right,
[dir="rtl"] .icon--arrow-left {
 transform: scaleX(-1);
}

/* ==========================================================================
   Header
   ========================================================================== */
[dir="rtl"] .site-header__inner {
 flex-direction: row-reverse;
 position: relative;
}

/* WhatsApp button at far left in RTL - All screen sizes */
[dir="rtl"] .site-header__whatsapp {
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
}

/* Mobile: Position menu toggle next to WhatsApp */
@media (max-width: 767px) {
 [dir="rtl"] .site-header__menu-toggle {
   position: absolute;
   left: 120px; /* Right of WhatsApp button */
   top: 50%;
   transform: translateY(-50%);
 }
}

/* Desktop only: Move nav to the right side next to logo */
@media (min-width: 768px) {
 [dir="rtl"] .site-header__inner {
   justify-content: flex-end;
   gap: var(--spacing-xl);
 }
}

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

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

@media (min-width: 768px) {
 [dir="rtl"] .site-header__logo {
   margin-left: 0;
 }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
[dir="rtl"] .mobile-nav {
 transform: translateX(100%);
}

[dir="rtl"] .mobile-nav.is-open {
 transform: translateX(0);
}

/* ==========================================================================
   Provider Grid - Flexbox handles RTL naturally, no special rules needed
   ========================================================================== */

/* ==========================================================================
   Provider Cards
   ========================================================================== */
[dir="rtl"] .provider-card__badges {
 left: auto;
 right: var(--spacing-sm);
 inset-inline-start: var(--spacing-sm);
 inset-inline-end: auto;
}

[dir="rtl"] .provider-card__location {
 flex-direction: row-reverse;
 justify-content: flex-end;
}

[dir="rtl"] .provider-card__location .icon {
 margin-left: var(--spacing-xs);
 margin-right: 0;
}

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

/* Mobile - stack buttons vertically */
@media (max-width: 479px) {
 [dir="rtl"] .provider-card__actions {
  flex-direction: column;
 }
}

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

[dir="rtl"] .provider-card__content {
 text-align: right;
}

/* ==========================================================================
   Provider Single Page
   ========================================================================== */
@media (min-width: 768px) {
 [dir="rtl"] .provider-single {
  grid-template-columns: 320px 1fr;
 }
 
 [dir="rtl"] .provider-single__sidebar {
  order: -1;
 }
}

[dir="rtl"] .provider-single__header {
 text-align: right;
}

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

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

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

[dir="rtl"] .provider-single__price {
 text-align: right;
}

/* Sticky CTA */
[dir="rtl"] .provider-single__sticky-cta {
 flex-direction: row-reverse;
}

/* ==========================================================================
   Filters & Tabs - FIX: Make filters flow from RIGHT
   ========================================================================== */
[dir="rtl"] .location-filter {
 direction: rtl;
}

[dir="rtl"] .location-filter__list {
 flex-direction: row;
 justify-content: flex-start;
}

[dir="rtl"] .category-tabs {
 direction: rtl;
}

[dir="rtl"] .category-tabs__list {
 flex-direction: row;
 justify-content: flex-start;
}

/* ==========================================================================
   Badges
   ========================================================================== */
[dir="rtl"] .badge {
 flex-direction: row-reverse;
}

[dir="rtl"] .badge .icon {
 margin-left: var(--spacing-xs);
 margin-right: 0;
}

/* ==========================================================================
   Buttons with Icons
   ========================================================================== */
[dir="rtl"] .btn .icon {
 margin-left: var(--spacing-xs);
 margin-right: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
 text-align: right;
}

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

/* Mobile stacked search form - no reverse needed */
@media (max-width: 479px) {
 [dir="rtl"] .search-form {
  flex-direction: column;
 }
}

[dir="rtl"] .search-form__input {
 border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

[dir="rtl"] .search-form__submit {
 border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* Mobile - restore full radius when stacked */
@media (max-width: 479px) {
 [dir="rtl"] .search-form__input,
 [dir="rtl"] .search-form__submit {
  border-radius: var(--radius-md);
 }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
[dir="rtl"] .pagination {
 flex-direction: row-reverse;
}

/* ==========================================================================
   Footer
   ========================================================================== */
[dir="rtl"] .site-footer__inner {
 direction: rtl;
 text-align: right;
}

[dir="rtl"] .site-footer__column {
 text-align: right;
}

[dir="rtl"] .site-footer__link {
 text-align: right;
}

/* ==========================================================================
   Section Headers - FIX: Title on RIGHT, Link on LEFT
   ========================================================================== */
html[dir="rtl"] .section__header,
[dir="rtl"] .section__header {
 /* flexbox with space-between handles RTL naturally - title goes right, link goes left */
 direction: rtl;
}

html[dir="rtl"] .section__title,
html[dir="rtl"] h1.section__title,
html[dir="rtl"] h2.section__title,
html[dir="rtl"] header.section__header h1,
html[dir="rtl"] .section__header .section__title,
html[dir="rtl"] .section__header h1,
html[dir="rtl"] .section__header h2,
[dir="rtl"] .section__title,
[dir="rtl"] h1.section__title,
[dir="rtl"] h2.section__title,
[dir="rtl"] header.section__header h1,
[dir="rtl"] .section__header .section__title {
 text-align: right;
 direction: rtl;
}

[dir="rtl"] .section__title::after {
 left: auto;
 right: 0;
}

/* All headings should be RTL */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
 text-align: right;
 direction: rtl;
}

/* All paragraphs and text should be RTL */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] label,
[dir="rtl"] span,
[dir="rtl"] div {
 direction: rtl;
}

[dir="rtl"] .section__link::after {
 content: '←';
 margin-left: 0;
 margin-right: 4px;
}

[dir="rtl"] .section__link:hover::after {
 transform: translateX(-4px);
}

/* ==========================================================================
   Hero Section - Keep centered for hero banner
   ========================================================================== */
[dir="rtl"] .hero {
 text-align: center;
}

[dir="rtl"] .hero__title,
[dir="rtl"] .hero__subtitle {
 text-align: center;
}

[dir="rtl"] .hero__search {
 margin-inline: auto;
}

/* ==========================================================================
   Provider Grid - No special RTL needed, CSS Grid respects dir attribute
   ========================================================================== */

/* ==========================================================================
   No Results
   ========================================================================== */
[dir="rtl"] .no-results {
 text-align: right;
}

/* ==========================================================================
   Search Results Header - Ensure RTL alignment on desktop
   ========================================================================== */
html[dir="rtl"] .section__header--title-only,
[dir="rtl"] .section__header--title-only {
 width: 100%;
 display: block !important;
 text-align: right !important;
}

html[dir="rtl"] .section__header--title-only .section__title,
[dir="rtl"] .section__header--title-only .section__title,
html[dir="rtl"] .section__header--title-only h1,
[dir="rtl"] .section__header--title-only h1 {
 text-align: right !important;
 direction: rtl !important;
 display: inline-block;
}

/* ==========================================================================
   Utility Adjustments
   ========================================================================== */
[dir="rtl"] .u-text-center {
 text-align: center !important;
}

/* General spacing adjustments using logical properties are already in main.css */