/* ==========================================================================
   Borogame Shop — Consolidated Stylesheet
   Used by: shop.tpl, orders.tpl, admin_orders.tpl
   Design tokens match the main Borogame client theme (dark / gold).
   ========================================================================== */

:root{
    --boro-bg:      #152331;
    --boro-card:    #1e2336;
    --boro-card2:   #222840;
    --boro-border:  rgba(255,255,255,.07);
    --boro-gold:    #F9B53A;
    --boro-gold-10: rgba(249,181,58,.10);
    --boro-muted:   #7b839a;
    --boro-text:    #e8eaf0;
    --boro-green:   #2fb344;
    --boro-blue:    #4dabf7;
    --boro-red:     #e53935;
    --boro-orange:  #fd7e14;
}

body.boro-shop{ background: var(--boro-bg) !important; }

/* ---------- Page hero (shared: shop / orders) ---------- */
.shop-hero{
    background: linear-gradient(135deg, rgba(249,181,58,.14) 0%, rgba(249,181,58,.03) 100%);
    border-bottom: 1px solid rgba(249,181,58,.18);
    padding: 2.5rem 0 2rem; text-align:center;
}
.shop-hero h1{ font-size:1.9rem; font-weight:800; color:#fff; margin:0; }
.shop-hero h1 span{ color: var(--boro-gold); }
.shop-hero p{ color: var(--boro-muted); margin-top:.35rem; font-size:.9rem; }

/* ---------- Pill sub-navigation ---------- */
.shop-nav{ display:flex; justify-content:center; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.shop-nav a{
    font-size:.8rem; padding:.3rem .85rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.1); color: var(--boro-muted);
    text-decoration:none; transition:all .2s;
}
.shop-nav a:hover, .shop-nav a.active{
    border-color: var(--boro-gold); color: var(--boro-gold); background: rgba(249,181,58,.1);
}

/* ---------- Product grid / cards ---------- */
.products-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:1.2rem; padding:2rem 0 4rem;
}
.product-card{
    background: var(--boro-card); border:1px solid var(--boro-border);
    border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
    transition: transform .2s, border-color .2s, box-shadow .2s; position:relative;
}
.product-card:hover{
    transform: translateY(-4px); border-color: rgba(249,181,58,.35);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.pimg{
    width:100%; height:185px; background: linear-gradient(135deg,#1e2535,#252d40);
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.pimg img{ width:100%; height:100%; object-fit:cover; }
.pimg .emoji{ font-size:4rem; }
.pbadge{
    position:absolute; top:.6rem; right:.6rem; background: var(--boro-gold); color:#1a1e2e;
    font-size:.68rem; font-weight:700; padding:.15rem .55rem; border-radius:999px;
}
.ptag{ position:absolute; top:.6rem; left:.6rem; font-size:.68rem; padding:.15rem .55rem; border-radius:999px; }
.ptag-in{ background: rgba(47,179,68,.15); color: var(--boro-green); border:1px solid rgba(47,179,68,.3); }
.ptag-out{ background: rgba(229,57,53,.12); color: var(--boro-red); border:1px solid rgba(229,57,53,.3); }

.pbody{ padding:.95rem 1rem 1.1rem; flex:1; display:flex; flex-direction:column; }
.pname{ font-size:.95rem; font-weight:700; color:#fff; margin-bottom:.3rem; }
.pdesc{ font-size:.78rem; color: var(--boro-muted); line-height:1.65; flex:1; margin-bottom:.85rem; }
.pfooter{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.pprice{ font-size:1rem; font-weight:800; color: var(--boro-gold); }
.pprice small{ font-size:.65rem; color: var(--boro-muted); font-weight:400; display:block; }

.btn-add{
    background: var(--boro-gold); color:#1a1e2e; border:none; border-radius:9px;
    padding:.42rem .95rem; font-weight:700; font-size:.82rem; cursor:pointer;
    text-decoration:none; white-space:nowrap; transition:opacity .2s, transform .1s;
    display:inline-block; font-family:inherit;
}
.btn-add:hover{ opacity:.86; transform:scale(1.03); color:#1a1e2e; }
.btn-add.disabled{ background:#2d3347; color: var(--boro-muted); cursor:not-allowed; pointer-events:none; }

@media(max-width:600px){ .products-grid{ grid-template-columns:repeat(2,1fr); gap:.75rem; } }

/* ---------- Address modal (shop.tpl) ---------- */
.modal-bg{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:9999; align-items:center; justify-content:center; }
.modal-bg.open{ display:flex; }
.modal-box{
    background: var(--boro-card); border:1px solid rgba(249,181,58,.22); border-radius:16px;
    padding:1.6rem; width:480px; max-width:95%; max-height:90vh; overflow-y:auto;
}
.modal-box h3{ color: var(--boro-gold); font-size:1rem; margin:0 0 1.1rem; }
.modal-box label{ font-size:.78rem; color: var(--boro-muted); display:block; margin-bottom:.25rem; }
.modal-box input, .modal-box textarea{
    width:100%; background:#141820; border:1px solid rgba(255,255,255,.1); color: var(--boro-text);
    border-radius:8px; padding:.45rem .75rem; font-size:.85rem; margin-bottom:.85rem;
    font-family:inherit; transition:border-color .2s;
}
.modal-box input:focus, .modal-box textarea:focus{ outline:none; border-color: var(--boro-gold); }
.modal-box textarea{ min-height:80px; resize:vertical; }
.modal-footer{ display:flex; gap:.6rem; justify-content:flex-end; }
.btn-modal-cancel{
    background:transparent; border:1px solid rgba(255,255,255,.12); color: var(--boro-muted);
    border-radius:9px; padding:.42rem .95rem; font-size:.82rem; cursor:pointer; font-family:inherit;
}
.btn-modal-cancel:hover{ color: var(--boro-text); }
.btn-modal-submit{
    background: var(--boro-gold); color:#1a1e2e; border:none; border-radius:9px;
    padding:.42rem 1.1rem; font-weight:700; font-size:.82rem; cursor:pointer; font-family:inherit;
}
.btn-modal-submit:hover{ opacity:.88; }

/* ---------- Orders (client, card layout) ---------- */
.orders-wrap{ max-width:820px; margin:2rem auto; padding:0 1.25rem 4rem; }
.ocard{ background: var(--boro-card); border:1px solid var(--boro-border); border-radius:14px; margin-bottom:1.1rem; overflow:hidden; transition:border-color .2s; }
.ocard:hover{ border-color: rgba(249,181,58,.22); }
.ocard.cancelled{ border-color: rgba(229,57,53,.18); opacity:.88; }
.ohead{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; gap:.5rem; }
.oname{ font-weight:700; color:#fff; font-size:.95rem; }
.ometa{ font-size:.72rem; color: var(--boro-muted); margin-top:.15rem; }
.ometa b{ color: var(--boro-gold); }
.spill{ padding:.22rem .8rem; border-radius:999px; font-size:.73rem; font-weight:600; white-space:nowrap; }
.obody{ padding:1.1rem 1.2rem; }

.stepper{ display:flex; align-items:flex-start; position:relative; margin-bottom:1.1rem; }
.sl-bg{ position:absolute; top:17px; right:calc(16.66% + 17px); left:calc(16.66% + 17px); height:2px; background:rgba(255,255,255,.08); z-index:0; }
.sl-fill{ position:absolute; top:17px; right:calc(16.66% + 17px); height:2px; background: var(--boro-green); z-index:1; transition:width .5s ease; }
.step{ flex:1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.step-dot{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.1); background:#141820; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:all .3s; }
.step.done .step-dot{ border-color: var(--boro-green); background: rgba(47,179,68,.15); }
.step.cur .step-dot{ border-color: var(--boro-gold); background: rgba(249,181,58,.15); box-shadow:0 0 0 4px rgba(249,181,58,.1); }
.step-lbl{ margin-top:.4rem; font-size:.68rem; color: var(--boro-muted); text-align:center; line-height:1.4; }
.step.done .step-lbl{ color: var(--boro-green); }
.step.cur .step-lbl{ color: var(--boro-gold); font-weight:700; }

.info-row{ display:flex; gap:1.5rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.06); padding-top:.85rem; margin-top:.85rem; }
.info-item label{ font-size:.7rem; color: var(--boro-muted); display:block; margin-bottom:.1rem; }
.info-item span{ font-size:.83rem; font-weight:600; color: var(--boro-text); }

.cancel-box{ background: rgba(229,57,53,.07); border:1px solid rgba(229,57,53,.18); border-radius:10px; padding:.7rem 1rem; margin-top:.8rem; font-size:.82rem; color: var(--boro-red); }
.cancel-box b{ display:block; margin-bottom:.2rem; }
.cancel-reason{ color: var(--boro-text); margin-top:.3rem; font-size:.82rem; }

.track-link{
    display:inline-flex; align-items:center; gap:.3rem; background: rgba(77,171,247,.08);
    border:1px solid rgba(77,171,247,.2); color: var(--boro-blue); border-radius:8px;
    padding:.3rem .75rem; font-size:.76rem; text-decoration:none; margin-top:.7rem;
}
.track-link:hover{ background: rgba(77,171,247,.15); color: var(--boro-blue); }

@media(max-width:500px){
    .sl-bg, .sl-fill{ display:none; }
    .step-lbl{ font-size:.6rem; }
    .step-dot{ width:28px; height:28px; font-size:.78rem; }
}

/* ---------- Empty state (shared) ---------- */
.boro-empty{ text-align:center; padding: 3.5rem 1rem; color: var(--boro-muted); }
.boro-empty .icon{ font-size:3.5rem; margin-bottom:1rem; }
.boro-empty a{ color: var(--boro-gold); font-weight:600; text-decoration:none; display:inline-block; margin-top:.75rem; }

/* ==========================================================================
   Admin orders (admin_orders.tpl)
   ========================================================================== */
.boro-admin [data-bs-theme]{ color-scheme: dark; }
.boro-admin .card{ background: var(--boro-card) !important; border:1px solid var(--boro-border) !important; }
.boro-admin .card-header{ background: var(--boro-card) !important; border-bottom:1px solid var(--boro-border) !important; }
.boro-admin .card-footer{ background: var(--boro-card) !important; border-top:1px solid var(--boro-border) !important; }
.boro-admin .table{ color: var(--boro-text) !important; }
.boro-admin .table > thead{ background:#171d2d; border-bottom:1px solid var(--boro-border); }
.boro-admin .table > thead th{ color: var(--boro-muted); font-weight:600; }
.boro-admin .table > tbody > tr{ border-color: rgba(255,255,255,.04); }
.boro-admin .table > tbody > tr:hover > td{ background: rgba(249,181,58,.03); }
.boro-admin .form-control, .boro-admin .form-select{
    background-color:#141820 !important; border-color: rgba(255,255,255,.12) !important; color: var(--boro-text) !important;
}
.boro-admin .form-control:focus, .boro-admin .form-select:focus{
    border-color: var(--boro-gold) !important; box-shadow: 0 0 0 .2rem rgba(249,181,58,.15) !important;
}
.boro-admin .modal-content{ background: var(--boro-card); border:1px solid rgba(255,255,255,.1); }
.boro-admin .modal-header, .boro-admin .modal-footer{ border-color: rgba(255,255,255,.07); }
.boro-admin .btn-close{ filter: invert(1) opacity(.6); }
.boro-admin .page-link{ background-color: var(--boro-card2); border-color: var(--boro-border); color: var(--boro-text); }
.boro-admin .page-link:hover{ background-color: var(--boro-gold-10); color: var(--boro-gold); }
.boro-admin .page-item.active .page-link{ background-color: var(--boro-gold); border-color: var(--boro-gold); color:#1a1e2e; font-weight:700; }
.boro-admin .text-secondary{ color: var(--boro-muted) !important; }
.boro-admin .badge{ font-weight:600; }

.boro-admin .online-pill{
    display:inline-flex; align-items:center; gap:.35rem; background: rgba(47,179,68,.1);
    border:1px solid rgba(47,179,68,.25); color: var(--boro-green); border-radius:999px; padding:.2rem .7rem; font-size:.75rem;
}
.boro-admin .online-dot{ width:7px; height:7px; background: var(--boro-green); border-radius:50%; animation: boro-pulse 1.5s infinite; }
@keyframes boro-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.boro-admin .stat-badge{ display:inline-flex; flex-direction:column; align-items:center; padding:.6rem 1.2rem; border-radius:12px; min-width:90px; }
.boro-admin .stat-badge .n{ font-size:1.5rem; font-weight:800; }
.boro-admin .stat-badge .l{ font-size:.72rem; margin-top:.1rem; opacity:.8; }

.boro-admin .addr-toggle{ cursor:pointer; color: var(--boro-blue); font-size:.72rem; text-decoration:underline; white-space:nowrap; }
.boro-admin .addr-detail{ display:none; font-size:.72rem; color: var(--boro-text); margin-top:.25rem; line-height:1.6; white-space:normal; }
.boro-admin .addr-detail.show{ display:block; }

.boro-admin .bg-blue-lt{ background: rgba(77,171,247,.15) !important; color: var(--boro-blue) !important; border:1px solid rgba(77,171,247,.25); }
.boro-admin .bg-green-lt{ background: rgba(47,179,68,.15) !important; color: var(--boro-green) !important; border:1px solid rgba(47,179,68,.25); }
.boro-admin .bg-yellow-lt{ background: rgba(249,181,58,.15) !important; color: var(--boro-gold) !important; border:1px solid rgba(249,181,58,.25); }
.boro-admin .bg-red-lt{ background: rgba(229,57,53,.15) !important; color: var(--boro-red) !important; border:1px solid rgba(229,57,53,.25); }
.boro-admin .bg-orange-lt{ background: rgba(253,126,20,.15) !important; color: var(--boro-orange) !important; border:1px solid rgba(253,126,20,.25); }