/* Responsive refinements for the four-step operation flow. */
.operation-search-form > small{grid-column:1/-1;color:#697a93;font-size:.75rem;line-height:1.4}
.operation-page .operation-whatsapp{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:10px 14px;border:1px solid #dfe6f0;border-radius:12px;background:#f7f9fc;color:#42617f;font-size:.85rem;line-height:1.4;cursor:pointer;box-sizing:border-box}
.operation-page .operation-whatsapp>input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 20px;width:20px;height:20px;min-width:20px;min-height:20px;margin:0;padding:0;border:2px solid #9aabc0;border-radius:6px;background:#fff;cursor:pointer}
.operation-page .operation-whatsapp>input[type="checkbox"]:checked{border-color:#f68b1f;background:#f68b1f}
.operation-page .operation-whatsapp>input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.operation-page .operation-whatsapp>input[type="checkbox"]:focus-visible{outline:3px solid #2468b8;outline-offset:3px}
.operation-page .operation-whatsapp>span{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.operation-page .operation-whatsapp>span>i{flex-shrink:0;color:#15975b;font-size:1.05rem}
.operation-page .operation-whatsapp:hover{border-color:#aebfd3}
.operation-page .operation-whatsapp:has(>input:checked){border-color:#f8cf9f;background:#fff8ef}
.operation-page .operation-whatsapp:has(>input:disabled){opacity:.6;cursor:not-allowed}
.operation-customer-whatsapp{grid-column:1/-1;justify-self:start;max-width:100%}
@media(forced-colors:active){.operation-page .operation-whatsapp>input[type="checkbox"]{appearance:auto;-webkit-appearance:auto}.operation-page .operation-whatsapp>input[type="checkbox"]::after{content:none}}
@media(max-width:720px){.operation-page .operation-customer-whatsapp{width:100%;justify-self:stretch}}
.operation-steps-contained:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.operation-calculation-state{grid-column:1/-1;margin:0;padding:10px 14px;border-radius:10px;background:#fff4e7;color:#8d4b0c;font-size:.85rem}
.operation-calculation-state[hidden]{display:none}
.operation-confirm-grid.is-simple{grid-template-columns:minmax(0,1fr)}
.operation-confirm-grid.is-simple .operation-after-confirm{margin:0;padding:12px 16px}
.operation-confirm-grid.is-simple .operation-after-confirm h3{margin-bottom:6px}
.operation-confirm-grid.is-simple .operation-after-confirm ul{margin:0}
@media (max-width: 1050px) {
    .operation-content {
        padding-inline: 20px;
    }

    .operation-search-card,
    .operation-register {
        gap: 18px;
    }

    .operation-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .operation-summary {
        position: static;
    }

    .operation-amount-card {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
    }

    .operation-amount-card > .vx-button {
        grid-column: 1 / -1;
        justify-self: end;
        min-width: 220px;
    }
}

@media (max-width: 720px) {
    .operation-content {
        padding-inline: 14px;
    }

    .operation-heading {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .operation-heading > div {
        min-width: 0;
    }

    .operation-heading p,
    .operation-section-heading p,
    .operation-new-customer p {
        line-height: 1.45;
    }

    .operation-steps {
        gap: 0;
        margin-bottom: 12px;
    }

    .operation-steps li {
        min-width: 0;
        min-height: 52px;
    }

    .operation-steps li > span {
        width: 30px;
        height: 30px;
    }

    .operation-search-card,
    .operation-register,
    .operation-customer-card,
    .operation-amount-card,
    .operation-benefits,
    .operation-summary {
        padding: 16px;
    }

    .operation-search-form,
    .operation-register-form {
        gap: 12px;
    }

    .operation-search-form .vx-button,
    .operation-register-form .vx-button,
    .operation-amount-card > .vx-button,
    .operation-review-button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        justify-content: center;
    }

    .operation-phone-field,
    .operation-phone-field input,
    .operation-customer-identity,
    .operation-option-copy {
        min-width: 0;
    }

    .operation-customer-identity h2,
    .operation-customer-identity p,
    .operation-option-copy b,
    .operation-option-copy small,
    .operation-option-copy em,
    .operation-opportunity p {
        overflow-wrap: anywhere;
    }

    .operation-change {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        width: max-content;
        max-width: 100%;
    }

    .operation-workspace {
        gap: 12px;
    }

    .operation-amount-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .operation-amount-card .operation-section-heading,
    .operation-amount-card > .vx-button {
        grid-column: auto;
    }

    .operation-option {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        min-width: 0;
        padding: 12px;
    }

    .operation-switch {
        justify-self: end;
    }

    .operation-opportunity {
        align-items: flex-start;
        padding: 14px;
    }

    .operation-opportunity > span {
        flex: 0 0 40px;
    }

    .operation-summary dl > div {
        align-items: flex-start;
    }

    .operation-summary dt,
    .operation-summary dd {
        min-width: 0;
    }

    .operation-summary dd {
        text-align: right;
        overflow-wrap: anywhere;
    }

    .operation-total {
        gap: 12px;
    }

    .operation-total strong {
        text-align: right;
        overflow-wrap: anywhere;
    }

    .operation-result {
        gap: 14px;
        padding: 18px;
    }

    .operation-result-totals {
        width: 100%;
    }

    .operation-result-totals span {
        justify-content: space-between;
        text-align: left;
    }

    .operation-result .vx-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .operation-confirm-modal {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        overscroll-behavior: contain;
    }

    .operation-confirm-header h2,
    .operation-confirm-header p,
    .operation-confirm-body dt,
    .operation-confirm-body dd,
    .operation-benefit-review-card > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .operation-confirm-actions .vx-button,
    .operation-benefit-actions .vx-button,
    .operation-modal-back {
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .operation-content {
        padding-inline: 10px;
    }

    .operation-heading > span {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .operation-steps {
        border-radius: 14px;
    }

    .operation-steps li {
        min-height: 50px;
    }

    .operation-steps li > span {
        width: 29px;
        height: 29px;
    }

    .operation-search-card,
    .operation-register,
    .operation-customer-card,
    .operation-amount-card,
    .operation-benefits,
    .operation-summary {
        padding: 14px;
        border-radius: 16px !important;
    }

    .operation-customer-card {
        gap: 12px;
    }

    .operation-customer-balance {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .operation-option {
        grid-template-columns: 38px minmax(0, 1fr) 40px;
        gap: 9px;
        padding: 11px 10px;
    }

    .operation-opportunity {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }

    .operation-total {
        align-items: flex-start;
    }

    .operation-confirm-header {
        gap: 11px;
        padding: 17px 15px 15px;
    }

    .operation-confirm-header > span {
        flex-basis: 42px;
        height: 42px;
    }

    .operation-confirm-body {
        padding-inline: 15px;
    }

    .operation-confirm-body dl > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .operation-confirm-body dd {
        text-align: left;
    }

    .operation-confirm-total {
        gap: 12px;
    }

    .operation-confirm-total strong {
        text-align: right;
        overflow-wrap: anywhere;
    }

    .operation-confirm-actions,
    .operation-benefit-actions {
        padding: 13px 15px max(16px, env(safe-area-inset-bottom));
    }

    .operation-benefit-review-card {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 12px;
    }
}

@media (max-width: 390px) {
    .operation-search-card,
    .operation-register,
    .operation-customer-card,
    .operation-amount-card,
    .operation-benefits,
    .operation-summary {
        padding: 13px;
    }

    .operation-section-heading {
        gap: 9px;
    }

    .operation-phone-field > span {
        padding-inline: 10px;
    }

    .operation-phone-field input {
        padding-inline: 10px;
    }

    .operation-alert,
    .operation-no-benefits {
        padding: 12px;
    }
}