/* =========================================================
   MC2 DELIVERY — cliente_pedido.css
   FASE 4 — PADRONIZAÇÃO VISUAL
   Cores, raios e sombras usam o Design System global.
========================================================= */

/* =========================================================
MC2 DELIVERY
PEDIDO DO CLIENTE
========================================================= */

.cliente-pedido-page {

min-height: 70vh;

padding:
    35px
    20px
    60px;

}

.cliente-pedido-container {

width:
    min(
        950px,
        100%
    );

margin:
    0
    auto;

}

/* =========================================================
CABEÇALHO
========================================================= */

.cliente-pedido-header {

display:
    flex;

align-items:
    flex-end;

justify-content:
    space-between;

gap:
    20px;

margin-bottom:
    25px;

}

.cliente-pedido-eyebrow {

display:
    inline-block;

margin-bottom:
    7px;

color:
    var(--mc2-info, #2563EB);

font-size:
    12px;

font-weight:
    800;

text-transform:
    uppercase;

letter-spacing:
    0.06em;

}

.cliente-pedido-header h1 {

margin:
    0;

color:
    var(--mc2-text, #111827);

font-size:
    32px;

}

.cliente-pedido-header p {

margin:
    7px
    0
    0;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    14px;

}

.cliente-pedido-back {

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

min-height:
    42px;

padding:
    9px
    14px;

border:
    1px solid
    var(--mc2-info-border, #DBEAFE);

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-info-soft, #EFF6FF);

color:
    var(--mc2-info-hover, #1D4ED8);

text-decoration:
    none;

font-size:
    13px;

font-weight:
    800;

transition:
    background
    0.2s ease,
    transform
    0.2s ease,
    box-shadow
    0.2s ease;

}

.cliente-pedido-back:hover {

background:
    var(--mc2-info-border, #DBEAFE);

box-shadow:
    0
    4px
    12px
    rgba(var(--mc2-info-rgb), 0.10);

transform:
    translateY(
        -1px
    );

}

/* =========================================================
STATUS
========================================================= */

.cliente-pedido-status-card {

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    20px;

padding:
    20px;

margin-bottom:
    22px;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

box-shadow:
    var(--mc2-shadow-sm);

}

.cliente-pedido-status-label {

display:
    block;

margin-bottom:
    8px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

}

.cliente-pedido-status {

display:
    inline-flex;

padding:
    7px
    11px;

border-radius:
    var(--mc2-radius-pill, 999px);

font-size:
    12px;

font-weight:
    800;

}

.cliente-pedido-status.pendente {

background:
    var(--mc2-warning-soft, #FFFBEB);

color:
    var(--mc2-warning, #B45309);

}

.cliente-pedido-status.aceito {

background:
    var(--mc2-info-soft, #EFF6FF);

color:
    var(--mc2-info-hover, #1D4ED8);

}

.cliente-pedido-status.preparando {

background:
    var(--mc2-warning-soft, #FFFBEB);

color:
    var(--mc2-warning-strong, #92400E);

}

.cliente-pedido-status.saiu-entrega {

background:
    var(--mc2-success-soft, #ECFDF5);

color:
    var(--mc2-success, #047857);

}

.cliente-pedido-status.entregue {

background:
    var(--mc2-success-soft, #ECFDF5);

color:
    var(--mc2-success, #047857);

}

.cliente-pedido-status.cancelado {

background:
    var(--mc2-danger-soft, #FEF2F2);

color:
    var(--mc2-danger, #B91C1C);

}

.cliente-pedido-live {

color:
    var(--mc2-success, #047857);

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-live.danger {

color:
    var(--mc2-danger, #B91C1C);

}

/* =========================================================
SEÇÕES
========================================================= */

.cliente-pedido-section {

margin-bottom:
    22px;

}

.cliente-pedido-section-header {

margin-bottom:
    11px;

}

.cliente-pedido-section-header h2 {

margin:
    0;

color:
    var(--mc2-text, #111827);

font-size:
    19px;

}

/* =========================================================
TIMELINE
========================================================= */

.cliente-pedido-timeline {

display:
    flex;

align-items:
    flex-start;

justify-content:
    space-between;

gap:
    5px;

padding:
    22px
    15px;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

}

.cliente-pedido-timeline-item {

position:
    relative;

z-index:
    1;

display:
    flex;

flex:
    1;

flex-direction:
    column;

align-items:
    center;

gap:
    8px;

color:
    var(--mc2-text-muted, #9CA3AF);

text-align:
    center;

font-size:
    11px;

font-weight:
    700;

}

.cliente-pedido-timeline-marker {

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    34px;

height:
    34px;

border-radius:
    50%;

background:
    var(--mc2-border, #E5E7EB);

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    12px;

font-weight:
    900;

}

.cliente-pedido-timeline-item.completed {

color:
    var(--mc2-success, #047857);

}

.cliente-pedido-timeline-item.completed
.cliente-pedido-timeline-marker {

background:
    var(--mc2-success, #047857);

color:
    var(--mc2-surface, #FFFFFF);

}

.cliente-pedido-timeline-item.current {

color:
    var(--mc2-info-hover, #1D4ED8);

}

.cliente-pedido-timeline-item.current
.cliente-pedido-timeline-marker {

background:
    var(--mc2-info, #2563EB);

color:
    var(--mc2-surface, #FFFFFF);

box-shadow:
    0
    0
    0
    5px
    rgba(var(--mc2-info-rgb), 0.12);

}

/* =========================================================
ENTREGA / PAGAMENTO
========================================================= */

.cliente-pedido-delivery-card,
.cliente-pedido-address-card,
.cliente-pedido-payment-card {

display:
    grid;

grid-template-columns:
    repeat(
        3,
        minmax(
            0,
            1fr
        )
    );

gap:
    18px;

padding:
    20px;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

}

.cliente-pedido-detail-label,
.cliente-pedido-payment-card span {

display:
    block;

margin-bottom:
    5px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

}

.cliente-pedido-delivery-card strong,
.cliente-pedido-payment-card strong {

display:
    block;

color:
    var(--mc2-text, #111827);

font-size:
    14px;

}

.cliente-pedido-delivery-card small {

display:
    block;

margin-top:
    4px;

color:
    var(--mc2-text-secondary, #6B7280);

}

.cliente-pedido-track-box {

display:
    flex;

align-items:
    center;

gap:
    10px;

grid-column:
    1 / -1;

margin-top:
    2px;

padding:
    13px;

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-info-soft, #EFF6FF);

color:
    var(--mc2-info-hover, #1D4ED8);

}

.cliente-pedido-track-box > span {

font-size:
    24px;

}

.cliente-pedido-track-box strong {

color:
    var(--mc2-info-hover, #1D4ED8);

}

.cliente-pedido-track-box small {

color:
    var(--mc2-text-soft, #4B5563);

}

/* =========================================================
ITENS
========================================================= */

.cliente-pedido-items {

overflow:
    hidden;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

}

.cliente-pedido-item {

display:
    grid;

grid-template-columns:
    60px
    1fr
    auto;

align-items:
    center;

gap:
    12px;

padding:
    15px
    18px;

border-bottom:
    1px solid
    var(--mc2-border-soft, #EEF0F3);

}

.cliente-pedido-item:last-child {

border-bottom:
    0;

}

.cliente-pedido-item-quantity {

color:
    var(--mc2-info, #2563EB);

font-weight:
    900;

}

.cliente-pedido-item-name strong {

color:
    var(--mc2-text, #111827);

font-size:
    13px;

}

.cliente-pedido-item-price {

color:
    var(--mc2-text, #111827);

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-empty-items {

padding:
    25px;

color:
    var(--mc2-text-secondary, #6B7280);

text-align:
    center;

}

/* =========================================================
ENDEREÇO
========================================================= */

.cliente-pedido-address-card {

grid-template-columns:
    55px
    1fr;

align-items:
    center;

}

.cliente-pedido-address-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    48px;

height:
    48px;

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-info-soft, #EFF6FF);

font-size:
    24px;

}

.cliente-pedido-address-card strong {

color:
    var(--mc2-text, #111827);

font-size:
    14px;

line-height:
    1.6;

}

/* =========================================================
RESUMO
========================================================= */

.cliente-pedido-summary {

overflow:
    hidden;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

}

.cliente-pedido-summary > div {

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    15px;

padding:
    13px
    18px;

border-bottom:
    1px solid
    var(--mc2-border-soft, #EEF0F3);

}

.cliente-pedido-summary > div:last-child {

border-bottom:
    0;

}

.cliente-pedido-summary span {

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    13px;

}

.cliente-pedido-summary strong {

color:
    var(--mc2-text, #111827);

font-size:
    13px;

}

.cliente-pedido-summary-total {

background:
    var(--mc2-bg, #F9FAFB);

}

.cliente-pedido-summary-total span,
.cliente-pedido-summary-total strong {

color:
    var(--mc2-text, #111827);

font-size:
    16px;

font-weight:
    900;

}

/* =========================================================
PIX
========================================================= */

.cliente-pedido-pix-card {

position:
    relative;

overflow:
    hidden;

margin-top:
    16px;

padding:
    0;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-info-border, #DBEAFE);

border-radius:
    20px;

box-shadow:
    0
    8px
    30px
    rgba(var(--mc2-info-rgb), 0.08);

}

/* =========================================================
CABEÇALHO PIX
========================================================= */

.cliente-pedido-pix-header {

display:
    flex;

align-items:
    center;

gap:
    16px;

padding:
    22px
    24px;

background:
    linear-gradient(
        135deg,
        var(--mc2-info-soft, #EFF6FF) 0%,
        var(--mc2-surface, #FFFFFF) 75%
    );

border-bottom:
    1px solid
    var(--mc2-border, #E5E7EB);

}

.cliente-pedido-pix-brand {

flex:
    0 0 auto;

}

.cliente-pedido-pix-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    56px;

height:
    56px;

border-radius:
    var(--mc2-radius-lg, 16px);

background:
    var(--mc2-info, #2563EB);

color:
    var(--mc2-surface, #FFFFFF);

font-size:
    15px;

font-weight:
    900;

letter-spacing:
    0.04em;

box-shadow:
    0
    7px
    18px
    rgba(var(--mc2-info-rgb), 0.22);

}

.cliente-pedido-pix-header-content {

min-width:
    0;

flex:
    1;

}

.cliente-pedido-pix-title-row {

display:
    flex;

align-items:
    center;

gap:
    10px;

flex-wrap:
    wrap;

}

.cliente-pedido-pix-header h3 {

margin:
    0;

color:
    var(--mc2-text, #111827);

font-size:
    19px;

font-weight:
    900;

}

.cliente-pedido-pix-header p {

margin:
    6px
    0
    0;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    13px;

line-height:
    1.55;

}

.cliente-pedido-pix-status {

display:
    inline-flex;

align-items:
    center;

min-height:
    24px;

padding:
    4px
    9px;

border-radius:
    var(--mc2-radius-pill, 999px);

font-size:
    10px;

font-weight:
    900;

text-transform:
    uppercase;

letter-spacing:
    0.03em;

}

.cliente-pedido-pix-status.pending {

background:
    var(--mc2-warning-soft, #FFFBEB);

color:
    var(--mc2-warning, #B45309);

}

.cliente-pedido-pix-status.paid {

background:
    var(--mc2-success-soft, #ECFDF5);

color:
    var(--mc2-success, #047857);

}

.cliente-pedido-pix-status.failed {

background:
    var(--mc2-danger-soft, #FEF2F2);

color:
    var(--mc2-danger, #B91C1C);

}

.cliente-pedido-pix-success {

color:
    var(--mc2-success, #047857) !important;

font-weight:
    800;

}

.cliente-pedido-pix-danger {

color:
    var(--mc2-danger, #B91C1C) !important;

font-weight:
    800;

}

/* =========================================================
ÁREA PRINCIPAL PIX
========================================================= */

.cliente-pedido-pix-main {

display:
    grid;

grid-template-columns:
    minmax(
        280px,
        0.9fr
    )
    minmax(
        0,
        1.1fr
    );

gap:
    24px;

padding:
    24px;

}

/* =========================================================
QR CODE
========================================================= */

.cliente-pedido-pix-qr {

display:
    flex;

flex-direction:
    column;

align-items:
    center;

padding:
    20px;

background:
    var(--mc2-info-soft, #EFF6FF);

border:
    1px solid
    var(--mc2-info-border, #DBEAFE);

border-radius:
    var(--mc2-radius-lg, 16px);

}

.cliente-pedido-pix-qr-heading {

display:
    flex;

align-items:
    flex-start;

align-self:
    stretch;

gap:
    10px;

margin-bottom:
    18px;

}

.cliente-pedido-pix-step {

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

flex:
    0 0 auto;

width:
    27px;

height:
    27px;

border-radius:
    50%;

background:
    var(--mc2-info, #2563EB);

color:
    var(--mc2-surface, #FFFFFF);

font-size:
    11px;

font-weight:
    900;

}

.cliente-pedido-pix-qr-heading strong {

display:
    block;

color:
    var(--mc2-text, #111827);

font-size:
    13px;

font-weight:
    900;

}

.cliente-pedido-pix-qr-heading small {

display:
    block;

margin-top:
    4px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

line-height:
    1.45;

}

.cliente-pedido-pix-qr-frame {

position:
    relative;

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    236px;

height:
    236px;

padding:
    8px;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px solid
    var(--mc2-info-border, #DBEAFE);

border-radius:
    var(--mc2-radius-lg, 16px);

box-shadow:
    0
    8px
    24px
    rgba(
        15,
        23,
        42,
        0.08
    );

box-sizing:
    border-box;

}

.cliente-pedido-pix-qr-glow {

position:
    absolute;

inset:
    -20px;

z-index:
    0;

pointer-events:
    none;

background:
    radial-gradient(
        circle,
        rgba(var(--mc2-info-rgb), 0.09) 0%,
        rgba(var(--mc2-info-rgb), 0) 68%
    );

}

.cliente-pedido-pix-image {

position:
    relative;

z-index:
    1;

display:
    block;

width:
    210px;

height:
    210px;

padding:
    7px;

background:
    var(--mc2-surface, #FFFFFF);

object-fit:
    contain;

}

.cliente-pedido-pix-qr-caption {

margin-top:
    13px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    10px;

text-align:
    center;

}

.cliente-pedido-pix-qr-fallback {

display:
    flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

width:
    220px;

min-height:
    180px;

padding:
    20px;

box-sizing:
    border-box;

background:
    var(--mc2-surface, #FFFFFF);

border:
    1px dashed
    var(--mc2-info-border, #DBEAFE);

border-radius:
    var(--mc2-radius-lg, 16px);

text-align:
    center;

}

.cliente-pedido-pix-qr-fallback span {

color:
    var(--mc2-text-soft, #4B5563);

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-pix-qr-fallback small {

margin-top:
    7px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

line-height:
    1.5;

}

/* =========================================================
PAGAMENTO / INSTRUÇÕES
========================================================= */

.cliente-pedido-pix-payment {

display:
    flex;

flex-direction:
    column;

gap:
    16px;

min-width:
    0;

}

.cliente-pedido-pix-instructions {

display:
    flex;

flex-direction:
    column;

gap:
    10px;

padding:
    4px
    0;

}

.cliente-pedido-pix-instruction {

display:
    flex;

align-items:
    flex-start;

gap:
    10px;

padding:
    10px
    0;

}

.cliente-pedido-pix-instruction-number {

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

flex:
    0 0 auto;

width:
    27px;

height:
    27px;

border:
    1px solid
    var(--mc2-info-border, #DBEAFE);

border-radius:
    50%;

background:
    var(--mc2-info-soft, #EFF6FF);

color:
    var(--mc2-info, #2563EB);

font-size:
    11px;

font-weight:
    900;

}

.cliente-pedido-pix-instruction strong {

display:
    block;

color:
    var(--mc2-text, #111827);

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-pix-instruction small {

display:
    block;

margin-top:
    3px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

line-height:
    1.45;

}

/* =========================================================
COPIA E COLA
========================================================= */

.cliente-pedido-pix-copy {

padding:
    17px;

background:
    var(--mc2-bg, #F9FAFB);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-lg, 16px);

}

.cliente-pedido-pix-copy-heading {

display:
    flex;

align-items:
    flex-start;

gap:
    10px;

margin-bottom:
    12px;

}

.cliente-pedido-pix-copy-heading strong {

display:
    block;

color:
    var(--mc2-text, #111827);

font-size:
    13px;

font-weight:
    900;

}

.cliente-pedido-pix-copy-heading small {

display:
    block;

margin-top:
    4px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

line-height:
    1.45;

}

.cliente-pedido-pix-copy-box {

display:
    flex;

align-items:
    stretch;

gap:
    8px;

}

.cliente-pedido-pix-copy-box input {

flex:
    1;

min-width:
    0;

height:
    45px;

padding:
    0
    12px;

box-sizing:
    border-box;

border:
    1px solid
    var(--mc2-border-strong, #D1D5DB);

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-surface, #FFFFFF);

color:
    var(--mc2-text-soft, #4B5563);

font-family:
    monospace;

font-size:
    11px;

outline:
    none;

}

.cliente-pedido-pix-copy-box input:focus {

border-color:
    var(--mc2-info, #2563EB);

box-shadow:
    0
    0
    0
    3px
    rgba(var(--mc2-info-rgb), 0.10);

}

.cliente-pedido-pix-copy-button {

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

gap:
    6px;

flex:
    0 0 auto;

min-width:
    125px;

height:
    45px;

padding:
    0
    15px;

border:
    0;

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-info, #2563EB);

color:
    var(--mc2-surface, #FFFFFF);

font-size:
    11px;

font-weight:
    900;

cursor:
    pointer;

transition:
    background
    0.2s ease,
    transform
    0.2s ease,
    box-shadow
    0.2s ease;

}

.cliente-pedido-pix-copy-button:hover {

background:
    var(--mc2-info-hover, #1D4ED8);

box-shadow:
    0
    5px
    14px
    rgba(var(--mc2-info-rgb), 0.22);

}

.cliente-pedido-pix-copy-button:active {

transform:
    translateY(
        1px
    );

}

.cliente-pedido-pix-copy-button span {

font-size:
    15px;

}

.cliente-pedido-pix-copy-message {

display:
    block;

min-height:
    16px;

margin-top:
    7px;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    11px;

}

.cliente-pedido-pix-copy-message.success {

color:
    var(--mc2-success, #047857);

font-weight:
    800;

}

/* =========================================================
INFORMAÇÕES DO PIX
========================================================= */

.cliente-pedido-pix-info-grid {

display:
    grid;

grid-template-columns:
    repeat(
        2,
        minmax(
            0,
            1fr
        )
    );

gap:
    10px;

padding:
    0
    24px
    18px;

}

.cliente-pedido-pix-info {

display:
    flex;

align-items:
    center;

gap:
    10px;

min-width:
    0;

padding:
    12px
    14px;

background:
    var(--mc2-bg, #F9FAFB);

border:
    1px solid
    var(--mc2-border, #E5E7EB);

border-radius:
    var(--mc2-radius-md, 12px);

}

.cliente-pedido-pix-info-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

flex:
    0 0 auto;

width:
    32px;

height:
    32px;

border-radius:
    var(--mc2-radius-md, 12px);

background:
    var(--mc2-info-soft, #EFF6FF);

color:
    var(--mc2-info, #2563EB);

font-size:
    13px;

font-weight:
    900;

}

.cliente-pedido-pix-info div {

min-width:
    0;

}

.cliente-pedido-pix-info div > span {

display:
    block;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    10px;

font-weight:
    700;

text-transform:
    uppercase;

}

.cliente-pedido-pix-info strong {

display:
    block;

max-width:
    100%;

margin-top:
    3px;

overflow:
    hidden;

color:
    var(--mc2-text, #111827);

font-family:
    monospace;

font-size:
    11px;

text-overflow:
    ellipsis;

white-space:
    nowrap;

}

/* =========================================================
SEGURANÇA
========================================================= */

.cliente-pedido-pix-security {

display:
    flex;

align-items:
    center;

gap:
    10px;

margin:
    0
    24px
    24px;

padding:
    12px
    14px;

background:
    var(--mc2-success-soft, #ECFDF5);

border:
    1px solid
    var(--mc2-success-soft, #ECFDF5);

border-radius:
    var(--mc2-radius-md, 12px);

}

.cliente-pedido-pix-security > span {

font-size:
    18px;

}

.cliente-pedido-pix-security strong {

display:
    block;

color:
    var(--mc2-success-hover, #065F46);

font-size:
    11px;

font-weight:
    900;

}

.cliente-pedido-pix-security small {

display:
    block;

margin-top:
    2px;

color:
    var(--mc2-text-soft, #4B5563);

font-size:
    10px;

}

/* =========================================================
PIX AGUARDANDO
========================================================= */

.cliente-pedido-pix-waiting {

display:
    flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

padding:
    35px
    24px;

margin:
    24px;

border:
    1px solid
    var(--mc2-warning-border, #FDE68A);

border-radius:
    var(--mc2-radius-lg, 16px);

background:
    var(--mc2-warning-soft, #FFFBEB);

text-align:
    center;

}

.cliente-pedido-pix-waiting-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

width:
    48px;

height:
    48px;

margin-bottom:
    12px;

border-radius:
    var(--mc2-radius-lg, 16px);

background:
    var(--mc2-warning-soft, #FFFBEB);

color:
    var(--mc2-warning, #B45309);

font-size:
    12px;

font-weight:
    900;

}

.cliente-pedido-pix-waiting strong {

display:
    block;

color:
    var(--mc2-warning-strong, #92400E);

font-size:
    14px;

}

.cliente-pedido-pix-waiting p {

max-width:
    430px;

margin:
    7px
    0
    0;

color:
    var(--mc2-text-secondary, #6B7280);

font-size:
    12px;

line-height:
    1.55;

}

/* =========================================================
RODAPÉ
========================================================= */

.cliente-pedido-footer {

padding-top:
    5px;

}

/* =========================================================
RESPONSIVIDADE
========================================================= */

@media (max-width: 800px) {

.cliente-pedido-pix-main {

    grid-template-columns:
        1fr;

}


.cliente-pedido-pix-qr {

    max-width:
        100%;

}

}

@media (max-width: 700px) {

.cliente-pedido-page {

    padding:
        25px
        15px
        45px;
}


.cliente-pedido-header {

    align-items:
        flex-start;

    flex-direction:
        column;
}


.cliente-pedido-status-card {

    align-items:
        flex-start;

    flex-direction:
        column;
}


.cliente-pedido-timeline {

    overflow-x:
        auto;

    justify-content:
        flex-start;
}


.cliente-pedido-timeline-item {

    min-width:
        100px;
}


.cliente-pedido-delivery-card,
.cliente-pedido-payment-card {

    grid-template-columns:
        1fr;
}


.cliente-pedido-pix-header {

    padding:
        18px;
}


.cliente-pedido-pix-main {

    padding:
        18px;
}


.cliente-pedido-pix-info-grid {

    padding:
        0
        18px
        18px;
}


.cliente-pedido-pix-security {

    margin:
        0
        18px
        18px;
}

}

@media (max-width: 600px) {

.cliente-pedido-pix-info-grid {

    grid-template-columns:
        1fr;
}


.cliente-pedido-pix-copy-box {

    flex-direction:
        column;
}


.cliente-pedido-pix-copy-button {

    width:
        100%;
}

}

@media (max-width: 500px) {

.cliente-pedido-header h1 {

    font-size:
        27px;
}


.cliente-pedido-item {

    grid-template-columns:
        45px
        1fr;
}


.cliente-pedido-item-price {

    grid-column:
        2;
}


.cliente-pedido-summary > div {

    align-items:
        flex-start;
}


.cliente-pedido-pix-card {

    border-radius:
        var(--mc2-radius-lg, 16px);
}


.cliente-pedido-pix-header {

    align-items:
        flex-start;

    gap:
        11px;

    padding:
        16px;
}


.cliente-pedido-pix-icon {

    width:
        45px;

    height:
        45px;

    border-radius:
        var(--mc2-radius-md, 12px);

    font-size:
        13px;
}


.cliente-pedido-pix-header h3 {

    font-size:
        16px;
}


.cliente-pedido-pix-header p {

    font-size:
        12px;
}


.cliente-pedido-pix-main {

    padding:
        15px;
}


.cliente-pedido-pix-qr {

    padding:
        15px;
}


.cliente-pedido-pix-qr-frame {

    width:
        216px;

    height:
        216px;
}


.cliente-pedido-pix-image {

    width:
        190px;

    height:
        190px;
}


.cliente-pedido-pix-copy {

    padding:
        14px;
}


.cliente-pedido-pix-info-grid {

    padding:
        0
        15px
        15px;
}


.cliente-pedido-pix-security {

    margin:
        0
        15px
        15px;
}


.cliente-pedido-pix-waiting {

    margin:
        15px;
}

}