/* Hebrew RTL overrides for the Six client-area theme.
   Mirrors nbvk/templates/blend/css/Hebrew.css on the admin side.
   Install path: templates/six/css/Hebrew.css */

body { direction: rtl !important; text-align: right; }

/* Bootstrap 3 pull helpers are LTR; flip them */
.pull-left  { float: right !important; }
.pull-right { float: left  !important; }
@media (min-width: 992px) {
    .pull-md-left  { float: right !important; }
    .pull-md-right { float: left  !important; }
}

/* Top header bar */
#header .top-nav { float: left; }
#header .top-nav li { float: right; margin-left: 15px; margin-right: 0; }
#header .logo { float: right; }
#header .top-nav .primary-action,
ul.top-nav > li.primary-action {
    padding-left: 0;
    padding-right: 15px;
    margin-left: 0;
    margin-right: 5px;
    border-left: 0;
    border-right: solid 1px #ddd;
}

/* Main navigation */
#main-menu .navbar-nav { float: right; }
#main-menu .navbar-nav.navbar-right { float: left !important; }
.navbar-nav > li { float: right !important; }            /* render items right-to-left in source order */
.navbar-nav.navbar-right > li { float: right !important; }
.navbar-nav.navbar-right { margin-right: 0; margin-left: -15px; }
#main-menu .navbar-toggle { float: left; margin-right: 0; margin-left: 15px; }
#main-menu .dropdown-menu { left: auto; right: 0; text-align: right; }
#main-menu .navbar-nav > li > .dropdown-menu { right: 0; left: auto; }
.navbar-nav .dropdown-menu { text-align: right; right: 0; left: auto; }
.navbar-nav.navbar-right .dropdown-menu { right: auto; left: 0; }
#main-menu .caret { margin-right: 4px; margin-left: 0; }
.dropdown-toggle .caret { margin-right: 4px; margin-left: 0; }

/* Sidebar and main content swap */
.sidebar { text-align: right; }
.sidebar .list-group-item { text-align: right; position: relative; padding-left: 30px; padding-right: 15px; }
.sidebar .list-group-item .badge { float: left; }
.sidebar .list-group-item .sidebar-menu-item-icon { float: left; margin-top: 3px; margin-left: 0; margin-right: 6px; }
.sidebar .panel-heading .panel-title > i:first-child { float: right; margin-left: 6px; margin-right: 0; }
.sidebar .panel-heading .panel-minimise.pull-right { float: left !important; }
.sidebar-menu-item-wrapper { text-align: right; }

/* Page header / breadcrumbs */
.breadcrumb { padding-right: 15px; padding-left: 0; }
.breadcrumb > li + li:before { padding-right: 5px; padding-left: 5px; }

/* Bootstrap 3 grid — flip column floats so rows lay out right-to-left */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: right; }

/* Bootstrap 3 grid offsets — push from the right instead of the left */
.col-xs-offset-1  { margin-right: 8.33333333%;  margin-left: 0; }
.col-xs-offset-2  { margin-right: 16.66666667%; margin-left: 0; }
.col-xs-offset-3  { margin-right: 25%;          margin-left: 0; }
.col-xs-offset-4  { margin-right: 33.33333333%; margin-left: 0; }
.col-xs-offset-5  { margin-right: 41.66666667%; margin-left: 0; }
.col-xs-offset-6  { margin-right: 50%;          margin-left: 0; }
@media (min-width: 768px) {
    .col-sm-offset-1  { margin-right: 8.33333333%;  margin-left: 0; }
    .col-sm-offset-2  { margin-right: 16.66666667%; margin-left: 0; }
    .col-sm-offset-3  { margin-right: 25%;          margin-left: 0; }
    .col-sm-offset-4  { margin-right: 33.33333333%; margin-left: 0; }
    .col-sm-offset-5  { margin-right: 41.66666667%; margin-left: 0; }
    .col-sm-offset-6  { margin-right: 50%;          margin-left: 0; }
}
@media (min-width: 992px) {
    .col-md-offset-1  { margin-right: 8.33333333%;  margin-left: 0; }
    .col-md-offset-2  { margin-right: 16.66666667%; margin-left: 0; }
    .col-md-offset-3  { margin-right: 25%;          margin-left: 0; }
    .col-md-offset-4  { margin-right: 33.33333333%; margin-left: 0; }
    .col-md-offset-5  { margin-right: 41.66666667%; margin-left: 0; }
    .col-md-offset-6  { margin-right: 50%;          margin-left: 0; }
}

