/* css/cart.css - cart.php, checkout.php, success.php (Black & Gold) */
:root{--gold:#d4af37;--gold-hi:#f2d675;--gold-lo:#8a6d1b;--text:#f6e9bd;--muted:#b9a569;--panel:#141108;--panel2:#1b1609;--line:#3a2f10;--bg:#050403}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font-family:inherit}

.cp-page{max-width:1240px;margin:0 auto;padding:36px 20px 80px}
.cp-page h1{margin:0 0 6px;font-size:30px;font-weight:700}
.cp-page h1 span{color:var(--gold)}
.cp-sub{margin:0 0 26px;color:var(--muted);font-size:14px}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}

.cp-box{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:20px}
.cp-box h2{margin:0 0 16px;font-size:18px;font-weight:700}

/* cart items */
.ci{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.ci:first-of-type{border-top:0;padding-top:0}
.ci-img{width:96px;height:112px;border-radius:12px;border:1px solid var(--line);object-fit:cover;background:#000}
.ci h3{margin:0 0 6px;font-size:16px;font-weight:600}
.ci h3 a{text-decoration:none}.ci h3 a:hover{color:var(--gold-hi)}
.ci-meta{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.6}
.ci-meta .dot{display:inline-block;width:12px;height:12px;margin-right:5px;border:1px solid rgba(255,255,255,.4);border-radius:50%;vertical-align:-1px}
.ci-tag{display:inline-block;margin:0 6px 6px 0;padding:2px 9px;border:1px solid var(--gold-lo);border-radius:999px;color:var(--gold-hi);font-size:11px}
.ci-right{text-align:right}
.ci-price{color:var(--gold-hi);font-size:19px;font-weight:800}
.ci-unit{color:var(--muted);font-size:12px}
.ci-rm{margin-top:10px;border:0;background:none;color:#ff8f7a;font-size:13px;cursor:pointer;text-decoration:underline}

.stepper{display:inline-flex;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#000}
.stepper button{width:34px;border:0;background:var(--panel2);color:var(--gold-hi);font-size:18px;cursor:pointer}
.stepper button:hover:not(:disabled){background:var(--gold);color:#000}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper span{min-width:44px;display:grid;place-items:center;font-weight:700}

/* summary */
.sum{position:sticky;top:20px}
.sum-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;color:var(--muted)}
.sum-row b{color:var(--text)}
.sum-total{margin-top:8px;padding-top:14px;border-top:1px solid var(--line);color:var(--text);font-size:18px;font-weight:700}
.sum-total b{color:var(--gold-hi);font-size:24px}
.free{color:#7ee0a0!important}

.btn-gold{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:15px 18px;border:1px solid var(--gold-hi);border-radius:12px;background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#000;font-size:16px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:filter .2s,transform .2s}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-gold:disabled{opacity:.5;cursor:default;transform:none}
.btn-line{display:inline-block;margin-top:14px;color:var(--gold-hi);font-size:14px;text-decoration:underline}

.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.empty h2{color:var(--text)}
.empty .btn-gold{display:inline-flex;width:auto;padding:14px 34px}

/* forms */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg .full{grid-column:1/-1}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.3px}
.fg input,.fg select,.fg textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#0b0904;color:var(--text);font-size:14px;outline:0}
.fg textarea{min-height:80px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold)}
.err{margin:0 0 16px;padding:12px 14px;border:1px solid #a33;border-radius:10px;background:rgba(220,60,60,.1);color:#ff9d8f;font-size:14px}
.err ul{margin:0;padding-left:18px}

.mini{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.mini:first-of-type{border-top:0}
.mini img{width:48px;height:56px;border-radius:8px;object-fit:cover;background:#000}
.mini div{flex:1;min-width:0}
.mini small{display:block;color:var(--muted)}

/* success */
.ok-wrap{max-width:720px;margin:0 auto;text-align:center}
.ok-ic{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:rgba(126,224,160,.12);border:2px solid #7ee0a0;color:#7ee0a0;font-size:40px}
.ok-no{display:inline-block;margin:10px 0 24px;padding:8px 18px;border:1px dashed var(--gold);border-radius:10px;color:var(--gold-hi);font-weight:700;letter-spacing:1px}
.ok-box{text-align:left}
.ok-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.ok-actions .btn-gold{width:auto;margin:0;padding:13px 28px}

@media (max-width:900px){
    .cp-grid{grid-template-columns:1fr}
    .sum{position:static}
}
@media (max-width:560px){
    .cp-page{padding:22px 12px 60px}
    .cp-page h1{font-size:24px}
    .ci{grid-template-columns:72px minmax(0,1fr)}
    .ci-img{width:72px;height:88px}
    .ci-right{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-align:left}
    .ci-rm{margin:0}
    .fg{grid-template-columns:1fr}
}