/* ═══════════════════════════════════════════════════
   VirtualCards Pro — Shop Module CSS
═══════════════════════════════════════════════════ */

/* ── Shop Header ── */
.vcp-shop-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin: 32px 0 24px;
}
.vcp-shop-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.vcp-shop-subtitle { color: var(--vcp-text-dim); font-size: 14px; margin-top: 4px; font-family: var(--vcp-font-mono); }

/* ── Filter Bar ── */
.vcp-shop-filterbar {
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px;
  background: var(--vcp-bg2); border: 1px solid var(--vcp-border);
  border-radius: var(--vcp-radius); padding: 18px 20px;
}
.vcp-shop-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.vcp-shop-cat-btn {
  font-family: var(--vcp-font-mono); font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--vcp-border);
  background: transparent; color: var(--vcp-text-dim); text-decoration: none;
  transition: all .2s; cursor: pointer; display: inline-block;
}
.vcp-shop-cat-btn:hover,
.vcp-shop-cat-btn.active { border-color: var(--vcp-primary); color: var(--vcp-primary); background: rgba(0,255,136,.08); }
.vcp-shop-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vcp-shop-search { flex: 1; min-width: 200px; }
.vcp-shop-search input {
  width: 100%; padding: 10px 14px; background: var(--vcp-bg3);
  border: 1px solid var(--vcp-border); border-radius: 8px; color: var(--vcp-text);
  font-size: 13px; outline: none; transition: border-color .2s;
}
.vcp-shop-search input:focus { border-color: var(--vcp-primary); }
.vcp-shop-type-filter { display: flex; gap: 6px; }
.vcp-view-toggle { display: flex; gap: 0; border: 1px solid var(--vcp-border); border-radius: 8px; overflow: hidden; }
.vcp-view-btn {
  background: transparent; border: none; color: var(--vcp-text-dim);
  padding: 8px 14px; cursor: pointer; font-size: 16px; transition: all .2s;
}
.vcp-view-btn.active { background: rgba(0,255,136,.1); color: var(--vcp-primary); }

/* ── Product Grid ── */
.vcps-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin-bottom: 24px;
}
.vcps-empty { text-align: center; padding: 60px 24px; color: var(--vcp-text-dim); }

