/* woo/orders.css — lista de pedidos (orders.php), cabeçalho de pedido
   (thankyou.php), dados do cliente e listagem simples de produtos.
   Depende de _variables.css. */

/* =====================================================================
   13. LISTA DE PRODUTOS (formato tabela/linha simples)
       Usado em: order-details.php, order-downloads.php
       (versão mais simples que a grade .dlv2-product-row da seção 3,
       sem select/botão de ação — usada quando é só listagem de itens)
   ===================================================================== */
.order-products {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.order-product-card {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--border-item-card);
    padding-bottom: 12px;
    align-items: center;
}

.product-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-thumb);
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-name {
    font-weight: 600;
    font-size: 14px;
}

.product-name a {
    color: var(--order-title);
    text-decoration: none;
}

.product-name a:hover {
    text-decoration: underline;
}

.product-meta {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 12px;
}

.product-total {
    color: var(--product-total-color);
    font-weight: 600;
    font-size: 14px;
}

.order-products-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 16px;
    color: var(--order-products-total-color);
}

.order-products-total-title {
    letter-spacing: 0.5px;
    font-size: 14px;
}

.order-products-total-value {
    /*color: var(--order-products-total-color);*/
}

.order-products-total-final {
    border-top: 1px solid var(--dlv2-border);
    padding-top: 10px;
}

@media (max-width: 376px) {
    .product-thumb {
        width: 50px;
        height: 50px;
    }

    .product-name {
        font-size: 13px;
    }

    .product-meta {
        font-size: 11px;
        flex-direction: column;
        gap: 2px;
    }

    .product-total {
        font-size: 13px;
    }
}


/* =====================================================================
   14. CABEÇALHO DE PEDIDO (thankyou.php)
   ===================================================================== */
.order-wrapper {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

.order-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 600;
    color: var(--status-completed-border);
    margin-bottom: 10px;
}

.order-info {
    font-size: 14px;
}

.order-info strong {
    color: var(--order-info-title);
}

@media (max-width: 1024px) {
    .order-wrapper {
        gap: 16px;
    }
}

@media (max-width: 920px) {
    .order-wrapper {
        margin-top: 25px;
    }
}

@media (max-width: 640px) {
    .order-wrapper {
        gap: 12px;
    }

    .order-title {
        font-size: 18px;
    }

    .order-info {
        font-size: 14px;
    }
}

@media (max-width: 376px) {
    .order-title {
        font-size: 16px;
    }

    .order-info {
        font-size: 13px;
    }
}


/* =====================================================================
   15. DADOS DO CLIENTE (order-details-customer.php)
   ===================================================================== */
.address-box {
    background: #fafafa;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
}

.info-pedido {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.info-pedido .order-card {
    width: 100%;
}

.order-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #253a6b;
}

.order-contact svg {
    width: 16px;
    height: 16px;
    fill: var(--primary);
    flex-shrink: 0;
}

.order-contact a {
    color: var(--link-email);
    font-weight: 600;
    text-decoration: none;
}

.order-contact a:hover {
    text-decoration: underline;
    color: var(--link-email-hover);
}

@media (max-width: 1024px) {
    .info-pedido {
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .info-pedido {
        flex-direction: column;
        gap: 12px;
    }

    .order-contact {
        font-size: 14px;
        flex-wrap: wrap;
        word-break: break-word;
    }
}

@media (max-width: 376px) {
    .order-contact {
        font-size: 13px;
        flex-wrap: wrap;
        word-break: break-word;
    }

    .order-contact svg {
        width: 16px;
        height: 16px;
    }
}


/* =====================================================================
   16. LISTA DE PEDIDOS (orders.php)
   ===================================================================== */

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Item ===== */
.order-item {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
    gap: 14px;

    padding: 14px;
    border-radius: var(--dlv2-radius);

    background: var(--background-card);
    border: 1px solid var(--border-card);

    font-size: 13px;
}

/* ===== Número do pedido ===== */
.order-number {
    font-weight: 600;
    text-decoration: none;
    color: var(--order-number-color);
    place-self: center;
    text-align: center;
    justify-self: start;
}

/* ===== Data ===== */
.order-date {
    color: var(--order-date-color);
    place-self: center;
    text-align: center;
}

/* ===== Status ===== */
.order-status {
    font-size: 11px;
    padding: 0 7px;
    border-radius: 14px;
    font-weight: 600;
    place-self: center;
    text-align: center;
}

/* ===== Quantidade de itens ===== */
.order-numbers-items {
    color: var(--order-numbers-items-color);
    border-radius: var(--dlv2-radius-sm);
    place-self: center;
    text-align: center;
}

/* ===== Total ===== */
.order-total {
    border-radius: var(--dlv2-radius-sm);
    color: var(--order-numbers-items-color);
    font-weight: 700;
    place-self: center;
    text-align: center;
}

/* ===== Ação ===== */
.order-action {
    place-self: center;
    text-align: center;
    justify-self: end;
}

/* ===== Botão ===== */
.btn-view {
    all: unset;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: var(--dlv2-prev-bg);
    border: 1px solid var(--dlv2-prev-border);
    color: var(--dlv2-prev-text);

    border-radius: var(--dlv2-radius-sm);
    padding: 3px 10px;

    font-weight: 600;
    text-decoration: none;
}

.btn-view:hover {
    background: var(--dlv2-prev-bg-hover);
    border-color: var(--dlv2-prev-border-hover);
    color: var(--dlv2-prev-text-hover);
}

.btn-view:focus {
    background: var(--dlv2-prev-bg-hover);
    border-color: var(--dlv2-prev-border-hover);
    color: var(--dlv2-prev-text);
}

.btn-view svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */

@media (max-width: 640px) {

    .orders-list {
        gap: 16px;
    }

    .order-item {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto auto;
        gap: 14px;
        border-radius: var(--dlv2-radius);
        font-size: 12px;
    }

    /* Linha 1 */
    .order-number {
        grid-column: 1;
    }

    .order-date {
        grid-column: 2 / 4;
        justify-self: center;
        place-self: center;
        text-align: center;
    }

    .order-status {
        grid-column: 4;
        justify-self: end;
        font-size: 10px;
    }

    /* Linha 2 */
    .order-numbers-items {
        width: 100%;
        padding: 4px 0;
        grid-column: 1 / 3;
        place-self: center;
        text-align: center;
        background: var(--order-numbers-items-bg);
        font-size: 16px;
    }

    .order-total {
        width: 100%;
        padding: 4px 0;
        grid-column: 3 / 5;
        place-self: center;
        text-align: center;
        background: var(--order-numbers-items-bg);
        font-size: 16px;
    }

    /* Linha 3 */
    .order-action {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: center;
        display: flex;
    }

    .order-action .mini-btn {
        width: 100%;
        justify-content: center;
        font-size: 13px;
    }
}