/*
 * public_flow.css — acabamento compartilhado dos fluxos publicos
 * (carrinho, confirmacao e detalhe/lista de pedido).
 *
 * Mesma direcao do detalhe de produto e do checkout:
 *   - componentes mais compactos no mobile (menos padding, raio e texto menores)
 *
 * Escopo geral: .mv-flow-compact (adicionada no wrapper de cada pagina).
 * Nao usa cor fixa — o tema/cor vem de body[data-store-theme] e --brand-primary.
 * O checkout tem o seu proprio arquivo (checkout.css) por ter campos especificos.
 */

/* Cart flow */

.mv-clean-public-shell {
    max-width: 1360px;
}

.mv-clean-public-shell::before {
    display: none;
}

.mv-clean-public-shell .ds-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-store-theme="light"] .mv-clean-public-shell .ds-card {
    background: #ffffff;
}

.cart-flow {
    --flow-line: rgba(148, 163, 184, 0.22);
    --flow-muted: #64748b;
    --flow-surface: rgba(255, 255, 255, 0.92);
    --flow-soft: rgba(248, 250, 252, 0.88);
    --flow-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
    padding-top: 0.75rem !important;
}

body[data-store-theme="dark"] .cart-flow {
    --flow-line: rgba(255, 255, 255, 0.1);
    --flow-muted: #94a3b8;
    --flow-surface: rgba(15, 23, 42, 0.72);
    --flow-soft: rgba(255, 255, 255, 0.045);
    --flow-shadow: none;
}

/* ==========================================================================
   Historico de pedidos do cliente (orders/order_list.html)
   ========================================================================== */

.mv-order-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.3rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.mv-order-tabs::-webkit-scrollbar {
    display: none;
}

body[data-store-theme="dark"] .mv-order-tabs {
    background: rgba(255, 255, 255, 0.06);
}

.mv-order-tab {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    padding: 0.55rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
    scroll-snap-align: start;
}

body[data-store-theme="dark"] .mv-order-tab {
    color: #94a3b8;
}

.mv-order-tab.is-active {
    background: var(--brand-primary, var(--main-color));
    color: #fff;
}

.mv-order-period select {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: transparent;
    color: inherit;
}

