/**
 * Phone Input Flags CSS
 * 
 * Estilização para selects de DDI com bandeiras SVG
 */

/* Select DDI com bandeira */
.form-select-ddi {
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px 15px;
    padding-left: 40px !important;
}

/* Bandeiras por DDI - usando data attribute para facilitar manipulação via JS */
.form-select-ddi[data-selected-ddi="+55"] {
    background-image: url('/images/flags/svg/pt-br.svg');
}

.form-select-ddi[data-selected-ddi="+1"] {
    background-image: url('/images/flags/svg/en-us.svg');
}

.form-select-ddi[data-selected-ddi="+351"] {
    background-image: url('/images/flags/svg/pt.svg');
}

.form-select-ddi[data-selected-ddi="+44"] {
    background-image: url('/images/flags/svg/en.svg');
}

.form-select-ddi[data-selected-ddi="+34"] {
    background-image: url('/images/flags/svg/es.svg');
}

.form-select-ddi[data-selected-ddi="+54"] {
    background-image: url('/images/flags/svg/es-ar.svg');
}

.form-select-ddi[data-selected-ddi="+595"] {
    background-image: url('/images/flags/svg/es.svg');
}

.form-select-ddi[data-selected-ddi="+598"] {
    background-image: url('/images/flags/svg/es.svg');
}

/* Quando nenhum DDI selecionado */
.form-select-ddi[data-selected-ddi=""],
.form-select-ddi:not([data-selected-ddi]) {
    background-image: none;
    padding-left: 12px !important;
}

/* Estilo para options (não mostra bandeira, mas mantém consistência) */
.form-select-ddi option {
    padding-left: 8px;
}

/* Hover effect */
.form-select-ddi:hover {
    cursor: pointer;
}

/* Focus state */
.form-select-ddi:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Custom dropdown arrow */
.form-select-ddi {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: 
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center, 12px center;
    background-size: 16px 12px, 20px 15px;
    padding-right: 36px;
}

/* Quando tem bandeira selecionada */
.form-select-ddi[data-selected-ddi]:not([data-selected-ddi=""]) {
    background-image: 
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
        var(--flag-image);
    background-repeat: no-repeat, no-repeat;
    background-position: right 12px center, 12px center;
    background-size: 16px 12px, 20px 15px;
}

/* Specific flag backgrounds using CSS variables for cleaner approach */
.form-select-ddi[data-selected-ddi="+55"] { --flag-image: url('/images/flags/svg/pt-br.svg'); }
.form-select-ddi[data-selected-ddi="+1"] { --flag-image: url('/images/flags/svg/en-us.svg'); }
.form-select-ddi[data-selected-ddi="+351"] { --flag-image: url('/images/flags/svg/pt.svg'); }
.form-select-ddi[data-selected-ddi="+44"] { --flag-image: url('/images/flags/svg/en.svg'); }
.form-select-ddi[data-selected-ddi="+34"] { --flag-image: url('/images/flags/svg/es.svg'); }
.form-select-ddi[data-selected-ddi="+54"] { --flag-image: url('/images/flags/svg/es-ar.svg'); }
.form-select-ddi[data-selected-ddi="+595"] { --flag-image: url('/images/flags/svg/es.svg'); }
.form-select-ddi[data-selected-ddi="+598"] { --flag-image: url('/images/flags/svg/es.svg'); }