/* =====================================================================
   KlinikPlus – phone field with built-in country picker
   ---------------------------------------------------------------------
   intl-tel-input positions its flag + dial-code button over the left edge
   of the input and compensates by writing `style="padding-left: 82px"`
   onto the input. Several pages style their inputs with an !important
   shorthand — e.g. `.contact-page .form-control { padding: 6px 12px
   !important }` — which beats that inline style, so the placeholder and
   the typed number ended up sitting underneath the dial code.

   The selector below is deliberately more specific than those page rules
   (two classes + an element) and carries !important, so it wins. The value
   comes from a custom property that phone-country.js keeps in step with
   the real button width, because a long dial code (+1268) needs more room
   than a short one (+49). The fallback covers the moment before the JS has
   measured anything.
   ===================================================================== */

.iti input.iti__tel-input,
.iti input[type="tel"] {
    padding-left: var(--iti-pad-left, 82px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Same declaration, deliberately more specific (four class-level parts). A page
   rule with three classes and its own `padding` shorthand out-ranks the two
   selectors above — `.form-group-unified .iti input.iti__tel-input` in
   klinikplus.css did exactly that, and the checkout number ended up typed over
   the flag. That rule now carries the variable itself; this keeps any other
   such rule from quietly winning. */
.iti.iti--allow-dropdown input.iti__tel-input[type="tel"] {
    padding-left: var(--iti-pad-left, 82px) !important;
}

/* The wrapper is inline-block by default, which made the field stop short
   of the column in the site's full-width form rows. */
.iti {
    display: block !important;
    width: 100% !important;
}

/* klinikplus.css and updated.css both carry
   `.hero-btn-primary, button { height: 54px !important }` between 992 and
   1440px. That hits EVERY button, including the flag/dial-code button, which
   then stood 54px tall inside a 35px field and hung out of the bottom. Two
   classes + !important out-ranks the bare `button` selector. */
.iti .iti__selected-country {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
}

/* `separateDialCode` prints "+49" inside that button, and the `padding: 0`
   above left it flush against the number the user types ("+49512 3456789").
   Give the dial code its own gutter — the button grows with it and
   phone-country.js measures the button, so the input's own padding follows. */
.iti .iti__selected-country .iti__selected-dial-code {
    padding-right: 8px !important;
}

/* The dropdown inherits its colour from the surrounding form. Inside the dark
   panels (the home page "It's time for new achievement" form, the header
   modal) that meant white text on the dropdown's white background — the
   country names were invisible and only the grey dial codes showed. Pin the
   dropdown's own colours so it reads the same on every background. */
.iti__dropdown-content {
    background-color: #FFFFFF !important;
    color: #333333 !important;
    text-align: left;
}

.iti__country,
.iti__country-name {
    color: #333333 !important;
}

.iti__dial-code {
    color: #6B7280 !important;
}

.iti__search-input {
    color: #333333 !important;
    background-color: #FFFFFF !important;
}

/* Row layout: flag, then name, then the dial code — as in the reference. */
.iti__country {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.iti__country-name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iti__dial-code {
    flex: 0 0 auto;
}