/* =========================================================
   NEXXO — carrinho.css
========================================================= */

/* ── Página ───────────────────────────────── */
.cart-page{ padding:40px 0 80px; min-height:80vh; }

.cart-title{
    font-size:1.8rem; font-weight:800;
    margin-bottom:32px;
    display:flex; align-items:center; gap:12px;
}

.cart-count{
    font-size:.85rem; font-weight:600;
    color:#00d9ff;
    background:rgba(0,217,255,.1);
    border:1px solid rgba(0,217,255,.3);
    padding:4px 12px; border-radius:20px;
}

/* ── Vazio ───────────────────────────────── */
.cart-empty{ text-align:center; padding:80px 20px; }
.cart-empty-icon{ font-size:5rem; opacity:.4; margin-bottom:20px; }
.cart-empty h2{ font-size:1.5rem; margin-bottom:10px; }
.cart-empty p{ color:rgba(255,255,255,.5); margin-bottom:28px; }

/* ── Layout ──────────────────────────────── */
.cart-layout{ display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; }
.cart-left{ display:flex; flex-direction:column; gap:20px; }

/* ── Itens ───────────────────────────────── */
.cart-items{ display:flex; flex-direction:column; gap:14px; }

.cart-item{
    display:grid;
    grid-template-columns:90px 1fr auto auto auto;
    align-items:center; gap:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px; padding:16px;
    transition:border-color .2s;
}
.cart-item:hover{ border-color:rgba(0,217,255,.25); }

.cart-item-img{ width:90px; height:90px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.05); flex-shrink:0; }
.cart-item-img img{ width:100%; height:100%; object-fit:cover; }

