/* ============================================================
   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}

/* ---- Icon fields (register/login/checkout) ----
   The .field-icon label flips to the correct side in RTL, but the input keeps
   its LTR padding (prepend = padding-left:36px), so right-aligned text runs
   straight into the icon. Mirror the input padding to the text side. */
html[dir="rtl"] .form-group.prepend-icon .form-control,
html[dir="rtl"] .form-group.prepend-icon .field{padding-right:36px!important;padding-left:12px!important}
html[dir="rtl"] .form-group.append-icon .form-control,
html[dir="rtl"] .form-group.append-icon .field{padding-left:36px!important;padding-right:12px!important}
/* phone uses intl-tel-input (separate-dial-code): its .field-icon is display:none
   and the only chrome is the 88px dial-code/flag box pinned LEFT. The generic
   icon rule above starves it of left room -> the flag overlaps. Give the flag its
   clearance and keep the number LTR (phone numbers read left-to-right). */
html[dir="rtl"] .form-group.prepend-icon .intl-tel-input .form-control{direction:ltr!important;text-align:left!important;padding-left:90px!important;padding-right:12px!important}
/* the selected-flag widget (flag + +dialcode + arrow) is built for LTR; the RTL page
   gives it direction:rtl which scrambles flag/code/arrow order. Force it LTR. */
html[dir="rtl"] .intl-tel-input .flag-container,
html[dir="rtl"] .intl-tel-input .selected-flag,
html[dir="rtl"] .intl-tel-input .country-list{direction:ltr!important;text-align:left!important}

/* Terms-of-Service card: it's designed with symmetric padding:16px 24px, but the
   global .form-check RTL rule (above) zeroes its left padding -> no breathing room
   on the left. Restore the symmetric padding for the ToS card specifically. */
html[dir="rtl"] .form-check:has(input.accepttos){padding-left:24px!important;padding-right:24px!important}

/* ---- 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; }
/* the bar already inherits direction:rtl, so a plain row flows items right-to-left
   (الرئيسية rightmost). row-reverse here double-reversed it back to LTR order. */
html[dir="rtl"] .pot-context-bar .navbar-nav { flex-direction: row; justify-content: flex-start; }

/* ---- dashboard stat tiles ---------------------------------------------- */
/* parent theme pins the tile icon absolutely top-RIGHT (.tiles .tile i{right:20px}).
   In RTL the stat number + title align right and land underneath it -> overlap.
   Mirror the icon to the left edge so number/title (right) and icon (left) sit apart. */
html[dir="rtl"] .tiles .tile i,
html[dir="rtl"] .tile > i {
    right: auto !important;
    left: 20px !important;
}