/* =====================================================================
   HORANOS - ARABISCH (RTL)
   ---------------------------------------------------------------------
   Wird nur bei Arabisch geladen (header.tpl, nach allen anderen
   Stylesheets).

   Warum eine eigene Datei statt dir="rtl" am html-Tag
     header.tpl setzt bei Arabisch nur lang="ar". Kopfzeile und Footer
     sind von Hand gespiegelt (custom.css [10.x], footer.tpl) und wuerden
     mit dir="rtl" doppelt gedreht. Deshalb dreht diese Datei die
     Richtung nur fuer den Seiteninhalt (#main-body und die Hinweisleisten
     darueber) und korrigiert danach alles, was mit links/rechts statt
     mit Anfang/Ende gebaut ist.

   Ebene
     Alle Regeln liegen in @layer hz-rtl und tragen !important. tokens.css
     nennt hz-rtl als erste Ebene; bei !important gewinnt damit diese
     Datei gegen components.css (hz-system), mobile-nav.css (hz-drawer)
     und jede Regel ohne Ebene. Regeln ohne !important wuerden hier gegen
     alles verlieren - also immer mit.

     Folge fuer diese Datei selbst: Innerhalb der Ebene zaehlen wie sonst
     Spezifitaet und Reihenfolge. Allgemeine Regeln stehen vorn, besondere
     Faelle weiter hinten.

   Was bewusst LTR bleibt
     Kundenstimmen (englischer Text, .pro-testimonial-card), Telefonfeld
     mit Laendervorwahl, der Ein/Aus-Schalter und Felder fuer E-Mail,
     Passwort, Domain, Nameserver, Codes - dort steht das Feld gespiegelt,
     der Text darin laeuft von links nach rechts.

   Pruefung
     .playwright-mcp/rtl/harness.js misst jede Seite zweimal (diese Datei
     aus/an) und meldet Elemente, die nicht gespiegelt landen.
   ===================================================================== */

