/* French / LTR layout flips.
   The Arabic original uses physical left/right offsets, so the French direction
   needs the mirror of that handful of rules. Loaded last, only for dir=ltr. */

html[dir=ltr] .notification-panel,html[dir=ltr] .notification-item,html[dir=ltr] .auth-copy,
html[dir=ltr] .duration-heading,html[dir=ltr] .detail-accordion,html[dir=ltr] .prod-body,
html[dir=ltr] .prod .prod-body h3,html[dir=ltr] .offer-detail h2,
html[dir=ltr] .field-panel .field-input input{text-align:left}
html[dir=ltr] .customer-bottom-nav{direction:ltr}
html[dir=ltr] .customer-page .app-header{flex-direction:row}
html[dir=ltr] .customer-page .head-actions{flex-direction:row}
html[dir=ltr] .page-title>a{left:0;right:auto}
/* The title row reserves a 44px icon button; a French text link needs its own box. */
html[dir=ltr] .page-title>a.title-link{width:auto;height:auto;min-height:0;padding:5px 10px;font-size:12px;font-weight:700;white-space:nowrap;border-radius:12px;background:#f5f6fc;top:8px}

/* The storefront composition was drawn right-to-left with row-reverse rows and a
   fixed aspect ratio sized for short Arabic copy. In French the copy is longer and
   reads left-to-right, so the rows run the other way, the blocks grow with their
   text, and the labels wrap instead of running past their tile. */
html[dir=ltr] .hero{flex-direction:row;aspect-ratio:auto;padding:12px 0 12px 12px;min-height:0;max-height:none}
html[dir=ltr] .hero-copy{flex:0 0 52%;max-width:52%;text-align:left;padding:4px 4px 4px 10px}
html[dir=ltr] .hero-copy h1{font-size:clamp(20px,5.2vw,36px);margin:0 0 7px}
html[dir=ltr] .hero-copy p{font-size:clamp(10px,2.4vw,15px);margin:0 0 8px}
html[dir=ltr] .hero-art{flex:0 0 48%;width:48%;height:auto;align-self:stretch;overflow:hidden;border-radius:15px}
html[dir=ltr] .hero-art img{height:100%;object-position:center}
html[dir=ltr] .promo-banner{flex-direction:row;aspect-ratio:auto;min-height:96px}
html[dir=ltr] .promo-banner>div{width:54%;text-align:left;padding:10px 12px}
html[dir=ltr] .promo-banner h2{font-size:clamp(18px,4.6vw,30px)}
html[dir=ltr] .promo-banner p{font-size:clamp(11px,2.6vw,17px)}
html[dir=ltr] .promo-banner img{width:46%;height:auto;align-self:stretch}
html[dir=ltr] .cat-grid:not(.wide),html[dir=ltr] .cat-scroll{flex-direction:row}
html[dir=ltr] .cat-grid:not(.wide) .cat{white-space:normal;height:auto;min-height:58px;padding:6px 3px 5px;gap:4px}
html[dir=ltr] .cat-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:anywhere;width:100%}
html[dir=ltr] .delivery-timeline{padding-right:0;padding-left:43px}
html[dir=ltr] .delivery-timeline:before{right:auto;left:17px}
html[dir=ltr] .timeline-dot{right:auto;left:-39px}
html[dir=ltr] .order-timeline{padding-right:0;padding-left:20px}
html[dir=ltr] .order-timeline>div{border-right:0;border-left:2px solid #d9dfea}
html[dir=ltr] .order-timeline>div>span{right:auto;left:-16px}
html[dir=ltr] .support-event{border-right:0;border-left:2px solid #dde4fb;padding:0 0 22px 18px;margin-right:0;margin-left:10px}
html[dir=ltr] .support-event:before{right:auto;left:-7px}
html[dir=ltr] .activation-steps{padding-right:0;padding-left:25px}
html[dir=ltr] label,html[dir=ltr] th{text-align:left}
html[dir=ltr] .preview-banner a{margin:0 3px}
html[dir=ltr] .admin-page{padding-right:0;padding-left:220px}
html[dir=ltr] .admin-page .preview-banner{margin-right:0;margin-left:-220px}
html[dir=ltr] .admin-sidebar{right:auto;left:0;border-left:0;border-right:1px solid #edf0f7}
html[dir=ltr] .admin-sidebar .selected{border-right:0;border-left:3px solid #6b4eff;background:linear-gradient(270deg,#f5edff,#eef0ff)}
html[dir=ltr] .header-search input:not([type]){padding-right:12px;padding-left:35px}
html[dir=ltr] .header-search .icon{right:auto;left:10px}
html[dir=ltr] .password-field .icon-button{right:auto;left:6px}
html[dir=ltr] .service-name{text-align:left}
html[dir=ltr] .product-header>div{text-align:left}
html[dir=ltr] .summary-icon{margin-left:0}
html[dir=ltr] .wallet-row .icon,html[dir=ltr] .message-row .icon{margin-right:0;margin-left:0}

@media(max-width:900px){
  html[dir=ltr] .admin-page{padding-left:170px}
  html[dir=ltr] .admin-page .preview-banner{margin-left:-170px}
}
@media(max-width:600px){
  html[dir=ltr] .admin-page{padding-left:0}
  html[dir=ltr] .admin-page .preview-banner{margin-left:0}
  html[dir=ltr] .admin-sidebar>a:not(.brand){padding:9px}
  html[dir=ltr] .admin-sidebar>.brand{margin:0 0 0 10px}
}