/* Forms */
.form-horizontal .control-label { text-align: left; }
.form-group label,
.control-label { text-align: right; }
.form-control { text-align: right; }
.form-control[type="url"],
.form-control[type="tel"],
.form-control[type="number"] { text-align: left; direction: ltr; }
/* The input itself is forced LTR above so typed digits/URLs render left-to-right,
   but the *placeholder* in Hebrew is Hebrew prose (e.g. "מספר טלפון") and should
   read right-to-left aligned to the right edge of the field. Override only the
   ::placeholder pseudo-element so typed values stay LTR. */
.form-control[type="url"]::placeholder,
.form-control[type="tel"]::placeholder,
.form-control[type="number"]::placeholder { direction: rtl; text-align: right; unicode-bidi: plaintext; }
select.form-control { background-position: left 0.5rem center; padding-right: 12px; padding-left: 24px; }
textarea.form-control { text-align: right; direction: rtl; }
.help-block { text-align: right; }
.checkbox input[type="checkbox"],
.radio input[type="radio"] { margin-right: -20px; margin-left: 0; }
.checkbox-inline, .radio-inline { padding-right: 20px; padding-left: 0; }
.checkbox-inline input, .radio-inline input { margin-right: -20px; margin-left: 0; }
.checkbox label, .radio label { padding-right: 20px; padding-left: 0; }
.input-group-addon:first-child { border-right: 1px solid #ccc; border-left: 0; border-radius: 0 4px 4px 0; }
.input-group-addon:last-child  { border-left: 1px solid #ccc;  border-right: 0; border-radius: 4px 0 0 4px; }
.input-group .form-control:first-child { border-radius: 0 4px 4px 0; }
.input-group .form-control:last-child  { border-radius: 4px 0 0 4px; }

/* File inputs — keep filename text LTR-readable but anchor on the right */
input[type="file"].form-control { direction: ltr; text-align: left; }
#fileUploadsContainer .input-group .btn { margin-right: -1px; margin-left: 0; }

/* Required-field asterisk and inline hint */
.field-required, label .required { margin-right: 3px; margin-left: 0; }

/* Markdown editor (ticket message body) */
.editor-toolbar { direction: ltr; }
.editor-toolbar a { float: left; }
.editor-toolbar .separator { border-right: 1px solid #ddd; border-left: 0; }
.CodeMirror, .editor-preview, .editor-preview-side { direction: rtl; text-align: right; }
.CodeMirror pre, .CodeMirror-code pre { direction: rtl; text-align: right; }
.editor-statusbar { text-align: left; }

/* Buttons with icons */
.btn .fa, .btn .fas, .btn .far, .btn .fal, .btn .fab { margin-left: 4px; margin-right: 0; }

/* Tables — keep numeric/code columns LTR */
table .text-right { text-align: left !important; }
table .text-left  { text-align: right !important; }
.invoice-items .price, .invoice-items .total,
td.amount, td.price, td.total, td.duedate, td.datepaid { direction: ltr; text-align: left; }

/* Domain checker and cart inputs that must stay LTR (URLs, prices, CC numbers).
   input[type="email"] is intentionally omitted so the login/register email
   field follows the form's RTL flow (Hebrew placeholder aligns to the right). */
input[type="url"], input[type="tel"],
input[name="domain"], input[name*="card"], input[name*="cvv"],
#frmDomainHomepage input[type="text"],
.domain-checker input[type="text"] { direction: ltr; text-align: left; }

/* Tabs */
.nav-tabs > li { float: right; }
.nav-pills  > li { float: right; }

/* Panels */
.panel-heading { direction: rtl; text-align: right; }
.panel-heading .pull-right { float: left !important; }
.panel-title { text-align: right; }

/* Alerts close button */
.alert .close { float: left; }

/* Dropdowns */
.dropdown-menu { text-align: right; }
.caret { margin-left: 0; }

/* Footer */
#footer .pull-right { float: left !important; }
#footer .pull-left  { float: right !important; }

/* Keep code, monospaced and bidi-sensitive content LTR */
code, pre, kbd, samp, .text-monospace,
.ltr, .force-ltr { direction: ltr; text-align: left; unicode-bidi: embed; }

/* Notifications popover */
.client-alerts li a { text-align: right; }
.client-alerts li a .fas { margin-left: 8px; margin-right: 0; float: right; }
.client-alerts .message { margin-right: 28px; margin-left: 0; }

/* Prepend-icon inputs (cart promo code, checkout fields, client registration, etc.).
   The base CSS positions .field-icon absolutely with no left/right, which in RTL
   lands the icon on the right edge — directly under the Hebrew placeholder text.
   The input already has padding-left: 36px, so pinning the icon to the left
   drops it into that gap cleanly. */
#order-standard_cart .prepend-icon .field-icon,
#registration .prepend-icon .field-icon { left: 0; right: auto; }

/* intl-tel-input v12 widget — RTL tweaks.
   Keep the country flag/dial-code on the LEFT side of the phone input (matching
   the LTR layout); the phone input is already forced LTR by the input[type=tel]
   rule above, so the widget reads naturally with the dial code as a left-side
   prefix. Inside the flag/code area itself we lay things out so the dial code
   sits to the LEFT and the flag to the RIGHT (Hebrew-friendly reading order:
   "+972  IL ▼"). Below we only adjust what's specific to the Hebrew context. */

/* Force the selected-flag area itself to LTR. The library positions .iti-flag
   absolutely with no left/right, so its static position decides which edge it
   lands on; under RTL the static position flips to the right edge while
   .selected-dial-code's padding-left still reserves space on the physical left,
   leaving the flag painted on top of the dial-code text. Restoring LTR
   direction here puts the absolute positioning, table-cell text alignment, and
   the arrow's right:6px back on the coordinate system the library expects. */
.intl-tel-input .selected-flag { direction: ltr; }

/* Visually arrange the selected-flag contents left-to-right as:
       [ ▼  🇮🇱  +972 ] | input
   Arrow at the leftmost edge, flag just to its right, dial code on the right
   (sitting adjacent to the phone-number input so the code + digits read as a
   single number for the RTL user). All three are absolutely/padding-positioned
   inside .selected-flag which is direction:ltr (above), so these offsets use
   LTR coordinates regardless of the page's RTL direction. */
.intl-tel-input .selected-flag .iti-arrow { left: 6px; right: auto; }
.intl-tel-input .selected-flag .iti-flag { left: 22px; right: auto; }
.intl-tel-input.separate-dial-code .selected-dial-code {
    padding-left: 44px;
    padding-right: 8px; }

/* Country dropdown — keep rows LTR (flag → country name → dial code) so the
   flag always anchors to the left edge of each row, matching the selected-flag
   area above. The library's base CSS already gives .flag-box and .country-name
   `margin-right: 6px` to space them from the next item, which is what we want
   in LTR — so we only need to force direction and text-alignment back to LTR
   here (the parent <body> is RTL, which would otherwise reverse the row).
   Bump z-index well above the default 2 so the open dropdown paints on top of
   the form fields below it (Bootstrap 3 columns are position: relative and
   otherwise paint over the dropdown in source order). */
.intl-tel-input .country-list {
    direction: ltr;
    text-align: left;
    z-index: 1060; }

/* While the country dropdown is open, lift the whole intl-tel-input wrapper
   above sibling form rows so the dropdown's z-index isn't trapped inside a
   lower stacking context. The library toggles .hide on .country-list to
   open/close the menu; :has() lets us scope this purely to the open state. */
.intl-tel-input:has(.country-list:not(.hide)) { z-index: 1060; }

/* When intl-tel-input wraps the input, the country flag is already the
   visual field-indicator — hide the duplicate .prepend-icon phone icon so
   the two don't compete for the same edge of the field. */
.prepend-icon .field-icon:has(+ .intl-tel-input) { display: none; }