.mobile-page {
    --mobile-navy: #14213a;
    --mobile-green: #0a9b68;
    --mobile-blue: #1769e0;
    --mobile-danger: #d92d20;
    --mobile-border: #d7dee8;
    --mobile-text: #172033;
}

/* Avisos e confirmações. */
.mobile-page .easy-numpad-frame,
.mobile-page .easy-numpad-frames {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box;
    background: rgba(16, 24, 40, .64) !important;
    backdrop-filter: blur(4px);
}

.mobile-page .easy-numpad-container fieldset > div:not(.easy-numpad-output-container),
.mobile-page .easy-numpad-container2 fieldset > div:not(.easy-numpad-output-container) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    color: #344054 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

.mobile-page .easy-numpad-container #buscarcliente,
.mobile-page .easy-numpad-container2 #buscarcliente {
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(20, 33, 58, .06), 0 2px 5px rgba(20, 33, 58, .06) !important;
    color: var(--mobile-text) !important;
    font: 500 15px "Segoe UI", Arial, sans-serif !important;
    outline: 0 !important;
}

.mobile-page .easy-numpad-container #buscarcliente:focus,
.mobile-page .easy-numpad-container2 #buscarcliente:focus {
    border-color: var(--mobile-blue) !important;
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .12), 0 4px 9px rgba(20, 33, 58, .08) !important;
}

.mobile-page .easy-numpad-container,
.mobile-page .easy-numpad-container2 {
    position: relative !important;
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 24px 65px rgba(16, 24, 40, .34) !important;
}

.mobile-page .easy-numpad-container2 {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
}

.mobile-page .easy-numpad-container fieldset,
.mobile-page .easy-numpad-container2 fieldset {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
}

.mobile-page .easy-numpad-container legend,
.mobile-page .easy-numpad-container2 legend {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: var(--mobile-navy) !important;
    font: 800 20px/1.2 "Segoe UI", Arial, sans-serif !important;
    text-align: center !important;
}

.mobile-page .easy-numpad-output-container {
    width: 100% !important;
    padding: 22px !important;
    box-sizing: border-box !important;
    color: #344054 !important;
    background: #fff !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    text-align: center !important;
}

.mobile-page .easy-numpad-output-container > div {
    margin: 0 0 16px !important;
    color: #344054 !important;
    font: 600 16px/1.45 "Segoe UI", Arial, sans-serif !important;
}

.mobile-page .easy-numpad-output {
    min-height: 54px !important;
    padding: 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    color: var(--mobile-navy) !important;
    background: #f8fafc !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.mobile-page .easy-numpad-output-container form {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.mobile-page .easy-numpad-output-container input[type="submit"],
.mobile-page .easy-numpad-output-container input[type="button"],
.mobile-page .easy-numpad-output-container button,
.mobile-page .easy-numpad-output-container a.fundomenubotaoc,
.mobile-page .easy-numpad-output-container a.bottoncanfecha {
    width: auto !important;
    min-width: 96px !important;
    height: 44px !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: var(--mobile-blue) !important;
    font: 700 14px/1 "Segoe UI", Arial, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer;
}

.mobile-page .easy-numpad-output-container .bottonconfecha {
    border-color: var(--mobile-green) !important;
    background: var(--mobile-green) !important;
}

.mobile-page .easy-numpad-output-container .bottoncanfecha {
    border-color: var(--mobile-danger) !important;
    background: var(--mobile-danger) !important;
}

.mobile-page .easy-numpad-number-container { padding: 0 16px 16px !important; }
.mobile-page .easy-numpad-number-container > table {
    width: 100% !important;
    left: 0 !important;
    margin-top: 8px !important;
    border-collapse: separate !important;
    border-spacing: 5px !important;
    table-layout: fixed !important;
}
.mobile-page .easy-numpad-number-container > table td { padding: 0 !important; border: 0 !important; }
.mobile-page .easy-numpad-number-container > table a {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #344054 !important;
    font-weight: 800 !important;
}
.mobile-page .easy-numpad-number-container > table a.cancel { background: var(--mobile-danger) !important; }
.mobile-page .easy-numpad-number-container input,
.mobile-page .easy-numpad-number-container .done { border-radius: 8px !important; background: var(--mobile-green) !important; }
.mobile-page .easy-numpad-number-container .sair-garcom {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 8px !important;
    border: 1px solid #b42318 !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: var(--mobile-danger) !important;
    font: 700 15px/1 "Segoe UI", Arial, sans-serif !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(217, 45, 32, .18) !important;
}
.mobile-page .easy-numpad-number-container .sair-garcom:hover,
.mobile-page .easy-numpad-number-container .sair-garcom:focus-visible {
    background: #b42318 !important;
}
.mobile-page a#easy-numpad-close { top: 10px !important; right: 10px !important; z-index: 2; }

/* Busca de clientes. */
.mobile-page #innomecadreturn {
    width: 100% !important;
    height: min(250px, 32vh) !important;
    float: none !important;
    clear: both !important;
    margin: 10px 0 14px !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
}

