/* =============================================================================
   hawaii-phone-intl.css — popravke za intl-tel-input (v21.2.4)
   Koristi se na kontakt formi i u prvom koraku rezervacije ture.

   PROBLEM koji rješava (kontakt forma, prije ove datoteke):
   plugin omota <input> u <div class="iti"> koji po vendor CSS-u ima
   `display:inline-block` (shrink-to-fit). Naš input ima `width:100%`, pa
   nastaje kružna zavisnost — wrapper se skupi na širinu dugmeta sa zastavom.
   Opcija `fixDropdownWidth` (default true) onda postavi inline
   `width: <širina wrappera>` na dropdown → lista od ~50px, imena i pozivni
   brojevi odsječeni, horizontalni scroll. Zato:
     1) wrapper mora biti block + 100%,
     2) dropdown dobija svoju čitljivu širinu (init koristi
        fixDropdownWidth:false, a ovdje su min/max granice).
   ============================================================================= */

/* 1) Wrapper prati širinu polja umjesto da se skuplja na sadržaj. */
.iti {
    display: block;
    width: 100%;
}

/* 2) Dropdown na desktopu: širina po sadržaju, ali unutar čitljivih granica.
      `iti--inline-dropdown` je na wrapperu samo kad NIJE fullscreen (mobile)
      režim, pa ova pravila ne diraju mobilni popup. */
.iti--inline-dropdown .iti__dropdown-content {
    min-width: 320px;
    max-width: min(440px, calc(100vw - 32px));
    box-shadow: 0 8px 24px rgba(9, 23, 51, .14);
}

/* 3) Bez horizontalnog scroll-a u listi — imena zemalja se prelamaju umjesto
      da guraju širinu (vendor stavlja `white-space:nowrap` + `overflow-x:auto`). */
.iti--inline-dropdown .iti__country-list {
    overflow-x: hidden;
    max-height: 260px;
}

.iti__country {
    padding: 9px 12px;
    line-height: 1.35;
}

/* Ime zemlje smije da se prelomi u dva reda; pozivni broj ostaje uz njega. */
.iti__country-name {
    white-space: normal;
}

.iti__dial-code {
    color: #6b7280;
    white-space: nowrap;
}

/* 4) Search polje u dropdownu — puna širina i vidljiv fokus. */
.iti__search-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
}

.iti__search-input:focus {
    outline: 2px solid rgba(9, 23, 51, .18);
    outline-offset: -2px;
}

/* 5) Dugme sa zastavom — da se ne sudara sa temom (border-0, bg-white na inputu). */
.iti__selected-country {
    background: transparent;
    border-radius: 0;
}

.iti__selected-dial-code {
    font-size: 14px;
    color: #091733;
}

/* 6) Mobilni fullscreen popup — bez naših desktop ograničenja širine. */
.iti--fullscreen-popup .iti__dropdown-content {
    min-width: 0;
    max-width: none;
}