/* ==========================================================
   Dout | Loja Online — CSS
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --dout-purple: #6f2cff;
    --dout-purple-2: #9b4dff;
    --dout-lilac: #b48cff;
    --dout-pink: #ff2db2;
    --dout-orange: #ff7a1a;
    --bg: #0a0714;
    --bg-alt: #120c22;
    --surface: rgba(255, 255, 255, 0.055);
    --surface-strong: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.09);
    --text: #f2eeff;
    --text-dim: #a79fc4;
    --text-faint: #726a8f;

    --gradient-brand: linear-gradient(135deg, var(--dout-purple) 0%, var(--dout-pink) 55%, var(--dout-orange) 100%);
    --gradient-purple: linear-gradient(135deg, #7c3aff 0%, #b06bff 100%);
    --shadow-soft: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --shadow-neon-purple: 0 0 0 1px rgba(111, 44, 255, 0.35), 0 8px 24px -6px rgba(111, 44, 255, 0.45);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-pill: 999px;

    --font-display: 'Sora', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 90px; /* espaço para a barra flutuante do carrinho */
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.glass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); }
.glass-strong { background: var(--surface-strong); border: 1px solid var(--border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border:none; border-radius:var(--radius-pill); font-family:var(--font-display); font-weight:700; font-size:.95rem; transition:.2s ease; }
.btn-primary { background: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-neon-purple); }
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-2px); }
.btn-primary:disabled { opacity:.5; pointer-events:none; }
.btn-block { width:100%; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); }