@layer hz-rtl {

/* ---------------------------------------------------------------------
   1. Grundrichtung und Grundausrichtung
   Bootstrap setzt body { text-align: left }. Ohne das "start" hier
   erbt jeder Text im Inhalt die linke Kante, obwohl er RTL laeuft.
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal),
html[lang="ar"] .verification-banner,
html[lang="ar"] .network-issue-alert {
    direction: rtl !important;
    text-align: start !important;
}

/* ---------------------------------------------------------------------
   2. Bootstrap-Hilfsklassen mit fester Seite
   Bootstrap 4 (theme.min.css) und das Bootstrap 3 der Bestellvorlage
   (all.min.css) kennen nur links/rechts. Im RTL-Inhalt tauschen.
   Die Breakpoint-Varianten stehen nach den einfachen, damit sie ab
   ihrer Breite gewinnen - wie in Bootstrap selbst.
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) :is(.float-right, .pull-right) { float: left !important; }
html[lang="ar"] :is(#main-body, .modal) :is(.float-left, .pull-left) { float: right !important; }
html[lang="ar"] :is(#main-body, .modal) .text-left { text-align: right !important; }
html[lang="ar"] :is(#main-body, .modal) .text-right { text-align: left !important; }

html[lang="ar"] :is(#main-body, .modal) .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[lang="ar"] :is(#main-body, .modal) .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[lang="ar"] :is(#main-body, .modal) .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[lang="ar"] :is(#main-body, .modal) .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[lang="ar"] :is(#main-body, .modal) .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[lang="ar"] :is(#main-body, .modal) .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[lang="ar"] :is(#main-body, .modal) .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[lang="ar"] :is(#main-body, .modal) .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[lang="ar"] :is(#main-body, .modal) .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[lang="ar"] :is(#main-body, .modal) .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[lang="ar"] :is(#main-body, .modal) .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[lang="ar"] :is(#main-body, .modal) .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }

html[lang="ar"] :is(#main-body, .modal) .offset-1 { margin-left: 0 !important; margin-right: 8.333333% !important; }
html[lang="ar"] :is(#main-body, .modal) .offset-2 { margin-left: 0 !important; margin-right: 16.666667% !important; }
html[lang="ar"] :is(#main-body, .modal) .offset-3 { margin-left: 0 !important; margin-right: 25% !important; }

@media (min-width: 576px) {
    html[lang="ar"] :is(#main-body, .modal) .float-sm-right { float: left !important; }
    html[lang="ar"] :is(#main-body, .modal) .text-sm-left { text-align: right !important; }
    html[lang="ar"] :is(#main-body, .modal) .text-sm-right { text-align: left !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-sm-1 { margin-left: 0 !important; margin-right: 8.333333% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-sm-2 { margin-left: 0 !important; margin-right: 16.666667% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-sm-3 { margin-left: 0 !important; margin-right: 25% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-sm-4 { margin-left: 0 !important; margin-right: 33.333333% !important; }
}

@media (min-width: 768px) {
    html[lang="ar"] :is(#main-body, .modal) .float-md-right { float: left !important; }
    html[lang="ar"] :is(#main-body, .modal) .float-md-left { float: right !important; }
    html[lang="ar"] :is(#main-body, .modal) .text-md-left { text-align: right !important; }
    html[lang="ar"] :is(#main-body, .modal) .text-md-right { text-align: left !important; }
    html[lang="ar"] :is(#main-body, .modal) :is(.ml-md-4, .mx-md-4) { margin-left: 0 !important; margin-right: 1.5rem !important; }
    html[lang="ar"] :is(#main-body, .modal) .mx-md-4 { margin-left: 1.5rem !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-md-1 { margin-left: 0 !important; margin-right: 8.333333% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-md-2 { margin-left: 0 !important; margin-right: 16.666667% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-md-3 { margin-left: 0 !important; margin-right: 25% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-md-4 { margin-left: 0 !important; margin-right: 33.333333% !important; }
}

@media (min-width: 992px) {
    html[lang="ar"] :is(#main-body, .modal) .float-lg-right { float: left !important; }
    html[lang="ar"] :is(#main-body, .modal) .text-lg-left { text-align: right !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-lg-1 { margin-left: 0 !important; margin-right: 8.333333% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-lg-2 { margin-left: 0 !important; margin-right: 16.666667% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-lg-3 { margin-left: 0 !important; margin-right: 25% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-lg-4 { margin-left: 0 !important; margin-right: 33.333333% !important; }
}

@media (min-width: 1200px) {
    html[lang="ar"] :is(#main-body, .modal) .offset-xl-1 { margin-left: 0 !important; margin-right: 8.333333% !important; }
    html[lang="ar"] :is(#main-body, .modal) .offset-xl-4 { margin-left: 0 !important; margin-right: 33.333333% !important; }
}

/* Bootstrap-Listen setzen padding-left: 0 gegen den Browser-Einzug. Der
   Einzug ist logisch (padding-inline-start) und steht in RTL rechts -
   dort bliebe er sonst mit 40px stehen. */
html[lang="ar"] :is(#main-body, .modal) :is(.navbar-nav, .nav, .pagination, .list-group, .list-unstyled, .list-inline) {
    padding-right: 0 !important;
}

html[lang="ar"] :is(#main-body, .modal) .page-link {
    margin-left: 0 !important;
    margin-right: -1px !important;
}

/* ---------------------------------------------------------------------
   3. Pfeile zeigen in Leserichtung
   scale statt transform: die Eigenschaft wirkt zusaetzlich zu einem
   transform (Drehung beim Aufklappen) und ueberschreibt ihn nicht.
   Ausgenommen, weil schon fuer Arabisch gedreht oder gewaehlt:
     .kb-article-arrow   custom.css dreht das Elternelement
     .ann-modern-btn     announcements.tpl setzt bei Arabisch fa-arrow-left
     .pro-ssl-button     homepage.tpl hat fest fa-arrow-left
     Kundenstimmen       bleiben LTR (siehe Dateikopf)
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) :is(
    .fa-arrow-right, .fa-arrow-left,
    .fa-arrow-circle-right, .fa-arrow-circle-left,
    .fa-chevron-right, .fa-chevron-left,
    .fa-angle-right, .fa-angle-left,
    .fa-angle-double-right, .fa-angle-double-left,
    .fa-long-arrow-right, .fa-long-arrow-left,
    .fa-caret-right, .fa-caret-left
):not(:where(.kb-article-arrow, .ann-modern-btn, .pro-ssl-button, .pro-testimonial-card, .pro-slider-wrap) *) {
    scale: -1 1 !important;
}

/* ---------------------------------------------------------------------
   4. Felder
   --------------------------------------------------------------------- */

/* Lateinischer Inhalt bleibt LTR, rechtsbuendig wie die anderen Felder */
html[lang="ar"] :is(#main-body, .modal) :is(
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[name="domain"],
    input[name="epp"],
    input[name^="domainns"],
    input[name="postcode"],
    input[name="promocode"],
    input[id$="sld"],
    input[id$="tld"]
) {
    direction: ltr !important;
    text-align: right !important;
}

/* Telefon mit Laendervorwahl: Flagge links, Nummer von links - als
   ganzes Bauteil LTR. */
html[lang="ar"] :is(#main-body, .modal) .intl-tel-input {
    direction: ltr !important;
}

html[lang="ar"] :is(#main-body, .modal) .intl-tel-input input {
    text-align: left !important;
}

/* Kontrollkaestchen und Optionsfelder (Bootstrap 4) */
html[lang="ar"] :is(#main-body, .modal) .form-check {
    padding-left: 0 !important;
    padding-right: 1.25rem !important;
}

html[lang="ar"] :is(#main-body, .modal) .form-check-input {
    margin-left: 0 !important;
    margin-right: -1.25rem !important;
}

html[lang="ar"] :is(#main-body, .modal) .form-check-inline {
    padding-right: 0 !important;
    margin-right: 0 !important;
    margin-left: .75rem !important;
}

html[lang="ar"] :is(#main-body, .modal) .form-check-inline .form-check-input {
    margin-right: 0 !important;
    margin-left: .3125rem !important;
}

/* iCheck (Bestellvorgang) */
html[lang="ar"] :is(#main-body, .modal) :is(.iradio_square-blue, .icheckbox_square-blue) {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* ---------------------------------------------------------------------
   5. Seitenleiste
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) :is(.sidebar, .primary-sidebar, .secondary-sidebar) .card-header i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* ---------------------------------------------------------------------
   6. Tabellen (DataTables)
   Wunsch: Suchfeld links, "عرض 1 إلى 1 من 1 مدخلات" rechts; unten
   Eintraege pro Seite rechts, Blaettern links.
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) .dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
}

