/**
 * Smartform Address Autocomplete for WooCommerce - Styles
 */

/* Smartform Address Autocomplete Styles - ZJEDNODUŠENÁ VERZE */

/* Základní styly pro autocomplete kontejner */
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    border-radius: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    z-index: 9999 !important;
}

/* Header s názvem "Ulice a číslo" */
.ui-autocomplete .ui-menu-header {
    background: #47d147;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
}

/* Základní styly pro položky v autocomplete */
.ui-menu-item {
    border-bottom: 1px solid #f0f0f0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Přepis výchozího stylování jQuery UI */
.ui-menu .ui-menu-item-wrapper {
    margin: 0 !important;
    padding: 10px 15px !important;
    border: none !important;
}

/* ADRESNÍ ŘÁDKY - JEDNODUCHÝ PŘÍSTUP */
.smartform-address-oneline {
    font-weight: 500 !important; /* Zvýšení tučnosti z 400 zpět na 500 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
    font-size: 13px !important; /* Zmenšení velikosti písma */
}

/* Stav při najetí a focusu */
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: #f0f9f0 !important;
    border: none !important;
    color: #000 !important;
}

/* Stav při výběru */
.ui-menu .ui-menu-item-wrapper.ui-state-active.ui-state-highlight {
    background-color: #47d147 !important;
    color: white !important;
}

/* Odstraní jakékoliv prvky, které by mohly způsobit zalomení řádku */
.ui-menu .ui-menu-item br,
.ui-menu .ui-menu-item span,
.ui-menu .ui-menu-item em {
    display: none !important;
}

/* Preventivní reset stylů od jQuery UI, které by mohly přepsat naše nastavení */
.ui-helper-reset {
    line-height: normal !important;
}

/* Focusované vstupní pole */
input.ui-autocomplete-input:focus {
    border-color: #47d147 !important;
    box-shadow: 0 0 0 1px #47d147 !important;
}

/* Zajistí správné umístění dropdownu */
.ui-autocomplete {
    position: absolute;
    cursor: default;
}

/* Loading indicator for address fields */
.smartform-loading {
    background-image: url('/wp-content/plugins/wc-smartform-address/assets/css/loading.gif');
    background-repeat: no-repeat;
    background-position: right 30px center; /* Posunout loading ikonu doleva, aby se vešla validační ikona */
    padding-right: 55px !important; /* Zvětšit padding pro obě ikony */
    width:32px;
    height:32px;
    
}

/* Readonly fields styling */
.smartform-readonly {
    background-color: #f9f9f9;
    color: #666 !important;
    border-color: #ddd !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Custom tooltip for readonly fields */
.smartform-readonly:hover::after {
    content: "Toto pole je vyplněno automaticky z vybrané adresy";
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10000;
    max-width: 200px;
    right: 0;
    top: 100%;
    margin-top: 5px;
}

/* Phone validation styles */
.smartform-phone-status {
    font-weight: bold;
    width: 20px;
    height: 20px;
    line-height: 20px; /* Explicitně nastavit line-height */
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%; /* Základní pozice */
    transform: translateY(-35%); /* Nová hodnota pro invalid/loading */
    z-index: 2;
}

.smartform-phone-status.valid {
    color: #5cb85c;
    top: calc(63% + 1px); /* Nová hodnota podle uživatele */
    transform: none;
}

.smartform-address-status.loading {
    width: 32px !important;
    height: 32px !important;
    padding-top:24px;
    position: absolute;
}

/* Styling for the phone input fields based on validation state */
input#billing_phone,
input#shipping_phone {
    padding-right: 40px !important; /* Přidat padding pro ikonu */
}

input#billing_phone.valid-phone,
input#shipping_phone.valid-phone {
    border-color: #5cb85c !important;
}

input#billing_phone.invalid-phone,
input#shipping_phone.invalid-phone {
    border-color: #d9534f !important;
}

/* Phone validation error message */
.phone-validation-error {
    display: block;
    color: #d9534f;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 15px;  /* Zmenšeno odsazení vlevo, odstraněn padding-left */
    border-radius: 4px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    margin-bottom: 10px;
    position: relative;  /* Pro absolutní pozicování vykřičníku */
}

.phone-validation-error::before {
    content: none; /* Odstraní vykřičník */
}

/* Email validation styles */
.smartform-email-status {
  position: absolute;
  top: 50%;
  right: 17px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.smartform-email-status.valid {
    color: #5cb85c;
    top: calc(64% + 1px); /* Nová hodnota podle uživatele */
    transform: none;
}

/* Styling for the email input field based on validation state */
input#billing_email {
    padding-right: 40px !important; /* Přidat padding pro ikonu */
}

input#billing_email.valid-email {
    border-color: #5cb85c !important;
}

input#billing_email.invalid-email {
    border-color: #d9534f !important;
}

.smartform-address-status.invalid {
  top: 46% !important;
}

/* Email validation error message */
.smartform-email-status.invalid {
  top: 64px !important;
}

.email-validation-error {
  margin-top: 0.5em;
  display: block;
  color: #b81c23;
  font-weight: 500;    
  background: #fef2f2;
  border: 1px solid #f5c2c7;
  border-radius: 6px;
  padding: 10px;
}

.email-validation-error::before {
    content: none; /* Odstraní vykřičník */
}