.cart-item-info h3{ font-size:.95rem; font-weight:600; margin-bottom:4px; }
.cart-item-variant{ display:block; font-size:.78rem; color:rgba(255,255,255,.45); margin-bottom:2px; }
.cart-item-price{ font-size:1rem; font-weight:700; color:#00d9ff; margin-top:6px; }

.cart-item-qty{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border-radius:10px; padding:6px 10px; }
.qty-btn{ background:none; border:none; color:white; font-size:1.1rem; cursor:pointer; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:background .2s; }
.qty-btn:hover{ background:rgba(0,217,255,.15); }
.qty-value{ font-weight:700; min-width:20px; text-align:center; }

.cart-item-subtotal{ font-weight:700; font-size:1rem; min-width:90px; text-align:right; }

.cart-item-remove{ background:none; border:none; color:rgba(255,255,255,.3); font-size:1rem; cursor:pointer; padding:6px; border-radius:8px; transition:color .2s,background .2s; }
.cart-item-remove:hover{ color:#ff4444; background:rgba(255,68,68,.1); }

.cart-actions-row{ display:flex; justify-content:space-between; gap:12px; padding-top:4px; }

/* ── Sugestões ───────────────────────────── */
.cart-suggestions{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px; padding:20px 22px;
}
.suggestions-title{ font-size:.9rem; font-weight:700; color:rgba(255,255,255,.6); margin-bottom:14px; }
.suggestions-grid{ display:flex; gap:12px; }

.suggestion-card{
    flex:1; display:flex; flex-direction:column; gap:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:12px;
    transition:border-color .2s, transform .15s;
    text-decoration:none; color:inherit;
}
.suggestion-card:hover{ border-color:rgba(0,217,255,.3); transform:translateY(-2px); }
.suggestion-card img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.suggestion-info{ display:flex; flex-direction:column; gap:4px; }
.suggestion-info span{ font-size:.78rem; color:rgba(255,255,255,.65); line-height:1.3; }
.suggestion-info strong{ font-size:.88rem; color:#00d9ff; }

/* ── Resumo ──────────────────────────────── */
.cart-summary{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px; padding:28px;
    position:sticky; top:100px;
    display:flex; flex-direction:column; gap:0;
}
.cart-summary h2{ font-size:1.1rem; font-weight:700; margin-bottom:16px; }

/* moedas preview */
.coins-preview{
    background:rgba(255,184,0,.08);
    border:1px solid rgba(255,184,0,.25);
    border-radius:10px; padding:10px 14px;
    font-size:.82rem; color:#ffb800;
    margin-bottom:16px; line-height:1.4;
}

.summary-row{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem; color:rgba(255,255,255,.7); margin-bottom:10px; }
.discount-row span:last-child{ color:#00d084; font-weight:700; }
.summary-divider{ height:1px; background:rgba(255,255,255,.08); margin:12px 0; }
.summary-total{ font-size:1.1rem; font-weight:800; color:white; }
.free-ship{ color:#00d084; font-weight:600; }
.free-ship-hint{ font-size:.78rem; color:#ffb800; text-align:center; margin-bottom:10px; }

/* ── Cupom ───────────────────────────────── */
.coupon-box{ display:flex; gap:8px; margin:14px 0 4px; }
.coupon-box input{
    flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; padding:10px 14px; color:white; font-size:.88rem;
}
.coupon-box input:focus{ outline:none; border-color:rgba(0,217,255,.5); }
.coupon-box button{
    background:rgba(0,217,255,.15); border:1px solid rgba(0,217,255,.3);
    color:#00d9ff; font-weight:700; font-size:.85rem;
    padding:10px 16px; border-radius:10px; cursor:pointer; white-space:nowrap;
    transition:background .2s; font-family:'Inter',sans-serif;
}
.coupon-box button:hover{ background:rgba(0,217,255,.25); }
.coupon-msg{ font-size:.8rem; min-height:18px; margin-bottom:8px; }
.coupon-msg.ok{ color:#00d084; }
.coupon-msg.err{ color:#ff6666; }

.coupon-applied{
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(0,208,132,.08); border:1px solid rgba(0,208,132,.25);
    border-radius:10px; padding:10px 14px; font-size:.88rem; color:#00d084;
    margin:14px 0 8px;
}
.coupon-remove{ background:none; border:none; color:rgba(0,208,132,.6); cursor:pointer; font-size:1rem; padding:0 4px; }
.coupon-remove:hover{ color:#ff6666; }

/* ── Botões ──────────────────────────────── */
.btn-primary{
    display:inline-block; background:linear-gradient(135deg,#00d9ff,#0099ff);
    color:#000; font-weight:700; padding:12px 24px;
    border-radius:12px; border:none; cursor:pointer;
    transition:opacity .2s,transform .1s; text-decoration:none;
    font-family:'Inter',sans-serif;
}
.btn-primary:hover{ opacity:.9; transform:translateY(-1px); }
.btn-ghost{
    display:inline-block; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7);
    font-weight:600; padding:10px 20px; border-radius:10px; cursor:pointer;
    text-decoration:none; font-size:.9rem; transition:background .2s;
    font-family:'Inter',sans-serif;
}
.btn-ghost:hover{ background:rgba(255,255,255,.1); color:white; }
.btn-sm{ padding:7px 16px; font-size:.82rem; }
.btn-checkout{ width:100%; text-align:center; margin-top:14px; padding:16px; font-size:1rem; }
.summary-secure{ text-align:center; font-size:.75rem; color:rgba(255,255,255,.35); margin-top:10px; }

/* ── Popup login ─────────────────────────── */
.login-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    display:none; align-items:center; justify-content:center;
    z-index:9999; backdrop-filter:blur(4px);
}
.login-popup{
    background:#0d1525; border:1px solid rgba(0,217,255,.3);
    border-radius:20px; padding:36px 32px; max-width:380px; width:90%;
    text-align:center; position:relative;
}
.popup-close{
    position:absolute; top:14px; right:16px;
    background:none; border:none; color:rgba(255,255,255,.4);
    font-size:1.1rem; cursor:pointer;
}
.popup-close:hover{ color:white; }
.popup-icon{ font-size:3rem; margin-bottom:14px; }
.login-popup h2{ font-size:1.3rem; font-weight:800; margin-bottom:10px; }
.login-popup p{ font-size:.88rem; color:rgba(255,255,255,.6); margin-bottom:22px; line-height:1.5; }
.popup-skip{
    display:block; width:100%; background:none; border:none;
    color:rgba(255,255,255,.3); font-size:.8rem; cursor:pointer;
    margin-top:14px; text-decoration:underline; font-family:'Inter',sans-serif;
}
.popup-skip:hover{ color:rgba(255,255,255,.6); }

/* ── Checkout steps ──────────────────────── */
.checkout-steps{ display:flex; align-items:center; gap:8px; margin-bottom:32px; }
.step{ display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.3); }
.step span{ width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.step.active{ color:#00d9ff; }
.step.active span{ background:rgba(0,217,255,.2); border:1px solid #00d9ff; }
.step.done{ color:#00d084; }
.step.done span{ background:rgba(0,208,132,.2); }
.step-divider{ flex:1; height:1px; background:rgba(255,255,255,.1); max-width:60px; }

/* ── Checkout layout ─────────────────────── */
.checkout-layout{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
.checkout-errors{ background:rgba(255,68,68,.1); border:1px solid rgba(255,68,68,.3); border-radius:12px; padding:16px 20px; margin-bottom:24px; }
.checkout-errors p{ font-size:.88rem; color:#ff8888; margin-bottom:4px; }

.form-section{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:28px; margin-bottom:24px; }
.form-section h2{ font-size:1rem; font-weight:700; margin-bottom:20px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group.full{ grid-column:1/-1; }
.form-group label{ font-size:.8rem; font-weight:600; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.05em; }
.form-group input,.form-group select{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:11px 14px; color:white; font-size:.9rem; transition:border-color .2s; }
.form-group input:focus,.form-group select:focus{ outline:none; border-color:rgba(0,217,255,.5); background:rgba(0,217,255,.05); }
.form-group select option{ background:#0d1117; }

.payment-options{ display:flex; flex-direction:column; gap:10px; }
.payment-option{ cursor:pointer; }
.payment-option input{ display:none; }
.payment-card{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px 18px; transition:border-color .2s,background .2s; }
.payment-card:hover{ border-color:rgba(0,217,255,.3); }
.payment-card.selected{ border-color:#00d9ff; background:rgba(0,217,255,.08); }
.pay-icon{ font-size:1.6rem; flex-shrink:0; }
.payment-card strong{ display:block; font-size:.9rem; }
.payment-card p{ font-size:.78rem; color:rgba(255,255,255,.45); margin-top:2px; }

.checkout-summary .checkout-item-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; font-size:.85rem; }
.checkout-item-name{ color:rgba(255,255,255,.7); flex:1; }
.checkout-item-name small{ display:inline-block; margin-left:4px; opacity:.5; }
.xp-hint{ font-size:.82rem; color:#ffb800; text-align:center; margin:12px 0; padding:10px; background:rgba(255,184,0,.08); border-radius:10px; }

/* ── Confirmado ──────────────────────────── */
.confirmed-box{ max-width:680px; margin:0 auto; text-align:center; padding:40px 0; }
.confirmed-icon{ font-size:4rem; margin-bottom:20px; }
.confirmed-box h1{ font-size:2rem; font-weight:800; margin-bottom:12px; }
.confirmed-sub{ color:rgba(255,255,255,.6); margin-bottom:24px; line-height:1.6; }
.xp-badge{ display:inline-block; background:rgba(255,184,0,.15); border:1px solid rgba(255,184,0,.4); color:#ffb800; font-weight:700; padding:10px 20px; border-radius:30px; margin-bottom:32px; font-size:.95rem; }
.confirmed-details{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:20px 24px; margin-bottom:24px; text-align:left; }
.confirmed-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.9rem; }
.confirmed-row:last-child{ border-bottom:none; }
.confirmed-row span{ color:rgba(255,255,255,.5); flex-shrink:0; }
.confirmed-row strong{ text-align:right; }
.status-badge{ color:#ffb800; }
.confirmed-items{ text-align:left; margin-bottom:24px; }
.confirmed-items h3{ font-size:.95rem; font-weight:700; margin-bottom:12px; color:rgba(255,255,255,.7); }
.confirmed-item{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.confirmed-item img{ width:52px; height:52px; object-fit:cover; border-radius:10px; background:rgba(255,255,255,.05); flex-shrink:0; }
.confirmed-item-info{ flex:1; }
.confirmed-item-info strong{ display:block; font-size:.9rem; margin-bottom:2px; }
.confirmed-item-info span{ font-size:.78rem; color:rgba(255,255,255,.45); }
.confirmed-item-price{ font-weight:700; font-size:.9rem; }
.pix-box{ background:rgba(0,208,132,.06); border:1px solid rgba(0,208,132,.25); border-radius:16px; padding:20px 24px; text-align:left; margin-bottom:24px; }
.pix-box h3{ font-size:1rem; font-weight:700; margin-bottom:10px; color:#00d084; }
.pix-box p{ font-size:.88rem; color:rgba(255,255,255,.6); line-height:1.5; margin-bottom:12px; }
.pix-key{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.3); border-radius:10px; padding:12px 16px; font-size:.9rem; flex-wrap:wrap; }
.pix-key span{ color:rgba(255,255,255,.5); }
.pix-key button{ background:rgba(0,208,132,.2); border:1px solid rgba(0,208,132,.4); color:#00d084; padding:5px 14px; border-radius:8px; cursor:pointer; font-size:.82rem; font-family:'Inter',sans-serif; transition:background .2s; }
.pix-key button:hover{ background:rgba(0,208,132,.35); }
.confirmed-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* ── Pedidos ─────────────────────────────── */
.orders-list{ display:flex; flex-direction:column; gap:20px; }
.order-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:22px 24px; transition:border-color .2s; }
.order-card:hover{ border-color:rgba(0,217,255,.2); }
.order-card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.order-id{ font-weight:700; font-size:1rem; margin-right:12px; }
.order-date{ font-size:.8rem; color:rgba(255,255,255,.4); }
.order-status{ font-weight:700; font-size:.88rem; }
.order-items-preview{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.order-item-preview{ display:flex; align-items:center; gap:12px; }
.order-item-preview img{ width:46px; height:46px; object-fit:cover; border-radius:10px; background:rgba(255,255,255,.05); flex-shrink:0; }
.order-item-preview div strong{ display:block; font-size:.88rem; margin-bottom:2px; }
.order-item-preview div span{ font-size:.78rem; color:rgba(255,255,255,.45); }
.order-more{ font-size:.8rem; color:rgba(255,255,255,.35); padding-left:58px; }
.order-card-footer{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.06); padding-top:14px; gap:12px; flex-wrap:wrap; }
.order-info-row{ display:flex; gap:16px; align-items:center; font-size:.85rem; color:rgba(255,255,255,.5); }
.order-total strong{ color:white; }

/* ── Responsive ──────────────────────────── */
@media(max-width:900px){
    .cart-layout,.checkout-layout{ grid-template-columns:1fr; }
    .cart-summary{ position:static; }
    .suggestions-grid{ flex-direction:column; }
    .cart-item{ grid-template-columns:70px 1fr; grid-template-rows:auto auto auto; }
    .cart-item-img{ width:70px; height:70px; grid-row:1/3; }
    .cart-item-qty,.cart-item-subtotal,.cart-item-remove{ grid-column:2; }
}
@media(max-width:600px){
    .form-grid{ grid-template-columns:1fr; }
    .form-group.full{ grid-column:1; }
    .checkout-steps{ font-size:.75rem; }
    .confirmed-box h1{ font-size:1.5rem; }
}


/* =========================================================
   MÚLTIPLOS CUPONS — chips, lista de disponíveis
========================================================= */

/* Chips dos cupons aplicados */
.coupons-applied-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:14px 0 8px;
}
.coupon-chip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,208,132,.08);
    border:1px solid rgba(0,208,132,.25);
    border-radius:10px;
    padding:10px 14px;
    font-size:.88rem;
    color:#00d084;
}
.coupon-chip .coupon-remove{
    background:none;
    border:none;
    color:rgba(0,208,132,.55);
    cursor:pointer;
    font-size:.95rem;
    padding:0 4px;
    line-height:1;
}
.coupon-chip .coupon-remove:hover{ color:#ff6666; }

/* Toggle "Ver meus cupons" */
.my-coupons-toggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    padding:11px 14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    cursor:pointer;
    font-size:.85rem;
    font-weight:600;
    color:rgba(255,255,255,.75);
    transition:background .2s, border-color .2s;
}
.my-coupons-toggle:hover{
    background:rgba(0,217,255,.06);
    border-color:rgba(0,217,255,.2);
}
.my-coupons-toggle .arrow{
    font-size:.85rem;
    opacity:.5;
    transition:transform .2s;
}
.my-coupons-toggle.active .arrow{
    transform:rotate(180deg);
    color:#00d9ff;
    opacity:1;
}

/* Painel da lista de cupons disponíveis */
.my-coupons-panel{
    display:none;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
    padding:8px;
    background:rgba(0,0,0,.2);
    border-radius:10px;
    border:1px solid rgba(255,255,255,.05);
    max-height:280px;
    overflow-y:auto;
}
.my-coupons-panel.open{
    display:flex;
}

.my-coupon-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    cursor:pointer;
    transition:border-color .15s, background .15s;
}
.my-coupon-row:hover{
    border-color:rgba(0,217,255,.4);
    background:rgba(0,217,255,.06);
}
.my-coupon-icon{
    font-size:1.3rem;
    width:32px;
    text-align:center;
    flex-shrink:0;
}
.my-coupon-info{
    flex:1;
    min-width:0;
}
.my-coupon-info strong{
    display:block;
    font-family:monospace;
    font-size:.85rem;
    letter-spacing:.05em;
    color:#00d9ff;
    margin-bottom:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.my-coupon-info small{
    font-size:.72rem;
    color:rgba(255,255,255,.45);
}
.my-coupon-value{
    font-size:.85rem;
    font-weight:700;
    color:#ffb800;
    white-space:nowrap;
}

.no-coupons{
    text-align:center;
    padding:24px 14px;
    color:rgba(255,255,255,.4);
    font-size:.82rem;
}


/* =========================================================
   CHECKOUT v2 — endereços salvos e cartão
========================================================= */

/* Endereços salvos */
.saved-addresses{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.addr-option{ cursor:pointer; }
.addr-option input{ display:none; }
.addr-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    padding:14px 16px;
    height:100%;
    transition:border-color .2s, background .2s;
}
.addr-option:hover .addr-card{ border-color:rgba(0,217,255,.3); }
.addr-option input:checked + .addr-card{
    border-color:#00d9ff;
    background:rgba(0,217,255,.06);
}
.addr-card strong{ display:block; font-size:.92rem; margin-bottom:4px; }
.addr-card p{ font-size:.82rem; color:rgba(255,255,255,.65); margin-bottom:4px; }
.addr-card small{ font-size:.74rem; color:rgba(255,255,255,.4); line-height:1.4; }
.addr-card.addr-new{ border-style:dashed; opacity:.8; }

/* Save addr checkbox */
.save-addr-row{ margin-top:6px; }
.checkbox-label{
    display:flex; align-items:center; gap:8px;
    cursor:pointer; font-size:.88rem; color:rgba(255,255,255,.7);
}
.checkbox-label input{ accent-color:#00d9ff; cursor:pointer; }

/* Card form box */
.card-form-box{
    margin-top:18px;
    background:rgba(0,217,255,.03);
    border:1px solid rgba(0,217,255,.15);
    border-radius:14px;
    padding:20px;
}
.card-form-box h3{
    font-size:.95rem;
    font-weight:700;
    margin-bottom:14px;
    color:rgba(255,255,255,.85);
}
.card-error{
    color:#ff8888;
    font-size:.85rem;
    margin-top:10px;
    min-height:18px;
}

/* Botão submit disabled */
.btn-checkout:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}