/**

 * Carrinho Moderno - Design Ultra Clean

 * Baseado no HTML real do carrinho

 * @version 3.0

 */



/* ===== RESET & BASE ===== */

* {

    box-sizing: border-box;

}



.perfilmil-cart-page {

    background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);

    min-height: 100vh;

    padding: 40px 0 80px;

}



.bd-container {

    max-width: 1320px;

    margin: 0 auto;

    padding: 0 24px;

}



/* ===== BREADCRUMB ===== */

.cart-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 32px;

    font-size: 0.875rem;

    color: #667085;

    font-weight: 500;

}



.cart-breadcrumb a {

    color: #28a745;

    text-decoration: none;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

    font-weight: 600;

}



.cart-breadcrumb a:hover {

    color: #20c997;

}



.cart-breadcrumb i {

    font-size: 0.75rem;

    color: #98a2b3;

}



/* ===== TÍTULO DO CARRINHO ===== */

.cart-title {

    font-size: 1.75rem;

    font-weight: 700;

    color: #101828;

    margin: 0 0 28px 0;

    display: flex;

    align-items: center;

    gap: 12px;

    letter-spacing: -0.02em;

}



.cart-title i {

    color: #28a745;

    font-size: 1.5rem;

}



.cart-count {

    font-size: 0.95rem;

    font-weight: 500;

    color: #667085;

    margin-left: 6px;

}



/* ===== LAYOUT GRID ===== */

.cart-layout {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 40px;

    align-items: start;

}



/* ===== SEÇÃO DE ITENS ===== */

