/* =====================================================================
   HORANOS – UI SCALE / DENSITY LAYER
   ---------------------------------------------------------------------
   Purpose
     The theme grew over time with hard-coded pixel sizes per section.
     The result was a very low information density: single sections eat
     80–160px of vertical padding, headlines run up to 52px and the
     footer alone filled a whole 1080p screen.

     This file is ONE deliberate, documented pass that scales the
     interface down to a normal desktop density. It is loaded LAST
     (see header.tpl) so it reliably wins over css/custom.css without
     having to touch hundreds of legacy rules.

   Rules for maintaining this file
     * Only sizing / spacing here – no colors, no new components.
     * Keep it grouped by area and keep the comments.
     * New feature CSS belongs in custom.css, NOT here.
   ===================================================================== */

:root {
    /* Vertical rhythm between page sections */
    --ui-section-y: 56px;        /* default section padding-top/bottom  */
    --ui-section-y-sm: 44px;     /* compact sections (CTA, FAQ)         */
    --ui-section-y-hero: 64px;   /* hero                                */

    /* Type scale */
    --ui-h1: 34px;               /* hero headline                       */
    --ui-h2: 29px;               /* section headline                    */
    --ui-h3: 20px;               /* card headline                       */
    --ui-lead: 16px;             /* section subtitle / lead paragraph   */
    --ui-body: 15px;             /* body copy                           */

    /* Controls */
    --ui-btn-h: 42px;
    --ui-btn-fs: 14.5px;
    --ui-btn-px: 20px;
}

/* =====================================================================
   1) SECTION RHYTHM
   Every landing section used its own 80–160px padding. Normalise them.
   ===================================================================== */

section.hp-section,
section.hp-section.hp-webhosting,
section.hp-section.hp-domain,
section.hp-section.hp-domain-premium,
section.hp-section.pro-testimonials-section,
section.hp-section.hp-presence-full,
.pro-ssl-section,
.ultra-ssl-section,
.why-floating,
.payment-section,
.hosting-showcase-section {
    padding-top: var(--ui-section-y) !important;
    padding-bottom: var(--ui-section-y) !important;
}

section.hp-section.premium-faq-section,
section.hp-section.hp-cta-section {
    padding-top: var(--ui-section-y-sm) !important;
    padding-bottom: var(--ui-section-y-sm) !important;
}

.horanos-hero-new {
    padding-top: var(--ui-section-y-hero) !important;
    padding-bottom: 86px !important; /* domain search overlaps the hero */
    min-height: 380px !important;    /* was 540px - the box inside is ~180px */
}

/* Auf dem Handy ist der Kasten nicht 180, sondern gut 400px hoch - die
   Ueberschrift bricht auf sieben Zeilen um. Die Domain-Suche zieht sich mit
   margin-bottom:-120px (custom.css, [20.2]) in den Hero; bei 86px Abstand
   lag ihr Badge auf der Ueberschrift und ihr h2 halb im Hero. 150px halten
   das Badge gut 60px unter dem Kasten.
   Der weisse Verlauf am Hero-Ende (::after, sonst 240px) bekommt dieselbe
   Hoehe und beginnt so erst unter dem Kasten - weisse Schrift auf dem
   hellen Verlauf war kaum lesbar. */
@media (max-width: 768px) {
    .horanos-hero-new {
        padding-bottom: 150px !important;
    }

    .horanos-hero-new::after {
        height: 150px !important;
    }
}

/* Header block above the section content. */
.hp-section-header:not(.premium-faq-header),
.hosting-showcase-header,
.pro-ssl-header,
.ultra-ssl-header,
.ultra-domain-header,
.why-floating__header,
.pro-testimonials-header,
.payment-header {
    margin-bottom: 26px !important;
}

/* .premium-faq-header also carries .hp-section-header, but it is visually glued
   to .premium-faq-list below it (they share one border radius). It must have no
   bottom margin at all - not the 26px above and not the theme's own 36px. */
.premium-faq-header {
    margin-bottom: 0 !important;
}

/* =====================================================================
   2) TYPE SCALE
   Headlines ranged from 26px up to 52px. Bring them onto one scale.
   ===================================================================== */

.ultra-domain-header h2,
#frmDomainHomepage .ultra-domain-header h2,
.pro-ssl-header h2.pro-ssl-title,
.ultra-ssl-header h2,
.why-floating__header h2,
.pro-testimonials-header h2,
.payment-header h2,
.hp-section-header h2.hp-section-title {
    margin-bottom: 10px !important;
}

