/* Meu Palcco — controle de telefone unificado em desktop e tablet.
   Aplicado globalmente a todo formulário que utiliza DDI + contato. */
@media (min-width: 641px) {
    .form-field > .phone-ddi-control,
    .form-field .phone-ddi-control,
    .phone-ddi-control {
        display: grid !important;
        grid-template-columns: clamp(112px, 32%, 150px) minmax(0, 1fr) !important;
        grid-template-rows: 46px !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 1px solid #e8dff2 !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .phone-ddi-control > .phone-ddi-select,
    .phone-ddi-control > input[data-phone-ddi-input] {
        position: static !important;
        inset: auto !important;
        display: block !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        border: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .phone-ddi-control > .phone-ddi-select {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: 0 36px 0 12px !important;
        border-right: 1px solid #e8dff2 !important;
        border-radius: 11px 0 0 11px !important;
        background-position: calc(100% - 14px) 50% !important;
        background-size: 15px 15px !important;
        white-space: nowrap !important;
    }

    .phone-ddi-control > input[data-phone-ddi-input] {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 12px !important;
        border-radius: 0 11px 11px 0 !important;
        text-overflow: clip !important;
    }

    .phone-ddi-control:hover {
        border-color: rgba(109, 40, 217, .28) !important;
        background-color: #fffdfb !important;
    }

    .phone-ddi-control:focus-within {
        border-color: rgba(109, 40, 217, .60) !important;
        box-shadow: 0 0 0 4px rgba(109, 40, 217, .10) !important;
    }

    .form-field.has-error .phone-ddi-control {
        border-color: rgba(180, 35, 24, .55) !important;
    }
}