/* Right-to-left layout (Arabic). Loaded only when the page direction is rtl.
   Flex and grid layouts flip by themselves; this file mirrors everything that was positioned
   with physical left/right values in app.css and extra.css. */

[dir=rtl] body{font-family:'Cairo','DM Sans',Tahoma,sans-serif}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .footer-brand,[dir=rtl] .feature-title,[dir=rtl] blockquote,[dir=rtl] .listing-main b,[dir=rtl] .event-date b,[dir=rtl] .wa-cta b{font-family:'Cairo','Manrope',Tahoma,sans-serif}
/* Letter-spacing breaks the joined letters of Arabic script */
[dir=rtl] *,[dir=rtl] *:before,[dir=rtl] *:after{letter-spacing:normal!important}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.35}
[dir=rtl] .eyebrow{text-transform:none}

/* Header and navigation */
[dir=rtl] .brand{margin-right:0;margin-left:auto}
[dir=rtl] nav a.active:after{left:auto;right:0}
[dir=rtl] .lang-menu{inset-inline-end:0}
@media(max-width:800px){
  [dir=rtl] nav a.active:after{left:auto;right:12px}
  [dir=rtl] header>.button{margin-left:0;margin-right:auto}
  [dir=rtl] header>.lang+.button{margin-right:0}
}

/* Arrows that point up-right become up-left; carousel arrows swap sides */
[dir=rtl] .button>span,[dir=rtl] .card-arrow,[dir=rtl] .about-links a>span,[dir=rtl] .sitemap-grid a>span,[dir=rtl] .hero-arrow,[dir=rtl] .feature-arrow,[dir=rtl] .round{display:inline-block;transform:scaleX(-1)}
[dir=rtl] .card-arrow,[dir=rtl] .round{display:grid}
[dir=rtl] .hero-dots{direction:ltr}

/* Hero */
[dir=rtl] .hero-slider .hero-visual{left:0;right:auto}
[dir=rtl] .hero-slider .hero-visual>img{inset:auto auto 0 0;object-position:left bottom}
@media(max-width:800px){[dir=rtl] .hero-slider .hero-visual{left:-10%;right:auto}}
@media(max-width:600px){[dir=rtl] .hero-slider .hero-visual{left:-8%;right:auto}}

/* Cards, tags and badges */
[dir=rtl] .product-card .tag{left:auto;right:16px}
[dir=rtl] .detail-image>span{left:auto;right:23px}
[dir=rtl] .download-art>span{right:auto;left:18px}
[dir=rtl] .video-external{right:auto;left:14px}
[dir=rtl] .video-play span{margin-left:0;margin-right:5px}
[dir=rtl] .feature-arrow{right:auto;left:17px}
@media(max-width:600px){[dir=rtl] .feature-arrow{left:10px;right:auto}[dir=rtl] .feature-title{padding-right:0;padding-left:15px}}

/* Search box */
[dir=rtl] .search input{padding:13px 16px 13px 40px}
[dir=rtl] .search>span:last-child{right:auto;left:15px}

/* Quotes, notes and notices: the accent bar moves to the right edge */
[dir=rtl] .info-note,[dir=rtl] .reference-note,[dir=rtl] .halal-note,[dir=rtl] .form-status.visible,[dir=rtl] .flash{border-left:0;border-right:3px solid var(--gold)}
[dir=rtl] .halal-note{border-right-color:var(--navy)}
[dir=rtl] .form-status.error{border-right-color:#9b2c1d}
[dir=rtl] blockquote{border-left:0;border-right:3px solid var(--gold);padding:22px 30px 22px 0}

/* Tables, accordions, steps */
[dir=rtl] table,[dir=rtl] th,[dir=rtl] td,[dir=rtl] .variant-tabs button{text-align:right}
[dir=rtl] .plus{margin-left:0;margin-right:auto}
[dir=rtl] .faq-layout aside{padding-right:0;padding-left:35px}
@media(max-width:800px){[dir=rtl] .faq-layout aside{padding-left:0}}
[dir=rtl] .steps li{padding:0 45px 30px 0}
[dir=rtl] .steps li:before{left:auto;right:0}
@media(max-width:480px){[dir=rtl] details p{margin-left:15px;margin-right:25px}}

/* Form fields that hold Latin text stay left-to-right but are right-aligned */
[dir=rtl] input[type=email],[dir=rtl] input[type=tel],[dir=rtl] input[type=url],[dir=rtl] input[type=password]{direction:ltr;text-align:right}
[dir=rtl] ::placeholder{text-align:right}
[dir=rtl] select{background-position:left .75rem center}

/* WhatsApp pop-up */
[dir=rtl] .wa-close{right:auto;left:16px}
[dir=rtl] .wa-cta{text-align:right}
[dir=rtl] .wa-cta small{direction:ltr;text-align:right}

/* Listings */
[dir=rtl] .listing-main small,[dir=rtl] .event-body .meta{unicode-bidi:plaintext}