.pro-ssl-card h3,
.ultra-ssl-card h3,
.why-floating__card h3,
.hp-presence-card h3,
.hp-browser-body h3,
.ultra-domain-section h3 {
    font-size: var(--ui-h3) !important;
    line-height: 1.35 !important;
}

.hp-section-header p.hp-section-subtitle,
.pro-testimonials-header p,
.hosting-showcase-content p.hosting-main-text,
.hp-domain-content p.hp-domain-lead {
    font-size: var(--ui-lead) !important;
    line-height: 1.65 !important;
}

.pro-ssl-card p,
.ultra-ssl-card p,
.why-floating__card p,
.hp-presence-card p,
.pro-testimonial-card p {
    font-size: var(--ui-body) !important;
    line-height: 1.65 !important;
}

/* =====================================================================
   2b) CARD / BOX DENSITY
   Cards used 30-40px of inner padding, which is what made the cards so
   tall that only three fitted on screen.
   ===================================================================== */

.horanos-hero-box {
    padding: 20px 26px !important;
}

.horanos-hero-badge {
    margin-bottom: 12px !important;
    padding: 6px 14px !important;
    font-size: var(--hz-fs-small) !important;
}

.pro-ssl-card,
.ultra-ssl-card,
.hp-domain-premium-card,
.pro-testimonial-card {
    padding: 22px !important;
}

.hp-presence-card {
    padding: 22px 18px 20px !important;
}

.cta-box {
    padding: 22px 22px 24px !important;
}

.payment-card {
    padding: 24px 14px !important;
}

.payment-card .payment-icon {
    height: 60px !important;
    font-size: 26px !important;
}

/* The icon of a why-card floats half outside the card, so the top
   padding has to stay in sync with half the icon height. */
.why-floating__card {
    padding: 50px 22px 22px !important;
}

.why-floating__icon {
    width: 54px !important;
    height: 54px !important;
    top: -27px !important;
    font-size: 21px !important;
}

.why-floating__icon i {
    font-size: 21px !important;
}

/* =====================================================================
   3) BUTTONS
   Oversized call-to-action buttons across the landing sections.
   ===================================================================== */

.hp-section .btn,
.pro-ssl-section .btn,
.ultra-ssl-section .btn,
.payment-section .btn,
.why-floating .btn,
.hosting-showcase-section .btn,
.cta-box .btn {
    min-height: var(--ui-btn-h) !important;
    padding: 0 var(--ui-btn-px) !important;
    font-size: var(--ui-btn-fs) !important;
    line-height: var(--ui-btn-h) !important;
}

/* =====================================================================
   4) SIDEBAR (Categories / Actions panels in the store + client area)
   The panel heading was 135px tall with a 30px headline for a single
   word. The markup is `.panel-sidebar > .panel-heading > h3.panel-title`,
   and it appears inside `.sidebar` as well as `.cart-sidebar`, so the
   selectors are anchored on `#main-body .panel-sidebar`.
   ===================================================================== */

#main-body .panel-sidebar .panel-heading .panel-title,
#main-body .panel-sidebar .card-header .panel-title {
    margin: 0 !important;
}

#main-body .panel-sidebar .panel-heading .panel-title i,
#main-body .panel-sidebar .card-header .panel-title i {
    font-size: var(--hz-fs-control) !important;
}

#main-body .panel-sidebar {
    margin-bottom: 12px !important;
}

/* --- a) honour WHMCS' own visibility flag ------------------------- */
#domainSuggestions .promo.w-hidden,
#domainSuggestions .sales-group-hot.w-hidden,
#domainSuggestions .sales-group-new.w-hidden,
#domainSuggestions .sales-group-sale.w-hidden {
    display: none !important;
}

/* Hide the promo wrapper entirely when no badge inside is active. */
#domainSuggestions .promo:not(:has(> :not(.w-hidden))) {
    display: none !important;
}

/* --- b) badge sizing --------------------------------------------- */
#domainSuggestions .promo {
    width: auto !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 0 10px !important;
    overflow: visible !important;
}

#domainSuggestions .sales-group-hot,
#domainSuggestions .sales-group-new,
#domainSuggestions .sales-group-sale {
    flex: 0 0 auto !important;
    height: 21px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    font-weight: var(--hz-fw-bold) !important;
    letter-spacing: .3px !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

