/* ============================================================
   POT — RTL layer for WHMCS "twenty-one" (Bootstrap 4.5, no native RTL)
   Loaded only for RTL languages via includes/hooks/pot_rtl_support.php
   Scoped to html[dir="rtl"] so LTR rendering is never affected.
   ============================================================ */

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

/* ---- Text alignment utilities (physical -> swapped) ---- */
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left  !important; }
@media (min-width:576px){html[dir="rtl"] .text-sm-left{text-align:right!important}html[dir="rtl"] .text-sm-right{text-align:left!important}}
@media (min-width:768px){html[dir="rtl"] .text-md-left{text-align:right!important}html[dir="rtl"] .text-md-right{text-align:left!important}}
@media (min-width:992px){html[dir="rtl"] .text-lg-left{text-align:right!important}html[dir="rtl"] .text-lg-right{text-align:left!important}}
@media (min-width:1200px){html[dir="rtl"] .text-xl-left{text-align:right!important}html[dir="rtl"] .text-xl-right{text-align:left!important}}

/* ---- Float utilities ---- */
html[dir="rtl"] .float-left,  html[dir="rtl"] .pull-left  { float: right !important; }
html[dir="rtl"] .float-right, html[dir="rtl"] .pull-right { float: left  !important; }
@media (min-width:576px){html[dir="rtl"] .float-sm-left{float:right!important}html[dir="rtl"] .float-sm-right{float:left!important}}
@media (min-width:768px){html[dir="rtl"] .float-md-left{float:right!important}html[dir="rtl"] .float-md-right{float:left!important}}
@media (min-width:992px){html[dir="rtl"] .float-lg-left{float:right!important}html[dir="rtl"] .float-lg-right{float:left!important}}
@media (min-width:1200px){html[dir="rtl"] .float-xl-left{float:right!important}html[dir="rtl"] .float-xl-right{float:left!important}}

/* ---- Auto margins (navbar push) ---- */
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }

/* ---- Horizontal margins: swap left <-> right (BS4 spacer scale) ---- */
html[dir="rtl"] .ml-1{margin-left:0!important;margin-right:.25rem!important}
html[dir="rtl"] .ml-2{margin-left:0!important;margin-right:.5rem!important}
html[dir="rtl"] .ml-3{margin-left:0!important;margin-right:1rem!important}
html[dir="rtl"] .ml-4{margin-left:0!important;margin-right:1.5rem!important}
html[dir="rtl"] .ml-5{margin-left:0!important;margin-right:3rem!important}
html[dir="rtl"] .mr-1{margin-right:0!important;margin-left:.25rem!important}
html[dir="rtl"] .mr-2{margin-right:0!important;margin-left:.5rem!important}
html[dir="rtl"] .mr-3{margin-right:0!important;margin-left:1rem!important}
html[dir="rtl"] .mr-4{margin-right:0!important;margin-left:1.5rem!important}
html[dir="rtl"] .mr-5{margin-right:0!important;margin-left:3rem!important}

/* ---- Horizontal paddings: swap ---- */
html[dir="rtl"] .pl-1{padding-left:0!important;padding-right:.25rem!important}
html[dir="rtl"] .pl-2{padding-left:0!important;padding-right:.5rem!important}
html[dir="rtl"] .pl-3{padding-left:0!important;padding-right:1rem!important}
html[dir="rtl"] .pl-4{padding-left:0!important;padding-right:1.5rem!important}
html[dir="rtl"] .pl-5{padding-left:0!important;padding-right:3rem!important}
html[dir="rtl"] .pr-1{padding-right:0!important;padding-left:.25rem!important}
html[dir="rtl"] .pr-2{padding-right:0!important;padding-left:.5rem!important}
html[dir="rtl"] .pr-3{padding-right:0!important;padding-left:1rem!important}
html[dir="rtl"] .pr-4{padding-right:0!important;padding-left:1.5rem!important}
html[dir="rtl"] .pr-5{padding-right:0!important;padding-left:3rem!important}