/* ── Product Card ── */
.vcps-card {
  background: var(--vcp-bg2); border: 1px solid var(--vcp-border);
  border-radius: var(--vcp-radius); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.vcps-card:hover {
  transform: translateY(-4px); border-color: var(--vcp-border2);
  box-shadow: 0 12px 40px rgba(0,255,136,.12);
}
.vcps-card.vcps-locked { opacity: .85; }

/* ── Wishlist button ── */
.vcps-wish-btn {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(13,17,23,.75); backdrop-filter: blur(8px);
  border: 1px solid var(--vcp-border); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.vcps-wish-btn:hover, .vcps-wish-btn.active { border-color: #ff4d6d; transform: scale(1.1); }
.vcps-wish-btn-sm {
  background: transparent; border: 1px solid var(--vcp-border);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 14px;
  transition: all .2s;
}
.vcps-wish-btn-sm:hover, .vcps-wish-btn-sm.active { border-color: #ff4d6d; }

/* ── Badges ── */
.vcps-badges { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 56px); }
.vcps-badge {
  font-family: var(--vcp-font-mono); font-size: 9px; font-weight: 700;
  padding: 3px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px;
}
.vcps-badge-flash  { background: rgba(255,215,0,.2); color: var(--vcp-gold); border: 1px solid rgba(255,215,0,.4); animation: vcps-pulse 1.5s ease-in-out infinite; }
.vcps-badge-new    { background: rgba(0,255,136,.15); color: var(--vcp-primary); border: 1px solid rgba(0,255,136,.3); }
.vcps-badge-hot    { background: rgba(255,100,0,.15); color: #ff6400; border: 1px solid rgba(255,100,0,.3); }
.vcps-badge-feat   { background: rgba(255,215,0,.1); color: var(--vcp-gold); border: 1px solid rgba(255,215,0,.25); }
.vcps-badge-low    { background: rgba(255,170,0,.12); color: #ffaa00; border: 1px solid rgba(255,170,0,.3); }
.vcps-badge-sold   { background: rgba(255,77,109,.12); color: var(--vcp-red); border: 1px solid rgba(255,77,109,.3); }
.vcps-badge-lock   { background: rgba(255,215,0,.1); color: var(--vcp-gold); border: 1px solid rgba(255,215,0,.25); }
.vcps-badge-type   { background: rgba(0,204,255,.08); color: var(--vcp-secondary); border: 1px solid rgba(0,204,255,.2); }
@keyframes vcps-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── Product Image ── */
.vcps-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--vcp-bg3); }
.vcps-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.vcps-card:hover .vcps-img { transform: scale(1.04); }
.vcps-img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 52px; background: linear-gradient(135deg, var(--vcp-bg3), #0a1420);
}

/* ── Lock overlay ── */
.vcps-lock-overlay {
  position: absolute; inset: 0; background: rgba(8,11,15,.8); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 16px;
}
.vcps-lock-icon { font-size: 32px; }
.vcps-lock-msg { font-size: 13px; color: var(--vcp-text); }
.vcps-unlock-link {
  font-family: var(--vcp-font-mono); font-size: 11px; color: var(--vcp-gold);
  border: 1px solid rgba(255,215,0,.3); padding: 5px 12px; border-radius: 5px;
  text-decoration: none; margin-top: 4px; transition: all .2s;
}
.vcps-unlock-link:hover { background: rgba(255,215,0,.1); }

/* ── Product Info ── */
.vcps-info { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vcps-cat { font-family: var(--vcp-font-mono); font-size: 10px; color: var(--vcp-secondary); text-transform: uppercase; letter-spacing: .5px; }
.vcps-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.vcps-excerpt { font-size: 12px; color: var(--vcp-text-dim); line-height: 1.5; }
.vcps-stock { font-size: 12px; font-family: var(--vcp-font-mono); }

/* ── Price Row ── */
.vcps-price-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vcps-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.vcps-price { font-family: var(--vcp-font-mono); font-size: 18px; font-weight: 700; color: var(--vcp-primary); }
.vcps-price-flash { font-family: var(--vcp-font-mono); font-size: 18px; font-weight: 700; color: var(--vcp-gold); }
.vcps-price-orig { font-family: var(--vcp-font-mono); font-size: 12px; color: var(--vcp-text-dim); text-decoration: line-through; }
.vcps-ship-note { font-family: var(--vcp-font-mono); font-size: 10px; color: var(--vcp-text-dim); }
.vcps-free-ship { font-family: var(--vcp-font-mono); font-size: 10px; color: var(--vcp-primary); }

/* ── Flash Timer ── */
.vcps-flash-timer { display: flex; flex-direction: column; align-items: flex-end; }
.vcps-timer-label { font-family: var(--vcp-font-mono); font-size: 9px; color: var(--vcp-gold); text-transform: uppercase; letter-spacing: .3px; }
.vcps-timer-val { font-family: var(--vcp-font-mono); font-size: 13px; font-weight: 700; color: var(--vcp-gold); }

/* ── Card Actions ── */
.vcps-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }

/* ── Cart Sidebar ── */
.vcps-cart-sidebar {
  position: fixed; top: 0; right: -420px; width: 400px; max-width: 95vw; height: 100vh;
  background: var(--vcp-bg2); border-left: 1px solid var(--vcp-border);
  z-index: 1100; transition: right .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.vcps-cart-sidebar.open { right: 0; }
.vcps-cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1099;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.vcps-cart-overlay.show { opacity: 1; pointer-events: all; }

.vcps-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--vcp-border);
  font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0;
}
.vcps-cart-close {
  background: none; border: 1px solid var(--vcp-border); color: var(--vcp-text-dim);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.vcps-cart-close:hover { border-color: var(--vcp-red); color: var(--vcp-red); }
.vcps-cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
.vcps-cart-empty { text-align: center; padding: 40px 0; color: var(--vcp-text-dim); font-size: 13px; }

.vcps-cart-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.vcps-ci-img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--vcp-border); flex-shrink: 0; }
.vcps-ci-img-placeholder { width: 52px; height: 52px; background: var(--vcp-bg3); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.vcps-ci-info { flex: 1; }
.vcps-ci-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 4px; }
.vcps-ci-type { font-family: var(--vcp-font-mono); font-size: 10px; color: var(--vcp-secondary); }
.vcps-ci-price { font-family: var(--vcp-font-mono); font-size: 13px; color: var(--vcp-primary); font-weight: 700; }
.vcps-ci-ship { font-family: var(--vcp-font-mono); font-size: 10px; color: var(--vcp-text-dim); }
.vcps-ci-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.vcps-ci-qty button {
  width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--vcp-border);
  background: var(--vcp-bg3); color: var(--vcp-text); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.vcps-ci-qty button:hover { border-color: var(--vcp-primary); color: var(--vcp-primary); }
.vcps-ci-qty-num { font-family: var(--vcp-font-mono); font-size: 13px; min-width: 20px; text-align: center; }
.vcps-ci-remove { background: none; border: none; color: var(--vcp-text-dim); cursor: pointer; padding: 4px; font-size: 16px; transition: color .2s; flex-shrink: 0; }
.vcps-ci-remove:hover { color: var(--vcp-red); }

.vcps-cart-footer { padding: 16px 24px 24px; border-top: 1px solid var(--vcp-border); flex-shrink: 0; }
.vcps-cart-totals { margin-bottom: 14px; }
.vcps-cart-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--vcp-text-dim); margin-bottom: 6px; }
.vcps-cart-grand { font-size: 17px; font-weight: 800; color: #fff; padding-top: 8px; border-top: 1px solid var(--vcp-border); margin-top: 4px; }
.vcps-cart-grand span:last-child { color: var(--vcp-primary); }

/* Floating Cart Button */
.vcps-float-cart {
  position: fixed; bottom: 28px; right: 28px; z-index: 1050;
  background: var(--vcp-primary); color: #000; border: none;
  width: 56px; height: 56px; border-radius: 50%; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,255,136,.4); transition: transform .2s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center;
}
.vcps-float-cart:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(0,255,136,.5); }
.vcps-float-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--vcp-red); color: #fff; font-size: 10px; font-weight: 700;
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--vcp-font-mono); border: 2px solid var(--vcp-bg);
}