#domainSuggestions .sales-group-hot::before,
#domainSuggestions .sales-group-new::before,
#domainSuggestions .sales-group-sale::before {
    margin-right: 4px !important;
    font-size: 9px !important;
}

/* --- c) deterministic row layout --------------------------------- */
/* One flex row instead of the broken 3-column grid: name and TLD stay
   together on the left, badges follow inline, and .actions is pushed to
   the right edge with margin-left:auto, so price and button land on the
   same x-position in every row. */
#domainSuggestions {
    padding: 12px !important;
}

#domainSuggestions .domain-suggestion {
    display: flex !important;
}

/* Leading globe icon */
#domainSuggestions .domain-suggestion::before {
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 34px !important;
    margin-right: 12px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    box-shadow: none !important;
}

/* Domain name + TLD, kept side by side */
#domainSuggestions .domain-suggestion .domain,
#domainSuggestions .domain-suggestion .extension {
    display: inline !important;
}

/* Right-hand action group - same x-position on every row */
#domainSuggestions .actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 10px !important;
}

#domainSuggestions .btn-add-to-cart {
    height: 38px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    box-shadow: none !important;
}

#domainSuggestions .btn-add-to-cart .to-add {
    font-size: var(--hz-fs-small) !important;
}

.suggested-domains .panel-heading::before,
.suggested-domains .card-header::before {
    width: 30px !important;
    height: 30px !important;
    margin-right: 9px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
}

.suggested-domains .panel-footer a,
.suggested-domains .card-footer a {
    height: 36px !important;
    padding: 0 18px !important;
    font-size: var(--hz-fs-small) !important;
}

/* =====================================================================
   6) SPOTLIGHT TLD CARDS (the ".sy / .com.sy / .co.sy" boxes)
   ---------------------------------------------------------------------
   Each card had min-height:285px in a fixed 3-column grid, so a search
   showed three boxes and nothing else. The cards are styled by an inline
   \3c style> block inside the order form template (outside this theme), so
   these rules deliberately carry the extra #order-standard_cart id to
   outrank it - an inline \3c style> in the body would otherwise win on
   document order.
   ===================================================================== */

/* `height: auto` is load-bearing, do not drop it.

   WHMCS' own all.min.css sizes these cards with `.spotlight-tld { height:
   112px; overflow: hidden }`. The order form template used to neutralise that
   with min-height:285px; when the rule below cut min-height back to 0, the
   stock 112px took over and the card clipped everything past the TLD name -
   the price and the add/unavailable button were rendered, correctly, into the
   hidden area below the card's bottom edge. That is why the boxes looked dead.

   The container becomes a flex parent so a card still fills its grid row and
   the cards in a row stay the same height. */

#order-standard_cart #spotlightTlds .custom-domain-card {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: var(--hz-radius) !important;
}

/* No lift on the card - eight cards rising under the cursor is noise on a
   results page. Hover belongs to the button, which is the thing you click. */
#order-standard_cart #spotlightTlds .custom-domain-card:hover {
    transform: none !important;
    border-color: #e6edf5 !important;
    box-shadow: var(--hz-shadow-lg) !important;
}

#order-standard_cart #spotlightTlds .custom-domain-icon,
#order-standard_cart #spotlightTlds .custom-domain-icon i {
    font-size: var(--hz-fs-body) !important;
}

#order-standard_cart #spotlightTlds .custom-domain-badge {
    height: 21px !important;
    padding: 0 9px !important;
    border-radius: var(--hz-radius) !important;
    font-size: 10px !important;
}

#order-standard_cart #spotlightTlds .custom-domain-loader {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

#order-standard_cart #spotlightTlds .custom-domain-price {
    min-height: 32px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
}

#order-standard_cart #spotlightTlds .custom-domain-btn {
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-mini) !important;
    box-shadow: none !important;
}

/* "Contact Support to Purchase" is a long label in a ~150px card, and the
   button clips its overflow - so let it wrap over two lines instead of
   cutting the text off mid-word. */
#order-standard_cart #spotlightTlds .domain-contact-support {
    margin: 0 !important;
}

/* Bootstrap dims disabled buttons to opacity .65, which left the
   "unavailable" label barely legible on the light card. */
#order-standard_cart #spotlightTlds .custom-domain-btn-disabled {
    opacity: 1 !important;
    background: var(--hz-surface-2) !important;
    color: var(--hz-muted) !important;
}

/* =====================================================================
   7) STORE / CLIENT AREA PAGE HEADERS AND PANELS
   ===================================================================== */