.cart-items-section {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



/* ===== ITEM DO CARRINHO ===== */

.cart-item {

    background: #ffffff;

    border-radius: 16px;

    padding: 20px;

    border: 1px solid #eef0f3;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    display: grid;

    grid-template-columns: 100px 1fr;

    grid-template-rows: auto 1fr;

    gap: 16px 20px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.cart-item:hover {

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    transform: translateY(-1px);

}



/* ===== LINHA 1: IMAGEM + TÍTULO ===== */



/* Imagem do Produto */

.cart-item-image {

    grid-row: 1 / 2;

    grid-column: 1 / 2;

    width: 100px;

    height: 100px;

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid #f2f4f7;

    transition: all 0.3s ease;

}



.cart-item-image:hover {

    transform: scale(1.03);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.cart-item-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Detalhes do Produto */

.cart-item-details {

    grid-row: 1 / 2;

    grid-column: 2 / 3;

    display: flex;

    flex-direction: column;

    gap: 8px;

    justify-content: center;

}



.cart-item-name {

    font-size: 1rem;

    font-weight: 600;

    color: #101828;

    line-height: 1.4;

}



.cart-item-name a {

    color: inherit;

    text-decoration: none;

    transition: color 0.2s ease;

}



.cart-item-name a:hover {

    color: #28a745;

}



.cart-item-price-mobile {

    display: none;

}



/* ===== LINHA 2: AÇÕES (4 COLUNAS) ===== */



/* Container das ações */

.cart-item > .cart-item-price,

.cart-item > .cart-item-quantity,

.cart-item > .cart-item-subtotal,

.cart-item > .cart-item-remove {

    grid-row: 2 / 3;

}



/* Grid de 4 colunas na segunda linha */

.cart-item > .cart-item-price {

    grid-column: 1 / 2;

}



.cart-item > .cart-item-quantity {

    grid-column: 2 / 3;

}



.cart-item {

    grid-template-columns: repeat(4, 1fr);

}



/* Fazer imagem e detalhes ocuparem todas as colunas */

.cart-item-image {

    grid-column: 1 / 2;

    width: 100px;

    height: 100px;

}



.cart-item-details {

    grid-column: 2 / 5;

}



/* ===== LINHA 2: AÇÕES (Preço, Quantidade, Subtotal, Remover) ===== */



.cart-item-price,

.cart-item-quantity,

.cart-item-subtotal,

.cart-item-remove {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 12px 10px;

    background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);

    border-radius: 10px;

    border: 1px solid #eef0f3;

}



/* Preço Unitário */

.cart-item-price {

    grid-row: 2 / 3;

    grid-column: 1 / 2;

}



.price-label,

.quantity-label,

.subtotal-label {

    font-size: 0.625rem;

    font-weight: 700;

    color: #667085;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.cart-item-price .woocommerce-Price-amount {

    font-size: 0.95rem;

    font-weight: 700;

    color: #28a745;

}



/* Quantidade */

.cart-item-quantity {

    grid-row: 2 / 3;

    grid-column: 2 / 3;

}



.quantity-controls {

    display: flex;

    align-items: center;

    gap: 2px;

    background: #f8f9fb;

    border-radius: 10px;

    padding: 3px;

    border: 2px solid #eef0f3;

}



.qty-btn {

    width: 32px;

    height: 32px;

    border: none;

    background: #ffffff;

    color: #28a745;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

    font-size: 0.75rem;

}



.qty-btn:hover {

    background: #28a745;

    color: white;

    transform: scale(1.08);

}



.qty-btn:active {

    transform: scale(0.95);

}



.quantity input {

    width: 50px;

    height: 32px;

    border: none;

    background: transparent;

    text-align: center;

    font-size: 0.9rem;

    font-weight: 700;

    color: #101828;

}



.quantity input:focus {

    outline: none;

}



/* Esconder label screen-reader */

.screen-reader-text {

    position: absolute;

    left: -9999px;

}



/* Subtotal */

.cart-item-subtotal {

    grid-row: 2 / 3;

    grid-column: 3 / 4;

}



.subtotal-value {

    font-size: 1.1rem;

    font-weight: 700;

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Remover Item */

.cart-item-remove {

    grid-row: 2 / 3;

    grid-column: 4 / 5;

    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);

}



.remove-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    padding: 0;

    background: transparent;

    color: #dc3545;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    font-size: 0.625rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}



.remove-item:hover {

    color: #c82333;

    transform: scale(1.05);

}



.remove-item i {

    font-size: 1.1rem;

    transition: all 0.3s ease;

}



.remove-item:hover i {

    transform: rotate(15deg) scale(1.1);

}



/* ===== CUPOM DE DESCONTO ===== */

.cart-coupon-section {

    background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);

    border-radius: 14px;

    padding: 18px 20px;

    border: 2px dashed #28a745;

}



.coupon-box {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.coupon-box > i {

    font-size: 1.5rem;

    color: #28a745;

    margin-bottom: 2px;

}



.coupon-box label {

    font-size: 0.9rem;

    font-weight: 600;

    color: #101828;

    display: flex;

    align-items: center;

    gap: 6px;

}



.coupon-input-group {

    display: flex;

    gap: 10px;

}



.coupon-input-group input {

    flex: 1;

    padding: 12px 16px;

    border: 2px solid #eef0f3;

    border-radius: 10px;

    font-size: 0.875rem;

    font-weight: 500;

    transition: all 0.2s ease;

}



.coupon-input-group input:focus {

    outline: none;

    border-color: #28a745;

    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);

}



.apply-coupon {

    padding: 12px 24px;

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    color: white;

    border: none;

    border-radius: 10px;

    font-size: 0.875rem;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    align-items: center;

    gap: 6px;

    box-shadow: 0 3px 12px rgba(40, 167, 69, 0.25);

    text-transform: uppercase;

    letter-spacing: 0.03em;

}



.apply-coupon:hover {

    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(40, 167, 69, 0.35);

}



/* ===== RESUMO DO CARRINHO ===== */

.cart-summary-section {

    position: sticky;

    top: 24px;

}



.cart-summary-sticky {

    background: linear-gradient(180deg, #ffffff 0%, #f8fff9 100%);

    border-radius: 24px;

    padding: 36px;

    border: 1px solid #eef0f3;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

}



.summary-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: #101828;

    margin: 0 0 28px 0;

    padding-bottom: 20px;

    border-bottom: 2px solid #f8f9fb;

    display: flex;

    align-items: center;

    gap: 12px;

    letter-spacing: -0.01em;

}



.summary-title i {

    color: #28a745;

    font-size: 1.375rem;

}



/* Totais */

.cart-totals {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 28px;

}



.summary-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

}



.summary-label {

    font-size: 0.9375rem;

    font-weight: 600;

    color: #667085;

}



.summary-value {

    font-size: 1rem;

    font-weight: 700;

    color: #101828;

}



.total-row {

    border-top: 2px solid #f8f9fb;

    padding-top: 20px;

    margin-top: 12px;

}



.total-row .summary-label {

    font-size: 1.125rem;

    color: #101828;

}



.total-value {

    font-size: 1.75rem;

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Botão Finalizar Compra Principal */

.cart-summary-sticky > .checkout-button {

    display: block;

    width: 100%;

    padding: 20px 28px;

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    color: white;

    text-decoration: none;

    text-align: center;

    border-radius: 16px;

    font-size: 1.125rem;

    font-weight: 700;

    letter-spacing: 0.02em;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border: none;

    cursor: pointer;

    box-shadow: 0 8px 28px rgba(40, 167, 69, 0.35);

    margin-bottom: 20px;

    text-transform: uppercase;

}



.cart-summary-sticky > .checkout-button:hover {

    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);

    transform: translateY(-3px);

    box-shadow: 0 12px 36px rgba(40, 167, 69, 0.45);

}



/* Ações do Carrinho */

.cart-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 24px;

}



.update-cart {

    width: 100%;

    padding: 14px 20px;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);

    color: #101828;

    border: 2px solid #eef0f3;

    border-radius: 12px;

    font-size: 0.9375rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



