/* Shop module: extends TeddyMart' existing dark dashboard theme. */

.shop-content { padding: 18px 22px 34px; max-width: 1720px; width: 100%; margin: 0 auto; }
.shop-topbar .topbar-left h1 { letter-spacing: 0; }
.shop-topbar .topbar-left h1 i { margin-right: 8px; }
.shop-sidebar .logo-icon { background: var(--grad-blue); }

.shop-flash { margin-bottom: 16px; }
.shop-catalog-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 3px 18px; }
.shop-catalog-head p { color: var(--text-muted); font-size: .85rem; margin-top: 3px; }
.shop-catalog-head .shop-admin-link { color: var(--neon-blue); font-size: .8rem; font-weight: 700; }
.shop-catalog-head .shop-admin-link:hover { color: var(--text-bright); }

.shop-store-tabs { display: grid; grid-template-columns: minmax(230px, 1.3fr) repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.shop-store-tab { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; background: rgba(16,16,26,.7); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-weight: 750; font-size: .9rem; text-align: center; transition: var(--trans); }
.shop-store-tab i { color: var(--neon-purple); }
.shop-store-tab:hover { background: var(--bg-3); border-color: rgba(0,212,255,.38); color: var(--text-bright); }
.shop-store-tab.active { background: linear-gradient(100deg, rgba(0,212,255,.18), rgba(86,93,247,.25)); border-color: rgba(0,212,255,.45); color: var(--neon-blue); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.shop-store-tab.all { font-size: 1rem; }

.shop-category-banner { min-height: 76px; position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 22px; overflow: hidden; border: 1px solid rgba(86,93,247,.48); background: linear-gradient(100deg, rgba(30,50,132,.9), rgba(37,65,157,.8) 55%, rgba(10,10,18,.82)); }
.shop-category-banner::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 44%; background: linear-gradient(90deg, transparent, rgba(5,5,8,.12)), url('images/arena-store-hero.png') center 56% / cover no-repeat; opacity: .27; mix-blend-mode: screen; }
.shop-category-banner > * { position: relative; z-index: 1; }
.shop-category-banner i { color: var(--neon-cyan); font-size: 1.15rem; }
.shop-category-banner h2 { font-size: 1.1rem; color: var(--text-bright); }
.shop-category-banner p { margin-left: auto; max-width: 370px; text-align: right; color: #c8d5ff; font-size: .77rem; line-height: 1.35; }

.shop-category-nav { display: flex; gap: 8px; align-items: center; padding: 14px 0; overflow-x: auto; scrollbar-width: thin; }
.shop-category-pill { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 34px; padding: 7px 11px; border: 1px solid var(--border-bright); border-radius: 6px; color: var(--text-muted); background: rgba(16,16,26,.72); font-size: .77rem; font-weight: 700; transition: var(--trans); }
.shop-category-pill:hover, .shop-category-pill.active { color: var(--neon-cyan); border-color: rgba(0,240,255,.45); background: rgba(0,212,255,.1); }

.shop-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.shop-product-card { min-width: 0; min-height: 288px; display: flex; flex-direction: column; padding: 25px 28px 22px; background: linear-gradient(140deg, rgba(15,15,22,.96), rgba(9,9,14,.98)); transition: background .22s ease, transform .22s ease; }
.shop-product-card:hover { position: relative; z-index: 1; background: linear-gradient(140deg, rgba(23,23,37,.98), rgba(10,10,17,.98)); box-shadow: 0 13px 32px rgba(0,0,0,.32); transform: translateY(-2px); }
.shop-product-title { display: flex; gap: 10px; align-items: flex-start; color: var(--text-bright); font-size: .98rem; font-weight: 790; line-height: 1.37; }
.shop-product-title h3 { margin: 0; overflow-wrap: anywhere; }
.shop-product-thumb { flex: 0 0 29px; height: 23px; margin-top: 2px; border: 1px solid rgba(184,41,255,.6); background: url('images/arena-store-hero.png') 74% 48% / 190% auto no-repeat; box-shadow: 0 0 10px rgba(184,41,255,.22); }
.shop-product-desc { min-height: 49px; margin: 15px 0 18px; color: #c5c5d5; font-size: .78rem; font-style: italic; line-height: 1.45; overflow-wrap: anywhere; }
.shop-product-desc::before { content: '›'; font-family: inherit; font-weight: 900; margin-right: 7px; color: var(--neon-cyan); }
.shop-product-bottom { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.shop-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; align-content: end; }
.shop-meta { display: inline-flex; align-items: center; min-height: 31px; padding: 5px 9px; border: 1px solid; border-radius: 6px; color: var(--text); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.shop-meta.price { border-color: rgba(255,45,85,.72); color: #ffd8df; background: rgba(255,45,85,.06); }
.shop-meta.stock { border-color: rgba(0,240,255,.54); color: #c3faff; background: rgba(0,240,255,.04); }
.shop-meta.sold { border-color: rgba(0,255,157,.52); color: #c7ffe6; background: rgba(0,255,157,.04); }
.shop-meta.out { border-color: rgba(138,138,170,.55); color: var(--text-muted); }
.shop-buy-btn { min-width: 142px; min-height: 47px; border-radius: 6px; background: linear-gradient(135deg, #526aff, #5574ed); color: #fff; box-shadow: 0 0 16px rgba(82,106,255,.2); }
.shop-buy-btn:hover { box-shadow: 0 0 26px rgba(82,106,255,.5); }
.shop-buy-btn:disabled { background: #697080; color: #c4c8d1; box-shadow: none; cursor: not-allowed; transform: none; }

.shop-empty { padding: 55px 24px; text-align: center; background: var(--bg-glass); border: 1px dashed var(--border-bright); color: var(--text-muted); }
.shop-empty i { display: block; margin-bottom: 10px; font-size: 1.8rem; color: var(--neon-blue); }
.shop-empty h3 { color: var(--text-bright); font-size: 1rem; margin-bottom: 5px; }
.shop-empty p { font-size: .83rem; }

.shop-order-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; background: var(--border); border: 1px solid var(--border); }
.shop-summary-item { padding: 16px 19px; background: var(--bg-2); }
.shop-summary-item .label { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.shop-summary-item .value { margin-top: 3px; color: var(--neon-cyan); font-size: 1.25rem; font-weight: 800; }
.shop-delivery details summary { color: var(--neon-cyan); font-weight: 700; cursor: pointer; }
.shop-delivery pre { max-width: 280px; max-height: 160px; margin-top: 9px; padding: 10px; overflow: auto; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border-bright); background: var(--bg-0); color: var(--neon-green); font: .74rem/1.5 var(--font-mono); }
.shop-status { display: inline-flex; align-items: center; gap: 6px; font-size: .73rem; font-weight: 700; }
.shop-status.fulfilled { color: var(--neon-green); }.shop-status.refunded { color: var(--text-muted); }

.shop-admin-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.shop-admin-quick .stat-box { min-width: 0; }
.shop-admin-quick .stat-box .value { overflow-wrap: anywhere; }
.shop-admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.shop-admin-tabs a { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid var(--border-bright); border-radius: 6px; color: var(--text-muted); background: var(--bg-2); font-size: .8rem; font-weight: 700; transition: var(--trans); }
.shop-admin-tabs a:hover, .shop-admin-tabs a.active { color: var(--neon-blue); border-color: rgba(0,212,255,.42); background: rgba(0,212,255,.08); }
.shop-admin-split { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.shop-admin-split .card { margin-bottom: 0; }
.shop-admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shop-admin-form-grid .full { grid-column: 1 / -1; }
.shop-admin-form-grid .form-group { margin-bottom: 0; }
.shop-admin-form-grid .form-control { width: 100%; }
.shop-inline-form { display: grid; grid-template-columns: minmax(150px,1.2fr) minmax(110px,.75fr) auto; gap: 8px; align-items: center; }
.shop-inline-form .form-control { min-width: 0; }
.shop-data-title { color: var(--text-bright); font-weight: 750; }.shop-data-sub { margin-top: 3px; color: var(--text-muted); font-size: .72rem; }
.shop-admin-note { padding: 13px 15px; margin-bottom: 16px; border-left: 3px solid var(--neon-blue); background: rgba(0,212,255,.06); color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
.shop-admin-order-actions { display: flex; gap: 7px; }.shop-admin-order-actions form { display: inline; }

@media (max-width: 1180px) { .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.shop-admin-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }.shop-admin-split { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .shop-content { padding: 16px; }.shop-catalog-head { align-items: flex-start; flex-direction: column; }.shop-store-tabs { display: flex; overflow-x: auto; grid-template-columns: none; padding-bottom: 2px; }.shop-store-tab { min-width: 210px; }.shop-category-banner { min-height: 66px; padding: 14px; }.shop-category-banner p { display: none; }.shop-product-grid { grid-template-columns: 1fr; }.shop-product-card { min-height: 254px; padding: 21px 18px 18px; }.shop-order-summary { grid-template-columns: 1fr; }.shop-admin-quick { grid-template-columns: 1fr 1fr; }.shop-admin-form-grid { grid-template-columns: 1fr; }.shop-admin-form-grid .full { grid-column: auto; }.shop-inline-form { grid-template-columns: 1fr; }.shop-buy-btn { min-width: 127px; }.credit-pill { display: none; } }
@media (max-width: 430px) { .shop-product-bottom { grid-template-columns: 1fr; }.shop-buy-btn { width: 100%; }.shop-admin-quick { grid-template-columns: 1fr; }.shop-topbar .topbar-left h1 { font-size: 1rem; } }
.shop-meta.credit { border-color: rgba(184,41,255,.58); color:#ead4ff; background:rgba(184,41,255,.05); }

.admin-product-image-field { display:grid; grid-template-columns:minmax(170px,260px) 1fr; gap:14px; align-items:center; }
.admin-product-image-preview { display:grid; place-items:center; min-height:135px; overflow:hidden; border:1px dashed var(--border-bright); border-radius:12px; color:var(--text-muted); background:var(--bg-1); }
.admin-product-image-preview img { display:block; width:100%; height:150px; object-fit:cover; }
.admin-product-image-help { color:var(--text-muted); font-size:.75rem; line-height:1.55; }
.admin-product-image-help input[type=file] { display:block; width:100%; margin-bottom:8px; }
.shop-store-tab .svg-inline--fa { color:var(--neon-purple); }
.shop-category-banner .svg-inline--fa { color:var(--neon-cyan); width:1.15em; }
.shop-empty>.svg-inline--fa { display:block; width:1.8em; margin:0 auto 10px; color:var(--neon-blue); }

html[data-theme="light"] .shop-store-tab,
html[data-theme="light"] .shop-category-pill,
html[data-theme="light"] .shop-product-card,
html[data-theme="light"] .shop-admin-tabs a { color:#334155; background:#fff; }
html[data-theme="light"] .shop-product-title,
html[data-theme="light"] .shop-empty h3,
html[data-theme="light"] .shop-data-title { color:#0f172a; }
html[data-theme="light"] .shop-product-desc { color:#526176; }
html[data-theme="light"] .shop-product-card:hover { background:#f8fafc; box-shadow:0 13px 32px rgba(15,23,42,.14); }
html[data-theme="light"] .shop-meta.price { color:#9f1239; background:#fff1f2; }
html[data-theme="light"] .shop-meta.stock { color:#155e75; background:#ecfeff; }
html[data-theme="light"] .shop-meta.sold { color:#065f46; background:#ecfdf5; }
html[data-theme="light"] .shop-meta.credit { color:#6b21a8; background:#faf5ff; }
html[data-theme="light"] .shop-category-banner { background:linear-gradient(100deg,#dbeafe,#e0e7ff 55%,#fff); }
html[data-theme="light"] .shop-category-banner p { color:#334155; }

@media (max-width:680px) { .admin-product-image-field { grid-template-columns:1fr; } }