#main-body .header-lined h1,
#main-body > .container > h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

#main-body .panel-heading,
#main-body .card-header {
    padding: 12px 16px !important;
    font-size: var(--hz-fs-body) !important;
}

#main-body .panel-body,
#main-body .card-body {
    padding: 16px !important;
}

/* =====================================================================
   8) RESPONSIVE – keep the compact scale sensible on smaller screens
   ===================================================================== */

@media (max-width: 991px) {
    :root {
        --ui-section-y: 44px;
        --ui-section-y-sm: 36px;
        --ui-section-y-hero: 48px;
        --ui-h1: 28px;
        --ui-h2: 24px;
        --ui-h3: 18px;
        --ui-lead: 15px;
    }

    #domainSuggestions .actions {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* =====================================================================
   9) "SUGGESTED DOMAINS" PANEL HEADER - CONTRAST FIX
   ---------------------------------------------------------------------
   custom.css:12166 styles this header as a dark navy gradient with
   color:#fff. custom.css:8682 (`#order-standard_cart .card-header`)
   is more specific (id + class) and repaints every card header on the
   order page with a light gradient - but it never touches `color`,
   so the white heading text survived on a white background and the
   label was invisible.
   The order page's convention is light headers with dark text, so keep
   the light background and give the label and its icon readable
   brand colours instead of resurrecting the dark gradient.
   ===================================================================== */

#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header {
    color: var(--brand-text) !important;
}

#order-standard_cart .suggested-domains .panel-heading::before,
#order-standard_cart .suggested-domains .card-header::before {
    background: rgb(var(--hz-primary-rgb) / .10) !important;
    color: var(--brand-red) !important;
}

/* =====================================================================
   10) DOMAIN SEARCH: FIELD, EXACT MATCH ROW, BUTTON COLOUR
   ---------------------------------------------------------------------
   custom.css sizes the search field and its button for a landing-page
   hero (62px tall, 18px text, weight 900). On the order page that is
   oversized, so this section scales it back and drops the lift-on-focus
   - the red ring on the input already says "you are typing here".
   ===================================================================== */

#order-standard_cart.domain-register-modern .input-group-box {
    max-width: 620px !important;
    padding: 8px !important;
    border-radius: var(--hz-radius) !important;
    box-shadow: var(--hz-shadow-md) !important;
}

#order-standard_cart.domain-register-modern .input-group-box:focus-within {
    transform: none !important;
    box-shadow: var(--hz-shadow-md) !important;
}

#order-standard_cart.domain-register-modern #inputDomain {
    min-height: 46px !important;
    padding: 10px 16px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-body) !important;
}

/* Air between field and button - they sat flush against each other. */
#order-standard_cart.domain-register-modern .input-group-box .input-group-btn,
#order-standard_cart.domain-register-modern .input-group-box .input-group-append {
    margin-left: 10px !important;
}

#order-standard_cart.domain-register-modern #btnCheckAvailability {
    min-width: 112px !important;
    min-height: 46px !important;
    padding: 10px 20px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
    box-shadow: var(--hz-shadow-md) !important;
}

/* ---------------------------------------------------------------------
   Exact match: one row, built like a suggestion row

   The result block is a stack of centred paragraphs plus a centred
   price/button pair. Laid out as a flex row with the suggestion table's
   card styling, the exact match reads as the first row of the same list
   instead of a separate banner.

   Why the attribute selectors: WHMCS shows and hides this block with
   jQuery .show()/.hide(), i.e. an inline `display`. A plain
   `display: flex !important` here would also override .hide() and the
   block could never disappear. Matching on the inline value keeps the
   layout tied to the shown state. Both `block` and `flex` are listed
   because jQuery remembers the computed display from the previous hide:
   the first .show() writes `block`, every later one writes `flex`.
   --------------------------------------------------------------------- */

/* "Exact Match" / "Top Suggestion" labels: standard_cart's all.min.css gives
   .primary-domain-header a 2px #62cb31 bottom border - the green line. The
   exact-match label says nothing the row below does not, so it goes; the
   top-suggestion label stays (in the keyword flow the row shows a suggested
   domain, not what you typed) but loses the green rule. */
#order-standard_cart #primaryExactHeading {
    display: none !important;
}

#order-standard_cart #primarySuggestionHeading {
    padding: 0 0 6px !important;
    border-bottom: 0 !important;
    color: var(--hz-muted) !important;
    font-size: var(--hz-fs-small) !important;
}