.mobile-page .clientes-lista { width: 100% !important; padding: 6px !important; box-sizing: border-box; }
.mobile-page .cliente-resultado {
    width: 100% !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}
.mobile-page #innomecadreturn .cliente-selecionar {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 7px 11px !important;
    border: 1px solid #d6e4ff !important;
    border-radius: 8px !important;
    color: var(--mobile-text) !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: left !important;
}
.mobile-page .cliente-selecionar strong {
    width: 100%; overflow: hidden; font-size: 13px; font-weight: 500;
    text-overflow: ellipsis; text-transform: none; white-space: nowrap;
}
.mobile-page #innomecadreturn .cliente-selecionar small { display: none; }
.mobile-page #innomecadreturn .cliente-editar {
    width: 44px !important;
    min-width: 44px !important;
    height: 46px !important;
    padding: 8px !important;
    border: 1px solid #f5cf65 !important;
    border-radius: 8px !important;
    background: #fffbeb !important;
    box-shadow: none !important;
}
.mobile-page .cliente-editar img { width: 100% !important; height: 100% !important; object-fit: contain; }
.mobile-page .clientes-vazio { padding: 22px; color: #667085; text-align: center; }

/* Cadastro e edição de clientes reutilizados do PDV. */
.mobile-page .cliente-modal {
    width: min(94vw, 680px) !important;
    max-width: 680px !important;
}
.mobile-page .cliente-modal .easy-numpad-output-container { padding: 16px 22px 20px !important; }
.mobile-page .cliente-modal #formulario-login form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 14px !important;
    align-items: end !important;
}
.mobile-page .cliente-modal .lbnomecad {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    color: #344054 !important;
    font-size: 12px !important;
    text-align: left !important;
}
.mobile-page .cliente-modal .lbnomecad:nth-of-type(1),
.mobile-page .cliente-modal .lbnomecad:nth-of-type(5),
.mobile-page .cliente-modal .lbnomecad:nth-of-type(7),
.mobile-page .cliente-modal .lbnomecad:last-of-type { grid-column: 1 / -1 !important; }
.mobile-page .cliente-modal .lbnomecad span {
    float: none !important;
    display: block !important;
    margin-bottom: 5px !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.mobile-page .cliente-modal .innomecad {
    width: 100% !important;
    height: 39px !important;
    float: none !important;
    padding: 0 11px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%) !important;
    box-shadow: inset 0 1px 2px rgba(20, 33, 58, .07), 0 2px 5px rgba(20, 33, 58, .06) !important;
    font: 500 14px "Segoe UI", Arial, sans-serif !important;
}
.mobile-page .cliente-modal .innomecad::placeholder { text-transform: none !important; }
.mobile-page .cliente-modal .innomecad:focus {
    border-color: var(--mobile-blue) !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(20, 33, 58, .05), 0 0 0 3px rgba(23, 105, 224, .12), 0 4px 9px rgba(20, 33, 58, .08) !important;
    outline: 0 !important;
}
.mobile-page .cliente-modal #retornos,
.mobile-page .cliente-modal center,
.mobile-page .cliente-modal br { grid-column: 1 / -1 !important; }
.mobile-page .cliente-modal br { display: none !important; }

.mobile-page .confirmacao-whatsapp-acoes {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 18px 0 0 !important;
}
.mobile-page .cliente-modal .lbnomecad:last-of-type center {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
.mobile-page .cliente-modal #formulario-login #enviared,
.mobile-page .cliente-modal #formulario-login #cancelclie {
    min-width: 112px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: #fff !important;
    font: 700 14px/1 "Segoe UI", Arial, sans-serif !important;
    box-shadow: 0 3px 8px rgba(20, 33, 58, .12) !important;
}
.mobile-page .cliente-modal #formulario-login #enviared {
    border-color: var(--mobile-green) !important;
    background: var(--mobile-green) !important;
}
.mobile-page .cliente-modal #formulario-login #cancelclie {
    border-color: var(--mobile-danger) !important;
    background: var(--mobile-danger) !important;
}

/* Lista e seleção de produtos. */
.mobile-page .produtos-modal {
    width: min(96vw, 620px) !important;
    max-width: 620px !important;
}

.mobile-page .produtos-modal .easy-numpad-output-container { padding: 20px 24px 24px !important; }
.mobile-page .produtos-modal .easy-numpad-output-container > div {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px 8px !important;
    margin: 0 !important;
}

.mobile-page .produtos-modal .opadd {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 2px !important;
}

.mobile-page .produtos-modal .opadd .addCount {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    float: none !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    object-fit: contain !important;
}

.mobile-page .produtos-modal .opadd .qtd {
    width: 58px !important;
    height: 46px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 9px !important;
    color: var(--mobile-navy) !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(20, 33, 58, .07) !important;
    font: 700 20px "Segoe UI", Arial, sans-serif !important;
    text-align: center !important;
}