/* ── Checkout Grid ── */
.vcps-checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; margin-top: 8px; }
.vcps-address-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vcps-address-radio { cursor: pointer; }
.vcps-address-radio input { display: none; }
.vcps-address-card {
  padding: 14px 16px; border: 1px solid var(--vcp-border); border-radius: 10px;
  background: var(--vcp-bg3); transition: all .2s;
}
.vcps-address-radio input:checked + .vcps-address-card,
.vcps-address-card.default { border-color: var(--vcp-primary); background: rgba(0,255,136,.04); }
.vcps-addr-label { font-family: var(--vcp-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--vcp-primary); margin-bottom: 4px; }
.vcps-addr-name { font-size: 14px; font-weight: 600; color: #fff; }
.vcps-addr-detail { font-size: 12px; color: var(--vcp-text-dim); margin-top: 2px; }

/* ── Order Summary items ── */
.vcps-summary-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.vcps-si-img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--vcp-border); }
.vcps-si-placeholder { width: 44px; height: 44px; background: var(--vcp-bg3); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.vcps-si-info { flex: 1; }
.vcps-si-name { font-size: 13px; color: #fff; font-weight: 600; }
.vcps-si-qty { font-size: 11px; color: var(--vcp-text-dim); font-family: var(--vcp-font-mono); }
.vcps-si-price { font-family: var(--vcp-font-mono); font-size: 14px; color: var(--vcp-primary); font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .vcps-checkout-grid { grid-template-columns: 1fr; }
  .vcps-grid-view { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 600px) {
  .vcps-grid-view { grid-template-columns: 1fr 1fr; }
  .vcps-cart-sidebar { width: 100%; right: -100%; }
}
@media (max-width: 400px) {
  .vcps-grid-view { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   PHASE 2 — Orders, Checkout Totals, Progress
═══════════════════════════════════════════════ */

/* ── Order Page Tabs ── */
.vcp-orders-tabs {
  display: flex; gap: 4px; margin-bottom: 24px;
  border-bottom: 1px solid var(--vcp-border); padding-bottom: 0;
}
.vcp-orders-tab {
  font-family: var(--vcp-font-mono); font-size: 12px; font-weight: 700;
  padding: 10px 20px; text-decoration: none; color: var(--vcp-text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .2s; display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .5px;
}
.vcp-orders-tab:hover { color: var(--vcp-primary); }
.vcp-orders-tab.active { color: var(--vcp-primary); border-bottom-color: var(--vcp-primary); }
.vcp-count-badge {
  background: rgba(0,255,136,.12); color: var(--vcp-primary);
  font-size: 10px; padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--vcp-border);
}

/* ── Redesigned Order Row (Phase 2) ── */
.vcp-orders-list { display: flex; flex-direction: column; gap: 12px; }
.vcp-order-row-main {
  display: flex; align-items: flex-start; gap: 16px;
}
.vcp-order-icon { flex-shrink: 0; }
.vcp-order-meta { flex: 1; min-width: 0; }
.vcp-order-name {
  font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.vcp-order-sub {
  font-family: var(--vcp-font-mono); font-size: 11px;
  color: var(--vcp-text-dim); line-height: 1.6;
}
.vcp-order-right {
  flex-shrink: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.vcp-order-amount {
  font-family: var(--vcp-font-mono); font-size: 17px;
  font-weight: 800; color: var(--vcp-primary);
}
.vcp-order-footer {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.vcp-order-status.placed     { background:rgba(0,204,255,.08); color:#00ccff; border:1px solid rgba(0,204,255,.25); }
.vcp-order-status.processing { background:rgba(255,215,0,.08); color:var(--vcp-gold); border:1px solid rgba(255,215,0,.25); }
.vcp-order-status.packed     { background:rgba(255,140,0,.08); color:#ff8c00; border:1px solid rgba(255,140,0,.25); }
.vcp-order-status.shipped    { background:rgba(0,255,204,.08); color:#00ffcc; border:1px solid rgba(0,255,204,.25); }
.vcp-order-status.delivered  { background:rgba(0,255,136,.1);  color:var(--vcp-primary); border:1px solid rgba(0,255,136,.3); }
.vcp-order-status.completed  { background:rgba(0,255,136,.1);  color:var(--vcp-primary); border:1px solid rgba(0,255,136,.3); }
.vcp-order-status.cancelled  { background:rgba(255,77,109,.08); color:var(--vcp-red); border:1px solid rgba(255,77,109,.25); }

/* ── Shipment Progress Bar ── */
.vcp-order-progress {
  display: flex; align-items: center; margin: 16px 0 4px;
  overflow-x: auto; padding: 4px 0 8px;
}
.vcp-progress-step {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; min-width: 72px;
}
.vcp-progress-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--vcp-bg3); border: 2px solid rgba(255,255,255,.15);
  transition: all .3s; position: relative; z-index: 1;
}
.vcp-progress-step.done .vcp-progress-dot {
  background: var(--vcp-primary); border-color: var(--vcp-primary);
  box-shadow: 0 0 8px rgba(0,255,136,.5);
}
.vcp-progress-step.current .vcp-progress-dot {
  background: var(--vcp-primary); border-color: var(--vcp-primary);
  box-shadow: 0 0 0 4px rgba(0,255,136,.2);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 4px rgba(0,255,136,.2)} 50%{box-shadow:0 0 0 8px rgba(0,255,136,.08)} }
.vcp-progress-label {
  font-family: var(--vcp-font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--vcp-text-dim); margin-top: 6px; text-align: center;
}
.vcp-progress-step.done .vcp-progress-label,
.vcp-progress-step.current .vcp-progress-label { color: var(--vcp-primary); }
.vcp-progress-line {
  flex: 1; height: 2px; background: rgba(255,255,255,.08);
  min-width: 20px; transition: background .3s;
}
.vcp-progress-line.done { background: var(--vcp-primary); opacity: .5; }

/* ── Shop order item tags ── */
.vcp-shop-order-items { display: flex; flex-wrap: wrap; gap: 6px; }
.vcp-soi-tag {
  font-family: var(--vcp-font-mono); font-size: 11px;
  background: var(--vcp-bg3); border: 1px solid var(--vcp-border);
  padding: 4px 10px; border-radius: 6px; color: var(--vcp-text-dim);
}

/* ── Checkout: address grid ── */
.vcps-addr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.vcps-addr-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .vcps-addr-grid { grid-template-columns: 1fr; } .vcps-addr-full { grid-column: 1; } }

/* ── Checkout: order summary totals ── */
.vcps-summary-totals {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--vcp-border);
}
.vcps-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--vcp-text-dim); padding: 5px 0;
}
.vcps-grand-total {
  font-size: 18px; font-weight: 800; color: #fff !important;
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid var(--vcp-border);
}

/* ── Checkout: wallet balance check ── */
.vcps-wallet-check {
  background: var(--vcp-bg3); border: 1px solid var(--vcp-border);
  border-radius: 10px; padding: 14px 16px; margin-top: 14px;
}

/* ── Added to cart button state ── */
.vcps-add-cart.vcps-added { background: rgba(0,255,136,.15) !important; color: var(--vcp-primary) !important; }

/* ── Rating section ── */
.vcp-rating-section {
  display: flex; flex-direction: column; gap: 4px;
}

/* ── Admin alert inline ── */
.vcp-alert-admin {
  padding: 12px 16px; border-radius: 8px; font-size: 13px;
  font-family: var(--vcp-font-mono); display: none;
}
.vcp-alert-admin.show { display: block; }
.vcp-alert-admin.success { background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.25); color: var(--vcp-primary); }
.vcp-alert-admin.error   { background: rgba(255,77,109,.08); border: 1px solid rgba(255,77,109,.25); color: var(--vcp-red); }

/* ── Responsive tweaks ── */
@media (max-width: 700px) {
  .vcp-order-row-main { flex-wrap: wrap; }
  .vcp-order-right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .vcp-orders-tabs { overflow-x: auto; white-space: nowrap; }
}