/* #searchDomainInfo carries margin:20px from standard_cart, which inset the
   exact match row on both sides.

   The row is a card of its own, not a list item: it lines up with the search
   box above it and the suggestions panel below it, both of which run the full
   width of #order-standard_cart. So the horizontal margin goes to 0 - an
   earlier version matched the 12px inner padding of #domainSuggestions
   instead, which made this one block narrower than everything around it. */
#order-standard_cart.domain-register-modern #searchDomainInfo {
    margin: 20px 0 !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult[style*="display: block"],
#order-standard_cart.domain-register-modern #primaryLookupResult[style*="display: flex"] {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid #e5edf6 !important;
    border-radius: var(--hz-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--hz-shadow-md) !important;
    text-align: left !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult > p {
    flex: 1 1 auto !important;
    margin: 0 !important;
    font-size: var(--hz-fs-body) !important;
    text-align: left !important;
}

/* The price/button pair needs the opposite guard to the container above:
   WHMCS leaves it without an inline display until a lookup hides it, so an
   attribute match on block/flex never fired and the pair stayed a plain
   block - the button then sat wherever the text ended instead of at the
   right edge. Excluding only the hidden state covers all three cases:
   no inline style (initial), display:none (hidden), display:block/flex. */
#order-standard_cart.domain-register-modern #primaryLookupResult p.domain-price:not([style*="display: none"]) {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult .domain-price .price {
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid var(--hz-success-soft) !important;
    border-radius: var(--hz-radius) !important;
    background: linear-gradient(135deg, var(--hz-success-soft), var(--hz-success-soft)) !important;
    color: var(--hz-success) !important;
    font-size: var(--hz-fs-control) !important;
    font-weight: var(--hz-fw-bold) !important;
}

#order-standard_cart.domain-register-modern #primaryLookupResult .btn-add-to-cart {
    height: 38px !important;
    min-width: 132px !important;
    padding: 0 16px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
    font-weight: var(--hz-fw-bold) !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   One red for every add-to-cart button

   The three result areas had grown three different reds: the spotlight
   cards were blue, the suggestion rows used #dc2626, and only the search
   button carried the brand colour. They are all the same action, so they
   all get the brand gradient and the brand hover.
   --------------------------------------------------------------------- */

#order-standard_cart #spotlightTlds .custom-domain-btn-add,
#order-standard_cart #domainSuggestions .btn-add-to-cart,
#order-standard_cart.domain-register-modern #primaryLookupResult .btn-add-to-cart {
    background: linear-gradient(135deg, var(--hz-primary), var(--hz-primary-hover)) !important;
    color: #ffffff !important;
}

#order-standard_cart #spotlightTlds .custom-domain-btn-add:hover,
#order-standard_cart #domainSuggestions .btn-add-to-cart:hover,
#order-standard_cart.domain-register-modern #primaryLookupResult .btn-add-to-cart:hover {
    background: linear-gradient(135deg, var(--hz-primary), var(--hz-primary-hover)) !important;
    box-shadow: var(--hz-shadow-md) !important;
}

/* Fuellung, Rahmen und Hover von "Contact Support to Purchase" stehen in
   cart-domain.css bei ".domain-lookup-result .domain-contact-support".
   Dort - und nicht hier - weil die Regel eine Klasse mehr braucht als
   ".domain-lookup-result .btn { border: 0 }" aus derselben Datei; ein
   Selektor ohne .domain-lookup-result verliert dagegen. */

/* ---------------------------------------------------------------------
   NEW / HOT badge icons

   The order form template asks for "Font Awesome 6 Free" / "5 Free" /
   FontAwesome. This site ships neither: the local webfont in
   /assets/fonts/css/ is "Font Awesome 6 Pro", and 6 Free only arrives
   through the cdnjs link in head.tpl. Whenever that CDN is blocked or
   slow - which is exactly the case on some connections here - the star
   and bolt glyphs fell back to a font without them and rendered as
   empty boxes. Putting the locally hosted family first makes the badges
   independent of the CDN.
   --------------------------------------------------------------------- */

#order-standard_cart #spotlightTlds .spotlight-tld-new.custom-domain-badge::before,
#order-standard_cart #spotlightTlds .spotlight-tld-hot.custom-domain-badge::before {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
    font-weight: var(--hz-fw-bold) !important;
}

