/* ==========================================================================
   SaudiaHost WHMCS Complete RTL Stylesheet (Bootstrap 4 + Twenty-One RTL Fix)
   Zero Horizontal Overflow & Perfect Post-Login Header Alignment
   ========================================================================== */

html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Navbar & Dropdowns RTL */
html[dir="rtl"] .navbar-nav {
    padding-right: 0;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
    right: 0;
    left: auto;
}

/* Important: Secondary Nav / RightDrop items sit on the far LEFT in RTL,
   so their dropdown MUST open towards the right (anchored to left: 0)
   to prevent overflowing off the left edge of the screen! */
html[dir="rtl"] .dropdown-menu-right,
html[dir="rtl"] .sh-secondary-nav .dropdown-menu,
html[dir="rtl"] .collapsable-dropdown .dropdown-menu,
html[dir="rtl"] .sh-dropdown-end {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .dropdown-toggle::after {
    margin-right: 0.35em;
    margin-left: 0;
}

/* Bootstrap 4 Margin & Padding Utilities RTL Adaptation */
html[dir="rtl"] .mr-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .mr-1, html[dir="rtl"] .mr-2, html[dir="rtl"] .mr-3 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-1, html[dir="rtl"] .ml-2, html[dir="rtl"] .ml-3 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .float-right {
    float: left !important;
}

html[dir="rtl"] .float-left {
    float: right !important;
}

html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

/* ==========================================================================
   Input Controls, Text Direction & Curvature (Border-Radius) Compatibility in RTL
   ========================================================================== */

/* 1. Default Direction & Text Alignment for RTL Form Controls */
html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .form-control,
html[dir="rtl"] .custom-select {
    direction: rtl !important;
    text-align: right !important;
    border-radius: var(--sh-radius-sm, 12px);
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder,
html[dir="rtl"] .form-control::placeholder {
    direction: rtl !important;
    text-align: right !important;
}

/* 2. Technical LTR Fields (Emails, Phones, Passwords, Domains, Nameservers, IPs, Numbers) */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[name="domain"],
html[dir="rtl"] input#inputDomain,
html[dir="rtl"] input#inputEmail,
html[dir="rtl"] input#inputPhone,
html[dir="rtl"] input#inputPassword,
html[dir="rtl"] input#inputNewPassword1,
html[dir="rtl"] input#inputNewPassword2,
html[dir="rtl"] input[name="nameserver1"],
html[dir="rtl"] input[name="nameserver2"],
html[dir="rtl"] input[name="nameserver3"],
html[dir="rtl"] input[name="nameserver4"],
html[dir="rtl"] input[name="nameserver5"],
html[dir="rtl"] input[name="sld"],
html[dir="rtl"] input[name="tld"],
html[dir="rtl"] .sh-domain-input,
html[dir="rtl"] .intl-tel-input input {
    direction: ltr !important;
    text-align: left !important;
}

/* Keep Arabic placeholders aligned right even inside LTR technical fields */
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[name="domain"]::placeholder,
html[dir="rtl"] .sh-domain-input::placeholder {
    direction: rtl !important;
    text-align: right !important;
}

/* 3. Dropdown Select Elements in RTL (Arrow & Padding on the Left) */
html[dir="rtl"] select.form-control,
html[dir="rtl"] .custom-select {
    background-position: left 0.85rem center !important;
    padding-left: 2.2rem !important;
    padding-right: 0.85rem !important;
    direction: rtl !important;
    text-align: right !important;
    border-radius: var(--sh-radius-sm, 12px) !important;
}

/* 4. Input Groups RTL (Complete Border-Radius & Margin Mechanics) */
/* Reset LTR overlapping margins to RTL */
html[dir="rtl"] .input-group > .form-control + .form-control,
html[dir="rtl"] .input-group > .form-control + .custom-select,
html[dir="rtl"] .input-group > .custom-select + .form-control,
html[dir="rtl"] .input-group > .custom-select + .custom-select,
html[dir="rtl"] .input-group > .input-group-append > .btn,
html[dir="rtl"] .input-group > .input-group-append > .input-group-text,
html[dir="rtl"] .input-group > .input-group-prepend > .btn + .btn,
html[dir="rtl"] .input-group > .input-group-append > .btn + .btn {
    margin-right: -1px !important;
    margin-left: 0 !important;
}

/* Prepend Elements: Positioned on the RIGHT in RTL (Curved Right, Flat Left) */
html[dir="rtl"] .input-group > .input-group-prepend > .btn,
html[dir="rtl"] .input-group > .input-group-prepend > .input-group-text,
html[dir="rtl"] .input-group > .input-group-prepend > .input-group-btn > .btn,
html[dir="rtl"] .input-group > .input-group-prepend:first-child > .btn:first-child,
html[dir="rtl"] .input-group > .input-group-prepend:first-child > .input-group-text:first-child {
    border-top-right-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-right-radius: var(--sh-radius-sm, 12px) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Append Elements: Positioned on the LEFT in RTL (Curved Left, Flat Right) */
html[dir="rtl"] .input-group > .input-group-append > .btn,
html[dir="rtl"] .input-group > .input-group-append > .input-group-text,
html[dir="rtl"] .input-group > .input-group-append > .input-group-btn > .btn,
html[dir="rtl"] .input-group > .input-group-append:last-child > .btn:last-child,
html[dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:last-child {
    border-top-left-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-left-radius: var(--sh-radius-sm, 12px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Form Controls with Append on Left: Curved Right (outer), Flat Left (connecting) */
html[dir="rtl"] .input-group > .form-control:not(:last-child),
html[dir="rtl"] .input-group > .custom-select:not(:last-child) {
    border-top-right-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-right-radius: var(--sh-radius-sm, 12px) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Form Controls with Prepend on Right: Curved Left (outer), Flat Right (connecting) */
html[dir="rtl"] .input-group > .form-control:not(:first-child),
html[dir="rtl"] .input-group > .custom-select:not(:first-child) {
    border-top-left-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-left-radius: var(--sh-radius-sm, 12px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Form Controls in Middle (Between Prepend on Right and Append on Left): All Corners Square */
html[dir="rtl"] .input-group > .form-control:not(:first-child):not(:last-child),
html[dir="rtl"] .input-group > .custom-select:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* Custom File Input in RTL */
html[dir="rtl"] .custom-file-label {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 14px !important;
    padding-left: 95px !important;
    border-radius: var(--sh-radius-sm, 12px) !important;
    height: 50px !important;
    line-height: 34px !important;
    border: 1.5px solid var(--sh-border, #dce8d6) !important;
}

html[dir="rtl"] .custom-file-label::after {
    right: auto !important;
    left: 0 !important;
    border-left: none !important;
    border-right: 1.5px solid var(--sh-border, #dce8d6) !important;
    border-top-left-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-left-radius: var(--sh-radius-sm, 12px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    content: "استعراض" !important;
    height: 47px !important;
    line-height: 34px !important;
    background-color: var(--sh-bg-tint, #f5fcf0) !important;
    color: var(--primary-color, #136944) !important;
    font-weight: 600 !important;
}

/* Custom File in Input Group RTL */
html[dir="rtl"] .input-group > .custom-file:not(:last-child) .custom-file-label {
    border-top-right-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-right-radius: var(--sh-radius-sm, 12px) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
html[dir="rtl"] .input-group > .custom-file:not(:last-child) .custom-file-label::after {
    border-radius: 0 !important;
}
html[dir="rtl"] .input-group > .custom-file:not(:first-child) .custom-file-label {
    border-top-left-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-left-radius: var(--sh-radius-sm, 12px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* DataTables Filter Input in RTL */
html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter label input.form-control,
html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter input {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 38px !important;
    padding-left: 14px !important;
    background-position: right 10px center !important;
    border-radius: 50px !important;
}

/* Breadcrumbs RTL (Modern Chevron Separator) */
html[dir="rtl"] .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-right: 0.55rem;
    padding-left: 0;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: none;
    padding-left: 0.55rem;
    padding-right: 0;
    content: "\f104";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
}

/* Lists & Sidebars RTL */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 0;
}

html[dir="rtl"] .list-group {
    padding-right: 0;
}

html[dir="rtl"] .card-sidebar .card-minimise {
    float: left !important;
}

html[dir="rtl"] .sidebar-menu-item-icon-wrapper {
    margin-left: 10px;
    margin-right: 0;
}

html[dir="rtl"] .sidebar-menu-item-badge {
    margin-right: auto;
    margin-left: 0;
}

/* DataTables RTL Fixes */
html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

html[dir="rtl"] div.dataTables_wrapper div.dataTables_length {
    text-align: right;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

/* Modals RTL */
html[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

html[dir="rtl"] .modal-footer > :not(:first-child) {
    margin-right: .25rem;
    margin-left: 0;
}

/* Registration Form Field Icons RTL */
html[dir="rtl"] .prepend-icon {
    position: relative;
}

html[dir="rtl"] .prepend-icon .field-icon {
    right: 0 !important;
    left: auto !important;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-text-muted, #5c7065);
    pointer-events: none;
    z-index: 5;
}

html[dir="rtl"] .prepend-icon .field,
html[dir="rtl"] .prepend-icon .form-control {
    padding-right: 46px !important;
    padding-left: 14px !important;
    border-radius: var(--sh-radius-sm, 12px) !important;
}

/* International Telephone Input (.intl-tel-input) RTL Compatibility */
html[dir="rtl"] .intl-tel-input {
    width: 100% !important;
    display: block !important;
    direction: ltr !important;
    text-align: left !important;
}

html[dir="rtl"] .intl-tel-input .flag-container {
    left: 0 !important;
    right: auto !important;
    direction: ltr !important;
}

html[dir="rtl"] .intl-tel-input .selected-flag {
    direction: ltr !important;
    text-align: left !important;
    border-top-left-radius: var(--sh-radius-sm, 12px) !important;
    border-bottom-left-radius: var(--sh-radius-sm, 12px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

html[dir="rtl"] .intl-tel-input .selected-flag .iti-flag {
    left: 10px !important;
    right: auto !important;
}

html[dir="rtl"] .intl-tel-input .selected-flag .iti-arrow {
    right: 6px !important;
    left: auto !important;
}

html[dir="rtl"] .intl-tel-input input,
html[dir="rtl"] .intl-tel-input input.field,
html[dir="rtl"] .intl-tel-input input.form-control {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 98px !important;
    padding-right: 16px !important;
    border-radius: var(--sh-radius-sm, 12px) !important;
}

html[dir="rtl"] .intl-tel-input .country-list {
    direction: ltr !important;
    text-align: left !important;
    left: 0 !important;
    right: auto !important;
}

/* Directional Arrows in RTL */
html[dir="rtl"] .fa-arrow-right::before {
    content: "\f060";
}

/* Prevent WHMCS / Google reCAPTCHA Overlay Badges from Floating Over Tables */
.sh-captcha-markup-hidden,
.captcha-overlay-badge,
.captcha-overlay-badge-hidden,
.captcha-overlay-popup,
[class*="captcha-overlay"],
img[alt*="reCAPTCHA"],
img[alt*="recaptcha"],
img[src*="recaptcha"],
.grecaptcha-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}