/* ---- Breadcrumb separators ---- */
html[dir="rtl"] .breadcrumb-item+.breadcrumb-item{padding-right:.5rem;padding-left:0}
html[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before{padding-right:0;padding-left:.5rem;float:right}

/* ---- Lists / inline ---- */
html[dir="rtl"] .list-inline-item:not(:last-child){margin-right:0;margin-left:.5rem}
html[dir="rtl"] .nav,html[dir="rtl"] .navbar-nav,html[dir="rtl"] .list-group{text-align:right;padding-right:0}

/* ---- Dropdowns ---- */
html[dir="rtl"] .dropdown-menu{right:0;left:auto;text-align:right}
html[dir="rtl"] .dropdown-menu-right{right:auto;left:0}
html[dir="rtl"] .dropdown-toggle::after{margin-right:.255em;margin-left:0}

/* ---- Custom controls (checkbox / radio / switch) ---- */
html[dir="rtl"] .custom-control{padding-right:1.5rem;padding-left:0}
html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after{right:-1.5rem;left:auto}
html[dir="rtl"] .custom-switch{padding-right:2.25rem;padding-left:0}
html[dir="rtl"] .custom-switch .custom-control-label::before,
html[dir="rtl"] .custom-switch .custom-control-label::after{right:-2.25rem;left:auto}

/* ---- Form check ---- */
html[dir="rtl"] .form-check{padding-right:1.25rem;padding-left:0}
html[dir="rtl"] .form-check-input{margin-right:-1.25rem;margin-left:0}

/* ---- Close button (modals / alerts) ---- */
html[dir="rtl"] .modal-header .close{margin:-1rem auto -1rem -1rem}
html[dir="rtl"] .alert-dismissible{padding-right:1.25rem;padding-left:3.8125rem}
html[dir="rtl"] .alert-dismissible .close{right:auto;left:0}

/* ---- Input groups ---- */
html[dir="rtl"] .input-group>.form-control:not(:last-child),
html[dir="rtl"] .input-group>.custom-select:not(:last-child){border-radius:0 .25rem .25rem 0}
html[dir="rtl"] .input-group>.form-control:not(:first-child),
html[dir="rtl"] .input-group>.custom-select:not(:first-child){border-radius:.25rem 0 0 .25rem}

/* ============================================================================
   POT PORTAL — RTL rules for the new cinematic components
   (the base file above handles Bootstrap 4; these handle our additions)
   ========================================================================== */

/* nav underline grows from the right in RTL */
html[dir="rtl"] .main-navbar-wrapper .navbar-nav > li > a::after { transform-origin: right; }

/* quick-action hero: arrow points left, badge flips, list accent flips */
html[dir="rtl"] .pot-action-go { transform: scaleX(-1); }
html[dir="rtl"] .pot-action:hover .pot-action-go { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .pot-action-badge { inset-inline-end: auto; inset-inline-start: -6px; }
html[dir="rtl"] .list-group-item.active { border-inline-start: 0; border-inline-end: 3px solid var(--pot-orange); }

/* gradient direction mirrored so headings/buttons read naturally in RTL */
html[dir="rtl"] .sub-heading span.primary-bg-color,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-success,
html[dir="rtl"] .btn-order-now,
html[dir="rtl"] .btn-checkout { background: linear-gradient(240deg, #d68f12 0%, #f0aa30 50%, #ffce6b 100%) !important; }

/* checkout progress bar flows right -> left */
html[dir="rtl"] .pot-steps { flex-direction: row-reverse; }
html[dir="rtl"] .pot-steps li:not(:last-child)::after { inset-inline-start: auto; inset-inline-end: 50%; }

/* ---- RTL for the unified chrome (header/footer/dropdowns) -------------- */
html[dir="rtl"] .pot-subnav { left: auto; right: 0; }
html[dir="rtl"] .pot-subnav-right { right: auto; left: 0; }
html[dir="rtl"] .pot-tools { margin-inline-start: auto; }
html[dir="rtl"] .pot-search:focus-within .pot-search-input,
html[dir="rtl"] .pot-search:hover .pot-search-input { padding-right: 0; padding-left: 12px; }
html[dir="rtl"] #cartItemCount.pot-cart-badge { right: auto; left: -5px; }
html[dir="rtl"] .pot-context-bar .navbar-nav { flex-direction: row-reverse; justify-content: flex-end; }