/* =====================================================================
   11) REGISTRIERUNG (register.php)

   Die Seite kam nach diesem Dokument dazu und stand als einzige Strecke
   noch auf der alten, sehr grosszuegigen Skala: Felder 52px hoch,
   Kartenueberschriften 24px, Seitentitel 36px, der Absendeknopf 60px
   bei 20px Schrift, dazu 32px Innenabstand je Karte. Auf einem 1080p-
   Schirm passte damit knapp die Haelfte des Formulars ins Bild.

   Daneben stand das umgebaute Auswahlfeld (.hz-select) mit den 38px aus
   dem Kundenbereich - in der Zeile Ort / Bundesland / Postleitzahl
   standen also zwei verschiedene Feldhoehen nebeneinander.

   --ui-reg-field-h ist deshalb die eine Hoehe fuer Textfeld, Textbereich
   und Auswahlfeld. --ui-reg-icon-w ist die Breite des Symbolfeldes am
   rechten Rand; custom.css [110.1] rechnet den Innenabstand der Felder
   und die Breite des Symbols daraus. Beide Werte stehen bewusst hier
   und nicht dort: Groessen gehoeren in diese Datei, und die beiden
   duerfen nicht auseinander laufen.

   Die Bauart der Felder - Rundung, Rahmenfarbe, Grund, Stapelfolge der
   aufgeklappten Listen - steht in custom.css, Abschnitte [110.1] und
   der Registrierungsblock ab Z. 5949.
   ===================================================================== */

.horanos-register-page {
    --ui-reg-field-h: 44px;
    --ui-reg-icon-w: 44px;
    --ui-reg-field-fs: 14px;

    padding: 34px 16px !important;
}

/* --- Kopfbereich ----------------------------------------------------- */
.horanos-register-header {
    padding: 26px 24px !important;
    margin-bottom: 20px !important;
    border-radius: var(--hz-radius) !important;
}

.horanos-register-header h1 {
    margin-bottom: 6px !important;
}

.horanos-register-header p {
    font-size: var(--hz-fs-control) !important;
}

/* --- Karten ---------------------------------------------------------- */
.horanos-register-page .horanos-card {
    padding: 20px 22px !important;
    margin-bottom: 16px !important;
}

/* Der Farbstreifen oben liegt auf dem Innenabstand der Karte auf. */
.horanos-register-page .horanos-card::before {
    right: 22px !important;
    left: 22px !important;
}

.horanos-register-page .horanos-card-header {
    gap: 10px !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.horanos-register-page .horanos-card-header span {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-body) !important;
}

/* --- Felder ---------------------------------------------------------- */
.horanos-register-page .form-group {
    margin-bottom: 12px !important;
}

/* Bewusst nicht ueber "select": das echte Auswahlfeld ist nur noch
   Datenhalter und liegt nach custom.css [70.15] auf 1px - sichtbar ist
   .hz-select__btn. */
.horanos-register-page input.field,
.horanos-register-page input.form-control,
.horanos-register-page .hz-select__btn {
    height: var(--ui-reg-field-h) !important;
    min-height: var(--ui-reg-field-h) !important;
    font-size: var(--ui-reg-field-fs) !important;
}

.horanos-register-page textarea.field,
.horanos-register-page textarea.form-control {
    min-height: 96px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: var(--ui-reg-field-fs) !important;
}

/* Eine aufgeklappte Liste ist die geoeffnete Form ihres Feldes und
   traegt deshalb dessen Schriftgroesse - vorher stand sie mit 13.5px
   eine halbe Stufe darunter. Gilt fuer beide Listen dieser Seite: die
   des Auswahlfeldes und die der Landesvorwahl. */
.horanos-register-page .hz-select__opt,
.horanos-register-page .intl-tel-input .country-list .country {
    font-size: var(--ui-reg-field-fs) !important;
}

.horanos-register-page label:not(.field-icon):not(.form-check) {
    margin-bottom: 4px !important;
    font-size: var(--hz-fs-small) !important;
}

.horanos-register-page .field-help-text {
    font-size: var(--hz-fs-mini) !important;
}

/* Das Auge im Passwortfeld sitzt nach custom.css [110.1] in der Mitte;
   hier steht nur noch, wie gross es ist. */
.horanos-register-page .btn-reveal-pw {
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--hz-radius) !important;
}

/* --- Passwortstaerke -------------------------------------------------- */
.horanos-register-page .password-strength-meter {
    padding: 8px 12px !important;
    border-radius: var(--hz-radius) !important;
}