/* ---------- Header / hero ---------- */
.loja-header {
    position: relative;
    padding: 60px 20px 30px;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(10,7,20,.55) 0%, rgba(10,7,20,.95) 100%), url('../img/banner.png');
    background-size: cover;
    background-position: center;
}
.loja-header img.logo { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.08), var(--shadow-neon-purple); margin-bottom: 12px; }
.loja-header h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.loja-header p { color: var(--text-dim); font-size: .85rem; margin-top: 4px; }
.loja-status { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:.76rem; font-weight:700; padding:6px 14px; border-radius:999px; background: rgba(55,226,157,.14); color:#37e29d; }
.loja-status .dot { width:7px; height:7px; border-radius:50%; background:#37e29d; box-shadow:0 0 6px #37e29d; }

/* ---------- Categoria (tabs sticky) ---------- */
.cat-tabs { position: sticky; top: 0; z-index: 30; display:flex; gap:8px; overflow-x:auto; padding: 14px 16px; background: rgba(10,7,20,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-pill { flex-shrink:0; padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:.84rem; font-weight:700; color:var(--text-dim); white-space:nowrap; }
.cat-pill.active { background: var(--gradient-purple); color:#fff; border-color:transparent; }

/* ---------- Grid de produtos ---------- */
.catalogo { padding: 20px 16px 10px; max-width: 720px; margin: 0 auto; }
.cat-section-title { font-family: var(--font-display); font-weight:700; font-size:1.05rem; margin: 22px 4px 12px; display:flex; align-items:center; gap:8px; }
.prod-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (min-width: 560px) { .prod-grid { grid-template-columns: 1fr 1fr 1fr; } }

.prod-card { overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition: transform .15s ease; animation: riseIn .4s cubic-bezier(.16,1,.3,1) both; }
.prod-card:active { transform: scale(0.98); }
@keyframes riseIn { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }
.prod-card .pimg { height:110px; background:var(--gradient-purple); display:flex; align-items:center; justify-content:center; font-size:2rem; position:relative; }
.prod-card .pimg img { width:100%; height:100%; object-fit:cover; }
.prod-card .pbody { padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.prod-card .pname { font-weight:700; font-size:.86rem; line-height:1.25; }
.prod-card .pdesc { color:var(--text-faint); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.prod-card .pprice-row { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:6px; }
.prod-card .pprice { font-family:var(--font-display); font-weight:800; color:var(--dout-lilac); font-size:.92rem; }
.prod-card .pprice .old { text-decoration:line-through; color:var(--text-faint); font-weight:400; font-size:.72rem; margin-right:4px; }
.add-fab { width:30px; height:30px; border-radius:50%; background:var(--gradient-brand); color:#fff; border:none; font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-neon-purple); }

/* ---------- Barra flutuante do carrinho ---------- */
.cart-float-bar { position: fixed; bottom: 16px; left: 16px; right:16px; max-width: 690px; margin: 0 auto; z-index: 40; display:none; }
.cart-float-bar.show { display:flex; }
.cart-float-bar a { flex:1; display:flex; align-items:center; justify-content:space-between; padding: 15px 20px; border-radius:var(--radius-pill); background: var(--gradient-brand); color:#fff; font-family:var(--font-display); font-weight:700; box-shadow: var(--shadow-neon-purple); font-size:.9rem; }
.cart-float-bar .cf-badge { background: rgba(255,255,255,.25); border-radius:999px; padding:2px 10px; font-size:.78rem; }

/* ---------- Modal genérico (produto / carrinho / checkout) ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(6,4,14,.68); backdrop-filter: blur(4px); display:none; align-items:flex-end; justify-content:center; z-index:100; }
.modal-overlay.open { display:flex; }
@media (min-width: 560px) { .modal-overlay { align-items:center; padding:20px; } }
.modal-sheet { width:100%; max-width:480px; max-height:92vh; overflow-y:auto; border-radius: 24px 24px 0 0; padding: 22px 20px 100px; position:relative; }
@media (min-width: 560px) { .modal-sheet { border-radius: var(--radius-lg); padding: 26px; max-height: 86vh; } }
.modal-sheet .modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; }
.modal-img { width:100%; height:160px; border-radius:var(--radius-md); overflow:hidden; background:var(--gradient-purple); display:flex; align-items:center; justify-content:center; font-size:2.6rem; margin-bottom:14px; }
.modal-img img { width:100%; height:100%; object-fit:cover; }
.modal-sheet h2 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:4px; }
.modal-sheet .price-line { color: var(--dout-lilac); font-weight:800; font-family:var(--font-display); font-size:1.05rem; margin-bottom:10px; }
.modal-sheet .desc { color:var(--text-dim); font-size:.85rem; margin-bottom:16px; }

.opt-group { margin-bottom:18px; }
.opt-group .opt-title { font-size:.82rem; font-weight:700; margin-bottom:10px; display:flex; justify-content:space-between; }
.opt-title .opt-hint { color:var(--text-faint); font-weight:500; font-size:.72rem; }
.opt-row { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; font-size:.85rem; background: var(--surface); cursor:pointer; }
.opt-row.selected { border-color: var(--dout-purple-2); background: rgba(111,44,255,.12); }
.opt-row input { accent-color: var(--dout-purple-2); width:18px; height:18px; }
.opt-extra { color: var(--dout-lilac); font-size:.78rem; font-weight:700; }

.qty-stepper { display:flex; align-items:center; gap:14px; justify-content:center; margin: 18px 0; }
.qty-stepper button { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:1.1rem; }
.qty-stepper span { font-family:var(--font-display); font-weight:800; font-size:1.1rem; min-width:24px; text-align:center; }

textarea, input[type=text], input[type=tel] {
    width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background: rgba(255,255,255,.04); color:var(--text); font-family:inherit; font-size:.9rem;
}
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; text-align:left; }
.field label { font-size:.78rem; color:var(--text-dim); font-weight:600; }

.modal-sheet .sticky-cta { position:sticky; bottom:-100px; margin-top: 8px; padding-top:14px; }

/* ---------- Carrinho / Checkout ---------- */
.cart-line { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.cart-line .cl-thumb { width:52px; height:52px; border-radius:12px; background:var(--gradient-purple); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; overflow:hidden; }
.cart-line .cl-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-line .cl-info { flex:1; min-width:0; }
.cart-line .cl-name { font-weight:700; font-size:.88rem; }
.cart-line .cl-detail { color:var(--text-faint); font-size:.74rem; margin-top:2px; }
.cart-line .cl-qty { display:flex; align-items:center; gap:8px; margin-top:8px; }
.cart-line .cl-qty button { width:24px; height:24px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.cart-line .cl-price { font-family:var(--font-display); font-weight:700; font-size:.88rem; white-space:nowrap; }
.cart-line .cl-remove { color:#ff6b81; font-size:.72rem; margin-top:6px; display:inline-block; }

.summary-row { display:flex; justify-content:space-between; padding:8px 0; font-size:.87rem; color:var(--text-dim); }
.summary-row.total { font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--text); border-top:1px solid var(--border); padding-top:14px; margin-top:6px; }

.deliv-toggle { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.deliv-toggle label { border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; text-align:center; font-size:.85rem; font-weight:700; cursor:pointer; color:var(--text-dim); }
.deliv-toggle input { display:none; }
.deliv-toggle label:has(input:checked) { border-color: var(--dout-purple-2); background: rgba(111,44,255,.12); color:var(--text); }

.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.pay-grid label { border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; text-align:center; font-size:.82rem; font-weight:700; cursor:pointer; color:var(--text-dim); }
.pay-grid input { display:none; }
.pay-grid label:has(input:checked) { border-color: var(--dout-purple-2); background: rgba(111,44,255,.12); color:var(--text); }

.empty-cart-msg { text-align:center; padding: 60px 20px; color:var(--text-faint); }
.empty-cart-msg .big { font-size:2.4rem; margin-bottom:10px; }

/* ---------- Confirmação ---------- */
.confirm-wrap { max-width: 480px; margin: 60px auto; padding: 0 20px; text-align:center; }
.confirm-icon { width:80px; height:80px; border-radius:50%; background: var(--gradient-brand); display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin: 0 auto 20px; box-shadow: var(--shadow-neon-purple); }
.status-chip { display:inline-flex; font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:999px; text-transform:capitalize; margin-top:10px; }
.status-recebido { color:#8fb3ff; background: rgba(90,140,255,.14); }
.status-preparando { color:var(--dout-orange); background: rgba(255,122,26,.14); }
.status-pronto { color:var(--dout-lilac); background: rgba(180,140,255,.14); }
.status-entregue { color:#37e29d; background: rgba(55,226,157,.14); }
.status-cancelado { color:#ff6b81; background: rgba(255,107,129,.14); }

.top-back { display:flex; align-items:center; gap:10px; padding:16px; position:sticky; top:0; z-index:30; background: rgba(10,7,20,.85); backdrop-filter: blur(14px); border-bottom:1px solid var(--border); }
.top-back .icon-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; }
.top-back h1 { font-family:var(--font-display); font-size:1.05rem; }