.update-cart:hover:not(:disabled) {

    background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);

    border-color: #28a745;

    color: #28a745;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);

}



.update-cart:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.cart-actions .checkout-button {

    width: 100%;

    padding: 16px 24px;

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    color: white;

    border: none;

    border-radius: 12px;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);

}



.cart-actions .checkout-button:hover {

    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);

    transform: translateY(-2px);

    box-shadow: 0 8px 28px rgba(40, 167, 69, 0.4);

}



/* Continuar Comprando */

.continue-shopping {

    text-align: center;

    padding: 20px 0;

    border-top: 1px solid #f8f9fb;

    border-bottom: 1px solid #f8f9fb;

    margin-bottom: 24px;

}



.continue-shopping a {

    color: #28a745;

    text-decoration: none;

    font-size: 0.9375rem;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: all 0.2s ease;

}



.continue-shopping a:hover {

    color: #20c997;

    gap: 14px;

}



/* Trust Badges */

.cart-trust-badges {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

}



.trust-badge {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);

    border-radius: 12px;

    border: 1px solid #eef0f3;

}



.trust-badge i {

    font-size: 1.25rem;

    color: #28a745;

    width: 28px;

    text-align: center;

}



.trust-badge span {

    font-size: 0.875rem;

    font-weight: 600;

    color: #101828;

}



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

@media (max-width: 1024px) {

    .cart-layout {

        grid-template-columns: 1fr;

        gap: 32px;

    }

    

    .cart-summary-section {

        position: static;

        order: -1;

    }

    

    .cart-item {

        grid-template-columns: 100px 1fr;

        grid-template-areas:

            "image details"

            "image price"

            "quantity quantity"

            "subtotal subtotal"

            "remove remove";

        gap: 16px;

        padding: 24px;

    }

    

    .cart-item-image {

        grid-area: image;

        width: 100px;

        height: 100px;

    }

    

    .cart-item-details {

        grid-area: details;

    }

    

    .cart-item-price {

        grid-area: price;

        align-items: flex-start;

    }

    

    .cart-item-quantity {

        grid-area: quantity;

        flex-direction: row;

        justify-content: space-between;

    }

    

    .cart-item-subtotal {

        grid-area: subtotal;

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }

    

    .cart-item-remove {

        grid-area: remove;

        justify-content: center;

    }

    

    .remove-item {

        flex-direction: row;

        width: 100%;

        justify-content: center;

    }

}



@media (max-width: 768px) {

    .perfilmil-cart-page {

        padding: 24px 0 60px;

    }

    

    .bd-container {

        padding: 0 16px;

    }

    

    .cart-title {

        font-size: 1.75rem;

        margin-bottom: 28px;

    }

    

    .cart-title i {

        font-size: 1.5rem;

    }

    

    .cart-item {

        border-radius: 20px;

        padding: 20px;

    }

    

    .cart-summary-sticky {

        padding: 28px;

    }

    

    .coupon-input-group {

        flex-direction: column;

    }

    

    .cart-item-price-mobile {

        display: block;

        font-size: 1.125rem;

        font-weight: 700;

        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        background-clip: text;

    }

    

    .cart-item-price,

    .price-label,

    .quantity-label,

    .subtotal-label {

        display: none;

    }

    

    .cart-item-subtotal {

        display: none;

    }

}



@media (max-width: 480px) {

    .cart-title {

        font-size: 1.5rem;

        flex-wrap: wrap;

    }

    

    .cart-count {

        font-size: 1rem;

    }

    

    .cart-item {

        padding: 16px;

        border-radius: 16px;

    }

    

    .cart-item-image {

        width: 80px;

        height: 80px;

    }

    

    .cart-item-name {

        font-size: 1rem;

    }

    

    .cart-summary-sticky {

        padding: 24px;

        border-radius: 20px;

    }

    

    .summary-title {

        font-size: 1.25rem;

    }

    

    .cart-trust-badges {

        gap: 10px;

    }

    

    .trust-badge {

        padding: 10px;

    }

    

    .trust-badge span {

        font-size: 0.8125rem;

    }

}



/* ===== ANIMAÇÕES ===== */

@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.cart-item {

    animation: slideIn 0.4s ease-out;

}



/* ===== MELHORIAS DE ACESSIBILIDADE ===== */

.cart-item:focus-within {

    outline: 2px solid #28a745;

    outline-offset: 4px;

}



button:focus,

input:focus,

a:focus {

    outline: 2px solid #28a745;

    outline-offset: 2px;

}



/* ===== LOADING STATES ===== */

.update-cart.loading {

    position: relative;

    color: transparent;

}



.update-cart.loading::after {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    top: 50%;

    left: 50%;

    margin-left: -10px;

    margin-top: -10px;

    border: 3px solid #eef0f3;

    border-top-color: #28a745;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}