.horanos-register-page .progress {
    height: 8px !important;
}

.horanos-register-page #passwordStrengthTextLabel {
    margin: 6px 0 0 !important;
    font-size: var(--hz-fs-mini) !important;
}

/* --- Knoepfe ---------------------------------------------------------- */
.horanos-register-page .btn-primary,
.horanos-register-submit {
    min-width: 180px !important;
    height: var(--ui-btn-h) !important;
    padding: 0 28px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--ui-btn-fs) !important;
}

.horanos-register-page .generate-password {
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
}

/* --- Sicherheitsabfrage und Bedingungen ------------------------------- */
.horanos-captcha {
    margin: 16px 0 !important;
    padding: 12px !important;
    border-radius: var(--hz-radius) !important;
}

.horanos-tos {
    margin-bottom: 16px !important;
    padding: 12px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-small) !important;
}

/* --- Kleine Schirme ---------------------------------------------------- */
@media (max-width: 768px) {
    .horanos-register-page {
        --ui-reg-field-h: 42px;
        --ui-reg-icon-w: 42px;

        padding: 22px 12px !important;
    }

    .horanos-register-header {
        padding: 22px 18px !important;
    }

    .horanos-register-page .horanos-card {
        padding: 16px 14px !important;
    }

    .horanos-register-page .horanos-card::before {
        right: 14px !important;
        left: 14px !important;
    }
}

/* =====================================================================
   9) KEIN HINEINZOOMEN BEIM ANTIPPEN EINES FELDES
   ---------------------------------------------------------------------
   Safari auf dem iPhone zoomt die Seite hinein, sobald ein Eingabefeld
   den Fokus bekommt und seine Schrift kleiner als 16px ist. Beim
   Verlassen des Feldes zoomt es NICHT zurueck - die Seite bleibt
   vergroessert, bis der Nutzer selbst herauszieht. Genau das war der
   Bericht: "wenn ich auf was klicke, zoomt die Seite rein, und beim
   rausgehen geht der Zoom nicht weg".

   Es gibt keinen Weg, nachtraeglich herauszuzoomen; verhindern laesst
   sich nur die Ursache. 16px ist die Schwelle, ab der Safari es sein
   laesst.

   Warum das hierher gehoert: die Verkleinerung stammt aus genau dieser
   Datei und aus derselben Absicht (mehr Inhalt auf den Schirm). Bei
   Eingabefeldern kostet sie mehr, als sie bringt.

   Die Regel gilt nur auf Geraeten mit grobem Zeiger - also Finger statt
   Maus. Am Schreibtisch bleibt jede Groesse, wie sie war.

   Ausgenommen sind Felder ohne Texteingabe: Kaestchen, Schalter, Regler,
   Datei- und Farbwahl sowie Knoepfe. Dort gibt es nichts zu tippen, und
   Safari zoomt bei ihnen auch nicht.

   Die vielen :not() sind kein Zufall, sondern der Grund, warum diese
   Regel greift: jedes davon zaehlt in der Gewichtung wie eine Klasse.
   Ohne sie wuerde die Regel gegen jedes ".form-control { font-size: ...
   !important }" im Theme verlieren. Gegen Regeln mit einer ID verliert
   sie trotzdem - die drei, die es betrifft, stehen darunter bzw. in
   css/cart-domain.css (11c).
   ===================================================================== */

@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    textarea {
        font-size: 16px !important;
    }

    /* Von "#order-standard_cart.domain-register-modern #inputDomain"
       weiter oben in dieser Datei auf 15px gesetzt - zwei IDs, die
       Regel oben kommt dagegen nicht an. */
    #order-standard_cart.domain-register-modern #inputDomain {
        font-size: 16px !important;
    }
}

