/* ripcard-cart.css — shared cart, checkout, payment, and orders styles */

/* ── Cart bubble ── */
#shopping-cart {
  position: fixed; top: 70px; right: 20px;
  background: #007BFF; color: #fff;
  padding: 10px 16px; border-radius: 25px;
  font-size: 1rem; display: none; align-items: center; gap: .5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,.3); z-index: 1001; cursor: pointer;
  transition: transform .15s ease;
}
#shopping-cart:hover  { transform: scale(1.05); }
#shopping-cart .icon  { font-size: 1.5rem; line-height: 1; }

/* ── Cart panel (slide-in) ── */
#cart-panel {
  position: fixed; top: 0; right: -420px; width: 400px; height: 100vh;
  background: #1a1a1a; z-index: 1100; transition: right .3s ease;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.6);
}
#cart-panel.open { right: 0; }
.cart-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid #333;
}
.cart-panel-header h3 { font-size: 1.25rem; }
.cart-panel-header button {
  background: none; border: none; color: #aaa;
  font-size: 1.5rem; cursor: pointer; padding: 0 4px;
}
.cart-panel-header button:hover { color: #fff; }
#cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty { text-align: center; color: #666; margin-top: 3rem; font-size: .95rem; }
.cart-item {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid #2a2a2a;
}
.cart-item-info .name  { font-size: .95rem; font-weight: bold; }
.cart-item-info .price { font-size: .85rem; color: #aaa; margin-top: 2px; }
.cart-item-qty { display: flex; align-items: center; gap: 6px; }
.qty-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #444; background: #2a2a2a;
  color: #fff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: #007BFF; border-color: #007BFF; }
.cart-item-remove {
  background: none; border: none; color: #555;
  cursor: pointer; font-size: 1.1rem; padding: 0;
}
.cart-item-remove:hover { color: #e74c3c; }
.cart-panel-footer {
  padding: 1.25rem 1.5rem; border-top: 1px solid #333;
  display: flex; flex-direction: column; gap: .75rem;
}

/* ── Discount code (in cart) ── */
.discount-row { display: flex; gap: .5rem; }
.discount-row input {
  flex: 1; padding: .6rem .8rem; background: #2a2a2a;
  border: 1px solid #444; border-radius: 6px;
  color: #fff; font-size: .9rem;
}
.discount-row input:focus { outline: none; border-color: #007BFF; }
.discount-row button {
  padding: .6rem 1rem; background: #333; border: 1px solid #444;
  border-radius: 6px; color: #fff; cursor: pointer; font-size: .9rem;
  white-space: nowrap;
}
.discount-row button:hover { background: #007BFF; border-color: #007BFF; }
.discount-msg { font-size: .82rem; min-height: 18px; }
.discount-msg.ok  { color: #4CAF50; }
.discount-msg.err { color: #e74c3c; }

/* ── Cart totals ── */
.cart-totals { font-size: .95rem; display: flex; flex-direction: column; gap: .3rem; }
.cart-totals .total-row { display: flex; justify-content: space-between; }
.cart-totals .total-row.grand {
  font-weight: bold; font-size: 1.1rem;
  border-top: 1px solid #333; margin-top: .4rem; padding-top: .5rem;
}
.cart-totals .discount-value { color: #4CAF50; }
.btn-checkout {
  padding: 1rem; background: #007BFF; border: none;
  border-radius: 8px; color: #fff; font-size: 1rem; font-weight: bold;
  cursor: pointer; transition: background .2s ease;
}
.btn-checkout:hover    { background: #0056b3; }
.btn-checkout:disabled { background: #444; cursor: not-allowed; }

/* ── Backdrop ── */
#backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 1050;
}
#backdrop.show { display: block; }

/* ── Checkout modal ── */
#checkout-modal {
  display: none; position: fixed; inset: 0;
  z-index: 1200; overflow-y: auto;
  background: rgba(0,0,0,.8);
  justify-content: center; align-items: flex-start;
  padding: 2rem 1rem;
}
#checkout-modal.show { display: flex; }
.checkout-box {
  background: #1a1a1a; border-radius: 12px;
  width: 100%; max-width: 560px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  overflow: hidden;
}
.checkout-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid #2a2a2a;
}
.checkout-header h3 { font-size: 1.2rem; }
.checkout-header button {
  background: none; border: none; color: #aaa;
  font-size: 1.5rem; cursor: pointer;
}
.checkout-header button:hover { color: #fff; }

/* ── Step indicator ── */
.step-indicator {
  display: flex; padding: 1rem 1.5rem; gap: 0;
  border-bottom: 1px solid #2a2a2a;
}
.step {
  flex: 1; text-align: center; font-size: .8rem; color: #555;
  padding-bottom: .5rem; border-bottom: 2px solid #333;
  transition: color .2s, border-color .2s;
}
.step.active { color: #007BFF; border-bottom-color: #007BFF; }
.step.done   { color: #4CAF50; border-bottom-color: #4CAF50; }

.checkout-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* ── Order summary in checkout ── */
.order-summary { background: #222; border-radius: 8px; padding: 1rem; }
.order-summary h4 { margin-bottom: .75rem; font-size: .95rem; color: #aaa; }
.order-summary-item {
  display: flex; justify-content: space-between;
  font-size: .9rem; padding: .25rem 0;
}
.order-summary-divider { border: none; border-top: 1px solid #333; margin: .5rem 0; }
.order-summary-total {
  display: flex; justify-content: space-between;
  font-weight: bold; font-size: 1rem;
}
.order-summary-discount { color: #4CAF50; font-size: .9rem; }

/* ── Shipping form ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: .85rem; color: #aaa; }
.form-group input, .form-group select {
  padding: .65rem .85rem; background: #2a2a2a;
  border: 1px solid #444; border-radius: 6px;
  color: #fff; font-size: .95rem;
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: #007BFF;
}
.form-group select option { background: #2a2a2a; }

/* ── Checkout buttons ── */
.btn-next {
  padding: .9rem; background: #007BFF; border: none;
  border-radius: 8px; color: #fff; font-size: 1rem;
  font-weight: bold; cursor: pointer; transition: background .2s;
}
.btn-next:hover { background: #0056b3; }
.btn-back {
  padding: .9rem; background: transparent; border: 1px solid #444;
  border-radius: 8px; color: #aaa; font-size: 1rem;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.btn-back:hover { border-color: #aaa; color: #fff; }
.btn-row { display: flex; gap: .75rem; }
.btn-row .btn-next { flex: 1; }

/* ── Payment options ── */
.payment-options { display: flex; gap: .5rem; flex-wrap: wrap; }
.payment-opt {
  padding: .5rem 1rem; border: 1px solid #444;
  border-radius: 6px; cursor: pointer; font-size: .9rem;
  background: #2a2a2a; color: #aaa; transition: all .15s;
}
.payment-opt:hover    { border-color: #007BFF; color: #fff; }
.payment-opt.selected { border-color: #007BFF; background: #003580; color: #fff; }

/* ── Payment address box ── */
.payment-address-box {
  background: #0a1628; border: 1px solid #007BFF;
  border-radius: 8px; padding: 1rem;
}
.payment-address-box .label { font-size: .8rem; color: #aaa; margin-bottom: .4rem; }
.payment-address-box .address {
  font-family: monospace; font-size: .85rem; word-break: break-all;
  color: #fff; margin-bottom: .6rem;
}
.copy-btn {
  padding: .4rem .8rem; background: #007BFF; border: none;
  border-radius: 4px; color: #fff; font-size: .8rem; cursor: pointer;
}
.payment-amount {
  text-align: center; font-size: 1.6rem; font-weight: bold;
  color: #4CAF50; padding: .5rem 0;
}
.payment-amount span { font-size: 1rem; color: #aaa; }

/* ── TX hash ── */
.tx-hash-group { display: flex; flex-direction: column; gap: .35rem; }
.tx-hash-group label { font-size: .85rem; color: #aaa; }
.tx-hash-group input {
  padding: .65rem .85rem; background: #2a2a2a;
  border: 1px solid #444; border-radius: 6px;
  color: #fff; font-size: .85rem; font-family: monospace;
}
.tx-hash-group input:focus { outline: none; border-color: #007BFF; }

/* ── Buyer wallet section ── */
.buyer-wallet-section {
  background: #0d1b33; border: 1px solid #1e3a6e;
  border-radius: 8px; padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.buyer-wallet-section .bw-label { font-size: .85rem; color: #aaa; }
.wallet-connect-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.wallet-connect-row input {
  flex: 1; padding: .6rem .85rem; background: #2a2a2a;
  border: 1px solid #444; border-radius: 6px;
  color: #fff; font-size: .83rem; font-family: monospace; min-width: 0;
}
.wallet-connect-row input:focus { outline: none; border-color: #007BFF; }
.btn-connect-small {
  padding: .6rem 1rem; background: #007BFF; border: none;
  border-radius: 6px; color: #fff; font-size: .85rem;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.btn-connect-small:hover { background: #0056b3; }
.wallet-confirmed { font-size: .82rem; color: #4CAF50; word-break: break-all; }

/* ── Blockchain polling status ── */
.polling-box {
  background: #0f1f0f; border: 1px solid #2d4a2d;
  border-radius: 8px; padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  align-items: center; text-align: center;
}
.polling-spinner { font-size: 1.5rem; display: inline-block; animation: spin 1.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.polling-text { font-size: .9rem; color: #8bc48b; }
.polling-sub  { font-size: .78rem; color: #555; }
.payment-note {
  background: #1e2a1e; border: 1px solid #2d4a2d;
  border-radius: 6px; padding: .75rem; font-size: .82rem;
  color: #8bc48b; line-height: 1.5;
}

/* ── Confirmation ── */
.confirm-icon { text-align: center; font-size: 4rem; padding: 1rem 0; }
.confirm-msg  { text-align: center; font-size: 1rem; color: #aaa; line-height: 1.6; }
.confirm-order-id {
  text-align: center; font-size: .85rem; color: #555;
  font-family: monospace; margin-top: .5rem;
}

/* ── Toast ── */
#toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: .75rem 1.5rem;
  border-radius: 8px; font-size: .9rem; z-index: 2000;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
#toast.show { opacity: 1; }

/* ── Payment QR code ── */
.addr-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.addr-text { flex: 1; min-width: 0; }
.qr-wrapper { position: relative; flex-shrink: 0; }
.qr-btn {
  width: 44px; height: 44px; background: #0d1b33;
  border: 1px solid #007BFF; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #007BFF; transition: background .15s, color .15s;
}
.qr-btn:hover, .qr-btn.active { background: #007BFF; color: #fff; }
.qr-popup {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 8px; padding: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.7); z-index: 200; text-align: center;
}
.qr-popup.show { display: block; }
.qr-wrapper:hover .qr-popup { display: block; }
.qr-popup p { font-size: .7rem; color: #333; margin-top: 5px; }

/* ── My Orders button ── */
#orders-btn {
  position: fixed; bottom: 20px; right: 20px;
  background: #2a2a2a; color: #fff; border: none;
  padding: 10px 16px; border-radius: 25px; font-size: .9rem;
  display: flex; align-items: center; gap: .4rem;
  box-shadow: 0 4px 8px rgba(0,0,0,.3); z-index: 1001; cursor: pointer;
  transition: background .2s;
}
#orders-btn:hover { background: #3a3a3a; }

/* ── My Orders modal ── */
#orders-modal {
  display: none; position: fixed; inset: 0; z-index: 1200;
  overflow-y: auto; background: rgba(0,0,0,.85);
  justify-content: center; align-items: flex-start; padding: 2rem 1rem;
}
#orders-modal.show { display: flex; }
.orders-box {
  background: #1a1a1a; border-radius: 12px;
  width: 100%; max-width: 640px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6); overflow: hidden;
}
.orders-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid #2a2a2a;
}
.orders-header h3 { font-size: 1.2rem; }
.orders-header button { background: none; border: none; color: #aaa; font-size: 1.5rem; cursor: pointer; }
.orders-header button:hover { color: #fff; }
.orders-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.orders-lookup-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.orders-lookup-row input {
  flex: 1; padding: .65rem .85rem; background: #2a2a2a;
  border: 1px solid #444; border-radius: 6px;
  color: #fff; font-size: .85rem; font-family: monospace; min-width: 0;
}
.orders-lookup-row input:focus { outline: none; border-color: #007BFF; }
.order-card {
  background: #222; border-radius: 8px; padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  border: 1px solid #2a2a2a;
}
.order-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .5rem; flex-wrap: wrap;
}
.order-id   { font-family: monospace; font-size: .8rem; color: #666; }
.order-date { font-size: .8rem; color: #555; margin-top: 2px; }
.order-status {
  padding: .25rem .7rem; border-radius: 20px;
  font-size: .78rem; font-weight: bold; white-space: nowrap;
}
.status-waiting   { background: #2a2000; color: #f0b429; }
.status-confirmed { background: #0a2010; color: #4CAF50; }
.status-verifying { background: #1a1200; color: #e8a020; }
.status-other     { background: #2a2a2a; color: #888; }
.order-items { font-size: .88rem; color: #ccc; }
.order-item-row { display: flex; justify-content: space-between; padding: .2rem 0; }
.order-divider  { border: none; border-top: 1px solid #333; margin: .35rem 0; }
.order-total-row { display: flex; justify-content: space-between; font-size: .88rem; padding: .15rem 0; }
.order-total-row.grand { font-weight: bold; font-size: .95rem; padding-top: .3rem; }
.order-discount-val { color: #4CAF50; }
.order-network { font-size: .8rem; color: #666; }
.order-tx { font-size: .78rem; color: #555; word-break: break-all; }
.order-tx a { color: #007BFF; text-decoration: none; }
.order-tx a:hover { text-decoration: underline; }
.orders-empty { text-align: center; color: #555; padding: 2rem 0; font-size: .95rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
  #cart-panel { width: 100%; right: -100%; }
  .form-row   { grid-template-columns: 1fr; }
}