/* Styling for address validation */
.smartform-address-status {
    font-weight: bold;
    width: 20px;
    height: 20px;
    line-height: 20px; /* Explicitně nastavit line-height */
    text-align: center;
    border-radius: 47%;
    position: absolute;
    right: 15px;
    top: 45%; /* Základní pozice */
    transform: translateY(-35%); /* Nová hodnota pro invalid/loading */
    z-index: 2;
}

.smartform-address-status.valid {
    top: calc(57% + 1px); /* Nová hodnota podle uživatele */
    transform: none;
}

/* Styling for the address input fields based on validation state */
input#billing_address_1,
input#shipping_address_1 {
    padding-right: 40px !important; /* Přidat padding pro ikonu */
}

/* Zvýšit padding, pokud je aktivní i loading ikona */
input#billing_address_1.smartform-loading,
input#shipping_address_1.smartform-loading {
    padding-right: 55px !important;
}

input#billing_address_1.valid-address,
input#shipping_address_1.valid-address {
    border-color: #5cb85c !important;
}

input#billing_address_1.invalid-address,
input#shipping_address_1.invalid-address {
    border-color: #d9534f !important;
}

/* Address validation error message */
.address-validation-error {
    display: block;
    color: #d9534f;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 15px; /* Zmenšeno odsazení vlevo, odstraněn padding-left */
    border-radius: 4px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    margin-bottom: 10px;
    position: relative; /* Pro absolutní pozicování vykřičníku */
}

.address-validation-error::before {
    content: none; /* Odstraní vykřičník */
}

/* Add relative positioning to parent form rows */
.woocommerce-checkout .form-row {
    position: relative;
}

/* Ensure input fields have enough height for centered icons */
.woocommerce-checkout .form-row input.input-text {
    min-height: 40px; /* Adjust as needed */
}

/* Smartform Address Autocomplete Styles - PŘÍMÉ CÍLENÍ NA HTML STRUKTURU */

/* Základní styly pro autocomplete kontejner */
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    border-radius: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    z-index: 9999 !important;
}

/* Header s názvem "Ulice a číslo" */
.ui-autocomplete .ui-menu-header {
    background: #47d147;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
}

/* PŘÍMÉ CÍLENÍ NA STRUKTURU DLE POPISU UŽIVATELE */
/* Skrýt <br> element, který způsobuje zalomení řádku */
.ui-menu-item-wrapper > br {
    display: none !important;
}

/* Nastavit celý obsah wrapper divu na řádku (včetně vynucení inline zobrazení) */
.ui-menu-item-wrapper > * {
    display: inline !important;
    font-weight: 500 !important; /* Zvýšení tučnosti z 400 zpět na 500 */
    font-size: 13px !important;
}

/* Přidat čárku a mezeru za element strong (adresa) */
.ui-menu-item-wrapper > strong::after {
    content: ", " !important;
    font-weight: 500 !important; /* Zvýšení tučnosti z 400 zpět na 500 */
    font-size: 13px !important;
}

/* Základní styly pro položky v autocomplete */
.ui-menu-item {
    border-bottom: 1px solid #f0f0f0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Přepis výchozího stylování jQuery UI */
.ui-menu .ui-menu-item-wrapper {
    margin: 0 !important;
    padding: 10px 15px !important;
    border: none !important;
    white-space: nowrap !important; /* Zamezí zalomení textu */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Stav při najetí a focusu */
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: #f0f9f0 !important;
    border: none !important;
    color: #000 !important;
}

/* Stav při výběru */
.ui-menu .ui-menu-item-wrapper.ui-state-active.ui-state-highlight {
    background-color: #47d147 !important;
    color: white !important;
}

/* Ujistit se, že formátování textu je jednotné */
.ui-menu .ui-menu-item-wrapper,
.ui-menu .ui-menu-item-wrapper strong,
.ui-menu .ui-menu-item-wrapper span,
.ui-menu .ui-menu-item-wrapper div {
    font-weight: 500 !important; /* Zvýšení tučnosti z 400 zpět na 500 */
    line-height: 1.5 !important;
    font-size: 13px !important; /* Zmenšení velikosti písma */
}

/* Focusované vstupní pole */
input.ui-autocomplete-input:focus {
    border-color: #47d147 !important;
    box-shadow: 0 0 0 1px #47d147 !important;
}

/* Zajistí správné umístění dropdownu */
.ui-autocomplete {
    position: absolute;
    cursor: default;
}

/* PŘÍMÉ CÍLENÍ NA HTML PODLE NOVÉHO ZJIŠTĚNÍ */
/* Skrýt <br> element ve všech položkách */
.ui-menu-item-wrapper > br {
    display: none !important;
}

/* Základní styly pro všechny položky */
.ui-menu-item-wrapper > strong,
.ui-menu-item-wrapper > em {
    display: inline !important;
    font-size: 13px !important;
}

.ui-menu-item-wrapper > strong {
    font-weight: 500 !important;
}

/* Skrýt informativní text "(vyberte pro upřesnění adresy)" */
.ui-menu-item-wrapper > em {
    display: none !important;
}

/* Speciální styly pro obecné oblasti označené třídou smartform-city-only */
.smartform-city-only .ui-menu-item-wrapper > strong::after {
    content: "" !important; /* Žádná čárka za adresou */
}

/* Běžné položky - přidat čárku po adrese, pokud není obecná oblast */
.ui-menu-item:not(.smartform-city-only) .ui-menu-item-wrapper > strong::after {
    content: ", " !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Další obecné styly pro dropdown menu */
.ui-menu .ui-menu-item-wrapper {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 10px 15px !important;
    line-height: 1.5 !important;
    border: none !important;
    margin: 0 !important;
}