/* =====================================================================
   10) DOMAIN-WERBEKAESTEN "Add Web Hosting" / "Transfer your domain"
   ---------------------------------------------------------------------
   Die beiden Kaesten unter der Domainsuche (.domain-promo-box, Seite
   cart.php?a=add&domain=register) waren durchweg zu gross: Ueberschrift
   28px, Text 15px, Knopf 16px in 14/24-Polsterung, Symbol 58px. Auf dem
   Handy brach dadurch schon "Transfer your domain to us" auf zwei Zeilen
   um und ein Kasten fuellte fast den halben Schirm.

   Hier steht eine Stufe kleiner - nur Groessen, keine Farben, kein
   Aufbau. Die Formen, Schatten und Abstaende der Kaesten bleiben, wie
   sie in custom.css stehen.

   Zur Schreibweise: die Vorlage in custom.css adressiert die Kaesten mit
   "#order-standard_cart.domain-register-modern .domain-promo-box ...".
   Gegen eine Regel mit ID kommt keine reine Klassenregel an, auch nicht
   mit !important. Die doppelte Klasse (.domain-promo-box.domain-promo-box)
   hebt das Gewicht hier auf denselben Stand; weil ui-scale.css nach
   custom.css geladen wird, gewinnt bei Gleichstand diese Datei.
   Die zweite, ID-lose Zeile jedes Blocks greift, falls die Kaesten
   irgendwo ausserhalb von #order-standard_cart auftauchen - dort gelten
   nur die schlichten Grundregeln aus custom.css (Zeile 1019 ff.).
   ===================================================================== */

#order-standard_cart .domain-promo-box.domain-promo-box,
.domain-promo-box.domain-promo-box {
    min-height: 0 !important;
    padding: 24px !important;
}

/* Symbol oben rechts */
#order-standard_cart .domain-promo-box.domain-promo-box i.fas,
.domain-promo-box.domain-promo-box i.fas {
    top: 22px !important;
    right: 22px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--hz-radius) !important;
    font-size: 21px !important;
}

/* Ueberschrift - die Polsterung rechts haelt sie vom Symbol frei */
#order-standard_cart .domain-promo-box.domain-promo-box h3,
.domain-promo-box.domain-promo-box h3 {
    margin-bottom: 7px !important;
    padding-right: 62px !important;
}

/* Farbige Zwischenzeile */
#order-standard_cart .domain-promo-box.domain-promo-box .text-warning,
#order-standard_cart .domain-promo-box.domain-promo-box .text-primary,
.domain-promo-box.domain-promo-box .text-warning,
.domain-promo-box.domain-promo-box .text-primary {
    margin-bottom: 8px !important;
    padding-right: 62px !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.5 !important;
}

/* Fliesstext */
#order-standard_cart .domain-promo-box.domain-promo-box p,
.domain-promo-box.domain-promo-box p {
    max-width: 92% !important;
    margin-bottom: 10px !important;
    font-size: var(--hz-fs-small) !important;
    line-height: 1.65 !important;
}

/* Knopf */
#order-standard_cart .domain-promo-box.domain-promo-box .btn,
.domain-promo-box.domain-promo-box .btn {
    min-width: 170px !important;
    margin-top: 8px !important;
    padding: 10px 18px !important;
    border-radius: var(--hz-radius) !important;
    font-size: var(--hz-fs-control) !important;
}

/* Sternchenhinweis */
#order-standard_cart .domain-promo-box.domain-promo-box .small,
.domain-promo-box.domain-promo-box .small {
    margin-top: 10px !important;
    font-size: var(--hz-fs-mini) !important;
}

/* --- Handy ------------------------------------------------------------
   Dort steht das Symbol ueber dem Text (custom.css), die rechte
   Polsterung faellt deshalb weg. */
@media (max-width: 767px) {
    #order-standard_cart .domain-promo-box.domain-promo-box,
    .domain-promo-box.domain-promo-box {
        padding: 20px 16px !important;
    }

    #order-standard_cart .domain-promo-box.domain-promo-box i.fas,
    .domain-promo-box.domain-promo-box i.fas {
        width: 42px !important;
        height: 42px !important;
        margin: 0 auto 12px !important;
        font-size: 19px !important;
    }

    #order-standard_cart .domain-promo-box.domain-promo-box h3,
    .domain-promo-box.domain-promo-box h3 {
        padding-right: 0 !important;
    }

    #order-standard_cart .domain-promo-box.domain-promo-box .text-warning,
    #order-standard_cart .domain-promo-box.domain-promo-box .text-primary,
    .domain-promo-box.domain-promo-box .text-warning,
    .domain-promo-box.domain-promo-box .text-primary {
        padding-right: 0 !important;
        font-size: var(--hz-fs-small) !important;
    }

    #order-standard_cart .domain-promo-box.domain-promo-box p,
    .domain-promo-box.domain-promo-box p {
        max-width: 100% !important;
        font-size: var(--hz-fs-small) !important;
    }

    #order-standard_cart .domain-promo-box.domain-promo-box .btn,
    .domain-promo-box.domain-promo-box .btn {
        padding: 10px 16px !important;
        font-size: var(--hz-fs-small) !important;
    }
}