html[lang="ar"] :is(#main-body, .modal) .dataTables_wrapper .dataTables_filter label {
    text-align: left !important;
}

html[lang="ar"] :is(#main-body, .modal) .dataTables_wrapper .dataTables_filter input {
    margin-left: 0 !important;
    margin-right: .5em !important;
}

/* Lupe im Suchfeld (Hintergrundbild aus theme.min.css) an den Feldanfang */
html[lang="ar"] :is(#main-body, .modal) .dataTables_wrapper .dataTables_filter label .form-control {
    background-position: right 8px center !important;
    padding-left: 10px !important;
    padding-right: 45px !important;
}

html[lang="ar"] :is(#main-body, .modal) .dataTables_wrapper .dataTables_length label {
    text-align: right !important;
}

html[lang="ar"] :is(#main-body, .modal) .dataTables_wrapper .dataTables_paginate {
    float: left !important;
    text-align: left !important;
}

/* Sortierpfeile an den Anfang der Kopfzelle - also links vom Text */
html[lang="ar"] :is(#main-body, .modal) table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled) {
    padding-right: 10px !important;
    padding-left: 26px !important;
}

html[lang="ar"] :is(#main-body, .modal) table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled)::before,
html[lang="ar"] :is(#main-body, .modal) table.dataTable thead > tr > :is(th, td):is(.sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled)::after {
    right: auto !important;
    left: 8px !important;
}

/* ---------------------------------------------------------------------
   7. Hinweisleiste "E-Mail bestaetigen"
   --------------------------------------------------------------------- */

html[lang="ar"] .verification-banner :is(.fal, .far, .fas) {
    float: right !important;
    padding-right: 0 !important;
    padding-left: 10px !important;
}

/* ---------------------------------------------------------------------
   8. Kundenbereich
   --------------------------------------------------------------------- */

/* Startseite: Symbol der Zaehler-Kacheln an die freie (linke) Seite */
html[lang="ar"] :is(#main-body, .modal) .tiles .tile i {
    right: auto !important;
    left: 20px !important;
}

/* Artikellisten: Zusatzzeile unter dem Titel eingerueckt. Die Downloads
   stellen den Einzug selbst auf 0 (custom.css, .hz-downloads-list). */
html[lang="ar"] :is(#main-body, .modal) .kb-article-item small {
    padding-left: 0 !important;
    padding-right: 25px !important;
}

html[lang="ar"] :is(#main-body, .modal) .hz-downloads-list .list-group-item.kb-article-item > small {
    padding-right: 0 !important;
}

/* Newsletter-Hinweis kommt von WHMCS nur auf Englisch - eigene Absatz-
   richtung, sonst springt der Schlusspunkt an den Anfang. */
html[lang="ar"] :is(#main-body, .modal) :is(.card-body, .card):has(input[name="marketingoptin"]) p {
    unicode-bidi: plaintext !important;
}

/* ---------------------------------------------------------------------
   9. Wissensdatenbank und Kontakt: Lupe/Symbol im Feld
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) .kb-search-box i {
    left: auto !important;
    right: 16px !important;
}

html[lang="ar"] :is(#main-body, .modal) .kb-search-box input {
    padding-left: 16px !important;
    padding-right: 44px !important;
}

html[lang="ar"] :is(#main-body, .modal) .contact-input-wrap i {
    left: auto !important;
    right: 17px !important;
}

html[lang="ar"] :is(#main-body, .modal) .contact-input-wrap .form-control {
    padding-left: .75rem !important;
    padding-right: 45px !important;
}

/* ---------------------------------------------------------------------
   10. Bestellvorgang (#order-standard_cart)
   --------------------------------------------------------------------- */

/* all.min.css gibt jedem label im Warenkorb 10px Abstand rechts */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart label {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart #frmCheckout :is(.radio-inline, .checkbox-inline) {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Englische Produkttexte aus dem Admin-Bereich (Merkmale, Zusatzleistungen,
   SSL-Empfehlung): eigene Absatzrichtung je Zeile, damit Zahlen und
   Satzzeichen an ihrer Stelle bleiben ("10 GB Storage", "... data safety."). */
/* unicode-bidi erbt nicht - jede Textzeile braucht die Angabe selbst.
   plaintext richtet die Zeile ausserdem nach ihrer eigenen Richtung aus;
   text-align haelt sie an der RTL-Kante. */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart :is(.product-info p, .panel-addon .panel-body, .mc-promo .content > *, .mc-promo .body :is(li, p, span)) {
    unicode-bidi: plaintext !important;
    text-align: right !important;
}

/* Domainnamen in den Suchergebnissen. Ein Name wie ".sy" oder
   "testlist" + ".net" ist lateinisch - im RTL-Absatz wandert der Punkt
   ans andere Ende ("sy.", "net.testlist").
   plaintext laesst den Browser die Richtung am ersten Buchstaben erkennen:
   lateinische Namen laufen LTR, arabische (".سورية") bleiben RTL.
   Die Vorschlagszeile legt Name und Endung als zwei Flex-Elemente an; in
   RTL stuende die Endung links vom Namen. order stellt sie wieder dahinter
   (Preis und Knopf haben order 2 und 3). Gilt fuer lateinische Namen - bei
   einem arabischen Namen stuende die Endung dann auf der falschen Seite. */
html[lang="ar"] :is(#main-body, .modal) :is(.spotlight-tld .custom-domain-name, #domainSuggestions .domain-suggestion > .domain, #domainSuggestions .domain-suggestion > .extension) {
    unicode-bidi: plaintext !important;
}

/* Der Abstand zur Plakette ("ساخن"/"جديد") haengt in cart-domain.css an
   der Endung (margin-inline-end). Steht die Endung vorn, laege er zwischen
   Endung und Name - deshalb hier an den Namen, der jetzt hinten steht. */
html[lang="ar"] :is(#main-body, .modal) #domainSuggestions .domain-suggestion > .domain {
    order: 1 !important;
    margin-inline-end: 12px !important;
}

html[lang="ar"] :is(#main-body, .modal) #domainSuggestions .domain-suggestion > .extension {
    order: 0 !important;
    margin-inline-end: 0 !important;
}

/* Domain registrieren: Suchknopf und Hinweiskaesten */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart.domain-register-modern .input-group-box :is(.input-group-btn, .input-group-append) {
    margin-left: 0 !important;
    margin-right: 10px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart.domain-register-modern .domain-promo-box {
    text-align: right !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart.domain-register-modern .domain-promo-box i {
    right: auto !important;
    left: 30px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart.domain-register-modern .domain-promo-box::before {
    right: auto !important;
    left: -70px !important;
}

html[lang="ar"] :is(#main-body, .modal) .domain-promo-box.domain-promo-box :is(h3, .text-warning, .text-primary) {
    padding-right: 0 !important;
    padding-left: 62px !important;
}

/* Warenkorb: Reiter "Gutschein" und Symbol im Gutscheinfeld */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .view-cart-tabs .nav-tabs {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart :is(.prepend-icon .field-icon, .tab-pane.promo .field-icon) {
    left: auto !important;
    right: 0 !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart #inputPromotionCode {
    padding-left: 18px !important;
    padding-right: 52px !important;
}

/* Kasse: Hinweis mit Schloss-Symbol und IP-Adresse */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .checkout-security-msg {
    padding-left: 1.25rem !important;
    padding-right: 75px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .checkout-security-msg i {
    float: right !important;
    margin-left: 0 !important;
    margin-right: -48px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .text-center::before {
    right: auto !important;
    left: -75px !important;
}

/* ---------------------------------------------------------------------
   11. Ticket: Editor-Leiste
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) .md-editor .md-controls {
    float: left !important;
}

html[lang="ar"] :is(#main-body, .modal) .ticket-modern-card .md-editor > .btn-toolbar .md-controls {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   12. Domainpreise
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) .domain-pricing-modern .tld-sale-group {
    margin-left: 0 !important;
    margin-right: 7px !important;
}

/* ".com" und "HOT!" sind lateinisch: im RTL-Absatz wuerden Punkt und
   Ausrufezeichen ans falsche Ende wandern ("com." / "!HOT"). */
html[lang="ar"] :is(#main-body, .modal) .domain-pricing-modern td.dp-tld-name {
    unicode-bidi: plaintext !important;
}

/* Handy: custom.css stellt die Tabellenzeile oben fest auf links */
html[lang="ar"] :is(#main-body, .modal) .domain-pricing-modern .dataTables_info {
    text-align: right !important;
}

html[lang="ar"] :is(#main-body, .modal) .domain-pricing-modern .tld-sale-group {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* ---------------------------------------------------------------------
   13. SSL-Shop (store/ssl-certificates)
   --------------------------------------------------------------------- */

html[lang="ar"] :is(#main-body, .modal) .landing-page.ssl .validation-levels .item p {
    text-align: right !important;
}

html[lang="ar"] :is(#main-body, .modal) .landing-page.ssl .validation-levels .item .item-features {
    text-align: right !important;
    padding-right: 0 !important;
}

html[lang="ar"] :is(#main-body, .modal) :is(.ssl-modern-page .content-block ul, .landing-page.ssl .secure-wildcard ul) {
    padding-right: 0 !important;
}

html[lang="ar"] :is(#main-body, .modal) .landing-page.ssl .detailed-info .arrow {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* "Was ist SSL": Haken-Symbole vor den Aufzaehlungspunkten */
html[lang="ar"] :is(#main-body, .modal) .landing-page.ssl .what-is-ssl :is(.fas, .far) {
    float: right !important;
    padding-right: 0 !important;
    padding-left: 15px !important;
}

html[lang="ar"] :is(#main-body, .modal) .ssl-modern-page .content-block ul li i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* ---------------------------------------------------------------------
   14. Startseite und Webhosting-Shop
   --------------------------------------------------------------------- */

/* Tarifkarten: Merkmale rechtsbuendig mit dem Haken davor, Band "Beliebt"
   an die andere Ecke. Die Merkmale sind englisch ("60 GB Storage") -
   plaintext gibt jeder Zeile ihre eigene Richtung, sonst stuende dort
   "GB Storage 60". */
html[lang="ar"] :is(#main-body, .modal) #order-pure_comparison .price-table > ul > li {
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
    unicode-bidi: plaintext !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-pure_comparison .price-table > ul > li::before {
    left: auto !important;
    right: 0 !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-pure_comparison .popular-plan {
    right: auto !important;
    left: 22.1px !important;
}

html[lang="ar"] :is(#main-body, .modal) .ssl-popular {
    right: auto !important;
    left: 20px !important;
}

/* Webhosting-Shop: Die Vorlage stellt die Grafik rechts im Kopf fest auf
   LTR (.plans-hero-right). Sie enthaelt arabische Zeilen, die dann
   verdreht erscheinen - hier mitdrehen. */
html[lang="ar"] :is(#main-body, .modal) .premium-hosting-hero .plans-hero-right {
    direction: rtl !important;
}

/* Schwebende Symbole der Hosting-Grafik */
html[lang="ar"] :is(#main-body, .modal) .icon-cloud { right: auto !important; left: 70px !important; }
html[lang="ar"] :is(#main-body, .modal) .icon-shield { right: auto !important; left: 55px !important; }
html[lang="ar"] :is(#main-body, .modal) .icon-plug { left: auto !important; right: 60px !important; }

/* Netz-Grafik hinter "Digitale Praesenz" */
html[lang="ar"] :is(#main-body, .modal) .net-dot.d1 { left: auto !important; right: 12% !important; }
html[lang="ar"] :is(#main-body, .modal) .net-dot.d2 { right: auto !important; left: 16% !important; }
html[lang="ar"] :is(#main-body, .modal) .net-dot.d3 { left: auto !important; right: 18% !important; }
html[lang="ar"] :is(#main-body, .modal) .net-dot.d4 { right: auto !important; left: 12% !important; }
html[lang="ar"] :is(#main-body, .modal) .net-line.l1 { left: auto !important; right: 13% !important; transform: rotate(-8deg) !important; }
html[lang="ar"] :is(#main-body, .modal) .net-line.l2 { right: auto !important; left: 12% !important; transform: rotate(10deg) !important; }
html[lang="ar"] :is(#main-body, .modal) .net-line.l3 { left: auto !important; right: 32% !important; transform: rotate(-6deg) !important; }

/* Logos bleiben wie gedruckt */
html[lang="ar"] :is(#main-body, .modal) .payment-icon {
    direction: ltr !important;
}

/* ---------------------------------------------------------------------
   15. Nachtraege nach Rueckmeldung (15.09.2026)
   --------------------------------------------------------------------- */

/* Domainsuche im Warenkorb: Feld und Knopf bilden eine Zeile. Bootstrap
   nimmt dem Feld die Rundung an der Seite zum Knopf - in LTR rechts. In
   RTL steht der Knopf links, also dort eckig und rechts rund. */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart.domain-register-modern #inputDomain {
    border-radius: 0 var(--hz-radius) var(--hz-radius) 0 !important;
}

/* Anhaenge (Ticket): der Knopf "Browse" (::after) sitzt am Ende des Felds -
   in RTL links, mit der Rundung aussen. */
html[lang="ar"] :is(#main-body, .modal) .ticket-modern-card .custom-file-label {
    padding-right: 14px !important;
    padding-left: 108px !important;
}

html[lang="ar"] :is(#main-body, .modal) .ticket-modern-card .custom-file-label::after {
    right: auto !important;
    left: -1px !important;
    border-radius: var(--hz-radius) 0 0 var(--hz-radius) !important;
}

/* Fenster (Modals) haengt footer.tpl direkt unter body, ausserhalb von
   #main-body - Richtung kommt deshalb ueber .modal in allen Regeln oben.
   custom.css stellt den Kopf von #modalAjax fest auf links. */
html[lang="ar"] #modalAjax .modal-header,
html[lang="ar"] #modalAjax .modal-header .modal-title {
    text-align: start !important;
}

/* Kundenbereich, Box "يوصى به لك" (MarketConnect): WHMCS setzt die
   Karussell-Eintraege ohne .carousel-inner ein, also ohne overflow:hidden.
   Bootstraps float:left + margin-right:-100% schiebt den Eintrag in RTL um
   eine volle Spaltenbreite nach rechts - ueber die Seitenleiste, waehrend sein
   Platz in der Spalte leer bleibt. Gespiegelt wie im RTL-Build von Bootstrap. */
html[lang="ar"] #main-body .carousel-item {
    float: right !important;
    margin-right: 0 !important;
    margin-left: -100% !important;
}

/* Blaettern: in RTL kommt der naechste Eintrag von links. */
html[lang="ar"] #main-body .carousel:not(.carousel-fade) :is(.carousel-item-next:not(.carousel-item-left), .active.carousel-item-right) {
    transform: translateX(-100%) !important;
}

html[lang="ar"] #main-body .carousel:not(.carousel-fade) :is(.carousel-item-prev:not(.carousel-item-right), .active.carousel-item-left) {
    transform: translateX(100%) !important;
}

/* Der Banner selbst: Symbol rechts, Text daneben, Merkmalspalten und
   Haekchen-Abstaende gespiegelt. Breakpoints wie in theme.css - unter 768
   steht das Symbol ohnehin ueber dem Text. */
html[lang="ar"] #main-body .promo-banner .fa:not(.fa-spinner),
html[lang="ar"] #main-body .promo-banner .far {
    margin-left: 10px !important;
    margin-right: 20px !important;
}

@media (min-width: 768px) {
    html[lang="ar"] #main-body .promo-banner .icon-left {
        float: right !important;
    }

    html[lang="ar"] #main-body .promo-banner .content {
        margin-left: 0 !important;
        margin-right: 185px !important;
    }
}

@media (min-width: 1200px) {
    html[lang="ar"] #main-body .promo-banner ul li.left {
        float: right !important;
    }

    html[lang="ar"] #main-body .promo-banner ul li.right {
        float: left !important;
    }
}

/* Produktbestellung, Domain-Schritt: die Eingabezeile unter den vier
   Optionen ([www.] [Name] [.com] [Knopf] bzw. [Domain im Warenkorb]
   [Knopf]). Domains sind lateinisch - die Zeile laeuft deshalb als Ganzes
   LTR, nur die Beschriftungen der Optionen darueber bleiben RTL.
   Die Spalten brauchen ihren Aussenabstand zurueck auf 0: .offset-sm-1
   aus Abschnitt 2 gewinnt als Ebenen-!important gegen das margin:0 aus
   cart-domain.css. Die Felder stehen wieder linksbuendig - Abschnitt 4
   stellt Namens- und Endungsfelder sonst rechtsbuendig. */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .domain-input-group {
    direction: ltr !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .domain-input-group [class*="col-"] {
    margin: 0 !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart .domain-input-group :is(input, .hz-select__btn, .hz-select__list) {
    text-align: left !important;
}

/* Registrierung: das Auge im Passwortfeld. custom.css setzt fuer
   .btn-reveal-pw erst "right: 12px" und fuer .password-field dann
   "left: 10px". Bei fester Breite und beiden Seiten gewinnt in LTR left,
   in RTL right - das Auge lag dadurch rechts auf dem Schloss. Der Platz
   dafuer (padding-left: 52px) steht schon links. */
html[lang="ar"] :is(#main-body, .modal) .password-field .btn-reveal-pw {
    right: auto !important;
    left: 10px !important;
}

/* Checkout: Felder, die Abschnitt 4 auf LTR stellt (E-Mail, Postleitzahl,
   Passwort). cart-domain.css 8.2 macht dem Symbol mit
   padding-inline-start Platz - in einem LTR-Feld liegt dieser Platz
   links, das Symbol aber rechts: der erste Buchstabe stand darunter.
   Hier deshalb feste Seiten. Das Auge (8.9, inset-inline-end am
   RTL-Kasten) sitzt links und braucht dort seine 44px. */
html[lang="ar"] :is(#main-body, .modal) #order-standard_cart #frmCheckout .prepend-icon :is(input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[name="postcode"]) {
    padding-right: 38px !important;
    padding-left: 12px !important;
}

html[lang="ar"] :is(#main-body, .modal) #order-standard_cart #frmCheckout .hz-pw-field input[type="password"] {
    padding-left: 44px !important;
}

} /* Ende @layer hz-rtl */