.phone-input-container {
position: relative;
display: block;
width: 100%;
}
input[type=tel] {
padding-left: 40px !important;
}
.phone-flag {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 15px;
border: 1px solid #ddd;
background-size: cover;
background-position: center;
z-index: 10;
}
.phone-input-with-flag {
height: 40px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%23FFFFFF' d='M0 0h9v2H0z'/%3E%3Cpath fill='%230039A6' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 4h9v2H0z'/%3E%3C/svg%3E"); }
.flag-kz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%2300AFCA' d='M0 0h9v6H0z'/%3E%3Cpath fill='%23FEC50C' d='M0 3h9v3H0z'/%3E%3Ccircle fill='%23FEC50C' cx='4.5' cy='3' r='1.5'/%3E%3C/svg%3E"); }
.flag-by { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%23C8313E' d='M0 0h9v2H0z'/%3E%3Cpath fill='%2300668F' d='M0 2h9v2H0z'/%3E%3Cpath fill='%230D9B4D' d='M0 4h9v2H0z'/%3E%3C/svg%3E"); }
.flag-uz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%2300985C' d='M0 0h9v2H0z'/%3E%3Cpath fill='%2300985C' d='M0 4h9v2H0z'/%3E%3Cpath fill='%23FFFFFF' d='M0 2h9v2H0z'/%3E%3Cpath fill='%2300985C' d='M0 1h9v1H0zM0 4h9v1H0z'/%3E%3C/svg%3E"); }
.flag-am { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%23D90012' d='M0 0h9v2H0z'/%3E%3Cpath fill='%23003399' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23F2A800' d='M0 4h9v2H0z'/%3E%3C/svg%3E"); }
.flag-az { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%230099BC' d='M0 0h9v2H0z'/%3E%3Cpath fill='%23ED2E38' d='M0 2h9v2H0z'/%3E%3Cpath fill='%230099BC' d='M0 4h9v2H0z'/%3E%3Ccircle fill='%23ED2E38' cx='4.5' cy='3' r='1'/%3E%3Ccircle fill='white' cx='4.5' cy='3' r='0.7'/%3E%3Cpath fill='%23ED2E38' d='M5 3.5L4 3.5 4.5 2.5z'/%3E%3C/svg%3E"); }
.flag-kg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%23D00C33' d='M0 0h9v6H0z'/%3E%3Ccircle fill='%23FFDC00' cx='4.5' cy='3' r='1.5'/%3E%3Cpath fill='%23D00C33' d='M5.5 3.5L4.5 2.5 3.5 3.5 4 3 3.5 2.5 4.5 3.5 5.5 2.5 5 3z'/%3E%3C/svg%3E"); }
.flag-md { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%23003DA0' d='M0 0h3v6H0z'/%3E%3Cpath fill='%23D52628' d='M3 0h3v6H3z'/%3E%3Cpath fill='%23FEDE00' d='M6 0h3v6H6z'/%3E%3Cpath fill='%23D52628' d='M4.5 3L4 2.5 4.5 2 5 2.5z'/%3E%3Ccircle fill='%23D52628' cx='4.5' cy='3' r='0.5'/%3E%3C/svg%3E"); }
.flag-tj { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%23006050' d='M0 0h9v2H0z'/%3E%3Cpath fill='%23FFFFFF' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23D40000' d='M0 4h9v2H0z'/%3E%3Cpath fill='%23F8C300' d='M4.5 3L4 2.5 4.5 2 5 2.5z'/%3E%3Ccircle fill='%23F8C300' cx='4.5' cy='3' r='0.7'/%3E%3C/svg%3E"); }
.flag-tm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 9 6'%3E%3Cpath fill='%2300884B' d='M0 0h9v6H0z'/%3E%3Cpath fill='%23FFFFFF' d='M0 1h9v1H0zM0 4h9v1H0z'/%3E%3Cpath fill='%23C13015' d='M0 0h2v6H0z'/%3E%3Ccircle fill='%23C13015' cx='5' cy='3' r='0.8'/%3E%3Cpath fill='%23C13015' d='M6 3L5 2.5 5 3.5z'/%3E%3C/svg%3E"); }
.flag-default { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'%3E%3Crect width='20' height='15' fill='%23f8f9fa'/%3E%3Cpath d='M0,0 L20,15 M20,0 L0,15' stroke='%23dee2e6' stroke-width='1'/%3E%3C/svg%3E");
background-color: #f8f9fa;
}