/* =========================================================
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:
    #2563eb;

font-size:
    12px;

font-weight:
    800;

text-transform:
    uppercase;

letter-spacing:
    0.06em;

}

.cliente-pedido-header h1 {

margin:
    0;

color:
    #111827;

font-size:
    32px;

}

.cliente-pedido-header p {

margin:
    7px
    0
    0;

color:
    #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
    #dbeafe;

border-radius:
    10px;

background:
    #eff6ff;

color:
    #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:
    #dbeafe;

box-shadow:
    0
    4px
    12px
    rgba(
        37,
        99,
        235,
        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:
    #ffffff;

border:
    1px solid
    #e5e7eb;

border-radius:
    16px;

box-shadow:
    0
    5px
    18px
    rgba(
        15,
        23,
        42,
        0.05
    );

}

.cliente-pedido-status-label {

display:
    block;

margin-bottom:
    8px;

color:
    #6b7280;

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

}

.cliente-pedido-status {

display:
    inline-flex;

padding:
    7px
    11px;

border-radius:
    999px;

font-size:
    12px;

font-weight:
    800;

}

.cliente-pedido-status.pendente {

background:
    #fffbeb;

color:
    #b45309;

}

.cliente-pedido-status.aceito {

background:
    #eff6ff;

color:
    #1d4ed8;

}

.cliente-pedido-status.preparando {

background:
    #fef3c7;

color:
    #92400e;

}

.cliente-pedido-status.saiu-entrega {

background:
    #ecfdf5;

color:
    #047857;

}

.cliente-pedido-status.entregue {

background:
    #ecfdf5;

color:
    #047857;

}

.cliente-pedido-status.cancelado {

background:
    #fef2f2;

color:
    #b91c1c;

}

.cliente-pedido-live {

color:
    #047857;

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-live.danger {

color:
    #b91c1c;

}

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

.cliente-pedido-section {

margin-bottom:
    22px;

}

.cliente-pedido-section-header {

margin-bottom:
    11px;

}

.cliente-pedido-section-header h2 {

margin:
    0;

color:
    #111827;

font-size:
    19px;

}

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

.cliente-pedido-timeline {

display:
    flex;

align-items:
    flex-start;

justify-content:
    space-between;

gap:
    5px;

padding:
    22px
    15px;

background:
    #ffffff;

border:
    1px solid
    #e5e7eb;

border-radius:
    16px;

}

.cliente-pedido-timeline-item {

position:
    relative;

z-index:
    1;

display:
    flex;

flex:
    1;

flex-direction:
    column;

align-items:
    center;

gap:
    8px;

color:
    #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:
    #e5e7eb;

color:
    #6b7280;

font-size:
    12px;

font-weight:
    900;

}

.cliente-pedido-timeline-item.completed {

color:
    #047857;

}

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

background:
    #10b981;

color:
    #ffffff;

}

.cliente-pedido-timeline-item.current {

color:
    #1d4ed8;

}

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

background:
    #2563eb;

color:
    #ffffff;

box-shadow:
    0
    0
    0
    5px
    rgba(
        37,
        99,
        235,
        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:
    #ffffff;

border:
    1px solid
    #e5e7eb;

border-radius:
    16px;

}

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

display:
    block;

margin-bottom:
    5px;

color:
    #6b7280;

font-size:
    11px;

font-weight:
    700;

text-transform:
    uppercase;

}

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

display:
    block;

color:
    #111827;

font-size:
    14px;

}

.cliente-pedido-delivery-card small {

display:
    block;

margin-top:
    4px;

color:
    #6b7280;

}

.cliente-pedido-track-box {

display:
    flex;

align-items:
    center;

gap:
    10px;

grid-column:
    1 / -1;

margin-top:
    2px;

padding:
    13px;

border-radius:
    11px;

background:
    #eff6ff;

color:
    #1d4ed8;

}

.cliente-pedido-track-box > span {

font-size:
    24px;

}

.cliente-pedido-track-box strong {

color:
    #1d4ed8;

}

.cliente-pedido-track-box small {

color:
    #4b5563;

}

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

.cliente-pedido-items {

overflow:
    hidden;

background:
    #ffffff;

border:
    1px solid
    #e5e7eb;

border-radius:
    16px;

}

.cliente-pedido-item {

display:
    grid;

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

align-items:
    center;

gap:
    12px;

padding:
    15px
    18px;

border-bottom:
    1px solid
    #eef0f3;

}

.cliente-pedido-item:last-child {

border-bottom:
    0;

}

.cliente-pedido-item-quantity {

color:
    #2563eb;

font-weight:
    900;

}

.cliente-pedido-item-name strong {

color:
    #111827;

font-size:
    13px;

}

.cliente-pedido-item-price {

color:
    #111827;

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-empty-items {

padding:
    25px;

color:
    #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:
    12px;

background:
    #eff6ff;

font-size:
    24px;

}

.cliente-pedido-address-card strong {

color:
    #111827;

font-size:
    14px;

line-height:
    1.6;

}

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

.cliente-pedido-summary {

overflow:
    hidden;

background:
    #ffffff;

border:
    1px solid
    #e5e7eb;

border-radius:
    16px;

}

.cliente-pedido-summary > div {

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    15px;

padding:
    13px
    18px;

border-bottom:
    1px solid
    #eef0f3;

}

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

border-bottom:
    0;

}

.cliente-pedido-summary span {

color:
    #6b7280;

font-size:
    13px;

}

.cliente-pedido-summary strong {

color:
    #111827;

font-size:
    13px;

}

.cliente-pedido-summary-total {

background:
    #f9fafb;

}

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

color:
    #111827;

font-size:
    16px;

font-weight:
    900;

}

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

.cliente-pedido-pix-card {

position:
    relative;

overflow:
    hidden;

margin-top:
    16px;

padding:
    0;

background:
    #ffffff;

border:
    1px solid
    #dbeafe;

border-radius:
    20px;

box-shadow:
    0
    8px
    30px
    rgba(
        37,
        99,
        235,
        0.08
    );

}

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

.cliente-pedido-pix-header {

display:
    flex;

align-items:
    center;

gap:
    16px;

padding:
    22px
    24px;

background:
    linear-gradient(
        135deg,
        #eff6ff 0%,
        #ffffff 75%
    );

border-bottom:
    1px solid
    #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:
    16px;

background:
    #2563eb;

color:
    #ffffff;

font-size:
    15px;

font-weight:
    900;

letter-spacing:
    0.04em;

box-shadow:
    0
    7px
    18px
    rgba(
        37,
        99,
        235,
        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:
    #111827;

font-size:
    19px;

font-weight:
    900;

}

.cliente-pedido-pix-header p {

margin:
    6px
    0
    0;

color:
    #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:
    999px;

font-size:
    10px;

font-weight:
    900;

text-transform:
    uppercase;

letter-spacing:
    0.03em;

}

.cliente-pedido-pix-status.pending {

background:
    #fffbeb;

color:
    #b45309;

}

.cliente-pedido-pix-status.paid {

background:
    #ecfdf5;

color:
    #047857;

}

.cliente-pedido-pix-status.failed {

background:
    #fef2f2;

color:
    #b91c1c;

}

.cliente-pedido-pix-success {

color:
    #047857 !important;

font-weight:
    800;

}

.cliente-pedido-pix-danger {

color:
    #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:
    #f8fbff;

border:
    1px solid
    #e0ecff;

border-radius:
    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:
    #2563eb;

color:
    #ffffff;

font-size:
    11px;

font-weight:
    900;

}

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

display:
    block;

color:
    #111827;

font-size:
    13px;

font-weight:
    900;

}

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

display:
    block;

margin-top:
    4px;

color:
    #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:
    #ffffff;

border:
    1px solid
    #dbeafe;

border-radius:
    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(
            37,
            99,
            235,
            0.09
        ) 0%,
        rgba(
            37,
            99,
            235,
            0
        ) 68%
    );

}

.cliente-pedido-pix-image {

position:
    relative;

z-index:
    1;

display:
    block;

width:
    210px;

height:
    210px;

padding:
    7px;

background:
    #ffffff;

object-fit:
    contain;

}

.cliente-pedido-pix-qr-caption {

margin-top:
    13px;

color:
    #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:
    #ffffff;

border:
    1px dashed
    #93c5fd;

border-radius:
    14px;

text-align:
    center;

}

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

color:
    #374151;

font-size:
    13px;

font-weight:
    800;

}

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

margin-top:
    7px;

color:
    #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
    #dbeafe;

border-radius:
    50%;

background:
    #eff6ff;

color:
    #2563eb;

font-size:
    11px;

font-weight:
    900;

}

.cliente-pedido-pix-instruction strong {

display:
    block;

color:
    #111827;

font-size:
    13px;

font-weight:
    800;

}

.cliente-pedido-pix-instruction small {

display:
    block;

margin-top:
    3px;

color:
    #6b7280;

font-size:
    11px;

line-height:
    1.45;

}

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

.cliente-pedido-pix-copy {

padding:
    17px;

background:
    #f8fafc;

border:
    1px solid
    #e5e7eb;

border-radius:
    14px;

}

.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:
    #111827;

font-size:
    13px;

font-weight:
    900;

}

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

display:
    block;

margin-top:
    4px;

color:
    #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
    #d1d5db;

border-radius:
    9px;

background:
    #ffffff;

color:
    #374151;

font-family:
    monospace;

font-size:
    11px;

outline:
    none;

}

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

border-color:
    #2563eb;

box-shadow:
    0
    0
    0
    3px
    rgba(
        37,
        99,
        235,
        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:
    9px;

background:
    #2563eb;

color:
    #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:
    #1d4ed8;

box-shadow:
    0
    5px
    14px
    rgba(
        37,
        99,
        235,
        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:
    #6b7280;

font-size:
    11px;

}

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

color:
    #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:
    #f8fafc;

border:
    1px solid
    #e5e7eb;

border-radius:
    11px;

}

.cliente-pedido-pix-info-icon {

display:
    flex;

align-items:
    center;

justify-content:
    center;

flex:
    0 0 auto;

width:
    32px;

height:
    32px;

border-radius:
    9px;

background:
    #eff6ff;

color:
    #2563eb;

font-size:
    13px;

font-weight:
    900;

}

.cliente-pedido-pix-info div {

min-width:
    0;

}

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

display:
    block;

color:
    #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:
    #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:
    #f0fdf4;

border:
    1px solid
    #dcfce7;

border-radius:
    11px;

}

.cliente-pedido-pix-security > span {

font-size:
    18px;

}

.cliente-pedido-pix-security strong {

display:
    block;

color:
    #166534;

font-size:
    11px;

font-weight:
    900;

}

.cliente-pedido-pix-security small {

display:
    block;

margin-top:
    2px;

color:
    #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
    #fde68a;

border-radius:
    14px;

background:
    #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:
    14px;

background:
    #fef3c7;

color:
    #b45309;

font-size:
    12px;

font-weight:
    900;

}

.cliente-pedido-pix-waiting strong {

display:
    block;

color:
    #92400e;

font-size:
    14px;

}

.cliente-pedido-pix-waiting p {

max-width:
    430px;

margin:
    7px
    0
    0;

color:
    #78716c;

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:
        16px;
}


.cliente-pedido-pix-header {

    align-items:
        flex-start;

    gap:
        11px;

    padding:
        16px;
}


.cliente-pedido-pix-icon {

    width:
        45px;

    height:
        45px;

    border-radius:
        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;
}

}