/* Osnovno stiliziranje wrapper-a */
.phone-prefix-wrapper {
  margin-bottom: 20px;
}

/* Kombiniran kontejner za polje */
.phone-combined-field {
  position: relative;
  width: 100%;
}

/* Glavni label */
.phone-combined-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

/* Kontejner za input polja */
.phone-input-container {
  position: relative;
  display: flex;
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s ease;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

/* Focus stanje za cijeli kontejner */
.phone-input-container:focus-within {
  
}

/* Sakri originalne wrapper-e */
.phone-prefix-select,
.phone-number-input {
  margin: 0 !important;
  padding: 0 !important;
}

.phone-number-input {
    width: 100% !important;
}

.phone-prefix-select p,
.phone-number-input p {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Stiliziranje select polja (prefix) */
.phone-prefix-select select {
  border: none !important;
  
  border-radius: 0 !important;


  font-size: 14px !important;
  line-height: 1.4 !important;
  min-width: 100px !important;
  max-width: 220px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  outline: none !important;
  appearance: none !important;


  cursor: pointer !important;

  appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Stiliziranje input polja (broj) */
.phone-number-input input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 15px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  width: 100% !important;
  height: 40px !important;
  box-sizing: border-box !important;
  outline: none !important;
  flex: 1 !important;
  appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Dodatno uklanjanje strelica za Webkit browsere */
.phone-number-input input::-webkit-outer-spin-button,
.phone-number-input input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* Ukloni strelice u Firefox */
.phone-number-input input[type="number"] {
  -moz-appearance: textfield !important;
}

.phone-number-input input[type="tel"] {
  -moz-appearance: textfield !important;
}

/* Hover efekti */
.phone-input-container:hover {
  border-color: #999;
}

.phone-prefix-select select:hover {
  
}

/* Focus efekti */
.phone-prefix-select select:focus,
.phone-number-input input:focus {
  box-shadow: none !important;
  
}

/* Error stanja */
.woocommerce-invalid .phone-input-container {
  border-color: #e74c3c !important;
}

.woocommerce-invalid .phone-combined-label {
  color: #e74c3c !important;
}

/* Vizualna potvrda ažuriranja države */
.country-updated {
  border: 2px solid #46b450 !important;
  background-color: #f7fff7 !important;
  transition: all 0.3s ease;
}

/* Responsive design */
@media (max-width: 768px) {
  .phone-input-container {
    flex-direction: row;
  }
  
  .phone-prefix-select select {
    min-width: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
    
    
  }
  
  .phone-number-input input {
    font-size: 16px !important; /* Sprječava zoom na iOS */
  }
}

/* Dodatno stiliziranje za različite teme */
.woocommerce-checkout .phone-input-container {
  margin-bottom: 0 !important;
}

/* Sakri originalne labele */
.phone-prefix-select label,
.phone-number-input label {
  display: none !important;
}

/* Sakri originalno phone polje */
#billing_phone_field,
.hidden-phone-field {
  display: none !important;
}

/* Stiliziranje placeholder teksta */
.phone-number-input input::placeholder {
  color: #999;
  opacity: 1;
}

/* Dodatni stilovi za bolju kompatibilnost */
.phone-prefix-select .select2-container {
  border: none !important;
  width: 100% !important;
}

.phone-prefix-select .select2-selection {
  border: none !important;
  border-right: 2px solid #ddd !important;
  border-radius: 0 !important;
  background: #f9f9f9 !important;
  height: 48px !important;
  line-height: 48px !important;
}