.mobile-page .produtos-modal .lbnomeinsu { width: 100% !important; display: block !important; }
.mobile-page .produtos-modal #produto {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    color: var(--mobile-text) !important;
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(20, 33, 58, .06), 0 2px 5px rgba(20, 33, 58, .06) !important;
    font: 500 16px "Segoe UI", Arial, sans-serif !important;
    outline: 0 !important;
}
.mobile-page .produtos-modal #produto:focus {
    border-color: var(--mobile-blue) !important;
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .12), 0 4px 9px rgba(20, 33, 58, .08) !important;
}

.mobile-page .produtos-modal #returnprod {
    width: 100% !important;
    max-height: min(290px, 40vh) !important;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
    align-content: start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    background: #f7f9fc !important;
}

.mobile-page .produtos-modal #returnprod .resultado-produto {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    border: 1px solid #d8e2ef !important;
    border-radius: 10px !important;
    color: var(--mobile-text) !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(20, 33, 58, .06) !important;
    text-align: left !important;
    text-transform: none !important;
}
.mobile-page .produtos-modal #returnprod .resultado-produto:hover,
.mobile-page .produtos-modal #returnprod .resultado-produto:focus {
    border-color: #84adff !important;
    background: #f4f8ff !important;
}
.mobile-page .resultado-produto-nome {
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-page .produtos-modal #returnprod .resultado-produto small {
    color: #667085 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.mobile-page .produtos-modal #confiCount {
    min-width: 118px !important;
    border-color: var(--mobile-green) !important;
    background: var(--mobile-green) !important;
}
.mobile-page .produtos-modal #cancel {
    min-width: 118px !important;
    border-color: var(--mobile-danger) !important;
    background: var(--mobile-danger) !important;
}
.mobile-page .produtos-modal .resultado-vazio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px;
    color: #667085;
    text-align: center;
}

/* Nova entrega. */
.mobile-page .nova-entrega-modal {
    width: min(94vw, 560px) !important;
    max-width: 560px !important;
}
.mobile-page .nova-entrega-modal fieldset { padding-bottom: 20px !important; }
.mobile-page .nova-entrega-modal .nova-entrega-garcom {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 22px 4px !important;
    color: #475467 !important;
    font: 500 14px/1.4 "Segoe UI", Arial, sans-serif !important;
    text-align: center !important;
}
.mobile-page .nova-entrega-modal .nova-entrega-label {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 22px 7px !important;
    color: var(--mobile-navy) !important;
    font: 700 16px/1.2 "Segoe UI", Arial, sans-serif !important;
    text-align: left !important;
}
.mobile-page .nova-entrega-modal .nova-entrega-busca {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 22px !important;
}
.mobile-page .nova-entrega-modal #buscarcliente { width: 100% !important; margin: 0 !important; }
.mobile-page .nova-entrega-modal #addclie {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 1px solid #9fd6c2 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    background: #ecfdf3 !important;
    object-fit: contain !important;
}
.mobile-page .nova-entrega-modal #innomecadreturn {
    width: calc(100% - 44px) !important;
    margin: 10px 22px 0 !important;
}
.mobile-page .nova-entrega-modal #addcliereturn {
    width: calc(100% - 44px) !important;
    margin: 10px 22px 0 !important;
    border: 0 !important;
}
.mobile-page .nova-entrega-modal .nova-entrega-acoes {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 16px 0 0 !important;
    padding: 0 22px !important;
}
.mobile-page .nova-entrega-modal #continuarentrega,
.mobile-page .nova-entrega-modal .nova-entrega-cancelar {
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    font: 700 15px/1 "Segoe UI", Arial, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer;
}
.mobile-page .nova-entrega-modal #continuarentrega {
    border-color: var(--mobile-green) !important;
    background: var(--mobile-green) !important;
}
.mobile-page .nova-entrega-modal .nova-entrega-cancelar {
    border-color: var(--mobile-danger) !important;
    background: var(--mobile-danger) !important;
}

@media (max-width: 600px) {
    .mobile-page .easy-numpad-frame { padding: 10px !important; }
    .mobile-page .easy-numpad-container,
    .mobile-page .easy-numpad-container2 { max-height: calc(100dvh - 20px) !important; }
    .mobile-page .easy-numpad-output-container { padding: 18px 16px !important; }
    .mobile-page .cliente-modal #formulario-login form { grid-template-columns: 1fr !important; }
    .mobile-page .cliente-modal .lbnomecad { grid-column: 1 !important; }
    .mobile-page .produtos-modal .easy-numpad-output-container { padding: 16px 14px 18px !important; }
    .mobile-page .produtos-modal #returnprod { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .mobile-page .resultado-produto-nome { white-space: normal; }
    .mobile-page .nova-entrega-modal .nova-entrega-garcom,
    .mobile-page .nova-entrega-modal .nova-entrega-label,
    .mobile-page .nova-entrega-modal .nova-entrega-busca,
    .mobile-page .nova-entrega-modal .nova-entrega-acoes { padding-left: 16px !important; padding-right: 16px !important; }
    .mobile-page .nova-entrega-modal #innomecadreturn,
    .mobile-page .nova-entrega-modal #addcliereturn { width: calc(100% - 32px) !important; margin-left: 16px !important; margin-right: 16px !important; }
}