.mv-order-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.mv-order-badge--success { background: rgba(16, 185, 129, 0.14); color: #0d9488; }
.mv-order-badge--warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.mv-order-badge--info { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.mv-order-badge--danger { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.mv-order-badge--neutral { background: rgba(148, 163, 184, 0.16); color: #475569; }

body[data-store-theme="dark"] .mv-order-badge--success { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
body[data-store-theme="dark"] .mv-order-badge--warning { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
body[data-store-theme="dark"] .mv-order-badge--info { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
body[data-store-theme="dark"] .mv-order-badge--danger { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
body[data-store-theme="dark"] .mv-order-badge--neutral { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }

.mv-order-delivery-box {
    background: rgba(148, 163, 184, 0.06);
}

body[data-store-theme="dark"] .mv-order-delivery-box {
    background: rgba(255, 255, 255, 0.03);
}

.mv-order-item-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.6rem;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
    font-size: 1.1rem;
}

.mv-order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-order-reorder-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid var(--brand-primary, var(--main-color));
    color: var(--brand-primary, var(--main-color));
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}

.mv-order-reorder-btn:hover {
    background: var(--brand-primary, var(--main-color));
    color: #fff;
}

.cart-flow__hero {
    border-radius: 1.5rem;
}

/* Superficies planas (sem blur/degrade — evita cara de IA) */
.cart-flow__item,
.cart-flow__summary,
.cart-flow__empty {
    border-color: var(--flow-line);
    background: var(--flow-surface);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Item do carrinho: miniatura a esquerda + corpo a direita */
.cart-flow__item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.cart-flow__item-image-link {
    display: block;
    flex: 0 0 auto;
}

.cart-flow__item-image {
    width: 6.5rem;
    height: 8rem;
    border-radius: 0.85rem;
    object-fit: cover;
    background: var(--flow-soft);
}

.cart-flow__item-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cart-flow__item-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cart-flow__item-name:hover {
    color: var(--brand-primary, var(--main-color));
}

.cart-flow__item-meta {
    font-size: 0.8rem;
    line-height: 1.4;
}

.cart-flow__item-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.cart-flow__item-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-primary, var(--main-color));
}

.cart-flow__item-price-old {
    font-size: 0.8rem;
    text-decoration: line-through;
}

/* Linha do editor de quantidade + remover */
.cart-flow__qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.cart-flow__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--flow-line);
    border-radius: 0.7rem;
    overflow: hidden;
}

.cart-flow__qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: transparent;
    color: var(--brand-primary, var(--main-color));
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cart-flow__qty-btn:hover {
    background: color-mix(in srgb, var(--brand-primary, var(--main-color)) 10%, transparent);
}

.cart-flow__qty-btn:active {
    transform: scale(0.94);
}

.cart-flow__qty-input {
    width: 2.6rem;
    height: 2.2rem;
    border: none;
    border-left: 1px solid var(--flow-line);
    border-right: 1px solid var(--flow-line);
    background: transparent;
    color: inherit;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
}

.cart-flow__remove-text {
    background: transparent;
    border: none;
    color: var(--flow-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cart-flow__remove-text:hover {
    color: #ef4444;
}

.cart-flow__total {
    border-radius: 1.25rem;
}

.cart-flow__coupon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.cart-flow__coupon-row input {
    min-width: 0;
    width: 100%;
}

.cart-flow__coupon-row button {
    white-space: nowrap;
}

/* Payment flow */

.payment-flow {
    --flow-line: rgba(148, 163, 184, 0.22);
    --flow-surface: rgba(255, 255, 255, 0.92);
    --flow-soft: rgba(248, 250, 252, 0.88);
    --flow-shadow: none;
    padding-top: 0.75rem !important;
}

body[data-store-theme="dark"] .payment-flow {
    --flow-line: rgba(255, 255, 255, 0.1);
    --flow-surface: rgba(15, 23, 42, 0.72);
    --flow-soft: rgba(255, 255, 255, 0.045);
    --flow-shadow: none;
}

.payment-flow__summary,
.payment-flow__panel,
.payment-flow__option {
    border-color: var(--flow-line);
    border-width: 1px !important;
    background: var(--flow-surface);
    box-shadow: none;
}

.payment-flow__summary:hover,
.payment-flow__panel:hover,
.payment-flow__option:hover {
    border-color: color-mix(in srgb, var(--brand-primary, var(--main-color)) 44%, var(--flow-line)) !important;
    box-shadow: none;
}

.payment-flow__amount {
    border-color: var(--flow-line);
    background: var(--flow-soft);
}

.payment-flow__summary,
.payment-flow__panel {
    border-radius: 1.25rem !important;
    padding: 1.1rem !important;
}

.payment-flow__qr-box {
    border-color: var(--flow-line);
    background: var(--flow-soft);
    border-radius: 1.1rem !important;
    padding: 1rem !important;
}

.payment-flow__summary > .inline-flex.h-14.w-14 {
    height: 2.75rem !important;
    width: 2.75rem !important;
    border-radius: 0.95rem !important;
}

.payment-flow__summary > .inline-flex.h-14.w-14 .text-3xl {
    font-size: 1.55rem !important;
}

.payment-flow__panel input,
.payment-flow__panel select,
.payment-flow__panel textarea,
.payment-flow__panel .mp-field {
    min-height: 2.75rem;
    border-color: var(--flow-line);
}

.payment-flow__option {
    border-radius: 1.25rem !important;
    padding: 1.1rem !important;
}

.payment-flow__layout {
    align-items: start;
}

.payment-flow__option .h-14.w-14 {
    height: 2.75rem !important;
    width: 2.75rem !important;
    border-radius: 0.95rem !important;
}

.payment-flow__option .text-3xl {
    font-size: 1.55rem !important;
}

.payment-flow__saved-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary, var(--main-color)) 44%, var(--flow-line, rgba(148, 163, 184, 0.22))) !important;
}

/* ==========================================================================
   Mobile — componentes mais compactos (<= 640px)
   ========================================================================== */

@media (max-width: 640px) {
    .mv-order-tabs {
        justify-content: flex-start;
    }

    .mv-order-tab {
        flex: 0 0 auto;
        min-width: 8.25rem;
        padding-inline: 1rem;
        font-size: 0.78rem;
    }

    .mv-order-period {
        width: 100%;
    }

    .mv-order-period select {
        width: 100%;
    }

    .mv-flow-compact {
        padding-inline: 0.75rem !important;
        padding-top: 1.25rem !important;
        padding-bottom: 2rem !important;
    }

    /* Hero premium (carrinho): compacto e sem o brilho pesado */
    .mv-flow-compact .ds-premium-hero {
        padding: 1.1rem 1.15rem !important;
        border-radius: 1.25rem;
        margin-bottom: 1.25rem !important;
    }

    .mv-flow-compact .ds-premium-hero::after {
        display: none;
    }

    /* Titulo principal menor (cobre ds-section-title e h1 dos pedidos) */
    .mv-flow-compact h1 {
        font-size: 1.6rem !important;
        line-height: 1.14 !important;
    }

    .mv-flow-compact .ds-premium-hero h1 {
        font-size: 1.35rem !important;
        margin-top: 0.6rem !important;
    }

    .mv-flow-compact .ds-premium-hero p {
        font-size: 0.82rem !important;
        margin-top: 0.5rem !important;
    }

    .mv-flow-compact .ds-kicker {
        font-size: 0.65rem;
        padding: 0.35rem 0.7rem;
        letter-spacing: 0.1em;
    }

    /* Diminui o espaco entre as colunas/blocos empilhados */
    .mv-flow-compact .grid.gap-8 {
        gap: 1.25rem !important;
    }

    .mv-flow-compact .grid.gap-6 {
        gap: 1rem !important;
    }

    /* Cards com menos padding e raio menor */
    .mv-flow-compact .ds-card {
        border-radius: 1.1rem !important;
        padding: 1.1rem !important;
    }

    .mv-flow-compact .ds-card > .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .mv-flow-compact .ds-card > .flex.items-center.justify-between a {
        align-self: flex-start;
    }

    .mv-order-delivery-box {
        padding: 1rem !important;
    }

    /* Titulos de secao menores */
    .mv-flow-compact h2.text-xl {
        font-size: 1.05rem !important;
    }

    /* Numero das etapas menor */
    .mv-flow-compact .ds-step-label {
        height: 1.65rem;
        width: 1.65rem;
        font-size: 0.8rem;
    }

    /* Painel de total menor */
    .mv-flow-compact .ds-total-panel {
        padding: 1rem 1.15rem !important;
        border-radius: 1.1rem;
    }

    .mv-flow-compact .ds-total-panel .text-2xl {
        font-size: 1.35rem !important;
    }

    /* Item do carrinho: miniatura menor no mobile */
    .cart-flow__item {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 0.8rem;
    }

    .cart-flow__item-image {
        width: 5rem;
        height: 6.25rem;
        border-radius: 0.75rem;
    }

    .cart-flow__item-name {
        font-size: 0.85rem;
    }

    .cart-flow__item-meta {
        font-size: 0.72rem;
    }

    .cart-flow__item-price {
        font-size: 1rem;
    }

    .cart-flow__qty-btn {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .cart-flow__qty-input {
        width: 2.2rem;
        height: 2rem;
    }

    .cart-flow__summary {
        position: static !important;
    }

    .cart-flow__coupon-row {
        gap: 0.55rem !important;
        grid-template-columns: 1fr;
    }

    .cart-flow__coupon-row button {
        width: 100%;
    }

    /* Cartoes grandes da pagina de pagamento (rounded-3xl + p-6): compactos */
    .mv-flow-compact .rounded-3xl {
        border-radius: 1.1rem !important;
    }

    .mv-flow-compact .rounded-3xl.p-6 {
        padding: 1.1rem !important;
    }

    /* Tiles de icone dos metodos de pagamento menores */
    .mv-flow-compact .rounded-3xl .h-14.w-14 {
        height: 3rem !important;
        width: 3rem !important;
        border-radius: 0.85rem !important;
    }

    .mv-flow-compact .rounded-3xl .h-14.w-14 .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Valor a pagar em destaque, porem menor no mobile */
    .mv-flow-compact aside .text-3xl {
        font-size: 1.6rem !important;
    }

    /* Titulos do resumo e dos metodos de pagamento menores no mobile */
    .payment-flow__summary h2,
    .payment-flow__option h3 {
        font-size: 1.02rem !important;
        line-height: 1.25 !important;
    }

    .payment-flow__summary .text-sm,
    .payment-flow__option p {
        font-size: 0.78rem;
    }

    .payment-flow__layout {
        gap: 1rem !important;
    }

    .payment-flow__summary {
        padding: 1rem !important;
    }

    .payment-flow__summary > .flex.items-start.justify-between {
        gap: 0.75rem;
    }

    .payment-flow__summary .tracking-\[0\.16em\],
    .payment-flow__option .tracking-\[0\.16em\] {
        letter-spacing: 0.08em !important;
    }

    .payment-flow__summary .rounded-full.px-3,
    .payment-flow__option .rounded-full.px-3 {
        padding-inline: 0.65rem !important;
        padding-block: 0.25rem !important;
        font-size: 0.66rem !important;
    }

    .payment-flow__amount {
        margin-top: 1rem !important;
        padding: 0.95rem !important;
        border-radius: 1rem !important;
    }

    .payment-flow__option > .flex,
    .payment-flow__option .flex.items-start.gap-4 {
        gap: 0.8rem !important;
    }

    .payment-flow__option .h-14.w-14 {
        height: 2.55rem !important;
        width: 2.55rem !important;
    }

    .payment-flow__option .text-3xl {
        font-size: 1.35rem !important;
    }

    .payment-flow__option h3 {
        overflow-wrap: anywhere;
    }

    .payment-flow__option p.mt-4 {
        margin-top: 0.7rem !important;
    }
}

/* ==========================================================================
   Carrinho — barra flutuante de checkout no mobile (padrao "sacola")
   Fica fixa no rodape enquanto a lista de itens rola, deixando o total e o
   botao de finalizar sempre visiveis. So aparece abaixo de lg (1024px), quando
   o resumo deixa de ser sidebar. Usa os tokens do flow (tema claro/escuro).
   ========================================================================== */

.cart-flow__mobilebar {
    display: none;
}

@media (max-width: 1023px) {
    .cart-flow__mobilebar {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 0.7rem 0.95rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body[data-store-theme="dark"] .cart-flow__mobilebar {
        background: rgba(15, 23, 42, 0.82);
        border-top-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }

    .cart-flow__mobilebar-info {
        display: flex;
        flex-direction: column;
        line-height: 1.05;
        min-width: 0;
        flex: 0 0 auto;
    }

    .cart-flow__mobilebar-label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: #475569;
    }

    body[data-store-theme="dark"] .cart-flow__mobilebar-label {
        color: #cbd5e1;
    }

    .cart-flow__mobilebar-total {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--brand-primary, var(--main-color));
        white-space: nowrap;
    }

    .cart-flow__mobilebar-cta {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.9rem 1.1rem;
        font-size: 0.98rem;
        font-weight: 700;
        border-radius: 1rem;
    }

    /* No mobile o checkout fica na barra fixa; esconde o botao do card */
    .cart-flow__checkout-desktop {
        display: none !important;
    }

    /* Espaco no fim para o conteudo/rodape nao ficar atras da barra */
    body:has(.cart-flow__mobilebar) {
        padding-bottom: 6rem;
    }

    /* Sobe o botao flutuante do WhatsApp para nao colidir com a barra fixa */
    body:has(.cart-flow__mobilebar) #whatsapp-float-container {
        bottom: calc(15px + 5rem) !important;
    }

    /* Sobe tambem o botao da Fika IA (assistente) junto, para nao colar no WhatsApp */
    body:has(.cart-flow__mobilebar) #copilot-widget-container {
        bottom: calc(160px + 5rem) !important;
    }

}

@media (max-width: 480px) {
    /* Telas pequenas: empilha o preco ACIMA do botao comprar (botao em largura total) */
    .cart-flow__mobilebar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .cart-flow__mobilebar-info {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
    }

    .cart-flow__mobilebar-cta {
        width: 100%;
    }

    body:has(.cart-flow__mobilebar) {
        padding-bottom: 8.5rem;
    }

    body:has(.cart-flow__mobilebar) #whatsapp-float-container {
        bottom: calc(15px + 7.5rem) !important;
    }

    body:has(.cart-flow__mobilebar) #copilot-widget-container {
        bottom: calc(160px + 7.5rem) !important;
    }
}