/* Meu Palcco — campo de contato unificado em todas as larguras mobile.
   DDI e número formam um único controle, sem quebra de linha ou espaço residual. */
@media (max-width: 640px) {
    .form-field > .phone-ddi-control,
    .form-field .phone-ddi-control,
    .phone-ddi-control {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        grid-template-rows: 52px !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid #e4d6f2 !important;
        border-radius: 14px !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],
    .form-field .phone-ddi-control > .phone-ddi-select,
    .form-field .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: 50px !important;
        min-height: 50px !important;
        max-height: 50px !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 26px 0 8px !important;
        border-right: 1px solid #e4d6f2 !important;
        border-radius: 13px 0 0 13px !important;
        background-position: calc(100% - 8px) 50% !important;
        background-size: 12px 12px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

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

    .phone-ddi-control:focus-within {
        border-color: rgba(109, 40, 217, .62) !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;
    }
}

@media (max-width: 390px) {
    .form-field > .phone-ddi-control,
    .form-field .phone-ddi-control,
    .phone-ddi-control {
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    .phone-ddi-control > .phone-ddi-select {
        padding-right: 24px !important;
        padding-left: 7px !important;
        background-position: calc(100% - 7px) 50% !important;
    }
}